/* launch-one.css - ONE stylesheet for the home page and the ads page.
   Dark tokens from the app (LCLTheme dark): background #0C0F15, surface #161A23, text #FAF7EF, brand blue #8FB0FF.
   Plus Jakarta Sans (headings, 700) + Hanken Grotesk (body) self-hosted from /fonts/ (launch-fonts.css, linked in each
   page; the CSP allows font-src 'self' only). Radius 14 / 12, flat, 1px borders. No shadows, no gradients. */

:root {
  --bg: #0c0f15; --surface: #161a23; --inset: #12151d;
  --text: #faf7ef; --soft: #c9c6bd; --muted: #8b92a1;
  --blue: #8fb0ff; --blue-hover: #aac3ff; --on-blue: #0c0f15;
  --border: #232832; --field: #2b3244; --bezel: #2a2f3a; --danger: #ff9a9a;
  --heading: "Plus Jakarta Sans", "Avenir Next", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px; --max: 1120px; --radius: 14px;
  --display-xl: clamp(2.75rem, 12.2vw, 7rem);
  --display-l: clamp(2.25rem, 10vw, 5.25rem);
  --capture-w: min(300px, 78vw);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Launch-state switch: <body data-launch-state="request"> shows only data-when="request" elements. */
body:not([data-launch-state="request"]) [data-when="request"],
body:not([data-launch-state="testflight"]) [data-when="testflight"],
body:not([data-launch-state="appstore"]) [data-when="appstore"] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--soft); font: 400 1rem/1.55 var(--body); font-synthesis: none; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
h1, h2, h3 { color: var(--text); font-family: var(--heading); font-weight: 700; letter-spacing: -0.025em; font-synthesis: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-160%); padding: 10px 14px; border-radius: 8px; background: var(--text); color: var(--bg); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- header */
.site-header { width: 100%; max-width: var(--max); margin-inline: auto; padding: 10px var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 700 1.25rem var(--heading); letter-spacing: -0.025em; text-decoration: none; }
.brand:hover { color: var(--text); }
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--soft); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.header-link:hover { color: var(--text); }
.cta-compact { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 12px; background: var(--blue); color: var(--on-blue); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cta-compact:hover { background: var(--blue-hover); color: var(--on-blue); }
@media (max-width: 519px) {
  .brand { font-size: 1.0625rem; gap: 7px; } .brand img { width: 28px; height: 28px; }
  .header-nav { gap: 10px; } .header-link { display: none; }
  .cta-compact { padding: 0 12px; font-size: 0.8125rem; }
}

/* ------------------------------------------------------------------ hero */
.hero { padding-top: clamp(28px, 7vw, 88px); padding-bottom: clamp(56px, 9vw, 120px); }
.hero h1 { font-size: var(--display-xl); line-height: 0.97; letter-spacing: -0.03em; text-wrap: balance; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero h1.long { font-size: clamp(2.35rem, 10.4vw, 5.75rem); max-width: 17ch; line-height: 1; }
.hero h1.long .dim, .statement h2 .dim { color: var(--muted); }
.hero-sub { max-width: 34ch; margin-top: 22px; color: var(--soft); font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.4; text-wrap: pretty; }
.status-line { margin-top: 18px; color: var(--muted); font-size: 0.875rem; font-weight: 500; }

/* ----------------------------------------------------------------- forms */
.signup { margin-top: clamp(24px, 4vw, 36px); max-width: 560px; }
.signup-form { display: flex; flex-direction: column; gap: 14px; }
.request-fields { display: grid; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { color: var(--text); font-size: 0.875rem; font-weight: 600; }
input[type="email"], input[type="text"] { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--surface); color: var(--text); font: 400 1rem var(--body); }
input::placeholder { color: var(--muted); opacity: 1; }
input:hover { border-color: var(--muted); }
input:focus-visible { outline-offset: 1px; border-color: var(--blue); }
input.bad { border-color: var(--danger); }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; font: 600 1rem var(--body); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.button-primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.button-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-blue); }
.button-secondary { background: var(--surface); border-color: var(--field); color: var(--text); }
.request-fields .button, .signup form > .button { width: 100%; }
.privacy-note, .promise { color: var(--muted); font-size: 0.875rem; line-height: 1.5; max-width: 46ch; }
.privacy-note a, .promise a { color: var(--soft); }
.form-error { padding: 10px 12px; border-radius: 10px; background: #2a1517; border: 1px solid #5a2a2d; color: var(--danger); font-weight: 600; }
.form-error[hidden] { display: none; }
.form-note { color: var(--muted); }
@media (min-width: 900px) {
  .hero .request-fields { grid-template-columns: 1.2fr 1fr auto; align-items: end; }
  .hero .signup { max-width: 860px; }
  .hero .request-fields .button { width: auto; }
}
.turnstile-slot:empty:not([data-pending]) { display: none; }
.turnstile-slot[data-pending] { display: block; }
.turnstile-status { margin: 6px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.turnstile-status[data-tone="error"] { color: var(--danger); font-weight: 600; }
.turnstile-status[data-tone="dev"] { padding: 8px 10px; border: 1px dashed var(--muted); border-radius: 8px; }
.confirmation { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--field); }
.confirmation h2 { font-size: 1.5rem; } .confirmation p { margin-top: 8px; }
.confirmation-support { color: var(--muted); font-size: 0.875rem; }

/* ------------------------------------------------------------ statements */
.statement { border-top: 1px solid var(--border); padding-block: clamp(64px, 11vw, 150px); }
.statement-grid { display: grid; gap: 40px; }
.statement h2 { font-size: var(--display-l); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; max-width: 16ch; }
.statement h2 em, .coda h2 em { font-style: normal; color: var(--blue); }
.statement .support { max-width: 30ch; margin-top: 22px; color: var(--soft); font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.4; }
.visual { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visual figcaption { max-width: 30ch; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; text-align: center; }
.tag { align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--field); color: var(--blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 900px) {
  .statement-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 64px; }
  .statement-grid .visual { --capture-w: 320px; }
}

/* A real device capture in a thin bezel with the screen's own ~13 % corner radius. */
.capture { position: relative; width: var(--capture-w); flex: 0 0 auto; overflow: hidden; border: 1px solid var(--bezel); border-radius: calc(var(--capture-w) * 0.13); background: #0c0f15; aspect-ratio: 554 / 1200; }
.capture img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }


/* ------------------------------------------------------------------ coda */
.coda { border-top: 1px solid var(--border); padding-block: clamp(72px, 12vw, 160px); }
.coda h2 { font-size: var(--display-l); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; max-width: 17ch; }
.coda .button { margin-top: 36px; }
.coda .signup { margin-top: 36px; }
.coda .signup .request-fields, .coda .signup-form { max-width: 560px; }

/* ----------------------------------------------------------- trust blocks */
.eyebrow { color: var(--muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.block { border-top: 1px solid var(--border); padding-block: clamp(48px, 8vw, 96px); }
.story-text { max-width: 30ch; margin-top: 14px; color: var(--text); font: 700 clamp(1.375rem, 3.4vw, 2rem)/1.22 var(--heading); letter-spacing: -0.025em; text-wrap: pretty; }
.story-sign { margin-top: 18px; color: var(--muted); font-weight: 500; }
.story-sign + .story-sign { margin-top: 6px; }
.story-sign a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.story-sign a:hover { color: var(--text); }
.founder-who { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.founder-who i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--field); color: var(--blue); font: 700 1.25rem var(--heading); font-style: normal; }
.coverage-line { max-width: 22ch; margin-top: 10px; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.town-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.town-list li { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--soft); font-size: 0.9375rem; }
.faq h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
.faq-list { margin-top: 20px; max-width: 760px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--blue); font: 400 1.5rem/1 var(--body); }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { padding: 0 0 18px; max-width: 60ch; }
.site-footer { width: 100%; max-width: var(--max); margin-inline: auto; padding: 36px var(--gutter) 48px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; color: var(--muted); font-size: 0.875rem; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { border-radius: 5px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; color: var(--soft); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ----------------------------------------------------- ads page specifics */
/* The hero line is chosen by ?v=a|b|c (ads/variant.js sets html[data-v] and swaps the one H1); no v shows A. The per-variant block swaps live in launch-ads.css. */
.ads .hero { padding-bottom: clamp(48px, 8vw, 100px); }
.ads .site-footer { justify-content: flex-start; }
.statement .support.lead { max-width: none; margin: 0; }

/* ================================================== Plans screen replica (HTML/CSS, 552 x 1200 design grid)
   Matches assets/launch/c6-plans-utrecht (dark #0C0F15). Sizes are N * --u (--u = 1/552 of the screen width),
   so the replica scales with its bezel. Rows are examples; thumbnails are solid placeholders. */
.plans { container-type: inline-size; width: 100%; height: 100%; }
.ps { --u: calc(100cqw / 552); position: relative; width: 100%; height: 100%; overflow: hidden; background: #0c0f15; color: #faf7ef; font-family: var(--body); }
.ps * { box-sizing: border-box; }
.ps .sb-time { position: absolute; left: calc(56 * var(--u)); top: calc(30 * var(--u)); width: calc(92 * var(--u)); text-align: center; font: 600 calc(22 * var(--u))/calc(30 * var(--u)) -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: 0.01em; }
.ps .sb-icons { position: absolute; right: calc(48 * var(--u)); top: calc(34 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ps .sb-icons svg { fill: #faf7ef; }
.ps .s-sig { width: calc(28 * var(--u)); height: calc(17 * var(--u)); }
.ps .s-wifi { width: calc(24 * var(--u)); height: calc(18 * var(--u)); }
.ps .s-bat { width: calc(37 * var(--u)); height: calc(18 * var(--u)); }
.ps .avatar { position: absolute; right: calc(23 * var(--u)); top: calc(87 * var(--u)); width: calc(76 * var(--u)); height: calc(58 * var(--u)); border-radius: 999px; background: #181e25; border: calc(1.5 * var(--u)) solid #262c35; display: grid; place-items: center; }
.ps .avatar svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); fill: #8fb0ff; }
.ps .title { position: absolute; left: calc(23 * var(--u)); top: calc(174 * var(--u)); margin: 0; color: #faf7ef; font: 700 calc(41.5 * var(--u))/calc(48 * var(--u)) var(--heading); letter-spacing: -0.025em; }
.ps .seg { position: absolute; left: calc(22 * var(--u)); top: calc(265 * var(--u)); width: calc(507 * var(--u)); height: calc(46 * var(--u)); border-radius: 999px; background: #33353a; border: calc(2 * var(--u)) solid #5a5d64; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: calc(4 * var(--u)); }
.ps .seg span { height: 100%; display: grid; place-items: center; border-radius: 999px; font: 400 calc(18 * var(--u))/1 var(--body); color: #faf7ef; }
.ps .seg span.on { background: #7a7b81; }
.ps .days { position: absolute; left: calc(22 * var(--u)); top: calc(340 * var(--u)); width: calc(507 * var(--u)); display: flex; flex-direction: column; gap: calc(29 * var(--u)); }
.ps .day { border-radius: calc(18 * var(--u)); background: #161a23; border: calc(1 * var(--u)) solid #1e232d; overflow: hidden; }
.ps .day-h { height: calc(58 * var(--u)); display: flex; align-items: baseline; padding: calc(14 * var(--u)) calc(20 * var(--u)) 0; border-bottom: calc(1.5 * var(--u)) solid #232832; white-space: nowrap; }
.ps .day-h b { font: 700 calc(25 * var(--u))/calc(30 * var(--u)) var(--heading); color: #faf7ef; letter-spacing: -0.025em; }
.ps .day-h em { margin-left: calc(8 * var(--u)); font: 400 calc(20 * var(--u))/calc(30 * var(--u)) var(--body); font-style: normal; color: #8b92a1; }
.ps .day-h i { margin-left: auto; font: 600 calc(17 * var(--u))/calc(30 * var(--u)) var(--body); font-style: normal; color: #8b92a1; }
.ps .plan { min-height: calc(87 * var(--u)); display: flex; align-items: center; padding: calc(12 * var(--u)) calc(20 * var(--u)); }
.ps .plan + .plan { border-top: calc(1.5 * var(--u)) solid #232832; }
.ps .when { width: calc(74 * var(--u)); flex: none; }
.ps .when b { display: block; font: 700 calc(22 * var(--u))/calc(26 * var(--u)) var(--heading); color: #faf7ef; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ps .when s { display: block; text-decoration: none; font: 500 calc(16 * var(--u))/calc(22 * var(--u)) var(--body); color: #8b92a1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ps .thumb { width: calc(54 * var(--u)); height: calc(54 * var(--u)); flex: none; border-radius: calc(12 * var(--u)); background: #5d6b83; margin-right: calc(14 * var(--u)); }
.ps .txt { min-width: 0; }
.ps .txt h3 { margin: 0; font: 700 calc(25 * var(--u))/calc(28 * var(--u)) var(--heading); color: #faf7ef; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; letter-spacing: -0.015em; }
.ps .txt p { margin: calc(4 * var(--u)) 0 0; font: 400 calc(18 * var(--u))/calc(24 * var(--u)) var(--body); color: #8b92a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps .free { margin-top: calc(-3 * var(--u)); height: calc(56 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u)); color: #8b92a1; font: 400 calc(19 * var(--u))/1 var(--body); }
.ps .free b { font-weight: 600; }
.ps .free span:last-child { display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: calc(18 * var(--u)); }
.ps .free svg { width: calc(10 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #faf7ef; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ps .more { margin-top: calc(-2 * var(--u)); height: calc(55 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u)); border-radius: calc(18 * var(--u)); background: #12151d; border: calc(1.5 * var(--u)) solid #2b3244; color: #8fb0ff; font: 600 calc(19 * var(--u))/1 var(--body); }
.ps .more svg { width: calc(16 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: #8fb0ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ps .tabbar { position: absolute; left: calc(30 * var(--u)); top: calc(1087 * var(--u)); width: calc(396 * var(--u)); height: calc(83 * var(--u)); border-radius: 999px; background: #1b1e26; border: calc(1.5 * var(--u)) solid #2a2f3a; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: calc(4 * var(--u)); }
.ps .tab { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); border-radius: 999px; font: 500 calc(15 * var(--u))/1 var(--body); color: #faf7ef; }
.ps .tab svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); fill: #faf7ef; }
.ps .tab.on { background: #2a2f3a; color: #faf7ef; }
.ps .tab.on svg { fill: #8fb0ff; }
.ps .searchb { position: absolute; left: calc(438 * var(--u)); top: calc(1087 * var(--u)); width: calc(84 * var(--u)); height: calc(83 * var(--u)); border-radius: 50%; background: #1b1e26; border: calc(1.5 * var(--u)) solid #2a2f3a; display: grid; place-items: center; }
.ps .searchb svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); fill: none; stroke: #faf7ef; stroke-width: 2.2; stroke-linecap: round; }


/* ------------------------------------------------- v5 trust block (founder + coverage in one section) */
.trust-grid { display: grid; gap: 44px; }
.trust .coverage-line { margin-top: 10px; }
@media (min-width: 900px) {
  .trust-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .cta-compact { transition: none; }
}

/* ads page: email-only form (two columns) and the closing button under the founder line */
@media (min-width: 900px) {
  .ads .hero .request-fields { grid-template-columns: 1.4fr auto; }
}
.end-cta { margin-top: 32px; }