/* ────────────────────────────────────────────────────────────────────────────
   secops.run stylesheet. Ported from the owner-approved landing mock (revision 2,
   13 November 2026); the contrast record below was computed for that mock and still holds.

   CONTRAST RECORD (WCAG 2.x relative luminance, computed for this file)
   Text needs 4.5:1, UI boundaries and focus indicators 3:1.

   Dark theme                                              ratio
     text   #f4f5f7 on bg #0a0a0b / surface #141416        18.14 / 16.87
     muted  #9aa0ab on bg / surface / surface-2 #1b1b1f     7.53 / 7.00 / 6.53
     faint  #858a95 on bg / surface / surface-2             5.72 / 5.32 / 4.96
     white on accent fill #c2410c (primary button)          5.18
     success #2fbf71 on its wash over surface               6.43
     warning #f5a623 on its wash over surface               7.38
     error   #f36060 on its wash over surface / surface-2   5.20 / 4.82
     info    #5c98ff on its wash over surface / surface-2   5.57 / 5.14
     sign-in menu: text / muted / faint on the popover      15.96 / 6.62 / 5.03
     sign-in menu: text / muted on a hovered item           11.95 / 4.96
     control line #70757f on bg / surface   (boundary)      4.28 / 3.98
     primary fill #c2410c against bg        (boundary)      3.82
     focus ring #f2530f against bg                          5.67
     nav text on the material, worst case (78% bg over
       unblurred white text beneath)                        9.84

   Light theme
     text   #16181d on bg #f6f7f9 / white                  16.57 / 17.76
     muted  #5b616e on bg / white / surface-2 #f1f2f5       5.80 / 6.21 / 5.55
     faint  #656a75 on bg / white / surface-2               5.06 / 5.42 / 4.85
     white on accent fill #c2410c                           5.18
     success #0f6d42 · warning #845700 · error #b82424 ·
       info #1a59c4, each on its wash over white            5.56 · 5.50 · 5.50 · 5.64
     sign-in menu: muted / faint on the popover (white)     6.21 / 5.42
     sign-in menu: text / muted on a hovered item           14.72 / 5.15
     control line #80868f on bg / white     (boundary)      3.42 / 3.67
     primary fill #c2410c against bg        (boundary)      4.83
     focus ring #b93d0b against bg                          5.24
     nav text on the material, worst case                  10.38

   Card hairlines (#2a2a30 dark, #e3e5eb light) are decoration, not component
   boundaries: nothing they outline is interactive. Every interactive control
   outline uses --control-line.

   TYPE. Inter (variable, self-hosted) for text, Geist Mono for digits only,
   scoped by unicode-range exactly as the product does. The Inter file carries an
   optical-size axis (opsz 14–32, confirmed in Chromium), so font-optical-sizing:
   auto draws display sizes with the tighter display cut. Tracking follows size:
   text sizes use Inter's dynamic-metrics curve (-0.0223 + 0.185·e^(-0.1745·px));
   display sizes add a little more (-0.022 to -0.03em), less than a text cut would
   need. Leading runs inverse to size: 1.02 at 88px, 1.05 at 64px, 1.55 at 17px.
   ──────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-digits.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces: the product's dark ramp. */
  --bg: #0a0a0b;
  --band: #0f0f11;
  --surface: #141416;
  --surface-2: #1b1b1f;
  --elevated: #202024;
  --border: #2a2a30;
  --border-2: #3a3a42;
  --control-line: #70757f;

  /* Text: three levels, no fourth. */
  --text: #f4f5f7;
  --muted: #9aa0ab;
  --faint: #858a95;

  /* One accent. Fill under white text, text colour on surfaces. */
  --accent: #f2530f;
  --accent-text: #f2530f;
  --accent-fill: #c2410c;
  --accent-fill-hover: #a8380a;
  --accent-glow: rgba(242, 83, 15, .28);
  --warm-edge: linear-gradient(90deg, transparent 6%, #ffc300 26%, #ff9f00 48%, #f2530f 76%, transparent 94%);
  --stage-glow: rgba(242, 83, 15, .17);

  /* Status: reserved meanings, never decoration. */
  --success: #2fbf71; --success-text: #2fbf71; --success-soft: rgba(47, 191, 113, .12); --success-line: rgba(47, 191, 113, .30);
  --warning: #f5a623; --warning-text: #f5a623; --warning-soft: rgba(245, 166, 35, .12); --warning-line: rgba(245, 166, 35, .30);
  --error:   #ef4444; --error-text:   #f36060; --error-soft:   rgba(239, 68, 68, .12);  --error-line:   rgba(239, 68, 68, .35);
  --info:    #4c8dff; --info-text:    #5c98ff; --info-soft:    rgba(76, 141, 255, .12); --info-line:    rgba(76, 141, 255, .30);
  --p3: #6b717c;
  --p4: #3a3a42;

  --tint: rgba(255, 255, 255, .05);
  --tint-strong: rgba(255, 255, 255, .10);
  --card-a: #17171a;
  --card-b: #131315;
  --card-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10) 22%, rgba(255, 255, 255, .10) 78%, transparent);
  --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, .20);
  --rail-bg: rgba(22, 22, 25, .92);
  --popover: rgba(26, 26, 30, .98);

  --shadow-1: 0 8px 24px rgba(0, 0, 0, .30);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .45);
  --shadow-3: 0 20px 52px rgba(0, 0, 0, .60);
  --shadow-hero: 0 30px 80px rgba(0, 0, 0, .55);

  /* Material for the structural bar. */
  --nav-material: rgba(10, 10, 11, .72);
  --nav-edge: rgba(10, 10, 11, .80);

  /* Documents in the reports stage. Off-white, so a sheet does not glare on near-black. */
  --paper: #e6e8ec;
  --paper-ink: #16181d;
  --paper-soft: #c9ced8;
  --paper-line: #d5d9e0;

  /* Type scale, rem (px at the default 16px in the name). */
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-17: 1.0625rem;
  --fs-21: 1.3125rem;
  --fs-lede: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  --fs-h2: clamp(2.25rem, 1.3rem + 3.3vw, 4rem);
  --fs-h1: clamp(2.875rem, 1.2rem + 5.4vw, 5.5rem);

  /* Layout. */
  --gutter: clamp(1rem, 3.5vw, 2.5rem);
  --content: 75rem;
  --section-pad: clamp(5rem, 3rem + 7vw, 10rem);

  /* Motion: the product's two durations and one curve. */
  --dur-press: 120ms;
  --dur-surface: 200ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Light by choice, or when the system asks for light and no choice is stored. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f7f9; --band: #ffffff; --surface: #ffffff; --surface-2: #f1f2f5; --elevated: #e9ebef;
    --border: #e3e5eb; --border-2: #c9ced8; --control-line: #80868f;
    --text: #16181d; --muted: #5b616e; --faint: #656a75;
    --accent-text: #b93d0b; --accent-glow: rgba(242, 83, 15, .22); --stage-glow: rgba(242, 83, 15, .10);
    --success: #12794a; --success-text: #0f6d42; --success-soft: rgba(18, 121, 74, .10); --success-line: rgba(18, 121, 74, .32);
    --warning: #9a6200; --warning-text: #845700; --warning-soft: rgba(154, 98, 0, .10);  --warning-line: rgba(154, 98, 0, .32);
    --error:   #c62828; --error-text:   #b82424; --error-soft:   rgba(198, 40, 40, .09); --error-line:   rgba(198, 40, 40, .30);
    --info:    #1d5fd0; --info-text:    #1a59c4; --info-soft:    rgba(29, 95, 208, .09); --info-line:    rgba(29, 95, 208, .30);
    --p3: #8a909b; --p4: #c9ced8;
    --tint: rgba(16, 18, 24, .05); --tint-strong: rgba(16, 18, 24, .09);
    --card-a: #ffffff; --card-b: #fcfcfd;
    --card-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 22%, rgba(255, 255, 255, .9) 78%, transparent);
    --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, .28);
    --rail-bg: rgba(255, 255, 255, .92);
    --popover: #ffffff;
    --shadow-1: 0 8px 24px rgba(16, 18, 24, .06); --shadow-2: 0 14px 36px rgba(16, 18, 24, .10);
    --shadow-3: 0 20px 52px rgba(16, 18, 24, .14); --shadow-hero: 0 30px 80px rgba(16, 18, 24, .14);
    --nav-material: rgba(246, 247, 249, .72); --nav-edge: rgba(246, 247, 249, .80);
    --paper: #ffffff; --paper-ink: #16181d; --paper-soft: #d5d9e0; --paper-line: #e3e5eb;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9; --band: #ffffff; --surface: #ffffff; --surface-2: #f1f2f5; --elevated: #e9ebef;
  --border: #e3e5eb; --border-2: #c9ced8; --control-line: #80868f;
  --text: #16181d; --muted: #5b616e; --faint: #656a75;
  --accent-text: #b93d0b; --accent-glow: rgba(242, 83, 15, .22); --stage-glow: rgba(242, 83, 15, .10);
  --success: #12794a; --success-text: #0f6d42; --success-soft: rgba(18, 121, 74, .10); --success-line: rgba(18, 121, 74, .32);
  --warning: #9a6200; --warning-text: #845700; --warning-soft: rgba(154, 98, 0, .10);  --warning-line: rgba(154, 98, 0, .32);
  --error:   #c62828; --error-text:   #b82424; --error-soft:   rgba(198, 40, 40, .09); --error-line:   rgba(198, 40, 40, .30);
  --info:    #1d5fd0; --info-text:    #1a59c4; --info-soft:    rgba(29, 95, 208, .09); --info-line:    rgba(29, 95, 208, .30);
  --p3: #8a909b; --p4: #c9ced8;
  --tint: rgba(16, 18, 24, .05); --tint-strong: rgba(16, 18, 24, .09);
  --card-a: #ffffff; --card-b: #fcfcfd;
  --card-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 22%, rgba(255, 255, 255, .9) 78%, transparent);
  --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, .28);
  --rail-bg: rgba(255, 255, 255, .92);
  --popover: #ffffff;
  --shadow-1: 0 8px 24px rgba(16, 18, 24, .06); --shadow-2: 0 14px 36px rgba(16, 18, 24, .10);
  --shadow-3: 0 20px 52px rgba(16, 18, 24, .14); --shadow-hero: 0 30px 80px rgba(16, 18, 24, .14);
  --nav-material: rgba(246, 247, 249, .72); --nav-edge: rgba(246, 247, 249, .80);
  --paper: #ffffff; --paper-ink: #16181d; --paper-soft: #d5d9e0; --paper-line: #e3e5eb;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist Mono", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-17);
  line-height: 1.55;
  letter-spacing: -0.013em;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
