/* Deep Root Systems - design system v3 (dark minimalism), 2026-09-15.
   Order: fonts → tokens → base → header → buttons → sections/hero → components → pages → footer → responsive → reduced motion.
   GPU rules (owner decision after the multi-monitor crash): no fixed full-viewport layers, no backdrop-filter,
   no filter, no will-change, no infinite animations, no canvas. Transitions are color/border/opacity/background only.
   The one exception to "no position:fixed" is the mobile nav drawer while it is open (.nav.open). */

/* ---------- fonts: Inter variable, v20 (Google Fonts build, downloaded 2026-09-15), self-hosted, weights 400-600 ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
/* Metric-matched fallback (Arial) so the swap does not shift layout (CLS). */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Liberation Sans");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --bg:#0a0d12;--bg-elev:#10151c;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);
  --fg:#e8edf3;--fg-2:#9aa8b8;
  /* DEVIATION: review token #6f7d8e is 4.36:1 on --bg-elev (below AA); #7a8899 is 5.0:1 on both backgrounds. */
  --fg-3:#7a8899;
  --brand:#3ddc97;--brand-2:#2ea3ff;--brand-ink:#062015;
  --grad:linear-gradient(120deg,var(--brand),var(--brand-2));
  --danger:#ff8a8a;
  --r:12px;--r-sm:8px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --bg-hover:#141b24;
  --maxw:1120px;--gutter:24px;--header-h:64px;
  --fs-display:56px;--lh-display:1.05;
  --fs-tagline:28px;
  --fs-h1:44px;--lh-h1:1.1;
  --fs-h2:32px;--lh-h2:1.15;
  --fs-h3:20px;--lh-h3:1.3;
  --fs-body:17px;--lh-body:1.6;
  --fs-small:14px;--lh-small:1.5;
  /* DEVIATION: review says 96px; 80px keeps direction pages under the 4k px target (mobile stays 64px). */
  --section:80px;
}
@media(max-width:640px){
  :root{--fs-display:36px;--fs-h1:32px;--fs-h2:26px;--fs-h3:18px;--fs-body:16px;--fs-tagline:20px;--section:var(--s8);--gutter:16px}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--s4))}
body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;
  font:400 var(--fs-body)/var(--lh-body) "Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:-.01em}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.025em}
.small{font-size:var(--fs-small);line-height:var(--lh-small)}
.muted{color:var(--fg-2)}
/* the only gradient text on the site: one accent phrase in a hero H1 */
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--s4);top:-100px;z-index:100;padding:var(--s2) var(--s4);background:var(--bg-elev);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.skip:focus{top:var(--s4)}

