/*
 * OSPattern marketing site — one stylesheet for every page.
 * Tokens mirror foundation/ui/src/styles/tokens.css (same names, same scale)
 * so the site and the product read as one brand. Brand anchors:
 * ink #1b1d23 · stone #f8f7f4 · accent #634ecf (#9f9afc on dark) · dark #0f0f13.
 */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --osp-bg: #f8f7f4;
  --osp-surface: oklch(0.995 0.002 85);
  --osp-surface-sunken: oklch(0.955 0.005 85);
  --osp-surface-hover: oklch(0.945 0.006 85);
  --osp-border: oklch(0.89 0.006 85);
  --osp-border-strong: oklch(0.78 0.008 85);
  --osp-ink: #1b1d23;
  --osp-ink-muted: oklch(0.43 0.012 275);
  --osp-ink-subtle: oklch(0.5 0.01 275);
  --osp-pattern-dot: oklch(0.85 0.01 285);
  --osp-grid-dot: oklch(0.8 0.012 285);

  --osp-accent: #634ecf;
  --osp-accent-hover: oklch(0.46 0.19 285);
  --osp-accent-soft: oklch(0.95 0.03 285);
  --osp-accent-ink: oklch(0.42 0.17 285);
  --osp-on-accent: #ffffff;
  --osp-focus: oklch(0.55 0.21 285);

  --osp-success: oklch(0.47 0.12 155);
  --osp-success-soft: oklch(0.95 0.04 155);
  --osp-warning: oklch(0.49 0.11 65);
  --osp-warning-soft: oklch(0.96 0.05 85);
  --osp-info: oklch(0.48 0.12 240);
  --osp-info-soft: oklch(0.95 0.03 240);
  --osp-neutral-soft: oklch(0.935 0.006 85);

  --osp-shadow-pop: 0 1px 2px oklch(0.2 0.02 280 / 0.06), 0 8px 24px oklch(0.2 0.02 280 / 0.1);
  --osp-shadow-lift: 0 1px 2px oklch(0.2 0.02 280 / 0.05), 0 24px 60px -12px oklch(0.2 0.02 280 / 0.18);

  --osp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --osp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --osp-text-xs: 0.75rem;
  --osp-text-sm: 0.8125rem;
  --osp-text-md: 0.875rem;
  --osp-text-lg: 1rem;
  --osp-text-xl: 1.25rem;
  --osp-text-2xl: 1.5rem;

  --osp-space-1: 4px;
  --osp-space-2: 8px;
  --osp-space-3: 12px;
  --osp-space-4: 16px;
  --osp-space-5: 20px;
  --osp-space-6: 24px;
  --osp-space-8: 32px;
  --osp-space-10: 40px;
  --osp-space-12: 48px;

  --osp-radius: 8px;
  --osp-radius-sm: 6px;
  --osp-radius-lg: 14px;
  --osp-radius-pill: 999px;
  --osp-control-h: 36px;
  --osp-control-h-lg: 44px;
  --osp-duration: 140ms;
  --osp-ease: cubic-bezier(0.2, 0, 0, 1);

  --page-max: 1180px;
  --gutter: 24px;
  --section-y: clamp(64px, 9vw, 120px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --osp-bg: #0f0f13;
    --osp-surface: oklch(0.2 0.01 280);
    --osp-surface-sunken: oklch(0.165 0.008 280);
    --osp-surface-hover: oklch(0.25 0.012 280);
    --osp-border: oklch(0.3 0.012 280);
    --osp-border-strong: oklch(0.42 0.014 280);
    --osp-ink: oklch(0.95 0.005 280);
    --osp-ink-muted: oklch(0.78 0.01 280);
    --osp-ink-subtle: oklch(0.7 0.012 280);
    --osp-pattern-dot: oklch(0.27 0.015 285);
    --osp-grid-dot: oklch(0.38 0.02 285);
    --osp-accent: #9f9afc;
    --osp-accent-hover: oklch(0.8 0.11 285);
    --osp-accent-soft: oklch(0.3 0.07 285);
    --osp-accent-ink: oklch(0.84 0.1 285);
    --osp-on-accent: #0f0f13;
    --osp-focus: oklch(0.78 0.15 285);
    --osp-success: oklch(0.8 0.13 155);
    --osp-success-soft: oklch(0.29 0.05 155);
    --osp-warning: oklch(0.83 0.12 80);
    --osp-warning-soft: oklch(0.3 0.05 75);
    --osp-info: oklch(0.8 0.1 240);
    --osp-info-soft: oklch(0.29 0.05 240);
    --osp-neutral-soft: oklch(0.26 0.01 280);
    --osp-shadow-pop: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.4);
    --osp-shadow-lift: 0 1px 2px oklch(0 0 0 / 0.3), 0 24px 60px -12px oklch(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --osp-bg: #0f0f13;
  --osp-surface: oklch(0.2 0.01 280);
  --osp-surface-sunken: oklch(0.165 0.008 280);
  --osp-surface-hover: oklch(0.25 0.012 280);
  --osp-border: oklch(0.3 0.012 280);
  --osp-border-strong: oklch(0.42 0.014 280);
  --osp-ink: oklch(0.95 0.005 280);
  --osp-ink-muted: oklch(0.78 0.01 280);
  --osp-ink-subtle: oklch(0.7 0.012 280);
  --osp-pattern-dot: oklch(0.27 0.015 285);
  --osp-grid-dot: oklch(0.38 0.02 285);
  --osp-accent: #9f9afc;
  --osp-accent-hover: oklch(0.8 0.11 285);
  --osp-accent-soft: oklch(0.3 0.07 285);
  --osp-accent-ink: oklch(0.84 0.1 285);
  --osp-on-accent: #0f0f13;
  --osp-focus: oklch(0.78 0.15 285);
  --osp-success: oklch(0.8 0.13 155);
  --osp-success-soft: oklch(0.29 0.05 155);
  --osp-warning: oklch(0.83 0.12 80);
  --osp-warning-soft: oklch(0.3 0.05 75);
  --osp-info: oklch(0.8 0.1 240);
  --osp-info-soft: oklch(0.29 0.05 240);
  --osp-neutral-soft: oklch(0.26 0.01 280);
  --osp-shadow-pop: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.4);
  --osp-shadow-lift: 0 1px 2px oklch(0 0 0 / 0.3), 0 24px 60px -12px oklch(0 0 0 / 0.6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--osp-bg);
  color: var(--osp-ink);
  font-family: var(--osp-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--osp-accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--osp-accent); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--osp-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--osp-accent-soft); color: var(--osp-ink); }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--osp-ink); color: var(--osp-bg);
  padding: 8px 14px; border-radius: var(--osp-radius); font-weight: 600; text-decoration: none;
  transition: top var(--osp-duration) var(--osp-ease);
}
.skip-link:focus { top: 12px; color: var(--osp-bg); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section + .section { padding-top: 0; }
.section-rule { border-top: 1px solid var(--osp-border); }

/* Dot-grid texture: the supporting graphic, quietly in the background. */
.dotted { position: relative; isolation: isolate; }
.dotted::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--osp-pattern-dot) 1.2px, transparent 1.6px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--osp-font-mono); font-size: var(--osp-text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--osp-accent-ink); font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 2px);
  background-size: 5px 5px; background-position: -0.5px -0.5px;
  opacity: 0.85;
}
.display {
  font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.75rem);
  line-height: 1.02; letter-spacing: -0.04em; font-weight: 680;
}
.h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.875rem); letter-spacing: -0.03em; line-height: 1.08; }
.h3 { font-size: var(--osp-text-xl); letter-spacing: -0.015em; }
.lead { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); color: var(--osp-ink-muted); line-height: 1.55; }
.muted { color: var(--osp-ink-muted); }
.small { font-size: var(--osp-text-md); }
.mono { font-family: var(--osp-font-mono); }
.accent-text { color: var(--osp-accent-ink); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); display: grid; gap: 16px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--osp-control-h-lg); padding: 0 20px;
  border-radius: var(--osp-radius); border: 1px solid transparent;
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--osp-duration) var(--osp-ease), color var(--osp-duration) var(--osp-ease),
    border-color var(--osp-duration) var(--osp-ease), transform var(--osp-duration) var(--osp-ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--osp-accent); color: var(--osp-on-accent); }