p, h1, h2, h3, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.skip {
  position: absolute; inset-inline-start: var(--gutter); inset-block-start: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: .625rem; background: var(--surface); color: var(--text);
  font-size: var(--fs-15); text-decoration: none;
}
.skip:focus { inset-block-start: .5rem; }

.wrap { inline-size: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: var(--fs-12); font-weight: 600; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  margin-block-end: 1.125rem;
}
.h1 {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.024em;
  text-wrap: balance;
}
.h1 .line { display: block; }
.h1 .soft { color: var(--muted); }
.h2 {
  font-size: var(--fs-h2); font-weight: 680; line-height: 1.08; letter-spacing: -0.022em;
  text-wrap: balance;
}
@media (min-width: 56.25em) {
  .h1 { line-height: 1.02; letter-spacing: -0.03em; }
  .h2 { line-height: 1.05; letter-spacing: -0.027em; }
}
.lede {
  font-size: var(--fs-lede); font-weight: 400; line-height: 1.42; letter-spacing: -0.017em;
  color: var(--muted); max-inline-size: 38rem; text-wrap: pretty;
}
.caption { font-size: var(--fs-13); line-height: 1.45; letter-spacing: -0.003em; color: var(--faint); }

/* ── Controls ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 3rem; padding-inline: 1.375rem; border-radius: .75rem;
  border: 1px solid transparent;
  font: inherit; font-size: var(--fs-17); font-weight: 600; line-height: 1; letter-spacing: -0.013em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent-fill); color: #fff; box-shadow: var(--btn-highlight); }
.btn-primary:hover { background: var(--accent-fill-hover); box-shadow: var(--btn-highlight), 0 4px 14px var(--accent-glow); }
.btn-ghost { background: var(--tint); color: var(--text); border-color: var(--control-line); }
.btn-ghost:hover { background: var(--elevated); }
.btn-sm { min-block-size: 2.25rem; padding-inline: .875rem; border-radius: .625rem; font-size: var(--fs-13); letter-spacing: -0.003em; }
.link-more {
  display: inline-flex; align-items: center; gap: .25rem; min-block-size: 3rem; padding-inline: .5rem;
  color: var(--text); font-weight: 500; text-decoration: none; border-radius: .5rem;
}
.link-more svg { inline-size: 1rem; block-size: 1rem; transition: transform var(--dur-press) var(--ease); }
.link-more:hover { text-decoration: underline; text-underline-offset: .2em; }
.link-more:hover svg { transform: translateX(2px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* ── Navigation bar: a translucent layer; content scrolls beneath it ──────── */
.nav { position: sticky; inset-block-start: 0; z-index: 50; }
.nav-bar {
  position: relative; z-index: 1; /* above the scroll-edge fade, so the open menu is never dimmed */
  background: var(--nav-material);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* Scroll-edge effect instead of a divider: a short blurred fade, present only
   while content is actually passing under the bar. */
.nav::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: 1.25rem;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, var(--nav-edge), transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  transition: opacity var(--dur-surface) var(--ease);
}
.nav[data-scrolled]::after { opacity: 1; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; block-size: 3.25rem; gap: 1rem; }
.nav-brand { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--text); border-radius: .375rem; }
.nav-brand svg { block-size: 1rem; inline-size: auto; aspect-ratio: 1545 / 163; }
@media (max-width: 40em) { .nav-brand svg { block-size: .875rem; } }

