/* Self-hosted fonts — cyrillic + latin subsets only, woff2. No third-party requests. */

@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/unbounded-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/unbounded-latin-600.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/unbounded-cyrillic-800.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/unbounded-latin-800.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/onest-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/onest-latin-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/onest-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/onest-latin-600.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-600.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tech Noir — design system
   Violet = actions and brand. Cyan = measured numbers only. */

:root{
  /* The ground is a lifted violet-tinted near-black, not pure black. Every
     surface above it steps up by the same amount, so the depth ladder reads
     the same as before — only the whole stack sits higher. */
  --ground:#1A1823; --surface:#232130; --raised:#2C2939; --hair:#3B3650;
  --ink:#EDEAF5; --ink-2:#A29BB5; --ink-3:#8A83A0; --prose:#CFCADB;
  /* Body copy sits ~18% lighter than the general secondary tone — it is the
     text people actually read, and it carries a longer line. */
  --lead:#C0BACF;
  --violet:#AE35D6; --violet-hi:#C158E2; --violet-deep:#481854;
  --data:#3ACFE6; --data-dim:#2A6E7C; --data-bg:#152730;
  --warn:#D9A24E; --err:#D4596F;

  /* Interpolating in oklab keeps the midpoint saturated — the same stops in
     sRGB collapse into grey halfway through, visible on every card header.
     Every stop is dark enough for white display type to clear 3:1; the bright
     brand cyan would have sat at 1.9:1, so it is deepened here. */
  --grad-violet:linear-gradient(in oklab 155deg,#B846D8 0%,#8B22B0 58%,#3E1450 100%);
  --grad-deep:linear-gradient(in oklab 165deg,#3A2A5E 0%,#2A2140 55%,#1E1830 100%);
  --grad-data:linear-gradient(in oklab 150deg,#1B7F96 0%,#215F92 55%,#241C46 100%);

  --display:'Unbounded','Arial Black',sans-serif;
  --body:'Onest','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  --wrap:1200px; --gut:60px;
  --sec:110px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--data);text-decoration:none}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--violet);outline-offset:3px;border-radius:2px
}