.btn-primary:hover { background: var(--osp-accent-hover); color: var(--osp-on-accent); }
.btn-secondary { background: var(--osp-surface); color: var(--osp-ink); border-color: var(--osp-border-strong); }
.btn-secondary:hover { background: var(--osp-surface-hover); color: var(--osp-ink); }
.btn-ghost { background: transparent; color: var(--osp-ink); }
.btn-ghost:hover { background: var(--osp-surface-hover); color: var(--osp-ink); }
.btn-sm { height: var(--osp-control-h); padding: 0 14px; font-size: var(--osp-text-md); }
.btn .arrow { transition: transform var(--osp-duration) var(--osp-ease); }
.btn:hover .arrow { transform: translateX(2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.text-link:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--osp-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in oklab, var(--osp-border) 70%, transparent);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand-link { display: inline-flex; color: var(--osp-ink); flex: none; border-radius: 6px; }
.brand-link:hover { color: var(--osp-ink); }
.logo { height: 26px; width: auto; }
.logo .logo-dot, .mark .logo-dot { fill: var(--osp-accent); }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a {
  color: var(--osp-ink-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  padding: 8px 12px; border-radius: var(--osp-radius-sm);
}
.site-nav a:hover { color: var(--osp-ink); background: var(--osp-surface-hover); }
.site-nav a[aria-current="page"] { color: var(--osp-ink); }
.site-nav a { position: relative; }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--osp-accent);
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--osp-radius); border: 1px solid transparent; background: transparent;
  color: var(--osp-ink-muted); cursor: pointer; padding: 0;
}
.icon-btn:hover { color: var(--osp-ink); background: var(--osp-surface-hover); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.menu-toggle { display: none; }

@media (max-width: 860px) {
  .header-inner { height: 60px; gap: 8px; }
  .logo { height: 22px; }
  .menu-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
  .header-actions .btn { display: none; }
  .site-nav {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--osp-bg); border-bottom: 1px solid var(--osp-border);
    padding: 8px var(--gutter) 20px; box-shadow: var(--osp-shadow-pop);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--osp-border); border-radius: 0; }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav a[aria-current="page"] { color: var(--osp-accent-ink); }
  .site-nav .nav-cta { display: flex; margin-top: 16px; border: 0; color: var(--osp-on-accent); padding: 0 20px; border-radius: var(--osp-radius); }
  .site-nav .nav-cta:hover { color: var(--osp-on-accent); background: var(--osp-accent-hover); }
}
@media (min-width: 861px) { .site-nav .nav-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-copy .lead { max-width: 36rem; }
.hero-tagline {
  display: flex; gap: 12px; align-items: flex-start; max-width: 34rem;
  padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--osp-border);
  font-size: var(--osp-text-md); color: var(--osp-ink-muted);
}
.hero-tagline .mark { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--osp-ink); }

