/*!
 * SDO public site — brand-book design system
 * ===========================================================================
 * Tokens:  sdo mvp.html  (official brand book, Master Playbook §21–23)
 * Spec:    specs/2026-09-10-public-site-redesign-design.md
 *
 * SCOPE — read before editing
 *   Every rule in this file is nested under one of:
 *     body.sdo-landing-page · body.sdo-site-page · body.sdo-auth-page
 *   This file is linked only from public layouts. The dashboard never loads it.
 *   NEVER add an unscoped global selector here (body, html, h1-h6, a, button,
 *   input, *) — that is the one change that could reach the dashboard.
 *
 * CASCADE — unlayered, linked last
 *   During the migration this mattered a great deal: unlayered normal
 *   declarations beat layered ones regardless of load order, and the legacy
 *   sheets (landing.css 51x, auth-pages.css 90x !important) were unlayered, so
 *   being unlayered and last was what let this sheet win without escalation.
 *
 *   Those sheets are now deleted (Task 17) and this is the only public
 *   stylesheet apart from Tailwind. Keep it unlayered anyway: Tailwind's
 *   utilities sit in @layer utilities and therefore already lose to unlayered
 *   rules, so layering this file would only restart a fight it has won.
 *   Do not wrap this file in @layer. See spec §4.1.
 *
 *   The only !important left is the prefers-reduced-motion block, which must
 *   beat animation and inline styles by design.
 *
 * TOKEN DISCIPLINE
 *   Brand book: "هیچ رنگ یا فاصله‌ای خارج از آن در پروژه نوشته نمی‌شود"
 *   No colour, spacing, or radius literal below the TOKENS section.
 *   Spacing from the 4px scale only. Radii 9/14/22. One shadow level.
 *   #A78BFA (--ai) marks machine-generated output ONLY — never decorative.
 *
 * SECTIONS
 *   1. TOKENS      — brand palette, derived light ramp, scales
 *   2. BASE        — typography, Persian rules, focus, reduced motion
 *   3. LAYOUT      — container, section rhythm
 *   4. COMPONENTS  — filled by Tasks 4–15
 *   5. UTILITIES   — sparingly
 * ===========================================================================
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   Dark is the base: the brand book defines no light theme (spec D1).
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page,
body.sdo-site-page,
body.sdo-auth-page {
  /* ── Brand: the only brand colour ───────────────────────────────────── */
  --cyan: #2BBBE9;        /* primary action · emphasis                     */
  --cyan-400: #3EBFEA;    /* hover                                         */
  --cyan-300: #6FD3F2;    /* link text on dark                             */
  --cyan-600: #159FCC;    /* active · secondary border                     */
  --cyan-700: #0E7FA8;
  --cyan-800: #0C6E92;    /* derived: light-mode brand text, 5.48:1        */
  --cyan-100: #CBEEFB;

  /* ── Navy surfaces — ~75% of every page, depth by LIGHTNESS ─────────── */
  --navy-950: #040C16;    /* level 0 — page background                     */
  --navy-900: #071426;
  --navy-850: #0A1B30;    /* level 1 — card                                */
  --navy-800: #0E2338;    /* level 2 — toolbar, table header               */
  --navy-700: #143050;    /* level 3 — modal, floating menu                */
  --line: #1D3A59;

  /* ── Ink ────────────────────────────────────────────────────────────── */
  --ink-0: #F3F8FD;       /* heading    */
  --ink-1: #BCCEE0;       /* body       */
  --ink-2: #8AA2B9;       /* secondary  */
  --ink-3: #5E778F;       /* label      */

  /* ── Semantic — max 2% of any page ──────────────────────────────────── */
  --ok: #34D399;
  --warn: #FBBF24;
  --risk: #F87171;
  --ai: #A78BFA;          /* machine-generated output ONLY                  */

  /* ── Data viz ───────────────────────────────────────────────────────── */
  --d1: #2BBBE9; --d2: #A78BFA; --d3: #34D399;
  --d4: #FBBF24; --d5: #F472B6; --d6: #7C93F5;

  /* ── Spacing — multiples of 4 only ──────────────────────────────────── */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s6: 24px; --s8: 32px;  --s12: 48px; --s16: 64px;

  /* Header height — the fixed header offsets the body and every anchor. */
  --header-h: 56px;

  /* ── Radii + the single shadow level ────────────────────────────────── */
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-3: 0 18px 48px rgb(0 0 0 / .42);   /* level 3 only              */

  /* ── Type scale (brand book §3.2) ───────────────────────────────────── */
  --fs-display: 44px;     /* landing hero only        */
  --fs-h1: 34px;
  --fs-h2: 27px;
  --fs-h3: 21px;
  --fs-body: 15.5px;
  --fs-small: 13.5px;
  --fs-caption: 12px;
  --fs-mono: 13px;
  --fs-prose: 17px;       /* approved extension: article body, spec §4.5   */

  --lh-body: 1.95;        /* Persian needs 1.9-2.0 — "فارسی فشرده خوانا نیست" */
  --lh-prose: 2;
  --lh-heading: 1.45;

  --font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ── Semantic aliases — components use ONLY these, never raw palette ── */
  --surface-0: var(--navy-950);
  --surface-1: var(--navy-850);
  --surface-2: var(--navy-800);
  --surface-3: var(--navy-700);
  --border: var(--line);

  --text: var(--ink-1);
  --text-strong: var(--ink-0);
  --text-muted: var(--ink-2);
  --text-label: var(--ink-2);   /* NOT ink-3: it is 4.22:1 on navy-950,
                                   below AA for 12px captions (spec §4.3) */

  --brand-text: var(--cyan-400);        /* 9.21:1 on --surface-0           */
  --brand-fill: var(--cyan);
  --brand-fill-ink: #04121C;            /* 8.47:1 on --brand-fill          */
  --brand-fill-border: transparent;
  --brand-fill-hover: var(--cyan-400);
  --brand-line: var(--cyan-600);
}

/* ── Light: mirror the lightness structure, keep the 213° cool cast ──────
   Not pure greys, not inverted hex values. Depth INVERTS here: cards are
   white on a cool grey page. Every pair verified by scripts/check_contrast.py.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="light"] body.sdo-landing-page,
[data-theme="light"] body.sdo-site-page,
[data-theme="light"] body.sdo-auth-page {
  --surface-0: #F8FAFC;
  --surface-1: #FFFFFF;
  --surface-2: #EEF2F6;
  --surface-3: #FFFFFF;
  --border: #D6DDE6;

  --text: #293E56;              /* 10.47:1 */
  --text-strong: #0A1B30;       /* 16.56:1 */
  --text-muted: #566981;        /*  5.38:1 */
  --text-label: #5E7187;        /*  4.79:1 */

  --brand-text: var(--cyan-800);        /* 5.48:1 — NOT --cyan (2.24:1)    */
  --brand-fill: var(--cyan);            /* primary button identical in both
                                           themes: brand signature CTA      */
  --brand-fill-ink: #04121C;
  --brand-fill-border: var(--cyan-800); /* lifts boundary past 3:1          */
  --brand-fill-hover: var(--cyan-400);
  --brand-line: var(--cyan-600);

  --shadow-3: 0 18px 48px rgb(15 23 42 / .12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════════════ */

/* border-box, scoped. site.css must be self-sufficient: the auth pages left the
   dashboard shell in Task 15 and nothing else was setting this for them, so
   every padded control was overflowing its own width by its padding —
   a 354px field rendering a 436px input, which pushed the password toggle into
   the middle of the box. The public pages inherited it from the legacy
   intro/css/style.css; stating it here means they stop depending on that too.
   Scoped to the public body classes, never a bare `*`. */
body.sdo-landing-page *,
body.sdo-landing-page *::before,
body.sdo-landing-page *::after,
body.sdo-site-page *,
body.sdo-site-page *::before,
body.sdo-site-page *::after,
body.sdo-auth-page *,
body.sdo-auth-page *::before,
body.sdo-auth-page *::after {
  box-sizing: border-box;
}

body.sdo-landing-page,
body.sdo-site-page,
body.sdo-auth-page {
  box-sizing: border-box;
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow-x: hidden — it masks real overflow bugs (spec §9). */
}

body.sdo-landing-page :is(h1, h2, h3, h4, h5, h6),
body.sdo-site-page :is(h1, h2, h3, h4, h5, h6),
body.sdo-auth-page :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-strong);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin-block: 0;
}

/* Latin numerals in tables and amounts use mono — brand book law 9. */
body.sdo-landing-page .num,
body.sdo-site-page .num,
body.sdo-auth-page .num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Latin fragments (emails, phones, URLs) need their own direction island. */
body.sdo-landing-page .ltr,
body.sdo-site-page .ltr,
body.sdo-auth-page .ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Visible focus on every interactive element — never outline:none alone. */
body.sdo-landing-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.sdo-site-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.sdo-auth-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

body.sdo-landing-page ::selection,
body.sdo-site-page ::selection,
body.sdo-auth-page ::selection {
  background: color-mix(in oklab, var(--cyan) 28%, transparent);
  color: var(--text-strong);
}

body.sdo-landing-page img,
body.sdo-site-page img,
body.sdo-auth-page img {
  max-inline-size: 100%;
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.sdo-landing-page *,
  body.sdo-site-page *,
  body.sdo-auth-page * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .site-container,
body.sdo-site-page .site-container,
body.sdo-auth-page .site-container {
  inline-size: 100%;
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-inline: var(--s6);
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-container,
  body.sdo-site-page .site-container,
  body.sdo-auth-page .site-container {
    padding-inline: var(--s4);
  }
}

body.sdo-landing-page .site-section,
body.sdo-site-page .site-section {
  padding-block: var(--s16);
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-section,
  body.sdo-site-page .site-section {
    padding-block: var(--s12);
  }
}

/* Reading measure for long-form Persian — ~70 characters. */
body.sdo-site-page .site-measure {
  max-inline-size: 68ch;
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. COMPONENTS
   Keep each component in one contiguous block with a heading comment, in the
   order it appears in the page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   4.1 BUTTONS — brand book §4.1
   Four variants, no more. The primary is the ONE filled action on a page:
   "اگر همه‌چیز تأکید داشته باشد، هیچ‌چیز تأکید ندارد."
   Radius is --r-sm, not a pill: pills are the templated default and carry no
   information. Min block-size 44px is the brand book's touch-target floor.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .btn,
body.sdo-site-page .btn,
body.sdo-auth-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-block-size: 44px;
  padding-inline: var(--s6);
  padding-block: var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease);
}

/* Primary — max ONE per page. Dark ink on cyan (8.47:1), never white. */
body.sdo-landing-page .btn--primary,
body.sdo-site-page .btn--primary,
body.sdo-auth-page .btn--primary {
  background: var(--brand-fill);
  border-color: var(--brand-fill-border);
  color: var(--brand-fill-ink);
}
body.sdo-landing-page .btn--primary:hover,
body.sdo-site-page .btn--primary:hover,
body.sdo-auth-page .btn--primary:hover {
  background: var(--brand-fill-hover);
}

/* Secondary — important but not the main action. Max 2 in view. */
body.sdo-landing-page .btn--secondary,
body.sdo-site-page .btn--secondary,
body.sdo-auth-page .btn--secondary {
  background: transparent;
  border-color: var(--brand-line);
  color: var(--brand-text);
}
body.sdo-landing-page .btn--secondary:hover,
body.sdo-site-page .btn--secondary:hover,
body.sdo-auth-page .btn--secondary:hover {
  background: color-mix(in oklab, var(--cyan) 10%, transparent);
}

/* Neutral — cancel, back, filter, sort. */
body.sdo-landing-page .btn--neutral,
body.sdo-site-page .btn--neutral,
body.sdo-auth-page .btn--neutral {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
body.sdo-landing-page .btn--neutral:hover,
body.sdo-site-page .btn--neutral:hover,
body.sdo-auth-page .btn--neutral:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

/* Destructive — irreversible. Always paired with a second confirmation. */
body.sdo-landing-page .btn--destructive,
body.sdo-site-page .btn--destructive,
body.sdo-auth-page .btn--destructive {
  background: color-mix(in oklab, var(--risk) 12%, transparent);
  border-color: color-mix(in oklab, var(--risk) 40%, transparent);
  color: var(--risk);
}

body.sdo-landing-page .btn:disabled,
body.sdo-site-page .btn:disabled,
body.sdo-auth-page .btn:disabled,
body.sdo-landing-page .btn[aria-disabled="true"],
body.sdo-site-page .btn[aria-disabled="true"],
body.sdo-auth-page .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Text link that behaves as an action, without button chrome. */
body.sdo-landing-page .btn--quiet,
body.sdo-site-page .btn--quiet,
body.sdo-auth-page .btn--quiet {
  background: none;
  border-color: transparent;
  color: var(--text-muted);
  padding-inline: var(--s3);
}
body.sdo-landing-page .btn--quiet:hover,
body.sdo-site-page .btn--quiet:hover,
body.sdo-auth-page .btn--quiet:hover {
  color: var(--text);
}

/* ───────────────────────────────────────────────────────────────────────────
   4.2 HEADER — application chrome, not a floating pill
   SDO is an operations product; the marketing chrome echoes the product's own
   topbar. Full-bleed, flush to the viewport, one hard rule, no blur, no
   shadow, no radius. Depth comes from surface lightness (brand book law 5).
   JS contract: [data-demo-nav] gets .header-bar past 40px scroll.
   ─────────────────────────────────────────────────────────────────────────── */

/* FIXED, not sticky. Sticky only pins once its scroll container reaches it and
   can be dropped out of flow by an ancestor with overflow or transform; fixed
   guarantees the nav is reachable from anywhere on the page, which is what it
   is for. The body is padded by --header-h so nothing hides underneath. */
body.sdo-landing-page .site-header,
body.sdo-site-page .site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--surface-0) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
body.sdo-landing-page,
body.sdo-site-page {
  padding-block-start: var(--header-h);
}
/* Anchor targets must clear the fixed header. */
body.sdo-landing-page :target,
body.sdo-site-page :target,
body.sdo-landing-page section[id],
body.sdo-site-page section[id],
body.sdo-landing-page div[id],
body.sdo-site-page div[id] {
  scroll-margin-block-start: calc(var(--header-h) + var(--s6));
}

/* Scrolled: lift by lightness, never by shadow. landing.js adds .header-bar
   past 40px of scroll, so the state is real — only the !important escalation
   that fought landing.css:201 is gone with that sheet. */
body.sdo-landing-page .site-header.header-bar,
body.sdo-site-page .site-header.header-bar {
  background: var(--surface-1);
  border-color: var(--border);
}

body.sdo-landing-page .site-header__inner,
body.sdo-site-page .site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-block-size: var(--header-h);
}

body.sdo-landing-page .site-header__brand,
body.sdo-site-page .site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
  min-inline-size: 0;
}
body.sdo-landing-page .site-header__brand img,
body.sdo-site-page .site-header__brand img,
body.sdo-landing-page .site-footer .site-header__brand img,
body.sdo-site-page .site-footer .site-header__brand img {
  block-size: 36px;
  inline-size: auto;
  max-inline-size: 160px;
  object-fit: contain;
}

/* Fallback wordmark only when SiteSetting has no logo media */
body.sdo-landing-page .site-logo,
body.sdo-site-page .site-logo,
body.sdo-auth-page .site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-strong);
  line-height: 1;
}
body.sdo-landing-page .site-logo__mark,
body.sdo-site-page .site-logo__mark,
body.sdo-auth-page .site-logo__mark {
  display: block;
  inline-size: 28px;
  block-size: 28px;
  object-fit: contain;
}
body.sdo-landing-page .site-logo__text,
body.sdo-site-page .site-logo__text,
body.sdo-auth-page .site-logo__text {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

body.sdo-landing-page .site-nav,
body.sdo-site-page .site-nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

/* Nav links: the active state is a rule, not a pill. Same structural
   vocabulary as the header's own bottom rule. */
body.sdo-landing-page .site-nav__link,
body.sdo-site-page .site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  padding-inline: var(--s3);
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-nav__link:hover,
body.sdo-site-page .site-nav__link:hover {
  color: var(--text);
}
body.sdo-landing-page .site-nav__link.is-active,
body.sdo-site-page .site-nav__link.is-active,
body.sdo-landing-page [data-more-dropdown].is-open > .site-nav__link,
body.sdo-site-page [data-more-dropdown].is-open > .site-nav__link {
  color: var(--text-strong);
  border-block-end-color: var(--cyan);
}

body.sdo-landing-page .site-nav__chevron,
body.sdo-site-page .site-nav__chevron {
  font-size: 10px;
  transition: rotate .16s var(--ease);
}
body.sdo-landing-page [data-more-dropdown].is-open .site-nav__chevron,
body.sdo-site-page [data-more-dropdown].is-open .site-nav__chevron {
  rotate: 180deg;
}

/* Dropdown — a floating menu, so level 3 surface + the one shadow. */
body.sdo-landing-page .site-nav__more,
body.sdo-site-page .site-nav__more {
  position: relative;
}
body.sdo-landing-page .site-nav__dropdown,
body.sdo-site-page .site-nav__dropdown {
  position: absolute;
  inset-block-start: calc(100% + var(--s2));
  inset-inline-start: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--s1);
  padding: var(--s3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  transition: opacity .16s var(--ease), translate .16s var(--ease),
              visibility .16s var(--ease);
}
body.sdo-landing-page [data-more-dropdown].is-open .site-nav__dropdown,
body.sdo-site-page [data-more-dropdown].is-open .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

body.sdo-landing-page .site-nav__drop-item,
body.sdo-site-page .site-nav__drop-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  transition: background-color .16s var(--ease);
}
body.sdo-landing-page .site-nav__drop-item:hover,
body.sdo-site-page .site-nav__drop-item:hover {
  background: var(--surface-2);
}
body.sdo-landing-page .site-nav__drop-icon,
body.sdo-site-page .site-nav__drop-icon {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--brand-text);
  font-size: 13px;
}
body.sdo-landing-page .site-nav__drop-label,
body.sdo-site-page .site-nav__drop-label {
  display: block;
  color: var(--text-strong);
  font-weight: 600;
}
body.sdo-landing-page .site-nav__drop-desc,
body.sdo-site-page .site-nav__drop-desc {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-label);
}

body.sdo-landing-page .site-header__actions,
body.sdo-site-page .site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
  margin-inline-start: auto;
}

