/* motion.css: the styles motion.js needs (copied into each site with it). Only active once JS has run
   (html.js), so the page still reads fully without JavaScript. */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .wi { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .75, .15, 1); }
.js [data-split].in .wi { transform: none; }

.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .75, .15, 1); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].in { opacity: 1; transform: none; }

.js [data-unveil] { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1); }
.js [data-unveil].in { clip-path: inset(0 0 0 0); }
.js [data-unveil] img { transform: scale(1.18); transition: transform 2.2s cubic-bezier(.2, .75, .15, 1); }
.js [data-unveil].in img { transform: scale(1); }

[data-parallax] { will-change: transform; }
[data-magnetic] { transition: transform .35s cubic-bezier(.2, .75, .15, 1); }

[data-marquee] { overflow: hidden; }
[data-marquee] .marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-speed, 40s) linear infinite; }
[data-marquee]:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

[data-progress] { transform-origin: 0 50%; transform: scaleX(0); }

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

/* site.css: Staylio's design system. Colours are the live site's own (navy #1E3A5F, signal orange #E55A2B, navy-900
   #060B13, the steel greys, and the dark mode's #111827 and #1F2937); corners stay square like the live site's
   rounded-sm; the motif (a slanted plane, an outlined square, an orange block) runs through every page. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/static/fonts/archivo-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin.woff2) format('woff2'); }

:root {
  --navy: #1E3A5F;
  --navy-700: #284a75;
  --navy-900: #060B13;
  --orange: #E55A2B;
  --orange-hi: #ef6a3c;
  --orange-lo: #c94b20;
  --ink: #0F172A;
  --paper: #F8FAFC;
  --paper-2: #F1F5F9;
  --line: #E2E8F0;
  --line-2: #CBD5E1;
  --slate: #475569;
  --slate-2: #64748B;
  --green: #22C55E;
  --dk: #111827;
  --dk-2: #1F2937;
  --dk-line: rgba(255, 255, 255, .09);
  --dk-text: #D1D5DB;
  --dk-mute: #94A3B8;
  --btn-ink: #060B13; /* dark text on orange: white is 3.6:1, below WCAG AA for small text */
  --ease: cubic-bezier(.2, .75, .15, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --gut: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --hdr: 72px;
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-variation-settings: 'wdth' 100; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.04; font-stretch: 106%; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.i { width: 1.25em; height: 1.25em; flex: none; }
.vh { 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: 100; background: var(--orange); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); }

