/* ============================================================
   Accreza — landing + auth + legal layer.
   Builds ON TOP OF the product design system (/static/style.css):
   every token, button, card, input and chart style is inherited,
   so the marketing site is visibly the same product. This file
   adds only: the black+emerald landing identity, the mega-menu,
   the hero visual, the auth split-screen and the legal pages.
   Emerald (--accent:#10b981) is the ONE bold color — it leads.
   ============================================================ */

/* The app shell locks scroll (overflow:hidden). Marketing/auth/legal
   pages must scroll normally — the only product rule we override. */
html,body{height:auto}
body{overflow:hidden auto;line-height:1.5}

/* ===== Brand typefaces — self-hosted woff2, offline-friendly, no CDN.
   Fraunces (editorial serif) = display · Hanken Grotesk = body/UI · IBM Plex Mono = every figure.
   Editorial + playful direction; mono numerals read as precise money, not an AI dashboard. ===== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/fraunces-var.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/hanken-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-mono-600.woff2') format('woff2')}
:root{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,ui-monospace,monospace;
}
body{font-family:var(--font-body)}
.lp-wordmark,.lp-hero h1,.lp-head h2,.lp-final h2,.legal-head h1,
.auth-head h1,.auth-brand-inner h2,.hub-hello h1{font-family:var(--font-display)}

/* ===== LANDING BRAND + THEME — black + emerald =====
   Deepen the ground to a near-black with a real emerald bias so the
   accent reads as the brand, and wire both themes so the page renders
   whether or not the host stamps data-theme. Colors flow through the
   inherited tokens, so every component re-tints automatically. */
:root{
  --accent:#10b981; --accent-soft:rgba(16,185,129,.15); --accent-line:rgba(16,185,129,.42);
  --accent-glow:rgba(16,185,129,.30); --accent-text:#04140d; --accent-ink:var(--accent);
}
:root, :root[data-theme="dark"]{
  /* near-black with a real emerald bias (deepened per the "Software colors" dark-green ref) */
  --bg:#050e09; --panel:#0b1610; --panel2:#111e17; --panel3:#182820;
  --border:#20302a; --border2:#2d4239; --text:#eef3f0; --muted:#89988f;
  --hover:#152219; --shadow:none; --table-stripe:rgba(180,255,220,.02);
  --scrim:rgba(0,0,0,.66);
  --ok:#31c07f; --warn:#e0a92a; --danger:#f0575c; --info:#6b9bff;
}
:root[data-theme="light"]{
  --bg:#f4f7f5; --panel:#ffffff; --panel2:#f1f5f2; --panel3:#e7ede9;
  --border:#e2e9e4; --border2:#d2dbd5; --text:#0f1613; --muted:#5b675f;
  --hover:#eaf1ec; --shadow:0 1px 2px rgba(15,22,19,.06); --table-stripe:rgba(15,22,19,.022);
  --scrim:rgba(15,22,19,.42);
  --ok:#26a269; --warn:#d29411; --danger:#e5484d; --info:#5b8def; --accent-ink:#047857;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f4f7f5; --panel:#ffffff; --panel2:#f1f5f2; --panel3:#e7ede9;
    --border:#e2e9e4; --border2:#d2dbd5; --text:#0f1613; --muted:#5b675f;
    --hover:#eaf1ec; --shadow:0 1px 2px rgba(15,22,19,.06); --table-stripe:rgba(15,22,19,.022);
    --scrim:rgba(15,22,19,.42);
    --ok:#26a269; --warn:#d29411; --danger:#e5484d; --info:#5b8def; --accent-ink:#047857;
  }
}

/* links follow the text green (#047857 in the light theme: 5.1:1; the bright emerald stays for fills) */
a{color:var(--accent-ink)}

.lp-wrap{max-width:1140px;margin:0 auto;padding:0 22px}

/* ============ NAV (sticky, blurred, emerald brand) ============ */
.lp-nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);
  transition:border-color var(--dur),background var(--dur)}
.lp-nav.scrolled{border-bottom-color:var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.lp-nav-inner{max-width:1140px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px}
.lp-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lp-logo{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  box-shadow:0 6px 18px -6px var(--accent-glow),inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,#fff)}
.lp-logo .ic{width:19px;height:19px;color:var(--accent-text)}
.lp-wordmark{font-weight:700;font-size:16px;letter-spacing:-.015em;color:var(--text)}
.lp-nav-mid{display:flex;align-items:center;gap:2px;margin:0 auto}
.lp-nav-right{display:flex;align-items:center;gap:9px;flex-shrink:0}

/* nav links + mega-menu triggers */
.lp-navlink,.lp-mega-trigger{padding:8px 12px;border-radius:9px;color:var(--muted);font-size:13.5px;font-weight:550;
  text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;transition:color var(--dur),background var(--dur)}
.lp-navlink:hover,.lp-mega-trigger:hover{color:var(--text);background:var(--hover)}
.lp-navlink.active{color:var(--accent-ink)}
/* the language switch in the simple page headers (/pricing, /about): footers keep it on phones */
@media (max-width:560px){ .lp-nav-inner > .lp-lang{display:none} }
.lp-mega-trigger .caret{width:13px;height:13px;transition:transform .2s var(--ease)}

/* mega-menu: a wrapper holds trigger + panel; hover/focus reveals it */
.lp-has-mega{position:relative}
.lp-has-mega:hover .lp-mega-trigger,.lp-has-mega:focus-within .lp-mega-trigger{color:var(--text);background:var(--hover)}
.lp-has-mega:hover .lp-mega-trigger .caret,.lp-has-mega:focus-within .lp-mega-trigger .caret{transform:rotate(-180deg)}
.lp-mega-panel{position:absolute;top:calc(100% + 10px);right:50%;transform:translateX(50%) translateY(6px);
  min-width:440px;background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:12px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6),inset 0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:60}
.lp-mega-panel::before{content:"";position:absolute;top:-16px;right:0;left:0;height:16px}/* hover bridge */
.lp-has-mega:hover .lp-mega-panel,.lp-has-mega:focus-within .lp-mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(50%) translateY(0)}
.lp-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.lp-mega-item{display:flex;gap:11px;padding:11px;border-radius:11px;text-decoration:none;transition:background var(--dur)}
.lp-mega-item:hover{background:var(--hover)}
.lp-mega-ic{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.lp-mega-ic .ic{width:18px;height:18px}
.lp-mega-item h5{font-size:13px;font-weight:650;color:var(--text);margin:1px 0 3px}
.lp-mega-item p{font-size:11.5px;color:var(--muted);line-height:1.4}

/* Product mega-panel — Sept 9 "app-screenshot" concept: 3-item rail + real-screenshot previews + 3s stream timer */
.lp-mega-panel{max-width:calc(100vw - 24px)}
/* left-anchored so the wide panel never clips the viewport edge */
.lp-mega--rich{width:min(600px,calc(100vw - 24px));right:0;left:auto;transform:translateX(0) translateY(6px)}
.lp-has-mega:hover .lp-mega--rich,.lp-has-mega:focus-within .lp-mega--rich{transform:translateX(0) translateY(0)}
.lp-has-mega.is-dismissed .lp-mega-panel{opacity:0;visibility:hidden;pointer-events:none}
.lp-has-mega.is-dismissed .lp-mega-trigger .caret{transform:none}
.lp-mega-rich{display:grid;grid-template-columns:186px 1fr;gap:16px}
.lp-mega-col{display:flex;flex-direction:column;gap:2px}
.lp-mega-eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:2px 11px 6px}
.lp-mega-grid--1{grid-template-columns:1fr}
.lp-mega-item.is-active{background:var(--accent-soft)}
.lp-mega-item.is-active h5{color:var(--accent-ink)}
.lp-mega-run{margin-top:6px;display:flex;align-items:center;gap:6px;padding:10px 11px 2px;border-top:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.lp-mega-run .ic{width:14px;height:14px;transition:transform var(--dur)}
.lp-mega-run:hover .ic{transform:translateX(-3px)}

/* preview stage: app-window frame around a real screenshot */
.lp-mega-stage{display:flex;flex-direction:column;gap:10px}
.lp-mega-prev{position:relative}
.mmshot{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s var(--ease);display:flex;flex-direction:column;gap:8px}
.mmshot.is-active{position:relative;opacity:1;visibility:visible}
.mmframe{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--panel2)}
.mmbar{display:flex;gap:5px;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--panel)}
.mmdot{width:8px;height:8px;border-radius:50%;background:var(--border2)}
.mmscreen{height:176px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mmscreen img{width:100%;height:100%;object-fit:contain;display:block}
.mmbrief{font-size:12px;color:var(--muted);line-height:1.45;padding:0 2px;min-height:34px}

/* the visible 3-second "stream" timer / pager */
.lp-mega-timer{display:flex;gap:6px;padding:0 2px}
.mmseg{flex:1;height:4px;border-radius:3px;background:var(--border2);position:relative;overflow:hidden;border:0;padding:0;cursor:pointer}
.mmseg.is-active{background:var(--accent-soft)}
.mmseg-fill{position:absolute;top:0;right:0;bottom:0;width:0;background:var(--accent);border-radius:3px}

/* Product menu — the original 600px panel: one compact list (your statement · the early-access tier) and a
   preview per item. Titles only in the list; each preview's caption carries the line. */
.lp-mega--rich .lp-mega-col{gap:1px}
.lp-mega--rich .lp-mega-item{padding:6px 9px;gap:9px;align-items:center}
.lp-mega--rich .lp-mega-ic{width:26px;height:26px;border-radius:7px}
.lp-mega--rich .lp-mega-ic .ic{width:14px;height:14px}
.lp-mega--rich .lp-mega-item h5{font-size:11px;line-height:1.35;margin:0}
.lp-mega--rich .lp-mega-run{margin-top:3px;padding:8px 9px 4px}
/* the early-access tier gets one compact link here — its own section tells the story */
.lp-mega-ea{margin-top:9px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:10px 11px;border-radius:11px;text-decoration:none;
  border:1px dashed var(--accent-line);background:color-mix(in srgb,var(--accent) 4%,var(--panel));transition:background var(--dur),border-color var(--dur)}
.lp-mega-ea:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.lp-mega-ea .lp-soon{margin-right:0}
.lp-mega-ea-t{font-size:12px;font-weight:600;color:var(--text);line-height:1.35}
.lp-mega-ea-go{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--accent-ink)}
.lp-mega-ea-go .ic{width:13px;height:13px;transition:transform var(--dur)}
.lp-mega-ea:hover .lp-mega-ea-go .ic{transform:translateX(-3px)}
.lp-mega-eyebrow .lp-soon{margin-right:4px}
.mmbar .lp-soon{margin-right:auto}
/* The fix-log card's drawn crop (the new dashboard has no screen for it yet). Masked values share one width so
   nothing implies a size. */
