/**
 * ODS token layer — the single source of every colour, size, duration and
 * easing in the product.
 *
 * Authority: ODS §1.1 ("Every color, size, duration, and easing in the codebase
 * resolves to a named token. Raw hex/px/ms values in component code are a Codex
 * FAIL"), §1.2 naming, §2.1 primitives, §2.2 semantic mapping, §3 typography,
 * §4 space/radius/elevation, §7.1 motion.
 *
 * ODS §1.1 also fixes the structure: "Two layers: primitive tokens (the palette
 * and scales, theme-independent) → semantic tokens (role-based, theme-aware).
 * Components consume semantic tokens only." and "Tokens are CSS custom
 * properties on `:root` (dark defaults) with a `[data-surface="light"]`
 * override scope per light section."
 */

:root {
  /* --- §2.1 primitives (frozen palette, DA §2.2) --------------------------- */
  --ox-graphite-900: #0f1318;
  --ox-graphite-850: #111826;
  --ox-graphite-800: #0f1522;
  --ox-graphite-700: #12181f;
  --ox-graphite-600: #141b24;
  --ox-slate-500: #2a3441;
  --ox-slate-600: #222b36;
  --ox-steel-300: #b8c4ce;
  --ox-steel-400: #9aa8b4;
  --ox-steel-500: #5f6b76;
  --ox-white-50: #f4f8fb;
  --ox-white-100: #edf2f7;
  --ox-paper-50: #f8fafc;
  --ox-paper-100: #ffffff;
  --ox-paper-200: #dce3ea;
  --ox-ink-900: #16202b;
  --ox-ink-600: #46535f;
  --ox-cyan-300: #67e8f9;
  --ox-cyan-400: #22d3ee;
  --ox-cyan-700: #0e7a8a;
  --ox-cyan-900: #062a31;
  --ox-glow-500: #1b4a56;
  --ox-blueprint-700: #1c2530;
  --ox-blueprint-400: #3a5a66;
  --ox-blueprint-200: #c9d6de;

  /* Functional — forms, Planner validation and system states only (§2.1). */
  --ox-success-400: #34d399;
  --ox-success-700: #0f7a5c;
  --ox-warn-400: #fbbf24;
  --ox-warn-700: #92600a;
  --ox-error-400: #f87171;
  --ox-error-700: #b42323;

  /* --- §2.2 semantic mapping — dark is the root theme --------------------- */
  --ox-bg: var(--ox-graphite-900);
  --ox-bg-card: var(--ox-graphite-700);
  --ox-bg-raised: var(--ox-graphite-600);
  --ox-border: var(--ox-slate-600);
  --ox-border-strong: var(--ox-slate-500);
  --ox-text: var(--ox-white-50);
  --ox-text-heading: var(--ox-white-100);
  --ox-text-secondary: var(--ox-steel-300);
  --ox-text-muted: var(--ox-steel-500);
  --ox-accent: var(--ox-cyan-400);
  --ox-accent-contrast: var(--ox-cyan-900);
  /* §2.4: small accent text on dark MUST use cyan-300 — cyan-400 is ≈3.9:1. */
  --ox-eyebrow: var(--ox-cyan-300);
  --ox-error: var(--ox-error-400);

  /* --- §3.1 families ------------------------------------------------------ */
  --ox-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ox-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;
  --ox-font-arabic: "IBM Plex Sans Arabic", "Inter", sans-serif;
  --ox-font-cjk: "Noto Sans SC", "Inter", sans-serif;

  /* --- §3.2 scale --------------------------------------------------------- */
  --ox-text-xs: 0.75rem;
  --ox-text-sm: 0.875rem;
  --ox-text-base: 1rem;
  --ox-text-lg: 1.125rem;
  --ox-text-xl: 1.375rem;
  --ox-text-2xl: 1.75rem;
  --ox-text-3xl: 2.25rem;
  --ox-text-4xl: 3rem;
  --ox-text-5xl: 4rem;
  --ox-text-hero: clamp(2.5rem, 6.5vw, 5rem);

  --ox-leading-heading: 1.15;
  --ox-leading-body: 1.6;
  --ox-leading-mono: 1.5;
  --ox-tracking-mono: 0.04em;
  --ox-tracking-micro: 0.08em;

  /* §3.2 weights: 400/500 only in Latin UI; 600+ prohibited. */
  --ox-weight-regular: 400;
  --ox-weight-medium: 500;

  /* --- §4.1 spacing (4px base) -------------------------------------------- */
  --ox-space-1: 4px;
  --ox-space-2: 8px;
  --ox-space-3: 12px;
  --ox-space-4: 16px;
  --ox-space-5: 24px;
  --ox-space-6: 32px;
  --ox-space-7: 48px;
  --ox-space-8: 64px;
  --ox-space-9: 96px;
  --ox-space-10: 128px;

  /* --- §4.2 grid ---------------------------------------------------------- */
  --ox-content-max: 1200px;
  --ox-measure: 65ch;

  /* --- §4.3 radius & borders ---------------------------------------------- */
  --ox-radius-sm: 6px;
  --ox-radius-md: 8px;
  --ox-radius-lg: 12px;
  --ox-radius-full: 999px;
  --ox-border-width: 1px;
  /* §8.4 — the Planner spine is the sole 2px border. */
  --ox-spine-width: 2px;

  /* --- §4.4 elevation ----------------------------------------------------- */
  --ox-shadow-card: 0 1px 2px rgb(22 32 43 / 0.06), 0 4px 12px rgb(22 32 43 / 0.06);

  /* --- §7.1 motion -------------------------------------------------------- */
  --ox-dur-fast: 150ms;
  --ox-dur-med: 300ms;
  --ox-dur-slow: 900ms;
  --ox-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ox-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* §10.2 focus ring — 2px accent, offset 2px, on every interactive element. */
  --ox-focus-width: 2px;
  --ox-focus-offset: 2px;

  /* §9 minimum touch target. */
  --ox-target-min: 44px;
}