body.sdo-landing-page .site-header__icon-btn,
body.sdo-site-page .site-header__icon-btn {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-header__icon-btn:hover,
body.sdo-site-page .site-header__icon-btn:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}

body.sdo-landing-page .site-header__menu-btn,
body.sdo-site-page .site-header__menu-btn {
  display: none;
}

/* Theme toggle — bring the shared component onto the brand.
   css/sdo-theme-toggle.css is shared with the dashboard, so it is NOT edited.
   Instead its variable contract is redefined here, scoped to public pages:
   the dashboard keeps its own values untouched. Drops the component's amber
   and indigo gradients, which are a third palette and off-brand. */
body.sdo-landing-page .sdo-theme-toggle,
body.sdo-site-page .sdo-theme-toggle,
body.sdo-auth-page .sdo-theme-toggle {
  /* Containing block for the touch-target ::after — without this, inset:-8px
     resolves against the viewport and the whole page becomes a theme switch. */
  position: relative;
  --sdo-brand: var(--cyan);
  --sdo-brand-glow: color-mix(in oklab, var(--cyan) 40%, transparent);
  --sdo-toggle-track-light: var(--surface-2);
  --sdo-toggle-track-dark: var(--navy-800);
  --sdo-toggle-thumb-light: #FFFFFF;
  --sdo-toggle-thumb-dark: var(--cyan);
  --sdo-toggle-sun: var(--text-label);
  --sdo-toggle-moon: var(--brand-fill-ink);
  --app-ink: var(--text);
  --app-muted: var(--text-label);
}

/* The component's sun/moon "hint" dots are hardcoded radial glows (#fbbf24
   amber, #818cf8 indigo) with no variable hook, so they cannot be re-themed.
   They are pure decoration — exactly what the brand book removes — so they are
   hidden on public pages only. The dashboard keeps them. */
body.sdo-landing-page .sdo-theme-toggle__hint,
body.sdo-site-page .sdo-theme-toggle__hint,
body.sdo-auth-page .sdo-theme-toggle__hint {
  display: none;
}

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-nav,
  body.sdo-site-page .site-nav,
  body.sdo-landing-page .site-header__actions .site-header__desktop-only,
  body.sdo-site-page .site-header__actions .site-header__desktop-only {
    display: none;
  }
  body.sdo-landing-page .site-header__menu-btn,
  body.sdo-site-page .site-header__menu-btn {
    display: grid;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.3 MOBILE MENU — full sheet
   JS contract: [data-mobile-menu] gets .is-open; body gets .demo-nav-locked
   while open (scroll lock is handled in landing.js).
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-menu,
body.sdo-site-page .site-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  /* visibility must NOT be interpolated: while it is mid-transition the sheet
     is not focusable, which breaks the focus trap. Flip it instantly on open
     and defer it to after the fade on close. */
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
body.sdo-landing-page .site-menu.is-open,
body.sdo-site-page .site-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s var(--ease), visibility 0s linear 0s;
}

body.sdo-landing-page .site-menu__backdrop,
body.sdo-site-page .site-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(4 12 22 / .6);
  border: 0;
}

body.sdo-landing-page .site-menu__sheet,
body.sdo-site-page .site-menu__sheet {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s6);
  /* A flex column's items default to min-height:auto and refuse to shrink, so
     overflow-y never engaged and the sheet simply clipped. min-block-size:0
     on the children is what makes this scrollable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-0);
  border-inline-start: 1px solid var(--border);
  translate: 100% 0;
  transition: translate .24s var(--ease);
}
body.sdo-landing-page .site-menu.is-open .site-menu__sheet,
body.sdo-site-page .site-menu.is-open .site-menu__sheet {
  translate: 0 0;
}
/* The sheet takes programmatic focus on open (tabindex="-1"); it is a
   container, not a control, so no focus ring. Its children keep theirs. */
body.sdo-landing-page .site-menu__sheet:focus,
body.sdo-site-page .site-menu__sheet:focus {
  outline: none;
}

body.sdo-landing-page .site-menu__bar,
body.sdo-site-page .site-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block-end: var(--s4);
  border-block-end: 1px solid var(--border);
}
body.sdo-landing-page .site-menu__bar-actions,
body.sdo-site-page .site-menu__bar-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* Every direct child of the scrolling sheet must be allowed to shrink, or the
   flex column grows past the viewport instead of scrolling inside it. */
body.sdo-landing-page .site-menu__sheet > *,
body.sdo-site-page .site-menu__sheet > * {
  flex: 0 0 auto;
  min-block-size: 0;
}

body.sdo-landing-page .site-menu__group,
body.sdo-site-page .site-menu__group {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
body.sdo-landing-page .site-menu__label,
body.sdo-site-page .site-menu__label {
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}

body.sdo-landing-page .site-menu__link,
body.sdo-site-page .site-menu__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-block-size: 44px;
  padding-inline: var(--s3);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  transition: background-color .16s var(--ease);
}
body.sdo-landing-page .site-menu__link:hover,
body.sdo-site-page .site-menu__link:hover {
  background: var(--surface-1);
}
body.sdo-landing-page .site-menu__link i,
body.sdo-site-page .site-menu__link i {
  inline-size: 20px;
  color: var(--text-label);
}

body.sdo-landing-page .site-menu__chips,
body.sdo-site-page .site-menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
body.sdo-landing-page .site-menu__chip,
body.sdo-site-page .site-menu__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-menu__chip:hover,
body.sdo-site-page .site-menu__chip:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}

body.sdo-landing-page .site-menu__ctas,
body.sdo-site-page .site-menu__ctas {
  display: grid;
  gap: var(--s3);
  margin-block-start: auto;
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--border);
}

/* ───────────────────────────────────────────────────────────────────────────
   4.4 FOOTER — an index, not a card grid
   Rules separate the bands; the contact block is a data list, not icon cards.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-footer,
body.sdo-site-page .site-footer {
  margin-block-start: var(--s16);
  border-block-start: 1px solid var(--border);
  background: var(--surface-0);
}

body.sdo-landing-page .site-footer__consult,
body.sdo-site-page .site-footer__consult {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  margin-block-start: var(--s4);
  padding: var(--s6) var(--s8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-landing-page .site-footer__consult-title,
body.sdo-site-page .site-footer__consult-title {
  margin: 0 0 var(--s1);
  font-size: var(--fs-h3);
  font-weight: 800;
}
body.sdo-landing-page .site-footer__consult-text,
body.sdo-site-page .site-footer__consult-text {
  margin: 0;
  max-inline-size: 48ch;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

body.sdo-landing-page .site-footer__grid,
body.sdo-site-page .site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--s12);
  padding-block: var(--s12);
}

body.sdo-landing-page .site-footer__about-text,
body.sdo-site-page .site-footer__about-text {
  margin-block: var(--s4);
  color: var(--text-muted);
  max-inline-size: 52ch;
}

body.sdo-landing-page .site-footer__heading,
body.sdo-site-page .site-footer__heading {
  margin-block-end: var(--s4);
  font-size: var(--fs-small);
  color: var(--text-strong);
}

body.sdo-landing-page .site-footer__list,
body.sdo-site-page .site-footer__list,
body.sdo-landing-page .site-footer__contact,
body.sdo-site-page .site-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
}

body.sdo-landing-page .site-footer__list a,
body.sdo-site-page .site-footer__list a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s var(--ease);
}
body.sdo-landing-page .site-footer__list a:hover,
body.sdo-site-page .site-footer__list a:hover {
  color: var(--brand-text);
}

/* Contact as a data block: label above value, no icon cards. */
body.sdo-landing-page .site-footer__contact strong,
body.sdo-site-page .site-footer__contact strong {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-footer__contact a,
body.sdo-site-page .site-footer__contact a,
body.sdo-landing-page .site-footer__contact span,
body.sdo-site-page .site-footer__contact span {
  color: var(--text-muted);
  text-decoration: none;
}
body.sdo-landing-page .site-footer__contact a:hover,
body.sdo-site-page .site-footer__contact a:hover {
  color: var(--brand-text);
}

body.sdo-landing-page .site-footer__linkedin,
body.sdo-site-page .site-footer__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--brand-text);
  text-decoration: none;
}

body.sdo-landing-page .site-footer__bottom,
body.sdo-site-page .site-footer__bottom {
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-footer__bottom-inner,
body.sdo-site-page .site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s6);
}
body.sdo-landing-page .site-footer__bottom p,
body.sdo-site-page .site-footer__bottom p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-landing-page .site-footer__bottom a,
body.sdo-site-page .site-footer__bottom a {
  color: var(--text-muted);
  text-decoration: none;
}
body.sdo-landing-page .site-footer__bottom a:hover,
body.sdo-site-page .site-footer__bottom a:hover {
  color: var(--brand-text);
}

body.sdo-landing-page .site-footer__top,
body.sdo-site-page .site-footer__top {
  position: fixed;
  inset-block-end: var(--s6);
  inset-inline-start: var(--s6);
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease),
              color .16s var(--ease);
}
body.sdo-landing-page .site-footer__top.is-visible,
body.sdo-site-page .site-footer__top.is-visible {
  opacity: 1;
  visibility: visible;
}
body.sdo-landing-page .site-footer__top:hover,
body.sdo-site-page .site-footer__top:hover {
  color: var(--brand-text);
}

@media (max-width: 900px) {
  body.sdo-landing-page .site-footer__grid,
  body.sdo-site-page .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s8);
    padding-block: var(--s8);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.5 HERO — cinematic full-viewport gate
   Fits exactly under the fixed header: nothing clipped, nothing spilling.
   Brand + one offer + living product film. No dashboard mock / stat rail.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-hero {
  position: relative;
  isolation: isolate;
  background: var(--surface-0);
  overflow: clip;
}

/* Soft brand atmosphere — pointer-reactive via --mx / --my */
body.sdo-landing-page .site-hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 55% 50% at var(--mx, 72%) var(--my, 28%),
      color-mix(in oklab, var(--cyan) 16%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 35% at 12% 85%,
      color-mix(in oklab, var(--navy-700) 55%, transparent),
      transparent 70%
    );
}
body.sdo-landing-page .site-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .55;
}
body.sdo-landing-page .site-hero__orb--a {
  inline-size: min(42vw, 420px);
  block-size: min(42vw, 420px);
  inset-block-start: -8%;
  inset-inline-end: -6%;
  background: color-mix(in oklab, var(--cyan) 22%, transparent);
}
body.sdo-landing-page .site-hero__orb--b {
  inline-size: min(36vw, 320px);
  block-size: min(36vw, 320px);
  inset-block-end: 8%;
  inset-inline-start: -8%;
  background: color-mix(in oklab, var(--navy-600) 50%, transparent);
}
body.sdo-landing-page .site-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

[data-theme="light"] body.sdo-landing-page .site-hero__atmosphere {
  background:
    radial-gradient(
      ellipse 55% 50% at var(--mx, 72%) var(--my, 28%),
      color-mix(in oklab, var(--cyan) 12%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 35% at 12% 85%,
      color-mix(in oklab, var(--cyan) 6%, transparent),
      transparent 70%
    );
}
[data-theme="light"] body.sdo-landing-page .site-hero__orb--a {
  background: color-mix(in oklab, var(--cyan) 18%, transparent);
  opacity: .4;
}
[data-theme="light"] body.sdo-landing-page .site-hero__grid { opacity: .18; }

/* Stage locks to one screen under the fixed header */
body.sdo-landing-page .site-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  block-size: calc(100dvh - var(--header-h));
  max-block-size: calc(100dvh - var(--header-h));
  min-block-size: 0;
  padding-block: var(--s6) var(--s8);
  padding-block-end: calc(var(--s8) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

body.sdo-landing-page .site-hero__layout {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--s8);
  flex: 1 1 auto;
  min-block-size: 0;
  inline-size: 100%;
}

body.sdo-landing-page .site-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: 0;
  max-inline-size: 36rem;
}

body.sdo-landing-page .site-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  color: var(--text-strong);
  line-height: 1;
}
body.sdo-landing-page .site-hero__brand-mark {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--brand-fill-border);
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
body.sdo-landing-page .site-hero__brand-name {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -.04em;
}

body.sdo-landing-page .site-hero__title {
  margin: 0 0 var(--s5);
  font-size: clamp(1.75rem, 4.6vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.18;
  color: var(--text-strong);
  text-wrap: balance;
}

body.sdo-landing-page .site-hero__lead {
  margin: 0 0 var(--s7);
  max-inline-size: 42ch;
  color: var(--text-muted);
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
  line-height: 1.75;
}

body.sdo-landing-page .site-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-block-end: var(--s6);
}
body.sdo-landing-page .site-hero__actions .btn {
  cursor: pointer;
}

/* Quiet trust line — not a pill cluster or card rail */
body.sdo-landing-page .site-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: .02em;
  color: var(--text-label);
}

/* Cinema — the dominant visual plane */
body.sdo-landing-page .site-hero__cinema {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
  min-inline-size: 0;
  min-block-size: 0;
  inline-size: 100%;
}

body.sdo-landing-page .site-hero__bezel {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-block-size: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--r-lg) + 2px);
  background: var(--surface-1);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--cyan) 10%, transparent),
    var(--shadow-3);
  overflow: hidden;
}

body.sdo-landing-page .site-hero__bezel-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
  padding: .55rem .85rem;
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
}
body.sdo-landing-page .site-hero__bezel-dots {
  display: inline-flex;
  gap: 5px;
}
body.sdo-landing-page .site-hero__bezel-dots i {
  display: block;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--border-strong, var(--border));
}
body.sdo-landing-page .site-hero__bezel-dots i:nth-child(1) { background: #FF5F57; }
body.sdo-landing-page .site-hero__bezel-dots i:nth-child(2) { background: #FEBC2E; }
body.sdo-landing-page .site-hero__bezel-dots i:nth-child(3) { background: #28C840; }
body.sdo-landing-page .site-hero__bezel-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-caption);
  color: var(--text-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sdo-landing-page .site-hero__bezel-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ok);
}
body.sdo-landing-page .site-hero__bezel-live i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent);
}

body.sdo-landing-page .site-hero__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  max-block-size: min(52dvh, 520px);
  background: #071018;
}
body.sdo-landing-page .site-hero__film {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
body.sdo-landing-page .site-hero__poster {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
body.sdo-landing-page .site-hero__film-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, color-mix(in oklab, #040C16 55%, transparent)),
    radial-gradient(ellipse 50% 40% at 50% 45%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 70%);
  opacity: .85;
  transition: opacity .35s var(--ease);
}
body.sdo-landing-page .site-hero__bezel.is-playing .site-hero__film-scrim {
  opacity: .25;
}

body.sdo-landing-page .site-hero__cinema-btn {
  position: absolute;
  inset-block-end: var(--s4);
  inset-inline-start: var(--s4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 40px;
  padding: .45rem .9rem;
  border: 1px solid color-mix(in oklab, #fff 22%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, #040C16 72%, transparent);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
body.sdo-landing-page .site-hero__cinema-btn:hover {
  border-color: color-mix(in oklab, var(--cyan) 55%, transparent);
  background: color-mix(in oklab, #040C16 82%, var(--cyan));
}
body.sdo-landing-page .site-hero__cinema-btn:focus-visible {
  outline: 2px solid var(--brand-line);
  outline-offset: 3px;
}

body.sdo-landing-page .site-hero__cinema-hint {
  display: none;
}

body.sdo-landing-page .site-hero__cue {
  position: absolute;
  inset-block-end: var(--s3);
  inset-inline-start: 50%;
  translate: 50% 0;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-label);
  text-decoration: none;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-hero__cue:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}

/* Capability band — below the fold so the first screen never overflows */
body.sdo-landing-page .site-hero__band {
  position: relative;
  z-index: 1;
  border-block: 1px solid var(--border);
  background: var(--surface-1);
}
body.sdo-landing-page .site-hero__band-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin: 0;
  padding-block: var(--s4);
  list-style: none;
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .site-hero__band-list li {
  position: relative;
}
body.sdo-landing-page .site-hero__band-list li + li::before {
  content: "·";
  position: absolute;
  inset-inline-end: calc(100% + var(--s3));
  color: var(--border-strong, var(--border));
}

/* Entrance — 2–3 intentional motions, reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion body.sdo-landing-page .site-hero__brand,
  html.js-motion body.sdo-landing-page .site-hero__title,
  html.js-motion body.sdo-landing-page .site-hero__lead,
  html.js-motion body.sdo-landing-page .site-hero__actions,
  html.js-motion body.sdo-landing-page .site-hero__trust,
  html.js-motion body.sdo-landing-page .site-hero__cinema {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .55s var(--ease), translate .55s var(--ease);
  }
  html.js-motion.is-ready body.sdo-landing-page .site-hero__brand,
  html.js-motion.is-ready body.sdo-landing-page .site-hero__title,
  html.js-motion.is-ready body.sdo-landing-page .site-hero__lead,
  html.js-motion.is-ready body.sdo-landing-page .site-hero__actions,
  html.js-motion.is-ready body.sdo-landing-page .site-hero__trust,
  html.js-motion.is-ready body.sdo-landing-page .site-hero__cinema {
    opacity: 1;
    translate: 0 0;
  }
  html.js-motion.is-ready body.sdo-landing-page .site-hero__title   { transition-delay: .07s; }
  html.js-motion.is-ready body.sdo-landing-page .site-hero__lead    { transition-delay: .14s; }
  html.js-motion.is-ready body.sdo-landing-page .site-hero__actions { transition-delay: .2s; }
  html.js-motion.is-ready body.sdo-landing-page .site-hero__trust   { transition-delay: .26s; }
  html.js-motion.is-ready body.sdo-landing-page .site-hero__cinema  { transition-delay: .12s; }

  body.sdo-landing-page .site-hero__cue {
    animation: site-hero-cue 2.2s var(--ease) infinite;
  }
  @keyframes site-hero-cue {
    0%, 100% { translate: 50% 0; opacity: .7; }
    50% { translate: 50% 5px; opacity: 1; }
  }
}

/* Desktop — copy | cinema in one locked viewport */
@media (min-width: 1024px) {
  body.sdo-landing-page .site-hero__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  body.sdo-landing-page .site-hero__screen {
    max-block-size: min(58dvh, 560px);
  }
  body.sdo-landing-page .site-hero__cinema-hint { text-align: end; }
}

/* Tablet / phone — stacked, still locked to one screen */
@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-hero__stage {
    padding-block: var(--s5) var(--s6);
    justify-content: flex-start;
  }
  body.sdo-landing-page .site-hero__layout {
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--s5);
    align-content: stretch;
  }
  body.sdo-landing-page .site-hero__copy {
    max-inline-size: none;
  }
  body.sdo-landing-page .site-hero__title {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
    margin-block-end: var(--s3);
  }
  body.sdo-landing-page .site-hero__lead {
    margin-block-end: var(--s5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.sdo-landing-page .site-hero__brand { margin-block-end: var(--s3); }
  body.sdo-landing-page .site-hero__brand-mark {
    inline-size: 30px;
    block-size: 30px;
    font-size: .9rem;
  }
  body.sdo-landing-page .site-hero__actions { margin-block-end: var(--s4); }
  body.sdo-landing-page .site-hero__actions .btn { flex: 1 1 auto; }
  body.sdo-landing-page .site-hero__cinema {
    min-block-size: 0;
    flex: 1 1 auto;
  }
  body.sdo-landing-page .site-hero__bezel {
    flex: 1 1 auto;
    min-block-size: 0;
  }
  body.sdo-landing-page .site-hero__screen {
    flex: 1 1 auto;
    aspect-ratio: auto;
    max-block-size: none;
    min-block-size: 0;
    block-size: 100%;
  }
  body.sdo-landing-page .site-hero__cinema-hint { display: none; }
  body.sdo-landing-page .site-hero__cue { display: none; }
  body.sdo-landing-page .site-hero__bezel-label { display: none; }
}

/* Very short viewports — drop decorative chrome, keep the offer readable */
@media (max-height: 700px) {
  body.sdo-landing-page .site-hero__trust { display: none; }
  body.sdo-landing-page .site-hero__bezel-bar { display: none; }
  body.sdo-landing-page .site-hero__lead {
    -webkit-line-clamp: 2;
    margin-block-end: var(--s4);
  }
  body.sdo-landing-page .site-hero__brand { margin-block-end: var(--s2); }
  body.sdo-landing-page .site-hero__title { margin-block-end: var(--s2); }
}

@media (max-height: 560px) and (max-width: 1023.98px) {
  body.sdo-landing-page .site-hero__cinema { display: none; }
  body.sdo-landing-page .site-hero__stage {
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.6 INTRO VIDEO
   Native aspect-ratio, not a padding hack: the space is reserved before the
   poster loads, so there is no layout shift.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-video__head {
  max-inline-size: 60ch;
  margin-block-end: var(--s10);
}
body.sdo-landing-page .site-video__eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-video__title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-strong);
}
body.sdo-landing-page .site-video__lead {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.75;
}

body.sdo-landing-page .site-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  max-inline-size: 1080px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--cyan) 8%, transparent),
    var(--shadow-3);
  isolation: isolate;
}

body.sdo-landing-page .site-video__el {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  background: #0a1628;
}

/* Soft brand veil over the poster until playback starts */
body.sdo-landing-page .site-video__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--navy-950) 35%, transparent) 0%, transparent 42%, color-mix(in oklab, var(--navy-950) 45%, transparent) 100%),
    radial-gradient(ellipse 55% 45% at 50% 48%, color-mix(in oklab, var(--cyan) 14%, transparent), transparent 70%);
  opacity: 1;
  transition: opacity .35s var(--ease);
}
body.sdo-landing-page .site-video__frame.is-playing .site-video__veil {
  opacity: 0;
}

