/* ==========================================================================
   idms — landing page set stylesheet
   Mirror of uiux/v1/design-system/idms-design-system.md §15 (tokens) +
   the classes index.html reads. The token block is a copy, not a source:
   when the design system changes, it changes there first and this file
   is updated in the same change (idms-landing.md §3.2).

   Palette: "Charcoal & Amber" (design-system 0.4.0) — near-black canvas,
   one warm amber as the only saturated hue. Dark is the shipped default.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted, same origin. No third-party CDN anywhere.
   Vazirmatn (SIL OFL 1.1) · JetBrains Mono (SIL OFL 1.1)
   The faces are vendored beside this stylesheet, so the `src` paths resolve
   from `assets/` and the page never depends on a path outside its own area.
   JetBrains Mono ships the Latin subset only, because the mono face is used
   for identifiers, paths and licence keys.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Tokens — shared (theme-invariant), design-system §15.1
   ========================================================================== */
:root {
  /* Type */
  --font-text: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --fs-display-lg: clamp(2.5rem, 4vw + 1rem, 4rem); --lh-display-lg: 1.15;
  --fs-display-md: 2rem;    --lh-display-md: 2.8125rem;
  --fs-heading-lg: 1.5rem;  --lh-heading-lg: 2.25rem;
  --fs-heading-md: 1.25rem; --lh-heading-md: 1.875rem;
  --fs-heading-sm: 1rem;    --lh-heading-sm: 1.5rem;
  --fs-body-lg: 1rem;       --lh-body-lg: 1.75rem;
  --fs-body-md: .875rem;    --lh-body-md: 1.5625rem;
  --fs-body-sm: .8125rem;   --lh-body-sm: 1.4375rem;
  --fs-label: .8125rem;     --lh-label: 1.25rem;
  --fs-caption: .75rem;     --lh-caption: 1.1875rem;
  --fs-code: .8125rem;      --lh-code: 1.3125rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Space — 4pt grid */
  --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem;
  --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; --space-11: 5rem; --space-12: 6rem;
  --stack-tight: var(--space-2); --stack-normal: var(--space-4); --stack-loose: var(--space-6);
  --rhythm-h-to-p: var(--space-2); --section-gap-y: var(--space-12);

  /* Radii */
  --radius-none: 0; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px;

  /* Borders + icons */
  --border-thin: 1px; --border-thick: 2px;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;

  /* Containers */
  --page-max-marketing: 1280px; --page-max-app: 1680px;
  --content-max-dash: 1680px; --content-max-form: 480px; --content-max-prose: 68ch;
  --sidebar-w: 264px; --sidebar-w-collapsed: 64px;

  /* Motion */
  --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms;
  --dur-slow: 400ms; --dur-drift: 24s;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.3, 0, 0, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Layers */
  --z-base: 0; --z-sticky: 100; --z-rail: 200; --z-dropdown: 300;
  --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700;

  /* Brand constants */
  --gradient-brand-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 16%, transparent), color-mix(in srgb, var(--brand-200) 10%, transparent));
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
                 0 8px 40px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --texture-grid: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 0);
  --texture-grid-size: 24px 24px;

  /* Brand swatches (constant) */
  --brand-50: #FBF3E0; --brand-100: #F7E4B6; --brand-200: #F2D48C;
  --brand-300: #EDC368; --brand-400: #E8B24A; --brand-500: #E0A32E;
  --brand-600: #C2881C; --brand-700: #8A6210; --brand-800: #6B4B0C;
  --brand-900: #4A3408; --brand-950: #2A1D04;
  --neutral-0: #FFFFFF; --neutral-50: #F5F2EC; --neutral-100: #EDEAE4;
  --neutral-200: #D3CEC6; --neutral-300: #A9A29A; --neutral-400: #857E76;
  --neutral-500: #6E6862; --neutral-600: #4A4640; --neutral-700: #33302C;
  --neutral-800: #1C1C1C; --neutral-900: #121212; --neutral-950: #0C0C0C;

  /* Landing layout */
  --header-h: 72px;
  --footer-pad-y: var(--space-9);
  --hero-min-h: 620px;
  --gap-cards: var(--space-5);
  --card-pad: var(--space-5);
  --btn-min-w: 88px;
  --input-h: 40px;
  --focus-offset: 2px;
}

/* ==========================================================================
   Dark theme — shipped default (design-system §15.2)
   ========================================================================== */
