/* ==========================================================================
   Deinox design system
   Dark-first "engineering console" theme with an opt-in light mode.
   All assets are same-origin to satisfy the site CSP (default-src 'self').
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --canvas: #040b16;
  --canvas-2: #081827;
  --panel: #0d1c2f;
  --panel-2: #12253d;
  --panel-3: #17314f;
  --line: #22476f;
  --line-soft: #17314d;

  /* Type */
  --ink: #edf7ff;
  --ink-2: #b9d9f8;
  --ink-3: #7fa7d9;

  /* Brand + signal */
  --brand: #66b8ff;
  --brand-2: #dff4ff;
  --brand-deep: #2d7fe8;
  --cyan: #dff9ff;
  --cyan-deep: #8ad8ff;
  --green: #8ce2ff;
  --violet: #9ec6ff;
  --danger: #f87171;

  /* Effects */
  --glow-brand: 0 0 0 1px rgba(102, 184, 255, 0.35), 0 0 30px rgba(102, 184, 255, 0.32), 0 18px 48px -18px rgba(102, 184, 255, 0.75);
  --glow-cyan: 0 0 0 1px rgba(223, 249, 255, 0.32), 0 0 30px rgba(223, 249, 255, 0.18), 0 18px 48px -18px rgba(138, 216, 255, 0.65);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.52);
  --shadow: 0 18px 56px -22px rgba(4, 16, 30, 0.92);
  --shadow-lg: 0 44px 100px -38px rgba(4, 17, 33, 0.96);

  /* Geometry */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pad: clamp(16px, 2.4vw, 24px);
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1200px;

  /* Type ramp */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", ui-monospace, "Consolas",
    "Liberation Mono", monospace;

  /* Component-level */
  --grid-line: rgba(148, 178, 232, 0.07);
  --card-bg: linear-gradient(168deg, rgba(24, 34, 58, 0.9), rgba(12, 18, 31, 0.9));
  --card-edge: rgba(148, 178, 232, 0.12);
  --chip-bg: rgba(148, 178, 232, 0.08);
  --scrim: rgba(3, 6, 12, 0.72);

  /* Buttons: flat fill + outline, no gradients or glows */
  --btn-fill: #1f6fd0;
  --btn-fill-hover: #1a5cb0;
  --btn-fill-ink: #ffffff;
  --btn-line: rgba(148, 178, 232, 0.3);
  --btn-line-hover: var(--brand);
  --btn-tint: rgba(102, 184, 255, 0.1);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --canvas: #edf5ff;
  --canvas-2: #f7fbff;
  --panel: #ffffff;
  --panel-2: #f1f8ff;
  --panel-3: #e9f3ff;
  --line: #cfe3ff;
  --line-soft: #dfeeff;

  --ink: #0d1728;
  --ink-2: #456487;
  --ink-3: #6982a6;

  --brand: #2563eb;
  --brand-2: #60a5fa;
  --brand-deep: #1d4ed8;
  --cyan: #38bdf8;
  --cyan-deep: #0ea5e9;
  --green: #53d6ff;
  --violet: #7aa7ff;
  --danger: #dc2626;

  --glow-brand: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 18px 40px -18px rgba(37, 99, 235, 0.45);
  --glow-cyan: 0 0 0 1px rgba(56, 189, 248, 0.16), 0 18px 36px -18px rgba(56, 189, 248, 0.3);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.34);
  --shadow-lg: 0 40px 80px -48px rgba(15, 23, 42, 0.42);

  --grid-line: rgba(13, 21, 38, 0.06);
  --card-bg: linear-gradient(168deg, #ffffff, #f7fbff);
  --card-edge: rgba(13, 21, 38, 0.08);
  --chip-bg: rgba(13, 21, 38, 0.04);
  --scrim: rgba(15, 23, 42, 0.42);

  --btn-fill: #1d4ed8;
  --btn-fill-hover: #1a45bd;
  --btn-fill-ink: #ffffff;
  --btn-line: rgba(13, 21, 38, 0.2);
  --btn-line-hover: var(--brand);
  --btn-tint: rgba(37, 99, 235, 0.08);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient field: hairline grid + two brand auroras. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: radial-gradient(60ch 40ch at 12% -10%, rgba(102, 184, 255, 0.18), transparent 68%),
    radial-gradient(70ch 46ch at 92% 4%, rgba(223, 249, 255, 0.18), transparent 72%);
  pointer-events: none;
}

:root[data-theme="light"] body::after {
  background: radial-gradient(60ch 40ch at 12% -10%, rgba(37, 99, 235, 0.1), transparent 70%),
    radial-gradient(70ch 46ch at 92% 4%, rgba(56, 189, 248, 0.12), transparent 70%);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.35rem + 3.2vw, 3.9rem);
}
h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
}
h3 {
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
}
h4 {
  font-size: 1rem;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--ink);
  font-weight: 650;
}

