:root {
  --steel: #275c7f;
  --steel-deep: #1f4d6b;
  --navy: #132e3f;
  --coral: #ff8766;
  --coral-ink: #b5462a; /* AA-safe warm coral for text on light bg (tagline, tags): 4.98:1 on cream */
  --sage: #549395;
  --gold: #d4a534;
  --cream: #f7f5f1;
  --line: #dde7ed;
  --ink: #132e3f;
  --muted: #556677; /* darkened from #5f7585 for AA: 5.4:1 on cream, 5.9:1 on white */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }

/* skip-to-content: visually hidden until focused (keyboard/AT users) */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 700; transition: top .15s ease;
}
.skip-link:focus { top: 8px; text-decoration: none; outline: 3px solid var(--gold); }

/* ====== brand header ====== */
header.brand {
  background: linear-gradient(180deg, #ffffff, #f7f5f1);
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
}
header.brand .row {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
header.brand .logo-link { display: inline-flex; align-items: center; }
header.brand img.mark { height: 32px; width: auto; }
header.brand .title { font-weight: 700; color: var(--navy); font-size: 17px; letter-spacing: 0.4px; }
header.brand .pill {
  margin-left: auto;
  font-size: 12px; padding: 4px 10px;
  background: var(--steel); color: white; border-radius: 999px;
  letter-spacing: 0.4px; font-weight: 600;
}
header.brand .pill.calm { background: #3f7274; } /* darkened sage: white text now 5.4:1 (was 3.5) */
header.brand .pill.busy { background: var(--gold); color: var(--navy); } /* dark text on gold: 6.2:1 (was 2.3) */
header.brand .pill.coral { background: var(--coral); color: var(--navy); } /* dark text on coral: 6.0:1 (was 2.4) */
/* right-aligned cluster: refresh chip + pill sit together on the right */
header.brand .brand-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
header.brand .brand-meta .pill { margin-left: 0; }
/* shared "last data refresh" chip — identical across infrastructure, token governance, contracts */
.refresh-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
.refresh-chip b { color: var(--navy); font-weight: 700; }
.refresh-chip .rc-dot { width: 8px; height: 8px; border-radius: 50%; background: #128a4a; box-shadow: 0 0 0 3px rgba(18,138,74,.15); flex: none; }
.refresh-chip.stale .rc-dot { background: #b45309; box-shadow: 0 0 0 3px rgba(180,83,9,.15); }
/* provenance (i) badge + popover explaining where the data comes from — matches the house .info icon */
.rc-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--steel); color: var(--steel-deep); font: 700 10px/1 ui-sans-serif, system-ui, sans-serif; font-style: normal; cursor: help; margin-left: 6px; vertical-align: middle; flex: 0 0 auto; user-select: none; }
.rc-info:hover, .rc-info:focus { background: var(--steel); color: #fff; outline: none; }
.rc-tip { position: absolute; top: calc(100% + 9px); right: 0; z-index: 200; width: 262px; padding: 11px 13px; background: var(--navy); color: #fff; font: 400 12.5px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; border-radius: 10px; box-shadow: 0 8px 26px rgba(19,46,63,.32); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .14s, transform .14s, visibility .14s; pointer-events: none; }
.rc-tip b { color: #fff; font-weight: 700; }
.rc-info:hover .rc-tip, .rc-info:focus .rc-tip, .rc-info:focus-within .rc-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ====== main ====== */
main { max-width: 1120px; margin: 0 auto; padding: 56px 24px 80px; }

/* ====== hero ====== */
.hero {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 0 24px;
  margin-bottom: 24px;
}
.hero .titles { flex: 1; min-width: 0; position: relative; z-index: 1; background: var(--cream); }
.hero h1 {
  font-size: 52px; line-height: 1.05; margin: 0 0 8px;
  color: var(--navy); letter-spacing: -1px; font-weight: 700;
}
@media (max-width: 720px) { .hero h1 { font-size: 36px; } }
.hero .lede { font-size: 18px; color: var(--muted); margin: 6px 0 0; max-width: 760px; line-height: 1.5; }
.hero .tagline { margin: 0 0 8px; color: var(--coral-ink); font-weight: 700; font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; }
/* cross-site nav pills — jump between the three dashboards */
.xnav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.xnav a { font-size: 13px; font-weight: 600; color: var(--steel); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; text-decoration: none; transition: .15s; }
.xnav a:hover { background: var(--steel); color: #fff; border-color: var(--steel); text-decoration: none; }

/* ECG sweep */
.ecg {
  position: absolute;
  left: 90px; right: 0; top: 50%;
  height: 60px; transform: translateY(-50%);
  pointer-events: none; z-index: 0; opacity: 0.45;
  width: calc(100% - 90px);
}
.ecg-line {
  stroke-dasharray: 200 1800;
  stroke-dashoffset: 2000;
  animation: ecgSweep 3.6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(39, 92, 127, 0.5));
}
@keyframes ecgSweep { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }

/* badge flip */
.badge-flip {
  flex-shrink: 0;
  width: 72px; height: 72px;
  perspective: 700px;
  filter: drop-shadow(0 6px 14px rgba(39, 92, 127, 0.28));
  position: relative; z-index: 1;
}
.badge-flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: flipDoc 8s linear infinite;
}
.badge-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.badge-back { background: white; transform: rotateY(180deg); box-shadow: inset 0 0 0 2px var(--line); }
.badge-back img { width: 70%; height: 70%; object-fit: contain; }
@keyframes flipDoc { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .badge-flip-inner { animation: none; }
  .ecg-line { animation: none; stroke-dashoffset: 0; opacity: 0.4; }
}

/* heartbeat blink */
.blink {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sage);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.4s infinite ease-in-out;
  box-shadow: 0 0 8px rgba(84,147,149,0.6);
}
.blink.warn { background: var(--gold); box-shadow: 0 0 8px rgba(212,165,52,0.6); }
.blink.crit { background: var(--coral); box-shadow: 0 0 10px rgba(255,135,102,0.7); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(0.85); } }

/* ====== cards / grid ====== */
.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 6px 18px rgba(19, 46, 63, 0.05);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}

/* Per-tile heads-up notice (e.g., deprecation announcement). Inline,
   gold-dana tone so it draws an eye without looking like an error. */
.card .tile-notice {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: #fff8e8;
  border: 1px solid rgba(212, 165, 52, 0.45);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  color: var(--navy);
  font-size: 13.5px;
  line-height: 1.5;
}
.card .tile-notice strong { color: var(--navy); letter-spacing: 0.1px; }

/* "NEW" badge, floats off the top-right corner of any tile added in the
   last 7 days. Coral gradient with a soft halo + a gentle bobbing tilt
   so it draws the eye without being obnoxious. */
/* Access + status tags on tiles. Calm, TWC palette, no animation
   (replaces the old coral bobbing "new" badge). Every tile carries an
   access tag saying who can open it; recent tiles also get a soft "New" tag.
   Tier is signalled by a small colored dot, not a loud fill. */
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.card .tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.2px; color: var(--steel-deep);
  background: #eef3f6; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 10px 5px 8px; white-space: nowrap;
}
.card .tag .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto;
  /* gentle heartbeat — alive but calm (the old badge bobbed + flared, too loud) */
  animation: tagPulse 2.8s ease-in-out infinite;
}
.card .tag.acc-all .dot { background: var(--sage); }
.card .tag.acc-leads .dot { background: var(--steel); }
.card .tag.acc-leadership .dot { background: var(--gold); }
.card .tag.is-new { color: var(--coral-ink); background: #fff3ef; border-color: #ffd9cd; }
.card .tag.is-new .dot { background: var(--coral); }
.card .tag.is-proto { color: #7a5e12; background: #fff8ec; border-color: #f0dcae; }
.card .tag.is-proto .dot { background: var(--gold); }
@keyframes tagPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .card .tag .dot { animation: none; } }
/* featured (dark) card: translucent light pills so they stay legible */
.card.featured .tags .tag { color: #eaf2f7; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.card.featured .tags .tag .dot { background: #cfe0ea; }
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(19, 46, 63, 0.10);
  border-color: var(--steel);
}
.card a.cover { color: inherit; }
.card .row { display: flex; align-items: center; gap: 10px; }
.card h3 { margin: 0; color: var(--navy); font-size: 20px; }
.card .sub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.card p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14.5px; }
.card .ctas { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.card .ctas a {
  font-size: 13px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--steel); background: white;
  font-weight: 600;
}
.card .ctas a:hover { border-color: var(--steel); background: var(--steel); color: white; text-decoration: none; }
.card .ctas a.primary { background: var(--steel); color: white; border-color: var(--steel); }
.card .ctas a.primary:hover { background: var(--steel-deep); border-color: var(--steel-deep); }

