/* Comparsa · Creator Waitlist Signup · v1 2026-07-24
   Implements design_handoff_creator_waitlist_signup (Emerald Vapor v1.0).
   Tokens are verbatim from the handoff token files; page styles follow the
   handoff README specs. Night is default; day flips via html[data-theme="day"]
   (set from prefers-color-scheme by the inline one-liner in creators.html). */

/* ── Tokens: color (verbatim) ─────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --ink0:#04100E;
  --ink1:#08201B;
  --ink2:#0D2C25;
  --teal-deep:#19594C;
  --teal:#2E8570;
  --seafoam:#63C2A4;
  --mint:#9FE3CD;
  --paper:#F5F1EA;
  --paper-70:rgba(245,241,234,.70);
  --paper-62:rgba(245,241,234,.62);
  --line:rgba(159,227,205,.14);
  --line-soft:rgba(159,227,205,.25);
  --action-fill:var(--seafoam);
  --action-ink:var(--ink0);
  --focus-ring:var(--seafoam);
}
html[data-theme="day"]{
  color-scheme:light;
  --ink0:#F2F6F3;
  --ink1:#E4EEEA;
  --ink2:#D1E2DC;
  --teal-deep:#246C5D;
  --teal:#2E8570;
  --seafoam:#2E8570;
  --mint:#17604F;
  --paper:#12241E;
  --paper-70:rgba(18,36,30,.72);
  --paper-62:rgba(18,36,30,.64);
  --line:rgba(25,89,76,.16);
  --line-soft:rgba(25,89,76,.28);
  --action-fill:var(--teal-deep);
  --action-ink:#F5F1EA;
}

/* ── Tokens: type, shape, layout, motion (verbatim subset) ────────────── */
:root{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-note:13.5px;
  --fs-fine:12.5px;
  --fs-eyebrow:12px;
  --fs-button:12px;
  --fs-caps:11px;
  --fs-flag:10px;
  --ls-button:.18em;
  --ls-eyebrow:.2em;
  --ls-flag:.22em;
  --ls-caps:.24em;
  --r-control:10px;
  --r-card:20px;
  --r-pill:999px;
  --container:1240px;
  --header-h:64px;
  --target-min:44px;
  --control-h:48px;
  --ease-spatial:cubic-bezier(.16,1,.3,1);
  --ease-state:ease;
  --d-state:.18s;
  --d-reveal:.55s;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink0);color:var(--paper);font-family:var(--sans)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.cw-skip{position:absolute;left:-9999px;top:12px;z-index:99;background:var(--mint);color:var(--ink0);padding:12px 20px;font:600 14px var(--sans);text-decoration:none;border-radius:4px}
.cw-skip:focus-visible{left:12px}

/* Wordmark tone swap: never recolor, cross-swap the day/night SVGs. */
.cw-header .wordmark-tone--day{display:none}
html[data-theme="day"] .cw-header .wordmark-tone--day{display:block}
html[data-theme="day"] .cw-header .wordmark-tone--night{display:none}

/* ── Header bar ───────────────────────────────────────────────────────── */
.cw-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.cw-header .cw-brand{display:block;min-height:var(--target-min);display:flex;align-items:center}
.cw-header img{height:20px;width:auto;display:block}
.cw-flag{font:400 var(--fs-flag)/1 var(--mono);letter-spacing:var(--ls-flag);text-transform:uppercase;color:var(--seafoam);white-space:nowrap}
.cw-flag-ext{display:none}

/* ── Signup view ──────────────────────────────────────────────────────── */
.cw-wrap{max-width:var(--container);margin:0 auto}
.cw-intro{padding:30px 20px 8px}
.cw-eyebrow{margin:0;font:600 var(--fs-eyebrow)/1 var(--sans);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--mint)}
.cw-headline{margin:14px 0 0;font-family:var(--sans-display);font-weight:740;font-size:36px;line-height:.95;letter-spacing:-.035em;color:var(--paper);text-wrap:balance}
.cw-subhead{margin:14px 0 0;font:400 15px/1.65 var(--sans);color:var(--paper-70);text-wrap:pretty}
.cw-subhead--desktop{display:none}
.cw-benefits{display:none}

.cw-form{display:grid;gap:18px;padding:24px 20px 28px}
.cw-label{margin:0 0 9px;font:600 var(--fs-caps)/1 var(--sans);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--paper-70)}
.cw-field p.cds-err{margin:10px 0 0}

/* Inputs (handoff .cds-input) */
.cds-input{display:block;width:100%;min-height:var(--control-h);padding:12px 18px;font:400 15px var(--sans);color:var(--paper);background:var(--ink1);border:1px solid var(--line-soft);border-radius:var(--r-control);transition:border-color var(--d-state) var(--ease-state)}
.cds-input::placeholder{color:var(--paper-62)}
.cds-input:focus-visible{outline:2px solid var(--seafoam);outline-offset:2px;border-color:var(--seafoam)}
.cds-input[aria-invalid="true"]{border-color:var(--seafoam)}
.cds-err{margin:12px 0 0;font:400 var(--fs-note)/1.6 var(--sans);color:var(--mint)}

