/* =========================================================
   CorrSens design system. Brand guidelines v1.0.
   Cement ground, Graphite structure, one Signal Blue for the reading.
   Blue always means the same thing: a finding, an action, the answer.
   Schibsted Grotesk for words, IBM Plex Mono for measurements.
   ========================================================= */

:root {
  /* Brand palette, exact values from the board */
  --graphite: #1c1f23;
  --cement: #eeede9;
  --blue: #1f6bff;
  --white: #ffffff;
  --concrete: #c9c8c2;
  --aggregate: #8d8c86;
  --mist: #dce6ff;
  --brand-line: #d6d5cf;

  /* Roles the stylesheets actually use. Literal hex, not var() aliases: twin.js reads
     several of these with getPropertyValue and hands them to THREE.Color, which cannot
     parse an unresolved var() reference. */
  --paper: #eeede9;            /* Cement. The main light ground, warmer than white */
  --surface: #ffffff;          /* cards, panels, the viewer stage */
  --ink: #1c1f23;              /* Graphite. Headings, the structure half of the mark */
  --ink-2: #4a4e55;            /* body copy: between brand Text and Aggregate, so
                                  hierarchy still reads against Graphite headings */
  /* Brand Aggregate (#8D8C86) is only 2.88:1 on Cement, which fails WCAG AA for the
     11px labels it is specified for. This is Aggregate darkened to 4.77:1, same warm
     grey family. --aggregate keeps the exact brand value for non-text use. */
  --ink-3: #696862;            /* captions and labels */
  --rule: #d6d5cf;             /* Line */
  --rule-2: #c9c8c2;           /* Concrete */
  --wash: #e5e4df;             /* hover surface, one step down from Cement */
  --action: #1f6bff;           /* Signal Blue */

  --display: "Schibsted Grotesk", system-ui, sans-serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --nav-h: 58px;          /* the pill itself */
  --nav-top: 14px;        /* gap from the top of the viewport */
  --nav-total: 86px;      /* pill + gap, used to clear the fixed nav */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  padding-top: var(--nav-total);   /* the pill is fixed, so the page starts below it */
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--action); color: #fff; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

/* ---------- type ----------
   ExtraBold and Bold for headlines, SemiBold for emphasis, Regular for text. */
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.06; }
.h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.9rem); font-weight: 800; letter-spacing: -0.038em; }
.h2 { font-size: clamp(1.8rem, 1.45rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.032em; }
.h3 { font-size: clamp(1.25rem, 1.1rem + 0.65vw, 1.6rem); font-weight: 700; letter-spacing: -0.025em; }
.h4 { font-size: clamp(1.02rem, 0.98rem + 0.28vw, 1.2rem); font-weight: 600; letter-spacing: -0.015em; }
/* Blue marks the finding, the answer. Used on one word, never decoratively. */
.em-read { font-style: normal; color: var(--action); }

.lede { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem); color: var(--ink-2); max-width: 58ch; }
.body { color: var(--ink-2); max-width: 62ch; }
.small { font-size: 0.9375rem; color: var(--ink-2); }

.label {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.label--ink { color: var(--ink); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 120px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
/* The offset rule: a graphite hairline with a short blue line stepped below it.
   The mark reduced to a line, so section breaks carry the brand idea.
   The blue step aligns to the content edge, not the viewport edge. */
.section--line { border-top: 1px solid var(--rule); position: relative; }
.section--line::after {
  content: ""; position: absolute; top: 3px; height: 2px; width: 52px;
  left: max(var(--gutter), calc(50% - var(--maxw) / 2 + var(--gutter)));
  background: var(--action);
}
.stack { display: flex; flex-direction: column; }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Section head: label, title, optional link. Used on every page. */
.head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-bottom: clamp(28px, 4vw, 52px); }
.head__title { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
.head__title .h2 { max-width: 20ch; }
.head__title .lede { margin-top: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid transparent; position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.4s var(--spring);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%); transition: transform 0.45s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid::before { background: var(--action); }
.btn--solid:hover::before { transform: translateY(0); }
.btn--line { border-color: var(--rule-2); color: var(--ink); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: #fff; border-color: var(--ink); }
.btn--line:hover::before { transform: translateY(0); }
.btn__arrow { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with a rule that wipes in */
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9375rem; position: relative; }
.tlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--spring); }
.tlink:hover svg { transform: translateX(3px); }
.tlink--action { color: var(--action); }

/* =========================================================
   Nav. A floating black pill, with one dark panel that grows out of it and
   resizes as you move between menus.
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: var(--nav-top) var(--gutter) 0;
  pointer-events: none;                 /* the page stays reachable beside the pill */
}
.nav__shell { position: relative; max-width: var(--maxw); margin: 0 auto; pointer-events: none; }

