/* Dottpace landing — Home. Structure after Linear (near-black canvas, hairline sections, left display headings with a grey continuation,
   two-column section heads, product composites that fade at the edges, FIG micro-labels); identity is Dottpace's own: Geist, the app's
   colour tokens (tokens.css), Lucide icons, the dP mark (Dottpace-Identity v1.0, one flat colour), the app's radius roles and motion set. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text-1);font:400 var(--t-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
table{border-collapse:collapse}
::selection{background:var(--sel);color:var(--text-1)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}
html{scrollbar-color:var(--scroll) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--scroll);border:3px solid var(--bg);border-radius:12px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
::-webkit-scrollbar-track{background:transparent}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-12{width:12px;height:12px}
.bl{width:16px;height:16px;flex:none;fill:currentColor}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-48px;z-index:100;padding:10px 14px;border-radius:var(--r-ctl);background:var(--inv);color:var(--inv-fg);font-size:14px;font-weight:500;transition:top var(--dur-2) var(--ease-out)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.dim{color:var(--text-dim)}
.todo{background:var(--warn-bg);color:var(--warn);border-radius:4px;padding:0 6px;font-weight:500}
q{quotes:"“" "”"}
q::before{content:none}q::after{content:none}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-ctl);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;letter-spacing:-.005em;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),scale var(--dur-1) var(--ease-out)}
.btn:active{scale:.98}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-pri{background:var(--inv);color:var(--inv-fg)}
.btn-pri:hover{background:var(--inv-h)}
.btn-sec{background:var(--surface);color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.btn-sec:hover{box-shadow:inset 0 0 0 1px var(--line-ctl-h)}
.btn .ic{transition:translate var(--dur-2) var(--ease-out)}
.btn:hover .ic{translate:2px 0}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-ctl);color:var(--text-2);transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.icon-btn:hover{background:var(--hover);color:var(--text-1)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--text-2);transition:color var(--dur-1) var(--ease-out)}
.link-arrow .ic{width:15px;height:15px;transition:translate var(--dur-2) var(--ease-out)}
.link-arrow:hover{color:var(--text-1)}
.link-arrow:hover .ic{translate:3px 0}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-full);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;background:var(--gray-bg);color:var(--gray-fg)}
.chip-neg{background:var(--neg-bg);color:var(--neg)}
.chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-sample{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* theme flip: a moon in light (to go dark), a sun in dark */
.ic-sun{display:none}
:root[data-theme="dark"] .ic-sun{display:block}
:root[data-theme="dark"] .ic-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ic-sun{display:block}
  :root:not([data-theme="light"]) .ic-moon{display:none}
}

/* ---------- nav (Linear's arrangement: logo left; links, a hairline divider, Log in and a Sign up pill on the right) ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--glass);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);border-bottom:1px solid var(--line)}
.nav-in{position:relative;display:flex;align-items:center;gap:2px;height:64px}
.logo{flex:none;display:inline-flex;align-items:center;color:var(--logo);border-radius:6px;margin-right:auto}
/* the horizontal lockup (viewBox 2137.77 × 386.5), sized by the MARK's height (--logo-h), as the identity's Web Kit does: the box is the mark's box
   and the p's descender hangs below it, so the logo centres on the mark. One flat colour (--logo). Minimum: 96 px wide. */
.logo-svg{--logo-h:20px;flex:none;max-width:none;height:calc(var(--logo-h) * 1.07361);width:calc(var(--logo-h) * 5.93825);margin-bottom:calc(var(--logo-h) * -.07361);color:var(--logo);overflow:visible}
/* the header mark's first-load build — Dottpace-Identity 05-Motion "Intro — mark only" (1.2 s): the d rises, the P falls a step higher, they meet on
   one stem, the lower dot opens, then the higher one. Only on the first page of a visit with motion allowed (html.dp-intro, set in <head>); it stays
   inside the mark's own box (no layout shift), the name never moves, and at rest — or with reduced motion — it is the still mark. */
.logo-svg .dpi-g{display:none}
.dp-intro .logo-svg .dpi-g{display:inline}
.dp-intro .dpi .dpi-d{animation:dpi-rise .72s cubic-bezier(.16,1,.3,1) 0s both}
.dp-intro .dpi .dpi-p{animation:dpi-fall .72s cubic-bezier(.16,1,.3,1) .08s both}
.dp-intro .dpi .dpi-pc{animation:dpi-off 1ms linear .8s both}
.dp-intro .dpi .dpi-un{animation:dpi-on 1ms linear .8s both}
.dp-intro .dpi .dpi-g{animation:dpi-off 1ms linear 1.2s both}
.dp-intro .dpi .dpi-f{animation:dpi-on 1ms linear 1.2s both}
.dpi .dpi-h1,.dpi .dpi-h2{transform-box:fill-box;transform-origin:50% 50%}
.dp-intro .dpi .dpi-h1{animation:dpi-open .46s cubic-bezier(.3,1.2,.5,1) .6s both}
.dp-intro .dpi .dpi-h2{animation:dpi-open .46s cubic-bezier(.3,1.2,.5,1) .74s both}
@keyframes dpi-rise{from{transform:translateY(190px)}to{transform:none}}
@keyframes dpi-fall{from{transform:translateY(-190px)}to{transform:none}}
@keyframes dpi-on{from{opacity:0}to{opacity:1}}
@keyframes dpi-off{from{opacity:1}to{opacity:0}}
@keyframes dpi-open{from{transform:scale(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.dpi *{animation:none!important}.dp-intro .logo-svg .dpi-g{display:none}}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-link{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-ctl);font-size:14px;font-weight:450;color:var(--text-2);white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.nav-link:hover,.nav-dd.open>.nav-btn{color:var(--text-1);background:var(--hover)}
.nav-div{width:1px;height:16px;margin:0 10px;background:var(--line-strong)}
.pill{display:inline-flex;align-items:center;height:32px;margin-left:8px;padding:0 15px;border-radius:var(--r-full);background:var(--inv);color:var(--inv-fg);font-size:13.5px;font-weight:500;white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out),scale var(--dur-1) var(--ease-out)}
.pill:hover{background:var(--inv-h)}
.pill:active{scale:.98}
.dd{position:absolute;top:100%;right:var(--gutter);display:none;padding-top:6px;z-index:60}
.nav-dd.open>.dd{display:block}
.dd-card{padding:8px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong);animation:dd-in var(--dur-3) var(--ease-out)}
@keyframes dd-in{from{opacity:0;translate:0 -6px;scale:.99}}
.dd-wide .dd-card{width:860px}
.dd-mid .dd-card{width:600px}
.mm{display:grid;gap:4px}
.mm-3{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)}
.mm-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mm-col{padding:4px}
.mm-h{padding:6px 10px 6px;font-size:12px;font-weight:500;color:var(--text-3)}
.mm-item{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:10px;transition:background-color var(--dur-1) var(--ease-out)}
.mm-item:hover{background:var(--hover)}
.mm-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2);transition:color var(--dur-1) var(--ease-out)}
.mm-ic .ic{width:15px;height:15px}
.mm-item:hover .mm-ic{color:var(--text-1)}
.mm-t b{display:block;font-size:14px;font-weight:500;line-height:1.3;color:var(--text-1)}
.mm-t small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--text-3)}
.mm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:6px 4px 0;padding:12px 10px 6px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}
.mm-foot .link-arrow{font-size:13px}
.nav-burger{display:none;margin-left:4px}
.nav-burger .ic-x{display:none}
.nav-burger[aria-expanded="true"] .ic-x{display:block}
.nav-burger[aria-expanded="true"] .ic-menu{display:none}
.mnav{border-top:1px solid var(--line);background:var(--bg);max-height:calc(100dvh - 64px);overflow-y:auto}
.mnav .wrap{display:flex;flex-direction:column;padding-block:8px 28px}
.mnav-h{margin-top:20px;margin-bottom:4px;font-size:12px;font-weight:500;color:var(--text-3)}
.mnav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.mnav-grid a{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:15px;font-weight:500;color:var(--text-1)}
.mnav-grid .ic{color:var(--text-3)}
.mnav-links{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--line)}
.mnav-links a{padding:12px 0;font-size:17px;font-weight:500;color:var(--text-1);border-bottom:1px solid var(--line)}
.mnav-cta{display:flex;gap:10px;margin-top:20px}
.mnav-cta .btn{flex:1;height:44px}

/* ---------- type ---------- */
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--text-2);letter-spacing:-.006em;text-wrap:pretty}
.h2{font-size:var(--t-h2);font-weight:600;line-height:1.06;letter-spacing:-.032em;text-wrap:balance}
.h3{font-size:var(--t-h3);font-weight:600;line-height:1.1;letter-spacing:-.028em}
.h3 .dim{display:block}
.statement{font-size:var(--t-statement);font-weight:560;line-height:1.2;letter-spacing:-.024em;max-width:30em;text-wrap:pretty}
.statement b{font-weight:inherit;color:var(--text-1)}
.statement span{color:var(--text-dim)}
.fig-label{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
.blk-h{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-1);margin-bottom:16px}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:start}
.sec-head-r{padding-top:6px;max-width:34em}
.sec-head-r .link-arrow{margin-top:24px}
.sec-head.sec-head-stack{display:flex;flex-direction:column;align-items:flex-start;gap:12px}   /* title, lead under it, then the link (Oct 16: every section stacks its lead) */
.sec-head-stack .lead{max-width:60ch}
.sec-head-stack .link-arrow{margin-top:8px}