.hero-visual { position: relative; display: grid; gap: 20px; }
.os-frame {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; margin-left: auto;
  background: var(--osp-surface); border: 1px solid var(--osp-border); border-radius: 24px;
  box-shadow: var(--osp-shadow-lift); padding: 7%;
}
.os-frame .os-label {
  position: absolute; font-family: var(--osp-font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--osp-ink-subtle);
}
.os-frame .os-label.tl { top: 16px; left: 20px; }
.os-frame .os-label.br { bottom: 16px; right: 20px; color: var(--osp-accent-ink); }
.trace { width: 100%; height: 100%; overflow: visible; }
.trace .g-dot { fill: var(--osp-grid-dot); }
.trace .loop { fill: none; stroke: var(--osp-ink); stroke-linecap: round; stroke-linejoin: round; }
.trace .core { fill: var(--osp-ink); }
.trace .own { fill: var(--osp-accent); }
.trace .halo { fill: none; stroke: var(--osp-accent); stroke-width: 2; opacity: 0.35; }

.hero-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 480px; margin-left: auto; width: 100%; list-style: none; }
.hero-legend li { display: grid; gap: 4px; font-size: var(--osp-text-sm); color: var(--osp-ink-muted); line-height: 1.4; }
.hero-legend strong { color: var(--osp-ink); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.legend-key { width: 12px; height: 12px; flex: none; border-radius: 50%; }
.legend-key.grid { background-image: radial-gradient(circle, var(--osp-grid-dot) 1.6px, transparent 2px); background-size: 4px 4px; border-radius: 2px; }
.legend-key.loop { border: 3px solid var(--osp-ink); border-radius: 4px; }
.legend-key.own { background: var(--osp-accent); }

/* Draw-on animation (skipped for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .trace.animate .g-dot { opacity: 0; animation: dot-in 420ms var(--osp-ease) forwards; }
  .trace.animate .g-dot:nth-child(2) { animation-delay: 60ms; }
  .trace.animate .g-dot:nth-child(3) { animation-delay: 120ms; }
  .trace.animate .g-dot:nth-child(4) { animation-delay: 90ms; }
  .trace.animate .g-dot:nth-child(5) { animation-delay: 150ms; }
  .trace.animate .g-dot:nth-child(6) { animation-delay: 210ms; }
  .trace.animate .g-dot:nth-child(7) { animation-delay: 180ms; }
  .trace.animate .g-dot:nth-child(8) { animation-delay: 240ms; }
  .trace.animate .g-dot:nth-child(9) { animation-delay: 300ms; }
  .trace.animate .loop { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1700ms cubic-bezier(0.65, 0, 0.35, 1) 550ms forwards; }
  .trace.animate .core { opacity: 0; transform-origin: 240px 240px; animation: pop 420ms var(--osp-ease) 2150ms forwards; }
  .trace.animate .own { opacity: 0; transform-origin: 390px 90px; animation: pop 520ms var(--osp-ease) 2350ms forwards; }
  .trace.animate .halo { opacity: 0; transform-origin: 390px 90px; animation: halo 1600ms var(--osp-ease) 2500ms forwards; }
  .route-draw .route-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
  .route-draw.is-drawn .route-line { stroke-dashoffset: 0; }
}
@keyframes dot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.2); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes halo { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .os-frame, .hero-legend { margin-left: 0; max-width: 420px; }
}

/* ---------- Cards & grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--osp-surface); border: 1px solid var(--osp-border); border-radius: var(--osp-radius-lg);
  padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start;
}
.card p { color: var(--osp-ink-muted); }
.card .h3 { margin-top: 4px; }
.card-icon {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--osp-accent-soft); color: var(--osp-accent-ink);
}
.card-icon svg { width: 22px; height: 22px; }
.ticks { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.ticks li { position: relative; padding-left: 22px; color: var(--osp-ink-muted); font-size: 0.9875rem; line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--osp-accent);
}
.ticks strong { color: var(--osp-ink); font-weight: 600; }

/* ---------- Problem ---------- */
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contrast .card { background: var(--osp-surface-sunken); }
.contrast-label { font-family: var(--osp-font-mono); font-size: var(--osp-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--osp-ink-subtle); }
.answer {
  margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: clamp(22px, 3vw, 32px); border-radius: var(--osp-radius-lg);
  background: var(--osp-ink); color: var(--osp-bg);
}
.answer .mark { width: 48px; height: 48px; color: var(--osp-bg); }
.answer p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; }
.answer p span { opacity: 0.72; font-weight: 400; }
@media (max-width: 720px) { .contrast { grid-template-columns: 1fr; } .answer { grid-template-columns: 1fr; } }

