/* Marketing/auth redesign: Home, Product, Pricing, Security, Sign in, Sign up.
   Extracted from the design prototype. Shared across all templates in this family;
   not used by dashboard/app pages (those use tailwind.css via base.html). */
:root{
  --ink:#0A0A0B; --body:#4B4D57; --muted:#8A8D99; --line:#E7E7EA;
  --bg:#FFFFFF; --bg-alt:#F7F7F5; --card-bg:#FFFFFF;
  --accent:#0E6B55; --accent-dark:#0A5443; --accent-shadow:rgba(14,107,85,.55);
  --ltd-green:#0E6B55; --ltd-green-dark:#0A5443; --ltd-green-shadow:rgba(14,107,85,.55);
  --st-blue:#1E4E8C; --st-blue-dark:#163C6B; --st-blue-shadow:rgba(30,78,140,.45); --st-highlight:#DCEAFB;
  --highlight:#CFF0C7; --amber:#B5690A; --amber-bg:#FBEDD8;
  --safe:#0E6B55; --safe-bg:#DCF3EC;
  --shadow: 0 30px 60px -30px rgba(10,10,11,.18), 0 10px 24px -12px rgba(10,10,11,.08);
  --nav-bg: rgba(255,255,255,.92);
}
:root[data-theme="dark"]{
  --ink:#F3F4F1; --body:#B7BAC2; --muted:#787C88; --line:#26282E;
  --bg:#0B0C0F; --bg-alt:#151619; --card-bg:#131418;
  --accent:#25C29B; --accent-dark:#1EA084; --accent-shadow:rgba(37,194,155,.45);
  --ltd-green:#25C29B; --ltd-green-dark:#1EA084; --ltd-green-shadow:rgba(37,194,155,.45);
  --st-blue:#6FA8E8; --st-blue-dark:#4A85C9; --st-blue-shadow:rgba(111,168,232,.4); --st-highlight:#142C4A;
  --highlight:#123B31; --amber:#E0A458; --amber-bg:#3A2A12;
  --safe:#25C29B; --safe-bg:#123B31;
  --shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 10px 24px -12px rgba(0,0,0,.4);
  --nav-bg: rgba(11,12,15,.85);
}
/* Global persona re-theme: every element that reads var(--accent) etc. follows
   whichever persona is active in the nav toggle. Pricing and the logo mark
   deliberately opt out via --ltd-green/--st-blue directly, since they show both
   business types at once and must stay fixed regardless of toggle. */
:root[data-persona="trader"]{
  --accent: var(--st-blue);
  --accent-dark: var(--st-blue-dark);
  --accent-shadow: var(--st-blue-shadow);
  --highlight: var(--st-highlight);
}
*{box-sizing:border-box;}
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(0.4,0,0.2,1);}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none;}}
html{scroll-behavior:auto;background:var(--bg);}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Inter',ui-sans-serif,sans-serif;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s;}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
a{cursor:pointer;}
h1 mark{ box-decoration-break:clone;-webkit-box-decoration-break:clone; }

/* ---- nav ---- */
nav.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--nav-bg);backdrop-filter:blur(8px);z-index:50;}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;gap:16px;max-width:none;margin:0;}
.logo{display:flex;align-items:center;flex:none;}
.logo .lockup{height:24px;width:auto;display:block;}
.logo .lockup .dot-st{fill:var(--st-blue);}
.logo .lockup .dot-ltd{fill:var(--ltd-green);}
.logo .lockup .wordmark{fill:var(--ink);font-family:inherit;}
.nav-center{display:flex;align-items:center;gap:4px;background:var(--bg-alt);padding:4px;border-radius:9px;flex:none;}
.nav-center a{padding:7px 14px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--body);text-decoration:none;white-space:nowrap;}
.nav-center a.active{background:var(--card-bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06);}
.persona-toggle{display:flex;align-items:center;gap:2px;border:1px solid var(--line);padding:3px;border-radius:8px;font-size:12.5px;font-weight:600;flex:none;}
.persona-toggle a{padding:6px 11px;border-radius:6px;color:var(--muted);text-decoration:none;white-space:nowrap;}
.persona-toggle a.active{color:#fff;}
.persona-toggle a[data-persona-link="director"].active{background:var(--ltd-green);}
.persona-toggle a[data-persona-link="trader"].active{background:var(--st-blue);}
.nav-actions{display:flex;align-items:center;gap:14px;flex:none;}
.nav-actions a.signin{font-size:14px;font-weight:600;color:var(--body);text-decoration:none;white-space:nowrap;}
.theme-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card-bg);color:var(--body);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0;}
.theme-btn svg{width:16px;height:16px;}
.hamburger{display:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card-bg);color:var(--body);cursor:pointer;flex:none;align-items:center;justify-content:center;padding:0;}
.hamburger svg{width:16px;height:16px;}

.mobile-menu{display:none;border-bottom:1px solid var(--line);background:var(--bg);padding:14px 32px 20px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:10px 4px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-persona{display:flex;gap:8px;margin:14px 0 4px;}
.mobile-persona a{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:9px;font-size:13.5px;font-weight:600;color:var(--body);}
.mobile-persona a.active{color:#fff;}
.mobile-persona a[data-persona-link="director"].active{background:var(--ltd-green);border-color:var(--ltd-green);}
.mobile-persona a[data-persona-link="trader"].active{background:var(--st-blue);border-color:var(--st-blue);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:8px;font-size:14.5px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-primary:hover{opacity:.85;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px var(--accent-shadow);}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-1px);}
.btn-block{width:100%;}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:7px;}
.btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
.hidden{display:none !important;}

/* ---- hero ---- */
.hero{padding:64px 0 0;text-align:center;}
h1{font-size:clamp(28px,4vw,44px);line-height:1.18;letter-spacing:-0.02em;color:var(--ink);font-weight:700;margin:0 0 22px;}
h1 mark{background:var(--highlight);color:var(--ink);padding:0 8px;border-radius:6px;}
.sub{font-size:18.5px;line-height:1.55;color:var(--body);max-width:600px;margin:0 auto 32px;}
.sub strong{color:var(--ink);font-weight:600;}
.cta-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.hero-genie-ico{width:16px;height:16px;color:var(--gd-accent);flex:none;}
.fineprint{font-size:13px;color:var(--muted);margin-bottom:28px;}
.persona-pick{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin-bottom:50px;}
.persona-pick a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;}
.persona-pick a:hover{border-color:var(--ink);}

/* ---- mocked dashboard UI ---- */
.mockdash{width:100%;min-width:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card-bg);text-align:left;}
.mockdash-main{padding:24px 26px;}
.mockdash-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px;}
.stat-card{border:1px solid var(--line);border-radius:10px;padding:14px;min-width:0;}
.stat-card .l{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.stat-card .v{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}
.stat-card .v.pos{color:var(--accent);}

/* ---- hero dashboard replica (real dashboard hero card + genie) ---- */
.hero-dash{max-width:820px;margin:44px auto 0;text-align:left;}
.hero-dash-suggest-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.hero-dash-suggest-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.hero-dash-suggest-inline{display:inline-flex;align-items:center;gap:10px;flex:1;min-width:0;}
.hero-dash-suggest-q{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--accent);background:none;border:none;padding:0;font-family:inherit;cursor:pointer;text-align:left;}
.hero-dash-suggest-q svg{width:16px;height:16px;flex:none;}
.hero-dash-pause{width:16px;height:16px;color:var(--muted);flex:none;opacity:.7;}
.hero-card{border:1px solid var(--line);border-radius:16px;background:var(--card-bg);box-shadow:var(--shadow);padding:26px 30px 24px;position:relative;}
.hero-row{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px;}
.hero-col{min-width:0;}
.hero-col .l{font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.hero-col .v{font-size:26px;font-weight:800;letter-spacing:-0.01em;color:var(--ink);margin:0 0 5px;}
.hero-col .v.warn{color:var(--amber);}
.hero-col .c{font-size:11.5px;color:var(--muted);}
.hero-col.feature{text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 20px;}
.hero-col.feature .l{color:var(--accent);}
.hero-col.feature .v{font-size:42px;color:var(--accent);}
.hero-divider{border-top:1px solid var(--line);margin:22px 0 16px;}
.hero-headroom-head{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.hero-headroom-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:9px;}
.hero-headroom-foot b{color:var(--ink);}
.hero-card .band{height:8px;margin-bottom:0;}
.hero-genie-fab{width:50px;height:50px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.28);color:#fff;animation:heroFabFloat 3.6s ease-in-out infinite;z-index:70;}
.hero-genie-fab-inline{position:relative;top:-10px;flex:none;width:36px;height:36px;}
.hero-genie-fab-inline svg{width:15px;height:15px;}
.hero-genie-fab svg{width:20px;height:20px;}
@keyframes heroFabFloat{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-7px,-9px);}
}