.mmscreen--ac{display:block;padding:0;align-items:stretch;justify-content:flex-start;background:var(--bg)}
.ac{height:100%;display:flex;flex-direction:column;gap:4px;padding:9px 12px;font-size:10.5px;color:var(--muted)}
.ac-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:5px;margin-bottom:1px;border-bottom:1px solid var(--border)}
.ac-head b{font-size:11.5px;font-weight:650;color:var(--text);white-space:nowrap}
.ac-chip{font-family:var(--font-mono);font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  padding:2px 7px;border-radius:999px;border:1px solid var(--border2);color:var(--muted)}
.ac-chip.is-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.ac-chip.is-loss{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.ac-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:15px}
.ac-row > span:first-child{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden}
.ac-row em{font-style:normal;color:var(--muted);opacity:.75;font-size:9.5px}
.ac-row > span:first-child > em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-row.is-net{color:var(--text);font-weight:650;border-top:1px dashed var(--border2);padding-top:4px}
.ac-row.is-total{color:var(--accent-ink);font-weight:650;border-top:1px dashed var(--border2);padding-top:4px}
.ac-list{display:flex;flex-direction:column;gap:2px}
.ac-list .ac-row{padding:1px 0}
.ac-pill{font-family:var(--font-mono);font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  padding:2px 7px;border-radius:999px;border:1px solid var(--border2);color:var(--muted)}
.ac-pill.is-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.ac-pill.is-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.ac-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--border2)}
.ac-dot.is-ok{background:var(--ok)} .ac-dot.is-warn{background:var(--warn)}
/* phones: the menu button says "Menu" (blueprint M3-E) */
.lp-burger-t{font-size:13px;font-weight:600;margin-right:6px}

/* "soon" tag (Resources / Company items) */
.lp-soon{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);vertical-align:middle}

/* open motion — staggered item reveal (motion only) */
@media (prefers-reduced-motion: no-preference){
  .lp-mega-item,.lp-mega-stage,.lp-mega-run{opacity:0;transform:translateY(6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),background var(--dur)}
  .lp-has-mega:hover .lp-mega-item,.lp-has-mega:focus-within .lp-mega-item,
  .lp-has-mega:hover .lp-mega-stage,.lp-has-mega:focus-within .lp-mega-stage,
  .lp-has-mega:hover .lp-mega-run,.lp-has-mega:focus-within .lp-mega-run{opacity:1;transform:none}
  .lp-mega-item:nth-child(2){transition-delay:.03s}
  .lp-mega-item:nth-child(3){transition-delay:.06s}
  .lp-mega-item:nth-child(4){transition-delay:.09s}
  .lp-mega-item:nth-child(5){transition-delay:.12s}
  .lp-mega-stage{transition-delay:.05s}
}

/* hamburger (mobile only) */
.lp-burger{display:none;margin-right:auto}
.lp-mobile{display:none}

/* ============ Buttons: emerald leads ============ */
.btn-lg{padding:12px 22px;font-size:14.5px;border-radius:11px}
.lp-arrow{width:15px;height:15px}

/* ============ Section rhythm ============ */
.lp-section{padding:84px 0;position:relative}
.lp-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--accent-ink);margin-bottom:13px;
  display:inline-flex;align-items:center;gap:7px}
.lp-eyebrow::before{content:"";width:16px;height:1.5px;background:var(--accent);border-radius:2px;opacity:.7}
.lp-head{max-width:680px;margin-bottom:38px}
.lp-head h2{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.lp-head p{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.6;max-width:60ch}

/* ============ HERO — the funnel (wide headline → verdict deck → the point: lure + CTA) ============ */
.lp-hero{padding:24px 0 34px;position:relative;overflow:hidden}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(680px 380px at 50% 2%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),
    radial-gradient(560px 460px at 50% 122%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 64%)}
/* funnel guide — a faint centre line the eye follows from the headline down to the CTA */
.hero-wrap{position:relative}
.hero-wrap::before{content:"";position:absolute;top:140px;bottom:120px;right:50%;width:1px;transform:translateX(.5px);
  background:linear-gradient(var(--accent-line),transparent 40%,transparent 60%,var(--accent-line));opacity:.45;z-index:0;pointer-events:none}

/* Tier 1 — widest: the purpose */
.hero-top{max-width:860px;margin:0 auto;text-align:center;position:relative;z-index:1}
.lp-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);margin-bottom:11px}
a.ea-announce{text-decoration:none;transition:border-color var(--dur),background var(--dur)}
a.ea-announce:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.ea-what{color:var(--text);font-weight:500}
.ea-go{color:var(--accent-ink);font-weight:700;white-space:nowrap}
@media (max-width:560px){ a.ea-announce{flex-wrap:wrap;justify-content:center;row-gap:4px;border-radius:14px;font-size:11.5px} }
.ea-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--accent-text);
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.lp-hero h1{font-size:clamp(27px,3.4vw,37px);line-height:1.08;font-weight:500;letter-spacing:-.021em;margin:0 auto 10px;max-width:21ch;text-wrap:balance}
.lp-hero h1 .accent{color:var(--accent-ink)}
.lp-hero .lead{font-size:clamp(15px,2vw,18px);color:var(--muted);max-width:52ch;margin:0 auto;line-height:1.55}

/* Tier 3 — the point: the free client-side lure + CTA */

.hero-point{position:relative;z-index:1;max-width:580px;margin:14px auto 0;text-align:center}
.hero-lure{margin-bottom:16px}
.lure-drop{position:relative;display:flex;align-items:center;gap:15px;text-align:right;padding:22px 24px;border-radius:15px;cursor:pointer;
  background:var(--panel);border:1.5px dashed var(--accent-line);box-shadow:0 0 0 4px var(--accent-glow),0 12px 32px -18px var(--accent-glow);
  transition:border-color var(--dur),background var(--dur),transform var(--dur),box-shadow var(--dur)}