/* ---------- product screenshots ---------- */
.shot{position:relative;overflow:hidden;border-radius:14px;background:var(--surface);box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--shot-edge)}
.shot picture,.shot img{width:100%;height:auto}
.shot img{position:relative;z-index:0}
.shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--shot-edge);pointer-events:none;z-index:1}
.fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 99%);mask-image:linear-gradient(to bottom,#000 60%,transparent 99%)}
.fig-cap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fig-text{font-size:13px;line-height:1.5;color:var(--text-3);flex:1 1 20em;min-width:0}
.fig-cap .chip-sample{margin-left:auto;align-self:center}

/* ---------- 1 hero ---------- */
.hero{padding-top:clamp(40px,5vw,72px);overflow:hidden}
.hero-h{font-size:var(--t-display);font-weight:600;line-height:1.08;letter-spacing:-.032em;text-wrap:balance}
.hero-sub{margin-top:20px;max-width:36em;color:var(--text-3)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 36px;margin-top:36px}
.hero-demo{height:52px}
.hero-fig{margin-top:clamp(48px,5vw,72px)}
.hero-stage{position:relative}
.shot-hero{-webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 97%);mask-image:linear-gradient(to bottom,#000 52%,transparent 97%)}
.hero-fig .fig-cap{position:relative;margin-top:-56px}
@media (min-width:760px){.hl-3{display:block}}
/* the loop, assembled over the page record — authored from the record's own numbers */
.hs-cards{position:absolute;top:3.5%;right:2.5%;z-index:2;display:flex;flex-direction:column;gap:8px;width:min(372px,34%)}
.hs-card{padding:11px 14px;border-radius:14px;background:var(--surface);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line-strong)}
.hs-k{display:flex;align-items:center;gap:6px;font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-4)}
.hs-k .ic{width:13px;height:13px}
.hs-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;font-size:14px;line-height:1.3}
.hs-line b{font-weight:600}
.hs-tag{padding:2px 7px;border-radius:6px;font-size:12px;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.hs-cause,.hs-delta{margin-left:auto}
.hs-m{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--text-3)}
.hs-num b{font-size:20px;letter-spacing:-.015em}
.hs-num .hs-was{font-size:15px;color:var(--text-3)}
.hs-num .ic{width:14px;height:14px;color:var(--text-3)}
.hs-svg{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.hs-grid{fill:none;stroke:var(--grid);stroke-width:1}
.hs-mark{fill:none;stroke:var(--text-4);stroke-width:1;stroke-dasharray:3 4}
.hs-path{fill:none;stroke:var(--c1);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.hs-tx{font:500 9.5px var(--mono);letter-spacing:.05em;fill:var(--text-4)}
.hs-exp{font-size:13px;color:var(--text-3)}
.chip-pos{background:var(--pos-bg);color:var(--pos)}

/* audit form (hero, audit band, final) */
.audit-form{width:min(100%,520px)}
.audit-field{display:flex;align-items:center;height:52px;padding:5px 5px 5px 14px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--field-line);transition:box-shadow var(--dur-1) var(--ease-out)}
.audit-field:hover{box-shadow:inset 0 0 0 1px var(--field-line-h)}
.audit-field:focus-within{box-shadow:inset 0 0 0 2px var(--ring),0 0 0 3px var(--sel)}
.audit-field.is-bad{box-shadow:inset 0 0 0 1px var(--neg)}
.audit-ic{width:18px;height:18px;color:var(--text-3);margin-right:10px}
.audit-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:16px;color:var(--text-1);caret-color:var(--ring)}
.audit-field input::placeholder{color:var(--text-4);opacity:1}
.audit-field .btn{height:42px;border-radius:7px}
.audit-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-3)}
.audit-err{margin-top:10px;font-size:13px;font-weight:500;color:var(--neg)}

/* ---------- 2 how it works ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(64px,8vw,112px)}
.pillar{display:flex;flex-direction:column;padding:0 32px;border-left:1px solid var(--line)}
.pillar:first-child{padding-left:0;border-left:0}
.pillar:last-child{padding-right:0}
.fig-art{width:100%;max-width:300px;height:auto;margin:36px auto 44px;color:var(--text-3);overflow:visible}
.fa-line{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.fa-faint{opacity:.42}
.fa-grid{stroke-dasharray:2 5;opacity:.32}
.fa-dash{stroke-dasharray:3 4;opacity:.75}
.fa-hi{stroke:var(--text-1)}
polyline.fa-hi{stroke-width:1.75}
.fa-band{fill:var(--fill-2);stroke:none}
.fa-dot{fill:var(--text-1)}
.fig-art text{font:500 9.5px var(--mono);letter-spacing:.06em;fill:currentColor;stroke:none}
.fig-art .fa-hi-t{fill:var(--text-1)}
.fa-chips rect{fill:none;stroke:currentColor;stroke-width:1.1}
.fa-chips rect.fa-hi{stroke:var(--text-1)}
.pillar-h{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.pillar-p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--text-3);max-width:34ch}

.walk{margin-top:var(--sec-y)}
.facts{margin:24px 0 22px;border-top:1px solid var(--line)}
.facts li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--text-2)}
.facts .ic{margin-top:1px;color:var(--text-3)}
.facts q{color:var(--text-1)}
@keyframes text-in{from{opacity:0}}

/* ---------- 3 platform ---------- */
.cap{margin-top:clamp(88px,10vw,144px)}
.cap-stage{position:relative;margin-top:56px}
.shot-cap{width:86%;-webkit-mask-image:linear-gradient(to right,#000 70%,transparent),linear-gradient(to bottom,#000 62%,transparent 98%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 70%,transparent),linear-gradient(to bottom,#000 62%,transparent 98%);mask-composite:intersect}
.cap-stage-r .shot-cap{margin-left:auto}
.shot-cap.shot-wide{width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 98%);mask-image:linear-gradient(to bottom,#000 58%,transparent 98%)}
.ai-strip{position:absolute;right:0;top:18%;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:var(--r-card);background:var(--glass);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);box-shadow:var(--pop-shadow),inset 0 0 0 1px var(--line)}
.ai-strip li{display:flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 8px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap}
.ai-strip img{width:22px;height:22px;padding:3px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.feat-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 64px;margin-top:56px}
.feat-k{font-size:14px;color:var(--text-3);padding-top:2px}
.feat-list{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:12px 40px}
.feat-list a{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2);transition:color var(--dur-1) var(--ease-out)}
.feat-list a:hover{color:var(--text-1)}
.feat-list .ic{color:var(--text-3)}
.feat-note{grid-column:2;font-size:13px;line-height:1.55;color:var(--text-3);max-width:46ch}

.int-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:56px;align-items:start}
.int-shot .fig-cap{margin-top:14px}
.shot-learn{border-radius:14px}
.int-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;font-weight:500;color:var(--text-2)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot-pos{background:var(--pos)}.dot-warn{background:var(--warn)}.dot-gray{background:var(--text-4)}
.logos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.logos li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 9px;border-radius:var(--r-8);font-size:13px;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.logos .bl{color:var(--text-1)}
.logos-planned li{color:var(--text-3);box-shadow:none;outline:1px dashed var(--line-strong);outline-offset:-1px}
.logos-planned .bl{color:var(--text-3)}

/* ---------- 4 built for your site ---------- */
.types{margin-top:56px}
.types-list{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.types-list::-webkit-scrollbar{display:none}
.type-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:15px;font-weight:500;color:var(--text-3);white-space:nowrap;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.type-tab:first-child{padding-left:0}
.type-tab:hover{color:var(--text-2)}
.type-tab[aria-selected="true"]{color:var(--text-1);border-bottom-color:var(--text-1)}
.type-tab:focus-visible{outline-offset:-2px}
.type-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;padding-top:40px;align-items:start}
.js .type-panel+.type-panel{margin-top:0}
.type-panel[hidden]{display:none}
.type-panel.is-in{animation:text-in 360ms var(--ease-out) both}
.type-out{font-size:clamp(22px,1.2rem + 1vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.022em;text-wrap:balance}
.type-con{display:flex;flex-wrap:wrap;gap:8px}
.type-con span{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 9px;border-radius:var(--r-8);font-size:13px;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.finding-row{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--r-12);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.finding-row .chip{margin-top:1px}
.finding-t{font-size:15px;font-weight:500;line-height:1.4;color:var(--text-1)}
.finding-m{margin-top:4px;font-size:13px;color:var(--text-3)}
.type-panel .btn{justify-self:start}


/* ---------- 5 audit ---------- */
.sec-audit{background:var(--bg-band)}
.audit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.audit-l .lead{margin:22px 0 32px;max-width:32em}
.levels{margin-top:56px}
.lv-list{border-top:1px solid var(--line)}
.lv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.lv dt b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.lv dt span{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.lv dd{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.report{border-radius:var(--r-card);background:var(--surface);overflow:hidden;box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--line-strong)}
.report-banner{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--info-bg);color:var(--info);font-size:13px;font-weight:500}
.report-in{padding:22px 24px 20px}
.report-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.report-site{display:flex;align-items:baseline;gap:10px}
.report-site b{font-size:18px;font-weight:600;letter-spacing:-.015em}
.report-site span{font-size:13px;color:var(--text-3)}
.report-type{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.report-sum{margin:14px 0 20px;font-size:15px;line-height:1.55;color:var(--text-2)}
.report-sum b{color:var(--text-1);font-weight:600}
.report-areas{width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.report-areas thead th{padding:0 0 8px;font-size:12px;font-weight:500;color:var(--text-4);text-align:right}
.report-areas thead th:first-child{text-align:left}
.report-areas tbody th{padding:9px 0;font-weight:400;color:var(--text-2);text-align:left;border-top:1px solid var(--line)}
.report-areas td{width:72px;padding:9px 0;text-align:right;color:var(--text-3);border-top:1px solid var(--line)}
.n-hi{color:var(--neg);font-weight:600}
.report-issue{margin-top:20px;padding:16px 16px 8px;border-radius:var(--r-12);background:var(--surface-2)}
.ri-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;line-height:1.35}
.ri-head b{font-weight:600}
.ri-dl{margin-top:10px}
.ri-dl>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.ri-dl dt{font-size:13px;color:var(--text-3)}
.ri-dl dd{font-size:14px;line-height:1.5;color:var(--text-2)}
.ri-dl code{display:block;padding:8px 10px;border-radius:var(--r-8);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:400 12.5px/1.65 var(--mono);color:var(--text-1);white-space:normal;overflow-wrap:anywhere}
.report-more{margin-top:16px}
.report-more li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;color:var(--text-2)}
.rm-m{flex:none;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.report-cant{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--text-3)}
.report-cant .ic{margin-top:2px}

/* ---------- 6 trust ---------- */
.access{margin-top:64px}
.table-wrap{overflow-x:auto;border-radius:4px}
.access-t{width:100%;min-width:640px;font-size:15px;line-height:1.5}
.access-t thead th{padding:0 24px 12px 0;font-size:13px;font-weight:500;color:var(--text-3);text-align:left;border-bottom:1px solid var(--line-strong)}
.access-t tbody th{padding:16px 24px 16px 0;font-weight:500;text-align:left;white-space:nowrap;vertical-align:top;border-bottom:1px solid var(--line)}
.access-t tbody th .bl{display:inline-block;width:17px;height:17px;margin-right:10px;vertical-align:-3px}
.access-t td{padding:16px 24px 16px 0;color:var(--text-2);vertical-align:top;border-bottom:1px solid var(--line)}
.access-t td:last-child{padding-right:0}
.access-t .ac-none{color:var(--text-3)}
.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px;margin-top:80px;padding-top:48px;border-top:1px solid var(--line)}
.trust-blk .link-arrow{margin-top:24px}
.measure{counter-reset:m}
.measure li{counter-increment:m;position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--text-2)}
.measure li::before{content:counter(m);position:absolute;left:0;top:14px;font:500 12px/1.4 var(--mono);color:var(--text-4)}
.limits li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--text-2)}
.limits li::before{content:"";position:absolute;left:2px;top:24px;width:8px;height:1px;background:var(--text-3)}
.founder{margin-top:96px;padding-top:56px;border-top:1px solid var(--line);max-width:900px}
.founder-q p{font-size:clamp(22px,1.1rem + 1.1vw,32px);font-weight:500;line-height:1.35;letter-spacing:-.018em;text-wrap:pretty}
.founder-by{display:flex;align-items:center;gap:14px;margin-top:28px}
.founder-photo{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--text-4);outline:1px dashed var(--line-strong);outline-offset:-1px}
.founder-photo .ic{width:20px;height:20px}
.founder-who b{display:inline-block;font-size:15px;font-weight:600}
.founder-who small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.founder-who a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.price-sub a,.faq a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent-text) 40%,transparent)}
.founder-who a:hover,.price-sub a:hover,.faq a:hover{text-decoration-color:currentColor}