/**
 * §1.1 — light is an override SCOPE, not a second theme. Applied per section,
 * matching the Authority's dark-first hybrid (DA §2.1).
 */
[data-surface="light"] {
  --ox-bg: var(--ox-paper-50);
  --ox-bg-card: var(--ox-paper-100);
  --ox-bg-raised: var(--ox-paper-100);
  --ox-border: var(--ox-paper-200);
  --ox-border-strong: var(--ox-paper-200);
  --ox-text: var(--ox-ink-900);
  --ox-text-heading: var(--ox-ink-900);
  --ox-text-secondary: var(--ox-ink-600);
  --ox-text-muted: var(--ox-ink-600);
  --ox-accent: var(--ox-cyan-700);
  --ox-accent-contrast: var(--ox-paper-50);
  --ox-eyebrow: var(--ox-cyan-700);
  --ox-error: var(--ox-error-700);
}

/** §11.7 — Arabic type: line-height 1.7, letter-spacing 0 (tracking breaks Arabic). */
:root:lang(ar) {
  --ox-font-sans: var(--ox-font-arabic);
  --ox-leading-body: 1.7;
}

:root:lang(zh) {
  --ox-font-sans: var(--ox-font-cjk);
}

/**
 * Base and Planner component layer.
 *
 * Authority: ODS §1.1 (tokens only — no raw hex/px/ms in component code),
 * §8 (component state tables), §10 (accessibility invariants), §11 (logical
 * properties only), §7.3 (reduced motion).
 *
 * Every declaration below resolves to a `--ox-*` token. The two exceptions are
 * `0`, which is dimensionless, and `100%`/`1fr`, which are relative units
 * rather than sizes — neither is a design value the token layer governs.
 *
 * ODS §11.1: logical properties ONLY. There is no `margin-left`,
 * `padding-right`, `border-left` or `text-align: left|right` in this file, so
 * `docs/rtl-exceptions.md` is not required by this increment.
 */

/* --- Base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ox-bg);
  color: var(--ox-text);
  font-family: var(--ox-font-sans);
  font-size: var(--ox-text-base);
  font-weight: var(--ox-weight-regular);
  line-height: var(--ox-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--ox-text-heading);
  font-weight: var(--ox-weight-medium);
  line-height: var(--ox-leading-heading);
  margin-block: 0 var(--ox-space-4);
}

h1 {
  font-size: var(--ox-text-3xl);
}
h2 {
  font-size: var(--ox-text-2xl);
}
h3 {
  font-size: var(--ox-text-xl);
}

p {
  margin-block: 0 var(--ox-space-4);
  max-inline-size: var(--ox-measure);
}

/* §10.2 — focus-visible on EVERY interactive element; never `outline: none`
   without a replacement. Declared once, globally, so a component cannot omit it. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--ox-focus-width) solid var(--ox-accent);
  outline-offset: var(--ox-focus-offset);
  border-radius: var(--ox-radius-sm);
}

/* §10.10 — skip-to-content link, visible on focus. */
.ox-skip {
  position: absolute;
  inset-inline-start: var(--ox-space-4);
  inset-block-start: calc(var(--ox-space-10) * -1);
  z-index: 10;
  padding: var(--ox-space-3) var(--ox-space-4);
  background: var(--ox-bg-raised);
  color: var(--ox-text-heading);
  border: var(--ox-border-width) solid var(--ox-accent);
  border-radius: var(--ox-radius-sm);
  transition: inset-block-start var(--ox-dur-fast) var(--ox-ease-out);
}

.ox-skip:focus {
  inset-block-start: var(--ox-space-4);
}

/* --- Layout -------------------------------------------------------------- */

.ox-shell {
  max-inline-size: var(--ox-content-max);
  margin-inline: auto;
  padding-inline: var(--ox-space-5);
  padding-block: var(--ox-space-7);
}

/* §4.1: "Section vertical padding: space-9 desktop / space-8 tablet / space-7
   mobile" — three values, and this carried two. Every width from 768 up took
   space-9, so the whole md band (768–1023, `lg` being 1024 in §4.2's ladder)
   rendered the desktop number. Measured at 768: 96px, expected 64px. */
@media (min-width: 768px) {
  .ox-shell {
    padding-inline: var(--ox-space-6);
    padding-block: var(--ox-space-8);
  }
}

