/* ==========================================================================
   Exponent: the YiB family design system (Ahmed Reza's direction 01, boards A–E)
   One type family (Host Grotesk) plus Geist Mono for labels and data. Graphite on
   Porcelain. The Ultramarine block is the Yobi in every brand: it sits in each
   wordmark, ends headlines as a full stop and leads every eyebrow. Each site sets
   --brand (and --brand-ink, --brand-text) in its own stylesheet.
   ========================================================================== */
:root{
  --ultra:#2F45FF; --ultra-deep:#1F2FC4; --ultra-soft:#E7EAFF;
  --graphite:#111216; --ink:#111216; --ink-2:#3A3D47; --steel:#5E6270; --muted:#5E6270;
  --porcelain:#F4F2ED; --porcelain-2:#E9E6DF; --ice:#DDE2FF; --surface:#FFFFFF;
  --line:#DAD6CC; --line-soft:#E4E1DA;
  --night:#111216; --night-2:#1B1C22; --night-ink:#F4F2ED; --night-muted:#9EA2AE; --night-line:rgba(244,242,237,.12);
  --gold:#F2B634; --gold-deep:#9A6A06; --green:#1C7C4A;
  --brand:var(--ultra); --brand-deep:var(--ultra-deep); --brand-soft:var(--ultra-soft); --brand-ink:#FFFFFF; --brand-text:var(--ultra);
  --sans:"Host Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px; --gutter:clamp(16px,4.5vw,72px);
  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 1px 0 #D6D2C8,0 24px 48px -24px rgba(17,18,22,.22);
  --head-h:72px;
  color-scheme:light;
}
[hidden]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--porcelain);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;color:inherit}
p{margin:0}
a{color:inherit}
img,svg,video,canvas,iframe{max-width:100%}
img{height:auto}
button{font:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:calc(760px + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12.5px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--ultra);flex:none}
.on-dark .eyebrow,.on-brand .eyebrow{color:currentColor;opacity:.85}
.blk{display:inline-block;width:.2em;height:.2em;background:var(--ultra);margin-left:.06em;vertical-align:baseline}
.on-brand .blk{background:#fff}
.display{font-size:clamp(44px,6vw,88px);letter-spacing:-.05em;line-height:.95}
.h1{font-size:clamp(40px,5vw,72px);letter-spacing:-.045em;line-height:.98}
.h2{font-size:clamp(32px,3.8vw,54px);letter-spacing:-.04em}
.h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.12}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--ink-2);max-width:40em}
.on-dark .lede{color:var(--night-muted)}
.small{font-size:14.5px}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 20px;border-radius:var(--r-md);font:600 15.5px/1.1 var(--sans);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s,box-shadow .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-brand:hover{background:var(--brand-deep)}
.btn-dark{background:var(--ink);color:var(--porcelain)}
.btn-light{background:#fff;color:var(--ink)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-sm{min-height:40px;padding:0 15px;font-size:14.5px;border-radius:10px}
.btn svg{width:18px;height:18px;flex:none}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand-text);text-decoration:none}
.link-arrow::after{content:"→";transition:transform .2s}
.link-arrow:hover::after{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- header ---------- */
/* the header and footer defend their own look on pages that bring extra CSS (the homepages) */
.sx-header .wrap,.sx-footer .wrap{max-width:calc(1200px + 2*var(--gutter));padding-inline:var(--gutter);margin-inline:auto}
.sx-header .btn,.sx-drawer .btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;font:600 14.5px/1.1 var(--sans);letter-spacing:0;border-radius:10px;box-shadow:none;text-decoration:none;white-space:nowrap}
.sx-header .btn-brand{background:var(--brand);color:var(--brand-ink)}
.sx-header .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sx-drawer .btn{min-height:48px;font-size:16px}
.sx-header{position:sticky;top:0;z-index:90;background:rgba(244,242,237,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.sx-header.scrolled{border-bottom-color:var(--line)}
.sx-head{height:var(--head-h);display:flex;align-items:center;gap:28px}
.sx-logo{display:flex;align-items:center;flex:none;color:var(--ink);text-decoration:none}
.sx-logo svg{height:28px;width:auto;display:block}
.sx-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.sx-nav>li{position:relative}
.sx-nav>li>a,.sx-nav>li>button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;background:none;border-radius:10px;font:500 15px/1 var(--sans);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.sx-nav>li>a:hover,.sx-nav>li>button:hover,.sx-nav>li>button[aria-expanded="true"]{background:rgba(17,18,22,.06)}
.sx-nav>li>a[aria-current="page"]{color:var(--brand-text)}
.sx-nav .chev{width:10px;height:10px;transition:transform .2s}
.sx-nav>li>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sx-menu{position:absolute;left:-12px;top:calc(100% + 10px);min-width:300px;max-width:min(720px,calc(100vw - 32px));background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:0 24px 60px -24px rgba(17,18,22,.35);padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.sx-menu.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));min-width:560px}
.sx-menu.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));min-width:700px}
.sx-nav>li.open>.sx-menu{opacity:1;visibility:visible;transform:none}
.sx-menu a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.sx-menu a:hover,.sx-menu a:focus-visible{background:var(--porcelain)}
.sx-menu a b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.sx-menu a span{display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:2px}
.sx-menu .grp{grid-column:1/-1;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
.sx-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.sx-phone{font:500 14px/1 var(--mono);color:var(--ink);text-decoration:none;white-space:nowrap}
.sx-sub{font:600 15px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.sx-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.sx-burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .2s}
.sx-burger span::before,.sx-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .2s,top .2s}
.sx-burger span::before{top:-6px}.sx-burger span::after{top:6px}
.sx-header.menu-open .sx-burger span{background:transparent}
.sx-header.menu-open .sx-burger span::before{top:0;transform:rotate(45deg)}
.sx-header.menu-open .sx-burger span::after{top:0;transform:rotate(-45deg)}
.sx-drawer{display:none}
@media (max-width:1080px){
  .sx-nav,.sx-phone{display:none}
  .sx-burger{display:inline-flex}
  .sx-drawer{position:fixed;left:0;right:0;top:var(--head-h);bottom:0;background:var(--porcelain);overflow-y:auto;padding:12px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .sx-header.menu-open .sx-drawer{display:block}
  .sx-drawer details{border-bottom:1px solid var(--line)}
  .sx-drawer summary,.sx-drawer>a{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;font:600 18px/1.2 var(--sans);text-decoration:none;color:var(--ink);cursor:pointer;list-style:none}
  .sx-drawer>a{border-bottom:1px solid var(--line)}
  .sx-drawer summary::-webkit-details-marker{display:none}
  .sx-drawer summary::after{content:"+";font:400 22px/1 var(--sans);color:var(--muted)}
  .sx-drawer details[open] summary::after{content:"–"}
  .sx-drawer details a{display:block;padding:10px 2px 10px 12px;text-decoration:none;color:var(--ink-2);font-size:16px}
  .sx-drawer .grp{padding:12px 2px 2px 12px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .sx-drawer .drawer-cta{display:grid;gap:10px;margin-top:22px}
  body.no-scroll{overflow:hidden}
}
@media (max-width:560px){.sx-sub{display:none}.sx-right .btn{padding:0 14px;min-height:42px;font-size:14.5px}.sx-logo svg{height:24px}}

/* ---------- page hero ---------- */
.page-hero{padding-block:clamp(56px,8vw,112px) clamp(40px,6vw,80px)}
.page-hero .inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.page-hero .inner.solo{grid-template-columns:minmax(0,1fr);max-width:980px}
.page-hero h1{margin-top:20px;font-size:clamp(40px,5.2vw,76px);letter-spacing:-.045em;line-height:.98}
.page-hero .lede{margin-top:22px}
.page-hero .art{border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.page-hero .art img{display:block;width:100%;height:auto}
.page-hero .art.plain{background:none;box-shadow:none;border-radius:0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font:500 12.5px/1.2 var(--mono);color:var(--muted);margin-bottom:18px;padding:0;list-style:none}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}

/* ---------- hero extras ---------- */
.badges{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.badges li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line-soft);font:500 12.5px/1.2 var(--mono);color:var(--ink-2)}
.badges li::before{content:"";width:7px;height:7px;background:var(--brand);flex:none}
.hero-note{margin-top:18px;font:500 13px/1.5 var(--mono);color:var(--muted)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,8vw,120px)}
.sec.tight{padding-block:clamp(44px,6vw,80px)}
.sec.alt{background:var(--surface);border-block:1px solid var(--line-soft)}
.sec.on-dark{background:var(--night);color:var(--night-ink)}
.sec.on-brand{background:var(--brand);color:var(--brand-ink)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.sec-head h2{margin-top:16px;font-size:clamp(32px,3.8vw,54px);letter-spacing:-.04em}
.sec-head .lede{font-size:18px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.split.flip>:first-child{order:2}
.split .media{border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.split .media img{display:block;width:100%;height:auto}
.split .media.plain{background:none;box-shadow:none;border-radius:0}
.split h2,.split h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.035em}
.split .body{display:grid;gap:14px}
.split .body>p,.split .body>ul{color:var(--ink-2)}
.on-dark .split .body>p{color:var(--night-muted)}

/* ---------- cards and grids ---------- */
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:24px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.on-dark .card{background:var(--night-2);border-color:var(--night-line)}
.card h3,.card h4{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.card p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.on-dark .card p{color:var(--night-muted)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand-text);flex:none;margin-bottom:6px;overflow:hidden}
.card .ic img{width:30px;height:30px;object-fit:contain}
.card .ic svg{width:22px;height:22px}
.card .num-k{font:500 12.5px/1 var(--mono);color:var(--brand-text)}
.card .card-img{margin:-24px -22px 8px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--porcelain-2)}
.card .card-img img{width:100%;height:100%;object-fit:cover;display:block}
a.card{text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:5px;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.checklist.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{padding-top:16px;border-top:2px solid var(--brand)}
.stat b{display:block;font:700 clamp(36px,4vw,54px)/1 var(--sans);letter-spacing:-.045em;color:var(--brand-text);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:15px;color:var(--ink-2)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px}
.logos img{height:40px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.8}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:s}
.steps li{position:relative;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px 22px 24px;display:grid;gap:8px;align-content:start}
.on-dark .steps li{background:var(--night-2);border-color:var(--night-line)}
.steps .n{font:500 13px/1 var(--mono);color:var(--brand-text)}
.steps h3{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.steps p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.on-dark .steps p{color:var(--night-muted)}
.card-rich{font-size:15.5px;line-height:1.55;color:var(--ink-2);display:grid;gap:8px}
.card-rich ul{margin:0;padding-left:1.1em}
.split-text{font-size:17px;max-width:none}
.form-sec{max-width:760px;margin-inline:auto}
.form-sec .sec-head{margin-bottom:22px}
.quote figcaption{font-size:14.5px;color:var(--muted)}
.quote figcaption b{display:block;color:var(--ink);font-weight:600}
figure.quote{margin:0}

/* ---------- quotes ---------- */
.quote{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px}
.quote blockquote{margin:0;font-size:19px;line-height:1.5;letter-spacing:-.01em}
.quote blockquote::before{content:"";display:block;width:10px;height:10px;background:var(--ultra);margin-bottom:14px}
.quote footer{font-size:14.5px;color:var(--muted)}
.quote footer b{display:block;color:var(--ink);font-weight:600}

/* ---------- FAQ ---------- */
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:20px 2px;cursor:pointer;list-style:none;font:600 18px/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--sans);color:var(--brand-text);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2px 22px;color:var(--ink-2);display:grid;gap:12px;max-width:62em}
.on-dark .faq{border-color:var(--night-ink)}.on-dark .faq details{border-color:var(--night-line)}.on-dark .faq .a{color:var(--night-muted)}

