/* ============================================================
   Verbunk — Night theme for the public site.
   Written against the EXISTING class names so every page keeps
   its copy and markup; only the stylesheet link changes.
   Direction A hero, B type system, C proof. See docs/16-the-flywheel.md
   ============================================================ */
:root{
  --night:#07090c; --night-2:#0d1218; --night-3:#141b23;
  --paper:#f7f6f3; --paper-2:#efede8; --card:#fff;
  --ink:#14161a; --ink-2:#4c525c; --ink-3:#6d737b;
  --gi:#f2f6fb; --gi-2:#94a2b4; --gi-3:#6b7787;
  --acc:#3ddba4; --acc-ink:#04150f;
  --warn:#ffbe3d; --brick:#b8442e; --ok:#1f7a55;
  --line:#dfdbd2; --line-dk:rgba(255,255,255,.09);
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1180px; --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:800;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.6vw,4rem)}
h2{font-size:clamp(1.8rem,4vw,2.7rem);text-transform:uppercase}
h3{font-size:1.12rem;text-transform:uppercase;letter-spacing:-.02em}
h4{font-size:.95rem}
p{margin:0 0 1em}
a{color:var(--brick);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.center{text-align:center}
.small{font-size:.85rem;color:var(--ink-3)}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}
.lead{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--ink-2);max-width:52ch}
.kicker{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brick);margin-bottom:12px}
.section-intro{max-width:58ch}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:var(--acc-ink);
  padding:10px 16px;border-radius:6px;font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;
  font-size:.92rem;font-weight:700;padding:12px 22px;border-radius:99px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;min-height:48px}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--acc);color:var(--acc-ink)}
.btn-primary:hover{background:#5ae7b6}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--ink)}
/* on dark grounds the secondary button must invert or it is invisible */
.hero .btn-secondary,.band-dark .btn-secondary,.site-header .btn-secondary,
.auth-page .btn-secondary{color:var(--gi);border-color:rgba(255,255,255,.22);background:transparent}
.hero .btn-secondary:hover,.band-dark .btn-secondary:hover,
.site-header .btn-secondary:hover{border-color:rgba(255,255,255,.5);color:#fff}
.hero .btn-ghost,.band-dark .btn-ghost,.site-header .btn-ghost{color:var(--gi-2)}
.hero .btn-ghost:hover,.band-dark .btn-ghost:hover,.site-header .btn-ghost:hover{color:var(--gi)}
.btn-ghost{background:transparent;color:var(--ink-2);padding:12px 14px}
.btn-ghost:hover{color:var(--ink)}
.btn-sm{padding:9px 16px;min-height:40px;font-size:.85rem}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.microcopy{font-size:.84rem;color:var(--ink-3);margin-top:12px}

/* ---------- header ---------- */
.site-header{background:var(--night);color:var(--gi);position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--line-dk)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--max);margin:0 auto;padding:16px 22px}
.site-header .wrap>.header-inner{padding-left:0;padding-right:0}
.logo{font-weight:800;letter-spacing:.24em;font-size:.78rem;color:var(--gi);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .dot{color:var(--acc)}
.site-header nav a,.header-ctas a.btn-ghost{color:var(--gi-2);font-size:.9rem}
.site-header nav a:hover{color:var(--gi);text-decoration:none}
.site-header .main-nav{display:none;gap:24px}
@media(min-width:900px){.site-header .main-nav{display:flex}}
.header-ctas{display:flex;align-items:center;gap:12px}
.header-ctas .btn-secondary{border-color:rgba(255,255,255,.2);color:var(--gi)}
.header-ctas .btn-secondary:hover{border-color:rgba(255,255,255,.45)}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  background:transparent;border:1px solid var(--line-dk);color:var(--gi);
  border-radius:8px;padding:10px 9px;font:inherit;cursor:pointer}
