/* ─────────────────────────────────────────────────────────────
   Solid — design system
   Dark-first, near-black canvas. Inter variable. Elevation scale.
   Box-shadow hairlines, pill buttons, solidify-on-hover.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Canvas & elevation */
  --color-bg-level-0: #08090A;
  --color-bg-level-1: #0F1011;
  --color-bg-level-2: #141516;
  --color-bg-level-3: #191A1B;
  --color-bg-secondary: #1C1C1F;
  --color-bg-tertiary: #232326;
  --color-bg-marketing: #010102;
  --color-bg-translucent: rgba(255, 255, 255, 0.05);

  /* Text — Linear-style four-tier ramp: primary > secondary > tertiary > quaternary.
     Secondary is reserved for slightly-dimmed-but-still-prominent copy
     (lead paragraphs, body on hero); tertiary is the default body gray. */
  --color-text-primary: #F7F8F8;
  --color-text-secondary: #D0D6E0;
  --color-text-tertiary: #8A8F98;
  --color-text-quaternary: #62666D;

  /* Borders */
  --color-border-primary: #23252A;
  --color-border-secondary: #34343A;
  --color-border-tertiary: #3E3E44;
  --color-border-translucent: rgba(255, 255, 255, 0.05);
  --color-border-translucent-strong: rgba(255, 255, 255, 0.08);

  /* Brand / accent */
  --color-brand: #4ea16a;
  --color-accent: #4ea16a;
  --color-accent-hover: #6BB885;
  --color-accent-dim: #2D6B44;
  --color-accent-tint: #0A1A0E;

  /* Links */
  --color-link: #6BB885;
  --color-link-hover: #F7F8F8;

  /* Buttons */
  --color-button-invert-bg: #E5E5E6;
  --color-button-invert-bg-hover: #FFFFFF;

  /* Status */
  --color-red: #EB5757;
  --color-orange: #FC7840;
  --color-green: #27A644;

  /* Line / tint */
  --color-line-primary: #37393A;
  --color-line-secondary: #202122;
  --color-line-tertiary: #18191A;

  /* Radii */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-rounded: 9999px;
  --radius-circle: 50%;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Motion */
  --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-long: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 0.10s;
  --speed-base: 0.25s;
  --speed-slow: 0.45s;

  /* Fonts */
  --font-body: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --container: min(1200px, calc(100vw - 3rem));

  /* Signature shadows */
  --shadow-chisel:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.60),
    0 4px 4px 0 rgba(0, 0, 0, 0.10);

  --shadow-primary-chip:
    0 8px 2px 0 rgba(0, 0, 0, 0.00),
    0 5px 2px 0 rgba(0, 0, 0, 0.01),
    0 3px 2px 0 rgba(0, 0, 0, 0.04),
    0 1px 1px 0 rgba(0, 0, 0, 0.07),
    0 0 1px 0 rgba(0, 0, 0, 0.08);

  --shadow-card-inset:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.3);

  --shadow-hero-terminal:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 40px 60px -20px rgba(0, 0, 0, 0.6);

  /* Card-hover lift (Linear /customers pattern) */
  --shadow-large:
    0 16px 32px -12px rgba(0, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.30);

  /* Surface overlays & highlights (theme-aware) */
  --color-surface-highlight: rgba(255, 255, 255, 0.03);
  --color-surface-highlight-strong: rgba(255, 255, 255, 0.05);
  --color-surface-noise-opacity: 0.16;

  /* Header */
  --color-header-bg: rgba(8, 9, 10, 0.6);

  /* Hero ambience */
  --color-hero-glow-top: rgba(255, 255, 255, 0.06);
  --color-hero-glow-bottom: rgba(0, 0, 0, 0.26);
  --color-grid-major: rgba(255, 255, 255, 0.03);
  --color-grid-minor: rgba(255, 255, 255, 0.012);

  /* Muted overlay text (used on elevated/dark-tinted surfaces) */
  --color-text-overlay-dim: rgba(255, 255, 255, 0.6);
  --color-text-overlay-muted: rgba(255, 255, 255, 0.5);
  --color-text-overlay-faint: rgba(255, 255, 255, 0.4);
  --color-text-on-accent-bar: rgba(255, 255, 255, 0.85);

  /* Selection mix base */
  --color-selection-mix: black;

  /* Accent overlays */
  --color-accent-overlay-weak: rgba(78, 161, 106, 0.08);
  --color-accent-overlay-soft: rgba(78, 161, 106, 0.12);
  --color-accent-overlay-strong: rgba(78, 161, 106, 0.25);
  --color-accent-border-soft: rgba(78, 161, 106, 0.35);
  --color-accent-border-medium: rgba(78, 161, 106, 0.40);
  --color-accent-ring: rgba(78, 161, 106, 0.20);

  /* Cost / TCO visualization ramps
     Legacy: stone gradient (light/mid/dark). Solid: green gradient.
     Each bg has a paired text token so contrast stays correct when the
     ramp inverts (dark-on-dark → light-on-light). */
  --color-scale-legacy-1: #52504D;
  --color-scale-legacy-2: #A8A5A1;
  --color-scale-legacy-3: #D6D3CE;
  --color-scale-legacy-1-text: rgba(255, 255, 255, 0.85);
  --color-scale-legacy-2-text: #1f1f22;
  --color-scale-legacy-3-text: #1f1f22;
  --color-scale-solid-1: #162E1A;
  --color-scale-solid-2: #1E4824;

  /* Status dots (traffic-light) — identity colors, unchanged across themes */
  --color-status-red: #ef4444;
  --color-status-amber: #eab308;

  /* Code syntax highlighting */
  --color-code-key: #A5B4FC;
  --color-code-string: #7DD3A5;
  --color-code-num: #FBBF24;

  /* Logo wordmark (visual-only; SVG is the actual logo) */
  --color-logo-wordmark: #F4F5F8;

  /* Logo image filter — invert dark SVG fills to light grey for dark mode */
  --logo-filter: invert(1) brightness(0.88);

  /* Card surface — elevates above the canvas. Uses Linear's Note-box
     value (#1C1C1F) so cards read as distinct surfaces against the near-black
     canvas. In light mode this becomes pure white on warm paper. */
  --color-surface-card: #1C1C1F;
  --color-surface-card-hover: #232326;
}