/* ---------- CTA band ---------- */
.cta-band{padding-block:clamp(56px,7vw,100px)}
.cta-band .panel{border-radius:24px;background:var(--brand);color:var(--brand-ink);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:28px;align-items:center}
.cta-band h2{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.045em}
.cta-band p{margin-top:14px;font-size:18px;opacity:.9;max-width:34em}
.cta-band .btn-light{color:var(--ink)}
.cta-band .blk{background:currentColor}
.cta-band .side{display:grid;gap:10px;justify-items:start}
.cta-band .side small{font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.cta-band .side b{font:700 clamp(26px,2.6vw,34px)/1.05 var(--sans);letter-spacing:-.02em}

/* ---------- prose (articles, legal, long text) ---------- */
.prose{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:720px}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:2em;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.prose h3{margin-top:1.7em;font-size:clamp(21px,2vw,25px);letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.prose h4,.prose h5,.prose h6{margin-top:1.5em;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.prose a{color:var(--brand-text);text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--brand-text)}
.prose img{display:block;border-radius:var(--r-md);margin-inline:auto}
.prose figure{margin:1.6em 0}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--ultra);font-size:20px;line-height:1.55;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.prose .table-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-md);background:#fff}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose th{font:600 13px/1.3 var(--sans);color:var(--ink);background:var(--porcelain)}
.prose .btn{margin-top:.4em;text-decoration:none}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-frame{width:100%;border:0;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);min-height:640px}