.lure-drop:hover,.hero-lure.is-drag .lure-drop{border-color:var(--accent);background:var(--hover);transform:translateY(-1px);box-shadow:0 0 0 5px var(--accent-glow),0 12px 30px -14px var(--accent-glow)}
.lure-ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.lure-ic .ic{width:22px;height:22px}
.lure-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.lure-copy b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;font-size:17px;font-weight:650;color:var(--text)}
.lure-copy .free-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--accent-text);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;box-shadow:0 0 0 3px var(--accent-glow)}
.lure-copy span{font-size:12.5px;color:var(--muted);line-height:1.45}
.lure-copy em{color:var(--accent-ink);font-style:normal;font-weight:600}
.lure-result{margin-top:12px;text-align:right}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
/* client-side lure result (rendered from the file, in the browser) */
.lure-out{background:var(--panel2);border:1px solid var(--border2);border-radius:14px;padding:15px 16px;
  animation:reveal-up .5s var(--ease) both}
.lure-out .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.lure-out .loss{color:var(--danger)}
.lure-out-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.lure-out-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.lure-foot{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.lure-foot .ic{width:13px;height:13px;color:var(--accent-ink);flex:0 0 auto}
.lure-foot a{color:var(--accent-ink);font-weight:600;margin-right:auto}
.lure-err{color:var(--muted);font-size:12.5px;line-height:1.5}
.lure-err b{color:var(--text)}
/* privacy chip — live proof the file never leaves the device */
.lure-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;padding:3px 8px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);white-space:nowrap}
.lure-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.lure-chip.reading{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent);background:color-mix(in srgb,var(--warn) 13%,var(--panel))}
.lure-chip.reading .dot{background:var(--warn);animation:chip-pulse 1s ease-in-out infinite}
.lure-chip.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent);background:color-mix(in srgb,var(--ok) 13%,var(--panel))}
.lure-chip.done .dot{background:var(--ok)}
@keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* sub-row: objection tells + the sample-data door */
.lure-sub{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-top:9px;padding:0 4px}
.lure-sample{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:11.5px;color:var(--accent-ink);font-weight:600;white-space:nowrap;text-decoration:none}
.lure-sample:hover{text-decoration:underline}
.lure-sub .lure-help{margin-top:0;text-align:right}
.lure-sub .lure-help[open]{flex-basis:100%}
/* "where do I get this?" — upload helper (native <details>, no JS) */
.lure-help{margin-top:9px;font-size:11.5px;color:var(--muted)}
.lure-help>summary{cursor:pointer;color:var(--accent-ink);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:5px}
.lure-help>summary::-webkit-details-marker{display:none}
.lure-help>summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--accent-line);background:var(--accent-soft);font-size:9px;font-weight:700;flex:0 0 auto}
.lure-help>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.lure-help p{margin:7px 0 0;line-height:1.55}
.lure-help b{color:var(--text);font-weight:600}
.hub-hint{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.5}
/* goal-gradient path — the short, mostly-quick journey; step 1 (free, instant) is lit so the finish line reads as close */
.lure-path{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-lure > .lure-path{display:flex;justify-content:center;margin:0 0 12px}
.lp-b{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lp-b::before{content:"";width:13px;height:13px;border-radius:50%;border:1px solid var(--border2);flex:0 0 auto}
.lp-b.on{color:var(--accent-ink)}
.lp-b.on::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.lp-b:not(:last-child)::after{content:"";width:12px;height:1px;background:var(--border2);margin-right:2px;flex:0 0 auto}
/* after a read (A1): the step done gets a tick, its link turns accent, and the next step lights */
.lp-b::before{transition:background-color .3s,border-color .3s,box-shadow .3s}
.lp-b.done{color:var(--muted)}
.lp-b.done::before{border-color:var(--accent);box-shadow:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304140d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.lp-b.done:not(:last-child)::after{background:var(--accent)}

/* ===== Statement keycaps — the proof strip, absorbed into the lure (LANDING-BUILD-SPEC C.1/C.2).
   Line names only, never figures. One sweep when the page loads, then calm; hovering the lure lights them. A read
   opens the P&L page (/your-pl), which shows every line. ===== */
.lure-keys{position:relative;display:flex;justify-content:center;align-items:stretch;gap:14px;
  width:min(760px,calc(100vw - 44px));margin:14px 50% 0 0;transform:translateX(50%)}
.lk-group{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.lk-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.lk-div{width:1px;flex:0 0 auto;margin:2px 0 22px;background:linear-gradient(transparent,var(--border2) 30%,var(--border2) 70%,transparent)}
.lk{font-family:var(--font-mono);font-size:11px;font-weight:500;line-height:1;white-space:nowrap;color:var(--muted);
  padding:8px 10px 7px;border-radius:8px;background:var(--panel);border:1px solid var(--border2);border-bottom-width:3px;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.lk-acct .lk{border-style:dashed dashed solid}
.lk.on{color:var(--accent-ink);border-color:var(--accent-line);transform:translateY(2px);border-bottom-width:1px;margin-bottom:2px;box-shadow:0 0 0 3px var(--accent-glow)}
.hero-lure:hover .lure-keys .lk,.hero-lure.is-drag .lure-keys .lk{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.lk-cap{margin:0;font-size:11px;color:var(--muted);line-height:1.4;text-align:center}
.lk-cap b{color:var(--text);font-weight:600}
@media (max-width:820px){
  .lure-keys{width:100%;margin-right:0;transform:none;flex-direction:column;align-items:center;gap:10px}
  .lk-div{width:60%;height:1px;margin:0;background:linear-gradient(90deg,transparent,var(--border2),transparent)}
}
@media (max-width:560px){ .lure-keys{gap:6px;margin-top:10px} .lk-group{gap:6px} .lk-keys{gap:5px} .lk{font-size:11px;padding:6px 8px 5px} }
/* the P&L's three rows, back on the landing: what customers paid -> what went -> before your costs */
.lure-gap{display:flex;flex-direction:column}
.lure-gap-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.lure-gap-row span{font-size:12px;color:var(--muted)}
.lure-gap-row b{font-size:16px;font-weight:600;color:var(--text)}
.lure-gap-row.is-gap{border-bottom:0;padding-top:10px}
.lure-gap-row.is-gap span{color:var(--text);font-weight:600}
.lure-gap-row.is-gap b{font-size:23px}
/* the reveal (A1): rows settle in order, and the last row's figure settles last */
.lure-gap.is-anim .lure-gap-row{animation:lure-row .45s var(--ease) both;animation-delay:calc(var(--i,0) * 200ms)}
.lure-gap-row.is-settled b{animation:lure-settle .5s var(--ease)}
@keyframes lure-row{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes lure-settle{0%,100%{transform:none}35%{transform:scale(1.06)}}
.lure-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lure-out .gain{color:var(--accent-ink)}
.lure-partial{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--warn)}
.lure-out .lure-see{display:flex;width:100%;justify-content:center;margin-top:12px}
.lure-priv{color:var(--accent-ink);font-weight:600}
/* echo one trust reason beside the CTA */
.cta-echo{margin-top:14px;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;justify-content:center;line-height:1.4}
.cta-echo .ic{width:14px;height:14px;color:var(--accent-ink);flex:0 0 auto}
/* signature: a single glow that lands the eye on the dropzone (skipped under reduced motion) */
@keyframes lure-glow{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}45%{box-shadow:0 0 0 6px var(--accent-glow),0 0 30px var(--accent-glow)}}
:root.reveal-on .lure-drop{animation:lure-glow 2.6s var(--ease) 1.6s 1}

/* ============ PROBLEM — mechanism explainers + the gap payoff ============ */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mech-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--gap)}
.mech{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px 24px 22px;display:flex;flex-direction:column}
.mech-tag{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:14px}
.mech-n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:6px;padding:2px 7px}
.mech-tag .ph-tag{margin-right:auto}
.mech h3{font-family:var(--font-display);font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-.01em;margin-bottom:9px;text-wrap:balance}
.mech p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.mech-vis{margin-top:auto}
:root.reveal-on .mech-grid .mech.in:nth-child(2){animation-delay:.07s}
/* Mechanism 01 — the pieces of Amazon's cut, summed (no figure until a verified ratio exists) */
.cut-vis{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cut-chip{font-size:12px;padding:6px 11px;border:1px solid var(--border2);border-radius:999px;color:var(--text);background:var(--panel2);white-space:nowrap}
.cut-op{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.cut-total{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);font-weight:600}

/* the gap payoff — editorial big numbers */
.gap-payoff{border:1px solid var(--border);border-radius:var(--radius);padding:30px 32px;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--accent) 5%,var(--panel)))}