body.sdo-landing-page .site-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 3;
  /* RTL-safe centring: inset-inline-start is the right edge in RTL, so the
     element is pulled back along the inline axis by its own half-width. */
  translate: 50% -50%;
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  padding: 0;
  border: 1px solid var(--brand-fill-border);
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  font-size: 18px;
  cursor: pointer;
  box-shadow:
    0 0 0 12px color-mix(in oklab, var(--cyan) 12%, transparent),
    var(--shadow-3);
  transition: scale .2s var(--ease), opacity .25s var(--ease), box-shadow .2s var(--ease);
}
body.sdo-landing-page .site-video__play i {
  /* Optical centre for the triangle play glyph */
  translate: 2px 0;
}
body.sdo-landing-page .site-video__play-ring {
  position: absolute;
  inset: -10px;
  border: 1px solid color-mix(in oklab, var(--cyan) 35%, transparent);
  border-radius: 50%;
  animation: site-video-pulse 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes site-video-pulse {
  0%, 100% { opacity: .55; scale: 1; }
  50% { opacity: .15; scale: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
  body.sdo-landing-page .site-video__play-ring { animation: none; }
}
body.sdo-landing-page .site-video__play:hover {
  scale: 1.06;
  box-shadow:
    0 0 0 16px color-mix(in oklab, var(--cyan) 16%, transparent),
    var(--shadow-3);
}
body.sdo-landing-page .site-video__play:focus-visible {
  outline: 2px solid var(--brand-line);
  outline-offset: 4px;
}

body.sdo-landing-page .site-video__frame.is-playing .site-video__play {
  opacity: 0;
  pointer-events: none;
  scale: .92;
}

/* Designed empty state — kept for fallback if assets are missing */
body.sdo-landing-page .site-video__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s4);
  background: var(--surface-1);
}
body.sdo-landing-page .site-video__empty-icon {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border: 1px solid var(--brand-fill-border);
  border-radius: 50%;
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  font-size: 1.1rem;
}
body.sdo-landing-page .site-video__caption {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

body.sdo-landing-page .site-video__frame.is-empty .site-video__play,
body.sdo-landing-page .site-video__frame.is-empty .site-video__el,
body.sdo-landing-page .site-video__frame.is-empty .site-video__veil { display: none; }
body.sdo-landing-page .site-video__frame:not(.is-empty) .site-video__empty { display: none; }

body.sdo-landing-page .site-video__fallback {
  padding: var(--s6);
  text-align: center;
  color: var(--text-muted);
}

/* Share bar — sits under the player, same max width */
body.sdo-landing-page .site-video__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  max-inline-size: 1080px;
  margin: var(--s5) auto 0;
}
body.sdo-landing-page .site-video__share-label {
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: .04em;
  color: var(--text-label);
}
body.sdo-landing-page .site-video__share-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
body.sdo-landing-page .site-video__share-menu {
  position: relative;
}
body.sdo-landing-page .site-video__share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 40px;
  padding: .45rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
body.sdo-landing-page .site-video__share-btn--primary {
  color: var(--brand-fill-ink);
  border-color: var(--brand-fill-border);
  background: var(--brand-fill);
}
body.sdo-landing-page .site-video__share-btn:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
  background: var(--surface-2);
}
body.sdo-landing-page .site-video__share-btn--primary:hover {
  color: var(--brand-fill-ink);
  border-color: var(--brand-fill-border);
  filter: brightness(1.06);
  background: var(--brand-fill);
}
body.sdo-landing-page .site-video__share-btn:focus-visible,
body.sdo-landing-page .site-video__share-item:focus-visible {
  outline: 2px solid var(--brand-line);
  outline-offset: 2px;
}
body.sdo-landing-page .site-video__share-btn[aria-expanded="true"] {
  border-color: var(--brand-line);
  color: var(--brand-text);
}
body.sdo-landing-page .site-video__share-panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 8;
  display: grid;
  gap: 2px;
  min-inline-size: 200px;
  padding: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-3);
}
body.sdo-landing-page .site-video__share-panel[hidden] {
  display: none;
}
body.sdo-landing-page .site-video__share-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-block-size: 40px;
  padding: .5rem .7rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: start;
}
body.sdo-landing-page .site-video__share-item:hover {
  background: var(--surface-1);
  color: var(--brand-text);
}
body.sdo-landing-page .site-video__share-item.is-copied {
  color: var(--ok);
}
body.sdo-landing-page .site-video__share-btn.is-copied {
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 45%, var(--border));
}
body.sdo-landing-page .site-video__share-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ok);
}
body.sdo-landing-page .site-video__share-status[hidden] {
  display: none;
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-video__title { font-size: var(--fs-h3); }
  body.sdo-landing-page .site-video__play { inline-size: 56px; block-size: 56px; }
  body.sdo-landing-page .site-video__frame {
    border-radius: var(--r-md);
    max-inline-size: none;
  }
  body.sdo-landing-page .site-video__share {
    flex-direction: column;
    align-items: stretch;
  }
  body.sdo-landing-page .site-video__share-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  body.sdo-landing-page .site-video__share-btn {
    justify-content: center;
    inline-size: 100%;
  }
  body.sdo-landing-page .site-video__share-panel {
    inset-inline: 0;
    min-inline-size: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.7 SECTION HEAD — shared by every homepage section from 3 onward
   Eyebrow / title / lead, set inline-start and measure-capped rather than
   centred: centred three-line stacks are the templated shape, and a ragged
   RTL centre axis reads badly in Persian. No badge pill — the eyebrow is
   caption type, which is enough to label a section.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-head,
body.sdo-site-page .site-head {
  max-inline-size: 60ch;
  margin-block-end: var(--s12);
}
body.sdo-landing-page .site-head__eyebrow,
body.sdo-site-page .site-head__eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-head__title,
body.sdo-site-page .site-head__title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h2);
  font-weight: 800;
}
body.sdo-landing-page .site-head__lead,
body.sdo-site-page .site-head__lead {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-head,
  body.sdo-site-page .site-head {
    margin-block-end: var(--s8);
  }
  body.sdo-landing-page .site-head__title,
  body.sdo-site-page .site-head__title {
    font-size: var(--fs-h3);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.8 CHALLENGE & COMPARISON — homepage section 3
   Two movements, one section: a numbered editorial list of the four failures,
   then the comparison table as the payoff.

   The list is deliberately NOT cards. Four equal cards say "four things of
   equal weight and no relationship"; a numbered list with a shared rule says
   "one argument in four steps", which is what the copy actually is. Structure
   comes from the ordinal, the rule and the indent — no surface, no radius.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-challenge__list {
  counter-reset: challenge;
  margin: 0 0 var(--s12);
  padding: 0;
  list-style: none;
}

body.sdo-landing-page .site-challenge__item {
  counter-increment: challenge;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--s6);
  row-gap: 0;              /* the title's own margin sets the title/text gap */
  padding-block: var(--s6);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-challenge__item:last-child {
  border-block-end: 1px solid var(--border);
}

/* Persian ordinal from a CSS counter: the numeral is structure, so it stays
   out of the document. Vazirmatn, not the mono face — Geist Mono carries no
   Persian digits and would silently fall back mid-list. */
body.sdo-landing-page .site-challenge__item::before {
  content: counter(challenge, persian);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-label);
  font-variant-numeric: tabular-nums;
}

/* Both live in the copy column: auto-flow would drop the paragraph into the
   next row's ordinal cell and squeeze it to 3rem. */
body.sdo-landing-page .site-challenge__item-title,
body.sdo-landing-page .site-challenge__item-text {
  grid-column: 2;
}

body.sdo-landing-page .site-challenge__item-title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h3);
  font-weight: 700;
}
body.sdo-landing-page .site-challenge__item-text {
  margin: 0;
  max-inline-size: 68ch;
  color: var(--text-muted);
}

/* The turn in the argument: quiet type on the page surface, no glow, no box. */
body.sdo-landing-page .site-challenge__callout {
  margin: 0 0 var(--s16);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--text-muted);
}
body.sdo-landing-page .site-challenge__callout b {
  font-weight: 800;
  color: var(--text-strong);
}
/* Scoped through the callout so it outranks the `b` rule above, which is one
   element more specific than a bare class. */
body.sdo-landing-page .site-challenge__callout b.site-challenge__mark {
  color: var(--brand-text);
}

/* ── The comparison ── */

/* The frame carries the border, radius and clipping — `overflow` has no
   defined effect on a table box, so a radius on the table alone would leave
   the header background square at the corners. */
body.sdo-landing-page .site-compare__frame {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

body.sdo-landing-page .site-compare__table {
  inline-size: 100%;
  /* separate, not collapse: a collapsed table ignores the clip above. Cells
     carry only a block-start border, so nothing doubles up. */
  border-collapse: separate;
  border-spacing: 0;
  text-align: start;
  font-size: var(--fs-body);
}

body.sdo-landing-page .site-compare__table th,
body.sdo-landing-page .site-compare__table td {
  padding: var(--s4);
  text-align: start;
  vertical-align: top;
  border-block-start: 1px solid var(--border);
}

body.sdo-landing-page .site-compare__head th {
  border-block-start: 0;
  background: var(--surface-2);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-label);
}

body.sdo-landing-page .site-compare__table tbody th {
  inline-size: 26%;
  font-weight: 700;
  color: var(--text-strong);
}

body.sdo-landing-page .site-compare__cell {
  color: var(--text-muted);
}
body.sdo-landing-page .site-compare__cell--yes {
  color: var(--text);
  background: color-mix(in oklab, var(--cyan) 5%, transparent);
}

/* Semantic marks, kept small: they carry the comparison the columns state. */
body.sdo-landing-page .site-compare__no { color: var(--risk); }
body.sdo-landing-page .site-compare__yes { color: var(--ok); }
body.sdo-landing-page .site-compare__no,
body.sdo-landing-page .site-compare__yes {
  margin-inline-end: var(--s1);
  font-size: var(--fs-small);
}

/* The per-cell column label is for the card layout only. Above 768px the
   <th scope="col"> already says it, so it stays out of the visual field. */
body.sdo-landing-page .site-compare__key {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A jargon term with a definition behind it — dotted underline, not a link
   colour: it goes nowhere. Keyboard-reachable, so it gets the focus ring. */
body.sdo-landing-page .tip-trigger {
  border-block-end: 1px dotted var(--text-label);
  cursor: help;
  color: var(--text-strong);
}

/* ── Below 768px the table becomes cards (brand book §09) ──────────────────
   Row header as the card title, both values beneath it. The page must never
   scroll sideways, and a 3-column comparison at 320px would guarantee it. */
@media (max-width: 767.98px) {
  /* At 320px a 48px ordinal plus a 24px gutter leaves the copy 206px and the
     Persian breaks three words to a line. Narrow both — the ordinal only has
     to read as a marker, not hold the column. */
  body.sdo-landing-page .site-challenge__item {
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--s4);
    padding-block: var(--s4);
  }
  /* The item title stays at --fs-h3: the scale has nothing between 15.5 and
     21, and dropping it to body size would leave weight as the only thing
     separating a heading from its paragraph. It still fits on one line at
     320px. Only the ordinal shrinks. */
  body.sdo-landing-page .site-challenge__item::before {
    font-size: var(--fs-h3);
  }
  body.sdo-landing-page .site-challenge__callout {
    margin-block-end: var(--s12);
    font-size: var(--fs-body);
  }

  body.sdo-landing-page .site-compare__table,
  body.sdo-landing-page .site-compare__table tbody,
  body.sdo-landing-page .site-compare__table tr,
  body.sdo-landing-page .site-compare__table th,
  body.sdo-landing-page .site-compare__table td {
    display: block;
  }

  /* Cards stand on their own — the shared frame would draw a box around them. */
  body.sdo-landing-page .site-compare__frame {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  /* Hidden from view, not from the accessibility tree: the column-header
     association is the only thing tying a value back to «بدون SDO» / «با SDO»
     for screen-reader users. */
  body.sdo-landing-page .site-compare__head {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.sdo-landing-page .site-compare__table tbody tr {
    margin-block-end: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-1);
    overflow: hidden;
  }

  body.sdo-landing-page .site-compare__table tbody th {
    inline-size: auto;
    padding-block-end: var(--s3);
    border-block-start: 0;
    font-size: var(--fs-h3);
  }

  body.sdo-landing-page .site-compare__table td {
    padding-block: var(--s3);
  }

  body.sdo-landing-page .site-compare__key {
    position: static;
    display: block;
    inline-size: auto;
    block-size: auto;
    margin-block-end: var(--s1);
    overflow: visible;
    clip-path: none;
    font-size: var(--fs-caption);
    letter-spacing: .06em;
    color: var(--text-label);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.9 PILLARS — type-led alternating stack
   Four equal cards read as four unrelated things. Staggering the measure and
   letting a hairline start each block turns the same copy into one argument
   with four parts. The stagger is the only ornament; there is no surface.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-pillar {
  max-inline-size: 62ch;
  padding-block: var(--s8);
  border-block-start: 1px solid var(--border);
}
/* The offset alternates, so the hairline that starts each block alternates
   with it — the rhythm is visible before a word is read. */
body.sdo-landing-page .site-pillar:nth-child(even) {
  margin-inline-start: auto;
}
body.sdo-landing-page .site-pillar:last-child {
  border-block-end: 1px solid var(--border);
}

body.sdo-landing-page .site-pillar__title {
  margin: 0;
  font-size: var(--fs-h3);
}

/* The whole heading is the control. Reset the button chrome rather than
   nesting a button-looking thing inside a heading. */
body.sdo-landing-page .site-pillar__toggle {
  display: flex;
  align-items: center;
  /* The chevron sits with the title, not pushed to the far edge of a 62ch
     block — spread that wide it stops reading as part of the same control. */
  justify-content: flex-start;
  gap: var(--s3);
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-strong);
  text-align: start;
  cursor: pointer;
  transition: color .16s var(--ease);
}
body.sdo-landing-page .site-pillar__toggle:hover {
  color: var(--brand-text);
}
body.sdo-landing-page .site-pillar__chev {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--text-label);
  transition: rotate .2s var(--ease);
}
body.sdo-landing-page .site-pillar.is-expanded .site-pillar__chev {
  rotate: 180deg;
  color: var(--brand-text);
}

body.sdo-landing-page .site-pillar__lead {
  margin: var(--s2) 0 var(--s4);
  color: var(--text-muted);
}

body.sdo-landing-page .site-pillar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* A chip is a term with a definition behind it, so it reads as a term — a
   quiet outline, not a filled pill competing with the primary action. */
body.sdo-landing-page .site-pillar__chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding-inline: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: help;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-pillar__chip:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}

/* Visibility is keyed to .is-expanded, NOT to [hidden]: landing.js drops the
   class immediately on collapse but re-applies the attribute 480ms later, so
   keying off the attribute alone would leave the panel on screen for half a
   second after it was closed. */