/* the toggle is three bare spans in the markup — they are the bars */
.nav-toggle span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px}
@media(min-width:900px){.nav-toggle{display:none}}
.mobile-nav{display:none;flex-direction:column;gap:2px;padding:8px 0 16px;border-top:1px solid var(--line-dk)}
.mobile-nav.open{display:flex}
/* The drawer is a <nav> inside .site-header, so any descendant rule can
   outrank its display:none. At desktop it must be hidden whatever JS did. */
@media(min-width:900px){.nav-toggle,.mobile-nav,.mobile-nav.open{display:none}}
.mobile-nav a{color:var(--gi-2);padding:10px 2px;font-size:.95rem}

/* ---------- hero ---------- */
.hero{background:var(--night);color:var(--gi);position:relative;isolation:isolate;overflow:hidden;
  padding:70px 0 60px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(115% 85% at 76% 16%, rgba(61,219,164,.15), transparent 58%),
    radial-gradient(95% 75% at 10% 92%, rgba(77,163,255,.13), transparent 62%),
    linear-gradient(#0c1219, var(--night) 72%)}
.hero h1,.hero h2{color:var(--gi)}
.hero .lead,.hero p{color:var(--gi-2)}
.hero .kicker{color:var(--acc)}
.hero a:not(.btn){color:var(--acc)}

/* ---------- bands & sections ---------- */
section{padding:70px 0}
.band{background:var(--paper-2)}
.band-dark{background:var(--night);color:var(--gi)}
.band-dark h2,.band-dark h3{color:var(--gi)}
.band-dark p,.band-dark .lead{color:var(--gi-2)}
.band-dark .kicker{color:var(--acc)}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:.94rem;margin-bottom:0}
.band-dark .card{background:var(--night-2);border-color:var(--line-dk)}
.band-dark .card p{color:var(--gi-2)}
.card-icon{width:42px;height:42px;border-radius:11px;margin-bottom:16px;display:grid;place-items:center;
  background:rgba(61,219,164,.12);border:1px solid rgba(61,219,164,.28);color:var(--acc);
  font-weight:800;font-size:1.05rem}
.split{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.full{grid-column:1/-1}

/* ---------- lists, stats, tags ---------- */
.check-list{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:10px}
.check-list li{padding-left:22px;position:relative;color:var(--ink-2)}
.check-list li::before{content:"→";position:absolute;left:0;color:var(--brick);font-family:var(--mono)}
.band-dark .check-list li{color:var(--gi-2)}
.band-dark .check-list li::before{color:var(--acc)}
.stat{display:flex;flex-direction:column;gap:3px}
.stat strong,.stat b{font-family:var(--mono);font-size:1.9rem;font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:.84rem;color:var(--ink-2)}
.band-dark .stat span{color:var(--gi-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;
  padding:3px 9px;border-radius:99px;font-family:var(--mono);letter-spacing:.05em}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.tag-ok,.tag-live{color:var(--ok);background:rgba(31,122,85,.12)}
.tag-warn{color:#8a6a12;background:rgba(255,190,61,.16)}
.tag-muted{color:var(--ink-3);background:rgba(109,115,123,.12)}
.band-dark .tag-ok,.band-dark .tag-live{color:var(--acc);background:rgba(61,219,164,.14)}
.flow-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.flow-step:last-child{border-bottom:0}
.flow-step h3{margin-bottom:6px}
.photo-slot{border:1px dashed var(--line);border-radius:var(--r);min-height:220px;display:grid;
  place-items:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);background:var(--paper-2);text-align:center;padding:20px}
.band-dark .photo-slot{border-color:var(--line-dk);background:var(--night-2);color:var(--gi-3)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-weight:650;font-size:.9rem}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.field .hint,.field small{font-size:.82rem;color:var(--ink-3)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-2);margin-bottom:18px}
.consent input{margin-top:3px;flex:none}
.form-error{color:var(--brick);font-size:.86rem;font-weight:600}
.form-success{color:var(--ok);font-size:.9rem;font-weight:600}
.band-dark .field label{color:var(--gi)}
.band-dark .field input,.band-dark .field select,.band-dark .field textarea{
  background:var(--night-2);border-color:var(--line-dk);color:var(--gi)}
.band-dark .consent{color:var(--gi-2)}
.newsletter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.newsletter-row .field{flex:1;min-width:220px;margin-bottom:0}

/* auth pages: single centred card on night */
.auth-page{background:var(--night);min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.auth-page .card{max-width:440px;width:100%}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
td b{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.site-footer{background:var(--night);color:var(--gi-2);padding:54px 0 36px;font-size:.9rem}
.site-footer a{color:var(--gi-2)}
.site-footer a:hover{color:var(--gi);text-decoration:none}
.site-footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gi-3);font-weight:600;margin-bottom:12px}
.footer-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-dk);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--gi-3)}