/* ---------- 7 pricing, FAQ, final ---------- */
.price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px}
.price-l{font-size:var(--t-h2);font-weight:600;line-height:1.08;letter-spacing:-.032em;text-wrap:balance}
.price-a{font-size:17px}
.price-sub{margin-top:18px;font-size:15px;line-height:1.55;color:var(--text-3);max-width:46em}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px 64px;margin-top:clamp(80px,10vw,136px);padding-top:56px;border-top:1px solid var(--line)}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:500;letter-spacing:-.01em;cursor:pointer;list-style:none;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:18px;height:18px;color:var(--text-3);transition:rotate var(--dur-3) var(--ease-out)}
.faq details[open] summary .ic{rotate:45deg}
.faq summary:hover .ic{color:var(--text-1)}
.faq details p{padding:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--text-2);max-width:62ch}
.final{margin-top:var(--sec-y);border-top:1px solid var(--line);background:radial-gradient(60% 90% at 50% 100%,var(--fill-1),transparent 70%)}
.final-in{display:flex;flex-direction:column;align-items:center;padding-block:clamp(96px,12vw,168px) clamp(88px,10vw,144px);text-align:center}
.final-h{font-size:calc(var(--t-h2) * 1.08);font-weight:600;line-height:1.06;letter-spacing:-.034em;max-width:16em;text-wrap:balance}
.final-actions{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;margin-top:44px}
.final .audit-form{text-align:left}
.sec-close{padding-bottom:0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:64px 0 32px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));gap:40px 32px}
.foot-brand .logo-svg{--logo-h:18px}
.foot-tag{margin-top:16px;font-size:13px;line-height:1.55;color:var(--text-3);max-width:24ch}
.foot-h{margin-bottom:12px;font-size:13px;font-weight:500;color:var(--text-1)}
.foot-col a{display:block;padding:5px 0;font-size:13.5px;color:var(--text-3);transition:color var(--dur-1) var(--ease-out)}
.foot-col a:hover{color:var(--text-1)}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.foot-copy,.foot-note{font-size:13px;color:var(--text-3)}
.foot-note{flex:1}
.theme-seg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--line)}
.theme-seg button{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;color:var(--text-3);transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.theme-seg button:hover{color:var(--text-1)}
.theme-seg button[aria-pressed="true"]{background:var(--selected);color:var(--text-1)}
.theme-seg .ic{width:15px;height:15px}

/* ---------- the one authored moment: the headline resolves, then the loop assembles over the record ----------
   html.motion is set in <head> only when Reduce motion is off; without it (no JS, Reduce motion) everything is simply there.
   The record itself never starts hidden — it only settles into place. */
.motion .hl{display:inline-block;animation:line-in 950ms var(--ease-expo) both}
.motion .hl:nth-child(1){animation-delay:60ms}
.motion .hl:nth-child(2){animation-delay:180ms}
.motion .hl:nth-child(3){animation-delay:300ms}
@media (min-width:760px){.motion .hl-3{display:block}}
.motion .hero-sub{animation:line-in 900ms var(--ease-expo) 430ms both}
.motion .hero-actions{animation:line-in 900ms var(--ease-expo) 530ms both}
.motion .hero-stage{animation:stage-rise 1500ms var(--ease-expo) 480ms both}
.motion .hs-card{animation:card-in 800ms var(--ease-expo) both}
.motion .hs-row{animation-delay:1050ms}
.motion .hs-chart{animation-delay:1450ms}
.motion .hs-verdict{animation-delay:2800ms}
.motion .hs-path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1000ms cubic-bezier(.65,0,.35,1) 1750ms forwards}
.motion .hs-mark,.motion .hs-tx{animation:fade-in 500ms var(--ease-out) 2050ms both}
.motion .hs-delta{animation:pop 520ms var(--ease-expo) 2350ms both}
.motion .hs-cause{animation:pop 560ms var(--ease-expo) 2500ms both,glow 1400ms var(--ease-out) 2950ms 1}
@keyframes line-in{from{opacity:0;translate:0 14px;filter:blur(8px)}}
@keyframes stage-rise{from{translate:0 32px;scale:.985}}
@keyframes card-in{from{opacity:0;translate:0 14px;filter:blur(6px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade-in{from{opacity:0}}
@keyframes pop{from{opacity:0;scale:.82}}
@keyframes glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 50%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav-link{padding:0 9px}
  .dd-wide .dd-card{width:min(860px,calc(100vw - 32px))}
}
@media (max-width:980px){
  .nav-main,.nav-login,.nav-div{display:none}
  .nav-burger{display:inline-grid}
  .sec-head,.feat-row,.faq{grid-template-columns:minmax(0,1fr)}
  .sec-head{gap:20px}
  .sec-head-r{padding-top:0}
  .feat-note{grid-column:auto}
  .int-grid,.audit-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .trust-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .shot-cap{width:100%}
  .ai-strip{top:auto;bottom:10%;right:-4px}
}
@media (max-width:760px){
  .hero-stage{margin-inline:calc(var(--gutter) * -1);overflow:hidden;padding-left:var(--gutter)}
  .shot-hero{width:900px;max-width:none;margin-left:-174px;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 96%),linear-gradient(to right,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 50%,transparent 96%),linear-gradient(to right,#000 72%,transparent);mask-composite:intersect}
  .hero-fig .fig-cap{margin-top:16px}
  .hs-cards{position:relative;top:auto;right:auto;width:auto;margin:-150px var(--gutter) 0 0}
  .pillars{grid-template-columns:minmax(0,1fr);gap:0}
  .pillar{padding:40px 0;border-left:0;border-top:1px solid var(--line)}
  .pillar:first-child{border-top:0;padding-top:0}
  .fig-art{margin:24px 0 28px;max-width:280px}
  .type-panel{grid-template-columns:minmax(0,1fr);gap:24px}
  .lv{grid-template-columns:minmax(0,1fr);gap:6px}
  .ri-dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .cap-stage{overflow:hidden;margin-right:calc(var(--gutter) * -1)}
  .shot-cap,.shot-cap.shot-wide{width:150%;max-width:none}
  .cap-stage-r .shot-cap{margin-left:0}
  .types-list{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:40px}
  .table-wrap{overflow:visible}
  .access-t{min-width:0}
  .access-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .access-t,.access-t tbody,.access-t tr,.access-t th,.access-t td{display:block}
  .access-t tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .access-t tbody th,.access-t td{padding:0;border:0;white-space:normal}
  .access-t td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;margin-top:8px;font-size:14.5px}
  .access-t td::before{content:attr(data-k);font-size:13px;color:var(--text-3)}
  .ai-strip{position:static;flex-direction:row;flex-wrap:wrap;margin-top:-24px;margin-right:var(--gutter);padding:6px;position:relative}
  .ai-strip li{height:30px;padding:0 10px 0 6px;font-size:13px}
  .feat-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.mnav-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .hero-actions{gap:12px}
  .hero-demo{height:auto;padding-top:4px}
  .audit-field{height:auto;flex-wrap:wrap;padding:6px}
  .audit-ic{display:none}
  .audit-field input{flex:1 1 100%;height:44px;padding:0 10px}
  .audit-field .btn{flex:1 1 100%;height:44px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-in{padding:18px 16px 16px}
  .report-areas td{width:52px}
  .final-h{font-size:var(--t-h2)}
}

/* ---------- stub pages (routes not built yet) ---------- */
.stub{padding-block:clamp(72px,10vw,140px) clamp(96px,12vw,160px)}
.stub .fig-label{margin-bottom:20px}
.stub-h{font-size:var(--t-h2);font-weight:600;line-height:1.06;letter-spacing:-.032em;max-width:16em;text-wrap:balance}
.stub .lead{margin-top:20px;max-width:36em}
.stub-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.stub-echo{margin-top:28px;padding:14px 16px;border-radius:var(--r-12);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--text-2);max-width:36em}
.stub-echo b{color:var(--text-1);font-weight:600;overflow-wrap:anywhere}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px;max-width:900px}
.demo-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--r-12);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--dur-1) var(--ease-out)}
.demo-card:hover{box-shadow:inset 0 0 0 1px var(--line-ctl-h)}
.demo-card .ic{width:20px;height:20px;color:var(--text-2);margin-bottom:8px}
.demo-card b{font-size:15px;font-weight:600}
.demo-card span{font-size:13px;color:var(--text-3)}
@media (max-width:760px){.demo-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- plans (Home #pricing and /pricing/) ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px}
.plan{display:flex;flex-direction:column;padding:24px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.plan-open{background:transparent}
.plan-n{font-size:15px;font-weight:600;letter-spacing:-.01em}
.plan-p{display:flex;align-items:flex-end;gap:4px;min-height:44px;margin-top:14px}
.plan-p b{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.035em}
.plan-p span{padding-bottom:4px;font-size:14px;color:var(--text-3)}
.plan-p-open b{padding-bottom:4px;font-size:21px;letter-spacing:-.015em;color:var(--text-2)}
.plan-d{margin-top:10px;min-height:42px;font-size:14px;line-height:1.5;color:var(--text-2)}
.plan-b{width:100%;margin-top:20px}
.plan-f{margin-top:12px;font-size:12.5px;color:var(--text-3)}
.incl{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.incl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
.incl-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--text-2)}
.incl-list .ic{margin-top:3px;color:var(--pos)}
.incl-note{margin-top:20px;font-size:13px;color:var(--text-3)}
.sec-close .price-sub{margin-top:28px}
.in-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent-text) 40%,transparent)}
.in-link:hover{text-decoration-color:currentColor}