:root, [data-theme="dark"] {
  --bg: #121212;
  --surface: #1C1C1C;
  --surface-raised: #262626;
  --ink: #F5F2EC;
  --ink-muted: #A9A29A;
  --border: #2A2A2A;
  --border-strong: #6E6862;
  --glass: color-mix(in srgb, #121212 72%, transparent);

  --accent: #E0A32E;
  --accent-hover: #E8B24A;
  --accent-pressed: #C2881C;
  --on-accent: #1A1206;
  --focus-ring: #F5CE7A;
  --overlay: #000000B3;
  --gradient-brand: linear-gradient(135deg, #E0A32E 0%, #EDC368 45%, #F2D48C 100%);

  --success: #7FBF7F; --success-subtle: #17281A;
  --warning: #E8B457; --warning-subtle: #2E2410;
  --danger:  #E4736B; --danger-subtle:  #311615;
  --info:    #E0A32E; --info-subtle:    #2B2210;

  --data-1: #E0A32E; --data-2: #6FA8DC; --data-3: #C7B24A;
  --data-4: #7FBF7F; --data-5: #E4736B; --data-6: #9A938B;

  --elev-1: inset 0 0 0 1px var(--border);
  --elev-2: inset 0 0 0 1px var(--border-strong), 0 8px 32px -16px rgb(0 0 0 / .90);
  --elev-3: inset 0 0 0 1px var(--border-strong), 0 16px 48px -12px rgb(0 0 0 / .95);
  --elev-4: inset 0 0 0 1px var(--border-strong), 0 32px 80px -16px rgb(0 0 0 / 1);

  /* Canvas lights — one continuous warm gradient with two amber radials and a
     stone fade, painted once. No section ever sits on a flat black or a flat
     amber plane: the page reads as one lit surface from fold to footer. */
  --canvas-glow:
    radial-gradient(110% 70% at 50% -18%, rgb(36 29 18 / .9) 0%, transparent 62%),
    radial-gradient(58% 44% at 102% 4%, rgb(28 24 19 / .8) 0%, transparent 70%),
    radial-gradient(66% 48% at -4% 98%, rgb(24 22 19 / .8) 0%, transparent 72%),
    linear-gradient(180deg, #15130F 0%, #121110 38%, #100F0E 62%, #141210 100%);
}

/* ==========================================================================
   Light theme (design-system §15.3)
   ========================================================================== */
[data-theme="light"] {
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --ink: #1A1712;
  --ink-muted: #4A4640;
  --border: #E1DCD2;
  --border-strong: #6E6862;
  --glass: color-mix(in srgb, #F7F4EE 78%, transparent);

  --accent: #8A6210;
  --accent-hover: #6B4B0C;
  --accent-pressed: #4A3408;
  --on-accent: #FFFFFF;
  --focus-ring: #8A6210;
  --overlay: #1212127A;
  --gradient-brand: linear-gradient(135deg, #8A6210 0%, #C2881C 45%, #E0A32E 100%);

  --success: #2F7A33; --success-subtle: #EDF6EC;
  --warning: #7A4E08; --warning-subtle: #FCF4E4;
  --danger:  #A32734; --danger-subtle:  #FAECEC;
  --info:    #8A6210; --info-subtle:    #FBF3E0;

  --data-1: #8A6210; --data-2: #2A6FA8; --data-3: #7A6A10;
  --data-4: #3F7A33; --data-5: #A33A2E; --data-6: #6E6862;

  --elev-1: 0 1px 2px rgb(26 23 18 / .06);
  --elev-2: 0 2px 8px rgb(26 23 18 / .10);
  --elev-3: 0 8px 24px rgb(26 23 18 / .14);
  --elev-4: 0 16px 48px rgb(26 23 18 / .20);

  --canvas-glow: none;
}

/* Mirror the OS preference only after the visitor chose «خودکار». */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg: #F7F4EE; --surface: #FFFFFF; --surface-raised: #FFFFFF;
    --ink: #1A1712; --ink-muted: #4A4640;
    --border: #E1DCD2; --border-strong: #6E6862;
    --glass: color-mix(in srgb, #F7F4EE 78%, transparent);
    --accent: #8A6210; --accent-hover: #6B4B0C; --accent-pressed: #4A3408;
    --on-accent: #FFFFFF; --focus-ring: #8A6210; --overlay: #1212127A;
    --gradient-brand: linear-gradient(135deg, #8A6210 0%, #C2881C 45%, #E0A32E 100%);
    --success: #2F7A33; --success-subtle: #EDF6EC;
    --warning: #7A4E08; --warning-subtle: #FCF4E4;
    --danger: #A32734; --danger-subtle: #FAECEC;
    --info: #8A6210; --info-subtle: #FBF3E0;
    --data-1: #8A6210; --data-2: #2A6FA8; --data-3: #7A6A10;
    --data-4: #3F7A33; --data-5: #A33A2E; --data-6: #6E6862;
    --elev-1: 0 1px 2px rgb(26 23 18 / .06);
    --elev-2: 0 2px 8px rgb(26 23 18 / .10);
    --elev-3: 0 8px 24px rgb(26 23 18 / .14);
    --elev-4: 0 16px 48px rgb(26 23 18 / .20);
    --canvas-glow: none;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark light; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* The canvas is never flat: under the page sit two amber lights and a stone
   fade, painted once, so a long scroll never reads as a black wall. */
body { background-image: var(--canvas-glow, none); background-attachment: fixed; }

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-heading-md); font-weight: var(--fw-semibold); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
img, svg { display: block; max-inline-size: 100%; }
bdi { unicode-bidi: isolate; }
[dir="ltr"] { unicode-bidi: isolate; display: inline-block; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.container { max-inline-size: var(--page-max-marketing); margin-inline: auto; padding-inline: var(--space-5); }

/* A sticky bar must not land on top of the section an anchor points at. */
[id] { scroll-margin-block-start: calc(var(--header-h) + var(--space-6)); }

/* Inline SVG sprite holder — vendored, same origin, no icon request leaves (§9.9). */
.sprite { display: none; }

/* Icon set — Lucide grid: 24×24, stroke 1.5, currentColor, round caps. */
.icon { inline-size: var(--icon-md); block-size: var(--icon-md); flex: none; fill: none;
        stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon--lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.icon--xl { inline-size: var(--icon-xl); block-size: var(--icon-xl); }
/* Directional icons mirror in RTL; clocks, checkmarks and logos never do. */
.icon--directional { transform: scaleX(-1); }

/* ==========================================================================
   Skip link — first focusable element, WCAG 2.4.1
   ========================================================================== */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); color: var(--on-accent); }

/* ==========================================================================
   Topbar — 72px, sticky, glass after 8px of scroll, no elevation drawn (§17.3)
   ========================================================================== */
.topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  background: transparent;
  backdrop-filter: none;
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              backdrop-filter var(--dur-base) var(--ease-standard);
  /* The bar over the hero sits on a dark photograph in both themes, so its
     ink is light until the page scrolls and the glass arrives. */
  --chrome-ink: var(--neutral-100);
}
.topbar.is-scrolled { --chrome-ink: var(--ink); }
/* At the top the bar is invisible and the hero runs under it; once the page
   scrolls it takes the glass so the links stay legible over content. The glass
   separates it from the content — no elevation is drawn, because `--elev-2`
   carries a 1px inset ring and that ring reads as a line ruled across the top
   of the page (idms-landing.md §3.4, TBD-TOPBAR-ELEVATION). */
.topbar.is-scrolled {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: none;
}
@supports not (backdrop-filter: blur(1px)) { .topbar.is-scrolled { background: var(--bg); } }
/* The error pages in `system/` carry no hero and no photograph: their bar sits
   on the canvas itself (idms-landing.md §3.4). It therefore takes the theme ink
   and no surface at rest — no glass band, no `--elev-2` ring, no bottom rule —
   so nothing draws a line where the bar ends; the bar appears when the page
   scrolls, as glass with the blur and still no edge. `.page-error .topbar`
   names the scrolled state too, because pages.js toggles `is-scrolled` here as
   it does on `/` and the landing's ring would otherwise return on the first
   scroll. The landing's scrolled bar also saturates its backdrop; that belongs
   to a bar on a photograph, so the pair takes the blur alone. */
.page-error .topbar { --chrome-ink: var(--ink); background: transparent; box-shadow: none; }
.page-error .topbar.is-scrolled {
  background: var(--glass);
  backdrop-filter: blur(18px);
  box-shadow: none;
}
@supports not (backdrop-filter: blur(1px)) { .page-error .topbar.is-scrolled { background: var(--bg); } }

/* The fixed bar is out of flow, so the page reserves its height once and the
   hero cancels it to run full-bleed underneath. */
main { padding-block-start: var(--header-h); }

/* Three tracks: brand at the reading-start edge, navigation in the true centre,
   actions at the reading-end edge. The navigation therefore stays centred
   whatever the width of the two side groups. Both side groups are placed
   explicitly: below --bp-lg the navigation is display:none, which would
   otherwise drop it out of grid item generation and pull the actions into
   the centre track. */
.topbar__inner {
  min-block-size: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}
.brand { grid-column: 1; }
.topbar__actions { grid-column: 3; }

.brand { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--chrome-ink); }
.brand__mark {
  inline-size: 34px; block-size: 34px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  box-shadow: var(--glow-accent);
  display: grid; place-items: center;
  color: var(--on-accent);
}
.brand__mark img { inline-size: 20px; block-size: auto; }
.brand__word {
  font-family: var(--font-display); font-size: var(--fs-heading-md); font-weight: var(--fw-bold);
  letter-spacing: .01em;
  color: var(--chrome-ink);
}

/* The navigation is one pill: a raised surface holding the four links, so the
   bar reads as brand · menu · actions rather than as three loose groups. */
.nav { display: none; justify-self: center; }
.nav__list {
  display: flex; align-items: center; gap: var(--space-5);
}
.nav__link {
  display: inline-flex; align-items: center; min-block-size: 36px;
  color: color-mix(in srgb, var(--chrome-ink) 82%, transparent);
  text-decoration: none;
  font-size: var(--fs-body-md); font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--accent); }

.topbar__actions { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }

.icon-btn {
  display: inline-grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  background: transparent; color: var(--ink-muted);
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.topbar .icon-btn { color: color-mix(in srgb, var(--chrome-ink) 78%, transparent); }

.topbar__actions .topbar__cta { display: none; }
.topbar__burger { display: inline-grid; }

/* Drawer — below --bp-lg only */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--overlay);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* Host clips the closed drawer so its off-screen box never widens the page. */
.drawer-host {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  overflow: hidden;
  pointer-events: none;
}
.drawer {
  position: absolute; z-index: var(--z-modal);
  inset-block: 0;
  inset-inline-start: 0;
  pointer-events: auto;
  inline-size: min(320px, 84vw);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  box-shadow: var(--elev-4);
  padding: var(--space-5);
  display: grid; align-content: start; gap: var(--space-5);
  transform: translateX(-105%);
  transition: transform var(--dur-slow) var(--ease-emphasized);
}
[dir="rtl"] .drawer { transform: translateX(105%); }
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__list { display: grid; gap: var(--space-1); }
.drawer__list a {
  display: flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--space-3);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-body-lg); font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
}
.drawer__list a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ==========================================================================
   Hero — the dashboard image runs full-bleed and the copy is written over it.
   The veil is dark enough at every point of the section that the text keeps
   its contrast ratio over the busiest part of the screenshot, so the headline
   is legible whatever the image underneath is doing (§17.5).
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-content: center;
  min-block-size: var(--hero-min-h);
  /* Cancels the space `main` reserved for the fixed bar, then adds it back
     inside the section, so the hero image runs under the transparent topbar. */
  margin-block-start: calc(var(--header-h) * -1);
  padding-block-start: calc(var(--header-h) + var(--space-11));
  padding-block-end: var(--space-12);
  color: var(--neutral-0);
}
.hero {
  --hero-ink: var(--neutral-0);
  --hero-ink-muted: var(--neutral-300);
}
[data-theme="light"] .hero { --hero-ink: var(--neutral-0); --hero-ink-muted: #D8D2C8; }

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 22%; }
[data-theme="dark"] .hero__bg img,
[data-theme="auto"] .hero__bg img { filter: grayscale(.7) brightness(.82) contrast(1.05); }

