/* ===========================================================================
   Hinru — Beta waitlist application
   BROADCAST skin. Obsidian surfaces, everything outlined, Archivo + Archivo Expanded.
   Signature Cobalt drives the one solid action + focus + required marks + chips.
   GOLD is reserved for the ledger / "kept": only the "What you'd keep" box and the
   confirmation "★ kept" stamp. Editorial asides use Georgia italic (the ledger voice).
   =========================================================================== */
:root{
  --page:#08090b; --bg:#0a0b0e; --card:#15171e; --inner:#1d2029; --raised:#1d2029;
  --border:#23262f; --line:#23262f; --input:#30343f;
  --fg:#f4f5f7; --text:#c4c8d0; --muted:#7f848f; --dim:#7f848f; --faint:#5a5f6a;

  /* signature — Cobalt (locked) */
  --sig:#2348d9; --sig-soft:#8fa6ff; --sig-ink:#ffffff;
  /* gold — ledger / "kept" ONLY */
  --gold:#f0b429; --gold-soft:#f8d36b; --gold-ink:#0a0b0e;
  --keep:#7fce6b; --ok:#7fce6b; --watch:#e0a23a; --bad:#cf6a60;

  /* accent = signature by default (tweakable; never gold) */
  --accent:var(--sig); --accent-soft:var(--sig-soft);

  --radius:11px;
  --exp:"Archivo",sans-serif;
  --serif:Georgia,'Times New Roman',serif;   /* ledger / editorial voice only */
  --mono:'SF Mono',SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
*{ box-sizing:border-box; }
html{ scrollbar-gutter:stable; background:var(--bg); }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; position:relative;
}
/* faint broadcast mesh — one quiet texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(900px 520px at 84% -12%, color-mix(in srgb,var(--sig) 9%,transparent), transparent 62%),
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.012) 26px 27px);
}
#root, .nav, .page-body, .foot{ position:relative; z-index:1; }
.exp{ font-family:var(--exp); }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }

/* ---- nav (original one-colour mark + wordmark) ---- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:20px 28px; max-width:1100px; margin:0 auto;
}
.lockup{ display:flex; align-items:center; gap:11px; }
.brand-lockup{ display:block; width:112px; height:auto; }
.pipe{ color:var(--input); font-weight:300; font-size:16px; }
.edition{ color:var(--dim); font-size:12px; letter-spacing:.04em; font-weight:600; }
.nav-back{
  font-size:13px; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
}
.nav-back:hover{ color:var(--text); }

/* ---- page column ---- */
.wrap{ max-width:660px; margin:0 auto; padding:0 24px 90px; }
.header{ text-align:center; padding:46px 0 32px; }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); font-weight:700; margin:0 0 18px;
  display:inline-flex; align-items:center; gap:11px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--sig); display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sig) 16%,transparent), 0 0 11px color-mix(in srgb,var(--sig) 55%,transparent);
}
.header h1{
  font-family:var(--exp); font-weight:900; font-size:clamp(34px,6vw,56px);
  letter-spacing:-.025em; line-height:.98; color:var(--fg); margin:0; text-wrap:balance;
}
.header .lede{
  margin:20px auto 0; max-width:46ch; font-size:16px; line-height:1.6; color:var(--text);
}
.header .lede b{ color:var(--fg); font-weight:700; }
/* quiet secondary link under the primary button (beta-test path) */
.under-link{ display:block; text-align:center; margin:18px auto 0; font-size:15px; font-weight:700;
  color:color-mix(in srgb,var(--sig-soft) 70%,#ffffff); text-decoration:none; transition:color .15s;
  background:none; border:none; cursor:pointer; font-family:inherit; width:100%; padding:0; }
.under-link:hover{ color:#ffffff; }
.under-link:disabled{ color:var(--faint); cursor:not-allowed; }
.under-link:disabled:hover{ color:var(--faint); }

/* hero signal strip — the room dots, the one place hue lives up top */
.hero-strip{ display:flex; align-items:center; justify-content:center; gap:12px; margin:28px auto 0; }
.hero-strip .sig{ width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent), 0 0 12px color-mix(in srgb,var(--c) 55%,transparent); background:var(--c); }
.hero-strip .ln{ width:42px; height:1px; background:var(--input); }
@media(max-width:520px){ .hero-strip .ln{ width:22px; } }

/* ---- the form card ---- */
.form-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:34px 34px 30px; box-shadow:0 24px 70px rgba(0,0,0,0.4);
}
.field{ margin-bottom:24px; }
.field:last-of-type{ margin-bottom:0; }
.field > label, .qlabel{
  display:block; font-size:14.5px; font-weight:700; color:var(--fg); margin-bottom:4px; line-height:1.4;
}
.field .help{ display:block; font-size:12.5px; color:var(--dim); margin-bottom:11px; line-height:1.45; }
.req{ color:var(--sig-soft); font-weight:800; margin-left:2px; }
.nowrap{ white-space:nowrap; }
.opt{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:400; margin-left:8px; vertical-align:1px;
}