/* ---------- header (sticky, opaque - no blur) ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;gap:var(--s5);height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:22px;height:22px;flex:none}
.nav-list{display:flex;align-items:center;gap:var(--s5);list-style:none;margin:0;padding:0}
.nav-link{display:inline-flex;align-items:center;gap:6px;color:var(--fg-2);font-size:15px;font-weight:500;padding:var(--s2) 0;
  border-bottom:2px solid transparent;transition:color .15s}
.nav-link:hover,.nav-link.active{color:var(--fg)}
.nav-link.active{border-bottom-color:var(--brand)}
.nav-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.has-sub{position:relative}
.sub{display:none;position:absolute;top:100%;left:-12px;z-index:50;padding-top:var(--s2);margin:0;list-style:none}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}
.sub-inner{min-width:260px;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2)}
.sub a{display:block;padding:10px 12px;border-radius:var(--r-sm);color:var(--fg-2);font-size:15px;transition:color .15s,background-color .15s}
.sub a:hover,.sub a.active{color:var(--fg);background:rgba(255,255,255,.04)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
.lang a{font-size:13px;font-weight:500;color:var(--fg-2);padding:4px 9px;border-radius:6px;transition:color .15s}
.lang a:hover{color:var(--fg)}
.lang a[aria-current]{color:var(--fg);background:rgba(255,255,255,.06)}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--fg)}
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.burger .ic-close,.burger[aria-expanded="true"] .ic-menu{display:none}
.burger[aria-expanded="true"] .ic-close{display:block}
.drawer-foot{display:none}

/* one-time in-flow hint for uk-locale visitors on an EN page (built by /assets/site.js) */
.lang-hint{background:var(--bg-elev);border-bottom:1px solid var(--line);font-size:15px}
.lang-hint .wrap{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3);flex-wrap:wrap}
.lang-hint a{color:var(--brand);font-weight:500}
.lang-hint button{margin-left:auto;color:var(--fg-2);font-size:20px;line-height:1;padding:0 4px}
/* Consent bar (Consent Mode v2): in-flow strip above the header, never fixed. Shown by site.js to EEA/UK/CH visitors. */
.consent{background:var(--bg-elev);border-bottom:1px solid var(--line);padding:var(--s3) var(--s4);color:var(--fg-2);font-size:var(--fs-small);line-height:var(--lh-small)}
.consent .wrap{display:flex;align-items:center;gap:var(--s3) var(--s4);padding-inline:0}
.consent p{flex:1 1 auto;min-width:0}
.consent-actions{display:flex;gap:var(--s2);flex-shrink:0}

/* ---------- buttons / links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;line-height:1.2;
  padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,opacity .15s,background-color .15s}
.btn-primary{background:var(--grad);color:var(--brand-ink)}
.btn-primary:hover{opacity:.88}
.btn-secondary{border-color:var(--line-2);color:var(--fg)}
.btn-secondary:hover{border-color:var(--fg-3);background:rgba(255,255,255,.03)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn:focus-visible{outline-offset:3px}
.link{color:var(--brand);font-weight:500}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- sections ---------- */
.section{padding-block:var(--section)}
.section--tight{padding-block:var(--s8)}
.section--line{border-top:1px solid var(--line)}
.section--elev{background:var(--bg-elev)}
.section-head{max-width:720px;margin-bottom:var(--s6)}
.section-head--wide{max-width:800px}
.section-head p{color:var(--fg-2);margin-top:var(--s3)}
.section-head--row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s7);max-width:none;align-items:end}
.section-head--row p{margin-top:0}
.eyebrow{display:block;color:var(--brand);font-size:var(--fs-small);font-weight:500;letter-spacing:.02em;margin-bottom:var(--s4)}

/* hero: centered; the single static radial gradient of the site lives here (section background, not a fixed layer) */
.hero{padding-block:var(--s9) var(--s8);text-align:center;
  background-image:radial-gradient(60% 60% at 50% 0%,rgba(61,220,151,.11),transparent 70%)}
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero h1{max-width:26ch}
.hero h1.display{max-width:24ch}
.hero .lead{color:var(--fg-2);font-size:19px;line-height:1.55;max-width:640px;margin-top:var(--s5);text-wrap:pretty}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;margin-top:var(--s6)}
/* home H1: line 1 is the company name (the accent), line 2 a smaller plain tagline - both inside the H1 */
.hero .tagline{display:block;font-size:var(--fs-tagline);line-height:1.25;font-weight:500;letter-spacing:-.015em;color:var(--fg);margin-top:var(--s3);text-wrap:balance}
.hero--compact{text-align:left;padding-block:var(--s8) var(--s7);background-image:none}
.hero--compact .wrap{align-items:flex-start}
.hero--compact h1{max-width:30ch}
.hero--compact .lead{font-size:18px;margin-top:var(--s4)}

/* ---------- components ---------- */
/* direction cards - 2×2 on the home page and /services.html (1 column on mobile):
   large muted index · title · one-line promise · bullets · entry price + arrow. Hover: border and background only. */