@media (min-width: 1024px) {
  .ox-shell {
    padding-block: var(--ox-space-9);
  }
}

/* §3.3 — the `//` eyebrow convention. Mono, sm floor, cyan-300 on dark. */
.ox-eyebrow {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-eyebrow);
  letter-spacing: var(--ox-tracking-mono);
  text-transform: lowercase;
  margin-block-end: var(--ox-space-3);
}

/* §11.4 — the `//` prefix is a code fragment and stays LTR in RTL locales. */
.ox-eyebrow-mark {
  font-family: var(--ox-font-mono);
}

/* --- §8.4 Planner card: the spine is the sole 2px border ----------------- */

.ox-planner-card {
  background: var(--ox-bg-raised);
  border: var(--ox-border-width) solid var(--ox-border-strong);
  border-inline-start: var(--ox-spine-width) solid var(--ox-accent);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ox-radius-lg);
  border-end-end-radius: var(--ox-radius-lg);
  padding: var(--ox-space-5);
}

@media (min-width: 768px) {
  .ox-planner-card {
    padding: var(--ox-space-6);
  }
}

/* --- §8.9 Forms and Planner inputs --------------------------------------- */

.ox-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.ox-legend {
  color: var(--ox-text-heading);
  font-size: var(--ox-text-xl);
  font-weight: var(--ox-weight-medium);
  line-height: var(--ox-leading-heading);
  padding: 0;
  margin-block-end: var(--ox-space-5);
}

.ox-options {
  display: grid;
  gap: var(--ox-space-3);
  margin-block-end: var(--ox-space-6);
}

@media (min-width: 768px) {
  .ox-options[data-columns="2"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* §8.9 — card-radio grammar, min touch target 44×44. */
.ox-option {
  display: flex;
  align-items: flex-start;
  gap: var(--ox-space-3);
  min-block-size: var(--ox-target-min);
  padding: var(--ox-space-3) var(--ox-space-4);
  background: var(--ox-bg-card);
  border: var(--ox-border-width) solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  color: var(--ox-text);
  cursor: pointer;
  transition:
    border-color var(--ox-dur-fast) var(--ox-ease-out),
    transform var(--ox-dur-fast) var(--ox-ease-out);
}

.ox-option:hover {
  border-color: var(--ox-border-strong);
}

/* §7.2 `card-hover` — translateY(−2px) + border brighten. */
@media (hover: hover) {
  .ox-option:hover {
    transform: translateY(calc(var(--ox-space-1) / -2));
  }
}

.ox-option:has(input:checked) {
  border-color: var(--ox-accent);
}

.ox-option:has(input:focus-visible) {
  outline: var(--ox-focus-width) solid var(--ox-accent);
  outline-offset: var(--ox-focus-offset);
}

.ox-option-input {
  margin: 0;
  inline-size: var(--ox-space-4);
  block-size: var(--ox-space-4);
  margin-block-start: var(--ox-space-1);
  accent-color: var(--ox-accent);
  flex: none;
}

.ox-option-label {
  font-size: var(--ox-text-base);
}

.ox-option-voice {
  display: block;
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-sm);
}

.ox-field {
  display: block;
  margin-block-end: var(--ox-space-5);
}

.ox-label {
  display: block;
  font-size: var(--ox-text-sm);
  font-weight: var(--ox-weight-medium);
  color: var(--ox-text-heading);
  margin-block-end: var(--ox-space-2);
}

.ox-input,
.ox-textarea {
  inline-size: 100%;
  min-block-size: var(--ox-target-min);
  padding: var(--ox-space-3) var(--ox-space-4);
  background: var(--ox-bg-card);
  border: var(--ox-border-width) solid var(--ox-border);
  border-radius: var(--ox-radius-sm);
  color: var(--ox-text);
  font-family: inherit;
  font-size: var(--ox-text-base);
  line-height: var(--ox-leading-body);
}

.ox-textarea {
  min-block-size: var(--ox-space-10);
  resize: vertical;
}

.ox-input:focus,
.ox-textarea:focus {
  border-color: var(--ox-accent);
}

/* §8.9 — errors state what to fix; programmatically associated. */
.ox-error {
  display: block;
  color: var(--ox-error);
  font-size: var(--ox-text-xs);
  margin-block-start: var(--ox-space-2);
}

.ox-input[aria-invalid="true"],
.ox-textarea[aria-invalid="true"] {
  border-color: var(--ox-error);
}

/* --- §8.1 Buttons -------------------------------------------------------- */

.ox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ox-space-3);
  align-items: center;
  margin-block-start: var(--ox-space-6);
}

.ox-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ox-space-2);
  min-block-size: var(--ox-target-min);
  padding: var(--ox-space-3) var(--ox-space-5);
  border-radius: var(--ox-radius-sm);
  border: var(--ox-border-width) solid transparent;
  font-family: inherit;
  font-size: var(--ox-text-base);
  font-weight: var(--ox-weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--ox-dur-fast) var(--ox-ease-out);
}