/* ---- "Top business expenses" card, exact classes/values from app/templates/ltd/dashboard.html ---- */
.expense-card{padding:18px 20px;position:relative;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;flex-wrap:wrap;gap:8px;}
.panel-head h3{font-size:13px;font-weight:700;color:var(--ink);margin:0;}
.cat-link{color:var(--accent);font-size:11.5px;font-weight:650;}
.expense-card p.panel-sub{font-size:11px;color:var(--muted);margin:0 0 14px;}
.cat-row{margin-bottom:12px;}
.cat-row:last-of-type{margin-bottom:0;}
.cat-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink);margin-bottom:5px;}
.cat-top .pct{color:var(--muted);margin-right:7px;}
.cat-bar{height:5px;background:var(--bg-alt);border-radius:99px;overflow:hidden;}
.cat-bar-fill{height:100%;border-radius:99px;background:var(--accent);}
.cat-foot{font-size:10.5px;color:var(--muted);margin-top:12px;padding-top:11px;border-top:1px solid var(--line);}
.nudge-btn{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--accent);background:none;border-left:none;border-right:none;border-bottom:none;font-family:inherit;width:100%;text-align:left;}
.nudge-btn svg{width:11px;height:11px;flex:none;opacity:.75;}
.nudge-btn:hover{text-decoration:underline;}
.nudge-window{color:var(--muted);font-weight:400;}
.expense-genie-fab{position:absolute;top:-18px;right:-18px;width:44px;height:44px;}
.expense-genie-fab svg{width:18px;height:18px;}

/* ---- landing hero genie demo panel: same open/close mechanics as the real app's
   partials/genie.html (see that file for the full annotated version) -- scale-from-lamp
   reveal, blur fade, glow burst -- reused here read-only, no drag, no live backend. ---- */
.genie-burst{position:fixed;z-index:72;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,var(--accent-shadow),transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(0.16,1,0.3,1),opacity .7s cubic-bezier(0.16,1,0.3,1);}
.genie-burst.burst{transform:translate(-50%,-50%) scale(9);opacity:1;}
.genie-dot{position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--gd-critical);border:2px solid var(--card-bg);animation:gdDotPulse 2.4s ease-in-out infinite;}
.genie-hint{position:fixed;z-index:74;background:var(--ink);color:var(--card-bg);font-size:11px;padding:6px 11px;border-radius:99px;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 8px 20px -6px rgba(0,0,0,.35);transition:opacity .3s ease, transform .3s ease;transform:translateY(4px);}
.genie-hint.show{opacity:1;transform:translateY(0);}
.genie-panel{position:fixed;z-index:75;background:var(--card-bg);border-radius:18px;box-shadow:var(--shadow),0 0 0 1px var(--line);display:flex;flex-direction:column;width:min(380px,calc(100vw - 28px));height:min(440px,calc(100vh - 120px));opacity:0;filter:blur(10px);pointer-events:none;transform:scale(.05);transition:opacity .4s cubic-bezier(0.4,0,1,1),filter .35s ease-in,transform .45s cubic-bezier(0.55,0,0.85,0.35),left .5s cubic-bezier(0.16,1,0.3,1),top .5s cubic-bezier(0.16,1,0.3,1);}
.genie-panel.open{opacity:1;filter:blur(0);transform:scale(1);pointer-events:auto;transition:opacity .5s cubic-bezier(0.16,1,0.3,1),filter .6s cubic-bezier(0.16,1,0.3,1),transform .65s cubic-bezier(0.34,1.56,0.64,1),left .5s cubic-bezier(0.16,1,0.3,1),top .5s cubic-bezier(0.16,1,0.3,1);}
.genie-draghandle{width:36px;height:4px;border-radius:99px;background:var(--line);margin:9px auto 0;flex:none;}
.genie-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 14px;border-bottom:1px solid var(--line);flex:none;}
.genie-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);}
.genie-title svg{width:14px;height:14px;color:var(--accent);}
.genie-header-right{display:flex;align-items:center;gap:12px;flex:none;}
.genie-clear{font-family:inherit;border:none;background:none;color:var(--muted);font-size:10px;text-decoration:underline;cursor:pointer;padding:0;}
.genie-minimize{border:none;background:var(--bg-alt);width:26px;height:26px;border-radius:50%;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none;}
.genie-minimize svg{width:12px;height:12px;}
.genie-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;}
.genie-msg{max-width:88%;font-size:13.5px;line-height:1.5;}
.genie-msg.user{align-self:flex-end;background:var(--highlight);color:var(--ink);padding:10px 13px;border-radius:14px 14px 4px 14px;}
.genie-msg.ai{align-self:flex-start;}
.genie-msg.ai .bubble{background:var(--bg-alt);padding:12px 14px;border-radius:4px 14px 14px 14px;color:var(--ink);}
.genie-starter{font-size:13px;line-height:1.55;color:var(--muted);}
.genie-chip{align-self:flex-start;font-family:inherit;font-size:12px;border:none;box-shadow:0 0 0 1px var(--line);background:var(--bg-alt);border-radius:99px;padding:8px 14px;cursor:pointer;color:var(--accent);font-weight:600;text-align:left;}
.genie-thinking{display:flex;gap:8px;align-items:center;padding:6px 4px;}
.genie-thinking span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:gdThink 1.1s ease-in-out infinite;}
.genie-thinking span:nth-child(2){animation-delay:.15s;}
.genie-thinking span:nth-child(3){animation-delay:.3s;}
.genie-inputrow{display:flex;gap:8px;padding:14px 16px 6px;border-top:1px solid var(--line);flex:none;}
.genie-inputrow input{flex:1;border:none;box-shadow:0 0 0 1px var(--line);border-radius:99px;padding:10px 14px;font-size:13px;font-family:inherit;outline:none;background:var(--bg-alt);color:var(--ink);cursor:pointer;}
.genie-inputrow input::placeholder{color:var(--muted);}
.genie-inputrow button{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;}
.genie-inputrow button svg{width:14px;height:14px;}
.genie-footnote{text-align:center;font-size:10px;color:var(--muted);padding:0 16px 12px;flex:none;}
@media (prefers-reduced-motion:reduce){
  .hero-genie-fab{animation:none;}
  .genie-panel,.genie-panel.open{transition:opacity .2s ease,filter .2s ease;}
  .genie-burst{display:none;}
}
@media (max-width:640px){
  .hero-row{grid-template-columns:1fr;gap:16px;}
  .hero-col{padding:0 !important;border-left:none !important;border-top:1px solid var(--line);padding-top:14px !important;}
  .hero-col:first-child{border-top:none;padding-top:0 !important;}
  .hero-genie-fab{right:6px;bottom:-14px;}
}
.vat-mini{margin-bottom:18px;}
.vat-mini-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:6px;}
.vat-mini-head b{color:var(--ink);font-weight:700;}
.vat-mini .band{height:8px;margin-bottom:0;}
.chart-mock{border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;align-items:flex-end;gap:6px;height:100px;min-width:0;}
.chart-mock i{display:block;flex:1;background:linear-gradient(180deg,var(--accent),var(--highlight));border-radius:3px 3px 0 0;opacity:.85;}

/* ---- how it works ---- */
.howitworks{padding:64px 0;}
.howitworks .wrap{background:var(--bg-alt);border-radius:28px;padding:56px 40px;max-width:1040px;}
.howitworks-head{max-width:600px;margin:0 auto 48px;text-align:center;}
.howitworks-head .tag{margin-bottom:14px;justify-content:center;display:flex;}
.howitworks-head h2{font-size:30px;letter-spacing:-0.02em;color:var(--ink);margin:0;font-weight:700;}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step-card{background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:22px;}
.step-card .num{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-bottom:16px;}
.step-card h3{font-size:15.5px;color:var(--ink);margin:0 0 8px;}
.step-card p{font-size:13.5px;line-height:1.55;margin:0;color:var(--body);}

/* ---- AI showcase ---- */
.ai-showcase{padding:8px 0 88px;}
.ai-showcase-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.ai-showcase-head .tag{margin-bottom:14px;}
.ai-showcase-head h2{font-size:30px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 14px;font-weight:700;}
.ai-showcase-head h2:first-child{margin-top:56px;}
.ai-showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.ai-showcase-grid .card-shell{display:flex;flex-direction:column;}
.ai-showcase-grid .mockchat-body{flex:1;}

/* ---- feature row ---- */
.feature{padding:64px 0;}
.feature.alt .wrap{background:var(--bg-alt);border-radius:28px;padding:56px 40px;max-width:1040px;}
.feature .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.feature .grid>*{min-width:0;}
.feature .grid.rev{grid-template-columns:.95fr 1.05fr;}
.feature .grid.rev .art{order:-1;}
.tag{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:block;}
.genie-icon-lg{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 32% 28%, var(--gd-accent-dark), var(--gd-accent) 60%);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -2px var(--gd-accent-shadow);margin-bottom:18px;animation:gdFloat 7s ease-in-out infinite,gdBreathe 7s ease-in-out infinite;}
.genie-icon-lg svg{width:26px;height:26px;}
.feature h2{font-size:32px;line-height:1.15;letter-spacing:-0.02em;color:var(--ink);margin:0 0 16px;font-weight:700;}
.feature p{font-size:16px;line-height:1.6;margin:0 0 20px;}
.feature ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
.feature li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--body);}