/* ---------- Steps (Model → Run → Adapt) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; position: relative; }
.step { position: relative; }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-num { font-family: var(--osp-font-mono); font-size: var(--osp-text-sm); color: var(--osp-ink-subtle); }
.step h3 { font-size: 1.75rem; letter-spacing: -0.03em; }
.step .route { width: 56px; height: 56px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Routes: small 3×3 grids with one traced pattern each. */
.route { overflow: visible; }
.route .g-dot { fill: var(--osp-grid-dot); }
.route .route-line { fill: none; stroke: var(--osp-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.route .route-alt { fill: none; stroke: var(--osp-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.route .route-ghost { fill: none; stroke: var(--osp-border-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.route .route-plan { fill: none; stroke: var(--osp-border-strong); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.route .start { fill: var(--osp-ink); }
.route .end { fill: var(--osp-accent); }

/* ---------- Product mockups ---------- */
.showcase { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
@media (max-width: 1024px) { .showcase { grid-template-columns: 1fr; } }
.mock {
  margin: 0; background: var(--osp-surface); border: 1px solid var(--osp-border); border-radius: var(--osp-radius-lg);
  box-shadow: var(--osp-shadow-lift); overflow: hidden; font-size: var(--osp-text-sm); line-height: 1.45;
}
.mock-bar {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  border-bottom: 1px solid var(--osp-border); background: var(--osp-surface-sunken);
}
.mock-bar .mark { width: 16px; height: 16px; color: var(--osp-ink); }
.mock-url { font-family: var(--osp-font-mono); font-size: 11.5px; color: var(--osp-ink-subtle); }
.mock-tag { margin-left: auto; font-size: 11px; color: var(--osp-ink-subtle); font-family: var(--osp-font-mono); }
.mock figcaption { padding: 12px 16px; border-top: 1px solid var(--osp-border); color: var(--osp-ink-subtle); font-size: var(--osp-text-sm); }

.studio { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 380px; }
.studio-side { border-right: 1px solid var(--osp-border); padding: 14px 10px; display: grid; gap: 14px; align-content: start; background: var(--osp-surface-sunken); }
.studio-side h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--osp-ink-subtle); font-weight: 600; padding: 0 8px 4px; font-family: var(--osp-font-mono); }
.studio-side ul { list-style: none; display: grid; gap: 1px; }
.studio-side li { padding: 5px 8px; border-radius: 5px; color: var(--osp-ink-muted); display: flex; gap: 8px; align-items: center; }
.studio-side li.on { background: var(--osp-accent-soft); color: var(--osp-accent-ink); font-weight: 600; }
.studio-side li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: 0.45; }
.studio-main { padding: 18px 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.studio-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.studio-head h5 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.studio-head .sub { color: var(--osp-ink-subtle); font-size: 12px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px; border-radius: var(--osp-radius); background: var(--osp-surface-sunken); border: 1px solid var(--osp-border); }
.flow .node { padding: 4px 9px; font-size: 12px; border-radius: 6px; background: var(--osp-surface); border: 1px solid var(--osp-border-strong); font-weight: 500; white-space: nowrap; }
.flow .node.new { border: 1.5px dashed var(--osp-accent); color: var(--osp-accent-ink); background: var(--osp-accent-soft); }
.flow .sep { width: 10px; height: 2px; background: var(--osp-border-strong); border-radius: 2px; }
.diff { list-style: none; display: grid; gap: 6px; }
.diff li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--osp-border); }
.diff .sym { font-family: var(--osp-font-mono); font-weight: 700; text-align: center; }
.diff .add .sym { color: var(--osp-success); }
.diff .chg .sym { color: var(--osp-warning); }
.diff small { display: block; color: var(--osp-ink-subtle); font-size: 11.5px; }
.architect { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: var(--osp-radius); background: var(--osp-accent-soft); color: var(--osp-ink); }
.architect .mark { width: 22px; height: 22px; color: var(--osp-accent-ink); margin-top: 1px; }
.architect b { color: var(--osp-accent-ink); }
.review-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--osp-border); }
.review-bar .who { color: var(--osp-ink-subtle); font-size: 12px; }
.fake-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; font-weight: 600; font-size: 12px; border: 1px solid var(--osp-border-strong); color: var(--osp-ink); background: var(--osp-surface); }
.fake-btn.primary { background: var(--osp-accent); border-color: transparent; color: var(--osp-on-accent); }
@media (max-width: 640px) {
  .studio { grid-template-columns: 1fr; }
  .studio-side { display: none; }
}

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--osp-radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1;
  background: var(--osp-neutral-soft); color: var(--osp-ink-muted);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--osp-success-soft); color: var(--osp-success); }