/* Payoneer "second phantom" — distinct card, set apart from the gap payoff */
.payoneer-coda{position:relative;margin-top:16px;background:var(--panel2);border:1px solid var(--border2);border-radius:var(--radius);padding:22px 28px 22px 24px;overflow:hidden}
.payoneer-coda::before{content:"";position:absolute;right:0;top:16px;bottom:16px;width:3px;border-radius:3px 0 0 3px;background:color-mix(in srgb,var(--muted) 60%,transparent)}
.pc-head{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:11px}
.pc-body{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:66ch;margin:0 0 16px}
.pc-flow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pc-from{font-size:13px;color:var(--muted)}
.pc-arrow{color:var(--muted);align-self:center;display:flex}.pc-arrow .ic{width:16px;height:16px}
.pc-to-lbl{font-size:12.5px;color:var(--muted)}
.pc-to-lbl b{color:var(--text);font-weight:600}

/* #problem payoff — a ladder in words (no amounts until a verified source exists) */
.gl-head{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.gl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.gl-step{display:flex;flex-direction:column;gap:4px;padding:12px 14px 12px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.gl-step b{font-size:14px;font-weight:600;color:var(--text)}
.gl-step span{font-size:11.5px;line-height:1.45;color:var(--muted)}
.gl-step.is-out{border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
.gl-step.is-out b{color:var(--danger)}
.gl-step.is-mid{border-style:dashed}
.gl-step.is-end{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.gl-step.is-end b{color:var(--accent-ink)}
.gl-foot{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* "Coming to your account": what the account gets at the engine switch (ADR 0025). Grey, so it never reads as
   the tier's green "Early access · soon" */
.acct-soon{display:inline-block;margin-right:8px;padding:1px 8px;border:1px solid var(--border2);border-radius:999px;color:var(--muted);background:transparent;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.6;text-transform:none;vertical-align:middle;white-space:nowrap}
.bento .card > .acct-soon.is-line{align-self:flex-start;margin:-4px 0 12px}
/* /pricing tiles: the pill always on a line of its own, under the tile's title */
.pr-get h4 .acct-soon{display:table;margin:5px 0 0}
.pc-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted);font-style:italic}

/* ============ Trust row (HONEST — no fake logos) ============ */
.lp-trust{padding:0 22px;margin-top:74px}
.lp-trust-inner{display:flex;align-items:center;justify-content:center;gap:14px 30px;flex-wrap:wrap;padding:20px 26px;background:color-mix(in srgb,var(--accent) 4%,var(--panel));border:1px solid var(--border);border-radius:var(--radius)}
.lp-trust-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.lp-trust-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:550;color:var(--text)}
.lp-trust-item .ic{width:16px;height:16px;color:var(--accent-ink)}
.lp-badge{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:6px;padding:3px 8px}

/* ============ Placeholder / skeleton affordances (Proof) ============ */
.ph-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:5px;padding:1px 6px;vertical-align:middle}
.chart-box{margin-top:4px}
.axis{stroke:var(--border2);stroke-width:1}
.gridline{stroke:var(--border);stroke-width:1}

/* ============ Bento ============ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto);gap:var(--gap)}
.bento .card{display:flex;flex-direction:column;min-height:0}
.bento .dominant{grid-column:1 / 3;grid-row:1 / 3}
.bento .wide{grid-column:1 / -1}
.card .lead-claim{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.card .chart-box{margin-top:12px}

/* headline KPI tiles under the waterfall */
.kpi{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:4px}

/* ============ How it works ============ */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);list-style:none;margin-bottom:var(--gap)}
.lp-step{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative}
.lp-step h4{font-size:15px;font-weight:650;margin-bottom:6px}
.lp-step p{font-size:13px;color:var(--muted);line-height:1.5}

/* ============ Final CTA ============ */
.lp-final{text-align:center;padding:96px 0;position:relative;overflow:hidden}
.lp-final::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(760px 380px at 50% 120%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%)}
.lp-final h2{font-size:clamp(26px,4vw,40px);font-weight:760;letter-spacing:-.02em;margin:0 auto 14px;max-width:18ch;line-height:1.1}
.lp-final p{color:var(--muted);font-size:15px;max-width:52ch;margin:0 auto 28px}
/* action-close drop zone — re-offers the hero lure */
.cta-drop{max-width:440px;margin:0 auto 16px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;cursor:pointer;
  padding:26px 22px;border-radius:15px;background:var(--panel);border:1.5px dashed var(--accent-line);
  transition:border-color var(--dur),background var(--dur),transform var(--dur),box-shadow var(--dur)}
.cta-drop:hover,.cta-drop.is-drag{border-color:var(--accent);background:var(--hover);transform:translateY(-1px);box-shadow:0 0 0 5px var(--accent-glow),0 12px 30px -14px var(--accent-glow)}
.cta-drop-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line);margin-bottom:5px}
.cta-drop-ic .ic{width:22px;height:22px}
.cta-drop-t{font-size:15px;font-weight:600;color:var(--text)}
.cta-drop-s{font-size:12.5px;color:var(--muted)}
.cta-drop-s .acc{color:var(--accent-ink);font-weight:600}
.cta-talk{margin-top:14px;font-size:13px;color:var(--muted)}
.cta-talk a{color:var(--text);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cta-talk a .ic{width:15px;height:15px;color:var(--accent-ink)}
.cta-talk a:hover{color:var(--accent-ink)}
/* the close: the drop beside the free account; the tier as one line */
.fin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:920px;margin:0 auto 26px;align-items:stretch}
.fin-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.fin-drop .cta-drop{width:100%;margin:0 0 12px}
.lp-final .fin-sample{font-size:12.5px}
.fin-drop .cta-drop{flex:1 1 auto;justify-content:center}
.lp-final .fin-drop .cta-echo{display:block;margin:12px auto 0;font-size:12px;max-width:none;text-align:center}
.lp-final .fin-drop .cta-echo .ic{display:inline-block;vertical-align:-2px;margin-inline-end:5px}
.lp-final .fin-next{margin:6px auto 0;font-size:12px;max-width:none}
.fin-acct{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:start;padding:24px 26px}
.fin-acct h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.fin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fin-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:var(--text)}
.fin-list .ic{width:15px;height:15px;margin-top:2px;flex:0 0 auto;color:var(--accent-ink)}
.fin-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* `.lp-final p` (the lead) outranks `.fin-note`: it was setting the card's notes at 15px with auto margins */
.lp-final .fin-note{margin:0;max-width:none;font-size:12.5px}
.fin-ea{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;align-self:stretch;margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted);text-decoration:none}
.fin-ea .lp-soon{margin-right:0}
.fin-ea b{color:var(--accent-ink);font-weight:600}
.fin-ea:hover b{text-decoration:underline}
@media (max-width:820px){ .fin-grid{grid-template-columns:1fr;max-width:480px} }
@media (max-width:560px){ .fin-acct{padding:20px} .fin-acct .btn{align-self:stretch} }

