/* ═══════════════════════════════════════════════════════════════════════════
   site.css — the logged-out surface: marketing pages + auth.

   Deliberately NOT style.css. The app's stylesheet carries a light theme that
   only flips dark under body[data-report]; loading it here is what turned the
   landing page white. These pages are dark from the first byte and share this
   one file so five templates can't drift apart.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Honey Basil';
  src:url('/static/fonts/HoneyBasil-Regular.otf') format('opentype'),
      url('/static/fonts/HoneyBasil-Regular.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap}

:root{
  --paper:#1e2126;--paper-2:#191b1f;--surface:#31343c;--surface-2:#3a3e46;
  --ink:#f2f4f6;--muted:#b6bdc6;--faint:#7d838d;
  --lime:#c3f53c;--lime-soft:#e9fbb0;--lime-ink:#1a2400;
  --line:rgba(255,255,255,.16);--card-line:rgba(255,255,255,.22);
  --bad:#ff8a80;--ok:#9ad462;--warn:#ffc250}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
.display{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;letter-spacing:.01em}

/* ── nav: identical to the dashboard dock ───────────────────────────────
   Same slab, same layout rule — the bar hugs its contents and centres on the
   page, with the badge sat in the middle of the flow and a hairline each side.
   Links left of it, buttons right. Sticky rather than fixed so it can't cover
   the hero on load; everything else matches dock.css. */