.pill.soon { background: var(--osp-accent-soft); color: var(--osp-accent-ink); }
.pill.warn { background: var(--osp-warning-soft); color: var(--osp-warning); }
.pill.info { background: var(--osp-info-soft); color: var(--osp-info); }
.pill.plain::before { display: none; }

/* Run list */
.runlist { padding: 14px 16px 16px; display: grid; gap: 12px; }
.runlist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.runlist-head h5 { margin: 0; font-size: 1rem; font-weight: 650; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--osp-border-strong); color: var(--osp-ink-muted); }
.chip.on { background: var(--osp-ink); color: var(--osp-bg); border-color: var(--osp-ink); }
.rows { list-style: none; border: 1px solid var(--osp-border); border-radius: var(--osp-radius); overflow: hidden; }
.rows li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 72px; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--osp-border); }
.rows li:first-child { border-top: 0; background: var(--osp-surface-sunken); color: var(--osp-ink-subtle); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--osp-font-mono); padding: 7px 12px; }
.rows .name { font-weight: 600; color: var(--osp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .name small { display: block; font-weight: 400; color: var(--osp-ink-subtle); font-size: 11.5px; }
.rows .stage { color: var(--osp-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { display: grid; gap: 4px; justify-items: end; font-family: var(--osp-font-mono); font-size: 12px; }
.score i { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--osp-neutral-soft); position: relative; overflow: hidden; }
.score i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--osp-accent); border-radius: 4px; }
.insight { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--osp-radius); border: 1px solid var(--osp-border); background: var(--osp-surface-sunken); }
.insight .dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--osp-accent); flex: none; }

/* Receipt */
.receipt { padding: 20px; display: grid; gap: 14px; }
.receipt-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.receipt-head h5 { margin: 0; font-size: 1rem; font-weight: 650; }
.receipt-head .mono { font-size: 11.5px; color: var(--osp-ink-subtle); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 0; margin: 0; }
.kv dt { color: var(--osp-ink-muted); }
.kv dd { margin: 0; padding-left: 16px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.kv .total { font-weight: 700; color: var(--osp-ink); padding-top: 8px; border-top: 1px solid var(--osp-border); }
.sched { list-style: none; display: grid; gap: 0; border: 1px solid var(--osp-border); border-radius: var(--osp-radius); overflow: hidden; }
.sched li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 96px; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--osp-border); font-variant-numeric: tabular-nums; }
.sched li:first-child { border-top: 0; }
.sched li span:nth-child(2) { color: var(--osp-ink-subtle); text-align: right; }
.sched li span:last-child { text-align: right; }
.sched li.paid span:first-child::after { content: " · paid"; color: var(--osp-success); font-weight: 600; }
.receipt-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--osp-ink-subtle); font-size: 11.5px; }
.receipt-foot .mark { width: 18px; height: 18px; color: var(--osp-ink); }