.ox-button[data-variant="primary"] {
  background: var(--ox-accent);
  color: var(--ox-accent-contrast);
}

.ox-button[data-variant="primary"]:hover {
  filter: brightness(1.08);
}

.ox-button[data-variant="primary"]:active {
  filter: brightness(0.96);
}

.ox-button[data-variant="secondary"] {
  background: transparent;
  border-color: var(--ox-border-strong);
  color: var(--ox-text-heading);
}

.ox-button[data-variant="secondary"]:hover {
  border-color: var(--ox-accent);
}

.ox-button:disabled {
  background: var(--ox-slate-500);
  color: var(--ox-text-muted);
  cursor: not-allowed;
}

/* --- Progress ------------------------------------------------------------ */

.ox-progress {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-text-muted);
  letter-spacing: var(--ox-tracking-mono);
  margin-block-end: var(--ox-space-4);
}

/* --- Summary ------------------------------------------------------------- */

.ox-summary-grid {
  display: grid;
  gap: var(--ox-space-5);
  margin-block-end: var(--ox-space-6);
}

@media (min-width: 768px) {
  .ox-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ox-summary-panel {
  background: var(--ox-bg-card);
  border: var(--ox-border-width) solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  padding: var(--ox-space-5);
}

.ox-summary-heading {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-eyebrow);
  letter-spacing: var(--ox-tracking-mono);
  margin-block-end: var(--ox-space-2);
}

.ox-summary-value {
  font-size: var(--ox-text-2xl);
  color: var(--ox-text-heading);
  line-height: var(--ox-leading-heading);
}

.ox-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ox-space-2);
  margin-block-start: var(--ox-space-3);
  padding: 0;
  list-style: none;
}

.ox-chip {
  border: var(--ox-border-width) solid var(--ox-border);
  border-radius: var(--ox-radius-full);
  padding: var(--ox-space-1) var(--ox-space-3);
  font-size: var(--ox-text-xs);
  color: var(--ox-text-secondary);
}

.ox-note {
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-sm);
}

.ox-expectations {
  list-style: none;
  padding: 0;
  margin-block: 0 var(--ox-space-6);
  display: grid;
  gap: var(--ox-space-2);
}

.ox-expectations li {
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-sm);
}

.ox-reference {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-2xl);
  color: var(--ox-eyebrow);
  letter-spacing: var(--ox-tracking-mono);
}