.nav{position:sticky;top:14px;z-index:50;
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  width:100%;margin:14px auto 0;
  padding:14px 30px 12px;border-radius:18px;
  background:rgba(43,46,53,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  transition:transform .85s ease-in-out,opacity .85s ease-in-out}   /* keep in sync with dock.css's .dock-wrap */
/* the vanish — slides away on scroll DOWN, returns on scroll UP (dock.css:153) */
.nav.dock-hide{transform:translateY(calc(-100% - 24px));opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
/* DOM order is logo, links, buttons — reorder so the badge lands in the middle */
.nav-links{order:1;flex:1;display:flex;align-items:flex-start;gap:30px;margin:0}
/* min-width:0 matters: with the default min-width:auto each side refuses to
   shrink below its own content, so the two never matched and the badge sat
   8px right of centre. Zeroing it lets the free space split evenly. */
.nav-links,.nav-right{flex:1 1 0;min-width:0}
.logo{order:2;flex:none}
.nav-right{order:3;flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0}

/* items: ring over a label — the same component as dock.css, restated here so
   the marketing site doesn't have to load the app's stylesheet to get it */
.nav-links .dock-btn{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.nav-links .dock-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.nav-links .ring{width:52px;height:52px;border-radius:50%;background:#23252b;
  display:grid;place-items:center;transition:background .14s}
.nav-links .ring i{display:grid;place-items:center;width:100%;height:100%;
  color:#eceef0;font-style:normal;transition:color .14s}
.nav-links .ring i svg{width:21px;height:21px}
.nav-links .rail-lab{font-family:'Honey Basil',Inter,sans-serif;font-size:13.5px;
  font-weight:400;letter-spacing:.03em;line-height:1;color:#eceef0;
  white-space:nowrap;transition:color .14s}
/* hover: the circle warms with the light lime, exactly like the dock */
.nav-links .dock-btn:hover .ring{background:var(--lime-soft)}
.nav-links .dock-btn:hover .ring i{color:var(--lime-ink)}
/* current page: thin lime outline + lime label */
.nav-links .dock-btn.is-here .ring{box-shadow:0 0 0 2px var(--lime)}
.nav-links .dock-btn.is-here .rail-lab{color:var(--lime)}

/* the badge, with the dock's hairlines either side */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:17px;
  letter-spacing:.01em;padding:0 26px;align-self:center;
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12)}
.logo svg{width:17px;height:17px;color:var(--lime)}
.logo.badge img{display:block;height:30px;width:auto}
.nav-centred{min-height:0}
.nav-centred .logo{position:static;transform:none;flex-direction:row}
@media(max-width:900px){
  .nav{gap:14px;padding:12px 16px;top:8px;margin-top:8px}
  .nav-links{order:3;flex:none;width:100%;justify-content:center;gap:18px}
  .nav-right{flex:none}
  .nav-links .ring{width:44px;height:44px}
  .nav-links .ring i svg{width:19px;height:19px}
  .nav-links .rail-lab{font-size:12.5px}
  .logo{order:1;border:0;padding:0}
  .nav-right{order:2}
  .logo.badge img{height:26px}
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:5px;border:1px solid var(--card-line);
  background:transparent;color:var(--ink);font-weight:600;font-size:13px;
  font-family:inherit;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{border-color:var(--lime);background:var(--surface)}
.btn-primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.btn-primary:hover{background:var(--lime-soft);border-color:var(--lime-soft)}
.btn-lg{font-size:13.5px;padding:10px 20px}

/* ── page head (shared by the inner marketing pages) ─────────────────────── */
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.phead{text-align:center;padding:clamp(48px,8vh,88px) 0 clamp(38px,5vh,60px)}
.phead h1{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;
  font-size:clamp(34px,5vw,52px);letter-spacing:.01em;line-height:1.05;margin:0 0 16px}
.phead h1 span{color:var(--lime)}
.phead p{max-width:58ch;margin:0 auto;font-size:16.5px;color:var(--muted)}

/* ── hero (front page) ───────────────────────────────────────────────────── */
.hero{text-align:center;padding:clamp(60px,11vh,128px) 0 clamp(72px,12vh,128px)}
.hero h1{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;
  font-size:clamp(34px,5.4vw,58px);letter-spacing:.01em;line-height:1.06;margin:0 auto 20px;
  max-width:24ch}
.hero p{max-width:56ch;margin:0 auto 26px;font-size:17px;color:var(--muted)}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-cta .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hero-cta small{color:var(--faint);font-size:13px}

/* ── cards ───────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:clamp(84px,12vh,140px)}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.cards,.cards.two{grid-template-columns:1fr}}
/* the dashboard card pattern: lime eyebrow, display title, body copy */
.card,.stepcard{background:var(--surface);border:1px solid var(--card-line);
  border-radius:12px;padding:26px 24px;text-align:left}
.card .eyebrow,.stepcard .eyebrow{margin-bottom:10px}
.card h3,.stepcard h3{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;
  font-size:25px;letter-spacing:.01em;line-height:1.1;margin:0 0 10px;color:var(--ink)}
.card p,.stepcard p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.card p + p{margin-top:10px}
.card .art{height:150px;border-radius:9px;background:var(--surface-2);
  display:grid;place-items:center;margin-bottom:16px;overflow:hidden;position:relative}
.art span{font-family:'Honey Basil','Inter',sans-serif;font-size:34px;color:var(--lime)}
.art.a5::after{content:"";position:absolute;width:76px;height:106px;border-radius:4px;
  border:2px solid var(--lime);opacity:.55}
.art.gridart::after{content:"";position:absolute;width:110px;height:110px;opacity:.5;
  background:
    linear-gradient(var(--lime) 2px,transparent 2px) 0 0/36px 36px,
    linear-gradient(90deg,var(--lime) 2px,transparent 2px) 0 0/36px 36px;
  border:2px solid var(--lime);border-radius:6px}

/* ══════════ outcome cards: the figure first, then what it buys you ════════
   Every figure here is derivable from the product itself (17 designs x 16
   colourways x 12 themes = 3,264; three channels scored). Nothing invented —
   there are no customers yet, so there are no customer statistics. */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:52px;padding-bottom:clamp(84px,12vh,140px)}
@media(max-width:820px){.outcomes{grid-template-columns:1fr}}
.ocard{position:relative;overflow:visible;background:var(--surface);
  border:1px solid var(--card-line);border-radius:12px;padding:62px 24px 28px;
  text-align:center}
/* the figure sits in a ring straddling the card's top edge — outside the box,
   so the number reads as a token rather than another line of copy */
.ofig{position:absolute;top:-44px;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  background:var(--paper);box-shadow:0 0 0 2px var(--lime);z-index:1}
.ofig b{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;
  font-size:30px;line-height:1;letter-spacing:.01em;color:var(--lime)}
.ounit{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.ocard h3{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:23px;
  letter-spacing:.01em;line-height:1.15;margin:0 0 9px;color:var(--ink)}
.ocard p{margin:0 auto;max-width:34ch;font-size:14.5px;color:var(--muted);line-height:1.55}
/* the three scored channels: one row of glyphs in their own brand colours.
   A stacked list ran the card three rows taller than its neighbours. */
.chanlist{list-style:none;margin:18px 0 0;padding:0;
  display:flex;justify-content:center;gap:14px}
.chanlist li{margin:0}
.chanlist .ci{display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:#23252b;border:1px solid rgba(255,255,255,.12)}
.chanlist .ci svg{width:19px;height:19px}

/* closing line under the three cards — spans the grid, centred, held in from
   the card edges so it doesn't run the full width */
/* the <br> sets the two lines; max-width stays generous so it can't wrap to
   three on a narrower viewport */
.outcomes-h2{grid-column:1/-1;margin:20px auto 0;padding:0 clamp(20px,8vw,110px);
  max-width:none;text-align:center;
  font-family:'Honey Basil','Inter',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(24px,3.2vw,34px);line-height:1.2;color:var(--ink)}

/* ══════════ how it works: a connected flow, not more cards ════════════════
   Sat directly under the outcome cards, a third row of boxes read as the same
   thing twice. This is a timeline — nodes on a rule, no card chrome. */
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  margin-top:34px}
/* the rule, drawn behind the nodes and stopping short of both ends */
.flow::before{content:"";position:absolute;top:23px;left:16%;right:16%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(195,245,60,.45) 12%,
    rgba(195,245,60,.45) 88%,transparent)}
.fstep{position:relative;text-align:center}
.fnode{position:relative;z-index:1;display:grid;place-items:center;
  width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  background:var(--paper);border:1px solid var(--lime);
  font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:var(--lime)}
.fstep h3{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:22px;
  letter-spacing:.01em;line-height:1.15;margin:0 0 9px;color:var(--ink)}
.fstep p{margin:0 auto;max-width:34ch;font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:760px){
  /* stacks, with the rule running down the left instead of across */
  .flow{grid-template-columns:1fr;gap:26px;text-align:left;padding-left:8px}
  .flow::before{top:8px;bottom:8px;left:31px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,rgba(195,245,60,.45) 8%,
      rgba(195,245,60,.45) 92%,transparent)}
  .fstep{display:grid;grid-template-columns:46px 1fr;gap:16px;text-align:left}
  .fnode{margin:0}
  .fstep h3,.fstep p{grid-column:2}
  .fstep h3{margin-top:9px}
  .fstep p{margin:0;max-width:none}
}

/* ── numbered steps ──────────────────────────────────────────────────────── */
.how{padding:clamp(24px,4vh,44px) 0 clamp(84px,12vh,140px);text-align:center}
.how h2,.plans h2,.sec h2{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;
  font-size:clamp(26px,3.4vw,36px);letter-spacing:.01em;margin:0 0 12px}
.sec{padding:clamp(48px,8vh,88px) 0}
.sec > p.lead{max-width:60ch;margin:0 auto 30px;color:var(--muted);text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.stepcard b{display:block;font-size:15.5px;margin-bottom:6px}
/* the About page still uses centred stepcards with an icon badge */
.stepcard[style*="center"] .ibadge{margin-left:auto;margin-right:auto}

/* a taller, numbered walk-through (how it works page) */
.walk{display:flex;flex-direction:column;gap:0;max-width:760px;margin:0 auto}
.walk-row{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);text-align:left}
.walk-row:last-child{border-bottom:0}
.walk-row i{display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:50%;background:#23252b;border:1px solid var(--line);
  color:var(--lime);font-size:15px;font-weight:700;font-style:normal}
.walk-row h3{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:21px;
  letter-spacing:.01em;margin:0 0 6px}
.walk-row p{margin:0;color:var(--muted);font-size:15px}
.walk-row p + p{margin-top:8px}
@media(max-width:560px){.walk-row{gap:14px}}

/* ── tick / cross lists ──────────────────────────────────────────────────── */
/* inline flow, not flex: a flex <li> makes every <b> and text node its own
   flex item, which shredded these rows into columns. Marker is absolute. */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;text-align:left}