::selection {
  background: rgba(102, 184, 255, 0.35);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon {
  flex: none;
  vertical-align: middle;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

/* Inline symbol sprite: same-origin, satisfies img-src 'self' CSP */
.icon-sprite {
  display: none;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--maxw), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.container-narrow {
  width: min(880px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  padding: clamp(48px, 7vw, 92px) 0;
  position: relative;
}

.section-tight {
  padding: clamp(32px, 4vw, 52px) 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 40px);
  flex-wrap: wrap;
}

.section-head p {
  color: var(--ink-2);
  max-width: 62ch;
}

.section-head h2 {
  margin-bottom: 0;
}

.section-head > div:first-child {
  max-width: 66ch;
}

.stack {
  display: grid;
  gap: 16px;
}

.grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

/* These are used standalone in the markup, so they carry their own
   display + gap rather than depending on a companion .grid class. */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.split-even {
  grid-template-columns: 1fr 1fr;
}

/* Opt-in equal-height columns; .split alone stays top-aligned. */
.split-stretch {
  align-items: stretch;
}

.split-stretch > * {
  height: 100%;
}

.split-reverse > *:first-child {
  order: 2;
}

@media (max-width: 900px) {
  .split,
  .split-even {
    grid-template-columns: 1fr;
  }
  .split-reverse > *:first-child {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   4. Typographic accents
   -------------------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.kicker-cyan {
  color: var(--cyan);
}

.lead {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  color: var(--ink-2);
  max-width: 66ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.muted {
  color: var(--ink-2);
}

.note {
  font-size: 0.85rem;
  color: var(--ink-3);
}

.gradient-text {
  background: linear-gradient(100deg, var(--brand-2), var(--brand) 32%, var(--cyan) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   5. Chips, badges, tags
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
}

.badge .icon {
  width: 15px;
  height: 15px;
  color: var(--brand);
}

.badge-cyan .icon {
  color: var(--cyan);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.tag .icon {
  width: 13px;
  height: 13px;
}

.tag-brand {
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.11);
  color: var(--brand);
}
.tag-cyan {
  border-color: rgba(34, 211, 238, 0.32);
  background: rgba(34, 211, 238, 0.1);
  color: var(--cyan);
}
.tag-green {
  border-color: rgba(52, 211, 153, 0.32);
  background: rgba(52, 211, 153, 0.1);
  color: var(--green);
}
.tag-violet {
  border-color: rgba(167, 139, 250, 0.32);
  background: rgba(167, 139, 250, 0.1);
  color: var(--violet);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Stacked pill rows (hero proof chips above the CTA buttons) need
   a visible break; a single row keeps its surrounding rhythm. */
.pill-row + .pill-row {
  margin-top: 14px;
}

/* Live status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--green);
  letter-spacing: 0.03em;
}

.status-pill[data-state="down"] {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: var(--danger);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-dot 2.4s ease-out infinite;
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--btn-fill);
  color: var(--btn-fill-ink);
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.button .icon {
  width: 17px;
  height: 17px;
  transition: transform 0.2s ease;
}

.button:hover {
  background: var(--btn-fill-hover);
}

.button:hover .icon:last-child {
  transform: translateX(3px);
}

.button:active {
  background: var(--btn-fill-hover);
}

.button-ghost,
.button.alt {
  background: transparent;
  color: var(--ink);
  border-color: var(--btn-line);
  box-shadow: none;
}

.button-ghost:hover,
.button.alt:hover {
  border-color: var(--btn-line-hover);
  background: var(--btn-tint);
  color: var(--ink);
}

.button-ghost:active,
.button.alt:active {
  background: var(--btn-tint);
}

.button-quiet {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
  box-shadow: none;
  padding-inline: 10px;
}

.button-quiet:hover {
  color: var(--ink);
  background: var(--chip-bg);
}

.button-sm {
  padding: 8px 15px;
  font-size: 0.85rem;
}

.button-block {
  width: 100%;
}

.button[disabled],
.button[aria-busy="true"] {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Text link with arrow affordance */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cyan);
  transition: gap 0.18s ease, color 0.18s ease;
}

.link-arrow .icon {
  width: 16px;
  height: 16px;
}

.link-arrow:hover {
  gap: 12px;
  color: var(--brand);
}

.prose a:not(.button):not(.link-arrow) {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:not(.button):not(.link-arrow):hover {
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   7. Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}

.site-header .brand {
  width: 230px;
  height: 48px;
  background: url("/assets/img/logo/site-logo.png") left center / contain no-repeat;
}

.site-header .brand > * {
  visibility: hidden;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: url("/assets/img/logo/favicon.png") center / cover no-repeat;
  display: grid;
  place-items: center;
  box-shadow: var(--glow-brand);
  position: relative;
  overflow: hidden;
  flex: none;
  color: transparent;
  font-size: 0;
}

.brand-mark svg {
  display: none;
}

.brand-meta {
  display: grid;
  line-height: 1.25;
}

.brand-meta strong {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.brand-meta span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--ink-2);
  transition: color 0.18s ease, background 0.18s ease;
}

.site-nav a .icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--chip-bg);
}

.site-nav a.active {
  color: var(--ink);
  background: var(--chip-bg);
}

.site-nav a.active .icon {
  color: var(--brand);
  opacity: 1;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.icon-button:hover {
  color: var(--ink);
  border-color: rgba(34, 211, 238, 0.4);
}

.icon-button .icon {
  width: 18px;
  height: 18px;
}

/* Search trigger doubles as the command-palette entry point */
.palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 10px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  color: var(--ink-3);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.palette-trigger:hover {
  color: var(--ink-2);
  border-color: rgba(34, 211, 238, 0.4);
}

.palette-trigger .icon {
  width: 16px;
  height: 16px;
}

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--card-edge);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  line-height: 1.4;
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.lang-switcher {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  gap: 2px;
}

.lang-switcher a {
  padding: 4px 9px;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-3);
  transition: color 0.16s ease, background 0.16s ease;
}

.lang-switcher a:hover {
  color: var(--ink);
}

.lang-switcher a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
}

.nav-toggle {
  display: none;
}

/* Mobile drawer */
@media (max-width: 1040px) {
  /* The drawer is a fixed-position child of .site-header. A backdrop-filter
     on an ancestor makes it a containing block for fixed descendants, so the
     drawer would size against the header box instead of the viewport and get
     clipped to header height. Drop the blur (and the translucency it made
     work) for the widths where the drawer is used. */
  .site-header,
  .site-header.is-stuck {
    z-index: 120;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--canvas);
  }

  .nav-toggle {
    display: inline-grid;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: min(340px, 86vw);
    height: 100vh;
    height: 100dvh;
    z-index: 120;
    background: var(--panel);
    border-left: 1px solid var(--line);
    padding: 78px 20px max(28px, env(safe-area-inset-bottom));
    transform: translateX(102%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-lg);
  }

  .site-nav.open {
    transform: translateX(0);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-nav a {
    padding: 13px 14px;
    font-size: 1rem;
  }

  .site-nav a .icon {
    width: 18px;
    height: 18px;
  }

  .nav-scrim {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 110;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .nav-scrim.open {
    opacity: 1;
    visibility: visible;
  }

  .palette-trigger span,
  .palette-trigger .kbd {
    display: none;
  }

  .palette-trigger {
    width: 38px;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 560px) {
  .site-header .brand {
    width: 40px;
    height: 40px;
    background-image: url("/assets/img/logo/favicon.png");
  }

  .brand-meta span {
    display: none;
  }
}

/* Scroll progress rail */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  z-index: 130;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Cards + panels
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card > *:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--ink-2);
}

.card-hover {
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.32);
  box-shadow: var(--shadow-lg), var(--glow-cyan);
}

/* Top hairline that lights up on hover */
.card-lit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.35;
  transition: opacity 0.28s ease;
}

.card-lit:hover::before {
  opacity: 1;
}

.card-flush {
  padding: 0;
}

.card-body {
  padding: var(--pad);
}

