/* PinLayout website · generated by site-src/build_site.py from the landing master + pages.css */
/* Urbanist + Geist Mono, self-hosted (SIL Open Font License) so every page renders the landing typography, online or offline */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/site/fonts/geist-mono-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/site/fonts/geist-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:300 900;font-display:swap;src:url('/site/fonts/urbanist-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:300 900;font-display:swap;src:url('/site/fonts/urbanist.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Layout concept: an architect's drafting sheet — cool indigo-tinted paper with a visible 12-column grid, oversized grotesk headlines,
   monospace spec captions, and the product itself (colourful app windows on real devices) as the photography. */
:root{
  /* palette built from the logo: indigo #6366F1 · pink #EC4899 · amber #F59E0B · green #22C55E, on cool indigo-tinted neutrals */
  --bg:#F3F4FA; --paper:#FFFFFF; --ink:#0D0F22; --muted:#585C78; --line:rgba(13,15,34,.10); --grid:rgba(13,15,34,.05);
  --accent:#5B5EEA; --accent-2:#16A34A; --brand-pink:#E0438F; --brand-amber:#E8930A;
  --night:#0D0F22; --night-ink:#ECEDF6; --night-muted:#9A9DBA; --night-card:#171A33;
  --stage:#14163A; --t-indigo:#E5E6FD; --t-pink:#FCE6F1; --t-amber:#FEF1DA; --t-green:#E0F6E8; --t-deep:#14163A; --t-deep-ink:#ECEDF6;
  --win:#F1F2F6; --win-ink:#475569; --win-line:#D3D7E4;
  --f-display:"Urbanist", "Urbanist Fallback", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Urbanist", "Urbanist Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:18px; --gut:clamp(16px,4vw,56px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A0B18; --paper:#121428; --ink:#ECEDF6; --muted:#9A9DBA; --line:rgba(236,237,246,.10); --grid:rgba(236,237,246,.045);
  --accent:#8B8DFF; --accent-2:#3DDC84; --brand-pink:#F472B6; --brand-amber:#FBBF24;
  --night:#06070F; --night-card:#12142A; --stage:#161940;
  --t-indigo:#1C1E4A; --t-pink:#36162B; --t-amber:#33240C; --t-green:#0F2C1C; --t-deep:#1C1F48; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0B18; --paper:#121428; --ink:#ECEDF6; --muted:#9A9DBA; --line:rgba(236,237,246,.10); --grid:rgba(236,237,246,.045);
  --accent:#8B8DFF; --accent-2:#3DDC84; --brand-pink:#F472B6; --brand-amber:#FBBF24;
  --night:#06070F; --night-card:#12142A; --stage:#161940;
  --t-indigo:#1C1E4A; --t-pink:#36162B; --t-amber:#33240C; --t-green:#0F2C1C; --t-deep:#1C1F48; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17.5px;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px calc((100% - 2*var(--gut))/12));background-position:var(--gut) 0;background-size:calc(100% - 2*var(--gut)) 100%;background-repeat:no-repeat}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{position:relative;z-index:1;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0;text-wrap:balance}
h2{font-size:clamp(40px,6vw,88px)}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1}
p{margin:0;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;text-decoration:none;font-size:16px;transition:transform .2s ease,background .2s ease}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-line{border:1px solid var(--ink)}
.btn:hover{transform:translateY(-2px)}
.arrow-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;flex:none;transition:transform .2s ease}
.arrow-btn svg{width:16px;height:16px}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:16px;padding-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.brand svg{width:30px;height:30px}
.nav{display:flex;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.nav a{padding:9px 16px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--ink);background:var(--bg)}
.head-r{display:flex;gap:10px;align-items:center}
.theme-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.theme-btn svg{width:18px;height:18px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding-block:clamp(40px,7vw,96px) clamp(40px,6vw,80px);align-items:center;position:relative;isolation:isolate;overflow:hidden}
/* Rotating PinLayout mark + "PIN · SNAP · RESTORE · REPEAT" ring, large and
   faded, centred behind the whole hero (injected by site.js). Replaces the old
   blue stage box + the corner badge. Theme-aware colour, paused for reduced motion. */
.hero-wm{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;overflow:hidden;pointer-events:none;color:var(--ink);opacity:.5}
.hero-wm .hwm-stack{position:relative;width:min(78%,700px);aspect-ratio:1;display:grid;place-items:center}
.hero-wm .hwm-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 52s linear infinite}
.hero-wm .hwm-logo{position:absolute;width:34%;height:34%}
@media (prefers-reduced-motion:reduce){.hero-wm .hwm-ring{animation:none}}
.hero h1{font-size:clamp(54px,8.6vw,138px);font-weight:900}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--brand-pink) 70%,var(--brand-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-top:28px;font-size:clamp(18px,1.6vw,21px);max-width:34ch;color:var(--muted)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px}
/* No blue box any more — the hero sits on the page background and the rotating
   logo watermark shows through. The corner badge becomes that watermark. */