/* Veil: an amber-tinted radial over a flat scrim. The flat layer is what
   guarantees the contrast ratio — at 86% the busiest part of the screenshot
   stays far darker than the white headline and the muted lead. */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 72% at 82% 6%, rgb(74 55 18 / 52%), transparent 62%),
    radial-gradient(52% 62% at 14% 94%, rgb(38 30 14 / 45%), transparent 72%),
    radial-gradient(64% 44% at 50% 54%, rgb(6 6 6 / 62%), transparent 74%),
    rgb(10 10 10 / 86%);
}
/* The dot field — Aceternity texture, masked so it fades before the copy. */
.hero__dots {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--texture-grid);
  background-size: var(--texture-grid-size);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 40%, #000 30%, transparent 100%);
  opacity: .35;
}
.hero__copy { max-inline-size: 48rem; margin-inline: auto; text-align: center; }
.hero__cta { justify-content: center; }
.hero__note { justify-content: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-block-end: var(--space-5);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  background: var(--info-subtle);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}
.eyebrow__dot {
  inline-size: 6px; block-size: 6px; border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: dot-pulse 3.8s ease-in-out infinite;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.022em;
  margin-block-end: var(--space-5);
  text-wrap: balance;
  color: #FBF7EF;
}
/* The gradient carries the brand in the headline only — never a value (§2.3). */
.hero__grad {
  background: linear-gradient(120deg, var(--brand-200) 0%, var(--brand-500) 46%, var(--brand-200) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgb(224 163 46 / .3));
}
.hero__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--hero-ink-muted);
  max-inline-size: 42rem;
  margin-inline: auto;
  margin-block-end: var(--space-7);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__note {
  display: flex; align-items: center; gap: var(--space-2);
  margin-block-start: var(--space-5);
  font-size: var(--fs-caption); color: var(--hero-ink-muted);
}
.hero__note .icon { color: var(--brand-300); }