/* ============================================================
   Legacy homepage components, restyled for the night theme.
   These class names come from the original site and carry its
   copy, so they are covered here rather than rewritten.
   ============================================================ */
.main-nav{display:none;gap:24px}
@media(min-width:900px){.main-nav{display:flex}}
.header-sep{width:1px;height:20px;background:var(--line-dk)}
.drawer-ctas{display:flex;gap:10px;padding:12px 2px 0}
.hero-grid{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.66rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);
  border:1px solid rgba(61,219,164,.3);border-radius:99px;padding:5px 12px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}

/* the product-as-hero dashboard */
.dash{border:1px solid var(--line-dk);border-radius:16px;background:rgba(12,17,23,.74);
  backdrop-filter:blur(16px);overflow:hidden}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;border-bottom:1px solid var(--line-dk);flex-wrap:wrap}
.dash-title{font-weight:700;font-size:.96rem;color:var(--gi)}
.dash-sub{font-size:.78rem;color:var(--gi-2)}
.dash-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.readiness-row{display:flex;align-items:center;gap:16px}
.readiness-score{font-family:var(--mono);font-size:3rem;font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}
.readiness-meta strong{display:block;color:var(--gi);font-size:.9rem}
.readiness-meta span{font-size:.8rem;color:var(--gi-2)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  padding-top:14px;border-top:1px solid var(--line-dk)}
@media(min-width:520px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-grid .stat strong,.stat-grid .stat b{font-size:1.35rem;color:var(--gi)}
.stat-grid .stat span{color:var(--gi-2);font-size:.76rem}
.accent{color:var(--acc)}
.warn{color:var(--warn)}
.bar-row{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--gi-2)}
.zone{min-width:104px;color:var(--gi)}
.bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar>span,.bar>i{display:block;height:100%;background:var(--acc);border-radius:99px}
.bar-row .warn~.bar>span,.bar.warn>span{background:var(--warn)}
.pct{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:38px;text-align:right;color:var(--gi)}
.dash-alert{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:10px;
  background:rgba(255,190,61,.1);border:1px solid rgba(255,190,61,.28);font-size:.8rem;color:var(--gi)}
.dash-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gi-3)}
.dash-table{width:100%;font-size:.8rem}
.dash-table th,.dash-table td{border-bottom-color:var(--line-dk);color:var(--gi-2);padding:8px 10px}
.dash-table td b,.dash-table td strong{color:var(--gi)}
.flow{display:flex;flex-direction:column}
.rev{direction:rtl}.rev>*{direction:ltr}
@media(max-width:899px){.rev{direction:ltr}}
.mt-4{margin-top:2.2rem}
.testimonial{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.band-dark .testimonial{background:var(--night-2);border-color:var(--line-dk)}
.attrib{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:.86rem;color:var(--ink-2)}
.band-dark .attrib{color:var(--gi-2)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--paper-2);flex:none;
  display:grid;place-items:center;font-weight:700;color:var(--ink-3);font-size:.8rem}
.band-dark .avatar{background:var(--night-3);color:var(--gi-3)}
.placeholder-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;display:inline-block}
.band-dark .placeholder-note{color:var(--gi-3);border-color:var(--line-dk)}
.tri-cta{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:820px){.tri-cta{grid-template-columns:repeat(3,1fr)}}
.footer-brand{max-width:34ch}
.footer-brand p{color:var(--gi-2)}