/* Version history */
.versions { list-style: none; padding: 8px; display: grid; gap: 2px; }
.versions li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 8px; }
.versions li.cur { background: var(--osp-accent-soft); }
.versions .v { font-family: var(--osp-font-mono); font-size: 12px; color: var(--osp-ink-subtle); }
.versions .t { min-width: 0; }
.versions .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.versions .t small { color: var(--osp-ink-subtle); font-size: 11.5px; }

/* Code */
.code {
  margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--osp-font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--osp-ink); background: var(--osp-surface);
}
.code .c { color: var(--osp-ink-subtle); }
.code .k { color: var(--osp-accent-ink); font-weight: 600; }
.code .s { color: var(--osp-success); }

/* ---------- Industries ---------- */
.industries { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ind { grid-column: span 4; }
.ind.feature { grid-column: span 12; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ind.wide { grid-column: span 12; }
.ind-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ind .route { width: 64px; height: 64px; }
.ind.feature .route { width: 72px; height: 72px; }
.ind.muted-card { background: transparent; border-style: dashed; }
.ind-copy { display: grid; gap: 14px; align-content: start; }
@media (max-width: 1024px) { .ind { grid-column: span 6; } .ind.feature { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ind { grid-column: span 12; } }
.closing-line { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; flex-wrap: wrap; }
.closing-line .mark { width: 28px; height: 28px; }

/* Industry detail rows (industries page) */
.ind-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--osp-border); align-items: start; }
.ind-row:first-of-type { border-top: 0; padding-top: 0; }
.ind-row .route-big { width: 132px; height: 132px; padding: 14px; border-radius: 20px; background: var(--osp-surface); border: 1px solid var(--osp-border); box-sizing: content-box; }
.ind-row .route-big .route-line, .ind-row .route-big .route-alt { stroke-width: 3.5; }
.ind-row .route-meta { display: grid; gap: 14px; justify-items: start; }
.ind-row .route-meta .mono { font-size: 11.5px; color: var(--osp-ink-subtle); }
.ind-row h2 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; }
.ind-row .ind-copy p { color: var(--osp-ink-muted); }
@media (max-width: 1024px) {
  .ind-row { grid-template-columns: 1fr; }
  .ind-row .route-meta { grid-template-columns: auto 1fr; align-items: center; }
  .ind-row .route-big { width: 88px; height: 88px; padding: 10px; }
}

/* ---------- Pillars ---------- */
.pillar .h3 { font-size: 1.1875rem; }

/* ---------- Pilot partners placeholder ---------- */
.partners {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--osp-radius-lg);
  border: 1px dashed var(--osp-border-strong); background: var(--osp-surface-sunken);
}
.partners h2 { font-size: var(--osp-text-2xl); letter-spacing: -0.02em; }
.partners p { color: var(--osp-ink-muted); margin-top: 8px; max-width: 42rem; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; grid-column: 1 / -1; }
.slot { height: 56px; border-radius: var(--osp-radius); border: 1px dashed var(--osp-border-strong); display: grid; place-items: center; font-family: var(--osp-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--osp-ink-subtle); }
@media (max-width: 720px) { .partners { grid-template-columns: 1fr; } .slots { grid-template-columns: repeat(2, 1fr); } }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: 24px; padding: clamp(40px, 6vw, 80px);
  background: #15151b; color: #f3f2ef; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, oklch(0.4 0.03 285) 1.2px, transparent 1.6px);
  background-size: 24px 24px; background-position: 12px 12px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000);
}
.cta-band h2 { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -0.035em; line-height: 1.06; max-width: 20ch; }
.cta-band p { color: oklch(0.8 0.01 280); margin-top: 16px; max-width: 34rem; }
.cta-band .btn-primary { background: #9f9afc; color: #0f0f13; }
.cta-band .btn-primary:hover { background: #b7b3fd; color: #0f0f13; }
.cta-band .btn-secondary { background: transparent; color: #f3f2ef; border-color: oklch(0.45 0.014 280); }
.cta-band .btn-secondary:hover { background: oklch(0.25 0.012 280); color: #fff; }
.cta-band .btn-row { justify-content: flex-end; }
.cta-mark { position: absolute; right: -40px; bottom: -60px; width: 280px; height: 280px; color: oklch(0.3 0.02 280); z-index: -1; opacity: 0.6; }
.cta-mark .logo-dot { fill: oklch(0.42 0.1 285) !important; }
:root[data-theme="dark"] .cta-band { background: var(--osp-surface); border: 1px solid var(--osp-border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-band { background: var(--osp-surface); border: 1px solid var(--osp-border); } }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } .cta-mark { width: 200px; height: 200px; } }

/* ---------- Page header (inner pages) ---------- */
.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.page-hero .container { display: grid; gap: 20px; justify-items: start; }
.page-hero .display { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem); max-width: 18ch; }
.page-hero .lead { max-width: 44rem; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; list-style: none; }
.subnav a { display: inline-flex; height: 32px; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--osp-border-strong); color: var(--osp-ink-muted); text-decoration: none; font-size: var(--osp-text-md); font-weight: 500; background: var(--osp-surface); }
.subnav a:hover { color: var(--osp-ink); border-color: var(--osp-ink-subtle); }

/* Platform feature rows */
.feature-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--osp-border); scroll-margin-top: 80px; }
.feature-row.flip > :first-child { order: 2; }
.feature-row .copy { display: grid; gap: 16px; align-content: start; justify-items: start; }
.feature-row .copy p { color: var(--osp-ink-muted); }
.feature-row h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -0.03em; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } .feature-row.flip > :first-child { order: 0; } }

