/* ==========================================================
   SomatiX — Main Stylesheet
   Direction: Electric Anatomy (Palette A + Coral)
   Theme: Light #F8FAFF (soft ice) / Dark #0B1320 (deep navy)
   Accents: #007BFF (electric blue) / #00D1FF (bright cyan)
   Support: #12F7D6 (motion mint) / #FF6B6B (coral)
========================================================== */

:root {
  --bg: #f8faff;
  --bg-elev: #ffffff;
  --bg-sunken: #eef4ff;
  --bg-deeper: #dce6ff;
  --ink: #0b1320;
  --ink-soft: #253247;
  --ink-mute: #5a6678;
  --line: #d7e2f0;
  --line-soft: #e8eef8;
  --accent: #007bff;
  --accent-2: #00d1ff;
  --accent-3: #12f7d6;
  --accent-coral: #ff6b6b;
  --accent-soft: #dceeff;
  --accent-tint: #eaf6ff;
  --accent-deep: #005fcc;
  --coral-soft: #ffe2e2;
  --coral-tint: #fff0f0;
  --coral-deep: #d94a4a;
  --secondary-green: #12f7d6;
  --secondary-olive: #00d1ff;
  --ink-on-accent: #ffffff;
  --ink-on-dark: #f8faff;
  --line-accent: #007bff;
  --accent-gradient: linear-gradient(135deg, #007bff 0%, #00d1ff 55%, #12f7d6 100%);
  /* Accessible brand color for TEXT on light surfaces (deep blue keeps AA on white/ice).
     Electric blue (--accent) is for fills/borders/backgrounds only, never small body text on light. */
  --accent-text: #005fcc;
  --accent-text-grad: linear-gradient(135deg, #005fcc 0%, #007bff 100%);
  /* Flat, editorial language (matches the home v2): near-zero shadows and no
     coloured glows — separation comes from hairline borders, not lift. */
  --shadow-sm: 0 1px 2px rgba(11,19,32,0.05);
  --shadow-md: 0 1px 2px rgba(11,19,32,0.05);
  --shadow-lg: 0 1px 3px rgba(11,19,32,0.06);
  --shadow-accent: 0 1px 2px rgba(11,19,32,0.05);
  --shadow-cyan: 0 1px 2px rgba(11,19,32,0.05);
  --shadow-coral: 0 1px 2px rgba(11,19,32,0.05);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Same left/right edge as the home header. */
  --gut: clamp(20px, 4.5vw, 112px);
  --t-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 560ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
[data-theme="dark"] {
  --bg: #0b1320;
  --bg-elev: #101b2a;
  --bg-sunken: #07101c;
  --bg-deeper: #050b14;
  --ink: #f8faff;
  --ink-soft: #c8d3e3;
  --ink-mute: #7d8a9e;
  --line: #233044;
  --line-soft: #18243a;
  --accent: #007bff;
  --accent-2: #00d1ff;
  --accent-3: #12f7d6;
  --accent-coral: #ff6b6b;
  --accent-soft: #00d1ff;
  --accent-tint: rgba(0,123,255,0.14);
  --accent-deep: #12f7d6;
  --coral-soft: #ff6b6b;
  --coral-tint: rgba(255,107,107,0.14);
  --coral-deep: #ff8a8a;
  --secondary-green: #12f7d6;
  --secondary-olive: #00d1ff;
  --ink-on-accent: #ffffff;
  --ink-on-dark: #f8faff;
  --line-accent: #007bff;
  --accent-gradient: linear-gradient(135deg, #007bff 0%, #00d1ff 55%, #12f7d6 100%);
  /* On dark surfaces bright cyan is the most legible brand text color. */
  --accent-text: #00d1ff;
  --accent-text-grad: linear-gradient(135deg, #00d1ff 0%, #12f7d6 100%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6), 0 30px 100px rgba(0,0,0,0.4);
  --shadow-accent: 0 8px 32px rgba(0,123,255,0.32), 0 2px 8px rgba(0,123,255,0.2);
  --shadow-cyan: 0 18px 52px rgba(0,209,255,0.22);
  --shadow-coral: 0 18px 44px rgba(255,107,107,0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--t-med), color var(--t-med);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
::selection { background: var(--accent); color: var(--ink-on-accent); }

.serif { font-family: var(--font-display); font-variation-settings: "opsz" 144; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { border-color: var(--ink-soft); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Flat solid accent for primary/accent — no gradient, no glow (home language). */
.btn-primary { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--ink-on-accent); }
.btn-accent { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-sunken); border-color: var(--line); }
.btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Pages */
.page { display: none; min-height: 100vh; }
.page.active { display: block; animation: pageIn 600ms cubic-bezier(0.32, 0.72, 0.24, 1); }
/* Home flows to its content height so the footer sits right below it
   (no forced full-viewport gap now that the model-picker section is gone). */
#page-home { min-height: 0; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Top nav */
/* Identical to the home header (.hdr): same edge, padding, gap and gradient
   fade. Kept sticky (not fixed) so page content below isn't overlapped. */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--gut);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}
.logo {
  cursor: pointer;
  display: flex; align-items: center;
  background: none; border: none; padding: 0;
}
.logo .logo-mark { height: clamp(24px, 1.45vw, 34px); width: auto; }
/* One wordmark per color mode: Main (dark text) on light, Inverse (light text) on dark.
   Scoped under .logo so these win over the .logo .logo-mark sizing rule. */
.logo .logo-main { display: none; }
.logo .logo-inverse { display: block; }
[data-theme="light"] .logo .logo-main { display: block; height: clamp(24px, 1.45vw, 34px); }
[data-theme="light"] .logo .logo-inverse { display: none; }

/* Brand cluster + Beta badge */
.nav-brand { display: flex; align-items: center; gap: 12px; }
/* Exactly the home header Beta badge. Cyan on dark; a deeper teal on light so
   the 10px text keeps AA contrast (the home does the same via its token remap). */
.beta-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.55;
  padding: 4px 9px; border-radius: 100px;
  color: #0684a8;
  background: transparent;
  border: 1px solid rgba(0, 209, 255, .4);
  white-space: nowrap;
}
[data-theme="dark"] .beta-badge { color: var(--accent-2); }

/* Invite-only beta banner (sits under the sticky nav) */
.invite-banner {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  padding: 9px 24px;
  background: var(--accent-tint);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.invite-banner-text {
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
}
.invite-banner-text a {
  color: var(--accent-text); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.invite-banner-text a:hover { color: var(--accent-text); }
@media (max-width: 600px) {
  .invite-banner { padding: 8px 16px; }
  .invite-banner-text { font-size: 12px; }
}

/* Nav controls — one implementation, identical to the home header
   (.hdr in home.css). Login is a solid flat accent; language + theme are
   bordered boxes with the globe / sun-moon icons. */
/* Exactly the home header controls (.btn-login / .lang-toggle / .theme-toggle). */
.btn-login {
  min-height: clamp(38px, 2.3vw, 46px); padding: 0 clamp(16px, 1.1vw, 24px); border-radius: 8px;
  background: var(--accent); color: #fff; font-size: clamp(14px, .74vw, 16px); font-weight: 600;
  display: inline-flex; align-items: center; text-decoration: none; cursor: pointer;
  border: 1px solid var(--accent);
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.btn-login:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.lang-toggle, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.08em;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.theme-toggle { min-width: 40px; padding: 0 10px; }
.lang-toggle:hover, .theme-toggle:hover { color: var(--ink); border-color: var(--accent-2); }
.lang-toggle svg, .theme-toggle svg { display: block; }
.lang-toggle #lang-label {
  font-family: var(--font-mono, monospace);
  font-size: 12px; letter-spacing: 0.04em;
}
/* Exactly the home header nav (.hdr-nav). */
.nav-links { display: flex; gap: clamp(20px, 1.6vw, 34px); align-items: center; margin-inline-start: clamp(28px, 2.6vw, 56px); }
.nav-link {
  color: var(--ink-soft); text-decoration: none; font-size: clamp(15px, .76vw, 17px); font-weight: 500;
  padding: 6px 2px; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent; font-family: inherit; cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.nav-link:hover { color: var(--ink); border-bottom-color: var(--accent-2); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--accent-2); }
.nav-right { display: flex; gap: 14px; align-items: center; margin-inline-start: auto; }

/* HOME */
.home-wrap { max-width: 1500px; margin: 0 auto; padding: 40px 32px 56px; }
.hero {
  position: relative;
  padding: 60px 0 40px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  min-height: 600px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--accent);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "wght" 400;
  font-size: clamp(48px, 7.6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.038em;
  color: var(--ink);
  margin-bottom: 28px;
}
.hero-title em {
  font-style: italic;
  font-variation-settings: "opsz" 9, "wght" 400;
  color: var(--accent-text);
}
.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--ink-mute); max-width: 46ch; }
.hero-meta {
  display: flex; gap: 36px; padding-top: 32px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.meta-item .num {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.meta-item .num span {
  color: var(--ink);
}
.meta-item .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-top: 8px;
}

/* Hero 3D figure */
.hero-figure {
  position: relative;
  height: 580px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, rgba(0,209,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(0,123,255,0.12) 0%, transparent 60%),
    var(--bg-sunken);
  border: 1px solid var(--line-soft);
}
.hero-figure canvas { display: block; }
.hero-figure-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg-sunken) 0%, transparent 30%);
  opacity: 0.3;
}
.floating-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--bg-elev);
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
  z-index: 3;
}
.floating-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } }
.floating-tag.ft-1 { top: 14%; inset-inline-start: -16px; animation: float 5s ease-in-out infinite; }
.floating-tag.ft-2 { top: 46%; inset-inline-end: -20px; animation: float 5s ease-in-out infinite 1.5s; }
.floating-tag.ft-3 { bottom: 22%; inset-inline-start: 8%; animation: float 5s ease-in-out infinite 3s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }


/* Feature strip */
/* MOAT BAND */
.moat-band {
  margin-top: 88px;
  /* Full-bleed band: background spans the full viewport width while the grid
     content stays centered within a readable ~1400px measure. Fills wide
     screens without stretching text. body has overflow-x:hidden so the
     100vw pull never creates a horizontal scrollbar. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 48px; align-items: center;
  padding: 72px max(32px, calc(50vw - 700px));
  background:
    radial-gradient(120% 120% at 85% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg-elev);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
}
.moat-eyebrow { color: var(--accent-text); margin-bottom: 14px; }
.moat-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.moat-title em { font-style: italic; color: var(--accent-text); }
.moat-sub { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.moat-figure {
  position: relative; align-self: stretch;
  min-height: 320px; border-radius: var(--radius-lg);
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.moat-figure img {
  height: 100%; width: 100%; object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.25));
  mix-blend-mode: normal;
}
.moat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.moat-legend {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--ink-mute); text-transform: uppercase;
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  padding: 5px 10px; border-radius: 100px; border: 1px solid var(--line);
}
.moat-legend-bar {
  width: 84px; height: 6px; border-radius: 100px;
  background: linear-gradient(90deg, #007bff 0%, #12f7d6 50%, #ff6b6b 100%);
}
.moat-tag {
  position: absolute;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 6px 11px; border-radius: 100px;
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-accent);
  white-space: nowrap;
}
.moat-tag.mt-1 { top: 22%; inset-inline-start: 8%; }
.moat-tag.mt-2 { bottom: 24%; inset-inline-end: 8%; }

/* DUAL AUDIENCE */
.audience { margin-top: 88px; }
.audience-head { max-width: 640px; margin-bottom: 32px; }
.audience-head .eyebrow { color: var(--accent-text); margin-bottom: 12px; }
.audience-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3vw, 30px); line-height: 1.1;
  letter-spacing: -0.02em; margin: 0;
}
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience-card {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.audience-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-accent); }
.aud-card-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent-text); margin-bottom: 14px;
}
.aud-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.018em; margin: 0 0 10px;
}
.aud-card-desc { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; }