.stage{position:relative;background:none;padding:clamp(6px,1.2vw,18px) 0;min-width:0;display:flex;flex-direction:column;align-items:flex-end}
.stage .badge{display:none}
.stage .mon{width:min(100%,750px)}
.stage .cap{position:absolute;right:clamp(10px,2vw,28px);left:auto;bottom:14px;background:#1d2040;color:#C9CBE0;padding:7px 14px;border-radius:999px;box-shadow:0 12px 28px rgba(16,18,40,.28)}
.badge{color:#ECEDF6;position:absolute;top:-14px;right:-14px;width:150px;height:150px;z-index:3}
.badge svg.ring{width:100%;height:100%;animation:spin 22s linear infinite}
.badge .core{position:absolute;inset:38px;border-radius:50%;background:#FFFFFF;display:grid;place-items:center}
.badge .core svg{width:40px;height:40px}
@keyframes spin{to{transform:rotate(360deg)}}

/* devices + windows (the product as photography) */
.mon{display:flex;flex-direction:column;align-items:center;max-width:100%}
.mon .bz{position:relative;width:100%;border-radius:clamp(10px,1.6vw,20px);background:#08080B;padding:clamp(6px,1vw,12px);
  box-shadow:0 0 0 clamp(3px,.5vw,6px) #CDD0D6,0 0 0 calc(clamp(3px,.5vw,6px) + 1px) #8F939B,0 30px 60px rgba(0,0,0,.35)}
.mon .scr{position:relative;aspect-ratio:16/10;border-radius:clamp(6px,1vw,10px);overflow:hidden;
  background:radial-gradient(60% 80% at 15% 95%,rgba(99,102,241,.75),transparent 70%),radial-gradient(55% 70% at 88% 12%,rgba(236,72,153,.42),transparent 70%),radial-gradient(50% 60% at 60% 110%,rgba(20,184,166,.5),transparent 70%),#1B1446}
.mon .neck{width:15%;height:clamp(20px,3.4vw,46px);margin-top:6px;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);background:linear-gradient(90deg,#8d9199,#e6e8ec 48%,#a7abb3 52%,#8d9199)}
.mon .foot{width:26%;height:clamp(6px,.8vw,10px);border-radius:5px;background:linear-gradient(#eef0f3,#9a9ea6)}
.mon.lap .bz{border-radius:14px 14px 4px 4px;box-shadow:0 0 0 2px #B8BBC3,0 24px 50px rgba(0,0,0,.35)}
.mon.lap .bz{width:88%}.mon.lap .deck{width:100%;height:clamp(8px,1.1vw,14px);border-radius:2px 2px 14px 14px/2px 2px 9px 9px;background:linear-gradient(#eef0f3,#c4c7ce 45%,#8f939b)}
.mon.uw .scr{aspect-ratio:32/9}
.mon.uw .bz{box-shadow:0 0 0 2px #26262C,0 30px 60px rgba(0,0,0,.4)}
.mon.uw .neck{width:8%;background:linear-gradient(90deg,#17171b,#3c3c44 50%,#17171b)}
.mon.uw .foot{width:30%;background:linear-gradient(#34343b,#141417)}
.w{position:absolute;border-radius:clamp(5px,.8vw,10px);background:var(--win);box-shadow:0 8px 22px rgba(0,0,0,.35);overflow:hidden;color:var(--win-ink);
  transition:left .9s cubic-bezier(.16,1,.3,1),top .9s cubic-bezier(.16,1,.3,1),width .9s cubic-bezier(.16,1,.3,1),height .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.w .t{display:flex;align-items:center;gap:4px;padding:clamp(4px,.7vw,9px) clamp(5px,.8vw,10px) 2px}
.w .t i{width:clamp(4px,.55vw,8px);height:clamp(4px,.55vw,8px);border-radius:50%;flex:none}
.w .t i:nth-child(1){background:#FF5F57}.w .t i:nth-child(2){background:#FEBC2E}.w .t i:nth-child(3){background:#28C840}
.w .t b{margin-left:4px;font-family:var(--f-body);font-size:clamp(7px,.95vw,14px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w .bar{margin:clamp(2px,.4vw,5px) clamp(5px,.8vw,10px);height:22%;min-height:5px;border-radius:clamp(3px,.5vw,7px);opacity:.88}
.w .ln{margin:0 clamp(5px,.8vw,10px) clamp(3px,.5vw,7px);height:clamp(3px,.45vw,7px);border-radius:4px;background:var(--win-line)}
.w.dim{filter:brightness(.4) saturate(.6)}
.keys{display:flex;gap:10px;justify-content:center;margin-bottom:clamp(14px,2vw,24px)}
.key{min-width:clamp(40px,4.4vw,62px);height:clamp(40px,4.4vw,62px);padding:0 12px;border-radius:14px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:clamp(18px,2vw,28px);
  color:#fff;background:linear-gradient(#2A3054,#1A1F38);border:3px solid #3B4370;box-shadow:0 6px 0 #0E1124,0 16px 30px rgba(0,0,0,.35);transition:transform .12s ease,box-shadow .12s ease}
.key.down{transform:translateY(5px);box-shadow:0 1px 0 #0E1124,0 8px 16px rgba(0,0,0,.3)}

/* marquee */
.marquee{position:relative;z-index:1;border-block:1px solid var(--line);overflow:hidden;padding-block:22px;background:var(--paper)}
.marquee .track{display:flex;gap:56px;width:max-content;animation:slide 40s linear infinite}
.marquee span{font-family:var(--f-display);font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:14px;color:var(--muted)}
.marquee span i{width:12px;height:12px;border-radius:4px;display:block}
@keyframes slide{to{transform:translateX(-50%)}}

/* about band (Ohio demo 34 second section) */
.about{position:relative;z-index:1;background:var(--t-indigo);border-block:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,5vw,90px);padding-block:clamp(56px,7vw,100px);align-items:start}
.about-big{margin-top:14px;font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,52px);line-height:1.12;letter-spacing:-.02em;max-width:24ch}
.about-big sup{font-size:.45em;vertical-align:super;font-weight:600}
.about-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:999px;text-decoration:none;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.pill .pi{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor}
.pill .pi svg{width:14px;height:14px}
.pill-dark{background:var(--ink);color:var(--bg)}
.pill-light{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.about-side{display:grid;gap:22px;padding-top:34px;font-size:16.5px;color:var(--muted);max-width:36ch}
/* statement */
section{position:relative;z-index:1}
.statement{padding-block:clamp(70px,10vw,150px)}
.statement p.big{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4.2vw,62px);line-height:1.08;letter-spacing:-.025em;max-width:22ch}
.statement p.big b{font-weight:800;color:var(--accent)}
.statement .side{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;align-items:start}

/* steps (sequence → numbered) */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.sec-head p{max-width:42ch;color:var(--muted)}
.how-band{position:relative;z-index:1;background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(80px,10vw,140px)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:linear-gradient(90deg,#6366F1,#EC4899,#F59E0B,#22C55E);opacity:.55}
.step{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.step .n{position:relative;z-index:1;display:flex;align-items:center}
.step .n b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:700 18px var(--f-mono);background:var(--paper);color:var(--dot);border:2px solid var(--dot);box-shadow:0 0 0 8px var(--paper)}
.step:nth-child(1){--dot:#6366F1}.step:nth-child(2){--dot:#EC4899}.step:nth-child(3){--dot:#D97706}.step:nth-child(4){--dot:#16A34A}
.step .viz{display:grid;place-items:center;aspect-ratio:16/11;border-radius:18px;background:var(--bg);border:1px solid var(--line);padding:18px;margin-top:8px}
.step .viz .mini{max-width:100%}
.step h3{margin-top:4px}
.step p{font-size:16px;color:var(--muted)}
/* before / after */
.ba{position:relative;z-index:1;padding-block:clamp(70px,9vw,120px) 0}
.ba-box{border-radius:32px;padding:clamp(28px,5vw,72px);color:#ECEDF6;
  background:radial-gradient(60% 70% at 0% 0%,rgba(99,102,241,.45),transparent 70%),radial-gradient(50% 60% at 100% 100%,rgba(236,72,153,.25),transparent 70%),var(--stage)}
.ba-head h2{margin-top:14px;color:#fff;font-size:clamp(36px,4.8vw,70px)}
.ba-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vw,52px)}
.ba-col{border-radius:24px;padding:clamp(18px,2.4vw,30px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:20px;min-width:0}
.ba-tag{align-self:flex-start;padding:7px 14px;border-radius:999px;font:600 12.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ba-tag.bad{background:rgba(239,68,68,.15);color:#FCA5A5;border:1px solid rgba(248,113,113,.5)}
.ba-tag.good{background:rgba(34,197,94,.15);color:#86EFAC;border:1px solid rgba(74,222,128,.5)}
.ba-viz{padding:clamp(10px,2vw,22px) clamp(10px,3vw,40px)}
.ba-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ba-list li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:16.5px;color:#D7D9EE}
.ba-list li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:1px}
.ba-list.bad li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='%23FCA5A5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat,rgba(239,68,68,.18)}
.ba-list.good li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2386EFAC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,rgba(34,197,94,.18)}
#features{padding-top:clamp(80px,10vw,140px)}
.mini{position:relative;width:100%;aspect-ratio:16/10;border-radius:10px;background:#111427;overflow:hidden}
.mini .z{position:absolute;border-radius:6px}
.mini .z.dash{border:2px dashed rgba(255,255,255,.55);background:rgba(255,255,255,.06)}

/* feature cards (work grid) */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-bottom:clamp(70px,9vw,130px)}
.fcard{border-radius:22px;background:var(--paper);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.fcard .media{padding:clamp(18px,2.4vw,30px);background:var(--t-indigo)}
.fcard:nth-child(2) .media,.fcard:nth-child(6) .media{background:var(--t-pink)}
.fcard:nth-child(3) .media{background:var(--t-amber)}.fcard:nth-child(4) .media{background:var(--t-green)}
.fcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.fcard .body p{color:var(--muted);font-size:15.5px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tags span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}

/* setups + stats */
.setups{padding-bottom:clamp(70px,9vw,130px)}
.setups .scene{position:relative;border-radius:28px;background:var(--paper);border:1px solid var(--line);padding:clamp(28px,4.5vw,64px) clamp(10px,1.5vw,22px) clamp(130px,12vw,160px);display:flex;align-items:end;justify-content:center;gap:clamp(8px,1vw,16px);flex-wrap:wrap}
.setups .scene .mon{flex:0 1 auto}
/* Bigger devices that use the full card width (kept on one row). High px caps so
   they keep growing on wide screens instead of stranding empty side space, and
   much slimmer bezels so the screen content reads louder than the black frame. */
.setups .scene .mon.lap{width:min(25%,460px) !important}
.setups .scene .mon.uw{width:min(47%,900px) !important}
.setups .scene .mon:not(.lap):not(.uw){width:min(25%,460px) !important}
.setups .mon .bz{padding:clamp(1.5px,.25vw,3.5px)}
.stats{position:absolute;left:clamp(16px,3vw,36px);bottom:-1px;display:grid;grid-template-columns:repeat(4,auto);gap:clamp(14px,3vw,48px);background:var(--night);color:var(--night-ink);padding:22px 30px;border-radius:20px 20px 0 0}
.stats b{display:block;font-family:var(--f-display);font-size:clamp(28px,3.4vw,46px);letter-spacing:-.03em;line-height:1}
.stats span{font-size:13.5px;color:var(--night-muted)}

/* capabilities (dark): full-bleed stage, aurora glow, spotlight cards */
.night{position:relative;z-index:1;overflow:hidden;background:var(--night);color:var(--night-ink);padding-block:clamp(80px,10vw,150px) clamp(60px,7vw,100px);isolation:isolate}
.night::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 60% at 8% 0%,rgba(99,102,241,.38),transparent 70%),radial-gradient(36% 50% at 96% 12%,rgba(236,72,153,.24),transparent 70%),radial-gradient(40% 40% at 60% 105%,rgba(34,197,94,.10),transparent 70%)}
.night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(236,237,246,.16) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent 80%)}
.night .edge{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#6366F1 20%,#EC4899 45%,#F59E0B 65%,#22C55E 82%,transparent)}
.night .sec-head p{color:var(--night-muted)}
.night h2 em{font-style:normal;background:linear-gradient(90deg,#A5B4FC,#F9A8D4 50%,#FCD34D);-webkit-background-clip:text;background-clip:text;color:transparent}
.night .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;color:#C7C9F5}
.night .eyebrow i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap-card{--mx:50%;--my:0%;position:relative;border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:300px;min-width:0;overflow:hidden;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 16%,transparent),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),var(--night-card);
  border:1px solid rgba(255,255,255,.07);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s}
.cap-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx) var(--my),var(--c),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cap-card:hover{transform:translateY(-4px)}
.cap-card:hover::before{opacity:1}
.cap-card:nth-child(4n+1){--c:#818CF8}.cap-card:nth-child(4n+2){--c:#F472B6}.cap-card:nth-child(4n+3){--c:#FBBF24}.cap-card:nth-child(4n+4){--c:#4ADE80}
.cap-top{display:flex;align-items:center;justify-content:space-between}
.cap-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.cap-ic svg{width:22px;height:22px}
.cap-no{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:#6E7194}
.cap-card .mono{color:var(--c)}
.cap-card h3{color:#fff}
.cap-card p{color:var(--night-muted);font-size:15.5px}
.cap-tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}
.cap-tags span{padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:#C9CBE0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.cap-foot{margin-top:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:var(--night-muted);font-size:15.5px}
.cap-foot a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600}
.cap-foot a .arrow-btn{width:38px;height:38px}

/* index of all 48 */
.index{background:var(--night);color:var(--night-ink);padding-bottom:clamp(70px,9vw,130px)}
.idx{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
.idx-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px}
.idx-group{padding-block:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.idx-group h3{font-size:20px;margin-bottom:10px;color:#fff}
.idx-group ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.idx-group li{display:grid;grid-template-columns:44px 1fr;font-size:15px;color:var(--night-muted)}
.idx-group li span{font-family:var(--f-mono);font-size:12.5px;color:#6E7194;font-variant-numeric:tabular-nums;padding-top:2px}

/* 48-feature desk */
.desk48{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center;border-top:1px solid rgba(255,255,255,.12);padding-top:clamp(36px,5vw,64px)}
.desk-intro{margin-top:16px;color:var(--night-muted);max-width:36ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip48{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--night-ink);font:600 14px var(--f-body);cursor:pointer}
.chip48 i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.chip48 em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--night-muted)}
.chip48[aria-selected="true"]{background:#fff;color:#0D0F22;border-color:#fff}
.chip48[aria-selected="true"] em{color:#585C78}
.detail{margin-top:22px;padding:22px;border-radius:18px;background:var(--night-card);border:1px solid rgba(255,255,255,.08);min-height:168px}
.detail .num{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:var(--c)}
.detail h3{margin-top:8px;color:#fff}
.detail p{margin-top:8px;color:var(--night-muted);font-size:15.5px}
.detail .grp{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--night-muted)}
.detail .grp i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.big48 .scr{aspect-ratio:16/10.4}
.grid48{position:absolute;inset:2.4%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);gap:1.4%}
.fw{position:relative;border:0;padding:0;border-radius:clamp(4px,.6vw,8px);background:var(--win);color:var(--win-ink);text-align:left;cursor:pointer;overflow:hidden;
  transition:transform .25s ease,opacity .25s ease,box-shadow .25s ease;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fw .tl{display:flex;gap:2px;padding:clamp(3px,.45vw,6px) clamp(4px,.5vw,7px) 0}
.fw .tl i{width:clamp(3px,.32vw,5px);height:clamp(3px,.32vw,5px);border-radius:50%}
.fw .tl i:nth-child(1){background:#FF5F57}.fw .tl i:nth-child(2){background:#FEBC2E}.fw .tl i:nth-child(3){background:#28C840}
.fw .hb{display:block;margin:clamp(2px,.3vw,4px) clamp(4px,.5vw,7px);height:20%;border-radius:clamp(2px,.3vw,4px);background:var(--c)}
.fw .nm{display:block;padding:0 clamp(4px,.5vw,7px);font:700 clamp(6px,.72vw,11px)/1.15 var(--f-body);color:#334155;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fw .no{position:absolute;right:clamp(3px,.4vw,6px);bottom:clamp(2px,.3vw,5px);font:500 clamp(6px,.6vw,9.5px) var(--f-mono);color:#94A3B8}
.fw.off{opacity:.18;transform:scale(.94)}
.fw.on,.fw:hover,.fw:focus-visible{transform:scale(1.08);z-index:2;box-shadow:0 0 0 2px var(--c),0 10px 26px rgba(0,0,0,.55)}
/* split sections */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(70px,9vw,130px)}
.split .copy{display:flex;flex-direction:column;gap:22px}
.split .copy p{color:var(--muted);max-width:44ch;font-size:18px}
.split .copy h2{color:var(--ink)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.checks li::before{content:"";width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,var(--accent)}
.checks li{font-size:16.5px;color:var(--ink)}
.duo{display:flex;align-items:end;justify-content:center;gap:clamp(12px,3vw,40px);flex-wrap:wrap}
.duo .mon{flex:1 1 220px;max-width:340px}
.oslabel{margin-top:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}

/* callouts on visuals */
.vizwrap{position:relative;flex:1 1 300px;max-width:520px}
.callout{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.12);white-space:nowrap}
.callout i{width:8px;height:8px;border-radius:50%;background:var(--accent-2)}
/* goals band: full-bleed office photo, content on top (Ohio demo 34 "we help to achieve goals") */
.goals{position:relative;z-index:1;overflow:hidden;color:#fff;background:#0B0C16;min-height:clamp(560px,82vh,860px);display:flex;align-items:flex-end}
.goals-bg{position:absolute;inset:-12% 0;background:url("img/office-goals.jpg") 62% 50%/cover no-repeat;background:image-set(url("img/office-goals.webp") type("image/webp"),url("img/office-goals.jpg") type("image/jpeg")) 62% 50%/cover no-repeat;will-change:transform}
.goals::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,9,20,.92) 0%,rgba(8,9,20,.72) 38%,rgba(8,9,20,.12) 72%),linear-gradient(0deg,rgba(8,9,20,.85),transparent 45%)}
.goals-in{position:relative;z-index:2;width:100%;padding-block:clamp(56px,8vw,120px)}
.goals .mono{color:#C7C9F5}
.goals-big{margin-top:16px;font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4.2vw,64px);line-height:1.06;letter-spacing:-.025em;max-width:19ch}
.goals-big em{font-style:normal;background:linear-gradient(90deg,#A5B4FC,#F9A8D4 55%,#FCD34D);-webkit-background-clip:text;background-clip:text;color:transparent}
.goals-row{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);margin-top:clamp(34px,5vw,60px);padding-top:26px;border-top:1px solid rgba(255,255,255,.18);max-width:900px}
.goals-row div{display:grid;gap:4px}
.goals-row b{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;line-height:1}
.goals-row span{font-size:15px;color:#C9CBE0}
.goals-tag{position:absolute;z-index:2;right:var(--gut);top:clamp(24px,4vw,48px);display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(13,15,34,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font-size:13.5px;font-weight:600}
.goals-tag i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.25)}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}}

/* testimonials (Ohio demo 31) */
.voices{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);padding-block:clamp(70px,9vw,130px);align-items:stretch}
.voices-side{display:flex;flex-direction:column;gap:18px}
.voices-side p{color:var(--muted);max-width:34ch}
.sample-note{margin-top:auto;display:inline-flex;gap:8px;align-items:center;align-self:flex-start;padding:8px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--brand-amber) 70%,transparent);color:var(--muted);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.vcard{position:relative;border-radius:28px;background:var(--t-deep);color:var(--t-deep-ink);padding:clamp(28px,4.5vw,64px);display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);min-height:clamp(380px,36vw,500px);overflow:hidden}
.vcard::after{content:"";position:absolute;right:-12%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.45),transparent 65%);pointer-events:none}
.vq-mark{font-family:var(--f-display);font-weight:800;font-size:110px;line-height:.6;height:44px;background:linear-gradient(135deg,#818CF8,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent}
.vq{position:relative;z-index:1;font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.7vw,40px);line-height:1.18;letter-spacing:-.02em;max-width:30ch;transition:opacity .35s ease}
.vfoot{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.vwho{display:flex;align-items:center;gap:14px;transition:opacity .35s ease}
.vav{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.vwho b{display:block;font-size:17px}.vwho span{font-size:14.5px;color:#A5A8D6}
.vnav{display:flex;align-items:center;gap:14px}
.vnav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(236,237,246,.35);background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center}
.vnav button:hover{background:rgba(236,237,246,.1)}
.vnav svg{width:16px;height:16px}
.vcount{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.vcount i{position:relative;display:block;width:56px;height:2px;border-radius:2px;background:rgba(236,237,246,.25);overflow:hidden}
.vcount i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#818CF8,#F472B6);transform-origin:left;transform:scaleX(0)}
.vcount i.run::after{animation:vprog var(--vdur,6s) linear forwards}
.vcard:hover .vcount i.run::after,.vcard:focus-within .vcount i.run::after{animation-play-state:paused}
@keyframes vprog{to{transform:scaleX(1)}}
.vq.fade,.vwho.fade{opacity:0}

/* founder message (Ohio demo 34) */
/* founder — full-bleed editorial split: image fills the left half, copy on the right */
.founder{position:relative;z-index:1;background:var(--t-amber);border-block:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;overflow:hidden}
.f-portrait{position:relative;overflow:hidden;border-radius:0;max-width:none;min-height:clamp(560px,82vh,900px);background:#14163A;margin:0}
.f-copy{align-self:center;padding:clamp(48px,7vw,110px) clamp(32px,6vw,84px);max-width:720px}
.f-copy .lead{margin-top:18px;font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.4vw,50px);line-height:1.08;letter-spacing:-.025em;max-width:22ch}
.f-copy .body{margin-top:26px;display:grid;gap:16px;color:var(--muted);max-width:60ch}
.f-sign{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.f-sign .sig{font-family:var(--f-display);font-weight:300;font-style:italic;font-size:34px;letter-spacing:-.02em}
.f-sign .who{border-left:1px solid var(--line);padding-left:16px}
.f-sign .who b{display:block}.f-sign .who span{font-size:14.5px;color:var(--muted)}

/* recent insights (Ohio demo 34) */
.insights{padding-block:clamp(70px,9vw,130px)}
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.post{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post .pm{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;padding:0;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.post .pm .mon{width:74%}.post .pm .mon.uw{width:92%}
.post:hover .pm{transform:translateY(-4px)}
.post .pm .chipx{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:var(--paper);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.post .pd{margin-top:18px}
.post h3{margin-top:10px;font-size:clamp(20px,1.6vw,24px);line-height:1.15}
.post p{margin-top:10px;font-size:15.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.post .more svg{width:14px;height:14px;transition:transform .2s}
.post:hover .more svg{transform:translate(2px,-2px)}
.post:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:1080px){.voices{grid-template-columns:1fr}.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.founder{grid-template-columns:1fr}.f-portrait{min-height:clamp(340px,56vh,520px)}.f-copy{padding:clamp(36px,8vw,64px) var(--gut)}}
@media (max-width:620px){.posts{grid-template-columns:1fr}.goals-tag{display:none}.goals::before{background:linear-gradient(0deg,rgba(8,9,20,.94) 20%,rgba(8,9,20,.55) 70%,rgba(8,9,20,.3))}}

/* FAQ */
.faq{padding-bottom:clamp(70px,9vw,130px)}
.faq details{border-top:1px solid var(--line);padding-block:22px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:24px;color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--muted);max-width:68ch}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px}

/* closing CTA */
.btn-xl{padding:18px 28px;font-size:17px}
.cta-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end}
.cta-sub{margin-top:18px;color:var(--muted);max-width:44ch;font-size:18px}
.cta-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.cta-actions .btn{justify-content:center}
.cta-note{margin-top:4px;text-align:center}
/* footer */
.site-foot{position:relative;z-index:1;background:var(--night);color:var(--night-ink);padding-block:clamp(56px,7vw,96px) 28px;overflow:hidden}
.site-foot .brand{color:#fff}
.sf-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px)}
.sf-brand p{margin-top:16px;color:var(--night-muted);max-width:32ch}
.sf-social{display:flex;gap:10px;margin-top:24px}
.sf-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);color:var(--night-ink);transition:background .2s,color .2s,border-color .2s}
.sf-social a:hover{background:#fff;color:#0D0F22;border-color:#fff}
.sf-social svg{width:18px;height:18px}
.sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sf-h{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7C80A6;margin-bottom:14px}
.sf-cols a,.linkish{display:block;color:var(--night-ink);text-decoration:none;font-size:15.5px;line-height:2.05;opacity:.86;background:none;border:0;padding:0;font-family:var(--f-body);cursor:pointer;text-align:left}
.sf-cols a:hover,.linkish:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.sf-contact{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.sf-mail{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;user-select:all}
.copy-btn{margin-left:12px;vertical-align:middle;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--night-ink);font:600 13px var(--f-body);cursor:pointer}
.sf-status{display:flex;align-items:center;gap:10px}
.sf-status .mono{color:var(--night-muted)}
.sf-status .dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.sf-word{font-family:var(--f-display);font-weight:900;letter-spacing:-.05em;line-height:1.08;padding-bottom:.06em;margin-bottom:-.12em;font-size:clamp(80px,19vw,300px);margin-top:clamp(20px,3vw,40px);
  background:linear-gradient(90deg,#6366F1,#EC4899 45%,#F59E0B 75%,#22C55E);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.92;white-space:nowrap;text-align:center}
.sf-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:var(--night-muted)}
.sf-legal{display:flex;gap:20px}.sf-legal a,.sf-top-link{color:var(--night-muted);text-decoration:none}.sf-legal a:hover,.sf-top-link:hover{color:#fff}
/* cookie consent */
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;margin-inline:auto;max-width:760px;background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:22px;padding:22px;box-shadow:0 30px 80px rgba(13,15,34,.28);display:grid;gap:18px}
.ck-main{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.ck-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--t-indigo);color:var(--accent)}
.ck-ic svg{width:24px;height:24px}
.cookie h3{font-size:20px}
.cookie p{margin-top:6px;color:var(--muted);font-size:15px}
.cookie a{color:var(--accent);font-weight:600}
.ck-prefs{display:grid;gap:8px;margin-top:14px}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:var(--bg);cursor:pointer}
.ck-row b{display:block;font-size:15px}.ck-row small{color:var(--muted);font-size:13.5px}
.ck-row input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.ck-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ck-btn{padding:12px 18px;border-radius:999px;font:600 15px var(--f-body);cursor:pointer}
.ck-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ck-solid{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
/* closing */
.closing{position:relative;z-index:1;background:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--paper);border-top:1px solid var(--line);padding-block:clamp(70px,9vw,130px)}
.closing h2{font-size:clamp(52px,8vw,128px);font-weight:900}
.closing .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(60px,8vw,110px);padding-top:28px;border-top:1px solid var(--line)}
.foot-grid p,.foot-grid a{font-size:15px;color:var(--muted);text-decoration:none;display:block;line-height:1.9}
.foot-grid a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px}

/* rail */
.rail{position:fixed;left:max(6px,calc(var(--gut) / 2 - 15px));top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;align-items:center;gap:14px}
.rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rail a{text-decoration:none}

@media (max-width:1080px){.steps::before{display:none}.desk48{grid-template-columns:1fr}.sf-top{grid-template-columns:1fr}.cta-band{grid-template-columns:1fr;align-items:start}.hero{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.features,.caps{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{display:none}.rail{display:none}}
@media (max-width:760px){.ba-cols{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr}.about-side{padding-top:0}.sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ck-main{grid-template-columns:1fr}.ck-actions .ck-btn{flex:1 1 auto}.fw .nm{display:none}.steps,.features,.caps,.idx-groups,.split,.faq-grid,.statement .side,.idx{grid-template-columns:1fr}.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{position:static;grid-template-columns:repeat(2,auto);border-radius:18px;margin-top:20px}.setups .scene{padding-bottom:28px}.badge{width:96px;height:96px;top:-10px;right:4px}.badge .core{inset:24px}.head-r .btn{display:none}}
@media (prefers-reduced-motion:reduce){.badge svg.ring,.marquee .track{animation:none}.w{transition:none}html{scroll-behavior:auto}}

/* ================= internal pages (shared with the landing look) ================= */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--paper);color:var(--ink);font-weight:600}
.skip:focus{left:16px}
.nav a[aria-current="page"]{color:var(--ink);background:var(--bg)}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;place-items:center}
.menu-btn svg{width:18px;height:18px}
.mnav{position:fixed;inset:72px 12px auto 12px;z-index:40;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.25);display:grid}
.mnav a{padding:14px 16px;border-radius:14px;text-decoration:none;font-weight:600;font-size:18px;display:flex;justify-content:space-between}
.mnav a:hover,.mnav a[aria-current="page"]{background:var(--bg)}
.mnav a::after{content:"→";color:var(--muted)}
.mnav .mn-dl{margin-top:6px;background:var(--ink);color:var(--bg);justify-content:center}
.mnav .mn-dl::after{content:none}
@media (max-width:1080px){.menu-btn{display:grid}}
.page main{position:relative;z-index:1}

/* page hero */
.phero{position:relative;z-index:1;padding-block:clamp(48px,7vw,110px) clamp(40px,5vw,80px);overflow:hidden}
.phero::after{content:"";position:absolute;right:-10%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--hue,var(--accent)) 16%,transparent),transparent 65%)}
.crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.phero h1{font-size:clamp(46px,7.2vw,110px);font-weight:800;letter-spacing:-.045em;line-height:.95;margin-top:20px;max-width:15ch}
.phero h1 em,.h-em em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--brand-pink) 55%,var(--brand-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .lead{margin-top:24px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--muted);max-width:58ch}
.phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;align-items:center}
.phero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.phero-viz{display:flex;justify-content:center}
.phero-viz .mon{width:min(100%,560px)}
.phero.slim h1{font-size:clamp(40px,5.6vw,84px)}

/* section scaffolding */
.sec{position:relative;z-index:1;padding-block:clamp(56px,8vw,120px)}
.sec.tight{padding-block:clamp(40px,5vw,72px)}
.sec.line{border-top:1px solid var(--line)}
.band{position:relative;z-index:1;border-block:1px solid var(--line)}
.band.indigo{background:var(--t-indigo)}.band.pink{background:var(--t-pink)}.band.amber{background:var(--t-amber)}.band.green{background:var(--t-green)}
.band.dark{background:var(--night);color:var(--night-ink);border:0}
.band.dark .muted,.band.dark .sec-head p{color:var(--night-muted)}
.muted{color:var(--muted)}
.h2s{font-size:clamp(34px,4.4vw,64px)}
.grid2,.grid3,.grid4{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.4vw,32px);min-width:0}
.card h3{margin-top:12px}
.card p{margin-top:10px;color:var(--muted);font-size:16px}
.band.dark .card{background:var(--night-card);border-color:rgba(255,255,255,.07)}
.band.dark .card h3{color:#fff}.band.dark .card p{color:var(--night-muted)}
.ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 13%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--accent)) 30%,transparent)}
.ic svg{width:22px;height:22px}
.num{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:var(--muted)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tagrow span{padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line)}
.checks.tight{gap:8px}
.cta-strip{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:clamp(26px,4vw,48px);border-radius:28px;background:var(--t-deep);color:var(--t-deep-ink);position:relative;overflow:hidden}
.cta-strip::after{content:"";position:absolute;right:-8%;top:-60%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.4),transparent 65%);pointer-events:none}
.cta-strip h2{font-size:clamp(30px,3.6vw,52px);color:#fff}
.cta-strip p{color:#A5A8D6;margin-top:10px;max-width:52ch}
.cta-strip .acts{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.cta-strip .btn-solid{background:#fff;color:#14163A}
.cta-strip .btn-line{border-color:rgba(255,255,255,.5);color:#fff}
.chipbar{display:flex;flex-wrap:wrap;gap:8px}
.chipbar button,.chipbar a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 14.5px var(--f-body);cursor:pointer;text-decoration:none}
.chipbar button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chipbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}
.trio{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,2vw,28px);width:100%}
.oslabel{margin-top:10px;text-align:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vizwrap{position:relative;width:min(100%,520px)}

/* features page */
.fgroup{scroll-margin-top:90px}
.fg-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center;margin-bottom:clamp(28px,4vw,48px)}
.fg-head .count{display:inline-flex;align-items:center;gap:10px}
.fg-head .count i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.fg-head h2{font-size:clamp(34px,4.4vw,64px);margin-top:14px}
.fg-head p{margin-top:16px;color:var(--muted);max-width:46ch}
.fg-viz{display:flex;justify-content:center}.fg-viz .mon{width:min(100%,520px)}
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fc{position:relative;padding:22px;border-radius:18px;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.fc::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.fc:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(13,15,34,.08)}
.fc .num{color:var(--c)}
.fc h3{font-size:20px;margin-top:8px}
.fc p{margin-top:8px;color:var(--muted);font-size:15.5px}
.fjump{position:sticky;top:76px;z-index:15;padding-block:12px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.fjump .chipbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.fjump .chipbar a{white-space:nowrap}

/* pricing */
.billing{display:inline-flex;padding:5px;border-radius:999px;border:1px solid var(--line);background:var(--paper);gap:4px}
.billing button{padding:10px 18px;border-radius:999px;border:0;background:transparent;color:var(--muted);font:600 15px var(--f-body);cursor:pointer}
.billing button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.billing small{font-family:var(--f-mono);font-size:11px;margin-left:6px;color:var(--accent-2)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:18px;padding:clamp(26px,3vw,38px);border-radius:26px;background:var(--paper);border:1px solid var(--line);position:relative}
.plan.feature{background:var(--t-deep);color:var(--t-deep-ink);border-color:transparent;box-shadow:0 30px 70px rgba(20,22,58,.28)}
.plan.feature .muted,.plan.feature .was,.plan.feature .per{color:#A5A8D6}
.plan .badge-pop{position:absolute;top:22px;right:22px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#6366F1,#EC4899);color:#fff;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.plan h3{font-size:26px}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font-family:var(--f-display);font-size:clamp(46px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1}
.price .per{color:var(--muted);font-size:15px}
.was{color:var(--muted);font-size:14.5px}
.was s{opacity:.8}
.was .off{margin-left:8px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:var(--accent-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em}
.plan .checks{margin-top:4px}
.plan.feature .checks li{color:var(--t-deep-ink)}
.plan .btn{justify-content:center;margin-top:auto}
.plan.feature .btn-solid{background:#fff;color:#14163A}
body[data-bill="annual"] .m-only,body[data-bill="monthly"] .a-only{display:none!important}
.incl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.incl div{padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line);font-weight:600;display:flex;gap:10px;align-items:flex-start}
.incl div::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}

/* compare table */
.tbl-wrap{overflow-x:auto;border-radius:22px;border:1px solid var(--line);background:var(--paper)}
.ctable{width:100%;border-collapse:collapse;min-width:720px;font-size:15.5px}
.ctable th,.ctable td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line)}
.ctable th:first-child,.ctable td:first-child{text-align:left}
.ctable thead th{font-family:var(--f-display);font-size:18px;font-weight:700;position:sticky;top:0;background:var(--paper)}
.ctable thead th.us{color:var(--accent)}
.ctable td.us{background:color-mix(in srgb,var(--accent) 6%,transparent);font-weight:700}
.ctable tr.grp td{background:var(--bg);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
.yes{color:var(--accent-2);font-weight:800}.no{color:var(--muted);opacity:.6}
.fine{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* download */
.dl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dl-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(26px,3.4vw,44px);border-radius:28px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.dl-card.mine{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.dl-card .mine-tag{display:none;position:absolute;top:20px;right:20px;padding:6px 10px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em}
.dl-card.mine .mine-tag{display:block}
.dl-card .os{display:flex;align-items:center;gap:14px}
.dl-card .os svg{width:40px;height:40px}
.dl-card h2{font-size:clamp(30px,3vw,44px)}
.dl-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15.5px}
.dl-card dt{color:var(--muted)}.dl-card dd{margin:0;font-weight:600}
.dl-card .btn{align-self:flex-start;margin-top:auto}
.steps-v{display:grid;gap:14px;counter-reset:s}
.sv{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.sv::before{counter-increment:s;content:counter(s,decimal-leading-zero);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;background:var(--t-indigo);color:var(--accent)}
.sv h3{font-size:21px}.sv p{margin-top:6px;color:var(--muted)}
.note{display:flex;gap:14px;padding:18px 20px;border-radius:18px;background:var(--t-amber);border:1px solid var(--line)}
.note b{display:block}
.note p{color:var(--muted);margin-top:4px;font-size:15.5px}

/* keyboard table */
.kb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.kb div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
kbd{font-family:var(--f-mono);font-size:13px;padding:4px 8px;border-radius:8px;background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 0 var(--line);white-space:nowrap}

/* changelog */
.tl{position:relative;display:grid;gap:18px}
.tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--accent),var(--brand-pink),var(--brand-amber),transparent)}
.rel{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding-left:44px}
.rel::before{content:"";position:absolute;left:4px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--accent)}
.rel.latest::before{background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
.rel .v{font-family:var(--f-display);font-size:28px;font-weight:800;letter-spacing:-.03em}
.rel .d{display:block;margin-top:4px}
.rel ul{margin:0;padding:22px 24px 22px 40px;border-radius:18px;background:var(--paper);border:1px solid var(--line);display:grid;gap:8px}
.rel li{color:var(--ink)}
.rel li::marker{color:var(--accent)}
.plat{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--t-indigo);color:var(--accent)}

/* help centre */
.search{position:relative;max-width:680px;margin-top:30px}
.search input{width:100%;padding:20px 22px 20px 56px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 18px var(--f-body);box-shadow:0 20px 50px rgba(13,15,34,.08)}
.search input:focus{outline:2px solid var(--accent);outline-offset:2px}
.search svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.quick button{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 13.5px var(--f-body);cursor:pointer}
.help-cats{display:grid;gap:clamp(36px,5vw,64px)}
.help-cat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);scroll-margin-top:90px}
.help-cat h2{font-size:clamp(28px,3vw,40px)}
.help-cat .ic{margin-bottom:16px}
.art{border:1px solid var(--line);border-radius:18px;background:var(--paper);margin-bottom:10px;scroll-margin-top:90px}
.art summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:17.5px}
.art summary::-webkit-details-marker{display:none}
.art summary::after{content:"+";font-family:var(--f-mono);color:var(--muted);font-size:20px;line-height:1;transition:transform .2s}
.art[open] summary::after{transform:rotate(45deg)}
.art .ab{padding:0 22px 22px;color:var(--muted);display:grid;gap:10px}
.art .ab ol,.art .ab ul{margin:0;padding-left:22px;display:grid;gap:6px}
.art .ab b{color:var(--ink)}
.empty{padding:28px;border-radius:18px;border:1px dashed var(--line);text-align:center;color:var(--muted)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.cways{display:grid;gap:12px}
.cway{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.cway b{display:block}.cway span{color:var(--muted);font-size:15px}
.cway a{color:var(--accent);font-weight:700;text-decoration:none}
.mini-btn{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 13px var(--f-body);cursor:pointer}
.form{display:grid;gap:14px;padding:clamp(22px,3vw,36px);border-radius:26px;background:var(--paper);border:1px solid var(--line)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;font-size:14.5px}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 16px var(--f-body)}
.form textarea{min-height:150px;resize:vertical}
.form .btn{justify-content:center;border:0;cursor:pointer;font-family:var(--f-body)}
.form small{color:var(--muted)}
.addr{margin-top:22px;padding:20px;border-radius:18px;border:1px solid var(--line);font-size:15px;color:var(--muted)}
.addr b{color:var(--ink)}

/* prose: legal + articles */
.doc{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,5vw,80px);align-items:start}
.toc{position:sticky;top:96px;display:grid;gap:2px;max-height:calc(100vh - 120px);overflow:auto;padding-right:8px}
.toc .mono{margin-bottom:10px}
.toc a{padding:7px 12px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:14.5px;border-left:2px solid transparent}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);background:var(--paper);border-left-color:var(--accent)}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.legal-nav a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:14px;color:var(--muted);background:var(--paper)}
.legal-nav a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.prose{max-width:74ch;font-size:17px;line-height:1.7}
.prose h2{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:48px 0 14px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose p{margin:14px 0}
.prose ul,.prose ol{padding-left:22px;margin:14px 0;display:grid;gap:8px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose blockquote{margin:28px 0;padding:22px 26px;border-radius:18px;background:var(--t-indigo);font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.015em;border-left:4px solid var(--accent)}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px;display:block;overflow-x:auto}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:700;background:var(--paper)}
.doc-foot{margin-top:48px;padding:22px;border-radius:18px;background:var(--paper);border:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* blog */
.featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:center;text-decoration:none;color:inherit;padding:clamp(18px,2vw,24px);border-radius:28px;background:var(--paper);border:1px solid var(--line)}
.featured .pm{border-radius:20px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.featured .pm .mon{width:70%}
.featured h2{font-size:clamp(30px,3.4vw,50px);margin-top:12px}
.featured p{margin-top:14px;color:var(--muted)}
.featured:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.art-head{max-width:880px}
.art-head h1{font-size:clamp(40px,5.6vw,80px);font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:18px}
.art-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}
.art-cover{border-radius:28px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;margin-top:clamp(28px,4vw,48px)}
.art-cover .mon{width:min(52%,560px)}
.art-cover .mon.uw{width:min(80%,860px)}
.article{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,5vw,80px);align-items:start}
.byline{position:sticky;top:96px;display:grid;gap:16px}
.byline .who{display:flex;gap:12px;align-items:center}
.byline .who svg{width:40px;height:40px}
.share{display:flex;gap:8px;flex-wrap:wrap}
#readProgress{position:fixed;left:0;right:0;top:0;height:3px;z-index:30;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#6366F1,#EC4899,#F59E0B)}

/* 404 */
.lost{min-height:70vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.lost .big404{font-family:var(--f-display);font-weight:900;font-size:clamp(90px,14vw,200px);line-height:.85;letter-spacing:-.06em;background:linear-gradient(90deg,#6366F1,#EC4899 50%,#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
#lostViz .mon{width:min(100%,600px)}
.btn[disabled]{opacity:.7;cursor:default;transform:none}

/* about */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.story .big{font-family:var(--f-display);font-size:clamp(28px,3.2vw,46px);line-height:1.12;letter-spacing:-.02em;font-weight:500}
.story .body{display:grid;gap:16px;color:var(--muted);font-size:17.5px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts div{padding:28px 20px 6px 0;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--f-display);font-size:clamp(40px,5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1}
.facts span{display:block;margin-top:8px;color:var(--muted)}
.company{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.company div{padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.company small{display:block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.company b{display:block;margin-top:6px}

/* data panel (security / AI) */
.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dpanel{padding:clamp(22px,3vw,34px);border-radius:24px;border:1px solid var(--line);background:var(--paper)}
.dpanel.good{background:var(--t-green)}.dpanel.never{background:var(--t-pink)}
.dpanel h3{display:flex;gap:10px;align-items:center}
.dpanel ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.dpanel li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.dpanel li::before{content:"";width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--c,var(--accent-2)) center/12px no-repeat}
.dpanel.good li::before{background-color:var(--accent-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.dpanel.never li::before{background-color:var(--brand-pink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:f}
.flow .card::before{counter-increment:f;content:counter(f,decimal-leading-zero) " /";font-family:var(--f-mono);font-size:13px;color:var(--accent)}

@media (max-width:1080px){
  .phero-grid,.fg-head,.help-cat,.contact-grid,.doc,.article,.story,.lost,.featured,.rel{grid-template-columns:1fr}
  .grid4,.incl,.flow,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.fcards,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc,.byline{position:static;max-height:none}
  .toc{display:none}
  .rel{gap:12px}
  .facts div:nth-child(2){border-right:0}
}
@media (max-width:700px){
  .grid2,.grid3,.grid4,.fcards,.plans,.incl,.dl-cards,.kb,.split2,.flow,.company,.form .row2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .phero h1{font-size:clamp(42px,12vw,64px)}
  .art-cover{aspect-ratio:16/9}.art-cover .mon{width:80%}
}
@media (max-width:1080px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
.faq summary{min-width:0;overflow-wrap:anywhere}
@media (max-width:700px){.vizwrap{width:86%}.vizwrap .callout{font-size:12px;padding:7px 10px}}
.faq summary span{flex:1;min-width:0}
@media (max-width:700px){.vizwrap .callout[style*="right"]{right:0!important}.vizwrap .callout[style*="left:-"]{left:0!important}}
.faq details{overflow:hidden}.faq summary::after{flex:none;width:24px;text-align:center;line-height:1.2}

/* every control uses the site typography */
button,input,select,textarea{font-family:inherit}

/* mega menu */
.nav.mega{position:relative;align-items:center}
.nav.mega>a,.nav .mt{padding:9px 15px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--muted)}
.nav .mt{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;font-family:var(--f-body)}
.nav .mt:hover,.nav .mi.open .mt,.nav .mi.on .mt{color:var(--ink);background:var(--bg)}
.nav .mt .chev{width:13px;height:13px;transition:transform .25s}
.nav .mi.open .mt .chev{transform:rotate(180deg)}
.nav.mega .mi{position:static}
.mp{position:absolute;left:50%;top:calc(100% + 14px);z-index:50;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:10px;width:min(700px,calc(100vw - 32px));padding:10px;border-radius:24px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 80px rgba(13,15,34,.18),0 4px 14px rgba(13,15,34,.06);
  visibility:hidden;opacity:0;transform:translate(-50%,8px);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
.mp::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mi.open .mp{visibility:visible;opacity:1;transform:translate(-50%,0);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s}
.mlinks{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start}
.nav .mlink{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;text-decoration:none;color:var(--ink)}
.nav .mlink:hover,.nav .mlink[aria-current="page"]{background:var(--bg)}
.nav .mlink .ic{width:38px;height:38px;border-radius:11px;flex:none}
.nav .mlink .ic svg{width:18px;height:18px}
.nav .mlink b{display:block;font-size:15.5px;font-weight:700;color:var(--ink)}
.nav .mlink small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.nav .mside{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:var(--bg);text-decoration:none;color:var(--ink)}
.nav .mside .mono{margin-bottom:8px}
.nav .mside>a{padding:7px 10px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:500}
.nav .mside>a:hover,.nav .mside>a[aria-current="page"]{color:var(--ink);background:var(--paper)}
.nav .mside.feat{background:var(--t-deep);color:var(--t-deep-ink);position:relative;overflow:hidden}
.nav .mside.feat::after{content:"";position:absolute;right:-40%;bottom:-40%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.45),transparent 65%)}
.nav .mside.feat .mono{color:#A5A8D6}
.nav .mside.feat b{font-family:var(--f-display);font-size:19px;line-height:1.2;letter-spacing:-.01em;font-weight:700;color:#fff;position:relative;z-index:1}
.nav .mside.feat .go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;position:relative;z-index:1}
.nav .mside.feat:hover .go svg{transform:translateX(3px)}
.nav .mside.feat .go svg{transition:transform .2s}
@media (max-width:1240px){.nav.mega>a,.nav .mt{padding:9px 11px}}

/* phone menu: every page, grouped */
.mnav{max-height:calc(100dvh - 90px);overflow:auto;gap:6px}
.mnav .mhome{font-size:20px}
.mgroup{display:grid;padding:8px 0;border-top:1px solid var(--line)}
.mgroup .mono{padding:8px 16px 4px}
.mgroup a{padding:11px 16px;font-size:17px}

/* ================= account: auth screens ================= */
.head-r .login-link{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)}
.head-r .login-link:hover{background:var(--paper)}
@media (max-width:1080px){.head-r .login-link{display:none}}
.auth{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-l{display:flex;flex-direction:column;padding:28px clamp(20px,5vw,72px)}
.auth-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.auth-top .back{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--muted);font-weight:600;font-size:14.5px}
.auth-top .back:hover{color:var(--ink)}
.auth-form{width:100%;max-width:440px;margin:auto;padding-block:40px;display:grid;gap:16px}
.auth-form h1{font-size:clamp(34px,3.6vw,48px);letter-spacing:-.035em;line-height:1}
.auth-form .lead{color:var(--muted);margin-top:-4px}
.auth-form .switch{color:var(--muted);font-size:15px}
.auth-form .switch a,.auth-form .lnk{color:var(--accent);font-weight:600;text-decoration:none}
.fld{display:grid;gap:7px}
.fld label,.fld .lb{font-weight:600;font-size:14.5px;display:flex;justify-content:space-between;gap:10px}
.inp{position:relative}
.inp input,.inp select,.fld textarea{width:100%;padding:14px 14px 14px 44px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 16px var(--f-body);transition:border-color .2s,box-shadow .2s}
.fld textarea{padding:14px;min-height:140px;resize:vertical}
.inp.noi input,.inp.noi select{padding-left:14px}
.inp input:focus,.inp select:focus,.fld textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.inp>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.inp .reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:600 13px var(--f-body);cursor:pointer}
.inp .reveal:hover{background:var(--bg);color:var(--ink)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14.5px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--muted);cursor:pointer}
.chk input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent);flex:none}
.chk a{color:var(--accent)}
.btn-wide{width:100%;justify-content:center;border:0;cursor:pointer;font-size:16px;padding:16px 24px}
.or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.social a{display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.social a:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.social svg{width:18px;height:18px}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.meter i{height:5px;border-radius:5px;background:var(--line);transition:background .25s}
.meter[data-s="1"] i:nth-child(-n+1){background:#EF4444}.meter[data-s="2"] i:nth-child(-n+2){background:#F59E0B}
.meter[data-s="3"] i:nth-child(-n+3){background:#84CC16}.meter[data-s="4"] i{background:#22C55E}
.hint{font-size:13px;color:var(--muted)}
.auth-foot{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted)}
.auth-foot a{color:var(--muted);text-decoration:none}.auth-foot a:hover{color:var(--ink)}
.auth-r{position:relative;overflow:hidden;background:var(--t-deep);color:var(--t-deep-ink);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(22px,3vw,44px)}
.auth-r::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 50% at 15% 10%,rgba(99,102,241,.5),transparent 70%),radial-gradient(40% 45% at 95% 90%,rgba(236,72,153,.35),transparent 70%)}
.auth-r>*{position:relative}
.auth-r .mono{color:#A5A8D6}
.auth-r h2{font-size:clamp(30px,3vw,46px);color:#fff;max-width:16ch}
.auth-r .checks li{color:#ECEDF6}
.auth-r .viz .mon{width:min(100%,520px)}
.auth-r .quote{padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:15.5px;color:#C9CBE0}
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--t-green);font-size:14.5px}
.notice.warn{background:var(--t-amber)}.notice.info{background:var(--t-indigo)}
.notice svg{width:20px;height:20px;flex:none;margin-top:1px}
.preview-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--brand-amber) 70%,transparent);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.big-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--t-indigo);color:var(--accent)}
.big-ic svg{width:30px;height:30px}
@media (max-width:980px){.auth{grid-template-columns:1fr}.auth-r{display:none}}

/* ================= account: dashboard shell ================= */
body.acct{background:var(--bg)}
body.acct::before{display:none}
.ac-shell{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh}
.ac-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 16px;border-right:1px solid var(--line);background:var(--paper);overflow:auto;z-index:30}
.ac-side .brand{padding:4px 10px 18px}
.ac-nav{display:grid;gap:2px}
.ac-nav .mono{padding:16px 12px 6px;font-size:11px}
.ac-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--muted);font-weight:600;font-size:15px}
.ac-nav a svg{width:19px;height:19px;flex:none}
.ac-nav a:hover{background:var(--bg);color:var(--ink)}
.ac-nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.ac-nav a .badge-n{margin-left:auto;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--brand-pink);color:#fff;font-size:12px;text-align:center}
.ac-plan{margin-top:auto;padding:16px;border-radius:18px;background:var(--t-deep);color:var(--t-deep-ink);position:relative;overflow:hidden}
.ac-plan::after{content:"";position:absolute;right:-30%;bottom:-50%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.45),transparent 65%)}
.ac-plan>*{position:relative;z-index:1}
.ac-plan .mono{color:#A5A8D6;font-size:11px}
.ac-plan b{display:block;font-family:var(--f-display);font-size:20px;color:#fff;margin-top:6px}
.ac-plan span{font-size:13px;color:#C9CBE0}
.ac-plan .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.15);margin-top:12px;overflow:hidden}
.ac-plan .bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#818CF8,#F472B6)}
.ac-side .signout{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:0;background:transparent;color:var(--muted);font:600 14.5px var(--f-body);cursor:pointer;text-decoration:none}
.ac-side .signout:hover{background:var(--bg);color:var(--ink)}
.ac-side .signout svg{width:18px;height:18px}
.ac-main{min-width:0;display:flex;flex-direction:column}
.ac-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,36px);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ac-top .ac-menu{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;place-items:center}
.ac-top .ac-menu svg{width:18px;height:18px}
.ac-top .crumb{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ac-top .sp{flex:1}
.ac-top .site-link{font-weight:600;font-size:14.5px;color:var(--muted);text-decoration:none}
.ac-top .site-link:hover{color:var(--ink)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#6366F1,#EC4899);flex:none;font-size:15px}
.avatar.lg{width:72px;height:72px;font-size:26px}
.avatar.sm{width:32px;height:32px;font-size:12.5px}
.ac-user{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--paper);text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.ac-body{padding:clamp(18px,3vw,36px);display:grid;gap:clamp(16px,2vw,22px);align-content:start;max-width:1320px;width:100%}
.ac-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.ac-head h1{font-size:clamp(32px,3.4vw,46px);letter-spacing:-.035em}
.ac-head p{color:var(--muted);margin-top:8px;max-width:60ch}
.ac-head .acts{display:flex;gap:10px;flex-wrap:wrap}
.preview-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px clamp(16px,3vw,36px) 0;padding:10px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--brand-amber) 65%,transparent);background:color-mix(in srgb,var(--brand-amber) 7%,transparent);font-size:13.5px;color:var(--muted)}
.preview-bar b{color:var(--ink)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.2vw,26px);min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.panel-h h2{font-size:21px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.panel-h h2 .ic{width:34px;height:34px;border-radius:10px}
.panel-h h2 .ic svg{width:17px;height:17px}
.panel-h p{color:var(--muted);font-size:14.5px;width:100%;margin-top:-8px}
.g-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(16px,2vw,22px)}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.stat{display:grid;gap:8px}
.stat .mono{font-size:11.5px}
.stat b{font-family:var(--f-display);font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat b small{font-size:16px;color:var(--muted);font-weight:600}
.stat .sub{font-size:13.5px;color:var(--muted)}
.stat .sub a{color:var(--accent);text-decoration:none;font-weight:600}
.progress{height:8px;border-radius:8px;background:var(--bg);overflow:hidden}
.progress i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#6366F1,#EC4899)}
.welcome{position:relative;overflow:hidden;border-radius:26px;padding:clamp(22px,3vw,36px);background:var(--t-deep);color:var(--t-deep-ink);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.welcome::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 80% at 0% 0%,rgba(99,102,241,.55),transparent 70%),radial-gradient(35% 70% at 100% 100%,rgba(236,72,153,.4),transparent 70%)}
.welcome>*{position:relative}
.welcome h1{font-size:clamp(30px,3.2vw,44px);color:#fff}
.welcome p{color:#C9CBE0;margin-top:8px}
.welcome .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.welcome .pills span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:600}
.welcome .acts{display:flex;gap:10px;flex-wrap:wrap}
.welcome .btn-solid{background:#fff;color:#14163A}
.welcome .btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.keychip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-family:var(--f-mono);font-size:14px;letter-spacing:.04em}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .who{display:flex;align-items:center;gap:12px}
.tbl .who b{display:block}.tbl .who span{font-size:13.5px;color:var(--muted)}
.tbl-scroll{overflow-x:auto}
.st{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.ok{background:color-mix(in srgb,#22C55E 14%,transparent);color:#15803D}
.st.warn{background:color-mix(in srgb,#F59E0B 16%,transparent);color:#B45309}
.st.off{background:var(--bg);color:var(--muted)}
.st.info{background:color-mix(in srgb,#6366F1 14%,transparent);color:#4F46E5}
:root[data-theme="dark"] .st.ok{color:#4ADE80}:root[data-theme="dark"] .st.warn{color:#FBBF24}:root[data-theme="dark"] .st.info{color:#A5B4FC}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .st.ok{color:#4ADE80}:root:not([data-theme="light"]) .st.warn{color:#FBBF24}:root:not([data-theme="light"]) .st.info{color:#A5B4FC}}
.mini-btn.danger{color:#DC2626;border-color:color-mix(in srgb,#DC2626 35%,transparent)}
.mini-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--bg)}
.dev+.dev{margin-top:10px}
.dev .dico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line)}
.dev .dico svg{width:24px;height:24px}
.dev b{display:block;font-size:16px}
.dev .meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:13.5px;color:var(--muted)}
.dev .meta span{display:inline-flex;align-items:center;gap:6px}
.qa2{display:grid;gap:10px}
.qa2 a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--bg)}
.qa2 a:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.qa2 a b{display:block}.qa2 a span{font-size:13.5px;color:var(--muted)}
.qa2 a::after{content:"→";margin-left:auto;color:var(--muted)}
.steps-list{display:grid;gap:10px;counter-reset:c}
.steps-list li{list-style:none;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg);font-weight:600}
.steps-list li::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--line)}
.steps-list li.done{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.steps-list li.done::before{border-color:#22C55E;background:#22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.steps-list li a{margin-left:auto;color:var(--accent);text-decoration:none;font-size:14px}
.toggle{position:relative;width:46px;height:28px;flex:none}
.toggle input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:1;margin:0}
.toggle i{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .2s}
.toggle input:checked+i{background:var(--accent-2)}
.toggle input:checked+i::after{transform:translateX(18px)}
.toggle input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow b{display:block}.setrow span{font-size:14px;color:var(--muted)}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.seg button{padding:8px 14px;border-radius:999px;border:0;background:transparent;color:var(--muted);font:600 14px var(--f-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(13,15,34,.08)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.stepper button{width:44px;height:46px;border:0;background:transparent;color:var(--ink);font-size:20px;cursor:pointer}
.stepper button:hover{background:var(--bg)}
.stepper input{width:64px;height:46px;border:0;border-inline:1px solid var(--line);text-align:center;font:700 17px var(--f-body);background:transparent;color:var(--ink)}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:15.5px}
.sumrow.total{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;font-weight:800;font-size:19px}
.lay{display:grid;gap:14px}
.lay .thumb{border-radius:16px;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.lay .thumb .mon{width:78%}
.lay .thumb .mon.uw{width:94%}
.lay b{font-size:17px}
.lay .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.empty-state{text-align:center;padding:32px 16px;color:var(--muted)}
dialog.modal{border:0;padding:0;border-radius:24px;background:var(--paper);color:var(--ink);width:min(460px,calc(100vw - 32px));box-shadow:0 40px 100px rgba(0,0,0,.35)}
dialog.modal::backdrop{background:rgba(13,15,34,.45);backdrop-filter:blur(3px)}
dialog.modal .mb{padding:26px;display:grid;gap:12px}
dialog.modal h3{font-size:22px}
dialog.modal p{color:var(--muted)}
dialog.modal .mf{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
dialog.modal .mf .btn{border:0;cursor:pointer;font-family:var(--f-body)}
.btn-danger{background:#DC2626;color:#fff}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14.5px;transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.ticket{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ticket:last-child{border-bottom:0}
.ticket .num{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.ticket b{display:block}.ticket span{font-size:13.5px;color:var(--muted)}
.danger-zone{border-color:color-mix(in srgb,#DC2626 30%,transparent)}
.ac-foot{margin-top:auto;padding:22px clamp(16px,3vw,36px);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.ac-foot a{color:var(--muted);text-decoration:none;margin-right:14px}
.ac-foot a:hover{color:var(--ink)}
.ac-scrim{display:none}
@media (max-width:1100px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-2{grid-template-columns:1fr}}
@media (max-width:900px){
  .ac-shell{grid-template-columns:1fr}
  .ac-side{position:fixed;left:0;top:0;bottom:0;width:290px;transform:translateX(-105%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:20px 0 60px rgba(0,0,0,.2)}
  body.ac-open .ac-side{transform:none}
  body.ac-open .ac-scrim{display:block;position:fixed;inset:0;z-index:25;background:rgba(13,15,34,.4)}
  .ac-top .ac-menu{display:grid}
  .ac-top .site-link{display:none}
  .ac-user{padding:4px}
  .g-3{grid-template-columns:1fr}
}
@media (max-width:600px){.g-4{grid-template-columns:1fr 1fr}.dev{grid-template-columns:auto minmax(0,1fr)}.dev>:last-child{grid-column:1/-1}.social{grid-template-columns:1fr}.ticket{grid-template-columns:minmax(0,1fr) auto}.ticket .num{display:none}}
.aform{display:grid;gap:16px}
@media (max-width:900px){.ac-user>span:not(.avatar){display:none}.ac-user span.avatar{display:grid}}
.preview-bar{flex-wrap:nowrap;align-items:flex-start}.preview-bar svg{flex:none;margin-top:2px}.preview-bar>span{flex:1;min-width:0}

/* === Live desk card (ported from landing 2026-10-16) === */
/* live desk: the headline acted out (restart · meeting · monitor plugged in) */
.about-big .hl{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--brand-pink) 30%,transparent)) 0 88%/0% .32em no-repeat;transition:background-size .7s cubic-bezier(.16,1,.3,1),color .4s;border-radius:4px}
.about-big .hl.on{background-size:100% .32em;color:var(--ink)}
.ld{position:relative;border-radius:28px;background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 90px rgba(20,22,58,.14),0 6px 18px rgba(20,22,58,.06);padding:16px;overflow:hidden;isolation:isolate}
.ld::before{content:"";position:absolute;inset:-40% -30% auto auto;width:70%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--brand-pink) 18%,transparent),transparent 65%)}
.ld-top{display:flex;align-items:center;gap:10px;padding:2px 4px 12px}
.ld-top .dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:ldPulse 2s infinite}
@keyframes ldPulse{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ld-top .mono{font-size:11.5px}
.ld-top .sp{flex:1}
.ld-stage{position:relative;border-radius:20px;padding:22px 18px 16px;background:radial-gradient(80% 80% at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--bg);display:flex;align-items:flex-end;justify-content:center;gap:4%;min-height:240px;overflow:hidden}
.ld-stage .mon{transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),filter .6s}
.ld-stage .ld-lap{width:38%;flex:none}
.ld-stage .ld-mon{width:56%;flex:none}
.ld-stage .ld-mon.off{opacity:.28;transform:translateY(14px) scale(.96);filter:grayscale(1)}
.ld-stage .scr::after{content:attr(data-msg);position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#05060D;color:#8A8FB5;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .45s}
.ld-stage .scr.dark::after{opacity:1}
.ldw{position:absolute;z-index:4;transition:left .9s cubic-bezier(.16,1,.3,1),top .9s cubic-bezier(.16,1,.3,1),width .9s cubic-bezier(.16,1,.3,1),height .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.ldw.gone{opacity:0;transform:scale(.82)}
.ldw .t b{font-size:9.5px}
.ldw.zoomw .zgrid{position:absolute;inset:26% 6% 7%;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.ldw.zoomw .zgrid i{border-radius:3px;background:#1E2140;position:relative}
.ldw.zoomw .zgrid i::after{content:"";position:absolute;left:50%;top:44%;width:26%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--c)}
.ld-toast{position:absolute;left:50%;top:10px;z-index:20;transform:translate(-50%,-220%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ld-toast.show{transform:translate(-50%,0)}
.ld-toast i{width:8px;height:8px;border-radius:50%;background:var(--accent-2)}
.ld-events{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.ld-ev{position:relative;overflow:hidden;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--f-body);transition:background .3s,border-color .3s}
.ld-ev:hover{background:var(--bg)}
.ld-ev.on{background:var(--bg);border-color:var(--line)}
.ld-ev .ei{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.ld-ev .ei svg{width:18px;height:18px}
.ld-ev b{display:block;font-size:15px}
.ld-ev small{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-ev .st2{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);opacity:0;transition:opacity .3s}
.ld-ev.on .st2{opacity:1;color:var(--accent-2)}
.ld-ev .bar2{position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--brand-pink));transform:scaleX(0);transform-origin:left}
.ld-ev.on .bar2{animation:ldBar var(--dur,5.2s) linear forwards}
.ld.paused .ld-ev.on .bar2{animation-play-state:paused}
@keyframes ldBar{to{transform:scaleX(1)}}
.ld-cap{margin-top:14px;font-size:15px;color:var(--muted);max-width:52ch}
@media (prefers-reduced-motion:reduce){.ldw,.ld-stage .mon,.ld-toast{transition:none}.ld-ev.on .bar2{animation:none}.ld-top .dot{animation:none}}

/* === Features hero: framed, taller animated banner (2026-10-16) === */
.phvz-live,.phvz-ai,.phvz-teams{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  min-height:clamp(320px,33vw,440px);padding:clamp(20px,2.6vw,36px);border-radius:28px;
  background:radial-gradient(85% 85% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--paper);
  border:1px solid var(--line);box-shadow:0 40px 90px rgba(20,22,58,.14),0 6px 18px rgba(20,22,58,.06);overflow:hidden}
.phvz-live::before,.phvz-ai::before,.phvz-teams::before{content:"";position:absolute;inset:-32% -22% auto auto;width:62%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-pink) 16%,transparent),transparent 65%)}
.phvz-live .mon,.phvz-ai .mon{width:min(100%,500px)}
.phvz-cap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:999px;background:var(--ink);color:var(--bg);font-family:var(--f-mono);font-size:12px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:opacity .35s}
.phvz-cap i{width:8px;height:8px;border-radius:50%;background:var(--accent-2);animation:phvzPulse 2s infinite}
@keyframes phvzPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* === "Six groups at a glance" panel (features about section) === */
.grp-list{display:grid;gap:8px}
.grp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 15px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s,border-color .3s,box-shadow .3s}
.grp-row:hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 10px 26px rgba(20,22,58,.08)}
.grp-row .gd{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none}
.grp-row b{font-size:15px;font-weight:700;line-height:1.2}
.grp-row .gn{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.grp-row:hover .gn{color:var(--c)}
/* reveal: .rv base supplies opacity/transform; these rows carry inline transition-delay for the cascade */
@media (prefers-reduced-motion:reduce){.phvz-cap i{animation:none}}

/* Features group visuals: allow the animated windows to fade in/out. */
.fg-viz .w{transition:left .9s cubic-bezier(.16,1,.3,1),top .9s cubic-bezier(.16,1,.3,1),width .9s cubic-bezier(.16,1,.3,1),height .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),opacity .5s ease}

/* === Auth side-panel animated visual (register / login / reset / invite) ===
   One clean floating screen whose windows rearrange on a loop (driver in
   reveal-plus.js, .authviz). Replaces the old static/bulky trio + tidy mockups
   with a sleek, frameless display that reads as professional and explains the
   product while people sign up. Lives on the dark .auth-r panel only. */
.auth-r .authviz{display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;
  /* break out of the panel's side padding so the screen can use the full width */
  --bo:clamp(16px,3vw,44px);margin-inline:calc(-1 * var(--bo));width:calc(100% + 2 * var(--bo))}
/* Big screen: fills the horizontal space for a bolder window movement, but
   capped by viewport height (16:10 ⇒ height ≈ 0.625·width) so the taller screen
   never pushes the heading or the checklist out of view on shorter displays. */
.auth-r .authviz .mon{width:min(100% - 40px,820px,70vh)}
/* Frameless floating display — drop the stand/deck so it reads sleek, not bulky. */
.auth-r .authviz .mon .neck,
.auth-r .authviz .mon .foot,
.auth-r .authviz .mon .deck{display:none}
.auth-r .authviz .mon .bz{background:#0a0a0f;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.4)}
/* Soft glow pooled under the screen for depth. */
.auth-r .authviz::after{content:"";position:absolute;left:50%;top:38%;width:72%;height:48%;transform:translateX(-50%);
  z-index:-1;border-radius:50%;filter:blur(46px);
  background:radial-gradient(circle,rgba(99,102,241,.4),rgba(236,72,153,.18) 55%,transparent 72%)}
.authcap{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 12px 30px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .35s}
.authcap i{width:8px;height:8px;border-radius:50%;background:var(--accent-2,#EC4899);animation:phvzPulse 2s infinite}
@media (prefers-reduced-motion:reduce){.authcap i{animation:none}}

/* === Home "One layout for the whole team" (#teams) + "Your desk stays yours"
   (.split with .vizwrap): bigger devices, much slimmer bezels, and more width
   given to the device column. Desk monitor is animated by reveal-plus.js. === */
#teams .duo{gap:clamp(8px,1.2vw,18px)}
/* each laptop sits in a wrapper with an inline max-width:340px — lift it so the
   laptops can actually grow to fill the wider column */
#teams .duo>*{max-width:560px !important}
#teams .duo .mon{max-width:560px}
#teams .mon .bz{padding:clamp(2px,.3vw,4.5px)}
.vizwrap{width:min(100%,600px);max-width:600px}
.vizwrap .mon{max-width:100%}
.vizwrap .mon .bz{padding:clamp(2px,.3vw,4.5px)}
@media (min-width:761px){
  /* give the two laptops much more of the row so they read ~25-50% bigger */
  #teams{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(16px,3vw,44px)}
  .split:has(.vizwrap){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
}

/* Live desk card ("What PinLayout is"): the little laptop + monitor carried the
   full 12px black bezel, which looked like slabs at this size. Slim the bezels
   (and radii) to match the rest of the site, and nudge the devices a bit
   bigger within the stage. */
#liveDesk .mon .bz{padding:clamp(2px,.3vw,4px);border-radius:clamp(7px,1vw,12px)}
#liveDesk .mon.lap .bz{border-radius:10px 10px 3px 3px}
#liveDesk .ld-stage{gap:3%}
#liveDesk .ld-stage .ld-lap{width:40%}
#liveDesk .ld-stage .ld-mon{width:57%}

/* CLS fix: a metric-matched fallback for the hero/headings. Arial scaled to
   Urbanist's advance width (measured 96.8%) so text wraps identically before
   Urbanist loads — eliminates the font-swap layout shift on the big hero
   heading. Line-height is ratio-based, so width (size-adjust) is all that
   matters for CLS. */
@font-face{font-family:'Urbanist Fallback';src:local('Arial'),local('Arimo'),local('Liberation Sans');size-adjust:96.8%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

/* Mobile hero: keep the rotating-logo watermark from covering the headline.
   Below the stacked breakpoint, fade it and anchor it low (behind the device)
   so the first thing read is never obscured. */
@media (max-width:760px){
  /* On phones the hero stacks and the watermark lands on the headline; hide it
     there (desktop keeps the rotating-logo background). */
  .hero-wm{display:none}
}

/* === Micro-interactions & polish (awards P2) === */
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
/* springy press/lift on buttons */
.btn{transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease}
.btn:active{transform:translateY(0) scale(.97)}
.btn-solid:hover{box-shadow:0 10px 24px color-mix(in srgb,var(--ink) 20%,transparent)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none}}
/* high-contrast / forced-colors: keep focus and button edges visible */
@media (forced-colors:active){
  :focus-visible{outline:2px solid CanvasText;outline-offset:3px}
  .btn{border:1px solid CanvasText}
}

/* === Exit-intent popup (free-trial offer) === */
.exitpop{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:20px;
  background:rgba(10,11,24,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.exitpop.show{display:grid}
.exitpop .ep-card{position:relative;width:100%;max-width:520px;background:var(--paper);border:1px solid var(--line);
  border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(10,11,24,.5);animation:epIn .4s cubic-bezier(.16,1,.3,1)}
.ep-head{position:relative;padding:30px 32px 24px;background:var(--stage);color:#fff;overflow:hidden}
.ep-head::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 12% 0%,rgba(99,102,241,.5),transparent 70%),radial-gradient(60% 90% at 100% 100%,rgba(236,72,153,.35),transparent 70%)}
.ep-head>*{position:relative}
.ep-eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#A5A8D6}
.ep-head h3{font-size:clamp(23px,3.4vw,29px);font-weight:900;letter-spacing:-.01em;line-height:1.1;margin:11px 0 0;color:#fff}
.ep-head p{margin:11px 0 0;color:#C9CBE0;font-size:15.5px;line-height:1.5}
.ep-body{padding:24px 32px 30px}
.ep-checks{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:13px}
.ep-checks li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:15.5px;color:var(--ink);line-height:1.45}
.ep-checks li svg{width:22px;height:22px;color:var(--accent);margin-top:1px;flex:none}
.ep-cta{display:flex;flex-direction:column;gap:12px;align-items:center}
.ep-dismiss{background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ep-dismiss:hover{color:var(--ink)}
.ep-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:20px;line-height:1}
.ep-close:hover{background:rgba(255,255,255,.26)}
@keyframes epIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.exitpop .ep-card{animation:none}}

/* === Support chat widget === */
.chat-fab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:900;
  display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 17px;border:0;border-radius:999px;cursor:pointer;
  background:var(--ink);color:var(--bg);font-family:var(--f-body);font-weight:700;font-size:15px;
  box-shadow:0 14px 36px rgba(20,22,58,.32);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab svg{width:22px;height:22px}
.chat-fab.hide{display:none}
@media (max-width:520px){.chat-fab .lbl{display:none}.chat-fab{padding:0;width:56px;justify-content:center;gap:0}}

.chat-panel{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:901;
  width:min(380px,calc(100vw - 32px));height:min(600px,calc(100vh - 36px));display:none;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(20,22,58,.4);
  animation:cpIn .32s cubic-bezier(.16,1,.3,1)}
.chat-panel.open{display:flex}
@keyframes cpIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chat-panel{animation:none}}

.cp-head{position:relative;display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--stage);color:#fff;overflow:hidden;flex:none}
.cp-head::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 10% 0%,rgba(99,102,241,.5),transparent 70%),radial-gradient(70% 120% at 100% 100%,rgba(236,72,153,.3),transparent 70%)}
.cp-head>*{position:relative}
.cp-av{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none;padding:7px}
.cp-av svg{width:100%;height:100%}
.cp-ti b{display:block;font-weight:800;font-size:15px;line-height:1.2}
.cp-ti span{font-size:12px;color:#A5A8D6;display:flex;align-items:center;gap:6px;margin-top:2px}
.cp-ti span i{width:7px;height:7px;border-radius:50%;background:#34D399;display:inline-block}
.cp-x{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:19px;line-height:1}
.cp-x:hover{background:rgba(255,255,255,.26)}

.cp-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.cp-msg{max-width:85%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cp-msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.cp-msg.me{align-self:flex-end;background:var(--ink);color:var(--bg);border-bottom-right-radius:5px}
.cp-msg a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cp-msg.me a{color:#fff}
.cp-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:14px 15px;background:var(--paper);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px}
.cp-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:cpDot 1.2s infinite}
.cp-typing i:nth-child(2){animation-delay:.18s}.cp-typing i:nth-child(3){animation-delay:.36s}
@keyframes cpDot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cp-chip{font-family:var(--f-body);font-size:13px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-align:left}
.cp-chip:hover{border-color:var(--accent);color:var(--accent)}

.cp-input{flex:none;display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.cp-input textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:11px 13px;font-family:var(--f-body);font-size:14.5px;background:var(--bg);color:var(--ink);max-height:120px;min-width:0;line-height:1.4}
.cp-input textarea:focus{outline:none;border-color:var(--accent)}
.cp-send{width:42px;height:42px;flex:none;border:0;border-radius:12px;background:var(--ink);color:var(--bg);cursor:pointer;display:grid;place-items:center}
.cp-send:disabled{opacity:.4;cursor:default}
.cp-send svg{width:20px;height:20px}

.cp-esc{flex:none;padding:14px 16px;border-top:1px solid var(--line);background:var(--paper);display:none;flex-direction:column;gap:9px}
.cp-esc.show{display:flex}
.cp-esc p{margin:0;font-size:13px;color:var(--muted)}
.cp-esc input,.cp-esc textarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-family:var(--f-body);font-size:14px;background:var(--bg);color:var(--ink);width:100%}
.cp-esc input:focus,.cp-esc textarea:focus{outline:none;border-color:var(--accent)}
.cp-esc textarea{resize:vertical;min-height:62px}
.cp-esc .ok{font-size:14px;color:var(--ink);font-weight:600;margin:0}

/* founder — photo portrait fill + hover zoom + glass caption */
.f-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.f-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,15,34,.55));pointer-events:none}
.founder:hover .f-portrait img{transform:scale(1)}
.f-chip{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:rgba(13,15,34,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em}
.f-chip i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.25)}

/* changelog — per-platform tabs (Mac / Windows) */
.cl-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--paper);border:1px solid var(--line);margin-bottom:clamp(26px,3.4vw,44px)}
.cl-tab{appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;font-size:15px;color:var(--muted);padding:9px 22px;border-radius:999px;transition:background .2s,color .2s}
.cl-tab:hover{color:var(--ink)}
.cl-tab.is-on{background:var(--ink);color:var(--paper)}
.rel.cl-hide{display:none}

/* pricing — annual-vs-monthly savings pill */
.save{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 12px;border-radius:999px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;background:color-mix(in srgb,var(--accent-2) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent-2) 32%,transparent);color:var(--accent-2)}
.save::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none}
.save.alt{background:transparent;border-color:transparent;color:var(--muted);padding-left:0}
.save.alt::before{background:var(--accent-2)}