/* ───────────────────────────────────────────────────────────
   Light theme overrides
   Activated by `<html data-theme="light">`. Only tokens are
   overridden — all component rules continue to reference the
   same var() references, so layout and structure are identical.
   ─────────────────────────────────────────────────────────── */

[data-theme="light"] {
  /* Canvas & elevation — pure-white canvas with subtly tinted card surfaces.
     Card vs canvas now sits at ~6% lightness delta (vs ~3% before) so card
     edges read clearly without resorting to heavy borders or shadows. */
  --color-bg-level-0: #FFFFFF;
  --color-bg-level-1: #EEEFF1;
  --color-bg-level-2: #E6E7EA;
  --color-bg-level-3: #DEDFE3;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #FAFAFA;
  --color-bg-marketing: #EEEFF1;
  --color-bg-translucent: rgba(0, 0, 0, 0.04);

  /* Text — four-tier ramp; secondary is lighter than tertiary so dimmed
     lead copy reads as softer than default body copy (mirrors dark mode). */
  --color-text-primary: #282a30;
  --color-text-secondary: #282a30;
  --color-text-tertiary: #3c4149;
  --color-text-quaternary: #A0A3A8;

  /* Borders — pure neutral black at low opacity */
  --color-border-primary: rgba(0, 0, 0, 0.08);
  --color-border-secondary: rgba(0, 0, 0, 0.13);
  --color-border-tertiary: rgba(0, 0, 0, 0.20);
  --color-border-translucent: rgba(0, 0, 0, 0.09);
  --color-border-translucent-strong: rgba(0, 0, 0, 0.16);

  /* Brand / accent */
  --color-brand: #2D6B44;
  --color-accent: #2D6B44;
  --color-accent-hover: #245738;
  --color-accent-dim: #1A3F2A;
  --color-accent-tint: rgba(78, 161, 106, 0.10);

  /* Links */
  --color-link: #2D6B44;
  --color-link-hover: #111111;

  /* Buttons */
  --color-button-invert-bg: #111111;
  --color-button-invert-bg-hover: #000000;

  /* Status */
  --color-red: #DC2626;
  --color-orange: #EA580C;
  --color-green: #16A34A;

  /* Line / tint */
  --color-line-primary: rgba(0, 0, 0, 0.08);
  --color-line-secondary: rgba(0, 0, 0, 0.04);
  --color-line-tertiary: #F0F0F0;

  /* Shadows — neutral black, crisp and minimal */
  --shadow-chisel:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 0 rgba(0, 0, 0, 0.06);

  --shadow-primary-chip:
    0 3px 6px 0 rgba(0, 0, 0, 0.08),
    0 1px 2px 0 rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.05);

  --shadow-card-inset:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.06);

  --shadow-hero-terminal:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 40px 70px -20px rgba(0, 0, 0, 0.16);

  /* Card-hover lift (light variant — softer, near-black) */
  --shadow-large:
    0 16px 32px -12px rgba(0, 0, 0, 0.14),
    0 4px 10px -2px rgba(0, 0, 0, 0.08);

  /* Surface overlays */
  --color-surface-highlight: rgba(0, 0, 0, 0.02);
  --color-surface-highlight-strong: rgba(0, 0, 0, 0.04);
  --color-surface-noise-opacity: 0.02;

  /* Header — matches canvas with blur */
  --color-header-bg: rgba(255, 255, 255, 0.85);

  /* Hero ambience */
  --color-hero-glow-top: rgba(78, 161, 106, 0.05);
  --color-hero-glow-bottom: rgba(0, 0, 0, 0.02);
  --color-grid-major: rgba(0, 0, 0, 0.05);
  --color-grid-minor: rgba(0, 0, 0, 0.02);

  /* Muted overlay text */
  --color-text-overlay-dim: rgba(0, 0, 0, 0.70);
  --color-text-overlay-muted: rgba(0, 0, 0, 0.50);
  --color-text-overlay-faint: rgba(0, 0, 0, 0.38);
  --color-text-on-accent-bar: rgba(255, 255, 255, 0.98);

  --color-selection-mix: white;

  /* Accent overlays — same hue as dark mode (#4ea16a), opacities tuned for white backgrounds */
  --color-accent-overlay-weak: rgba(78, 161, 106, 0.10);
  --color-accent-overlay-soft: rgba(78, 161, 106, 0.15);
  --color-accent-overlay-strong: rgba(78, 161, 106, 0.26);
  --color-accent-border-soft: rgba(78, 161, 106, 0.36);
  --color-accent-border-medium: rgba(78, 161, 106, 0.50);
  --color-accent-ring: rgba(78, 161, 106, 0.24);

  /* Scale ramps — neutral gradient, darker = bigger on light bg */
  --color-scale-legacy-1: #D1D5DB;
  --color-scale-legacy-2: #6B7280;
  --color-scale-legacy-3: #1F2937;
  --color-scale-legacy-1-text: #1F2937;
  --color-scale-legacy-2-text: #FFFFFF;
  --color-scale-legacy-3-text: #FFFFFF;
  --color-scale-solid-1: #86EFAC;
  --color-scale-solid-2: #22C55E;

  /* Code syntax */
  --color-code-key: #7C3AED;
  --color-code-string: #15803D;
  --color-code-num: #D97706;

  /* Logo wordmark */
  --color-logo-wordmark: #222326;

  /* Logo image filter — SVG fills are already #222326, no filter needed */
  --logo-filter: none;

  /* Card surface — pure white on neutral gray canvas */
  --color-surface-card: #FFFFFF;
  --color-surface-card-hover: #FAFAFA;
}