/* Feature card with a leading icon tile */
.feature {
  display: grid;
  gap: 12px;
  align-content: start;
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  color: var(--brand);
  flex: none;
}

.icon-tile .icon {
  width: 21px;
  height: 21px;
}

.icon-tile-cyan {
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.28);
  background: rgba(34, 211, 238, 0.08);
}
.icon-tile-green {
  color: var(--green);
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.08);
}
.icon-tile-violet {
  color: var(--violet);
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(167, 139, 250, 0.08);
}
.icon-tile-brand {
  color: var(--brand);
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.09);
}

.icon-tile-lg {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.icon-tile-lg .icon {
  width: 26px;
  height: 26px;
}

.feature h3 {
  margin-bottom: 0;
}

.feature p {
  margin-bottom: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
}

/* Row-style feature (icon beside text) */
.feature-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(52px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 3.5vw, 52px);
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  margin-bottom: 18px;
}

.hero .lead {
  margin-bottom: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-visual {
  position: relative;
}

.hero-visual img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
}

/* Console panel used as the hero side card */
.console {
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.console-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-3);
}

.console-dots {
  display: flex;
  gap: 6px;
}

.console-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.console-dots i:nth-child(1) {
  background: rgba(248, 113, 113, 0.75);
}
.console-dots i:nth-child(2) {
  background: rgba(251, 191, 36, 0.75);
}
.console-dots i:nth-child(3) {
  background: rgba(52, 211, 153, 0.75);
}

.console-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}

.console-body {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.console-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

.console-line .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.console-line b {
  color: var(--ink);
  font-weight: 600;
}

.console-line em {
  margin-left: auto;
  font-style: normal;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stat {
  padding: 20px 18px;
  background: var(--panel);
  display: grid;
  gap: 4px;
  align-content: start;
}

.stat-value {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-value .unit {
  color: var(--brand);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat-note {
  font-size: 0.84rem;
  color: var(--ink-2);
}

.stat .icon {
  width: 17px;
  height: 17px;
  color: var(--cyan);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   11. Product cards
   -------------------------------------------------------------------------- */

.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: var(--shadow-lg), var(--glow-brand);
}

.product-art {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--panel-3);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.product-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-art .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  backdrop-filter: blur(8px);
}

.product-body {
  padding: var(--pad);
  display: grid;
  gap: 12px;
  align-content: start;
}

.product-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.product-title .icon {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.product-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   12. Lists
   -------------------------------------------------------------------------- */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.list li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5 9-10'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.list-brand li::before {
  border-color: rgba(249, 115, 22, 0.35);
  background-color: rgba(249, 115, 22, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5 9-10'/%3E%3C/svg%3E");
}

.list-dash li::before {
  border-color: var(--card-edge);
  background: var(--chip-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

.list strong {
  color: var(--ink);
}

/* Numbered process list */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.steps li:last-child {
  border-bottom: 0;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
}

.steps h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.steps p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   13. Timeline / roadmap rail
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 30px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--brand), var(--cyan), transparent);
}

.timeline-item {
  position: relative;
  padding: 12px 0 12px 6px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 20px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: var(--canvas);
}

.timeline-item[data-state="done"]::before {
  background: var(--green);
  border-color: var(--green);
}

.timeline-phase {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.timeline-item h3 {
  margin: 3px 0 5px;
  font-size: 1.02rem;
}

.timeline-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   14. Tables (spec sheets)
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--panel-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr {
  transition: background 0.16s ease;
}

tbody tr:hover {
  background: var(--chip-bg);
}

tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.cell-icon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cell-icon .icon {
  width: 16px;
  height: 16px;
  color: var(--cyan);
}

/* --------------------------------------------------------------------------
   15. Marquee (trust / sector strip)
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  border-block: 1px solid var(--line-soft);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.marquee-item .icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl);
  border: 1px solid rgba(249, 115, 22, 0.26);
  background: radial-gradient(80ch 40ch at 15% 0%, rgba(249, 115, 22, 0.18), transparent 65%),
    radial-gradient(70ch 40ch at 95% 100%, rgba(34, 211, 238, 0.16), transparent 62%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  overflow: hidden;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.cta-band h2 {
  margin: 0;
  max-width: 22ch;
}

.cta-band p {
  margin: 0;
  color: var(--ink-2);
  max-width: 58ch;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 72%);
  pointer-events: none;
}

.cta-band > * {
  position: relative;
}

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-row {
  display: grid;
  gap: 7px;
}

.form-row.full {
  grid-column: 1 / -1;
}

@media (max-width: 680px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

label .icon {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
}

label .req {
  color: var(--brand);
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--canvas-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #fff;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f809e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  padding-right: 38px;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

.field-hint {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--ink-3);
}

.field-error {
  font-size: 0.78rem;
  color: var(--danger);
  min-height: 1.1em;
}

.char-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.char-count[data-state="over"] {
  color: var(--danger);
}

.alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 550;
  border: 1px solid transparent;
}

.alert .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.alert.ok {
  display: flex;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.1);
  color: var(--green);
}

.alert.error {
  display: flex;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: var(--danger);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Spinner shown while the contact form is submitting */
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  display: none;
}

.button[aria-busy="true"] .spinner {
  display: block;
}

.button[aria-busy="true"] .icon {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   18. Command palette
   -------------------------------------------------------------------------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  padding: clamp(60px, 12vh, 140px) 20px 20px;
  justify-content: center;
  align-items: flex-start;
  background: var(--scrim);
  backdrop-filter: blur(6px);
}

.palette.open {
  display: flex;
}

.palette-panel {
  width: min(620px, 100%);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: palette-in 0.18s ease-out;
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
}

.palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.palette-input-wrap .icon {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}

.palette-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1rem;
  color: var(--ink);
}

.palette-input:focus {
  outline: none;
  box-shadow: none;
}

.palette-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.palette-results li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--ink-2);
}

.palette-results li a .icon {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}

.palette-results li[aria-selected="true"] a,
.palette-results li a:hover {
  background: var(--chip-bg);
  color: var(--ink);
}

.palette-results li[aria-selected="true"] a .icon {
  color: var(--brand);
}

.palette-item-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.palette-item-meta strong {
  font-size: 0.94rem;
  font-weight: 600;
}

.palette-item-meta span {
  font-size: 0.78rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.palette-foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-2);
  font-size: 0.74rem;
  color: var(--ink-3);
}

.palette-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(10, 15, 26, 0.6));
  padding: clamp(38px, 5vw, 64px) 0 28px;
}

