/* ============================================================================
   AgenTorQ site-v2 — identity layer (v2.css)
   Loaded AFTER base.css (the component library carried from the live site so every
   live section keeps rendering) and after any page-level styles, so this file sets
   the new look: type, palette, surfaces, navigation, footer, heroes, cards, FAQ,
   tables, and every component that is new in v2 (mockups, diagrams, explorer,
   use cases, scenarios, white papers).
   Brand anchors: AgenTorQ electric blue (#2f63f0) and the mascot coral (#f8330b).
   ========================================================================== */

/* metric-matched fallback so the headline keeps its line breaks while Archivo loads (no hero layout shift) */
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:106%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Instrument Fallback";src:local("Arial");size-adjust:101%}
/* ------------------------------------------------------------------ tokens
   Stage 2 "Torque": petrol + mist surfaces, saffron actions, mascot-coral signal, lagoon links.
   Display: Archivo (variable width 62-125 — the width axis is the kinetic device).
   Body: Instrument Sans. Code only: JetBrains Mono. */
:root{
  --font-head:"Archivo","Archivo Fallback",Arial,sans-serif;
  --font-body:"Instrument Sans","Instrument Fallback",system-ui,-apple-system,sans-serif;
  --brand:#1f55e0; --brand-strong:#1740b0; --brand-bright:#7ea6ff;
  --coral:#f8330b; --coral-soft:#ff6a3d; --signal:#f8330b;
  --saffron:#ffb020; --saffron-deep:#e89a00; --on-saffron:#0a1733;
  --lagoon:#38a3ff; --cyan:#38a3ff; --lime:#3fae6a; --pink:#ff6a3d; --amber:#ffb020;
  --accent-2:#ffb020; --accent-3:#38a3ff;
  --grad-brand:linear-gradient(90deg,#1f55e0,#38a3ff);
  --grad-ink:none;
  --grad-cool:linear-gradient(135deg,#1f55e0,#38a3ff);
  --grad-hot:linear-gradient(90deg,#ffb020,#f8330b);
  --bg:#f4f6fb; --surface:#e9eef8; --surface-2:#dee5f4; --card:#ffffff;
  --border:#d3dbec; --border-2:#b9c5e0;
  --ink:#0a1733; --ink-2:#33415f; --muted:#4b5877; --faint:#6f7c99;
  --glass:rgba(251,252,251,.8); --glass-border:rgba(10,23,51,.1);
  --navy:#0a1733; --navy-2:#081230; --navy-3:#13285a; --abyss:#050d22;
  --navy-ink:#eef3ff; --navy-ink-2:#a9b8dc; --navy-faint:#7a89ad;
  --fs-display:clamp(48px,8.4vw,132px); --fs-h1:clamp(42px,6.2vw,92px);
  --fs-h2:clamp(32px,4.4vw,64px); --fs-h3:clamp(18px,1.5vw,21px);
  --fs-lead:clamp(17px,1.35vw,20px); --fs-body:16.5px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:28px;
  --sp-section:clamp(64px,8vw,120px);
  --container:1280px;
  --sh-glow:0 30px 80px -40px rgba(10,23,51,.5);
  --hdr:66px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --bg:#050d22; --surface:#0a1633; --surface-2:#0f1e42; --card:#0c193a;
  --border:rgba(238,243,255,.11); --border-2:rgba(238,243,255,.19);
  --ink:#eef3ff; --ink-2:#bac7e6; --muted:#93a3c8; --faint:#7382a6;
  --brand:#7ea6ff; --brand-strong:#a9c2ff;
  --glass:rgba(10,36,40,.7); --glass-border:rgba(238,243,255,.1);
  --brand-soft:rgba(126,166,255,.14);
}
body{font-family:var(--font-body);letter-spacing:0;font-stretch:100%}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:780;letter-spacing:-.02em;font-stretch:108%}
h3{font-weight:700;letter-spacing:-.01em;font-stretch:100%}
::selection{background:var(--saffron);color:#0a1733}

/* grain: one fixed layer of fractal noise over the whole page (decorative, never interactive) */
body::before{content:none}
body::after{content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.05;filter:invert(1)}

.container{max-width:var(--container)}
/* the second voice of a headline: same colour, narrower and lighter — a typographic change, not a colour accent */
.grad,.v2-grad{background:none;color:inherit;-webkit-text-fill-color:currentColor;font-weight:340;font-stretch:78%;letter-spacing:-.01em}
.section:not(.section--dark) .v2-grad--light{background:none}

/* ------------------------------------------------------------------ buttons */
.btn{border-radius:999px;font-family:var(--font-head);font-weight:700;letter-spacing:-.005em}
.btn--primary,.btn-primary{background:var(--grad-brand);background-size:160% 100%;border:0;color:#fff;
  box-shadow:0 14px 34px -14px rgba(110,155,255,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:background-position .4s,transform .18s,box-shadow .2s}
.btn--primary:hover,.btn-primary:hover{background-position:100% 0;color:#fff;transform:translateY(-2px)}
.btn--light{background:#fff;color:#0a1733}
.btn--light:hover{color:#0a1733;box-shadow:0 18px 44px -16px rgba(255,255,255,.55)}
.btn--trial{background:linear-gradient(100deg,#f8330b,#ff7a59 45%,#ff6a3d);color:#fff;border:0;
  box-shadow:0 16px 40px -14px rgba(248,51,11,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--trial:hover{color:#fff;transform:translateY(-2px);box-shadow:0 20px 48px -14px rgba(248,51,11,.8)}

/* ------------------------------------------------------------------ header: ONE opaque sticky block (bar + section sub-bar) */
.v2nav{position:sticky;top:0;z-index:300;background:var(--bg);border-bottom:1px solid var(--border)}
[data-theme="dark"] .v2nav{background:#050d22}
.v2nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(47,99,240,.6),rgba(110,155,255,.6),rgba(248,51,11,.5),transparent)}
.v2nav__bar{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:10px;min-height:64px;padding:6px clamp(12px,2vw,24px)}
.v2nav__brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.02em;min-height:44px}
.v2nav__brand:hover{color:var(--ink)}
.v2nav__logo{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff;box-shadow:0 4px 14px -6px rgba(248,51,11,.6),inset 0 0 0 1px rgba(15,23,42,.06)}
.v2nav__logo img{width:28px;height:28px}
.v2nav__menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.v2nav__links{display:flex;align-items:center;gap:2px}
.v2nav__links>a,.v2nav__trig{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;border:0;background:none;
  font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.v2nav__links>a:hover,.v2nav__trig:hover,.v2nav__trig[aria-expanded="true"],.v2nav__links>a[aria-current="page"],.v2nav__trig.is-current{color:var(--ink);background:var(--surface-2)}
.v2nav__trig .i{width:14px;height:14px;transition:transform .2s}
.v2nav__trig[aria-expanded="true"] .i{transform:rotate(180deg)}
.v2nav__group{position:relative}
.v2mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,6px);min-width:560px;padding:14px;border-radius:22px;
  background:var(--card);border:1px solid var(--border);box-shadow:0 40px 90px -30px rgba(15,23,42,.45);
  display:grid;grid-template-columns:1.2fr 1fr;gap:10px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.v2nav__group.is-open .v2mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.v2mega__list{display:grid;gap:2px;align-content:start}
.v2mega__list a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;color:var(--ink)}
.v2mega__list a:hover,.v2mega__list a[aria-current="page"]{background:var(--surface)}
.v2mega__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;color:#fff;background:var(--grad-cool)}
.v2mega__ic .i{width:19px;height:19px}
.v2mega__list b{display:block;font-family:var(--font-head);font-size:14.5px;font-weight:700}
.v2mega__list small{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}
.v2mega__feature{border-radius:16px;padding:18px;color:#fff;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;min-height:220px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,106,61,.55),transparent 55%),radial-gradient(120% 90% at 0% 100%,rgba(56,163,255,.45),transparent 55%),linear-gradient(160deg,#1b2a8a,#0a0f2e)}
.v2mega__feature b{font-family:var(--font-head);font-size:18px;line-height:1.2}
.v2mega__feature p{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.5}
.v2mega__feature a{color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.v2mega__tag{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18)}
.v2nav__actions{display:flex;align-items:center;gap:8px;margin-left:8px}
.v2theme{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer}
.v2theme .i{width:19px;height:19px}
.v2theme .v2theme__sun{display:none}
[data-theme="dark"] .v2theme .v2theme__sun{display:block}
[data-theme="dark"] .v2theme .v2theme__moon{display:none}
.v2nav__actions .btn{min-height:42px;padding:0 16px;font-size:14px}
.v2nav__ws .cta-short{display:none}
.v2nav__toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer}
.v2nav__toggle .i{width:22px;height:22px}

/* section sub-bar: lives INSIDE the header, so it can never overlap it; opaque; fades at the edges */
.v2sub{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s,visibility .25s;border-top:1px solid transparent}
.v2nav.has-sub.is-scrolled .v2sub{max-height:60px;overflow:visible;visibility:visible;border-top-color:var(--border)}
.v2sub__in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:0 clamp(12px,2vw,24px);height:50px}
.v2sub__label{flex:none;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.v2sub__row{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
.v2sub__row::-webkit-scrollbar{display:none}
.v2sub__row a{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.v2sub__row a:hover{color:var(--ink);background:var(--surface-2)}
.v2sub__row a.is-active{background:var(--ink);color:var(--bg)}
.v2sub__drop{display:none;position:relative;flex:1;min-width:0}
.v2sub__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.v2sub__btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2sub__btn .i{width:16px;height:16px;flex:none}
.v2sub__list{display:none}
.v2sub.is-open .v2sub__list{display:grid;position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:60vh;overflow:auto;padding:6px;border-radius:14px;
  background:var(--card);border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(15,23,42,.5)}
.v2sub__list a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:10px;color:var(--ink-2);font-weight:600}
.v2sub__list a.is-active{background:var(--surface-2);color:var(--ink)}
.v2nav.is-open .v2sub{max-height:0;visibility:hidden}

/* legacy mockups carried from live: never clip their content */
.lwin,.dwin,.hx-browser,.hx-sf,.mk{container-type:inline-size}
.lwin-main{grid-template-columns:minmax(0,1fr) minmax(0,288px)}
.lwin *,.dwin *,.mk *{min-width:0}
@container (max-width:640px){
  .lwin-main{grid-template-columns:minmax(0,1fr)}
  .lwin-sub span:nth-child(n+4){display:none}
}
.l-bub,.l-act .t{overflow-wrap:anywhere}
.l-act{flex-wrap:wrap}

/* ------------------------------------------------------------------ hero (every page) */
.hero,.section--dark{background:var(--navy)}
.hero{padding-block:clamp(64px,9vw,128px) clamp(64px,8vw,112px)}
.hero::after{background:
  radial-gradient(46% 52% at 88% 0%,rgba(110,155,255,.42),transparent 64%),
  radial-gradient(44% 50% at 0% 100%,rgba(47,99,240,.42),transparent 62%),
  radial-gradient(30% 36% at 62% 58%,rgba(56,163,255,.16),transparent 66%),
  radial-gradient(26% 30% at 30% 8%,rgba(248,51,11,.16),transparent 70%) !important}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(110% 80% at 50% 0%,#000 20%,transparent 72%);mask-image:radial-gradient(110% 80% at 50% 0%,#000 20%,transparent 72%)}
.hero > .container,.hero > div:not(.hx-mesh):not(.v2orbs):not(.art-field):not(.ph-bg){position:relative;z-index:1}
.hero h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.03em;font-weight:800}
.hero .hero__sub,.hero .lead{color:#c3cbe6}
.v2orbs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.v2orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.v2orbs i:nth-child(1){width:38vw;height:38vw;max-width:560px;max-height:560px;left:-10%;top:-20%;background:radial-gradient(circle,rgba(47,99,240,.75),transparent 70%)}
.v2orbs i:nth-child(2){width:34vw;height:34vw;max-width:500px;max-height:500px;right:-8%;top:0;background:radial-gradient(circle,rgba(110,155,255,.7),transparent 70%)}
.v2orbs i:nth-child(3){width:26vw;height:26vw;max-width:380px;max-height:380px;left:40%;bottom:-24%;background:radial-gradient(circle,rgba(248,51,11,.45),transparent 70%)}
.hero__eyebrow,.hero .eyebrow{border-radius:999px}
.section--dark{position:relative;overflow:hidden}
.section--dark::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(40% 50% at 100% 0%,rgba(110,155,255,.22),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(47,99,240,.22),transparent 70%)}
.section--dark > .container{position:relative;z-index:1}
.section--tint{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 60%,var(--bg)))}

/* hero promo strip (three linked tiles along the bottom of the home hero) */
.v2promo{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,5vw,64px);
  border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(5,13,34,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v2promo a{display:flex;flex-direction:column;gap:8px;padding:22px 24px;color:#fff;min-height:128px;border-right:1px solid rgba(255,255,255,.1);transition:background .2s}
.v2promo a:last-child{border-right:0}
.v2promo a:hover{background:rgba(255,255,255,.06);color:#fff}
.v2promo b{font-family:var(--font-head);font-size:clamp(18px,1.7vw,22px);line-height:1.2;display:flex;justify-content:space-between;gap:10px}
.v2promo b .i{width:20px;height:20px;flex:none;transition:transform .2s}
.v2promo a:hover b .i{transform:translateX(4px)}
.v2promo span{font-size:14px;color:#aab6da}
.v2promo em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ff9a80}

/* ------------------------------------------------------------------ section heads, eyebrows */
.section-head h2{font-size:var(--fs-h2);line-height:1.04}
.eyebrow{font-family:var(--font-head);font-weight:700;letter-spacing:.14em}
.eyebrow::before{background:var(--grad-brand) !important;height:3px !important;width:28px !important;border-radius:3px}

/* ------------------------------------------------------------------ cards: glass + gradient edge */
.card,.pain-card,.gov-card,.cmp-card,.fx-card,.ways-card,.connector-card,.pbox{border-radius:var(--r-lg)}
.card{background:color-mix(in srgb,var(--card) 88%,transparent);border-color:var(--border);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:var(--grad-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(47,99,240,.55)}
.icon-tile,.uc-badge{background:linear-gradient(135deg,rgba(47,99,240,.14),rgba(110,155,255,.18));color:var(--brand)}
[data-theme="dark"] .icon-tile,[data-theme="dark"] .uc-badge{color:#a9bcff}

/* ------------------------------------------------------------------ FAQ rows */
.faq{display:grid;gap:12px}
.faq details{border-radius:20px;border:1px solid var(--border);background:var(--card);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq details[open]{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));box-shadow:0 20px 50px -34px rgba(47,99,240,.6)}
.faq summary{padding:20px 24px;font-family:var(--font-head);font-weight:700;font-size:clamp(16px,1.3vw,19px);min-height:44px}
.faq details > :not(summary){padding-inline:24px}
.section--dark .faq details{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}

/* ------------------------------------------------------------------ tables */
.tbl-scroll{border-radius:20px;border:1px solid var(--border);overflow-x:auto;background:var(--card)}
.tbl-scroll table{border-collapse:collapse;width:100%}
.tbl-scroll th{font-family:var(--font-head)}

/* ------------------------------------------------------------------ CTA bands */
.cta-band{background:
  radial-gradient(60% 120% at 0% 0%,rgba(56,163,255,.55),transparent 60%),
  radial-gradient(60% 120% at 100% 100%,rgba(255,106,61,.55),transparent 60%),
  linear-gradient(120deg,#1b4dd8,#2f63f0 45%,#6e9bff);border-radius:var(--r-xl)}
.cta-band h2{font-size:clamp(30px,3.8vw,50px)}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}

/* full-bleed wave band */
.v2wave{position:relative;overflow:hidden;background:#061226;color:#fff;padding-block:clamp(72px,9vw,120px)}
.v2wave svg.v2wave__art{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.v2wave .container{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.v2wave__badge{width:clamp(120px,14vw,180px);aspect-ratio:1;border-radius:28px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;
  background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.v2wave__badge img{width:62%;height:auto;filter:drop-shadow(0 10px 30px rgba(248,51,11,.5))}
.v2wave h2{font-size:clamp(32px,4.4vw,58px);line-height:1.04;color:#fff;max-width:18ch}
.v2wave h2 .hl{color:#7ef0c4}
.v2wave p{margin-top:16px;font-size:var(--fs-lead);color:#c7d3ee;max-width:56ch}
.v2wave .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ------------------------------------------------------------------ statement + principles */
.v2statement{font-family:var(--font-head);font-size:clamp(26px,3.2vw,44px);line-height:1.18;font-weight:400;letter-spacing:-.025em;color:var(--ink-2);max-width:40ch}
.v2statement b{font-weight:800;color:var(--ink)}
.v2principles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.v2principles div{padding-top:18px;position:relative}
.v2principles div::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--pink))}
.v2principles b{display:block;font-family:var(--font-head);font-size:clamp(18px,1.6vw,22px);color:var(--ink);line-height:1.25}
.v2principles span{display:block;margin-top:6px;font-size:16px;color:var(--muted);line-height:1.5}

/* ------------------------------------------------------------------ explorer (vertical tabs) */
.v2explorer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(20px,3vw,40px);align-items:start}
.v2explorer__list{display:grid;border-top:1px solid var(--border)}
.v2explorer__tab{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;width:100%;min-height:64px;padding:16px 4px;border:0;border-bottom:1px solid var(--border);
  background:none;font-family:var(--font-head);font-weight:600;font-size:clamp(16px,1.4vw,20px);color:var(--muted);cursor:pointer;transition:color .2s}
.v2explorer__tab .i{width:18px;height:18px;opacity:0;transition:opacity .2s,transform .2s}
.v2explorer__tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--coral)}
.v2explorer__tab[aria-selected="true"] .i{opacity:1;transform:translateX(4px)}
.v2explorer__panel{border-radius:28px;background:var(--card);border:1px solid var(--border);padding:clamp(22px,3vw,36px);box-shadow:0 30px 70px -44px rgba(15,23,42,.5)}
.js .v2explorer__panel[hidden]{display:none}
.v2explorer__panel h3{font-size:clamp(22px,2.2vw,30px)}
.v2explorer__rows{display:grid;gap:14px;margin-top:18px}
.v2explorer__row{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.v2explorer__row .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff}
.v2explorer__row .ic .i{width:20px;height:20px}
.v2explorer__row .ic--easy{background:var(--grad-cool)}
.v2explorer__row .ic--risk{background:linear-gradient(135deg,#f8330b,#ff6a3d)}
.v2explorer__row .ic--ctrl{background:linear-gradient(135deg,#16a34a,#38a3ff)}
.v2explorer__row b{display:block;font-family:var(--font-head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v2explorer__row p{margin-top:3px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.v2explorer__caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
html:not(.js) .v2explorer{grid-template-columns:1fr}
html:not(.js) .v2explorer__list{display:none}
html:not(.js) .v2explorer__panels{display:grid;gap:16px}

/* before / after flow */
.v2ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:clamp(32px,4vw,52px)}
.v2ba__col{border-radius:26px;padding:clamp(20px,2.6vw,30px);border:1px solid var(--border)}
.v2ba__col--before{background:var(--surface)}
.v2ba__col--after{background:linear-gradient(160deg,rgba(47,99,240,.10),rgba(110,155,255,.10));border-color:color-mix(in srgb,var(--brand) 35%,var(--border))}
.v2ba__col h3{display:flex;align-items:center;gap:10px}
.v2ba__tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.v2ba__col--before .v2ba__tag{background:rgba(148,163,184,.2);color:var(--muted)}
.v2ba__col--after .v2ba__tag{background:var(--grad-brand);color:#fff}
.v2ba__steps{display:grid;gap:0;margin-top:18px;counter-reset:ba}
.v2ba__steps li{position:relative;padding:12px 0 12px 44px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.v2ba__steps li::before{counter-increment:ba;content:counter(ba);position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:13px}
.v2ba__steps li:not(:last-child)::after{content:"";position:absolute;left:14px;top:42px;bottom:-8px;width:2px}
.v2ba__col--before .v2ba__steps li::before{background:var(--surface-2);color:var(--muted)}
.v2ba__col--before .v2ba__steps li::after{background:repeating-linear-gradient(180deg,var(--border-2) 0 4px,transparent 4px 8px)}
.v2ba__col--after .v2ba__steps li::before{background:var(--grad-brand);color:#fff}
.v2ba__col--after .v2ba__steps li::after{background:linear-gradient(180deg,var(--brand),var(--saffron))}

/* ------------------------------------------------------------------ resource cards */
.v2cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.v2cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v2cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 3-up: six scenario cards in a 4-column grid left an unbalanced 4 + 2 on wide screens */
.v2cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.v2cards--4,.v2cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.v2cards--2,.v2cards--3,.v2cards--4{grid-template-columns:minmax(0,1fr)}}
.v2rcard .illus-label{align-self:flex-start;font-size:12px}
.v2-extimg{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-head);font-weight:800;font-size:12px;color:#fff;background:var(--lmc,#2f63f0);border-radius:8px}
.v2rcard{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--card);border:1px solid var(--border);color:var(--ink);
  transition:transform .25s,box-shadow .25s}
.v2rcard:hover{transform:translateY(-6px);box-shadow:0 34px 70px -40px rgba(47,99,240,.6);color:var(--ink)}
.v2rcard__art{aspect-ratio:16/9;display:block;background:#0a1733}
.v2rcard__art svg{width:100%;height:100%;display:block}
.v2rcard__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.v2rcard__kind{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.v2rcard h3{font-size:clamp(18px,1.6vw,22px);line-height:1.25}
.v2rcard p{font-size:15px;color:var(--muted);line-height:1.55}
.v2rcard__more{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);min-height:40px}
[data-theme="dark"] .v2rcard__more{color:#9db4ff}

/* ------------------------------------------------------------------ high-def product mockups */
.mk{--mk-bg:#ffffff;--mk-surface:#f4f6fc;--mk-line:#e2e7f3;--mk-ink:#0a1733;--mk-muted:#5d6887;
  background:var(--mk-bg);color:var(--mk-ink);border-radius:22px;border:1px solid var(--mk-line);overflow:hidden;font-size:13.5px;line-height:1.45;text-align:left;
  box-shadow:0 50px 100px -50px rgba(10,23,51,.65),0 0 0 1px rgba(255,255,255,.04)}
[data-theme="dark"] .mk{--mk-bg:#0d1128;--mk-surface:#11173a;--mk-line:rgba(255,255,255,.09);--mk-ink:#eef2ff;--mk-muted:#9aa5c8}
.mk .i{width:15px;height:15px;flex:none}
.mk__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--mk-surface);border-bottom:1px solid var(--mk-line)}
.mk__bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57;flex:none}
.mk__bar i:nth-child(2){background:#febc2e}.mk__bar i:nth-child(3){background:#28c840}
.mk__url{margin-left:10px;flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--mk-bg);border:1px solid var(--mk-line);color:var(--mk-muted);font-size:12.5px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.mk__url .i{color:#16a34a;width:12px;height:12px}
.mk__body{display:grid;grid-template-columns:200px minmax(0,1fr)}
.mk__side{background:var(--mk-surface);border-right:1px solid var(--mk-line);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.mk__side span{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;color:var(--mk-muted);font-weight:600;font-size:13px}
.mk__side span.on{background:rgba(47,99,240,.12);color:#2f63f0}
[data-theme="dark"] .mk__side span.on{color:#9db4ff}
.mk__side small{margin:10px 10px 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-muted)}
.mk__main{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mk__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk__head b{font-family:var(--font-head);font-size:15px}
.mk__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--mk-surface);border:1px solid var(--mk-line);color:var(--mk-muted)}
.mk__chip--ok{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3);color:#15803d}
[data-theme="dark"] .mk__chip--ok{color:#6ee7b0}
.mk__chip--ea{background:rgba(248,51,11,.12);border-color:rgba(248,51,11,.35);color:#c2410c}
[data-theme="dark"] .mk__chip--ea{color:#ff9a80}
.mk__chip--brand{background:rgba(47,99,240,.12);border-color:rgba(47,99,240,.3);color:#1b4dd8}
[data-theme="dark"] .mk__chip--brand{color:#9db4ff}
.mk__msg{max-width:88%;padding:10px 13px;border-radius:16px}
.mk__msg--me{align-self:flex-end;background:linear-gradient(135deg,#2f63f0,#6d5cf6);color:#fff;border-bottom-right-radius:5px}
.mk__msg--ai{align-self:flex-start;background:var(--mk-surface);border:1px solid var(--mk-line);border-bottom-left-radius:5px}
.mk__who{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:12.5px;color:#2f63f0;margin-bottom:4px}
[data-theme="dark"] .mk__who{color:#9db4ff}
.mk__who img{width:18px;height:18px;border-radius:5px;background:#fff}
.mk__cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mk__cite{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:rgba(47,99,240,.1);color:#1b4dd8;font-size:12px;font-weight:600}
[data-theme="dark"] .mk__cite{color:#9db4ff}
.mk__cite sup{font-size:10px;margin-left:1px}
.mk__approve{border-radius:16px;border:1px solid rgba(47,99,240,.35);padding:12px 14px;background:linear-gradient(180deg,rgba(47,99,240,.08),transparent)}
.mk__approve-hd{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#2f63f0}
[data-theme="dark"] .mk__approve-hd{color:#9db4ff}
.mk__diff{display:grid;gap:5px;margin-top:9px;font-family:var(--font-mono);font-size:12.5px}
.mk__diff span{display:block;padding:4px 8px;border-radius:7px}
.mk__diff .del{background:rgba(225,29,72,.1);color:#be123c;text-decoration:line-through}
.mk__diff .add{background:rgba(22,163,74,.12);color:#15803d}
[data-theme="dark"] .mk__diff .del{color:#fda4af}[data-theme="dark"] .mk__diff .add{color:#86efac}
.mk__btns{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.mk__b{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;font-weight:700;font-size:12.5px;border:1px solid var(--mk-line);background:var(--mk-bg);color:var(--mk-ink)}
.mk__b--ok{background:#16a34a;border-color:#16a34a;color:#fff}
.mk__b--brand{background:#2f63f0;border-color:#2f63f0;color:#fff}
.mk__input{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--mk-line);color:var(--mk-muted);background:var(--mk-bg)}
.mk__input > span:first-child{flex:1;min-width:0}
.mk__send{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2f63f0,#6e9bff);color:#fff}
.mk__dots{display:inline-flex;gap:4px;padding:9px 12px;border-radius:14px;background:var(--mk-surface);border:1px solid var(--mk-line);align-self:flex-start}
.mk__dots i{width:6px;height:6px;border-radius:50%;background:var(--mk-muted)}

/* connector grid mockup */
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}
.mk-app{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--mk-surface);border:1px solid var(--mk-line)}
.mk-app__top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mk-mono{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;font-family:var(--font-head);font-weight:800;font-size:13px}
.mk-app b{font-family:var(--font-head);font-size:13px}
.mk-app small{font-size:12px;color:var(--mk-muted)}
.mk-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.mk-dot--off{background:var(--mk-muted);box-shadow:none;opacity:.5}

/* salesforce record mockup */
.mk-sf__top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#032d60;color:#fff}
.mk-sf__waffle{display:grid;grid-template-columns:repeat(3,4px);gap:2px}
.mk-sf__waffle i{width:4px;height:4px;border-radius:50%;background:#fff}
.mk-sf__app{font-family:var(--font-head);font-weight:700}
.mk-sf__search{margin-left:auto;display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12.5px}
.mk-sf__rec{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--mk-line)}
.mk-sf__ava{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ff9a3c;color:#fff}
.mk-sf__rec small{display:block;color:var(--mk-muted);font-size:12px}
.mk-sf__rec b{font-family:var(--font-head);font-size:17px}
.mk-sf__path{display:flex;gap:3px;padding:12px 16px 0}
.mk-sf__path span{flex:1;min-width:0;text-align:center;padding:6px 4px;font-size:12px;font-weight:700;color:var(--mk-muted);background:var(--mk-surface);
  clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-sf__path span.done{background:rgba(22,163,74,.16);color:#15803d}
[data-theme="dark"] .mk-sf__path span.done{color:#86efac}
.mk-sf__path span.on{background:#0176d3;color:#fff}
.mk-sf__body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:14px;padding:14px 16px 16px}
.mk-sf__fields{display:grid;gap:9px;align-content:start;margin:0}
.mk-sf__fields div{padding-bottom:7px;border-bottom:1px solid var(--mk-line)}
.mk-sf__fields dt{font-size:12px;color:var(--mk-muted)}
.mk-sf__fields dd{margin:2px 0 0;font-weight:700}
.mk-changed{padding:1px 4px;border-radius:5px;background:rgba(22,163,74,.18);box-shadow:inset 0 -2px 0 #16a34a}
.mk-crew{border-radius:18px;padding:14px;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,106,61,.45),transparent 55%),radial-gradient(120% 90% at 0% 100%,rgba(47,99,240,.55),transparent 60%),linear-gradient(160deg,#141c52,#080b24);
  border:1px solid rgba(110,155,255,.4);box-shadow:0 20px 50px -24px rgba(110,155,255,.8)}
.mk-crew__hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-crew__hd b{font-family:var(--font-head);font-size:14px}
.mk-crew__ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#f8330b,#ff6a3d)}
.mk-crew__ea{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.16)}
.mk-crew__status{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font-size:12.5px;color:#c7d0f0}
.mk-live{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6)}
.mk-crew__row{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;flex-wrap:wrap}
.mk-crew__row .i{color:#6ee7b0}
.mk-crew__row--ask .i{color:#c7d6ff}
.mk-crew__row em{margin-left:auto;font-style:normal;color:#c7d6ff;text-decoration:underline;text-underline-offset:3px}
.mk-crew__row .mk__b{margin-left:auto;padding:4px 11px}
.mk-crew__bars{display:flex;align-items:flex-end;gap:5px;height:42px;margin-top:8px}
.mk-crew__bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#6e9bff,#2f63f0)}

/* audit trail mockup */
.mk-audit{padding:16px;display:grid;gap:0}
.mk-audit__row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;padding:11px 0;position:relative}
.mk-audit__row::before{content:"";position:absolute;left:10px;top:30px;bottom:-12px;width:2px;background:var(--mk-line)}
.mk-audit__row:last-child::before{display:none}
.mk-audit__dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff}
.mk-audit__dot .i{width:12px;height:12px}
.mk-audit__row b{display:block;font-family:var(--font-head);font-size:13.5px}
.mk-audit__row small{display:block;color:var(--mk-muted);font-size:12px;margin-top:2px}
.mk-audit__row code{font-family:var(--font-mono);font-size:12px;color:var(--mk-muted);white-space:nowrap}
.mk-mask{font-family:var(--font-mono);font-size:12px;padding:1px 6px;border-radius:5px;background:rgba(110,155,255,.16);color:#7c3aed}
[data-theme="dark"] .mk-mask{color:#c4b5fd}

/* engine / model picker mockup */
.mk-models{padding:16px;display:grid;gap:9px}
.mk-model{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-surface)}
.mk-model.on{border-color:#2f63f0;background:rgba(47,99,240,.1);box-shadow:0 0 0 3px rgba(47,99,240,.14)}
.mk-model b{display:block;font-family:var(--font-head);font-size:13.5px}
.mk-model small{display:block;color:var(--mk-muted);font-size:12px}
.mk-meter{display:flex;gap:3px}
.mk-meter i{width:6px;height:14px;border-radius:2px;background:var(--mk-line)}
.mk-meter i.f{background:linear-gradient(180deg,#38a3ff,#2f63f0)}
.mk-route{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;border:1px dashed var(--mk-line);font-size:12.5px;color:var(--mk-muted)}

/* developer studio mockup */
.mk-dev{display:grid;grid-template-columns:170px minmax(0,1fr) 230px;min-height:320px}
.mk-dev__tree{background:var(--mk-surface);border-right:1px solid var(--mk-line);padding:12px 8px;font-family:var(--font-mono);font-size:12px;display:flex;flex-direction:column;gap:3px}
.mk-dev__tree span{padding:4px 8px;border-radius:6px;color:var(--mk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-dev__tree span.on{background:rgba(47,99,240,.14);color:#2f63f0}
[data-theme="dark"] .mk-dev__tree span.on{color:#9db4ff}
.mk-dev__code{padding:12px 0;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;min-width:0;overflow:hidden}
.mk-dev__code div{display:grid;grid-template-columns:38px 1fr;white-space:pre;overflow:hidden}
.mk-dev__code div span:first-child{color:var(--mk-muted);text-align:right;padding-right:12px;opacity:.7}
.mk-dev__code .rm{background:rgba(225,29,72,.1)}
.mk-dev__code .ad{background:rgba(22,163,74,.12)}
.mk-dev__code .k{color:#6e9bff}.mk-dev__code .s{color:#0891b2}.mk-dev__code .c{color:var(--mk-muted)}
.mk-dev__chat{border-left:1px solid var(--mk-line);padding:12px;display:flex;flex-direction:column;gap:9px;background:var(--mk-surface)}
.mk-dev__term{grid-column:1 / -1;border-top:1px solid var(--mk-line);background:#0a1733;color:#b4f5c8;font-family:var(--font-mono);font-size:12px;padding:10px 14px;line-height:1.6}

/* ------------------------------------------------------------------ showcase layout */
.v2show{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.v2show--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.v2show--flip .v2show__copy{order:2}
.v2show__copy h2{font-size:clamp(28px,3.4vw,46px);line-height:1.06}
.v2show__copy p{margin-top:14px;font-size:var(--fs-lead);color:var(--muted)}
.section--dark .v2show__copy p{color:#b9c3e3}
.v2show__list{display:grid;gap:10px;margin-top:22px}
.v2show__list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.section--dark .v2show__list li{color:#d3dbf3}
.v2show__list .i{width:20px;height:20px;color:var(--lime);margin-top:2px;stroke-width:2.4}
.v2show__visual{position:relative}
.v2show__visual::before{content:"";position:absolute;inset:8% -4% -6% 8%;border-radius:40px;z-index:-1;filter:blur(40px);opacity:.55;background:var(--grad-brand)}
.v2show__stack{display:grid;gap:18px}

/* ------------------------------------------------------------------ animated flow diagram */
.v2flow{border-radius:32px;border:1px solid var(--border);background:var(--card);padding:clamp(16px,2.4vw,28px);overflow:hidden}
.section--dark .v2flow{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
.section--dark .v2flow svg{color:#eef2ff !important}
.section--dark .v2flow__legend{color:#b9c3e3}
.v2flow svg{width:100%;height:auto;display:block}
.v2flow .fl-path{fill:none;stroke-width:2.4;stroke-linecap:round}
.v2flow .fl-pulse{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:14 220}
.v2flow text{font-family:var(--font-head);font-weight:700}
.v2flow .fl-sub{font-family:var(--font-body);font-weight:500}
.v2flow__legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font-size:14px;color:var(--muted);justify-content:center}
.v2flow__legend span{display:inline-flex;align-items:center;gap:8px}
.v2flow__legend i{width:22px;height:3px;border-radius:3px}
.v2flow__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.v2flow__steps{display:none;counter-reset:fs;margin:16px 0 0;padding:0;gap:8px}
.v2flow__steps li{list-style:none;position:relative;padding:10px 12px 10px 46px;border-radius:14px;background:var(--surface);color:var(--ink-2);font-size:15px;line-height:1.45}
.section--dark .v2flow__steps li{background:rgba(255,255,255,.05);color:#d3dbf3}
.v2flow__steps li::before{counter-increment:fs;content:counter(fs);position:absolute;left:10px;top:9px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--grad-brand);color:#fff;font-weight:800;font-size:13px}

/* ------------------------------------------------------------------ use cases */
.v2filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.v2filters__lbl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.v2chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border-2);background:var(--card);color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.v2chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.v2uc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.v2uc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1040px){.v2uc-grid--3{grid-template-columns:minmax(0,1fr)}}
.v2uc{border-radius:28px;background:var(--card);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}
.v2uc[hidden]{display:none}
.v2uc__art{display:block;background:#0a1733;aspect-ratio:21/8}
.v2uc__art svg{width:100%;height:100%;display:block}
.v2uc__body{padding:22px 24px 26px;display:grid;gap:14px}
.v2uc__meta{display:flex;flex-wrap:wrap;gap:6px}
.v2uc__meta span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--ink-2);border:1px solid var(--border)}
.v2uc__meta .ed{background:rgba(47,99,240,.12);color:var(--brand);border-color:transparent}
[data-theme="dark"] .v2uc__meta .ed{color:#9db4ff}
.v2uc__meta .ea{background:rgba(248,51,11,.12);color:#c2410c;border-color:transparent}
[data-theme="dark"] .v2uc__meta .ea{color:#ff9a80}
.v2uc h3{font-size:clamp(20px,1.9vw,26px);line-height:1.2}
.v2uc dl{display:grid;gap:10px;margin:0}
.v2uc dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v2uc dd{margin:3px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.v2uc__caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.v2uc__caps span{font-size:12.5px;padding:4px 10px;border-radius:8px;background:var(--surface);color:var(--ink-2)}
.v2uc__helps{border-radius:18px;padding:14px 16px;background:linear-gradient(160deg,rgba(47,99,240,.08),rgba(110,155,255,.08));border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border))}
.v2uc__helps h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);font-weight:800}
[data-theme="dark"] .v2uc__helps h4{color:#9db4ff}
.v2uc__helps ul{display:grid;gap:6px;margin-top:8px}
.v2uc__helps li{font-size:15px;color:var(--ink-2);line-height:1.5}
.v2uc__helps li b{color:var(--ink)}
.v2empty{padding:30px;border-radius:20px;border:1px dashed var(--border-2);text-align:center;color:var(--muted)}

/* ------------------------------------------------------------------ scenarios */
.illus-label{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;
  background:rgba(245,158,11,.14);color:#92400e;border:1px solid rgba(245,158,11,.4)}
[data-theme="dark"] .illus-label{color:#fcd34d}
.illus-label .i{width:15px;height:15px}
.section--dark .illus-label{color:#fcd34d}
.v2scen{border-radius:32px;background:var(--card);border:1px solid var(--border);padding:clamp(22px,3vw,40px);display:grid;gap:22px;scroll-margin-top:100px}
.v2scen + .v2scen{margin-top:clamp(24px,3vw,36px)}
.v2scen__head{display:grid;gap:12px;justify-items:start}
.v2scen__head h3{font-size:clamp(24px,2.6vw,36px);line-height:1.12}
.v2scen__who{font-size:15px;color:var(--muted)}
/* industry-descriptor format: the industry leads, the photo carries the subject */
.v2scen__ind{font-family:var(--font-head);font-size:clamp(15px,1.5vw,18px);font-weight:700;color:var(--brand);letter-spacing:-.01em}
[data-theme="dark"] .v2scen__ind{color:#9db4ff}
.v2scen__photo{margin:calc(clamp(22px,3vw,40px) * -1) calc(clamp(22px,3vw,40px) * -1) 0;border-radius:32px 32px 0 0;overflow:hidden;position:relative}
/* .ph img{height:auto} is declared later in this file at the same specificity, so it would win and
   the banner would render at its natural ~800px. The extra class keeps the clamp. */
.v2scen__photo .ph img{width:100%;height:clamp(150px,22vw,260px);object-fit:cover}
.v2scen__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(47,99,240,.34),rgba(10,23,51,.28) 58%,rgba(5,13,34,.5));mix-blend-mode:multiply}
.v2rcard__ed{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:2px}
.v2rcard__ed .i{width:14px;height:14px;color:var(--brand)}
.v2scen__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px)}
.v2scen__block h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);font-weight:800}
.v2scen__block p,.v2scen__block li{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.v2scen__block p{margin-top:6px}
.v2scen__block ul{display:grid;gap:6px;margin-top:8px;padding-left:18px;list-style:disc}
.v2scen__steps{counter-reset:st;display:grid;gap:10px;margin-top:10px}
.v2scen__steps li{position:relative;padding:12px 14px 12px 52px;border-radius:14px;background:var(--surface);list-style:none}
.v2scen__steps li::before{counter-increment:st;content:counter(st);position:absolute;left:12px;top:11px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;font-weight:800;font-size:13px}
.v2scen__controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:10px}
.v2scen__controls div{border-radius:14px;padding:12px;border:1px solid var(--border);background:var(--surface)}
.v2scen__controls b{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-size:14px}
.v2scen__controls b .i{width:16px;height:16px;color:var(--brand)}
.v2scen__controls span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5}

/* ------------------------------------------------------------------ white papers */
.wp-hero .wp-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;color:#b9c3e3;font-size:14px}
.wp-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.wp-toc{position:sticky;top:100px;border-radius:20px;border:1px solid var(--border);background:var(--card);padding:18px}
.wp-toc strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.wp-toc ol{display:block;padding-left:20px;list-style:decimal;color:var(--muted);font-size:14px}
.wp-toc li{margin:4px 0;line-height:1.4}
.wp-toc a{display:inline;color:var(--ink-2);font-weight:600}
.wp-toc a:hover{color:var(--brand)}
.wp-actions{display:grid;gap:8px;margin-top:16px}
/* download list on /white-papers */
.wp-dl{display:grid;gap:10px;margin-top:8px}
.wp-dl li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;
  padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card)}
.wp-dl__t{font-family:var(--font-head);font-weight:700;font-size:15.5px;line-height:1.35}
.wp-dl__m{font-size:13px;color:var(--muted);white-space:nowrap}
@media (max-width:700px){.wp-dl li{grid-template-columns:1fr;gap:8px;justify-items:start}}
.wp-body{max-width:760px}
.wp-body h2{font-size:clamp(26px,2.6vw,36px);margin-top:48px;scroll-margin-top:100px;line-height:1.12}
.wp-body h2:first-child{margin-top:0}
.wp-body h3{font-size:20px;margin-top:28px}
.wp-body p,.wp-body li{font-size:17.5px;line-height:1.75;color:var(--ink-2)}
.wp-body p{margin-top:16px}
.wp-body ul,.wp-body ol{margin-top:14px;padding-left:22px;display:grid;gap:8px}
.wp-body ul{list-style:disc}.wp-body ol{list-style:decimal}
.wp-body strong{color:var(--ink)}
.wp-body a{text-decoration:underline;text-underline-offset:3px}
.wp-body figure{margin:28px 0;border-radius:24px;border:1px solid var(--border);background:var(--card);padding:18px}
.wp-body figure svg{width:100%;height:auto;display:block}
.wp-body figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.wp-body table{width:100%;border-collapse:collapse;font-size:15px}
.wp-body th,.wp-body td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.wp-body th{font-family:var(--font-head);background:var(--surface)}
.wp-callout{margin-top:22px;border-radius:18px;padding:16px 18px;border-left:4px solid var(--brand);background:var(--surface)}
.wp-callout p{margin-top:0}
.wp-sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--border)}
.wp-sources li{font-size:15px}

/* ------------------------------------------------------------------ legal pages */
.legal .legal__layout{gap:clamp(28px,4vw,64px)}
.legal__toc{border-radius:20px;border:1px solid var(--border);background:var(--card);padding:18px}

/* model wall: vendor logos shown as local glyphs (no external image hosts) */
.logo-mark .lm--glyph{background:var(--lmc);width:28px;height:28px}
.logo-mark .lm--glyph .lm-fb{display:block;width:18px;height:18px;color:#fff}
.prov-mark--glyph{background:var(--lmc,#2f63f0)}
.prov-mark--glyph .lm-fb,.prov-mark--glyph svg{display:block;color:#fff}

/* ------------------------------------------------------------------ footer */
.v2foot{position:relative;overflow:hidden;background:#050d22;color:#aab6da;padding-top:clamp(56px,7vw,96px);margin-top:0}
.v2foot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 60% at 0% 0%,rgba(47,99,240,.25),transparent 70%),radial-gradient(40% 60% at 100% 100%,rgba(248,51,11,.14),transparent 70%)}
.v2foot > *{position:relative}
.v2foot__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-bottom:clamp(36px,5vw,56px);border-bottom:1px solid rgba(255,255,255,.1)}
.v2foot__cta h2{color:#fff;font-size:clamp(28px,3.6vw,48px);line-height:1.05;max-width:18ch}
.v2foot__cta .btns{display:flex;flex-wrap:wrap;gap:10px}
.v2foot__grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px;padding-block:clamp(36px,5vw,56px)}
.v2foot__logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:20px;color:#fff}
.v2foot__logo img{width:34px;height:34px;border-radius:10px;background:#fff;padding:3px}
.v2foot__tag{margin-top:14px;font-size:14.5px;line-height:1.6}
.v2foot__mail{display:inline-flex;margin-top:14px;font-weight:700;color:#9db4ff;min-height:40px;align-items:center}
.v2foot__by{margin-top:4px;font-size:14px}
.v2foot__by a{color:#9db4ff;font-weight:700}
.v2foot__col h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:10px;font-weight:700}
.v2foot__col a{display:flex;align-items:center;min-height:36px;font-size:14.5px;color:#aab6da}
.v2foot__col a:hover,.v2foot__legal a:hover,.v2foot__mail:hover{color:#fff}
.v2foot__bar{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding-block:22px 34px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px}
.v2foot__legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.v2foot__legal a{color:#aab6da;display:inline-flex;align-items:center;min-height:44px}
.v2foot__ind{flex-basis:100%;color:#8390b8;font-size:13px;line-height:1.6}
.v2foot__note{flex-basis:100%;color:#8390b8;font-size:13px}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:no-preference){
  .v2orbs i{animation:v2drift 20s ease-in-out infinite alternate}
  .v2orbs i:nth-child(2){animation-duration:26s;animation-direction:alternate-reverse}
  .v2orbs i:nth-child(3){animation-duration:30s}
  .v2flow .fl-pulse{animation:v2dash 4.2s linear infinite}
  .v2flow .fl-pulse.d2{animation-delay:1.2s}.v2flow .fl-pulse.d3{animation-delay:2.4s}
  .v2flow .fl-node{animation:v2glow 3.4s ease-in-out infinite alternate}
  .mk-live{animation:v2ping 2s infinite}
  .mk__dots i{animation:v2blink 1.2s infinite}.mk__dots i:nth-child(2){animation-delay:.2s}.mk__dots i:nth-child(3){animation-delay:.4s}
  .mk-crew__bars i{animation:v2bar 2.8s ease-in-out infinite alternate;transform-origin:bottom}
  .mk-crew__bars i:nth-child(2n){animation-delay:.5s}.mk-crew__bars i:nth-child(3n){animation-delay:1s}
  .v2wave__line{animation:v2wave 12s ease-in-out infinite alternate}
  .v2wave__line:nth-child(2n){animation-duration:16s}
  html.js [data-reveal="zoom"]{transform:scale(.96)}
}
@keyframes v2drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5%,7%,0) scale(1.15)}}
@keyframes v2dash{from{stroke-dashoffset:234}to{stroke-dashoffset:0}}
@keyframes v2glow{from{opacity:.75}to{opacity:1}}
@keyframes v2ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes v2blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes v2bar{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@keyframes v2wave{from{transform:translateX(0)}to{transform:translateX(-6%)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  html.js [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .v2nav__links>a,.v2nav__trig{padding:0 9px;font-size:13.5px}
  .v2nav__ws .cta-full{display:none}.v2nav__ws .cta-short{display:inline}
  .v2foot__grid{grid-template-columns:1fr 1fr 1fr}
  .v2foot__brand{grid-column:1 / -1}
}
@media (max-width:1040px){
  .v2nav__toggle{display:grid;place-items:center}
  .v2nav__menu{position:fixed;inset:72px 8px auto 8px;max-height:calc(100vh - 88px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:10px;padding:14px;
    border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:0 40px 90px -30px rgba(15,23,42,.5);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .v2nav.is-open .v2nav__menu{opacity:1;visibility:visible;transform:none}
  .v2nav__links{flex-direction:column;align-items:stretch}
  .v2nav__links>a,.v2nav__trig{min-height:48px;font-size:16px;justify-content:space-between;padding:0 12px}
  .v2mega{position:static;transform:none;min-width:0;display:none;grid-template-columns:1fr;box-shadow:none;border:0;padding:4px 0 8px;opacity:1;visibility:visible;background:transparent}
  .v2nav__group.is-open .v2mega{display:grid;transform:none}
  .v2mega__feature{min-height:0}
  .v2nav__actions{margin:6px 0 0;flex-wrap:wrap}
  .v2nav__actions .btn{flex:1 1 auto;justify-content:center;min-height:46px}
  .v2nav__ws .cta-full{display:inline}.v2nav__ws .cta-short{display:none}
  .v2show,.v2show--flip,.v2explorer,.v2ba,.v2scen__grid,.wp-layout{grid-template-columns:minmax(0,1fr)}
  .v2show--flip .v2show__copy{order:0}
  .v2cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2principles{grid-template-columns:repeat(2,1fr)}
  .v2uc-grid{grid-template-columns:minmax(0,1fr)}
  .mk-dev{grid-template-columns:150px minmax(0,1fr)}
  .mk-dev__chat{display:none}
  .wp-toc{position:static}
  .v2wave .container{grid-template-columns:1fr}
}
@media (max-width:640px){
  .v2promo{grid-template-columns:1fr}
  .v2promo a{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);min-height:0}
  .v2promo a:last-child{border-bottom:0}
  .v2cards,.v2principles{grid-template-columns:minmax(0,1fr)}
  .mk__body{grid-template-columns:minmax(0,1fr)}
  .mk__side{display:none}
  .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-sf__body{grid-template-columns:minmax(0,1fr)}
  .mk-sf__search{display:none}
  .mk-dev{grid-template-columns:minmax(0,1fr)}
  .mk-dev__tree{display:none}
  .mk-dev__code div{grid-template-columns:28px 1fr}
  .mk-audit__row{grid-template-columns:22px 1fr}
  .mk-audit__row code{grid-column:2}
  .v2foot__grid{grid-template-columns:1fr 1fr}
  .v2foot__cta .btns .btn{flex:1 1 100%;justify-content:center}
  .v2sub__row{display:none}
  .v2sub__label{display:none}
  .v2sub__drop{display:block}
  .v2flow__scroll svg{min-width:760px}
  .v2flow__steps{display:grid}
  .v2wave__badge{width:110px}
  .v2filters{gap:6px}
  .hero h1{font-size:clamp(34px,10vw,46px)}
}

/* ------------------------------------------------------------------ print (white papers and legal) */
@media print{
  .v2nav,.v2foot,.v2sub,.wp-actions,.aqc-fab,.skip,.v2orbs,.hx-mesh{display:none !important}
  body::before{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .hero,.section--dark,.wp-hero{background:#fff !important;color:#000 !important;padding:0 0 12pt !important}
  .hero::before,.hero::after,.section--dark::after{display:none !important}
  .hero h1,.hero p,.wp-hero .wp-meta{color:#000 !important}
  .grad,.v2-grad{color:#000 !important;-webkit-text-fill-color:#000 !important;background:none !important}
  .wp-layout{grid-template-columns:1fr}
  .wp-toc{position:static;border:1px solid #ccc}
  .wp-body{max-width:none}
  .wp-body p,.wp-body li{font-size:11pt;line-height:1.5;color:#000}
  .wp-body figure{break-inside:avoid;border:1px solid #ccc}
  .wp-body h2{break-after:avoid}
  .wp-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  html.js [data-reveal]{opacity:1 !important;transform:none !important}
  /* the PDF build renders these pages: the hero photo, the "keep reading" rail and the motion
     pause control are screen devices — in print they only cost ink. The paper's own hero already
     reads as the cover page, so there is no second title block. */
  .ph-bg,#more-papers,.art-toggle{display:none !important}
  .wp-body ul,.wp-body ol{break-inside:avoid-page}
}

/* ============================================================================
   STAGE 2 — "Torque" art direction. Everything below overrides the stage-1 look.
   One memorable thing: the live torque field + the giant kinetic headline. Everything
   around it is flat, colour-blocked and quiet.
   ========================================================================== */

/* base.css sets html,body{overflow-x:hidden} on small screens, which turns <body> into a scroll
   container that never scrolls, so every position:sticky element (header, story stage) stops sticking.
   clip hides the same overflow without creating a scroll container. */
html,body{overflow-x:clip}

/* ------------------------------------------------------------------ reveal: no per-section fade-and-slide */
html.js [data-reveal],html.js [data-reveal].is-visible{opacity:1;transform:none;transition:none}

/* ------------------------------------------------------------------ buttons + micro-interactions */
.btn{border-radius:10px;font-family:var(--font-head);font-weight:700;font-stretch:104%;letter-spacing:0;
  transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .35s var(--ease-out),background-color .2s,box-shadow .3s var(--ease-out),color .2s,border-color .2s}
.btn .i{transition:transform .35s var(--ease-out)}
.btn:hover .i{transform:translateX(5px)}
.btn:active{transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(.96)}
.btn--primary,.btn-primary{background:var(--ink);color:var(--bg);box-shadow:none;border:0}
.btn--primary:hover,.btn-primary:hover{background:var(--ink);color:var(--bg);box-shadow:4px 4px 0 0 var(--saffron);transform:translate3d(calc(var(--mx,0px) - 2px),calc(var(--my,0px) - 2px),0)}
[data-theme="dark"] .btn--primary,[data-theme="dark"] .btn-primary{background:var(--saffron);color:#0a1733}
[data-theme="dark"] .btn--primary:hover,[data-theme="dark"] .btn-primary:hover{background:var(--saffron);color:#0a1733;box-shadow:4px 4px 0 0 var(--signal)}
.btn--trial,.hero .btn--light[data-trial]{background:var(--saffron);color:#0a1733;border:0;box-shadow:none}
.btn--trial:hover,.hero .btn--light[data-trial]:hover{background:#ffc04d;color:#0a1733;box-shadow:4px 4px 0 0 var(--signal);transform:translate3d(calc(var(--mx,0px) - 2px),calc(var(--my,0px) - 2px),0)}
.btn--light{background:#eef3ff;color:#0a1733}
.btn--light:hover{color:#0a1733;background:#fff;box-shadow:4px 4px 0 0 var(--saffron)}
.btn--ghost{background:transparent;border:1.5px solid color-mix(in srgb,currentColor 45%,transparent)}
.btn--ghost:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}
.btn--secondary{border-radius:10px}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px}

/* ------------------------------------------------------------------ header */
.v2nav{background:var(--bg)}
[data-theme="dark"] .v2nav{background:#050d22}
.v2nav::after{background:linear-gradient(90deg,var(--saffron) 0 18%,var(--signal) 18% 22%,transparent 22%);height:2px;bottom:-2px}
.v2nav__brand{font-stretch:112%;font-weight:800}
.v2nav__logo{border-radius:9px;box-shadow:inset 0 0 0 1px rgba(10,23,51,.12)}
.v2nav__links>a,.v2nav__trig{font-family:var(--font-body);font-weight:600;border-radius:8px}
.v2nav__links>a[aria-current="page"],.v2nav__trig.is-current{box-shadow:inset 0 -2px 0 var(--signal)}
.v2mega{border-radius:14px}
.v2mega__ic{border-radius:9px;background:var(--ink);color:var(--saffron)}
[data-theme="dark"] .v2mega__ic{background:var(--saffron);color:#0a1733}
.v2mega__feature{border-radius:10px;background:#0a1733;color:#eef3ff;box-shadow:inset 6px 0 0 var(--saffron)}
.v2mega__tag{border-radius:4px;background:var(--saffron);color:#0a1733}
.v2theme,.v2nav__toggle{border-radius:9px}
.v2sub__label{letter-spacing:0;text-transform:none;font-size:13px}
.v2sub__row a{border-radius:6px}
.v2sub__row a.is-active{background:var(--ink);color:var(--bg);box-shadow:inset 0 -2px 0 var(--saffron)}

/* ------------------------------------------------------------------ sections: colour blocks with stacked-sheet edges */
main > section{position:relative}
.section:not(.section--dark):not(.section--tint){background:var(--bg)}
.section--dark{background:var(--navy);overflow:clip}
.section--dark::after{content:none}
.section--tint{background:var(--surface)}
[data-theme="dark"] .section--dark{background:#0a1733}
[data-theme="dark"] .section--tint{background:#0a1633}
main > section.section--dark:not(:first-child),
main > section.section--tint:not(:first-child),
main > .section--dark + section.section:not(.section--dark),
main > .section--tint + section.section:not(.section--tint):not(.section--dark),
main > .v2wave,
main > .v2wave + section{border-radius:clamp(26px,4vw,56px) clamp(26px,4vw,56px) 0 0;margin-top:calc(-1 * clamp(26px,4vw,56px))}
main > .section--dark + section.section--dark{border-radius:0;margin-top:0;border-top:1px solid rgba(238,243,255,.08)}

/* section heads: editorial, left aligned, heading left and the lede set against it */
.section-head{text-align:left;max-width:none;margin-inline:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,5vw,88px);align-items:end}
.section-head > *{grid-column:1;margin-inline:0}
.section-head > h2 + p{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:46ch;margin-top:0}
.section-head h2{font-size:var(--fs-h2);line-height:.96;letter-spacing:-.03em;font-weight:800;font-stretch:112%;max-width:17ch;text-wrap:balance}
.section-head--left{display:block}
.eyebrow{font-family:var(--font-body);font-weight:600;letter-spacing:0;text-transform:none;font-size:15px;color:var(--brand);gap:10px}
.eyebrow::before{background:var(--signal) !important;height:2px !important;width:22px !important;border-radius:0}
.section--dark .eyebrow{color:var(--saffron)}
.section--dark .section-head p{color:var(--navy-ink-2)}

/* cards: flat, bordered, one radius family; hover is a border change and a small lift */
.card,.pain-card,.gov-card,.cmp-card,.fx-card,.ways-card,.connector-card,.pbox{border-radius:14px}
.card{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:transform .35s var(--ease-out),border-color .2s}
.card::before{content:none}
.card:hover{transform:translateY(-3px);box-shadow:none;border-color:var(--ink)}
.section--dark .card{background:rgba(238,243,255,.04)}
.section--dark .card:hover{border-color:var(--saffron)}
.icon-tile,.uc-badge{background:var(--ink);color:var(--saffron);border-radius:9px}
[data-theme="dark"] .icon-tile,[data-theme="dark"] .uc-badge{background:var(--saffron);color:#0a1733}
.section--dark .icon-tile{background:var(--saffron);color:#0a1733}
.chip{border-radius:6px}
.pill{border-radius:4px}
.faq details{border-radius:12px}
.faq details[open]{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--saffron)}
.tbl-scroll{border-radius:12px}

/* CTA bands: a saffron block with ink type */
.cta-band{background:var(--saffron);color:#0a1733;border-radius:18px;box-shadow:none}
.cta-band::before,.cta-band::after{content:none !important}
.cta-band h2,.cta-band h3,.cta-band p,.cta-band .trial__num,.cta-band .trial__num b,.cta-band .trial__num span{color:#0a1733 !important}
.cta-band .btn--light{background:#0a1733;color:#eef3ff}
.cta-band .btn--light[data-trial]{background:#0a1733;color:var(--saffron)}
.cta-band .btn--light:hover{background:#0a1733;color:var(--saffron);box-shadow:4px 4px 0 0 var(--signal)}
.cta-band .btn--ghost{color:#0a1733 !important;border-color:rgba(10,23,51,.45) !important}

/* the trial wave: full-bleed saffron with petrol line work */
.v2wave{background:var(--saffron);color:#0a1733}
.v2wave svg.v2wave__art{opacity:.35}
.v2wave__line{stroke:#0a1733}
.v2wave h2{color:#0a1733;font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:.95}
.v2wave h2 .hl{color:#0a1733;display:block;font-weight:340;font-stretch:78%}
.v2wave p{color:#1f2b4d}
.v2wave__badge{background:#fff;border:0;border-radius:18px;box-shadow:8px 8px 0 0 #0a1733}
.v2wave__badge img{filter:none}
.v2wave .btn--trial{background:#0a1733;color:var(--saffron)}
.v2wave .btn--trial:hover{background:#0a1733;color:var(--saffron);box-shadow:4px 4px 0 0 #fff}
.v2wave .btn--ghost{color:#0a1733 !important;border-color:rgba(10,23,51,.5) !important}

/* ------------------------------------------------------------------ hero (every page): live torque field */
.hero,.hero.section--dark{background:var(--abyss);overflow:hidden}
.hero::before,.hero::after{content:none !important;background:none !important}
.hero .hx-mesh,.hero .v2orbs{display:none}
/* no z-index here: a stacking context would isolate the canvas blend from the photo behind it */
.art-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(38% 52% at 84% 22%,rgba(248,51,11,.30),transparent 62%),
    radial-gradient(46% 60% at 70% 90%,rgba(255,176,32,.16),transparent 64%),
    repeating-radial-gradient(ellipse 130% 95% at 82% 26%,transparent 0 26px,rgba(126,166,255,.13) 26px 27.5px),
    #050d22}
.art-field::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,34,.7) 0%,rgba(5,13,34,.5) 40%,rgba(5,13,34,0) 72%)}
.hero .hx-cta{box-shadow:none;animation:none}
.art-canvas{position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none;opacity:0;transition:opacity 1.4s ease}
.art-field.is-live .art-canvas{opacity:1}
.art-toggle{position:absolute;top:14px;right:clamp(12px,2vw,28px);z-index:3;display:inline-flex;align-items:center;justify-content:center;width:136px;gap:8px;min-height:40px;padding:0 14px;border-radius:8px;
  border:1px solid rgba(238,243,255,.22);background:rgba(5,13,34,.72);color:#eef3ff;font:600 13px var(--font-body);cursor:pointer;transition:background-color .2s,border-color .2s}
.art-toggle:hover{background:#0a1733;border-color:rgba(238,243,255,.5)}
.art-toggle .i{width:14px;height:14px}
.art-toggle__play,.motion-off .art-toggle__pause{display:none}
.motion-off .art-toggle__play{display:block}
html:not(.js) .art-toggle{display:none}
.motion-off *,.motion-off *::before,.motion-off *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){.art-toggle{display:none}}
@media (max-width:760px){.art-toggle{width:40px;padding:0;top:10px}.art-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.hero > .container,.hero > div:not(.art-field):not(.hx-mesh):not(.v2orbs):not(.ph-bg){position:relative;z-index:1}
.hero h1{font-size:var(--fs-h1);line-height:.94;letter-spacing:-.035em;font-weight:820;font-stretch:112%;text-wrap:balance}
.hero h1 .grad{font-weight:330;font-stretch:78%;color:var(--navy-ink-2);-webkit-text-fill-color:var(--navy-ink-2)}
.hero .hero__sub,.hero .lead{color:#bac7e6}
.hero__eyebrow,.hero .eyebrow{border-radius:6px}
.kw{display:inline-block}
/* every hero reads left-aligned, like the home page */
.hero > .container{text-align:left}
.hero .hero__cta,.hero .cta-row,.hero .hero__actions{justify-content:flex-start}
.hero .hero__eyebrow,.hero .eyebrow,.hero h1,.hero .hero__sub,.hero .lead,.hero .hero__note{margin-inline:0;text-align:left}
.hero h1{max-width:18ch}
.hero .section-head{display:block}
.hero .section-head p,.hero .hero__sub,.hero .lead{max-width:62ch}
.hero .section-head .eyebrow,.hero .eyebrow{justify-content:flex-start;justify-self:start}
.hero .hero__cta,.hero .hero__trust{justify-content:flex-start !important;margin-inline:0 !important}

/* kinetic headline: one orchestrated entrance, words rise out of their own line box */
@media (prefers-reduced-motion:no-preference){
  html.js [data-kinetic] .kw{animation:kw-in 1s var(--ease-out) backwards;animation-delay:calc(var(--k) * 65ms + 150ms);transition:transform .6s var(--ease-out)}
}
@keyframes kw-in{from{opacity:0;transform:translateY(.42em) rotate(2.5deg);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -10% -20% -10%)}}

/* home hero: headline across the page, lead copy left, the two edition routes right */
.hero--hx{padding-block:clamp(36px,4.6vw,68px) 0}
.hero--hx .hx-hero{max-width:1360px}
.hero--hx .hx-copy{text-align:left;max-width:none;margin:0}
.hero--hx .hero__eyebrow{margin:0 0 clamp(18px,2.2vw,30px);display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:none;border:0;padding:0;
  color:#bac7e6;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero--hx .hero__eyebrow .pill{background:var(--saffron);color:#0a1733;border-radius:4px;letter-spacing:0;text-transform:none;font-size:13px;font-weight:700;padding:4px 10px}
.hero--hx h1{font-size:clamp(50px,9.4vw,150px);line-height:.84;letter-spacing:-.045em;font-weight:840;font-stretch:115%;color:#eef3ff;max-width:none;margin:0}
.hero--hx h1 .grad{display:block;font-size:.42em;line-height:1.02;margin-top:.34em;letter-spacing:-.015em;font-weight:320;font-stretch:76%;max-width:26ch}
.hx-lower{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3.4vw,56px);margin-top:clamp(30px,3.6vw,56px);align-items:start}
.hx-lead{padding-top:6px;border-top:2px solid var(--signal);max-width:460px}
.hx-lead .hero__sub{margin:18px 0 0;max-width:40ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55;text-align:left}
.hx-lead .hero__cta{justify-content:flex-start;margin-top:26px;flex-wrap:wrap;gap:12px}
.hx-lead .hx-note{justify-content:flex-start;text-align:left;margin:16px 0 0;color:#93a3c8;font-size:14px}
.hero--hx .hx-routes{margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);align-items:start}
.hero--hx .hx-route--sf{margin-top:clamp(0px,5.4vw,88px)}
.hero--hx .hx-route{border-radius:16px;background:rgba(10,23,51,.78);border:1px solid rgba(238,243,255,.14);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero--hx .hx-route:hover{transform:translateY(-4px)}
.hx-route__ic{background:var(--saffron) !important;color:#0a1733 !important;border-radius:9px !important}
.hx-route__kicker{letter-spacing:0 !important;text-transform:none !important;color:var(--saffron) !important;font-size:13px !important}
.hx-tag{border-radius:4px !important}
.hx-route__link{color:#eef3ff !important}
/* the title wraps differently in the fallback face; reserving two lines keeps the card still when Archivo arrives */
.hero--hx .hx-route__title{line-height:1.05;min-height:2.1em;display:flex;align-items:flex-end}
@container (max-width:520px){.hx-sf__body{grid-template-columns:minmax(0,1fr)}}
.hero--hx .v2promo{margin-top:clamp(40px,5vw,72px);border-radius:0;border:0;border-top:1px solid rgba(238,243,255,.14);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:1360px}
.v2promo a{padding:22px clamp(14px,2vw,28px) 26px;border-right:1px solid rgba(238,243,255,.1)}
.v2promo a:hover{background:rgba(255,176,32,.08)}
.v2promo em{letter-spacing:0;text-transform:none;font-size:13px;color:var(--saffron)}
.v2promo span{color:#a9b8dc}

/* ------------------------------------------------------------------ photography (Pexels, self-hosted) */
.ph{display:block;margin:0}
.ph img{display:block;width:100%;height:auto}
.ph--duo img{filter:grayscale(1) contrast(1.05) brightness(.88)}
.ph-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ph-bg .ph,.ph-bg img{width:100%;height:100%;object-fit:cover}
/* duotone: a colour blend keeps the photograph's luminance, so the image still reads as a photograph */
.ph-bg::after{content:"";position:absolute;inset:0;z-index:1;background:#1c46c8;mix-blend-mode:color;opacity:.92}
/* the hero: photo, then the live field over it, then a scrim under the type */
.hero .ph-bg img{filter:grayscale(1) contrast(1.06) brightness(.6)}
.hero .ph-bg::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(5,13,34,.88) 0%,rgba(5,13,34,.6) 36%,rgba(5,13,34,.3) 66%,rgba(5,13,34,.14) 100%)}
.hero .art-field{background:
    radial-gradient(42% 56% at 82% 26%,rgba(47,99,240,.18),transparent 64%),
    radial-gradient(40% 52% at 18% 84%,rgba(16,35,83,.3),transparent 66%)}
.hero .art-field::after{background:linear-gradient(90deg,rgba(5,13,34,.3) 0%,rgba(5,13,34,.1) 42%,rgba(5,13,34,0) 66%)}
.hero .art-canvas{mix-blend-mode:screen}
/* card art */
.v2rcard__art,.v2uc__art{display:block;overflow:hidden;position:relative}
.v2rcard__art .ph,.v2uc__art .ph{height:100%}
.v2rcard__art img,.v2uc__art img{height:100%;object-fit:cover;aspect-ratio:16/9}
.ph--art{position:relative}
.v2rcard__art::after,.v2uc__art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(47,99,240,.35),rgba(10,23,51,.3) 60%,rgba(5,13,34,.45));mix-blend-mode:multiply}

/* ------------------------------------------------------------------ full-bleed photographic band */
.pband{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(56px,8vw,112px);background:var(--abyss)}
.pband .ph-bg img{filter:grayscale(1) contrast(1.06) brightness(.5)}
/* a scrim under the copy so the text keeps its contrast whatever the photograph does */
.pband .ph-bg::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(5,13,34,.9) 0%,rgba(5,13,34,.66) 46%,rgba(5,13,34,.34) 100%)}
.pband__inner{position:relative;z-index:3;max-width:760px}
.pband__inner .eyebrow{color:var(--sky,#a9c2ff)}
.pband__inner h2{color:#fff;font-size:clamp(26px,3.4vw,44px);line-height:1.1;margin-top:10px}
.pband__inner p{color:#d6e0f7;font-size:clamp(15.5px,1.5vw,18px);line-height:1.6;margin-top:14px}
.pband__note{color:#a9b8dc !important;font-size:13.5px !important}
@media print{.pband{display:none !important}}

/* ------------------------------------------------------------------ spotlight on product visuals (cursor-reactive) */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),rgba(255,176,32,.16),transparent 62%)}
.spot.is-lit::after{opacity:1}

/* ------------------------------------------------------------------ life of a request (pinned story) */
.story{padding-block:var(--sp-section)}
.story__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,5vw,88px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.story__head h2{font-size:clamp(40px,6.4vw,96px);line-height:.9;letter-spacing:-.04em;font-weight:840;font-stretch:115%;max-width:12ch}
.story__head p{color:var(--ink-2);font-size:var(--fs-lead);max-width:44ch}
.story__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,88px);align-items:start}
.story__stage{position:sticky;top:calc(var(--hdr) + 20px);background:var(--bg);padding:6px 0 10px;z-index:2}
.story__frame{border-radius:18px;background:#0a1733;color:#eef3ff;border:1px solid rgba(10,23,51,.2);overflow:hidden;box-shadow:14px 14px 0 0 var(--saffron)}
[data-theme="dark"] .story__frame{border-color:rgba(238,243,255,.14);box-shadow:14px 14px 0 0 rgba(255,176,32,.85)}
.story__bar{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border-bottom:1px solid rgba(238,243,255,.1);font-size:13px;color:#a9b8dc}
.story__bar i{width:10px;height:10px;border-radius:50%;background:rgba(238,243,255,.22)}
.story__bar span:first-of-type{margin-left:10px}
.story__count{margin-left:auto;font-variant-numeric:tabular-nums;color:#eef3ff}
.story__count b{color:var(--saffron)}
.story__scenes{position:relative;height:clamp(360px,34vw,440px)}
/* Cross-fade, not cross-dissolve. Both scenes used to fade over the same .45s, so at the crossover
   NEITHER was opaque — measured peak opacity 0.57 mid-swap — and scrolling showed an apparently
   EMPTY product frame. The incoming scene now fades in immediately and sits above; the outgoing one
   waits until that is done before fading, so the frame is never blank. */
.st-scene{position:absolute;inset:0;padding:clamp(18px,2.6vw,34px);opacity:0;visibility:hidden;transform:translateY(18px);z-index:1;
  transition:opacity .22s linear .24s,transform .7s var(--ease-out),visibility 0s linear .7s}
.st-scene.is-on{opacity:1;visibility:visible;transform:none;z-index:2;
  transition:opacity .24s linear 0s,transform .7s var(--ease-out),visibility 0s}
html:not(.js) .st-s0{opacity:1;visibility:visible;transform:none}
/* FAIL-SAFE: the frame must never be empty. If no scene carries .is-on — JS not run yet, an error
   before the story block, a restored scroll position, a bfcache restore — scene 1 shows anyway.
   Reported twice as a blank "Illustrative product screen" with the counter stuck at its static 1. */
.story__scenes:not(:has(.is-on)) .st-s0{opacity:1;visibility:visible;transform:none;transition:none}
.story__progress{height:4px;background:rgba(238,243,255,.1)}
.story__progress i{display:block;height:100%;width:calc(var(--p,.2) * 100%);background:var(--saffron);transition:width .5s var(--ease-out)}
.story__illus{font-size:13px;color:var(--muted);margin-top:22px}
.story__steps{display:grid}
.story__step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;min-height:64vh;align-content:center;padding-block:24px;position:relative}
.story__step::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--border)}
.story__step:first-child::before{top:50%}
.story__step:last-child::before{bottom:50%}
.story__n{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:16px;
  background:var(--bg);color:var(--ink);border:2px solid var(--border-2);transition:background-color .3s,border-color .3s,color .3s,transform .4s var(--ease-out)}
.story__step.is-on .story__n{background:var(--saffron);border-color:var(--saffron);color:#0a1733;transform:scale(1.12)}
.story__step h3{font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:-.025em;font-weight:800;font-stretch:110%;margin-top:4px}
.story__step p{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:42ch}
/* The active-step highlight. It used to be a gradient over the WHOLE heading box starting at 64% of
   its height: fine on one line, but on a heading that wraps to two the band lands in the middle of
   the second line and strikes the words through — seen at 2828px on "An answer with its sources".
   Sized and pinned to the bottom instead, so it is always an underline beneath the last line
   whatever the heading wraps to. */
.story__step h3{width:fit-content;background-image:linear-gradient(rgba(255,176,32,0),rgba(255,176,32,0));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .28em;transition:background-image .4s}
.story__step.is-on h3{background-image:linear-gradient(rgba(255,176,32,.45),rgba(255,176,32,.45))}

/* scene 0: sources flow into the Workmate */
.st-s0{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);grid-template-rows:repeat(3,auto);gap:12px clamp(20px,3vw,40px);align-content:center}
.st-src{grid-column:1;position:relative;background:rgba(238,243,255,.06);border:1px solid rgba(238,243,255,.13);border-radius:12px;padding:12px 14px;
  opacity:0;transform:translateX(-18px);transition:opacity .5s,transform .6s var(--ease-out);transition-delay:calc(var(--d) * 130ms + 120ms)}
.is-on .st-src{opacity:1;transform:none}
.st-src::after{content:"";position:absolute;left:100%;top:50%;width:clamp(20px,3vw,40px);height:2px;background:linear-gradient(90deg,var(--saffron),rgba(255,176,32,0))}
.st-tag{display:inline-block;font-size:12px;font-weight:700;color:#0a1733;background:#7ea6ff;border-radius:4px;padding:1px 7px;margin-bottom:6px}
.st-src b,.st-rec b{display:block;font-family:var(--font-head);font-size:16px;font-weight:700;line-height:1.25}
.st-src small,.st-hub small,.st-rec small{display:block;font-size:13px;color:#a9b8dc;margin-top:2px}
.st-hub{grid-column:2;grid-row:1 / span 3;align-self:center;border-radius:16px;padding:22px 20px;background:var(--saffron);color:#0a1733;position:relative}
.st-hub b{display:block;font-family:var(--font-head);font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.05;margin-top:12px}
.st-hub small{color:#1f2b4d}
.st-hub__dot{display:block;width:14px;height:14px;border-radius:50%;background:#0a1733}
.is-on .st-hub__dot{animation:st-ping 1.8s infinite}
@keyframes st-ping{0%{box-shadow:0 0 0 0 rgba(10,23,51,.45)}80%,100%{box-shadow:0 0 0 14px rgba(10,23,51,0)}}

/* scene 1: cited answer */
.st-s1{display:flex;flex-direction:column;gap:14px;justify-content:center}
.st-q{align-self:flex-end;max-width:80%;background:#eef3ff;color:#0a1733;border-radius:14px 14px 4px 14px;padding:10px 14px;font-weight:600;font-size:15px}
.st-a{max-width:94%;background:rgba(238,243,255,.06);border:1px solid rgba(238,243,255,.13);border-radius:14px 14px 14px 4px;padding:14px 16px;
  opacity:0;transform:translateY(10px);transition:opacity .5s .35s,transform .6s var(--ease-out) .35s}
.is-on .st-a{opacity:1;transform:none}
.st-who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--saffron)}
.st-who img{width:16px;height:16px;border-radius:4px;background:#fff}
.st-a p{margin-top:8px;font-size:15px;line-height:1.55;color:#eef3ff}
.st-cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.st-cites span{font-size:12.5px;font-weight:600;border-radius:4px;padding:3px 8px;background:rgba(126,166,255,.14);color:#a9c2ff}
.st-cites sup{color:var(--saffron)}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chips span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#a9b8dc;border:1px solid rgba(238,243,255,.16);border-radius:4px;padding:3px 8px}
.st-chips .i,.st-card__hd .i,.st-b .i,.st-ok .i{width:14px;height:14px}

/* scene 2: approval */
.st-s2{display:grid;place-items:center}
.st-card{position:relative;width:min(100%,440px);background:#eef3ff;color:#0a1733;border-radius:14px;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.st-card__hd{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.st-diff{display:grid;gap:6px;margin-top:14px;font-size:14px}
.st-diff span{border-radius:6px;padding:6px 10px}
.st-diff .del{background:rgba(248,51,11,.1);color:#9a2a10;text-decoration:line-through}
.st-diff .add{background:rgba(31,85,224,.12);color:#1740b0;font-weight:600}
.st-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.st-b{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:7px 12px;font-size:13.5px;font-weight:700;border:1.5px solid rgba(10,23,51,.25)}
.st-b--ok{background:#0a1733;color:#eef3ff;border-color:#0a1733}
.is-on .st-b--ok{animation:st-press 2.6s .9s both}
@keyframes st-press{0%,40%{transform:none;background:#0a1733}50%{transform:scale(.92)}60%,100%{transform:none;background:#1f55e0;border-color:#1f55e0}}
.st-cursor{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 5px rgba(248,51,11,.25);left:78%;top:88%;opacity:0}
.is-on .st-cursor{animation:st-move 2.6s .2s both}
@keyframes st-move{0%{opacity:0;left:78%;top:88%}25%{opacity:1}55%{left:52px;top:calc(100% - 36px);opacity:1}80%{opacity:1}100%{left:52px;top:calc(100% - 36px);opacity:0}}

/* scene 3: the write-back */
.st-s3{display:grid;place-items:center}
.st-rec{width:min(100%,460px);background:#fff;color:#0a1733;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.st-rec__hd{padding:14px 16px;background:#e9eef8}
.st-rec .st-rec__hd small{color:#4b5877}
.st-rec dl{margin:0;padding:6px 16px}
.st-rec dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid #dee5f4;font-size:14px}
.st-rec dt{color:#4b5877}
.st-rec dd{margin:0;font-weight:600;position:relative}
.st-hot{transition:background-color .6s .9s}
.is-on .st-hot{background-color:rgba(255,176,32,.22)}
.st-old{display:inline-block;transition:opacity .4s .6s}
.st-new{position:absolute;left:0;top:0;opacity:0;transform:translateY(8px);transition:opacity .5s .9s,transform .6s var(--ease-out) .9s}
.is-on .st-old{opacity:0}
.is-on .st-new{opacity:1;transform:none}
.st-ok{display:flex;align-items:center;gap:8px;margin:10px 16px 14px;font-size:13.5px;font-weight:700;color:#1f55e0;opacity:0;transition:opacity .4s 1.5s}
.is-on .st-ok{opacity:1}

/* scene 4: the audit trail */
.st-s4{display:grid;align-content:center}
.st-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-log li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:9px 12px;border-radius:8px;background:rgba(238,243,255,.05);border-left:3px solid var(--saffron);
  font-size:14px;opacity:0;transform:translateX(14px);transition:opacity .4s,transform .5s var(--ease-out);transition-delay:calc(var(--d) * 110ms + 100ms)}
.is-on .st-log li{opacity:1;transform:none}
.st-log b{font-family:var(--font-head);font-weight:800;color:#eef3ff}
.st-log span{color:#a9b8dc}

/* ------------------------------------------------------------------ connector constellation */
.cn{margin:clamp(28px,3.4vw,48px) 0}
.cn__filters{display:flex;flex-wrap:wrap;gap:8px}
.cn__f{min-height:40px;padding:0 14px;border-radius:8px;border:1.5px solid var(--border-2);background:transparent;color:var(--ink-2);font:600 14px var(--font-body);cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease-out)}
.cn__f:hover{border-color:var(--ink);color:var(--ink)}
.cn__f:active{transform:scale(.96)}
.cn__f[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cn__stage{margin-top:16px;border-radius:20px;background:#0a1733;overflow-x:auto;position:relative;scrollbar-width:thin}
.cn__svg{display:block;width:100%;height:auto;min-width:720px}
.cn__orbits ellipse{fill:none;stroke:rgba(238,243,255,.09);stroke-dasharray:2 7}
.cn-link{fill:none;stroke:rgba(126,166,255,.28);stroke-width:1.2;stroke-dasharray:3 6;transition:stroke .3s,opacity .3s,stroke-width .3s}
.cn-node circle{fill:#7ea6ff;transition:fill .3s}
.cn-node text{fill:#eef3ff;font:600 15px var(--font-body);transition:opacity .3s,fill .3s}
.cn-node{transition:opacity .3s}
.cn.is-filtered .cn-link:not(.is-hl){opacity:.1}
.cn.is-filtered .cn-node:not(.is-hl){opacity:.28}
.cn-link.is-hl{stroke:var(--saffron);stroke-width:2}
.cn-node.is-hl circle{fill:var(--saffron)}
.cn__nodes,.cn__links{transition:transform .8s var(--ease-out)}
.cn__core > circle:first-child{fill:var(--saffron)}
.cn__ring{fill:none;stroke:rgba(255,176,32,.55);stroke-width:1.5;stroke-dasharray:4 8;transform-origin:600px 310px}
.cn__core-t{fill:#0a1733;font:800 18px var(--font-head)}
.cn__core-s{fill:#0a1733;font:600 12.5px var(--font-body)}
.cn__cap{font-size:14px;color:var(--muted);margin-top:12px;max-width:70ch}
@media (prefers-reduced-motion:no-preference){
  .cn-link{animation:cn-flow 2.4s linear infinite}
  .cn__ring{animation:cn-spin 28s linear infinite}
}
@keyframes cn-flow{to{stroke-dashoffset:-18}}
@keyframes cn-spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ two editions: pinned horizontal rail */
.hrail__hint{display:none}
@media (min-width:1041px){
  .hrail.is-on{height:var(--rail-h,auto);width:calc(100vw - var(--sbw,0px));margin-left:calc(50% - (100vw - var(--sbw,0px)) / 2)}
  .hrail.is-on .hrail__sticky{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));overflow:hidden;display:flex;align-items:center;background:#0a1733}
  .hrail.is-on .hrail__track{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(28px,3vw,56px);width:max-content;max-width:none;margin:0;
    padding-inline:max(24px,calc((100vw - var(--sbw,0px) - var(--container)) / 2)) 8vw;transform:translate3d(var(--rx,0px),0,0);will-change:transform}
  .hrail.is-on .hrail__intro{flex:0 0 min(460px,32vw);display:block;margin:0}
  .hrail.is-on .hrail__intro h2{max-width:10ch}
  .hrail.is-on .hrail__intro p{margin-top:18px}
  .hrail.is-on .hrail__hint{display:flex;align-items:center;gap:10px;margin-top:26px;font-weight:600;color:var(--saffron)}
  .hrail.is-on .hrail__hint::after{content:"";width:64px;height:2px;background:var(--saffron)}
  .hrail.is-on .edlane{flex:0 0 min(1060px,76vw);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(24px,2.6vw,40px);align-content:center;margin:0}
  .hrail.is-on .edlane > *{grid-column:1}
  .hrail.is-on .edlane .edlane__mock{grid-column:2;grid-row:1 / span 7;align-self:center;margin:0}
  .hrail.is-on .edseam{flex:0 0 auto;align-self:stretch}
  .section--rail.is-railed{padding-block:0}
}

/* ------------------------------------------------------------------ footer */
.v2foot__cta{border-radius:18px;background:var(--saffron);color:#0a1733}
.v2foot__cta h2{color:#0a1733;font-stretch:112%;font-weight:800;letter-spacing:-.03em}
.v2foot__cta .btn--trial{background:#0a1733;color:var(--saffron)}
.v2foot__cta .btn--trial:hover{background:#0a1733;color:var(--saffron);box-shadow:4px 4px 0 0 #fff}
.v2foot__cta .btn--ghost{color:#0a1733 !important;border-color:rgba(10,23,51,.45) !important}

/* ------------------------------------------------------------------ responsive (stage 2) */
@media (max-width:1180px){
  .hx-lower{grid-template-columns:minmax(0,1fr)}
  .hx-lead{max-width:640px}
}
@media (max-width:900px){
  .section-head,.story__head{grid-template-columns:minmax(0,1fr)}
  .section-head > h2 + p{grid-column:1;grid-row:auto;margin-top:16px}
  .story__head p{margin-top:16px}
  .story__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .story__stage{top:calc(var(--hdr) + 6px);padding-bottom:8px}
  .story__scenes{height:300px}
  .story__illus{margin-top:12px}
  .story__step{min-height:78vh;align-content:end;padding-bottom:14vh}
  .st-s0{grid-template-columns:minmax(0,1fr);gap:8px}
  .st-hub{grid-column:1;grid-row:auto;padding:12px 14px}
  .st-hub b{margin-top:6px;font-size:18px}
  .st-src{padding:8px 12px}
  .st-src::after{display:none}
  .st-src small{display:none}
  .st-a p{font-size:14px}
  .st-log li{grid-template-columns:80px minmax(0,1fr);padding:6px 10px;font-size:13px}
}
@media (max-width:760px){
  .hero--hx .hx-routes{grid-template-columns:minmax(0,1fr)}
  .hero--hx .hx-route--sf{margin-top:0}
}
@media (max-width:640px){
  .hero--hx h1{font-size:clamp(44px,13.4vw,64px)}
  .hero--hx h1 .grad{font-size:.5em}
  .v2promo a{border-right:0;border-bottom:1px solid rgba(238,243,255,.1)}
  .story__head h2{font-size:clamp(38px,11vw,56px)}
  .story__frame{box-shadow:8px 8px 0 0 var(--saffron)}
  .st-scene{padding:14px}
  .story__scenes{height:290px}
  .st-q{font-size:14px}
  .st-cites span:nth-child(3),.st-chips{display:none}
  .st-log li:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){
  .st-scene,.st-scene *{transition:none !important;animation:none !important}
}
@media print{
  .art-field,.story__stage{display:none !important}
  body::after{display:none}
}


/* ------------------------------------------------------------------ mobile readiness
   Measured on iPhone SE, iPhone 14 and Pixel 7 (real WebKit / Chromium, device profiles).
   Two classes of defect, both present on every phone and every page:

   1. TAP TARGETS. The footer legal row was min-height:36px — under the 40px the rest of the site
      already holds itself to, and well under Apple's 44px. Raised above.
   2. TEXT UNDER 12px. Five of these are real content a person has to read on a phone. The other
      seventeen are inside the product MOCKUPS (.devmock, .lwin, .edseam__chip): those are pictures
      of a product screen, where small type is part of the depiction, and enlarging it would distort
      the illustration rather than help. They are exempted in mobile.mjs by name, not by silence. */
/* Each selector is prefixed with `body` on purpose. The carried pages emit their own <style>
   blocks AFTER /assets/v2.css, so at equal specificity the page wins and a plain `.billseg .save`
   override silently did nothing — measured: still 11.2px on a Pixel 7 with the rule served and the
   media query matching. `body .billseg .save` (0,2,1) beats `.billseg .save` (0,2,0) wherever it
   sits in the cascade. */
@media (max-width:700px){
  body .billseg .save{font-size:12px}
  body .pcalc__lock{font-size:12px}
  body .fc__lbl{font-size:12px}
  body .fc__tier small{font-size:12px}
  body .uc-row dt{font-size:12px}
  body .edlane__best-lbl{font-size:12px}
  /* A short word like "Terms" is under 40px WIDE even with a tall target, so give the standalone
     legal links a real box in both directions rather than only in height. */
  body .v2foot__legal a,body .v2foot__col a{min-height:44px;min-width:44px;justify-content:flex-start}
  body .billseg button,body .pcalc input,body .pcalc button{min-height:44px}
  /* the comparison toggle was a bare 24x24 checkbox — below any touch guidance */
  body .fc__switch input{width:44px;height:44px;min-width:44px;min-height:44px}
  /* the hero eyebrow is real content, not mock chrome — 10.5px is unreadable on a phone */
  body .hero__eyebrow .pill,body .hero__eyebrow{font-size:12px}
}


/* ------------------------------------------------------------------ anchors clear the sticky header
   The header is position:sticky at --hdr (66px), but only .v2scen and .wp-body h2 carried a
   scroll-margin. Every other #anchor — and there are 744 internal links and anchors on this site —
   scrolled its target UNDER the header, which is why a section heading appears sliced in half.
   Seen at 2828px on "every step logged" and on "The action". */
[id]{scroll-margin-top:calc(var(--hdr) + 24px)}

/* ===== ATQ-SITE-V4 — the body catches up with the hero ===================================
   The hero is alive; the page bodies were rows of pale cards on pale grey. Four devices, all
   inside the flat editorial direction above, which stays: the live field on a mid-page dark
   section, headlines that rise word by word as they scroll in, colour-cycled icon tiles, and a
   brand edge on card hover. Motion is transform/clip only, respects reduced-motion, and the
   hero's single pause control stops every field on the page. */

/* 1. the live field inside a dark section: same shader, no second toggle, a symmetric scrim.
      The scrim is MEASURED against the brightest painted pixel behind the section headline
      (_probe_sitewow.mjs), not styled by eye. */
.section--dark:not(.hero){position:relative}
.section--dark:not(.hero) .art-field{z-index:0;background:var(--navy)}
.section--dark:not(.hero) .art-field::after{background:linear-gradient(180deg,rgba(10,23,51,.70) 0%,rgba(10,23,51,.52) 45%,rgba(10,23,51,.70) 100%)}
/* the paragraph tier (#a9b8dc) over the field measured 3.70:1 against the brightest contour; a scrim strong
   enough to fix that alone (0.64) dims the art to a murmur. So: a modest scrim (0.52) AND, only in the
   section that carries the field, the tier lifts to #d3dbf3 - a colour dark sections already use for list
   text. Computed worst case 5.95:1 for paragraphs, 7.40:1 for headings; measured by _probe_sitewow.mjs. */
.section--dark.has-field{--navy-ink-2:#d3dbf3}
.section--dark:not(.hero) > .container{position:relative;z-index:1}

/* 2. headlines rise word by word when they scroll into view. Keyed on the reveal observer's
      .is-visible, so a headline two screens down animates when it is reached, not at page load
      (that is what plain data-kinetic does, correctly, for the hero). Without JS there is no
      html.js and nothing is ever hidden. Under reduced motion the words are simply there. */
[data-kinetic-scroll] .kw{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]:not(.is-visible) [data-kinetic-scroll] .kw{opacity:0}
  html.js [data-reveal].is-visible [data-kinetic-scroll] .kw{animation:kw-in .9s var(--ease-out) backwards;animation-delay:calc(var(--k) * 55ms + 60ms)}
}
@media (prefers-reduced-motion:reduce){[data-kinetic-scroll] .kw{opacity:1 !important;transform:none !important;clip-path:none !important}}

/* 3. icon tiles cycle through the brand roles by card position. Fixed hexes on purpose: var(--brand)
      is #7ea6ff in the dark theme and white on it is 2.39:1. Every pair measured for the glyph:
      ink/saffron 9.7 · #1f55e0/white 6.12 · sky/navy 10.0 · coral/navy 6.24 - all ≥4.5:1. */
.grid > .card:nth-child(4n+2) .icon-tile{background:#1f55e0;color:#fff}
.grid > .card:nth-child(4n+3) .icon-tile{background:#a9c2ff;color:#0a1733}
.grid > .card:nth-child(4n+4) .icon-tile{background:#ff6a3d;color:#0a1733}
.section--dark .grid > .card .icon-tile{background:var(--saffron);color:#0a1733}

/* 4. on hover a card grows a brand edge along its top: an edge, not a glow - the flat card stays flat */
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:14px 14px 0 0;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);pointer-events:none}
.card:hover::after{transform:scaleX(1)}
/* 5. the carried IDE mockups paint code comments #5c6a97 on a dark editor (measured rgb(46,49,87) behind
      them on /developers): 2.34:1. #9aa7cf measures 5.20:1 there and 7.44:1 on navy; italic stays. */
.ide-code .c,.devmock__code .c{color:#9aa7cf}
@media (prefers-reduced-motion:reduce){.card::after{transition:none}}