@media (max-width: 860px) {
  .moat-band { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .moat-figure { min-height: 260px; }
  .audience-grid { grid-template-columns: 1fr; }
}

.feature-strip {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.feature-item .feat-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
}
.feature-item .feat-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 10px 0 8px;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.feature-item .feat-desc {
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}

/* EXPLORER */
.explorer-shell {
  display: grid;
  grid-template-columns: 280px 1fr 440px;
  height: calc(100vh - 65px);
  overflow: hidden;
}
.sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-sunken);
  padding: 24px 20px;
  overflow-y: auto;
}
.sidebar h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 12px;
  margin-top: 24px;
}
.sidebar h4:first-child { margin-top: 0; }
.sidebar-tip {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  padding: 4px 12px;
}
.sidebar-tip strong { color: var(--ink); }
.filter-list { display: flex; flex-direction: column; gap: 4px; }
.filter-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: inherit;
  text-align: left;
  transition: all var(--t-fast);
  width: 100%;
}
.filter-chip:hover { background: var(--bg-elev); color: var(--ink); }
.filter-chip.active {
  background: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: var(--shadow-accent);
}
.filter-chip .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
}
.filter-chip.active .count { color: rgba(6,20,20,0.6); }

/* Stage */
.stage {
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stage-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  z-index: 2;
  flex-wrap: wrap; gap: 12px;
}
.toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }
.seg-control {
  display: inline-flex;
  background: var(--bg-sunken);
  border-radius: 100px;
  padding: 3px;
  border: 1px solid var(--line);
}
.seg-btn {
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.search-wrap { position: relative; display: flex; align-items: center; }
.search-input {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px 8px 36px;
  font-size: 13px;
  color: var(--ink);
  width: 240px;
  font-family: inherit;
  transition: all var(--t-fast);
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  width: 280px;
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.search-icon {
  position: absolute; left: 12px;
  color: var(--ink-mute);
  pointer-events: none;
}
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto;
  z-index: 100;
  display: none;
  min-width: 280px;
}
.search-results.open { display: block; }
.search-result-group { padding: 8px 4px; border-bottom: 1px solid var(--line-soft); }
.search-result-group:last-child { border-bottom: none; }
.search-result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  padding: 4px 12px;
}
.search-result-item {
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 8px;
  margin: 0 4px;
  font-size: 13px;
  color: var(--ink);
  transition: background var(--t-fast);
  display: flex; justify-content: space-between; align-items: center;
}
.search-result-item:hover { background: var(--bg-sunken); color: var(--accent-text); }
.search-result-item .ctx { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); }

.breadcrumbs {
  padding: 12px 24px;
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.breadcrumbs .crumb { color: var(--ink-mute); }
.breadcrumbs .crumb.current { color: var(--accent-text); }
.breadcrumbs .sep { opacity: 0.4; }

/* 3D viewer */
.viewer3d {
  flex: 1;
  position: relative;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(0,209,255,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(0,123,255,0.06) 0%, transparent 50%),
    var(--bg);
  overflow: hidden;
}
.viewer3d canvas { display: block; cursor: grab; }
.viewer3d canvas:active { cursor: grabbing; }

.viewer-tooltip {
  position: fixed;
  background: var(--ink);
  color: var(--bg);
  padding: 7px 13px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  z-index: 200;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 160ms;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.viewer-tooltip.visible { opacity: 1; }

/* Stage controls */
.stage-controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex; gap: 8px;
  z-index: 5;
}
.stage-controls .ctrl-btn {
  width: 36px; height: 36px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.stage-controls .ctrl-btn:hover {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.stage-hint {
  position: absolute;
  bottom: 20px; right: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  box-shadow: var(--shadow-sm);
  z-index: 5;
  display: flex; align-items: center; gap: 8px;
}
.stage-hint .key {
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--ink-soft);
}

.stage-region-indicator {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  display: none;
  align-items: center; gap: 10px;
  max-width: 240px;
}
.stage-region-indicator.visible { display: flex; }
.stage-region-indicator .ind-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.stage-region-indicator .ind-label { font-size: 12px; color: var(--ink-soft); }
.stage-region-indicator .ind-label strong { color: var(--ink); font-weight: 600; }

/* Detail panel */
.detail-panel {
  border-left: 1px solid var(--line);
  background: var(--bg-elev);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.detail-empty {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px;
  text-align: center;
}
.detail-empty-art {
  width: 100px; height: 100px;
  margin-bottom: 24px;
  color: var(--ink-mute);
  opacity: 0.5;
}
.detail-empty h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.detail-empty p {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 280px;
  line-height: 1.55;
}
.detail-content {
  display: none;
  animation: panelSlide 480ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.detail-content.visible { display: block; }
@keyframes panelSlide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.detail-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(0,123,255,0.06) 0%, transparent 60%),
    var(--bg-elev);
}
.detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0;
  font: inherit; font-size: 14px;
  color: var(--ink-mute); cursor: pointer;
  margin-bottom: 20px;
  padding: 6px 0;
  transition: color var(--t-fast);
}
.detail-back:hover { color: var(--accent-text); }
.detail-name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.detail-region {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-text);
}
.detail-location {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.tab-list {
  display: flex;
  padding: 0 20px;
  gap: 4px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-elev);
  position: sticky; top: 0; z-index: 5;
}
.tab-btn {
  padding: 14px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); }
