/* Layout: a Figma board. Content sits in "selected frames" with dashed guides that run to the page edge. Black on paper, one quiet green for good news. */
:root{
  --paper:#E9E6DF; --surface:#F7F5F0; --ink:#121110; --ink-2:#45423C; --mute:#7F7A70;
  --line:#D5D0C5; --guide:#BDB7AA; --sunk:#E0DCD3; --orange:#F0531C; --orange-ink:#FFFFFF; --orange-soft:#F9DCCF; --sky:#7FA9D6; --good:#1E7A4C; --good-bg:#E5F3EB;
  --warn:#9A5B12; --warn-bg:#FBEEDC; --bad:#A33A35; --bad-bg:#F8E4E2; --sel:#2F6BFF;
  --on-ink:#FAFAF8; --on-acc:#FFFFFF; --frame-ring:transparent; --ph-edge:#3A3A38; --band-line:transparent;
  --display:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px; --max:1200px;
}
/* Dark: deep warm charcoal paper, cream ink. Every text pair clears WCAG AA. The head script sets data-theme before paint;
   the media block is the no-JavaScript fallback. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#1C1A17; --surface:#24221E; --ink:#F0EADF; --ink-2:#C8C1B3; --mute:#A39C8F;
  --line:#38342E; --guide:#524D45; --sunk:#2B2824; --orange:#FF7442; --orange-ink:#1A0C05; --orange-soft:#3D2418; --sky:#3E5F86; --good:#6CCF9B; --good-bg:#1A2E23;
  --warn:#E9B46C; --warn-bg:#33281A; --bad:#F09089; --bad-bg:#352120; --sel:#82A4FF; --on-ink:#1C1A17;
  --on-acc:#16130F; --frame-ring:rgba(240,234,223,.16); --ph-edge:#5A564F; --band-line:var(--line); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1C1A17; --surface:#24221E; --ink:#F0EADF; --ink-2:#C8C1B3; --mute:#A39C8F;
  --line:#38342E; --guide:#524D45; --sunk:#2B2824; --orange:#FF7442; --orange-ink:#1A0C05; --orange-soft:#3D2418; --sky:#3E5F86; --good:#6CCF9B; --good-bg:#1A2E23;
  --warn:#E9B46C; --warn-bg:#33281A; --bad:#F09089; --bad-bg:#352120; --sel:#82A4FF; --on-ink:#1C1A17;
  --on-acc:#16130F; --frame-ring:rgba(240,234,223,.16); --ph-edge:#5A564F; --band-line:var(--line); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:8px}
.label::before{content:"";width:8px;height:8px;background:var(--orange);display:inline-block}
.h2{font-size:clamp(34px,5vw,56px)}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:56ch;line-height:1.5}
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--display);padding:14px 20px;border-radius:999px;text-decoration:none;border:1px solid var(--ink);transition:transform .12s ease,background .2s,color .2s;cursor:pointer}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-or{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
.btn-or:hover{filter:brightness(1.06)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
:focus-visible{outline:2px solid var(--sel);outline-offset:3px;border-radius:6px}

/* Figma frame: dashed guides that bleed to the page edge, square handles at the corners */
.frame{position:relative}
.frame::before,.frame::after{content:"";position:absolute;left:-100vw;right:-100vw;border-top:1px dashed var(--guide);pointer-events:none}
.frame::before{top:0}.frame::after{bottom:0}
.frame>.vg{position:absolute;top:-80px;bottom:-80px;width:0;border-left:1px dashed var(--guide);pointer-events:none}
.frame>.vg.l{left:0}.frame>.vg.r{right:0}
.handle{position:absolute;width:9px;height:9px;background:var(--paper);border:1px solid var(--sel);z-index:2}
.handle.h-tl{left:-4.5px;top:-4.5px}.handle.h-tr{right:-4.5px;top:-4.5px}.handle.h-bl{left:-4.5px;bottom:-4.5px}.handle.h-br{right:-4.5px;bottom:-4.5px}
.fname{position:absolute;top:-24px;left:0;font:500 11px var(--mono);color:var(--sel);letter-spacing:.02em}
.fsize{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font:500 10.5px var(--mono);background:var(--sel);color:var(--on-acc);padding:2px 6px;border-radius:3px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.brand svg{height:22px;width:auto;display:block}
.links{display:flex;gap:28px;font-size:14.5px;color:var(--ink-2)}
.links a{text-decoration:none}.links a:hover{color:var(--ink)}
/* nav: Services menu on desktop, a menu button on phones */
.dd{position:relative;display:flex;align-items:center}
.dd-t{display:inline-flex;align-items:center;gap:5px}
.dd-c{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.dd:hover .dd-c,.dd.open .dd-c,.dd:focus-within .dd-c{transform:rotate(180deg)}
.dd-m{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);width:300px;padding-top:14px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:70}
.dd:hover .dd-m,.dd.open .dd-m,.dd:focus-within .dd-m{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 30px 60px -30px rgba(10,10,10,.35);display:flex;flex-direction:column}
.dd-list a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.dd-list a:hover,.dd-list a:focus-visible{background:var(--sunk)}
.dd-list a.dd-all{border-bottom:1px dashed var(--guide);border-radius:10px 10px 0 0;margin-bottom:4px;padding-bottom:12px}
.dd-list b{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.dd-list b::before{content:"";width:6px;height:6px;background:var(--orange);flex:none}
.dd-list a.dd-all b::before{background:var(--ink)}
.dd-list span{display:block;font-size:12.5px;color:var(--mute);margin:2px 0 0 14px;line-height:1.3}
.nav-menu{all:unset;display:none;cursor:pointer;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);box-sizing:border-box;position:relative}
.nav-menu span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .2s}
.nav-menu span:first-child{top:15px}.nav-menu span:last-child{bottom:15px}
.nav-menu[aria-expanded="true"] span:first-child{transform:translateY(3.8px) rotate(45deg)}.nav-menu[aria-expanded="true"] span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
/* theme toggle: a half-filled disc that turns over; blue Figma handles mark it on hover and focus. The handle box is the 46px tap target. */
.theme-t{all:unset;box-sizing:border-box;display:none;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);color:var(--ink);cursor:pointer;position:relative;flex:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s,transform .12s}
:root[data-theme] .theme-t{display:inline-grid}
.theme-t::before{content:"";position:absolute;inset:-3px;background:linear-gradient(var(--sel),var(--sel)) 0 0/5px 5px no-repeat,linear-gradient(var(--sel),var(--sel)) 100% 0/5px 5px no-repeat,linear-gradient(var(--sel),var(--sel)) 0 100%/5px 5px no-repeat,linear-gradient(var(--sel),var(--sel)) 100% 100%/5px 5px no-repeat;opacity:0;transition:opacity .18s}
.theme-t:hover{border-color:var(--ink)}.theme-t:hover::before,.theme-t:focus-visible::before{opacity:1}
.theme-t:active{transform:scale(.93)}
.theme-t:focus-visible{outline:2px solid var(--sel);outline-offset:3px;border-radius:999px}
.theme-t svg{width:18px;height:18px;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.theme-t .tt-r{fill:none;stroke:currentColor;stroke-width:1.6}.theme-t .tt-h{fill:currentColor}
:root[data-theme="dark"] .theme-t svg{transform:rotate(180deg)}
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease,stroke .3s ease!important}
.theme-anim .theme-t svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)!important}
.nav-panel{border-top:1px solid var(--line);background:var(--paper);max-height:calc(100vh - 64px);overflow-y:auto}
.nav .nav-panel .wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;gap:0;padding-block:12px 24px}
.nav-panel a{text-decoration:none;font-size:20px;font-weight:500;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)}
.nav-panel .np-g{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:22px;margin-bottom:4px}
.nav-panel a.np-s{font-size:16px;font-weight:400;color:var(--ink-2);padding:10px 0}
.nav-panel .btn{margin-top:22px;justify-content:center;font-size:16px;border-bottom:0}
@media (max-width:1080px){.dd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.nav-menu{display:inline-block}.nav .nav-r .btn-or{display:none}}
@media (min-width:861px){.nav-panel{display:none!important}}

.nav .btn{padding:10px 16px;font-size:14px;white-space:nowrap}
@media (max-width:420px){.nav .btn{padding:9px 12px;font-size:13px}.brand svg{height:19px}}
@media (max-width:860px){.links{display:none}}

