/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE (final design, Figma GajLv1Qas8gVLqceS7DnKD, 2026-10-07)
   Orange is the brand, indigo is for actions, verdict colours only on
   verdicts. No gradients outside the logo files. Built on styles.css.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --font-display:"Bricolage Grotesque","DM Sans",ui-sans-serif,system-ui,sans-serif;
  --hx-o:#f5793b; --hx-o7:#b84c15; --hx-o50:#fff1e8;
  --hx-ink:#0a0a23; --hx-ink5:#5a5a72; --hx-deco:#8a8aa0;
  --hx-paper:#fbfbfd; --hx-paper2:#f4f5fa; --hx-line:#e7e7f0;
  --hx-ok:#047857; --hx-ok-50:#ecfdf5; --hx-ok-200:#a7f3d0;
  --hx-al:#0369a1; --hx-al-50:#f0f9ff; --hx-al-200:#bae6fd;
  --hx-bad:#b91c1c; --hx-bad-50:#fef2f2; --hx-bad-200:#fecaca;
  --hx-q7:#b45309; --hx-q50:#fffbeb; --hx-q200:#fde68a;
  --hx-ease:cubic-bezier(.2,.7,.2,1);
}

/* ───────── shared: line icons and verdict pills ───────── */
.i{width:16px;height:16px;flex:none;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.vp{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:1px solid;flex:none;white-space:nowrap;
  font:600 11.5px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.vp .i{width:13px;height:13px;stroke-width:2}
.vp--allow{color:var(--hx-ok);background:var(--hx-ok-50);border-color:var(--hx-ok-200)}
.vp--alert{color:var(--hx-al);background:var(--hx-al-50);border-color:var(--hx-al-200)}
.vp--block{color:var(--hx-bad);background:var(--hx-bad-50);border-color:var(--hx-bad-200)}
.vp--none{color:var(--hx-ink5);background:var(--hx-paper2);border-color:var(--hx-line);font:500 12.5px/1 var(--font-body);letter-spacing:0;text-transform:none}

/* ───────── nav (homepage): solid surface, one link style, Log in then the one indigo action ───────── */
.nav{max-width:1240px;margin-inline:max(var(--gutter),calc((100% - 1240px) / 2));padding:12px 14px 12px 22px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--hx-line);border-radius:16px;box-shadow:0 1px 2px rgba(10,10,35,.04)}
.nav.is-scrolled{box-shadow:0 6px 20px rgba(10,10,35,.07)}
.nav__logo img{height:30px}
.nav__links,.nav__links a,.nav .nav__trigger{color:var(--ink);font-weight:500}
.nav__links a:hover,.nav .nav__trigger:hover{color:var(--hx-o7)}
.nav .nav__caret{display:none}
.nav .nav__login{background:#fff;border:1px solid var(--hx-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav .nav__login:hover{background:#fff;border-color:var(--ink)}
.nav__actions{flex-direction:row}
.nav .nav__cta{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 14px rgba(46,46,255,.22)}
.nav .nav__cta:hover{background:#1f1fd6;color:#fff}

/* ───────── layout system: one edge, one rhythm, alternating bands ───────── */
.hx{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px);background:var(--hx-paper)}
.hx__wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
#how,#why,#when,#commit-level,#products{padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(72px,8vw,112px)}
.band-w{position:relative;background:var(--white);box-shadow:0 0 0 100vmax var(--white);clip-path:inset(0 -100vmax)}
#trusted{background:var(--bg)}
.section .section__title{font-size:clamp(34px,4.2vw,56px);line-height:1.05;letter-spacing:-.03em;margin:12px 0 16px}
.section .section__head{margin-bottom:clamp(36px,4vw,56px)}
.section .section__lede{font-size:clamp(16.5px,1.3vw,19px);max-width:62ch}
.section .section__title .ink{color:var(--hx-ink5);font-style:normal;font-weight:700}
#commit-level .section__title .ink{color:var(--hx-o7)}
.section .section__head .eyebrow,.wy__copy .eyebrow,.trusted__head .eyebrow{background:none;border:0;padding:0;box-shadow:none;gap:0;color:var(--hx-o7);
  font:500 13px/1.2 var(--font-mono);letter-spacing:0;text-transform:lowercase}
.section .section__head .eyebrow::before,.wy__copy .eyebrow::before,.trusted__head .eyebrow::before{content:"// ";white-space:pre}
.section .section__head .eyebrow__dot,.wy__copy .eyebrow__dot,.trusted__head .eyebrow__dot{display:none}

/* ───────── hero (v3: full-width headline, lede | actions, proof card in the stats band) ───────── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hx{padding-top:40px}
.hx__top{display:grid;gap:22px;justify-items:start;margin-bottom:36px}
.hx__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--hx-o50);color:var(--hx-o7);
  font:500 12px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.hx__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--hx-o)}
.hx__title{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,4.4vw,60px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin:0;max-width:none}
.hx__accent{display:block;margin-top:.24em;color:var(--hx-o7)}
.hx__row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(28px,5vw,72px);align-items:start;margin-top:2px}
.hx__lede{font-size:clamp(16.5px,1.35vw,19px);line-height:1.6;color:var(--hx-ink5);margin:0;max-width:56ch}
.hx__act{display:grid;gap:12px;min-width:0}
.hx__act .hero__cta{margin:0}
.hx__price{margin:0;font:400 13px/1.4 var(--font-body);color:var(--hx-ink5)}
.hx__price a{color:inherit;text-decoration:underline;text-decoration-color:var(--hx-line);text-underline-offset:3px}
.hx__price a:hover{color:var(--ink);text-decoration-color:currentColor}
/* the checker: frameless on desktop (fig. 01 already shows the verdict), a card with its result on phones */
.hx-try{margin-top:6px;display:grid;gap:8px}
.hx-try__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hx-try__h label{font:600 13px/1.3 var(--font-body);color:var(--ink)}
.hx-try__l-m,.hx-try__free{display:none}
.hx-try__free{font:400 11px var(--font-mono);color:var(--hx-ink5)}
.hx-try__bar{display:flex;align-items:center;gap:10px;margin:0;padding:6px 6px 6px 12px;border-radius:12px;border:1px solid var(--hx-line);background:#fff;transition:border-color .2s,box-shadow .2s}
.hx-try__bar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,46,255,.14)}
.hx-try__bar img{width:20px;height:20px;flex:none}
.hx-try__bar input{flex:1;min-width:0;height:40px;border:0;outline:0;background:transparent;font:400 14px var(--font-mono);color:var(--ink)}
.hx-try__go{flex:none;height:42px;padding:0 22px;border-radius:999px;border:1px solid var(--hx-line);background:#fff;color:var(--ink);font:600 15px var(--font-body);cursor:pointer;transition:border-color .2s}
.hx-try__go:hover,.hx-try__go:focus-visible{border-color:var(--ink)}
.hx-try__res{display:none}
.hx-try__top{display:flex;align-items:center;gap:10px}
.hx-try__top code{font:500 13.5px var(--font-mono);color:var(--ink)}
.hx-try__res p{margin:8px 0 0;font:400 13px/1.45 var(--font-body);color:var(--hx-ink5)}
@media (max-width:960px){.hx__row{grid-template-columns:minmax(0,1fr)}.hx__act{max-width:560px}}
@media (max-width:640px){
  .hx{padding-top:28px}
  .hx__title{font-size:40px}
  .hx__top{gap:18px;margin-bottom:28px}
  .hx__row{margin-top:4px;gap:22px}
  .hx__lede{font-size:18px}
  .hx__accent{margin-top:.45em}
  .hx-try{margin-top:10px;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--hx-line);background:#fff}
  .hx-try__l-d{display:none}.hx-try__l-m,.hx-try__free{display:inline}
  .hx-try__h label{font-size:14px}
  .hx-try__res{display:block}
}

/* stats band: the proof card first, then the stats */
.hx__band{margin-top:10px;padding-top:32px;border-top:1px solid var(--hx-line);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,48px)}
.hx-proof{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:14px;border:1px solid var(--hx-line);background:#fff;min-width:0}
.hx-proof__tx{display:grid;gap:2px;min-width:0}
.hx-proof__tx b{font:600 13.5px/1.4 var(--font-body);color:var(--ink)}
.hx-proof__tx > span{font:400 13px/1.45 var(--font-body);color:var(--hx-ink5)}
.hx-proof__tx small{margin-top:3px;font:400 11px/1.5 var(--font-mono);color:var(--hx-ink5)}
.hx-proof__go{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;gap:6px;white-space:nowrap;font:600 14px var(--font-body);color:var(--blue)}
.hx-proof__go .i{width:15px;height:15px;transition:transform .3s var(--hx-ease)}
.hx-proof__go:hover .i{transform:translateX(3px)}
.hx__stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px clamp(32px,5vw,72px)}
.hx__stats li{display:grid;gap:4px}
.hx__stats b{font:700 clamp(30px,2.6vw,34px)/1.05 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.hx__stats span{font-size:15px;color:var(--hx-ink5);line-height:1.4}
.hx__src{margin:32px 0 0;font:400 12.5px/1.4 var(--font-body);color:var(--hx-ink5)}
@media (max-width:560px){
  .hx .hero__cta{flex-direction:row;flex-wrap:wrap;align-items:center}.hx .hero__cta > *{width:auto}
  .hx__band{border-top:0;padding-top:0;margin-top:28px;gap:28px}
  .hx-proof{flex-direction:column;align-items:flex-start;gap:8px}.hx-proof__go{margin-left:0}
  .hx__stats{padding-top:26px;border-top:1px solid var(--hx-line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;align-items:start}
  .hx__stats span{font-size:14.5px}
  .hx__src{margin-top:24px}
}

/* partner strip under the stats */
.hx-partners{margin-top:clamp(36px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 40px}
.hx-partners > p{margin:0;font:400 12px var(--font-mono);color:var(--hx-ink5)}
.hx-partners__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 40px}
.hx-partners__logos img{display:block;height:28px;width:auto;max-width:none;flex:none}
.hx-partners__logos .hp-ath{height:28px}
.hx-partners__logos .hp-et{height:24px}
.hp-sich{display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;font:600 19px var(--font-body);letter-spacing:-.01em;color:var(--ink)}
.hp-sich img{height:26px;width:auto;max-width:none;flex:none}
@media (max-width:560px){
  .hx-partners{flex-direction:column;gap:14px}
  .hx-partners__logos{gap:16px 26px}
  .hx-partners__logos img{height:22px}.hx-partners__logos .hp-ath{height:24px}.hx-partners__logos .hp-et{height:19px}
  .hp-sich{font-size:15.5px;gap:7px}.hp-sich img{height:21px}
}

/* ───────── fig. 01: one door in ───────── */
.d1{margin:0;position:relative;border:1px solid var(--hx-line);border-radius:18px;padding:20px;background:#fff}
.d1__cap{display:block;font:400 12px/1.5 var(--font-mono);color:var(--hx-ink5);margin:4px 0 16px}
.d1__stage{--co-pl:176px;position:relative;display:grid;grid-template-columns:196px minmax(0,1fr) minmax(0,1.95fr)}
.d1__paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.d1__paths .p{fill:none;stroke:var(--hx-deco);stroke-width:1.25;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.d1__paths .p--dim{opacity:.35}
.d1__paths .tok{fill:var(--hx-o)}
.d1__paths .tok--bad{fill:var(--hx-bad)}
.d1__label{display:flex;align-items:center;gap:7px;font:500 12px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hx-ink5)}
.d1__label .i{width:14px;height:14px}
.d1__reg{position:relative;z-index:1;padding-top:24px}
.d1__tiles{display:grid;gap:24px;margin-top:22px}
.d1-tile{display:flex;align-items:center;gap:12px;height:64px;padding:0 16px;border-radius:10px;border:1px solid var(--hx-line);background:#fff;min-width:0}
.d1-tile img{width:28px;height:28px;object-fit:contain;flex:none}
.d1-tile span{display:grid;min-width:0}
.d1-tile b{font:600 15px/1.3 var(--font-body);color:var(--ink)}
.d1-tile small{font:400 11px/1.4 var(--font-mono);color:var(--hx-ink5);white-space:normal;overflow-wrap:break-word}
.d1__lane{position:relative;z-index:3;min-width:0}
.d1-block{position:absolute;right:10px;top:calc(50% + 50px);width:min(222px,calc(100% - 20px));padding:12px 14px;border-radius:14px;background:var(--hx-bad-50);border:1px solid var(--hx-bad-200)}
.d1-block::after{content:"";position:absolute;right:-11px;top:25px;width:11px;height:1.5px;background:var(--hx-bad)}
.d1-block__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.d1-block__top b{font:600 14px var(--font-mono);color:var(--ink)}
.d1-block p{margin:8px 0 0;font:400 13px/1.45 var(--font-body);color:var(--hx-ink5)}
.d1-block .d1-block__stop{font-weight:600;color:var(--ink)}
.d1-block .d1-block__fix{font:400 11px/1.4 var(--font-mono)}
.d1__co{position:relative;min-width:0;background:var(--hx-paper2);border:1px solid var(--hx-line);border-left:4px solid var(--hx-o);border-radius:0 14px 14px 0;padding:24px 16px 24px var(--co-pl)}
.d1-door{position:absolute;left:-2px;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:14px;white-space:nowrap;
  padding:12px 20px 12px 12px;border-radius:18px;border:1.5px solid var(--hx-o);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  box-shadow:inset 0 1.5px 0 #fff,0 0 0 5px rgba(245,121,59,.18),0 0 24px 6px rgba(245,121,59,.10),0 12px 28px -6px rgba(10,10,35,.10);transition:box-shadow .3s ease,border-color .3s ease}
.d1-door.is-stop{border-color:var(--hx-bad);box-shadow:inset 0 1.5px 0 #fff,0 0 0 5px rgba(185,28,28,.16),0 0 24px 6px rgba(185,28,28,.10),0 12px 28px -6px rgba(10,10,35,.10)}
.d1-door__sym{width:44px;height:44px;border-radius:12px;background:var(--hx-o50);display:grid;place-items:center;flex:none}
.d1-door__sym img{width:28px;height:auto}
.d1-door__tx{display:grid;gap:2px}
.d1-door__tx b{font:700 19px/1.15 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.d1-door__tx small{font:400 11px/1.3 var(--font-mono);color:var(--hx-ink5)}
.d1__rows{display:grid;gap:8px;margin-top:16px}
.d1-row{display:grid;gap:9px;padding:11px 14px;border-radius:10px;border:1px solid var(--hx-line);background:#fff;min-width:0}
.d1-row__top{display:flex;align-items:center;gap:10px;min-width:0}
.d1-row__top > .i{width:19px;height:19px;color:var(--ink)}
.d1-row__top b{font:600 15px/1.3 var(--font-body);color:var(--ink);white-space:nowrap}
.d1-row__top .vp{margin-left:auto}
.d1-row__marks{display:flex;align-items:center;gap:7px}
.d1-row__marks img{height:16px;width:auto;max-width:20px;object-fit:contain}
.d1-row__note{font:400 13px var(--font-body);color:var(--hx-ink5);white-space:nowrap}
.d1-row__pkg{display:flex;align-items:center;gap:8px;min-width:0}
.d1-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--hx-line);background:#fff;font:400 11px var(--font-mono);color:var(--ink);flex:none}
.d1-chip .i{width:12px;height:12px;color:var(--hx-ink5)}
.d1-row__arr{width:12px;height:12px;color:var(--hx-deco)}
.d1-row__pkg code{font:500 12.5px var(--font-mono);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.d1__note{margin:20px 0 0;font:400 13px/1.45 var(--font-body);color:var(--hx-ink5)}
.d1__note-s{display:none}
/* the inbound flow (home-v3.js adds .is-pre, then lands each verdict) */
.d1 .d1-row .vp,.d1 .d1-block{transition:opacity .35s var(--hx-ease),transform .45s cubic-bezier(.34,1.56,.64,1)}
.d1.is-pre .d1-row:not(.on) .vp{opacity:0;transform:scale(.6)}
.d1.is-pre .d1-block:not(.on){opacity:0;transform:translateY(-8px)}
@media (max-width:1180px){.d1-row__marks,.d1-row__note{display:none}.d1__stage{--co-pl:160px;grid-template-columns:170px minmax(0,1fr) minmax(0,2fr)}.d1-door{padding:10px 16px 10px 10px;gap:12px}.d1-door__sym{width:40px;height:40px}.d1-door__tx b{font-size:17px}.d1-row__pkg code{font-size:11.5px}}
@media (max-width:1023px){
  .d1{padding:14px}
  .d1__stage{display:flex;flex-direction:column}
  .d1__paths{display:none}
  .d1__reg{padding-top:0}
  .d1__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
  .d1-tile{flex-direction:column;justify-content:center;height:auto;padding:10px 4px;gap:6px}
  .d1-tile small{display:none}
  .d1-tile b{font-size:13px}
  .d1-tile img{width:24px;height:24px}
  .d1__lane{padding:16px 0 60px calc((100% - 24px) / 8 + 14px)}
  .d1__lane::before{content:"";position:absolute;left:calc((100% - 24px) / 8);top:0;bottom:34px;border-left:1.25px dashed var(--hx-deco)}
  .d1-block{position:relative;right:auto;top:auto;width:auto}
  .d1-block::after{right:auto;left:50%;top:100%;width:1.5px;height:26px}
  .d1__co{border-left:1px solid var(--hx-line);border-top:4px solid var(--hx-o);border-radius:0 0 14px 14px;padding:50px 12px 12px;margin-inline:-14px;border-inline:0}
  .d1-door{left:50%;top:-2px;padding:10px 18px 10px 10px}
  .d1-door__sym{width:40px;height:40px}
  .d1-door__tx b{font-size:18px}
  .d1__label--co{margin-top:6px}
  .d1__rows{margin-top:12px}
  .d1-row{padding:10px 12px}
  .d1-row__top b{font-size:14.5px}
  .d1-row__pkg{gap:6px}
  .d1-row__pkg code{font-size:11.5px;white-space:normal}
  .d1__note-l{display:none}.d1__note-s{display:inline}
  .d1__note{font-size:12.5px;margin-top:14px}
}

/* ───────── How it works: the zigzag ───────── */
.hw{position:relative}
.hw__body{position:relative}
.hw__list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,6vw,80px)}
.hw__path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0;clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--hx-ease)}
.hw__path.is-hidden{clip-path:inset(0 0 100% 0)}
.hw__path .draw{fill:none;stroke:var(--hx-o);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.hw__step{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.17fr);gap:clamp(28px,6vw,90px);align-items:center}
.hw__step--flip{grid-template-columns:minmax(0,1.17fr) minmax(0,1fr)}
.hw__step--flip .hw__text{order:2}
.hw__step--flip .hw__mock{order:1}
.hw__text{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:20px;row-gap:12px;align-items:center;min-width:0}
.hw__text .hw__n{grid-row:1/span 2;align-self:start}
.hw__text p{grid-column:2}
.hw__n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:700 20px var(--font-display);color:var(--ink);background:var(--white);border:2px solid var(--hx-o);box-shadow:0 0 0 8px var(--white)}
.hw__text h3{font:700 clamp(26px,2.8vw,34px)/1.1 var(--font-display);letter-spacing:-.025em;color:var(--ink);margin:0}
.hw__text p{font-size:17px;line-height:1.6;color:var(--hx-ink5);margin:0;max-width:44ch}
.hw__mock{position:relative;border-radius:18px;border:1px solid var(--hx-line);background:var(--white);padding:clamp(14px,1.6vw,18px);min-width:0}
@media (max-width:900px){
  .hw__path{display:none}
  .hw__step{grid-template-columns:minmax(0,1fr)}
  .hw__step--flip .hw__text{order:1}
  .hw__step--flip .hw__mock{order:2}
}
/* step 1 */
.hw-run{display:grid;gap:8px}
.hw-run__l{font:400 12px var(--font-mono);color:var(--hx-ink5)}
.hw-run__l + .hw-run__cmd{margin-top:-2px}
.hw-run__cmd + .hw-run__l{margin-top:4px}
.hw-run__cmd{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px;border-radius:10px;border:1px solid var(--hx-line);background:#fff;min-width:0}
.hw-run__cmd > .i{width:18px;height:18px;color:var(--ink)}
.hw-run__cmd code{font:400 13px var(--font-mono);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-copy{margin-left:auto;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--hx-deco);cursor:pointer;transition:color .2s,background .2s}
.hw-copy:hover,.hw-copy:focus-visible{color:var(--ink);background:var(--hx-paper2)}
.hw-copy.is-done{color:var(--hx-ok)}
.hw-copy .i{width:15px;height:15px}
.hw-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:3px;font:400 11px/1.6 var(--font-mono);color:var(--hx-ink5)}
.hw-win--sm{margin-top:12px}
.hw-where{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--hx-ink5)}
.hw-where img{width:20px;height:20px;object-fit:contain}
/* step 2 */
.hw-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:4px}
.hw-card__pkg{display:flex;align-items:center;gap:8px;font:400 14px var(--font-mono);color:var(--ink)}
.hw-card__pkg img{width:18px;height:18px}
.hw-card dl{margin:6px 0 12px;display:grid;grid-template-columns:82px minmax(0,1fr);gap:6px 0;font-size:14.5px;line-height:1.55}
.hw-card dt{color:var(--hx-ink5);font:400 12px/2 var(--font-mono)}
.hw-card dd{margin:0;color:var(--ink);min-width:0}
.hw-sigs__t{margin:0 0 8px;font:400 11.5px/1.4 var(--font-mono);color:var(--hx-ink5)}
.hw-sigs{display:flex;flex-wrap:wrap;gap:6px}
.hw-sig{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;border:1px solid var(--hx-line);background:#fff;font:500 13px/1.2 var(--font-body);color:var(--hx-ink5)}
.hw-sig::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hx-deco);flex:none}
.hw-sig.is-fired{color:var(--ink);border-color:var(--hx-o);background:var(--hx-o50);font-weight:600}
.hw-sig.is-fired::before{background:var(--hx-o)}
.hw-card .hw-legend{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--hx-line);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hw-card .hw-legend > div{display:flex;align-items:center;gap:10px}
.hw-card .hw-legend dt{margin:0;font:inherit;line-height:1}
.hw-card .hw-legend dd{margin:0;font:400 13px/1.4 var(--font-body);color:var(--hx-ink5)}
.vp--quar{color:var(--hx-q7);background:var(--hx-q50);border-color:var(--hx-q200)}
/* step 3 */
.hw-alert{border-radius:14px;background:#fff;border:1px solid var(--hx-line);padding:14px;display:grid;gap:8px}
.hw-alert__t{display:flex;align-items:center;gap:10px}
.hw-alert__t b{font:700 17px var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.hw-alert__t time{margin-left:auto;font:400 12px var(--font-mono);color:var(--hx-ink5)}
.hw-alert__rows{display:grid;grid-template-columns:82px minmax(0,1fr);gap:6px 0;font-size:14.5px;color:var(--ink)}
.hw-alert__rows span:nth-child(odd){font:400 12px/1.9 var(--font-mono);color:var(--hx-ink5)}
.hw-dash{position:relative;padding-bottom:58px}
.hw-win{border-radius:12px;overflow:hidden;background:var(--hx-paper2);border:1px solid var(--hx-line);box-shadow:0 6px 18px -10px rgba(10,10,35,.18)}
.hw-win__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--hx-line);font:400 11px var(--font-mono);color:var(--hx-ink5)}
.hw-win__bar i{width:7px;height:7px;border-radius:50%;background:#d6d6e2;flex:none}
.hw-win__bar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-win img{display:block;width:100%;height:auto}
.hw-dash .hw-alert{position:absolute;right:-6px;bottom:0;width:min(330px,82%);box-shadow:var(--shadow-lg,0 18px 40px -12px rgba(10,10,35,.22))}
@media (max-width:560px){.hw-dash{padding-bottom:0}.hw-dash .hw-alert{position:relative;right:auto;width:auto;margin-top:10px}}
.hw-sinks__t{margin:18px 0 8px;font:400 11.5px/1.4 var(--font-mono);color:var(--hx-ink5)}
.hw-sinks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hw-sink{display:flex;align-items:center;justify-content:center;gap:9px;height:60px;padding:8px;border-radius:10px;background:#fff;border:1px solid var(--hx-line);font:600 14.5px/1.2 var(--font-body);color:var(--ink);min-width:0;text-align:center}
.hw-sink img{height:22px;width:22px;flex:none;object-fit:contain}
.hw-sink .i{width:20px;height:20px;color:var(--ink)}
@media (max-width:560px){.hw__text h3{font-size:30px}.hw__text{column-gap:16px}.hw-card .hw-legend > div{align-items:flex-start}.hw-card .hw-legend dd{padding-top:2px}.hw-sinks{grid-template-columns:repeat(2,minmax(0,1fr))}.hw__mock{padding:14px}.hw-run__cmd{padding:9px 6px 9px 12px;gap:8px}.hw-run__cmd code{font-size:12px}}

/* ───────── Why it matters: fig. 02 ───────── */
.wy__split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:960px){.wy__split{grid-template-columns:minmax(0,1fr)}}
.wy__copy{display:grid;gap:16px;min-width:0;align-content:start}
.wy__big{display:flex;align-items:center;gap:.3em;font:800 72px/.95 var(--font-display);letter-spacing:-.04em;color:var(--ink);margin:0}
.wy__big-v{display:inline-flex;align-items:center;gap:.24em}
.wy__big .i{width:.46em;height:.46em;color:var(--hx-o);stroke-width:1.75}
#why .section__title{font-size:38px;line-height:1.1}
#why .section__title .ink{display:block}
.wy__copy .section__lede{margin:0}
#when .section__title{max-width:640px}
#commit-level .section__lede{max-width:680px}
#trusted::before,#trusted::after{display:none}
.wy__src{font:400 11px/1.6 var(--font-mono);color:var(--hx-ink5);margin:4px 0 0;max-width:56ch}
.f2{margin:0;border-radius:18px;border:1px solid var(--hx-line);background:#fff;padding:20px 20px 22px;min-width:0;box-shadow:var(--shadow-sm)}
.f2__head{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 11px var(--font-mono);color:var(--hx-ink5)}
.f2__cap-s{display:none}
.f2__src{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.f2__src img{width:13px;height:13px}
.f2__beat{margin-top:22px}
.f2__beat h3{font:600 15.5px/1.3 var(--font-body);color:var(--ink);margin:0 0 10px}
.f2__ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.f2-man{display:inline-flex;align-items:stretch;border-radius:10px;border:1px solid var(--hx-line);background:var(--hx-paper2);overflow:hidden;max-width:100%}
.f2-man > span{padding:6px 10px;font:400 12px var(--font-mono);color:var(--hx-ink5);border-right:1px solid var(--hx-line)}
.f2-man code{padding:6px 10px;font:500 12.5px var(--font-mono);color:var(--ink)}
.f2__pkg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.f2__pkg img{width:16px;height:16px}
.f2__pkg b{font:600 13px var(--font-mono);color:var(--ink)}
.f2__pkg small{font:400 12px var(--font-body);color:var(--hx-ink5)}
.f2__note{font:400 13px/1.5 var(--font-body);color:var(--hx-ink5);margin:9px 0 0}
.f2__grid{display:grid;grid-template-columns:repeat(33,minmax(0,12px));gap:4px}
.f2__grid i{display:block;aspect-ratio:1;border-radius:3px;background:var(--hx-ok-200);transition:background-color .35s ease}
.f2__grid i.a{background:#0284c7}
.f2.is-pre .f2__grid i{background:var(--hx-line)}
.f2__leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;font:400 11px/1.4 var(--font-mono);color:var(--hx-ink5)}
.f2__leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.f2__leg .ok{background:var(--hx-ok-200)}
.f2__leg .al{background:#0284c7}
.f2__mono{font:400 11.5px/1.5 var(--font-mono);color:var(--hx-ink5);margin:9px 0 0}
.f2__bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.f2__bh time{font:500 12px var(--font-mono);color:var(--hx-o7)}
.f2__bad{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;border-radius:10px;border:1px solid var(--hx-line);background:#fff}
.f2__bad > i{width:10px;height:10px;border-radius:2px;background:#dc2626;flex:none}
.f2__bad-tx{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.f2__bad-tx b{font:600 13.5px var(--font-mono);color:var(--ink)}
.f2__bad-tx span{font:400 13px var(--font-body);color:var(--hx-ink5)}
.f2__bad .vp{margin-left:auto}
.f2__tally{margin-top:22px;padding-top:20px;border-top:1px solid var(--hx-line)}
.f2__tally > b{display:block;font:600 14.5px/1.4 var(--font-body);color:var(--ink)}
.f2__count{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font:400 13px var(--font-body);color:var(--hx-ink5)}
.f2__count b{font:600 13.5px var(--font-mono);color:var(--ink);margin-right:2px}
@media (max-width:600px){
  .wy__big{font-size:56px}
  #why .section__title{font-size:30px}
  .f2{padding:16px 16px 18px}
  .f2__cap-l,.f2__src{display:none}.f2__cap-s{display:inline}
  .f2__grid{grid-template-columns:repeat(24,minmax(0,9px));gap:3px}
  .f2__bad-tx{flex-direction:column;gap:2px}
}

/* ───────── Caught in the wild: fig. 03 ───────── */
.f3{--lab:248px;--evh:96px;--axh:30px;margin:0;border-radius:18px;border:1px solid var(--hx-line);background:#fff;padding:28px;box-shadow:var(--shadow-sm);min-width:0}
.f3__head{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;font:400 11.5px var(--font-mono);color:var(--hx-ink5)}
.f3__src{display:inline-flex;align-items:center;gap:6px}
.f3__src img{width:14px;height:14px}
.f3__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;margin-top:26px}
.f3__title h3{font:700 24px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.f3__title p{font:400 15px/1.5 var(--font-body);color:var(--hx-ink5);margin:0;max-width:62ch}
.f3__nums{display:flex;gap:22px}
.f3__num{display:grid;gap:2px}
.f3__num b{font:700 40px/1 var(--font-display);letter-spacing:-.035em;color:var(--hx-ink5);white-space:nowrap}
.f3__num--us b{color:var(--hx-o7)}
.f3__num span{font:400 12.5px var(--font-body);color:var(--hx-ink5)}
.f3__chart{position:relative;margin-top:26px}
.f3__ev{position:relative;height:var(--evh);margin-left:var(--lab)}
.f3-ev{position:absolute;left:calc(var(--t) / 240 * 100%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transform:translateX(-4.5px);
  font:400 13px var(--font-body);color:var(--hx-ink5)}
.f3-ev time{font:700 12.5px var(--font-mono);color:var(--ink)}
.f3-ev i,.f3__list i{width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none}
.f3-ev--pub{top:0}
.f3-ev--us{top:26px}
.f3-ev--blk{top:52px}
.f3-ev--osv{top:0;transform:translateX(calc(-100% + 4.5px))}
.f3-ev--us i,.f3__list .f3-li--us i{background:var(--hx-o)}
.f3-ev--osv i,.f3__list .f3-li--osv i{background:#fff;border:2px solid var(--hx-ink5)}
.f3-ev .vp{margin-left:4px}
.f3__grid,.f3__guides{position:absolute;left:var(--lab);right:0;bottom:var(--axh);pointer-events:none}
.f3__grid{top:var(--evh)}
.f3__guides{top:0}
.f3__grid i{position:absolute;top:0;bottom:-6px;left:calc(var(--t) / 240 * 100%);width:1px;background:var(--hx-line)}
.f3__guides i{position:absolute;bottom:0;left:calc(var(--t) / 240 * 100%);border-left:1px dashed var(--hx-deco)}
.f3__guides .g-pub{top:20px}.f3__guides .g-find{top:46px}.f3__guides .g-blk{top:76px;border-color:var(--hx-o)}.f3__guides .g-osv{top:20px}
.f3__lane{position:relative;display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;margin:12px 0 0}
.f3__lane + .f3__lane{margin-top:24px}
.f3__who{display:grid;gap:1px;padding-right:16px}
.f3__who b{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.f3__who > span{font:400 12px/1.3 var(--font-body);color:var(--hx-ink5)}
.f3__who-m{display:none}
.f3__track{position:relative;height:36px}
.f3-bar{position:absolute;top:0;bottom:0;left:calc(var(--a) / 240 * 100%);width:calc((var(--b) - var(--a)) / 240 * 100% - 3px);border-radius:8px;border:1px solid;display:flex;align-items:center;overflow:hidden;
  transform-origin:left center;transition:transform .9s var(--hx-ease)}
.f3-l{padding:0 10px;font:600 12.5px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f3-l__m{display:none}
.f3-bar--exp{background:var(--hx-bad-50);border-color:var(--hx-bad-200);color:var(--hx-bad)}
.f3-bar--late{background:var(--hx-paper2);border-color:var(--hx-line);color:var(--hx-ink5)}
.f3-bar--late .f3-l{font-weight:400}
.f3-bar--us{background:var(--hx-o50);border-color:var(--hx-o);color:var(--hx-o7)}
.f3__axis{position:relative;height:var(--axh);margin-left:var(--lab);margin-top:6px}
.f3__axis span{position:absolute;top:10px;left:calc(var(--t) / 240 * 100%);transform:translateX(-50%);font:400 11px var(--font-mono);color:var(--hx-ink5)}
.f3__list{display:none;list-style:none;margin:18px 0 0;padding:0;gap:10px}
.f3__list li{display:grid;grid-template-columns:9px auto minmax(0,1fr);align-items:center;gap:9px;font:400 14px/1.4 var(--font-body);color:var(--hx-ink5)}
.f3__list li .vp{margin-left:6px;vertical-align:middle}
.f3__list time{font:700 13px var(--font-mono);color:var(--ink)}
/* motion: the lanes draw left to right, then the BLOCK lands */
.f3.is-pre .f3-bar:not(.on){transform:scaleX(0)}
.f3 .f3-ev--blk .vp,.f3 .f3__list .vp{transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.f3.is-pre:not(.is-landed) .f3-ev--blk .vp,.f3.is-pre:not(.is-landed) .f3__list .vp{opacity:0;transform:scale(.6)}
.f3__more-t{font:600 14.5px var(--font-body);color:var(--ink);margin:30px 0 12px}
.f3__more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f3-case{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:14px;background:var(--hx-paper2)}
.f3-case__tx{display:grid;gap:3px;min-width:0}
.f3-case__tx b{display:flex;align-items:center;gap:7px;font:600 14.5px/1.3 var(--font-body);color:var(--ink)}
.f3-case__tx b img{width:14px;height:14px}
.f3-case__tx small{font:400 11px var(--font-mono);color:var(--hx-ink5)}
.f3-case__tx p{margin:0;font:400 13.5px/1.45 var(--font-body);color:var(--ink)}
.f3-case__n{margin-left:auto;display:grid;justify-items:end;text-align:right;flex:none}
.f3-case__n b{font:700 26px/1.05 var(--font-display);letter-spacing:-.03em;color:var(--hx-o7);white-space:nowrap}
.f3-case__n span{font:400 12px var(--font-body);color:var(--hx-ink5)}
.f3__note{margin:22px 0 0;font:400 12px/1.5 var(--font-body);color:var(--hx-ink5)}
@media (max-width:1100px){.f3{--lab:190px}.f3-ev{font-size:12px}}
@media (max-width:820px){
  .f3{--lab:0px;--evh:0px;padding:18px 16px}
  .f3__top{grid-template-columns:minmax(0,1fr)}
  .f3__nums{gap:18px}
  .f3__num b{font-size:30px}
  .f3__ev,.f3__guides{display:none}
  .f3__lane{grid-template-columns:minmax(0,1fr);gap:6px}
  .f3__lane + .f3__lane{margin-top:12px}
  .f3__who > span{display:none}
  .f3__who-m{display:inline}
  .f3__track{height:30px}
  .f3-bar--short .f3-l,.f3-bar--late .f3-l{display:none}
  .f3-l{font-size:12px}
  .f3-l__d{display:none}.f3-l__m{display:inline}
  .f3__axis span.odd{display:none}
  .f3__axis span:first-child{transform:none}
  .f3__axis span:last-child{transform:translateX(-100%)}
  .f3__list{display:grid}
  .f3__more{grid-template-columns:minmax(0,1fr);gap:10px}
  .f3-case{flex-direction:column;align-items:flex-start;gap:4px}
  .f3-case__n{margin-left:0;display:flex;gap:.45em;justify-items:start;text-align:left}
  .f3-case__n b,.f3-case__n span{font:500 12px var(--font-mono);letter-spacing:0;color:var(--hx-o7)}
}

/* ───────── Caught in the wild: the case-study rail ───────── */
.cs-rail{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin:clamp(32px,4vw,48px) 0 0;padding:6px 0 14px;scrollbar-width:thin;scrollbar-color:var(--hx-line) transparent}
.cs-rail:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:14px}
@media (max-width:760px){.cs-rail{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}
.cs-rail__track{display:flex;width:max-content}
.cs-rail__set{display:flex;gap:14px}
.cs-rail__set[aria-hidden]{display:none}
.csm{scroll-snap-align:start}
.csm{flex:none;width:272px;display:grid;gap:8px;align-content:start;padding:16px 16px 14px;border-radius:14px;border:1px solid var(--hx-line);background:var(--white);
  text-decoration:none;color:inherit;transition:transform .35s var(--hx-ease),box-shadow .35s var(--hx-ease),border-color .35s}
.csm:hover,.csm:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange-line)}
.csm__top{display:flex;align-items:center;gap:7px;font:400 11.5px var(--font-mono);color:var(--hx-ink5)}
.csm__top img{width:18px;height:18px;object-fit:contain}
.csm__top time{margin-left:auto;font:400 11.5px var(--font-mono);color:var(--hx-ink5)}
.csm__t{font:700 17px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.csm__d{font-size:14px;line-height:1.55;color:var(--hx-ink5)}
.csm__s{margin-top:2px;font:500 12px var(--font-mono);color:var(--hx-o7)}
.cs-rail__all{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(32px,4vw,52px);font:600 15px var(--font-body);color:var(--blue);text-decoration:none}
.cs-rail__all:hover{text-decoration:underline;text-underline-offset:3px}

/* ───────── We read the code ───────── */
.cm{max-width:760px;margin:0;border-radius:14px;box-shadow:var(--shadow)}
.cm .commit__head{background:var(--hx-paper2);border-bottom:0}
.cm .commit__meta{font-size:12px;color:var(--hx-ink5)}
.cm .commit__hash{color:var(--hx-ink5)}
.cm .commit__file{border-bottom:0}
.cm .commit__file::before{content:none}
.cm .diff__line{grid-template-columns:52px 26px minmax(0,1fr);font-size:13.5px;line-height:2.3}
.cm .diff__gutter,.cm .diff__line--add .diff__gutter,.cm .diff__line--del .diff__gutter,.cm .diff__line--flag .diff__gutter{background:transparent;text-align:left;padding-left:14px}
.cm .diff__line--del{background:#fef2f2}
.cm .diff__line--add{background:#ecfdf5}
.cm .diff__line--flag{background:var(--hx-o50);box-shadow:none}
.cm .diff__line--flag .diff__code{font-weight:400}
.cm .diff__sign{color:var(--hx-ink5)!important}
.cm .diff__note{background:var(--hx-o50);border-left:3px solid var(--hx-o);font:400 14px/1.6 var(--font-body);color:var(--ink);padding:10px 20px 14px 63px}
@media (max-width:600px){.cm .diff__line{grid-template-columns:40px 18px minmax(0,1fr);font-size:12px}.cm .diff__note{padding-left:20px;font-size:13.5px}}

/* ───────── Products ───────── */
.pg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:960px){.pg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pg__grid{grid-template-columns:minmax(0,1fr)}}
.pg__card{display:grid;gap:10px;align-content:start;padding:22px;border-radius:14px;border:1px solid var(--hx-line);background:var(--white);text-decoration:none;color:inherit;
  transition:transform .35s var(--hx-ease),box-shadow .35s var(--hx-ease),border-color .35s}
.pg__card:hover,.pg__card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange-line)}
.pg__logos{display:flex;gap:8px;align-items:center;height:32px}
.pg__logos img{height:30px;width:auto;max-width:48px;object-fit:contain}
.pg__logos img[src*="xyz-symbol"]{height:24px;max-width:32px}
.pg__card h3{font:700 21px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:2px 0 0}
.pg__card p{font-size:15px;line-height:1.5;color:var(--hx-ink5);margin:0}
.pg__more{margin-top:2px;font:600 15px var(--font-body);color:var(--blue)}

/* ───────── Working with / built with ───────── */
#trusted .trusted__title{color:var(--hx-ink5);font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.25;max-width:none}
.trusted__head .eyebrow{justify-content:center}
.trusted__sublabel{font:500 11.5px var(--font-mono);letter-spacing:0;color:var(--hx-o7)}
.tl{gap:clamp(22px,3.4vw,44px)!important}
.tl--built{gap:clamp(20px,3vw,40px) clamp(22px,3.6vw,48px)!important}
.tl img{width:auto;max-width:none;flex:none;object-fit:contain;opacity:1}
#trusted .trusted__head{margin-bottom:clamp(28px,3vw,40px)}
@media (max-width:560px){.tl img{height:26px!important;max-height:none}.tl--built{gap:22px 26px!important}}

/* ───────── SOC 2 ───────── */
.soc{padding:8px var(--gutter) clamp(48px,6vw,80px);background:var(--bg)}
.soc__in{max-width:calc(var(--container) - 2 * var(--gutter));margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1.85fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(22px,3vw,36px) clamp(22px,3vw,44px);border-radius:18px;border:1px solid var(--hx-line);background:var(--white)}
.soc__badge{width:112px;height:auto}
.soc__k{font:500 13px var(--font-mono);color:var(--hx-o7)}
.soc__copy h2{font:700 clamp(20px,1.6vw,22px)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:6px 0 10px}
.soc__copy p{font-size:15px;line-height:1.6;color:var(--hx-ink5);margin:0;max-width:60ch}
.soc__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.soc__list li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink)}
.soc__list li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.75px solid var(--hx-o7);transform:translateY(2px)}
@media (max-width:960px){.soc__in{grid-template-columns:auto minmax(0,1fr)}.soc__list{grid-column:1/-1}}
@media (max-width:560px){.soc__in{grid-template-columns:minmax(0,1fr)}.soc__badge{width:88px}}

/* ───────── Rolling it out: FAQ ───────── */
.hfaq{padding:clamp(64px,7vw,96px) var(--gutter);background:var(--white);border-top:1px solid var(--hx-line)}
.hfaq__in{max-width:calc(var(--container) - 2 * var(--gutter));margin:0 auto;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
.hfaq__head{display:grid;gap:12px;align-content:start}
.hfaq__k{font:500 13px var(--font-mono);color:var(--hx-o7)}
.hfaq__t{font:800 clamp(30px,3vw,40px)/1.08 var(--font-display);letter-spacing:-.03em;color:var(--ink);margin:0}
.hfaq__sub{font-size:15px;line-height:1.5;color:var(--hx-ink5);margin:4px 0 0}
.hfaq__list{border-bottom:1px solid var(--hx-line)}
.hfaq__item{border-top:1px solid var(--hx-line)}
.hfaq__item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;cursor:pointer;font:600 17px/1.35 var(--font-body);color:var(--ink)}
.hfaq__item summary::-webkit-details-marker{display:none}
.hfaq__item summary:hover{color:var(--hx-o7)}
.hfaq__item summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.hfaq__item summary .i{width:20px;height:20px;color:var(--ink)}
.hfaq__minus,.hfaq__item[open] .hfaq__plus{display:none}
.hfaq__item[open] .hfaq__minus{display:inline-block}
.hfaq__item p{margin:-6px 0 0;padding:0 40px 22px 0;font-size:15.5px;line-height:1.6;color:var(--hx-ink5)}
.hfaq__item code{font:400 13.5px var(--font-mono);color:var(--ink);background:var(--hx-paper2);border:1px solid var(--hx-line);border-radius:6px;padding:1px 6px}
@media (max-width:860px){.hfaq__in{grid-template-columns:minmax(0,1fr);gap:28px}.hfaq__item summary{font-size:16px}.hfaq__item p{padding-right:0}}

/* ───────── The ask ───────── */
.ask{position:relative;padding:clamp(72px,8vw,112px) var(--gutter);border-top:1px solid var(--hx-line);background:var(--bg)}
.ask__in{max-width:calc(var(--container) - 2 * var(--gutter));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,486px);
  grid-template-areas:"head head" "next form" "try form";column-gap:clamp(32px,6vw,72px);align-items:start}
.ask__head{grid-area:head;display:grid;gap:14px;max-width:780px;margin-bottom:clamp(36px,4vw,52px)}
.ask__k{font:500 13px var(--font-mono);color:var(--hx-o7)}
.ask__t{font:800 clamp(34px,4.3vw,56px)/1.05 var(--font-display);letter-spacing:-.035em;color:var(--ink);margin:0}
.ask__t span{display:block;color:var(--hx-o7)}
.ask__lede{font-size:clamp(16.5px,1.35vw,19px);line-height:1.6;color:var(--hx-ink5);margin:0;max-width:62ch}
.ask__next{grid-area:next;min-width:0}
.ask__next-t{font:600 14px var(--font-body);color:var(--ink);margin:0 0 12px}
.ask__steps{list-style:none;margin:0;padding:0}
.ask__steps li{display:grid;grid-template-columns:32px minmax(0,1fr);row-gap:4px;padding:18px 0 22px;border-top:1px solid var(--hx-line)}
.ask__n{grid-row:1/span 2;font:500 13px/1.6 var(--font-mono);color:var(--hx-o7)}
.ask__steps b{font:600 16px/1.35 var(--font-body);color:var(--ink)}
.ask__steps li > span:last-child{font-size:15px;line-height:1.5;color:var(--hx-ink5)}
.ask__try{grid-area:try;min-width:0;margin-top:28px;padding:22px 20px 18px;border-radius:14px;border:1px solid var(--hx-line);background:#fff}
.ask__try-t{font:700 17px var(--font-display);letter-spacing:-.01em;color:var(--ink);margin:0}
.ask__try > p{font-size:14.5px;color:var(--hx-ink5);margin:10px 0 14px}
.ask__try .chk__bar{margin:0;max-width:none;box-shadow:none;border-width:1px;border-radius:12px;padding:6px 6px 6px 8px}
.ask__try .chk__eco{border-right:0;padding-right:4px}
.ask__try .chk__input{font-size:13px}
.ask__go{background:#fff!important;color:var(--ink)!important;border:1px solid var(--hx-line)!important;border-radius:999px!important;padding:11px 22px!important;font-weight:600!important}
.ask__go:hover{border-color:var(--ink)!important}
.ask__try .chk__bar{flex-wrap:nowrap}
.ask__try .chk__go{width:auto;flex:none}
.ask__try .ask__ex{font-size:13px;color:var(--hx-ink5);margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ask__ex > span{color:var(--hx-deco)}
.ask__ex a{font:400 12.5px var(--font-mono);color:var(--blue);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px}
.ask__form{grid-area:form;min-width:0}
.ask__form .demo-form{background:#fff;border:1px solid var(--hx-line);border-radius:18px;padding:32px;box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.ask__form .demo-form:hover{box-shadow:var(--shadow)}
.ask__form .demo-form::before,.ask__form .demo-form::after{display:none}
.ask__form .demo-form__title{font:700 24px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.ask__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font:400 14px var(--font-body);color:var(--hx-ink5)}
.ask__meta li{display:inline-flex;align-items:center;gap:6px}
.ask__meta .i{width:15px;height:15px;color:var(--ink)}
.ask__sub{font-size:14.5px;color:var(--hx-ink5);margin:12px 0 24px}
.ask__form .demo-form__field{margin-bottom:16px}
.ask__form .demo-form__field-err:empty,.ask__form .demo-form__error:empty{display:none}
.ask__form .demo-form__field label{font:600 14px var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:7px}
.ask__opt{font-weight:400;color:var(--hx-ink5)}
.ask__form .demo-form__field input{height:48px;padding:0 14px;border-radius:10px;border:1px solid #c9c9d8;background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:16px}
.ask__form .demo-form__field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,46,255,.14);background:#fff}
.ask__form .demo-form__submit{display:flex;justify-content:center;height:48px;padding:0 20px;margin-top:8px;border-radius:999px;background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(46,46,255,.22);font-size:15.5px;font-weight:600}
.ask__form .demo-form__submit:hover{background:#1f1fd6;box-shadow:0 8px 20px rgba(46,46,255,.26)}
.ask__form .demo-form__note{font-size:13px;color:var(--hx-ink5);margin-top:16px}
.ask__form .demo-form__note a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.ask__form .demo-form__success-icon{background:var(--hx-ok-50);color:var(--hx-ok);border:1px solid var(--hx-ok-200)}
.ask__form .demo-form__success-icon .i{width:26px;height:26px;stroke-width:2}
@media (max-width:960px){
  .ask__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "next" "try"}
  .ask__head{margin-bottom:28px}
  .ask__t{font-size:clamp(28px,7.6vw,40px)}
  .ask__next{margin-top:40px}
  .ask__form .demo-form{padding:22px 20px}
}

/* ───────── reduced motion: every figure shows its final frame ───────── */
@media (prefers-reduced-motion:reduce){
  .d1.is-pre .d1-row .vp,.d1.is-pre .d1-block,.f3.is-pre .f3-bar{opacity:1!important;transform:none!important}
  .f2.is-pre .f2__grid i{background:var(--hx-ok-200)!important}
  .f2.is-pre .f2__grid i.a{background:#0284c7!important}
  .hw__path{transition:none}
}

/* works-with band: flat hairlines (no gradients outside the logo files) */
.trusted::before,.trusted::after{height:1px;background:var(--hx-line)}
/* fig. 01 without JS: the static paths are drawn for the 1440 layout, so hide them below it */
@media (max-width:1300px){html:not(.js) .d1__paths{display:none}}

/* KPMG testimonial (owner-approved 2026-10-07), above the built-with logos */
.tq{max-width:1128px;margin:0 auto clamp(36px,4vw,52px);padding:clamp(24px,3.2vw,44px);border-radius:18px;border:1px solid var(--hx-line);background:#fff;box-shadow:var(--shadow-sm);text-align:left}
.tq::before{content:"";display:block;width:40px;height:3px;border-radius:2px;background:var(--hx-o);margin-bottom:clamp(18px,2vw,24px)}
.tq__q{margin:0}
.tq__q p{margin:0;font:700 26px/1.32 var(--font-display);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.tq__who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:clamp(18px,2vw,24px)}
.tq__meta{display:grid;gap:2px}
.tq__meta b{font:600 15px/1.35 var(--font-body);color:var(--ink)}
.tq__meta span{font:400 13.5px/1.4 var(--font-body);color:var(--hx-ink5)}
.tq__link{display:inline-flex;align-items:center;gap:5px;min-height:32px;font:600 14px var(--font-body);color:var(--blue);text-decoration:none}
.tq__link .i{width:14px;height:14px}
.tq__link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.tq__q p{font-size:20px;line-height:1.36}}
/* burger: the checkbox only exists for keyboard users where the burger shows, and its focus ring lands on the burger */
@media (min-width:861px){.nav__check{display:none}}
.nav__check:focus-visible ~ .nav__burger{outline:2px solid var(--blue);outline-offset:2px}