:root[data-theme="light"] .footer {
  background: linear-gradient(180deg, transparent, rgba(238, 242, 249, 0.8));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.footer-brand {
  display: grid;
  gap: 14px;
  align-content: start;
  max-width: 34ch;
}

.footer .brand-mark,
.footer-grid > div:first-child:not(.footer-brand)::before,
.footer .container > p:first-child::before {
  background: url("/assets/img/logo/footer-logo-gray.png") center / contain no-repeat;
  box-shadow: none;
}

.footer-grid > div:first-child:not(.footer-brand)::before,
.footer .container > p:first-child::before {
  content: "";
  display: block;
  width: 112px;
  aspect-ratio: 1;
  margin-bottom: 14px;
}

.footer-brand p {
  color: var(--ink-3);
  font-size: 0.9rem;
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-col a {
  color: var(--ink-2);
  font-size: 0.9rem;
  transition: color 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-col a:hover {
  color: var(--brand);
}

.footer-col a .icon {
  width: 14px;
  height: 14px;
  opacity: 0.55;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--ink-3);
}

.footer-bottom .mono {
  font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   20. Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding: clamp(40px, 5.5vw, 78px) 0 clamp(24px, 3vw, 40px);
}

.page-hero .lead {
  margin-top: 6px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.breadcrumbs a:hover {
  color: var(--brand);
}

.breadcrumbs .icon {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

.hero-media {
  margin-top: 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--card-edge);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-media img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   21. Prose blocks (legal pages)
   -------------------------------------------------------------------------- */

.prose h2 {
  font-size: 1.25rem;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 11px;
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h2 .num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--brand);
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  border-radius: 8px;
  padding: 3px 8px;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

/* Table of contents rail */
.toc {
  position: sticky;
  top: 88px;
  align-self: start;
}

.toc h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  border-left: 1px solid var(--line);
}

.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.87rem;
  color: var(--ink-3);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.toc a:hover,
.toc a.active {
  color: var(--ink);
  border-left-color: var(--brand);
}

@media (max-width: 900px) {
  .toc {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   22. Misc utilities
   -------------------------------------------------------------------------- */

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.center {
  text-align: center;
}

.center .lead,
.center .section-head > div:first-child {
  margin-inline: auto;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--card-edge);
  background: var(--panel);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, color 0.18s ease;
  box-shadow: var(--shadow);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  color: var(--brand);
}

.copy-block {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--panel-2);
  padding: 18px 54px 18px 18px;
  color: var(--ink-2);
  font-size: 0.94rem;
}

.copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--card-edge);
  background: var(--panel-3);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.copy-button:hover {
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.4);
}

.copy-button .icon {
  width: 15px;
  height: 15px;
}

.copy-button[data-copied="true"] {
  color: var(--green);
  border-color: rgba(52, 211, 153, 0.4);
}

/* --------------------------------------------------------------------------
   23. Motion
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal-group].revealed > * {
  opacity: 1;
  transform: none;
}

[data-reveal-group].revealed > *:nth-child(2) {
  transition-delay: 0.07s;
}
[data-reveal-group].revealed > *:nth-child(3) {
  transition-delay: 0.14s;
}
[data-reveal-group].revealed > *:nth-child(4) {
  transition-delay: 0.21s;
}
[data-reveal-group].revealed > *:nth-child(5) {
  transition-delay: 0.28s;
}
[data-reveal-group].revealed > *:nth-child(6) {
  transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }

  .marquee-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   24. Print (resource briefs are meant to be saved as PDF)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   24. Media, icons and stat panels
   -------------------------------------------------------------------------- */

/* Hero side panel (was referenced in markup but never styled) */
.hero-card {
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.hero-card h3 {
  margin: 0;
}

.hero-card > p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.hero-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--canvas-2);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.metric {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ink-3);
}

.metric .icon {
  width: 20px;
  height: 20px;
  color: var(--cyan-deep);
}

.metric strong {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}

@media (max-width: 420px) {
  .metric-row {
    grid-template-columns: 1fr;
  }
}

/* Round icon chip used on cards and section heads */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  color: var(--cyan-deep);
  margin-bottom: 12px;
}

.icon-badge .icon {
  width: 22px;
  height: 22px;
}

/* Illustration banner at the top of a card */
.card-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--canvas-2);
  margin-bottom: 14px;
}

/* List variant that uses real icons instead of the generic check glyph */
.list-icon li::before {
  content: none;
}

.list-icon li {
  align-items: center;
}

.list-detail li {
  align-items: start;
}

.list-detail .icon {
  margin-top: 3px;
}

.list-detail strong {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}

.list-icon .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--cyan-deep);
}

/* Paired diagram figures */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--canvas-2);
}

.figure figcaption {
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .figure-grid {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   25. Page-level media patterns
   -------------------------------------------------------------------------- */

/* Contact form panel (class was in the markup but never styled) */
.form {
  display: block;
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.form > h2 {
  margin-top: 0;
}

.contact-layout {
  align-items: stretch;
}

.contact-layout > * {
  height: 100%;
}

.contact-info-card {
  display: flex;
  flex-direction: column;
}

.contact-section-title {
  margin-top: 32px;
}

.contact-preparation-list {
  margin-bottom: 24px;
}

.contact-response-note {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r);
  background: var(--chip-bg);
}

.contact-response-note p {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .contact-layout > * {
    height: auto;
  }
}

/* Founder / person block */
.person {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}

.person h2 {
  margin-top: 0;
}

.avatar {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--canvas-2);
}

@media (max-width: 520px) {
  .person {
    grid-template-columns: 1fr;
  }
}

/* A figure that spans its container rather than sitting in a pair */
.figure-wide {
  margin-top: clamp(20px, 2.4vw, 32px);
}

.figure-wide img {
  max-height: 460px;
  object-fit: contain;
  padding: clamp(10px, 1.6vw, 20px);
}

/* Table cell with a leading icon */
.cell-icon {
  white-space: nowrap;
}

.cell-icon .icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--cyan-deep);
  vertical-align: -4px;
}

.cell-icon span {
  vertical-align: middle;
}

/* Inline icon inside a heading */
h2 > .icon,
h3 > .icon {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  color: var(--cyan-deep);
  vertical-align: -3px;
}

/* Inline icon inside a tag chip */
.tag .icon {
  margin-right: 6px;
  vertical-align: -3px;
}

/* Timeline step icons sit inline ahead of the step label */
.timeline-item > .icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--cyan-deep);
  vertical-align: -4px;
}