/* ============ Footer ============ */
.lp-foot{border-top:1px solid var(--border);padding:56px 0 40px;background:color-mix(in srgb,var(--accent) 3%,var(--bg))}
.lp-foot-grid{display:grid;grid-template-columns:1.35fr repeat(5,minmax(0,1fr));gap:24px;margin-bottom:36px}
.lp-foot-brand .lp-brand{margin-bottom:12px}
.lp-foot-brand p{font-size:13px;color:var(--muted);line-height:1.55;max-width:34ch}
.lp-foot-col h6,.lp-foot-col h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
.lp-foot-col a{display:block;font-size:13.5px;color:var(--text);padding:5px 0;transition:color var(--dur)}
.lp-foot-col a:hover{color:var(--accent-ink)}
.lp-foot-bar{border-top:1px solid var(--border);padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lp-foot-bar span{font-size:12px;color:var(--muted)}
.lp-foot-contact{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.lp-foot-contact .ic{width:15px;height:15px;color:var(--accent-ink)}
.lp-foot-contact:hover{color:var(--accent-ink)}
.lp-foot-links a{color:var(--muted)}
.lp-foot-links a:hover{color:var(--accent-ink)}

/* ============ Micro-animations (reduced-motion gated) ============ */
:root.reveal-on .reveal{opacity:0}
:root.reveal-on .reveal.in{opacity:1;animation:reveal-up .66s var(--ease) backwards}
@keyframes reveal-up{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
:root.reveal-on .bento .card.in:nth-child(2){animation-delay:.07s}
:root.reveal-on .bento .card.in:nth-child(3){animation-delay:.14s}
:root.reveal-on .bento .card.in:nth-child(4){animation-delay:.21s}
:root.reveal-on .lp-steps .lp-step.in:nth-child(2){animation-delay:.08s}
:root.reveal-on .lp-steps .lp-step.in:nth-child(3){animation-delay:.16s}
.bento .card:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
.lp-section,.lp-hero{scroll-margin-top:78px}

/* ============ AUTH (split-screen) ============ */
.auth-body{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-pane{display:flex;flex-direction:column;padding:34px 40px;min-height:100vh;min-height:100dvh}
.auth-form-pane{align-items:center;justify-content:center}
.auth-card{width:100%;max-width:392px}
.auth-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin-bottom:auto;font-weight:550}
.auth-back:hover{color:var(--text)}
.auth-head{text-align:center;margin:8px 0 22px}
.auth-logo{width:46px;height:46px;margin:0 auto 16px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  box-shadow:0 10px 26px -8px var(--accent-glow),inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,#fff)}
.auth-logo .ic{width:24px;height:24px;color:var(--accent-text)}
.auth-head h1{font-size:23px;font-weight:730;letter-spacing:-.02em;margin-bottom:5px}
.auth-head p{font-size:13.5px;color:var(--muted)}
.auth-tabs{display:flex;gap:4px;padding:4px;background:var(--panel2);border:1px solid var(--border);border-radius:11px;margin-bottom:22px}
.auth-tab{flex:1;padding:9px;border:0;background:none;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;
  border-radius:8px;font-family:inherit;transition:color var(--dur),background var(--dur)}
.auth-tab.active{color:var(--accent-text);background:var(--accent);box-shadow:0 4px 12px -4px var(--accent-glow)}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:7px}
.auth-field .hint{font-size:11.5px;color:var(--muted);margin-top:6px}
/* sign-up consent boxes (PDPL): one row per consent. `.auth-field .consent-row` out-ranks
   the generic `.auth-field label` above, which would otherwise turn the row back into a block. */
.auth-field .consent-row{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;cursor:pointer;color:var(--muted,#6b7280);margin-bottom:10px}
.auth-field .consent-row input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent,#10b981)}
.auth-field .consent-row input:disabled{cursor:not-allowed}
.auth-field .consent-row input:disabled + span{opacity:.6}
.auth-field .consent-tag{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap}
.auth-field .consent-wa{margin:2px 0 10px}
.auth-msg{font-size:12.5px;border-radius:9px;padding:10px 12px;margin-bottom:16px;display:none;line-height:1.45}
.auth-msg.show{display:block;animation:pop .24s var(--ease) both}
.auth-msg.err{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 42%,transparent)}
.auth-msg.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 42%,transparent)}
.auth-foot{margin-top:20px;text-align:center;font-size:12px;color:var(--muted);line-height:1.5}
.auth-foot a{font-weight:600}
/* brand pane (right) */
.auth-brand-pane{background:
  radial-gradient(700px 460px at 80% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),
  linear-gradient(180deg,var(--panel),var(--bg));
  border-right:1px solid var(--border);justify-content:center;position:relative;overflow:hidden}
.auth-brand-inner{max-width:420px}
.auth-brand-inner .lp-eyebrow{margin-bottom:18px}
.auth-brand-inner h2{font-size:27px;font-weight:730;letter-spacing:-.02em;line-height:1.18;margin-bottom:14px;text-wrap:balance}
.auth-brand-inner p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:26px}
.auth-points{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:13px}
.auth-points li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--text)}
.auth-points .ic{width:18px;height:18px;flex-shrink:0;color:var(--accent-ink);margin-top:1px}

/* ============ LEGAL pages ============ */
.legal-wrap{max-width:820px;margin:0 auto;padding:40px 22px 90px}
.legal-head{margin:14px 0 34px;padding-bottom:26px;border-bottom:1px solid var(--border)}
.legal-head h1{font-size:32px;font-weight:750;letter-spacing:-.022em;margin-bottom:10px}
.legal-head .updated{font-size:13px;color:var(--muted)}
.legal-note{background:var(--panel);border:1px solid var(--border);border-right:3px solid var(--warn);
  border-radius:9px;padding:13px 15px;font-size:13px;color:var(--muted);margin-bottom:30px;line-height:1.55}
.legal-body h2{font-size:18px;font-weight:680;letter-spacing:-.01em;margin:32px 0 10px}
.legal-body p,.legal-body li{font-size:14px;color:var(--muted);line-height:1.65}
.legal-body p{margin-bottom:12px}
.legal-body ul{margin:0 0 12px;padding-right:20px}
.legal-body li{margin-bottom:6px}
.legal-body strong{color:var(--text);font-weight:600}
.legal-body a{font-weight:550}
.legal-toc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.legal-toc a{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--panel2);
  border:1px solid var(--border);color:var(--muted)}
.legal-toc a:hover{color:var(--accent-ink);border-color:var(--accent-line)}

/* ============ About page — "trajectory" timeline (Sept 9 concept) ============ */
.abt-wrap{max-width:640px;margin:0 auto;padding:48px 22px 90px}
.abt-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.abt-note{background:var(--panel);border:1px solid var(--border);border-right:3px solid var(--warn);
  border-radius:10px;padding:12px 15px;font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:36px}
.abt-beat{display:flex;gap:16px}
.abt-rail{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0}
.abt-node{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--border2);font-family:var(--font-mono);font-size:11px;color:var(--muted);flex-shrink:0}
.abt-node--end{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.abt-line{width:1px;flex:1;background:var(--border);min-height:22px;margin-top:6px}
.abt-body{padding-bottom:32px;min-width:0}
.abt-beat:last-child .abt-body{padding-bottom:0}
.abt-label{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:7px;letter-spacing:.02em}
.abt-voice{font-family:var(--font-display);font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--text);margin-bottom:10px;text-wrap:balance}
.abt-say{font-size:14.5px;color:var(--text);line-height:1.6;margin-bottom:2px}
.abt-sub{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:12px}
.abt-founder{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.abt-mono{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--accent-line)}
.abt-founder b{font-size:14.5px;font-weight:600;color:var(--text);display:block}
.abt-founder span{font-size:12.5px;color:var(--muted)}
.abt-key{font-family:var(--font-display);font-size:16px;font-style:italic;line-height:1.45;color:var(--accent-ink);margin:2px 0 16px}
.abt-chips-lbl{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:7px}
.abt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.abt-chips:last-child{margin-bottom:0}
.abt-chip{font-size:12.5px;padding:5px 11px;border-radius:8px;background:var(--panel2);border:1px solid var(--border);color:var(--text)}
.abt-chip--no{background:transparent;border:1px dashed var(--border2);color:var(--muted);text-decoration:line-through}
.abt-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ============ Pricing page — honest, value-first (no numbers yet) ============ */
.pr-wrap{max-width:760px;margin:0 auto;padding:56px 22px 90px}
.pr-head{text-align:center;margin-bottom:38px}
.pr-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.pr-head h1{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px;text-wrap:balance}
.pr-head p{font-size:15px;color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto}
.pr-gets-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.pr-gets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:34px}
.pr-gets-note{font-size:13px;color:var(--muted);line-height:1.6;margin:-20px 0 34px}
.pr-get{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 15px}
.pr-tick{width:24px;height:24px;flex-shrink:0;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.pr-tick .ic{width:14px;height:14px}
.pr-get h4{font-size:14px;font-weight:650;color:var(--text);margin-bottom:3px}
.pr-get p{font-size:12.5px;color:var(--muted);line-height:1.5}
.pr-soon{text-align:center;background:var(--panel2);border:1px solid var(--border);border-radius:18px;padding:30px 26px;margin-bottom:24px}
.pr-soon-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);border-radius:999px;padding:5px 12px;margin-bottom:16px}
.pr-soon-sub{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto 20px}
.pr-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pr-contact{text-align:center;font-size:13px;color:var(--muted);line-height:1.6}
.pr-contact a{color:var(--accent-ink);font-weight:550}
/* pricing: the free account's buttons under the tiles; the tier in the box below */
.pr-free{text-align:center;margin:-10px 0 34px}
.pr-free-lead{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto 16px}
.pr-tier-list{list-style:none;margin:6px auto 18px;padding:0;max-width:520px;display:flex;flex-direction:column;gap:10px;text-align:right}
.pr-tier-list li{padding-right:13px;border-right:2px solid var(--accent-line);font-size:13px;color:var(--muted);line-height:1.5}
.pr-tier-list b{display:block;margin-bottom:1px;font-size:14px;font-weight:650;color:var(--text)}
.pr-apply-note{margin-top:12px;justify-content:center}
@media (max-width:560px){ .pr-gets{grid-template-columns:1fr} .pr-head h1{font-size:27px} }