/* Featured (hero) card, sits above the tools grid, full-width, draws the eye */
.card.featured {
  background: linear-gradient(135deg, var(--steel) 0%, var(--navy) 100%);
  color: white;
  border: none;
  padding: 32px 36px;
  box-shadow: 0 16px 40px rgba(19, 46, 63, 0.18);
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
}
.card.featured::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,135,102,0.28), transparent 32%),
    radial-gradient(circle at 8% 90%,  rgba(84,147,149,0.30), transparent 36%);
  pointer-events: none;
}
.card.featured > * { position: relative; z-index: 1; }
.card.featured:hover { transform: none; box-shadow: 0 20px 48px rgba(19, 46, 63, 0.22); border: none; }
.card.featured .sub { color: var(--coral); }
.card.featured h3 {
  color: white; font-size: 30px; letter-spacing: -0.3px; margin: 4px 0 10px;
}
.card.featured p {
  color: rgba(255,255,255,0.86); font-size: 16px; max-width: 720px; line-height: 1.55;
}
.card.featured .ctas a {
  background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.25);
}
.card.featured .ctas a:hover {
  background: white; color: var(--navy); border-color: white;
}
.card.featured .ctas a.primary {
  background: var(--coral); border-color: var(--coral); color: var(--navy);
}
.card.featured .ctas a.primary:hover {
  background: white; border-color: white; color: var(--navy);
}
@media (max-width: 720px) {
  .card.featured h3 { font-size: 24px; }
  .card.featured { padding: 24px 22px; }
}