/* ---------- article layout ---------- */
.article-head{padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px)}
.article-head h1{margin-top:18px;font-size:clamp(36px,4.6vw,64px);letter-spacing:-.045em;line-height:1.02;max-width:17em}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font:500 13px/1.3 var(--mono);color:var(--muted)}
.article-hero{margin-bottom:clamp(32px,5vw,56px)}
.article-hero img{display:block;width:100%;max-height:560px;object-fit:cover;border-radius:var(--r-lg)}
.article-body{padding-bottom:clamp(56px,7vw,96px)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.tag{display:inline-flex;align-items:center;padding:7px 11px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line-soft);font:500 12.5px/1 var(--mono);color:var(--ink-2);text-decoration:none}
a.tag:hover{border-color:var(--brand);color:var(--brand-text)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card .thumb{aspect-ratio:16/9;background:var(--porcelain-2);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .thumb.none{display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),var(--porcelain))}
.post-card .thumb.none i{width:22%;aspect-ratio:1;background:var(--ultra);display:block}
.post-card .pc-body{padding:18px 20px 22px;display:grid;gap:8px}
.post-card .pc-meta{font:500 12px/1.2 var(--mono);color:var(--muted)}
.post-card h3{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.post-card p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.pager{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pager a,.pager span{min-width:44px;height:44px;display:inline-grid;place-items:center;padding:0 12px;border-radius:10px;border:1px solid var(--line);text-decoration:none;font:500 14px/1 var(--mono);background:#fff}
.pager span[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- docs (help center) ---------- */
.docs{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,64px);padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,110px)}
.docs-nav{position:sticky;top:calc(var(--head-h) + 20px);align-self:start;max-height:calc(100vh - var(--head-h) - 40px);overflow-y:auto;padding-right:6px}
.docs-nav h4{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.docs-nav h4:first-child{margin-top:0}
.docs-nav a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;font-size:14.5px;color:var(--ink-2)}
.docs-nav a:hover{background:var(--porcelain-2)}
.docs-nav a[aria-current="page"]{background:var(--surface);color:var(--brand-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--line-soft)}
.docs-nav details{margin-top:4px}
.docs-nav summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 10px 8px;border-radius:8px;font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.docs-nav summary::-webkit-details-marker{display:none}
.docs-nav summary::after{content:"+";font:400 15px/1 var(--sans);color:var(--muted)}
.docs-nav details[open]>summary{color:var(--ink)}
.docs-nav details[open]>summary::after{content:"\2212"}
.docs-nav summary:hover{background:var(--porcelain-2)}
.help-list{list-style:none;margin:12px 0 0;padding:0}
.help-list a{display:block;padding:8px 0;border-top:1px solid var(--line-soft);text-decoration:none;color:var(--ink-2);font-size:15px;line-height:1.35}
.help-list li:first-child a{border-top:0}
.help-list a:hover{color:var(--brand-text)}
.more-btn{margin-top:8px;padding:6px 0;background:none;border:0;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text)}
.docs-search{width:100%;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:0 14px;font:inherit;font-size:15px;margin-bottom:18px}

/* ---------- forms ---------- */
.form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:6px}
.field label{font:500 12.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:48px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:10px 14px;font:inherit;font-size:16px;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.form .note{font-size:13.5px;color:var(--muted)}
.form .ok{display:none;padding:14px 16px;border-radius:10px;background:var(--brand-soft);color:var(--ink);font-weight:500}
.form.sent .ok{display:block}
.form.sent .fields{display:none}

/* ---------- footer ---------- */
.sx-footer{background:var(--night);color:var(--night-muted);padding-top:clamp(56px,7vw,88px);font-size:14.5px}
.sx-foot{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));gap:32px}
.sx-foot .about p{margin-top:16px;max-width:24em;line-height:1.55}
.sx-foot .about .sx-logo{color:#fff}
.sx-foot .contact{margin-top:18px;display:grid;gap:6px;font:500 13.5px/1.4 var(--mono);color:var(--night-ink)}
.sx-foot .contact a{text-decoration:none}
.sx-foot h4{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--night-ink);margin-bottom:14px}
.sx-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sx-foot a{color:var(--night-muted);text-decoration:none;transition:color .2s}
.sx-foot a:hover{color:#fff}
.sx-social{display:flex;gap:10px;margin-top:18px}
.sx-social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--night-line);display:grid;place-items:center;color:var(--night-ink)}
.sx-social svg{width:16px;height:16px}
.sx-legal{margin-top:48px;padding-block:22px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px}
.sx-legal nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.sx-family{border-top:1px solid var(--night-line)}
.sx-family .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px))}
.sx-family .marks{display:flex;align-items:center;gap:26px}
.sx-family .marks a{display:block;height:22px;color:var(--night-ink);opacity:.9}
.sx-family .marks a:hover{opacity:1}
.sx-family .marks svg{display:block;height:100%;width:auto}
.sx-family p{font-size:13px}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.hero-rise{animation:sx-rise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes sx-rise{from{opacity:0;transform:translateY(16px)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-foot .about{grid-column:1/-1}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .page-hero .inner,.split,.sec-head,.cta-band .panel{grid-template-columns:minmax(0,1fr)}
  .split.flip>:first-child{order:0}
  .grid.c3,.grid.c2{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:minmax(0,1fr)}
  .docs-nav{position:static;max-height:none;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:#fff;padding:16px}
  .checklist.c2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .grid.c4,.post-grid{grid-template-columns:minmax(0,1fr)}
  .sx-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .row{grid-template-columns:minmax(0,1fr)}
  .prose{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}
.more-row{display:flex;justify-content:center;margin-top:36px}

/* dark and brand bands: every text component follows the band */
.on-dark .prose,.on-dark .stat span,.on-dark .checklist li,.on-dark .split .body ul,.on-dark .split .body ol{color:var(--night-muted)}
.on-dark .prose h2,.on-dark .prose h3,.on-dark .prose h4,.on-dark .prose h5,.on-dark .prose strong,.on-dark .prose a,.on-dark .stat b{color:var(--night-ink)}
.on-brand .prose,.on-brand .prose h2,.on-brand .prose h3,.on-brand .prose h4,.on-brand .prose strong,.on-brand .prose a,.on-brand .stat b,.on-brand .stat span,.on-brand .checklist li,.on-brand .split .body p,.on-brand .split .body ul{color:var(--brand-ink)}
.on-brand .stat{border-top-color:currentColor}
/* buttons keep their own colours inside prose */
.prose a.btn{text-decoration:none}
.prose a.btn-brand{color:var(--brand-ink)}
.prose a.btn-dark{color:var(--porcelain)}
.prose a.btn-light{color:var(--ink)}
.prose a.btn-ghost{color:inherit}
.on-dark .card-rich,.on-dark .card li,.on-dark .quote figcaption,.on-dark .quote footer{color:var(--night-muted)}
.on-dark .quote{background:var(--night-2);border-color:var(--night-line)}
.on-dark .quote blockquote,.on-dark .quote figcaption b,.on-dark .quote footer b,.on-dark .steps .n{color:var(--night-ink)}
.sec.on-dark{--brand-text:var(--night-ink)}   /* brand accents (navy, coral) vanish on graphite: accents go light there */
.on-dark .split-text,.on-dark .split-text p{color:var(--night-muted)}
.on-dark .split-text h2,.on-dark .split-text h3{color:var(--night-ink)}