/* SalesAgents — one stylesheet for every page (EN + SL). Pixel-art stage, light theme, coral accent. */
/* Theme tokens are named by role, not by color: a theme change is this one block. */
:root{
  /* surfaces */
  --bg:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F3EF; --nav-bg:rgba(251,250,247,.9);
  --line:#DCD9D1; --line-strong:#8A867D;
  /* text */
  --text:#14181A; --text-muted:#565E59;
  --code-bg:#F4F5F2; --code-text:#1E2622; --field-bg:#FFFFFF;
  /* accent: bright coral for fills, darker coral for text and thin lines on white (AA) */
  --acc:#FF7A4D; --acc-hi:#FF936C; --acc-text:#C73E14; --acc-text-hi:#A3320F;
  --on-accent:#14181A;   /* text on --acc fills */
  --on-strong:#FFFFFF;   /* text on the darker color fills below */
  /* secondary colors, all AA as text on white */
  --green:#0E7C4A; --yellow:#A35A00; --red:#C8173C; --purple:#7444C8; --sky:#0B6AAE;
  /* hard pixel shadows */
  --shadow:rgba(20,24,26,.13); --scanline:rgba(20,24,26,.035);
  --head:'Space Grotesk',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --pixel:'Press Start 2P',monospace;
  --pixhead:'Pixelify Sans','Press Start 2P',monospace;
  --mono:'VT323',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:16px; --max:1180px; --edge:clamp(16px,3vw,48px); --nav:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
/* Press Start 2P has no Č: Slovenian pages use Silkscreen (full latin-ext) for every pixel label */
html[lang="sl"]{--pixel:'Silkscreen','Press Start 2P',monospace}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-weight:300;font-size:clamp(17px,1.05vw + 12px,19px);line-height:1.55;overflow-x:hidden;min-height:100vh}
img,video,svg{display:block;max-width:100%}
a{color:var(--acc-text)}
a:hover{color:var(--acc-text-hi)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
h2{font-size:clamp(30px,3.6vw + 8px,56px)}
h3{font-size:clamp(20px,1.3vw + 12px,26px);letter-spacing:-.01em}
p{margin:0}
strong,b{font-weight:600;color:var(--text)}
code{font-family:var(--mono);font-size:1.05em;background:var(--code-bg);border:2px solid var(--line);padding:0 6px;color:var(--code-text);overflow-wrap:anywhere}
pre code{border:0;padding:0;background:none;font-size:inherit}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.sec{padding:clamp(72px,9vw,128px) 0;position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.sec > .wrap{position:relative;z-index:1}
.eyebrow{font-family:var(--pixel);font-size:10px;line-height:1.8;letter-spacing:.04em;text-transform:uppercase;color:var(--acc-text);margin:0 0 18px}
.eyebrow.y{color:var(--yellow)} .eyebrow.g{color:var(--green)} .eyebrow.r{color:var(--red)} .eyebrow.p{color:var(--purple)} .eyebrow.s{color:var(--sky)}
.lead{color:var(--text-muted);font-size:clamp(18px,1.1vw + 12px,22px);max-width:62ch;margin-top:18px}
.muted{color:var(--text-muted)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed!important;left:16px;top:16px;width:auto;height:auto;clip:auto;white-space:normal;z-index:100;padding:12px 16px;background:var(--yellow);color:var(--on-strong);font-family:var(--head);font-weight:700;border:4px solid var(--text);text-decoration:none;outline:none}
.scan::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 2px);z-index:0}
.checker{background-color:var(--surface);background-image:conic-gradient(var(--surface-2) 25%,var(--surface) 0 50%,var(--surface-2) 0 75%,var(--surface) 0);background-size:24px 24px}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.d1.in{transition-delay:.1s}.js .rv.d2.in{transition-delay:.2s}.js .rv.d3.in{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- buttons, stamps, wordmark ---------- */
.btn{--c:var(--acc);display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;padding:15px 22px;border:4px solid var(--c);background:var(--c);color:var(--on-accent);cursor:pointer;line-height:1;transition:transform .12s var(--ease),background .12s,color .12s;white-space:nowrap}
.btn:hover{background:var(--acc-hi);border-color:var(--acc-hi);color:var(--on-accent);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
.btn:active{transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--text);color:var(--text)}
.btn[disabled]{opacity:.6;cursor:wait}
.stamp{--c:var(--acc-text);display:inline-flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:10px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--c);border:4px solid var(--c);padding:9px 10px 8px;background:var(--surface);white-space:nowrap}
.stamp.g{--c:var(--green)} .stamp.y{--c:var(--yellow)} .stamp.r{--c:var(--red)} .stamp.p{--c:var(--purple)} .stamp.s{--c:var(--sky)} .stamp.w{--c:var(--text)}
.stamp img.tl{width:16px;height:16px;display:inline-block}
.stamps{display:flex;flex-wrap:wrap;gap:10px}
.wordmark{display:inline-flex;align-items:center;text-decoration:none;padding:8px 0;line-height:1}
.wordmark img{height:26px;width:auto;image-rendering:pixelated}
.wordmark .tag{display:block;font-family:var(--pixel);font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-top:6px}
.wm{display:inline-flex;align-items:center;gap:.25em;font-family:var(--head);font-weight:700;white-space:nowrap}
.wm img{height:.9em;width:auto;image-rendering:pixelated}
.wm b{color:var(--acc-text)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav);background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav a:hover{text-decoration:none}
.nav .wrap{width:100%;max-width:none;margin:0;padding:0 var(--edge);height:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px}
.nav .wrap > nav{justify-self:center}
.nav ul{list-style:none;margin:0;padding:0;display:none;gap:10px;align-items:center}
@media (min-width:900px){.nav ul{display:flex}}
@media (max-width:899px){.nav .wrap > nav{display:none}}
.nav li a.nb{--c:var(--acc-text);--oc:var(--on-strong);display:inline-flex;align-items:center;gap:7px;font-family:var(--pixel);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:var(--text);background:var(--surface);border:3px solid var(--c);box-shadow:3px 3px 0 var(--c);padding:8px 10px 8px 8px;min-height:38px;white-space:nowrap;text-decoration:none;transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s,color .12s}
.nav li a.nb .ic{display:inline-flex;color:var(--c)}
.nav li a.nb .ic svg{width:16px;height:16px;shape-rendering:crispEdges}
.nav li a.nb:hover,.nav li a.nb:focus-visible,.nav li a.nb.on{background:var(--c);color:var(--oc)}
.nav li a.nb:hover,.nav li a.nb:focus-visible{box-shadow:0 0 0 var(--c);transform:translate(3px,3px)}
.nav li a.nb:hover .ic,.nav li a.nb:focus-visible .ic,.nav li a.nb.on .ic{color:var(--oc)}
.nb-how{--c:var(--acc-text)!important} .nb-mod{--c:var(--purple)!important} .nb-mcp{--c:var(--green)!important} .nb-pricing{--c:var(--yellow)!important} .nb-docs{--c:var(--sky)!important}
.nav .nav-r{justify-self:end;display:flex;align-items:center;gap:12px}
.nav a.lang{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:0 10px;font-family:var(--pixel);font-size:10px;letter-spacing:.06em;color:var(--text);background:transparent;border:3px solid var(--line-strong);text-decoration:none}
.nav a.lang:hover,.nav a.lang:focus-visible{border-color:var(--text)}
.btn.sm{padding:11px 16px;font-size:14px;border-width:3px;min-height:44px}
.btn.sm.start{font-family:var(--pixel);font-size:12px;letter-spacing:.08em;padding:13px 18px;min-height:46px;background:var(--surface);color:var(--text);border:3px solid var(--acc);box-shadow:3px 3px 0 var(--acc);text-transform:uppercase}
.btn.sm.start:hover{background:var(--acc);color:var(--on-accent);box-shadow:0 0 0 var(--acc);transform:translate(3px,3px)}
.btn.sm.start .pl{display:inline-block;color:var(--acc-text);animation:pl-blink 1s steps(2,end) infinite}
.btn.sm.start:hover .pl{color:var(--on-accent);animation:none}
@keyframes pl-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.btn.sm.start .pl{animation:none}.nav li a.nb{transition:none}}
@media (min-width:900px) and (max-width:1199px){
  .nav .wrap{column-gap:10px}.nav ul{gap:6px}
  .nav li a.nb{font-size:9px;letter-spacing:.02em;gap:5px;padding:7px 6px}
  .nav li a.nb .ic svg{width:12px;height:12px}
  .nav .btn.sm.start{font-size:11px;padding:12px 12px;letter-spacing:.04em}
  .nav .nav-r{gap:8px}
}
@media (min-width:900px) and (max-width:1019px){.nav li a.nb .ic{display:none}.wordmark .tag{display:none}}
@media (max-width:899px){.wordmark img{height:22px}.wordmark .tag{display:none}.nav a.lang{display:none}}