/* ---------- inner pages: Product, For, Pricing, Checkout, Audit ---------- */
.sub-hero{padding-top:clamp(48px,6vw,88px)}
.sub-hero-s{padding-bottom:clamp(64px,8vw,112px)}
.crumbs{display:flex;align-items:center;gap:6px;margin-bottom:20px;font-size:13px;color:var(--text-3)}
.crumbs a{transition:color var(--dur-1) var(--ease-out)}
.crumbs a:hover{color:var(--text-1)}
.crumbs span{color:var(--text-2)}
.sub-h{font-size:clamp(2rem,1.45rem + 2.2vw,3.25rem);font-weight:600;line-height:1.08;letter-spacing:-.032em;max-width:18em;text-wrap:balance}
.sub-lead{margin-top:20px;max-width:40em}
.sub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.sub-actions .btn .ic,.ck-go .ic{width:15px;height:15px}
/* 404: the mark at the identity's splash/404 size (64 px), one flat colour, more than its 3g clear space around it */
.nf-mark{height:64px;width:auto;aspect-ratio:300/360;color:var(--logo);margin-bottom:36px}
.nf-code{margin-bottom:14px;font-size:13px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.sub-fig{margin-top:56px}
.shot-sub{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 98%);mask-image:linear-gradient(to bottom,#000 55%,transparent 98%)}
.sub-fig .fig-cap{position:relative;margin-top:-44px}
.sub-sec{margin-top:clamp(40px,5vw,72px)}
.sub-sec-tight{margin-top:0;border-top:0;padding-top:clamp(24px,3vw,40px)}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pt{padding:0 32px;border-left:1px solid var(--line)}
.pt:first-child{padding-left:0;border-left:0}
.pt :is(h2,h3){font-size:15px;font-weight:600;letter-spacing:-.01em}
.pt p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--text-3)}
.sub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;margin-top:72px;padding-top:48px;border-top:1px solid var(--line)}
.sub-grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.2fr);margin-top:0;padding-top:0;border-top:0}
.sub-small{margin-top:10px;font-size:14px;line-height:1.5;color:var(--text-3)}
.sub-note{margin-top:40px;font-size:14px;color:var(--text-3)}
.sub-note a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.type-con span img{width:18px;height:18px;padding:2px;border-radius:5px;background:#fff}
.int-states{margin-top:72px;padding-top:48px;border-top:1px solid var(--line)}
.rel{margin-top:80px;padding-top:48px;border-top:1px solid var(--line)}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 16px}
.rel-grid-1{grid-template-columns:minmax(0,1fr)}
.rel-item{display:flex;align-items:flex-start;gap:12px;margin-left:-12px;padding:12px;border-radius:12px;transition:background-color var(--dur-1) var(--ease-out)}
.rel-item:hover{background:var(--hover)}
.rel-item>.ic{width:18px;height:18px;margin-top:1px;color:var(--text-3)}
.rel-item b{display:block;font-size:14.5px;font-weight:500}
.rel-item small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.idx-grid{display:grid;gap:48px}
.idx-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.idx-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.final-s{margin-top:0}
.proto-note{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:12px 14px;border-radius:var(--r-12);background:var(--info-bg);color:var(--info);font-size:13.5px;line-height:1.5}
.proto-note .ic{margin-top:2px}
.proto-note b{font-weight:600}

/* checkout (simulated) */
.ck{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.ck-plans{display:grid;gap:10px;margin:28px 0 0;padding:0;border:0}
.ck-plans legend{padding:0}
.ck-plan{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-ctl);cursor:pointer;transition:box-shadow var(--dur-1) var(--ease-out)}
.ck-plan:hover{box-shadow:inset 0 0 0 1px var(--line-ctl-h)}
.ck-plan:has(input:checked){box-shadow:inset 0 0 0 2px var(--text-1)}
.ck-plan input{width:18px;height:18px;margin:0;accent-color:var(--text-1)}
.ck-plan-t{flex:1}
.ck-plan-t b{display:block;font-size:15px;font-weight:600}
.ck-plan-t small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.ck-plan-p{font-size:20px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.ck-plan-p small{font-size:13px;font-weight:400;color:var(--text-3)}
.ck-other{margin-top:16px;font-size:14px;color:var(--text-3)}
.ck-sum{position:sticky;top:96px;padding:24px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--line)}
.ck-dl>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.ck-dl dt{color:var(--text-3)}
.ck-go{width:100%;height:44px;margin-top:20px}
.ck-next{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-3)}

/* audit page */
.au-hero{padding-bottom:clamp(56px,7vw,96px)}
.au-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 64px;align-items:end}
.au-hero .audit-form{margin-top:32px}
.au-levels-mini{border-top:1px solid var(--line)}
.au-levels-mini li{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.au-levels-mini b{font-size:14px;font-weight:600}
.au-levels-mini span{font-size:14px;line-height:1.5;color:var(--text-3)}
.au-run{padding-block:8px 72px}
.au-run-card{max-width:760px;margin:0 auto;padding:28px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--line)}
.au-run-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.au-run-h{font-size:22px;font-weight:600;letter-spacing:-.018em;overflow-wrap:anywhere}
.au-pct{font:500 14px var(--mono);color:var(--text-3);font-variant-numeric:tabular-nums}
.au-bar{height:4px;margin-top:16px;border-radius:4px;background:var(--fill-2);overflow:hidden}
.au-bar span{display:block;width:0;height:100%;border-radius:4px;background:var(--text-1);transition:width 600ms var(--ease-out)}
.au-steps{margin-top:16px}
.au-steps li{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--line);color:var(--text-3);transition:color var(--dur-3) var(--ease-out)}
.au-steps li.is-now,.au-steps li.is-done{color:var(--text-1)}
.au-st{position:relative;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.is-now .au-st{box-shadow:none;border:2px solid var(--fill-2);border-top-color:var(--text-1);animation:spin 800ms linear infinite}
.is-done .au-st{background:var(--pos);box-shadow:none;animation:pop 360ms var(--ease-expo)}
.is-done .au-st::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--on-fill);border-width:0 2px 2px 0;rotate:45deg}
.au-tx b{display:block;font-size:15px;font-weight:500}
.au-tx small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
@keyframes spin{to{rotate:360deg}}
.au-report{padding-block:8px var(--sec-y)}
.au-report:not([hidden]){animation:text-in 500ms var(--ease-out) both}
.report-full{max-width:880px;margin:0 auto}
.au-you{margin-bottom:20px;padding:12px 14px;border-radius:var(--r-12);background:var(--surface-2);font-size:14px;line-height:1.5;color:var(--text-2)}
.au-you b{overflow-wrap:anywhere}
h2.report-site{font-size:inherit;font-weight:inherit}
.au-read{margin:-8px 0 18px;font-size:13px;color:var(--text-3)}
.au-sh{margin:28px 0 10px;font-size:15px;font-weight:600}
.report-issue+.report-issue{margin-top:12px}
.code-in{padding:1px 5px;border-radius:5px;background:var(--surface);font:12.5px var(--mono)}
.au-each{margin-top:10px;font-size:13px;color:var(--text-3)}
.au-prep li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.au-prep .ic{margin-top:2px;color:var(--text-3)}
.au-prep b{display:block;font-size:14.5px;font-weight:500}
.au-prep small{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--text-3)}
.au-l2{max-width:880px;margin:32px auto 0}
.au-email{padding:28px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.au-email .lead{margin:10px 0 20px;font-size:16px}
.au-lbl{display:block;margin-bottom:8px;font-size:13px;font-weight:500}
.au-email-field{max-width:520px}
.au-check{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--text-2);cursor:pointer}
.au-check input{width:16px;height:16px;margin:0;accent-color:var(--text-1)}
.au-l2-body{margin-top:20px}
.au-l2-body.is-in{animation:text-in 500ms var(--ease-out) both}
.report-banner-solo{margin-bottom:12px;border-radius:var(--r-12)}
.au-l2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.au-card{padding:20px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.au-small{margin:-8px 0 12px;font-size:13px;line-height:1.5;color:var(--text-3)}
.au-card table+.au-small{margin:12px 0 0}
.au-ai tbody th{font-size:13.5px}
.au-ai td{width:auto;font-size:13px}
.au-cwv>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.au-cwv dt{font-size:13px;color:var(--text-3)}
.au-cwv dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.au-cwv dd b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.au-cwv dd small{width:100%;font-size:12.5px;color:var(--text-3)}
.au-bots li{padding:10px 0;border-top:1px solid var(--line)}
.au-bots b{display:block;font-size:14px;font-weight:500}
.au-bots span{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--text-3)}
.au-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;max-width:880px;margin:40px auto 0;padding:28px;border-radius:var(--r-card);background:var(--bg-band);box-shadow:inset 0 0 0 1px var(--line)}
.au-sub .lead{max-width:34em;margin-top:8px;font-size:16px}
.au-sub-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.lv-wide{margin-top:48px}
.lv-wide .lv{grid-template-columns:220px minmax(0,1fr)}