/* ─── Reset / base ─── */

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

html {
  scroll-behavior: auto;
  background: var(--color-bg-level-0);
}

body {
  margin: 0;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
  font-feature-settings: "cv01", "ss03";
  color: var(--color-text-tertiary);
  background: var(--color-bg-level-0);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="light"] body { color: var(--color-text-tertiary); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--color-surface-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

main,
.site-header,
.footer {
  position: relative;
  z-index: 1;
}

::selection {
  background-color: #4ea16a;
  color: #ffffff;
}

[data-theme="light"] ::selection {
  background-color: #2D6B44;
  color: #ffffff;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease-primary);
}

a:hover { color: var(--color-link-hover); }

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

.container {
  width: var(--container);
  margin: 0 auto;
}

/* ─── Typography ─── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.022em;
  font-weight: 510;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4rem); /* ~40-64px, title-6→8 */
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem); /* ~28-40px */
  line-height: 1.1;
  max-width: 30ch;
}

h3 {
  font-size: 1.5rem; /* 24px — subheader */
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.33;
  margin-bottom: 0.5rem;
  color: rgb(208, 214, 224);
}

[data-theme="light"] h3 {
  color: var(--color-text-primary);
}

h4 {
  font-size: 1rem;
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.4;
}

p { margin: 0; }