.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 8px; right: 8px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.tab-content { display: none; padding: 24px 28px 40px; }
.tab-content.active { display: block; animation: tabIn 240ms ease; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.info-block { margin-bottom: 28px; }
.info-block:last-child { margin-bottom: 0; }
.block-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.block-title::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.block-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.block-text strong { color: var(--ink); font-weight: 600; }

.function-list { display: flex; flex-direction: column; gap: 10px; }
.function-item {
  padding: 14px 16px;
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.function-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.function-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.function-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.glossary-btn {
  font-size: 10px; color: var(--ink-mute); background: transparent; border: none;
  cursor: pointer; padding: 0; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.glossary-btn:hover { color: var(--accent-text); }

.tag-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
}
.tag.primary {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}

.exercise-card {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  transition: all var(--t-fast);
}
.exercise-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);   /* flat navy (page bg), just the hairline on top — matches home */
  margin-top: 40px;
}
.footer-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 48px 32px 32px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-brand { max-width: 320px; }
.footer-logo { height: 26px; width: auto; }
.footer-logo.logo-main { display: none; }
.footer-logo.logo-inverse { display: block; }
[data-theme="light"] .footer-logo.logo-main { display: block; height: 26px; }
[data-theme="light"] .footer-logo.logo-inverse { display: none; }
.footer-tagline {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 16px;
}
.footer-link {
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  text-align: start;
}
.footer-link:hover { color: var(--accent-text); }
.footer-bottom {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 32px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-mute);
}
@media (max-width: 880px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 20px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { padding: 16px 20px 24px; }
}
.exercise-figure {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.exercise-frame {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exercise-frame img {
  width: 100%;
  height: 130px;
  object-fit: contain;
}
.exercise-frame figcaption {
  margin-top: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
/* Line art is authored dark; flip to light in dark theme */
[data-theme="dark"] .exercise-frame img {
  filter: invert(1) brightness(1.7);
}
/* Photoreal combined image: single full-width frame, never inverted */
.exercise-figure--photo {
  padding: 0;
  background: none;
  border: none;
}
.exercise-photo {
  width: 100%;
}
.exercise-photo img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radius-md);
}
[data-theme="dark"] .exercise-photo img {
  filter: none;
}

/* ============================================================
   CLICKABLE LIBRARY CARD
============================================================ */
.exercise-card[role="button"] { cursor: pointer; }
.exercise-card[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Images inside a card shouldn't intercept the card's click. */
.exercise-card .protected-media { pointer-events: none; }

/* ============================================================
   IMAGE SAVE-PROTECTION (deters casual right-click / long-press;
   not DRM — the file is still reachable via devtools/network).
============================================================ */
.protected-media {
  position: relative;
  display: block;
  line-height: 0;
}
.protected-media img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* Transparent shield sits above the image so long-press / right-click
   targets an empty span, not the <img>. */
.protected-media__shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: transparent;
}

/* ============================================================
   EXERCISE DETAIL VIEW
============================================================ */
.exercise-detail-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.exercise-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}
/* No photo → single readable column, no empty figure panel. */
.exercise-detail--nofigure { grid-template-columns: minmax(0, 720px); }
.detail-figure {
  position: sticky;
  top: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  /* Cap so a very tall info column doesn't stretch the photo past the
     viewport; otherwise the figure grows to match the text height. */
  max-height: calc(100vh - 120px);
}
.detail-figure .protected-media--detail {
  width: 100%;
  height: 100%;
}
.detail-figure .protected-media--detail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}
[data-theme="dark"] .detail-lineart img { filter: invert(1) brightness(1.7); }
.detail-media-stack { display: grid; gap: 12px; }
.detail-media-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 14px;
}
.detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.detail-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.detail-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0 0 24px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.detail-spec dt {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.detail-spec dd { margin: 0; font-size: 15px; color: var(--ink); }
.detail-section { margin-bottom: 24px; }
.detail-section h2 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 8px;
}
.detail-section p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}
.detail-muscles { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-safety { margin-top: 8px; }

@media (max-width: 860px) {
  .exercise-detail { grid-template-columns: 1fr; gap: 24px; }
  .detail-figure { position: static; }
  .detail-figure .protected-media--detail img { max-height: 60vh; }
}
/* Library search */
.library-search {
  margin-bottom: 16px;
}
.lib-search-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: none;
}
.lib-search-input::placeholder { color: var(--ink-mute); }
.lib-search-input:focus { border-color: var(--accent); }
/* Lightbox */
.lib-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.85);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.lib-lightbox.open { display: flex; }
.lib-lightbox img {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.exercise-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.exercise-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.exercise-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge.diff-beginner { color: #0a7d6e; border-color: #12f7d655; background: #12f7d614; }
.badge.diff-intermediate { color: #c97a1a; border-color: #c97a1a55; background: #c97a1a12; }
[data-theme="dark"] .badge.diff-beginner { color: #12f7d6; background: rgba(18,247,214,0.1); }
[data-theme="dark"] .badge.diff-intermediate { color: #ffd166; background: rgba(255,209,102,0.1); }
.badge.diff-advanced { color: var(--accent-text); border-color: var(--accent); background: var(--accent-tint); }
.exercise-meta {
  display: flex; gap: 14px; margin-bottom: 10px;
  font-size: 12px; color: var(--ink-mute);
  flex-wrap: wrap;
}
.exercise-meta-item { display: flex; align-items: center; gap: 4px; }
.exercise-desc {
  font-size: 13px; line-height: 1.55; color: var(--ink-soft);
  margin-bottom: 8px;
}
.exercise-safety {
  font-size: 11.5px;
  color: var(--ink-mute);
  padding: 8px 10px;
  background: var(--coral-tint);
  border-radius: 8px;
  border: 1px solid var(--accent-coral);
  line-height: 1.45;
}
.exercise-safety::before { content: "⚠ "; color: #ff6b6b; font-weight: bold; }

.subsection-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 12px;
  margin-top: 4px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.subsection-title:not(:first-child) { margin-top: 24px; }

/* LIBRARY */
.library-shell { max-width: 1500px; margin: 0 auto; padding: 32px; }
.library-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px; gap: 32px; flex-wrap: wrap;
}
.library-head h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px); font-weight: 400; letter-spacing: -0.03em;
  line-height: 1;
}
.library-head h1 em {
  font-style: italic;
  color: var(--accent-text);
}
.library-head p { color: var(--ink-soft); max-width: 420px; margin-top: 12px; font-size: 16px; }
.library-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 18px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-group .glabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-right: 4px;
}
.lib-chip {
  padding: 6px 12px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast);
}
.lib-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.lib-chip.active {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  /* Cards size to their own content, so a card with no photo stays compact
     instead of stretching to match a neighbour that has one. */
  align-items: start;
}
.library-grid .exercise-card {
  margin-bottom: 0;
  background: var(--bg-elev);
}

/* ABOUT */
.about-shell { max-width: 900px; margin: 0 auto; padding: 60px 32px 80px; }
.about-shell h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin-bottom: 32px;
}
.about-shell h1 em {
  font-style: italic;
  color: var(--accent-text);
}
.about-shell h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  margin: 56px 0 18px;
  letter-spacing: -0.02em;
}
.about-shell p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.about-shell p em {
  font-style: italic;
  color: var(--accent-text);
}
.about-shell ul { list-style: none; margin-bottom: 18px; }
.about-shell ul li {
  padding-inline-start: 26px;
  position: relative;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 10px;
}
.about-shell ul li::before {
  content: "→";
  position: absolute; inset-inline-start: 0;
  color: var(--accent-text);
  font-weight: 700;
}
[dir="rtl"] .about-shell ul li::before { content: "←"; }