/* --------------------------------------------------------------------------
   26. Legal notice / Impressum
   -------------------------------------------------------------------------- */

/* Base .alert is display:none until a state class is applied */
.alert-warn {
  display: flex;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  margin-top: 0;
}

.alert-warn strong {
  color: #fde68a;
  display: block;
  margin-bottom: 2px;
}

:root[data-theme="light"] .alert-warn {
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

:root[data-theme="light"] .alert-warn strong {
  color: #7c2d12;
}

/* Mandatory Impressum fields that still need real data */
.placeholder {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  border: 1px dashed rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 0.84em;
  font-style: normal;
}

:root[data-theme="light"] .placeholder {
  border-color: rgba(180, 83, 9, 0.45);
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}


/* --------------------------------------------------------------------------
   27. Product brief one-pagers
   -------------------------------------------------------------------------- */

.brief-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 2.6vw, 32px);
  align-items: center;
  margin-bottom: 6px;
}

.brief-head h1 {
  margin-top: 0;
}

.brief-head .lead {
  margin-bottom: 0;
}

.brief-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--btn-line);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.brief-back:hover {
  color: var(--ink);
  border-color: var(--btn-line-hover);
  background: var(--btn-tint);
}

.brief-back .icon {
  width: 17px;
  height: 17px;
}

.brief-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--card-edge);
  background: var(--canvas-2);
}

@media (max-width: 760px) {
  .brief-head {
    grid-template-columns: 1fr;
  }
}

@media print {
  .placeholder {
    border-color: #999;
    background: transparent;
    color: #000;
  }
}

@media print {
  :root {
    --canvas: #fff;
    --panel: #fff;
    --ink: #000;
    --ink-2: #333;
    --ink-3: #555;
    --card-edge: #ccc;
    --card-bg: #fff;
  }

  body::before,
  body::after,
  .site-header,
  .footer,
  .back-to-top,
  .palette,
  .nav-scrim,
  .scroll-progress,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card,
  .table-wrap {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .section {
    padding: 12px 0;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }

  /* Brief one-pagers: keep the banner small so a brief still prints on one page */
  .brief-head {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 16px;
    break-inside: avoid;
  }

  .brief-media {
    max-height: 132px;
    object-fit: contain;
    border-color: #ccc;
  }

  .icon-badge {
    border-color: #ccc;
    background: transparent;
    color: #000;
  }

  .icon {
    color: #000;
  }

  h2 > .icon,
  .list-icon .icon,
  .cell-icon .icon,
  .metric .icon {
    color: #000;
  }
}

/* --------------------------------------------------------------------------
   28. Product gallery slider (product profile pages)
   -------------------------------------------------------------------------- */

.product-gallery {
  position: relative;
  /* Screens are authored at 640x360, so cap the frame rather than letting a
     wide container blow the mock UI up past the page's own type scale. */
  max-width: 1040px;
  margin-inline: auto;
  --gallery-accent: var(--brand);
}

.product-gallery[data-accent="hottray"] {
  --gallery-accent: #f97316;
}

.product-gallery[data-accent="dropcab"] {
  --gallery-accent: #22d3ee;
}

.product-gallery[data-accent="livestocx"] {
  --gallery-accent: #34d399;
}

.product-gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.product-gallery-head h2 {
  margin-bottom: 4px;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

.product-gallery-head p {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0;
  max-width: 62ch;
}

.product-gallery-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  white-space: nowrap;
}

.product-gallery-frame {
  position: relative;
  container-type: inline-size;
  border-radius: var(--r-xl);
  border: 1px solid var(--card-edge);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The track itself is a scroll-snap strip, so it works with no JS at all:
   touch swipe and trackpad scroll are native, buttons only nudge it along. */
.product-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.product-gallery-track::-webkit-scrollbar {
  display: none;
}

.product-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}

.product-gallery-slide figure {
  margin: 0;
}

.product-gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--canvas-2);
}

.product-gallery-slide figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px var(--pad) 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel-2);
}

.product-gallery-slide figcaption strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.product-gallery-slide figcaption span {
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Controls */
.product-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* These sit on top of the artwork, which is dark in either theme, so they
     stay light-on-dark rather than following the page tokens. */
  border: 1px solid rgba(237, 247, 255, 0.26);
  background: rgba(4, 11, 22, 0.66);
  color: #edf7ff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
  z-index: 2;
}

.product-gallery-nav:hover:not(:disabled) {
  border-color: var(--gallery-accent);
  background: rgba(4, 11, 22, 0.88);
}

.product-gallery-nav:disabled {
  opacity: 0.32;
  cursor: default;
}

.product-gallery-nav svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.product-gallery-prev {
  left: 12px;
}

.product-gallery-next {
  right: 12px;
}

.product-gallery-prev svg {
  transform: rotate(180deg);
}

/* The caption sits under a 16:9 image, so centre the arrows on the artwork
   rather than on the whole frame. 28.125cqi is half of a 16:9 frame width. */
@supports (top: 1cqi) {
  .product-gallery-nav {
    top: 28.125cqi;
  }
}

.product-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.product-gallery-dot {
  width: 30px;
  height: 6px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--btn-line);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, width 0.18s ease;
}

.product-gallery-dot:hover {
  border-color: var(--btn-line-hover);
}

.product-gallery-dot[aria-current="true"] {
  width: 44px;
  background: var(--gallery-accent);
  border-color: var(--gallery-accent);
}

@media (max-width: 640px) {
  .product-gallery-nav {
    width: 34px;
    height: 34px;
  }

  .product-gallery-prev {
    left: 8px;
  }

  .product-gallery-next {
    right: 8px;
  }

  .product-gallery-slide figcaption {
    display: block;
  }

  .product-gallery-slide figcaption strong {
    display: block;
    margin-bottom: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery-track {
    scroll-behavior: auto;
  }
}

@media print {
  .product-gallery-nav,
  .product-gallery-dots {
    display: none !important;
  }

  .product-gallery-track {
    display: block;
    overflow: visible;
  }

  .product-gallery-slide {
    break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   29. Execution roadmap (product profile pages)

   Four phase cards strung along a rail that runs horizontally on desktop and
   flips vertical when the columns stack. Each phase fades a little further
   down the track, so near-term work reads louder than the far horizon.
   -------------------------------------------------------------------------- */

.roadmap {
  --roadmap-accent: var(--brand);
  --roadmap-glow: rgba(102, 184, 255, 0.16);
  --rm-gap: clamp(14px, 1.8vw, 26px);
  --rm-node: 44px;
}

.roadmap[data-accent="hottray"] {
  --roadmap-accent: #f97316;
  --roadmap-glow: rgba(249, 115, 22, 0.16);
}

.roadmap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.roadmap-head > div:first-child {
  max-width: 60ch;
}

.roadmap-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roadmap-accent);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.roadmap-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}

.roadmap-head h2 {
  margin-bottom: 8px;
}

.roadmap-head p:last-child {
  margin: 0;
  color: var(--ink-2);
}

/* Corridor readout: the launch sequence in one mono line. */
.roadmap-corridor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
}