.card-shell{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--card-bg);}
.suggested-q{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--accent);border-radius:999px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;background:var(--highlight);}
.suggested-q svg{width:15px;height:15px;flex:none;}
.mockchat-body{padding:20px;display:flex;flex-direction:column;gap:12px;}
.bubble{max-width:80%;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;}
.bubble.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px;}
.bubble.ai{align-self:flex-start;background:var(--bg-alt);color:var(--ink);border-bottom-left-radius:3px;}
.bubble.ai b{color:var(--accent);}

.scenario-card{padding:26px 28px;}
.scenario-q{font-size:14px;color:var(--body);padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.scenario-q b{color:var(--ink);}
.scenario-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.scenario-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--line);}
.scenario-table td{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top;}
.scenario-table tr:last-child td{border-bottom:none;}
.scenario-table .opt{font-weight:600;color:var(--ink);}
.scenario-table .note{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.scenario-table .num{font-weight:700;color:var(--ink);text-align:right;}
.scenario-table .num.win{color:var(--accent);}
.scenario-bottom{background:var(--highlight);border-radius:10px;padding:16px 18px;font-size:14px;color:var(--ink);line-height:1.55;}
.scenario-bottom b{color:var(--accent-dark);}

.txn-list{padding:6px 24px 20px;}
.txn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.txn-row:last-child{border-bottom:none;}
.txn-left{display:flex;flex-direction:column;gap:3px;min-width:0;}
.txn-desc{font-size:13.5px;font-weight:600;color:var(--ink);}
.txn-meta{font-size:12px;color:var(--muted);}
.txn-meta .flag-inline{color:var(--amber);}
.txn-cat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--body);white-space:nowrap;padding:4px 9px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);}
.txn-cat i{width:6px;height:6px;border-radius:50%;flex:none;}
.txn-amt{font-size:13.5px;font-weight:700;white-space:nowrap;}
.txn-amt.neg{color:var(--ink);}
.txn-amt.pos{color:var(--accent);}
.rules-note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--highlight);border-radius:10px;margin:0 24px 20px;font-size:13px;color:var(--ink);line-height:1.5;}
.rules-note svg{flex:none;margin-top:2px;color:var(--accent-dark);width:16px;height:16px;}

.taxrows{padding:24px;}
.mtd-stepper{padding:26px 22px 22px;}
.mtd-stepper-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:20px;}
.mtd-nodes{display:flex;}
.mtd-node{flex:1;text-align:center;position:relative;}
.mtd-node:not(:last-child)::after{content:'';position:absolute;top:11px;left:50%;width:100%;height:2px;background:var(--line);z-index:0;}
.mtd-node.done:not(:last-child)::after{background:var(--accent);}
.mtd-dot{width:22px;height:22px;border-radius:50%;background:var(--card-bg);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);margin:0 auto 10px;position:relative;z-index:1;}
.mtd-node.done .mtd-dot{background:var(--accent);border-color:var(--accent);color:#fff;}
.mtd-node.current .mtd-dot{border-color:var(--accent);color:var(--accent);background:var(--card-bg);}
.mtd-lbl{font-size:12.5px;font-weight:700;color:var(--ink);}
.mtd-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.mtd-node.done .mtd-sub{color:var(--accent);}
.taxrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;}
.taxrow:last-child{border-bottom:none;}
.taxrow .k{color:var(--body);}
.taxrow .v{font-weight:700;color:var(--ink);}
.taxrow .v.accent{color:var(--accent);}
.splitbar{height:10px;border-radius:6px;background:var(--bg-alt);overflow:hidden;margin:6px 0 20px;}
.splitbar i{display:block;height:100%;background:var(--accent);border-radius:6px;}

.bandwrap{padding:24px;}
.bandlabel{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px;}
.band{height:14px;border-radius:8px;background:var(--bg-alt);overflow:hidden;margin-bottom:26px;}
.band i{display:block;height:100%;background:var(--accent);border-radius:8px;}
.band.over{background:var(--gd-critical-bg);}
.band.over i{background:var(--gd-critical);}

.receipt-mock{display:grid;grid-template-columns:1fr 1fr;}
.receipt-img{background:var(--bg-alt);padding:24px;display:flex;align-items:center;justify-content:center;}
.receipt-paper{width:100%;max-width:170px;background:var(--card-bg);border:1px solid var(--line);border-radius:6px;padding:16px 14px;}
.receipt-paper .ln{height:6px;background:var(--line);border-radius:3px;margin-bottom:7px;}
.receipt-fields{padding:24px;}
.field{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line);}
.field:last-child{border-bottom:none;}
.field .k{color:var(--muted);}
.field .v{font-weight:600;color:var(--ink);}
.flag{margin-top:12px;background:var(--amber-bg);color:var(--amber);font-size:12px;font-weight:600;padding:8px 10px;border-radius:8px;}
.flag.ok{background:var(--highlight);color:var(--accent-dark);}

.export-list{padding:22px;display:flex;flex-direction:column;gap:10px;}
.file-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:12px 14px;gap:10px;flex-wrap:wrap;}
.file-row .meta{display:flex;align-items:center;gap:12px;}
.file-ic{width:34px;height:34px;border-radius:8px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--body);flex:none;}
.file-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.file-size{font-size:12px;color:var(--muted);}

/* -- CSV export preview: a real (anonymised) screenshot, not a mock, so
   the crop only ever needs a bottom alpha fade baked in (see
   csv-export-preview.png) -- the frame/caption below is what signals
   "this is a preview, not the whole file", in both themes. -- */
.export-preview{margin-top:2px;}
.export-preview-label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.export-preview-frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card-bg);box-shadow:var(--shadow);}
.export-preview-frame img{display:block;width:100%;height:auto;}
.export-preview-caption{font-size:11.5px;color:var(--muted);margin-top:8px;text-align:center;}

.invoice-mock{display:grid;grid-template-columns:1.2fr 1fr;}
.invoice-doc{background:var(--bg-alt);padding:24px;}
.invoice-email-label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.invoice-email-shot{display:block;width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow);}
.invoice-paper{background:var(--card-bg);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.invoice-paper .inv-band{background:var(--accent);color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;}
.invoice-paper .inv-band .lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.85;}
.invoice-paper .inv-band .num{font-size:16px;font-weight:700;}
.invoice-paper .inv-band .co{font-size:12.5px;font-weight:600;text-align:right;}
.invoice-paper .inv-body{padding:16px 18px;}
.invoice-paper .inv-meta{display:flex;justify-content:space-between;margin-bottom:14px;}
.invoice-paper .inv-meta .lbl{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.invoice-paper .inv-meta .val{font-size:12.5px;font-weight:600;color:var(--ink);}
.invoice-paper .inv-meta .r{text-align:right;}
.invoice-paper table{width:100%;border-collapse:collapse;font-size:11.5px;}
.invoice-paper th{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--line);}
.invoice-paper th:last-child,.invoice-paper td:last-child{text-align:right;}
.invoice-paper td{padding:8px 0;color:var(--body);}
.invoice-paper .subtot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding-top:10px;}
.invoice-paper .total{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--ink);background:var(--highlight);padding:8px 10px;border-radius:6px;margin-top:8px;}
.status-track{padding:24px;}
.status-track .st{display:flex;gap:12px;padding-bottom:22px;position:relative;}
.status-track .st:last-child{padding-bottom:0;}
.status-track .st::before{content:'';position:absolute;left:9px;top:20px;bottom:0;width:1px;background:var(--line);}
.status-track .st:last-child::before{display:none;}
.status-track .dot2{width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex:none;z-index:1;}
.status-track .st.pending .dot2{background:var(--line);color:var(--muted);}
.status-track .label{font-size:13.5px;font-weight:600;color:var(--ink);}
.status-track .time{font-size:12px;color:var(--muted);}

.email-mock{padding:20px;border-bottom:1px solid var(--line);}
.email-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.email-from{font-size:12px;font-weight:600;color:var(--ink);}
.email-from .email-addr{font-weight:400;color:var(--muted);}
.email-subject{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px;}
.email-subject .urgency{display:inline-block;padding:2px 9px;border-radius:20px;background:#DC2626;color:#fff;font-size:10.5px;font-weight:700;margin-left:8px;vertical-align:2px;}
.email-kv{width:100%;border-collapse:collapse;margin-bottom:14px;}
.email-kv td{padding:8px 0;font-size:12.5px;border-bottom:1px solid var(--line);}
.email-kv td:first-child{color:var(--muted);}
.email-kv td:last-child{text-align:right;font-weight:700;color:var(--ink);}
.email-kv tr:last-child td{border-bottom:none;}
.email-cta{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:9px 16px;border-radius:7px;margin-bottom:14px;}
.email-note{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 4px;}
.reminder-list{padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.reminder-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--body);}
.reminder-item i{width:18px;height:18px;border-radius:50%;background:var(--highlight);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;flex:none;}