/* ---- the pill ---- */
.nav__pill {
  position: relative; z-index: 2; pointer-events: auto;
  height: var(--nav-h); display: flex; align-items: center; gap: clamp(10px, 2vw, 28px);
  padding: 0 8px 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  box-shadow: 0 2px 8px -2px rgba(10, 10, 10, 0.2), 0 16px 40px -24px rgba(10, 10, 10, 0.5);
  transition: border-radius 0.5s var(--ease), box-shadow 0.4s var(--ease), transform 0.5s var(--ease);
}
.nav.is-stuck .nav__pill { box-shadow: 0 2px 10px -2px rgba(10, 10, 10, 0.28), 0 22px 50px -26px rgba(10, 10, 10, 0.6); }
/* When a menu is open the bottom corners relax, so the pill and the panel read as one shape. */
.nav[data-open] .nav__pill, .nav.is-open .nav__pill { border-radius: 28px 28px 14px 14px; }

/* The horizontal lockup is the default mark everywhere. Never redraw or recolour it. */
.nav__brand { display: inline-flex; align-items: center; margin-right: auto; }
.nav__brand img { width: auto; height: 22px; transition: opacity 0.4s var(--ease); }
.nav__brand:hover img { opacity: 0.82; }

/* ---- triggers, with a highlight that slides between them ---- */
.nav__menu { display: flex; align-items: center; gap: 2px; position: relative; }
.nav__hl {
  position: absolute; left: 0; top: 50%; height: 34px; width: 0; margin-top: -17px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  opacity: 0; transform-origin: center;
  transition: transform 0.5s var(--ease), width 0.5s var(--ease), opacity 0.3s var(--ease), background-color 0.4s;
}
.nav.has-hl .nav__hl { opacity: 1; }
.nav[data-open] .nav__hl { background: rgba(255, 255, 255, 0.18); }
.nav__link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.66); transition: color 0.3s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--white); }
.nav__link .caret { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: 0.6; transition: transform 0.45s var(--ease), opacity 0.3s; }
.nav__link[aria-expanded="true"] .caret { transform: rotate(180deg); opacity: 1; }