.roadmap-corridor b {
  color: var(--ink-2);
  font-weight: 500;
}

.roadmap-corridor i {
  color: var(--roadmap-accent);
  font-style: normal;
}

/* Track ------------------------------------------------------------------ */

.roadmap-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rm-gap);
}

.roadmap-phase {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
}

.roadmap-phase:nth-child(1) {
  --rm-fade: 1;
}
.roadmap-phase:nth-child(2) {
  --rm-fade: 0.78;
}
.roadmap-phase:nth-child(3) {
  --rm-fade: 0.58;
}
.roadmap-phase:nth-child(4) {
  --rm-fade: 0.42;
}

/* One rail segment per phase, anchored to the node so it lines up exactly,
   and stretched into the grid gap to meet the next node. */
.roadmap-phase::before {
  content: "";
  position: absolute;
  top: calc(var(--rm-node) / 2 - 1px);
  left: calc(var(--rm-node) + 8px);
  right: calc(8px - var(--rm-gap));
  height: 2px;
  border-radius: 2px;
  background: var(--roadmap-accent);
  opacity: calc(var(--rm-fade) * 0.55);
}

.roadmap-phase:last-child::before {
  display: none;
}

/* Node ------------------------------------------------------------------- */

.roadmap-node {
  position: relative;
  width: var(--rm-node);
  height: var(--rm-node);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--roadmap-accent);
  background: var(--canvas-2);
  border: 1px solid var(--card-edge);
}

.roadmap-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--roadmap-accent);
  opacity: var(--rm-fade);
}

/* The nearest phase gets a halo, and a slow pulse to mark the starting line. */
.roadmap-phase:first-child .roadmap-node {
  box-shadow: 0 0 0 6px var(--roadmap-glow);
}

.roadmap-phase:first-child .roadmap-node::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--roadmap-accent);
  animation: roadmap-pulse 3.2s ease-out infinite;
}

@keyframes roadmap-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* Card ------------------------------------------------------------------- */

.roadmap-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.roadmap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--roadmap-accent), transparent);
  opacity: var(--rm-fade);
}

.roadmap-phase:hover .roadmap-card,
.roadmap-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--roadmap-accent);
  box-shadow: var(--shadow);
}

.roadmap-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roadmap-stage span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.roadmap-stage svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--roadmap-accent);
  opacity: var(--rm-fade);
}

.roadmap-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.roadmap-card > p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.roadmap-markers {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roadmap-markers li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--chip-bg);
}

/* Stacked: the rail rotates to run down the left-hand gutter. */
@media (max-width: 980px) {
  .roadmap-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .roadmap-phase {
    grid-template-columns: var(--rm-node) minmax(0, 1fr);
    gap: 0 clamp(14px, 3vw, 20px);
    align-items: start;
  }

  .roadmap-phase::before {
    top: calc(var(--rm-node) + 8px);
    bottom: calc(8px - var(--rm-gap));
    left: calc(var(--rm-node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-card {
    transition: none;
  }

  .roadmap-phase:hover .roadmap-card,
  .roadmap-card:focus-within {
    transform: none;
  }

  .roadmap-phase:first-child .roadmap-node::before {
    animation: none;
  }
}

@media print {
  .roadmap-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roadmap-phase::before,
  .roadmap-phase:first-child .roadmap-node::before {
    display: none;
  }

  .roadmap-card {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   30. Operating model (about page)

   A research core panel feeding three banded stages, with a return strip that
   closes the loop. Each band draws its own feed line, so the dashes line up
   with the band regardless of how the columns reflow.
   -------------------------------------------------------------------------- */

.opmodel {
  --op-gap: clamp(16px, 2vw, 26px);
  /* Lines up with the stage-card icon column below, so the feed points at it. */
  --op-drop: 37px;
}

/* .section-head zeroes the h2 margin; the lead below it needs the gap back. */
.opmodel .section-head h2 {
  margin-bottom: 10px;
}

/* Research core ---------------------------------------------------------- */

.opmodel-core {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--card-edge);
  background: linear-gradient(150deg, rgba(138, 216, 255, 0.11), rgba(12, 18, 31, 0.9) 58%);
  padding: clamp(20px, 3vw, 34px);
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow);
}

/* Instrument-panel grid, faint enough to stay behind the copy. */
.opmodel-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 100% at 8% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

.opmodel-core > * {
  position: relative;
}

.opmodel-core-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}

.opmodel-core-label svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.opmodel-core h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.opmodel-core p {
  margin: 0;
  max-width: 78ch;
  color: var(--ink-2);
}

.opmodel-inputs {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opmodel-inputs li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(138, 216, 255, 0.28);
  background: rgba(138, 216, 255, 0.07);
}

/* Bands ------------------------------------------------------------------ */

.opmodel-bands {
  list-style: none;
  margin: 0;
  padding: 46px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--op-gap);
}

.opmodel-band {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
}

.opmodel-band:nth-child(1) {
  --op-accent: var(--cyan-deep);
}
.opmodel-band:nth-child(2) {
  --op-accent: var(--brand);
}
.opmodel-band:nth-child(3) {
  --op-accent: var(--violet);
}

/* Feed line dropping out of the research core into this band. */
.opmodel-band::before {
  content: "";
  position: absolute;
  top: -40px;
  left: var(--op-drop);
  width: 0;
  height: 30px;
  border-left: 1px dashed var(--op-accent);
  opacity: 0.55;
}

.opmodel-band::after {
  content: "";
  position: absolute;
  top: -12px;
  left: calc(var(--op-drop) - 4px);
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--op-accent);
  opacity: 0.75;
}

.opmodel-band-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--op-accent);
}

.opmodel-band-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--op-accent), transparent);
  opacity: 0.4;
}

/* Stage cards ------------------------------------------------------------ */