.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.mini { padding: 16px; border-radius: var(--osp-radius); border: 1px solid var(--osp-border); background: var(--osp-surface); display: grid; gap: 6px; align-content: start; }
.mini b { font-weight: 600; font-size: 0.9875rem; }
.mini span { color: var(--osp-ink-muted); font-size: var(--osp-text-md); line-height: 1.5; }
.mini .pill { justify-self: start; margin-top: 4px; }
@media (max-width: 520px) { .mini-grid { grid-template-columns: 1fr; } }

/* Status table (security) */
.status-table { width: 100%; border-collapse: collapse; font-size: 0.9875rem; }
.status-table th, .status-table td { text-align: left; padding: 16px 12px; border-top: 1px solid var(--osp-border); vertical-align: top; }
.status-table thead th { border-top: 0; font-family: var(--osp-font-mono); font-size: var(--osp-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--osp-ink-subtle); font-weight: 500; padding-top: 0; }
.status-table td:first-child { font-weight: 600; width: 28%; }
.status-table td:last-child { width: 140px; }
.status-table td p { color: var(--osp-ink-muted); }
.table-wrap { background: var(--osp-surface); border: 1px solid var(--osp-border); border-radius: var(--osp-radius-lg); padding: 24px 16px 8px; }
@media (max-width: 720px) {
  .status-table thead { display: none; }
  .status-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 4px; border-top: 1px solid var(--osp-border); }
  .status-table tbody tr:first-child { border-top: 0; }
  .status-table td { border: 0; padding: 0; width: auto !important; }
  .status-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .status-table td:last-child { grid-column: 2; grid-row: 1; }
}
.legend-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 20px; font-size: var(--osp-text-md); color: var(--osp-ink-muted); align-items: center; }

/* ---------- Prose (legal, security) ---------- */
.prose { max-width: 720px; display: grid; gap: 16px; }
.prose h2 { font-size: var(--osp-text-2xl); margin-top: 24px; letter-spacing: -0.02em; }
.prose h3 { font-size: var(--osp-text-xl); margin-top: 8px; }
.prose p, .prose li { color: var(--osp-ink-muted); }
.prose ul { padding-left: 20px; display: grid; gap: 6px; }
.draft-banner {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--osp-radius);
  background: var(--osp-warning-soft); color: var(--osp-ink); border: 1px solid color-mix(in oklab, var(--osp-warning) 35%, transparent);
}
.draft-banner strong { color: var(--osp-warning); font-family: var(--osp-font-mono); letter-spacing: 0.08em; font-size: var(--osp-text-sm); }
.toc-placeholder { list-style: none; padding: 0 !important; display: grid; gap: 0 !important; border: 1px solid var(--osp-border); border-radius: var(--osp-radius-lg); background: var(--osp-surface); }
.toc-placeholder li { padding: 18px 20px; border-top: 1px solid var(--osp-border); display: grid; gap: 4px; }
.toc-placeholder li:first-child { border-top: 0; }
.toc-placeholder h2 { margin: 0; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--osp-ink); }
.toc-placeholder span { font-size: var(--osp-text-md); color: var(--osp-ink-subtle); font-style: italic; }