.dirs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.dir{display:flex;flex-direction:column;gap:var(--s3);height:100%;padding:var(--s5) var(--s5) var(--s4);
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,background-color .15s}
.dir:hover{border-color:var(--fg-3);background:var(--bg-hover)}
.dir .idx{display:flex;align-items:center;gap:var(--s4);color:var(--fg-3);font-size:28px;line-height:1;font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:var(--s3)}
/* the one accent of the card: a short gradient hairline after the index */
.dir .idx::after{content:"";flex:none;width:40px;height:1px;background:var(--grad)}
.dir h3{transition:color .15s}
.dir:hover h3{color:var(--brand)}
.dir p{color:var(--fg-2);font-size:16px}
.dir .bullets{margin-top:var(--s1)}
.dir .meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-top:auto;padding-top:var(--s4);
  border-top:1px solid var(--line);font-size:var(--fs-small)}
.dir .entry{color:var(--fg-2)}
.dir .entry b{color:var(--fg);font-weight:600;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dir .go{color:var(--brand);font-weight:500;font-size:15px;white-space:nowrap}

/* bullets - emerald dot list (direction cards) */
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);color:var(--fg-2);font-size:15px}
.bullets li{padding-left:18px;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--brand)}

/* flow strip - "AI where it pays off": four columns with a rule on top and a brand index (home + AI agents page) */
.flow{list-style:none;counter-reset:flow;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.flow li{counter-increment:flow;border-top:1px solid var(--line-2);padding-top:var(--s4)}
.flow li::before{content:counter(flow,decimal-leading-zero);display:block;color:var(--brand);font-size:var(--fs-small);font-weight:600;
  font-variant-numeric:tabular-nums;margin-bottom:var(--s3)}
.flow h3{font-size:18px;margin-bottom:var(--s2)}
.flow p{color:var(--fg-2);font-size:16px;text-wrap:pretty}

/* arrow list - "who comes to us" */
.list-arrow{list-style:none;display:grid;max-width:760px;border-top:1px solid var(--line)}
.list-arrow--2{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}
.list-arrow li{display:flex;gap:var(--s3);color:var(--fg-2);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.list-arrow li::before{content:"→";color:var(--brand);flex:none;font-weight:500}

/* feature grid - "what you get", principles, Nexus features (no cards, no icons) */
.features{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
.features--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.features li{border-top:1px solid var(--line);padding-top:var(--s4)}
.features h3{margin-bottom:var(--s2)}
.features p{color:var(--fg-2);font-size:16px}

/* steps - numbered 01-04 */
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5)}
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:var(--s1) var(--s4)}
.steps li::before{content:counter(step,decimal-leading-zero);grid-row:1 / span 3;color:var(--brand);font-weight:600;
  font-size:var(--fs-small);line-height:1.7;font-variant-numeric:tabular-nums}
.steps h3{font-size:18px}
.steps .when{color:var(--fg-3);font-size:var(--fs-small)}
.steps p{color:var(--fg-2);font-size:16px;margin-top:var(--s1)}

/* pricing tiers - rows: name · what is included · timeline · price (direction pages) */
.tiers{list-style:none;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,2fr) auto;column-gap:var(--s5)}
/* Rows share the column tracks of the list (subgrid) so the four columns line up; browsers without subgrid get per-row tracks. */
.tiers li{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,2fr) auto;grid-template-columns:subgrid;gap:var(--s2) var(--s5);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.tiers .name{font-weight:500}
.tiers .incl{color:var(--fg-2);font-size:15px}
.tiers .when{color:var(--fg-3);font-size:var(--fs-small)}
.tiers .price{font-weight:600;font-size:18px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tiers .hourly .price{color:var(--brand)}
.note{color:var(--fg-2);font-size:15px;max-width:720px;margin-top:var(--s5)}
.note--strong{color:var(--fg);font-weight:500}
.note+.note{margin-top:var(--s3)}

/* FAQ */
.faq{max-width:800px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;font-weight:500;font-size:18px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:22px;line-height:1.1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--fg-2);padding-bottom:var(--s5);max-width:680px}