.founder{padding:56px 0;text-align:center;}
.founder .wrap{background:var(--bg-alt);border-radius:28px;padding:56px 40px;max-width:1040px;}
.founder blockquote{font-size:22px;line-height:1.5;color:var(--ink);max-width:680px;margin:0 auto 28px;font-weight:500;letter-spacing:-0.01em;}
.founder-id{display:flex;align-items:center;justify-content:center;gap:12px;}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none;}
.founder-id .name{font-size:14px;font-weight:700;color:var(--ink);}
.founder-id .role{font-size:13px;color:var(--muted);}

.ctaband{padding:64px 0;text-align:center;}
.ctaband h2{font-size:30px;color:var(--ink);margin:0 0 24px;letter-spacing:-0.02em;}

.pricing-hero{text-align:center;padding:64px 0 50px;}
.pricing-hero h1{font-size:clamp(28px,4vw,42px);}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:840px;margin:0 auto;align-items:stretch;}
.price-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--shadow);background:var(--card-bg);min-width:0;}
.price-card .btn-block{margin-top:auto;}
.price-card .plan-name{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.price-card .plan-name.plan-name-st{color:var(--st-blue);}
.price-card .btn-accent.btn-st{background:var(--st-blue);box-shadow:0 8px 20px -8px var(--st-blue-shadow);}
.price-card .btn-accent.btn-st:hover{background:var(--st-blue-dark);}
.price-card .plan-name.plan-name-ltd{color:var(--ltd-green);}
.price-card .btn-accent.btn-ltd{background:var(--ltd-green);box-shadow:0 8px 20px -8px var(--ltd-green-shadow);}
.price-card .btn-accent.btn-ltd:hover{background:var(--ltd-green-dark);}
.price-card .amount{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;}
.price-card .amount span{font-size:15px;font-weight:500;color:var(--muted);}
.price-card .trial{font-size:13.5px;color:var(--muted);margin:6px 0 22px;}
.price-card ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px;}
.price-card li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.4;color:var(--body);}
.li-check{flex:none;}
.soon-tag{flex:none;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line);padding:1px 7px;border-radius:999px;white-space:nowrap;}
.btn-subscribe-direct{display:block;text-align:center;font-size:12.5px;color:var(--muted);text-decoration:underline;margin-top:12px;}
.btn-subscribe-direct:hover{color:var(--ink);}

.security-hero{text-align:center;padding:64px 0 56px;}
.security-hero h1{font-size:clamp(28px,4vw,42px);}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:80px;}
.sec-card{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--card-bg);}
.sec-card .ic{width:34px;height:34px;border-radius:9px;background:var(--bg-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--accent);}
.sec-card .ic svg{width:17px;height:17px;}
.sec-card h3{font-size:15.5px;color:var(--ink);margin:0 0 8px;}
.sec-card p{font-size:13.5px;line-height:1.55;margin:0;color:var(--body);}

/* ---- Policy pages (Terms, Privacy) ---- */
.policy-content{max-width:720px;margin:0 auto;padding-bottom:80px;}
.policy-hero{text-align:center;padding:56px 0 30px;}
.policy-ic{width:44px;height:44px;border-radius:12px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:19px;background:linear-gradient(135deg,var(--st-blue),var(--ltd-green));box-shadow:0 10px 22px -10px rgba(10,10,11,.35);}
.policy-hero h1{font-size:clamp(26px,4vw,38px);color:var(--ink);margin:0 0 8px;letter-spacing:-0.01em;}
.policy-meta{font-size:13px;color:var(--muted);margin:0;}
.policy-summary,.policy-warning{border-radius:10px;padding:16px 20px;margin:0 0 28px;}
.policy-summary p,.policy-warning p{margin:0;font-size:14px;line-height:1.65;}
.policy-summary{background:var(--highlight);}
.policy-summary p{color:var(--accent-dark);}
.policy-warning{background:var(--amber-bg);}
.policy-warning p{color:var(--amber);}
.policy-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;}
.policy-toc a{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--card-bg);border:1px solid var(--line);padding:6px 12px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s;}
.policy-toc a:hover{color:var(--ink);border-color:var(--ink);}
.policy-card{border:1px solid var(--line);border-radius:14px;padding:26px 28px;background:var(--card-bg);margin-bottom:16px;scroll-margin-top:88px;}
.policy-card h2{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:700;color:var(--ink);margin:0 0 14px;}
.policy-card h2 .ic{width:30px;height:30px;border-radius:8px;background:var(--bg-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;}
.policy-card p{font-size:14px;line-height:1.7;color:var(--body);margin:0 0 12px;}
.policy-card p:last-child{margin-bottom:0;}
.policy-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.policy-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--body);}
.policy-card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px;}
.policy-card strong{color:var(--ink);font-weight:600;}
.policy-card a{color:var(--accent);}
.policy-card a:hover{text-decoration:underline;}
.policy-card code{background:var(--bg-alt);color:var(--accent-dark);padding:0.1em 0.4em;border-radius:4px;font-size:0.9em;}
/* Data-flow pills (Privacy > AI providers): fixed safe/caution semantics, deliberately
   not tied to var(--accent)/var(--highlight) so they don't flip blue on the trader persona. */
.policy-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.03em;text-transform:uppercase;margin-left:6px;vertical-align:middle;}
.policy-pill-caution{background:var(--amber-bg);color:var(--amber);}
.policy-pill-safe{background:var(--safe-bg);color:var(--safe);}
.policy-crosslink{text-align:center;margin-top:8px;}
.policy-crosslink a{font-size:12.5px;color:var(--muted);text-decoration:underline;}
.policy-crosslink a:hover{color:var(--ink);}

.product-hero{text-align:center;padding:64px 0 20px;}
.product-hero h1{font-size:clamp(28px,4vw,42px);}

/* ---- AI capability grid (Product page) ---- */
.ai-cap{padding:16px 0 88px;}
.ai-cap-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.ai-cap-head .tag{margin-bottom:14px;justify-content:center;display:flex;}
.ai-cap-head h2{font-size:30px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 14px;font-weight:700;}
.ai-cap-shot{max-width:900px;margin:0 auto 48px;}
.ai-cap-shot img{display:block;width:100%;height:auto;}
.ai-cap-shot-dark{display:none;}
:root[data-theme="dark"] .ai-cap-shot-light{display:none;}
:root[data-theme="dark"] .ai-cap-shot-dark{display:block;}

/* ---- Generic light/dark screenshot pair swap (any real product screenshot) ---- */
.shot-dark{display:none;}
:root[data-theme="dark"] .shot-light{display:none;}
:root[data-theme="dark"] .shot-dark{display:block;}
.ai-cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ai-cap-card{background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:22px;}
.ai-cap-card .cap-tag{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;}
.ai-cap-card .cap-example{font-size:14.5px;font-weight:600;color:var(--ink);border-left:2px solid var(--accent);padding-left:12px;margin-bottom:12px;line-height:1.5;}
.ai-cap-card p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0;}

footer{border-top:1px solid var(--line);padding:56px 0 32px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
.foot-grid h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 14px;}
.foot-grid a{display:block;font-size:14px;color:var(--body);text-decoration:none;margin-bottom:10px;}
.foot-grid a:hover{color:var(--ink);}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:8px;}