.ticks li{position:relative;padding-left:26px;font-size:15px;color:var(--muted);line-height:1.5}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--lime);font-weight:700}
.ticks.no li::before{content:"✕";color:var(--faint)}
.ticks b{color:var(--ink);font-weight:600}

/* ── the week strip: seven days, Tuesday lit — the name, drawn ───────────── */
.week{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.week .day{display:grid;place-items:center;width:62px;height:62px;border-radius:12px;
  background:var(--surface);border:1px solid var(--card-line);
  font-size:13px;font-weight:700;color:var(--faint)}
.week .day.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);
  transform:translateY(-4px);box-shadow:0 8px 22px rgba(195,245,60,.18)}
@media(max-width:560px){.week .day{width:42px;height:42px;font-size:11px;border-radius:9px}}

/* ── icon badge, shared by the icon cards and principles ─────────────────── */
.ibadge{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:12px;background:rgba(195,245,60,.12);color:var(--lime);margin-bottom:14px}
.ibadge svg{width:22px;height:22px}
.stepcard .ibadge{margin:0 auto 14px}

/* ══════════ the 60-second hook: free scan, no account ═════════════════════
   Two columns — the offer on the left, what you get back on the right. Lime
   border so it reads as the one thing on the page you can do without signing
   up. Feeds /scan, which was previously unlinked from anywhere. */