/* Legal pages */
.legal-shell { max-width: 820px; margin: 0 auto; padding: 48px 32px 80px; }
.legal-back {
  background: none; border: none; cursor: pointer;
  color: var(--accent-text); font-size: 14px; font-weight: 600;
  padding: 0; margin-bottom: 28px; display: inline-block;
}
.legal-back:hover { text-decoration: underline; }
.legal-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 400; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 8px;
}
.legal-updated { font-size: 14px; color: var(--ink-mute); margin-bottom: 40px; }
.legal-body h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  margin: 38px 0 14px; color: var(--ink);
}
.legal-body p {
  font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px;
}
.legal-body ul { margin: 0 0 18px; padding-inline-start: 24px; }
.legal-body ul li {
  font-size: 16px; line-height: 1.7; color: var(--ink-soft);
  margin-bottom: 9px; padding-inline-start: 4px;
}
.legal-body ul li::marker { color: var(--accent-text); }
.legal-body a { color: var(--accent-text); text-decoration: underline; word-break: break-word; }
.legal-contact { font-size: 16px; font-weight: 600; }
[dir="rtl"] .legal-back { }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,20,20,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: fadeIn 200ms ease;
}
.modal-backdrop.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-elev);
  border-radius: var(--radius-xl);
  max-width: 600px; width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 36px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 320ms cubic-bezier(0.32, 0.72, 0.24, 1);
  border: 1px solid var(--line);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.modal h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.modal-close {
  background: var(--bg-sunken); border: none;
  width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.modal-close:hover {
  background: var(--accent);
  color: var(--ink-on-accent);
}
.glossary-item { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.glossary-item:last-child { border-bottom: none; }
.glossary-term { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.glossary-def { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* Loader */
.viewer-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
  background: var(--bg);
  z-index: 10;
  transition: opacity 400ms ease;
}
.viewer-loader.hidden { opacity: 0; pointer-events: none; }
.loader-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
}

.mobile-hint {
  display: none;
  position: fixed;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 10px 20px; border-radius: 100px;
  font-size: 12px;
  z-index: 30;
  opacity: 0;
  transition: opacity 300ms;
}
.mobile-hint.show { opacity: 1; }

/* Responsive */
@media (max-width: 1200px) {
  .explorer-shell { grid-template-columns: 240px 1fr 400px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .hero-figure { height: 460px; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .topnav { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .nav-links { order: 3; width: 100%; justify-content: center; padding-top: 8px; border-top: 1px solid var(--line-soft); overflow-x: auto; }
  .home-wrap { padding: 24px 16px 60px; }
  .explorer-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: auto;
    min-height: calc(100vh - 65px);
  }
  .sidebar {
    order: 3;
    border-right: none;
    border-top: 1px solid var(--line);
    max-height: 200px;
    padding: 16px;
  }
  .sidebar h4 { margin-top: 12px; }
  .filter-list { flex-direction: row; flex-wrap: wrap; }
  .filter-chip { width: auto; }
  .stage { min-height: 60vh; }
  .detail-panel {
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 70vh;
  }
  .stage-toolbar { flex-wrap: wrap; padding: 12px 16px; }
  .search-input { width: 100%; }
  .search-input:focus { width: 100%; }
  .search-wrap { width: 100%; order: 4; margin-top: 8px; }
  .feature-strip { grid-template-columns: 1fr; }
  .mobile-hint.show { display: block; }
  .stage-hint { display: none; }
}

/* ==========================================================
   RTL / Arabic support
   Page content mirrors for Arabic, but the top nav (logo,
   nav links, language + theme switchers) is kept LTR via an
   inline dir="ltr" on .topnav so its layout never flips.
========================================================== */
:root {
  --font-arabic: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
  /* Arabic display face (premium headline stand-in for Fraunces, which has no Arabic) */
  --font-arabic-display: 'Rubik', var(--font-arabic);
}
[dir="rtl"] body,
[dir="rtl"] {
  font-family: var(--font-arabic);
}
/* Arabic headings: Fraunces has no Arabic glyphs, fall back cleanly */
[dir="rtl"] .hero-title,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .detail-name,
[dir="rtl"] .card-title,
[dir="rtl"] .feat-title,
[dir="rtl"] .serif {
  font-family: var(--font-arabic-display);
  font-variation-settings: normal;
}
/* Keep the top navigation visually LTR regardless of language */
.topnav[dir="ltr"] { direction: ltr; }
/* Latin-script bits stay LTR even inside Arabic text */
[dir="rtl"] .card-num,
[dir="rtl"] .feat-num,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .num,
[dir="rtl"] #lang-label,
[dir="rtl"] .badge {
  direction: ltr;
}
/* Latin-ordered numbers keep LTR glyph order but must sit on the RTL
   start edge (right) so they align with their right-aligned titles. */
[dir="rtl"] .feat-num,
[dir="rtl"] .card-num { text-align: right; }
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .eyebrow { unicode-bidi: plaintext; }
/* Stage hint uses inline keys: keep readable in RTL */
[dir="rtl"] .stage-hint { direction: rtl; }

/* ----------------------------------------------------------
   Gradient italic headline words get clipped at their edge
   because the slanted glyph overhangs the clip box edge.
   Pad both inline sides (and offset the margin) so the
   full glyph is painted — fixes EN "muscle." and AR "العضلة".
---------------------------------------------------------- */
.hero-title em,
.library-head h1 em,
.about-shell h1 em,
.about-shell p em {
  padding: 0 0.12em;
  margin: 0 -0.06em;
}

/* ============================================================
   Brand gradient headline words, stat numbers + eyebrows.
   The Electric Anatomy gradient reads cleanly as text in both
   light and dark themes, so the gradient is clipped straight into
   the glyphs everywhere — no highlight strips or solid pills.
   ============================================================ */
.hero-title em,
.moat-title em,
.library-head h1 em,
.about-shell h1 em,
.about-shell p em,
.meta-item .num span {
  position: relative;
  font-style: italic;
  color: var(--accent-text);
}
.meta-item .num span { font-style: normal; padding: 0 0.04em; }

/* Small mono eyebrows: solid accent color (no gradient-clipped text) */
.moat-eyebrow,
.aud-card-label,
.audience-head .eyebrow {
  display: inline-block;
  color: var(--accent-text);
}

/* ============================================================
   De-slop pass (2026-07): retire repeated gradient-clipped
   headlines. The moat title (solid accent) is the single
   deliberate brand-color moment; every other headline reads
   in solid ink/accent so the treatment stays meaningful.
   These rules are last in the cascade and carry [dir] variants
   so they win over the earlier LTR + RTL gradient blocks.
============================================================ */
.hero-title em,
[dir] .hero-title em,
.library-head h1 em,
[dir] .library-head h1 em,
.about-shell h1 em,
[dir] .about-shell h1 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-text);
}
.meta-item .num span,
[dir] .meta-item .num span {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
.feature-item .feat-num {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ink-mute);
}
.about-shell ul li::before {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-text);
}

/* ============================================================
   3D poster fallbacks (P0). A static render of each 3D scene
   sits behind the canvas and shows by default. When the live
   viewer renders it calls hidePoster() -> .is-hidden and the
   poster fades out. If three.js/WebGL is unavailable the viewer
   never inits, so the poster stays instead of a blank panel.
============================================================ */
.fig-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 0;
  opacity: 1;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.fig-poster.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fig-poster { transition: none; }
}