/* background mark (below the fold) */
.pm-wrap{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease}
.pm-wrap.on,.pm-wrap.always{opacity:1}
.page-mark{position:absolute;right:-4vw;top:8vh;width:min(54vw,860px);height:min(54vw,860px);background:url("/assets/brand/mark-mono-ink.svg?v=1") no-repeat center/contain;image-rendering:pixelated;opacity:.03;animation:pm-breathe 9s ease-in-out infinite alternate}
@keyframes pm-breathe{from{opacity:.022;transform:translateY(0)}to{opacity:.038;transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.page-mark{animation:none}}
@media (max-width:899px){.page-mark{right:-22vw;top:12vh;width:90vw;height:90vw}}

/* ---------- homepage hero ---------- */
#hero{position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
#hero .hero-anim{position:relative;flex:none;height:clamp(220px,40vh,340px);z-index:0}
#hero .hero-anim canvas{display:block;width:100%;height:100%}
.hero-overlay{position:relative;z-index:20;order:-1;padding:20px var(--gutter) 18px;max-width:680px}
@media (min-width:900px){
  #hero{display:block;height:min(calc(100svh - var(--nav)),calc(100vw * .5625));min-height:600px}
  #hero .hero-anim{position:absolute;inset:0;height:100%}
  .hero-overlay{position:absolute;left:var(--edge);right:var(--edge);top:clamp(24px,5vh,64px);padding:0;max-width:none;pointer-events:none;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);column-gap:clamp(24px,3vw,56px);align-items:start}
  .hero-overlay > *{pointer-events:auto}
}
.js .hero-overlay > *{animation:rise .8s var(--ease) both}
.js .hero-overlay > :nth-child(2){animation-delay:.14s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .hero-overlay > *{animation:none}}
.hero-overlay h1{font-size:clamp(32px,4.2vw + 8px,64px);text-wrap:balance}
@media (min-width:900px){.hero-overlay h1{font-size:clamp(36px,min(3vw + 8px,6.6vh),66px)}}
.hero-overlay h1 .b{color:var(--acc-text)}
.hero-lead{margin:18px 0 0;max-width:52ch;font-size:clamp(16px,.9vw + 10px,21px);line-height:1.5;color:var(--text-muted)}
.hero-lead strong{color:var(--text)}
.hero-inst{border:4px solid var(--line);background:var(--surface);box-shadow:8px 8px 0 var(--shadow);overflow:hidden}
.hi-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border-bottom:3px solid var(--line);padding:0 14px;min-height:34px}
.hi-tag{font-family:var(--pixel);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--acc-text);white-space:nowrap}
.hi-ask{font-weight:600;font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi-b{display:grid;grid-template-columns:clamp(150px,24%,210px) minmax(0,1fr);gap:7px 10px;padding:10px}
.hi-how{grid-column:1 / -1;font-size:12.5px;line-height:1.35;color:var(--text-muted)}
.hi-s{width:100%;font-family:var(--body);font-weight:500;font-size:14px;color:var(--text);background:var(--field-bg);border:3px solid var(--line-strong);padding:0 10px;min-height:44px;cursor:pointer;border-radius:0}
.hi-s:hover{border-color:var(--acc-text)}
.hi-code{position:relative;min-width:0;display:flex}
.hi-pre{flex:1;min-width:0;margin:0;background:var(--code-bg);border:3px solid var(--line);padding:9px 44px 9px 11px;font-family:var(--mono);font-size:17px;line-height:1.25;color:var(--code-text);white-space:pre-wrap;overflow-wrap:anywhere;display:flex;align-items:center}
.hi-copy{position:absolute;top:6px;right:6px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line-strong);background:var(--surface-2);color:var(--text-muted);cursor:pointer}
.hi-copy:hover{color:var(--on-accent);background:var(--acc);border-color:var(--acc-text)}
.hi-copy .ic-d{display:none}
.hi-copy.done{color:var(--on-strong);background:var(--green);border-color:var(--green)}
.hi-copy.done .ic-c{display:none}.hi-copy.done .ic-d{display:inline-flex}
.hi-mail{border-top:3px solid var(--line);padding:9px 10px 8px;display:grid;gap:6px}
.hi-ml{font-size:13px;color:var(--text-muted)}
.hi-mr{display:flex;gap:8px}
.hi-mr input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 10px;background:var(--field-bg);color:var(--text);border:3px solid var(--line-strong);border-radius:0}
.hi-mr input:focus{outline:none;border-color:var(--acc-text)}
.hi-send{font-family:var(--pixel);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:0 14px;background:var(--acc);color:var(--on-accent);border:3px solid var(--acc);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;min-height:44px}
.hi-mail .note{font-size:12.5px;color:var(--text-muted)}.hi-mail .note:empty{display:none}.hi-mail .note.ok{color:var(--green)}.hi-mail .note.err{color:var(--red)}
.hero-say{margin-top:14px;display:grid;gap:8px}
.hero-say .k{font-family:var(--pixel);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--yellow)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:19px;line-height:1.1;color:var(--text);background:var(--surface);border:3px solid var(--line);padding:6px 10px;box-shadow:3px 3px 0 var(--shadow)}
.chip::before{content:"› ";color:var(--acc-text)}
@media (max-width:899px){
  .hero-inst{margin-top:20px;box-shadow:6px 6px 0 var(--shadow)}
  .hi-bar{flex-wrap:wrap;padding:9px 12px;gap:4px 10px}.hi-ask{white-space:normal}
  .hi-b{grid-template-columns:1fr}
  .hi-mr{flex-wrap:wrap}.hi-mr input{flex-basis:100%;min-height:44px}.hi-send{width:100%}
}
.hero-hint{display:none;position:absolute;z-index:20;left:50%;transform:translateX(-50%);bottom:24px;font-family:var(--pixel);font-size:9px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:10px}
@media (min-width:900px){.hero-hint{display:flex}}
.hero-hint i{display:block;width:8px;height:8px;background:var(--acc);animation:hint 1.4s steps(4) infinite}
@keyframes hint{0%{transform:translateY(-6px);opacity:.2}100%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-hint i{animation:none}}