.opmodel-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.opmodel-stage::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 2px;
  border-radius: 2px;
  background: var(--op-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.opmodel-stage:hover {
  transform: translateY(-3px);
  border-color: var(--op-accent);
  box-shadow: var(--shadow);
}

.opmodel-stage:hover::before {
  opacity: 0.85;
}

.opmodel-stage-mark {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-edge);
  background: var(--canvas-2);
  color: var(--op-accent);
}

.opmodel-stage-mark svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.opmodel-stage h4 {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.opmodel-stage h4 b {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--op-accent);
}

.opmodel-stage p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Return strip ----------------------------------------------------------- */

.opmodel-return {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px dashed rgba(138, 216, 255, 0.32);
  background: var(--chip-bg);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.opmodel-return svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--cyan-deep);
}

.opmodel-return b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .opmodel-bands {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 5vw, 38px);
  }

  /* Stacked, only the first band still hangs off the core. */
  .opmodel-band:not(:first-child)::before {
    top: -26px;
    height: 18px;
  }

  .opmodel-band:not(:first-child)::after {
    top: -9px;
  }

  .opmodel-return {
    border-radius: var(--r-lg);
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opmodel-stage {
    transition: none;
  }

  .opmodel-stage:hover {
    transform: none;
  }
}

@media print {
  .opmodel-bands {
    padding-top: 20px;
  }

  .opmodel-band::before,
  .opmodel-band::after {
    display: none;
  }

  .opmodel-stage,
  .opmodel-core {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   31. Engagement journey (resources page)

   Six steps alternating either side of a spine that brightens as it runs from
   the first conversation down to a system in production. Below 820px the
   spine moves to the left gutter and every card lands on the same side.
   -------------------------------------------------------------------------- */

.journey {
  --jr-node: 44px;
  --jr-col: 76px;
  --jr-arm: calc((var(--jr-col) - var(--jr-node)) / 2);
}

.journey .section-head h2 {
  margin-bottom: 10px;
}

/* Start / live markers --------------------------------------------------- */

.journey-marker {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  margin: 0;
  padding: 0 0 0;
}

.journey-marker b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jr-marker, var(--ink-3));
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: var(--canvas-2);
}

.journey-marker b svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.journey-marker span {
  max-width: 52ch;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.journey-marker-start {
  --jr-marker: var(--ink-3);
  margin-bottom: 8px;
}

.journey-marker-end {
  --jr-marker: var(--brand);
  margin-top: 8px;
}

.journey-marker-end b {
  color: var(--brand);
  box-shadow: 0 0 0 5px rgba(102, 184, 255, 0.12);
}

.journey-marker-end span {
  color: var(--ink-2);
}

/* Spine ------------------------------------------------------------------ */

.journey-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 18px 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}

.journey-steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--line), var(--cyan-deep) 45%, var(--brand));
  opacity: 0.55;
}

/* Steps ------------------------------------------------------------------ */

.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--jr-col) minmax(0, 1fr);
  align-items: center;
}

.journey-step:nth-child(odd) .journey-card {
  grid-column: 1;
}

.journey-step:nth-child(even) .journey-card {
  grid-column: 3;
}

.journey-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: relative;
  width: var(--jr-node);
  height: var(--jr-node);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--canvas-2);
  border: 1px solid var(--card-edge);
  box-shadow: 0 0 0 5px var(--canvas);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

.journey-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  opacity: 0.55;
}

.journey-node svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Arm reaching from the card across to the node. */
.journey-step::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--jr-arm);
  height: 1px;
  background: var(--brand);
  opacity: 0.45;
}

.journey-step:nth-child(odd)::after {
  left: calc(50% - var(--jr-col) / 2);
}

.journey-step:nth-child(even)::after {
  right: calc(50% - var(--jr-col) / 2);
}

/* Card ------------------------------------------------------------------- */

.journey-card {
  grid-row: 1;
  display: grid;
  gap: 8px;
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.journey-step:hover .journey-card {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.journey-step:hover .journey-node {
  color: var(--brand-2);
  box-shadow: 0 0 0 5px var(--canvas), 0 0 22px -4px var(--brand);
}

.journey-step-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.journey-card h3 {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.32;
}

.journey-card > p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.journey-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journey-tags li {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--chip-bg);
}

/* Stacked: spine to the left, every card on the same side. */
@media (max-width: 820px) {
  .journey {
    --jr-col: 60px;
  }

  .journey-step {
    grid-template-columns: var(--jr-col) minmax(0, 1fr);
    align-items: start;
  }

  .journey-step:nth-child(odd) .journey-card,
  .journey-step:nth-child(even) .journey-card {
    grid-column: 2;
  }

  .journey-steps::before {
    left: calc(var(--jr-col) / 2 - 1px);
  }

  .journey-node {
    grid-column: 1;
    margin-top: 6px;
  }

  /* Matches the specificity of the alternating desktop rules above, which
     would otherwise keep positioning the odd arms from the centre. */
  .journey-step:nth-child(odd)::after,
  .journey-step:nth-child(even)::after {
    top: calc(6px + var(--jr-node) / 2);
    left: calc(var(--jr-col) - var(--jr-arm));
    right: auto;
  }

  .journey-marker {
    justify-items: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-card,
  .journey-node {
    transition: none;
  }

  .journey-step:hover .journey-card {
    transform: none;
  }
}

@media print {
  .journey-steps::before,
  .journey-step::after {
    display: none;
  }

  .journey-step {
    grid-template-columns: var(--jr-col) minmax(0, 1fr);
  }

  .journey-step:nth-child(odd) .journey-card,
  .journey-step:nth-child(even) .journey-card {
    grid-column: 2;
  }

  .journey-node {
    grid-column: 1;
    box-shadow: none;
  }

  .journey-card {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   32. Request path (security page)

   A request entering at the top and narrowing through each control layer
   before it reaches the application, with a dot travelling down the joins so
   the stack reads as traffic rather than a list.
   -------------------------------------------------------------------------- */

.secpath {
  --sp-step: 16px;
  --sp-join: 24px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--card-edge);
  background: linear-gradient(180deg, rgba(102, 184, 255, 0.07), rgba(12, 18, 31, 0.92) 42%);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--shadow);
}

.secpath::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

/* Entry and destination caps -------------------------------------------- */

.secpath-cap {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  margin: 0;
}

.secpath-cap b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: var(--canvas-2);
  color: var(--ink-3);
}

.secpath-cap b svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.secpath-cap span {
  font-size: 0.86rem;
  color: var(--ink-3);
  max-width: 56ch;
}

.secpath-core {
  margin-top: var(--sp-join);
}

.secpath-core b {
  color: var(--cyan-deep);
  box-shadow: 0 0 0 6px rgba(138, 216, 255, 0.1);
}

.secpath-core span {
  color: var(--ink-2);
}

/* Layers ----------------------------------------------------------------- */

.secpath-layers {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.secpath-layer {
  position: relative;
  width: calc(100% - var(--sp-i) * var(--sp-step) * 2);
  margin: var(--sp-join) auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.secpath-layer:nth-child(1) {
  --sp-i: 0;
  --sp-lit: 0.4;
}
.secpath-layer:nth-child(2) {
  --sp-i: 1;
  --sp-lit: 0.52;
}
.secpath-layer:nth-child(3) {
  --sp-i: 2;
  --sp-lit: 0.64;
}
.secpath-layer:nth-child(4) {
  --sp-i: 3;
  --sp-lit: 0.76;
}
.secpath-layer:nth-child(5) {
  --sp-i: 4;
  --sp-lit: 0.88;
}
.secpath-layer:nth-child(6) {
  --sp-i: 5;
  --sp-lit: 1;
}

.secpath-layer:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

/* Join between one layer and the next, plus the packet running down it. */
.secpath-layer::before,
.secpath-core::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: calc(var(--sp-join) * -1);
  width: 2px;
  height: var(--sp-join);
  background: var(--brand);
  opacity: 0.3;
}

.secpath-layer::after,
.secpath-core::after {
  content: "";
  position: absolute;
  left: calc(50% - 3px);
  top: calc(var(--sp-join) * -1);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px 1px var(--brand);
  animation: secpath-packet 2.8s linear infinite;
  animation-delay: calc(var(--sp-i, 6) * 0.16s);
}

@keyframes secpath-packet {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateY(calc(var(--sp-join) - 6px));
    opacity: 0;
  }
}

.secpath-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--canvas-2);
  border: 1px solid var(--card-edge);
}