/* ============================================================
   PRODUCT PROOF (P1 — real dashboard screens, EN/AR)
   ============================================================ */
.product-proof { margin-top: 96px; }
.pp-head { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.pp-head .eyebrow { color: var(--accent-text); margin-bottom: 14px; justify-content: center; }
.pp-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0;
}
.pp-title em { font-style: italic; color: var(--accent-text); }
.pp-sub {
  margin: 16px auto 0; max-width: 620px;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--ink-mute);
}

/* browser-style frame */
.pp-frame {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow-lg);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.pp-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg-sunken);
}
.pp-dots { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.pp-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.pp-url {
  font: 500 12.5px/1 var(--font-mono); color: var(--ink-mute);
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-url-path { color: color-mix(in srgb, var(--ink-mute) 55%, transparent); }
[dir="rtl"] .pp-url { direction: ltr; unicode-bidi: plaintext; }
.pp-tag {
  margin-inline-start: auto; flex: 0 0 auto;
  font: 600 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent-text); background: var(--accent-tint);
  border: 1px solid var(--accent-soft); padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.pp-tag-coral { color: var(--coral-deep); background: var(--coral-tint); border-color: var(--coral-soft); }
.pp-shot { display: block; width: 100%; height: auto; }

/* localized screenshots: EN default, AR in RTL */
.pp-ar { display: none; }
[dir="rtl"] .pp-en { display: none; }
[dir="rtl"] .pp-ar { display: block; }

/* featured */
.pp-featured { margin: 0 0 32px; }
.pp-featured .pp-frame { max-width: 1060px; margin: 0 auto; }
.pp-featured .pp-cap { justify-content: center; }

/* supporting grid */
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }
.pp-card { margin: 0; }
.pp-card .pp-frame:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-accent); }
/* normalize card aspect so the grid rows stay even (nutrition is 4:3) */
.pp-grid .pp-shot { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* caption */
.pp-cap {
  margin-top: 14px; display: flex; align-items: center; gap: 9px;
  text-align: start; font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.pp-cap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

@media (max-width: 860px) {
  .product-proof { margin-top: 72px; }
  .pp-grid { grid-template-columns: 1fr; gap: 28px; }
  .pp-featured .pp-frame { max-width: 100%; }
}

/* --- Product-proof audience toggle (coach / individual) --- */
.pp-tabs { text-align: center; }
.pp-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pp-seglist {
  display: inline-flex; gap: 4px; margin-bottom: 40px; padding: 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-sunken);
}
.pp-seg {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 22px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  font: 600 14px/1 var(--font-body); color: var(--ink-mute);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.pp-seg:hover { color: var(--ink-soft); }
#pp-coach:checked ~ .pp-seglist label[for="pp-coach"],
#pp-solo:checked ~ .pp-seglist label[for="pp-solo"] {
  background: var(--accent); color: var(--ink-on-accent); box-shadow: var(--shadow-accent);
}
.pp-radio:focus-visible ~ .pp-seglist { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 999px; }
.pp-panel { text-align: start; }
.pp-panel-solo { display: none; }
#pp-solo:checked ~ .pp-panel-coach { display: none; }
#pp-solo:checked ~ .pp-panel-solo { display: block; }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-shell {
  max-width: 1160px; margin: 0 auto; padding: 56px 32px 88px;
  --pr-yes: var(--accent);
  --pr-lim: #9a6400;
  --pr-no: var(--ink-mute);
  --pr-plan: var(--accent-text);
}
[data-theme="dark"] .pricing-shell { --pr-lim: #e0a44a; }

/* hero */
.pr-hero { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.pr-eyebrow { color: var(--accent-text); justify-content: center; margin-bottom: 14px; }
.pr-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0;
}
.pr-sub {
  margin: 16px auto 0; max-width: 620px;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--ink-mute);
}