/* inputs */
.inp, .ta{
  width:100%; background:var(--bg); border:1px solid var(--input); border-radius:var(--radius);
  color:var(--fg); font-family:inherit; font-size:15px; padding:13px 15px;
  transition:border-color .15s, box-shadow .15s; resize:none;
}
.ta{ line-height:1.55; min-height:78px; }
.inp::placeholder, .ta::placeholder{ color:var(--faint); }
.inp:focus, .ta:focus{
  outline:none; border-color:var(--sig);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sig) 26%, transparent);
}
/* underlined variant */
.underlined .inp, .underlined .ta{
  background:transparent; border:none; border-bottom:1px solid var(--input);
  border-radius:0; padding:11px 2px;
}
.underlined .inp:focus, .underlined .ta:focus{
  box-shadow:none; border-bottom-color:var(--sig);
}

/* hours — chip radios (signature on-state) */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-family:var(--mono); font-size:13px; color:var(--text);
  border:1px solid var(--input); border-radius:999px; padding:9px 16px;
  background:var(--bg); cursor:pointer; transition:all .14s; user-select:none;
}
.chip:hover{ border-color:var(--muted); color:var(--fg); }
.chip.on{
  background:color-mix(in srgb, var(--sig) 15%, transparent);
  border-color:var(--sig); color:var(--sig-soft); font-weight:700;
}
select.inp{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f848f' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:42px;
}

/* the open box — the ledger centerpiece ("what you'd keep" → GOLD is correct here) */
.field.flagship{
  background:color-mix(in srgb, var(--gold) 5%, var(--card));
  border:1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
  border-radius:var(--radius); padding:20px 20px 18px; margin:28px 0;
}
.flag-rule{ width:32px; height:2px; background:var(--gold); border-radius:1px; margin-bottom:13px; }
.flag-eyebrow{
  display:block; font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px;
}
.field.flagship .qlabel{ font-family:var(--serif); font-style:italic; font-size:19px; font-weight:500; line-height:1.3; letter-spacing:-.01em; }
.field.flagship .qlabel .req{ color:var(--gold-soft); font-style:normal; }
.field.flagship .ta{ background:var(--bg); min-height:104px; }
.field.flagship .help{ font-style:normal; color:color-mix(in srgb, var(--gold) 50%, var(--muted)); }
.counter{ text-align:right; font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:7px; }

/* optional chat checkbox (signature) */
.check{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  background:var(--bg); border:1px solid var(--input); border-radius:var(--radius);
  padding:14px 16px; transition:border-color .15s, background .15s;
}
.check:hover{ border-color:var(--muted); }
.check.on{ border-color:var(--sig); background:color-mix(in srgb, var(--sig) 9%, var(--bg)); }
.box{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--input);
  flex:none; display:grid; place-items:center; margin-top:1px; transition:all .15s;
}
.check.on .box{ background:var(--sig); border-color:var(--sig); }
.box svg{ width:13px; height:13px; stroke:var(--sig-ink); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.check.on .box svg{ opacity:1; }
.check .ctxt{ font-size:14px; color:var(--text); line-height:1.45; }
.check .ctxt b{ color:var(--fg); font-weight:700; }
.check .ctxt small{ display:block; color:var(--dim); font-size:12.5px; margin-top:3px; }

/* divider before submit */
.rule{ height:1px; background:var(--border); margin:30px 0 24px; }

/* submit — THE one solid action (Cobalt). Resting fill deepened so the long
   full-width bar reads rich, not electric; lifts to full signature on hover. */
.submit{
  width:100%; padding:15px 20px; border-radius:var(--radius);
  background:color-mix(in srgb,var(--sig) 86%,#070a14); color:var(--sig-ink);
  border:1px solid color-mix(in srgb,var(--sig) 86%,#070a14); cursor:pointer;
  font-family:var(--exp); font-size:15px; font-weight:800; letter-spacing:.01em;
  transition:background .15s, border-color .15s, transform .05s;
}
.submit:hover{ background:var(--sig); border-color:var(--sig); }
.submit:active{ transform:translateY(1px); }
.submit:disabled{ background:var(--raised); border-color:var(--border); color:var(--faint); cursor:not-allowed; }
.subnote{ text-align:center; font-size:12.5px; color:var(--dim); margin:13px 0 0; }
.subnote b{ color:var(--muted); font-weight:600; }

/* ---- the beta deal strip — neutral / outlined (NOT gold; gold is ledger-only) ---- */
.deal{ margin-top:38px; }
.deal-head{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:700; margin:0 0 16px; text-align:center;
}
.deal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.deal-item{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:19px 20px;
}
.deal-item .dt{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sig-soft); margin:0 0 10px;
}
.deal-item .dt::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--sig); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sig) 16%,transparent), 0 0 10px color-mix(in srgb,var(--sig) 50%,transparent);
}
.deal-item .dd{ font-size:13.5px; color:var(--text); line-height:1.62; margin:0; }
.deal-honest{
  text-align:center; font-family:var(--serif); font-style:italic; font-size:15.5px;
  color:var(--text); margin:20px auto 0; max-width:46ch; line-height:1.55;
}
.deal-honest b{ font-style:normal; color:var(--fg); font-weight:600; }