/* ==========================================================================
   Buttons (§9.1, §17.8)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 40px; min-inline-size: var(--btn-min-w);
  padding-inline: var(--space-4);
  font-family: inherit; font-size: var(--fs-label); font-weight: var(--fw-medium);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
/* The primary is metal, not paint: a vertical amber ramp under the lit edge. */
.btn--primary {
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--accent) 52%, var(--brand-600) 100%);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), var(--glow-accent);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--brand-300) 0%, var(--brand-400) 52%, var(--brand-600) 100%);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 1px rgb(224 163 46 / .55), 0 18px 40px -14px rgb(224 163 46 / .7);
}
.btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); color: var(--ink); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.btn--lg { min-block-size: 48px; padding-inline: var(--space-5); font-size: var(--fs-body-lg); }
.btn--block { inline-size: 100%; }
/* Over the hero photograph the secondary reads on glass, not on a card. */
.hero .btn--secondary {
  background: rgb(32 31 29 / 72%);
  backdrop-filter: blur(10px);
  border-color: rgb(245 242 236 / .22);
  color: #FBF7EF;
}
.hero .btn--secondary:hover { background: rgb(45 42 36 / 88%); border-color: rgb(224 163 46 / .5); color: #FFF6E2; }

/* ==========================================================================
   Compatibility wall — the systems the product connects to, named plainly.
   It replaces the customer-logo row a template would carry: there are no
   customer marks to show, and a fabricated one would be a false claim.
   ========================================================================== */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.logos__label {
  margin-block-end: var(--space-7);
  text-align: center;
  font-size: var(--fs-label);
  color: var(--ink-muted);
}
.logos__label b { color: var(--ink); font-weight: var(--fw-semibold); }
.logos__item {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  text-align: center;
  min-block-size: 68px;
  padding-inline: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--neutral-200);
  font-size: var(--fs-body-md); font-weight: var(--fw-semibold);
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
[data-theme="light"] .logos__item { color: var(--ink); }
.logos__item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--elev-2); }
.logos__item .icon { color: var(--accent); }