/* ============ Feature grid (more product attributes) ============ */
.fic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.fic .ic{width:21px;height:21px}

/* ============ #platform — "actual OS" app-window composite (Sept 9 concept v2) ============ */
.os-window{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--panel);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.75)}
.os-bar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--panel2)}
.os-dots{display:flex;gap:5px}
.os-dots i{width:9px;height:9px;border-radius:50%;background:var(--border2)}
.os-title{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-right:6px}
.os-meta{margin-right:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}
/* #platform: the app window at an angle on a tinted stage (§A.4, "Present like a pro"), in CSS: no image assets.
   Laptops and up; phones keep the flat window so its text stays readable. The tilt is the `rotate` property, so the
   reveal's `transform` animation composes with it instead of replacing it. Static: nothing moves. */
@media (min-width:861px){
  .os-stage{padding:46px 56px;border-radius:24px;perspective:2200px;
    border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border));
    background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%),
      color-mix(in srgb,var(--accent) 3%,var(--panel))}
  .os-stage .os-window{rotate:.32 -1 0 9deg;box-shadow:0 44px 90px -40px rgba(0,0,0,.8),24px 30px 70px -40px var(--accent-glow)}
}
/* the window bar keeps one line on phones */
@media (max-width:560px){ .os-title-s{display:none} }

/* ============ #how — zero-setup beat (Sept 9 concept v2) ============ */
.zs-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.zs-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.zs-win{border:1.5px solid var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),var(--panel) 62%)}
.zs-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-bottom:16px}
.zs-lbl--ok{color:var(--accent-ink)}
.zs-x{display:flex;align-items:center;gap:11px;margin-bottom:12px;color:var(--muted)}
.zs-x:last-child{margin-bottom:0}
.zs-x .ic{width:16px;height:16px;color:var(--danger);flex-shrink:0}
.zs-x span{font-size:13.5px;text-decoration:line-through}
.zs-big{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.01em;color:var(--text);margin-bottom:14px}
.zs-file{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;margin-bottom:18px;flex-wrap:wrap}
.zs-file .ic{width:16px;height:16px;color:var(--muted)}
.zs-file .mono{font-size:12.5px;color:var(--text)}
.zs-file em{font-style:normal;font-size:11px;color:var(--muted)}
.zs-steps{border-top:1px solid var(--border);padding-top:16px;display:flex;flex-direction:column;gap:11px}
.zs-step{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--text)}
.zs-step--ok{font-weight:600}
.zs-n{width:22px;height:22px;border-radius:50%;background:var(--panel3);color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;flex-shrink:0}
.zs-step--ok .zs-n{background:var(--accent);color:var(--accent-text)}
@media (max-width:640px){ .zs-grid{grid-template-columns:1fr} }

/* ============ #proof — honest reframe (Sept 9 concept) ============ */
.pf-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:var(--gap)}
.pf-step{flex:1;min-width:158px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.pf-step--ok{border-color:var(--accent-line)}
.pf-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--panel3);color:var(--muted);margin-bottom:11px}
.pf-step--ok .pf-ic{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.pf-ic .ic{width:18px;height:18px}
.pf-tag{display:block;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:5px}
.pf-step h4,.pf-step h3{font-size:15px;font-weight:650;color:var(--text);margin:0 0 3px;letter-spacing:normal}
.pf-step p{font-size:12.5px;color:var(--muted);line-height:1.45}
.pf-arrow{width:20px;height:20px;color:var(--muted);align-self:center;flex-shrink:0}
.pf-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.pf-panel-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel2);font-size:12.5px;color:var(--muted)}
.pf-panel-head .ic{width:16px;height:16px;color:var(--muted)}
.pf-panel-head b{font-size:13px;font-weight:600;color:var(--text)}
.pf-live{margin-right:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.pf-chart{padding:16px 18px 12px}
.pf-bars{display:flex;align-items:flex-end;gap:16px;height:140px}
.pf-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.pf-bar-lbl{font-size:11.5px;color:var(--muted);margin-bottom:7px;text-align:center}
.pf-bar-lbl.acc{color:var(--accent-ink);font-weight:600}
.pf-bar-lbl b{display:block;font-size:13px;font-weight:700}
.pf-fill{width:100%;max-width:60px;height:74px;border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid var(--accent-line);border-bottom:none}
.pf-fill--ghost{height:74px;background:transparent;border:1px dashed var(--border2);border-bottom:none}
.pf-axis{display:flex;gap:16px;border-top:1px solid var(--border);padding-top:9px;margin-top:2px}
.pf-axis span{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.pf-axis span:first-child{color:var(--text)}
.pf-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:12px;padding:0 2px}
.pf-ea{display:inline-flex;align-items:center;gap:5px;color:var(--accent-ink);font-weight:600;text-decoration:none}
.pf-ea .ic{width:13px;height:13px;transition:transform var(--dur)}
.pf-ea:hover .ic{transform:translateX(-3px)}
.pf-live .lp-soon{margin-right:0;white-space:nowrap}
/* Questions — the FAQ in four groups; native <details>, no JS */
.faq-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;max-width:1000px;margin:0 auto}
.faq-g h3{margin:0 0 10px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq{background:var(--panel);border:1px solid var(--border);border-radius:12px;transition:border-color var(--dur)}
.faq[open]{border-color:var(--accent-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;font-size:14px;font-weight:600;line-height:1.4;color:var(--text);border-radius:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq summary .ic{width:16px;height:16px;flex:0 0 auto;color:var(--muted);transition:transform var(--dur)}
.faq[open] summary .ic{transform:rotate(-180deg);color:var(--accent-ink)}
.faq p{margin:0;padding:0 16px 14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.faq-more{display:inline-flex;align-items:center;gap:5px;color:var(--accent-ink);font-weight:600;text-decoration:none;white-space:nowrap}
.faq-more .ic{width:13px;height:13px;transition:transform var(--dur)}
.faq-more:hover .ic{transform:translateX(-3px)}
@media (max-width:820px){ .faq-groups{grid-template-columns:1fr;max-width:620px} }
/* keyboard: skip to content, off-screen until focused */
.lp-skip{position:absolute;right:12px;top:-64px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--accent);color:var(--accent-text);font-size:14px;font-weight:700;text-decoration:none;transition:top .15s}
.lp-skip:focus{top:12px}
#main:focus{outline:none}
/* phones: the lure's text buttons get a 44px-tall tap area, invisibly */
@media (max-width:820px){ .lure-help summary,.lure-sample{position:relative} .lure-help summary::after,.lure-sample::after{content:"";position:absolute;right:-4px;left:-4px;top:50%;height:44px;transform:translateY(-50%)} }
@media (max-width:640px){ .pf-arrow{transform:rotate(-90deg);margin:0 auto} .pf-bars{height:118px} }

/* ============ F2 design pass — lower-page sections to the hero's bar ============ */
/* Grounded in the reference boards: ONE accent on brand-tinted neutrals · emphasis
   BRIGHTENS the hovered item, never dims its siblings (Every UI Concept) · motion
   resolves, it doesn't loop (Micro-Animations) · kill the flat grid with a concrete
   per-card proof (Kill boring designs). */

/* How-it-works: hover-lift + a filled connector between steps (Micro-Animations stepper) */
.lp-step{transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.lp-step:hover{border-color:var(--accent-line);transform:translateY(-2px);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.75),0 0 0 1px var(--accent-line)}
.lp-step:not(:first-child)::before{content:"";position:absolute;top:34px;
  right:calc(-1 * var(--gap));width:var(--gap);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-line) 60%,var(--accent));z-index:2}
.lp-step:not(:first-child)::after{content:"";position:absolute;top:30px;right:-6px;
  width:8px;height:8px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);
  transform:rotate(-45deg);z-index:2}