body.sdo-landing-page .site-pillar__reveal {
  display: none;
  margin-block-start: var(--s4);
}
body.sdo-landing-page .site-pillar.is-expanded .site-pillar__reveal {
  display: block;
}
body.sdo-landing-page .site-pillar__list {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--brand-line);
  list-style: none;
  color: var(--text-muted);
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-pillar {
    max-inline-size: none;
    padding-block: var(--s6);
  }
  body.sdo-landing-page .site-pillar:nth-child(even) {
    margin-inline-start: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.10 FEATURES — tabbed browser
   The panel body is built by landing.js (buildFeaturesPanel); these classes
   are its contract. A definition list, because each capability genuinely is a
   term and its description.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-features__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s8);
  padding-block-end: var(--s4);
  border-block-end: 1px solid var(--border);
}

/* The selected tab is marked by a rule, matching the header's nav — one
   vocabulary for "this is the current thing" across the whole site. */
body.sdo-landing-page .site-features__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  padding-inline: var(--s4);
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-features__tab:hover {
  color: var(--text);
}
body.sdo-landing-page .site-features__tab.is-active {
  color: var(--text-strong);
  border-block-end-color: var(--cyan);
}
body.sdo-landing-page .site-features__tab i {
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-landing-page .site-features__tab.is-active i {
  color: var(--brand-text);
}

body.sdo-landing-page .site-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s12);
}
/* Swapping panels: the outgoing grid is faded by landing.js adding
   .is-leaving 180ms before the repaint. */
body.sdo-landing-page .site-features__grid.is-leaving {
  opacity: 0;
  transition: opacity .18s var(--ease);
}

body.sdo-landing-page .site-features__summary-title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
}
body.sdo-landing-page .site-features__summary-desc {
  margin: 0;
  color: var(--text-muted);
}

body.sdo-landing-page .site-features__list {
  margin: 0;
}
body.sdo-landing-page .site-features__item {
  padding-block: var(--s4);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-features__item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
body.sdo-landing-page .site-features__term {
  margin: 0 0 var(--s1);
  font-weight: 700;
  color: var(--text-strong);
}
body.sdo-landing-page .site-features__desc {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s8);
  }
}

@media (max-width: 767.98px) {
  /* The tab strip scrolls, the page does not. */
  body.sdo-landing-page .site-features__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.sdo-landing-page .site-features__tabs::-webkit-scrollbar { display: none; }
  body.sdo-landing-page .site-features__tab { flex: 0 0 auto; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.11 MODULE INVENTORY — a spec sheet, not a second card grid
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-inventory {
  margin-block-start: var(--s16);
  padding-block-start: var(--s12);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-inventory__head {
  margin-block-end: var(--s8);
}

body.sdo-landing-page .site-inventory__list {
  margin: 0;
}
body.sdo-landing-page .site-inventory__row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s4);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-inventory__row:last-child {
  border-block-end: 1px solid var(--border);
}
body.sdo-landing-page .site-inventory__name {
  margin: 0;
  font-weight: 700;
  color: var(--text-strong);
}
body.sdo-landing-page .site-inventory__desc {
  margin: 0;
  color: var(--text-muted);
}

body.sdo-landing-page .site-inventory__more {
  margin: var(--s6) 0 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-inventory {
    margin-block-start: var(--s12);
    padding-block-start: var(--s8);
  }
  body.sdo-landing-page .site-inventory__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.12 WORKFLOW — stepped sequence
   Six numbered nodes joined by a rule, with the selected step's three layers
   below. The rule is the whole device: it says "these are stages of one thing"
   without a single decorative pixel. Lit segments show how far along you are.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-workflow__track {
  display: flex;
  align-items: flex-start;
  margin-block-end: var(--s8);
}

body.sdo-landing-page .site-workflow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
  min-inline-size: 88px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s var(--ease);
}
body.sdo-landing-page .site-workflow__node:hover { color: var(--text); }

body.sdo-landing-page .site-workflow__dot {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-0);
  font-weight: 700;
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              color .16s var(--ease);
}
/* Done: filled outline. Active: the brand fill. Two distinct states, so the
   sequence reads as progress rather than as six identical buttons. */
body.sdo-landing-page .site-workflow__node.is-done .site-workflow__dot {
  border-color: var(--brand-line);
  color: var(--brand-text);
}
body.sdo-landing-page .site-workflow__node.is-active .site-workflow__dot {
  border-color: var(--cyan-700);
  background: var(--cyan-700);
  color: #fff;
}
body.sdo-landing-page .site-workflow__node.is-active .site-workflow__label {
  color: var(--cyan-800);
  font-weight: 700;
}
body.sdo-landing-page .site-workflow__label {
  font-size: var(--fs-small);
  text-align: center;
}

body.sdo-landing-page .site-workflow__line {
  flex: 1 1 auto;
  block-size: 1px;
  margin-block-start: 20px;   /* centres on the 40px dot */
  background: var(--border);
  transition: background-color .24s var(--ease);
}
body.sdo-landing-page .site-workflow__line.is-lit {
  background: var(--brand-line);
}

/* ── The step panel ── */
body.sdo-landing-page .site-workflow__panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

body.sdo-landing-page .site-workflow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6);
  border-block-end: 1px solid var(--border);
}
body.sdo-landing-page .site-workflow__identity {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
body.sdo-landing-page .site-workflow__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--brand-text);
}
body.sdo-landing-page .site-workflow__step-title {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-landing-page .site-workflow__role {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-landing-page .site-workflow__badge {
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--text-label);
}

body.sdo-landing-page .site-workflow__body {
  padding: var(--s6);
}
body.sdo-landing-page .site-workflow__layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
body.sdo-landing-page .site-workflow__layer {
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--border);
}
body.sdo-landing-page .site-workflow__layer-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-block-end: var(--s2);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-workflow__layer-icon { color: var(--text-label); }
body.sdo-landing-page .site-workflow__layer-text {
  margin: 0;
  color: var(--text-muted);
}

body.sdo-landing-page .site-workflow__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-workflow__nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1 1 240px;
}
body.sdo-landing-page .site-workflow__nav-btn {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .site-workflow__nav-btn:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}
body.sdo-landing-page .site-workflow__progress {
  flex: 1 1 auto;
  block-size: 2px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
body.sdo-landing-page .site-workflow__progress-fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--cyan);
  transition: inline-size .3s var(--ease);
}
body.sdo-landing-page .site-workflow__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-workflow__layer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
}

@media (max-width: 767.98px) {
  /* Compact 3×2 step grid — horizontal chip strip was cramped and hard to tap */
  body.sdo-landing-page .site-workflow__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--s2);
    overflow: visible;
    margin-block-end: var(--s4);
    padding-block-end: 0;
  }
  body.sdo-landing-page .site-workflow__node {
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    min-inline-size: 0;
    max-inline-size: none;
    min-block-size: 72px;
    padding: var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-1);
  }
  body.sdo-landing-page .site-workflow__node.is-active {
    border-color: var(--cyan-700);
    background: color-mix(in oklab, var(--cyan-700) 12%, var(--surface-1));
  }
  body.sdo-landing-page .site-workflow__label {
    text-align: center;
    font-size: var(--fs-caption);
    line-height: 1.35;
  }
  body.sdo-landing-page .site-workflow__line { display: none; }
  body.sdo-landing-page .site-workflow__head,
  body.sdo-landing-page .site-workflow__body { padding: var(--s3); }
  body.sdo-landing-page .site-workflow__foot {
    padding: var(--s3);
    flex-wrap: wrap;
    gap: var(--s3);
  }
  body.sdo-landing-page .site-workflow__cta { flex: 1 1 100%; }
  body.sdo-landing-page .site-workflow__layer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  body.sdo-landing-page .site-workflow__layer { padding: var(--s3); }
  body.sdo-landing-page .site-workflow__step-title { font-size: var(--fs-body); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.13 ONE PAGE, ONE TRUTH — roles rail + widget demo + analytics
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-truth__roles {
  margin-block-end: var(--s12);
}
body.sdo-landing-page .site-truth__roles-label {
  margin: 0 0 var(--s1);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-truth__roles-title {
  margin: 0 0 var(--s6);
  font-size: var(--fs-h3);
}

/* The rail: name, then claim, on one line each. Not cards — the section
   heading already made the claim these would have repeated six times. */
body.sdo-landing-page .site-truth__role-list,
body.sdo-landing-page .site-truth__diffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s8);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .site-truth__role,
body.sdo-landing-page .site-truth__diff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s3);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-truth__role-name,
body.sdo-landing-page .site-truth__diff strong {
  flex: 0 0 8rem;
  color: var(--text-strong);
  font-weight: 700;
}
body.sdo-landing-page .site-truth__role-desc,
body.sdo-landing-page .site-truth__diff span {
  flex: 1 1 12rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

body.sdo-landing-page .site-truth__roles-note {
  margin: var(--s4) 0 var(--s8);
  color: var(--text-muted);
}
body.sdo-landing-page .site-truth__diffs {
  border-block-end: 1px solid var(--border);
}

/* ── Widget demo ── */
body.sdo-landing-page .site-truth__demo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s8);
}

body.sdo-landing-page .site-truth__rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-content: start;
}
body.sdo-landing-page .site-truth__widget {
  display: grid;
  gap: var(--s1);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
body.sdo-landing-page .site-truth__widget:hover {
  border-color: var(--brand-line);
}
body.sdo-landing-page .site-truth__widget.is-active {
  border-color: var(--brand-line);
  background: var(--surface-1);
}
body.sdo-landing-page .site-truth__widget-icon {
  color: var(--text-label);
  font-size: var(--fs-small);
}
body.sdo-landing-page .site-truth__widget.is-active .site-truth__widget-icon {
  color: var(--brand-text);
}
body.sdo-landing-page .site-truth__widget-label {
  color: var(--text-strong);
  font-weight: 600;
  font-size: var(--fs-small);
}
body.sdo-landing-page .site-truth__widget-metric {
  color: var(--text-strong);
  font-size: var(--fs-h3);
}
body.sdo-landing-page .site-truth__widget-hint {
  font-size: var(--fs-caption);
  color: var(--text-label);
}

body.sdo-landing-page .site-truth__panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-landing-page .site-truth__panel-inner {
  display: grid;
  gap: var(--s6);
  padding: var(--s6);
}
body.sdo-landing-page .site-truth__panel-head {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
body.sdo-landing-page .site-truth__panel-icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--brand-text);
}
body.sdo-landing-page .site-truth__panel-title {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-landing-page .site-truth__panel-sub {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}

body.sdo-landing-page .site-truth__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  margin: 0;
}
body.sdo-landing-page .site-truth__meta-item dt {
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-truth__meta-item dd {
  margin: var(--s1) 0 0;
  color: var(--text-strong);
  font-weight: 700;
}

body.sdo-landing-page .site-truth__progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-block-end: var(--s2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.sdo-landing-page .site-truth__progress-bar {
  block-size: 4px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
body.sdo-landing-page .site-truth__progress-fill {
  block-size: 100%;
  inline-size: 0;
  background: var(--cyan);
  transition: inline-size .5s var(--ease);
}

body.sdo-landing-page .site-truth__rows {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--border);
  list-style: none;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

body.sdo-landing-page .site-truth__panel-foot {
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-truth__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 600;
}

/* ── Analytics ── */
body.sdo-landing-page .site-analytics {
  margin-block-start: var(--s16);
  padding-block-start: var(--s12);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-analytics__head { margin-block-end: var(--s8); }

body.sdo-landing-page .site-analytics__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin-block-end: var(--s8);
}

/* A KPI tile is value + label + context. Brand book law 3: no KPI without a
   third comparison line, and no figure without a stated source. Both are
   markup here, not decoration — every tile carries all four rows. */
body.sdo-landing-page .site-kpi {
  display: grid;
  gap: var(--s1);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
body.sdo-landing-page .site-kpi:hover { border-color: var(--brand-line); }
body.sdo-landing-page .site-kpi.is-active {
  border-color: var(--brand-line);
  background: var(--surface-1);
}
body.sdo-landing-page .site-kpi__change {
  justify-self: start;
  padding: 2px var(--s2);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
}
body.sdo-landing-page .site-kpi__change--up {
  background: color-mix(in oklab, var(--ok) 14%, transparent);
  color: var(--ok);
}
body.sdo-landing-page .site-kpi__change--warn {
  background: color-mix(in oklab, var(--warn) 14%, transparent);
  color: var(--warn);
}
body.sdo-landing-page .site-kpi__value {
  color: var(--text-strong);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.2;
}
body.sdo-landing-page .site-kpi__suffix {
  font-size: var(--fs-body);
  color: var(--text-muted);
}
body.sdo-landing-page .site-kpi__label {
  color: var(--text);
  font-size: var(--fs-small);
}
body.sdo-landing-page .site-kpi__source {
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .site-kpi__source::before {
  content: "منبع: ";
}

body.sdo-landing-page .site-analytics__live,
body.sdo-landing-page .site-analytics__chart {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-landing-page .site-analytics__live { margin-block-end: var(--s6); }

body.sdo-landing-page .site-analytics__live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-block-end: var(--s6);
}
body.sdo-landing-page .site-analytics__chart-head { margin-block-end: var(--s6); }
body.sdo-landing-page .site-analytics__chart-title {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-landing-page .site-analytics__chart-sub {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}

body.sdo-landing-page .site-analytics__charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
body.sdo-landing-page .site-analytics__chart--wide { grid-column: span 2; }
body.sdo-landing-page .site-analytics__chart--full { grid-column: 1 / -1; }

/* Chart.js needs a sized box: the canvas is absolutely positioned by the
   library, so the wrapper owns the height. */
body.sdo-landing-page .site-analytics__canvas { position: relative; }
body.sdo-landing-page .site-analytics__canvas--200 { block-size: 200px; }
body.sdo-landing-page .site-analytics__canvas--260 { block-size: 260px; }
body.sdo-landing-page .site-analytics__canvas--280 { block-size: 280px; }
body.sdo-landing-page .site-analytics__canvas--320 { block-size: 320px; }

body.sdo-landing-page .site-analytics__chart-legend,
body.sdo-landing-page .site-analytics__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-block-start: var(--s4);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .site-analytics__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
/* Data-viz series swatches — spec §4.2 palette. */
body.sdo-landing-page .site-swatch {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 2px;
}
body.sdo-landing-page .site-swatch--d1 { background: var(--d1); }
body.sdo-landing-page .site-swatch--d3 { background: var(--d3); }
body.sdo-landing-page .site-swatch--d5 { background: var(--d5); }

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-truth__demo { grid-template-columns: minmax(0, 1fr); }
  body.sdo-landing-page .site-analytics__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sdo-landing-page .site-analytics__charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sdo-landing-page .site-analytics__chart--wide { grid-column: span 2; }
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-truth__roles { margin-block-end: var(--s8); }
  body.sdo-landing-page .site-truth__roles-title { margin-block-end: var(--s4); font-size: var(--fs-body); }
  /* Keep two columns — a single stack of six role rows is too long */
  body.sdo-landing-page .site-truth__role-list,
  body.sdo-landing-page .site-truth__diffs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s3);
  }
  body.sdo-landing-page .site-truth__role,
  body.sdo-landing-page .site-truth__diff {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-block: var(--s2);
  }
  body.sdo-landing-page .site-truth__role-name,
  body.sdo-landing-page .site-truth__diff strong {
    flex: none;
    inline-size: 100%;
    font-size: var(--fs-small);
  }
  body.sdo-landing-page .site-truth__role-desc,
  body.sdo-landing-page .site-truth__diff span {
    flex: none;
    font-size: var(--fs-caption);
    line-height: 1.55;
  }
  body.sdo-landing-page .site-truth__roles-note { margin: var(--s3) 0 var(--s4); font-size: var(--fs-small); }

  body.sdo-landing-page .site-truth__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }
  body.sdo-landing-page .site-truth__widget { padding: var(--s3); gap: 2px; }
  body.sdo-landing-page .site-truth__widget-metric { font-size: var(--fs-h3); }
  body.sdo-landing-page .site-truth__panel-inner { padding: var(--s3); gap: var(--s4); }
  body.sdo-landing-page .site-truth__meta { gap: var(--s4); }

  body.sdo-landing-page .site-analytics {
    margin-block-start: var(--s8);
    padding-block-start: var(--s6);
  }
  body.sdo-landing-page .site-analytics__head { margin-block-end: var(--s4); }
  body.sdo-landing-page .site-analytics__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    margin-block-end: var(--s4);
  }
  body.sdo-landing-page .site-kpi { padding: var(--s3); }
  body.sdo-landing-page .site-kpi__value { font-size: var(--fs-h2); }
  body.sdo-landing-page .site-analytics__charts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }
  body.sdo-landing-page .site-analytics__chart--wide,
  body.sdo-landing-page .site-analytics__chart--full { grid-column: auto; }
  body.sdo-landing-page .site-analytics__live,
  body.sdo-landing-page .site-analytics__chart { padding: var(--s3); }
  body.sdo-landing-page .site-analytics__canvas--200 { block-size: 160px; }
  body.sdo-landing-page .site-analytics__canvas--260,
  body.sdo-landing-page .site-analytics__canvas--280 { block-size: 180px; }
  body.sdo-landing-page .site-analytics__canvas--320 { block-size: 200px; }
  body.sdo-landing-page .site-analytics__live-head,
  body.sdo-landing-page .site-analytics__chart-head { margin-block-end: var(--s3); }
  body.sdo-landing-page .site-analytics__chart-title { font-size: var(--fs-body); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.14 AI — the only legitimate purple on the site
   #A78BFA marks machine-generated output and nothing else (spec §4.7). Below
   this comment it appears on the output chip and the bot bubble's edge; those
   are the two places the page shows model output.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-ai__panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}

body.sdo-landing-page .site-ai__agents {
  display: flex;
  gap: var(--s2);
  padding: var(--s4);
  overflow-x: auto;
  scrollbar-width: none;
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
}
body.sdo-landing-page .site-ai__agents::-webkit-scrollbar { display: none; }

body.sdo-landing-page .ai-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
  min-block-size: 40px;
  padding-inline: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-0);
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-landing-page .ai-agent:hover { color: var(--text); }
body.sdo-landing-page .ai-agent.is-active {
  border-color: color-mix(in oklab, var(--ai) 50%, var(--border));
  color: var(--text-strong);
}
body.sdo-landing-page .ai-agent i { color: var(--text-label); }
body.sdo-landing-page .ai-agent.is-active i { color: var(--ai); }