/* ===========================================================================
   Confirmation — the ledger receipt ("○ open: your spot" → kept)
   =========================================================================== */
.confirm{ text-align:center; padding:24px 0 0; }
.confirm .stamp{
  font-family:var(--exp); font-weight:900; font-size:clamp(34px,6.4vw,56px); letter-spacing:-.025em;
  color:var(--fg); line-height:1.0; margin:8px 0 0; text-wrap:balance;
}
/* emphasis via the Expanded display weight itself, not a coloured word */
.confirm .stamp .g{ color:inherit; }
.confirm .sub{ font-size:16px; color:var(--text); line-height:1.6; margin:20px auto 0; max-width:42ch; }
.confirm .sub b{ color:var(--fg); font-weight:700; }

.receipt{
  margin:32px auto 0; max-width:440px; text-align:left;
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.receipt .rtop{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.receipt .rtop .rnum{
  font-family:var(--mono); color:var(--sig-soft); font-weight:700; letter-spacing:.12em;
}
.rline{
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--line); font-size:13.5px; color:var(--text);
}
.rline:last-child{ border-bottom:none; }
.rline .rk{ font-family:var(--mono); color:var(--sig-soft); font-size:13px; }
.rline .rv{ color:var(--muted); margin-left:auto; font-family:var(--mono); font-size:12.5px; }

.next{ margin:30px auto 0; max-width:440px; text-align:left; }
.next h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:700; margin:0 0 16px;
}
.next ol{ margin:0; padding:0; list-style:none; counter-reset:n; }
.next li{
  counter-increment:n; position:relative; padding:0 0 16px 38px; font-size:14px; color:var(--text); line-height:1.5;
}
.next li:last-child{ padding-bottom:0; }
.next li::before{
  content:counter(n); position:absolute; left:0; top:-1px;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; color:var(--sig-soft);
  border:1px solid color-mix(in srgb, var(--sig) 50%, transparent);
}
.next li b{ color:var(--fg); font-weight:700; }
.confirm-honest{
  margin:32px auto 0; max-width:44ch; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:15.5px; color:var(--text); line-height:1.55;
}
.confirm-honest b{ font-style:normal; color:var(--fg); font-weight:600; }

/* footer */
.foot{
  border-top:1px solid var(--line); margin-top:60px; padding:28px 28px;
  text-align:center; font-size:12.5px; color:var(--dim); line-height:1.6;
}
.foot a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ---- responsive ---- */
@media (max-width:560px){
  .form-card{ padding:24px 20px; border-radius:14px; }
  .deal-grid{ grid-template-columns:1fr; }
  .nav{ padding:16px 18px; }
  .edition, .pipe{ display:none; }
  .header{ padding:30px 0 24px; }
}

/* validation flash */
.inp.err, .ta.err{ border-color:var(--bad); }
.field-err{ font-size:12px; color:var(--bad); margin-top:6px; }
/* submit-level failure (e.g. the Beehiiv call didn't go through) */
.form-err{
  font-size:13px; color:var(--bad); line-height:1.45;
  border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);
  background:color-mix(in srgb,var(--bad) 10%,transparent);
  border-radius:8px; padding:10px 12px; margin:0 0 14px;
}
.skip:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- step 1 — lean email-capture card ---- */
.intro-card{ max-width:480px; margin:0 auto; }
.intro-card .submit{ margin-top:22px; }

/* ---- step 2 — "you're on the list" confirmation banner (replaces email field) ---- */
.onlist{
  display:flex; align-items:center; gap:12px; margin-bottom:24px;
  background:color-mix(in srgb,var(--ok) 9%,var(--bg));
  border:1px solid color-mix(in srgb,var(--ok) 34%,var(--border)); border-radius:var(--radius);
  padding:13px 16px;
}
.onlist-check{
  width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb,var(--ok) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);
}
.onlist-check svg{ width:13px; height:13px; stroke:var(--ok); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.onlist-txt{ font-size:13.5px; color:var(--text); line-height:1.4; }
.onlist-txt b{ color:var(--fg); font-weight:700; }
.onlist-txt a{ color:var(--sig-soft); margin-left:9px; cursor:pointer; text-decoration:none; font-weight:600; }
.onlist-txt a:hover{ color:var(--fg); }

/* skip — secondary, low-friction exit (spot already saved) */
.skip{
  display:block; margin:15px auto 0; background:none; border:none;
  color:var(--muted); font-family:inherit; font-size:13px; cursor:pointer;
}
.skip:hover{ color:var(--text); }

/* finish-later CTA on the skipped confirmation */
.confirm-finish{ max-width:440px; margin:30px auto 0; }
.confirm-finish .submit{ font-family:var(--exp); }