/* Setwell / Bluffy site: Bluffy's own arcade look (VT323, navy, cyan, pink) on the taste-skill system. */
@font-face { font-family: "VT323"; src: url("/fonts/VT323.woff2") format("woff2"); font-display: swap; }
:root {
  --p-bg: #070d1a; --p-surface: #0e1a2f; --p-ink: #e8f1ff; --p-muted: #8fa3c4;
  --p-accent: #4de3ff; --p-accent-ink: #070d1a; --p-action: #4de3ff; --p-action-ink: #070d1a;
  --p-inv-bg: #e8f1ff; --p-inv-surface: #d6dfed; --p-inv-ink: #070d1a; --p-inv-muted: #515968;
  --p-inv-accent: #070d1a; --p-inv-accent-ink: #e8f1ff; --p-inv-action: #070d1a; --p-inv-action-ink: #e8f1ff;
  --font-display: "VT323", ui-monospace, "SF Mono", Menlo, monospace;
  --font-text: "VT323", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono: "VT323", ui-monospace, "SF Mono", Menlo, monospace;
  --display-weight: 400; --display-tracking: 0.02em; --display-tracking-xl: 0.02em;
  --pink: #ff5d8f; --gold: #ffd166;
  /* VT323 sets small: the kit's scale, a step up */
  --t-label: 17px; --t-small: 19px; --t-body: 22px; --t-lead: 25px; --t-card: 25px; --t-h3: 30px;
  --t-h2: clamp(32px, 1vw + 25px, 44px); --t-h1: clamp(48px, 3.4vw + 35px, 88px); --ly-h1-side: clamp(40px, 1.6vw + 26px, 50px);
}
/* VT323 has a small x-height: set reading text a step larger than the kit's grotesk defaults */
body { font-size: var(--t-body); line-height: 1.25; -webkit-font-smoothing: none; }
.t-lead, .hero__lead { font-size: 25px; line-height: 1.22; }
h1, h2, h3 { font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
h1 { text-shadow: 0 0 14px rgba(77, 227, 255, .35); }
h2 .muted { text-transform: none; letter-spacing: .01em; }
b, strong { font-weight: 400; color: var(--p-accent); }
.nav__logo { font-size: 28px; letter-spacing: .14em; text-transform: uppercase; }
.nav__link { font-size: 21px; letter-spacing: .06em; }
.btn { font-family: var(--font-display); font-size: 21px; letter-spacing: .08em; text-transform: uppercase; }
.hero-notice { font-size: 19px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin-bottom: 16px; }

/* the hero collage: real app captures, square corners, a neon edge like the app's panels */
.ly-collage .ly-piece { border: 1px solid rgba(77, 227, 255, .45); border-radius: 6px; overflow: hidden; background: var(--p-surface);
  box-shadow: 0 0 0 4px rgba(14, 26, 47, .9), 0 24px 50px -24px #000; }
.ly-collage .ly-piece { height: auto !important; }
.ly-collage .ly-piece img { width: 100%; height: auto; display: block; }

/* three phones, the app at true proportions */
.phones { align-items: start; }
.phone { margin: 0; border: 2px solid rgba(77, 227, 255, .5); border-radius: 30px; overflow: hidden; background: #070d1a;
  aspect-ratio: 860 / 1000; box-shadow: 0 0 0 6px rgba(14, 26, 47, .95), 0 0 36px rgba(77, 227, 255, .14); }
.phone img { display: block; width: 100%; height: auto; }
.phone-notes { margin-top: 20px; }
.phone-notes p { margin: 0; color: var(--p-muted); font-size: 21px; }
.phone-notes b { color: var(--p-ink); }
@media (max-width: 639px) { .phone { aspect-ratio: auto; } .phone-notes { display: none; } }

.types { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.types li b:first-child { color: var(--pink); }
.types-note { margin-top: 24px; color: var(--p-muted); }
.frame--split { border: 1px solid rgba(77, 227, 255, .4); border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; }
.frame--split .frame__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.card--plan { border: 1px solid rgba(125, 147, 184, .38); background: var(--p-surface); padding: 28px; border-radius: 8px; }
.card--plan.is-featured { border-color: var(--p-accent); box-shadow: 0 0 0 1px rgba(77, 227, 255, .5), 0 0 30px rgba(77, 227, 255, .12); }
.card--plan h3 { font-size: 28px; color: var(--p-ink); }
.card--plan .plan__price { font-size: 34px; line-height: 1; margin: 12px 0 16px; color: var(--gold); }
.card--plan .plan__price span { font-size: 22px; color: var(--p-muted); text-transform: uppercase; letter-spacing: .1em; }
.card--plan ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

.faq__item h3 { font-size: 24px; text-transform: none; letter-spacing: .02em; color: var(--p-accent); }
.mail { color: var(--p-accent); user-select: all; }

.close--word .close__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.close--word h2 { margin: 0; }
.close--word .close__word { color: var(--p-accent); letter-spacing: .12em; text-shadow: 0 0 24px rgba(77, 227, 255, .35); }
.close__name-unused { margin: 40px 0 0; font-family: var(--font-display); font-size: clamp(88px, 21vw, 300px); line-height: .8; letter-spacing: .12em;
  color: var(--p-accent); text-shadow: 0 0 24px rgba(77, 227, 255, .35); white-space: nowrap; overflow: hidden; }
.footer__lede { color: var(--p-muted); margin-top: 12px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--p-muted); font-size: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the closing slab stays on Bluffy's dark ground (the kit's lit grounds are light) */
.footer--statement { --ground-bg: #0b1730; --ground-surface: #122340; --ground-ink: #e8f1ff; --ground-muted: #8fa3c4; --ground-accent: #4de3ff;
  border-top: 1px solid rgba(77, 227, 255, .35); }
.footer--statement { --action: var(--p-action); --action-ink: var(--p-action-ink); }
.footer :is(h3) { text-transform: uppercase; letter-spacing: .12em; }
.footer ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-body); }
@media (max-width: 639px) { .nav__actions .btn { font-size: 13px; letter-spacing: 0; padding-inline: 8px; height: 40px; } .nav__actions .btn svg { display: none; } .nav__logo { font-size: 20px; letter-spacing: .04em; } .nav__logo .mark { display: none; } }
.price-shot { margin-top: 28px; border: 1px solid rgba(77, 227, 255, .4); border-radius: 8px; overflow: hidden; }
.price-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 640px) and (max-width: 1023px) { .phones > .phone { grid-column: auto / span 4; } .phone-notes > p { grid-column: auto / span 4; } }
@media (max-width: 639px) { .phones { gap: 20px; } .phones > .phone { max-height: 380px; } }

@media (min-width: 640px) and (max-width: 1023px) { #app { --h: 1 !important; } }
@media (max-width: 1023px) { .price-shot { max-height: 230px; } }
@media (max-width: 359px) { header.nav .nav__actions { display: none !important; } }

/* one button look everywhere: the nav's, the hero's and the close's main action match */
.nav__actions .btn, .hero--triptych .hero__cta .btn, .close--word .btn { height: 48px; font-size: 19px; padding-inline: 22px; }