.lead {
  color: var(--color-text-tertiary);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  max-width: 56ch;
  margin: 1.25rem auto 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 510;
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-feature-settings: "tnum" 1;
}

/* ─── Header / nav ─── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border-translucent);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  min-height: 64px;
}

.brand,
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
  filter: var(--logo-filter);
}

.logo-lockup-img {
  height: 25.2px;
  max-height: 25.2px;
  max-width: 86.4px;
  width: auto;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
  filter: var(--logo-filter);
}

.logo-wordmark {
  font-family: var(--font-body);
  font-weight: 590;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-logo-wordmark);
}

.logo-dot {
  color: var(--color-logo-wordmark);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-rounded);
  color: var(--color-text-tertiary);
  font-weight: 400;
  text-decoration: none;
  transition:
    color var(--speed-fast) var(--ease-primary),
    background-color var(--speed-fast) var(--ease-primary),
    transform var(--speed-fast) var(--ease-primary);
}

.site-nav a:not(.nav-cta):hover {
  color: var(--color-text-primary);
  background: var(--color-border-translucent-strong);
}

.site-nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--color-text-primary);
}

[data-theme="light"] .site-nav a[aria-current="page"]:not(.nav-cta) {
  background: rgba(0, 0, 0, 0.07);
}

.nav-cta {
  margin-left: 8px;
  height: 32px;
  padding: 0 14px !important;
  background: var(--color-button-invert-bg) !important;
  color: var(--color-bg-level-0) !important;
  font-weight: 510 !important;
  border-radius: var(--radius-rounded) !important;
  box-shadow: var(--shadow-primary-chip);
  transition:
    background-color var(--speed-base) var(--ease-primary),
    box-shadow var(--speed-base) var(--ease-primary),
    transform var(--speed-fast) var(--ease-primary);
}

.nav-cta:hover {
  background: var(--color-button-invert-bg-hover) !important;
  color: var(--color-bg-level-0) !important;
}

/* ─── Theme toggle ─── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-rounded);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition:
    color var(--speed-fast) var(--ease-primary),
    background-color var(--speed-fast) var(--ease-primary),
    transform var(--speed-fast) var(--ease-primary);
}

.theme-toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-border-translucent-strong);
}

.theme-toggle:active { transform: scale(0.94); }

.theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Show the icon of the mode the user can switch TO.
   Default (dark mode) → show sun (click to go light).
   Light mode → show moon (click to go dark). */
.theme-toggle .theme-toggle-sun  { display: block; }
.theme-toggle .theme-toggle-moon { display: none; }

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

/* ─── Hamburger ─── */

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle:hover { background: var(--color-border-translucent-strong); }

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Buttons ─── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  font: 510 13px/1 var(--font-body);
  letter-spacing: -0.011em;
  border-radius: var(--radius-rounded);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--speed-base) var(--ease-primary),
    color var(--speed-base) var(--ease-primary),
    box-shadow var(--speed-base) var(--ease-primary),
    transform var(--speed-fast) var(--ease-primary);
}

.button:active,
.nav-cta:active,
.site-nav a:active,
.cost-tab:active,
.realtime-tab:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--color-button-invert-bg);
  color: var(--color-bg-level-0);
  box-shadow: var(--shadow-primary-chip);
}

.button-primary:hover {
  background: var(--color-button-invert-bg-hover);
  color: var(--color-bg-level-0);
}

.button-primary::after { content: ""; }

.button-secondary {
  background: var(--color-bg-translucent);
  color: var(--color-accent);
  box-shadow: var(--shadow-chisel);
}

.button-secondary:hover {
  background: var(--color-bg-level-3);
  color: var(--color-accent);
}

/* Light mode: secondary CTA reads as a dark pill with light text — stronger
   affordance against the darker warm stone canvas. */
[data-theme="light"] .button-secondary {
  background: #1C1B1B;
  color: #FCF9F8;
}

[data-theme="light"] .button-secondary:hover {
  background: #000;
  color: #FFFFFF;
}