/* audience selector */
.pr-audience {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
  margin: 0 auto 22px; padding: 4px; width: max-content; max-width: 100%;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunken);
}
.pr-aud-tab {
  appearance: none; cursor: pointer; white-space: nowrap;
  padding: 9px 22px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--ink-mute);
  font: 600 14px/1 var(--font-body);
  transition: color var(--t-fast), background var(--t-fast);
}
.pr-aud-tab:hover { color: var(--ink-soft); }
.pr-aud-tab.is-active { background: var(--accent); color: var(--ink-on-accent); }
.pr-aud-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* billing toggle */
.pr-billing {
  display: flex; justify-content: center; gap: 3px;
  margin: 0 auto 36px; padding: 4px; width: max-content;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev);
}
.pr-bill-btn {
  appearance: none; cursor: pointer; white-space: nowrap;
  padding: 7px 18px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--ink-mute);
  font: 500 13px/1 var(--font-body);
  transition: color var(--t-fast), background var(--t-fast);
}
.pr-bill-btn:hover { color: var(--ink-soft); }
.pr-bill-btn.is-active { background: var(--bg-sunken); color: var(--ink); border-color: var(--line-soft); }
.pr-bill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* views */
.pr-view[hidden] { display: none; }

/* cards */
.pr-cards { display: grid; gap: 22px; align-items: stretch; }
.pr-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; }
.pr-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.pr-card:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.pr-card-rec { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pr-badge {
  position: absolute; inset-block-start: -11px; inset-inline-start: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-elev); color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
}
[dir="rtl"] .pr-badge { transform: translateX(50%); }
.pr-card-head { min-height: 78px; }
.pr-plan { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.018em; margin: 0; }
.pr-plan-tag { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 0; }

/* price */
.pr-price { margin: 18px 0 20px; min-height: 74px; }
.pr-price-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pr-amount {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(30px, 4vw, 38px); letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pr-period { font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.pr-price-sub { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; align-items: center; }
.pr-vat { font: 500 11.5px/1.3 var(--font-mono); color: var(--ink-mute); }
.pr-annual-note { font-size: 12px; color: var(--ink-mute); }
.pr-save {
  font: 600 11.5px/1 var(--font-mono);
  color: var(--accent-text); background: var(--accent-tint);
  border: 1px solid var(--accent-soft); padding: 4px 9px; border-radius: 999px;
}

/* feature bullets */
.pr-feats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.pr-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.pr-feat-lead { font-weight: 600; color: var(--ink) !important; }
.pr-ic { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke-width: 2.4; }
.pr-ic-yes { stroke: var(--pr-yes); }
.pr-ic-lim { stroke: var(--pr-lim); fill: var(--pr-lim); stroke-width: 0; }
.pr-ic-no  { stroke: var(--pr-no); }
.pr-ic-plan { stroke: var(--pr-plan); stroke-width: 1.8; }
.pr-cta { justify-content: center; margin-top: auto; width: 100%; }

/* beta note */
.pr-beta {
  max-width: 640px; margin: 26px auto 0; text-align: center;
  font-size: 13px; line-height: 1.55; color: var(--ink-mute);
}

/* compare */
.pr-compare-wrap { margin-top: 30px; text-align: center; }
.pr-compare-toggle { gap: 8px; }
.pr-compare-toggle .pr-chev { transition: transform var(--t-fast); }
.pr-compare-toggle.is-open .pr-chev { transform: rotate(180deg); }
.pr-compare { margin: 22px auto 0; max-width: 780px; text-align: start; }
.pr-compare-h { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0 0 14px; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pr-table th, .pr-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); text-align: start; vertical-align: middle; }
.pr-table thead th { font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); border-bottom: 1px solid var(--line); }
.pr-table thead th:not(:first-child), .pr-table tbody td { text-align: center; }
.pr-table tbody th { font-weight: 500; color: var(--ink); }
.pr-cell { display: inline-flex; align-items: center; gap: 7px; justify-content: center; }
.pr-cell span { font-size: 13px; color: var(--ink-soft); }
.pr-cell.pr-no span { color: var(--ink-mute); }