body.sdo-landing-page .site-ai__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  padding: var(--s6);
}
body.sdo-landing-page .site-ai__preview-inner {
  display: grid;
  gap: var(--s6);
}
body.sdo-landing-page .site-ai__agent-title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
}

/* Source line — brand book §5.3 mandatory element 2. */
body.sdo-landing-page .site-ai__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s3);
}
body.sdo-landing-page .site-ai__source-label {
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-ai__source-value {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.sdo-landing-page .site-ai__copy p { margin: 0 0 var(--s3); color: var(--text-muted); }
body.sdo-landing-page .site-ai__list {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--border);
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ── The mock assistant: a depiction of the product surface ── */
body.sdo-landing-page .site-ai__mock {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
}
body.sdo-landing-page .site-ai__mock-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block-end: var(--s3);
  border-block-end: 1px solid var(--border);
}
body.sdo-landing-page .site-ai__avatar {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ai);
}
body.sdo-landing-page .site-ai__mock-id { flex: 1 1 auto; min-inline-size: 0; }
body.sdo-landing-page .site-ai__mock-id strong {
  display: block;
  color: var(--text-strong);
  font-size: var(--fs-small);
}
body.sdo-landing-page .site-ai__mock-id small {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .site-ai__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-caption);
  color: var(--ok);
}

body.sdo-landing-page .site-ai__msgs { display: grid; gap: var(--s3); }
body.sdo-landing-page .site-ai__bubble {
  padding: var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}
body.sdo-landing-page .site-ai__bubble--user {
  justify-self: start;
  max-inline-size: 90%;
  border: 1px solid var(--border);
  color: var(--text);
}
/* Machine output: the purple edge is the mark, not decoration. */
body.sdo-landing-page .site-ai__bubble--bot {
  display: grid;
  gap: var(--s2);
  border: 1px solid color-mix(in oklab, var(--ai) 34%, var(--border));
  background: color-mix(in oklab, var(--ai) 7%, transparent);
  color: var(--text);
}
body.sdo-landing-page .site-ai__chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--ai) 16%, transparent);
  color: var(--ai);
  font-size: var(--fs-caption);
}
body.sdo-landing-page .site-ai__bubble--bot em {
  font-style: normal;
  color: var(--text-label);
  font-size: var(--fs-caption);
}

/* Feedback — brand book §5.3 mandatory element 3. Depicted, not operable:
   disabled and aria-hidden, because this page cannot record the vote. */
body.sdo-landing-page .site-ai__feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .site-ai__feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  font-size: var(--fs-caption);
  color: var(--text-label);
}

body.sdo-landing-page .site-ai__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text-label);
}

/* ── Agent mini-visualisations (aiVizHtml) ──────────────────────────────────
   Ten variants — terminal, bars, radar, stream, quests, scores, chat, alert —
   all previously styled only by landing.css. Given a self-standing base here
   so they survive that sheet's deletion in Task 17 rather than collapsing to
   unstyled text. The per-variant detail is deliberately minimal: these are
   supplementary depictions of agent output, not the message itself, which the
   bot bubble beside them already carries.
   ─────────────────────────────────────────────────────────────────────────── */
body.sdo-landing-page .site-ai__viz .ai-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: var(--s2);
  min-block-size: 120px;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  overflow: hidden;
}
body.sdo-landing-page .site-ai__viz .ai-mini--term {
  display: block;
  font-family: var(--font-mono);
  line-height: 1.9;
}
body.sdo-landing-page .site-ai__viz .ai-mini--bars,
body.sdo-landing-page .site-ai__viz .ai-mini--scores {
  align-items: flex-end;
  gap: var(--s1);
}
body.sdo-landing-page .site-ai__viz .ai-mini__bar {
  flex: 1 1 0;
  min-inline-size: 6px;
  block-size: var(--h, 40%);
  border-radius: 2px 2px 0 0;
  background: color-mix(in oklab, var(--ai) 45%, transparent);
}
body.sdo-landing-page .site-ai__viz .ai-mini__lead,
body.sdo-landing-page .site-ai__viz .ai-mini__quest,
body.sdo-landing-page .site-ai__viz .ai-mini__who,
body.sdo-landing-page .site-ai__viz .ai-mini__ai {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
body.sdo-landing-page .site-ai__viz .ai-mini__ai {
  border-color: color-mix(in oklab, var(--ai) 34%, var(--border));
  color: var(--ai);
}
body.sdo-landing-page .site-ai__viz .ai-mini__lead.is-hot { color: var(--warn); }
body.sdo-landing-page .site-ai__viz .ai-mini__lead.is-cold { color: var(--text-label); }
body.sdo-landing-page .site-ai__viz .ai-mini__core {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid color-mix(in oklab, var(--ai) 34%, var(--border));
  border-radius: 50%;
  color: var(--ai);
}
body.sdo-landing-page .site-ai__viz .ai-mini__ring {
  inline-size: 56px;
  block-size: 56px;
  border: 1px solid var(--border);
  border-radius: 50%;
}
body.sdo-landing-page .site-ai__viz .ai-mini__ring--2 {
  inline-size: 76px;
  block-size: 76px;
}
body.sdo-landing-page .site-ai__viz .ai-live-alert {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
}
body.sdo-landing-page .site-ai__viz .ai-live-alert.is-warn {
  background: color-mix(in oklab, var(--warn) 14%, transparent);
  color: var(--warn);
}
body.sdo-landing-page .site-ai__viz .ai-live-alert.is-danger {
  background: color-mix(in oklab, var(--risk) 14%, transparent);
  color: var(--risk);
}

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-ai__split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
}
@media (max-width: 767.98px) {
  body.sdo-landing-page .site-ai__split { padding: var(--s4); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.15 INTEGRATIONS — a compact row, minimal chrome
   Six one-line facts do not need six cards. By this point the card shape has
   already carried the features browser and the dashboard rail; a third run of
   it would be the "identical shape" problem the redesign exists to remove.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-integrations__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s8);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .site-integrations__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s4);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .site-integrations__icon {
  flex: 0 0 auto;
  align-self: center;
  inline-size: 20px;
  color: var(--text-label);
  font-size: var(--fs-small);
  text-align: center;
}
body.sdo-landing-page .site-integrations__name {
  flex: 0 0 7rem;
  color: var(--text-strong);
  font-weight: 700;
}
body.sdo-landing-page .site-integrations__desc {
  flex: 1 1 12rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

body.sdo-landing-page .site-integrations__note {
  margin-block-start: var(--s8);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
body.sdo-landing-page .site-integrations__note p {
  margin: 0;
  color: var(--text-muted);
}
body.sdo-landing-page .site-integrations__note p + p {
  margin-block-start: var(--s2);
  font-size: var(--fs-small);
  color: var(--text-label);
}

/* ───────────────────────────────────────────────────────────────────────────
   4.16 CLOSING — scenarios + the one filled CTA
   The scenarios are deliberately quiet. They are anonymous role-based
   statements, not attributed customer testimonials (spec D2), so giving them
   card surfaces and quote ornaments would lend them a weight the content
   cannot carry. A rule and a measure is the honest amount of emphasis.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-scenarios {
  padding-block-end: var(--s16);
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--s16);
}
body.sdo-landing-page .site-scenarios__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s8);
}
body.sdo-landing-page .site-scenario {
  margin: 0;
  padding: var(--s6) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
body.sdo-landing-page .site-scenario__quote {
  margin: 0 0 var(--s4);
}
body.sdo-landing-page .site-scenario__quote p {
  margin: 0;
  color: var(--text);
  line-height: 1.9;
}
body.sdo-landing-page .site-scenario__quote p::before {
  content: "«";
  color: var(--brand-text);
  font-weight: 700;
  margin-inline-end: 0.15em;
}
body.sdo-landing-page .site-scenario__quote p::after {
  content: "»";
  color: var(--brand-text);
  font-weight: 700;
  margin-inline-start: 0.15em;
}
body.sdo-landing-page .site-scenario__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
}
/* Role and context, not a name and a face: nobody is identified, so nothing
   here should look like an identity. */
body.sdo-landing-page .site-scenario__role {
  color: var(--text-strong);
  font-weight: 700;
  font-size: var(--fs-small);
}
body.sdo-landing-page .site-scenario__context {
  font-size: var(--fs-caption);
  color: var(--text-label);
}

body.sdo-landing-page .site-closing__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s16);
  align-items: start;
}
body.sdo-landing-page .site-closing__head {
  margin-block-end: 0;
  max-inline-size: none;
}

body.sdo-landing-page .site-closing__box {
  position: relative;
  padding: var(--s8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

body.sdo-landing-page .site-closing__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-landing-page .site-closing__note a {
  color: var(--brand-text);
  text-decoration: none;
}
body.sdo-landing-page .site-closing__note a:hover { text-decoration: underline; }

/* Success panel — JS toggles .is-visible on it and .is-hidden on the form. */
body.sdo-landing-page .site-closing__success {
  display: none;
  place-items: center;
  gap: var(--s3);
  text-align: center;
}
body.sdo-landing-page .site-closing__success.is-visible { display: grid; }
body.sdo-landing-page .site-form.is-hidden { display: none; }
body.sdo-landing-page .site-closing__success-icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border: 1px solid color-mix(in oklab, var(--ok) 40%, var(--border));
  border-radius: 50%;
  color: var(--ok);
  font-size: 22px;
}
body.sdo-landing-page .site-closing__success h3 {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-landing-page .site-closing__success p {
  margin: 0;
  color: var(--text-muted);
}

body.sdo-landing-page .site-closing__submit { inline-size: 100%; }

/* ───────────────────────────────────────────────────────────────────────────
   4.17 FORM SYSTEM — brand book §4.4
   Label ABOVE the field, never a placeholder standing in for a label: a
   placeholder disappears the moment typing starts, taking the question with
   it. Visual * on required fields. Minimum 44px control height.
   Introduced here for the closing form; Task 12 extends it with the error and
   disabled states the contact page needs.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-landing-page .site-form,
body.sdo-site-page .site-form,
body.sdo-auth-page .site-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
body.sdo-landing-page .site-field--full,
body.sdo-site-page .site-field--full,
body.sdo-auth-page .site-field--full {
  grid-column: 1 / -1;
}

body.sdo-landing-page .site-field__label,
body.sdo-site-page .site-field__label,
body.sdo-auth-page .site-field__label {
  display: block;
  margin-block-end: var(--s2);
  font-size: var(--fs-small);
  color: var(--text);
}
body.sdo-landing-page .site-field__req,
body.sdo-site-page .site-field__req,
body.sdo-auth-page .site-field__req {
  color: var(--risk);
}

body.sdo-landing-page .site-input,
body.sdo-site-page .site-input,
body.sdo-auth-page .site-input {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-strong);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
body.sdo-landing-page .site-input:hover,
body.sdo-site-page .site-input:hover,
body.sdo-auth-page .site-input:hover {
  border-color: color-mix(in oklab, var(--brand-line) 55%, var(--border));
}
body.sdo-landing-page .site-input:focus,
body.sdo-site-page .site-input:focus,
body.sdo-auth-page .site-input:focus,
body.sdo-landing-page .site-input:focus-visible,
body.sdo-site-page .site-input:focus-visible,
body.sdo-auth-page .site-input:focus-visible {
  outline: none;
  border-color: var(--brand-fill);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 22%, transparent);
}
body.sdo-landing-page .site-input::placeholder,
body.sdo-site-page .site-input::placeholder,
body.sdo-auth-page .site-input::placeholder {
  color: var(--text-label);
}
body.sdo-landing-page .site-input--textarea,
body.sdo-site-page .site-input--textarea,
body.sdo-auth-page .site-input--textarea {
  min-block-size: 96px;
  resize: vertical;
}

/* Error state — the border carries it AND the message states it. Colour alone
   would fail anyone who cannot distinguish it (WCAG 1.4.1), so the field is
   also aria-invalid and points at the message via aria-describedby. */
body.sdo-landing-page .site-input.is-invalid,
body.sdo-site-page .site-input.is-invalid,
body.sdo-auth-page .site-input.is-invalid {
  border-color: var(--risk);
}
body.sdo-landing-page .site-field__error,
body.sdo-site-page .site-field__error,
body.sdo-auth-page .site-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
  margin: var(--s2) 0 0;
  font-size: var(--fs-small);
  color: var(--risk);
}

body.sdo-landing-page .site-input:disabled,
body.sdo-site-page .site-input:disabled,
body.sdo-auth-page .site-input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--surface-2);
}

body.sdo-landing-page .site-field__help,
body.sdo-site-page .site-field__help,
body.sdo-auth-page .site-field__help {
  margin: var(--s2) 0 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-closing__cta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s8);
  }
  body.sdo-landing-page .site-scenarios__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-integrations__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  body.sdo-landing-page .site-integrations__item {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--s2);
    padding-block: var(--s3);
  }
  body.sdo-landing-page .site-integrations__name {
    flex: 0 0 auto;
    min-inline-size: 5.5rem;
    font-size: var(--fs-small);
  }
  body.sdo-landing-page .site-integrations__desc {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--fs-caption);
    line-height: 1.55;
  }
  body.sdo-landing-page .site-integrations__note {
    margin-block-start: var(--s4);
    padding: var(--s3);
  }
  body.sdo-landing-page .site-scenarios {
    padding-block-end: var(--s8);
    margin-block-end: var(--s8);
  }
  body.sdo-landing-page .site-scenarios__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }
  body.sdo-landing-page .site-scenario {
    padding: var(--s4) var(--s3);
  }
  body.sdo-landing-page .site-scenario__quote { margin-block-end: var(--s3); }
  body.sdo-landing-page .site-scenario__quote p {
    font-size: var(--fs-small);
    line-height: 1.75;
  }
  body.sdo-landing-page .site-closing__box { padding: var(--s4); }
  body.sdo-landing-page .site-form,
  body.sdo-site-page .site-form,
  body.sdo-auth-page .site-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tighter density for remaining site-* homepage bands on phone */
  body.sdo-landing-page .site-section { padding-block: var(--s8); }
  body.sdo-landing-page .site-head { margin-block-end: var(--s4); }
  body.sdo-landing-page .site-workflow__panel { border-radius: var(--r-md); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.18 INNER PAGE HERO + BREADCRUMB
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-page-hero {
  padding-block: var(--s16) var(--s12);
  border-block-end: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in oklab, var(--cyan) 8%, transparent), transparent 55%),
    var(--surface-0);
}
body.sdo-site-page .site-page-hero__eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-site-page .site-page-hero__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--text-strong);
}
body.sdo-site-page .site-page-hero__lead {
  margin: var(--s4) 0 0;
  max-inline-size: 68ch;
  color: var(--text-muted);
  line-height: 1.75;
}

body.sdo-site-page .site-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s6);
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-site-page .site-crumb a {
  color: var(--text-muted);
  text-decoration: none;
}
body.sdo-site-page .site-crumb a:hover { color: var(--brand-text); }
body.sdo-site-page .site-crumb i { font-size: 10px; }

/* On the article page the crumb leads and the title follows, so the crumb
   sits at the top instead of below the heading. */
body.sdo-site-page .site-page-hero--article .site-crumb {
  margin-block: 0 var(--s8);
}

/* ───────────────────────────────────────────────────────────────────────────
   4.19 BLOG LIST — editorial, not a uniform card grid
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin: 0 0 var(--s3);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-site-page .site-post__cat {
  padding: 2px var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--brand-text);
}

body.sdo-site-page .site-postlist__placeholder {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  background: var(--surface-2);
  color: var(--text-label);
}

/* ── Featured: the newest article leads ── */
body.sdo-site-page .site-postlist__featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
  padding-block-end: var(--s12);
  margin-block-end: var(--s12);
  border-block-end: 1px solid var(--border);
}
body.sdo-site-page .site-postlist__featured-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
body.sdo-site-page .site-postlist__featured-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
body.sdo-site-page .site-postlist__featured-title {
  margin: 0 0 var(--s4);
  font-size: var(--fs-h2);
  font-weight: 800;
}
body.sdo-site-page .site-postlist__featured-title a,
body.sdo-site-page .site-post__title a {
  color: inherit;
  text-decoration: none;
}
body.sdo-site-page .site-postlist__featured-title a:hover,
body.sdo-site-page .site-post__title a:hover { color: var(--brand-text); }
body.sdo-site-page .site-postlist__featured-excerpt {
  margin: 0 0 var(--s6);
  color: var(--text-muted);
  line-height: 1.75;
}
body.sdo-site-page .site-postlist__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 600;
}
body.sdo-site-page .site-postlist__more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── The rest: a dense row each ── */
body.sdo-site-page .site-post {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s6);
  border-block-start: 1px solid var(--border);
  transition: background-color .16s var(--ease);
}
body.sdo-site-page .site-post:hover {
  background: color-mix(in oklab, var(--surface-1) 70%, transparent);
}
body.sdo-site-page .site-post:last-child {
  border-block-end: 1px solid var(--border);
}
body.sdo-site-page .site-post__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
body.sdo-site-page .site-post__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
body.sdo-site-page .site-post__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h3);
  font-weight: 700;
}
body.sdo-site-page .site-post__excerpt {
  margin: 0;
  max-inline-size: 68ch;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* ── Pager ── */
body.sdo-site-page .site-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin-block-start: var(--s12);
}
body.sdo-site-page .site-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  padding-inline: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-site-page .site-pager__btn:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}
body.sdo-site-page .site-pager__status {
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-site-page .site-pager__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-site-page .site-pager__page {
  display: grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  text-decoration: none;
}
body.sdo-site-page .site-pager__page:hover {
  color: var(--brand-text);
  border-color: var(--brand-line);
}
body.sdo-site-page .site-pager__page.is-current {
  background: var(--surface-2);
  border-color: var(--brand-line);
  color: var(--text-strong);
}
body.sdo-site-page .site-pager__page--gap { border-color: transparent; }

/* ── List states, brand book §5.1 ─────────────────────────────────────────
   Only .site-empty is reachable in this server-rendered flow: the list is
   built before the page is sent, so there is no client-side moment at which
   it is loading or has failed. .site-skeleton and .site-empty--error are
   defined so the system HAS those states — Task 16 uses the error shape for
   500.html, and any future client-side pagination has a skeleton to reach
   for that already matches the real content. Flagged in the Task 17 report
   as the two components with no consumer today.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-empty {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s16) var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  text-align: center;
}
body.sdo-site-page .site-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-label);
  font-size: 20px;
}
body.sdo-site-page .site-empty__title {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-site-page .site-empty__text {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--text-muted);
}
/* Error is an empty state that failed: same shape, risk-toned mark, plus a
   code the visitor can quote to support. */
body.sdo-site-page .site-empty--error .site-empty__icon {
  border-color: color-mix(in oklab, var(--risk) 40%, var(--border));
  color: var(--risk);
}
body.sdo-site-page .site-empty__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-label);
  direction: ltr;
  unicode-bidi: isolate;
}