/* ---------- Form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--osp-text-md); }
.field .opt { font-weight: 400; color: var(--osp-ink-subtle); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--osp-ink); background: var(--osp-surface);
  border: 1px solid var(--osp-border-strong); border-radius: var(--osp-radius); padding: 10px 12px; min-height: var(--osp-control-h-lg);
  transition: border-color var(--osp-duration) var(--osp-ease), box-shadow var(--osp-duration) var(--osp-ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--osp-ink-muted) 50%), linear-gradient(135deg, var(--osp-ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--osp-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--osp-accent) 25%, transparent); }
.field .hint { font-size: var(--osp-text-sm); color: var(--osp-ink-subtle); }
.form-note { font-size: var(--osp-text-sm); color: var(--osp-ink-subtle); }
.aside-card { position: sticky; top: 96px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--osp-border); padding: 56px 0 40px; margin-top: 0; font-size: var(--osp-text-md); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-brand { display: grid; gap: 14px; align-content: start; justify-items: start; }
.footer-brand p { color: var(--osp-ink-muted); max-width: 30ch; }
.site-footer h2 { font-size: var(--osp-text-xs); font-family: var(--osp-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--osp-ink-subtle); font-weight: 500; margin-bottom: 14px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a { color: var(--osp-ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--osp-ink); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--osp-border); color: var(--osp-ink-subtle); font-size: var(--osp-text-sm); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* ---------- 404 ---------- */
.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 64px 0; }
.not-found .route { width: 120px; height: 120px; margin: 0 auto 28px; }
.not-found .container { display: grid; gap: 18px; justify-items: center; }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .btn-row .btn { flex: 1 1 auto; }
  .hero-legend { grid-template-columns: 1fr; gap: 10px; }
  .hero-legend li { grid-template-columns: 110px 1fr; align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Additions ---------- */
.stack { display: grid; gap: 20px; align-content: start; }
.audit { list-style: none; padding: 6px 16px; }
.audit li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--osp-border); color: var(--osp-ink-muted); }
.audit li:first-child { border-top: 0; }
.audit b { color: var(--osp-ink); font-weight: 600; }
.audit .t { font-size: 11.5px; color: var(--osp-ink-subtle); }
.trace .nodes circle { fill: var(--osp-surface); }
@media (prefers-reduced-motion: no-preference) {
  .trace.animate .nodes { opacity: 0; animation: dot-in 500ms var(--osp-ease) 2250ms forwards; }
}
.ind-roadmap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.ind-roadmap .route { width: 56px; height: 56px; }
@media (max-width: 720px) {
  .ind-roadmap { grid-template-columns: auto minmax(0, 1fr); }
  .ind-roadmap .pill { grid-column: 2; justify-self: start; }
  .sched li { grid-template-columns: minmax(0, 1fr) 36px 84px; font-size: 12px; }
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.ind-row .route-big .route-line { stroke-width: 4.6; }
.trace .g-dot.corner { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .trace.animate .g-dot.corner { animation: corner-life 2600ms var(--osp-ease) forwards; }
}
@keyframes corner-life { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 85%, 100% { opacity: 0; } }
:root[data-theme="dark"] .answer { background: var(--osp-accent-soft); color: var(--osp-ink); }
:root[data-theme="dark"] .answer .mark { color: var(--osp-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .answer { background: var(--osp-accent-soft); color: var(--osp-ink); }
  :root:not([data-theme="light"]) .answer .mark { color: var(--osp-ink); }
}
.mock-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-bar .mark, .mock-tag { flex: none; }
@media (max-width: 640px) { .versions .t b { white-space: normal; } }
.hero-legend li { align-content: start; }

/* A flow built from steps (platform page illustration). */
.flowsteps { padding: 16px; display: grid; gap: 10px; font-size: var(--osp-text-sm); }
.flowsteps .fs-trigger { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--osp-accent-soft); color: var(--osp-ink); }
.flowsteps .fs-icon { color: var(--osp-accent); margin-right: 4px; }
.flowsteps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flowsteps ol ol { margin-top: 8px; padding-left: 22px; border-left: 2px solid var(--osp-border); }
.flowsteps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; }
.flowsteps li > ol { grid-column: 1 / -1; }
.flowsteps li > span:last-of-type { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--osp-border); background: var(--osp-surface); }
.flowsteps .fs-n { font-family: var(--osp-font-mono); color: var(--osp-ink-subtle); padding-top: 8px; font-size: 12px; }
.flowsteps .mono { font-family: var(--osp-font-mono); font-size: 12px; }