@media (max-width:980px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck,.au-hero-in{grid-template-columns:minmax(0,1fr)}
  .ck-sum{position:static}
  .idx-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sub-grid-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pts{grid-template-columns:minmax(0,1fr)}
  .pt{padding:20px 0;border-left:0;border-top:1px solid var(--line)}
  .pt:first-child{padding-top:0;border-top:0}
  .sub-grid,.idx-2,.idx-3,.rel-grid,.au-l2-grid,.incl-list{grid-template-columns:minmax(0,1fr)}
  .sub-fig{margin-inline:0;padding-inline:0;overflow:hidden}
  .shot-sub{width:150%;max-width:none;margin-left:var(--gutter)}
  .sub-fig .fig-cap{padding-inline:var(--gutter);margin-top:-32px}
  .lv-wide .lv{grid-template-columns:minmax(0,1fr)}
  .au-run-card,.au-email,.au-sub{padding:20px}
}
@media (max-width:560px){.plans{grid-template-columns:minmax(0,1fr)}.plan-d{min-height:0}}
.ri-dl .code-in{display:inline;padding:1px 5px;box-shadow:none;background:var(--surface);white-space:nowrap}
@media (max-width:560px){.foot-note{flex:1 1 100%;order:3}}

/* =====================================================================  round 3 (Oct 11)  ===================================================================== */
/* ---------- hero: the live demo inside the frame ---------- */
.hero-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.hero-sw{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hero-sw button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.hero-sw button span{font-weight:400;color:var(--text-3)}
.hero-sw button .ic{width:14px;height:14px;color:var(--text-3)}
.hero-sw button:hover{color:var(--text-1);background:var(--hover)}
.hero-sw button[aria-selected="true"]{background:var(--selected);color:var(--text-1)}
.hero-sw button[aria-selected="true"] .ic{color:var(--text-1)}
.chip-live{gap:7px;background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos) 22%,transparent)}
.motion .live-dot{animation:live-pulse 2.4s var(--ease-out) infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.can-live .shot-hero{aspect-ratio:1440/900;-webkit-mask-image:none;mask-image:none}
.can-live .shot-hero picture{display:block;height:100%;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 98%);mask-image:linear-gradient(to bottom,#000 55%,transparent 98%);transition:opacity 600ms var(--ease-out)}
.can-live .shot-hero picture img{height:100%;object-fit:cover;object-position:top}
.hero-fig.can-live .fig-cap{margin-top:14px}
.hero-fig.is-live [data-live-chip]{display:none}
.live{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity 700ms var(--ease-out);background:var(--bg)}
.live iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0;background:var(--bg)}
.is-live .live{opacity:1;pointer-events:auto}
.is-live .shot-hero picture{opacity:0}
.is-live .hs-cards{opacity:0;visibility:hidden;transition:opacity 500ms var(--ease-out),visibility 0s 500ms}
.live.is-switching iframe{opacity:.35;transition:opacity 200ms var(--ease-out)}

/* ---------- intelligence (replaces the three-pillar strip) ---------- */
.walk{margin-top:clamp(56px,6vw,96px)}
.brain{margin-top:clamp(96px,10vw,152px)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:48px}
.bc{position:relative;display:flex;flex-direction:column;gap:20px;padding:26px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.bc-a{grid-column:span 7}.bc-b{grid-column:span 5}.bc-c{grid-column:span 6}.bc-d{grid-column:span 6}.bc-e{grid-column:span 12;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 40px;align-items:start}
.bc-t .fig-label{margin-bottom:14px}
.bc-h{font-size:19px;font-weight:600;letter-spacing:-.015em}
.bc-p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--text-3);max-width:46ch}
.bc-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.bc-src li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-full);font-size:12.5px;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.bc-src .ic{width:13px;height:13px;color:var(--text-3)}
.bc-art{display:block;width:100%;height:auto;margin-top:auto;overflow:visible}
.aw-band{fill:var(--fill-1);stroke:var(--line-strong);stroke-dasharray:3 4}
.aw-grid{fill:none;stroke:var(--grid)}
.aw-line{fill:none;stroke:var(--c1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.aw-mark{fill:none;stroke:var(--text-4);stroke-dasharray:3 4}
.aw-dot{fill:var(--neg)}
.aw-ring{fill:none;stroke:var(--neg);stroke-width:1.5;opacity:.5}
.aw-tx{font:500 10px var(--mono);letter-spacing:.06em;fill:var(--text-4)}
.aw-hi{fill:var(--text-1)}
.bc-cause{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bc-arrow{width:56px;height:12px;fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bc-only{font-size:12.5px;color:var(--text-3)}
.shot-bc{border-radius:12px;margin-top:auto}
.shot-bc-tall{max-height:300px;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.al-band{fill:var(--fill-2)}
.al-band.al-hi{fill:color-mix(in srgb,var(--c1) 22%,transparent);stroke:var(--c1);stroke-width:1}
.al-dot{fill:var(--text-1)}
/* the brain's motion: plays once when the block scrolls into view (html.motion only) */
.motion .bc:not(.in-view) .aw-line{stroke-dashoffset:1}
.motion .aw-line{stroke-dasharray:1;stroke-dashoffset:0}
.motion .bc.in-view .aw-line{animation:draw-in 1800ms cubic-bezier(.65,0,.35,1) both}
.motion .bc.in-view .aw-band{animation:fade-in 700ms var(--ease-out) both}
.motion .bc.in-view .aw-mark,.motion .bc.in-view .aw-tx{animation:fade-in 600ms var(--ease-out) 1200ms both}
.motion .bc.in-view .aw-dot{animation:pop 500ms var(--ease-expo) 1750ms both}
.motion .bc.in-view .aw-ring{transform-box:fill-box;transform-origin:center;animation:ring 1800ms var(--ease-out) 1900ms 2}
.motion .bc.in-view .bc-cause .chip-pos{animation:pop 520ms var(--ease-expo) 900ms both}
.motion .bc.in-view .bc-arrow path{stroke-dasharray:1;animation:draw-in 600ms var(--ease-out) 400ms both}
.motion .bc.in-view .al-1{animation:fade-in 500ms var(--ease-out) 200ms both}
.motion .bc.in-view .al-2{animation:fade-in 500ms var(--ease-out) 650ms both}
.motion .bc.in-view .al-3{animation:fade-in 500ms var(--ease-out) 1100ms both}
.motion .bc:not(.in-view) .aw-dot{opacity:0}
@keyframes draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}

/* ---------- integrations: one grid, all equal ---------- */
.int-learn{padding-top:4px}
.int-learn .facts{margin:0 0 20px}
.ig-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:40px}
.ig-tile{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
a.ig-tile:hover{box-shadow:inset 0 0 0 1px var(--line-ctl-h)}
.ig-tile .bl{width:18px;height:18px;color:var(--text-1)}
.ig-n{flex:1;min-width:0;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-c{font-size:12px;font-weight:500;color:var(--text-3);transition:color var(--dur-1) var(--ease-out)}
.ig-tile:hover .ig-c{color:var(--accent-text)}
.ig-more{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.ig-more .ic{color:var(--text-2)}
.ig-more .ig-n{color:var(--text-2);white-space:normal;line-height:1.25}
.int-states .ig-list{margin-top:16px}

/* ---------- plans: details, savings, comparison ---------- */
.plan-p{flex-wrap:wrap;column-gap:6px}
.plan-was{padding-bottom:4px;font-size:14px;color:var(--text-3);text-decoration-thickness:1px}
.plan-save{align-self:center;margin-left:auto;padding:3px 8px;border-radius:var(--r-full);background:var(--pos-bg);color:var(--pos);font-size:12px;font-weight:600;white-space:nowrap}
.plan-l{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.plan-l li{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.plan-l .ic{width:14px;height:14px;margin-top:3px;color:var(--pos)}
.incl-p{max-width:70ch;font-size:15px;line-height:1.6;color:var(--text-2)}
.cmp{margin-top:56px}
.cmp-wrap{overflow-x:auto}
.cmp-t{width:100%;min-width:720px;font-size:14px}
.cmp-t th,.cmp-t td{padding:13px 16px 13px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-t thead th{font-size:14px;font-weight:600;color:var(--text-1);border-bottom-color:var(--line-strong)}
.cmp-t tbody th{font-weight:400;color:var(--text-2);width:30%}
.cmp-t td{color:var(--text-1);font-variant-numeric:tabular-nums}
.cmp-t td .ic{color:var(--pos)}
.cmp-t .plan-save{margin-left:6px}
.ck-plan-p .plan-was{margin-right:8px;padding:0;font-weight:400}

/* ---------- audit page, rebuilt ---------- */
.ah{padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,96px)}
.ah-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px 72px;align-items:center}
.ah-h{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.5rem);font-weight:600;line-height:1.06;letter-spacing:-.034em;text-wrap:balance}
.ah-lead{margin-top:20px;max-width:36em}
.ah-form{margin-top:32px;width:min(100%,560px)}
.ah-form .audit-field{height:56px}
.ah-form .audit-field .btn{height:46px}
.ah-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.ah-trust li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3)}
.ah-trust .ic{width:15px;height:15px;color:var(--text-2)}
.ah-r{position:relative;padding:20px 0 20px 20px}
.ah-card{position:relative;padding:20px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--line-strong)}
.ah-card-back{position:absolute;inset:0 24px 40px 0;transform:translate(-14px,-14px);opacity:.55;box-shadow:inset 0 0 0 1px var(--line)}
.ah-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ah-card-top b{font-size:17px;font-weight:600}
.ah-card-top span{font-size:12.5px;color:var(--text-3)}
.ah-counts,.ar-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.ah-counts div,.ar-counts div{padding:12px;border-radius:12px;background:var(--surface-2)}
.ah-counts b,.ar-counts b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ah-counts span,.ar-counts span{font-size:12.5px;color:var(--text-3)}
.ah-rows{margin-top:14px}
.ah-rows li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.ah-bots{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ah-bots span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-full);font:500 11.5px var(--mono);box-shadow:inset 0 0 0 1px var(--line)}
.ah-bots span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-4)}
.ah-bots .is-bad::before{background:var(--neg)}.ah-bots .is-mid::before{background:var(--warn)}.ah-bots .is-ok::before{background:var(--pos)}
.ak-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.ak-c{padding:22px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ak-c .ic{width:20px;height:20px;color:var(--text-2)}
.ak-c h3{margin-top:14px;font-size:15px;font-weight:600}
.ak-c p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--text-3)}
.as{padding-block:clamp(32px,4vw,56px)}
.as-card{max-width:1040px;margin:0 auto;padding:28px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--line-strong)}
.as-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 32px}
.as-h{font-size:22px;font-weight:600;letter-spacing:-.018em}
.as-on{color:var(--text-3);font-weight:500}
.as-note{margin-top:6px;max-width:52ch;font-size:13.5px;line-height:1.5;color:var(--text-3)}
.as-note b{color:var(--text-1);overflow-wrap:anywhere}
.as-found{display:flex;gap:16px;font-size:13px;color:var(--text-3)}
.as-found b{display:inline-block;margin-right:3px;font-size:18px;font-weight:600;color:var(--text-1);font-variant-numeric:tabular-nums}
.as-found b.is-bump{animation:pop 380ms var(--ease-expo)}
.as .au-bar{margin-top:18px}
.as-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;margin-top:20px}
.as-steps li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--line);color:var(--text-3);transition:color var(--dur-3) var(--ease-out)}
.as-steps li.is-now,.as-steps li.is-done{color:var(--text-1)}
.as-steps b{display:block;font-size:14.5px;font-weight:500}
.as-steps small{display:block;margin-top:1px;font-size:12.5px;color:var(--text-3)}
.as-log{display:flex;flex-direction:column;min-height:340px;border-radius:12px;background:var(--bg-band);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.as-log-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font:500 11.5px var(--mono);color:var(--text-3)}
.as-log-top i{width:8px;height:8px;border-radius:50%;background:var(--fill-2)}
.as-log-top span{margin-left:8px}
.as-log ol{flex:1;max-height:360px;overflow-y:auto;padding:10px 14px;font:400 12.5px/1.75 var(--mono)}
.as-log li{display:flex;gap:10px;animation:fade-in 260ms var(--ease-out)}
.lg-m{flex:none;display:inline-grid;place-items:center;width:12px;color:var(--text-4)}
.lg-ok .lg-m::before,.lg-bad .lg-m::before,.lg-mid .lg-m::before{content:"";width:7px;height:7px;margin-top:9px;border-radius:2px}
.lg-ok .lg-m::before{background:var(--pos)}.lg-bad .lg-m::before{background:var(--neg)}.lg-mid .lg-m::before{background:var(--warn)}
.lg-do{color:var(--text-3)}
.lg-ok,.lg-bad,.lg-mid{color:var(--text-1)}
.ar{padding-block:8px var(--sec-y)}
.ar:not([hidden]){animation:text-in 500ms var(--ease-out) both}
.ar-in{max-width:calc(1040px + var(--gutter) * 2)}
.ar-banner{flex-wrap:wrap;border-radius:12px}
.ar-you{margin-left:auto;font-weight:400}
.ar-you b{font-weight:600;overflow-wrap:anywhere}
.ar-sum{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px 40px;align-items:center;margin-top:16px;padding:26px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ar-h{font-size:26px;font-weight:600;letter-spacing:-.02em}
.ar-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:13px;color:var(--text-3)}
.ar-meta span{display:inline-flex;align-items:center;gap:6px}
.ar-meta .ic{width:14px;height:14px}
.ar-lead{margin-top:14px;font-size:16px;line-height:1.55;color:var(--text-2)}
.ar-lead b{color:var(--text-1);font-weight:600}
.ar-counts{margin-top:0}
.ar-nav{position:sticky;top:64px;z-index:5;display:flex;gap:4px;margin-top:12px;padding:8px 0;overflow-x:auto;scrollbar-width:none;background:var(--bg)}
.ar-nav::-webkit-scrollbar{display:none}
.ar-nav a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-full);font-size:13px;color:var(--text-2);white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--dur-1) var(--ease-out)}
.ar-nav a:hover{background:var(--hover);color:var(--text-1)}
.ar-nav a span{font-variant-numeric:tabular-nums;color:var(--text-3)}
.ar-sec{margin-top:16px;scroll-margin-top:120px}
.ar-card{padding:22px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.ar-grid>.ar-sec{margin-top:0}
.ar-sh{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.ar-sh .ic{width:17px;height:17px;color:var(--text-2)}
.ar-n{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--text-3)}
.ar-small{font-size:13px;line-height:1.5;color:var(--text-3);margin-bottom:12px}
.ri{margin-top:10px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.ri summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px 18px;cursor:pointer;list-style:none;font-size:15px}
.ri summary::-webkit-details-marker{display:none}
.ri summary b{font-weight:600}
.ri-m{margin-left:auto;font-size:12.5px;color:var(--text-3)}
.ri-x{width:15px;height:15px;color:var(--text-3);transition:rotate var(--dur-2) var(--ease-out)}
.ri[open] .ri-x{rotate:180deg}
.ri .ri-dl{margin:0 18px 14px}
.ar-list li{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.ar-list .chip{margin-top:1px}
.ar-tt{display:block;font-size:14px;line-height:1.4}
.ar-tt small{display:block;margin-top:2px;font-size:12.5px;color:var(--text-3);overflow-wrap:anywhere}
.cwv-r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.cwv-k{color:var(--text-2)}
.cwv-bar{position:relative;display:flex;gap:2px;height:6px}
.cwv-bar i{flex:1;border-radius:3px}
.cwv-bar .g{background:color-mix(in srgb,var(--pos) 55%,transparent)}.cwv-bar .o{background:color-mix(in srgb,var(--warn) 55%,transparent)}.cwv-bar .r{background:color-mix(in srgb,var(--neg) 50%,transparent)}
.cwv-bar em{position:absolute;top:-4px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;background:var(--text-1)}
.cwv-r b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.ar-tw{overflow-x:auto}
.ar-t{width:100%;min-width:620px;font-size:13.5px}
table.ar-t th,table.ar-t td{display:table-cell;padding:10px 12px 10px 0;text-align:left;border-top:1px solid var(--line);vertical-align:middle}
table.ar-t thead th{border-top:0;font-size:12px;font-weight:500;color:var(--text-3)}
table.ar-t tbody th{font-weight:500}
table.ar-t td{color:var(--text-2)}
.ar-facts li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.ar-facts .ic{width:16px;height:16px;margin-top:1px}
.ar-facts b{display:block;font-weight:600}
.ar-facts span{color:var(--text-3)}
.ar-facts .is-ok .ic{color:var(--pos)}.ar-facts .is-bad .ic{color:var(--neg)}.ar-facts .is-mid .ic{color:var(--warn)}
.ar-facts-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:8px}
.ar-lock li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;color:var(--text-2)}
.ar-lock .ic{width:15px;height:15px;color:var(--text-3)}
.ar-cant .ar-small{margin:12px 0 0}
.ar-prep li{padding:11px 0;border-top:1px solid var(--line)}
.ar-prep b{display:block;font-size:14px;font-weight:600}
.ar-prep small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.ar-email{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px;align-items:start;margin-top:16px;padding:28px;border-radius:var(--r-card);background:var(--bg-band);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ar-email .lead{margin-top:10px;font-size:16px}
.ar-l2{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;animation:text-in 500ms var(--ease-out) both}
.ar-l2[hidden]{display:none}
.ar-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:16px;padding:28px;border-radius:var(--r-card);background:var(--inv);color:var(--inv-fg)}
.ar-cta .lead{max-width:36em;margin-top:8px;font-size:16px;color:color-mix(in srgb,var(--inv-fg) 78%,transparent)}
.ar-cta-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ar-cta .btn-pri{background:var(--inv-fg);color:var(--inv)}
.ar-cta .link-arrow{color:color-mix(in srgb,var(--inv-fg) 85%,transparent)}
.ar-cta .link-arrow:hover{color:var(--inv-fg)}