/* Skeleton: matches the real row shape (thumb + two lines), never a spinner
   parked in the middle of the page. */
body.sdo-site-page .site-skeleton {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s6);
  border-block-start: 1px solid var(--border);
}
body.sdo-site-page .site-skeleton__box,
body.sdo-site-page .site-skeleton__line {
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
body.sdo-site-page .site-skeleton__box { aspect-ratio: 16 / 9; }
body.sdo-site-page .site-skeleton__line { block-size: 12px; margin-block-end: var(--s3); }
body.sdo-site-page .site-skeleton__line--short { inline-size: 40%; }

/* ───────────────────────────────────────────────────────────────────────────
   4.20 ARTICLE + PROSE
   The body is raw CKEditor 5 HTML rendered with |safe, so it carries no
   classes and must be styled by element. Everything below is nested under
   .site-prose, which is itself nested under the public body class — no
   element selector escapes into the page, let alone the dashboard.

   Approved token extension (spec §4.5): 17px / 2.0 at ~68ch. The brand book's
   15.5/1.95 is tuned for app UI density, not for reading Persian long-form.
   This is the ONLY sanctioned deviation from the type scale.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-article__head { max-inline-size: 68ch; }
/* The byline follows the headline, so it needs space above rather than below. */
body.sdo-site-page .site-article__byline {
  margin-block: var(--s6) 0;
}
body.sdo-site-page .site-article__title {
  margin: 0 0 var(--s4);
  font-size: var(--fs-h1);
  font-weight: 900;
  letter-spacing: -.01em;
}
body.sdo-site-page .site-article__standfirst {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted);
}

body.sdo-site-page .site-article__media {
  margin: 0 0 var(--s12);
  border-block-end: 1px solid var(--border);
  background: var(--surface-1);
}
body.sdo-site-page .site-article__media img {
  display: block;
  inline-size: 100%;
  max-block-size: 60vh;
  object-fit: cover;
}

body.sdo-site-page .site-article { padding-block: var(--s12) var(--s16); }

body.sdo-site-page .site-prose {
  max-inline-size: 68ch;
  margin-inline: auto;
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: var(--text);
}

body.sdo-site-page .site-prose > :first-child { margin-block-start: 0; }
body.sdo-site-page .site-prose p { margin-block: 0 var(--s6); }

body.sdo-site-page .site-prose h2,
body.sdo-site-page .site-prose h3,
body.sdo-site-page .site-prose h4 {
  margin-block: var(--s12) var(--s4);
  line-height: var(--lh-heading);
}
body.sdo-site-page .site-prose h2 { font-size: var(--fs-h2); font-weight: 800; }
body.sdo-site-page .site-prose h3 { font-size: var(--fs-h3); font-weight: 700; }
body.sdo-site-page .site-prose h4 { font-size: var(--fs-body); font-weight: 700; }

body.sdo-site-page .site-prose a {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.sdo-site-page .site-prose ul,
body.sdo-site-page .site-prose ol {
  margin-block: 0 var(--s6);
  padding-inline-start: var(--s6);
}
body.sdo-site-page .site-prose li { margin-block-end: var(--s2); }

body.sdo-site-page .site-prose blockquote {
  margin: var(--s8) 0;
  padding-inline-start: var(--s6);
  border-inline-start: 2px solid var(--brand-line);
  color: var(--text-muted);
}
body.sdo-site-page .site-prose blockquote p:last-child { margin-block-end: 0; }

body.sdo-site-page .site-prose hr {
  margin-block: var(--s12);
  border: 0;
  border-block-start: 1px solid var(--border);
}

body.sdo-site-page .site-prose img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--r-md);
}
body.sdo-site-page .site-prose figure { margin: var(--s8) 0; }
body.sdo-site-page .site-prose figcaption {
  margin-block-start: var(--s2);
  font-size: var(--fs-small);
  color: var(--text-label);
  text-align: center;
}

/* Inline code stays inline; a code BLOCK scrolls inside itself so a long
   unbreakable line never widens the page (spec §9, zero tolerance). */
body.sdo-site-page .site-prose code {
  padding: 2px var(--s1);
  border-radius: 4px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .9em;
  direction: ltr;
  unicode-bidi: isolate;
}
body.sdo-site-page .site-prose pre {
  margin-block: var(--s8);
  padding: var(--s4);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  direction: ltr;
}
body.sdo-site-page .site-prose pre code {
  padding: 0;
  background: none;
  font-size: var(--fs-mono);
  line-height: 1.8;
}

/* CKEditor 5 wraps tables in <figure class="table">, which is the container
   that scrolls. The bare-<table> rule below is a fallback for content pasted
   without that wrapper: display:block costs the table its ARIA table role, so
   it is deliberately the second choice, not the first. */
body.sdo-site-page .site-prose figure.table {
  margin: var(--s8) 0;
  overflow-x: auto;
}
body.sdo-site-page .site-prose figure.table > table { inline-size: 100%; }
body.sdo-site-page .site-prose > table {
  display: block;
  overflow-x: auto;
  max-inline-size: 100%;
}
body.sdo-site-page .site-prose table {
  border-collapse: collapse;
  font-size: var(--fs-small);
}
body.sdo-site-page .site-prose :is(th, td) {
  padding: var(--s3);
  border: 1px solid var(--border);
  text-align: start;
}
body.sdo-site-page .site-prose th {
  background: var(--surface-2);
  color: var(--text-strong);
  font-weight: 700;
}

/* ── Tags + article footer ── */
body.sdo-site-page .site-article__tags {
  max-inline-size: 68ch;
  margin: var(--s12) auto 0;
  padding-block-start: var(--s6);
  border-block-start: 1px solid var(--border);
}
body.sdo-site-page .site-article__tags-label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-site-page .site-article__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-site-page .site-article__tag {
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.sdo-site-page .site-article__nav {
  max-inline-size: 68ch;
  margin: var(--s8) auto 0;
}

@media (max-width: 767.98px) {
  body.sdo-site-page .site-page-hero { padding-block: var(--s12) var(--s8); }
  body.sdo-site-page .site-page-hero__title,
  body.sdo-site-page .site-article__title { font-size: var(--fs-h2); }
  body.sdo-site-page .site-article__standfirst { font-size: var(--fs-body); }

  body.sdo-site-page .site-postlist__featured,
  body.sdo-site-page .site-post,
  body.sdo-site-page .site-skeleton {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
  body.sdo-site-page .site-postlist__featured-title { font-size: var(--fs-h3); }
  body.sdo-site-page .site-article { padding-block: var(--s8) var(--s12); }
  body.sdo-site-page .site-article__media { margin-block-end: var(--s8); }
  body.sdo-site-page .site-prose h2 { font-size: var(--fs-h3); }
  body.sdo-site-page .site-empty { padding: var(--s12) var(--s4); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.21 ALERTS — page-level status, not a toast
   Rendered by Django's messages framework on the contact page. An icon plus a
   sentence on a tinted surface; the role attribute (status/alert) does the
   announcing, so the colour is reinforcement rather than the only signal.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-alert,
body.sdo-landing-page .site-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-block-end: var(--s8);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
}
body.sdo-site-page .site-alert--ok,
body.sdo-landing-page .site-alert--ok {
  border-color: color-mix(in oklab, var(--ok) 40%, var(--border));
  background: color-mix(in oklab, var(--ok) 8%, transparent);
}
body.sdo-site-page .site-alert--ok i { color: var(--ok); }
body.sdo-site-page .site-alert--error,
body.sdo-landing-page .site-alert--error {
  border-color: color-mix(in oklab, var(--risk) 40%, var(--border));
  background: color-mix(in oklab, var(--risk) 8%, transparent);
}
body.sdo-site-page .site-alert--error i { color: var(--risk); }
/* Inside the form grid the banner spans both columns. */
body.sdo-site-page .site-alert.site-field--full { margin-block-end: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   4.22 CONTACT — form leading, contact details as a quiet aside
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s12);
  align-items: start;
}
body.sdo-site-page .site-contact__form {
  padding: var(--s8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-site-page .site-contact__head { margin-block-end: var(--s8); }
body.sdo-site-page .site-contact__title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h2);
  font-weight: 800;
}
body.sdo-site-page .site-contact__lead {
  margin: 0;
  color: var(--text-muted);
}

body.sdo-site-page .site-contact__aside {
  display: grid;
  gap: var(--s3);
}

/* One neutral surface for all four. Four different accent colours on four
   adjacent cards is far past the brand book's 2% semantic budget, and told
   the reader nothing — the icons already distinguish them. */
body.sdo-site-page .site-infocard {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s var(--ease);
}
body.sdo-site-page a.site-infocard:hover {
  border-color: var(--brand-line);
}
body.sdo-site-page .site-infocard__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-label);
}
body.sdo-site-page a.site-infocard:hover .site-infocard__icon {
  color: var(--brand-text);
}
body.sdo-site-page .site-infocard__body { min-inline-size: 0; }
body.sdo-site-page .site-infocard__label {
  display: block;
  margin-block-end: var(--s1);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-site-page .site-infocard__value {
  display: block;
  font-size: var(--fs-small);
  color: var(--text);
}

/* ───────────────────────────────────────────────────────────────────────────
   4.23 ABOUT — copy leads, image supports
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s16);
  align-items: center;
}
body.sdo-site-page .site-about__eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-site-page .site-about__title {
  margin: 0 0 var(--s6);
  font-size: var(--fs-h2);
  font-weight: 800;
}
body.sdo-site-page .site-about__text {
  margin: 0 0 var(--s4);
  max-inline-size: 68ch;
  color: var(--text-muted);
}

/* The one line the page wants remembered: marked by a rule and stronger ink,
   not by a gradient or a tinted box. */
body.sdo-site-page .site-about__highlight {
  margin: var(--s6) 0;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--brand-line);
  color: var(--text-strong);
  font-weight: 600;
}

body.sdo-site-page .site-about__list {
  display: grid;
  gap: var(--s3);
  margin: 0 0 var(--s8);
  padding: 0;
  list-style: none;
}
body.sdo-site-page .site-about__list li {
  position: relative;
  padding-inline-start: var(--s6);
  color: var(--text-muted);
}
/* The tick is generated, so the list text stays clean for copy-paste and for
   screen readers, which would otherwise read an icon font's placeholder. */
body.sdo-site-page .site-about__list li::before {
  content: "";
  position: absolute;
  inset-block-start: .72em;
  inset-inline-start: 0;
  inline-size: var(--s3);
  block-size: 1px;
  background: var(--brand-line);
}

body.sdo-site-page .site-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

body.sdo-site-page .site-about__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  aspect-ratio: 4 / 3;
}
body.sdo-site-page .site-about__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (max-width: 1023.98px) {
  body.sdo-site-page .site-contact,
  body.sdo-site-page .site-about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s8);
  }
  /* Copy first on narrow screens — the image is support, not the message. */
  body.sdo-site-page .site-about__media { order: 2; }
}

@media (max-width: 767.98px) {
  body.sdo-site-page .site-contact__title,
  body.sdo-site-page .site-about__title { font-size: var(--fs-h3); }
  body.sdo-site-page .site-about__actions .btn { flex: 1 1 auto; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.24 ACCORDION — native <details>, no JavaScript
   The FAQ was the only public template using Bootstrap JS. <details>/<summary>
   is keyboard-accessible by default, works with JS disabled, and name="faq"
   gives the exclusive-open behaviour data-bs-parent used to provide.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-faq { max-inline-size: 80ch; }
body.sdo-site-page .site-faq__intro {
  margin: 0 0 var(--s8);
  color: var(--text-muted);
}
body.sdo-site-page .site-faq__intro a { color: var(--brand-text); }

body.sdo-site-page .site-accordion {
  border-block-start: 1px solid var(--border);
}
body.sdo-site-page .site-accordion__item {
  border-block-end: 1px solid var(--border);
}

body.sdo-site-page .site-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-block-size: 44px;
  padding-block: var(--s4);
  color: var(--text-strong);
  font-weight: 700;
  cursor: pointer;
  list-style: none;          /* Firefox */
  transition: color .16s var(--ease);
}
/* The default disclosure triangle would sit beside our own chevron. */
body.sdo-site-page .site-accordion__summary::-webkit-details-marker { display: none; }
body.sdo-site-page .site-accordion__summary:hover { color: var(--brand-text); }
body.sdo-site-page .site-accordion__summary > span { flex: 1 1 auto; }
body.sdo-site-page .site-accordion__summary > i:first-child { color: var(--text-label); }

body.sdo-site-page .site-accordion__chev {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--text-label);
  transition: rotate .2s var(--ease);
}
body.sdo-site-page .site-accordion__item[open] .site-accordion__chev {
  rotate: 180deg;
  color: var(--brand-text);
}

body.sdo-site-page .site-accordion__body {
  padding-block: 0 var(--s6);
  padding-inline-start: var(--s6);
  color: var(--text-muted);
}
body.sdo-site-page .site-accordion__body a { color: var(--brand-text); }

/* ───────────────────────────────────────────────────────────────────────────
   4.25 PRICING
   No tier is promoted: the copy makes no recommendation, so the design must
   not invent one. Equal weight, equal chrome, one secondary CTA each.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  align-items: start;
}
body.sdo-site-page .site-pricing__tier {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  block-size: 100%;
}
body.sdo-site-page .site-pricing__head { min-block-size: 0; }
body.sdo-site-page .site-pricing__name {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h3);
}
body.sdo-site-page .site-pricing__desc {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

body.sdo-site-page .site-pricing__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  margin: 0;
  padding-block-end: var(--s6);
  border-block-end: 1px solid var(--border);
}
body.sdo-site-page .site-pricing__amount strong {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--text-strong);
}
body.sdo-site-page .site-pricing__period {
  font-size: var(--fs-small);
  color: var(--text-label);
}

body.sdo-site-page .site-pricing__features {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--fs-small);
  flex: 1 1 auto;
}
body.sdo-site-page .site-pricing__features li {
  position: relative;
  padding-inline-start: var(--s6);
}
body.sdo-site-page .site-pricing__features li::before {
  content: "";
  position: absolute;
  inset-block-start: .7em;
  inset-inline-start: 0;
  inline-size: var(--s3);
  block-size: 1px;
  background: var(--brand-line);
}
body.sdo-site-page .site-pricing__cta { inline-size: 100%; }

/* ───────────────────────────────────────────────────────────────────────────
   4.26 PRODUCTS + PRODUCT DETAIL
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
body.sdo-site-page .site-products__item {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-site-page .site-products__icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-label);
}
body.sdo-site-page .site-products__title {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
}
body.sdo-site-page .site-products__text {
  margin: 0 0 var(--s4);
  color: var(--text-muted);
  font-size: var(--fs-small);
}
/* Not a link — the destination does not exist. Rendered muted and inert so it
   never reads as an available action. */
body.sdo-site-page .site-products__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
  color: var(--text-label);
  cursor: default;
}

body.sdo-site-page .site-productdetail {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s12);
  align-items: start;
}
body.sdo-site-page .site-productdetail__widget {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-site-page .site-productdetail__widget + .site-productdetail__widget {
  margin-block-start: var(--s6);
}
body.sdo-site-page .site-productdetail__widget-title {
  margin: 0 0 var(--s4);
  font-size: var(--fs-h3);
}
body.sdo-site-page .site-productdetail__features {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--fs-small);
}
body.sdo-site-page .site-productdetail__features li {
  position: relative;
  padding-inline-start: var(--s6);
}
body.sdo-site-page .site-productdetail__features li::before {
  content: "";
  position: absolute;
  inset-block-start: .7em;
  inset-inline-start: 0;
  inline-size: var(--s3);
  block-size: 1px;
  background: var(--brand-line);
}
/* The consultation form has no endpoint, so it is disabled rather than
   pretending to accept a request. See the template comment. */
body.sdo-site-page .site-form--stacked { grid-template-columns: minmax(0, 1fr); }
body.sdo-site-page .site-productdetail__note {
  margin: var(--s4) 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: center;
}
body.sdo-site-page .site-productdetail__note a { color: var(--brand-text); }

/* ───────────────────────────────────────────────────────────────────────────
   4.27 LEGAL — sticky table of contents
   Long documents; the TOC is the one piece of chrome that earns its place.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-site-page .site-legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s12);
  align-items: start;
}
body.sdo-site-page .site-legal__toc-panel {
  position: sticky;
  inset-block-start: var(--s16);
  max-block-size: calc(100vh - var(--s16) * 2);
  overflow-y: auto;
}
body.sdo-site-page .site-legal__toc-label {
  margin: 0 0 var(--s3);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-site-page .site-legal__toc-list {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Active state is a rule on the inline-start edge — the same "current thing"
   vocabulary as the header nav and the feature tabs. */
body.sdo-site-page .site-legal__toc-link {
  display: block;
  padding: var(--s2) var(--s3);
  border-inline-start: 2px solid transparent;
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
body.sdo-site-page .site-legal__toc-link:hover { color: var(--text); }
body.sdo-site-page .site-legal__toc-link.is-active {
  border-inline-start-color: var(--cyan);
  color: var(--text-strong);
}

body.sdo-site-page .site-legal__head {
  padding-block-end: var(--s8);
  margin-block-end: var(--s8);
  border-block-end: 1px solid var(--border);
}
body.sdo-site-page .site-legal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s6);
}
body.sdo-site-page .site-legal__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-site-page .site-legal__chip i { color: var(--text-label); }