/* CTA band */
.cta-band{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s8) var(--s5)}
.cta-band p{color:var(--fg-2);max-width:560px;margin:var(--s3) 0 var(--s5)}

/* badges - stack */
.badges{display:flex;flex-wrap:wrap;gap:var(--s2)}
.badges span{font-size:13px;line-height:1.4;color:var(--fg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px}

/* related directions (inside the FAQ section on direction pages) */
.related-head{margin:var(--s7) 0 var(--s4);font-size:var(--fs-h3)}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s6)}
.related a{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) 0;border-top:1px solid var(--line)}
.related b{font-weight:500;transition:color .15s}
.related span{color:var(--fg-2);font-size:15px}
.related a:hover b{color:var(--brand)}

/* lead form - two columns: what happens next + the form */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8)}
.split-text p{color:var(--fg-2);margin-top:var(--s3)}
.next{list-style:none;counter-reset:n;display:grid;gap:var(--s3);margin-top:var(--s5)}
.next li{display:flex;gap:var(--s3);color:var(--fg-2);font-size:16px}
.next li::before{counter-increment:n;content:counter(n);flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--fg);margin-top:2px}
.tg{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s5);font-weight:500;transition:color .15s}
.tg svg{width:18px;height:18px;fill:var(--brand)}
.tg span{color:var(--fg-2);font-weight:400}
.tg:hover{color:var(--brand)}
.lead-form{display:grid;gap:var(--s4);align-content:start}
.field{display:grid;gap:var(--s2)}
.field label{font-size:var(--fs-small);font-weight:500;color:var(--fg-2)}
.field label i{color:var(--brand);font-style:normal}
.field input,.field textarea{width:100%;background:var(--bg-elev);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px;font-size:16px;line-height:1.4;color:var(--fg);transition:border-color .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.field textarea{resize:vertical;min-height:130px}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--danger)}
.actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.hint{color:var(--fg-3);font-size:var(--fs-small)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Cloudflare Turnstile widget (rendered only when a site key is set) - sits above .actions */
.cf-turnstile{margin-bottom:var(--s3)}
.form-note{color:var(--danger);border:1px solid rgba(255,138,138,.35);border-radius:var(--r-sm);padding:12px 14px;font-size:15px}
.form-note[hidden]{display:none}
.form-note a{text-decoration:underline;text-underline-offset:3px}

/* ---------- pages ---------- */
/* solutions - scenarios separated by rules, no cards */
.scenario{padding:var(--s6) 0 var(--s7);border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + var(--s4))}
.scenario .dir{color:var(--fg-3);font-size:var(--fs-small);font-weight:500;margin-bottom:var(--s2)}
.scenario h2{font-size:26px}
.ask{margin:var(--s5) 0;padding-left:var(--s4);border-left:2px solid var(--brand-2);max-width:720px;text-wrap:pretty}
.ask::before{content:"\201C"}
.ask::after{content:"\201D"}
.label{display:block;color:var(--fg-3);font-size:var(--fs-small);font-weight:500;margin-bottom:var(--s3)}
.arch{padding-left:22px;display:grid;gap:var(--s2);color:var(--fg-2);font-size:16px;max-width:760px}
.arch li::marker{color:var(--brand);font-weight:600}
.scenario .badges{margin-top:var(--s5)}
.meta-row{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);margin-top:var(--s5);align-items:end}
.meta-row div{display:flex;flex-direction:column;gap:2px}
.meta-row dt{color:var(--fg-3);font-size:var(--fs-small)}
.meta-row dd{font-weight:500;font-size:16px}

/* contact - channel cards: Telegram · request form · (UA only) call slot. Equal cards; the grid packs 3 (UA) or 2 (EN)
   per row on desktop and collapses to one column at 640px (below). */
.channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.channel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);height:100%;padding:var(--s5);
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r)}
.channel svg{width:28px;height:28px;color:var(--brand);margin-bottom:var(--s1)}
.channel h2{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:-.01em}
.channel p{color:var(--fg-2);font-size:16px;text-wrap:pretty}
.channel .handle{color:var(--fg-3);font-size:var(--fs-small);font-weight:500}
.channel .btn{margin-top:auto}
.channels-note{color:var(--fg-3);font-size:var(--fs-small);margin-top:var(--s5)}
.channels-note+.channels-note{margin-top:var(--s2)}

/* about - prose */
.prose{max-width:720px;margin-inline:0}
.prose p{color:var(--fg-2);margin-top:var(--s3)}
.prose p a{color:var(--brand)}

/* status pages: thanks / 404 */
.status .code{font-size:clamp(72px,14vw,140px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--brand);margin-bottom:var(--s3)}
.status .next{text-align:left;max-width:560px;margin-top:var(--s6)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:var(--s6);padding-block:var(--s8) var(--s6)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s6)}
.foot-brand p{color:var(--fg-2);font-size:15px;max-width:280px;margin-top:var(--s3)}
.foot-col{display:grid;gap:var(--s2);align-content:start;margin:0;padding:0;list-style:none}
.foot-col b{font-size:var(--fs-small);font-weight:500;color:var(--fg);margin-bottom:var(--s1)}
.foot-col a,.foot-col span{color:var(--fg-2);font-size:15px;transition:color .15s}
.foot-col a:hover{color:var(--fg)}
.copy{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;color:var(--fg-3);font-size:var(--fs-small);
  border-top:1px solid var(--line);margin-top:var(--s7);padding-top:var(--s5)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav{display:none}
  /* mobile drawer: fixed ONLY while open (position:fixed is otherwise not used on the site) */
  .nav.open{display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:39;background:var(--bg);overflow-y:auto;
    padding:var(--s2) var(--gutter) var(--s8)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{display:flex;justify-content:space-between;font-size:18px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-link.active{border-bottom-color:var(--line);color:var(--brand)}
  .nav-link svg{display:none}
  .sub{display:block;position:static;padding:0}
  .sub-inner{min-width:0;background:none;border:0;border-radius:0;padding:0}
  .sub a{padding:12px 0 12px var(--s4);border-radius:0;border-bottom:1px solid var(--line);font-size:16px}
  .sub a:hover,.sub a.active{background:none}
  .sub a.active{color:var(--brand)}
  .drawer-foot{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s6)}
  .drawer-foot .btn{width:100%}
  .drawer-foot .lang{align-self:flex-start}
  .nav-right .lang,.nav-right .btn{display:none}
  .burger{display:inline-flex}
  body.nav-open{overflow:hidden}
  .features--3,.steps,.steps--3,.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:var(--s7)}
  .hero{padding-block:var(--s9) var(--s8)}
}
@media(max-width:640px){
  .dirs,.flow,.features,.features--3,.steps,.steps--2,.steps--3,.related,.section-head--row,.foot-grid,.list-arrow--2,.channels{grid-template-columns:1fr}
  .tiers{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4)}
  .tiers li{grid-template-columns:minmax(0,1fr) auto;grid-template-columns:subgrid;gap:var(--s1) var(--s4)}
  .tiers .price{grid-column:2;grid-row:1}
  .tiers .incl,.tiers .when{grid-column:1 / -1}
  .dir .meta{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .hero{padding-block:var(--s8) var(--s7)}
  .hero--compact{padding-block:var(--s7) var(--s6)}
  .hero .lead{font-size:17px}
  .cta-band{padding:var(--s7) var(--s4)}
  .scenario{padding:var(--s6) 0}
  .scenario h2{font-size:22px}
  .faq summary{font-size:17px}
  .btn{white-space:normal;text-align:center}
  .consent .wrap{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion: the only motion on the site is 150 ms color/border/opacity transitions ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}