.hook{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 clamp(84px,12vh,140px);
  border:1px solid var(--lime);border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,rgba(195,245,60,.08),transparent 60%),var(--surface)}
@media(max-width:760px){.hook{grid-template-columns:1fr}}
.hook-l{padding:34px 30px;border-right:1px solid var(--line)}
@media(max-width:760px){.hook-l{border-right:0;border-bottom:1px solid var(--line)}}
.hook-clock{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.hook-clock b{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:60px;
  line-height:1;letter-spacing:.01em;color:var(--lime)}
.hook-clock span{font-size:14px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lime)}
.hook-l h2{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:28px;
  letter-spacing:.01em;line-height:1.12;margin:0 0 10px}
.hook-l p{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.55}
.hook-l .free{display:block;margin-top:10px;font-size:12.5px;color:var(--faint)}
.hook-r{padding:34px 30px}
.hook-r h3{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lime);margin:0 0 16px}
.hook-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.hook-list li{display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.10);font-size:14.5px;color:var(--ink)}
.hook-list li:last-child{border-bottom:0}
.hook-list .dots{flex:1;border-bottom:1.5px dotted rgba(255,255,255,.22);transform:translateY(-4px)}
.hook-list .v{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);white-space:nowrap}

/* ── quiet full-width note strip ─────────────────────────────────────────── */
.also{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(52px,8vh,80px) 0;text-align:center}
.also p{margin:0 auto;max-width:64ch;font-size:15px;color:var(--muted)}
.also b{color:var(--ink)}

/* ── pricing ─────────────────────────────────────────────────────────────── */
/* two columns on desktop: the offer on the left, what's included on the right —
   one column of 440px forced almost every feature line to wrap twice */
.price-card{max-width:820px;margin:0 auto;background:var(--surface);
  border:1px solid var(--lime);border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:330px 1fr}
@media(max-width:720px){.price-card{grid-template-columns:1fr}}
.price-offer{padding:34px 30px;text-align:center;background:rgba(195,245,60,.05);
  border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
@media(max-width:720px){.price-offer{border-right:0;border-bottom:1px solid var(--line);padding:30px 24px}}
.price-tag{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:0 0 8px}
.price-tag b{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:60px;
  letter-spacing:.01em;color:var(--ink);line-height:1}
.price-tag span{font-size:15px;color:var(--muted)}
.price-sub{margin:0 0 22px;font-size:13.5px;color:var(--faint);line-height:1.5}
/* the label must stay on one line — full-width in a narrow column wrapped the → */
.price-card .btn{width:100%;white-space:nowrap;font-size:14.5px;padding:12px 16px}
.price-incl{padding:34px 30px}
.price-incl h3{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lime);margin:0 0 16px}
.price-incl .ticks{gap:13px}
.price-incl .ticks li{font-size:14.5px}
.faq{max-width:760px;margin:0 auto}
.faq-item{position:relative;border-bottom:1px solid var(--line);padding:22px 0 22px 34px;
  text-align:left;transition:border-color .15s}