/* The legal body is authored markup, so it gets the prose treatment too. */
body.sdo-site-page .site-legal__sections {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
body.sdo-site-page .site-legal__sections .terms-content {
  padding-block-end: var(--s8);
  margin-block-end: var(--s8);
  border-block-end: 1px solid var(--border);
  scroll-margin-block-start: var(--s16);
}
body.sdo-site-page .site-legal__sections .terms-content:last-child {
  border-block-end: 0;
}
body.sdo-site-page .site-legal__sections h3 {
  margin: 0 0 var(--s4);
  font-size: var(--fs-h3);
  font-weight: 700;
}
body.sdo-site-page .site-legal__sections p { margin: 0 0 var(--s4); }
body.sdo-site-page .site-legal__sections ul,
body.sdo-site-page .site-legal__sections ol {
  margin: 0 0 var(--s4);
  padding-inline-start: var(--s6);
}
body.sdo-site-page .site-legal__sections li { margin-block-end: var(--s2); }
body.sdo-site-page .site-legal__sections a {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1023.98px) {
  body.sdo-site-page .site-pricing,
  body.sdo-site-page .site-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.sdo-site-page .site-productdetail,
  body.sdo-site-page .site-legal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s8);
  }
  /* The TOC stops being sticky once it is above the content rather than
     beside it — a sticky bar there would just eat the viewport. */
  body.sdo-site-page .site-legal__toc-panel {
    position: static;
    max-block-size: none;
  }
}

@media (max-width: 767.98px) {
  body.sdo-site-page .site-pricing,
  body.sdo-site-page .site-products {
    grid-template-columns: minmax(0, 1fr);
  }
  body.sdo-site-page .site-pricing__tier { padding: var(--s6); }
  body.sdo-site-page .site-accordion__body { padding-inline-start: var(--s4); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.28 ELECOMP CAMPAIGN — replaces the 2,400-line elecomp.css
   Everything here is scoped to .site-campaign, which only elecomp.html sets.

   Two families of class name survive on purpose and must NOT be renamed:
     ec-input · ec-input--ltr · ec-input--textarea · ec-select
       hardcoded in intro/forms.py widget attrs. The frontend-only constraint
       forbids touching that file, so the names are styled, not changed.
     elecomp-* · [data-*] · #elecomp-*
       the elecomp.js contract — nav scroll state, bundle toggles, the module
       counter, inline field errors, the submit spinner and the FAB.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Campaign nav (overrides the standard header via {% block header %}) ── */
body.sdo-landing-page .elecomp-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--surface-0);
  border-block-end: 1px solid var(--border);
  transition: background-color .2s var(--ease);
}
body.sdo-landing-page .elecomp-nav.is-scrolled { background: var(--surface-1); }
body.sdo-landing-page .elecomp-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  inline-size: 100%;
  max-inline-size: 1280px;
  min-block-size: 64px;
  margin-inline: auto;
  padding-inline: var(--s6);
}
body.sdo-landing-page .elecomp-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
}
body.sdo-landing-page .elecomp-nav__badge {
  padding: 2px var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .elecomp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}
body.sdo-landing-page .elecomp-nav__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--text-muted);
  text-decoration: none;
}
body.sdo-landing-page .elecomp-nav__links a:hover { color: var(--text); }
/* Matched through .elecomp-nav__links rather than escalated with !important:
   the CTA is an <a> inside that list, so the descendant rule above out-ranks a
   bare class. Specificity is the fix; !important was only ever masking it. */
body.sdo-landing-page .elecomp-nav__links a.elecomp-nav__cta,
body.sdo-landing-page .elecomp-nav__cta {
  padding-inline: var(--s4);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  color: var(--brand-text);
}
body.sdo-landing-page .elecomp-nav__cta--mobile { display: none; }

@media (max-width: 767.98px) {
  body.sdo-landing-page .elecomp-nav__inner { padding-inline: var(--s4); gap: var(--s3); }
  body.sdo-landing-page .elecomp-nav__links { display: none; }
  body.sdo-landing-page .elecomp-nav__cta--mobile {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    margin-inline-start: auto;
  }
}

/* ── Campaign hero ── */
body.sdo-landing-page .site-campaign__hero { padding-block: var(--s16); }
body.sdo-landing-page .site-campaign__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s16);
  align-items: center;
}
body.sdo-landing-page .site-campaign__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-block-end: var(--s6);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
body.sdo-landing-page .site-campaign__badge-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ok);
}
body.sdo-landing-page .hero-badge__live {
  padding-inline-start: var(--s2);
  border-inline-start: 1px solid var(--border);
  color: var(--brand-text);
}
body.sdo-landing-page .elecomp-hero__eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .site-campaign__title {
  margin: 0 0 var(--s6);
  font-size: var(--fs-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.3;
}
body.sdo-landing-page .elecomp-hero__accent { color: var(--brand-text); }
body.sdo-landing-page .site-campaign__lead {
  margin: 0 0 var(--s8);
  max-inline-size: 48ch;
  color: var(--text-muted);
}
body.sdo-landing-page .site-campaign__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-end: var(--s8);
}

body.sdo-landing-page .site-campaign__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s3);
}
body.sdo-landing-page .elecomp-stat-card {
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
body.sdo-landing-page .elecomp-stat-card__icon {
  margin-block-end: var(--s2);
  color: var(--text-label);
  font-size: var(--fs-small);
}
body.sdo-landing-page .elecomp-stat-card__value {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.2;
}
body.sdo-landing-page .elecomp-stat-card__label {
  margin-block-start: var(--s1);
  font-size: var(--fs-caption);
  color: var(--text-label);
}

/* ── Command mock ── */
body.sdo-landing-page .elecomp-command {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}
body.sdo-landing-page .elecomp-command__chrome {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-block-end: 1px solid var(--border);
  font-size: var(--fs-small);
}
body.sdo-landing-page .elecomp-command__dots { display: flex; gap: var(--s1); }
body.sdo-landing-page .elecomp-command__dots i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--border);
}
body.sdo-landing-page .elecomp-command__title {
  flex: 1 1 auto;
  color: var(--text-strong);
  font-weight: 600;
}
/* The AI layer badge — this panel shows machine-generated output, so the
   purple is correct here (spec §4.7). */
body.sdo-landing-page .elecomp-command__live {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--ai) 16%, transparent);
  color: var(--ai);
  font-size: var(--fs-caption);
}
body.sdo-landing-page .elecomp-command__live i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
}
body.sdo-landing-page .elecomp-command__body { display: grid; }
body.sdo-landing-page .elecomp-command__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .elecomp-command__row:first-child { border-block-start: 0; }
body.sdo-landing-page .elecomp-command__icon {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-label);
  font-size: 13px;
}
body.sdo-landing-page .elecomp-command__meta { min-inline-size: 0; }
body.sdo-landing-page .elecomp-command__meta strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  color: var(--text-strong);
  font-size: var(--fs-small);
}
body.sdo-landing-page .elecomp-command__meta span {
  display: block;
  margin-block-start: var(--s1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
body.sdo-landing-page .elecomp-command__footer {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-block-start: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-caption);
  color: var(--text-label);
}

/* AI / pilot tags — purple only where the tag literally says AI. */
body.sdo-landing-page .ec-ai-tag,
body.sdo-landing-page .ec-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-label);
}
body.sdo-landing-page .ec-ai-tag--en,
body.sdo-landing-page .ec-card__tag--ai {
  border-color: color-mix(in oklab, var(--ai) 34%, var(--border));
  color: var(--ai);
}
body.sdo-landing-page .ec-ai-tag--pilot,
body.sdo-landing-page .ec-card__tag--pilot {
  border-color: color-mix(in oklab, var(--warn) 34%, var(--border));
  color: var(--warn);
}

/* ── Scope ── */
body.sdo-landing-page .elecomp-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  margin-block-end: var(--s8);
}
body.sdo-landing-page .ec-card--cap {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
body.sdo-landing-page .ec-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-block-end: var(--s4);
}
body.sdo-landing-page .ec-card__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-label);
}
body.sdo-landing-page .ec-card--cap h3 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h3);
}
body.sdo-landing-page .ec-card--cap p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

body.sdo-landing-page .elecomp-platform,
body.sdo-landing-page .elecomp-roadmap {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
body.sdo-landing-page .elecomp-roadmap { margin-block-start: var(--s4); }
body.sdo-landing-page .elecomp-platform__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-block-end: var(--s4);
}
body.sdo-landing-page .elecomp-platform__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--brand-text);
}
body.sdo-landing-page .elecomp-platform__head strong {
  display: block;
  color: var(--text-strong);
}
body.sdo-landing-page .elecomp-platform__head span {
  font-size: var(--fs-small);
  color: var(--text-label);
}
body.sdo-landing-page .elecomp-platform__chips,
body.sdo-landing-page .elecomp-roadmap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
body.sdo-landing-page .elecomp-platform-chip,
body.sdo-landing-page .elecomp-roadmap__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.sdo-landing-page .elecomp-platform-chip i { color: var(--text-label); }
body.sdo-landing-page .elecomp-roadmap__label {
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}

/* ── Request form ── */
body.sdo-landing-page .elecomp-form-shell {
  margin-block-start: var(--s8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}
body.sdo-landing-page .elecomp-form-shell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6);
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
}
body.sdo-landing-page .elecomp-form-shell__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
body.sdo-landing-page .elecomp-logo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 800;
  color: var(--text-strong);
}
body.sdo-landing-page .elecomp-form-shell__head h3 {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-landing-page .elecomp-form-shell__head p {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
body.sdo-landing-page .elecomp-form-counter {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
body.sdo-landing-page .elecomp-form-counter__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  color: var(--brand-text);
}
body.sdo-landing-page .elecomp-form-counter__label {
  font-size: var(--fs-caption);
  color: var(--text-label);
}

body.sdo-landing-page .elecomp-form { padding: var(--s6); }
body.sdo-landing-page .elecomp-form__section + .elecomp-form__section {
  margin-block-start: var(--s8);
  padding-block-start: var(--s8);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .ec-form-panel__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-block-end: var(--s6);
}
body.sdo-landing-page .ec-form-panel__icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-label);
}
body.sdo-landing-page .ec-form-panel__head h4 {
  margin: 0;
  font-size: var(--fs-h3);
}
body.sdo-landing-page .ec-form-panel__head p {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

body.sdo-landing-page .ec-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
body.sdo-landing-page .ec-field--full { grid-column: 1 / -1; }
body.sdo-landing-page .ec-field label {
  display: block;
  margin-block-end: var(--s2);
  font-size: var(--fs-small);
  color: var(--text);
}
body.sdo-landing-page .ec-required { color: var(--risk); }

/* THE LOCKED CLASS NAMES. intro/forms.py hardcodes these in widget attrs and
   the frontend-only constraint forbids editing that file — so they are styled
   here rather than renamed. Same visual contract as .site-input. */
body.sdo-landing-page .ec-input,
body.sdo-landing-page .ec-select {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-0);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color .16s var(--ease);
}
body.sdo-landing-page .ec-input:hover,
body.sdo-landing-page .ec-select:hover { border-color: var(--text-label); }
body.sdo-landing-page .ec-input::placeholder { color: var(--text-label); }
body.sdo-landing-page .ec-input--ltr { direction: ltr; }
body.sdo-landing-page .ec-input--textarea {
  min-block-size: 96px;
  resize: vertical;
}
/* elecomp.js adds this on a rejected field. */
body.sdo-landing-page .ec-input--invalid { border-color: var(--risk); }

body.sdo-landing-page .ec-select-wrap { position: relative; }
body.sdo-landing-page .ec-select {
  appearance: none;
  padding-inline-end: var(--s8);
}
body.sdo-landing-page .ec-select-wrap__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--s3);
  translate: 0 -50%;
  pointer-events: none;
  font-size: var(--fs-small);
  color: var(--text-label);
}

/* Inline field error — elecomp.js unhides these and fills their text. */
body.sdo-landing-page .field-error {
  display: block;
  margin-block-start: var(--s2);
  font-size: var(--fs-small);
  color: var(--risk);
}
body.sdo-landing-page .field-error[hidden] { display: none; }

/* ── Bundle picker ── */
body.sdo-landing-page .elecomp-starter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
body.sdo-landing-page .elecomp-starter-divider {
  margin: var(--s6) 0 var(--s3);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  color: var(--text-label);
}
body.sdo-landing-page .elecomp-starter-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
  transition: border-color .16s var(--ease);
}
body.sdo-landing-page .elecomp-starter-card.is-selected {
  border-color: var(--brand-line);
  background: var(--surface-2);
}
body.sdo-landing-page .elecomp-starter-card__btn {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s4);
  border: 0;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
body.sdo-landing-page .elecomp-starter-card__radio {
  flex: 0 0 auto;
  color: var(--text-label);
}
body.sdo-landing-page .elecomp-starter-card.is-selected .elecomp-starter-card__radio {
  color: var(--brand-text);
}
body.sdo-landing-page .elecomp-starter-card__body strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  color: var(--text-strong);
  font-size: var(--fs-small);
}
body.sdo-landing-page .elecomp-starter-card__body small {
  display: block;
  margin-block-start: var(--s1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
/* The real checkboxes are driven by the bundle buttons; they stay in the DOM
   (and in the POST) but out of the visual field. */
body.sdo-landing-page .elecomp-module-check--hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── Submit + alerts ── */
body.sdo-landing-page .elecomp-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-block-start: var(--s8);
  padding-block-start: var(--s6);
  border-block-start: 1px solid var(--border);
}
body.sdo-landing-page .elecomp-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  padding-inline: var(--s6);
  border: 1px solid var(--brand-fill-border);
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s var(--ease);
}
body.sdo-landing-page .elecomp-submit-btn:hover { background: var(--brand-fill-hover); }
body.sdo-landing-page .elecomp-submit-btn.is-loading {
  opacity: .7;
  pointer-events: none;
}
/* A full sentence, not a label — caption (12px) was too small for it. Moved to
   --fs-small, the brand book's "tables, field help" size and the closest token
   to spec §9's 14px floor; --fs-body would overweight a legal footnote. */
body.sdo-landing-page .elecomp-form-trust {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-label);
}

body.sdo-landing-page .elecomp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-block-end: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
}
body.sdo-landing-page .elecomp-alert--success {
  border-color: color-mix(in oklab, var(--ok) 40%, var(--border));
  background: color-mix(in oklab, var(--ok) 8%, transparent);
}
body.sdo-landing-page .elecomp-alert--success i { color: var(--ok); }
body.sdo-landing-page .elecomp-alert--error {
  border-color: color-mix(in oklab, var(--risk) 40%, var(--border));
  background: color-mix(in oklab, var(--risk) 8%, transparent);
}
body.sdo-landing-page .elecomp-alert--error i { color: var(--risk); }
body.sdo-landing-page .elecomp-form-alerts[hidden] { display: none; }

body.sdo-landing-page .site-campaign__contact-note {
  margin: var(--s6) 0 0;
  font-size: var(--fs-small);
  color: var(--text-label);
  text-align: center;
}
body.sdo-landing-page .site-campaign__contact-note a { color: var(--brand-text); text-decoration: none; }

/* ── Floating request button ── */
body.sdo-landing-page .elecomp-fab {
  position: fixed;
  inset-block-end: var(--s6);
  inset-inline-end: var(--s6);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  padding-inline: var(--s4);
  border: 1px solid var(--brand-fill-border);
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-3);
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
body.sdo-landing-page .elecomp-fab.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1023.98px) {
  body.sdo-landing-page .site-campaign__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s12);
  }
  body.sdo-landing-page .elecomp-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  body.sdo-landing-page .site-campaign__hero { padding-block: var(--s12); }
  body.sdo-landing-page .site-campaign__title { font-size: var(--fs-h1); }
  body.sdo-landing-page .elecomp-cap-grid,
  body.sdo-landing-page .ec-form-grid,
  body.sdo-landing-page .elecomp-starter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.sdo-landing-page .elecomp-form,
  body.sdo-landing-page .elecomp-form-shell__head { padding: var(--s4); }
  body.sdo-landing-page .site-campaign__actions .btn { flex: 1 1 auto; }
  body.sdo-landing-page .elecomp-fab {
    inset-inline: var(--s4);
    inset-block-end: var(--s4);
    justify-content: center;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.29 AUTH — replaces auth-pages.css
   Everything is scoped to body.sdo-auth-page, which only base-auth.html sets.

   Visual target: brand book P01 mock — form on surface-0 (no floating glass
   card), brand column as a quiet navy panel with KPI tiles, dense vertical
   rhythm. Class names are hooks used by eight child templates.
   ─────────────────────────────────────────────────────────────────────────── */

body.sdo-auth-page {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  margin: 0;
}

body.sdo-auth-page .auth-shell { min-block-size: 100vh; min-block-size: 100dvh; }
body.sdo-auth-page .auth-shell__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

/* Form column — product chrome, not a marketing hero */
body.sdo-auth-page .auth-shell__form-col {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--s6) var(--s8);
  background: var(--surface-0);
}
body.sdo-auth-page .auth-panel {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 400px;
  margin-block: auto;
  padding-block: var(--s8);
}

body.sdo-auth-page .auth-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--s6);
}

/* ── Brand block ── */
body.sdo-auth-page .auth-brand { margin-block-end: var(--s6); }
body.sdo-auth-page .auth-brand__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-block-end: var(--s8);
  text-decoration: none;
  color: inherit;
}
body.sdo-auth-page .auth-brand__mark:hover .auth-brand__mark-text strong {
  color: var(--brand-text);
}
body.sdo-auth-page .auth-brand__mark-icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--brand-text);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
}
body.sdo-auth-page .auth-brand__mark-text strong {
  display: block;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  transition: color .16s var(--ease);
}
body.sdo-auth-page .auth-brand__mark-text small {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-caption);
  color: var(--text-label);
  letter-spacing: 0.02em;
}
body.sdo-auth-page .auth-brand__heading {
  margin: 0 0 var(--s2);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
body.sdo-auth-page .ob-lead,
body.sdo-auth-page .ob-title + .ob-lead,
body.sdo-auth-page .auth-card > .ob-lead {
  margin: 0 0 var(--s6);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--text-muted);
  max-inline-size: 36ch;
}