/* ============ HUB (post-login home base) ============ */
.hub-body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden auto;
  background:radial-gradient(1100px 620px at 50% -12%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 62%),var(--bg)}
.hub-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:13px 24px;
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(12px)}
.hub-top .spacer{margin-right:auto}
.hub-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:var(--panel);
  border:1px solid var(--border);font-size:12.5px;color:var(--muted);max-width:230px;overflow:hidden}
.hub-chip b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The language switch sits in the header, and under the tiles on phones, where the header has no room for it (the
   site's headers drop their switch at 560px too). On phones the address chip gives way first: as a flex item it
   could not shrink below the full address, so it pushed the log-out button off the screen instead of ellipsing. */
.hub-lang{display:none}
@media (max-width:560px){
  .hub-top .hub-lang-top{display:none}
  .hub-lang{display:block;margin:30px 0 0;text-align:center;font-size:13px}
  .hub-lang a{color:var(--muted)}
  .hub-top .hub-chip,.hub-chip b{min-width:0}
}
.hub-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.hub-wrap{width:100%;max-width:1040px;margin:0 auto;padding:46px 24px 84px;flex:1}
.hub-hello{margin-bottom:30px;animation:reveal-up .6s var(--ease) both}
.hub-hello h1{font-size:clamp(26px,4vw,38px);font-weight:760;letter-spacing:-.026em;line-height:1.1;margin:11px 0 9px;text-wrap:balance}
.hub-hello h1 span{color:var(--accent-ink)}
.hub-hello p{color:var(--muted);font-size:15px;max-width:56ch;line-height:1.55}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,auto);gap:var(--gap)}
.hub-tile{display:flex;flex-direction:column;gap:9px;padding:22px;border-radius:var(--radius);background:var(--panel);
  border:1px solid var(--border);text-decoration:none;position:relative;overflow:hidden;
  animation:reveal-up .6s var(--ease) both;
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.hub-tile:nth-child(2){animation-delay:.05s}.hub-tile:nth-child(3){animation-delay:.1s}
.hub-tile:nth-child(4){animation-delay:.15s}.hub-tile:nth-child(5){animation-delay:.2s}
.hub-tile:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:0 22px 44px -26px var(--accent-glow)}
.hub-tile .fic{margin-bottom:2px}
.hub-tile h3{font-size:16px;font-weight:680;letter-spacing:-.012em;color:var(--text)}
.hub-tile p{font-size:13px;color:var(--muted);line-height:1.5}
.hub-tile .go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--accent-ink)}
.hub-tile .go .ic{width:15px;height:15px;transition:transform var(--dur)}
.hub-tile:hover .go .ic{transform:translateX(-3px)}
.hub-tile.primary{grid-column:1 / 3;grid-row:1 / 3;
  background:radial-gradient(600px 300px at 100% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),linear-gradient(165deg,color-mix(in srgb,var(--accent) 9%,var(--panel)),var(--panel));
  border-color:var(--accent-line)}
.hub-tile.primary .fic{width:46px;height:46px}
.hub-tile.primary h3{font-size:22px}
.hub-tile.primary .lead{font-size:14px;color:var(--muted);line-height:1.55;max-width:44ch}

/* "Get set up" (RFC 0024 §A; F-L2-1): owners only, until the account has a store and a saved month. The rules below
   that set display would beat the `hidden` attribute, so [hidden] is restated for this block. */
.hub-setup{margin:0 0 var(--gap);padding:20px 22px;border-radius:var(--radius);background:var(--panel);
  border:1px solid var(--accent-line);animation:reveal-up .6s var(--ease) both}