/* Capability ticker — genuine feature names, decorative band. */
.ticker {
  border-block: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--accent) 5%, var(--bg)) 50%, color-mix(in srgb, var(--bg) 95%, transparent));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ticker__track { display: flex; gap: var(--space-8); padding-block: var(--space-4); inline-size: max-content; animation: ticker 44s linear infinite; }
.ticker__track li { color: var(--ink-muted); font-size: var(--fs-label); white-space: nowrap; letter-spacing: .012em; }
.ticker__track li::before { content: "◆"; font-size: .5em; color: var(--accent); vertical-align: 2px; margin-inline-end: var(--space-2); }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ==========================================================================
   Section chrome (§17.14)
   ========================================================================== */
.section { padding-block: var(--section-gap-y); }
.section--tight { padding-block: var(--space-10); }
.section--rule { border-block-start: 1px solid var(--border); }
/* The self-hosted band is a wash of accent over the same canvas, not a second
   background: it fades to nothing at both edges, so the page never switches
   from a black plane to a brown one. */
.band {
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 62%);
}

.section__head { max-inline-size: 46rem; margin-block-end: var(--space-8); }
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  font-weight: var(--fw-bold);
  color: var(--neutral-50);
  text-wrap: balance;
}
[data-theme="light"] .section__title { color: var(--ink); }
/* One amber rule, the same in every section head — the page's through-line. */
.section__title::after {
  content: ""; display: block;
  inline-size: 58px; block-size: 3px;
  margin-block-start: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  box-shadow: 0 0 20px rgb(224 163 46 / .45);
}
.section__lead { margin-block-start: var(--rhythm-h-to-p); color: var(--ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }

/* ==========================================================================
   Cards (§9.6, §17.6)
   ========================================================================== */
.grid { display: grid; gap: var(--gap-cards); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

.card {
  position: relative;
  padding: var(--card-pad);
  background: linear-gradient(180deg, #212121 0%, #191919 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045), 0 1px 2px rgb(0 0 0 / .6);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
[data-theme="light"] .card { background: var(--surface); box-shadow: var(--elev-1); }
/* Hairline gradient border, revealed on hover — the card lights at its edge. */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 60%, transparent), rgb(255 255 255 / .07) 44%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.card:hover::after, .card:focus-within::after { opacity: 1; }

.card__icon {
  display: inline-grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  margin-block-end: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 12px 26px -18px rgb(224 163 46 / .9);
}
.card__title { font-size: var(--fs-heading-sm); font-weight: var(--fw-semibold); margin-block-end: var(--rhythm-h-to-p); color: #FAF6EE; }
[data-theme="light"] .card__title { color: var(--ink); }
.card__body { color: var(--ink-muted); font-size: var(--fs-body-md); }
.card__meta { margin-block-start: var(--space-4); padding-block-start: var(--space-3); border-block-start: 1px solid var(--border); font-size: var(--fs-caption); color: var(--ink-muted); }

/* The highlighted differentiation card — the wedge (§4.1). */
.wedge {
  display: grid; gap: var(--space-5);
  margin-block-start: var(--gap-cards);
  padding: var(--space-7);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(108% 128% at 92% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 58%),
    linear-gradient(180deg, #272727 0%, #1D1D1D 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 34px 76px -44px color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-theme="light"] .wedge { background: radial-gradient(108% 128% at 92% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%), var(--surface); }
.wedge__head { display: flex; align-items: center; gap: var(--space-3); }
.wedge__title { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); font-weight: var(--fw-semibold); color: #FBF7EF; }
[data-theme="light"] .wedge__title { color: var(--ink); }
.wedge__body { color: var(--ink-muted); max-inline-size: 46rem; }
.wedge__list { display: grid; gap: var(--space-3); }
.wedge__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: #EFEAE1; }
[data-theme="light"] .wedge__list li { color: var(--ink); }
.wedge__list .icon { color: var(--brand-300); margin-block-start: 3px; }
[data-theme="light"] .wedge__list .icon { color: var(--accent); }

/* ==========================================================================
   Feature split — an icon-led half beside a list half. New in 0.4.0, so the
   page can carry the platform story (Power BI, semantic layer, alerts)
   without a third wall of identical boxes.
   ========================================================================== */
.split { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start; }
.split__body { display: grid; gap: var(--space-4); }
.split__lead { color: var(--ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.split__list { display: grid; gap: var(--space-4); }
.split__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.split__list .icon { color: var(--accent); margin-block-start: 3px; }
.split__list b { display: block; color: var(--ink); font-weight: var(--fw-semibold); font-size: var(--fs-body-md); }
.split__list span { color: var(--ink-muted); font-size: var(--fs-body-md); }
.split__panel {
  padding: var(--space-6);
  background: linear-gradient(180deg, #212121 0%, #191919 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
  display: grid; gap: var(--space-3);
}
[data-theme="light"] .split__panel { background: var(--surface); box-shadow: var(--elev-1); }
.split__panel-title { font-size: var(--fs-label); color: var(--ink-muted); }
.split__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--border);
}
.split__row:first-of-type { border-block-start: 0; }
.split__row b { font-weight: var(--fw-semibold); color: var(--neutral-50); }
[data-theme="light"] .split__row b { color: var(--ink); }
.split__row span { color: var(--ink-muted); font-size: var(--fs-body-sm); }
.split__tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.split__tag--ok { background: var(--success-subtle); color: var(--success); }
.split__tag--accent { background: var(--info-subtle); color: var(--accent); }

/* ==========================================================================
   Bento (§17.2) — landing set only; wide cells fill whole rows.
   ========================================================================== */
.bento { display: grid; gap: var(--gap-cards); grid-template-columns: 1fr; }

/* ==========================================================================
   Comparison table — one row per attribute, one column per option.
   Real table markup: the header cells carry the column names for a screen
   reader, and the row header carries the attribute each row answers.
   ========================================================================== */
.compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #1C1C1C, #161616);
  box-shadow: var(--elev-1);
}
[data-theme="light"] .compare__scroll { background: var(--surface); }
.compare { inline-size: 100%; min-inline-size: 44rem; border-collapse: collapse; }
.compare caption { text-align: start; padding: var(--space-5) var(--space-5) 0; font-size: var(--fs-body-md); color: var(--ink-muted); }
.compare th, .compare td { padding: var(--space-4) var(--space-5); text-align: start; vertical-align: top; border-block-start: 1px solid var(--border); }
.compare thead th { border-block-start: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--ink); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.compare thead th:nth-child(2) { color: var(--brand-300); }
[data-theme="light"] .compare thead th:nth-child(2) { color: var(--accent); }
.compare thead th:last-child { color: var(--ink-muted); font-weight: var(--fw-medium); }
.compare tbody tr:nth-child(even) :is(th, td) { background: rgb(255 255 255 / .014); }
.compare tbody th { font-weight: var(--fw-medium); color: var(--ink); }
.compare tbody th .icon { color: var(--ink-muted); vertical-align: -3px; margin-inline-end: var(--space-2); }
.compare tbody td { color: var(--ink); font-size: var(--fs-body-md); }
.compare__cell { display: flex; gap: var(--space-2); align-items: flex-start; }
.compare__cell .icon { margin-block-start: 3px; flex: none; }
.compare__yes .icon { color: var(--success); }
[data-theme="light"] .compare__yes .icon { color: var(--accent); }
.compare__no { color: var(--ink-muted); }
.compare__no .icon { color: var(--danger); }
/* The product's own column, carried by a tint and two amber side rules. */
.compare__us {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 4.5%, transparent));
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 32%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ==========================================================================
   Plans (§4.1) — tier names and metered dimensions only. No price: TBD-PRICING.
   ========================================================================== */
.plans { display: grid; gap: var(--gap-cards); grid-template-columns: 1fr; }
.plan {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(180deg, #212121 0%, #191919 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
[data-theme="light"] .plan { background: var(--surface); box-shadow: var(--elev-1); }
.plan:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); box-shadow: var(--elev-3); }
.plan--featured {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: radial-gradient(92% 58% at 50% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%), linear-gradient(180deg, #272727 0%, #1D1D1D 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 34px 74px -44px color-mix(in srgb, var(--accent) 60%, transparent);
}
[data-theme="light"] .plan--featured { background: radial-gradient(92% 58% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%), var(--surface); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan__name { font-family: var(--font-display); font-size: var(--fs-heading-lg); font-weight: var(--fw-bold); color: #FBF7EF; }
[data-theme="light"] .plan__name { color: var(--ink); }
.plan__body { color: var(--ink-muted); }
.plan__list { display: grid; align-content: start; gap: var(--space-3); }
.plan__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-body-md); }
.plan__list .icon { color: var(--brand-300); margin-block-start: 3px; }
[data-theme="light"] .plan__list .icon { color: var(--accent); }
.plan__cta { margin-block-start: var(--space-5); }
.plans__note { margin-block-start: var(--space-6); font-size: var(--fs-caption); color: var(--ink-muted); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
}
.badge--accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--brand-300); }
[data-theme="light"] .badge--accent { background: var(--info-subtle); color: var(--accent); }
.badge--neutral { background: var(--neutral-700); color: var(--neutral-200); }
[data-theme="light"] .badge--neutral { background: var(--neutral-100); color: var(--ink-muted); }

/* ==========================================================================
   About + Contact (§3, §17.9)
   ========================================================================== */
.prose { display: grid; gap: var(--space-4); max-inline-size: var(--content-max-prose); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.prose--muted { color: var(--ink-muted); }
.placeholder {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border-strong));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  color: var(--neutral-200);
}
[data-theme="light"] .placeholder { color: var(--ink-muted); }

.about { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.about__owner { margin-block-start: var(--space-7); }

/* ==========================================================================
   Media — the product introduction's video frame. The player lands where the
   file does; until then the frame states what will occupy it, on the same
   surface language as every other block, so the page holds its shape.
   ========================================================================== */
.media { display: grid; gap: var(--space-4); margin-block-end: var(--space-8); }
.media__frame {
  position: relative;
  display: grid; place-content: center; justify-items: center; gap: var(--space-4);
  aspect-ratio: 16 / 9;
  padding: var(--space-6);
  text-align: center;
  background: linear-gradient(180deg, #212121 0%, #191919 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
}
[data-theme="light"] .media__frame { background: var(--surface); box-shadow: var(--elev-1); }
.media__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.media__play {
  display: grid; place-items: center;
  inline-size: 72px; block-size: 72px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--accent) 52%, var(--brand-600) 100%);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), var(--glow-accent);
}
.media__hint { max-inline-size: 44ch; color: var(--ink-muted); font-size: var(--fs-body-md); }
.media__caption { color: var(--ink-muted); font-size: var(--fs-caption); }

.grid-contact { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }

/* ==========================================================================
   Footer (§17.4)
   ========================================================================== */
.footer {
  position: relative;
  background: linear-gradient(180deg, #151412 0%, #121110 52%, #141210 100%);
}
[data-theme="light"] .footer { background: var(--surface); }
.footer::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(224 163 46 / .42) 20%, rgb(245 225 168 / .6) 50%, rgb(224 163 46 / .42) 80%, transparent);
  opacity: .4;
}
.footer__inner { padding-block: var(--footer-pad-y); }
.footer__brand { margin-block-end: var(--space-8); }
.footer__word {
  font-family: var(--font-display); font-size: var(--fs-heading-md);
  font-weight: var(--fw-bold); letter-spacing: .01em; color: #FBF7EF;
}
[data-theme="light"] .footer__word { color: var(--ink); }
.footer__brand p {
  margin-block-start: var(--space-2);
  max-inline-size: 52ch;
  color: var(--ink-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm);
}
.footer__cols { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
.footer__col-title { font-size: var(--fs-label); font-weight: var(--fw-semibold); margin-block-end: var(--space-3); color: var(--neutral-100); }
[data-theme="light"] .footer__col-title { color: var(--ink); }
.footer__col ul { display: grid; gap: var(--space-2); }
.footer__col a { color: var(--ink-muted); text-decoration: none; font-size: var(--fs-body-sm); }
.footer__col a:hover { color: var(--brand-300); text-decoration: underline; }
[data-theme="light"] .footer__col a:hover { color: var(--accent); }
.footer__bottom {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  color: var(--ink-muted); font-size: var(--fs-caption);
}

/* ==========================================================================
   Error pages — `system/404.html` and `system/500.html` (§9.10, §17.12)
   One centred column: the status, what happened, then the way out. No search
   box and no sign-in control — the landing row forbids both.
   ========================================================================== */
.error__panel {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-inline-size: var(--content-max-prose);
  margin-inline: auto;
  text-align: center;
}
/* The status code is an identifier a visitor may read back, so it stays in the
   mono face; it is the one place a status code is set at display size. It is
   the brightest thing in the panel and it takes the theme ink, so it holds its
   contrast in both themes and under `auto` without a per-theme override. */
.error__code {
  font-family: var(--font-mono);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
/* The icon chip keeps the card's square, without the card's own spacing. */
.error__panel .card__icon { margin-block-end: 0; }

.error__title {
  font-family: var(--font-display);
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-wrap: balance;
}
.error__lead { color: var(--ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }

.error__ref {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

.error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

.error__links {
  inline-size: 100%;
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
}
.error__links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.error__links a { color: var(--ink-muted); font-size: var(--fs-body-sm); text-decoration: none; }
.error__links a:hover, .error__links a:focus-visible { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Reveal on scroll — opacity + small travel only (§7.2 budget)
   ========================================================================== */
/* Content is visible by default; the hidden start state exists only once the
   script has run (html.js), so a failed or blocked script never hides a page. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgb(224 163 46 / .18), 0 0 14px rgb(224 163 46 / .65); }
  50%      { box-shadow: 0 0 0 7px rgb(224 163 46 / .06), 0 0 22px rgb(224 163 46 / .9); }
}

/* ==========================================================================
   Responsive — min-width only (§3.6)
   ========================================================================== */
@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
  /* The landing navbar starts here, not at --bp-lg: five links fit a tablet,
     and a hamburger would throw away a navigation that already works. */
  .nav { display: block; }
  .nav__list { gap: var(--space-3); }
  .nav__link { font-size: var(--fs-body-sm); }
  .topbar__burger { display: none; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__wide { grid-column: auto; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  /* Two columns with an odd count leave one cell empty, so the last card takes
     the whole row instead of leaving a hole. */
  .grid--3 > :last-child:nth-child(odd),
  .plans > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logos { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .logos__item { min-block-size: 76px; }
  .grid-contact { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .hero__title { letter-spacing: -.028em; }
}

@media (min-width: 1024px) {
  /* Three columns again, so the two-column filler rule is released. */
  .grid--3 > :last-child:nth-child(odd),
  .plans > :last-child:nth-child(odd) { grid-column: auto; }
  .nav__list { gap: var(--space-5); }
  .nav__link { font-size: var(--fs-body-md); }
  .topbar__actions .topbar__cta { display: inline-flex; }
  .logos { grid-template-columns: repeat(4, 1fr); gap: var(--space-5) var(--space-6); }
  .logos__item { font-size: var(--fs-body-lg); min-block-size: 68px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento__wide { grid-column: span 2; display: flex; align-items: center; gap: var(--space-5); }
  .bento__wide .card__icon { margin-block-end: 0; }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-10); }
  .wedge { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding: var(--space-8); }
  .grid-contact { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
  .section__title { font-size: 2.25rem; line-height: 3.1rem; }
  .plan--featured { transform: translateY(-8px); }
  .plan--featured:hover { transform: translateY(-12px); }
}

/* ==========================================================================
   Reduced motion + contrast + transparency (§7.3, §11)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: var(--dur-fast) !important; }
  .ticker__track { animation: none; inline-size: auto; flex-wrap: wrap; justify-content: center; }
  .eyebrow__dot { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .card:hover, .logos__item:hover, .plan:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root, [data-theme="dark"] { --border: var(--border-strong); }
  /* A stronger veil is the only way to raise the copy's contrast over an image. */
  .hero__veil { background: rgb(10 10 10 / 94%); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar.is-scrolled, .hero .btn--secondary { background: var(--bg); backdrop-filter: none; }
}

/* Print — a landing page prints as prose (§13 discipline) */
@media print {
  .topbar, .drawer, .scrim, .hero__dots, .hero__veil, .hero__bg, .ticker, .hero__cta, .eyebrow__dot { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { color: #000; --hero-ink: #000; --hero-ink-muted: #000; min-block-size: auto; padding-block: var(--space-6); }
  .hero__grad { background: none; color: #000; }
  .card, .plan, .split__panel, .compare__scroll, .error__ref { box-shadow: none; border-color: #000; background: #fff; }
  .section__title, .card__title, .wedge__title, .plan__name,
  .error__code, .error__title, .error__links a { color: #000; }
  .error__panel .card__icon { border-color: #000; background: #fff; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; }
}