/* ───────── Lobby music toggle ───────── */
.lobby-music {
  position: fixed; bottom: 22px; right: 22px; z-index: 100;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 12.5px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; letter-spacing: 0.2px;
  color: var(--steel);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(19, 46, 63, 0.14);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  user-select: none;
}
.lobby-music:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(19,46,63,0.18); }
.lobby-music .ico { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.lobby-music .label { display: inline; }
.lobby-music.playing { background: var(--steel); color: white; border-color: var(--steel); }
.lobby-music.playing .ico { animation: lobbyBob 1.6s ease-in-out infinite; }
@keyframes lobbyBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
.lobby-music .pulse-ring {
  position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid var(--coral); opacity: 0;
  animation: lobbyPulse 2.4s ease-out infinite;
  pointer-events: none;
}
.lobby-music.cold .pulse-ring { opacity: 1; }
@keyframes lobbyPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-music .pulse-ring { animation: none; }
  .lobby-music.playing .ico { animation: none; }
}

/* tool detail */
.tool-section { margin-top: 36px; }
.tool-section h2 {
  font-size: 22px; color: var(--navy); margin: 0 0 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.steps { counter-reset: step; padding: 0; margin: 0; list-style: none; }
.steps > li {
  counter-increment: step;
  padding: 14px 16px 14px 56px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  position: relative;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 14px; top: 14px;
  width: 30px; height: 30px;
  background: var(--steel); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

pre, code {
  font: 13.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
pre {
  background: var(--navy); color: #e6eef5;
  padding: 14px 16px; border-radius: 10px;
  overflow-x: auto;
  margin: 10px 0 0;
  white-space: pre;
  position: relative;
}
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.3px;
  background: var(--coral); color: var(--navy);
  border: 1px solid var(--coral);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 135, 102, 0.35);
  transition: transform .12s, background .15s, color .15s, border-color .15s, box-shadow .15s;
  user-select: none;
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 135, 102, 0.45); }
.copy-btn:active { transform: translateY(0); }
.copy-btn.copied {
  background: white; color: var(--navy); border-color: white;
}
.copy-btn .copy-ico { width: 13px; height: 13px; }
code:not(pre code) {
  background: var(--line); color: var(--navy);
  padding: 1px 6px; border-radius: 4px;
}

.callout {
  background: rgba(39, 92, 127, 0.06);
  border-left: 3px solid var(--steel);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--ink);
  margin: 14px 0;
}
.callout.warn { background: rgba(212,165,52,0.10); border-left-color: var(--gold); }
.callout.coral { background: rgba(255,135,102,0.08); border-left-color: var(--coral); }

.section-intro { color: var(--muted); max-width: 720px; line-height: 1.6; margin: 4px 0 18px; }

/* ====== architecture diagrams ======
   Hand-authored inline SVG, one per tool page. The figure is a white card
   that matches the rest of the site; the SVG scales to width and scrolls
   horizontally on narrow screens so the layout never squashes. */