.hub-setup [hidden],.hub-setup-done[hidden]{display:none}
.hub-setup-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.hub-setup-head h2{font-size:17px;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.hub-setup-count{font-size:12.5px;font-weight:650;color:var(--accent-ink)}
.hub-setup-bar{height:6px;margin:12px 0 16px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);overflow:hidden}
.hub-setup-bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .5s var(--ease)}
.hub-setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hub-setup-steps li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.45;color:var(--text)}
.hub-setup-tick{flex:0 0 auto;width:22px;height:22px;margin-top:-1px;border-radius:50%;border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center}
.hub-setup-tick .ic{width:13px;height:13px;opacity:0}
.hub-setup-steps li.done .hub-setup-tick{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.hub-setup-steps li.done .hub-setup-tick .ic{opacity:1}
.hub-setup-steps li.done .hub-setup-lbl{color:var(--muted)}
.hub-setup-steps a{display:inline-flex;align-items:center;gap:5px;color:var(--accent-ink);font-weight:600;text-decoration:none}
.hub-setup-steps a .ic{width:14px;height:14px}
.hub-setup-steps a:hover{text-decoration:underline}
.hub-setup-opt{color:var(--muted);font-size:12.5px}
.hub-setup-body{flex:1;min-width:0}
.hub-setup-name{margin-right:6px;font-weight:650;color:var(--text);overflow-wrap:anywhere}
.hub-setup-form{display:flex;gap:8px;margin-top:9px;max-width:440px}
.hub-setup-form input{flex:1;min-width:0;padding:9px 12px;font-size:14px}
.hub-setup-msg{margin-top:7px;font-size:12.5px;color:var(--danger)}
.hub-setup-done{display:flex;align-items:center;gap:8px;margin:0 0 var(--gap);font-size:13.5px;color:var(--muted)}
.hub-setup-done .ic{width:16px;height:16px;color:var(--ok)}
.hub-setup-done a{margin-right:4px;color:var(--muted);text-decoration:underline}
@media (max-width:560px){
  .hub-setup{padding:18px 16px}
  .hub-setup-form{flex-direction:column}
  .hub-setup-form input{font-size:16px}
  .hub-setup-form .btn{justify-content:center}
}

/* How it works: the one-file card points to the tier's optional Amazon sync */
.zs-ea{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--border2);
  font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.zs-ea .ic{width:13px;height:13px;flex:0 0 auto;transition:transform var(--dur)}
.zs-ea:hover .ic{transform:translateX(-3px)}

/* ============ EARLY ACCESS — the higher tier, coming soon (apply) ============ */
.ea-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ea-card{display:flex;flex-direction:column;gap:14px;padding:12px}
.ea-shot .mmframe{border-radius:11px}
/* ============ REAL SCREENS — the new dashboard (Omar's prototype on its sample month; every figure blanked) ============
   One picture per theme, and the page shows the one that matches. Cropped frames fill from the top, leading side first. */
.shot-dark,.shot-light{display:block}
.shot-light,:root[data-theme="light"] .shot-dark{display:none}
:root[data-theme="light"] .shot-light{display:block}
.shot-dark img,.shot-light img{display:block;width:100%;height:auto}
.shot{position:relative;margin:0;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.shot--crop .shot-dark,.shot--crop .shot-light,.mmscreen--shot .shot-dark,.mmscreen--shot .shot-light{height:100%}
.shot--crop img,.mmscreen--shot img{height:100%;object-fit:cover;object-position:left top}
[dir="rtl"] .shot--crop img,[dir="rtl"] .mmscreen--shot img{object-position:right top}
.shot--crop::after{content:"";position:absolute;inset:auto 0 0 0;height:72px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--panel))}
.shot--statement{aspect-ratio:697 / 880;margin-top:2px}
/* two columns: the statement fills its card, down to the foot of the column beside it */
@media (min-width:821px){ .bento .dominant .shot--statement{flex:1 1 0;aspect-ratio:auto;min-height:480px} }
.shot--returns{margin-top:2px}
.shot--months{aspect-ratio:33 / 40;margin-top:14px}
.mmscreen--shot{display:block;position:relative;padding:0}
.shot-mark{position:absolute;z-index:2;inset-inline-end:10px;inset-block-end:10px;margin:0;max-width:calc(100% - 20px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(6px)}
.os-shot{background:var(--bg)}
.os-shot--team{border-top:1px solid var(--border)}
.hub-tile.primary .hub-shot{position:relative;display:block;margin-top:10px;max-width:560px;overflow:hidden;
  border:1px solid var(--border2);border-radius:10px}
.hub-tile.primary .hub-shot img{width:100%;height:auto}
@media (max-width:560px){
  .os-shot:not(.os-shot--team){aspect-ratio:4 / 5;overflow:hidden}
  .os-shot:not(.os-shot--team) .shot-dark,.os-shot:not(.os-shot--team) .shot-light{height:100%}
  .os-shot:not(.os-shot--team) img{height:100%;object-fit:cover;object-position:top}
  /* the mark keeps every word on a phone: it wraps instead of being cut */
  .shot-mark{white-space:normal;text-overflow:clip;border-radius:9px;line-height:1.35}
}
.ea-card-body{padding:0 6px 6px}
.ea-card h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0;font-size:16px;font-weight:650;color:var(--text);letter-spacing:-.01em}
.ea-card h3 .lp-soon{margin-right:0}
.ea-card p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}
.ea-apply{margin-top:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding:20px 22px;
  border-radius:var(--radius);border:1px dashed var(--accent-line);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.ea-apply > b{font-family:var(--font-display);font-size:24px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.ea-apply-go{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ea-apply-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ea-apply-note .ic{width:13px;height:13px;color:var(--accent-ink);flex:0 0 auto}
@media (max-width:980px){ .ea-grid{grid-template-columns:1fr;max-width:520px} }
@media (max-width:560px){ .ea-apply-go{align-items:flex-start} .ea-apply .btn{width:100%;justify-content:center} }

/* ============ Hero entrance sequence + ambient motion ============ */
@media (prefers-reduced-motion:no-preference){
  .lp-hero-eyebrow{animation:reveal-up .7s var(--ease) both}
  .lp-hero h1{animation:reveal-up .7s var(--ease) .08s both}
  .lp-hero .lead{animation:reveal-up .7s var(--ease) .16s both}
  /* the cascade resolve — verdict cards fall in from the headline, back-to-front,
     each blurred → sharp as it seats; the 'top move' lands last and sharpest. */
              .hero-point{animation:reveal-up .6s var(--ease) .26s backwards}
  /* phones: the hero starts visible and settles in, so the first paint doesn't wait (same stagger, no blur);
     laptops keep reveal-up as is */
  @media (max-width:820px){
    .lp-hero-eyebrow,.lp-hero h1,.lp-hero .lead,.hero-point{animation-name:settle-up;animation-duration:.4s}
  }
  @keyframes settle-up{from{opacity:.85;transform:translateY(8px)}to{opacity:1;transform:none}}
  .lp-hero::before{animation:lp-aurora 16s ease-in-out infinite alternate}
  @keyframes lp-aurora{0%{opacity:.7;transform:translateX(3%) scale(1)}100%{opacity:1;transform:translateX(-3%) scale(1.1)}}

}

/* primary CTA gets a quiet sheen + lift on hover */
.btn-primary.btn-lg{position:relative;overflow:hidden}
.btn-primary.btn-lg::after{content:"";position:absolute;top:0;right:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn-primary.btn-lg:hover::after{right:140%}

/* ============ Responsive ============ */
@media (max-width:860px){
  .lp-foot-grid{grid-template-columns:1fr 1fr} .lp-foot-brand{grid-column:1 / -1}
  .auth-body{grid-template-columns:1fr}
  .auth-brand-pane{display:none}
}
@media (max-width:860px){
  .hub-grid{grid-template-columns:1fr}
  .hub-tile.primary{grid-column:auto;grid-row:auto}
}
@media (max-width:820px){
  .gl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:1fr}
  .bento .dominant{grid-column:auto;grid-row:auto}
  .lp-steps{grid-template-columns:1fr}
  .lp-step:not(:first-child)::before,.lp-step:not(:first-child)::after{display:none}
  .lp-section{padding:60px 0}
  .lp-hero{padding:26px 0 30px}
  /* hero funnel collapses: the lure rises right under the headline; the proof (deck + ROI) sits below it */
  .hero-wrap::before{display:none}
  .hero-wrap{display:flex;flex-direction:column}
  .hero-top{order:1} .hero-point{order:2}
        /* #problem mechanism explainers + gap payoff stack on tablet/phone */
  .mech-grid{grid-template-columns:1fr}
  .gap-payoff{padding:24px 22px}
}
@media (min-width:721px) and (max-width:960px){ .lp-navlink,.lp-mega-trigger{padding-right:8px;padding-left:8px} .lp-nav-inner{gap:10px} }
@media (min-width:721px) and (max-width:800px){ .lp-navlink,.lp-mega-trigger{padding-right:5px;padding-left:5px} .lp-nav-inner{gap:6px} .lp-nav-right{gap:5px} }
@media (max-width:720px){
  .lp-nav-mid{display:none}
  .lp-burger{display:inline-flex;align-items:center;min-height:40px}
  .lp-nav-right .lp-navlink,.lp-nav-right #signup-cta{display:none}
  .lp-mobile.open{display:block;border-top:1px solid var(--border);background:var(--bg);padding:14px 22px 20px}
  .lp-mobile a{display:block;padding:11px 8px;font-size:15px;font-weight:600;color:var(--text);border-radius:9px}
  .lp-mobile a:hover{background:var(--hover)}
  .lp-mobile .lp-mobile-sep{margin-top:10px;padding-top:12px;border-top:1px solid var(--border);display:flex;gap:10px}
  .lp-mobile .lp-mobile-sep .btn{flex:1}
}
@media (max-width:560px){
  .lure-drop{padding:16px 15px;gap:12px} .lure-sub{gap:7px 10px} .lure-gap-row.is-gap b{font-size:21px} }
@media (max-width:480px){ .auth-pane{padding:26px 22px} .lp-mega-panel{min-width:300px}
  }

/* ============ Reduced-motion: honor the OS setting ============ */
/* Landing gates its intended motion behind prefers-reduced-motion:no-preference
   blocks, but two animations sit outside those guards — .lure-out's reveal-up and
   .lure-chip.reading .dot's chip-pulse (the latter runs infinite). This global
   override neutralizes any animation/transition when the visitor asks for reduced
   motion, and forces infinite loops to a single near-instant cycle. Mirrors the
   dashboard safety net in style.css. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* The two free tools as cards: the landing's #tools section, and the guide's hub and articles (tools.css). */
.ar-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:900px}
.ar-tool{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;padding:24px}
.ar-tool:hover{border-color:var(--accent-line)}
.ar-tool h2,.ar-tool h3{font-size:19px;font-weight:800;margin:0;line-height:1.45}
#tools .ar-tools{margin:0 auto}
.ar-tool p{margin:0;font-size:14.5px;line-height:1.85;color:var(--muted)}
.ar-tool-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.ar-tool-ic .ic{width:18px;height:18px}
.ar-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--accent-ink)}
@media (max-width:760px){ .ar-tools{grid-template-columns:1fr} }
.ar-go .ic{width:15px;height:15px}
#tools .ar-more{margin:22px 0 0;text-align:center}
.ar-more a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--accent-ink);text-decoration:none}
.ar-more .ic{width:15px;height:15px}
/* English: the site's display serif for the card titles, and Latin leading (the rules above were set for Cairo) */
html[lang="en"] .ar-tool h2,html[lang="en"] .ar-tool h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
html[lang="en"] .ar-tool p{line-height:1.65}
/* the integrations mock is a fixed-height screen: under 360px its English note wraps to three lines and ran 21px under
   the clip, so there it grows to fit */
@media (max-width:359px){ .mmscreen--ac{height:auto;min-height:176px} }