/* §10 — visually hidden but available to assistive technology. */
.ox-sr-only {
  position: absolute;
  inline-size: var(--ox-border-width);
  block-size: var(--ox-border-width);
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
 * Homepage and site chrome — Work Order 004.
 *
 * Authority: DA §2.1 (hybrid dark/light) · §2.2 (accent discipline: "if cyan
 * appears more than ~5 times per viewport, remove instances") · §2.5
 * (signature elements: the seam, the `//` eyebrow) · §2.9 (mobile parity) ·
 * ODS §1.1 (tokens only) · §8.1–§8.8 · §9 (responsive, mobile-first) · §11
 * (logical properties only).
 *
 * Every declaration resolves to a `--ox-*` token; there is no raw hex, px or ms
 * value, and no physical direction property, in this block.
 * ========================================================================== */

/* --- Sections and the seam (DA §2.5 element 4, ODS §8.10) ---------------- */

.ox-section {
  background: var(--ox-bg);
  color: var(--ox-text);
}

/* ODS §8.10: "Every dark→light boundary: `border-top: 1px solid
   var(--ox-accent)` on the light section." Never thicker, never a gradient,
   never omitted. */
.ox-section[data-surface="light"] {
  border-block-start: var(--ox-border-width) solid var(--ox-accent);
}

/* Two adjacent light sections are not a transition — one seam, not two. */
.ox-section[data-surface="light"] + .ox-section[data-surface="light"] {
  border-block-start: 0;
}

/* §4.1 gives ONE number for section spacing — "space-9 desktop" — and two
   abutting sections were rendering TWO of them. Measured on the homepage at
   1440 and at 1920, identically: 208px between the hero and the journey, 216px
   between the stage cards and the Planner card, 192px before the closing CTA.
   Nothing is in that space; the section below simply starts its own padding
   where the section above finished its own.

   The rule above already settles what an abutting pair IS — "not a transition"
   — and this applies the same reading to the spacing: a section that follows
   another on the SAME surface starts where the previous one's space-9 ended, so
   the boundary measures space-9 rather than twice it.

   A surface change gets the same one space-9, split rather than collapsed —
   see the second rule below.

   Scoped to ≥768 because that is where the doubling is: mobile carries space-7
   and measures 96–120px at a boundary, which is proportionate and is left
   exactly as it is. */
@media (min-width: 768px) {
  .ox-section:not([data-surface]) + .ox-section:not([data-surface]) > .ox-shell,
  .ox-section[data-surface="light"] + .ox-section[data-surface="light"] > .ox-shell {
    padding-block-start: 0;
  }

  /* A surface change gets the SAME space-9 across the boundary, split evenly
     rather than collapsed. The §8.10 accent line is drawn exactly here, and a
     chip row resting on it — or a heading hanging off it — would be a worse
     defect than the space was. Split, it measures 96px chips-to-heading instead
     of 209px, and the line keeps space-7 of clearance either side.

     The `:has()` pair is the "followed by" half: CSS has no previous-sibling
     combinator, and the section BEFORE the seam owns the padding above it. */
  .ox-section:not([data-surface]) + .ox-section[data-surface="light"] > .ox-shell,
  .ox-section[data-surface="light"] + .ox-section:not([data-surface]) > .ox-shell {
    padding-block-start: var(--ox-space-6);
  }

  .ox-section:not([data-surface]):has(+ .ox-section[data-surface="light"]) > .ox-shell,
  .ox-section[data-surface="light"]:has(+ .ox-section:not([data-surface])) > .ox-shell {
    padding-block-end: var(--ox-space-6);
  }
}

/* The split follows the base: half of space-8 on tablet, half of space-9 from
   desktop up, so the boundary keeps measuring one section's padding either way. */
@media (min-width: 1024px) {
  .ox-section:not([data-surface]) + .ox-section[data-surface="light"] > .ox-shell,
  .ox-section[data-surface="light"] + .ox-section:not([data-surface]) > .ox-shell {
    padding-block-start: var(--ox-space-7);
  }

  .ox-section:not([data-surface]):has(+ .ox-section[data-surface="light"]) > .ox-shell,
  .ox-section[data-surface="light"]:has(+ .ox-section:not([data-surface])) > .ox-shell {
    padding-block-end: var(--ox-space-7);
  }
}

.ox-section-title {
  font-size: var(--ox-text-sm);
  font-family: var(--ox-font-mono);
  letter-spacing: var(--ox-tracking-micro);
  color: var(--ox-text-muted);
  text-transform: uppercase;
}

/* --- §8.2 Navigation ----------------------------------------------------- */

.ox-header {
  background: var(--ox-graphite-900);
  border-block-end: var(--ox-border-width) solid var(--ox-border);
}

/* §8.2: "Height 64px". space-3 above and below a 44px control measured 68px,
   and 121px below `lg` where the three items no longer fit one row and the menu
   button wrapped under the logotype. `space-8` IS 64px, so the bar is sized to
   the token and the padding removed rather than a new number chosen; the 1px
   border §8.2 lists separately sits outside it.

   The gap tightens to space-2 below `lg` because that is what stops the wrap:
   logotype 162 + toggle 44 + CTA 114 + two space-4 gaps is 352 against 342 of
   available inline size at 390. §8.2's mobile row is "logotype + CTA (xs size)
   + menu button" — one row, which this restores without resizing the CTA. */
.ox-header-inner {
  max-inline-size: var(--ox-content-max);
  margin-inline: auto;
  padding-inline: var(--ox-space-5);
  min-block-size: var(--ox-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ox-space-2);
}

@media (min-width: 1024px) {
  .ox-header-inner {
    gap: var(--ox-space-4);
  }
}

.ox-logotype {
  color: var(--ox-text-heading);
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  letter-spacing: var(--ox-tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
}

.ox-logotype-dot {
  color: var(--ox-accent);
}

/*
 * §8.2 specifies the mobile treatment for `<lg`, and §4.2 defines `lg` as
 * 1024px. This rule carried `768px` (`md`) before Work Order 007, so the
 * desktop treatment rendered across `768–1023` where §8.2 specifies the mobile
 * one. The range 768px–1023.98px is what this single value changes.
 */
.ox-nav {
  flex: 1 1 100%;
  order: 3;
}

@media (min-width: 1024px) {
  .ox-nav {
    flex: 1 1 auto;
    order: 0;
  }
}

/* --- §8.2 Mobile navigation (<lg) — the Work Order 007 enhancement ------- */

/*
 * ## Everything here is inert without JavaScript
 *
 * `data-enhanced` is set by `MobileNav` in an effect, so it exists only after
 * React hydrates. Every rule that reshapes the navigation is scoped to
 * `[data-enhanced="true"]`, and the wrapper is `display: contents` until then —
 * so the `<nav>` remains the direct flex child of `.ox-header-inner` with
 * exactly the `flex`/`order` behaviour it had before this component existed.
 *
 * With script disabled the visitor gets the wrapping nav, unchanged. With
 * script the same markup becomes a menu button and an overlay panel. There is
 * no state in which a button exists over a panel that cannot open.
 */
.ox-mobile-nav {
  display: contents;
}

/* Never rendered without script, and never shown at or above `lg`. */
.ox-nav-toggle {
  display: none;
}

@media (max-width: 1023.98px) {
  .ox-mobile-nav[data-enhanced="true"] {
    display: flex;
    align-items: center;
    /*
     * §8.2 mobile order: "logotype + CTA (xs size) + menu button". The CTA
     * carries `margin-inline-start: auto`, so both it and this wrapper sit in
     * the right-hand cluster; `order: 2` puts the button after the CTA.
     */
    order: 2;
    margin-inline-start: var(--ox-space-3);
  }

  .ox-mobile-nav[data-enhanced="true"] .ox-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* §10 — touch targets ≥ 44px. */
    inline-size: var(--ox-target-min);
    block-size: var(--ox-target-min);
    padding: 0;
    border: var(--ox-border-width) solid var(--ox-border);
    border-radius: var(--ox-radius-sm);
    background: transparent;
    color: var(--ox-text-heading);
    cursor: pointer;
    /*
     * Above the panel, so the control that closes the overlay stays clickable
     * while the overlay covers the viewport. The focus trap already keeps it
     * reachable by keyboard; this is the pointer half of the same requirement.
     */
    position: relative;
    z-index: 30;
  }

  /* §8.1/§10 item 2 — the same focus treatment every other control uses. */
  .ox-mobile-nav[data-enhanced="true"] .ox-nav-toggle:focus-visible {
    outline: 2px solid var(--ox-accent);
    outline-offset: 2px;
  }

  .ox-nav-toggle-bars,
  .ox-nav-toggle-bars::before,
  .ox-nav-toggle-bars::after {
    display: block;
    inline-size: 18px;
    block-size: var(--ox-border-width);
    background: currentColor;
    transition: transform var(--ox-dur-fast) var(--ox-ease-out);
  }

  .ox-nav-toggle-bars {
    position: relative;
  }

  .ox-nav-toggle-bars::before,
  .ox-nav-toggle-bars::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
  }

  .ox-nav-toggle-bars::before {
    inset-block-start: -6px;
  }

  .ox-nav-toggle-bars::after {
    inset-block-start: 6px;
  }

  /* The bars become a cross while the panel is open. */
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-toggle-bars {
    background: transparent;
  }

  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /*
   * §8.2 — "full-screen overlay panel".
   *
   * `display: none` while closed is deliberate: it removes the links from the
   * tab order and from the accessibility tree with no `inert` or `aria-hidden`
   * bookkeeping to fall out of sync with the visual state.
   */
  .ox-mobile-nav[data-enhanced="true"] .ox-nav {
    display: none;
  }

  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--ox-graphite-900);
    /* Clears the header, so the first link never sits under the toggle. */
    padding: var(--ox-space-9) var(--ox-space-5) var(--ox-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list {
    flex-direction: column;
    gap: var(--ox-space-5);
  }

  /* §8.2 — "links text-xl". */
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-link {
    font-size: var(--ox-text-xl);
  }

  /* §8.2 — "staggered section-reveal". */
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li {
    animation: ox-nav-reveal var(--ox-dur-med) var(--ox-ease-out) both;
  }

  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li:nth-child(1) { animation-delay: 0ms; }
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li:nth-child(2) { animation-delay: 40ms; }
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li:nth-child(3) { animation-delay: 80ms; }
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li:nth-child(4) { animation-delay: 120ms; }
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li:nth-child(5) { animation-delay: 160ms; }
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li:nth-child(6) { animation-delay: 200ms; }

  /*
   * §8.2 — "CTA (xs size)".
   *
   * `--ox-text-xs` is the token §8.2's "xs" names. The padding stays at §8.1's
   * `sm` pair: §8.1 defines padding for `sm` and `lg` only, and inventing an
   * `xs` padding pair would be supplying a governed value this pass has no
   * authority to set. Reported under Work Order 007 for operator confirmation.
   */
  .ox-header .ox-button[data-size="sm"] {
    font-size: var(--ox-text-xs);
  }
}

@keyframes ox-nav-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * §7.3 — "all animations resolve to their end state instantly. No exceptions."
 *
 * The global reduced-motion block collapses `animation-duration` but not
 * `animation-delay`, and a stagger is built from delays: without this rule the
 * last link would still appear 200ms late with the preference set.
 */
@media (prefers-reduced-motion: reduce) {
  .ox-mobile-nav[data-enhanced="true"][data-open="true"] .ox-nav-list > li {
    animation: none;
  }
}

/* ODS §8.2 — "body scroll locked" while the overlay is open. */
.ox-scroll-locked {
  overflow: hidden;
}

.ox-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ox-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* §8.2 — center links text-sm steel-300, hover → white-100. */
.ox-nav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ox-target-min);
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-sm);
  text-decoration: none;
  transition: color var(--ox-dur-fast) var(--ox-ease-out);
}