/* Discipline buttons: 10px control radius by rule (999px is CTA-only) */
.cw-chips{display:flex;flex-wrap:wrap;gap:8px}
.cw-chip-btn{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 16px;font:700 var(--fs-button) var(--sans);letter-spacing:var(--ls-button);text-transform:uppercase;color:var(--paper-70);background:transparent;border:1px solid var(--line-soft);border-radius:var(--r-control);cursor:pointer;transition:border-color var(--d-state) var(--ease-state),color var(--d-state) var(--ease-state),background-color var(--d-state) var(--ease-state)}
@media (hover:hover){
  .cw-chip-btn:hover{border-color:var(--seafoam);color:var(--seafoam)}
}
.cw-chip-btn[aria-pressed="true"]{color:var(--seafoam);background:var(--ink1);border-color:var(--seafoam)}

/* Primary CTA (handoff .cds-btn--primary) */
.cds-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-h);padding:16px 28px;font:700 var(--fs-button) var(--sans);letter-spacing:var(--ls-button);text-transform:uppercase;background:var(--action-fill);color:var(--action-ink);border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;transition:background-color var(--d-state) var(--ease-state),color var(--d-state) var(--ease-state)}
.cds-btn:disabled{cursor:default}
@media (hover:hover){
  .cds-btn--primary:hover:not(:disabled){background:var(--mint)}
}
.cw-submit{width:100%;margin-top:6px}
.cw-submit-dot{display:none;flex:none;width:7px;height:7px;border-radius:50%;background:var(--action-ink)}
.cw-form[aria-busy="true"] .cw-submit-dot{display:inline-block;animation:cw-pulse 1.2s var(--ease-state) infinite}
@keyframes cw-pulse{0%,100%{opacity:1}50%{opacity:.25}}

.cw-trust{margin:0;text-align:center;font:400 var(--fs-fine)/1.6 var(--sans);color:var(--paper-62)}

/* Loading state: fields dim and lock; button keeps size and position */
.cw-form[aria-busy="true"] .cds-input{opacity:.7}
.cw-form[aria-busy="true"] .cw-chips{opacity:.85}
.cw-form[aria-busy="true"] .cw-chip-btn,
.cw-form[aria-busy="true"] .cw-submit{cursor:default}

/* ── Success view: a welcome, not a receipt ───────────────────────────── */
.cw-success{padding:44px 20px 48px}
.cds-chip{display:inline-flex;align-items:center;gap:10px;min-height:var(--control-h);padding:12px 22px;background:var(--ink1);border:1px solid var(--line-soft);border-radius:var(--r-pill);color:var(--mint);font:600 13px var(--sans);letter-spacing:.08em;white-space:nowrap}
.cds-chip__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--seafoam)}
.cw-success-headline{margin:24px 0 0;font-family:var(--sans-display);font-weight:740;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--paper);text-wrap:balance}
.cw-success-body{margin:16px 0 0;font:400 15px/1.7 var(--sans);color:var(--paper-70);text-wrap:pretty}
.cw-success-body strong{font-weight:700;color:var(--paper)}
.cw-success-link{margin:22px 0 0;font:400 15px/1 var(--sans)}
.cds-link{color:var(--mint);font-weight:500;text-underline-offset:3px;text-decoration-color:rgba(159,227,205,.4)}
@media (hover:hover){.cds-link:hover{color:var(--seafoam)}}

.cw-success-reveal{animation:cw-reveal var(--d-reveal) var(--ease-spatial)}
@keyframes cw-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Desktop (system breakpoint 767px) ────────────────────────────────── */
@media (min-width:768px){
  .cw-header{min-height:var(--header-h);padding:0 40px;gap:24px}
  .cw-header img{height:22px}
  .cw-flag-ext{display:inline}

  .cw-signup-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;padding:64px 40px 72px;align-items:start}
  .cw-intro{padding:0}
  .cw-headline{margin-top:18px;font-size:56px;line-height:.92;letter-spacing:-.05em}
  .cw-subhead{margin-top:18px;max-width:46ch;font-size:16px;line-height:1.7}
  .cw-subhead--mobile{display:none}
  .cw-subhead--desktop{display:block}

  .cw-benefits{display:block;margin-top:36px}
  .cw-benefit{display:flex;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
  .cw-benefit:first-child{border-top:1px solid var(--line)}
  .cw-benefit-index{flex:none;width:34px;font:700 12px var(--mono);color:var(--seafoam)}
  .cw-benefit h2{margin:0;font:700 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--paper)}
  .cw-benefit p{margin:6px 0 0;font:400 14px/1.6 var(--sans);color:var(--paper-70)}

  .cw-form{border:1px solid var(--line);border-radius:var(--r-card);padding:28px}

  .cw-success{padding:88px 40px 104px}
  .cw-success-inner{max-width:640px}
  .cw-success-headline{margin-top:26px;font-size:52px;line-height:.94;letter-spacing:-.045em}
  .cw-success-body{margin-top:18px;max-width:52ch;font-size:16px}
}

/* ── Reduced motion (verbatim from handoff motion tokens) ─────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}