/* ---- actions ---- */
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__signin { font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.66); padding: 0 12px; transition: color 0.3s; }
.nav__signin:hover { color: var(--white); }
.nav__cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.35s var(--ease), transform 0.4s var(--spring);
}
.nav__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--action); transform: translateY(101%); transition: transform 0.45s var(--ease); }
.nav__cta:hover { color: #fff; }
.nav__cta:hover::before { transform: translateY(0); }
.nav__cta:active { transform: scale(0.97); }

/* ---- burger ---- */
.nav__burger { display: none; width: 40px; height: 40px; position: relative; border-radius: 999px; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--white); border-radius: 2px; transition: transform 0.5s var(--spring), width 0.4s var(--ease); }
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 23px; width: 11px; }
.nav.is-open .nav__burger span { width: auto; left: 11px; right: 11px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ---- the panel ----
   It sits under the pill, keeps the same dark surface, and grows out of whichever
   trigger opened it: transform-origin is set from JS to that trigger's centre. */
.nav__mega {
  position: absolute; top: calc(100% - 14px); left: 0; z-index: 1; pointer-events: none;
  width: max-content; max-width: 100%;
  background: var(--ink); color: var(--white);
  border-radius: 22px;
  box-shadow: 0 30px 70px -40px rgba(10, 10, 10, 0.7);
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transform-origin: 120px top;
  transition:
    grid-template-rows 0.55s var(--ease),
    opacity 0.3s var(--ease),
    transform 0.55s var(--spring),
    width 0.5s var(--ease),
    left 0.5s var(--ease);
}
.nav[data-open] .nav__mega, .nav.is-open .nav__mega {
  pointer-events: auto;
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}
.nav__mega-clip { overflow: hidden; min-height: 0; }
.nav__mega-inner { padding: clamp(18px, 2vw, 26px); }

.megapage { display: none; }
.megapage.is-on { display: block; }
.megapage__title { display: none; }
/* Columns size to their content, so each menu has its own width and the panel
   morphs between them rather than sitting at one fixed size. */
.megapage__grid { display: grid; grid-template-columns: max-content max-content; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.megapage__list { display: grid; gap: 2px; align-content: start; min-width: 290px; }

/* Each row: an arrow that slides in, over a surface that lifts on hover. */
.megaitem {
  display: block; padding: 13px 16px; border-radius: 14px; position: relative;
  transition: background-color 0.35s var(--ease);
}
.megaitem::before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: var(--action); transform: scaleY(0); transition: transform 0.4s var(--ease);
}
.megaitem:hover { background: rgba(255, 255, 255, 0.07); }
.megaitem:hover::before, .megaitem[aria-current="page"]::before { transform: scaleY(1); }
.megaitem__t { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.025em; color: var(--white); }
.megaitem__t svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.45s var(--spring); }
.megaitem:hover .megaitem__t svg { opacity: 1; transform: none; }
.megaitem__d { display: block; margin-top: 3px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.46); max-width: 38ch; line-height: 1.5; }

/* Contextual column, set off by a hairline rather than a box. */
.megaside { border-left: 1px solid rgba(255, 255, 255, 0.13); padding-left: clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 9px; align-items: flex-start; width: 27ch; }
.megaside__t { font-family: var(--display); font-size: 1rem; letter-spacing: -0.02em; color: var(--white); }
.megaside__p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.46); line-height: 1.55; }
.megaside__line { font-family: var(--display); font-size: 1rem; letter-spacing: -0.02em; color: var(--white); transition: color 0.3s; }
.megaside__line:hover { color: var(--action); }
.megaside__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 0.875rem; font-weight: 600; color: var(--action); }
.megaside__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.4s var(--spring); }
.megaside__cta:hover svg { transform: translateX(4px); }
.megaside__all { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); transition: color 0.3s; }
.megaside__all:hover { color: var(--white); }
.megaside__all svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 0.4s var(--spring); }
.megaside__all:hover svg { transform: translateX(3px); }

.nav__mega-foot { display: none; }

/* Content arrives just behind the panel, each row a beat after the last. */
.megapage.is-on .megaitem,
.megapage.is-on .megaside > * { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
.nav:is([data-open], .is-open) .megapage.is-on .megaitem,
.nav:is([data-open], .is-open) .megapage.is-on .megaside > * {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease), filter 0.45s var(--ease);
}
.nav:is([data-open], .is-open) .megapage.is-on .megaitem:nth-child(1) { transition-delay: 0.1s; }
.nav:is([data-open], .is-open) .megapage.is-on .megaitem:nth-child(2) { transition-delay: 0.15s; }
.nav:is([data-open], .is-open) .megapage.is-on .megaitem:nth-child(3) { transition-delay: 0.2s; }
.nav:is([data-open], .is-open) .megapage.is-on .megaside > *:nth-child(1) { transition-delay: 0.16s; }
.nav:is([data-open], .is-open) .megapage.is-on .megaside > *:nth-child(2) { transition-delay: 0.2s; }
.nav:is([data-open], .is-open) .megapage.is-on .megaside > *:nth-child(3) { transition-delay: 0.24s; }
.nav:is([data-open], .is-open) .megapage.is-on .megaside > *:nth-child(4) { transition-delay: 0.28s; }

/* ---- scrim ---- */
.nav__scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 10, 10, 0.2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
/* pointer-events is switched separately from the fade, so a throttled tab that pauses
   mid-transition can never leave an invisible sheet swallowing clicks. */