/* ---------- steps ---------- */
.steps{display:grid;gap:14px;margin:44px 0 0;padding:0;list-style:none;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border:4px solid var(--line);background:var(--surface);padding:26px 24px;counter-increment:s;transition:border-color .2s;min-width:0}
.step:hover{border-color:var(--acc-text)}
.step .n{font-family:var(--pixel);font-size:10px;color:var(--acc-text);margin-bottom:16px;display:flex;justify-content:space-between;gap:10px}
.step .n::before{content:"0" counter(s)}
.step .n span{color:var(--text-muted)}
.step h3{margin-bottom:10px}
.step p{color:var(--text-muted);font-size:17px}

/* ---------- install tabs ---------- */
.itabs{margin-top:36px;border:4px solid var(--line);background:var(--surface);min-width:0}
.itabs [role=tablist]{display:flex;flex-wrap:wrap;gap:0;border-bottom:3px solid var(--line);background:var(--surface-2)}
.itabs [role=tab]{font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:transparent;border:0;border-right:3px solid var(--line);padding:14px 14px;min-height:48px;cursor:pointer;line-height:1.3}
.itabs [role=tab][aria-selected=true]{color:var(--on-accent);background:var(--acc)}
.itabs [role=tab]:hover:not([aria-selected=true]){color:var(--text)}
.itabs [role=tabpanel]{padding:16px 18px 18px}
.itabs [role=tabpanel][hidden]{display:none}
.iline{display:flex;gap:10px;align-items:stretch;min-width:0}
.iline pre{flex:1;min-width:0;margin:0;background:var(--code-bg);border:3px solid var(--line);padding:12px 14px;font-family:var(--mono);font-size:19px;line-height:1.3;color:var(--code-text);white-space:pre-wrap;overflow-wrap:anywhere}
.ihow{margin:12px 0 0;font-size:15.5px;color:var(--text-muted)}
.ihow code{font-size:1em}
.copy{font-family:var(--pixel);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:transparent;border:3px solid var(--line-strong);padding:8px 10px;min-height:44px;min-width:64px;cursor:pointer;transition:color .15s,border-color .15s;flex:none}
.copy:hover{color:var(--text);border-color:var(--acc-text)}
.copy.done{color:var(--green);border-color:var(--green)}
@media (max-width:599px){.iline{flex-direction:column}.iline pre{font-size:17px}.itabs [role=tab]{flex:1 1 50%;border-bottom:3px solid var(--line)}}
.inst-more{margin-top:14px;font-size:16px;color:var(--text-muted)}
.works{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.works .k{font-family:var(--mono);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-right:6px}
.works .stamp{font-size:9px;padding:7px 8px 6px;border-width:3px}

/* email me the line */
.mailme{margin-top:18px;border:3px solid var(--line);background:var(--surface);padding:16px 18px}
.mailme label{display:block;font-size:16px;color:var(--text-muted);margin-bottom:10px}
.mailme label .k{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-text);margin-right:8px}
.mailme .row{display:flex;gap:10px;flex-wrap:wrap}
.mailme input[type=email]{flex:1 1 240px;font:inherit;font-size:17px;padding:12px 14px;background:var(--field-bg);color:var(--text);border:3px solid var(--line-strong);outline:none;min-width:0;border-radius:0}
.mailme input[type=email]:focus{border-color:var(--acc-text)}
.mailme .note{margin:10px 0 0;font-size:15px;color:var(--text-muted);min-height:1.2em}
.mailme .note.ok{color:var(--green)}.mailme .note.err{color:var(--red)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- modules ---------- */
.mods{display:grid;gap:14px;margin-top:40px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.mod{--c:var(--acc-text);border:4px solid var(--line);border-top:6px solid var(--c);background:var(--surface);box-shadow:6px 6px 0 var(--shadow);padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mod .mi{display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--c);line-height:1.4}
.mod .mi svg{width:24px;height:24px;flex:none;shape-rendering:crispEdges;color:var(--c)}
.mod h3{font-family:var(--pixhead);font-size:22px;line-height:1.15}
.mod p{color:var(--text-muted);font-size:15.5px;line-height:1.5}
.mod .say{margin-top:auto;font-family:var(--mono);font-size:18px;line-height:1.2;color:var(--text);border-top:3px solid var(--line);padding-top:10px}
.mod .say::before{content:"› ";color:var(--c)}
.mod.c2{--c:var(--purple)}.mod.c3{--c:var(--green)}.mod.c4{--c:var(--yellow)}.mod.c5{--c:var(--sky)}.mod.c6{--c:var(--red)}
.mod.si{border-style:dashed;border-top-style:solid}

/* ---------- what you say ---------- */
.says{margin-top:40px;display:grid;gap:12px}
@media (min-width:960px){.says{grid-template-columns:1fr 1fr}}
.sayrow{display:grid;grid-template-columns:1fr;gap:8px;border:4px solid var(--line);background:var(--surface);padding:16px 18px;min-width:0}
.sayrow q{quotes:none;font-family:var(--mono);font-size:22px;line-height:1.2;color:var(--text)}
.sayrow q::before{content:"› ";color:var(--acc-text)}
.sayrow p{color:var(--text-muted);font-size:15.5px;line-height:1.5}
.sayrow .tag{font-family:var(--pixel);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}

/* ---------- start free ---------- */
.frees{display:grid;gap:14px;margin-top:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.free{border:4px solid var(--line);background:var(--surface);padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.free .n{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.free q{quotes:none;font-family:var(--mono);font-size:21px;line-height:1.2;color:var(--text);background:var(--code-bg);border:3px solid var(--line);padding:10px 12px;display:block}
.free p{color:var(--text-muted);font-size:15.5px;line-height:1.5}

/* ---------- privacy panes ---------- */
.two{display:grid;gap:16px;margin-top:36px}
@media (min-width:760px){.two{grid-template-columns:1fr 1fr}}
.pane{border:4px solid var(--line);background:var(--surface);padding:20px 22px 22px;min-width:0}
.pane.ok{border-color:var(--green)}.pane.no{border-color:var(--red)}.pane.acc{border-color:var(--acc-text)}
.pane h3{font-family:var(--pixel);font-size:10px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.pane.ok h3{color:var(--green)}.pane.no h3{color:var(--red)}.pane.acc h3{color:var(--acc-text)}
.pane ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pane li{font-size:16.5px;line-height:1.45;color:var(--text);padding-left:24px;position:relative}
.pane li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:20px;line-height:1.1}
.pane.ok li::before{content:"✓";color:var(--green)}.pane.no li::before{content:"✕";color:var(--red)}.pane.acc li::before{content:"›";color:var(--acc-text)}
.flowline{margin-top:28px;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:900px){.flowline{grid-template-columns:repeat(4,1fr)}}
.flowline .st{border:4px solid var(--line);background:var(--surface);padding:16px 18px 18px;min-width:0}
.flowline .st .k{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;color:var(--acc-text);display:block;margin-bottom:10px;text-transform:uppercase}
.flowline .st.local{border-color:var(--green)}.flowline .st.local .k{color:var(--green)}
.flowline .st h3{font-size:18px;line-height:1.2;margin:0 0 8px}
.flowline .st p{color:var(--text-muted);font-size:15.5px;line-height:1.45}

/* ---------- facts / about ---------- */
.about{display:grid;gap:30px;margin-top:40px}
@media (min-width:900px){.about{grid-template-columns:1fr 1fr;gap:56px;align-items:center}}
.about p{color:var(--text-muted);font-size:clamp(18px,1.1vw + 12px,22px);line-height:1.5}
.about p + p{margin-top:16px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fact{border:4px solid var(--line);background:var(--surface);padding:20px 18px;min-width:0}
.fact .v{font-family:var(--pixel);font-size:clamp(15px,1.2vw + 8px,24px);color:var(--text);line-height:1.2}
.fact .l{font-family:var(--mono);font-size:18px;line-height:1;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:12px}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;display:grid;gap:10px}
.faq details{border:4px solid var(--line);background:var(--surface)}
.faq details[open]{border-color:var(--acc-text)}
.faq summary{cursor:pointer;list-style:none;padding:20px 22px;font-family:var(--head);font-weight:700;font-size:clamp(18px,1vw + 12px,22px);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--pixel);font-size:12px;color:var(--acc-text);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 22px;color:var(--text-muted);font-size:17px;max-width:70ch}
.faq-g{margin:26px 0 4px;font-family:var(--pixel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-text)}
.faq-g:first-child{margin-top:0}

/* ---------- CTA box ---------- */
.cta-box{border:4px solid var(--acc);background:var(--surface);padding:32px 28px;margin:56px 0 40px;display:grid;gap:16px}
@media (min-width:760px){.cta-box{grid-template-columns:1fr auto;align-items:center}}
.cta-box h2{font-size:clamp(24px,1.6vw + 12px,32px);line-height:1.1;margin:0 0 8px}
.cta-box p{color:var(--text-muted);font-size:17px}
.cta-box .acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{border-top:4px solid var(--line);padding:44px 0 36px;background:var(--surface-2)}
.foot .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px;align-items:flex-start}
.foot .col{display:grid;gap:8px;min-width:0}
.foot .col .h{font-family:var(--mono);font-size:18px;line-height:1;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}
.foot a{color:var(--text-muted);text-decoration:none;font-size:15px;display:inline-block;padding:6px 0}
.foot a:hover{color:var(--text)}
.foot .bot{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:15px;color:var(--text-muted)}
.foot .bot b{color:var(--text);font-weight:500}
.foot .bot .mono{font-family:var(--mono);font-size:20px;line-height:1}
.foot .paper{max-width:360px}
.foot .paper .stamp{font-size:9px;padding:7px 9px}

/* ---------- document pages (/start, /mcp, /pricing, /docs, legal) ---------- */
.doc{width:min(900px,100% - 32px);margin-inline:auto}
.page-hero{padding:64px 0 12px}
.page-hero h1{font-size:clamp(32px,3.6vw + 8px,56px);line-height:1.04;margin:0 0 18px;max-width:22ch}
.page-hero h1 .b{color:var(--acc-text)}
.page-hero .dek{color:var(--text-muted);font-size:clamp(18px,1.1vw + 12px,22px);line-height:1.45;max-width:62ch}
article.post{padding:12px 0 40px}
article.post > p,article.post .p{margin:0 0 20px}
article.post h2{font-size:clamp(26px,1.6vw + 14px,36px);line-height:1.12;margin:56px 0 18px}
article.post h3{font-size:21px;line-height:1.25;margin:32px 0 10px}
article.post ul.list,article.post ol.list{padding-left:24px;margin:0 0 22px}
article.post ul.list li,article.post ol.list li{margin:0 0 8px}
article.post li::marker{color:var(--acc-text)}
.endpoint{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border:4px solid var(--line);background:var(--surface);padding:14px 16px;margin:26px 0 10px}
.endpoint .lbl{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-text)}
.endpoint .u{font-family:var(--mono);font-size:clamp(18px,1vw + 12px,22px);color:var(--text);overflow-wrap:anywhere;min-width:0}
.endpoint .s{font-family:var(--mono);font-size:17px;color:var(--green);margin-left:auto}
@media (max-width:560px){.endpoint .s{margin-left:0}}
.inst{border:4px solid var(--line);background:var(--surface);margin:0 0 14px;min-width:0}
.inst > .h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:3px solid var(--line)}
.inst > .h .n{font-family:var(--head);font-weight:700;font-size:17px}
.inst > .h .w{font-family:var(--mono);font-size:17px;color:var(--text-muted)}
.inst > .h .copy{margin-left:auto}
.inst pre{margin:0;background:var(--code-bg);padding:14px 16px;font-family:var(--mono);font-size:19px;line-height:1.3;color:var(--code-text);white-space:pre-wrap;overflow-wrap:anywhere}
.inst .note{padding:10px 16px 14px;color:var(--text-muted);font-size:15.5px;margin:0}
.tbl{overflow-x:auto;margin:0 0 28px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:16.5px}
.tbl table{min-width:520px}
th,td{border:3px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{font-family:var(--head);font-weight:700;background:var(--surface)}
td code{font-size:1em}
.box{border:4px solid var(--line);background:var(--surface);padding:20px 22px;margin:28px 0}
.box.acc{border-color:var(--acc-text)}.box.todo{border-color:var(--yellow);border-style:dashed}
.box .t{font-family:var(--pixel);font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;color:var(--acc-text)}
.box.todo .t{color:var(--yellow)}
.box p + p{margin-top:12px}
.sig-note{font-family:var(--mono);font-size:18px;color:var(--text-muted);line-height:1.4}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.toc a{font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);text-decoration:none;border:3px solid var(--line);padding:10px 10px;min-height:40px;display:inline-flex;align-items:center}
.toc a:hover{border-color:var(--acc-text)}
/* forms (access request) */
.form{display:grid;gap:12px;margin:0 0 10px}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.form label{display:grid;gap:6px;font-size:15px;color:var(--text-muted);min-width:0}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:11px 12px;background:var(--field-bg);color:var(--text);border:3px solid var(--line-strong);border-radius:0;min-width:0;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc-text)}
.form .note{font-size:15px;color:var(--text-muted);min-height:1.2em}.form .note.ok{color:var(--green)}.form .note.err{color:var(--red)}
/* legal */
.legal{padding:56px 0 24px}
.legal h1{font-size:clamp(34px,3.4vw + 10px,54px);line-height:1.04;margin:0 0 14px}
.legal .upd{font-family:var(--mono);font-size:18px;color:var(--text-muted)}
.legal h2{font-size:clamp(22px,1.4vw + 12px,30px);line-height:1.15;margin:48px 0 14px;padding-top:24px;border-top:2px solid var(--line)}
.legal h3{font-size:20px;margin:28px 0 10px}
.legal p{margin:0 0 16px;font-size:18px;line-height:1.66}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{margin:0 0 10px;font-size:18px;line-height:1.6}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- phones ---------- */
@media (max-width:899px){
  h1,h2,h3{text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
  .foot{padding:30px 0 24px}
  .foot .top{gap:22px}
  .foot .top > .col{width:100%}
  .foot a{padding:11px 0}
  .foot .bot{margin-top:22px;font-size:14px}
}