@media (max-width:1100px){.ig-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){
  .bc-a,.bc-b,.bc-c,.bc-d{grid-column:span 12}
  .bc-e{grid-template-columns:minmax(0,1fr)}
  .ah-in,.as-body,.ar-sum,.ar-grid,.ar-email,.ar-l2{grid-template-columns:minmax(0,1fr)}
  .ak-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ah-r{max-width:520px}
}
@media (max-width:760px){
  .ig-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ig-c{display:none}
  .ak-grid,.ar-facts-2{grid-template-columns:minmax(0,1fr)}
  .bc{padding:20px}
  .as-card,.ar-sum,.ar-card,.ar-email,.ar-cta{padding:18px}
  .cwv-r{grid-template-columns:minmax(0,1fr) auto auto}
  .cwv-bar{grid-column:1/-1;order:2}
  .ar-you{margin-left:0;width:100%}
  .ri-m{margin-left:0;width:100%}
  .as-log{min-height:220px}
}

.plan{position:relative}
.plan .plan-save{position:absolute;top:22px;right:22px;margin:0}
.plan-p .plan-was{margin-left:2px}
@media (max-width:1100px){.ig-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.ig-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero-bar[hidden]{display:none}
.cmp-wrap,.ar-tw,.table-wrap{position:relative}

/* =====================================================================  round 4 (Oct 11): one grid, one rhythm  =====================================================================
   Every section: the same top/bottom padding (--sec-y), a hairline between, the same head (h2 left in the first half, lead in the second half),
   and its content 56px under the head. Heads ≤ 7 words, leads ≤ 30 words. */
:root{--sec-y:clamp(88px,9vw,136px);--head-gap:56px;--t-h2:clamp(2rem,1.5rem + 1.9vw,3rem)}
.sec{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px}
.sec-head .h2{max-width:13em}
.sec-head-r{max-width:30em}
.sec-head+.bento,.sec-head+.types,.sec-head+.plans-top,.sec-head+.access,.sec-head+.pts{margin-top:var(--head-gap)}
.brain{margin-top:0}
.sec-promise{padding-block:clamp(96px,10vw,152px)}
.sec-promise .statement{max-width:24em}
.sec-audit .audit-l .lead{margin-bottom:28px}
.faq-sec .faq{margin-top:0;padding-top:0;border-top:0}
.sec-final{padding:0}
.sec-final .final{margin-top:0;border-top:0}
.hero-fig.is-live .hero-cap{display:none}
.trust-grid{margin-top:72px}
.founder{margin-top:72px}
/* pricing: the period switch */
.plans-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.plans-top+.plans{margin-top:20px}
.plans-note{font-size:13.5px;color:var(--text-3)}
.period{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.period button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--text-2);transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.period button:hover{color:var(--text-1)}
.period button[aria-pressed="true"]{background:var(--selected);color:var(--text-1)}
.period .plan-save{position:static;margin:0;padding:2px 7px;font-size:11.5px}
.py{display:none!important}
:root[data-period="year"] .py{display:inline-flex!important}
:root[data-period="year"] .pm{display:none!important}
.plan-p .pm,.plan-p .py{display:inline-flex;align-items:flex-end;gap:4px}
.plan-bill{margin-top:6px;font-size:13px;color:var(--text-3)}
.plan-bill .pm,.plan-bill .py{display:inline}
.plan-d{min-height:0;margin-top:12px}
.plan .plan-b{margin-top:18px}
.cmp-t td .py{display:none}
@media (max-width:980px){.sec-head{grid-template-columns:minmax(0,1fr);row-gap:16px}}
@media (max-width:760px){
  :root{--head-gap:36px}
  .plans-top{flex-direction:column;align-items:flex-start}
}
.ck-period{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}.ck-period .blk-h{margin:0}.ck-plan-p .pm,.ck-plan-p .py{display:inline}
.plan-p .pm,.plan-p .py{padding:0;font-size:inherit;color:inherit}
.plan-p .pm b,.plan-p .py b{color:var(--text-1)}
.plan-p .pm>span,.plan-p .py>span{padding-bottom:4px;font-size:14px;color:var(--text-3)}

/* =====================================================================  round 5 (Oct 11): the review  ===================================================================== */
:root{--sec-y:clamp(80px,8vw,120px)}
html{scroll-padding-top:88px}
section[id],#faq{scroll-margin-top:88px}
html.menu-open{overflow:hidden}
.mnav{position:absolute;left:0;right:0;top:64px;height:calc(100dvh - 64px);max-height:none}
.mnav-g{border-bottom:1px solid var(--line)}
.mnav-t{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0;font-size:17px;font-weight:500;color:var(--text-1)}
.mnav-chev{color:var(--text-3);transition:rotate var(--dur-2) var(--ease-out)}
.mnav-t[aria-expanded="true"] .mnav-chev{rotate:180deg}
.mnav-grid{padding-bottom:10px}
.mnav-grid[hidden]{display:none}
.mnav-links{margin-top:0;border-top:0}
/* hero: no hidden text on arrival; the stage only settles */
.motion .hl,.motion .hero-sub,.motion .hero-actions{animation:none}
.hero-cap{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--text-3)}
.hero-cap .chip-sample{flex:none}
@media (max-width:899px){
  .hero-stage{margin-inline:0;padding-left:0;overflow:visible}
  .shot-hero{width:100%;max-width:440px;margin:0;-webkit-mask-image:none;mask-image:none}
  .hero-fig .hero-cap{margin-top:12px}
}
/* capabilities: agent readiness, short */
/* built for your site: three logos and the way to the rest */
/* trust and control */
.trust-grid{margin-top:64px}
.founder{margin-top:64px}
.founder-photo{font-size:18px;font-weight:600;color:var(--text-2);outline:1px solid var(--line-strong)}
/* pricing summary on Home */
.plan-s{padding:22px}
.plan-s .plan-d{margin-top:10px;font-size:13.5px;color:var(--text-3)}
#pricing .faq{margin-top:88px}
/* audit: scope line and the missing-data state */
.ar-scope{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--text-3)}
.ar-scope .ic{width:15px;height:15px}
.cwv-none{display:flex;align-items:flex-start;gap:8px;padding:11px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--text-3)}
.cwv-none .ic{margin-top:2px;flex:none}
.cwv+.ar-list{margin-top:10px}
/* security page table: four columns */
.access-t td[data-k="How"]{color:var(--text-3);font-size:14px}
@media (max-width:760px){#pricing .faq{margin-top:64px}}
.sub-list{margin-top:28px;max-width:46em}

/* =====================================================================  round 6 (Oct 14): pre-launch  =====================================================================
   The announcement bar, the founding price on every plan, the founding-list form (Join, Pricing, Checkout, the Audit report) and the legal pages. */
select{font:inherit;color:inherit}
/* the announcement bar: one quiet line above the nav; it scrolls away, the nav stays */
.announce{background:var(--bg-band);border-bottom:1px solid var(--line);color:var(--text-2);font-size:13px;line-height:1.45}
.announce-in{display:flex;justify-content:center;padding-block:9px;text-align:center}
.announce p{text-wrap:balance}
.announce-a{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-weight:500;color:var(--text-1);white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line-strong);border-radius:4px}
.announce-a:hover{text-decoration-color:currentColor}
.announce-a .ic{width:13px;height:13px}
.mnav-cta{flex-wrap:wrap}
.mnav-cta .btn{flex:1 1 200px}