/* hero */
.hero{padding-block:120px 110px;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:56px 44px}
.chip{display:inline-flex;align-items:center;gap:8px;font:500 12.5px var(--mono);border:1px solid var(--line);background:var(--surface);padding:6px 12px 6px 8px;border-radius:999px;color:var(--ink-2)}
.chip b{background:var(--ink);color:var(--paper);font-weight:500;padding:2px 7px;border-radius:999px;font-size:11px}
.hero h1{font-size:clamp(42px,6vw,78px);margin:24px 0 22px;letter-spacing:-.05em;line-height:.95}
.hero h1 span{color:var(--mute)}
/* "implementation" is one long word: the heading never grows wider than its own column, phone to desktop */
.hero-grid>div:first-child{container-type:inline-size}
.hero h1{font-size:min(clamp(42px,6vw,78px),14.4cqw)}
.hero .lede{margin-bottom:32px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.works{margin-top:36px;font-size:13.5px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.works strong{font-weight:500;color:var(--ink-2)}
.hero-grid>*{min-width:0}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr);padding:40px 22px}.hero{padding-block:90px 90px}}
@media (max-width:520px){.hero-grid{padding:36px 14px}.kpi{padding:12px}.board-top span{font-size:12px}}

/* product canvas in hero */
.board{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(10,10,10,.25);overflow:hidden}
.board-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--mute)}
.board-top b{color:var(--ink);font-weight:600;font-size:14px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.kpi{padding:16px 18px;border-right:1px solid var(--line);min-width:0}.kpi:last-child{border-right:0}
.kpi small{display:block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.kpi strong{font-size:clamp(18px,2vw,24px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:12px;color:var(--good);margin-left:6px}
.feed{padding:8px}
.item{display:flex;gap:12px;align-items:center;padding:11px 10px;border-radius:10px;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.item:hover{background:var(--sunk)}
.item:nth-child(2){animation-delay:.08s}.item:nth-child(3){animation-delay:.16s}.item:nth-child(4){animation-delay:.24s}.item:nth-child(5){animation-delay:.32s}
@keyframes rise{from{transform:translateY(8px)}to{transform:none}}
.ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--sunk);border:1px solid var(--line)}
.ico svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-size:14px;font-weight:500}
.item .t span{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tag{flex:none;font:500 11px var(--mono);padding:3px 8px;border-radius:6px}
.tag.g{background:var(--good-bg);color:var(--good)}.tag.w{background:var(--warn-bg);color:var(--warn)}.tag.n{background:var(--sunk);color:var(--ink-2)}
.cursor{position:absolute;right:24%;bottom:-14px;display:flex;align-items:flex-start;gap:2px;pointer-events:none;animation:drift 6s ease-in-out infinite}
.cursor svg{width:18px;height:18px}
.cursor span{background:var(--sel);color:var(--on-acc);font:500 11px var(--mono);padding:3px 7px;border-radius:4px;margin-top:12px}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,-10px)}}

section{position:relative}
[id]{scroll-margin-top:80px}
.rails{position:relative;max-width:calc(var(--max) + 2px);margin:0 auto}
.rails::before,.rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:0;pointer-events:none}
.rails::before{left:max(20px,env(safe-area-inset-left,0px))}.rails::after{right:max(20px,env(safe-area-inset-right,0px))}
.rails .wrap{padding-left:calc(max(20px,env(safe-area-inset-left,0px)) + clamp(16px,3.4vw,44px));padding-right:calc(max(20px,env(safe-area-inset-right,0px)) + clamp(16px,3.4vw,44px))}
.rule{position:relative;height:0;border-top:1px solid var(--line)}
.rule::before,.rule::after{content:"";position:absolute;top:-4.5px;width:9px;height:9px;background:var(--paper);border:1px solid var(--sel);z-index:3}
.rule::before{left:calc(max(20px,env(safe-area-inset-left,0px)) - 4.5px)}.rule::after{right:calc(max(20px,env(safe-area-inset-right,0px)) - 4.5px)}
.sq{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--ink);color:var(--paper);font:500 11px var(--mono);flex:none}
.sec{padding-block:100px}
@media (max-width:700px){.sec{padding-block:84px}}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px}