/* ---- sections --------------------------------------------------------------------------------------------- */
.sec { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.sec-tight { padding: clamp(56px, 7vw, 96px) 0; }
.dk { background: var(--dk); color: var(--dk-text); }
.dk h2, .dk h3, .dk h4 { color: #fff; }
.deep { background: var(--navy-900); color: var(--dk-text); }
.deep h2, .deep h3 { color: #fff; }
.lt { background: var(--paper); }
.wh { background: #fff; }
.kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kicker::before { content: ''; width: 8px; height: 8px; background: var(--orange); flex: none; }
.kicker-light { color: #fdba9c; }
/* small orange text on light grounds uses the darker orange (4.7:1 on white; --orange is 3.6:1) */
:is(.lt, .wh) :is(.kicker:not(.kicker-light), .link-arrow) { color: var(--orange-lo); }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fdba9c; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid rgba(229, 90, 43, .35); background: rgba(229, 90, 43, .08); margin-bottom: 26px; }
.eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--orange); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.shead { max-width: 820px; margin-bottom: clamp(40px, 5vw, 64px); }
.shead-c { margin-left: auto; margin-right: auto; text-align: center; }
.shead-c .kicker { justify-content: center; }
.shead h2, .h2 { font-size: clamp(2.05rem, 4.3vw, 3.55rem); color: var(--navy); }
.dk .shead h2, .deep .shead h2, .ctaband h2 { color: #fff; }
.shead-p { margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--slate); max-width: 680px; }
.shead-c .shead-p { margin-left: auto; margin-right: auto; }
.dk .shead-p, .deep .shead-p { color: var(--dk-mute); }
em.hl, .hl { font-style: normal; color: var(--orange); }

/* ---- buttons ---------------------------------------------------------------------------------------------- */
.btn { --h: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px; border-radius: 2px; font-weight: 650; font-size: 16px; letter-spacing: .005em; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--ease); }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.btn:hover::after { transform: scaleX(1); }
.btn-arrow { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-orange { background: var(--orange); color: var(--btn-ink); box-shadow: 0 10px 30px -12px rgba(229, 90, 43, .7); }
.btn-orange::after { background: var(--orange-hi); } /* lighter on hover so the dark --btn-ink keeps its contrast */
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .02); }
.btn-ghost::after { background: rgba(255, 255, 255, .1); }
.btn-line { color: var(--navy); border: 1.5px solid var(--navy); }
.btn-line::after { background: var(--navy); }
.btn-line:hover { color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy::after { background: var(--navy-900); }
.btn-sm { --h: 40px; padding: 0 16px; font-size: 14.5px; }
.btn-sm .btn-arrow { display: none; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 650; text-decoration: none; }
.link-arrow .i { transition: transform .3s var(--ease); width: 18px; }
.link-arrow:hover .i { transform: translateX(4px); }

/* ---- header ----------------------------------------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hdr); color: #fff; transition: background-color .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.has-scrolled .site-header, .menu-open .site-header, .site-header.solid { background: rgba(6, 11, 19, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-color: rgba(255, 255, 255, .07); }
.header-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; }
.logo-mark { width: 32px; height: 32px; color: var(--orange); }
.logo-type { display: flex; flex-direction: column; line-height: 1; }
.logo-type b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-stretch: 108%; }
.logo-type small { font-size: 10.5px; color: var(--dk-mute); margin-top: 4px; letter-spacing: .02em; }
.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { list-style: none; display: flex; gap: 4px; }
.nav-btn, .nav-a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: none; border: 0; color: rgba(255, 255, 255, .86); font-size: 15px; font-weight: 550; text-decoration: none; border-radius: 2px; transition: color .2s, background-color .2s; }
.nav-btn:hover, .nav-a:hover, .has-menu.open > .nav-btn { color: #fff; background: rgba(255, 255, 255, .07); }
.chev { width: 15px; height: 15px; transition: transform .3s var(--ease); opacity: .7; }
.has-menu.open > .nav-btn .chev { transform: rotate(180deg); }
.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.signin { position: relative; }
.nav-quiet { font-size: 14.5px; }
.mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .22s, transform .3s var(--ease), visibility 0s .3s; pointer-events: none; }
.has-menu.open > .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .22s, transform .3s var(--ease); pointer-events: auto; }
.mega-in { max-width: 1120px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: 3px; box-shadow: 0 30px 80px -20px rgba(6, 11, 19, .5), 0 0 0 1px rgba(15, 23, 42, .06); display: grid; grid-template-columns: 1fr 260px; overflow: hidden; position: relative; }
.mega-in::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--navy) 0 70%, var(--orange) 70%); }
.mega-wide { grid-template-columns: 300px 1fr; }
.mega-small { left: auto; right: -10px; width: 330px; }
.mega-small .mega-in { grid-template-columns: 1fr; padding: 10px; }
.mega-lead { background: var(--paper-2); padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; }
.mega-lead-t { font-size: 22px; font-weight: 750; line-height: 1.2; color: var(--navy); font-stretch: 104%; }
.mega-all { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 650; text-decoration: none; font-size: 15px; }
.mega-all .i { width: 17px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 18px; }
.mega-grid-2 { grid-template-columns: 1fr 1fr; }
.mm-link { display: flex; gap: 14px; padding: 13px 14px; text-decoration: none; border-radius: 2px; transition: background-color .2s; }
.mm-link .i { width: 22px; height: 22px; color: var(--navy); margin-top: 2px; transition: color .2s; }
.mm-link b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.mm-link small { display: block; font-size: 13.5px; color: var(--slate-2); line-height: 1.4; margin-top: 2px; }
.mm-link:hover { background: var(--paper-2); }
.mm-link:hover .i { color: var(--orange); }
.mega-side { background: var(--paper-2); padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; }
.mega-side a { color: var(--navy); font-weight: 600; font-size: 14.5px; text-decoration: none; line-height: 1.35; }
.mega-side a:hover { color: var(--orange); }
.read-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; }
.menu-btn .m-close { display: none; }
.menu-open .menu-btn .m-open { display: none; }
.menu-open .menu-btn .m-close { display: block; }
.mobile-menu { position: fixed; inset: var(--hdr) 0 0 0; z-index: 55; background: var(--navy-900); color: #fff; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
.menu-open .mobile-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .35s var(--ease); }
.menu-open { overflow: hidden; }
.mobile-in { padding: 18px var(--gut) 40px; display: flex; flex-direction: column; }
.mobile-in details { border-bottom: 1px solid var(--dk-line); }
.mobile-in summary { list-style: none; padding: 18px 0; font-size: 21px; font-weight: 700; display: flex; justify-content: space-between; cursor: pointer; }
.mobile-in summary::-webkit-details-marker { display: none; }
.mobile-in summary::after { content: '+'; color: var(--orange); font-weight: 400; }
.mobile-in details[open] summary::after { content: '–'; }
.mob-links { display: flex; flex-direction: column; padding-bottom: 14px; }
.mob-links a { padding: 9px 0; color: var(--dk-text); text-decoration: none; font-size: 16.5px; }
.mob-top { padding: 18px 0; border-bottom: 1px solid var(--dk-line); font-size: 21px; font-weight: 700; text-decoration: none; }
.mob-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
@media (max-width: 1140px) {
  .main-nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---- the motif -------------------------------------------------------------------------------------------- */
.motif { position: relative; pointer-events: none; }
.motif > div { position: absolute; will-change: transform; }
.mf-plane { inset: -12% -18% -12% 14%; transform: skewX(-12deg); background: linear-gradient(135deg, rgba(30, 58, 95, .5), rgba(30, 58, 95, .18) 55%, rgba(229, 90, 43, .16)); border-left: 1px solid rgba(255, 255, 255, .07); }
.mf-square { width: clamp(150px, 19vw, 256px); aspect-ratio: 1; top: 4%; right: 6%; border: 2px solid rgba(148, 163, 184, .24); }
.mf-block { width: clamp(80px, 9vw, 128px); aspect-ratio: 1; bottom: 2%; right: 14%; background: rgba(229, 90, 43, .16); }
.mf-dot { width: 16px; height: 16px; background: var(--orange); bottom: calc(2% + clamp(80px, 9vw, 128px) + 18px); right: calc(14% - 34px); }
.mf-stage { inset: 14% 6% 12% 4%; display: grid; place-items: center; pointer-events: auto; }
.lt .mf-plane, .wh .mf-plane { background: linear-gradient(135deg, rgba(30, 58, 95, .06), rgba(229, 90, 43, .1)); border-color: rgba(30, 58, 95, .08); }
.lt .mf-square, .wh .mf-square { border-color: rgba(30, 58, 95, .2); }

/* ---- page hero -------------------------------------------------------------------------------------------- */
.phero { position: relative; background: var(--dk); color: var(--dk-text); padding: calc(var(--hdr) + clamp(56px, 7vw, 100px)) 0 clamp(72px, 8vw, 120px); overflow: hidden; }
.phero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(229, 90, 43, .5), transparent); }
.phero-grid, .bp-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .065) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 85%); pointer-events: none; }
.phero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.phero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); color: #fff; line-height: .98; letter-spacing: -.028em; font-stretch: 108%; }
.phero .lede { margin-top: 24px; font-size: clamp(1.08rem, 1.5vw, 1.28rem); color: var(--dk-text); max-width: 620px; line-height: 1.55; }
.phero-art { min-height: 420px; height: 100%; }
@media (max-width: 960px) {
  .phero-in { grid-template-columns: minmax(0, 1fr); }
  .phero-art { min-height: 340px; margin: 10px calc(var(--gut) * -1) 0; }
}

/* breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dk-mute); margin-bottom: 26px; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '/'; opacity: .5; }
.crumbs a { color: var(--dk-text); text-decoration: none; }
.crumbs a:hover { color: var(--orange); }

/* ---- "in short" ------------------------------------------------------------------------------------------- */
.inshort-wrap { background: var(--paper); padding-top: clamp(48px, 6vw, 80px); }
.inshort { position: relative; border-left: 4px solid transparent; background: #fff; padding: 28px clamp(22px, 3vw, 40px); box-shadow: 0 1px 0 var(--line), 0 20px 50px -30px rgba(15, 23, 42, .25); display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.inshort-label { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); font-weight: 700; padding-top: 4px; }
.inshort-text { font-size: clamp(1.05rem, 1.45vw, 1.22rem); color: var(--ink); line-height: 1.55; }
@media (max-width: 700px) { .inshort { grid-template-columns: 1fr; gap: 8px; } }

/* ---- cards and lists -------------------------------------------------------------------------------------- */
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: 38px 32px 32px; text-decoration: none; color: inherit; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.card::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 8px; background: var(--navy); transition: background-color .25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .35); }
.card::after { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 8px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
.card:hover::after { transform: scaleX(1); }
.card-ic { width: 52px; height: 52px; display: grid; place-items: center; color: var(--navy); margin-bottom: 22px; }
.card-ic .i { width: 40px; height: 40px; stroke-width: 1.75; }
.card-t { font-size: 22px; font-weight: 750; color: var(--navy); margin-bottom: 10px; font-stretch: 104%; letter-spacing: -.01em; }
.card-p { color: var(--slate); font-size: 16px; line-height: 1.6; }
.card-more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 650; font-size: 15px; }
.card-more .i { width: 17px; transition: transform .3s var(--ease); }
.card:hover .card-more .i { transform: translateX(4px); }
.dk .card, .deep .card { background: var(--dk-2); border-color: var(--dk-line); }
.dk .card-t, .deep .card-t { color: #fff; }
.dk .card-p, .deep .card-p { color: var(--dk-mute); }
.dk .card-ic, .deep .card-ic { color: #93b4dc; }
.dk .card::before, .deep .card::before { background: #2c5282; }
.checks { list-style: none; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate); font-size: 16px; line-height: 1.5; }
.checks .ck { width: 21px; height: 21px; color: var(--green); margin-top: 1px; transition: transform .25s; }
.checks li:hover .ck { transform: scale(1.12); }
.dk .checks li { color: var(--dk-text); }
.checks-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 32px; }
.rail { border-left: 4px solid var(--orange); }

/* feature rows: words on one side, a mini screen on the other */
.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.frow + .frow { margin-top: clamp(80px, 10vw, 140px); }
.frow-rev .frow-copy { order: 2; }
.frow-copy h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--navy); margin-bottom: 18px; }
.dk .frow-copy h3 { color: #fff; }
.frow-copy > p { color: var(--slate); font-size: 17.5px; margin-bottom: 24px; }
.dk .frow-copy > p { color: var(--dk-mute); }
.frow-art { position: relative; }
@media (max-width: 900px) { .frow { grid-template-columns: minmax(0, 1fr); } .frow-rev .frow-copy { order: 0; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0; counter-reset: st; border-top: 1px solid var(--line); }
.step { padding: 30px 26px 30px 0; border-right: 1px solid var(--line); counter-increment: st; position: relative; }
.step + .step { padding-left: 26px; }
.step:last-child { border-right: 0; }
.step::before { content: counter(st, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--orange); font-weight: 700; display: block; margin-bottom: 18px; }
.step h3 { font-size: 20px; color: var(--navy); margin-bottom: 8px; }
.step p { color: var(--slate); font-size: 15.5px; }
.dk .steps, .dk .step { border-color: var(--dk-line); }
.dk .step h3 { color: #fff; }
.dk .step p { color: var(--dk-mute); }
@media (max-width: 760px) { .step { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0 !important; } }

/* ---- countdown -------------------------------------------------------------------------------------------- */
.countdown { display: flex; flex-direction: column; gap: 14px; }
.cd-label { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; font-weight: 600; color: #fff; background: #334155; padding: 7px 12px; border-radius: 2px; }
.cd-label .i { width: 15px; height: 15px; }
.cd-tiles { display: flex; gap: 10px; }
.cd-tile { width: 78px; padding: 14px 0 12px; border: 1px solid rgba(148, 163, 184, .22); background: rgba(31, 41, 55, .65); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cd-tile b { font-family: var(--mono); font-size: 30px; font-weight: 600; color: #fff; line-height: 1; height: 1em; overflow: hidden; display: flex; }
.cd-tile b span { display: inline-block; }
.cd-tile b span.roll { animation: roll .5s var(--ease); }
@keyframes roll { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.cd-tile > span { font-size: 12px; color: var(--dk-mute); }
.cd-hot b { color: var(--orange); }
.countdown-sm .cd-tile { width: 56px; padding: 9px 0 8px; }
.countdown-sm .cd-tile b { font-size: 19px; }
.countdown-sm .cd-tile > span { font-size: 10.5px; }
.countdown-lg .cd-tile { width: clamp(70px, 8vw, 104px); padding: 20px 0 16px; background: rgba(6, 11, 19, .35); }
.countdown-lg .cd-tile b { font-size: clamp(30px, 3.6vw, 46px); }
.lt .cd-tile, .wh .cd-tile { background: #fff; border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .3); }
.lt .cd-tile b, .wh .cd-tile b { color: var(--navy); }
.lt .cd-hot b, .wh .cd-hot b { color: var(--orange); }
.lt .cd-label, .wh .cd-label { background: var(--navy); }

/* ---- FAQ -------------------------------------------------------------------------------------------------- */
.faq { background: #fff; }
.faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--hdr) + 32px); }
.faq-head h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); color: var(--navy); }
.faq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 650; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 18px; height: 18px; flex: none; margin-top: 4px; }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--orange); transition: transform .35s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa summary:hover span { color: var(--navy); }
.qa-a { padding: 0 40px 26px 0; color: var(--slate); font-size: 16.5px; line-height: 1.65; }
.qa-a a { color: var(--orange); }
@media (max-width: 860px) { .faq-in { grid-template-columns: minmax(0, 1fr); } .faq-head { position: static; } }

/* ---- CTA band --------------------------------------------------------------------------------------------- */
.ctaband { position: relative; background: var(--navy); color: #dbe6f3; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0; }
.ctaband-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ctaband h2 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); max-width: 760px; }
.ctaband-copy > p:not(.kicker) { margin-top: 20px; font-size: 18px; max-width: 600px; color: #c6d5e8; }
.ctaband .cd-label { background: rgba(6, 11, 19, .5); }
.ctaband-blocks i { position: absolute; display: block; border: 2px solid rgba(255, 255, 255, .1); animation: drift 18s ease-in-out infinite alternate; }
.ctaband-blocks i:nth-child(1) { width: 300px; height: 300px; right: -60px; top: -90px; }
.ctaband-blocks i:nth-child(2) { width: 120px; height: 120px; right: 22%; bottom: -40px; background: rgba(229, 90, 43, .22); border: 0; animation-duration: 14s; }
.ctaband-blocks i:nth-child(3) { width: 18px; height: 18px; right: 30%; top: 22%; background: var(--orange); border: 0; animation-duration: 11s; }
.ctaband-blocks i:nth-child(4) { width: 80px; height: 80px; left: 4%; bottom: 12%; animation-duration: 16s; }
.ctaband-blocks i:nth-child(5) { inset: -20% auto -20% 52%; width: 34%; border: 0; transform: skewX(-12deg); background: linear-gradient(135deg, rgba(6, 11, 19, .28), rgba(229, 90, 43, .12)); animation: none; }
.ctaband-blocks i:nth-child(6) { width: 10px; height: 10px; left: 46%; top: 16%; background: #fff; border: 0; opacity: .5; animation-duration: 9s; }
@keyframes drift { from { translate: 0 0; } to { translate: 26px -30px; } }
@media (max-width: 900px) { .ctaband-in { grid-template-columns: minmax(0, 1fr); } }

/* ---- footer ----------------------------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--dk-mute); padding: clamp(64px, 8vw, 110px) 0 32px; overflow: hidden; position: relative; }
.f-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px 28px; }
.f-brand p { margin: 22px 0 26px; font-size: 15px; line-height: 1.6; max-width: 360px; }
.f-brand .f-meta { margin-top: -12px; font-size: 14px; }
.f-meta a { color: #fff; }
.f-meta a:hover { color: var(--orange); }
.f-h { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.f-col ul { list-style: none; display: grid; gap: 10px; }
.f-col a { color: var(--dk-mute); text-decoration: none; font-size: 14.5px; transition: color .2s; }
.f-col a:hover { color: var(--orange); }
.f-word { position: relative; margin: clamp(48px, 7vw, 90px) 0 0; line-height: .8; user-select: none; }
.f-word span { display: block; font-size: clamp(5rem, 21vw, 19rem); font-weight: 900; font-stretch: 125%; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(148, 163, 184, .14); }
.f-word i { position: absolute; display: block; }
.f-word i:nth-of-type(1) { width: 9%; aspect-ratio: 1; right: 4%; top: -14%; background: rgba(229, 90, 43, .55); }
.f-word i:nth-of-type(2) { width: 16%; aspect-ratio: 1; right: 11%; top: -40%; border: 2px solid rgba(148, 163, 184, .16); }
.f-word i:nth-of-type(3) { width: 14px; height: 14px; left: 0; top: -12%; background: var(--orange); }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--dk-line); padding-top: 24px; margin-top: 24px; font-size: 13.5px; }
.f-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.f-legal a { color: var(--dk-mute); text-decoration: none; }
.f-legal a:hover { color: #fff; }
@media (max-width: 1000px) { .f-top { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .f-top { grid-template-columns: 1fr; } }

/* ---- articles (blog, guides, glossary) -------------------------------------------------------------------- */
.ahero { background: var(--dk); color: var(--dk-text); padding: calc(var(--hdr) + clamp(48px, 6vw, 88px)) 0 clamp(56px, 6vw, 88px); position: relative; overflow: hidden; }
.ahero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.9rem); max-width: 980px; line-height: 1.02; letter-spacing: -.025em; }
.ahero .lede { margin-top: 22px; max-width: 760px; font-size: clamp(1.05rem, 1.45vw, 1.24rem); }
.ameta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-family: var(--mono); font-size: 12.5px; color: var(--dk-mute); letter-spacing: .04em; text-transform: uppercase; }
.ameta b { color: #fff; font-weight: 600; }
.ahero-art { position: absolute; right: -4%; top: 0; bottom: 0; width: 40%; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 6vw, 96px); align-items: start; padding: clamp(56px, 7vw, 96px) 0; }
.aside-sticky { position: sticky; top: calc(var(--hdr) + 28px); display: grid; gap: 22px; }
.toc { border-left: 2px solid var(--line); padding-left: 18px; }
.toc p { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 12px; }
.toc ol { list-style: none; display: grid; gap: 9px; }
.toc a { font-size: 14.5px; color: var(--slate); text-decoration: none; line-height: 1.4; display: block; transition: color .2s; }
.toc a:hover, .toc a.on { color: var(--orange); }
.side-cta { background: var(--navy); color: #dbe6f3; padding: 26px; position: relative; overflow: hidden; }
.side-cta::after { content: ''; position: absolute; width: 70px; height: 70px; right: -14px; top: -14px; background: rgba(229, 90, 43, .3); }
.side-cta p:first-child { font-weight: 750; font-size: 19px; color: #fff; line-height: 1.25; margin-bottom: 10px; position: relative; }
.side-cta p { font-size: 14.5px; }
.side-cta .btn { margin-top: 18px; width: 100%; }
@media (max-width: 1000px) { .article-grid { grid-template-columns: minmax(0, 1fr); } .aside-sticky { position: static; } .toc { display: none; } }
.prose { font-size: 18px; line-height: 1.75; color: #1e293b; max-width: 740px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--navy); margin-top: 2.1em; padding-top: .2em; scroll-margin-top: calc(var(--hdr) + 24px); }
.prose h2::before { content: ''; display: block; width: 28px; height: 4px; background: var(--orange); margin-bottom: 18px; }
.prose h3 { font-size: 1.32rem; color: var(--ink); margin-top: 1.7em; letter-spacing: -.01em; }
.prose p, .prose li { color: #334155; }
.prose a { color: var(--orange-lo); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; }
.prose ul li::marker { color: var(--orange); }
.prose ol li::marker { color: var(--navy); font-weight: 700; font-family: var(--mono); font-size: .9em; }
.prose blockquote { margin-left: 0; border-left: 4px solid var(--navy); padding: 6px 0 6px 22px; font-size: 1.08em; color: var(--navy); }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--paper-2); padding: 2px 6px; border-radius: 2px; }
.prose pre { background: var(--navy-900); color: #e2e8f0; padding: 20px; overflow-x: auto; border-radius: 2px; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.2em 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.prose table, .tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose th, .prose td, .tbl th, .tbl td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th, .tbl thead th { background: var(--navy); color: #fff; font-weight: 650; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.prose tbody th, .tbl tbody th { font-weight: 650; color: var(--ink); }
.prose tbody tr:last-child > *, .tbl tbody tr:last-child > * { border-bottom: 0; }
.callout { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy); padding: 20px 24px; font-size: 16.5px; }
.callout > * + * { margin-top: .7em; }
.callout-title { font-weight: 750; color: var(--navy); font-size: 15px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.callout-tip { border-left-color: var(--orange); }
.callout-tip .callout-title { color: var(--orange-lo); }
.callout-warn { border-left-color: #b45309; background: #fffbeb; }
.callout-short { border-left-color: var(--orange); background: #fff7f3; }

/* ---- forms ------------------------------------------------------------------------------------------------ */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 14.5px; font-weight: 650; color: var(--navy); margin-bottom: 7px; }
.field label i { color: var(--orange); font-style: normal; }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: 2px; padding: 0 14px; height: 52px; transition: border-color .2s, box-shadow .2s; }
.field textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(229, 90, 43, .16); }
.field.bad input { border-color: #dc2626; }
.field .err { color: #dc2626; font-size: 13.5px; margin-top: 6px; min-height: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--slate); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); flex: none; }
.consent a { color: var(--navy); }
.form-note { font-size: 14px; color: var(--slate-2); }
.form-status { font-size: 15px; padding: 14px 16px; border-left: 4px solid var(--navy); background: var(--paper-2); display: none; }
.form-status.show { display: block; }
.form-status.bad { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.form-done { text-align: center; padding: 30px 10px; }
.form-done .i { width: 56px; height: 56px; color: var(--green); margin: 0 auto 16px; }
.form-done h3 { color: var(--navy); font-size: 26px; margin-bottom: 8px; }
.dk .field label { color: #fff; }
.dk .consent { color: var(--dk-mute); }
.dk .consent a { color: #fff; }

/* ---- misc ------------------------------------------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; background: var(--paper-2); color: var(--navy); font-weight: 600; }
.pill-o { background: rgba(229, 90, 43, .12); color: var(--orange-lo); }
.pill-g { background: rgba(34, 197, 94, .14); color: #15803d; }
.pill-n { background: var(--navy); color: #fff; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 4vw, 56px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.center { text-align: center; }
.mt-l { margin-top: clamp(40px, 5vw, 64px); }
.note-sample { font-family: var(--mono); font-size: 11.5px; color: var(--slate-2); letter-spacing: .04em; margin-top: 14px; }
.dk .note-sample { color: var(--dk-mute); }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.rel { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .35s var(--ease); }
.rel .i { width: 24px; height: 24px; color: var(--navy); }
.rel b { font-size: 15.5px; color: var(--ink); font-weight: 650; line-height: 1.3; }
.rel:hover { border-color: var(--orange); transform: translateY(-2px); }
.rel:hover .i { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before, .ctaband-blocks i { animation: none; }
}

/* ---- motion polish (fx.js, 16 Oct 2026) ------------------------------------------------------------------- */
.specks i { position: absolute; width: 6px; height: 6px; background: rgba(148, 163, 184, .25); left: calc(6% + var(--k) * 10.5%); animation: speck calc(14s + var(--k) * 1.3s) linear infinite; animation-delay: calc(var(--k) * -2.1s); }
.specks i:nth-child(3n) { background: rgba(229, 90, 43, .5); width: 5px; height: 5px; }
@keyframes speck { from { transform: translateY(40px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-160px); opacity: 0; } }

/* the motif assembles itself when a page opens */
@media (prefers-reduced-motion: no-preference) {
  .js .motif .mf-plane { animation: mfPlane 1.5s var(--ease) both .05s; }
  .js .motif .mf-square { animation: mfSquare 1.3s var(--ease-io) both .3s; }
  .js .motif .mf-block { animation: mfBlock 1.1s cubic-bezier(.3, 1.35, .5, 1) both .55s; }
  .js .motif .mf-dot { animation: mfDot .7s cubic-bezier(.3, 1.6, .5, 1) both 1s, blink 2.4s steps(1) infinite 2s; }
  .js .motif .mf-stage, .js .motif .hero-stage { animation: mfStage 1.3s var(--ease) both .35s; }
}
@keyframes mfPlane { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes mfSquare { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mfBlock { from { opacity: 0; translate: 0 -90px; } to { opacity: 1; translate: 0 0; } }
@keyframes mfDot { from { scale: 0; } to { scale: 1; } }
@keyframes mfStage { from { opacity: 0; translate: 60px 30px; } to { opacity: 1; translate: 0 0; } }

/* groups deal their children in turn; check marks draw themselves */
.fx .stg > * { transition: opacity .6s ease, translate .8s var(--ease); transition-delay: calc(min(var(--i, 0), 12) * 70ms); }
.fx .stg:not(.st-in) > * { opacity: 0; translate: 0 14px; }
.fx .checks.stg:not(.st-in) > * { translate: -14px 0; }
.fx .checks .ck * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); transition-delay: calc(min(var(--i, 0), 12) * 70ms + .25s); }
.fx .checks.st-in .ck * { stroke-dashoffset: 0; }

/* cards: the orange bar sweeps across and the icon draws itself on hover */
.card:hover .card-ic svg *, .bento-card:hover .bento-ic svg *, .seg:hover .seg-ic *, .rel:hover .i *, .mm-link:hover .i * { animation: icoDraw .9s var(--ease) both; }
@keyframes icoDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

/* "in short" draws its orange rail; article headings grow their rule */
.inshort::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); transform-origin: 50% 0; transition: transform 1s var(--ease) .15s; }
.fx .inshort:not(.drawn)::before { transform: scaleY(0); }
.fx .prose h2::before { transition: width .8s var(--ease) .1s; }
.fx .prose h2:not(.drawn)::before { width: 0; }

/* questions open and close smoothly where the browser can animate to auto height */
:root { interpolate-size: allow-keywords; }
.qa::details-content, .mobile-in details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.qa[open]::details-content, .mobile-in details[open]::details-content { block-size: auto; }
.qa[open] .qa-a { animation: pin .6s var(--ease) both; }
@keyframes pin { from { opacity: 0; transform: translateY(10px); } }

/* page to page: the new page rises over the old one (browsers with cross-document view transitions) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vtOut .45s var(--ease-io) both; }
::view-transition-new(root) { animation: vtIn .8s var(--ease) both; }
@keyframes vtOut { to { opacity: .25; scale: .985; } }
@keyframes vtIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the footer wordmark fills from navy to orange as it rises */
.f-word span { padding-bottom: .16em; margin-bottom: -.16em; background: linear-gradient(90deg, rgba(44, 82, 130, .9) 0%, rgba(229, 90, 43, .95) calc(var(--fill, 0) * 100%), transparent calc(var(--fill, 0) * 100% + .2%)); -webkit-background-clip: text; background-clip: text; }

/* the motif as a cursor */
.cursor-sq { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--orange); pointer-events: none; z-index: 300; opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .25s, background-color .3s, rotate .5s var(--ease), scale .2s; }
.cursor-sq.show { opacity: 1; }
.cursor-sq.hot { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(229, 90, 43, .12); rotate: 45deg; }
.cursor-sq.text { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--orange); border-width: 0; }
.cursor-sq.press { scale: .75; }