.secpath-mark svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.secpath-layer h3 {
  margin: 0 0 2px;
  font-size: 0.97rem;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.secpath-layer h3 b {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--brand);
  opacity: calc(0.45 + var(--sp-lit) * 0.55);
}

.secpath-layer p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.secpath-value {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--brand);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: rgba(102, 184, 255, 0.07);
  opacity: calc(0.5 + var(--sp-lit) * 0.5);
}

/* Disclosure endpoint ---------------------------------------------------- */

.sec-endpoint {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.sec-endpoint li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.sec-endpoint li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sec-endpoint b {
  min-width: 13ch;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sec-endpoint span {
  color: var(--ink-2);
  word-break: break-word;
}

/* Numbered "what to include" list. */
.sec-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: sec-step;
}

.sec-steps li {
  counter-increment: sec-step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--ink-2);
}

.sec-steps li::before {
  content: counter(sec-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan-deep);
  border: 1px solid rgba(138, 216, 255, 0.3);
  background: rgba(138, 216, 255, 0.07);
  border-radius: 9px;
  padding: 5px 8px;
  line-height: 1;
}

.sec-steps strong {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}

@media (max-width: 760px) {
  .secpath {
    --sp-step: 4px;
  }

  .secpath-layer {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
  }

  .secpath-value {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secpath-layer::after,
  .secpath-core::after {
    animation: none;
    opacity: 0.6;
    transform: translateY(calc(var(--sp-join) / 2 - 3px));
  }

  .secpath-layer {
    transition: none;
  }
}

@media print {
  .secpath {
    box-shadow: none;
    --sp-step: 0px;
  }

  .secpath::before,
  .secpath-layer::after,
  .secpath-core::after {
    display: none;
  }

  .secpath-layer {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   33. Legal pages: meta, plain-language summary, sidebar layout

   Builds on the .prose and .toc rails in section 21, which were defined but
   never used by a page.
   -------------------------------------------------------------------------- */

.legal-meta {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-meta li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
}

.legal-meta b {
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Plain-language summary ------------------------------------------------- */

.glance {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--card-edge);
  background: linear-gradient(160deg, rgba(138, 216, 255, 0.1), rgba(12, 18, 31, 0.9) 60%);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow);
}

.glance::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 6% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

.glance > * {
  position: relative;
}

.glance-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}

.glance-label svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.glance h2 {
  margin: 0 0 6px;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.glance > p {
  margin: 0;
  max-width: 78ch;
  color: var(--ink-2);
}

.glance-grid {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.glance-grid li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
}

.glance-grid svg {
  width: 20px;
  height: 20px;
  fill: var(--cyan-deep);
}

.glance-grid strong {
  font-size: 0.93rem;
  color: var(--ink);
}

.glance-grid span {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Reminder that the summary is not the policy. */
.glance-note {
  margin: 18px 0 0;
  font-size: 0.84rem;
  color: var(--ink-3);
}

/* Sidebar layout --------------------------------------------------------- */

.legal-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.legal-body {
  min-width: 0;
}

/* Anchored headings get a scroll offset clear of the sticky header. */
.prose h2[id] {
  scroll-margin-top: 96px;
}

.legal-related {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Matches the specificity of the .prose link rule in section 6, which would
   otherwise underline these pills. */
.legal-related a:not(.button):not(.link-arrow) {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--ink-2);
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--chip-bg);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.legal-related a:not(.button):not(.link-arrow):hover {
  color: var(--ink);
  border-color: var(--brand);
}

.legal-related svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0.7;
}

@media (max-width: 1040px) {
  .glance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .glance-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .toc,
  .glance::before {
    display: none;
  }

  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .glance,
  .prose h2 {
    break-inside: avoid;
  }

  .glance {
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   34. Permitted-use panel (terms page)

   A do / do-not split for the one section of the terms that is genuinely two
   opposed lists. Extends the .list variants in section 13 with a deny mark.
   -------------------------------------------------------------------------- */

.list-deny li::before {
  border-color: rgba(248, 113, 113, 0.38);
  background-color: rgba(248, 113, 113, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 4px;
}

.rules > div {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--card-edge);
  background: var(--card-bg);
}

.rules > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--rule-accent);
}

.rules-allow {
  --rule-accent: #34d399;
}

.rules-deny {
  --rule-accent: #f87171;
}

.rules h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rule-accent);
}

.rules h3 svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 720px) {
  .rules {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .rules > div {
    break-inside: avoid;
  }
}