/* battlebridge.com ROUND 2, shared by every round-2 page (home-r2, the /arsenal/ page): fonts, tokens, base, marks,
   the lockup, shared pieces, links, the Capstone frame and its hover, nav (with "The Arsenal" disclosure), footer,
   Atlas. Brief: ../../DIRECTION-r2.md (crimson 3, chrome by day 4, nav 5, screenshots 7). Round 1's tokens are kept
   except where DIRECTION-r2 changes them; every new ratio is in ../../home-r2/NOTES.md and tools/contrast-pairs-r2.js.
   Light is the default; dark sits under [data-theme="dark"] on any element (a night island) AND under the device
   setting, so the dark block appears twice. No colour transitions: the door switches instantly. Nothing under 12px. */

/* ---------- type ---------- */
@font-face {
  font-family: 'Archivo Display';
  src: url('../fonts/archivo-75-800-e0ced102.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Display Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  font-weight: 800; font-style: normal;
  size-adjust: 82%; ascent-override: 107.07%; descent-override: 25.61%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Figure';
  src: url('../fonts/archivo-100-600-2265795d.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Figure Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  font-weight: 600; font-style: normal;
  size-adjust: 97%; ascent-override: 90.52%; descent-override: 21.65%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-c0360431.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- tokens: light (default) ---------- */
:root {
  --ground: #FAFCFE;  --band: #F4F6F8;  --surface: #FFFFFF;  --surface-2: #F4F6F8;
  --line: #DCDEE1;
  --line-strong: #868A8F;   /* control edges: 3.38 / 3.21 / 3.47 */
  --ink: #1A1C1E;           /* 16.62 / 15.78 / 17.09 */
  --ink-2: #525457;         /* 7.39 / 7.01 / 7.60 */
  --ink-3: #6E7074;         /* 4.82 / 4.58 / 4.96 */
  /* addresses: a product colour is a name, never data */
  --ads: #0E6475;  --search: #7A5412;  --search-mark: #B07D22;  --conv: #1A1C1E;  --conv-base: #9CA5B2;
  --mark-base: #2E343D;
  --offer: #A51C25;
  /* CRIMSON, the parent's voice (DIRECTION-r2 3.1; light ratios ground / band / surface) */
  --crimson: #A51C25;                 /* fill; white on it 7.52 */
  --crimson-text: #9E1B24;            /* small crimson text 7.75 / 7.35 / 7.97 */
  --crimson-line: #A51C25;            /* rules, underlines, current mark 7.31 / 6.94 / 7.52 */
  --crimson-soft: #F9E3E5; --crimson-soft-ink: #9E1B24;   /* offer chip / menu foot 6.50 */
  --crimson-metal: linear-gradient(180deg,#B4202B 0%,#A51C25 45%,#8C1820 100%);   /* display >=24px only, lit from above */
  --btn-crimson: linear-gradient(180deg,#B4202B 0%,#A51C25 55%,#8C1820 100%);     /* Bold only; white 6.60 / 7.52 / 9.26 */
  --btn-crimson-hover: linear-gradient(180deg,#C8232F 0%,#B4202B 55%,#9E1B24 100%);
  --crimson-band: linear-gradient(180deg,#B4202B 0%,#A51C25 50%,#8C1820 100%);    /* same in both modes (its own object) */
  --focus: #9E1B24;                   /* 2px ring, offset 2: 7.75 on ground */
  /* states inside drawings */
  --live: #15803D;  --pos: #14532D;  --neg: #B3265B;  --warn: #8A5A06;
  --pos-bg: rgba(20,83,45,.12); --neg-bg: rgba(179,38,91,.10);
  --data: #2E343D;  --data-2: #808C9E;  --hist: .55;
  /* metal, LIT FROM ABOVE by day (DIRECTION-r2 4.2: round 1's stops, reversed; lightest 7.79 on ground) */
  --rule: linear-gradient(90deg,#9CA5B2,#5F6875 40%,#AEB6C1 70%,#6F7784);
  --rule-v: linear-gradient(180deg,#9CA5B2,#5F6875 40%,#AEB6C1 70%,#6F7784);
  --metal-text: linear-gradient(180deg,#4A515C 0%,#2E343D 45%,#1A1C1E 100%);
  /* the steel alloy at text-safe brightness (hero H1 line 3, on --ground only): lightest #858E9A 3.22, horizon 17.3 */
  --chrome-text: linear-gradient(180deg,#5A6270 0%,#858E9A 22%,#6E7784 38%,#2B313A 54%,#14181E 58%,#2E343D 66%,#4A515C 86%,#6E7784 100%);
  --chrome-pill: linear-gradient(180deg,#5F6876 0%,#3C434D 48%,#2B313A 52%,#4A515C 100%); --chrome-ink: #FFFFFF;
  --chrome-edge: inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.25);
  /* raised by day: a filter (a text-shadow would show through background-clip:text glyphs) */
  --raise: drop-shadow(0 1px 1px rgba(20,24,30,.22)) drop-shadow(0 3px 6px rgba(20,24,30,.08));
  /* the lockup by day: Steel, raised (DIRECTION-r2 4.1) */
  --lk-shadow-s: drop-shadow(0 1px 1px rgba(20,24,30,.28)) drop-shadow(0 3px 6px rgba(20,24,30,.14));
  --lk-shadow-l: drop-shadow(0 2px 2px rgba(20,24,30,.26)) drop-shadow(0 6px 12px rgba(20,24,30,.14));
  /* buttons */
  --btn: #2B313A; --btn-ink: #FFFFFF;  --btn-hover: #3C434D;
  --btn-grad: linear-gradient(180deg,color-mix(in oklab,var(--btn) 86%,white) 0%,var(--btn) 55%,color-mix(in oklab,var(--btn) 84%,black) 100%);
  --btn-edge: inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(20,24,30,.25);
  --btn-ghost-grad: linear-gradient(180deg,#FFFFFF 0%,#F1F3F6 100%);
  --btn-ghost-edge: inset 0 1px 0 #FFFFFF,0 0 0 1px var(--line-strong),0 1px 2px rgba(20,24,30,.10);
  /* depth */
  --ring: 0 0 0 1px rgba(32,38,52,.08);
  --shadow-1: var(--ring),0 1px 2px rgba(32,38,52,.06);
  --shadow-menu: var(--ring),0 4px 8px -4px rgba(32,38,52,.08),0 16px 24px -8px rgba(32,38,52,.10);
  --shadow-modal: var(--ring),0 8px 16px -4px rgba(32,38,52,.08),0 24px 32px -8px rgba(32,38,52,.12);
  /* the Capstone frame's edge comes from the page AROUND it (a device on paper by day) */
  --frame-edge: 0 0 0 1px #252729, var(--shadow-modal);
  --nav-bg: rgba(250,252,254,.86);
  --scrim: linear-gradient(180deg,transparent,rgba(13,14,16,.72));
  --dot: #DCDEE1;
  --solid-bg: #1A1C1E; --solid-ink: #FFFFFF;
  --lk-rim: rgba(255,255,255,.55); --lk-edge: #0E1117;   /* the night recipe's rim and edge (only the night face uses them) */
  --vis-l: inline-flex; --vis-d: none;
  color-scheme: light;

  --font-display: 'Archivo Display','Archivo Display Fallback',system-ui,sans-serif;
  --font-figure: 'Archivo Figure','Archivo Figure Fallback',system-ui,sans-serif;
  --font-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ease-enter: cubic-bezier(.23,1,.32,1);
  --ease-shot: cubic-bezier(.22,.61,.36,1);
}

/* ---------- tokens: dark, chosen (any element can carry it: a night island) ---------- */
[data-theme="dark"] {
  --ground: #0D0E10;  --band: #131416;  --surface: #161719;  --surface-2: #1D1E20;
  --line: #252729;
  --line-strong: #66696E;
  --ink: #EEF0F3;  --ink-2: #CACCD0;  --ink-3: #9C9FA2;
  --ads: #5DB8CC;  --search: #D4A24C;  --search-mark: #D4A24C;  --conv: #F4F6F8;  --conv-base: #5F6875;
  --mark-base: #C9CED6;
  --offer: #A51C25;
  --crimson: #B4202B;
  --crimson-text: #FF5F5F;            /* approved 10/14: 6.49 / 6.19 / 6.03 / 5.60 on surface-2 */
  --crimson-line: #D22B3A;            /* graphics 3.81 / 3.64 / 3.54 */
  --crimson-soft: #3B1418; --crimson-soft-ink: #FF5F5F;   /* 5.43 */
  --crimson-metal: linear-gradient(180deg,#EE4A50 0%,#D22B3A 55%,#C02530 100%);   /* deeper than the link colour: OU crimson at 72px, not coral */
  --btn-crimson: linear-gradient(180deg,#D22B3A 0%,#C8232F 55%,#C02530 100%);
  --btn-crimson-hover: linear-gradient(180deg,#DA3540 0%,#D22B3A 55%,#C8232F 100%);
  --focus: #FF5F5F;
  --live: #3BD38A;  --pos: #5FE0A0;  --neg: #E8608E;  --warn: #F5B445;
  --pos-bg: rgba(95,224,160,.14); --neg-bg: rgba(232,96,142,.14);
  --data: #C9CED6;  --data-2: #646C7A;  --hist: .45;
  --rule: linear-gradient(90deg,#E9EDF2,#8E96A2 40%,#D5DAE1 70%,#9CA5B2);
  --rule-v: linear-gradient(180deg,#E9EDF2,#8E96A2 40%,#D5DAE1 70%,#9CA5B2);
  --metal-text: linear-gradient(180deg,#FFFFFF 0%,#E6EAEF 50%,#AEB6C1 100%);
  --chrome-text: linear-gradient(180deg,#FFFFFF 0%,#E6EAEF 30%,#AEB6C1 50%,#7C8591 55%,#8C95A1 62%,#D8DDE4 84%,#F3F5F8 100%);
  --chrome-pill: linear-gradient(180deg,#F6F7F9 0%,#DCE1E7 48%,#C2C9D2 52%,#E6EAEF 100%); --chrome-ink: #16181B;
  --chrome-edge: inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.45);
  --raise: none;  --lk-shadow-s: none;  --lk-shadow-l: none;
  --btn: #D5DAE1; --btn-ink: #16181B;  --btn-hover: #E3E7EC;
  --btn-grad: linear-gradient(180deg,color-mix(in oklab,var(--btn) 86%,white) 0%,var(--btn) 55%,color-mix(in oklab,var(--btn) 84%,black) 100%);
  --btn-edge: inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.5);
  --btn-ghost-grad: linear-gradient(180deg,#2A2C30 0%,#1D1E21 100%);
  --btn-ghost-edge: inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px var(--line-strong),0 1px 2px rgba(0,0,0,.4);
  --ring: 0 0 0 1px rgba(255,255,255,.08);
  --shadow-1: inset 0 1px rgba(255,255,255,.06);
  --shadow-menu: var(--ring),inset 0 1px rgba(255,255,255,.06),0 16px 40px -8px rgba(0,0,0,.45);
  --shadow-modal: var(--ring),inset 0 1px rgba(255,255,255,.06),0 24px 56px -8px rgba(0,0,0,.55);
  --frame-edge: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px rgba(255,255,255,.06), 0 24px 56px -8px rgba(0,0,0,.55);
  --nav-bg: rgba(13,14,16,.86);
  --dot: #3A3D42;
  --solid-bg: #EEF0F3; --solid-ink: #16181B;
  --vis-l: none; --vis-d: inline-flex;
  color-scheme: dark;
}
/* ---------- tokens: dark, from the device (same block, second time) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D0E10;  --band: #131416;  --surface: #161719;  --surface-2: #1D1E20;
    --line: #252729;
    --line-strong: #66696E;
    --ink: #EEF0F3;  --ink-2: #CACCD0;  --ink-3: #9C9FA2;
    --ads: #5DB8CC;  --search: #D4A24C;  --search-mark: #D4A24C;  --conv: #F4F6F8;  --conv-base: #5F6875;
    --mark-base: #C9CED6;
    --offer: #A51C25;
    --crimson: #B4202B;
    --crimson-text: #FF5F5F;
    --crimson-line: #D22B3A;
    --crimson-soft: #3B1418; --crimson-soft-ink: #FF5F5F;
    --crimson-metal: linear-gradient(180deg,#EE4A50 0%,#D22B3A 55%,#C02530 100%);
    --btn-crimson: linear-gradient(180deg,#D22B3A 0%,#C8232F 55%,#C02530 100%);
    --btn-crimson-hover: linear-gradient(180deg,#DA3540 0%,#D22B3A 55%,#C8232F 100%);
    --focus: #FF5F5F;
    --live: #3BD38A;  --pos: #5FE0A0;  --neg: #E8608E;  --warn: #F5B445;
    --pos-bg: rgba(95,224,160,.14); --neg-bg: rgba(232,96,142,.14);
    --data: #C9CED6;  --data-2: #646C7A;  --hist: .45;
    --rule: linear-gradient(90deg,#E9EDF2,#8E96A2 40%,#D5DAE1 70%,#9CA5B2);
    --rule-v: linear-gradient(180deg,#E9EDF2,#8E96A2 40%,#D5DAE1 70%,#9CA5B2);
    --metal-text: linear-gradient(180deg,#FFFFFF 0%,#E6EAEF 50%,#AEB6C1 100%);
    --chrome-text: linear-gradient(180deg,#FFFFFF 0%,#E6EAEF 30%,#AEB6C1 50%,#7C8591 55%,#8C95A1 62%,#D8DDE4 84%,#F3F5F8 100%);
    --chrome-pill: linear-gradient(180deg,#F6F7F9 0%,#DCE1E7 48%,#C2C9D2 52%,#E6EAEF 100%); --chrome-ink: #16181B;
    --chrome-edge: inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.45);
    --raise: none;  --lk-shadow-s: none;  --lk-shadow-l: none;
    --btn: #D5DAE1; --btn-ink: #16181B;  --btn-hover: #E3E7EC;
    --btn-grad: linear-gradient(180deg,color-mix(in oklab,var(--btn) 86%,white) 0%,var(--btn) 55%,color-mix(in oklab,var(--btn) 84%,black) 100%);
    --btn-edge: inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.5);
    --btn-ghost-grad: linear-gradient(180deg,#2A2C30 0%,#1D1E21 100%);
    --btn-ghost-edge: inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px var(--line-strong),0 1px 2px rgba(0,0,0,.4);
    --ring: 0 0 0 1px rgba(255,255,255,.08);
    --shadow-1: inset 0 1px rgba(255,255,255,.06);
    --shadow-menu: var(--ring),inset 0 1px rgba(255,255,255,.06),0 16px 40px -8px rgba(0,0,0,.45);
    --shadow-modal: var(--ring),inset 0 1px rgba(255,255,255,.06),0 24px 56px -8px rgba(0,0,0,.55);
    --frame-edge: 0 0 0 1px rgba(255,255,255,.08), inset 0 1px rgba(255,255,255,.06), 0 24px 56px -8px rgba(0,0,0,.55);
    --nav-bg: rgba(13,14,16,.86);
    --dot: #3A3D42;
    --solid-bg: #EEF0F3; --solid-ink: #16181B;
    --vis-l: none; --vis-d: inline-flex;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  font-feature-settings: "cv05", "cv08"; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 112px 0; }
.ground { background: var(--ground); }
.band { background: var(--band); }
@media (max-width: 767px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 72px 0; }
}
/* mockup switch: parts that exist only at one crimson level */
.bold-only { display: none !important; }
[data-colour="bold"] .bold-only { display: revert !important; }
[data-colour="bold"] .btn.bold-only { display: inline-flex !important; }

/* ---------- the marks ---------- */
.cap { display: block; flex: none; }
.cap path { fill: var(--mark-base); }
.cap-ads .c-left { fill: var(--ads); }
.cap-search .c-blade { fill: var(--search-mark); }
.cap-conv path { fill: var(--conv-base); }
.cap-conv .c-right { fill: var(--conv); }
.cap-all .c-left { fill: var(--ads); }
.cap-all .c-blade { fill: var(--search-mark); }
.cap-all .c-right { fill: var(--conv); }
/* product addresses: --p for marks and rules, --pt for text */
.p-ads { --p: var(--ads); --pt: var(--ads); }
.p-search { --p: var(--search-mark); --pt: var(--search); }
.p-conv { --p: var(--conv); --pt: var(--conv); }

/* the lockup: night chrome, day Steel (or Mirror on the switch), flat under 48px; switched by token, no re-render */
.lockup { display: block; overflow: visible; }
.lockup .lk-night { display: var(--vis-d); }
.lockup .lk-rim { fill: var(--lk-rim); }
.lockup .lk-edge { fill: var(--lk-edge); }
.lockup .lk-steel { display: var(--vis-l); }
.lockup .lk-bevel { fill: #14181E; }
.lockup .lk-lit { fill: #FFFFFF; fill-opacity: .9; }
.lockup .lk-mirror { display: none; }
.lockup .lk-mstroke { fill: #2B313A; stroke: #2B313A; }
[data-logo="mirror"] .lockup .lk-steel { display: none; }
[data-logo="mirror"] .lockup .lk-mirror { display: var(--vis-l); }
.lockup .lk-flat { display: none; fill: var(--mark-base); }

/* ---------- shared pieces ---------- */
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 600 15px/1.4 var(--font-body); color: var(--ink-2); }
.kicker .k-rule { display: block; flex: none; width: 24px; height: 3px; border-radius: 2px; background: var(--rule); }
.kicker .k-rule.k-crimson { background: var(--crimson-line); }
.kicker.center { justify-content: center; }

.metal, .chrome-t, .crimson-m {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.metal { background-image: var(--metal-text); }
.chrome-t { background-image: var(--chrome-text); }
.crimson-m { background-image: var(--crimson-metal); }   /* 24px and up only */
.quiet { color: var(--ink-2); }
.acc-ads { color: var(--ads); }
.acc-search { color: var(--search); }
.acc-conv { color: var(--conv); }

.h1, .h2 { filter: var(--raise); }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 1.5rem + 2.4vw, 56px); line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
.intro { margin-top: 24px; max-width: 42rem; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sec-head { margin-bottom: 56px; max-width: 48rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .intro { margin-left: auto; margin-right: auto; max-width: 40rem; }
@media (max-width: 767px) {
  .intro { font-size: 17px; }
  .sec-head { margin-bottom: 40px; }
}

.panel { border-radius: 12px; background: var(--rule) top / 100% 3px no-repeat, var(--surface); box-shadow: var(--shadow-1); }

/* buttons with a body; every one a pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; line-height: 1;
  transition: transform 100ms var(--ease-enter); -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--btn-grad); color: var(--btn-ink); box-shadow: var(--btn-edge); }
.btn-ghost { background: var(--btn-ghost-grad); color: var(--ink); box-shadow: var(--btn-ghost-edge); }
.btn-chrome { background: var(--chrome-pill); color: var(--chrome-ink); box-shadow: var(--chrome-edge); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--btn-hover) 86%, white) 0%, var(--btn-hover) 55%, color-mix(in oklab, var(--btn-hover) 84%, black) 100%); }
  .btn-ghost:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px var(--ink), 0 1px 2px rgba(20,24,30,.10); }
  .btn-chrome:hover { filter: brightness(1.04); }
}
/* Bold (DIRECTION-r2 3.3.1): every bodied primary pill is crimson; chrome stays chrome, ghost stays ghost */
[data-colour="bold"] .btn-primary { background: var(--btn-crimson); color: #FFFFFF; box-shadow: var(--btn-edge); }
@media (hover: hover) and (pointer: fine) {
  [data-colour="bold"] .btn-primary:hover { background: var(--btn-crimson-hover); }
}
.btn-40 { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-44 { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-48 { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-52 { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-56 { height: 56px; padding: 0 28px; font-size: 17px; }
.btn-60 { height: 60px; padding: 0 32px; font-size: 18px; gap: 10px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: 600 12px/1 var(--font-body); white-space: nowrap; }
.chip-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip-solid { background: var(--solid-bg); color: var(--solid-ink); }
.chip-pos { background: var(--pos-bg); color: var(--pos); }
.chip-offer { background: var(--crimson-soft); color: var(--crimson-soft-ink); }
.chip .ico { width: 12px; height: 12px; stroke-width: 2.5; }
.live { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-body); color: var(--live); white-space: nowrap; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.tri { display: inline-block; flex: none; width: 8px; height: 7px; margin-right: 4px; fill: currentColor; vertical-align: .05em; }
.chip .tri { margin-right: 0; }

/* parent links (DIRECTION-r2 3.2): ink text, a 1.5px crimson underline at offset 4; hover turns the text crimson.
   Links in a product's voice keep the product colour (.tlink). */
.plink, .legal-links a { text-decoration: underline; text-decoration-color: var(--crimson-line); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.plink:hover, .legal-links a:hover { color: var(--crimson-text); }

/* ---------- the Capstone frame (DIRECTION-r2 7.2): a night object in both modes ---------- */
.frame { position: relative; margin: 0; border-radius: 12px; background: #0D0E10; overflow: hidden; box-shadow: var(--frame-edge); }
.frame-lg { border-radius: 16px; }
.frame-in { position: relative; background: #0D0E10; }
.frame-in::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 3px; background: var(--p, var(--rule)); }
.f-ads .frame-in { --p: var(--ads); }
.f-search .frame-in { --p: var(--search-mark); }
.f-conv .frame-in { --p: var(--conv); }
.frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 43px; padding: 3px 16px 0; background: #161719; border-bottom: 1px solid #252729; }
.fb-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 600 13px/1 var(--font-body); color: #EEF0F3; white-space: nowrap; }
.fb-r { min-width: 0; font: 500 13px/1.2 var(--font-body); color: #9C9FA2; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot { position: relative; overflow: hidden; background: #0D0E10; }
.shot img { display: block; width: 100%; height: auto; transform-origin: var(--fo, 30% 20%); }

/* the hover (the reference's move, our tokens): a slow 3% zoom clipped by the frame. Lift only where a click follows
   (cards, in page CSS). Mouse only, never under reduced motion; on touch nothing moves and every crop reads at rest. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .shot img, .card-shot img { transition: transform .5s var(--ease-shot); }
  .frame:hover .shot img { transform: scale(1.03); }
}

/* ---------- frame: nav ---------- */
.nav { position: fixed; top: 16px; left: 16px; right: 16px; z-index: 50; pointer-events: none; }
.nav-shell {
  position: relative; pointer-events: auto; max-width: 1200px; height: 80px; margin: 0 auto;
  padding: 0 12px 0 16px; display: flex; align-items: center; gap: 24px; border-radius: 16px;
}
.nav-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px;
  background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-menu);
  opacity: 0; transition: opacity 200ms var(--ease-enter);
}
.nav.scrolled .nav-shell::before, .nav.open .nav-shell::before { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .nav-shell::before { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav-logo { display: flex; align-items: center; height: 80px; padding: 12px 0; border-radius: 8px; flex: none; }
.nav-logo .lockup { width: 91px; height: 56px; filter: var(--lk-shadow-s); }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links > a.nl, .dd-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px;
  font: 500 15px/1 var(--font-body); color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-links > a.nl:hover, .dd-trigger:hover, .dd-trigger[aria-expanded="true"] { color: var(--ink); }
/* the current page: a 2 x 16 crimson mark under the label */
.nav-links > a.nl[aria-current="page"], .dd-trigger[data-current] { color: var(--ink); }
.nav-links > a.nl[aria-current="page"]::after, .dd-trigger[data-current]::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 16px; height: 2px; border-radius: 1px; background: var(--crimson-line); }
.dd-trigger .ico { width: 14px; height: 14px; transition: transform 200ms var(--ease-enter); }
.dd-trigger[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* Round 3: "The Arsenal" as a split control. The label is a link (same type as the other nav links); the chevron is
   its own 28 x 32 button that shows a pill and a 1px line-strong edge (3:1) when hovered, focused or open, so the two
   targets read as two. The current page mark sits under the label (aria-current="page" on /arsenal/). */
.dd-split { display: inline-flex; align-items: center; gap: 2px; }
.dd-link {
  position: relative; display: inline-flex; align-items: center; height: 40px; border-radius: 6px;
  font: 500 15px/1 var(--font-body); color: var(--ink-2); text-decoration: none;
}
.dd-link:hover, .dd-split:has(.dd-chev[aria-expanded="true"]) .dd-link, .dd-link[aria-current="page"] { color: var(--ink); }
.dd-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 16px; height: 2px; border-radius: 1px; background: var(--crimson-line); }
.dd-chev {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; margin-right: -6px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.dd-chev:hover, .dd-chev:focus-visible, .dd-chev[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dd-chev .ico { width: 14px; height: 14px; transition: transform 200ms var(--ease-enter); }
.dd-chev[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* disclosure panels (WAI-ARIA disclosure navigation, not role=menu); opened by shared-r2/js/site.js */
.dd { position: relative; }
.dd-menu {
  position: absolute; top: 100%; padding-top: 24px; z-index: 2;
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity 140ms var(--ease-enter), transform 140ms var(--ease-enter), visibility 0s linear 140ms;
}
.dd-menu[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease-enter), transform 200ms var(--ease-enter), visibility 0s linear 0s; }
.dd-menu-ars { left: -20px; width: 400px; }
.dd-menu-op { right: -8px; width: 328px; transform-origin: top right; }
.dd-card { position: relative; overflow: hidden; border-radius: 12px; padding: 8px; background: var(--rule) top / 100% 3px no-repeat, var(--surface); box-shadow: var(--shadow-menu); }

/* The Arsenal rows: [mark | name + line]; hover and focus fill in 0ms, fade out over 150ms, plus a product rule */
.ar-rows { display: flex; flex-direction: column; gap: 2px; }
.ar-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px;
  min-height: 64px; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  transition: background-color 150ms linear, box-shadow 150ms linear;
}
.ar-row .cap { justify-self: center; }
.ar-row:hover, .ar-row:focus-visible { background-color: var(--surface-2); box-shadow: inset 3px 0 0 var(--p); transition: none; }
.ar-txt { min-width: 0; }
.ar-n { display: block; font: 600 15px/1.3 var(--font-body); color: var(--pt); }
.ar-l { display: block; margin-top: 2px; font: 400 14px/1.4 var(--font-body); color: var(--ink-2); }
.ar-all {
  position: relative; display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 9px; padding: 0 12px;
  border-radius: 8px; font: 600 14px/1 var(--font-body); color: var(--ink); text-decoration: none;
}
.ar-all::before { content: ""; position: absolute; left: 4px; right: 4px; top: -5px; height: 1px; background: var(--line); }
.ar-all .ico { width: 16px; height: 16px; transition: transform 150ms var(--ease-enter); }
.ar-all:hover { background: var(--surface-2); }
.ar-all:hover .ico { transform: translateX(2px); }
/* Bold only: the offer foot (the gated banner line) */
.dd-offer { margin: 8px -8px -8px; padding: 12px 20px 14px; background: var(--crimson-soft); color: var(--crimson-soft-ink); font: 500 14px/1.45 var(--font-body); }
.dd-offer strong { font-weight: 700; }

/* Other Products */
.op-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.op-row:hover { background: var(--surface-2); }
.op-t { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.op-b { font: 400 13px/1.35 var(--font-body); color: var(--ink-3); }
.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* the theme door */
.door {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2);
  font: 600 13px/1 var(--font-body); cursor: pointer; white-space: nowrap;
}
.door:hover { color: var(--ink); border-color: var(--ink); }
.door .door-l { display: var(--vis-l); align-items: center; gap: 6px; }
.door .door-d { display: var(--vis-d); align-items: center; gap: 6px; }
.door .ico { width: 16px; height: 16px; }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; background: transparent; border: 0; color: var(--ink); cursor: pointer; }
.menu-btn .ico { width: 22px; height: 22px; }
.menu-btn .i-close { display: none; }
.nav.open .menu-btn .i-open { display: none; }
.nav.open .menu-btn .i-close { display: inline-block; }

/* the phone sheet: The Arsenal expanded by default, then the plain links, Other Products collapsed, Sign up */
.sheet {
  pointer-events: auto; max-width: 1200px; margin: 8px auto 0; padding: 8px 12px 16px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-menu);
  max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain;
}
.sheet[hidden] { display: none; }
.s-gbtn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 8px;
  border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 16px/1.2 var(--font-body); text-align: left; cursor: pointer;
}
.s-gbtn .ico { width: 18px; height: 18px; color: var(--ink-2); transition: transform 200ms var(--ease-enter); }
.s-gbtn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.s-gbody[hidden] { display: none; }
.s-gbody { padding-bottom: 8px; }
.sheet .ar-row { padding: 10px 8px; }
.sheet .ar-all { padding: 0 8px; }
.sheet .dd-offer { margin: 10px 0 0; border-radius: 8px; padding: 12px 14px; }
.sheet a.s-row { display: flex; align-items: center; min-height: 52px; padding: 0 8px; border-radius: 8px; font: 500 16px/1.2 var(--font-body); color: var(--ink); text-decoration: none; }
.sheet a.s-row:hover, .s-gbtn:hover { background: var(--surface-2); }
.sheet .s-group:first-child { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.sheet .s-row + .s-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.sheet .s-sub { padding-left: 20px; }
.sheet > .btn { width: 100%; margin-top: 12px; }
/* Round 3: the sheet's "The Arsenal" row is a link to the page, with its own 44px expand button for the three
   (an outlined square, line-strong edge 3:1 on the surface, so it reads as a second target) */
.s-head { display: flex; align-items: center; gap: 8px; }
.sheet a.s-link {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; min-height: 52px; padding: 0 8px; border-radius: 8px;
  font: 600 16px/1.2 var(--font-body); color: var(--ink); text-decoration: none;
}
.sheet a.s-link:hover { background: var(--surface-2); }
.sheet a.s-link[aria-current="page"]::after { content: ""; position: absolute; left: 8px; bottom: 10px; width: 16px; height: 2px; border-radius: 1px; background: var(--crimson-line); }
.s-exp {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 4px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); cursor: pointer;
}
.s-exp:hover { background: var(--surface-2); }
.s-exp .ico { width: 18px; height: 18px; transition: transform 200ms var(--ease-enter); }
.s-exp[aria-expanded="true"] .ico { transform: rotate(180deg); }

@media (max-width: 1023px) {
  .nav { top: 12px; left: 12px; right: 12px; }
  .nav-shell { height: 64px; padding: 0 8px 0 14px; gap: 8px; }
  .nav-logo { height: 64px; padding: 8px 0; }
  /* 48px on the phone bar: chrome by night, Steel by day (the 48px threshold holds; flat only under 48) */
  .nav-logo .lockup { width: 78px; height: 48px; }
  .nav-links, .nav-signup { display: none; }
  .nav-actions { margin-left: auto; gap: 4px; }
  .door { height: 44px; min-width: 44px; padding: 0 14px; }
  .menu-btn { display: inline-flex; }
}

/* ---------- frame: footer (band) ---------- */
.foot { padding: 72px 0 104px; border-top: 1px solid var(--line); background: var(--band); }
.foot-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 48px; }
.foot-logo { display: inline-flex; border-radius: 8px; }
.foot-logo .lockup { width: 156px; height: 96px; filter: var(--lk-shadow-l); }
.foot-tag { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.foot h3 { margin-bottom: 16px; font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.foot h3.next { margin-top: 32px; }
.foot ul { display: flex; flex-direction: column; gap: 12px; }
.foot li { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.foot li a { color: var(--ink-2); text-decoration: none; }
.foot li a:hover { color: var(--crimson-text); text-decoration: underline; text-decoration-color: var(--crimson-line); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.foot li a.with-cap { display: inline-flex; align-items: center; gap: 8px; vertical-align: top; }
.foot .addr { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal p { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.legal-links a { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.seg { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 13px/1 var(--font-body); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--btn-grad); color: var(--btn-ink); box-shadow: var(--btn-edge); }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .foot { padding: 56px 0 104px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .legal { flex-direction: column; align-items: flex-start; }
  .seg { height: 44px; padding: 3px; }
  .seg button { height: 38px; padding: 0 16px; }
}

/* ---------- frame: the Atlas bubble ---------- */
.atlas {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-ghost-grad); box-shadow: var(--btn-ghost-edge), var(--shadow-menu);
  font: 600 15px/1 var(--font-body); color: var(--ink);
}
.atlas .ico { width: 20px; height: 20px; stroke-width: 1.75; }
.atlas.compact { width: 56px; height: 56px; padding: 0; justify-content: center; }
.atlas.compact .atlas-word { display: none; }
@media (max-width: 767px) {
  .atlas { right: 16px; bottom: 16px; transition: opacity 200ms var(--ease-enter), visibility 0s linear 0s; }
  .atlas.compact { opacity: 0; visibility: hidden; transition: opacity 150ms var(--ease-enter), visibility 0s linear 150ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav-shell::before, .atlas, .atlas.compact, .dd-trigger .ico, .dd-chev .ico, .s-gbtn .ico, .s-exp .ico, .ar-all .ico { transition: none; }
  /* the panels: a 120ms fade only */
  .dd-menu, .dd-menu[data-open] { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .dd-menu[data-open] { transition: opacity 120ms linear, visibility 0s linear 0s; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}