/* ── Sign-in region menu ──────────────────────────────────────────────────────
   A disclosure button that owns a small popover. The popover grows from the
   button's corner and shrinks back into it; it is hidden with visibility, so a
   closed menu takes no focus, no clicks and is absent from the accessibility tree. */
.signin { position: relative; }
.signin-btn svg {
  inline-size: .875rem; block-size: .875rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; color: var(--muted);
  transition: transform var(--dur-surface) var(--ease);
}
.signin[data-open="true"] .signin-btn { background: var(--elevated); }
.signin[data-open="true"] .signin-btn svg { transform: rotate(180deg); }
.signin-menu {
  position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; z-index: 60;
  inline-size: 16rem; padding: .375rem;
  background: var(--popover); border: 1px solid var(--border-2); border-radius: .875rem; box-shadow: var(--shadow-2);
  transform-origin: top right;
  opacity: 0; transform: scale(.96); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-surface) var(--ease), transform var(--dur-surface) var(--ease), visibility 0s linear var(--dur-surface);
}
.signin[data-open="true"] .signin-menu {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-surface) var(--ease), transform var(--dur-surface) var(--ease), visibility 0s;
}
.signin-title { padding: .5rem .625rem .375rem; font-size: var(--fs-12); font-weight: 500; letter-spacing: 0; color: var(--faint); }
.signin-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: 2.5rem; padding-inline: .625rem; border-radius: .5625rem;
  text-decoration: none; color: var(--text);
  transition: background-color var(--dur-press) var(--ease);
}
.signin-item:hover, .signin-item:focus-visible { background: var(--tint-strong); }
.signin-item:focus-visible { outline-offset: -2px; }
.signin-item:active { background: var(--tint-strong); }
.signin-region { font-size: var(--fs-15); font-weight: 550; letter-spacing: -0.009em; }
.signin-host { font-size: var(--fs-13); color: var(--muted); letter-spacing: -0.003em; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding-block: var(--section-pad); }
.band { background: var(--band); }
.section-head { max-inline-size: 50rem; }
.section-head .lede { margin-block-start: 1.25rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

.card {
  position: relative;
  background: linear-gradient(180deg, var(--card-a) 0%, var(--card-b) 100%);
  border: 1px solid var(--border);
  border-radius: 1.125rem;
  box-shadow: var(--shadow-1);
}
.card::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px;
  background: var(--card-highlight); border-radius: inherit; pointer-events: none;
}

.points li { padding-block: 1.25rem; border-block-start: 1px solid var(--border); color: var(--muted); text-wrap: pretty; }
.points li:first-child { border-block-start: 0; padding-block-start: 0; }
.points strong { color: var(--text); font-weight: 600; }
.points--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }
.points--row li, .points--row li:first-child { border-block-start: 1px solid var(--border); padding-block: 1.25rem 0; }
@media (max-width: 48em) { .points--row { grid-template-columns: minmax(0, 1fr); gap: 0; } .points--row li { padding-block: 1.25rem; } }