.arch {
  margin: 6px 0 8px;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, #ffffff, #fcfbf9);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(19, 46, 63, 0.06);
  overflow-x: auto;
}
.arch svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.arch figcaption {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.arch figcaption strong { color: var(--navy); font-weight: 700; }
/* shared SVG node/lane typography (classes used inside the inline SVGs) */
.arch .lane-label { font: 700 12px -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.8px; text-transform: uppercase; }
.arch .node-title { font: 700 14.5px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--navy); }
.arch .node-sub   { font: 400 11.5px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--muted); }
.arch .edge-label { font: 600 11px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--muted); }
.arch .flow { stroke: #9db3c1; stroke-width: 2; fill: none; }
.arch .flow.accent { stroke: var(--coral); }
.arch .flow.sage   { stroke: var(--sage); }

/* ====== footer ====== */
.site-foot {
  border-top: 1px solid var(--line);
  background: white;
  padding: 18px 24px;
  margin-top: 60px;
}
.site-foot .row {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.site-foot .foot-text { flex: 1; }
.site-foot .foot-link { font-weight: 600; }

/* ============================================================
   THEME SWITCHER
   The whole site is variable-driven, so an alternate palette is
   just a remap of the :root tokens. "Performance" mirrors the
   TWC Sales Performance leaderboard — slate/navy surfaces, a
   blue accent, and semantic red/dana/green — the look the org
   standardized on. Applied via <html data-theme="performance">.
   "Classic" is the original warm steel/cream palette
   (data-theme="classic" or the :root default above).
   ============================================================ */
html[data-theme="performance"] {
  --steel: #2563eb;   /* primary accent / links / buttons  (blue-600) */
  --steel-deep: #1d4ed8;
  --navy: #0f172a;    /* darkest surface + headings          (slate-900) */
  --coral: #dc2626;   /* attention / new / critical          (red-600) */
  --sage: #16a34a;    /* healthy / positive                  (green-600) */
  --gold: #f59e0b;    /* warn / busy                         (dana-500) */
  --cream: #f1f5f9;   /* page background                     (slate-100) */
  --line: #e2e8f0;    /* hairlines / borders                 (slate-200) */
  --ink: #0f172a;
  --muted: #64748b;   /* secondary text                      (slate-500) */
}
/* coherence fixes for the handful of hardcoded (non-token) colors */
html[data-theme="performance"] header.brand { background: linear-gradient(180deg, #ffffff, #f1f5f9); }
html[data-theme="performance"] .hero .tagline { color: var(--steel); } /* blue eyebrow, not red */
html[data-theme="performance"] .card .tile-notice { background: #fffbeb; }
html[data-theme="performance"] .card .tag { background: #eef2f7; }
html[data-theme="performance"] .card .tag.is-new { background: #fef2f2; border-color: #fecaca; }
html[data-theme="performance"] pre { color: #e2e8f0; }
html[data-theme="performance"] .arch { background: linear-gradient(180deg, #ffffff, #f8fafc); }
html[data-theme="performance"] .arch .flow { stroke: #94a3b8; }
html[data-theme="performance"] .card.featured::before {
  background:
    radial-gradient(circle at 92% 12%, rgba(37,99,235,0.30), transparent 34%),
    radial-gradient(circle at 8% 90%,  rgba(14,165,233,0.26), transparent 38%);
}
html[data-theme="performance"] .card.featured .sub { color: #7dd3fc; } /* sky, readable on navy */
html[data-theme="performance"] .card.featured .ctas a.primary { background: #fff; color: var(--navy); border-color: #fff; }

/* ---- the control itself: reads right in both themes; soft-elevation active state ---- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; background: var(--line); border-radius: 999px;
}
.theme-switch .ts-opt {
  appearance: none; border: none; background: transparent;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.2px; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
}
.theme-switch .ts-opt:hover { color: var(--navy); }
.theme-switch .ts-opt[aria-pressed="true"] {
  background: #fff; color: var(--navy);
  box-shadow: 0 1px 3px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.04);
}
@media (max-width: 560px) { .theme-switch .ts-opt { padding: 5px 9px; } }

/* ═══════════════════════════════════════════════════════════════
   Spine: persistent header nav + Cmd-K search (2026-07-09)
   ═══════════════════════════════════════════════════════════════ */
.site-nav { display: inline-flex; align-items: center; gap: 2px; margin-left: 18px; }
.site-nav a {
  font: 600 13px/1 inherit; font-family: inherit; color: var(--muted);
  padding: 7px 11px; border-radius: 999px; text-decoration: none;
  transition: color .15s, background .15s;
}
.site-nav a:hover { color: var(--navy); background: var(--line); }
@media (max-width: 900px) { .site-nav { display: none; } }

.search-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font: 500 12.5px/1 inherit; font-family: inherit;
  padding: 6px 10px 6px 9px; border-radius: 999px; cursor: pointer;
  transition: color .15s, box-shadow .15s;
}
.search-btn:hover { color: var(--navy); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.search-btn .kbd {
  font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--line); color: var(--muted); border-radius: 5px; padding: 3px 5px;
}
@media (max-width: 560px) { .search-btn .kbd, .search-btn .search-word { display: none; } }

.search-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(19,46,63,.42); backdrop-filter: blur(2px);
  padding: 9vh 16px 0;
}
.search-overlay.open { display: block; }
.search-panel {
  max-width: 620px; margin: 0 auto; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(15,23,42,.35); overflow: hidden;
}
.search-panel input {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  font: 500 16.5px/1.4 inherit; font-family: inherit; color: var(--ink);
  padding: 17px 20px; border-bottom: 1px solid var(--line); background: #fff;
}
.search-results { max-height: 54vh; overflow-y: auto; padding: 6px; }
.search-hit {
  display: block; padding: 10px 14px; border-radius: 9px; cursor: pointer;
  text-decoration: none;
}
.search-hit .t { font-weight: 650; font-size: 14.5px; color: var(--ink); }
.search-hit .t .aud {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-left: 8px;
}
.search-hit .d { font-size: 12.8px; color: var(--muted); margin-top: 2px; }
.search-hit.sel, .search-hit:hover { background: var(--cream); }
.search-hit.sel .t, .search-hit:hover .t { color: var(--steel-deep); }
.search-empty { padding: 18px 16px 20px; font-size: 13.5px; color: var(--muted); text-align: center; }
.search-foot {
  display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted);
}
.search-foot .kbd {
  font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--line); border-radius: 4px; padding: 2px 5px; margin-right: 4px;
}
html[data-theme="performance"] .search-panel, html[data-theme="performance"] .search-panel input { background: #0f172a; color: #e2e8f0; }
html[data-theme="performance"] .search-hit.sel, html[data-theme="performance"] .search-hit:hover { background: #1e293b; }
html[data-theme="performance"] .search-hit .t { color: #e2e8f0; }
html[data-theme="performance"] .search-btn { background: #0f172a; }

/* ── Home intent sections ── */
.section-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--coral-ink); margin: 0 0 2px;
}
.planned-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.planned-chips .chip {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 1px dashed var(--muted); border-radius: 999px; padding: 6px 13px;
  background: transparent;
}
.planned-chips .chip .soon {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-ink); margin-left: 6px;
}

/* ── Shared designed states (gate / error / loading) for live tiles ── */
.state-card {
  max-width: 560px; margin: 26px auto; padding: 26px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 22px rgba(15,23,42,.06); text-align: left;
}
.state-card h2 { margin: 0 0 8px; font-size: 19px; color: var(--ink); }
.state-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.state-card .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.state-card .ctas a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.state-card .ctas a.primary { background: var(--steel); color: #fff; }
.state-card .ctas a.ghost { background: #fff; color: var(--steel); border: 1px solid var(--line); }

/* ── Welcome briefing player + intent chooser (featured card) ── */
.briefing { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 4px; }
.briefing-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--coral); color: var(--navy); border: none; cursor: pointer;
  font: 700 14.5px/1 inherit; font-family: inherit;
  padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 135, 102, .35);
  transition: transform .12s, box-shadow .12s;
}
.briefing-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 135, 102, .45); }
.briefing-btn[aria-pressed="true"] { background: #fff; color: var(--navy); }
.briefing-time {
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: rgba(19, 46, 63, .18); border-radius: 999px; padding: 4px 8px;
}
.briefing-note { font-size: 13px; color: rgba(255, 255, 255, .82); max-width: 340px; line-height: 1.45; }
.intent-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 2px; }
.intent-q { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-right: 2px; }
.intent-row a {
  font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  padding: 7px 14px; border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.intent-row a:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }
@media (max-width: 560px) { .briefing-note { max-width: 100%; } }

/* ── First-visit welcome overlay + guided tour ── */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 70; display: none;
  background: rgba(19, 46, 63, .55); backdrop-filter: blur(3px) saturate(.8);
  cursor: pointer;
}
.welcome-overlay.open { display: flex; align-items: center; justify-content: center; }
.welcome-card {
  max-width: 480px; margin: 16px; padding: 40px 44px; text-align: center;
  background: #fff; border-radius: 20px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .45);
  animation: welcomeIn .45s cubic-bezier(.2, .9, .3, 1.2);
}
.welcome-card .wc-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral-ink); margin: 0 0 6px;
}
.welcome-card h2 { font-size: 30px; margin: 0 0 10px; color: var(--navy); letter-spacing: -.4px; }
.welcome-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.welcome-card .wc-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--coral); color: var(--navy);
  font-weight: 700; font-size: 15px; border-radius: 999px; padding: 13px 24px;
  box-shadow: 0 4px 16px rgba(255, 135, 102, .4);
}
.welcome-card .wc-hint { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.welcome-card .wc-skip {
  display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--muted);
  text-decoration: underline; cursor: pointer; background: none; border: none; font-family: inherit;
}
@keyframes welcomeIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .welcome-card { animation: none; } }

/* Soft glow highlight while the tour narrates a section (soft elevation, no hard outline) */
.tour-glow {
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(255, 135, 102, .18), 0 10px 40px rgba(39, 92, 127, .18);
  background: rgba(255, 255, 255, .55);
  transition: box-shadow .5s ease, background .5s ease;
}
html[data-theme="performance"] .tour-glow { background: rgba(30, 41, 59, .4); }

/* Header replay control */
.tour-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font: 600 12.5px/1 inherit; font-family: inherit;
  padding: 6px 11px; border-radius: 999px; cursor: pointer; text-decoration: none;
  transition: color .15s, box-shadow .15s;
}
.tour-btn:hover { color: var(--navy); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
html[data-theme="performance"] .tour-btn { background: #0f172a; }
@media (max-width: 700px) { .tour-btn .tour-word { display: none; } }

/* ── Per-tile audio overview button ── */
.tile-audio {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; padding: 2px 0; margin: 2px 0 10px;
  font: 600 13px/1 inherit; font-family: inherit; color: var(--steel);
  cursor: pointer;
}
.tile-audio .ta-disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--coral); color: var(--navy);
  box-shadow: 0 2px 8px rgba(255, 135, 102, .35);
  transition: transform .12s;
}
.tile-audio:hover .ta-disc { transform: scale(1.1); }
.tile-audio[aria-pressed="true"] .ta-disc { background: var(--navy); color: #fff; }
.tile-audio .ta-time {
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--muted);
}
/* Cards are flex columns stretched to equal height per grid row. The CTA row
   is pinned to the bottom, and the listen button sits under it as the card's
   last row — so the coral discs land at the same offset from the bottom edge
   on every card, no matter how the blurb or the CTA pills wrap. */