.faq-item:last-child{border-bottom:0}
/* lime question mark as the marker, and the rule warms on hover */
.faq-item::before{content:"?";position:absolute;left:0;top:20px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(195,245,60,.14);color:var(--lime);font-size:12px;font-weight:700}
.faq-item:hover{border-color:rgba(195,245,60,.45)}
.faq-item:hover h3{color:var(--lime)}
.faq-item h3{font-size:16px;margin:0 0 6px;font-weight:700;transition:color .15s}
.faq-item p{margin:0;color:var(--muted);font-size:14.5px}

/* ── closing cta ─────────────────────────────────────────────────────────── */
.plans{text-align:center;padding:clamp(92px,13vh,150px) 0 clamp(96px,13vh,150px)}
.plans p{margin:0 0 26px;color:var(--muted)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.sfoot{border-top:1px solid var(--line);background:var(--paper-2);margin-top:auto}
.sfoot .wrap{padding-top:clamp(48px,7vh,72px);padding-bottom:clamp(28px,4vh,40px)}
.sfoot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.sfoot-top{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.sfoot-top{grid-template-columns:1fr;gap:26px}}
.sfoot-brand{max-width:38ch}
.sfoot-brand .logo{margin-bottom:14px}
.sfoot-brand p{margin:0 0 18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.sfoot-col h3{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lime);margin:0 0 14px}
.sfoot-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.sfoot-col a{font-size:13.5px;color:var(--muted);text-decoration:none;transition:color .14s}
.sfoot-col a:hover{color:var(--lime)}
.sfoot-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:clamp(34px,5vh,52px);padding-top:22px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}

/* legacy single-row footer, still used by nothing — kept out of the way */
.foot{border-top:1px solid var(--line);padding:26px 0 40px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--faint)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--lime)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}

/* ═══════════════ auth: one centred column, like onboarding ════════════════
   The two-column split put a marketing panel next to the form and pushed the
   form off-centre. The job here is to log in — so the page is a single centred
   card, and the sell moves to one quiet line underneath. */
.authc{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px}
.authc .brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:21px;
  letter-spacing:.01em;color:var(--ink);text-decoration:none}
.authc .brand svg{width:21px;height:21px;color:var(--lime)}
.authc .box{width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--card-line);border-radius:14px;padding:34px 32px}
.authc h1{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:32px;
  letter-spacing:.01em;margin:0 0 6px;text-align:center}
.authc .lead{color:var(--muted);font-size:14.5px;margin:0 0 26px;text-align:center}
.authc .field input{background:#2a2d33}
/* the three-line sell, demoted to a footnote under the card */
.authc .sell{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;
  margin-top:26px;font-size:12.5px;color:var(--faint)}
.authc .sell span{display:flex;align-items:center;gap:7px}
.authc .sell span::before{content:"✓";color:var(--lime);font-weight:700}
.authc .foot-note{margin-top:18px;font-size:12.5px;color:var(--faint);text-align:center}
.authc .foot-note a{color:var(--muted);text-decoration:none}
.authc .foot-note a:hover{color:var(--lime)}

/* ═══════════════ auth: legacy two-column shell (unused, kept for reference) ═*/
.auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
@media(max-width:860px){.auth{grid-template-columns:1fr}}
.canvas{position:relative;overflow:hidden;padding:46px 54px 40px;color:var(--ink);
  background:var(--paper-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column}
@media(max-width:860px){.canvas{display:none}}
.cv-brand{display:flex;align-items:center;gap:10px;font-family:'Honey Basil','Inter',sans-serif;
  font-weight:400;font-size:19px;letter-spacing:.01em;position:relative;text-decoration:none}
.cv-brand svg{width:20px;height:20px;color:var(--lime)}
.cv-mid{margin:auto 0;position:relative}
.cv-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lime);margin-bottom:22px}
.cv-head{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;
  font-size:clamp(34px,4.4vw,54px);line-height:1.06;letter-spacing:.01em;margin:0 0 34px;max-width:12ch}
