@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); }

/* ===== Tokens ===== */
:root {
  --ink: #0B1628; --graphite: #4A5568; --rule: #D5DBE3; --steel: #2F6FB2;
  --gold: #C9A84C; --gold-lt: #E3C877; --gold-dk: #8A6D1F; --brick: #A33A2B;
  --paper: #F4F6F9;                       /* the one light tint behind alternate sections */
  --navy-2: #0F1D33; --navy-line: #1E2E48; --navy-edge: #2A3D5C;
  --on-navy: #DCE3EC; --on-navy-2: #B7C3D3; --on-navy-3: #9FB0C6;
  --coral: #E8806F; --sky: #6EA8E0;
  --field: #8792A3;                       /* form borders, 3:1 on white */
  --body: "IBM Plex Sans", "IBM Plex Sans Arabic", Arial, sans-serif;
  --head: "IBM Plex Serif", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sec: 72px;
}
:lang(ar) { --body: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, sans-serif; --head: "IBM Plex Sans Arabic", Tahoma, sans-serif; }

/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
html[dir="rtl"] body { line-height: 1.8; }
/* short pages (thanks, 404): the navy intro runs down to the footer instead of leaving white below it */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > * { flex: none; }
main > .intro:only-child { flex: 1 0 auto; }
img, svg { max-width: 100%; }
a { color: var(--steel); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.site-header :focus-visible, .intro :focus-visible, .change-sec :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }
bdi { unicode-bidi: isolate; }
.skip { position: absolute; inset-inline-start: 16px; top: 12px; transform: translateY(-300%); background: var(--ink); color: #fff; padding: 10px 14px; z-index: 10; }
.skip:focus { transform: none; color: #fff; }

/* ===== Layout ===== */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.narrow > * { max-width: 780px; }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; }
section { padding: var(--sec) 0; border-bottom: 1px solid var(--rule); }
section.closing { border-bottom: 0; background: var(--paper); }
.side { color: var(--graphite); font-size: 15px; border-inline-start: 1px solid var(--rule); padding-inline-start: 24px; align-self: start; }
.side:empty { display: none; }
.side p { max-width: none; }

/* ===== Type ===== */
h1, h2, h3 { font-family: var(--head); font-weight: 600; text-wrap: balance; }
h1 { font-size: 40px; line-height: 1.2; margin: 0 0 20px; max-width: 22em; }
h2 { font-size: 28px; line-height: 1.3; margin: 0 0 18px; }
h2.small { font-size: 17px; font-family: var(--body); margin: 0 0 8px; }
h3 { font-size: 21px; line-height: 1.35; margin: 36px 0 4px; }
h3:first-of-type { margin-top: 8px; }
html[dir="rtl"] h1 { line-height: 1.45; }
html[dir="rtl"] h2 { line-height: 1.5; }
p { margin: 0 0 16px; max-width: 40em; text-wrap: pretty; }
.lede { font-size: 21px; line-height: 1.55; color: var(--graphite); max-width: 36em; margin-bottom: 28px; }
html[dir="rtl"] .lede { line-height: 1.75; }
.sec-lede { color: var(--graphite); margin-bottom: 36px; }
.product-name { font-size: 15px; color: var(--graphite); margin: 0 0 8px; }
.crumb { font-size: 15px; margin: 0 0 28px; }
.meta, .note { font-size: 15px; color: var(--graphite); }
.note { margin-top: 12px; }
ul.plain { margin: 0 0 16px; padding-inline-start: 18px; }
ul.plain li { margin: 0 0 8px; }
ol.steps { margin: 0; padding-inline-start: 22px; }
ol.steps li { margin: 0 0 14px; padding-inline-start: 6px; max-width: 40em; }
/* small mono labels: uppercase in English only; Arabic never uppercases embedded Latin names */
.eyebrow, .path .tag, .change .lbl { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { font-size: 13px; letter-spacing: .14em; color: var(--gold); margin: 0 0 22px; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .path .tag, html[dir="rtl"] .change .lbl { font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.5; }

/* ===== Tables ===== */
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: start; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; width: 32%; padding-inline-end: 24px; }
td { color: var(--graphite); }
tbody tr:first-child th, tbody tr:first-child td { border-top: 1px solid var(--ink); }
table.index { margin-bottom: 48px; }
table.index th { font-weight: 400; }
table.index a { font-weight: 600; }
table.forms th { font-weight: 400; color: var(--graphite); }
table.forms td { color: var(--ink); font-size: 17px; line-height: 1.7; }
table.forms td[dir="ltr"] { font-family: "IBM Plex Sans", Arial, sans-serif; text-align: left; }
table.forms td[dir="rtl"] { font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif; text-align: right; }

/* ===== Header ===== */
.site-header { background: var(--ink); border-bottom: 1px solid var(--navy-line); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 24px; }
.wordmark { font: 600 17px/1 "IBM Plex Sans", Arial, sans-serif; color: #fff; text-decoration: none; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.wordmark:hover { color: #fff; }
.wordmark .logo { height: 32px; width: auto; display: block; }
.wordmark span { font-weight: 400; color: var(--on-navy-3); letter-spacing: 0; }
nav { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
nav a { color: var(--on-navy); text-decoration: none; font-size: 15px; }
nav a:hover, nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
nav .lang { color: var(--gold); }
nav .nav-cta { border: 1px solid var(--gold); color: var(--gold); padding: 9px 14px; line-height: 1.2; }
nav .nav-cta:hover { background: var(--gold); color: var(--ink); text-decoration: none; }

/* ===== Buttons ===== */
.btn { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font: 600 16px/1.25 var(--body); padding: 13px 22px; border: 1px solid transparent; border-radius: 0; text-align: center; }
.btn:hover { background: #1C2C47; color: #fff; text-decoration: none; }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.gold:hover { background: var(--gold-lt); color: var(--ink); }
.btn.ghost { background: transparent; color: #fff; border-color: #5B6E8C; }
.btn.ghost:hover { border-color: #fff; color: #fff; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.line:hover { background: var(--ink); color: #fff; }
button.btn { cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 8px 0 0; }
.actions .after { padding: 10px 0; }

/* ===== Navy intro band (every page) ===== */
.intro { background: var(--ink); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.intro > .wrap { position: relative; z-index: 1; }
.intro h1 { color: #fff; }
.intro .lede, .intro .side { color: var(--on-navy-2); }
.intro .product-name, .intro .meta { color: var(--on-navy-3); }
.intro .side { border-inline-start-color: var(--navy-edge); }
.intro .side h2.small { color: #fff; }
.intro a { color: var(--gold-lt); }
.intro a:hover { color: #fff; }
.intro .btn { color: #fff; border-color: #5B6E8C; }
.intro .btn:hover { border-color: #fff; color: #fff; }
.intro .btn.gold, .intro .btn.gold:hover { color: var(--ink); border-color: transparent; }
.intro .crumb a { color: var(--on-navy-3); }
.intro .crumb a:hover { color: #fff; }

/* home hero */
.hero { padding: 88px 0 96px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hero h1 { font-size: 52px; line-height: 1.12; letter-spacing: -.01em; max-width: 15em; }
html[dir="rtl"] .hero h1 { font-size: 46px; line-height: 1.4; letter-spacing: 0; }
/* the same request in four ways of writing drifts behind the band; a gold gate line marks where NEUSAI checks it */
.streams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.streams .s { position: absolute; left: 0; white-space: nowrap; margin: 0; max-width: none; font: 15px/1 var(--mono); color: #fff; opacity: .045; }
.streams .s span { padding-right: 4em; }
.streams .s0 { top: 14%; }
.streams .s1, .streams .s2, .streams .s3 { font-family: var(--body); font-size: 17px; }
.streams .s1 { top: 38%; } .streams .s2 { top: 63%; } .streams .s3 { top: 86%; }
.gate { position: absolute; top: 0; bottom: 0; inset-inline-start: 62%; width: 1px; background: var(--gold); opacity: .3; z-index: 0; }

/* ===== Emblem: model core in an orbit of test, protect, prove ===== */
.emblem { display: block; width: 100%; height: auto; overflow: visible; }
.emblem-wrap { max-width: 440px; justify-self: end; width: 100%; }
html[dir="rtl"] .emblem-wrap { justify-self: start; }
.emblem .ring { fill: none; stroke: #1F3150; stroke-width: 1; }
.emblem .orbit { fill: none; stroke: #22355A; stroke-width: 1.2; stroke-dasharray: 2 6; }
.emblem .arc { fill: none; stroke-width: 2; stroke-linecap: round; }
.emblem .a1 { stroke: var(--coral); } .emblem .a2 { stroke: var(--gold); } .emblem .a3 { stroke: var(--sky); }
.emblem .runner circle { fill: #fff; }
.emblem .cube { fill: #12233F; stroke: var(--sky); stroke-width: 1.6; stroke-linejoin: round; }
.emblem .cube-in { fill: none; stroke: #2E4C78; stroke-width: 1.2; }
.emblem .net { fill: none; stroke: #8FB8E8; stroke-width: 1; opacity: .7; }
.emblem .nd { fill: #CFE2F7; }
.emblem .disc { fill: var(--navy-2); stroke-width: 1.6; }
.emblem .halo { fill: none; stroke-width: 1; opacity: .35; }
.emblem .glyph { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emblem text { font: 600 15px var(--body); fill: var(--on-navy); }
.emblem .n-test .disc, .emblem .n-test .halo, .emblem .n-test .glyph { stroke: var(--coral); }
.emblem .n-protect .disc, .emblem .n-protect .halo, .emblem .n-protect .glyph { stroke: var(--gold); }
.emblem .n-prove .disc, .emblem .n-prove .halo, .emblem .n-prove .glyph { stroke: var(--sky); }
/* the small emblem on inner pages sits inside the content column's outer edge */
.emblem.small { position: absolute; inset-inline-end: max(16px, calc(50% - 540px)); top: 50%; width: 250px; transform: translateY(-50%); opacity: .4; z-index: 0; pointer-events: none; }
.emblem.small text { display: none; }
.intro:has(.side) .emblem.small { display: none; }

/* ===== Home: figures ===== */
.figures { padding: 0; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fig { padding: 34px 24px; border-inline-start: 1px solid var(--rule); }
.fig:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fig .n { margin: 0; font: 600 42px/1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.fig .num { display: inline-block; }
.fig .l { margin: 10px 0 0; font-size: 14px; color: var(--graphite); line-height: 1.5; }

/* ===== Home: three paths ===== */
.paths-sec { background: var(--paper); }
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.path { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--steel); display: flex; flex-direction: column; padding: 28px 26px 26px; }
.path.p1 { border-top-color: var(--gold); }
.path.p2 { border-top-color: var(--ink); }
.path .tag { color: var(--gold-dk); margin: 0 0 12px; }
.path h3 { margin: 0 0 10px; font-family: var(--body); font-size: 21px; line-height: 1.35; }
.path .pt { font-size: 15px; color: var(--graphite); }
.path ul { list-style: none; margin: 8px 0 22px; padding: 0; border-top: 1px solid var(--rule); }
.path li { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 4px 0; min-height: 52px; border-bottom: 1px solid #E8EBF0; }
.path .pn { font-weight: 600; color: var(--ink); text-decoration: none; }
.path .pn:hover { color: var(--steel); text-decoration: underline; }
.path .rq { font-size: 14px; white-space: nowrap; padding: 12px 0; }
.first { font-size: 14px; color: var(--ink); border-inline-start: 2px solid var(--gold); padding: 2px 0; padding-inline-start: 12px; margin: auto 0 18px; }

/* ===== Home: one request, four ways ===== */
.exhibit { background: var(--paper); }
.exhibit .result { margin-top: 18px; font-size: 15px; color: var(--graphite); }
.exhibit .result strong { color: var(--brick); font-weight: 600; font-family: "IBM Plex Sans", Arial, sans-serif; white-space: nowrap; }

/* ===== Product grid ===== */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-inline-start: 1px solid var(--rule); }
.pcell { border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 28px 26px 18px; display: flex; flex-direction: column; gap: 10px; }
.pcell:hover { background: #F8F9FB; }
.pcell .top { display: flex; justify-content: space-between; align-items: center; }
.pcell .ico { color: var(--steel); flex: none; }
.pcell .st { font-size: 12px; line-height: 1.4; color: var(--graphite); border: 1px solid var(--rule); padding: 3px 8px; }
.pcell h3 { margin: 8px 0 0; font-family: var(--body); font-size: 19px; }
.pcell h3 a { color: var(--ink); text-decoration: none; }
.pcell h3 a:hover { color: var(--steel); text-decoration: underline; }
.pcell p { font-size: 15px; color: var(--graphite); margin: 0; flex-grow: 1; }
.pcell .links { flex-grow: 0; display: flex; gap: 24px; margin-top: 2px; }
.pcell .links a { padding: 10px 0; }
.pcell .rq { font-weight: 600; }
.pcell .dt { color: var(--graphite); }
.pcell.unsure { grid-column: span 2; background: var(--paper); justify-content: center; padding-bottom: 28px; }
.pcell.unsure h3 { font-size: 22px; }
.pcell.unsure p { flex-grow: 0; }

/* ===== Closing band ===== */
.band { background: var(--paper); border-bottom: 0; }
.band-in { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.band h2 { margin: 0 0 6px; }
.band p { margin: 0; color: var(--graphite); }

/* ===== Product page: the problem and what changes ===== */
.change-sec { background: var(--navy-2); color: #fff; border-top: 1px solid var(--navy-line); border-bottom: 0; }
.change-sec h2 { color: #fff; }
.change { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.25fr); align-items: stretch; margin-top: 30px; }
.ch-prob, .ch-out { border: 1px solid var(--navy-edge); background: var(--ink); padding: 26px 26px 24px; }
.ch-prob { border-top: 3px solid var(--coral); }
.ch-out { border-top: 3px solid var(--gold); }
.change .lbl { color: var(--on-navy-3); margin: 0 0 14px; }
.ch-prob p:last-child { color: var(--on-navy); font-size: 17px; line-height: 1.65; margin: 0; }
.ch-out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ch-out li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.ch-out .ck { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); }
.ch-out .ck-svg { width: 16px; height: 16px; }
.ch-out .ot { margin: 2px 0; font-weight: 600; color: #fff; }
.ch-out .od { margin: 0; font-size: 15px; color: var(--on-navy-2); }
.ch-gate { position: relative; height: 60px; display: flex; align-items: center; align-self: center; }
.ch-gate .ln { flex: 1; height: 2px; background: #22355A; position: relative; overflow: hidden; }
.ch-gate .ln::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 35%; background: var(--gold); transform: translateX(-100%); }
html[dir="rtl"] .ch-gate .ln::after { transform: translateX(100%); }
.ch-gate .gt { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.6px solid var(--gold); background: var(--ink); color: var(--gold); flex: none; }
.ch-gate .gt-svg { width: 24px; height: 24px; }

/* product screen */
figure.screen { margin: 0 0 28px; }
figure.screen img { display: block; width: 100%; max-width: 260px; height: auto; border: 1px solid var(--rule); }
figure.screen figcaption { font-size: 13px; color: var(--graphite); margin-top: 8px; }

/* ===== Request form ===== */
.req-intro { padding: 56px 0 48px; }
.req-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; }
form.req { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
form.req label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; }
form.req .wide { grid-column: 1 / -1; }
form.req input[type="text"], form.req input[type="email"], form.req input[type="tel"], form.req select, form.req textarea {
  font: 400 16px/1.5 var(--body); color: var(--ink); background: #fff; border: 1px solid var(--field); border-radius: 0; padding: 11px 13px; min-height: 48px; width: 100%; }
form.req input:hover, form.req select:hover, form.req textarea:hover { border-color: var(--ink); }
form.req textarea { resize: vertical; min-height: 130px; }
form.req input:focus, form.req select:focus, form.req textarea:focus { outline: 2px solid var(--steel); outline-offset: 0; border-color: var(--steel); }
form.req input[dir="ltr"] { text-align: left; }
form.req ::placeholder { color: #6B7586; }
.hp { display: none !important; }
fieldset.kinds { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
fieldset.kinds legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; }
form.req label.opt { flex-direction: row; font-weight: 400; position: relative; }
label.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.opt span { display: inline-flex; align-items: center; border: 1px solid var(--field); padding: 10px 18px; min-height: 46px; cursor: pointer; }
label.opt span:hover { border-color: var(--ink); }
label.opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
label.opt input:focus-visible + span { outline: 2px solid var(--steel); outline-offset: 2px; }
form.req label.consent { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; color: var(--graphite); }
label.consent input { width: 22px; height: 22px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.submit-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--rule); padding-top: 22px; }
.submit-row .via { margin: 0; font-size: 13px; color: var(--graphite); max-width: 30em; }

/* ===== Footer ===== */
.site-footer { background: var(--ink); color: #C5CDD8; padding: 40px 0 56px; font-size: 15px; border-top: 1px solid var(--navy-line); }
.foot { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: start; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
dt { color: var(--ink); }
dd { margin: 0; }
.site-footer dt { color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold); }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ===== Responsive ===== */
@media (max-width: 1100px) { .emblem.small { display: none; } }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .emblem-wrap, html[dir="rtl"] .emblem-wrap { max-width: 300px; justify-self: center; }
  .gate { display: none; }
  .streams { opacity: .6; }
  .paths { grid-template-columns: minmax(0, 1fr); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .req-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .change { grid-template-columns: minmax(0, 1fr); }
  .ch-gate { height: 64px; flex-direction: column; justify-content: center; }
  .ch-gate .ln { width: 2px; height: auto; flex: 1; }
  .ch-gate .ln::after { width: auto; inset-inline-end: 0; height: 35%; transform: translateY(-100%); }
}
@media (max-width: 820px) {
  :root { --sec: 48px; }
  .wrap { padding: 0 20px; }
  /* header: wordmark and request button on one row, the links on a second row */
  .bar { position: relative; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
  .wordmark { min-height: 60px; align-self: flex-start; }
  nav { flex-wrap: nowrap; gap: 0 18px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; border-top: 1px solid var(--navy-line); scrollbar-width: none; }
  nav a { display: flex; align-items: center; min-height: 46px; white-space: nowrap; font-size: 14.5px; }
  nav .nav-cta { position: absolute; top: 8px; inset-inline-end: 20px; min-height: 44px; padding: 0 12px; font-size: 14px; }
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  .lede { font-size: 18px; }
  .intro { padding: 44px 0; }
  .hero { padding: 44px 0 52px; }
  .hero h1, html[dir="rtl"] .hero h1 { font-size: 32px; }
  .emblem-wrap, html[dir="rtl"] .emblem-wrap { max-width: 240px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .side { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
  .intro .side { border-top-color: var(--navy-edge); }
  .actions { gap: 4px 24px; }
  th, td { display: block; width: 100%; padding: 0; border: 0; }
  tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  tbody tr:first-child { border-top: 1px solid var(--ink); }
  tbody tr:first-child th, tbody tr:first-child td { border-top: 0; }
  th { margin-bottom: 4px; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcell.unsure { grid-column: auto; }
  .fig { padding: 26px 16px; }
  .fig .n { font-size: 34px; }
  form.req { grid-template-columns: minmax(0, 1fr); }
  .submit-row .btn { width: 100%; }
  dl { grid-template-columns: 1fr; gap: 0; }
  dd { margin-bottom: 10px; }
  .foot-links a { display: inline-block; padding: 8px 0; }
  .foot-links { gap: 0; }
}
@media (max-width: 379px) { .wordmark span { display: none; } nav { gap: 0 12px; } nav a { font-size: 14px; } }

/* ===== Motion (CSS only; every element is complete without it) ===== */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  a, .btn, .pcell, label.opt span, form.req input, form.req select, form.req textarea { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }

  /* page title, intro and actions arrive in turn on load */
  @keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .intro h1 { animation: lift .7s var(--ease) .1s both; }
  .intro .lede, .intro .eyebrow { animation: lift .7s var(--ease) .2s both; }
  .intro .actions, .intro > .wrap > p:not(.lede):not(.meta), .intro > .wrap > .btn { animation: lift .7s var(--ease) .3s both; }
  .intro .side, .intro .meta, .emblem-wrap { animation: lift .7s var(--ease) .4s both; }

  /* hero streams and gate */
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
  .streams .s { animation: drift 60s linear infinite; }
  .streams .s1 { animation-duration: 75s; animation-direction: reverse; }
  .streams .s2 { animation-duration: 90s; }
  .streams .s3 { animation-duration: 68s; animation-direction: reverse; }
  @keyframes gate { 0%, 100% { opacity: .15; } 50% { opacity: .5; } }
  .gate { animation: gate 4s ease-in-out infinite; }

  /* figures count up from zero */
  @keyframes count { from { --n: 0; } to { --n: var(--to); } }
  .fig .n { position: relative; }
  .fig .n .num { color: transparent; }
  .fig .n::after { content: counter(n); counter-reset: n var(--n); position: absolute; inset-inline-start: 0; top: 0; color: var(--ink); animation: count 1.6s var(--ease) .3s both; }
  .fig .n.c10::after { --to: 10; } .fig .n.c4::after { --to: 4; } .fig .n.c376::after { --to: 376; } .fig .n.c3::after { --to: 3; } .fig .n.c0::after { --to: 0; }

  /* emblem */
  @keyframes orbit { to { transform: rotate(360deg); } }
  @keyframes arcdraw { 0% { stroke-dashoffset: 1; opacity: .25; } 25% { stroke-dashoffset: 0; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .25; } }
  @keyframes halo { 0% { transform: scale(.8); opacity: .7; } 30%, 100% { transform: scale(1.25); opacity: 0; } }
  @keyframes radar { 0% { transform: scale(.85); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
  @keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .emblem .runner { transform-box: view-box; transform-origin: 200px 200px; animation: orbit 9s linear infinite; }
  .emblem .arc { stroke-dasharray: 1; animation: arcdraw 9s ease-in-out infinite; }
  .emblem .a2 { animation-delay: 3s; } .emblem .a3 { animation-delay: 6s; }
  .emblem .halo { transform-box: fill-box; transform-origin: center; animation: halo 9s ease-out infinite; }
  .emblem .n-protect .halo { animation-delay: 3s; } .emblem .n-prove .halo { animation-delay: 6s; }
  .emblem .ring { transform-box: fill-box; transform-origin: center; animation: radar 6s ease-out infinite; }
  .emblem .r2 { animation-delay: 3s; }
  .emblem .nd { animation: twinkle 3s ease-in-out infinite; }
  .emblem .d2 { animation-delay: .4s; } .emblem .d3 { animation-delay: .8s; } .emblem .d4 { animation-delay: 1.2s; }
  .emblem .d5 { animation-delay: 1.6s; } .emblem .d6 { animation-delay: 2s; } .emblem .d7 { animation-delay: 2.4s; }
  .emblem .core { transform-box: fill-box; transform-origin: center; animation: float 6s ease-in-out infinite; }
  .emblem.small .runner, .emblem.small .core { animation-duration: 14s; }

  /* exhibit: each form is written out in turn, then the result appears (timed fallback) */
  @keyframes write { from { clip-path: var(--from); } to { clip-path: inset(0 0 0 0); } }
  @keyframes appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .exhibit table.forms td[dir="rtl"] { --from: inset(0 0 0 100%); }
  .exhibit table.forms td[dir="ltr"] { --from: inset(0 100% 0 0); }
  .exhibit table.forms td { animation: write 1s steps(28, end) both; }
  .exhibit table.forms tr:nth-child(1) td { animation-delay: .4s; }
  .exhibit table.forms tr:nth-child(2) td { animation-delay: 1.5s; }
  .exhibit table.forms tr:nth-child(3) td { animation-delay: 2.6s; }
  .exhibit table.forms tr:nth-child(4) td { animation-delay: 3.7s; }
  .exhibit .result { animation: appear .6s ease-out 4.9s both; }

  /* product icons draw themselves (timed fallback) */
  @keyframes ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .pcell .ico path { stroke-dasharray: 1; animation: ink 1.4s ease-out both; }

  /* problem and result: a pulse runs through the gate */
  @keyframes flowx { to { transform: translateX(300%); } }
  @keyframes flowx-r { to { transform: translateX(-300%); } }
  @keyframes flowy { to { transform: translateY(300%); } }
  @keyframes gatepulse { 0%, 100% { outline-color: rgba(201,168,76,0); outline-offset: 0; } 50% { outline-color: rgba(201,168,76,.25); outline-offset: 6px; } }
  .ch-gate .ln::after { animation: flowx 3.2s linear infinite; }
  .ch-gate .ln2::after { animation-delay: 1.6s; }
  html[dir="rtl"] .ch-gate .ln::after { animation-name: flowx-r; }
  .ch-gate .gt { outline: 1px solid rgba(201,168,76,0); animation: gatepulse 3.2s ease-in-out infinite; }

  /* scroll-driven versions where supported. Nothing is ever hidden: blocks only travel a short way into place,
     and the four forms darken from a readable grey to ink in turn, so a print, a full-page capture or a fast scroll
     always shows complete content. */
  @supports (animation-timeline: view()) {
    @keyframes rise { from { transform: translateY(22px); } to { transform: none; } }
    @keyframes settle { from { color: #7D8899; } to { color: var(--ink); } }
    main > section h2:not(.small), main > section .sec-lede, main > section .grid > div > p, main > section .grid > div > ul,
    main > section .side, .path, .pcell, .flow, main > section table, .ch-prob, .ch-out, .band-in > .btn, section.closing .wrap > * {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 160px;
    }
    .exhibit table.forms td { animation: settle linear both; animation-delay: 0s; animation-timeline: view(); animation-range: entry 60% cover 35%; }
    .exhibit .result { animation: none; }
  }
  @media (max-width: 900px) {
    .ch-gate .ln::after, html[dir="rtl"] .ch-gate .ln::after { animation-name: flowy; }
  }
}

/* ===== Print: no motion, everything visible, ink on white ===== */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  main *, .fig .n .num { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fig .n::after { content: none !important; }
  .fig .n .num { color: var(--ink) !important; }
  .site-header nav, .btn, .skip, .streams, .gate, .emblem, .emblem-wrap, .ch-gate { display: none !important; }
  .site-header, .intro, .change-sec, .site-footer, .ch-prob, .ch-out, .paths-sec, .exhibit, .band, section.closing, .pcell.unsure { background: #fff !important; color: var(--ink) !important; }
  .site-header .wordmark, .intro h1, .intro h2, .intro .side h2.small, .intro .crumb a, .intro .lede, .intro .side, .intro .meta, .intro .product-name, .intro a, .change-sec h2, .change .lbl, .ch-prob p, .ch-out .ot, .ch-out .od, .site-footer, .site-footer dt, .site-footer a { color: var(--ink) !important; }
  .intro, .hero, .change-sec { padding: 24px 0; border-bottom: 1px solid var(--rule); }
  section { padding: 24px 0; break-inside: avoid-page; }
  .change, .hero-grid, .grid, .paths, .pgrid { display: block; }
  .path, .pcell, .ch-prob, .ch-out { break-inside: avoid; margin-bottom: 12px; }
  body { font-size: 11pt; }
}