p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--violet);color:#fff;padding:12px 18px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--data)}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
.h-hero{font-weight:800;font-size:clamp(3.6rem,11vw,9.9rem);line-height:.92;letter-spacing:-.035em}
.h-page{font-weight:600;font-size:clamp(2rem,5vw,3.1rem);line-height:1.08;text-transform:uppercase}
.h-sec{font-weight:600;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.12;text-transform:uppercase}
.h-sub{font-weight:600;font-size:clamp(1.15rem,2.4vw,1.35rem);line-height:1.3}
.h-card{font-weight:600;font-size:1.18rem;line-height:1.3}
.lead{font-size:clamp(1rem,2vw,1.06rem);line-height:1.78;color:var(--lead);max-width:66ch}
.tagline{font-family:var(--mono);font-size:clamp(.78rem,1.6vw,.98rem);letter-spacing:.42em;text-transform:uppercase;color:var(--prose)}
.num{font-family:var(--mono);font-weight:600;color:var(--data);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.vio{color:var(--violet)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:14px 30px;
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1.25;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
/* The primary button is the single brightest violet on the page — it should
   read as the one active point, so it carries a glow the outline one does not. */
.btn-p{background:var(--violet);color:#fff;box-shadow:0 0 30px -8px rgba(174,53,214,.75)}
.btn-p:hover{background:var(--violet-hi);color:#fff;box-shadow:0 0 38px -6px rgba(193,88,226,.85)}
.btn-s{background:transparent;color:var(--ink);border-color:#4B4566}
.btn-s:hover{border-color:var(--violet);color:var(--ink)}
.btn-sm{min-height:44px;padding:10px 22px;font-size:14px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- header ---------- */
.hdr{border-bottom:1px solid var(--hair);position:relative;z-index:40;background:var(--ground)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.hdr-logo img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:36px;font-size:14px}
.nav a{color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.hdr-side{display:flex;align-items:center;gap:16px}
.lang{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--ink);margin-right:-10px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--ground)}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* The artwork is brightest on the right, where the copy is not. This wedge
   sinks the left half back down so the headline and lead keep their contrast
   without dimming the focal glow. */
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(101deg,var(--ground) 0%,rgba(26,24,35,.94) 29%,rgba(26,24,35,.55) 51%,rgba(26,24,35,.08) 72%,rgba(26,24,35,0) 86%)}
/* The padding shorthand here used to zero out .wrap's gutter, so the hero sat
   60px left of every other section — and ran flush to the edge on phones. */
.hero-in{position:relative;z-index:1;padding:96px var(--gut) 88px}
.hero-grid{display:flex;gap:80px;align-items:flex-end;margin-top:44px}
.hero-copy{flex:1;max-width:620px;display:flex;flex-direction:column;gap:20px}

/* The result, sitting in the cyan half: a glass panel rather than a rule. */
.hero-stat{width:314px;display:flex;flex-direction:column;gap:12px;padding:26px 28px 28px;
  border:1px solid rgba(58,207,230,.3);background:rgba(19,36,45,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 0 44px -10px rgba(58,207,230,.28),inset 0 1px 0 rgba(207,246,253,.08)}
.hero-stat .metric-k{color:var(--data)}
.hero-stat-val{
  font-family:var(--mono);font-weight:600;color:var(--data);font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,6vw,4.5rem);line-height:1;
  display:flex;align-items:baseline;gap:.02em;
  text-shadow:0 0 28px rgba(58,207,230,.4);
}
.hero-stat-val .pct{font-size:.46em}
.hero-stat-note{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ---------- hero motion: one slow 11s cycle, nothing abrupt ---------- */
.hero-flow path{stroke-dasharray:80 2400;stroke-dashoffset:2480;
  animation:tnFlow 11s cubic-bezier(.45,0,.55,1) infinite}
@keyframes tnFlow{to{stroke-dashoffset:0}}
.hero-svg .nd{animation:tnPulse 9s ease-in-out infinite}
@keyframes tnPulse{0%,100%{opacity:.35}50%{opacity:1}}
.hero-core{transform-box:fill-box;transform-origin:center;animation:tnCore 10s ease-in-out infinite}
@keyframes tnCore{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){
  .hero-flow path,.hero-svg .nd,.hero-core{animation:none}
  .hero-flow path{stroke-dashoffset:0;stroke-dasharray:none;stroke-opacity:.5}
}

/* ---------- stat band ---------- */
.band{border-bottom:1px solid var(--hair);background:var(--surface);padding:74px 0 66px}
.band-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.band-cell{padding:0 44px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.band-cell:first-child{padding-left:0}
.band-cell:last-child{border-right:0;padding-right:0}
.band-num{font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(2.6rem,5.4vw,4rem);color:var(--data);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;text-shadow:0 0 34px rgba(58,207,230,.28)}
.band-num .ph{color:var(--ink-3);font-weight:600}
.band-k{font-weight:600;font-size:1.05rem;color:var(--ink)}
.band-note{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:30ch}
.band-foot{margin-top:36px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3)}

/* ---------- sections ---------- */
.sec{padding:var(--sec) 0}
.sec-tint{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:56px}
/* `.sec-head` sets column; without resetting it here the row silently stayed
   a right-aligned column. */
.sec-head-row{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}

/* Ghost section number. Sits behind the heading and gives a long page a
   spine — it is decoration, so it never enters the accessibility tree.
   The wrap it lives in needs position:relative; `.sec-num-host` does that. */
.sec-num-host{position:relative}
.sec-num{position:absolute;top:-38px;right:0;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:800;font-size:clamp(6rem,13vw,13rem);line-height:.8;
  color:var(--violet);opacity:.13;letter-spacing:-.03em}
.sec-num-host>*:not(.sec-num){position:relative;z-index:1}
@media (max-width:860px){.sec-num{font-size:6rem;top:-24px;opacity:.1}}
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- cards ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{background:var(--surface);border:1px solid var(--hair);padding:28px;display:flex;flex-direction:column;gap:14px}
.card p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.card-step .num{font-size:13px;letter-spacing:.1em}
.card-img{padding:0;overflow:hidden;gap:0}
.card-img>img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--raised)}
.card-img .card-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px}
.card-img .card-body p{margin:0}
a.card-img:hover>img{opacity:.9}
.card svg{flex:none}
a.card:hover{border-color:var(--violet)}

/* ---------- case cards: the number leads, the story follows ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.case{display:flex;flex-direction:column;border:1px solid var(--hair);background:var(--surface);overflow:hidden}
/* Metrics wrap to different line counts, so without subgrid the coloured
   panels end at different heights and the copy below stops lining up. */
@supports (grid-template-rows:subgrid){
  .case-grid,.case-grid-2{grid-template-rows:auto auto}
  .case{display:grid;grid-row:span 2;grid-template-rows:subgrid}
}
.case-fig{padding:34px 30px 38px;min-height:190px;display:flex;align-items:flex-end;background:var(--grad-violet)}
.case-fig-2{background:var(--grad-deep)}
.case-fig-3{background:var(--grad-data)}
.case-metric{font-family:var(--display);font-weight:800;font-size:clamp(1.65rem,2.6vw,2.3rem);
  line-height:1.05;color:#fff;letter-spacing:-.01em;text-wrap:balance}
.case-body{padding:24px 30px 32px;display:flex;flex-direction:column;gap:12px}
.case-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-hi)}
.case-claim{font-weight:600;font-size:1.05rem;line-height:1.35;margin:0}
.case-body p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
@media (max-width:980px){.case-grid,.case-grid-2{grid-template-columns:1fr}}

/* ---------- segment grid ----------
   One bordered block split by hairlines rather than separate cards: the
   segments read as one list of where the channel fits, and the hover marks
   the row the cursor is on. */
.seg-box{border:1px solid var(--hair);background:var(--surface);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.seg-cell{display:flex;gap:14px;padding:28px 30px 30px;position:relative;
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .2s ease}
.seg-cell:nth-child(2n){border-right:0}
.seg-cell:nth-last-child(-n+2){border-bottom:0}
.seg-cell:hover{background:var(--raised)}
.seg-ico{flex:none;margin-top:3px;color:var(--violet);transition:color .2s ease}
.seg-cell:hover .seg-ico{color:var(--violet-hi)}
.seg-h{font-family:var(--display);font-weight:600;font-size:1.1rem;line-height:1.3;margin:0 0 8px}
.seg-cell p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
@media (max-width:860px){
  .seg-box{grid-template-columns:1fr}
  .seg-cell{border-right:0;padding:24px}
  .seg-cell:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
  .seg-cell:last-child{border-bottom:0}
}

.cta-warn{font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:.04em;
  text-transform:uppercase;color:var(--warn);border-left:2px solid var(--warn);padding-left:14px;max-width:60ch}

/* ---------- featured case ----------
   Real dashboard screenshots sit behind the copy as evidence, not decoration:
   heavily dimmed, blurred a touch and masked away from the text column so they
   never fight the numbers they are backing up. */
.case-feature{position:relative;overflow:hidden}
.case-bg{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:flex-end;align-items:center;gap:26px;
  padding-right:24px;opacity:.24;filter:saturate(.55);
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 42%,#000 78%);
  mask-image:linear-gradient(100deg,transparent 0%,transparent 42%,#000 78%)}
.case-bg img{width:clamp(300px,32vw,480px);height:auto;border:1px solid var(--hair);flex:none}
.case-feature .wrap{position:relative;z-index:1}
.case-close{font-weight:600;font-size:1.02rem;line-height:1.5;color:var(--data);
  padding-left:16px;border-left:2px solid var(--data)}
.metric-sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--data)}
@media (max-width:980px){.case-bg{display:none}}

/* ---------- bento process grid ----------
   Two rows of unequal cells: a wide card leads each row and a narrow one
   follows, so the eye moves in a Z rather than scanning four equal boxes.
   The hover lifts the card and warms its border — no layout shift. */
.bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.bt{grid-column:span 2;background:var(--surface);border:1px solid var(--hair);position:relative;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease,background .25s ease}
.bt-wide{grid-column:span 3}
.bt-in{position:relative;z-index:1;padding:30px 32px 34px;display:flex;flex-direction:column;gap:14px;height:100%}
.bt-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.bt-no{font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--violet);
  transition:color .25s ease}
.bt-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.bt-h{font-weight:600;font-size:1.22rem;line-height:1.3;margin:0}
.bt p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
/* The wash is a separate layer so only its opacity animates. */
.bt::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(120% 140% at 88% 0%,rgba(174,53,214,.20) 0%,rgba(174,53,214,0) 62%)}
.bt:hover{border-color:var(--violet);transform:translateY(-4px);background:var(--raised)}
.bt:hover::before{opacity:1}
.bt:hover .bt-no{color:var(--violet-hi)}
.bt-accent{border-color:#4C3768}
.bt-accent .bt-no{color:var(--data)}
.bt-accent::before{background:radial-gradient(120% 140% at 88% 0%,rgba(58,207,230,.18) 0%,rgba(58,207,230,0) 62%)}
.bt-accent:hover{border-color:var(--data)}
.bt-accent:hover .bt-no{color:var(--data)}
@media (prefers-reduced-motion:reduce){.bt{transition:border-color .25s ease}.bt:hover{transform:none}}
@media (max-width:980px){.bento{grid-template-columns:1fr}.bt,.bt-wide{grid-column:auto}}

/* ---------- process cards: a step is a number plus a deadline ---------- */
.step{background:var(--surface);border:1px solid var(--hair);padding:26px 26px 30px;display:flex;flex-direction:column;gap:0}
.step-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.step-no{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;color:var(--violet)}
.step-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:right;white-space:nowrap}
.step-rule{height:0;border:0;border-top:1px dashed var(--hair);margin:18px 0 16px}
.step h3{margin:0 0 10px}
.step p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ---------- metric block ---------- */
.metrics{border:1px solid var(--hair);background:var(--ground);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{padding:30px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.metric:nth-child(2n){border-right:0}
.metric:nth-last-child(-n+2){border-bottom:0}
.metric-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.metric .num{font-size:clamp(1.6rem,3vw,2.4rem)}

/* ---------- split ---------- */
.split{display:flex;gap:80px;align-items:flex-start}
.split-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px}
/* max-width is the guard: a per-page inline width used to beat the mobile
   stack rule and push the page sideways. */
.split-side{width:520px;max-width:100%;flex:none}
.split-side-sm{width:300px;max-width:100%;flex:none}

/* ---------- form ---------- */
.form{border:1px solid var(--hair);background:var(--surface);padding:38px;display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea{
  min-height:50px;border:1px solid var(--hair);background:var(--ground);
  padding:13px 16px;color:var(--ink);font-size:15px;font-family:var(--body);
  border-radius:0;transition:border-color .15s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{border-color:var(--violet);outline:none}
.field input[aria-invalid="true"]{border-color:var(--err)}
/* Chrome/Safari paint autofilled fields near-white. Repaint them dark:
   the inset shadow is the only way to override the UA background. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active,
.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--ground) inset;
  box-shadow:0 0 0 1000px var(--ground) inset;
  caret-color:var(--ink);
  transition:background-color 100000s ease-in-out 0s;
}
.field input:autofill,.field textarea:autofill{
  background:var(--ground);color:var(--ink);
}
.field-err{font-size:12px;color:var(--err);min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12px;line-height:1.55;color:var(--ink-3)}
.form-msg{font-size:14px;line-height:1.6;padding:14px 16px;border:1px solid var(--hair)}
.form-msg[data-state="ok"]{border-color:var(--data-dim);background:var(--data-bg);color:var(--ink)}
.form-msg[data-state="err"]{border-color:var(--err);color:var(--ink)}

/* ---------- callout ---------- */
.callout{border:1px solid var(--data-dim);background:var(--data-bg);padding:30px 32px;display:flex;flex-direction:column;gap:14px}
.callout-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--data)}
.callout-warn{border-color:#6E4A18;background:#1E1608}
.callout-warn .callout-tag{color:var(--warn)}

/* ---------- tags / chips ---------- */
.tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border:1px solid var(--hair);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tag-on{border-color:var(--violet);color:var(--ink)}
.tags{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- list with ticks ---------- */
.ticks{display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ticks svg{flex:none;margin-top:3px}

/* ---------- timeline ---------- */
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair)}
.tl-cell{padding:28px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:12px}
.tl-cell:first-child{padding-left:0}
.tl-cell:last-child{border-right:0;padding-right:0}
.tl-cell .num{font-size:13px;letter-spacing:.14em}
.tl-cell p{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;max-width:800px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  padding:26px 40px 26px 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--display);font-weight:600;font-size:18px;line-height:1.35;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:34px;width:12px;height:12px;
  border-right:1.5px solid var(--violet);border-bottom:1.5px solid var(--violet);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:38px}
.faq-a{padding:0 0 26px;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:70ch}

/* ---------- pricing ---------- */
.price-card{background:var(--surface);border:1px solid var(--hair);padding:34px;display:flex;flex-direction:column;gap:24px;position:relative}
.price-card-hi{border-color:var(--violet)}
.price-badge{position:absolute;top:-1px;right:-1px;background:var(--violet);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px}
.price-val{display:flex;flex-direction:column;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.price-val .num{font-size:2.5rem;line-height:1}
.price-foot{padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px;margin-top:auto}

/* ---------- article ---------- */
.art-head{border-bottom:1px solid var(--hair);padding:64px 0 56px}
.art-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.art-meta span{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.art-title{font-weight:600;font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.08;max-width:900px}
.art-body{display:flex;gap:70px;align-items:flex-start;padding:60px 0 90px}
.toc{width:230px;flex:none;position:sticky;top:40px;display:flex;flex-direction:column;gap:14px}
.toc-list{display:flex;flex-direction:column}
.toc-list a{display:block;font-size:14px;line-height:1.5;color:var(--ink-3);padding:7px 0 7px 16px;border-left:1px solid var(--hair)}
.toc-list a:hover,.toc-list a.on{color:var(--ink);border-left-color:var(--violet)}
.prose{flex:1;min-width:0;display:flex;flex-direction:column;gap:38px}
.prose-block{font-size:18px;line-height:1.75;color:var(--prose);max-width:66ch;display:flex;flex-direction:column;gap:22px}
.prose h2{font-weight:600;font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.25;color:var(--ink);text-transform:none}
.prose-h{display:flex;flex-direction:column;gap:20px;max-width:66ch}
.quote{border-left:2px solid var(--violet);padding:6px 0 6px 28px;max-width:60ch}
.quote p{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,2.6vw,1.44rem);line-height:1.45;color:var(--ink)}
.tbl-wrap{max-width:66ch;overflow-x:auto}
.tbl-wrap table{border-collapse:collapse;width:100%;min-width:440px;font-size:15px}
.tbl-wrap th{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:400;padding:0 18px 12px 0;border-bottom:1px solid var(--hair)}
.tbl-wrap td{padding:14px 18px 14px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);vertical-align:top}
.tbl-wrap td:first-child{color:var(--ink);width:38%}
.art-cta{border:1px solid var(--hair);background:var(--surface);padding:32px;display:flex;gap:28px;align-items:center;max-width:66ch;flex-wrap:wrap}
.author{border-top:1px solid var(--hair);padding-top:30px;display:flex;gap:20px;align-items:flex-start;max-width:66ch}
.author-av{width:56px;height:56px;flex:none;border:1px solid var(--hair);background:var(--raised);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink-3)}