.ox-nav-link:hover {
  color: var(--ox-text-heading);
}

/* §8.1 — the small CTA size used in the navigation bar. */
.ox-button[data-size="sm"] {
  min-block-size: auto;
  padding: var(--ox-space-2) var(--ox-space-4);
  font-size: var(--ox-text-sm);
  margin-inline-start: auto;
}

/* --- Hero (DA §3.2 item 1, §2.9 first-screen invariant) ------------------ */

.ox-hero-headline {
  font-size: var(--ox-text-hero);
  max-inline-size: var(--ox-measure);
}

.ox-hero-supporting {
  font-size: var(--ox-text-lg);
  color: var(--ox-text-secondary);
}

/* DA §2.9 — the inline trust line lives inside the hero because the trust
   strip falls below the fold on mobile. */
.ox-hero-trust {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-text-muted);
  letter-spacing: var(--ox-tracking-mono);
}

/* --- §8.6 Solution, industry, journey and record cards ------------------- */

.ox-card-grid {
  display: grid;
  gap: var(--ox-space-4);
  list-style: none;
  margin-block: var(--ox-space-6) var(--ox-space-5);
  padding: 0;
}

@media (min-width: 640px) {
  .ox-card-grid[data-columns="3"],
  .ox-card-grid[data-columns="4"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* §4.2: "industries 8-across as 8→4→4 (two rows)→2 columns". The eight-item
   grid shares `data-columns="4"` with the four-card journey selector, which
   §8.5 governs separately as "grid 4→2→1" and which is correct — so the rule
   below is scoped by item count, the same way the five-card solutions rule is,
   and the journey row is untouched.

   Measured before: 2 columns at 768 and 4 at every width above it, so the
   eight-across state the rule names was never rendered. The `md` band takes 4,
   which the sequence supplies and which "(two rows)" describes exactly — eight
   items in four columns.

   `:not(:has(.ox-card-body))` is the second half of the scope and it was added
   on measurement, not on principle. §8.6 defines the industry card as "icon 24px
   → label (sm/500), whole card is the link" — no body — and that compact card is
   what "8-across" describes. `/industries` reuses the same grid class for a
   DESCRIPTIVE card carrying `industries.{code}.intro`; at eight tracks its cards
   render as 128px columns of running text. One rule's letter is not worth
   another page's readability, so the row that has no body copy takes the eight
   and the one that does keeps four.

   The two bands the sequence does NOT resolve are left alone: it gives four
   values and no breakpoint labels, so `lg` (1024–1279) keeps 4 and the sub-`sm`
   state keeps 1, and both are reported rather than guessed. */
@media (min-width: 768px) {
  .ox-card-grid[data-columns="4"]:has(> li:nth-child(8):last-child):not(:has(.ox-card-body)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .ox-card-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }

  .ox-card-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }

  /* §4.2, the solutions row: "solutions 5 (lg: **3+2 centered** or 5-across —
     decided at build within this rule)". Three tracks and five cards is
     neither: it leaves a card-width hole at the end of row two, against a
     four-across stage row directly above it that is even.

     3+2 centered is taken rather than 5-across because it keeps the card at the
     368px the description already wraps to; five across the same shell would be
     211px and re-wrap every card to make one row tidy.

     Six tracks, each card spanning two, so rows still hold three; the fourth
     card starts at track 2 and the pair sits centred. `:has()` scopes it to a
     grid of exactly five, so the same class with three, six or nine cards is
     untouched — and a sixth solution would fill row two on its own and need
     nothing here. */
  .ox-card-grid[data-columns="3"]:has(> li:nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }

  .ox-card-grid[data-columns="3"]:has(> li:nth-child(5):last-child) > li {
    grid-column: span 2;
  }

  .ox-card-grid[data-columns="3"]:has(> li:nth-child(5):last-child) > li:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

/* §4.2's leading term — "industries 8-across" — at `xl`, the widest band the
   breakpoint ladder names. The shell caps at 1200px, so this is the only width
   where eight tracks are the full row the rule describes. */
@media (min-width: 1280px) {
  .ox-card-grid[data-columns="4"]:has(> li:nth-child(8):last-child):not(:has(.ox-card-body)) {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* §8.6 — "entire card clickable with single `<a>` wrapping (no nested links)". */
.ox-card {
  display: flex;
  flex-direction: column;
  gap: var(--ox-space-2);
  block-size: 100%;
  min-block-size: var(--ox-target-min);
  padding: var(--ox-space-5);
  background: var(--ox-bg-card);
  border: var(--ox-border-width) solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  color: var(--ox-text);
  text-decoration: none;
  transition:
    border-color var(--ox-dur-fast) var(--ox-ease-out),
    transform var(--ox-dur-fast) var(--ox-ease-out);
}

.ox-card:hover {
  border-color: var(--ox-border-strong);
}

@media (hover: hover) {
  .ox-card:hover {
    transform: translateY(calc(var(--ox-space-1) / -2));
  }
}

/* NB-34 (authority-amendment-004.md): the Business Journey's `01`–`04` numerals
   are prohibited — no authority supplies them, and the journey is four
   alternative business states rather than a sequence. `.ox-card-index` was
   their only styling and is removed with them. The process band's authorized
   numerals use `.ox-process-index`, which is a separate rule. */

.ox-card-title {
  color: var(--ox-text-heading);
  font-size: var(--ox-text-base);
  font-weight: var(--ox-weight-medium);
  line-height: var(--ox-leading-heading);
}

.ox-card-voice,
.ox-card-body {
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-sm);
}

/* §8.1 ghost/link grammar. Not a nested link — a styled span inside the card's
   single `<a>`, so the whole card remains one control. */
.ox-card-link {
  margin-block-start: auto;
  color: var(--ox-accent);
  font-size: var(--ox-text-sm);
}

.ox-link {
  color: var(--ox-accent);
  font-size: var(--ox-text-sm);
  text-decoration: none;
}

.ox-link:hover {
  text-decoration: underline;
}

/* --- §8.7 Process band --------------------------------------------------- */

.ox-process-band {
  display: grid;
  gap: var(--ox-space-5);
  list-style: none;
  margin-block: var(--ox-space-6) 0;
  padding: 0;
}

@media (min-width: 640px) {
  .ox-process-band {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .ox-process-band {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* §8.7 — connected by a 1px dashed line in the blueprint register; on mobile
   the line becomes a border-inline-start (ODS §11: logical properties only). */
.ox-process-step {
  padding-inline-start: var(--ox-space-4);
  border-inline-start: var(--ox-border-width) dashed var(--ox-border-strong);
}

@media (min-width: 640px) {
  .ox-process-step {
    padding-inline-start: 0;
    padding-block-start: var(--ox-space-4);
    border-inline-start: 0;
    border-block-start: var(--ox-border-width) dashed var(--ox-border-strong);
  }
}

.ox-process-index {
  display: block;
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-xs);
  color: var(--ox-text-muted);
  letter-spacing: var(--ox-tracking-mono);
  margin-block-end: var(--ox-space-2);
}

/*
 * `display: block` is load-bearing, not cosmetic.
 *
 * The homepage band uses `h3` and `p`, which are block by default, so the
 * `margin-block-end` below worked there and the rule looked complete. On
 * `/how-we-engineer` the same classes sit on `span` elements: the boxes stayed
 * INLINE, the vertical margin was inert — margins do not apply to
 * non-replaced inline boxes — and the title ran straight into its description
 * on every step. The class was present; the rule that gives it meaning was not.
 *
 * Declaring the display here fixes it for every element the class is put on,
 * rather than depending on which tag a page happened to choose.
 */
.ox-process-title {
  display: block;
  font-size: var(--ox-text-base);
  margin-block-end: var(--ox-space-2);
}

.ox-process-detail {
  display: block;
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-xs);
}

/* --- §8.8 Footer and status line ---------------------------------------- */

.ox-footer {
  background: var(--ox-graphite-900);
  color: var(--ox-text);
  border-block-start: var(--ox-border-width) solid var(--ox-border);
}

.ox-footer-grid {
  display: grid;
  gap: var(--ox-space-6);
}

@media (min-width: 640px) {
  .ox-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* §8.8: "4-col sitemap (2-col mobile)". The sitemap rendered as one column of
   six links at every width — neither number. The rule is applied to the sitemap
   LIST, selected by the landmark label already in the markup so no element gains
   a class,, because that is the only element in the footer on which four columns is
   reachable: `.ox-footer-grid` holds two groups, and a third and fourth would be
   content this pass may not add. The channels list keeps its own shape. */
nav[aria-labelledby="footer-sitemap"] .ox-footer-list {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 1024px) {
  nav[aria-labelledby="footer-sitemap"] .ox-footer-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* §8.8 — headings sm uppercase steel-500 tracking +0.08em. */
.ox-footer-heading {
  font-size: var(--ox-text-sm);
  color: var(--ox-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ox-tracking-micro);
}

.ox-footer-list {
  display: grid;
  gap: var(--ox-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ox-footer-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ox-target-min);
  color: var(--ox-steel-400);
  font-size: var(--ox-text-sm);
  text-decoration: none;
}

.ox-footer-link:hover {
  color: var(--ox-text-heading);
}

/* §8.8 — status line: mono sm, full-width bar, border-top. */
.ox-footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ox-space-3);
  justify-content: space-between;
  margin-block-start: var(--ox-space-7);
  padding-block-start: var(--ox-space-4);
  border-block-start: var(--ox-border-width) solid var(--ox-border);
}

.ox-status-line,
.ox-footer-legal {
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-sm);
  color: var(--ox-text-muted);
  letter-spacing: var(--ox-tracking-mono);
  margin: 0;
  max-inline-size: none;
}

/* --- §7.3 Reduced motion (invariant, no exceptions) ---------------------- */

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

  .ox-option:hover,
  .ox-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Insights library — Work Order 005
   Ch10 §10.3 (index and class landing pages) · §10.2.5 (dates shown).
   Tokens only (ODS §1.1); logical properties only (ODS §11).
   ========================================================================== */

.ox-lede {
  color: var(--ox-text-secondary);
  font-size: var(--ox-text-base);
  line-height: var(--ox-leading-body);
  max-inline-size: 60ch;
  margin-block-end: var(--ox-space-6);
}

/* The honest zero state (NB-41). Deliberately quiet: an empty state should not
   be the most prominent thing on the page. */
.ox-empty {
  color: var(--ox-text-muted);
  font-size: var(--ox-text-sm);
  margin-block: var(--ox-space-6);
}

/* §10.2.5 — publish date and last-reviewed date, shown. */
.ox-insight-dates {
  color: var(--ox-text-muted);
  font-family: var(--ox-font-mono);
  font-size: var(--ox-text-xs);
  letter-spacing: var(--ox-tracking-mono);
  margin-block-start: var(--ox-space-2);
}

/* Ch10 §10.3 internal-link mandate — onward links, no orphan content. */
.ox-insight-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ox-space-4);
  list-style: none;
  margin-block: var(--ox-space-6);
  padding-inline-start: 0;
}