.cv-head em{font-style:normal;color:var(--lime)}
.menu{display:flex;flex-direction:column;max-width:430px;border-top:1px solid var(--line)}
.menu-row{display:flex;align-items:baseline;gap:10px;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.10)}
.menu-row .l{font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.menu-row .dots{flex:1;border-bottom:1.5px dotted rgba(255,255,255,.28);transform:translateY(-4px)}
.menu-row .v{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);white-space:nowrap}
.menu-row.soon .v{color:var(--faint)}
.cv-foot{position:relative;font-size:12.5px;color:var(--muted);letter-spacing:.02em;margin-top:34px}
.cv-steps{display:flex;flex-direction:column;gap:18px;max-width:430px}
.cv-steps .step{display:flex;gap:14px;align-items:baseline}
.cv-steps .n{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;
  color:var(--lime);flex:none}
.cv-steps .t{font-size:14.5px;color:var(--muted);line-height:1.5}
.cv-steps .t b{color:var(--ink)}

.panel{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(28px,6vw,84px)}
.panel-brand{display:none}
@media(max-width:860px){
  .panel-brand{display:flex;align-items:center;gap:9px;font-family:'Honey Basil','Inter',sans-serif;
    font-weight:400;font-size:18px;color:var(--ink);margin-bottom:30px;text-decoration:none}
  .panel-brand svg{width:20px;height:20px;color:var(--lime)}}
.form{width:100%;max-width:380px}
.form h1{font-family:'Honey Basil','Inter',sans-serif;font-weight:400;font-size:36px;
  letter-spacing:.01em;margin:0 0 8px}
.form .lead{color:var(--muted);font-size:15px;margin:0 0 30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;padding:13px 14px;font-size:16px;font-family:inherit;color:var(--ink);
  border:1px solid var(--card-line);border-radius:9px;background:var(--surface);
  transition:border-color .15s,background .15s}
.field input:hover:not(:focus){border-color:var(--lime);background:rgba(195,245,60,.06)}
.field input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(195,245,60,.35)}
.field input::placeholder{color:var(--faint)}
.hint{font-size:12px;color:var(--faint);margin-top:6px}
.go{width:100%;margin-top:8px;padding:15px;font-size:15px;font-weight:700;font-family:inherit;
  letter-spacing:.01em;color:var(--lime-ink);background:var(--lime);border:0;border-radius:6px;
  cursor:pointer;transition:background .15s}
.go:hover{background:var(--lime-soft)}
.or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--faint);font-size:11px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:13px;
  font-size:15px;font-weight:600;font-family:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--card-line);border-radius:6px;text-decoration:none;cursor:pointer;
  transition:border-color .15s,background .15s}
.google:hover{border-color:var(--lime);background:var(--surface-2)}
.alt{margin-top:26px;font-size:14px;color:var(--muted)}
.alt a{color:var(--lime);font-weight:700;text-decoration:none}
.alt a:hover{text-decoration:underline}
.msg{padding:11px 14px;font-size:13.5px;margin-bottom:16px;border:1px solid;border-radius:9px}
.msg.err{background:rgba(255,138,128,.10);color:var(--bad);border-color:rgba(255,138,128,.5)}
.msg.ok{background:rgba(154,212,98,.12);color:var(--ok);border-color:rgba(154,212,98,.4)}
.warn{background:rgba(255,194,80,.10);color:var(--warn);border:1px solid rgba(255,194,80,.4);
  border-radius:9px;padding:11px 14px;font-size:13px;margin-bottom:16px}

/* the badge standing in for the old star + wordmark */
.wm-badge{display:block;height:28px;width:auto}