.feature-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
}
.feature-grid--mirror { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.feature-grid--mirror > .feature-visual { grid-column: 2; grid-row: 1; }
.feature-grid--mirror > .points { grid-column: 1; grid-row: 1; }
.feature-grid > .points { padding-block-start: .5rem; }
@media (max-width: 60em) {
  .feature-grid, .feature-grid--mirror { grid-template-columns: minmax(0, 1fr); }
  .feature-grid--mirror > .feature-visual, .feature-grid--mirror > .points { grid-column: auto; grid-row: auto; }
}
@media (min-width: 40em) and (max-width: 60em) {
  .feature-grid > .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .feature-grid > .points li { border-block-start: 1px solid var(--border); padding-block-start: 1.25rem; }
}

/* Status badges, as the product draws them: hairline ring on a soft wash. */
.badge {
  display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap;
  block-size: 1.375rem; padding-inline: .5625rem; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--tint); color: var(--muted);
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .07em; line-height: 1;
}
.badge--ok { color: var(--success-text); background: var(--success-soft); border-color: var(--success-line); }
.badge--warn { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-line); }
.badge--bad { color: var(--error-text); background: var(--error-soft); border-color: var(--error-line); }
.badge--info { color: var(--info-text); background: var(--info-soft); border-color: var(--info-line); }
.badge--faint { color: var(--faint); }
.dot { inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: currentColor; flex: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 1rem + 5vw, 5.5rem) clamp(4rem, 2rem + 5vw, 7rem); text-align: center; overflow: clip; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero .lede { margin-block: 1.375rem 2rem; max-inline-size: 41rem; margin-inline: auto; }
.hero .cta-row { justify-content: center; }
.hero-visual { position: relative; isolation: isolate; inline-size: min(100% - 2 * var(--gutter), 72rem); margin: clamp(3rem, 1.5rem + 3vw, 4.5rem) auto 0; }
.hero-visual::before {
  content: ""; position: absolute; inset: 10% 6% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 42%, var(--stage-glow), transparent 72%);
  filter: blur(40px);
}
.hero-caption { margin-block-start: 1.25rem; }