.button-secondary::after { content: "→"; font-size: 1em; transition: transform var(--speed-base) var(--ease-primary); }
.button-secondary:hover::after { transform: translateX(2px); }

/* ─── Footer ─── */

.footer {
  background: var(--color-bg-marketing);
  padding: 48px 0 36px;
  border-top: 1px solid var(--color-border-primary);
}

.footer-bottom .container {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-primary);
}

.footer-brand .logo-mark {
  width: 38.016px;
  height: 38.016px;
}

.footer-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.footer-nav a {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.footer-nav a:hover {
  color: var(--color-text-primary);
}

.footer-legal {
  margin: 0;
  margin-left: -8pt;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.footer-legal-link {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.footer-legal-link-push { margin-left: auto; }

.footer-legal-link:hover { color: var(--color-text-primary); }

/* ─── Focus ring ─── */

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

button:focus-visible,
a:focus-visible { outline-offset: 3px; }

/* ─── Responsive ─── */

@media (max-width: 980px) {
  :root { --container: calc(100vw - 2.5rem); }

  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-bg-level-1);
    border-bottom: 1px solid var(--color-border-primary);
    flex-direction: column;
    gap: 0;
    padding: 16px 24px 24px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--speed-base) var(--ease-primary), opacity var(--speed-base) var(--ease-primary), visibility 0s linear var(--speed-base);
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--speed-base) var(--ease-primary), opacity var(--speed-base) var(--ease-primary), visibility 0s;
  }

  .site-nav a {
    width: 100%;
    height: 44px;
    font-size: 15px;
    border-radius: var(--radius-8);
  }

  .nav-cta {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
  }

  .theme-toggle {
    margin-left: 0;
    margin-top: 40px;
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 10px;
    font: 400 15px/1 var(--font-body);
    border-radius: var(--radius-8);
    color: var(--color-text-tertiary);
  }

  .theme-toggle::after {
    content: "Toggle theme";
  }
}

@media (max-width: 720px) {
  .container { width: calc(100vw - 2rem); }
  h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
}

/* ═══════════════════════════════════════════════════════════
   Developer portal — components on top of the Solid design
   system above. Everything below is specific to
   developer.solidbt.com.
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero ─── */

.dev-hero {
  padding: 96px 0 72px;
  text-align: center;
}

.dev-hero h1 { max-width: 20ch; margin: 0 auto; }

.dev-hero .lead { margin-left: auto; margin-right: auto; }

.dev-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ─── Sections ─── */

.dev-section { padding: 56px 0; }

.dev-section + .dev-section { border-top: 1px solid var(--color-line-secondary); }

.dev-section-head { margin-bottom: 2rem; }

.dev-section-head h2 { margin-bottom: 0.5rem; }

.dev-section-head p {
  color: var(--color-text-tertiary);
  max-width: 60ch;
}

/* ─── Resource cards (demo / API docs) ─── */

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

.resource-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius-12);
  background: var(--color-bg-level-1);
  box-shadow: var(--shadow-card-inset);
  transition: box-shadow var(--speed-base) var(--ease-primary),
    transform var(--speed-base) var(--ease-primary);
}

.resource-card:hover {
  box-shadow: var(--shadow-large), var(--shadow-card-inset);
  transform: translateY(-2px);
}

[data-theme="light"] .resource-card { background: var(--color-surface-card); }

.resource-card h3 { margin-bottom: 0; }

.resource-card p {
  color: var(--color-text-tertiary);
  flex: 1;
}

.resource-card .card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-8);
  background: var(--color-accent-overlay-soft);
  color: var(--color-accent);
}

.resource-card .card-icon svg { width: 18px; height: 18px; }

.resource-card .button { align-self: flex-start; }

.card-locked-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-quaternary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Highlighted feature inside a resource card (e.g. demo developer mode). */
.card-feature {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-8);
  background: var(--color-accent-overlay-weak);
  border: 1px solid var(--color-accent-border-soft);
}

.card-feature-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.card-feature p {
  flex: none;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ─── Access form ─── */

.access-form-wrap {
  max-width: 560px;
}

.access-form {
  display: grid;
  gap: 16px;
}

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

.form-field { display: grid; gap: 6px; }

.form-field label {
  font-size: 13px;
  font-weight: 510;
  color: var(--color-text-secondary);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: 400 14px/1.5 var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg-translucent);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-8);
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--speed-fast) var(--ease-primary),
    box-shadow var(--speed-fast) var(--ease-primary);
}