/* plans: the founding price under the price, and the offer's terms under the cards */
.plan-found{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--text-2)}
.plan-found b{font-weight:600;color:var(--text-1)}
.pf-k{display:block;margin-bottom:2px;font-size:12px;color:var(--text-3)}
.plan-found .pm{display:inline!important}
:root[data-period="year"] .plan-found .pm{display:none!important}
:root[data-period="year"] .plan-found .py{display:inline!important}
.plans-found{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.plans-found .ic{margin-top:2px;color:var(--text-1)}

/* the founding-list form */
.jf-box [hidden],.picks [hidden]{display:none!important}
.jf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jf-wide{grid-column:1/-1}
.jf-l{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--text-1)}
.jf-l span{margin-left:4px;font-weight:400;color:var(--text-3)}
.jf-in{display:block;width:100%;height:44px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:var(--surface);color:var(--text-1);font-size:16px;box-shadow:inset 0 0 0 1px var(--field-line);caret-color:var(--ring);transition:box-shadow var(--dur-1) var(--ease-out)}
.jf-in::placeholder{color:var(--text-4);opacity:1}
.jf-in:hover{box-shadow:inset 0 0 0 1px var(--field-line-h)}
.jf-in:focus,.jf-in:focus-visible{outline:none;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 2px var(--ring),0 0 0 3px var(--sel)}
.is-bad .jf-in{box-shadow:inset 0 0 0 1px var(--neg)}
.is-bad .jf-in:focus{box-shadow:inset 0 0 0 1px var(--neg),0 0 0 3px color-mix(in srgb,var(--neg) 22%,transparent)}
.jf-sel{position:relative;display:block}
.jf-sel select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer}
.jf-chev{position:absolute;right:13px;top:50%;translate:0 -50%;color:var(--text-3);pointer-events:none}
.jf-err{margin-top:6px;font-size:13px;line-height:1.45;color:var(--neg)}
.jf-check{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:14px;line-height:1.5;color:var(--text-2);cursor:pointer}
.jf-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--text-1);cursor:pointer}
.jf-check input:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
.jf-check input[aria-invalid="true"]{outline:1.5px solid var(--neg);outline-offset:1px;border-radius:4px}
.jf-err-c{margin-left:28px}
.jf-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.jf-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.jf-go{height:44px;padding:0 20px}
.jf-go[disabled]{opacity:.62;cursor:progress}
.jf-note{font-size:13px;color:var(--text-3)}
.jf-note a,.jf-off a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.jf-msg{margin-top:14px;font-size:14px;line-height:1.5;color:var(--neg)}
.jf-off{margin:0 0 20px}
.jf-unwired .jf-box .jf-off[hidden]{display:flex!important}   /* config.js marks a form that isn't connected before the first paint; join.js unhides the note later, so nothing moves */
.jf-done-ic{display:block;color:var(--pos)}
.jf-done-ic .ic{width:28px;height:28px}
.jf-done-h{margin-top:12px;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.018em}
.jf-done-h:focus,.jf-done-h:focus-visible{outline:none}
.jf-done-p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--text-2)}
.jf-done-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
.jf-done-s{font-size:14px;color:var(--text-2)}
.join-card{padding:28px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shot-shadow),inset 0 0 0 1px var(--line)}
.ar-email-r .jf-box{padding:0}

/* the Join page */
.join-hero{padding-bottom:clamp(64px,8vw,112px)}
.join-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 72px;align-items:start;margin-top:48px}
.picks-line{margin-bottom:16px}
.pick-line{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.pick-line b{font-weight:600;color:var(--text-1)}
.join-list{border-top:1px solid var(--line)}
.join-list li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.join-list .ic{width:18px;height:18px;margin-top:2px;color:var(--text-1)}
.join-list b{display:block;margin-bottom:2px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-1)}
.join-list span{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.join-r .link-arrow{margin-top:24px}
/* Pricing: the founding list as the closing band */
.join-band-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px 64px;align-items:start}
.join-band .lead{margin-top:20px;max-width:30em}
/* Checkout before launch */
.ck-join{margin-top:32px}
.pick .ck-dl>div{grid-template-columns:84px minmax(0,1fr)}
.pick .ck-dl b{font-weight:600}
.ck-sum .ck-next .in-link{white-space:nowrap}
@media (max-width:980px){.join-grid,.join-band-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .jf-grid{grid-template-columns:minmax(0,1fr)}
  .join-card{padding:20px}
  .jf-go{width:100%}
  .announce{font-size:12.5px}
}