/* One orchestrated entrance, then nothing moves. Readable at rest: under reduced
   motion the copy and the console only fade. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 720ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .console-rise { animation: console-rise 1100ms var(--ease) 300ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .console-rise { animation: fade 240ms ease both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes console-rise { from { opacity: 0; transform: translateY(48px) scale(.965); } }
@keyframes fade { from { opacity: 0; } }

/* ── Sources: generic platform categories feeding the one pane ─────────────── */
.sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 2.5vw, 1.5rem); max-inline-size: 52rem; margin-inline: auto; }
.source {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 2.75rem; padding: .5rem .875rem;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--shadow-1);
  font-size: var(--fs-13); font-weight: 550; line-height: 1.25; letter-spacing: -0.003em; color: var(--text); text-align: center;
}
.source svg { inline-size: 1.0625rem; block-size: 1.0625rem; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.feed { inline-size: 100%; max-inline-size: 52rem; block-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); margin-inline: auto; overflow: visible; }
.feed path { fill: none; stroke: url(#feedInk); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 45em) {
  .source { flex-direction: column; gap: .25rem; padding: .625rem .25rem; border-radius: .875rem; font-size: var(--fs-12); }
}

/* ── Console: an illustrative rendering in the product's own visual language ── */
.console {
  position: relative; overflow: hidden; text-align: start; letter-spacing: normal;
  border-radius: 1.375rem; border: 1px solid var(--border-2);
  background: var(--bg); box-shadow: var(--shadow-hero);
}
.console::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; z-index: 2;
  background: var(--warm-edge); opacity: .85;
}
.c-shell { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); }
.c-rail-col { display: flex; align-items: center; justify-content: center; }
.c-rail {
  inline-size: 4rem; padding-block: .625rem; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; gap: .3125rem;
  background: var(--rail-bg); border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.c-ri { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: .75rem; color: var(--muted); }
.c-ri svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.c-ri.is-on { background: var(--accent-fill); color: #fff; box-shadow: var(--btn-highlight); }
.c-ri-sep { inline-size: 1.5rem; block-size: 1px; background: var(--border); margin-block: .25rem; }
.c-main { padding: 1.25rem 1.75rem 1.75rem .25rem; min-inline-size: 0; }
.c-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-end: .875rem; border-block-end: 1px solid var(--border); }
.c-wm { block-size: .8125rem; inline-size: auto; aspect-ratio: 1545 / 163; color: var(--text); }
.c-bar-end { display: flex; align-items: center; gap: .625rem; }
.c-pill {
  display: inline-flex; align-items: center; gap: .375rem; block-size: 2.125rem; padding-inline: .875rem .625rem;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-13); font-weight: 500; color: var(--text);
}
.c-pill svg, .fpill svg { inline-size: .875rem; block-size: .875rem; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-avatar {
  display: grid; place-items: center; inline-size: 2.125rem; block-size: 2.125rem; border-radius: 50%;
  background: var(--elevated); border: 1px solid var(--border-2); color: var(--muted);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em;
}
.c-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block: 1.375rem 1.125rem; }
.c-title { font-size: 1.625rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.c-sub { font-size: var(--fs-13); line-height: 1.5; color: var(--muted); margin-block-start: .25rem; }
.c-seg {
  display: flex; padding: .1875rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-12); font-weight: 500; color: var(--muted); flex: none;
}
.c-seg span { display: grid; place-items: center; block-size: 1.75rem; padding-inline: .75rem; border-radius: 999px; }
.c-seg .is-on { background: var(--elevated); color: var(--text); box-shadow: var(--shadow-1); }
.c-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.c-kpi { padding: .875rem 1rem; border-radius: .875rem; }
.c-eb { font-size: var(--fs-11); font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.c-fig { font-size: 1.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin-block: .4375rem .3125rem; }
.c-cap { font-size: var(--fs-12); line-height: 1.5; color: var(--muted); }
.c-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: .75rem; margin-block-start: .75rem; }
.c-panel { padding: 1rem 1.125rem 1.125rem; border-radius: .875rem; }
.c-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-block-end: .875rem; flex-wrap: wrap; }
.c-pt { font-size: var(--fs-14); font-weight: 650; letter-spacing: -0.006em; }
.c-ps { font-size: var(--fs-12); color: var(--muted); }
/* Cells stretch to the row's height so every row's hairline lines up; content centres inside. */
.c-matrix { display: grid; grid-template-columns: 4.75rem repeat(4, minmax(0, 1fr)); align-items: stretch; font-size: var(--fs-13); }
.mrow { display: contents; }
.mrow > span { padding-block: .4375rem; border-block-start: 1px solid var(--border); }
.mrow--head > span { border-block-start: 0; padding-block: 0 .375rem; }
.mh { font-size: var(--fs-11); font-weight: 600; color: var(--faint); text-align: center; }
.mn { display: flex; align-items: center; font-weight: 500; }
.mc { display: grid; place-items: center; }
.mdot { display: inline-block; inline-size: .5625rem; block-size: .5625rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.mdot--warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.mdot--info { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.mnone { color: var(--faint); font-weight: 600; }
.c-mlegend { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-block-start: .875rem; font-size: var(--fs-11); font-weight: 500; color: var(--muted); }
.c-mlegend span { display: inline-flex; align-items: center; gap: .4375rem; }
.c-inc li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .625rem; padding-block: .4375rem; border-block-start: 1px solid var(--border); }
.c-inc li:first-child { border-block-start: 0; padding-block-start: 0; }
.c-inc .badge { justify-self: start; }
.ib { display: flex; flex-direction: column; min-inline-size: 0; }
.it { font-size: var(--fs-13); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im { font-size: var(--fs-12); color: var(--faint); }

@media (max-width: 64em) {
  .c-shell { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .c-kpi { padding: .75rem .875rem; }
  .c-fig { font-size: 1.5rem; }
}
@media (max-width: 45em) {
  .console { border-radius: 1.125rem; }
  .c-shell { grid-template-columns: minmax(0, 1fr); }
  .c-rail-col, .c-pill, .c-seg, .c-inc .sla { display: none; }
  .c-main { padding: 1rem; }
  .c-head { margin-block: 1rem .875rem; }
  .c-title { font-size: 1.375rem; }
  .c-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .c-kpi { padding: .75rem; }
  .c-panels { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-block-start: .5rem; }
  .c-panel { padding: .875rem; }
  .c-matrix { grid-template-columns: 4.25rem repeat(4, minmax(0, 1fr)); }
  .c-inc li { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

/* ── One view: client comparison ──────────────────────────────────────────── */
.cmp { padding: clamp(1.125rem, .75rem + 1.2vw, 1.75rem); }
.cmp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem; }
.cmp-title { font-size: var(--fs-17); font-weight: 650; letter-spacing: -0.013em; line-height: 1.3; }
.cmp-sub { font-size: var(--fs-13); color: var(--muted); line-height: 1.5; margin-block-start: .25rem; }
.fpill {
  display: inline-flex; align-items: center; gap: .375rem; block-size: 2.125rem; padding-inline: .75rem .5rem;
  border-radius: .625rem; background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-13); font-weight: 500; color: var(--text); letter-spacing: -0.003em;
}
.crow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 3.5rem 8.25rem;
  grid-template-areas: "name bar gaps conn";
  align-items: center; gap: 1rem; padding-block: .875rem; border-block-start: 1px solid var(--border);
  font-size: var(--fs-14); letter-spacing: -0.006em;
}
.crow--head { padding-block: 0 .625rem; border-block-start: 0; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.c-name { grid-area: name; font-weight: 550; }
.c-name small { display: none; font-size: var(--fs-12); font-weight: 400; color: var(--faint); }
.c-bar2 { grid-area: bar; display: flex; align-items: center; gap: .75rem; }
.c-bar2 .trk { flex: 1; block-size: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.c-bar2 .trk i { display: block; block-size: 100%; inline-size: var(--p); background: var(--success); border-radius: inherit; }
.c-bar2 b { min-inline-size: 2.75rem; text-align: end; font-weight: 600; font-size: var(--fs-13); }
.c-gaps { grid-area: gaps; text-align: end; color: var(--muted); font-weight: 500; }
.c-conn { grid-area: conn; justify-self: end; }
.cmp-foot { padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
@media (max-width: 40em) {
  .crow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name conn" "bar bar"; row-gap: .5rem; }
  .crow--head { display: none; }
  .crow:nth-child(2) { border-block-start: 0; }
  .c-gaps { display: none; }
  .c-name small { display: inline; }
}

/* ── Incidents ────────────────────────────────────────────────────────────── */
.tickets { margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
.tcard { padding-block: .75rem 0; overflow: hidden; }
.trow {
  display: grid; align-items: center; column-gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 4.75rem 6.5rem 9.25rem 9.25rem;
  grid-template-areas: "title client ref prio status resp resol";
  padding: .875rem 1.5rem; border-block-start: 1px solid var(--border);
  font-size: var(--fs-14); letter-spacing: -0.006em;
}
.trow--head { border-block-start: 0; padding-block: .5rem .75rem; font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.t-ref { grid-area: ref; color: var(--muted); }
.t-title { grid-area: title; font-weight: 550; }
.t-client { grid-area: client; color: var(--muted); }
.t-prio { grid-area: prio; }
.t-status { grid-area: status; }
.t-sla { display: contents; }
.t-resp { grid-area: resp; }
.t-resol { grid-area: resol; }
.tfoot { display: flex; justify-content: space-between; align-items: center; padding: .875rem 1.5rem; border-block-start: 1px solid var(--border); background: var(--tint); }
.sla {
  display: inline-flex; align-items: center; gap: .4375rem; block-size: 1.625rem; padding-inline: .625rem;
  border-radius: .5rem; border: 1px solid var(--border-2); background: var(--tint);
  font-size: var(--fs-12); font-weight: 600; white-space: nowrap; color: var(--text);
}
.sla .k { color: var(--faint); font-weight: 500; }
.sla--met { color: var(--success-text); background: var(--success-soft); border-color: var(--success-line); }
.sla--bad { color: var(--error-text); background: var(--error-soft); border-color: var(--error-line); }
.sla--met .k, .sla--bad .k { color: inherit; opacity: .8; }
@media (max-width: 75em) {
  .trow { grid-template-columns: minmax(0, 1fr) 5rem 5rem 4.5rem 6.25rem 8.75rem 8.75rem; column-gap: .75rem; padding-inline: 1.25rem; }
}
@media (max-width: 60em) {
  .trow--head { display: none; }
  .trow {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "prio status status" "title title title" "client ref ref" "sla sla sla";
    row-gap: .375rem; column-gap: .375rem; padding: 1rem 1.25rem;
  }
  .trow:nth-child(2) { border-block-start: 0; }
  .t-status { justify-self: end; }
  .t-sla { display: flex; flex-wrap: wrap; gap: .375rem; grid-area: sla; margin-block-start: .25rem; }
  .t-client, .t-ref { font-size: var(--fs-13); }
  .t-ref::before { content: "· "; }
}

/* ── Reports stage ────────────────────────────────────────────────────────── */
.stage { position: relative; container-type: inline-size; aspect-ratio: 5 / 4; isolation: isolate; }
.stage::before {
  content: ""; position: absolute; inset: 14% 10% 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--stage-glow), transparent 72%); filter: blur(36px);
}
.sheet {
  position: absolute; overflow: hidden; border-radius: 1.6cqw;
  background: var(--paper); color: var(--paper-ink);
  border: 1px solid var(--paper-line); box-shadow: var(--shadow-3);
}
.sheet--doc { inline-size: 35%; aspect-ratio: 1 / 1.414; inset-inline-start: 1%; inset-block-start: 7%; transform: rotate(-6deg); padding: 3.4cqw 3cqw; }
.sheet--deck { inline-size: 57%; aspect-ratio: 16 / 9; inset-inline-end: 0; inset-block-start: 1%; transform: rotate(3deg); padding: 2.6cqw 3cqw; }
.sheet--pdf {
  inline-size: 38%; aspect-ratio: 1 / 1.414; inset-inline-start: 26%; inset-block-start: 27%; z-index: 3;
  background: #141416; color: #f4f5f7; border-color: #2a2a30; padding: 3.2cqw 3cqw;
  display: flex; flex-direction: column;
}
.sheet--sheet { inline-size: 31%; inset-inline-end: 3%; inset-block-end: 3%; z-index: 4; padding: 2cqw; transform: rotate(-2deg); }
.logo-slot {
  display: grid; place-items: center; inline-size: 13cqw; block-size: 4.6cqw; border-radius: .9cqw;
  border: 1px dashed rgba(244, 245, 247, .45); color: rgba(244, 245, 247, .78);
  font-size: 1.45cqw; font-weight: 600; letter-spacing: .02em;
}
.pdf-kicker { margin-block-start: auto; font-size: 1.25cqw; font-weight: 700; letter-spacing: .16em; color: #f2530f; }
.pdf-title { margin-block-start: 1.1cqw; font-size: 2.75cqw; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.pdf-client { margin-block-start: 1.6cqw; font-size: 1.6cqw; color: #9aa0ab; letter-spacing: -0.005em; }
.pdf-rule { margin-block-start: 3cqw; block-size: .45cqw; inline-size: 9cqw; border-radius: 1cqw; background: linear-gradient(90deg, #ffc300, #ff9f00 40%, #f2530f); }
.sk { display: block; block-size: 1cqw; border-radius: 1cqw; background: var(--paper-soft); }
.sk + .sk { margin-block-start: 1.1cqw; }
.doc-h { font-size: 1.9cqw; font-weight: 700; letter-spacing: -0.015em; margin-block-end: 2cqw; }
.doc-tbl { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .7cqw; margin-block: 2.4cqw; }
.doc-tbl i { block-size: 1.9cqw; border-radius: .4cqw; background: var(--paper-soft); opacity: .7; }
.doc-tbl i:nth-child(-n+3) { background: var(--paper-ink); opacity: .78; }
.slide-h { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.8cqw; font-weight: 700; letter-spacing: -0.015em; }
.slide-h::before { content: ""; inline-size: .5cqw; block-size: 2.4cqw; border-radius: 1cqw; background: #f2530f; }
.slide-body { display: grid; grid-template-columns: 1fr auto; gap: 3cqw; align-items: center; margin-block-start: 2.6cqw; }
.donut {
  inline-size: 13cqw; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--success) 0 62%, var(--error) 62% 84%, var(--paper-soft) 84% 100%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%);
}
.slide-kpis { display: grid; gap: 1.6cqw; }
.xgrid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2px; border-radius: .6cqw; overflow: hidden; }
.xgrid i { block-size: 2.3cqw; background: var(--paper-soft); opacity: .55; }
.xgrid i:nth-child(-n+4) { opacity: 1; background: #12794a; }
.xtag { margin-block-end: 1.4cqw; font-size: 1.4cqw; font-weight: 700; letter-spacing: .02em; }
.formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-block-start: 2rem; }
.formats li { display: flex; flex-direction: column; gap: .375rem; padding-block-start: .875rem; border-block-start: 1px solid var(--border); }
.fmt { font-size: var(--fs-13); font-weight: 600; color: var(--text); letter-spacing: -0.003em; }
.fmt-d { font-size: var(--fs-13); line-height: 1.4; color: var(--muted); }
@media (max-width: 40em) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.langs { margin-block-start: clamp(4rem, 3rem + 4vw, 7rem); padding-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-block-start: 1px solid var(--border); text-align: center; }
.langs .caption { margin-block-end: 1.5rem; }
.lang-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem clamp(1.25rem, 3vw, 2.75rem);
  margin-inline: auto; max-inline-size: 64rem;
  font-size: clamp(1.375rem, .9rem + 1.6vw, 2.25rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em;
}
.lang-list li:nth-child(even) { color: var(--muted); }
/* Never track Arabic (connected letterforms) or CJK. */
.lang-list :lang(ar), .lang-list :lang(ja), .lang-list :lang(zh) { letter-spacing: 0; }

/* ── Built for service providers ──────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(2rem, 4vw, 3.5rem); margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
.facts li { padding-block-start: 1.25rem; border-block-start: 1px solid var(--border-2); }
.fact-t { font-size: var(--fs-21); font-weight: 640; line-height: 1.25; letter-spacing: -0.017em; margin-block-end: .5rem; }
.fact-b { color: var(--muted); text-wrap: pretty; }
@media (max-width: 60em) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .facts { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } }

/* ── Closing call to action and footer ────────────────────────────────────── */
.closing { text-align: center; }
.closing .h2 { max-inline-size: 15em; margin-inline: auto; }
.closing .lede { margin-block: 1.25rem 2.25rem; margin-inline: auto; }
.closing .cta-row { justify-content: center; }
.closing-alt { margin-block-start: 1.5rem; font-size: var(--fs-15); color: var(--muted); }
.closing-alt a { color: var(--text); font-weight: 500; text-underline-offset: .2em; display: inline-block; padding-block: .25rem; }
.footer { border-block-start: 1px solid var(--border); padding-block: 2.5rem 3rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.footer-brand svg { block-size: .8125rem; inline-size: auto; aspect-ratio: 1545 / 163; color: var(--text); }
.seg { display: inline-flex; padding: .1875rem; border-radius: 999px; border: 1px solid var(--control-line); background: var(--tint); }
.seg button {
  font: inherit; font-size: var(--fs-12); font-weight: 500; letter-spacing: 0; color: var(--muted);
  min-block-size: 1.875rem; padding-inline: .75rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  transition: transform var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease);
}
.seg button:active { transform: scale(.97); }
.seg button[aria-pressed="true"] { background: var(--elevated); color: var(--text); box-shadow: var(--shadow-1); }

/* ── Input and preference adaptations ─────────────────────────────────────── */
@media (pointer: coarse) {
  .btn, .btn-sm, .link-more, .seg button, .signin-item { min-block-size: 2.75rem; }
  .closing-alt a { padding-block: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .seg button:active { transform: none; opacity: .8; }
  .signin-menu, .signin[data-open="true"] .signin-menu { transform: none; }
  .signin-btn svg { transition: none; }
  .link-more:hover svg { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .signin-menu { background: var(--surface-2); }
  .c-rail { background: var(--surface); }
}
@media (prefers-contrast: more) {
  :root { --border: #70757f; --border-2: #70757f; }
  :root[data-theme="light"] { --border: #80868f; --border-2: #80868f; }
  .nav-bar { background: var(--bg); border-block-end: 1px solid var(--control-line); }
  .nav::after { display: none; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --border: #80868f; --border-2: #80868f; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-surface); animation-timing-function: var(--ease); }

/* ════════════════════════════════════════════════════════════════════════════
   Site additions beyond the mock: footer meta row, the contact dialog, legal
   pages and the 404 page. They reuse the mock's tokens; contrast pairs below are
   computed the same way (WCAG 2.x).

   Dialog, dark: text on popover #1a1a1e 15.90 · muted 6.60 · faint 5.01 ·
     field text on surface #141416 16.87 · control line on popover (boundary) 3.75 ·
     error text #f36060 on popover 5.50, on its wash 4.87 · success on its wash 5.98 ·
     focus ring #f2530f on popover 4.97.
   Dialog, light: text on white 17.76 · muted 6.21 · faint 5.42 · control line 3.67 ·
     error text #b82424 on white 6.33, on its wash 5.51 · success on its wash 5.57 ·
     focus ring #b93d0b on white 5.62.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Footer meta row ──────────────────────────────────────────────────────── */
.footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem;
  margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--border);
}
.footer-meta a, .footer-links a { color: var(--muted); text-underline-offset: .2em; }
.footer-meta a:hover, .footer-links a:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: var(--fs-13); }
.footer-links a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }

/* ── Contact dialog ───────────────────────────────────────────────────────── */
html.dialog-open { overflow: hidden; }
.dialog {
  inline-size: min(100% - 2rem, 38rem); max-inline-size: none;
  max-block-size: calc(100dvh - 2rem);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--border-2); border-radius: 1.25rem;
  background: var(--popover); color: var(--text); box-shadow: var(--shadow-3);
  letter-spacing: -0.011em;
}
.dialog::backdrop {
  background: rgba(5, 5, 6, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:root[data-theme="light"] .dialog::backdrop { background: rgba(16, 18, 24, .38); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .dialog::backdrop { background: rgba(16, 18, 24, .38); }
}
.dialog-inner { padding: clamp(1.25rem, .9rem + 1.6vw, 2rem); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog-title { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); font-weight: 680; line-height: 1.15; letter-spacing: -0.022em; }
.dialog-intro { margin-block-start: .5rem; font-size: var(--fs-15); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dialog-close {
  display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; margin: -.375rem -.375rem 0 0;
  border: 1px solid var(--control-line); border-radius: .75rem; background: var(--tint); color: var(--text); cursor: pointer;
  transition: background-color var(--dur-press) var(--ease);
}
.dialog-close:hover { background: var(--elevated); }
.dialog-close svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 1rem; margin-block-start: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .4375rem; min-inline-size: 0; }
.field--wide { grid-column: 1 / -1; }
@media (max-width: 40em) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field-label { font-size: var(--fs-14); font-weight: 550; line-height: 1.3; letter-spacing: -0.006em; }
.field-optional { font-weight: 400; color: var(--faint); }
.input {
  inline-size: 100%; min-block-size: 2.75rem; padding: .625rem .8125rem; margin: 0;
  border: 1px solid var(--control-line); border-radius: .625rem;
  background: var(--surface); color: var(--text);
  /* 16px or larger, or iOS Safari zooms the page when a field takes focus. */
  font: inherit; font-size: 1rem; line-height: 1.4; letter-spacing: -0.011em;
  transition: border-color var(--dur-press) var(--ease);
}
.input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); }
.input[aria-invalid="true"] { border-color: var(--error-text); }
textarea.input { min-block-size: 8.5rem; resize: vertical; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.5rem; cursor: pointer; }
.select-wrap svg {
  position: absolute; inset-inline-end: .875rem; inset-block-start: 50%; translate: 0 -50%; pointer-events: none;
  inline-size: .875rem; block-size: .875rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.field-error { font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--error-text); }
.field-error::before { content: "! "; font-weight: 700; }
.field-error[hidden] { display: none; }

/* Off-screen, not display:none, so naive bots still see and fill it. */
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.turnstile-slot { margin-block-start: 1rem; }
.turnstile-slot:empty { display: none; }

.form-alert {
  margin-block-start: 1.25rem; padding: .75rem .9375rem; border-radius: .75rem;
  border: 1px solid var(--error-line); background: var(--error-soft); color: var(--error-text);
  font-size: var(--fs-14); font-weight: 500; line-height: 1.45; text-wrap: pretty;
}
.form-alert:empty { display: none; }

.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 1.5rem; }
.dialog-note { font-size: var(--fs-13); line-height: 1.45; color: var(--faint); }
.dialog-note a { color: var(--muted); text-underline-offset: .2em; display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.dialog-buttons { display: flex; gap: .75rem; margin-inline-start: auto; }
.btn[aria-disabled="true"] { cursor: progress; opacity: .78; }
.btn[aria-disabled="true"]:active { transform: none; }
@media (max-width: 40em) {
  .dialog-buttons { inline-size: 100%; }
  .dialog-buttons .btn { flex: 1; }
}

.contact-done { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding-block: 1.75rem .5rem; text-align: center; }
.contact-done:focus { outline: none; }
.contact-done:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: .75rem; }
.contact-done[hidden] { display: none; }
.contact-done-mark {
  display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%;
  background: var(--success-soft); border: 1px solid var(--success-line); color: var(--success-text);
}
.contact-done-mark svg { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.contact-done-title { margin-block-start: .375rem; font-size: var(--fs-21); font-weight: 650; letter-spacing: -0.017em; }
.contact-done-body { color: var(--muted); font-size: var(--fs-15); overflow-wrap: anywhere; }
.contact-done .btn { margin-block-start: 1rem; min-inline-size: 8rem; }

@media (prefers-reduced-motion: no-preference) {
  .dialog[open] { animation: dialog-in var(--dur-surface) var(--ease); }
  .dialog[open]::backdrop { animation: fade var(--dur-surface) ease; }
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-transparency: reduce) {
  .dialog { background: var(--surface-2); }
  .dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Legal pages ──────────────────────────────────────────────────────────── */
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 4vw, 7rem); }
.legal-head { max-inline-size: 46rem; }
.legal-head .lede { margin-block-start: 1.25rem; }
.legal-dates { margin-block-start: 1.25rem; }
.prose { max-inline-size: 46rem; margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.prose h2 { margin-block: 2.75rem .75rem; font-size: var(--fs-21); font-weight: 650; line-height: 1.3; letter-spacing: -0.017em; }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { margin-block: 1.75rem .5rem; font-size: var(--fs-17); font-weight: 650; line-height: 1.35; }
.prose p, .prose li { color: var(--muted); text-wrap: pretty; }
.prose p + p, .prose ul + p, .prose p + ul { margin-block-start: .875rem; }
.prose ul { list-style: disc; padding-inline-start: 1.25rem; }
.prose li + li { margin-block-start: .375rem; }
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--text); text-underline-offset: .2em; overflow-wrap: anywhere; }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.notfound { padding-block: clamp(5rem, 3rem + 8vw, 10rem); text-align: center; }
.notfound .lede { margin: 1.25rem auto 2.25rem; }
.notfound .cta-row { justify-content: center; }