/* ---- responsive ---- */
@media (max-width:900px){
  .wrap{padding:0 20px;}
  nav.top .wrap{padding:12px 20px;}
  .howitworks .wrap,.feature.alt .wrap,.founder .wrap{border-radius:20px;padding:36px 24px;}
  .nav-center,.persona-toggle,.nav-actions a.signin{display:none;}
  .hamburger{display:flex;}
  .feature .grid,.feature .grid.rev{grid-template-columns:1fr;}
  .feature .grid.rev .art{order:0;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .sec-grid{grid-template-columns:1fr;}
  .receipt-mock{grid-template-columns:1fr;}
  .invoice-mock{grid-template-columns:1fr;}
  .ai-showcase-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .ai-cap-grid{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr;max-width:440px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .persona-pick{flex-direction:column;gap:6px;}
}
@media (max-width:480px){
  .nav-actions{gap:8px;}
  .btn-primary{padding:9px 14px;font-size:13.5px;}
  .theme-btn,.hamburger{width:32px;height:32px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .txn-row{flex-wrap:wrap;}
  .txn-amt{margin-left:auto;}
  .policy-card{padding:20px;}
}

/* ---- auth pages ---- */
.auth-header{display:flex;align-items:center;justify-content:space-between;max-width:1160px;margin:0 auto;padding:24px 32px;}
.auth-back{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;}
.auth-back:hover{color:var(--ink);}
.auth-wrap{display:flex;align-items:center;justify-content:center;padding:20px 24px 100px;}
.auth-box{width:100%;max-width:400px;}
.auth-box-head{text-align:center;margin-bottom:26px;}
.auth-box-head h1{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-bottom:8px;}
.auth-box-head p{font-size:14px;color:var(--muted);}
.auth-box-head a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.auth-card{background:var(--card-bg);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow);}
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:14px;font-weight:600;padding:11px;border-radius:10px;cursor:pointer;text-decoration:none;font-family:inherit;}
.google-btn:hover{background:var(--bg-alt);}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;}
.auth-divider .ln{flex:1;height:1px;background:var(--line);}
.auth-divider span{font-size:12px;color:var(--muted);}
.account-type-group{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.account-type-option{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer;font-size:14px;color:var(--body);}
.account-type-option:has(input:checked){border-color:var(--accent);background:var(--highlight);color:var(--ink);font-weight:600;}
.account-type-option input{accent-color:var(--accent);}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.form-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.form-row-between label{margin-bottom:0;}
.form-link{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;}
.form-link:hover{text-decoration:underline;}
.form-input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);font-family:inherit;}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--highlight);}
.form-input::placeholder{color:var(--muted);}
.form-input[disabled]{opacity:.6;cursor:not-allowed;}
.pwd-strength{display:flex;gap:4px;margin-top:8px;}
.pwd-strength i{flex:1;height:4px;border-radius:2px;background:var(--line);display:block;}
.auth-submit{width:100%;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:12px;border-radius:10px;border:none;cursor:pointer;margin-top:4px;font-family:inherit;}
.auth-submit:hover{background:var(--accent-dark);}
.auth-submit[disabled]{opacity:.55;cursor:not-allowed;}
.auth-fineprint{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5;}
.auth-fineprint a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.auth-footer-links{text-align:center;margin-top:26px;font-size:12.5px;color:var(--muted);}
.auth-footer-links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;margin:0 6px;}
.auth-banner{max-width:400px;margin:0 auto 16px;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.5;}
.auth-banner.error{background:var(--amber-bg);color:var(--amber);}
.auth-banner.info{background:var(--highlight);color:var(--accent-dark);}
.auth-box-wide{max-width:560px;}
.auth-box-wide .auth-banner{max-width:none;}

/* ---- onboarding forms (ltd/sole trader) ---- */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:480px){.form-grid-2{grid-template-columns:1fr;}}
/* Labels can wrap to a different number of lines than their sibling in the
   other column (e.g. "National Insurance number" vs "Self Assessment UTR"),
   which otherwise pushes one input down relative to the other. Reserving a
   fixed two-line height keeps every input in a row pinned to the same Y
   position regardless of how its own label happens to wrap. */
.form-grid-2 .form-group label{min-height:2.7em;line-height:1.35;display:block;}
@media (max-width:480px){.form-grid-2 .form-group label{min-height:0;}}
.field-hint{font-size:11.5px;color:var(--muted);margin-top:5px;}
.field-error{font-size:12px;color:var(--amber);margin-top:5px;display:none;}
.field-error.show{display:block;}
.select-row{display:flex;gap:8px;}
.select-input{width:50%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);font-family:inherit;}
.select-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--highlight);}
.year-end-hint{font-size:11.5px;color:var(--accent);margin-top:5px;display:none;}
.year-end-hint.show{display:block;}
.consent-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:6px 0 18px;}
.consent-box{flex:none;margin-top:2px;width:20px;height:20px;border-radius:5px;border:2px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.consent-box.checked{background:var(--accent);border-color:var(--accent);}
.consent-box svg{display:none;width:12px;height:12px;color:#fff;}
.consent-box.checked svg{display:block;}
.consent-text{font-size:12.5px;color:var(--muted);line-height:1.55;}
.consent-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:480px){
  .auth-header{padding:20px;}
  .auth-card{padding:24px;}
}

/* Auth page entrance fade (sign-in, sign-up): the inline pre-paint script in each
   template adds .sd-lp-in before first render to avoid a flash of the un-faded page. */
.sd-lp-in body{opacity:0 !important;transform:translateY(10px);}
.auth-spinner{animation:auth-spin 0.8s linear infinite;}
@keyframes auth-spin{to{transform:rotate(360deg);}}

/* ---- confirm modal (replaces native confirm() on onboarding/subscribe) ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,11,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;opacity:0;pointer-events:none;transition:opacity .15s;}
.modal-overlay.open{opacity:1;pointer-events:auto;}
:root[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.65);}
.modal-box{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-width:400px;width:100%;padding:24px;transform:translateY(8px) scale(.98);transition:transform .15s;}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-box h2{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-0.01em;}
.modal-box p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0 0 20px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}
.btn-danger{background:#DC2626;color:#fff;}

/* =====================================================================
   Real-app mini mockups (Dashboard / Transactions / Invoices), used on
   ltd/product.html only. Faithful to app/templates/ltd/dashboard.html,
   transactions.html, invoices.html and their real app/static/tailwind.css
   token values, not this file's own marketing palette above -- namespaced
   under --gd- and .gd-e- prefixes so the two never collide. Genie lamp and
   panel (.gd-fab, .gd-panel, etc.) are a direct port of partials/genie.html's drag physics
   and spawn-out-of-the-lamp panel animation, bounded to its own .gd-embed
   card (not the viewport) since several independent instances share one
   page -- see product-genie-demo.js for the interaction logic.
   ===================================================================== */
:root{
  --gd-ink:#0A0A0B; --gd-body:#4B4D57; --gd-muted:#8A8D99; --gd-line:#E7E7EA;
  --gd-bg-alt:#F7F7F5; --gd-card-bg:#FFFFFF;
  --gd-accent:#0E6B55; --gd-accent-dark:#0A5443; --gd-accent-shadow:rgba(14,107,85,.55); --gd-highlight:#CFF0C7;
  --gd-money-in:#0E6B55; --gd-amber:#B5690A; --gd-critical:#B8433A; --gd-critical-bg:#FBE4E1;
  --gd-tag-blue:#2A5DB0; --gd-tag-blue-bg:#DCE7F7;
  --gd-tag-purple:#7C4FD1; --gd-tag-purple-bg:#EDE4FB;
  --gd-tag-slate:#5B6472; --gd-tag-slate-bg:#EEF0F2;
}
:root[data-theme="dark"]{
  --gd-ink:#F3F4F1; --gd-body:#B7BAC2; --gd-muted:#787C88; --gd-line:#26282E;
  --gd-bg-alt:#151619; --gd-card-bg:#131418;
  --gd-accent:#25C29B; --gd-accent-dark:#1EA084; --gd-accent-shadow:rgba(37,194,155,.45); --gd-highlight:#123B31;
  --gd-money-in:#25C29B; --gd-amber:#E0A458; --gd-critical:#E2685C; --gd-critical-bg:#3A1815;
  --gd-tag-blue:#7FAEEE; --gd-tag-blue-bg:#1B2C4D;
  --gd-tag-purple:#B79CF2; --gd-tag-purple-bg:#2C2340;
  --gd-tag-slate:#9AA5B1; --gd-tag-slate-bg:#232830;
}
/* Sole Trader persona: the .gd-embed/.gdc-* live-demo widgets (Product page)
   have their own --gd-accent token set, separate from the main --accent
   re-theme above -- without this override they stay hardcoded to the Ltd
   green regardless of persona. var(--st-blue) etc. already carry the
   correct light/dark value via the :root[data-theme="dark"] cascade above,
   so one block (after the dark block, to win the equal-specificity tie)
   covers both themes. */
:root[data-persona="trader"]{
  --gd-accent: var(--st-blue); --gd-accent-dark: var(--st-blue-dark);
  --gd-accent-shadow: var(--st-blue-shadow); --gd-highlight: var(--st-highlight);
  --gd-money-in: var(--st-blue);
}

.gd-embed{position:relative;padding:20px 20px 24px;min-height:380px;container-type:inline-size;}
.gd-embed-static{padding:20px 20px 22px;}

.gd-e-btn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;border-radius:9px;padding:8px 12px;border:none;font-family:inherit;white-space:nowrap;cursor:default;}
.gd-e-btn svg{width:13px;height:13px;}
.gd-e-btn-primary{background:var(--gd-accent);color:#fff;}
.gd-e-btn-ghost{background:var(--gd-card-bg);color:var(--gd-ink);box-shadow:0 0 0 1px var(--gd-line);}

.gd-e-suggest{margin-bottom:14px;}
.gd-e-suggest-eyebrow{font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--gd-muted);margin:0 0 6px;}
.gd-e-suggest-row{display:flex;align-items:center;gap:6px;}
.gd-e-suggest-line{display:flex;align-items:center;gap:7px;flex:1;min-width:0;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;border-radius:6px;}
.gd-e-suggest-line:hover .gd-e-suggest-text{text-decoration:underline;}
.gd-e-suggest-line:focus-visible{outline:2px solid var(--gd-accent);outline-offset:3px;}
.gd-e-suggest-sparkle{width:12px;height:12px;color:var(--gd-accent);flex:none;}
.gd-e-suggest-text{font-size:12px;font-weight:600;color:var(--gd-accent);}