/* ── Card: flat surface, not a floating SaaS panel ── */
body.sdo-auth-page .auth-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ── Fields (brand book §4.4) ── */
body.sdo-auth-page .auth-field { margin-block-end: var(--s4); }
body.sdo-auth-page .auth-field label {
  display: block;
  margin-block-end: var(--s2);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
body.sdo-auth-page .auth-input-shell { position: relative; }
body.sdo-auth-page .auth-input,
body.sdo-auth-page .auth-textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-strong);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
body.sdo-auth-page .auth-input:hover,
body.sdo-auth-page .auth-textarea:hover { border-color: color-mix(in oklab, var(--brand-line) 55%, var(--border)); }
body.sdo-auth-page .auth-input:focus,
body.sdo-auth-page .auth-textarea:focus {
  outline: none;
  border-color: var(--brand-fill);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 22%, transparent);
}
body.sdo-auth-page .auth-input:focus-visible,
body.sdo-auth-page .auth-textarea:focus-visible {
  outline: none;
  border-color: var(--brand-fill);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 22%, transparent);
}
body.sdo-auth-page .auth-input::placeholder { color: var(--text-label); }
body.sdo-auth-page .auth-field--ltr .auth-input {
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
}
body.sdo-auth-page .auth-textarea { min-block-size: 96px; resize: vertical; }

body.sdo-auth-page .auth-input-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--s3);
  translate: 0 -50%;
  pointer-events: none;
  color: var(--text-label);
  font-size: var(--fs-small);
}
body.sdo-auth-page .auth-input-shell:has(.auth-input-icon) .auth-input {
  padding-inline-start: var(--s8);
}

body.sdo-auth-page .auth-input-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--s2);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-label);
  cursor: pointer;
}
body.sdo-auth-page .auth-input-toggle:hover { color: var(--text); }
body.sdo-auth-page .auth-input-toggle:focus-visible {
  outline: 2px solid var(--brand-fill);
  outline-offset: 2px;
}
body.sdo-auth-page .auth-input-shell--password .auth-input { padding-inline-end: var(--s12); }

body.sdo-auth-page .auth-otp-input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  letter-spacing: .45em;
  direction: ltr;
  unicode-bidi: isolate;
}

body.sdo-auth-page .auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

/* ── Submit + links — primary fill + quiet secondary, P01 rhythm ── */
body.sdo-auth-page .auth-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-block-start: var(--s4);
}
body.sdo-auth-page .auth-actions-row .auth-submit,
body.sdo-auth-page .auth-actions-row .auth-btn-secondary {
  margin-block-start: 0;
}
body.sdo-auth-page .auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  inline-size: auto;
  min-inline-size: 9.5rem;
  min-block-size: 44px;
  margin-block-start: var(--s4);
  padding-inline: var(--s6);
  border: 1px solid var(--brand-fill-border);
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s var(--ease), transform .12s var(--ease);
}
body.sdo-auth-page .auth-submit:hover { background: var(--brand-fill-hover); }
body.sdo-auth-page .auth-submit:focus-visible {
  outline: 2px solid var(--brand-fill);
  outline-offset: 3px;
}
body.sdo-auth-page .auth-submit:active { transform: translateY(1px); }
body.sdo-auth-page .auth-submit:disabled { opacity: .5; cursor: not-allowed; }

body.sdo-auth-page .auth-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  inline-size: auto;
  min-block-size: 44px;
  margin-block-start: var(--s3);
  padding-inline: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
body.sdo-auth-page .auth-btn-secondary:hover {
  border-color: var(--brand-line);
  background: var(--surface-1);
}

body.sdo-auth-page .auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-block-start: var(--s4);
  font-size: var(--fs-small);
}
body.sdo-auth-page .auth-link,
body.sdo-auth-page .auth-link-btn,
body.sdo-auth-page .auth-back-home {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 40px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
body.sdo-auth-page .auth-link:hover,
body.sdo-auth-page .auth-link-btn:hover {
  border-color: var(--brand-line);
  color: var(--brand-text);
  text-decoration: none;
}
body.sdo-auth-page .auth-link:focus-visible,
body.sdo-auth-page .auth-link-btn:focus-visible {
  outline: 2px solid var(--brand-fill);
  outline-offset: 2px;
}

body.sdo-auth-page .auth-hint,
body.sdo-auth-page .auth-signup-hint {
  margin: var(--s6) 0 0;
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
body.sdo-auth-page .auth-signup-hint a {
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: none;
}
body.sdo-auth-page .auth-signup-hint a:hover { text-decoration: underline; }

body.sdo-auth-page .auth-legal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  margin: var(--s8) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-auth-page .auth-legal a { color: var(--text-muted); text-decoration: none; }
body.sdo-auth-page .auth-legal a:hover { color: var(--brand-text); }

body.sdo-auth-page .auth-divider,
body.sdo-auth-page .auth-section-divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-block: var(--s6);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-auth-page .auth-divider::before,
body.sdo-auth-page .auth-divider::after,
body.sdo-auth-page .auth-section-divider::before,
body.sdo-auth-page .auth-section-divider::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--border);
}
body.sdo-auth-page .auth-section-title {
  margin: var(--s6) 0 var(--s3);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-strong);
}

/* ── Alerts ── */
body.sdo-auth-page .auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-block-end: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  font-size: var(--fs-small);
  color: var(--text);
}
body.sdo-auth-page .auth-alert--danger {
  border-color: color-mix(in oklab, var(--risk) 40%, var(--border));
  background: color-mix(in oklab, var(--risk) 8%, transparent);
}
body.sdo-auth-page .auth-alert--danger i { color: var(--risk); }
body.sdo-auth-page .auth-alert--success {
  border-color: color-mix(in oklab, var(--ok) 40%, var(--border));
  background: color-mix(in oklab, var(--ok) 8%, transparent);
}
body.sdo-auth-page .auth-alert--success i { color: var(--ok); }
body.sdo-auth-page .auth-alert--warning {
  border-color: color-mix(in oklab, var(--warn) 40%, var(--border));
  background: color-mix(in oklab, var(--warn) 8%, transparent);
}
body.sdo-auth-page .auth-alert--warning i { color: var(--warn); }
body.sdo-auth-page .auth-alert--info i { color: var(--brand-text); }

/* ── Brand column — P01 quiet panel ── */
body.sdo-auth-page .auth-shell__brand-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s12) var(--s8);
  border-inline-start: 1px solid var(--border);
  background:
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-850) 55%, var(--navy-800) 100%);
}
[data-theme="light"] body.sdo-auth-page .auth-shell__brand-col {
  /* Cool slate panel — must not collapse into the white form column */
  background: linear-gradient(165deg, #E8EEF4 0%, #F1F5F9 48%, #E2E8F0 100%);
  border-inline-start-color: #C9D4E0;
}
[data-theme="light"] body.sdo-auth-page .auth-brand-panel__kpi {
  background: #FFFFFF;
  border-color: #C9D4E0;
}

body.sdo-auth-page .auth-brand-panel {
  inline-size: 100%;
  max-inline-size: 420px;
}
body.sdo-auth-page .auth-brand-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.sdo-auth-page .auth-brand-panel__badge {
  align-self: flex-start;
  margin-block-end: var(--s6);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--cyan) 10%, transparent);
  color: var(--brand-text);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.sdo-auth-page .auth-brand-panel__headline {
  margin: 0 0 var(--s4);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}
body.sdo-auth-page .auth-brand-panel__copy {
  margin: 0 0 var(--s8);
  max-inline-size: 34ch;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--text-muted);
}
body.sdo-auth-page .auth-brand-panel__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.sdo-auth-page .auth-brand-panel__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--surface-0) 35%, transparent);
}
body.sdo-auth-page .auth-brand-panel__kpi-label {
  font-size: var(--fs-caption);
  color: var(--text-label);
  line-height: 1.4;
}
body.sdo-auth-page .auth-brand-panel__kpi-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Onboarding wizard ── */
body.sdo-auth-page .ob-wizard { inline-size: 100%; }
body.sdo-auth-page .ob-title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h3);
  font-weight: 800;
}
body.sdo-auth-page .ob-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-block-end: var(--s6);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-auth-page .ob-step {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}
body.sdo-auth-page .ob-step.is-current {
  border-color: var(--brand-line);
  color: var(--brand-text);
  background: color-mix(in oklab, var(--cyan) 10%, transparent);
  font-weight: 700;
}
body.sdo-auth-page .ob-step.is-done {
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 35%, var(--border));
}
body.sdo-auth-page .ob-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-block-start: var(--s6);
}
body.sdo-auth-page .ob-actions .auth-submit,
body.sdo-auth-page .ob-actions .auth-btn-secondary {
  margin-block-start: 0;
}
body.sdo-auth-page .ob-packs,
body.sdo-auth-page .ob-size-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
body.sdo-auth-page .ob-pack,
body.sdo-auth-page .ob-size-option {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
body.sdo-auth-page .ob-pack.is-on,
body.sdo-auth-page .ob-size-option.is-on {
  border-color: var(--brand-fill);
  background: color-mix(in oklab, var(--cyan) 8%, var(--surface-1));
}
body.sdo-auth-page .ob-pack__input,
body.sdo-auth-page .ob-size-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.sdo-auth-page .ob-pack,
body.sdo-auth-page .ob-size-option { position: relative; }
body.sdo-auth-page .ob-pack__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
body.sdo-auth-page .ob-pack__title { color: var(--text-strong); font-weight: 700; }
body.sdo-auth-page .ob-pack__mark {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--border);
}
body.sdo-auth-page .ob-pack.is-on .ob-pack__mark {
  border-color: var(--brand-fill);
  background: var(--brand-fill);
  box-shadow: inset 0 0 0 2px var(--surface-1);
}
body.sdo-auth-page .ob-pack__desc {
  margin-block-start: var(--s2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.7;
}
body.sdo-auth-page .ob-pack__badge {
  display: inline-block;
  margin-inline-end: var(--s1);
  padding: 1px var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10px;
  color: var(--text-label);
}
body.sdo-auth-page .ob-size-option__text {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}
body.sdo-auth-page .ob-steps__sep {
  flex: 0 0 auto;
  color: var(--text-label);
}
body.sdo-auth-page .ob-footnote {
  margin-block-start: var(--s4);
  font-size: var(--fs-caption);
  color: var(--text-label);
}

@media (max-width: 1023.98px) {
  body.sdo-auth-page .auth-shell__split { grid-template-columns: minmax(0, 1fr); }
  body.sdo-auth-page .auth-shell__brand-col { display: none; }
}

@media (max-width: 767.98px) {
  body.sdo-auth-page .auth-shell__form-col { padding: var(--s6) var(--s4); }
  body.sdo-auth-page .auth-panel { padding-block: var(--s4); }
  body.sdo-auth-page .auth-brand__heading { font-size: var(--fs-h3); }
  body.sdo-auth-page .auth-form-grid,
  body.sdo-auth-page .ob-packs,
  body.sdo-auth-page .ob-size-options { grid-template-columns: minmax(0, 1fr); }
  body.sdo-auth-page .auth-actions-row { flex-direction: column; align-items: stretch; }
  body.sdo-auth-page .auth-submit,
  body.sdo-auth-page .auth-btn-secondary { inline-size: 100%; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4.30 TOUCH TARGETS — the 44px floor (brand book, spec §9)
   Found by the Task 16 sweep: four controls rendered under 44px.

   Two are fixed by growing the control. Two are fixed by growing only the HIT
   AREA with a transparent ::after, because making them physically 44px would
   distort them — a 44px-tall term chip stops reading as a chip, and the theme
   toggle is a shared dashboard component whose look must not change.

   The ::after technique adds no layout box, so nothing moves.
   ─────────────────────────────────────────────────────────────────────────── */

/* Grown outright — 41px was simply 3px short. */
body.sdo-landing-page .ai-agent { min-block-size: 44px; }

/* Hit area only. The chip stays 32px tall so the row still reads as a line of
   terms rather than a stack of buttons. */
body.sdo-landing-page .site-pillar__chip { position: relative; }
body.sdo-landing-page .site-pillar__chip::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* The theme toggle lives in css/sdo-theme-toggle.css, which the dashboard
   shares and the plan's Danger zone marks "additive and scoped only, never
   change existing values". So its size is untouched and only the hit area
   grows, on public pages only. It already sets position:relative and uses no
   pseudo-elements, so this collides with nothing. */
body.sdo-landing-page .sdo-theme-toggle::after,
body.sdo-site-page .sdo-theme-toggle::after,
body.sdo-auth-page .sdo-theme-toggle::after {
  content: "";
  position: absolute;
  inset: -8px;
}

/* NOT fixed, and correctly so: .site-ai__feedback-btn renders at 28px but is
   disabled + aria-hidden — it depicts the product's feedback control inside a
   mock rather than offering an action (see ai.html). Non-interactive elements
   are outside the touch-target rule. */

/* ───────────────────────────────────────────────────────────────────────────
   4.31 TOOLTIPS + THEMED LOGO
   REGRESSION FIX. landing.css styled .sdo-tip, .pillar-chip-tip and the
   .sdo-landing-logo theme swap. Deleting that sheet in Task 17 left all three
   unstyled: the tooltip rendered as raw text pinned to the page edge, and the
   logo showed both theme variants at once.
   ─────────────────────────────────────────────────────────────────────────── */

/* landing.js positions this with fixed coordinates, so the element must be
   position:fixed and must not inherit page flow. */
body.sdo-landing-page .sdo-tip,
body.sdo-site-page .sdo-tip {
  position: fixed;
  z-index: 300;
  inline-size: max-content;
  max-inline-size: 300px;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity .14s var(--ease), translate .14s var(--ease);
}
body.sdo-landing-page .sdo-tip.is-visible,
body.sdo-site-page .sdo-tip.is-visible {
  opacity: 1;
  translate: 0 0;
}
body.sdo-landing-page .sdo-tip[hidden],
body.sdo-site-page .sdo-tip[hidden] { display: none; }

/* Level-3 surface + the single shadow: this floats above everything, which is
   exactly what shadow level 3 is reserved for (brand book law 5). */
body.sdo-landing-page .sdo-tip__inner,
body.sdo-site-page .sdo-tip__inner {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--text);
  text-align: start;
}
body.sdo-landing-page .sdo-tip__title,
body.sdo-site-page .sdo-tip__title {
  margin: 0 0 var(--s1);
  color: var(--text-strong);
  font-weight: 700;
  font-size: var(--fs-small);
}
body.sdo-landing-page .sdo-tip__body,
body.sdo-site-page .sdo-tip__body {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}
/* The rich variants ship extra diagram markup; give it room and keep it quiet
   rather than reproducing landing.css's animated versions. */
body.sdo-landing-page .sdo-tip__visual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s3);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-label);
}
body.sdo-landing-page .sdo-tip__flow-node,
body.sdo-landing-page .sdo-tip__tree-node {
  padding: 2px var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
body.sdo-landing-page .sdo-tip__bars { display: flex; gap: 3px; align-items: flex-end; }
body.sdo-landing-page .sdo-tip__bars i {
  inline-size: 5px;
  block-size: var(--h, 12px);
  border-radius: 2px;
  background: color-mix(in oklab, var(--cyan) 50%, transparent);
}

/* Pillar chip tooltip — same component, its own host element. */
body.sdo-landing-page .pillar-chip-tip {
  position: fixed;
  z-index: 300;
  max-inline-size: 264px;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity .14s var(--ease), translate .14s var(--ease);
}
body.sdo-landing-page .pillar-chip-tip.is-visible { opacity: 1; translate: 0 0; }
body.sdo-landing-page .pillar-chip-tip[hidden] { display: none; }
body.sdo-landing-page .pillar-chip-tip__inner {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--text);
}

/* Themed logo swap — part of the theme contract. Exactly one variant shows. */
body.sdo-landing-page .sdo-landing-logo,
body.sdo-site-page .sdo-landing-logo,
body.sdo-auth-page .sdo-landing-logo {
  display: block;
  block-size: 36px;
  inline-size: auto;
  max-inline-size: 160px;
  object-fit: contain;
}
body.sdo-landing-page .site-header .sdo-landing-logo,
body.sdo-site-page .site-header .sdo-landing-logo {
  block-size: 36px;
}
body.sdo-landing-page .site-menu .sdo-landing-logo,
body.sdo-site-page .site-menu .sdo-landing-logo {
  block-size: 32px;
}
body.sdo-landing-page .site-footer .sdo-landing-logo,
body.sdo-site-page .site-footer .sdo-landing-logo {
  block-size: 40px;
  max-inline-size: 180px;
}
body.sdo-landing-page .sdo-landing-logo--for-light,
body.sdo-site-page .sdo-landing-logo--for-light,
body.sdo-auth-page .sdo-landing-logo--for-light,
body.sdo-landing-page .site-header__brand .sdo-landing-logo--for-light,
body.sdo-site-page .site-header__brand .sdo-landing-logo--for-light,
body.sdo-landing-page .site-footer .sdo-landing-logo--for-light,
body.sdo-site-page .site-footer .sdo-landing-logo--for-light { display: none; }
[data-theme="light"] body.sdo-landing-page .sdo-landing-logo--for-dark,
[data-theme="light"] body.sdo-site-page .sdo-landing-logo--for-dark,
[data-theme="light"] body.sdo-auth-page .sdo-landing-logo--for-dark,
[data-theme="light"] body.sdo-landing-page .site-header__brand .sdo-landing-logo--for-dark,
[data-theme="light"] body.sdo-site-page .site-header__brand .sdo-landing-logo--for-dark,
[data-theme="light"] body.sdo-landing-page .site-footer .sdo-landing-logo--for-dark,
[data-theme="light"] body.sdo-site-page .site-footer .sdo-landing-logo--for-dark { display: none; }
[data-theme="light"] body.sdo-landing-page .sdo-landing-logo--for-light,
[data-theme="light"] body.sdo-site-page .sdo-landing-logo--for-light,
[data-theme="light"] body.sdo-auth-page .sdo-landing-logo--for-light,
[data-theme="light"] body.sdo-landing-page .site-header__brand .sdo-landing-logo--for-light,
[data-theme="light"] body.sdo-site-page .site-header__brand .sdo-landing-logo--for-light,
[data-theme="light"] body.sdo-landing-page .site-footer .sdo-landing-logo--for-light,
[data-theme="light"] body.sdo-site-page .site-footer .sdo-landing-logo--for-light { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. UTILITIES
   Use sparingly — prefer a named component.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sdo-landing-page .site-visually-hidden,
body.sdo-site-page .site-visually-hidden,
body.sdo-auth-page .site-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}