.card .ctas { margin-top: auto; }
.card .tile-audio { margin: 4px 0 0; }

/* Tour scroll padding: highlighted sections clear the header + glow ring */
.tool-section { scroll-margin-top: 96px; }

/* ── Page listen button (hero invitation on tool pages, no autoplay) ── */
.page-listen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.page-listen-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--coral); color: var(--navy); border: none; cursor: pointer;
  font: 700 14px/1 inherit; font-family: inherit;
  padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 135, 102, .35);
  transition: transform .12s, box-shadow .12s;
}
.page-listen-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 135, 102, .45); }
.page-listen-btn[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: 0 4px 14px rgba(19, 46, 63, .3); }
.page-listen .pl-time {
  font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: rgba(19, 46, 63, .16); border-radius: 999px; padding: 4px 8px;
}
.page-listen-btn[aria-pressed="true"] .pl-time { background: rgba(255, 255, 255, .18); }
.page-listen .pl-note { font-size: 12.5px; color: var(--muted); }

/* ── Tour control bar (pause / end) ── */
.tour-controls {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 66;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 10px 7px 16px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .2);
}
.tour-controls[hidden] { display: none; }
.tour-controls .tc-title {
  font: 700 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink);
  margin-right: 4px;
}
.tc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--steel);
  font: 600 13px/1 inherit; font-family: inherit;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: color .15s, box-shadow .15s;
}
.tc-btn:hover { color: var(--navy); box-shadow: 0 1px 3px rgba(15,23,42,.15); }
.tc-btn.tc-exit { color: var(--muted); }
.tc-btn.tc-exit:hover { color: #b5462a; }
html[data-theme="performance"] .tour-controls, html[data-theme="performance"] .tc-btn { background: #0f172a; }