.gd-e-head{font-size:14.5px;font-weight:750;color:var(--gd-ink);margin:0 0 14px;display:flex;align-items:center;gap:7px;}
.gd-e-head svg{width:15px;height:15px;color:var(--gd-accent);}

/* dashboard hero: real 3-across grid (this embed sits in its own wide,
   standalone block rather than the narrower 2-col feature grid the
   transactions/invoices embeds live in, so there's room for it) --
   collapses to stacked rows below 560px, same real figures/labels either way */
.gd-e-hero{border:1px solid var(--gd-line);border-radius:12px;padding:20px 22px 4px;margin-bottom:16px;}
.gd-e-hero-stats{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px;}
.gd-e-stat{display:block;padding:0 0 16px;min-width:0;}
.gd-e-stat .l{display:block;font-size:10.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--gd-muted);margin-bottom:8px;}
.gd-e-stat .v{display:block;font-size:22px;font-weight:800;color:var(--gd-ink);font-variant-numeric:tabular-nums;text-align:left;}
.gd-e-stat .v .c{display:block;font-size:10.5px;font-weight:500;color:var(--gd-muted);margin-top:6px;}
.gd-e-stat.feature{text-align:center;border-left:1px solid var(--gd-line);border-right:1px solid var(--gd-line);padding-left:20px;padding-right:20px;}
.gd-e-stat.feature .l{color:var(--gd-accent);}
.gd-e-stat.feature .v{color:var(--gd-accent);font-size:34px;text-align:center;}
.gd-e-stat.tax .v{color:var(--gd-amber);}
.gd-e-headroom{padding:14px 0 18px;border-top:1px solid var(--gd-line);}
.gd-e-headroom-title{font-size:11px;color:var(--gd-muted);margin-bottom:9px;}
.gd-e-gauge{height:6px;background:var(--gd-bg-alt);border-radius:99px;overflow:hidden;margin-bottom:8px;}
.gd-e-gauge i{display:block;height:100%;border-radius:99px;background:var(--gd-accent);}
.gd-e-gauge.over i{background:var(--gd-critical);}
.gd-e-foot{font-size:11px;color:var(--gd-muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.gd-e-foot b{color:var(--gd-ink);}
.gd-e-foot .sep{width:3px;height:3px;border-radius:50%;background:var(--gd-muted);flex:none;}
@media (max-width:560px){
  .gd-e-hero-stats{grid-template-columns:1fr 1fr;grid-template-areas:"feature feature" "turnover tax";column-gap:16px;row-gap:12px;}
  .gd-e-stat{grid-area:turnover;padding-bottom:0;}
  .gd-e-stat.feature{grid-area:feature;text-align:left;border-left:none;border-right:none;padding:0 0 10px;border-bottom:1px solid var(--gd-line);}
  .gd-e-stat.feature .l,.gd-e-stat.feature .v{text-align:left;}
  .gd-e-stat.tax{grid-area:tax;padding-bottom:0;}
}
/* Same stacked treatment as the viewport breakpoint above, but keyed off
   .gd-embed's own rendered width (container-type:inline-size) -- needed
   since .gd-embed can now sit in a narrow feature-grid column at a desktop
   viewport width where the @media rule above never fires. */
@container (max-width:620px){
  /* 2-row layout (feature stat full-width on top, the other two side by
     side below), not a full 3-row stack -- a plain stack made this card
     over 300px taller (.gd-e-hero-stats alone went from ~110px to 318px),
     which left no real margin for the "Open the floating Genie" scroll
     target to fit the card's header and its lamp in the same viewport. */
  .gd-e-hero-stats{grid-template-columns:1fr 1fr;grid-template-areas:"feature feature" "turnover tax";column-gap:16px;row-gap:12px;}
  .gd-e-stat{grid-area:turnover;padding-bottom:0;}
  .gd-e-stat.feature{grid-area:feature;text-align:left;border-left:none;border-right:none;padding:0 0 10px;border-bottom:1px solid var(--gd-line);}
  .gd-e-stat.feature .l,.gd-e-stat.feature .v{text-align:left;}
  .gd-e-stat.tax{grid-area:tax;padding-bottom:0;}
}

.gd-e-actions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}

.gd-e-label{font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--gd-muted);margin:0 0 8px;}
.gd-e-attn{display:flex;gap:7px;flex-wrap:wrap;}
.gd-e-chip{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:14px;background:var(--gd-card-bg);font-size:10.5px;white-space:nowrap;box-shadow:0 0 0 1px var(--gd-line);}
.gd-e-chip b{font-weight:700;color:var(--gd-ink);}
.gd-e-chip.crit{box-shadow:0 0 0 1px var(--gd-critical);}
.gd-e-chip.crit b{color:var(--gd-critical);}
.gd-e-chip.warn{box-shadow:0 0 0 1px var(--gd-amber);}
.gd-e-chip.warn b{color:var(--gd-amber);}
.gd-e-chip .m{color:var(--gd-muted);}

/* transactions ledger */
.gd-e-lens{display:flex;align-items:center;gap:5px;margin-bottom:14px;flex-wrap:wrap;}
.gd-e-lens span{font-size:11px;font-weight:650;color:var(--gd-muted);padding:5px 10px;border-radius:99px;}
.gd-e-lens span.on{background:var(--gd-highlight);color:var(--gd-accent);}
.gd-e-month{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;gap:8px;flex-wrap:wrap;}
.gd-e-month h4{font-size:12.5px;font-weight:700;color:var(--gd-ink);margin:0;}
.gd-e-month span{font-size:10.5px;color:var(--gd-muted);white-space:nowrap;}
.gd-e-month .in{color:var(--gd-money-in);font-weight:600;}
.gd-e-tx{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--gd-line);}
.gd-e-tx-ico{flex:none;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--c-fg);background:var(--c-bg);margin-top:1px;}
.gd-e-tx-ico svg{width:13px;height:13px;}
.gd-e-tx-main{flex:1;min-width:0;}
.gd-e-tx-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.gd-e-tx-desc{font-size:12px;font-weight:600;color:var(--gd-ink);}
.gd-e-tx-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:99px;color:var(--c-fg);background:var(--c-bg);}
.gd-e-tx-meta{font-size:10.5px;color:var(--gd-muted);margin-top:2px;}
.gd-e-tx-flag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:650;color:var(--gd-amber);margin-top:4px;}
.gd-e-tx-flag svg{width:10px;height:10px;}
.gd-e-tx-amt{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;flex:none;margin-top:2px;color:var(--gd-ink);}

/* invoices -- font sizes/weights below are copied verbatim from the real
   status-pill, stat, rq, rr, search-wrap input, tab and inv- rules in
   app/templates/invoices.html, not approximated */