/* ---------- calendly ---------- */
.cal{border:1px solid var(--hair);background:var(--surface);min-height:260px;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center}
.cal-in{display:flex;flex-direction:column;gap:16px;align-items:center;max-width:420px}
.cal-mounted{border:1px solid var(--hair);background:var(--ground);padding:0;display:block;min-height:0}
/* Full-bleed booking frame. Calendly shows the month and the time list side
   by side only above ~1000px wide and ~700px tall — inside the 1200px wrap it
   collapsed into a cramped scrolling column, so here it gets the whole
   viewport width and a fixed tall box. */
.cal-full{width:100%;height:calc(100vh - 140px);min-height:840px;background:var(--ground);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;position:relative}
/* A plain iframe, not Calendly's widget.js. Their script injects a frame that
   never resolves past its own spinner here; the direct embed URL renders fine
   and costs no third-party JavaScript at all. */
.cal-full iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:860px){.cal-full{height:auto;min-height:1120px}}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--hair);background:var(--surface)}
.ftr-top{padding:64px 0 40px;display:flex;gap:80px;flex-wrap:wrap}
.ftr-brand{flex:1;min-width:240px;display:flex;flex-direction:column;gap:16px}
/* The brand block is a column flexbox, so a bare `width:auto` image gets
   stretched to the column width and smeared. align-self stops the stretch. */