.form-field textarea { resize: vertical; min-height: 88px; }

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent-border-medium);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-quaternary);
}

.form-hint {
  font-size: 12px;
  color: var(--color-text-quaternary);
}

.form-error {
  padding: 10px 14px;
  border-radius: var(--radius-8);
  background: rgba(235, 87, 87, 0.08);
  border: 1px solid rgba(235, 87, 87, 0.35);
  color: var(--color-red);
  font-size: 13px;
}

/* ─── Invite: share box (signed-in landing) and join form ─── */

/* The invite section sits between the hero and the resource cards:
   centered like the hero, and no divider against the cards below. */
#invite {
  text-align: center;
  padding-top: 0; /* the hero's bottom padding already provides the gap */
}

#invite .dev-section-head h2,
#invite .dev-section-head p {
  margin-left: auto;
  margin-right: auto;
}

#invite + .dev-section { border-top: 0; }

.share-box {
  display: flex;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.share-url {
  flex: 1;
  min-width: 0;
  font: 400 13px/1.5 var(--font-mono);
  color: var(--color-text-secondary);
  background: var(--color-bg-translucent);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-8);
  padding: 0 12px;
  outline: none;
}

.share-url:focus { border-color: var(--color-accent-border-medium); }

.invite-form {
  max-width: 400px;
  margin: 2rem auto 0;
  text-align: left;
}

.invite-form .button { width: 100%; justify-content: center; }

.invite-join .form-error { margin-top: 1.5rem; }

/* ─── Notice pages (check email / verified / link expired) ─── */

.notice-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 112px 0 96px;
  text-align: center;
}

/* The shared .container is viewport-sized; inside the narrow notice
   column it must not force its width or the content lands off-center. */
.notice-page .container { width: auto; }

.notice-page .notice-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--color-accent-overlay-soft);
  color: var(--color-accent);
}

.notice-page .notice-icon svg { width: 22px; height: 22px; }

.notice-page h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }

.notice-page p {
  margin-top: 1rem;
  color: var(--color-text-tertiary);
}

.notice-page .notice-mail {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

.notice-page .button { margin-top: 2rem; }

/* ─── Access badge (shown when signed in) ─── */

.access-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  background: var(--color-accent-overlay-weak);
  border: 1px solid var(--color-accent-border-soft);
  border-radius: var(--radius-rounded);
  padding: 6px 14px;
}

.access-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
}

/* ─── Admin ─── */

.admin-page { padding: 48px 0 96px; }

.admin-table-wrap {
  margin-top: 2rem;
  overflow-x: auto;
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card-inset);
  background: var(--color-bg-level-1);
}

[data-theme="light"] .admin-table-wrap { background: var(--color-surface-card); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 510;
  color: var(--color-text-quaternary);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-primary);
}

.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-line-secondary);
  color: var(--color-text-tertiary);
  vertical-align: top;
}

.admin-table tr:last-child td { border-bottom: 0; }

.admin-table td.cell-primary { color: var(--color-text-primary); }

.admin-table .invited-by {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quaternary);
}

.status-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-rounded);
}

.status-pill.is-verified {
  color: var(--color-green);
  background: var(--color-accent-overlay-weak);
  border: 1px solid var(--color-accent-border-soft);
}

.status-pill.is-pending {
  color: var(--color-orange);
  background: rgba(252, 120, 64, 0.08);
  border: 1px solid rgba(252, 120, 64, 0.35);
}

.status-pill.is-revoked {
  color: var(--color-red);
  background: rgba(235, 87, 87, 0.08);
  border: 1px solid rgba(235, 87, 87, 0.35);
}

.admin-action-btn {
  font: 510 12px/1 var(--font-body);
  color: var(--color-text-tertiary);
  background: var(--color-bg-translucent);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-rounded);
  padding: 6px 12px;
  cursor: pointer;
  transition: color var(--speed-fast) var(--ease-primary),
    border-color var(--speed-fast) var(--ease-primary);
}

.admin-action-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-tertiary);
}

.admin-action-btn.is-danger:hover {
  color: var(--color-red);
  border-color: rgba(235, 87, 87, 0.5);
}

/* ─── Responsive ─── */

@media (max-width: 860px) {
  .resource-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .dev-hero { padding: 64px 0 48px; }
}