.gd-e-search{display:flex;align-items:center;gap:7px;background:var(--gd-bg-alt);border-radius:9px;padding:8px 11px;color:var(--gd-muted);margin-bottom:20px;}
.gd-e-search svg{width:13px;height:13px;flex:none;}
.gd-e-search span{font-size:12.5px;}
.gd-e-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;align-items:center;}
.gd-e-tabs span{font-size:12px;font-weight:650;color:var(--gd-muted);padding:7px 13px;border-radius:99px;}
.gd-e-tabs span.on{background:var(--gd-highlight);color:var(--gd-accent);}
.gd-e-stats{display:flex;flex-wrap:wrap;border:1px solid var(--gd-line);border-radius:12px;padding:14px 16px;margin-bottom:14px;gap:12px;}
.gd-e-stats .s{flex:1;min-width:96px;}
.gd-e-stats .s .l{font-size:9px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--gd-muted);margin-bottom:6px;}
.gd-e-stats .s .v{font-size:16px;font-weight:750;color:var(--gd-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.gd-e-stats .s .v.crit{color:var(--gd-critical);}
.gd-e-stats .s .sub{font-size:10px;color:var(--gd-muted);margin-top:4px;}
.gd-e-stats .s .sub.crit{color:var(--gd-critical);}
.gd-e-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:baseline;}
.gd-e-chip2{font-size:12px;font-weight:750;color:var(--gd-ink);background:var(--gd-bg-alt);box-shadow:0 0 0 1px var(--gd-line);border-radius:7px;padding:2px 7px;}

.gd-e-attnq{border:1px solid var(--gd-line);border-radius:12px;padding:15px 16px 3px;margin-bottom:16px;}
.gd-e-attnq-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:750;color:var(--gd-ink);margin-bottom:13px;}
.gd-e-attnq-title svg{width:15px;height:15px;color:var(--gd-accent);}
.gd-e-attnq-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--gd-accent);color:#fff;font-size:10.5px;font-weight:750;}
.gd-e-row{padding:14px 0 16px;border-top:1px solid var(--gd-line);display:flex;flex-direction:column;gap:9px;}
.gd-e-row:first-of-type{border-top:none;padding-top:0;}
.gd-e-row .gd-e-row-desc{margin:0 0 2px;font-size:12.5px;font-weight:600;color:var(--gd-ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.4;}
.gd-e-row .gd-e-row-meta{margin:0;font-size:11px;color:var(--gd-muted);line-height:1.4;}
.gd-e-row-actions{display:flex;gap:8px;margin-top:3px;}

.gd-e-status{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:750;padding:4px 10px;border-radius:99px;white-space:nowrap;}
.gd-e-status .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.gd-e-status.draft{background:var(--gd-bg-alt);color:var(--gd-muted);}
.gd-e-status.sent{background:var(--gd-tag-blue-bg);color:var(--gd-tag-blue);}
.gd-e-status.viewed{background:var(--gd-tag-purple-bg);color:var(--gd-tag-purple);}
.gd-e-status.overdue{background:var(--gd-critical-bg);color:var(--gd-critical);}

.gd-e-inv{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--gd-line);}
.gd-e-inv:first-child{border-top:none;}
.gd-e-inv-ico{flex:none;color:var(--gd-accent);}
.gd-e-inv-ico svg{width:15px;height:15px;}
.gd-e-inv-main{flex:1;min-width:0;}
.gd-e-inv-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap;}
.gd-e-inv-num{font-size:12.5px;font-weight:750;color:var(--gd-ink);font-variant-numeric:tabular-nums;}
.gd-e-inv-meta{font-size:11px;color:var(--gd-muted);}
.gd-e-inv-amt{font-size:13px;font-weight:750;color:var(--gd-ink);font-variant-numeric:tabular-nums;flex:none;}

/* -- the lamp: same mechanics as partials/genie.html's .genie-fab -- */
.gd-fab{position:absolute;z-index:70;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 32% 28%, var(--gd-accent-dark), var(--gd-accent) 60%);color:#fff;border:none;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -2px var(--gd-accent-shadow);animation:gdFloat 7s ease-in-out infinite, gdBreathe 7s ease-in-out infinite;touch-action:none;user-select:none;}
.gd-fab svg{width:17px;height:17px;}
.gd-fab.dragging{cursor:grabbing;animation:none;transform:scale(1.08);}
.gd-fab.landing{animation:gdLanding .6s cubic-bezier(0.34,1.56,0.64,1) 1;}
@keyframes gdFloat{0%{transform:translateY(0) rotate(0deg);}22%{transform:translateY(-5px) rotate(-2deg);}47%{transform:translateY(-1px) rotate(1deg);}71%{transform:translateY(-6px) rotate(1.5deg);}100%{transform:translateY(0) rotate(0deg);}}
@keyframes gdBreathe{0%,100%{box-shadow:0 10px 22px -2px var(--gd-accent-shadow);}50%{box-shadow:0 13px 26px -2px var(--gd-accent-shadow);}}
@keyframes gdLanding{0%{transform:scale(1,1);}28%{transform:scale(1.24,.8);}46%{transform:scale(.86,1.16);}64%{transform:scale(1.1,.92);}80%{transform:scale(.96,1.05);}100%{transform:scale(1,1);}}
.gd-dot{position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--gd-critical);border:2px solid var(--gd-card-bg);animation:gdDotPulse 2.4s ease-in-out infinite;}
@keyframes gdDotPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.25);opacity:.7;}}
.gd-hint{position:absolute;z-index:71;background:var(--gd-ink);color:var(--gd-card-bg);font-size:11px;padding:6px 11px;border-radius:99px;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 8px 20px -6px rgba(0,0,0,.35);transition:opacity .3s ease, transform .3s ease;transform:translateY(4px);}
.gd-hint.show{opacity:1;transform:translateY(0);}
.gd-burst{position:absolute;z-index:72;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle, var(--gd-accent-shadow), transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(0.16,1,0.3,1), opacity .7s cubic-bezier(0.16,1,0.3,1);}
.gd-burst.burst{transform:translate(-50%,-50%) scale(9);opacity:1;}