body.nav-open .nav__scrim { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding: clamp(40px, 6vw, 72px) 0 28px; margin-top: auto; }
.foot__top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); padding-bottom: clamp(32px, 5vw, 56px); }
.foot__brand { display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.foot__brand-mark { display: inline-flex; align-items: center; }
.foot__brand-mark img { width: auto; height: 24px; transition: opacity 0.4s var(--ease); }
.foot__brand-mark:hover img { opacity: 0.75; }
.foot__col { display: flex; flex-direction: column; gap: 12px; }
.foot__col a { font-size: 0.9375rem; color: var(--ink-2); transition: color 0.3s, transform 0.35s var(--ease); width: fit-content; }
.foot__col a:hover { color: var(--ink); transform: translateX(3px); }
.foot__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--rule); }
.foot__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- reveal (one shared, restrained motion) ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(14px); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 0.06s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 0.12s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 0.18s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 0.24s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 0.3s; }

/* ---------- shared components ---------- */
/* Card that is a whole link */
.card {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--rule);
  position: relative; background: var(--surface);
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.card::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.card:hover { border-color: var(--rule-2); transform: translateY(-3px); }
.card:hover::after { transform: scaleX(1); }
.card__body { color: var(--ink-2); font-size: 0.9375rem; flex: 1; }
.card__foot { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); transition: color 0.35s; }
.card:hover .card__foot { color: var(--action); }
.card__foot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--spring); }
.card:hover .card__foot svg { transform: translateX(4px); }

/* Definition rows: label left, content right. Bentley-plain. */
.rows { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: minmax(140px, 1fr) 2.4fr; gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.row__k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 5px; }
.row__v { display: flex; flex-direction: column; gap: 6px; }
.row__v p { color: var(--ink-2); font-size: 0.9375rem; max-width: 64ch; }

/* Figure frame for visuals */
.frame { border: 1px solid var(--rule); background: var(--wash); position: relative; overflow: hidden; }
.frame__cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; border-top: 1px solid var(--rule); background: var(--surface); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  /* Below this width the panel becomes a drawer under the pill and every menu is
     shown at once, so there is no second tap to reach a page. */
  .nav__menu, .nav__actions .nav__signin, .nav__actions > .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__pill { padding-right: 6px; }

  .nav__mega { width: 100%; max-width: none; transform: translateY(-10px) scale(0.98); }
  .nav__mega-clip { max-height: calc(100svh - var(--nav-total) - 16px); overflow-y: auto; }

  .megapage { display: block; }
  .megapage + .megapage { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 6px; padding-top: 6px; }
  .megapage__title {
    display: block; padding: 12px 16px 2px; margin: 0;
    font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
  }
  .megapage__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .megaitem__t svg { opacity: 1; transform: none; margin-left: auto; color: rgba(255, 255, 255, 0.45); }
  .megaitem__d { max-width: none; }
  .megaside { display: none; }

  .nav__mega-foot {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
    padding: 16px 16px 6px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav__signin--drawer { display: block; padding: 6px 0; font-size: 1rem; }
  .nav__cta--drawer { justify-content: center; height: 46px; }

  /* Everything below is page layout, not nav. */
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / 3; }
}

@media (max-width: 560px) {
  /* Only the mark at phone width, cropped from the lockup by its own box. */
  .nav__brand img { height: 20px; }
  .nav__pill { padding-left: 14px; }
}

@media (max-width: 720px) {
  .head { grid-template-columns: 1fr; align-items: start; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .row__k { padding-top: 0; }
  .nav__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- closing call to action (shared by every page) ---------- */
.cta { border-top: 1px solid var(--rule); background: var(--ink); color: var(--white); padding: clamp(56px, 8vw, 110px) 0; }
.cta__inner { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 62ch; }
.cta .lede { color: rgba(255, 255, 255, 0.62); }
.cta .btn--solid { background: var(--white); color: var(--ink); }
.cta .btn--solid::before { background: var(--action); }
.cta .btn--solid:hover { color: #fff; }
.cta .btn--line { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.cta .btn--line::before { background: var(--white); }
.cta .btn--line:hover { color: var(--ink); border-color: var(--white); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }