/* Self-hosted type — Schibsted Grotesk (display) · Hanken Grotesk (body/UI) · IBM Plex Mono (data) */
@font-face{font-family:"Schibsted Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("./assets/fonts/schibsted-600.woff2") format("woff2");}
@font-face{font-family:"Schibsted Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("./assets/fonts/schibsted-700.woff2") format("woff2");}
@font-face{font-family:"Schibsted Grotesk";font-weight:800;font-style:normal;font-display:swap;src:url("./assets/fonts/schibsted-800.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("./assets/fonts/hanken-400.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("./assets/fonts/hanken-500.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("./assets/fonts/hanken-600.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("./assets/fonts/hanken-700.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("./assets/fonts/plex-mono-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("./assets/fonts/plex-mono-500.woff2") format("woff2");}

/* ============================================================
   DecentroHR — premium modern HR SaaS (Rippling/Deel energy).
   Bold sans · blue-forward · product-mockup led · clean & sharp.
   ============================================================ */
:root{
  --bg:#FFFFFF; --bg-soft:#F4F7FC; --bg-blue:#ECF2FE; --surface:#FFFFFF;
  --ink:#0C1526; --ink-2:#42506A; --muted:#6B7A93; --line:#E7ECF3; --line-2:#D7DEEA;
  --accent:#1668FF; --accent-2:#0B44C9; --accent-soft:#EAF1FF;
  --good:#17905C; --good-soft:#E4F3EC; --warn:#9A6A12; --warn-soft:#F7EBD1; --violet:#6B4DE6; --teal:#0E9E93;
  --maxw:1200px; --r:14px; --r-sm:9px; --r-lg:22px;
  --sh:0 1px 2px rgba(12,21,38,.05), 0 10px 26px -14px rgba(12,21,38,.14);
  --sh-lg:0 40px 80px -34px rgba(14,32,80,.30), 0 8px 24px -18px rgba(14,32,80,.25);
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Schibsted Grotesk","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0A1120; --bg-soft:#0D1627; --bg-blue:#111E3C; --surface:#111A2C;
    --ink:#EAF0F8; --ink-2:#AEBCD2; --muted:#8494AE; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
    --accent:#4D86FF; --accent-2:#8AB0FF; --accent-soft:#16234A;
    --good:#4FB98A; --good-soft:#12301F; --warn:#E0B15C; --warn-soft:#332810;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.6);
    --sh-lg:0 50px 90px -40px rgba(0,0,0,.8); }
}
:root[data-theme="light"]{ --bg:#FFFFFF; --bg-soft:#F4F7FC; --bg-blue:#ECF2FE; --surface:#FFFFFF;
  --ink:#0C1526; --ink-2:#42506A; --muted:#6B7A93; --line:#E7ECF3; --line-2:#D7DEEA;
  --accent:#1668FF; --accent-2:#0B44C9; --accent-soft:#EAF1FF; --good:#17905C; --good-soft:#E4F3EC; --warn:#9A6A12; --warn-soft:#F7EBD1;
  --sh:0 1px 2px rgba(12,21,38,.05), 0 10px 26px -14px rgba(12,21,38,.14); --sh-lg:0 40px 80px -34px rgba(14,32,80,.30), 0 8px 24px -18px rgba(14,32,80,.25); }
:root[data-theme="dark"]{ --bg:#0A1120; --bg-soft:#0D1627; --bg-blue:#111E3C; --surface:#111A2C;
  --ink:#EAF0F8; --ink-2:#AEBCD2; --muted:#8494AE; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --accent:#4D86FF; --accent-2:#8AB0FF; --accent-soft:#16234A; --good:#4FB98A; --good-soft:#12301F; --warn:#E0B15C; --warn-soft:#332810;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.6); --sh-lg:0 50px 90px -40px rgba(0,0,0,.8); }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--accent); color:#fff; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media (max-width:720px){ .wrap{ padding:0 20px; } }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.06; }
h1,h2{ font-family:var(--display); letter-spacing:-.015em; }
h3,h4{ font-weight:700; }
p{ margin:0; } a{ color:inherit; text-decoration:none; }
html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); background:var(--accent-soft); padding:6px 12px; border-radius:999px; }
.mono{ font-family:var(--mono); }
.tnum{ font-variant-numeric:tabular-nums; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px; padding:12px 20px; border-radius:11px; border:1.5px solid transparent; cursor:pointer; transition:transform .14s ease, box-shadow .2s, background .18s, border-color .18s, color .18s; white-space:nowrap; }
.btn.solid{ background:var(--accent); color:#fff; box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 65%,transparent); }
.btn.solid:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent); }
.btn.ghost{ border-color:var(--line-2); color:var(--ink); background:var(--surface); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent-2); transform:translateY(-1px); }
.btn.onblue{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); }
.btn.onblue:hover{ background:rgba(255,255,255,.22); }
.btn.white{ background:#fff; color:var(--accent-2); }
.btn.white:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tlink{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; color:var(--accent-2); }
.tlink:hover{ gap:9px; }

/* ---------------- header ---------------- */
header.mast{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 85%,transparent); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.mast .row{ display:flex; align-items:center; gap:28px; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand .word{ font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--ink); }
.brand .word b{ color:var(--accent); font-weight:800; }
.mast .brand{ flex:1 1 0; }
.mast .row nav{ display:flex; gap:34px; flex:0 0 auto; }
.mast .row nav a{ font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .15s; }
.mast .row nav a:hover,.mast .row nav a.on{ color:var(--accent-2); }
.mast .end{ display:flex; align-items:center; justify-content:flex-end; gap:16px; flex:1 1 0; }
.ico-btn{ background:none; border:none; cursor:pointer; color:var(--muted); padding:6px; display:grid; place-items:center; border-radius:8px; }
.ico-btn:hover{ color:var(--accent-2); background:var(--bg-soft); }
.signin{ font-size:14.5px; font-weight:600; color:var(--ink); }
.signin:hover{ color:var(--accent-2); }
.menu-btn{ display:none; }
@media (max-width:900px){ .mast .row nav{ display:none; } .signin{ display:none; } .menu-btn{ display:grid; } }

/* ---------------- hero ---------------- */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--bg-blue),var(--bg) 62%); }
.hero .wrap{ display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center; padding:70px 32px 76px; }
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero h1{ font-size:clamp(34px,4.6vw,56px); font-weight:800; }
.hero h1 .g{ color:var(--accent); }
.hero .sub{ margin-top:20px; font-size:clamp(16px,1.5vw,19px); color:var(--ink-2); max-width:34ch; line-height:1.55; }
.hero .cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.hero .trust{ margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.stars{ color:#F5A623; letter-spacing:1px; font-size:14px; }
.trust .tt{ font-size:13.5px; color:var(--muted); }
.trust .tt b{ color:var(--ink); font-weight:700; }
.avstack{ display:flex; }
.avstack .a{ width:30px; height:30px; border-radius:50%; border:2px solid var(--bg); margin-left:-8px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; }
.avstack .a:first-child{ margin-left:0; }
@media (max-width:940px){ .hero .wrap{ grid-template-columns:1fr; gap:40px; padding:48px 20px 56px; } .hero .sub{ max-width:46ch; } }

/* ---------------- product mockup: app frame ---------------- */
.app-frame{ border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-lg); overflow:hidden; }
.app-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.app-bar i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block; }
.app-bar .u{ margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 10px; }
.app{ display:grid; grid-template-columns:56px 1fr; min-height:396px; }
.app-rail{ background:var(--bg-soft); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0; }
.app-rail .lg{ width:28px; height:28px; border-radius:8px; overflow:hidden; margin-bottom:10px; }
.app-rail .ri{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--muted); }
.app-rail .ri.on{ background:var(--accent); color:#fff; }
.app-rail .ri:hover{ color:var(--accent-2); }
.app-main{ padding:18px 20px; min-width:0; }
.app-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.app-head h4{ font-size:16px; font-weight:700; letter-spacing:-.02em; }
.app-head .dt{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.app-head .srch{ font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:7px 12px; }
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tile{ background:var(--bg-soft); border:1px solid var(--line); border-radius:11px; padding:12px 13px; }
.tile.accent{ background:var(--accent); border-color:var(--accent); }
.tile .tl{ font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); }
.tile.accent .tl{ color:rgba(255,255,255,.8); }
.tile .tn{ font-size:22px; font-weight:800; letter-spacing:-.03em; margin-top:5px; font-variant-numeric:tabular-nums; }
.tile.accent .tn{ color:#fff; }
.tile .td{ font-size:10.5px; color:var(--muted); margin-top:3px; font-weight:600; }
.tile .td.up{ color:var(--good); }
.tile.accent .td{ color:rgba(255,255,255,.85); }
.app-cols{ display:grid; grid-template-columns:1.35fr 1fr; gap:12px; margin-top:14px; }
.mcard{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; }
.mcard .ct{ font-size:12px; font-weight:700; letter-spacing:-.01em; display:flex; justify-content:space-between; align-items:center; }
.mcard .ct .cm{ font-family:var(--mono); font-size:10px; color:var(--muted); font-weight:500; }
.chart{ margin-top:12px; }
.plist{ margin-top:10px; display:flex; flex-direction:column; gap:9px; }
.prow{ display:flex; align-items:center; gap:9px; }
.av{ border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; flex:0 0 auto; }
.prow .av{ width:26px; height:26px; font-size:10px; }
.prow .pn{ font-size:12px; font-weight:600; }
.prow .pr{ font-size:10.5px; color:var(--muted); }
.prow .pill{ margin-left:auto; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:3px 7px; border-radius:5px; }
.pill.ok{ color:var(--good); background:var(--good-soft); }
.pill.lv{ color:var(--warn); background:var(--warn-soft); }
.ai-strip{ margin-top:12px; display:flex; align-items:center; gap:9px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:10px; padding:10px 12px; }
.ai-strip .sp{ width:22px; height:22px; border-radius:6px; background:var(--accent); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.ai-strip .txt{ font-size:11.5px; color:var(--ink); }
.ai-strip .txt b{ color:var(--accent-2); }
.ai-strip .go{ margin-left:auto; color:var(--accent-2); }
@media (max-width:520px){ .tiles{ grid-template-columns:1fr 1fr; } .app-cols{ grid-template-columns:1fr; } .app{ grid-template-columns:48px 1fr; } }

/* laptop frame — landscape screen (16:10-ish) with a MacBook notch */
.laptop{ position:relative; }
.laptop .lid{ background:#0C1017; border-radius:16px; padding:10px 10px 0; box-shadow:var(--sh-lg); }
.laptop .lid .app-frame{ border-radius:9px 9px 0 0; box-shadow:none; border:1px solid rgba(0,0,0,.18); }
.laptop .app{ height:302px; min-height:0; overflow:hidden; }
.laptop .notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:118px; height:15px; background:#0C1017; border-radius:0 0 9px 9px; z-index:5; }
.laptop .base{ height:15px; margin:0 -3.4%; background:linear-gradient(180deg,#e2e6ee,#b5bdcc 52%,#98a1b3); border-radius:0 0 13px 13px; position:relative; box-shadow:0 18px 28px -14px rgba(10,20,40,.5); }
.laptop .base::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:104px; height:7px; background:#a7b0c0; border-radius:0 0 9px 9px; }

/* browser chrome for tour mockups */
.mock .winbar{ display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.mock .winbar i{ width:9px; height:9px; border-radius:50%; background:var(--line-2); flex:0 0 auto; }
.mock .winbar .u{ margin-left:8px; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 11px; }
/* directory toolbar */
.dtool{ display:flex; align-items:center; gap:7px; margin-bottom:12px; flex-wrap:wrap; }
.dtool .ds{ flex:1; min-width:120px; font-family:var(--mono); font-size:10.5px; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:7px 11px; }
.dtool .dc{ font-size:10.5px; font-weight:600; padding:6px 11px; border-radius:99px; border:1px solid var(--line); color:var(--ink-2); }
.dtool .dc.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* calendar legend */
.clegend{ display:flex; gap:16px; margin-top:13px; flex-wrap:wrap; }
.clegend span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.clegend span i{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
/* payroll statutory chips + approver */
.pstat{ display:flex; gap:8px; margin-bottom:13px; flex-wrap:wrap; }
.pstat .sc{ font-family:var(--mono); font-size:10px; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); border-radius:7px; padding:5px 9px; }
.pstat .sc b{ color:var(--ink); font-weight:700; }
.papprove{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.papprove .pavs{ display:flex; }
.papprove .pavs .av{ width:22px; height:22px; font-size:8px; border:2px solid var(--surface); margin-left:-7px; }
.papprove .pavs .av:first-child{ margin-left:0; }

/* ---------------- logo / trust strip ---------------- */
.trustbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); }
.trustbar .wrap{ padding:26px 32px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; }
.trustbar .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.trustbar .logos{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; }
.trustbar .logos span{ font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--muted); opacity:.72; }

/* section scaffolding */
section.sec{ padding:96px 0; }
.sec.soft{ background:var(--bg-soft); }
.sec-head{ max-width:660px; margin:0 auto 54px; text-align:center; }
.sec-head.left{ text-align:left; margin-left:0; }
.sec-head h2{ font-size:clamp(28px,3.4vw,42px); margin-top:16px; }
.sec-head p{ margin-top:16px; font-size:18px; color:var(--ink-2); }
@media (max-width:720px){ section.sec{ padding:64px 0; } }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; }
.stat .n{ font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.stat .l{ font-size:14px; color:var(--muted); margin-top:6px; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr 1fr; gap:28px 20px; } }

/* AI section (blue-forward) */
.ai-sec{ background:var(--bg-blue); }
.ai-grid{ display:grid; grid-template-columns:1fr 1.02fr; gap:48px; align-items:center; }
.ai-grid .l h2{ font-size:clamp(28px,3.4vw,42px); }
.ai-grid .l h2 .g{ color:var(--accent); }
.ai-grid .l p.lead{ margin-top:18px; font-size:18px; color:var(--ink-2); max-width:44ch; }
.why{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.why .w{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 16px 17px; box-shadow:var(--sh); }
.why .w .ic{ color:var(--accent); margin-bottom:9px; }
.why .w h4{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.why .w p{ font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.5; }
@media (max-width:940px){ .ai-grid{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:520px){ .why{ grid-template-columns:1fr; } }

/* assistant chat (kept, restyled premium) */
.assistant{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden; }
.a-head{ display:flex; justify-content:space-between; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line); }
.a-id{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; }
.a-id .av2{ width:26px; height:26px; border-radius:8px; overflow:hidden; }
.a-status{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--good); }
.a-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-soft); }
.a-thread{ padding:20px 18px 8px; display:flex; flex-direction:column; gap:16px; }
.msg{ display:flex; gap:10px; }
.msg.user{ justify-content:flex-end; }
.msg.user .bubble{ background:var(--accent); color:#fff; padding:10px 15px; border-radius:16px 16px 5px 16px; font-size:14.5px; max-width:80%; line-height:1.4; }
.msg.ai .av2{ width:28px; height:28px; border-radius:8px; overflow:hidden; flex:0 0 auto; margin-top:2px; }
.a-body{ flex:1; min-width:0; }
.a-say{ font-size:14.5px; color:var(--ink); line-height:1.5; }
.finding{ margin-top:12px; border:1px solid var(--line); border-left:3px solid var(--warn); background:var(--bg-soft); border-radius:10px; padding:13px 15px; }
.finding .f-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.finding .f-tag{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--warn); background:var(--warn-soft); padding:3px 8px; border-radius:5px; }
.finding .f-meta{ font-family:var(--mono); font-size:10.5px; color:var(--muted); }
.finding .f-row{ font-size:14.5px; }
.finding .f-row b{ color:var(--warn); font-weight:700; }
.finding .f-note{ font-size:13px; color:var(--ink-2); margin-top:5px; }
.a-done{ list-style:none; margin:13px 0 2px; padding:0; display:flex; flex-direction:column; gap:9px; }
.a-done li{ display:flex; gap:9px; align-items:center; font-size:14px; color:var(--ink-2); }
.a-done li svg{ flex:0 0 auto; color:var(--good); }
.a-seal{ margin-top:13px; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.a-seal code{ color:var(--good); }
.a-chips{ display:flex; gap:9px; padding:6px 18px 16px; flex-wrap:wrap; }
.a-chip{ font-family:var(--sans); font-size:13px; font-weight:600; padding:10px 16px; border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; border-radius:10px; transition:all .15s; }
.a-chip:hover{ border-color:var(--accent); color:var(--accent-2); }
.a-chip.p{ background:var(--accent); border-color:var(--accent); color:#fff; }
.a-chip.p:hover{ background:var(--accent-2); color:#fff; }
.a-input{ display:flex; align-items:center; gap:10px; padding:14px 14px 14px 18px; border-top:1px solid var(--line); background:var(--bg-soft); }
.a-input .field{ flex:1; font-size:13.5px; color:var(--muted); }
.a-input .send{ width:34px; height:34px; border-radius:10px; background:var(--accent); border:none; color:#fff; display:grid; place-items:center; cursor:pointer; }
.a-input .send:hover{ background:var(--accent-2); }

/* product tour — alternating rows */
.tour{ display:flex; flex-direction:column; gap:30px; }
.trow{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.trow.rev .tcopy{ order:2; }
.trow .tcopy .eyebrow{ margin-bottom:16px; }
.trow .tcopy h3{ font-size:clamp(24px,2.8vw,32px); }
.trow .tcopy p{ margin-top:14px; font-size:16.5px; color:var(--ink-2); max-width:42ch; }
.trow .tcopy .flist{ margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.trow .tcopy .flist li{ display:flex; gap:10px; font-size:15px; color:var(--ink); }
.trow .tcopy .flist li svg{ flex:0 0 auto; margin-top:3px; color:var(--accent); }
.trow .tcopy .tlink{ margin-top:22px; }
@media (max-width:900px){ .trow{ grid-template-columns:1fr; gap:28px; } .trow.rev .tcopy{ order:0; } }

/* generic mock panel */
.mock{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden; }
.mock .mh{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.mock .mh .mt{ font-size:14px; font-weight:700; }
.mock .mb{ padding:16px; }
/* directory */
.dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dcard{ border:1px solid var(--line); border-radius:11px; padding:13px; display:flex; align-items:center; gap:11px; }
.dcard .av{ width:38px; height:38px; font-size:13px; }
.dcard .dn{ font-size:13.5px; font-weight:700; }
.dcard .dr{ font-size:11.5px; color:var(--muted); }
.dcard .dp{ margin-left:auto; }
/* calendar */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .cd{ aspect-ratio:1; border:1px solid var(--line); border-radius:8px; display:flex; align-items:flex-start; justify-content:flex-end; padding:5px 6px; font-size:10.5px; color:var(--muted); position:relative; }
.cal .cd .lv{ position:absolute; left:5px; bottom:5px; height:5px; border-radius:3px; }
.cal .cd.a{ background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 25%,transparent); }
.dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; }
.dow span{ font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:center; }
/* payroll run */
.prun .runbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.prun .runbar .rt{ font-size:13px; font-weight:700; }
.prun .runbar .rs{ font-family:var(--mono); font-size:10px; color:var(--good); background:var(--good-soft); padding:4px 9px; border-radius:6px; font-weight:600; }
.ptable{ width:100%; border-collapse:collapse; }
.ptable th{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; text-align:right; padding:8px 10px; border-bottom:1px solid var(--line); }
.ptable th:first-child{ text-align:left; }
.ptable td{ font-size:12.5px; font-variant-numeric:tabular-nums; text-align:right; padding:10px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.ptable td:first-child{ text-align:left; color:var(--ink); font-weight:600; display:flex; align-items:center; gap:8px; }
.ptable td .av{ width:24px; height:24px; font-size:9px; }
.ptable tr.tot td{ border-bottom:none; font-weight:800; color:var(--ink); padding-top:12px; }
.ptable tr.tot td .g{ color:var(--accent); }
.prun .runfoot{ margin-top:14px; display:flex; align-items:center; gap:10px; }

/* modules grid */
.mods{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mod{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px; box-shadow:var(--sh); transition:transform .16s, box-shadow .2s, border-color .16s; }
.mod:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.mod .mi{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; margin-bottom:14px; }
.mod h4{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.mod ul{ list-style:none; margin:12px 0 0; padding:0; }
.mod ul li{ font-size:13px; color:var(--ink-2); padding:4px 0; padding-left:16px; position:relative; }
.mod ul li::before{ content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.5; }
@media (max-width:860px){ .mods{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mods{ grid-template-columns:1fr; } }

/* mobile section */
.mob{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.phone{ width:300px; margin:0 auto; border-radius:44px; background:#0B0F1A; padding:9px; box-shadow:var(--sh-lg), 0 0 0 2px rgba(0,0,0,.06); position:relative; }
.phone::after{ content:""; position:absolute; left:50%; bottom:9px; transform:translateX(-50%); width:110px; height:4px; border-radius:99px; background:rgba(255,255,255,.55); }
.phone .scr{ background:var(--bg-soft); border-radius:36px; overflow:hidden; position:relative; }
/* status bar */
.pstatus{ display:flex; justify-content:space-between; align-items:center; padding:11px 20px 6px; font-size:12px; font-weight:700; color:var(--ink); }
.pstatus .pico{ display:inline-flex; align-items:center; gap:5px; }
.pnotchbar{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:108px; height:24px; background:#0B0F1A; border-radius:0 0 16px 16px; z-index:4; }
/* app header */
.phdr{ display:flex; align-items:center; gap:10px; padding:6px 16px 12px; }
.phdr .pav{ width:38px; height:38px; border-radius:50%; background:#1668FF; color:#fff; display:grid; place-items:center; font-size:14px; font-weight:700; flex:0 0 auto; }
.phdr .ph-g{ font-size:11px; color:var(--muted); }
.phdr .ph-n{ font-size:15px; font-weight:800; letter-spacing:-.02em; }
.phdr .ph-bell{ margin-left:auto; position:relative; color:var(--ink-2); width:36px; height:36px; border-radius:11px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; }
.phdr .ph-bell::after{ content:""; position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:#E5484D; border:1.5px solid var(--surface); }
.pscroll{ padding:0 16px 78px; max-height:520px; overflow:hidden; }
/* check-in card */
.pcheck{ background:linear-gradient(140deg,#1668FF,#0B44C9); color:#fff; border-radius:20px; padding:16px; box-shadow:0 14px 26px -14px rgba(11,68,201,.6); }
.pcheck .pc-top{ display:flex; justify-content:space-between; align-items:center; }
.pcheck .pc-st{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; background:rgba(255,255,255,.18); padding:4px 9px; border-radius:99px; }
.pcheck .pc-st::before{ content:""; width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.3); }
.pcheck .pc-loc{ font-size:11px; opacity:.85; }
.pcheck .pc-time{ font-size:30px; font-weight:800; letter-spacing:-.03em; margin-top:12px; }
.pcheck .pc-sub{ font-size:11.5px; opacity:.85; margin-top:1px; }
.pcheck .pc-btn{ margin-top:14px; background:#fff; color:#0B44C9; border-radius:12px; padding:11px; text-align:center; font-size:13.5px; font-weight:700; }
.pcheck .pc-bar{ margin-top:12px; height:5px; border-radius:99px; background:rgba(255,255,255,.25); overflow:hidden; }
.pcheck .pc-bar i{ display:block; height:100%; width:72%; background:#fff; border-radius:99px; }
/* quick actions */
.pquick{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.pq{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 4px 9px; text-align:center; }
.pq .pqi{ width:30px; height:30px; margin:0 auto; border-radius:9px; background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; }
.pq .pql{ font-size:9.5px; font-weight:600; color:var(--ink-2); margin-top:6px; }
/* section label */
.psec{ display:flex; justify-content:space-between; align-items:center; margin:16px 2px 8px; }
.psec .pt{ font-size:13px; font-weight:800; letter-spacing:-.01em; }
.psec .pa{ font-size:11px; font-weight:600; color:var(--accent-2); }
/* week bars */
.pweek{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; }
.pweek .pw-top{ display:flex; justify-content:space-between; align-items:baseline; }
.pweek .pw-h{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.pweek .pw-l{ font-size:10.5px; color:var(--muted); }
.pweek .pw-bars{ display:flex; align-items:flex-end; gap:7px; height:46px; margin-top:12px; }
.pweek .pw-bars .b{ flex:1; background:var(--accent-soft); border-radius:5px 5px 0 0; position:relative; }
.pweek .pw-bars .b.on{ background:var(--accent); }
.pweek .pw-days{ display:flex; gap:7px; margin-top:6px; }
.pweek .pw-days span{ flex:1; text-align:center; font-size:9px; color:var(--muted); }
/* approval / list items */
.plist2{ display:flex; flex-direction:column; gap:9px; }
.pitem{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:10px 11px; }
.pitem .pi{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; font-size:11px; font-weight:700; color:#fff; }
.pitem .pi.soft{ background:var(--accent-soft); color:var(--accent-2); }
.pitem .pt{ font-size:12.5px; font-weight:700; letter-spacing:-.01em; }
.pitem .pd{ font-size:10.5px; color:var(--muted); margin-top:1px; }
.pitem .pacts{ margin-left:auto; display:flex; gap:6px; }
.pitem .pbtn{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; }
.pitem .pbtn.ok{ background:var(--good-soft); color:var(--good); }
.pitem .pbtn.no{ background:var(--surface); border:1px solid var(--line); color:var(--muted); }
.pitem .pamt{ margin-left:auto; font-weight:800; font-size:13px; }
/* AI pill */
.pai{ display:flex; align-items:center; gap:9px; margin-top:14px; background:var(--ink); color:#fff; border-radius:14px; padding:11px 13px; }
.pai .pai-i{ width:26px; height:26px; border-radius:8px; background:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.pai .pai-t{ font-size:11.5px; opacity:.9; }
.pai .pai-g{ margin-left:auto; opacity:.7; }
/* bottom tab bar */
.ptabs{ position:absolute; left:0; right:0; bottom:0; display:flex; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:9px 8px 20px; }
.ptab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); }
.ptab.on{ color:var(--accent-2); }
.ptab span{ font-size:8.5px; font-weight:600; }
.mob .mobcopy h2{ font-size:clamp(26px,3.2vw,38px); }
.mob .mobcopy p{ margin-top:16px; font-size:17px; color:var(--ink-2); max-width:38ch; }
.mob .mobcopy .flist{ margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.mob .mobcopy .flist li{ display:flex; gap:10px; font-size:15px; }
.mob .mobcopy .flist li svg{ color:var(--accent); flex:0 0 auto; margin-top:3px; }
@media (max-width:860px){ .mob{ grid-template-columns:1fr; gap:36px; } }

/* integrations */
.ints{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.ints .chip{ font-family:var(--mono); font-size:13px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 18px; }

/* pricing */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 26px; box-shadow:var(--sh); display:flex; flex-direction:column; }
.plan.feat{ border:2px solid var(--accent); box-shadow:var(--sh-lg); position:relative; }
.plan.feat .badge{ position:absolute; top:-13px; left:26px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.plan .pn{ font-size:15px; font-weight:700; }
.plan .amt{ margin-top:10px; display:flex; align-items:baseline; gap:4px; }
.plan .amt .n{ font-size:42px; font-weight:800; letter-spacing:-.03em; }
.plan .amt .u{ font-size:14px; color:var(--muted); }
.plan .pd{ margin-top:8px; font-size:14px; color:var(--ink-2); min-height:40px; }
.plan ul{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.plan ul li{ display:flex; gap:10px; font-size:14.5px; }
.plan ul li svg{ color:var(--good); flex:0 0 auto; margin-top:3px; }
.plan ul li.off{ color:var(--muted); }
.plan ul li.off svg{ color:var(--line-2); }
.plan .btn{ margin-top:24px; }
@media (max-width:860px){ .plans{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* testimonial */
.quote{ max-width:820px; margin:0 auto; text-align:center; }
.quote blockquote{ margin:0; font-size:clamp(22px,2.6vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.quote blockquote .g{ color:var(--accent); }
.quote .qby{ margin-top:22px; display:flex; align-items:center; gap:12px; justify-content:center; }
.quote .qby .av{ width:40px; height:40px; font-size:14px; }
.quote .qby .qn{ font-weight:700; font-size:14px; text-align:left; }
.quote .qby .qr{ font-size:12.5px; color:var(--muted); text-align:left; }

/* final CTA */
.cta-sec{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
.cta-sec .wrap{ padding:80px 32px; text-align:center; }
.cta-sec h2{ font-size:clamp(30px,4vw,46px); color:#fff; }
.cta-sec p{ margin-top:16px; font-size:18px; color:rgba(255,255,255,.9); }
.cta-sec .cta{ margin-top:30px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* footer */
footer.foot{ background:var(--bg-soft); border-top:1px solid var(--line); }
footer .ftop{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; padding:56px 0; }
footer .fb p{ font-size:14px; color:var(--ink-2); max-width:32ch; margin-top:12px; }
footer .fc h4{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
footer .fc a{ display:block; font-size:14px; color:var(--ink-2); padding:5px 0; }
footer .fc a:hover{ color:var(--accent-2); }
footer .fbot{ border-top:1px solid var(--line); }
footer .fbot .wrap{ display:flex; justify-content:space-between; padding:20px 32px; font-size:13px; color:var(--muted); flex-wrap:wrap; gap:10px; }
footer .fbot b{ color:var(--accent-2); }
@media (max-width:820px){ footer .ftop{ grid-template-columns:1fr 1fr; gap:28px; } }

/* ambient backgrounds — subtle texture, kept faint on purpose */
.hero, .ai-sec, .cta-sec { position:relative; overflow:hidden; }
.hero .wrap, .ai-sec .wrap, .cta-sec .wrap { position:relative; z-index:1; }
/* hero: faint blue dot-grid fading in behind the dashboard */
.hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--accent) 26%,transparent) 1px, transparent 0);
  background-size:26px 26px; opacity:.45;
  -webkit-mask-image:radial-gradient(120% 95% at 88% 4%, #000, transparent 58%);
  mask-image:radial-gradient(120% 95% at 88% 4%, #000, transparent 58%); }
/* AI section: faint graph-paper grid fading from the left */
.ai-sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 10%,transparent) 1px, transparent 1px),
                   linear-gradient(90deg, color-mix(in srgb,var(--accent) 10%,transparent) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(95% 85% at 12% 18%, #000, transparent 62%);
  mask-image:radial-gradient(95% 85% at 12% 18%, #000, transparent 62%); }
/* CTA: a soft top glow + faint white dot texture on the blue */
.cta-sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(60% 130% at 50% -25%, rgba(255,255,255,.20), transparent 60%),
                   radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0);
  background-size:auto, 24px 24px; }

/* reveal */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   Sub-pages: hero, prose, docs, forms, FAQ, cards
   ============================================================ */
.subhero{ background:linear-gradient(180deg,var(--bg-blue),var(--bg) 70%); border-bottom:1px solid var(--line); }
.subhero .wrap{ padding:64px 32px 56px; max-width:820px; }
.subhero.center .wrap{ text-align:center; margin:0 auto; }
.subhero h1{ font-size:clamp(30px,4vw,48px); font-weight:800; letter-spacing:-.03em; margin-top:16px; }
.subhero p{ margin-top:16px; font-size:18px; color:var(--ink-2); max-width:60ch; }
.subhero.center p{ margin-left:auto; margin-right:auto; }
.crumbs{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.02em; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--accent-2); }

.prose{ max-width:760px; margin:0 auto; font-size:16.5px; color:var(--ink-2); line-height:1.7; }
.prose > *:first-child{ margin-top:0; }
.prose h2{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:44px 0 14px; }
.prose h3{ font-size:19px; font-weight:700; color:var(--ink); margin:30px 0 10px; }
.prose p{ margin:14px 0; }
.prose ul,.prose ol{ margin:14px 0; padding-left:22px; } .prose li{ margin:7px 0; }
.prose a{ color:var(--accent-2); font-weight:600; } .prose a:hover{ text-decoration:underline; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose code{ font-family:var(--mono); font-size:.88em; background:var(--bg-soft); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--accent-2); }
.prose hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }
.prose blockquote{ margin:20px 0; padding:14px 18px; border-left:3px solid var(--accent); background:var(--bg-soft); border-radius:0 10px 10px 0; color:var(--ink-2); }

.codebox{ background:#0B1120; border:1px solid #1b2740; border-radius:12px; overflow:hidden; margin:18px 0; }
.codebox .cbh{ display:flex; justify-content:space-between; padding:9px 14px; border-bottom:1px solid #1b2740; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#6d7f97; }
.codebox pre{ margin:0; padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.7; color:#cdd9ec; }
.codebox .k{ color:#5aa6ff; } .codebox .s{ color:#6ee0b0; } .codebox .c{ color:#5c6c86; } .codebox .f{ color:#e6edf7; font-weight:600; }

/* docs layout */
.docs{ display:grid; grid-template-columns:250px 1fr; gap:48px; align-items:start; }
.docs-side{ position:sticky; top:96px; align-self:start; }
.docs-side .grp{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:20px 0 8px; }
.docs-side .grp:first-child{ margin-top:0; }
.docs-side a{ display:block; font-size:14px; color:var(--ink-2); padding:6px 0 6px 12px; border-left:2px solid var(--line); }
.docs-side a:hover{ color:var(--accent-2); border-left-color:var(--accent); }
.docs-side a.on{ color:var(--accent-2); border-left-color:var(--accent); font-weight:600; }
.docs-body{ min-width:0; max-width:780px; }
.docs-body .prose{ margin:0; max-width:none; }
@media (max-width:900px){ .docs{ grid-template-columns:1fr; gap:28px; } .docs-side{ position:static; display:flex; flex-wrap:wrap; gap:6px 14px; padding-bottom:18px; border-bottom:1px solid var(--line); } .docs-side .grp{ width:100%; margin:8px 0 2px; } .docs-side a{ border-left:none; padding:4px 0; } }

/* generic cards grid */
.cardgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gcard{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--sh); text-decoration:none; color:inherit; display:block; transition:transform .16s, border-color .16s; }
a.gcard:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.gcard .gi{ width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; margin-bottom:14px; }
.gcard h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.gcard p{ font-size:14px; color:var(--ink-2); margin-top:8px; line-height:1.5; }
@media (max-width:820px){ .cardgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cardgrid{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ max-width:760px; margin:0 auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 0; font-size:17px; font-weight:700; letter-spacing:-.01em; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:18px; font-size:22px; font-weight:400; color:var(--muted); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 20px; color:var(--ink-2); font-size:15.5px; line-height:1.6; }

/* forms */
.formcard{ max-width:460px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; box-shadow:var(--sh-lg); }
.formcard.wide{ max-width:640px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line-2); border-radius:10px; padding:11px 13px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.field .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.formcard .btn{ width:100%; justify-content:center; margin-top:6px; }
.formcard .alt{ text-align:center; font-size:14px; color:var(--muted); margin-top:18px; }
.formcard .alt a{ color:var(--accent-2); font-weight:600; }

/* callout */
.callout{ display:flex; gap:12px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:12px; padding:14px 16px; margin:20px 0; }
.callout .ci{ color:var(--accent-2); flex:0 0 auto; margin-top:1px; }
.callout p{ margin:0; font-size:14.5px; color:var(--ink); }

/* stat/spec rows for security & about */
.speclist{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.spec{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; }
.spec .sh{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; }
.spec .sh svg{ color:var(--accent); }
.spec p{ margin:8px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
@media (max-width:640px){ .speclist{ grid-template-columns:1fr; } }

/* simple table */
.ptbl{ width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px; }
.ptbl th,.ptbl td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
.ptbl th{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.ptbl td{ color:var(--ink-2); }
.ptbl code{ font-family:var(--mono); font-size:12.5px; color:var(--accent-2); }

/* API reference — endpoint blocks */
.grpsec{ scroll-margin-top:88px; }
.grpsec > h2{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:8px 0 4px; }
.grpsec > .gdesc{ font-size:15px; color:var(--ink-2); margin-bottom:18px; }
.ep{ border:1px solid var(--line); border-radius:12px; margin:12px 0; overflow:hidden; scroll-margin-top:88px; }
.ep-h{ display:flex; align-items:center; gap:10px; padding:11px 15px; background:var(--bg-soft); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ep-h .method{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; color:#fff; background:var(--good); padding:3px 8px; border-radius:5px; }
.ep-h code{ font-family:var(--mono); font-size:13px; color:var(--ink); background:none; border:none; padding:0; word-break:break-all; }
.ep-b{ padding:14px 15px; }
.ep-b .epd{ margin:0 0 10px; font-size:14.5px; color:var(--ink-2); }
.ep-meta{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:2px; }
.badge-perm{ font-family:var(--mono); font-size:10px; padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-2); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); }
.badge-ent{ font-family:var(--mono); font-size:10px; padding:3px 9px; border-radius:999px; background:var(--warn-soft); color:var(--warn); }
.ep-b table.ptbl{ margin:12px 0 0; }
.ep-b table.ptbl td:first-child code{ color:var(--ink); font-weight:600; }
.ep-b .req{ color:var(--accent-2); font-weight:700; font-size:11px; font-family:var(--mono); }
.ep-b .opt{ color:var(--muted); font-size:11px; font-family:var(--mono); }
.ep-b .ty{ font-family:var(--mono); font-size:12.5px; color:var(--accent-2); }
.ep-b .noparam{ font-size:13.5px; color:var(--muted); font-style:italic; }
.docs-side .grp.small{ margin-top:14px; }

/* ============================================================
   Auth pages (login / signup) — dedicated split-screen, no marketing chrome
   ============================================================ */
.auth{ display:grid; grid-template-columns:1.05fr 0.95fr; min-height:100vh; }
.auth-main{ display:flex; flex-direction:column; padding:30px 40px; }
.auth-main .atop{ display:flex; justify-content:space-between; align-items:center; }
.auth-main .atop .back{ font-size:14px; font-weight:500; color:var(--muted); }
.auth-main .atop .back:hover{ color:var(--accent-2); }
.auth-box{ margin:auto; width:100%; max-width:404px; padding:20px 0 28px; }
.auth-box h1{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
.auth-box .asub{ margin-top:8px; color:var(--ink-2); font-size:15px; }
.auth-box form{ margin-top:26px; }
.auth-box .aalt{ margin-top:20px; font-size:14px; color:var(--muted); text-align:center; }
.auth-box .aalt a{ color:var(--accent-2); font-weight:600; }
.auth-box .aforgot{ text-align:right; margin-top:-8px; margin-bottom:14px; }
.auth-box .aforgot a{ font-size:13px; color:var(--accent-2); font-weight:500; }
.auth-box .aterms{ font-size:12.5px; color:var(--muted); text-align:center; margin-top:14px; }
.auth-box .aterms a{ color:var(--ink-2); }
.auth-main .aleg{ font-size:12px; color:var(--muted); }
.auth-aside{ position:relative; overflow:hidden; background:linear-gradient(150deg,#1E74FF,#0B3EBE 90%); color:#fff; padding:56px 52px; display:flex; flex-direction:column; justify-content:center; }
.auth-aside::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0); background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 90% at 88% 8%,#000,transparent 62%); mask-image:radial-gradient(120% 90% at 88% 8%,#000,transparent 62%); opacity:.7; }
.auth-aside .aain{ position:relative; z-index:1; max-width:420px; }
.auth-aside h2{ font-size:clamp(26px,2.6vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.15; color:#fff; }
.auth-aside .aalist{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:15px; }
.auth-aside .aalist li{ display:flex; gap:12px; font-size:16px; color:rgba(255,255,255,.94); }
.auth-aside .aalist li svg{ flex:0 0 auto; margin-top:3px; }
.auth-aside .aaq{ margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.22); }
.auth-aside .aaq p{ font-size:16px; line-height:1.55; color:#fff; }
.auth-aside .aaby{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.auth-aside .aaby span.av{ width:40px; height:40px; border-radius:50%; }
.auth-aside .aaby .an{ font-size:14px; font-weight:700; }
.auth-aside .aaby .ar{ font-size:12.5px; color:rgba(255,255,255,.75); }
@media (max-width:860px){ .auth{ grid-template-columns:1fr; } .auth-aside{ display:none; } .auth-main{ padding:24px 22px; } }

/* auth aside brand + form bits */
.auth-aside .brand{ display:inline-flex; align-items:center; gap:10px; margin-bottom:30px; }
.auth-aside .brand .word{ color:#fff; font-weight:800; font-size:18px; letter-spacing:-.01em; }
.auth-aside .brand .word b{ font-weight:800; color:#fff; }
.auth-aside .aaby .av{ display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.22); color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em; }
.auth-box .btn.block{ width:100%; justify-content:center; margin-top:4px; }
.auth-box .field{ margin-bottom:14px; }
.auth-box .cf-turnstile{ margin:6px 0 14px; }
/* honeypot — visually hidden, off-tab, but present for bots */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.field .opt{ color:var(--muted); font-weight:400; font-size:12px; }
.field select, .field textarea{ width:100%; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 13px; transition:border-color .15s, box-shadow .15s; }
.field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field textarea{ resize:vertical; }
.formcard .cf-turnstile{ margin:2px 0 6px; }

/* auth-aside ambient decoration — constellation watermark + floating product glyphs */
.auth-aside::after{ content:""; position:absolute; width:560px; height:560px; right:-180px; top:-200px; background:radial-gradient(circle, rgba(255,255,255,.20), transparent 68%); pointer-events:none; z-index:0; }
.aa-deco{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aa-deco .cx{ position:absolute; right:-70px; bottom:-56px; width:360px; height:360px; opacity:.10; }
.aa-deco .gy{ position:absolute; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:rgba(255,255,255,.06); backdrop-filter:blur(1px); }
.aa-deco .gy svg{ width:22px; height:22px; opacity:.7; }
.aa-deco .g1{ width:52px; height:52px; top:12%; right:12%; transform:rotate(-8deg); }
.aa-deco .g2{ width:46px; height:46px; top:34%; right:26%; border-radius:50%; transform:rotate(6deg); }
.aa-deco .g3{ width:44px; height:44px; bottom:30%; left:9%; transform:rotate(-5deg); }
.aa-deco .g4{ width:50px; height:50px; bottom:14%; right:16%; transform:rotate(9deg); }
.auth-aside .aain{ z-index:1; }

/* Prominent display numbers use the display face (Bricolage has a real 800; Hanken tops at 700). */
.plan .amt .n, .stat .n, .hero .h-metric, .pcheck .pc-time, .tile .tn{ font-family:var(--display); }

/* signup 2-step wizard */
.astep[hidden]{ display:none; }
.asteps{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.asteps .sd{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--muted); background:var(--bg-soft); border:1.5px solid var(--line-2); transition:all .18s; }
.asteps .sd.on{ color:#fff; background:var(--accent); border-color:var(--accent); }
.asteps .sbar{ width:34px; height:2px; border-radius:2px; background:var(--line-2); transition:background .18s; }
.asteps .sbar.on{ background:var(--accent); }
.asteps .slbl{ margin-left:6px; font-size:13px; font-weight:600; color:var(--ink-2); }
.auth-box .arow{ display:flex; gap:10px; margin-top:4px; }
.auth-box .arow .btn.ghost{ flex:0 0 auto; }
.auth-box .arow .btn.solid{ flex:1; justify-content:center; }

/* ============================================================
   Product-page section partitions — on-brand ledger dividers + capability marquee
   ============================================================ */
.chapter{ display:flex; align-items:center; gap:22px; padding:4px 0; }
.chapter .ln{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2) 45%,var(--line-2) 55%,transparent); }
.chapter .cnode{ display:inline-flex; align-items:center; gap:12px; }
.chapter .cg{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; color:var(--accent); border:1px solid var(--line-2); border-radius:50%; background:var(--surface); box-shadow:var(--sh); }
.chapter .cnum{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums; }
.chapter .cnum i{ margin:0 4px; opacity:.45; font-style:normal; }
.chapter .clbl{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
@media (max-width:640px){ .chapter .clbl{ display:none; } }

.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--bg-soft); padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq-track{ display:inline-flex; align-items:center; gap:24px; white-space:nowrap; will-change:transform; animation:mq 42s linear infinite; }
.mq-track span{ font-family:var(--mono); font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); }
.mq-track .dot{ display:inline-flex; color:var(--accent); opacity:.7; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .mq-track{ animation:none; } }

/* ============================================================
   Legal pages (privacy / terms) — sticky TOC + numbered sections
   ============================================================ */
.legal-wrap{ max-width:1060px; }
.legal-head{ text-align:center; max-width:720px; margin:0 auto; }
.legal-head h1{ font-size:clamp(30px,4vw,44px); margin-top:14px; }
.legal-head .legal-meta{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:14px; letter-spacing:.02em; }
.legal-head .intro{ margin-top:16px; color:var(--ink-2); font-size:16px; line-height:1.6; }
.legal-grid{ display:grid; grid-template-columns:224px 1fr; gap:48px; align-items:start; margin-top:44px; }
.legal-toc{ position:sticky; top:92px; align-self:start; }
.legal-toc .toc-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.legal-toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.legal-toc a{ display:block; padding:5px 0 5px 13px; font-size:13px; color:var(--ink-2); border-left:2px solid var(--line); line-height:1.45; }
.legal-toc a:hover{ color:var(--accent-2); border-left-color:var(--accent); }
.legal-body{ max-width:none; }
.legal-body .callout{ margin-bottom:26px; }
.legal-sec{ scroll-margin-top:88px; }
.legal-sec + .legal-sec{ margin-top:30px; padding-top:28px; border-top:1px solid var(--line); }
.legal-sec h2{ display:flex; align-items:baseline; gap:12px; font-size:21px; margin-bottom:4px; }
.legal-sec h2 .ls-n{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent); }
.legal-body table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.legal-body th,.legal-body td{ text-align:left; padding:9px 12px; border:1px solid var(--line); vertical-align:top; word-break:break-word; }
.legal-body th{ background:var(--bg-soft); font-weight:600; color:var(--ink); }
@media (max-width:900px){ .legal-grid{ grid-template-columns:1fr; gap:0; } .legal-toc{ position:static; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); } .legal-toc ol{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; } }
@media (max-width:640px){ .legal-body table{ font-size:12.5px; } .legal-body th,.legal-body td{ padding:7px 9px; } .legal-toc ol{ grid-template-columns:1fr; } }

/* ============================================================
   MOBILE — end-to-end responsive: menu, hero mock, mockups, safety
   ============================================================ */
/* reduced-motion / screenshot kill-switch */
.no-motion *, .no-motion *::before, .no-motion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }

/* ---- Mobile menu (hamburger → full panel, icon flips to ✕) ---- */
.menu-btn .i-close{ display:none; }
.m-panel{ display:none; }
@media (max-width:900px){
  .mast{ position:sticky; top:0; z-index:60; background:var(--bg); }
  html, body{ overflow-x:clip; }        /* no sideways page scroll; clip keeps sticky working */
  .menu-btn{ display:grid; }
  .mast.open{ box-shadow:var(--sh); }
  .mast.open .menu-btn .i-bars{ display:none; }
  .mast.open .menu-btn .i-close{ display:block; }
  .m-panel{ display:block; overflow:hidden; max-height:0; transition:max-height .34s cubic-bezier(.4,0,.2,1); }
  .mast.open .m-panel{ max-height:calc(100dvh - 72px); overflow-y:auto; border-top:1px solid var(--line); }
  .m-links{ display:flex; flex-direction:column; }
  .m-links a{ padding:16px 24px; font-size:17px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
  .m-links a:active{ background:var(--bg-soft); color:var(--accent-2); }
  .m-actions{ display:flex; flex-direction:column; gap:10px; padding:18px 24px 26px; }
  .m-actions .btn{ width:100%; justify-content:center; padding:13px; font-size:15px; }
}
@media (max-width:430px){ .cta-top{ display:none; } .mast .row{ gap:14px; } }

/* ---- Hero laptop → clean dashboard card on phones (no square-laptop) ---- */
@media (max-width:640px){
  .laptop .notch, .laptop .base{ display:none; }
  .laptop .lid{ padding:0; background:transparent; box-shadow:none; }
  .laptop .lid .app-frame{ border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--sh-lg); }
  .laptop .app{ height:auto; min-height:0; }
}

/* ---- Product mockups: readable at narrow widths ---- */
.mock .mb{ overflow-x:auto; }
@media (max-width:520px){
  .dgrid{ grid-template-columns:1fr; }
  .mock .mb{ padding:13px; }
  .ptable th,.ptable td{ padding:8px 7px; }
  .ptable td{ font-size:12px; }
  .assistant .a-thread{ padding:14px; }
}

/* ---- Global small-screen safety ---- */
img{ max-width:100%; height:auto; }
@media (max-width:640px){
  .cta-sec .cta{ flex-direction:column; align-items:stretch; }
  .cta-sec .cta .btn{ width:100%; justify-content:center; }
  .subhero .eyebrow{ max-width:100%; }
}