/* -- the panel: scales out of the lamp's exact position -- */
.gd-panel{position:absolute;z-index:75;background:var(--gd-card-bg);border-radius:18px;box-shadow:0 0 0 1px var(--gd-line), var(--shadow);display:flex;flex-direction:column;opacity:0;filter:blur(10px);pointer-events:none;transform:scale(.05);transition:opacity .4s cubic-bezier(0.4,0,1,1), filter .35s ease-in, transform .45s cubic-bezier(0.55,0,0.85,0.35), left .5s cubic-bezier(0.16,1,0.3,1), top .5s cubic-bezier(0.16,1,0.3,1);}
.gd-panel.open{opacity:1;filter:blur(0);transform:scale(1);pointer-events:auto;transition:opacity .5s cubic-bezier(0.16,1,0.3,1), filter .6s cubic-bezier(0.16,1,0.3,1), transform .65s cubic-bezier(0.34,1.56,0.64,1), left .5s cubic-bezier(0.16,1,0.3,1), top .5s cubic-bezier(0.16,1,0.3,1);}
.gd-panel-drag{transition:none !important;}
.gd-p-draghandle{width:34px;height:4px;border-radius:99px;background:var(--gd-line);margin:8px auto 0;flex:none;}
.gd-p-header{display:flex;align-items:center;justify-content:space-between;padding:10px 15px 11px;border-bottom:1px solid var(--gd-line);flex:none;cursor:grab;}
.gd-p-header.dragging{cursor:grabbing;}
.gd-p-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--gd-ink);}
.gd-p-title svg{width:12px;height:12px;color:var(--gd-accent);}
.gd-p-header-right{display:flex;align-items:center;gap:10px;flex:none;}
.gd-p-min{border:none;background:var(--gd-bg-alt);width:23px;height:23px;border-radius:50%;cursor:pointer;color:var(--gd-muted);display:flex;align-items:center;justify-content:center;flex:none;}
.gd-p-min svg{width:10px;height:10px;}
.gd-p-clear{font-family:inherit;border:none;background:none;color:var(--gd-muted);font-size:10px;text-decoration:underline;cursor:pointer;padding:0;}
.gd-p-body{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:11px;}
.gd-p-starter{font-size:12.5px;line-height:1.55;color:var(--gd-body);}
.gd-p-msg{max-width:88%;font-size:12.5px;line-height:1.5;animation:gdReveal .5s cubic-bezier(0.16,1,0.3,1) both;}
@keyframes gdReveal{from{opacity:0;filter:blur(3px);transform:translateY(8px);}to{opacity:1;filter:blur(0);transform:translateY(0);}}
.gd-p-msg.user{align-self:flex-end;background:var(--gd-highlight);color:var(--gd-accent-dark);padding:9px 12px;border-radius:13px 13px 3px 13px;}
.gd-p-msg.ai{align-self:flex-start;}
.gd-p-msg.ai .bubble{background:var(--gd-bg-alt);padding:11px 13px;border-radius:3px 13px 13px 13px;color:var(--gd-ink);}
.gd-p-msg.ai mark{background:var(--gd-highlight);color:var(--gd-accent-dark);font-weight:700;padding:0 3px;border-radius:3px;}
.gd-p-chip{align-self:flex-start;font-family:inherit;font-size:11px;border:none;box-shadow:0 0 0 1px var(--gd-line);background:var(--gd-card-bg);border-radius:99px;padding:7px 12px;cursor:pointer;color:var(--gd-accent);font-weight:600;text-align:left;}
.gd-p-thinking{display:flex;gap:8px;align-items:center;padding:6px 4px;}
.gd-p-thinking span{width:5px;height:5px;border-radius:50%;background:var(--gd-muted);animation:gdThink 1.1s ease-in-out infinite;}
.gd-p-thinking span:nth-child(2){animation-delay:.15s;}
.gd-p-thinking span:nth-child(3){animation-delay:.3s;}
@keyframes gdThink{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
.gd-p-inputrow{display:flex;gap:7px;padding:10px 12px 5px;border-top:1px solid var(--gd-line);flex:none;}
.gd-p-inputrow input{flex:1;border:none;box-shadow:0 0 0 1px var(--gd-line);border-radius:99px;padding:8px 12px;font-size:12px;font-family:inherit;outline:none;background:var(--gd-bg-alt);color:var(--gd-ink);}
.gd-p-inputrow input:focus{box-shadow:0 0 0 1.5px var(--gd-accent);}
.gd-p-inputrow input::placeholder{color:var(--gd-muted);}
.gd-p-inputrow button{width:30px;height:30px;border-radius:50%;border:none;background:var(--gd-accent);color:#fff;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;}
.gd-p-inputrow button svg{width:12px;height:12px;}

@media (max-width:480px){
  .gd-e-stats{flex-direction:column;gap:12px;}
}
@media (prefers-reduced-motion: reduce){
  .gd-fab{animation:none;}
  .gd-panel, .gd-panel.open{transition:opacity .2s ease, filter .2s ease;}
  .gd-burst{display:none;}
  .gd-p-msg{animation:none;}
}

/* =====================================================================
   Real /chat/ page mini-clone ("gdc-" = gd-chat), ltd/product.html only,
   above the gd-e- dashboard mockup above. Sidebar (New Chat, Monthly
   prompts, chat history) + main pane (welcome screen, thread, rotating
   suggestion, composer) -- same --gd- tokens as the gd-e- mockup, own
   namespace so the two never collide. Interaction logic (suggestion click
   -> thinking dots -> answer, New Chat reset) lives in product-genie-demo.js.
   ===================================================================== */
.gdc-frame{position:relative;display:grid;grid-template-columns:220px 1fr;min-height:420px;}
.gdc-sidebar{background:var(--gd-bg-alt);border-right:1px solid var(--gd-line);display:flex;flex-direction:column;padding:12px;}
.gdc-newchat{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--gd-accent);color:#fff;font-size:12.5px;font-weight:650;padding:9px 12px;border-radius:11px;border:none;font-family:inherit;cursor:pointer;}
.gdc-newchat svg{width:14px;height:14px;}
.gdc-usage{padding:9px 11px;margin:10px 0 6px;border-radius:11px;background:var(--gd-card-bg);box-shadow:0 0 0 1px var(--gd-line);}
.gdc-usage-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px;}
.gdc-usage-label{font-size:9px;color:var(--gd-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:750;}
.gdc-usage-count{font-size:10.5px;font-weight:700;color:var(--gd-ink);white-space:nowrap;}
.gdc-usage-bar{height:4px;border-radius:99px;background:var(--gd-bg-alt);overflow:hidden;}
.gdc-usage-fill{height:100%;border-radius:99px;background:var(--gd-accent);}
.gdc-usage-reset{font-size:9.5px;color:var(--gd-muted);margin-top:5px;}
.gdc-hist-label{font-size:9px;color:var(--gd-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:750;padding:9px 8px 4px;}
.gdc-hist-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:9px;font-size:11px;font-weight:600;color:var(--gd-body);}
.gdc-hist-item.active{box-shadow:inset 0 0 0 1px var(--gd-accent);color:var(--gd-ink);}
.gdc-hist-genie{flex:none;font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;color:var(--gd-accent);background:var(--gd-highlight);padding:2px 5px;border-radius:4px;}
.gdc-delall{margin-top:auto;padding-top:10px;text-align:center;font-size:10px;color:var(--gd-muted);}

.gdc-main{display:flex;flex-direction:column;min-width:0;}
.gdc-topbar{display:flex;justify-content:flex-end;padding:9px 20px;border-bottom:1px solid var(--gd-line);}
.gdc-topbar[hidden]{display:none;}
.gdc-session-counter{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gd-muted);}
.gdc-thread{padding:22px;display:flex;flex-direction:column;gap:14px;}
.gdc-thread:not(:empty){flex:1;}
.gdc-thread:empty{padding:0;}

.gdc-welcome{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.gdc-welcome-inner{max-width:290px;text-align:center;}
.gdc-welcome-sparkle{font-size:26px;color:var(--gd-accent);margin-bottom:9px;}
.gdc-welcome-eyebrow{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.09em;color:var(--gd-accent);margin:0 0 6px;}
.gdc-welcome-h{font-size:16.5px;font-weight:750;letter-spacing:-.01em;color:var(--gd-ink);margin:0;}
.gdc-welcome-sub{font-size:11.5px;color:var(--gd-muted);margin:7px 0 0;line-height:1.5;}
.gdc-welcome-foot{font-size:10px;color:var(--gd-muted);margin:20px 0 0;line-height:1.6;}
.gdc-info-i{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid var(--gd-line);color:var(--gd-muted);font-size:8px;vertical-align:middle;margin-right:4px;}

@keyframes gdcReveal{from{opacity:0;filter:blur(4px);transform:translateY(16px);}to{opacity:1;filter:blur(0);transform:translateY(0);}}
.gdc-reveal{animation:gdcReveal 1.3s cubic-bezier(0.16,1,0.3,1) both;}
.gdc-reveal-fast{animation:gdcReveal 1.1s cubic-bezier(0.16,1,0.3,1) both;}

.gdc-msg-user{align-self:flex-end;max-width:78%;background:var(--gd-accent);color:#fff;font-size:13px;font-weight:500;line-height:1.5;padding:10px 15px;border-radius:12px 12px 3px 12px;}
.gdc-msg-ai{align-self:flex-start;max-width:90%;display:flex;gap:10px;}
.gdc-avatar{flex:none;width:26px;height:26px;border-radius:8px;background:var(--gd-accent);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.gdc-avatar svg{width:13px;height:13px;color:#fff;}
.gdc-thinking .gdc-avatar{animation:gdcAvatarPulse 1.4s ease-in-out infinite;}
@keyframes gdcAvatarPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.gdc-thinking-dots{display:inline-flex;gap:4px;align-items:center;background:var(--gd-card-bg);box-shadow:0 0 0 1px var(--gd-line);padding:13px 16px;border-radius:14px 14px 14px 3px;}
.gdc-thinking-dots span{width:5px;height:5px;border-radius:50%;background:var(--gd-muted);animation:gdcBounce 1s ease-in-out infinite;}
.gdc-thinking-dots span:nth-child(2){animation-delay:.15s;}
.gdc-thinking-dots span:nth-child(3){animation-delay:.3s;}
@keyframes gdcBounce{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-3px);opacity:1;}}
.gdc-bubble{background:var(--gd-card-bg);box-shadow:0 0 0 1px var(--gd-line);border-radius:14px 14px 14px 3px;padding:13px 16px;font-size:12.5px;line-height:1.6;color:var(--gd-ink);}
.gdc-bubble p{margin:0 0 9px;}
.gdc-bubble p:last-child{margin-bottom:0;}
.gdc-bubble b{color:var(--gd-ink);}
.gdc-table-wrap{border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--gd-line);margin-bottom:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.gdc-table{border-collapse:collapse;width:100%;font-size:11px;}
.gdc-table th{background:var(--gd-highlight);color:var(--gd-accent);padding:7px 11px;text-align:left;font-weight:700;letter-spacing:.01em;border-bottom:1px solid var(--gd-line);white-space:nowrap;}
.gdc-table td{padding:7px 11px;border-bottom:1px solid var(--gd-line);color:var(--gd-body);vertical-align:top;}
.gdc-table td.num,.gdc-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.gdc-table tbody tr:nth-child(even) td{background:var(--gd-bg-alt);}
.gdc-table tbody tr:last-child td{border-bottom:none;}
.gdc-copy{margin-top:7px;font-size:10px;font-weight:650;color:var(--gd-muted);display:flex;align-items:center;gap:5px;}
.gdc-copy svg{width:11px;height:11px;}

.gdc-suggest{display:flex;align-items:flex-start;gap:8px;background:var(--gd-card-bg);box-shadow:0 0 0 1px var(--gd-line);border-radius:12px;padding:9px 10px 9px 12px;margin:0 22px 16px;}
.gdc-suggest .sp{color:var(--gd-accent);flex:none;font-size:13px;line-height:1.4;}
.gdc-suggest-text{flex:1;min-width:0;font-size:11px;font-weight:650;color:var(--gd-accent);line-height:1.4;background:none;border:none;font-family:inherit;text-align:left;padding:0;}
button.gdc-suggest-text{cursor:pointer;}
button.gdc-suggest-text:hover{color:var(--gd-accent-dark);text-decoration:underline;}
.gdc-suggest-x{flex:none;color:var(--gd-muted);width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.gdc-suggest-x svg{width:12px;height:12px;}

.gdc-composer{display:flex;align-items:center;gap:9px;padding:0 22px 20px;}
.gdc-composer input{flex:1;border:none;box-shadow:0 0 0 1px var(--gd-line);border-radius:11px;padding:10px 14px;font-size:12.5px;font-family:inherit;background:var(--gd-card-bg);color:var(--gd-ink);}
.gdc-composer input::placeholder{color:var(--gd-muted);}
.gdc-composer button{width:34px;height:34px;border-radius:11px;border:none;background:var(--gd-accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.gdc-composer button svg{width:14px;height:14px;}

@media (max-width:680px){
  .gdc-frame{grid-template-columns:1fr;}
  .gdc-sidebar{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .gdc-reveal,.gdc-reveal-fast{animation:none;}
  .gdc-thinking-dots span,.gdc-thinking .gdc-avatar{animation:none;}
}

.btn-danger:hover{background:#B91C1C;}