/* the legal pages */
.legal .crumbs span:first-child{color:var(--text-3)}
.legal-doc{max-width:46em}
.legal-meta{margin-top:12px;font-size:14px;color:var(--text-3)}
.legal-doc h2{margin-top:48px;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.018em}
.legal-doc h3{margin-top:28px;font-size:17px;font-weight:600;line-height:1.35}
.legal-doc h4{margin-top:22px;font-size:15px;font-weight:600}
.legal-doc p,.legal-doc li,.legal-doc dd{font-size:15.5px;line-height:1.7;color:var(--text-2)}
.legal-doc .sub-h+p,.legal-doc p{margin-top:14px}
.legal-doc ul,.legal-doc ol{margin-top:12px;padding-left:22px}
.legal-doc ul{list-style:disc}
.legal-doc ol{list-style:decimal}
.legal-doc li+li{margin-top:6px}
.legal-doc a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-doc strong,.legal-doc b{font-weight:600;color:var(--text-1)}
.legal-doc table{display:block;max-width:100%;margin-top:16px;overflow-x:auto;font-size:14px}
.legal-doc th,.legal-doc td{padding:10px 16px 10px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal-doc th{font-weight:600;color:var(--text-1)}
.legal-doc td{color:var(--text-2)}
.legal-doc hr{margin:40px 0;border:0;border-top:1px solid var(--line)}

/* =====================================================================  round 7 (Oct 16): after the stories — leaner, calmer, one rhythm  =====================================================================
   The founder: "crowded, some unnecessary, messy". Headings stack (title, then the lead under it). "Built for your kind of site": what each kind
   counts, one finding, its demo — then one strip of the tools Dottpace works with. "You stay in control": three grants as one approval flow. */
.hd-stack{max-width:46rem}
.hd-stack .lead{margin-top:16px;max-width:60ch}
.hd-stack+.types,.hd-stack+.ctl{margin-top:var(--head-gap)}
/* built for your kind of site: what it counts (big), one finding, its demo; each panel arrives in three beats */
.type-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;padding-top:44px}
.type-k{font-size:13px;color:var(--text-3)}
.type-out{margin-top:10px;font-size:clamp(24px,1.2rem + 1.2vw,34px);max-width:14em}
.type-r{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:4px}
.type-r .finding-row{align-self:stretch}
.type-panel.is-in{animation:none}
.type-panel.is-in .type-k{animation:text-in 320ms linear both}
.type-panel.is-in .type-out{animation:tp-rise 640ms var(--ease-expo) 40ms both}
.type-panel.is-in .finding-row{animation:tp-slide 640ms var(--ease-expo) 110ms both}
.type-panel.is-in .btn{animation:text-in 360ms linear 220ms both}
@keyframes tp-rise{from{opacity:0;translate:0 12px}}
@keyframes tp-slide{from{opacity:0;translate:18px 0}}
@media (max-width:760px){.type-panel{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:28px}}
/* the tools it works with: one calm strip of the app's own logos — it drifts (paused on hover, or with its button); with Reduce motion it simply wraps */
.ints{margin-top:clamp(64px,7vw,96px);padding-top:clamp(36px,4vw,48px);border-top:1px solid var(--line)}
.ints-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.ints-h{font-size:clamp(20px,1rem + .8vw,26px);font-weight:600;line-height:1.2;letter-spacing:-.02em}
.ints-mq{margin-top:28px}
.ints-track{display:flex;flex-wrap:wrap;gap:10px}
.ints-row{display:contents}
.ints-row[aria-hidden]{display:none}
.ints-row li{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px 0 13px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--text-2);white-space:nowrap}
.ints-row .bl{width:18px;height:18px;color:var(--text-1)}
.ints-row .bl-wm{width:auto;height:13px}
.ints-row li.is-wm{padding:0 16px}
.ints-pause{display:none}
.motion .ints-mq{display:flex;align-items:center;gap:12px}
.motion .ints-vp{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.motion .ints-track{flex-wrap:nowrap;gap:0;width:max-content;animation:ints-mq 70s linear infinite}
.motion .ints-row{display:flex;gap:10px;padding-right:10px}
.motion .ints-vp:hover .ints-track,.ints.is-paused .ints-track{animation-play-state:paused}
.motion .ints-pause{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line)}
.motion .ints-pause:hover{color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ints-pause .ic{width:14px;height:14px}
.ints-pause .ic-play,.ints.is-paused .ints-pause .ic-pause{display:none}
.ints.is-paused .ints-pause .ic-play{display:block}
@keyframes ints-mq{to{transform:translateX(-50%)}}
/* you stay in control: write access off · the exact change, approved · live and checked — one flow, three cards */
.ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ctl-c{position:relative;display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ctl-c+.ctl-c::before{content:"";position:absolute;right:100%;top:78px;width:16px;height:1px;background:var(--line-strong)}
.ctl-v{display:grid;place-items:center;height:120px;border-radius:12px;background:var(--bg-band);box-shadow:inset 0 0 0 1px var(--line)}
.ctl-c p{padding:0 2px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.ctl-c p b{font-weight:600;color:var(--text-1)}
.ctl-sw{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 12px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:13px;font-weight:500}
.ctl-sw .ic{width:14px;height:14px;color:var(--text-3)}
.ctl-tg{position:relative;display:block;width:30px;height:18px;border-radius:9px;background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.ctl-tg i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 25%,transparent)}
.ctl-sw small{font-size:11.5px;color:var(--text-3)}
.ctl-ch{display:flex;flex-direction:column;gap:3px;width:min(236px,88%)}
.ctl-d{display:flex;gap:7px;padding:2px 8px;border-radius:5px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl-d i{font-style:normal;font-weight:600}
.ctl-del{background:color-mix(in srgb,var(--neg) 9%,transparent);color:var(--text-3);text-decoration:line-through}.ctl-del i{color:var(--neg)}
.ctl-add{background:color-mix(in srgb,var(--pos) 9%,transparent);color:var(--text-1)}.ctl-add i{color:var(--pos)}
.ctl-ok{display:grid;justify-items:start;margin-top:5px}
.ctl-ok>*{grid-area:1/1}
.ctl-ap{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;background:var(--inv);color:var(--inv-fg);font-size:11.5px;font-weight:500;opacity:0}
.ctl-ad{display:inline-flex;align-items:center;gap:5px;height:24px;font-size:12px;font-weight:600;color:var(--pos)}
.ctl-ad .ic{width:13px;height:13px;stroke-width:2.4}
.ctl-lv{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ctl-live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-full);background:var(--pos-bg);color:var(--pos);font-size:12px;font-weight:600}
.ctl-live i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ctl-ck{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.ctl-ck .ic{width:13px;height:13px;color:var(--pos);stroke-width:2.4}
.ctl-ck+.ctl-ck .ic{color:var(--text-3);stroke-width:1.9}
.ctl-link{margin-top:24px}
.sec-trust .founder{margin-top:72px}
/* as the flow scrolls into view, the change is approved and the checks land (a scroll timeline, no script; without one, it simply shows the result) */
@supports (animation-timeline:view()){
  .motion .ctl{view-timeline:--ctl block}
  .motion .ctl-ap{animation:ctl-ap linear both;animation-timeline:--ctl;animation-range:entry 30% cover 42%}
  .motion .ctl-ad{animation:ctl-ad linear both;animation-timeline:--ctl;animation-range:entry 30% cover 42%}
  .motion .ctl-live,.motion .ctl-ck{animation:ctl-ck linear both;animation-timeline:--ctl;animation-range:entry 40% cover 48%}
  .motion .ctl-ck+.ctl-ck{animation-range:entry 50% cover 50%}
}
@keyframes ctl-ap{0%,62%{opacity:1}78%,100%{opacity:0}}
@keyframes ctl-ad{0%,66%{opacity:0;scale:.85}86%,100%{opacity:1;scale:1}}
@keyframes ctl-ck{0%,70%{opacity:0;translate:0 4px}100%{opacity:1;translate:none}}
@media (max-width:900px){.ctl{grid-template-columns:minmax(0,1fr)}.ctl-c+.ctl-c::before{content:none}}
@media (prefers-reduced-motion:reduce){.ctl-ap,.ctl-ad,.ctl-live,.ctl-ck,.ints-track,.type-panel *{animation:none!important}}

/* ---------- the header on a narrow phone (the review, Oct 16): the menu button never shrinks; the CTA says "Join" under 375 px; then the gaps
   tighten; the logo shrinks last (at 125% text, a 320 px phone is a 256 px page) ---------- */
.nav-burger,.pill,.logo{flex:none}
.pill-s{display:none}
@media (max-width:374px){.pill-l{display:none}.pill-s{display:inline}.pill{padding:0 14px}}
@media (max-width:300px){.nav-in{gap:0}.pill{margin-left:4px;padding:0 12px}.nav-burger{margin-left:2px}}
@media (max-width:272px){.nav-in .logo-svg{--logo-h:17px}}
/* the founding-list form before join.js has run (no script, or it failed): the button stays disabled and this says how to join instead */
.jf.is-ready .jf-nojs{display:none}
.jf:not(.is-ready) .jf-go[disabled]{cursor:not-allowed}

/* an integration's status — shown only when it isn't simply available at launch (the review, Oct 16: no "Connect" before launch) */
.ig-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ig-t .ig-n{flex:none}
.ig-s{font-size:11.5px;font-weight:500;line-height:1.2;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.int-legend{margin-top:8px;font-size:13.5px;color:var(--text-3)}
/* /how-we-measure/: one fix, three possible results (the review, Oct 16) */
.hwm-ex{margin-top:48px;max-width:46rem}
.hwm-ex .sub-note{margin-top:0}
.hwm-dl{display:grid;gap:12px;margin-top:20px}
.hwm-dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 20px;padding:14px 16px;border-radius:var(--r-12);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hwm-dl dt{font-weight:600;color:var(--text-1)}
.hwm-dl dd{font-size:15px;line-height:1.55;color:var(--text-2)}
@media (max-width:560px){.hwm-dl>div{grid-template-columns:minmax(0,1fr)}}
.jf-nojs{margin:0 0 20px}
.jf-nojs a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.jf-unwired .jf-nojs{display:none}   /* script is running and the form isn't connected: the "not connected" note says the same, once */