.ftr-logo{height:24px;width:auto;align-self:flex-start}
.ftr-tag{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-top:-6px}
.ftr-brand p{font-size:14px;line-height:1.6;color:var(--ink-3);max-width:280px}
.ftr-col{display:flex;flex-direction:column;gap:12px;font-size:14px}
.ftr-col a{color:var(--ink-2)}
.ftr-col a:hover{color:var(--ink)}
.ftr-h{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.ftr-bot{padding:24px 0 36px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-3)}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:30px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}

/* ---------- 404 / thanks ---------- */
.mid{min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:90px 0}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--gut:40px;--sec:80px}
  .split{gap:48px}
  .split-side{width:420px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-cell{padding:24px}
  .tl-cell:nth-child(2n){border-right:0;padding-right:0}
  .tl-cell:nth-child(2n+1){padding-left:0}
  .art-body{gap:44px}
  .toc{width:200px}
}

@media (max-width:860px){
  body{font-size:16.5px}
  :root{--gut:22px;--sec:64px}
  .nav,.hdr-side .lang,.hdr-side .btn{display:none}
  .burger{display:flex}
  .hdr-in{height:64px}
  .hdr-logo img{height:22px}
  .nav-open .nav{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;left:0;right:0;top:64px;background:var(--ground);
    border-bottom:1px solid var(--hair);padding:8px var(--gut) 24px;z-index:50;
  }
  .nav-open .nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--hair);font-size:16px}
  .nav-open .hdr-side .btn{display:inline-flex;position:absolute;left:var(--gut);right:var(--gut);top:auto;margin-top:0}
  .hero-in{padding:44px var(--gut) 40px}
  .hero-grid{flex-direction:column;align-items:stretch;gap:34px;margin-top:26px}
  .hero-copy{max-width:none}
  .hero-stat{width:auto}
  .btn-row .btn{flex:1 1 100%}
  .band{padding:52px 0 46px}
  .band-grid{grid-template-columns:1fr;gap:34px}
  .band-cell{padding:0;border-right:0}
  .band-note{max-width:none}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .sec-head{margin-bottom:34px}
  .sec-head-row{flex-direction:column;align-items:flex-start;gap:16px}
  .split{flex-direction:column;gap:34px}
  .split-side,.split-side-sm{width:100%}
  .tl{grid-template-columns:1fr}
  .tl-cell{padding:22px 0;border-right:0;border-bottom:1px solid var(--hair)}
  .tl-cell:last-child{border-bottom:0}
  .art-body{flex-direction:column;padding:40px 0 64px}
  .toc{position:static;width:100%}
  .form{padding:26px 22px}
  .art-cta{padding:24px;gap:20px}
  .ftr-top{gap:36px;padding:44px 0 32px}
  .metric{padding:20px}
  .callout{padding:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- scroll reveal ----------
   Elements marked [data-rise] start lowered and transparent; app.js adds
   .is-in when they enter the viewport. The starting state is only applied
   when JS is present (html.js), so with scripts blocked nothing ever hides.
   Anyone who asked their OS for less motion gets the finished state at once. */
.js [data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js [data-rise].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-rise]{opacity:1;transform:none;transition:none}
}