/* Highlighter: a yellow marker on the few lines that matter most. It sweeps in once when scrolled to; without JavaScript it's simply there. */
:root{--hi:#FFE15A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hi:rgba(255,210,60,.34)}}
:root[data-theme="dark"]{--hi:rgba(255,210,60,.34)}
mark.hi{color:inherit;background:linear-gradient(transparent 12%,var(--hi) 12%,var(--hi) 92%,transparent 92%) no-repeat 0 0/100% 100%;padding:0 .14em;margin:0 -.06em;border-radius:3px}
.hi-ready mark.hi{background-size:0 100%;transition:background-size 1.1s cubic-bezier(.3,.7,.2,1) .15s}
.hi-ready mark.hi.on{background-size:100% 100%}

/* Growth chart: the old way (hire to grow) against the new way (an AI Operating System). Lines are SVG; dots, labels and callouts are HTML placed in % so text stays readable at any width. */
.gw-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -42px rgba(10,10,10,.4)}
.gw-top{display:flex;justify-content:space-between;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line)}
.gw-cap{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.gw-leg{display:flex;gap:6px 20px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.gw-leg>span{display:inline-flex;align-items:center;gap:8px}
.gw-leg i,.gw-col h3 i{width:18px;height:0;border-top:1.5px solid var(--ink-2);flex:none}
.gw-leg i.n,.gw-col h3 i.n{border-top:3px solid var(--orange);border-radius:2px}
.gw-body{position:relative;padding:40px 34px 52px 62px;background-image:linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px);background-size:36px 36px;background-position:-1px -1px}
.gw-plot{position:relative;height:clamp(290px,36vw,410px);border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.gw-ax{position:absolute;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.gw-ax.y{left:-14px;top:0;transform:translateX(-100%) rotate(-90deg);transform-origin:100% 50%;translate:0 50%;color:var(--ink)}
.gw-ax.x{right:0;bottom:-28px;color:var(--ink)}
.gw-ax.o{left:0;bottom:-28px}
.gw-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gw-l path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.gw-l.old path{stroke:var(--ink-2);stroke-width:1.5}
.gw-l.new path{stroke:var(--orange);stroke-width:3.5}
.gw-l.new path.glow{stroke-width:14;opacity:.14}
.gw-pt{position:absolute;translate:-50% -50%;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1.5px solid var(--ink-2);display:grid;place-items:center;font:600 10.5px/1 var(--mono);color:var(--ink);z-index:2}
.gw-pt span{position:absolute;top:28px;left:50%;translate:-50% 0;white-space:nowrap;font:500 13px var(--display);color:var(--ink-2)}
.gw-end{position:absolute;translate:-50% -50%;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 22%,transparent);z-index:2}
.gw-call{position:absolute;max-width:320px;padding:12px 16px;border-radius:14px;font-size:13.5px;line-height:1.4;z-index:3}
.gw-call b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.gw-call p{margin-top:4px}
.gw-call.n{left:23%;top:0;background:var(--orange);color:var(--orange-ink);box-shadow:0 14px 30px -16px color-mix(in srgb,var(--orange) 70%,transparent)}
.gw-call.o{right:0;top:13%;max-width:280px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.gw-call.o p{color:var(--ink-2)}
.gw-key{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.gw-col{padding:26px 28px;min-width:0}
.gw-col+.gw-col{border-left:1px dashed var(--guide)}
.gw-col h3{font-size:17px;letter-spacing:-.02em;line-height:1.25;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.gw-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.gw-col li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.gw-col li b{color:var(--ink);font-weight:600}
.gw-n{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-2);display:grid;place-items:center;font:600 10.5px/1 var(--mono);color:var(--ink);margin-top:-1px}
.gw-col.n .gw-n{border:0;background:var(--orange);color:var(--orange-ink)}
.gw-n svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gw-cta{display:flex;justify-content:center;margin-top:52px}
.gw-cta .btn{padding:16px 24px;font-size:16px}
@media (max-width:1040px){.gw-call p{display:none}.gw-call{max-width:250px}}
/* Plays once in view: old line sweeps out, the hires land one by one, then the new way climbs */
.gw.anim .gw-l.old{clip-path:inset(-12px 100% -12px -12px);transition:clip-path 1.3s cubic-bezier(.4,0,.2,1)}
.gw.anim .gw-l.new{clip-path:inset(100% -12px -12px -12px);transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1) 1.6s}
.gw.on .gw-l.old,.gw.on .gw-l.new{clip-path:inset(-12px -12px -12px -12px)}
.gw.anim .gw-pt,.gw.anim .gw-end,.gw.anim .gw-call{opacity:0;scale:.6;transition:opacity .35s ease,scale .45s cubic-bezier(.3,1.5,.5,1)}
.gw.anim .gw-pt{transition-delay:calc(.25s + var(--i)*.28s)}
.gw.anim .gw-call.o{transition-delay:1.3s}
.gw.anim .gw-end{transition-delay:2.6s}
.gw.anim .gw-call.n{transition-delay:2.75s}
.gw.on .gw-pt,.gw.on .gw-end,.gw.on .gw-call{opacity:1;scale:1}
@media (max-width:700px){
  .gw-top{padding:12px 16px}
  .gw-body{padding:26px 14px 44px 40px;background-size:28px 28px}
  .gw-plot{height:280px}
  .gw-ax.y{left:-10px}
  .gw-pt span,.gw-call p{display:none}
  .gw-call{padding:7px 11px;border-radius:10px}.gw-call b{font-size:12.5px}
  .gw-call.n{left:24%}.gw-call.o{top:auto;bottom:52%}.gw-x{display:none}
  .gw-key{grid-template-columns:1fr}
  .gw-col{padding:22px 18px}.gw-col+.gw-col{border-left:0;border-top:1px dashed var(--guide)}
  .gw-cta .btn{width:100%;justify-content:center}
}

/* Guides: ours against the AI slop everywhere else */
.vs{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;margin-bottom:56px}
.vs-c{border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:22px;min-width:0}
.vs-c.us{background:var(--ink);color:var(--paper)}
.vs-c.slop{border:1px dashed var(--guide);background:color-mix(in srgb,var(--sunk) 45%,transparent)}
.vs-h{display:flex;flex-direction:column;gap:8px}
.vs-k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.68}
.vs-h b{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.vs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vs li{display:flex;align-items:center;gap:14px;font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.vs-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.vs-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.us .vs-i{background:var(--orange);color:var(--orange-ink)}
.slop .vs-k{color:var(--mute);opacity:1}
.slop .vs-h b{color:var(--mute);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--bad)}
.slop li{color:var(--mute);font-weight:400}
.slop .vs-i{background:var(--sunk);color:var(--mute);position:relative}
.slop .vs-i::after{content:"";position:absolute;right:-4px;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--bad-bg);border:1px solid var(--bad);background-image:linear-gradient(45deg,transparent 45%,var(--bad) 45%,var(--bad) 58%,transparent 58%),linear-gradient(-45deg,transparent 45%,var(--bad) 45%,var(--bad) 58%,transparent 58%);background-size:8px 8px;background-position:center;background-repeat:no-repeat}
@media (max-width:760px){.vs{grid-template-columns:1fr}.vs-c{padding:24px 20px}}

/* Good news: a small green dot, softly pulsing, beside anything that's a promise kept */
.gd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;animation:gd 2.6s ease-out infinite}
@keyframes gd{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 50%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.good-line{display:flex;align-items:center;gap:10px;margin-top:30px;padding-top:20px;border-top:1px dashed var(--guide);font-size:15px;color:var(--ink-2)}
.good-line b{color:var(--ink);font-weight:600}
.trust .tr b{display:flex;align-items:center;gap:9px}
.trust .tr b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}

/* Built-for band: the kinds of business I build for stream right to left (hover lights one up, the stream never stops), then what it's built on and connects to. Swap in client names once they can be shown. */
.tb{background:var(--surface);border-block:1px solid var(--line);padding-top:30px;overflow:hidden}
.tb-k{text-align:center;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:0 20px}
.tb-mq{overflow:hidden;padding:26px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tb-track{display:flex;width:max-content;animation:tb 42s linear infinite}
@keyframes tb{to{transform:translateX(-50%)}}
.tb-set{display:flex;flex:none}
.tb-i{display:flex;align-items:center;gap:14px;padding:0 46px;white-space:nowrap;color:var(--mute);transition:color .25s}
.tb-i:hover{color:var(--orange)}
.tb-i svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tb-i b{display:block;font-size:24px;font-weight:700;letter-spacing:-.04em;line-height:1}
.tb-i small{display:block;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.tb-row{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,auto);gap:20px 44px;align-items:center;border-top:1px solid var(--line);padding-block:24px}
.tb-tag{font-size:14.5px;color:var(--ink-2)}
.tb-c b{display:block;font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.tb-c span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
@media (max-width:900px){.tb-row{grid-template-columns:1fr 1fr}.tb-tag{grid-column:1/-1}}
@media (max-width:520px){.tb-row{grid-template-columns:1fr;gap:14px}.tb-i{padding:0 30px}.tb-i b{font-size:20px}.tb-i svg{width:28px;height:28px}}

/* scattered */
.scatter{overflow:hidden;position:relative;min-height:560px;display:grid;place-items:center;text-align:center}
.scatter h2{font-size:clamp(28px,3.6vw,44px);max-width:22ch;letter-spacing:-.035em;line-height:1.1}
.scatter h2 span{color:var(--mute)}
.scatter .sub{margin-top:22px;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em}
/* Kept inside the page's grid lines: 36px in from each rail */
.bits{position:absolute;top:0;bottom:0;left:50%;width:calc(min(100%,var(--max)) - 72px);translate:-50% 0}
/* Notifications drawn the way each app shows them: plain marks in the app's colour, never its logo */
.bit.nt{align-items:flex-start;gap:10px;width:252px;padding:10px 12px 11px;border-radius:16px;white-space:normal;text-align:left;box-shadow:0 14px 30px -18px rgba(10,10,10,.35)}
.ap{width:28px;height:28px;border-radius:7px;background:var(--c);display:grid;place-items:center;flex:none;margin-top:1px}
.ap svg{width:17px;height:17px;fill:#fff}
.nt-b{min-width:0;flex:1}
.nt-h{display:flex;justify-content:space-between;gap:8px;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.nt-h b{font-weight:600;color:var(--ink-2)}
.nt strong{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.nt p{font-size:12.5px;line-height:1.35;color:var(--ink-2);margin-top:1px}
.bit{position:absolute;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--ink-2);box-shadow:0 10px 24px -14px rgba(10,10,10,.25);white-space:nowrap}
.file{width:26px;height:32px;border-radius:4px;display:grid;place-items:center;font:600 8px var(--mono);color:#fff;box-shadow:inset 0 0 0 1px var(--frame-ring)}
.bit .dot{min-width:20px;height:20px;border-radius:10px;background:var(--bad);color:var(--on-acc);font:600 11px var(--mono);display:grid;place-items:center;padding:0 5px}
@media (max-width:860px){.bits{width:calc(100% - 40px)}.bit.dk{display:none}.bit.nt{width:min(178px,46%);padding:7px 9px;gap:7px;border-radius:12px}.ap{width:20px;height:20px;border-radius:5px}.ap svg{width:12px;height:12px}.nt-h{font-size:8.5px}.nt strong{font-size:11px;margin-top:1px}.nt p{font-size:10.5px}.scatter{min-height:560px;padding:0}.bit{left:var(--ml)!important;top:var(--mt)!important;font-size:11px;padding:6px 9px;gap:6px;border-radius:9px}.bit .file{width:18px;height:22px;font-size:6.5px;border-radius:3px}.bit .dot{min-width:16px;height:16px;font-size:9.5px}.scatter h2{font-size:26px}.scatter .sub{margin-top:14px;font-size:20px}}

/* one system: list + panel */
.sys{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.steps{border-right:1px solid var(--line);display:flex;flex-direction:column}
.step{all:unset;cursor:pointer;display:block;padding:20px 24px;border-bottom:1px solid var(--line);transition:background .2s}
.step:last-child{border-bottom:0}
.step .row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:500;font-size:16.5px}
.step .row i{font-style:normal;font:400 12px var(--mono);color:var(--mute)}
.step p{color:var(--ink-2);font-size:14.5px;margin-top:8px;display:none;max-width:44ch}
.step[aria-selected="true"]{background:var(--sunk)}
.step[aria-selected="true"] p{display:block}
.step:hover{background:var(--sunk)}
.step:focus-visible{outline:2px solid var(--sel);outline-offset:-2px}
.panel{position:relative;padding:40px;background:var(--sunk);display:grid;place-items:center;min-height:440px;background-image:radial-gradient(var(--guide) 1px,transparent 1px);background-size:18px 18px}
.view{width:100%;max-width:440px;display:none}
.view.on{display:block;animation:rise .45s cubic-bezier(.2,.8,.2,1)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 40px -26px rgba(10,10,10,.3)}
.card-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mute)}
.card-h b{color:var(--ink);font-weight:600}
.card-b{padding:16px}
.msg{font-size:14px;color:var(--ink-2);line-height:1.55}
.msg.me{background:var(--sunk);border-radius:12px 12px 12px 4px;padding:10px 12px;margin-bottom:10px}
.msg.ai{border:1px solid var(--line);border-radius:12px 12px 4px 12px;padding:10px 12px}
.line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;font-variant-numeric:tabular-nums}
.line:last-child{border-bottom:0}
.line span{color:var(--ink-2)}
.total{display:flex;justify-content:space-between;padding-top:12px;font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:8px;margin-top:14px}
.mini{font:500 12.5px var(--display);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.mini.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:8px}
.bars div{flex:1;background:var(--ink);border-radius:4px 4px 0 0;opacity:.85}
.bars div.lo{opacity:.25}
@media (max-width:860px){.sys{grid-template-columns:1fr}.steps{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}.steps::-webkit-scrollbar{display:none}.step{flex:none;padding:13px 16px;border-bottom:0;border-right:1px solid var(--line)}.step .row{font-size:14.5px}.step .row i,.step p{display:none!important}.panel{padding:18px 12px;min-height:0;align-items:start}.panel .view{zoom:.86}}

/* money */
.money{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.money>*{min-width:0}
.finds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.finds li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.finds li:first-child{border-top:1px solid var(--line)}
.finds b{display:block;font-weight:600;font-size:17px;letter-spacing:-.01em}
.finds p{color:var(--ink-2);font-size:15px;margin-top:4px}
.audit{padding:34px}
.audit::before,.audit::after,.portrait::before,.portrait::after{left:-28px;right:-28px}
.report{background:var(--surface)}
.report .line b{color:var(--good)}
.found{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;background:var(--orange);color:var(--orange-ink);padding:16px 18px;border-radius:10px}
.found span{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.found strong{font-size:34px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (max-width:900px){.money{grid-template-columns:1fr;gap:56px}.audit{padding:22px 10px}}

/* checks */
.checks{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.chk{padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.chk:nth-child(4n){border-right:0}.chk:nth-child(n+5){border-bottom:0}
.chk header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.chk header b{font-weight:600;font-size:16px}
.chk ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.chk li{font:400 13px/1.45 var(--mono);color:var(--ink-2);display:flex;gap:8px}
.chk li::before{content:"";flex:none;width:5px;height:5px;margin-top:7px;background:var(--orange)}
@media (max-width:980px){.checks{grid-template-columns:1fr 1fr}.chk:nth-child(n){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.chk:nth-child(2n){border-right:0}.chk:nth-child(n+7){border-bottom:0}}
@media (max-width:560px){.checks{grid-template-columns:1fr}.chk:nth-child(n){border-right:0;border-bottom:1px solid var(--line)}.chk:last-child{border-bottom:0}}

/* demo */
.demo{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.src,.est{background:var(--surface);border:1px solid var(--line);border-radius:16px;min-width:0}
.src{padding:16px;display:flex;flex-direction:column;gap:14px}
.src-h,.ctx-h{display:flex;flex-direction:column;gap:2px}
.src-h b,.ctx-h b{font-weight:600}
.src-h span,.ctx-h span{font-size:13px;color:var(--mute)}
.files{display:flex;flex-direction:column;gap:8px}
.fchip{all:unset;box-sizing:border-box;cursor:grab;display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);transition:opacity .25s,transform .12s,border-color .2s}
.fchip:hover{border-color:var(--ink)}.fchip:active{cursor:grabbing;transform:scale(.98)}
.fchip:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.fchip.used{opacity:.4;cursor:default;border-style:dashed}
.fi{flex:none;width:30px;height:36px;border-radius:5px;display:grid;place-items:center;color:#fff;font:600 9px var(--mono);box-shadow:inset 0 0 0 1px var(--frame-ring)}
.fchip b{display:block;font-weight:500;font-size:14px}
.fchip i{display:block;font-style:normal;font-size:12.5px;color:var(--mute);line-height:1.35;margin-top:2px}
.ctx{border-top:1px dashed var(--guide);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.tg{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:center;cursor:pointer;font-size:14px}
.tg input{width:16px;height:16px;accent-color:var(--ink);margin:0}
.tg i{grid-column:2;font-style:normal;font-size:12.5px;color:var(--mute)}
.est{overflow:hidden;position:relative}
.est-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mute);flex-wrap:wrap}
.est-h b{color:var(--ink);font-weight:600}
.est-h .mini{cursor:pointer;color:var(--ink)}
.demo-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--display);background:var(--orange);color:var(--orange-ink);padding:9px 16px;border-radius:999px;box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 55%,transparent);animation:pulse 2.4s ease-out infinite;transition:transform .12s}
.demo-btn:hover{filter:brightness(1.06)}.demo-btn:active{transform:scale(.96)}
.demo-btn:focus-visible{outline:2px solid var(--sel);outline-offset:3px}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 50%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.loop{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 11.5px var(--mono);color:var(--mute);position:relative;padding-bottom:4px}
.loop i{width:12px;height:12px;border:1.5px solid var(--mute);border-top-color:transparent;border-radius:50%;animation:spin 1.6s linear infinite}
.loop.off i{animation:none;border-color:var(--guide)}
.loop::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);border-radius:2px}
.loop.wait::after{animation:fill 6s linear forwards}.loop.wait{color:var(--ink)}
@keyframes fill{to{width:100%}}
.est-h .demo-btn{margin-left:10px}
.drop{transition:border-color .2s,background .2s}
.drop.over{border-color:var(--sel);background:color-mix(in srgb,var(--sel) 6%,transparent)}
.drop-files{display:flex;gap:8px;flex-wrap:wrap}
.dpill{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 10px;animation:pop .35s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes pop{from{transform:scale(.6) translateX(-30px)}to{transform:none}}

.work{margin:0 14px 14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper);display:none}
.est.working .work,.est.done .work{display:block}
.w-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.w-h b{font-weight:600}
.w-h span:last-child{margin-left:auto;font:400 12.5px var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--sel);animation:spin .8s linear infinite}
.est.done .spin{animation:none;border-color:var(--good);background:var(--good)}
@keyframes spin{to{transform:rotate(360deg)}}
.w-grp{border-left:1px solid var(--line);margin:8px 0 0 6px;padding-left:14px}
.w-g{display:flex;align-items:center;gap:8px;margin:0 0 6px -21px;background:var(--paper);font-size:14px}
.w-g i,.w-i i{margin-left:auto;font-style:normal;font:400 12px var(--mono);color:var(--mute);text-align:right}
.w-i{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13.5px;color:var(--mute);transition:color .2s}
.w-i i{opacity:0;transition:opacity .2s}
.ok{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--guide);position:relative}
.w-i.on{color:var(--ink)}.w-i.on i{opacity:1}
.w-i.on .ok,.w-g.on .ok{border-color:var(--good);background:var(--good)}
.w-i.on .ok::after,.w-g.on .ok::after{content:"";position:absolute;left:3.5px;top:1.5px;width:3px;height:6px;border:solid var(--on-acc);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.w-i.skip{text-decoration:line-through;opacity:.6}
.quote{display:none;border-top:1px solid var(--line)}
.est.done .quote{display:block;animation:rise .4s ease both}
.qscroll{overflow-x:auto}
.qt{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;font-variant-numeric:tabular-nums}
.qt th{font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);text-align:right;padding:10px 12px;border-bottom:1px solid var(--line)}
.qt th:first-child,.qt td:first-child{text-align:left}
.qt td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right}
.qt td .bx{display:inline-block;border:1px solid var(--line);border-radius:7px;padding:3px 8px;background:var(--paper);min-width:44px;text-align:center}
.qt tr.sec-row td{background:var(--sunk);font-weight:600;text-align:left}
.qt tr.sec-row td:last-child{text-align:right}
.qt tr.sec-row small{font-weight:400;color:var(--mute);margin-left:8px;font:400 12px var(--mono)}
.qt tbody tr{animation:rise .3s ease both}
.qsum{display:flex;justify-content:flex-end;gap:24px;padding:12px 16px;flex-wrap:wrap;font-variant-numeric:tabular-nums;font-size:14px}
.qsum span{color:var(--mute);margin-right:8px}
.qt-total b{font-size:18px}
.qbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--orange-soft);font-size:13.5px}
.qbar .mini{border-color:transparent}
@media (max-width:900px){.demo{grid-template-columns:minmax(0,1fr)}.files{display:grid;grid-template-columns:1fr 1fr}.fchip i{display:none}.ctx,.est-h .loop{display:none}.qt{min-width:0}.qt th:nth-child(n+2):not(:last-child),.qt td:nth-child(n+2):not(:last-child){display:none}.qt tbody tr:not(.sec-row){display:none}.w-i{display:none}.w-grp{margin-top:4px}.w-g{margin-bottom:0}.work{padding:12px 14px}.fchip{padding:8px}}
@media (max-width:520px){#why .trust{grid-template-columns:1fr 1fr}#why .tr{padding:16px;border-bottom:0}#why .tr:nth-child(odd){border-right:1px solid var(--line)}#why .tr:nth-child(-n+2){border-bottom:1px solid var(--line)}#why .tr p{font-size:13.5px}}

/* phone with a Claude conversation */
.pane .pic{position:relative;display:grid;place-items:center;padding:28px;background:var(--sunk);background-image:radial-gradient(var(--guide) 1px,transparent 1px);background-size:18px 18px}
.ph{position:relative;width:min(290px,100%);aspect-ratio:9/19.3;border-radius:48px;background:#1B1B1A;padding:10px;box-shadow:inset 0 0 0 1.5px var(--ph-edge),0 0 0 1px #0E0E0D,0 40px 70px -34px rgba(10,10,10,.55)}
.ph::before,.ph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2A2A28}
.ph::before{left:-3px;top:22%;height:9%}.ph::after{right:-3px;top:26%;height:14%}
.ph-scr{position:relative;height:100%;border-radius:38px;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
.ph-scr::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#0B0B0A;z-index:2}
.ph-scr::after{content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:96px;height:4px;border-radius:3px;background:var(--ink);opacity:.85}
.ph-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 10px;font:500 11px var(--mono);color:var(--mute);border-bottom:1px solid var(--line)}
.ph-top b{font:600 13px var(--display);color:var(--ink)}
.ph-chat{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden;font-size:13px;line-height:1.45}
.pu{align-self:flex-end;max-width:85%;background:var(--sunk);border-radius:14px 14px 4px 14px;padding:9px 12px;margin:0}
.pa{color:var(--ink-2);display:flex;flex-direction:column;gap:7px}
.pa p{margin:0}.pa b{color:var(--ink);font-weight:600}
.pa ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
.pa-n{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.pa-card{border:1px solid var(--line);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;background:var(--paper)}
.pa-card span{font:400 11px var(--mono);color:var(--mute)}.pa-card b{font-size:15px}
.pa-btns{display:flex;gap:6px}
.pa-btns .mini{cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .1s}
.pa-btns .mini:active{transform:scale(.95)}
.pa-btns .mini.done{background:var(--good);border-color:var(--good);color:var(--on-acc)}.pa-btns .mini{font-size:11.5px;padding:6px 10px}
.ph-in{margin:10px;border:1px solid var(--line);border-radius:999px;padding:9px 9px 9px 14px;font-size:12.5px;color:var(--mute);display:flex;justify-content:space-between;align-items:center}
.ph-in span{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px}

/* built on claude */
.claude{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:center}
.layers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.layer{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.layer header{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.layer code{margin-left:auto;font:500 11px var(--mono);color:var(--sel);background:color-mix(in srgb,var(--sel) 10%,transparent);padding:2px 7px;border-radius:5px}
.stack-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.stack-row span{font:500 12px var(--mono);border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 9px;color:var(--ink-2)}
.layer b{font-weight:600}
.layer p{font-size:14.5px;color:var(--ink-2)}
.diy{margin-top:20px;font-size:15px;color:var(--ink-2);border-left:2px solid var(--orange);padding-left:14px;max-width:60ch}
@media (max-width:900px){.claude{grid-template-columns:minmax(0,1fr)}.claude .ph{margin:0 auto}}
@media (max-width:520px){.layers{grid-template-columns:1fr}}

/* Claude layout: chat window, grey user bubble on the right, plain reply on the left, composer with + / tools / send */
.cwin{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 40px -26px rgba(10,10,10,.3);overflow:hidden;display:flex;flex-direction:column}
.cwin-h,.est-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.cwin-h b,.est-h b{color:var(--ink);font-weight:600}
.cwin-k{margin-left:auto;font:500 11px var(--mono);color:var(--mute)}
.est-h .demo-btn{margin-left:10px}
.cwin-dot{width:10px;height:10px;background:var(--orange);border-radius:2px;flex:none}
.cchat{padding:16px;display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.5}
.cchat .pu{font-size:14px}
.pa blockquote{margin:0;border-left:2px solid var(--line);padding-left:12px;color:var(--ink-2)}
.pa ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.att{display:block;font:500 11.5px var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 8px;margin-bottom:6px;width:fit-content}
.qmini{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:4px 12px;font-variant-numeric:tabular-nums}
.qmini div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.qmini div:last-child{border-bottom:0}.qmini .tot{font-weight:600;font-size:14px}
.cbox{margin:0 12px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:10px 10px 8px 14px;box-shadow:0 4px 14px -8px rgba(10,10,10,.18);display:flex;flex-direction:column;gap:8px}
.cbox-t{font-size:13.5px;color:var(--mute);line-height:1.4}
.cbox-b{display:flex;align-items:center;gap:6px}
.cic{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);flex:none}
.cic svg,.csend svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbox-m{margin-left:auto;font:400 11.5px var(--mono);color:var(--mute)}
.csend{width:30px;height:30px;border-radius:9px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;flex:none}
.ph .cbox{margin:8px;border-radius:16px;padding:8px 8px 6px 12px}
.ph .cbox-t{font-size:12px}.ph .cic{width:24px;height:24px}.ph .csend{width:26px;height:26px}.ph .cbox-m{font-size:10px}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 6px;font:600 12px var(--display);color:var(--ink)}
.ph-sig svg{width:30px;height:11px;fill:var(--ink);display:block}
.ph .cbox{margin-bottom:18px}
.ph-top .cic{border:0;width:24px;height:24px}
.ph-top{padding:6px 10px 8px}
.view{max-width:460px}
.drop.cbox{margin:14px;border-style:solid}
.drop.cbox.over{border-color:var(--sel);background:color-mix(in srgb,var(--sel) 6%,var(--surface))}
.drop-hint{display:inline}

/* multiplayer cursors, Figma style */
.cur{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:1px;pointer-events:none;animation:wander 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.cur svg{width:18px;height:18px;fill:var(--c);stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.cur span{background:var(--c);color:var(--on-acc);font:500 11px var(--mono);padding:3px 7px;border-radius:4px;margin-top:13px;white-space:nowrap}
@keyframes wander{0%,100%{transform:translate(0,0)}25%{transform:translate(-14px,-8px)}55%{transform:translate(10px,-14px)}80%{transform:translate(-6px,6px)}}
@media (max-width:640px){.cur.desk{display:none}}

.hero-ph{width:min(330px,100%);margin:0 auto}
.hk{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}
.hk div{padding:8px 9px;border-right:1px solid var(--line);min-width:0}.hk div:last-child{border-right:0}
.hk small{display:block;font:500 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.hk b{font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hl{list-style:none;padding:0!important;margin:0;display:flex;flex-direction:column;gap:6px!important}
.hl li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.hl .tag{font-size:10px;padding:2px 6px;min-width:52px;text-align:center}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.who-col{position:sticky;top:96px}
.portrait{padding:0;aspect-ratio:4/5;background:var(--sunk);border-radius:4px}
.portrait canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.ph-note{position:absolute;left:14px;bottom:14px;font:500 11px var(--mono);background:var(--surface);border:1px solid var(--line);padding:4px 8px;border-radius:5px;color:var(--ink-2)}
.astats{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.astats div{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.astats div:nth-child(2n){border-right:0}.astats div:nth-child(n+3){border-bottom:0}
.astats b{display:block;font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.astats span{font-size:13px;color:var(--mute)}
.bio{display:flex;flex-direction:column;gap:16px;font-size:16.5px;color:var(--ink-2);line-height:1.6}
.bio-lead{font-size:clamp(20px,2vw,24px);color:var(--ink);line-height:1.4;letter-spacing:-.015em}
.runs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.runs li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.runs li:last-child{border-bottom:1px solid var(--line)}
.runs b{display:block;color:var(--ink);font-weight:600}
.runs p{font-size:14.5px;margin-top:2px}
/* Visionary and integrator: the two people at the top, and which one I am */
.bio p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.vi{margin-top:6px;padding:24px 22px 22px;border:1px dashed var(--guide);border-radius:16px;text-align:center}
.vi-k{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.vi-k em{font-style:normal;color:var(--orange)}
.vi-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,4vw,40px);margin-top:18px}
.vi-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.vi-c span{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.vi-c b{font:600 clamp(17px,1.9vw,21px) var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.vi-c small{font-size:13.5px;color:var(--ink-2)}
.vi-c.me{background:var(--orange);border-color:var(--orange)}
.vi-c.me span,.vi-c.me b,.vi-c.me small{color:var(--orange-ink)}
.vi-br{height:18px;margin:0 25%;border:1px solid var(--ink-2);border-top:0;border-radius:0 0 4px 4px}
.vi-cap{margin-top:14px;font-size:15.5px;color:var(--ink)}
.sig{margin:12px 0 0;padding:22px 24px;background:var(--ink);color:var(--paper);border-radius:14px;font-size:19px;line-height:1.4;letter-spacing:-.01em}
.sig cite{display:block;margin-top:12px;font:400 12px var(--mono);font-style:normal;color:var(--orange)}
.omap-wrap{margin-top:72px;border:1px solid var(--line);border-radius:16px;background:var(--sunk);background-image:radial-gradient(var(--guide) 1px,transparent 1px);background-size:18px 18px;padding:20px;overflow-x:auto}
.omap-k{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.omap{display:block;width:100%;min-width:720px;height:auto;margin-top:8px}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr);gap:48px}.who-col{position:static}.portrait{max-width:420px}}

/* enquiry form: sits on the dark pixel band, so it keeps one look in both themes */
.enq{display:flex;flex-direction:column;gap:18px;max-width:560px;background:rgba(14,13,12,.66);border:1px solid rgba(250,250,248,.18);border-radius:16px;padding:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#FAFAF8}
.enq fieldset{border:0;margin:0;padding:0;min-width:0}
.enq legend{padding:0;margin-bottom:10px}
.bk-l{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(250,250,248,.78);display:flex;align-items:baseline;gap:8px}
.bk-l i{font-style:normal;text-transform:none;letter-spacing:0;color:rgba(250,250,248,.58)}
.enq-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enq input,.enq textarea{box-sizing:border-box;width:100%;min-height:46px;font:400 16px/1.4 var(--display);padding:11px 14px;border-radius:12px;border:1px solid rgba(250,250,248,.3);background:rgba(250,250,248,.08);color:#FAFAF8;transition:border-color .18s,background .18s}
.enq textarea{resize:vertical;min-height:92px}
.enq input::placeholder,.enq textarea::placeholder{color:rgba(250,250,248,.55)}
.enq input:focus,.enq textarea:focus{outline:none;border-color:#FAFAF8;background:rgba(250,250,248,.12)}
.enq input:focus-visible,.enq textarea:focus-visible{outline:2px solid #82A4FF;outline-offset:2px;border-radius:12px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pk{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 15px;display:inline-flex;align-items:center;gap:9px;border-radius:999px;border:1px solid rgba(250,250,248,.28);color:rgba(250,250,248,.9);font:500 14px/1.2 var(--display);-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s,border-color .18s,transform .1s}
.pk::before{content:"";flex:none;width:8px;height:8px;border:1.5px solid currentColor;box-sizing:border-box;transition:background .18s,border-color .18s}
.pk:hover{border-color:#FAFAF8}
.pk:active{transform:scale(.96)}
.pk:focus-visible{outline:2px solid #82A4FF;outline-offset:2px}
.pk[aria-pressed="true"]{background:#FAFAF8;color:#121110;border-color:#FAFAF8}
.pk[aria-pressed="true"]::before{background:#F0531C;border-color:#F0531C}
.enq-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.enq-go .btn{min-height:48px}
.enq .note{margin:0;flex:1 1 200px}
@media (max-width:600px){.enq{padding:14px;gap:16px}.enq-row{grid-template-columns:1fr}.enq-go .btn{width:100%;justify-content:center}.picks{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pk{font-size:13px;padding:8px 10px;gap:8px;border-radius:12px;line-height:1.2}}

/* who it's for: scene cards */
.inds3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ind3{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ind3-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.ind3-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.9,.25,1)}
.ind3:hover .ind3-img img{transform:scale(1.03)}
.ind3-n{position:absolute;left:12px;top:12px;font:500 11px var(--mono);background:var(--ink);color:var(--paper);padding:3px 7px}
.ind3-b{padding:20px;display:flex;flex-direction:column;gap:8px}
.ind3-b b{font-weight:600;font-size:18px;letter-spacing:-.015em}
.ind3-b p{font-size:14.5px;color:var(--ink-2)}
.ind3-b ul{list-style:none;margin:6px 0 0;padding:12px 0 0;border-top:1px dashed var(--guide);display:flex;flex-direction:column;gap:7px}
.ind3-b li{font:400 13px/1.4 var(--mono);color:var(--ink-2);display:flex;gap:8px}
.ind3-b li::before{content:"";flex:none;width:5px;height:5px;margin-top:6px;background:var(--orange)}
@media (max-width:900px){.inds3{grid-template-columns:1fr}.ind3-img{aspect-ratio:16/9}}

/* pixel interludes between sections */
.interlude{position:relative;height:clamp(200px,24vw,280px);margin:0 max(20px,env(safe-area-inset-left,0px));overflow:hidden;border-block:1px solid var(--line)}
.interlude::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,10,.42) 0%,rgba(20,12,10,.12) 55%,rgba(20,12,10,0) 80%)}
.interlude p,.interlude .il-k{z-index:1}
.interlude canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.interlude p{position:absolute;left:clamp(20px,5vw,64px);bottom:clamp(20px,4vw,40px);margin:0;color:#fff;font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.05;max-width:16ch;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.interlude .il-k{position:absolute;left:clamp(20px,5vw,64px);top:18px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);display:flex;gap:8px;align-items:center}
.interlude .il-k::before{content:"";width:8px;height:8px;background:#fff}

/* client login */
.nav-r{display:flex;gap:8px;align-items:center}
.nav-login{padding:10px 14px;font-size:14px;white-space:nowrap}
@media (max-width:560px){.nav-login{display:none}}
.login{border:0;padding:0;background:transparent;max-width:min(520px,calc(100vw - 32px));width:100%;overflow:visible}
.login::backdrop{background:rgba(18,17,16,.45);backdrop-filter:blur(4px)}
.login-f{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:40px 32px 28px;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.login-f::before,.login-f::after{left:-24px;right:-24px}
.login-f h2{font-size:30px}
.login-f p{color:var(--ink-2);font-size:15.5px}
.login-f .btn{align-self:flex-start}
.login-s{font-size:14px!important}
.login-s a{color:var(--ink);font-weight:500}
.login-x{all:unset;cursor:pointer;position:absolute;right:12px;top:8px;font-size:24px;line-height:1;color:var(--mute);padding:4px 8px}
.login-x:focus-visible{outline:2px solid var(--sel)}

/* pages */
.links a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange);padding-bottom:4px}
.next{padding-block:8px 40px}
.next a{display:flex;align-items:center;gap:16px;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:20px 24px;transition:border-color .2s}
.next a:hover{border-color:var(--ink)}
.next span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.next b{font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.025em}
.next i{margin-left:auto;font-style:normal;font-size:24px}
.teaser{padding-block:60px}
.tz{display:grid;gap:10px;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:32px;position:relative;overflow:hidden}
.tz::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:var(--orange);opacity:.12;border-radius:24px;transform:rotate(18deg)}
.tz b{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.05;max-width:20ch}
.tz-p{color:var(--ink-2);max-width:60ch}
.tz-go{font-weight:500;color:var(--orange)}
.tz:hover{border-color:var(--ink)}

.fmail{font:500 13px var(--mono);color:var(--ink);user-select:all}
/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mate{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:16px;min-width:0}
.mate .who{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.av svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mate h3{font-size:20px;letter-spacing:-.02em}
.mate .role{font:400 12px var(--mono);color:var(--mute)}
.mate p{color:var(--ink-2);font-size:15px}
.mate .ex{margin-top:auto;border-top:1px dashed var(--guide);padding-top:14px;font:400 13px var(--mono);color:var(--ink-2)}
@media (max-width:900px){.team{grid-template-columns:1fr}}

/* industries */
.inds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind{border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.ind img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(.25)}
.ind div{padding:14px 16px}
.ind b{font-weight:600}
.ind span{display:block;font-size:13.5px;color:var(--mute);margin-top:2px}
.more{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.more span{font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--ink-2);background:var(--surface)}
@media (max-width:900px){.inds{grid-template-columns:repeat(2,1fr)}}

/* results */
.results{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.res{padding:28px 28px 8px 0;border-right:1px dashed var(--guide);min-width:0}
.res+.res{padding-left:28px}
.res:last-child{border-right:0}
.res strong{display:block;font-size:clamp(40px,4.6vw,58px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.res p{color:var(--ink-2);margin-top:14px;font-size:15px}
.res small{display:block;font:400 12px var(--mono);color:var(--mute);margin-top:14px}
@media (max-width:860px){.results{grid-template-columns:1fr}.res,.res+.res{padding:24px 0;border-right:0;border-bottom:1px dashed var(--guide)}}

/* process tabs */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px 14px 0 0;overflow:hidden;background:var(--surface)}
.tab{all:unset;cursor:pointer;padding:16px 18px;border-right:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--mute);display:flex;flex-direction:column;gap:4px}
.tab:last-child{border-right:0}
.tab i{font:400 11.5px var(--mono);font-style:normal}
.tab[aria-selected="true"]{color:var(--ink);background:var(--sunk);box-shadow:inset 0 -2px 0 var(--ink)}
.tab:focus-visible{outline:2px solid var(--sel);outline-offset:-2px}
.pane{display:none;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--surface)}
.pane.on{display:grid}
.pane .txt{padding:36px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pane h3{font-size:28px}
.pane ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pane li{display:flex;gap:10px;color:var(--ink-2);font-size:15px}
.pane li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;background:var(--ink)}
.price{font:500 13px var(--mono);border:1px solid var(--line);padding:6px 10px;border-radius:8px;align-self:flex-start;margin-top:8px}
.pane .pic{position:relative;min-height:300px;border-left:1px solid var(--line)}
.pane .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.tabs{grid-template-columns:repeat(2,1fr)}.tab:nth-child(2){border-right:0}.tab:nth-child(-n+2){border-bottom:1px solid var(--line)}.pane.on{grid-template-columns:1fr}.pane .pic{border-left:0;border-top:1px solid var(--line);min-height:220px}.pane .txt{padding:24px}}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.tr{padding:24px;border-right:1px solid var(--line);min-width:0}.tr:last-child{border-right:0}
.tr b{display:block;font-weight:600;margin-bottom:6px}
.tr p{font-size:14.5px;color:var(--ink-2)}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr}.tr:nth-child(2){border-right:0}.tr:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.trust{grid-template-columns:1fr}.tr{border-right:0;border-bottom:1px solid var(--line)}.tr:last-child{border-bottom:0}}

/* pricing */
.plans{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.plan.feat{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan .k{font:500 12px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.plan strong{font-size:40px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.crumbs{font:500 12px var(--mono);color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;padding-top:40px}.crumbs a{text-decoration:none;color:inherit}.crumbs a:hover{color:var(--ink)}
.plan strong s,.sv-pricebox strong s{font-size:.55em;color:var(--mute);font-weight:500;margin-right:.3em;text-decoration-thickness:2px;vertical-align:.2em}
.plan .was-n{font:500 12px var(--mono);color:var(--good);margin:-4px 0 6px}
.plan strong small{font-size:15px;color:var(--mute);font-weight:500;letter-spacing:0}
.plan p{color:var(--ink-2);font-size:15px}
.plan ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-2)}
.plan li{display:flex;gap:10px}
.plan{cursor:pointer;position:relative}
.plan .plan-go{margin-top:auto;align-self:flex-start;padding:12px 18px;font-size:14.5px}
.plan.sel{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.plan.sel::after{content:"Picked";position:absolute;top:14px;right:14px;font:500 11px var(--mono);background:var(--orange);color:var(--orange-ink);padding:3px 8px;border-radius:999px}
#plan-cur{transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1)}
#plan-cur.moved{animation:none}
.picked{display:none;align-items:center;gap:10px;font:500 13px var(--mono);color:#FAFAF8;background:rgba(240,83,28,.9);padding:8px 12px;border-radius:999px;align-self:flex-start}
.picked.on{display:inline-flex}
.picked button{all:unset;cursor:pointer;opacity:.8;font-size:15px;line-height:1}
.plan li::before{content:"";flex:none;width:12px;height:7px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg);margin-top:6px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.addon{margin-top:16px;background:var(--surface);border:1px dashed var(--ink);border-radius:18px;padding:28px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.addon .k{font:500 12px var(--mono);color:var(--orange);text-transform:uppercase;letter-spacing:.06em}
.addon b{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;margin:8px 0 10px}
.addon p{color:var(--ink-2);font-size:15px;margin:0 0 18px}
.addon ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-2)}
.addon li{display:flex;gap:10px}
.addon li::before{content:"";flex:none;width:12px;height:7px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg);margin-top:6px}
.addon .note{font:500 12px var(--mono);color:var(--mute);margin-top:14px}
@media (max-width:900px){.addon{grid-template-columns:1fr;gap:18px}}

/* Life: cards answer the pointer, buttons answer the press. Quick in, gentle settle, nothing on touch screens. */
.plan,.addon,.ind3,.layer,.mate,.chk,.tr,.next a,.tz,.stack-row span,.more span,.astats div,.res,.runs li,.finds li{transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s cubic-bezier(.2,.8,.2,1),border-color .18s ease,background-color .18s ease,opacity .25s ease}
@media (hover:hover) and (pointer:fine){
  .plan:hover,.addon:hover,.ind3:hover,.layer:hover,.mate:hover,.next a:hover,.tz:hover{transform:translateY(-3px);box-shadow:0 20px 38px -24px rgba(10,10,10,.38);border-color:var(--ink)}
  .plan.feat:hover{box-shadow:0 0 0 1px var(--ink),0 20px 38px -24px rgba(10,10,10,.38)}
  .chk:hover,.tr:hover,.astats div:hover{background-color:var(--sunk)}
  .stack-row span:hover,.more span:hover{border-color:var(--ink);color:var(--ink)}
  .runs li:hover,.finds li:hover{background-color:color-mix(in srgb,var(--sunk) 60%,transparent)}
  .plans:has(.plan:hover) .plan:not(:hover),.inds3:has(.ind3:hover) .ind3:not(:hover),.team:has(.mate:hover) .mate:not(:hover),.layers:has(.layer:hover) .layer:not(:hover),.results:has(.res:hover) .res:not(:hover){opacity:.62}
  .qs summary:hover::after{color:var(--ink)}
  .qs summary:hover{color:var(--ink-2)}
  a.btn:hover,button.btn:hover{transform:translateY(-1px)}
}
.btn:active,.mini:active,.next a:active,.tz:active,.plan:active,.addon:active{transform:scale(.98)!important;transition-duration:.08s}
@media (prefers-reduced-motion:reduce){.plan:hover,.addon:hover,.ind3:hover,.layer:hover,.mate:hover,.next a:hover,.tz:hover,a.btn:hover{transform:none}}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.qs details{border-bottom:1px solid var(--line)}
.qs details:first-child{border-top:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-weight:500;font-size:17px}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--mute);transition:transform .2s}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs details p{color:var(--ink-2);padding:0 0 20px;max-width:62ch}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:28px}}

/* cta band */
.band{position:relative;border-radius:22px;overflow:hidden;background:#0A0A0A;border:1px solid var(--band-line);color:#FAFAF8;min-height:420px;display:flex;align-items:flex-end}
.band canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.45) 50%,rgba(10,10,10,0) 80%)}
.band .in{position:relative;z-index:1;padding:48px;max-width:640px;display:flex;flex-direction:column;gap:18px}
.band h2{font-size:clamp(36px,5vw,60px);color:#FAFAF8}
.band p{color:rgba(250,250,248,.8);font-size:17px}
.band .btn-or{align-self:flex-start}
.form{display:flex;gap:8px;flex-wrap:wrap}
.form input{flex:1;min-width:0;font:400 15px var(--display);padding:14px 16px;border-radius:999px;border:1px solid rgba(250,250,248,.3);background:rgba(250,250,248,.08);color:#FAFAF8}
.form input::placeholder{color:rgba(250,250,248,.55)}
.note{font:400 12px var(--mono);color:rgba(250,250,248,.6)}
@media (max-width:600px){.band .in{padding:24px 14px 14px}.form .btn{width:100%;justify-content:center}}

/* footer */
footer{padding-block:90px 50px}
.flogo{color:var(--ink);margin-bottom:56px}
.flogo svg{width:100%;height:auto;display:block}
.fcols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.fcols div{display:flex;flex-direction:column;gap:8px}
.fcols b{color:var(--ink);font-weight:600;margin-bottom:4px}
.fcols a{text-decoration:none}.fcols a:hover{color:var(--ink)}
.disc{margin-top:40px;font-size:12.5px;color:var(--mute);max-width:70ch}
.legal{margin-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px var(--mono);color:var(--mute)}
/* guide cards: the home page's "From the guides" band, the hub and "Keep reading" */
.g-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:26px;min-height:260px;transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s cubic-bezier(.2,.8,.2,1),border-color .18s}
.g-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -24px rgba(10,10,10,.38);border-color:var(--ink)}
.g-card:active{transform:scale(.98)}
.g-card .label{font-size:11px}
.g-card b{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.g-card p{color:var(--ink-2);font-size:15px}
.g-card .g-m{margin-top:auto;font:500 12px var(--mono);color:var(--mute);display:flex;justify-content:space-between;gap:10px}
.g-card.feat{grid-column:span 2;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-card.feat b{font-size:clamp(26px,3vw,36px);max-width:22ch}
.g-card.feat p{color:color-mix(in srgb,var(--paper) 78%,transparent);max-width:56ch}
.g-card.feat .label,.g-card.feat .g-m{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.g-card[hidden]{display:none}
@media (max-width:980px){.g-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g-cards{grid-template-columns:1fr}.g-card.feat{grid-column:auto}}
.g-all{margin-top:28px}

/* Guides: the hub and every article. Loaded after the home page's own CSS (build_site.py extracts it to assets/site.css),
   so tokens, nav, buttons, frames and footer match the home page exactly. */
.links a[aria-current]{color:var(--ink)}

/* Guide pages scroll the window, so sticky nav and contents work (the home page clips the body instead) */
html,body{overflow-x:clip}

/* hub */
.g-hero{padding-block:96px 40px}
.g-hero .frame{padding:48px 44px}
.g-hero h1{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.05em;line-height:.95;margin:22px 0 20px}
.g-hero h1 span{color:var(--mute)}
.g-filter{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 28px}
.g-filter button{font:500 13px var(--mono);letter-spacing:.02em;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:8px 14px;border-radius:999px;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.g-filter button:hover{border-color:var(--ink)}
.g-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.g-list{padding-block:12px 100px}
@media (max-width:640px){.g-cards{grid-template-columns:1fr}.g-card.feat{grid-column:auto}.g-hero .frame{padding:32px 22px}.g-hero{padding-block:64px 24px}}

/* article */
.crumbs{font:500 12px var(--mono);color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;padding-top:40px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.g-head{padding-block:56px 48px}
.g-head .frame{padding:44px}
.g-head h1{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.045em;line-height:1;margin:20px 0 18px;max-width:20ch}
.g-head .lede{max-width:62ch}
.g-meta{margin-top:24px;font:500 12.5px var(--mono);color:var(--mute);display:flex;gap:6px 18px;flex-wrap:wrap}
.g-meta b{color:var(--ink-2);font-weight:500}
@media (max-width:640px){.g-head .frame{padding:28px 20px}.g-head{padding-block:40px 32px}}

.g-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;padding-bottom:100px}
.g-toc{position:sticky;top:96px;align-self:start;font-size:14px}
.g-toc b{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.g-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;border-left:1px solid var(--line)}
.g-toc a{display:block;padding-left:14px;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35}
.g-toc a:hover,.g-toc a.on{color:var(--ink);border-left-color:var(--orange)}
@media (max-width:980px){.g-grid{grid-template-columns:minmax(0,1fr);gap:0}.g-toc{display:none}}
.prose{min-width:0}

.prose{max-width:70ch;font-size:17.5px;line-height:1.7;color:var(--ink)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;line-height:1.12;margin-top:2.2em;scroll-margin-top:96px}
.prose h3{font-size:21px;letter-spacing:-.02em;line-height:1.25;margin-top:1.8em}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--orange)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.45em}
.prose ul li::marker{color:var(--orange)}
.prose ol li::marker{font:500 .85em var(--mono);color:var(--mute)}

.answer{border:1px solid var(--ink);background:var(--surface);border-radius:var(--r);padding:24px 26px;position:relative}
.answer>b:first-child{display:inline-flex;align-items:center;gap:8px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.answer>b:first-child::before{content:"";width:8px;height:8px;background:var(--orange)}
.answer p{color:var(--ink);font-size:18px;line-height:1.6}
.answer ul{margin-top:12px}

.call{border-left:3px solid var(--orange);background:var(--orange-soft);border-radius:0 var(--r) var(--r) 0;padding:16px 20px}
.call p,.call li{color:var(--ink)}
.call.good{border-left-color:var(--good);background:var(--good-bg)}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tbl th{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--ink);font-weight:500}
.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:baseline}
.dot.g{background:var(--good)}.dot.a{background:var(--warn)}.dot.r{background:var(--bad)}

.steps{list-style:none;padding:0!important;counter-reset:s;display:grid;gap:12px}
.steps li{counter-increment:s;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px 16px 58px;position:relative;margin:0!important}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:16px;font:500 13px var(--mono);color:var(--orange)}
.steps li b{color:var(--ink);display:block;margin-bottom:2px}

.tpl{border:1px dashed var(--guide);border-radius:var(--r);background:var(--surface)}
.tpl-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px dashed var(--guide);font:500 12px var(--mono);color:var(--sel)}
.tpl-bar span{display:flex;gap:8px}
.tbtn{font:500 12px var(--mono);border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:7px 12px;border-radius:999px;cursor:pointer}
.tbtn:hover{border-color:var(--ink)}
.tpl-body{padding:24px 26px;font-size:15.5px;line-height:1.65}
.tpl-body h4{margin:1.4em 0 .4em;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.tpl-body h4:first-child{margin-top:0}
.tpl-body p,.tpl-body li{color:var(--ink-2)}
.tpl-body ul{padding-left:1.2em;margin:.3em 0}
.tpl-body .blank{border-bottom:1px solid var(--ink-2);display:inline-block;min-width:9em;color:var(--mute)}

.g-faq{margin-top:3em}
.g-faq .qs summary{font-size:17px}
.g-cta{margin-top:3em;border-radius:22px;background:var(--ink);color:var(--paper);padding:36px;display:grid;gap:14px}
.g-cta b{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.03em;line-height:1.1;font-weight:600}
.g-cta p{color:color-mix(in srgb,var(--paper) 78%,transparent)!important;max-width:54ch}
.g-cta .btn{justify-self:start}
.g-src{margin-top:3em;border-top:1px solid var(--line);padding-top:24px}
.g-src b{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.g-src ol{font-size:14px;margin-top:12px}
.g-src li{color:var(--mute)!important}
.g-src a{color:var(--ink-2)}
.g-more{padding-block:0 100px}
.g-more h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:28px}

@media print{
  .nav,footer,.g-toc,.crumbs,.g-cta,.g-more,.tpl-bar,.g-src,.g-faq,.rails::before,.rails::after{display:none!important}
  body{background:#fff;color:#000}
  .print-tpl .prose>*:not(.tpl){display:none}
  .print-tpl .g-head{display:none}
  .tpl{border:0}
}

/* services: the hub and each service page */
.sv-hub{padding-block:12px 40px;display:grid;gap:56px}
.sv-ghead{margin-bottom:18px}
.sv-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:26px;min-height:230px;transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s cubic-bezier(.2,.8,.2,1),border-color .18s}
.sv-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -24px rgba(10,10,10,.38);border-color:var(--ink)}
.sv-card:active{transform:scale(.98)}
.sv-card .label{font-size:11px}
.sv-card b{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.sv-card p{color:var(--ink-2);font-size:15px}
.sv-price{margin-top:auto;font:500 13px var(--mono);color:var(--ink);border-top:1px dashed var(--guide);padding-top:12px}
.sv-card.feat{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sv-hero .frame{padding:44px}
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:end}
.sv-hero h1{max-width:18ch}
/* Long words like "implementation" stay inside the column on the narrowest phones */
@media (max-width:360px){.g-head h1{font-size:29px}}
.sv-hero .ctas{margin-top:26px}
.sv-pricebox{border:1px solid var(--ink);background:var(--surface);border-radius:var(--r);padding:22px;display:grid;gap:6px}
.sv-pricebox .k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sv-pricebox strong{font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.sv-pricebox strong s{font-size:.55em;color:var(--mute);font-weight:500;margin-right:.3em;text-decoration-thickness:2px;vertical-align:.2em}
.sv-pricebox .n{font:500 12px var(--mono);color:var(--good)}
@media (max-width:860px){.sv-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}.sv-hero .frame{padding:28px 20px}}
.sv-body{max-width:1000px;padding-bottom:60px;font-size:17px;line-height:1.65}
.sv-body>section,.sv-body>.sv-sec{margin-top:64px}
.sv-body>section:first-child,.sv-body>.sv-sec:first-child{margin-top:8px}
.sv-body h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.035em;line-height:1.08;margin-bottom:18px;scroll-margin-top:96px;max-width:22ch}
.sv-body h3{font-size:20px;letter-spacing:-.02em;margin:1.4em 0 .4em}
.sv-body p{color:var(--ink-2);max-width:68ch}
.sv-body p+p{margin-top:1em}
.sv-body a{text-decoration-color:var(--orange);text-underline-offset:3px}
.sv-incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.sv-incl>div{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:20px;display:grid;gap:6px;align-content:start}
.sv-incl b{font-weight:600;letter-spacing:-.01em;display:flex;gap:10px;align-items:baseline}
.sv-incl b::before{content:"";flex:none;width:8px;height:8px;background:var(--orange);transform:translateY(-1px)}
.sv-incl p{font-size:15px}
@media (max-width:900px){.sv-incl{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sv-incl{grid-template-columns:1fr}}
.sv-fit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.sv-fit>div{border-radius:var(--r);padding:22px;border:1px solid var(--line);background:var(--surface)}
.sv-fit .yes{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:var(--good-bg)}
.sv-fit b{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.sv-fit .yes b{color:var(--good)}.sv-fit .no b{color:var(--mute)}
.sv-fit ul{margin:0;padding-left:1.2em;display:grid;gap:6px;font-size:15.5px}
.sv-fit li{color:var(--ink-2)}
@media (max-width:700px){.sv-fit{grid-template-columns:1fr}}
.sv-body .steps,.sv-body .tbl,.sv-body .call{margin-top:22px}
.sv-body .g-faq{margin-top:64px}
.sv-body .g-faq h2{margin-bottom:8px}
.sv-group+.sv-group{margin-top:0}
.links a[href$="services/"][aria-current]{color:var(--ink)}

.g-pub{font:400 11.5px var(--mono);color:var(--mute);margin:-60px 0 60px;opacity:.8}
.sv-group{scroll-margin-top:90px}