/* coach cards */
.pr-coach-card { text-align: start; }
.pr-cap {
  font-family: var(--font-body); font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
  color: var(--accent-text); margin: 14px 0 2px; font-variant-numeric: tabular-nums;
}
.pr-coach-same {
  max-width: 720px; margin: 28px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}

/* every coach plan includes */
.pr-includes { margin-top: 40px; padding: 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--bg-elev); }
.pr-includes-h { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin: 0 0 20px; text-align: center; }
.pr-includes-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.pr-includes-grid li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }

/* capacity explainer */
.pr-capacity { margin-top: 28px; max-width: 720px; margin-inline: auto; }
.pr-capacity-h { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0 0 12px; text-align: center; }
.pr-capacity-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pr-capacity-list li { position: relative; padding-inline-start: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.pr-capacity-list li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* organizations */
.pr-org { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.pr-org-status {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-text); background: var(--accent-tint); border: 1px solid var(--accent-soft);
}
.pr-org-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 30px); line-height: 1.12; letter-spacing: -0.02em; margin: 16px 0 0; }
.pr-org-body { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 46ch; }
.pr-org-planned { margin-top: 26px; }
.pr-org-planned-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pr-org-planned-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin: 0; }
.pr-planned-tag { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); background: var(--bg-sunken); border: 1px solid var(--line-soft); padding: 4px 9px; border-radius: 999px; }
.pr-org-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pr-org-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

/* org form */
.pr-org-form-wrap { position: sticky; top: 88px; }
.pr-form { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); box-shadow: var(--shadow-md); }
.pr-form-h { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 0 0 18px; }
.pr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pr-field label { font: 500 12.5px/1 var(--font-body); color: var(--ink-soft); }
.pr-field input, .pr-field textarea {
  font: 400 14px/1.4 var(--font-body); color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pr-field textarea { resize: vertical; min-height: 64px; }
.pr-field input:focus, .pr-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.pr-form-btn { width: 100%; justify-content: center; margin-top: 4px; }
.pr-form-btn:disabled { opacity: 0.65; cursor: default; }
.pr-form-status { margin: 12px 0 0; font-size: 13px; line-height: 1.5; min-height: 1.2em; }
.pr-form-status.is-error { color: var(--coral-deep); }
.pr-form-status.is-success { color: var(--accent-text); }

/* faq */
.pr-faq { margin-top: 64px; max-width: 780px; margin-inline: auto; }
.pr-faq-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 3vw, 28px); text-align: center; margin: 0 0 26px; }
.pr-faq-item { border-bottom: 1px solid var(--line-soft); }
.pr-faq-item summary {
  list-style: none; cursor: pointer; padding: 16px 4px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font: 500 15px/1.4 var(--font-body); color: var(--ink);
}
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-item summary::after { content: "+"; font-size: 20px; color: var(--ink-mute); flex: 0 0 auto; transition: transform var(--t-fast); }
.pr-faq-item[open] summary::after { content: "\2212"; }
.pr-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.pr-faq-a { padding: 0 4px 18px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* riyal symbol + number token (used like $, symbol-first in both languages) */
.pr-money { display: inline-flex; align-items: baseline; gap: 0.14em; direction: ltr; }
.pr-riyal { width: 0.82em; height: 0.82em; align-self: center; flex: 0 0 auto; fill: currentColor; }
.pr-num { font-variant-numeric: tabular-nums; }
.pr-save .pr-riyal { width: 0.9em; height: 0.9em; }

/* RTL: keep the price token, VAT symbol readable */
[dir="rtl"] .pr-amount, [dir="rtl"] .pr-cap { unicode-bidi: plaintext; }

/* responsive */
@media (max-width: 900px) {
  .pr-org { grid-template-columns: 1fr; gap: 28px; }
  .pr-org-form-wrap { position: static; }
  .pr-includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pricing-shell { padding: 40px 20px 64px; }
  .pr-cards-2, .pr-cards-3 { grid-template-columns: 1fr; max-width: 440px; }
  .pr-card-head { min-height: 0; }
  .pr-audience { width: 100%; justify-content: stretch; }
  .pr-aud-tab { flex: 1; padding: 10px 12px; }
}
@media (max-width: 480px) {
  .pr-includes-grid { grid-template-columns: 1fr; }
  .pr-table th, .pr-table td { padding: 9px 8px; }
  .pr-table { font-size: 12.5px; }
}

/* ---- Stage 5: 44px minimum tap targets on touch/mobile (WCAG 2.5.5) ---- */
@media (max-width: 900px) {
  .nav-link, .lang-toggle, .theme-toggle, .btn-login, .btn-sm, .pr-aud-tab, .pr-bill-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .btn-icon { min-width: 44px; min-height: 44px; }
  #glossary-search { min-height: 44px; }
}

/* Stage 5: ensure pricing CTAs/compare + generic buttons meet 44px height on mobile */
@media (max-width: 900px) {
  .btn, .pr-cta, #page-pricing button { min-height: 44px; }
}

/* Stage 5: filter chips, tabs, and the brand logo button to 44px on mobile */
@media (max-width: 900px) {
  .filter-chip, .lib-chip, .tab-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .logo { min-height: 44px; }
}

/* Stage 5: search inputs to 44px on mobile */
@media (max-width: 900px) {
  input[type="search"], input[type="text"], #search-input, #lib-search-input { min-height: 44px; }
}

/* Stage 5: 3D viewer zoom controls to 44px on mobile */
@media (max-width: 900px) {
  .ctrl-btn { min-width: 44px; min-height: 44px; }
}