/*
Theme Name:   Foundry Labs
Theme URI:    https://labs.ai.azure.com
Description:  Foundry Labs 2.0 — dark-theme child of Twenty Twenty-Five. All design tokens for the Azure AI Foundry Labs site revamp live here.
Author:       Microsoft Azure AI
Version:      1.1.36
Template:     twentytwentyfive
Text Domain:  foundry-labs
Requires at least: 6.7
Tested up to: 6.8
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   FOUNDRY LABS 2.0 — DESIGN TOKEN SYSTEM
   Source of truth: 01_FOUNDRY_HOME_DEMO.html :root block
   All custom work references these variables.
   ============================================================ */

:root {

  /* ── FONT STACK ── */
  --font-body: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system,
               BlinkMacSystemFont, sans-serif;

  /* ── BRAND COLORS ── */
  --bg:             #030208;              /* brand Primary Black (indigo undertone) */
  --surface:        rgba(255,255,255,0.05);
  --surface-2:      rgba(255,255,255,0.08);
  --surface-hover:  rgba(10,11,126,0.80); /* brand Navy Blue #0A0B7E */
  --border:         rgba(255,255,255,0.09);
  --border-light:   rgba(255,255,255,0.16);
  --border-card:    rgba(79,66,253,0.20); /* brand Bright Indigo #4F42FD */
  --border-tag:     rgba(255,255,255,0.30);
  --text:           #f0f2f7;
  --text-2:         #ffffff;
  --status-online:  #4afa8a;

  /* ── SPACING SCALE (8px base) ──
     Small steps (1–4) are FIXED — they govern icon/button padding, gap-row
     micro-spacing, and inline gutters where pixel precision matters.
     Larger steps (5–12) are FLUID via clamp() so card padding and section
     gutters scale with viewport width, preventing the cramped mobile look
     where padding/margins compress without the type compressing with them. */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   clamp(16px, 4vw,    24px);
  --space-6:   clamp(20px, 5vw,    32px);
  --space-7:   clamp(20px, 5.5vw,  40px);
  --space-8:   clamp(24px, 6.5vw,  48px);
  --space-9:   clamp(32px, 8vw,    64px);
  --space-10:  clamp(40px, 10vw,   80px);
  --space-11:  clamp(48px, 12vw,   96px);
  --space-12:  clamp(56px, 14vw, 120px);

  /* ── TYPOGRAPHY — SIZES ──
     Fluid px-only scale. Each clamp ramps linearly between two anchors:
       mobile floor at viewport 480px → desktop ceiling at viewport 1280px.
     Math is `slope = (ceil − floor) / 800`, `offset = floor − slope × 480`.

     The earlier rem-based clamp shape was responsive in spec but broke in
     the WordPress runtime because Gutenberg / WP core can rescale the
     root rem unit, which collapsed --text-base to ~12px. The interim
     fixed-px tokens stopped that drift but killed responsiveness entirely
     (mobile and desktop ended up identical). Using clamp with px on both
     sides keeps the responsive ramp AND immunises us from rem mutation.

     Desktop ceilings (16 / 18 / 20 / 24) match the design HTML
     (01_FOUNDRY_HOME.html :root). 2xl+ tokens already use px clamps and
     are unchanged. */
  --text-xs:      11px;
  --text-sm:      14px;
  --text-base:    clamp(14px, 0.25vw  + 12.8px, 16px);   /* 14 → 16 */
  --text-md:      clamp(15px, 0.375vw + 13.2px, 18px);   /* 15 → 18 */
  --text-lg:      clamp(16px, 0.5vw   + 13.6px, 20px);   /* 16 → 20 */
  --text-xl:      clamp(18px, 0.75vw  + 14.4px, 24px);   /* 18 → 24 */
  --text-2xl:     clamp(28px, 3vw, 42px);
  --text-3xl:     clamp(36px, 4vw, 60px);
  --text-4xl:     clamp(40px, 5.5vw, 82px);
  --text-hero:    clamp(52px, 7.5vw, 110px);
  --text-display: clamp(28px, 4vw, 52px);

  /* ── TYPOGRAPHY — LINE HEIGHTS ── */
  --lh-display: 0.95;
  --lh-title:   1.0;
  --lh-heading: 1.2;
  --lh-body:    1.65;
  --lh-ui:      1.6;

  /* ── TYPOGRAPHY — LETTER SPACING ── */
  --ls-hero-label:    0.18em;
  --ls-section-label: 0.15em;
  --ls-eyebrow:       0.25em;
  --ls-button:        0.08em;
  --ls-nav:           0.06em;
  --ls-brand:         0.04em;
  --ls-default:       0.02em;

  /* ── BORDER RADIUS ── */
  --radius-xs:         4px;
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-card:      16px;
  --radius-card-mini: 14px;
  --radius-panel:     20px;
  --radius-pill:     100px;
  --radius-circle:    50%;
  --radius-focus:      3px; /* Fluent focus ring — intentionally off-grid */

  /* ── Z-INDEX SCALE ── */
  --z-canvas:   0;
  --z-content:  1;
  --z-sticky:   2;
  --z-glow:    10;
  --z-nav:    200;
  --z-skip:  9999;

  /* ── LAYOUT ── */
  --page-gutter:         40px;
  --nav-height:          80px;
  --parallax-sticky-top: calc(var(--nav-height) + var(--space-7));  /* 120px */
  --parallax-sticky-h:   calc(100vh - var(--parallax-sticky-top));
  --hero-top-padding:    calc(var(--nav-height) + var(--space-9));  /* 144px */

  /* ── CONTAINERS ── */
  --container-max:    1200px;
  --container-text:    900px;
  --container-narrow:  560px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background-color: #141820;
  background-image:
    radial-gradient(ellipse 70% 65% at 100% 0%,   rgba(114,116,255,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 0%   15%,  rgba(133,144,176,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50%  100%, rgba(3,2,8,0.55)       0%, transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-default);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL LAYOUT UTILITIES
   ============================================================ */
.container        { width: 100%; max-width: var(--container-max);    margin-inline: auto; }
.container-text   { width: 100%; max-width: var(--container-text);   margin-inline: auto; }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; }

.section {
  padding-block:  var(--space-11);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}
.section--border-top  { border-top: 1px solid var(--border); }
.section--border-both { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-header   { text-align: center; margin-bottom: var(--space-8); }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--ls-section-label);
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-3);
  justify-content: center;
}

.section-title {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-default);
  margin-bottom: var(--space-4);
}
.section-title--sm { font-size: var(--text-2xl); line-height: 1.1; }

.section-sub {
  font-size: var(--text-lg);
  color: var(--text-2);
  max-width: var(--container-narrow);
  line-height: var(--lh-ui);
  font-weight: 400;
  margin-inline: auto;
}
.section-sub--sm { font-size: var(--text-base); line-height: var(--lh-body); margin-bottom: var(--space-6); }

/* Fade-up entry animation */
.fade-up             { animation: fadeUp 0.6s ease both; }
.fade-up.d1          { animation-delay: 0.10s; }
.fade-up.d2          { animation-delay: 0.25s; }
.fade-up.d3          { animation-delay: 0.40s; }
.fade-up.d4          { animation-delay: 0.55s; }
.fade-up.d5          { animation-delay: 0.70s; }
.fade-up.d6          { animation-delay: 0.85s; }

/* ============================================================
   NAVIGATION
   ============================================================ */
nav[aria-label="Main navigation"] {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-inline: var(--page-gutter);
  padding-block: var(--space-3);
  height: var(--nav-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-logo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: var(--ls-brand);
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  display: block;
  padding: 0 var(--space-5);
  height: var(--nav-height);
  line-height: var(--nav-height);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-links a:hover,
.nav-links a:focus-visible { opacity: 0.7; }

.nav-links a[aria-current="page"] {
  background: rgba(114, 116, 255, 0.60);
  color: #fff;
  opacity: 1;
}

.nav-links a[aria-current="page"]:hover,
.nav-links a[aria-current="page"]:focus-visible {
  background: rgba(114, 116, 255, 0.75);
  opacity: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
}

.btn-pill { padding: var(--space-2) var(--space-6); border-radius: var(--radius-pill); }

.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #ddd; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--text-2);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}

.btn-hero {
  padding: var(--space-3) var(--space-7);
  /* Some runtime DOM (from a plugin/admin extension) injects empty
     `.btn-glow-wrap` / `.btn-glow-outer` siblings next to the button text.
     The parent `.btn` has `gap: var(--space-2)`, so each empty sibling adds
     a visible flex gap on the right of the text. Zero the gap here and pull
     any element children out of the flex flow so only the text affects
     horizontal layout — making the pill correctly text-centred. */
  position: relative;
  gap: 0;
  /* Hero CTAs stay at 16px (do NOT use --text-base). The hero is the largest
     viewport-scaled element on the page; shrinking the CTA below 16px on
     phones makes it look like a secondary action. Design intent is "always
     a primary action regardless of viewport". */
  font-size: 16px;
  font-weight: 600;
}

.btn-hero > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ============================================================
   HERO — Gradient background (no canvas)
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(620px, 78vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--hero-top-padding);
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-9);
  overflow: visible;
  z-index: var(--z-content);
  background-color: transparent;
}

/* Canvas particle layers — terrain wave (hero) + jelly sphere (New on Labs) */
#dot-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* Extend the wave down past the hero so the dense band sits behind the
     "Featured Technologies" eyebrow without shifting that text.
     var(--space-12)=120px is the carousel's top padding (gets us TO the
     eyebrow); the extra 80px pushes us past it so the eyebrow sits inside
     the wave. */
  height: calc(100% + var(--space-12) + 80px);
  z-index: 0;
  pointer-events: none;
  /* Mask centre nudged from 72% → 80% so the dense particle band shifts
     down with the taller canvas and lands right around the eyebrow. */
  -webkit-mask-image: radial-gradient(ellipse 120% 115% at 50% 80%, black 15%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.25) 70%, transparent 88%);
          mask-image: radial-gradient(ellipse 120% 115% at 50% 80%, black 15%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.25) 70%, transparent 88%);
}

.dot-canvas-zone { position: relative; }
#dot-canvas-2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.dot-canvas-zone > *:not(#dot-canvas-2) { position: relative; z-index: 1; }

/* Hide the legacy "New on Foundry Labs" eyebrow inside the latest-on-labs
   section. The fallback and defaults no longer render it, but already-seeded
   front-page zones may still contain the markup in the DB. */
.dot-canvas-zone .section-eyebrow { display: none; }

/* NOTE: no prefers-reduced-motion hide rule. Windows reports `reduce` by default,
   which would blank the canvases. The JS keeps motion gentle / pauses off-screen. */

/* User-controlled animation toggle (assets/js/anim-toggle.js).
   When the user disables animations, the JS also calls FoundryParticles.pauseAll(); 
   the rule below is belt-and-braces in case JS hasn't paused yet (e.g. during init). */
body.foundry-anims-off #dot-canvas,
body.foundry-anims-off #dot-canvas-2 { display: none !important; }

/* Canvas on non-homepage hero sections — contained within overflow:hidden hero.
   Use height:100% which resolves against the positioned ancestor's computed height.
   Shift mask centre upward so particles fill the hero evenly. */
.page-header #dot-canvas,
.about-hero #dot-canvas,
.community-hero #dot-canvas,
.stories-hero #dot-canvas {
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 140% 130% at 50% 40%, black 10%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.25) 68%, transparent 90%);
          mask-image: radial-gradient(ellipse 140% 130% at 50% 40%, black 10%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.25) 68%, transparent 90%);
}

.foundry-anim-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(20, 24, 32, 0.72);
  color: rgba(255,255,255,0.9);
  font: 500 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.foundry-anim-toggle:hover { background: rgba(30,36,48,0.92); border-color: rgba(255,255,255,0.32); }
.foundry-anim-toggle:active { transform: translateY(1px); }
.foundry-anim-toggle:focus-visible { outline: 2px solid rgba(120,170,255,0.7); outline-offset: 2px; }

.foundry-anim-toggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4f8cff;
  box-shadow: 0 0 8px rgba(79,140,255,0.85);
  animation: foundry-anim-toggle-pulse 1.6s ease-in-out infinite;
}
.foundry-anim-toggle[aria-pressed="false"] .foundry-anim-toggle__dot {
  background: rgba(255,255,255,0.3);
  box-shadow: none;
  animation: none;
}
@keyframes foundry-anim-toggle-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (max-width: 600px) {
  .foundry-anim-toggle__label { display: none; }
  .foundry-anim-toggle { padding: 8px; }
}

/* Subtle radial accent — faint warm/violet glow at top edge over near-black base */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(50,90,200,0.225) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 40%, rgba(90,50,180,0.15)  0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 30%, rgba(30,110,220,0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: var(--z-sticky);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-text);
}

.hero-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--ls-hero-label);
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-label svg {
  width: 96px;
  height: 96px;
  filter: brightness(1.18) saturate(1.18)
          drop-shadow(0 0 18px rgba(110, 91, 255, 0.35));
}

.hero h1 {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-default);
  margin-bottom: var(--space-5);
  color: #ffffff;
}

.hero-sub {
  font-size: var(--text-xl);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: var(--ls-default);
  margin-bottom: var(--space-7);
  max-width: var(--container-text);
  line-height: var(--lh-body);
  text-align: center;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: var(--space-9) var(--page-gutter);
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-7);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  /* Per design feedback, nudge the stroke logo 100px to the right of
     the natural grid-column edge. Negative right margin isn't needed —
     `margin-left` shifts the icon without altering the footer grid. */
  margin-left: 100px;
}

.footer-logo-img {
  display: block;
  width: 192px;
  height: 192px;
  object-fit: contain;
  opacity: 0.8;
}

.footer-col h5 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: var(--space-5);
  letter-spacing: var(--ls-brand);
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  color: rgba(240,242,247,0.62);
  text-decoration: none;
  margin-bottom: var(--space-3);
  font-weight: 400;
  transition: opacity 0.2s, color 0.2s;
}
.footer-col a:hover { color: var(--text-2); opacity: 1; }

/* Footer column `<a>` is `display: inline-flex` so the new external-link
   ↗ glyph can sit on the same line; restore the per-item block stacking
   by promoting each link's wrapper line via `display: block` siblings. */
.footer-col a + a,
.footer-col h5 + a { /* no-op: anchors are already siblings */ }
.footer-col a {
  display: flex; /* fills column width so vertical stack remains intact */
}

/* External-link affordance: small boxed "open in new window" glyph
   appended to any footer link pointing off-site (column rows AND the
   bottom legal bar). Pure CSS (inline data URI) so no extra HTTP and
   the icon inherits link color via currentColor. Matches the reference
   (Feather external-link: framed square + arrow popping out). */
.footer-col a[target="_blank"]::after,
.footer-legal-links a[target="_blank"]::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") center/contain no-repeat;
  flex: 0 0 auto;
}
.footer-legal-links a {
  display: inline-flex;
  align-items: center;
}

.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.footer-bottom > .footer-legal-links { grid-column: 2; }
.footer-bottom > .footer-microsoft   { grid-column: 3; justify-self: end; }

.footer-microsoft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: opacity 0.2s;
}
.footer-microsoft:hover { opacity: 0.75; }
.footer-microsoft svg { display: block; }

.footer-bottom p,
.footer-bottom a {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 400;
  letter-spacing: var(--ls-brand);
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer-bottom a:hover { opacity: 0.7; }

.footer-legal-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   GRIDS & CARD STACK
   ============================================================ */
.grid         { display: grid; gap: var(--space-5); }
.grid-2       { grid-template-columns: repeat(2, 1fr); }
.grid-3       { grid-template-columns: repeat(3, 1fr); }
.grid-4       { grid-template-columns: repeat(4, 1fr); }
.grid-feature { grid-template-columns: 3fr 2fr; align-items: stretch; }
.grid-row     { margin-bottom: var(--space-5); }

.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ============================================================
   TAG & CHIP
   ============================================================ */
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-tag);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
  pointer-events: none;
  /* Prevent stretching when the tag is a flex/grid item (e.g., inside
     .card-body which is display:flex; flex-direction:column). Without
     this, default align-items:stretch overrides the inline-block sizing
     and the pill spans the full container width. No-op in block parents. */
  align-self: flex-start;
}
.tag--no-margin { margin-bottom: 0; }

.sticky-dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: var(--text-2);
  animation: pulse-dot 3s ease-in-out infinite;
  flex-shrink: 0;
}

.chip {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-2);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  font-family: var(--font-body);
}
.chip:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   CAROUSEL — Featured experiments (T3)
   ============================================================ */
.carousel-section {
  padding: var(--space-12) 0;
  overflow: hidden;
  position: relative;
  /* Match .hero's z-index so the bleeding hero canvas sits BEHIND the
     carousel content (later DOM element wins at equal z-index). */
  z-index: var(--z-content);
}

.carousel-header {
  text-align: center;
  padding: 0 var(--page-gutter);
  margin-bottom: var(--space-9);
}

.carousel-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--ls-section-label);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-3);
}

/* "Featured Technologies" eyebrow — hidden via CSS because the text lives in
   Gutenberg block content stored in the database, not in the PHP template. */
.carousel-eyebrow { display: none; }

.carousel-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: var(--ls-default);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: var(--space-4);
}

.carousel-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  border-radius: var(--radius-circle);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.carousel-arrow:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow--prev { left: 20px; }
.carousel-arrow--next { right: 20px; }

.carousel-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  padding: var(--space-3) 0;
}

.carousel-slide {
  flex-shrink: 0;
  width: 72vw;
  max-width: 960px;
  min-width: 600px;
  margin: 0 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  background: var(--surface-2);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0.3;
  transform: scale(0.97);
  /* Establish an inline-axis container so children can size from the slide's
     own width via @container queries — independent of viewport. Mobile media
     queries shrink the slide to ~92vw; on a 375px phone that is ~345px and
     the card-relative scale takes over from viewport-relative scale. */
  container-type: inline-size;
  container-name: slide;
}
.carousel-slide.cs-active {
  opacity: 1;
  transform: scale(1);
}

.cs-image {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
  /* Fluid min-height: phones get a shorter image so vertical stack fits
     above-the-fold; desktop keeps the dramatic 380px hero image. */
  min-height: clamp(220px, 35vw, 380px);
}

/* Slide image gradient backgrounds (replace canvas) */
.cs-img--fara      { background: linear-gradient(135deg, rgba(44,8,172,0.5) 0%, rgba(79,66,253,0.25) 60%, rgba(10,11,126,0.6) 100%); }
.cs-img--phi4      { background: linear-gradient(160deg, rgba(79,66,253,0.4) 0%, rgba(114,116,255,0.2) 50%, rgba(44,8,172,0.5) 100%); }
.cs-img--rosetta   { background: linear-gradient(135deg, rgba(0,187,195,0.2) 0%, rgba(10,11,126,0.5) 50%, rgba(44,8,172,0.4) 100%); }
.cs-img--calclm    { background: linear-gradient(160deg, rgba(44,8,172,0.4) 0%, rgba(79,66,253,0.3) 50%, rgba(10,11,126,0.5) 100%); }
.cs-img--peace     { background: linear-gradient(135deg, rgba(89,0,85,0.4) 0%, rgba(44,8,172,0.35) 60%, rgba(79,66,253,0.25) 100%); }
.cs-img--aurora    { background: linear-gradient(160deg, rgba(0,187,195,0.15) 0%, rgba(44,8,172,0.4) 40%, rgba(10,11,126,0.7) 100%); }

.cs-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-tag);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
}

.cs-content {
  flex: 0 0 45%;
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}
.cs-content h3 {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  letter-spacing: var(--ls-default);
  line-height: var(--lh-heading);
  margin: var(--space-4) 0 0;
}
.cs-tagline {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(180,200,255,0.8);
  letter-spacing: 0.02em;
  margin: 0;
}
.cs-desc {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.6);
  line-height: var(--lh-body);
  margin: 0;
}
.cs-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.cs-cta .btn-primary {
  background: #fff;
  color: #000;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.cs-cta .btn-primary:hover { background: #e8e8e8; transform: translateY(-1px); }
.cs-cta .btn-ghost-sm {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  transition: color 0.2s, border-color 0.2s;
}
.cs-cta .btn-ghost-sm:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

/* ── Carousel-slide container queries (Phase 6g) ──
 * Fine-tunes card-internal typography and spacing once the SLIDE itself
 * (not the viewport) drops below the listed thresholds. Triggers on
 * portrait phones where the slide has collapsed to ~345px wide, without
 * affecting wider layouts on narrow viewports such as split-screen
 * tablet windows. cqi = 1% of the container's inline (width) axis. */
@container slide (max-width: 500px) {
  .cs-content {
    padding: clamp(20px, 7cqi, 40px) clamp(16px, 5cqi, 32px);
  }
  .cs-content h3 {
    font-size: clamp(20px, 6.5cqi, 28px);
  }
  .cs-tagline,
  .cs-desc {
    font-size: clamp(13px, 4cqi, 16px);
  }
  .cs-cta {
    margin-top: clamp(12px, 4cqi, 24px);
    gap: clamp(8px, 2.5cqi, 16px);
  }
  .cs-cta .btn-primary,
  .cs-cta .btn-ghost-sm {
    font-size: clamp(13px, 4cqi, 16px);
    padding: clamp(8px, 2.5cqi, 14px) clamp(16px, 5cqi, 28px);
  }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: 0 var(--space-6);
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-circle);
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, width 0.3s;
  padding: 0;
}
.carousel-dot.cd-active {
  background: rgba(255,255,255,0.9);
  width: 24px;
  border-radius: 4px;
}

/* ============================================================
   SHARED OVERLAY — radial gradient layer
   ============================================================ */
.section-overlay-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(50,90,200,0.225) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 40%, rgba(90,50,180,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 30%, rgba(30,110,220,0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================================
   FRONTIER SECTION — "Explore the frontier of AI innovation" (T4)
   ============================================================ */
.frontier-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  padding-block: var(--space-9);
  overflow: hidden;
  background: linear-gradient(160deg, #111830 0%, #162040 35%, #1a2545 60%, #0f1828 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.frontier-text {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  padding-inline: var(--page-gutter);
}
.frontier-text h2 {
  font-family: var(--font-body);
  font-size: var(--text-4xl);
  font-weight: 300;
  color: var(--text-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-default);
}

@media (min-width: 769px) {
  .frontier-text h2 {
    font-size: var(--text-2xl);
  }
}

.frontier-video {
  position: relative;
  z-index: var(--z-content);
  width: min(var(--container-max), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}

/* ============================================================
   NEW ON LABS — Bento mini cards (T5)
   ============================================================ */
.card-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-mini);
  padding: var(--space-5);
  cursor: pointer;
  box-shadow: none;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.card-mini:hover {
  background: var(--surface-hover);
  box-shadow:
    0 10px 18px -8px rgba(80,100,255,0.30),
    0 18px 32px -14px rgba(100,80,255,0.32),
    0 24px 45px -20px rgba(80,60,220,0.22);
}

.card-mini--featured {
  border-color: var(--border-light);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}

.card-mini--horizontal {
  border-color: var(--border-light);
  padding: 0;
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: stretch;
}
.card-mini--horizontal .tag { margin-bottom: var(--space-5); }

.card-mini--grid {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.card-mini--grid .card-mini-body--md { flex: 1; }

.card-mini-img {
  position: relative;
  flex: 1;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius-card-mini) var(--radius-card-mini) 0 0;
}
.card-mini--horizontal .card-mini-img {
  border-radius: var(--radius-card-mini) 0 0 var(--radius-card-mini);
}
.card-mini-img--sm  { min-height: unset; height: 100%; }
/* Lock the image height for the 3-card grid row so cards in a CSS-grid
   row (which stretch to the tallest card) all show the same image size.
   Without flex:0 + min-height override, the inherited
   `flex:1; min-height:260px` from .card-mini-img made the image grow to
   fill any extra card height — so a card with a longer description ended
   up with a bigger image than its neighbors. */
.card-mini-img--md  {
  flex: 0 0 auto;
  height: 240px;
  min-height: 240px;
}

.card-mini-img-tag {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
}
.card-mini-img-tag--sm {
  top: var(--space-4);
  left: var(--space-4);
}

.card-mini-body {
  padding: var(--space-6);
  background: var(--surface);
}
.card-mini-body--sm { padding: var(--space-5); }
.card-mini-body--md { padding: var(--space-5) var(--space-5) var(--space-6); }

/* Desktop only: lay the 3-card row body out as a flex column so the
   "Try it now" link can be pushed to the bottom of the card via
   `margin-top: auto`. CSS Grid stretches all cards to the tallest card's
   height; without this, shorter cards left empty space below the link.
   Scoped to min-width:769px so the mobile (single-column, content-sized)
   layout is unchanged — mobile cards collapse to natural content height
   and don't need a flex spacer. */
@media (min-width: 769px) {
  .card-mini--grid .card-mini-body--md {
    display: flex;
    flex-direction: column;
  }
  .card-mini--grid .card-mini-body--md .card-mini-link {
    align-self: flex-start;
    margin-top: auto;
  }
}

.card-mini-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-mini-meta--between {
  /* Title (<h4>) and tagline (<span.card-mini-date>) flow as continuous
     inline text so the tagline stays on the same text block as the title
     and wraps mid-text rather than dropping to its own line as a unit.
     The earlier flex/justify-between layout pinned the tagline to the
     right edge (overlap) and the later flex-wrap version dropped the
     entire tagline span to a new line for long titles — neither matched
     the design intent of "Title <sub>Tagline</sub>". */
  display: block;
  /* Visual gap between the pill above and the title text below. The pill
     uses .tag--no-margin in bento cards so this is the only spacing. */
  margin-top: 15px;
  margin-bottom: var(--space-3);
}

.card-mini-date {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  letter-spacing: var(--ls-nav);
  margin-bottom: var(--space-2);
  display: block;
}
.card-mini-meta .card-mini-date,
.card-mini-meta--between .card-mini-date { margin-bottom: 0; }
/* Title on its own line, tagline below it — applies to every bento card
   (featured, horizontal stack, and 3-up grid). The earlier inline-flow
   variant only dropped the tagline to a new line when the title wrapped,
   so the layout looked inconsistent across cards. */
.card-mini-meta--between h4 {
  display: block;
  margin-bottom: 0;
}
.card-mini-meta--between .card-mini-date {
  display: block;
  margin-left: 0;
}

.card-mini h4 {
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--ls-default);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-3);
}
.card-mini p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.80);
  line-height: var(--lh-body);
  font-weight: 400;
  margin-bottom: var(--space-5);
}

.card-mini-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  letter-spacing: 0.02em;
  border: none;
  box-shadow: inset 0 0 0 1.5px var(--border-light);
  padding: var(--space-2) 50px;
  border-radius: var(--radius-pill);
  transition: color 0.2s, box-shadow 0.2s;
}
.card-mini-link:hover,
.card-mini-link:focus-visible {
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
}

/* Card image gradient backgrounds */
.card-img--gigatime     { background: linear-gradient(160deg, rgba(0,187,195,0.15) 0%, rgba(44,8,172,0.4) 40%, rgba(10,11,126,0.7) 100%); }
.card-img--magentic     { background: linear-gradient(135deg, rgba(79,66,253,0.3) 0%, rgba(44,8,172,0.6) 100%); }
.card-img--mattergen    { background: linear-gradient(135deg, rgba(0,187,195,0.2) 0%, rgba(10,11,126,0.5) 100%); }
.card-img--debug-gym    { background: linear-gradient(160deg, rgba(44,8,172,0.5) 0%, rgba(79,66,253,0.2) 100%); }
.card-img--trellis      { background: linear-gradient(160deg, rgba(0,187,195,0.25) 0%, rgba(10,11,126,0.5) 100%); }
.card-img--prompt-wizard { background: linear-gradient(160deg, rgba(89,0,85,0.4) 0%, rgba(44,8,172,0.4) 100%); }

/* ============================================================
   VISUAL BREAK — Full-bleed (T6)
   ============================================================ */
.section-visual-break {
  position: relative;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #111830 0%, #162040 35%, #1a2545 60%, #0f1828 100%);
}

.section-visual-break-inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  padding-inline: var(--page-gutter);
}
.section-visual-break-inner p {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  line-height: var(--lh-title);
}

/* ============================================================
   ABOUT — HERO
   ============================================================ */
.about-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--space-9));
  padding-bottom: 80px;
  padding-inline: var(--page-gutter);
  text-align: center;
  overflow: hidden;
  z-index: var(--z-content);
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(79,66,253,0.16) 0%, transparent 65%);
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-max);
}

.about-hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-5);
}

.about-hero h1 {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-6);
}

.about-hero .hero-sub {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-2);
  max-width: var(--container-text);
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: var(--lh-body);
}

/* ============================================================
   ABOUT — VALUE PROPS
   ============================================================ */
.vp-section {
  /* Top padding dropped entirely (matching the stories pattern in
     `.lead-section` / `.feed-section`). The hero's padding-bottom
     supplies the sole gap above the card row — no double-stacking. */
  padding-bottom: var(--space-12);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}

.vp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.vp-card {
  background: var(--surface-2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 48px 32px;
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.vp-card:hover {
  background: var(--surface-hover);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 18px -8px rgba(80,100,255,0.30),
    0 18px 32px -14px rgba(100,80,255,0.32),
    0 24px 45px -20px rgba(80,60,220,0.22);
}

/* VP card glow border */
.vp-card-glow-wrap {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(79,66,253,0.5), rgba(114,116,255,0.3));
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.vp-card:hover .vp-card-glow-wrap {
  opacity: 1;
}

.vp-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79,66,253,0.18);
  border: 1px solid rgba(79,66,253,0.30);
  border-radius: 8px;
  margin-bottom: 24px;
}

.vp-card h3 {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-3);
}

.vp-card p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  font-weight: 400;
}

/* ============================================================
   ABOUT — NARRATIVE
   ============================================================ */
.narrative-section {
  padding-block: 64px;
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}

.narrative-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  max-width: var(--container-max);
  margin-inline: auto;
  align-items: center;
}

.narrative-text .section-eyebrow {
  justify-content: flex-start;
}

.narrative-text h2 {
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.0;
  color: var(--text-2);
  margin-bottom: var(--space-7);
}

.narrative-text h2 strong {
  font-weight: 400;
}

.narrative-text p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--space-5);
}

.narrative-stats {
  display: flex;
  gap: 48px;
  margin-top: var(--space-7);
}

.narrative-stat {
  display: flex;
  flex-direction: column;
}

.narrative-stat-number {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-3);
  text-align: center;
}

.narrative-stat-label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--text-2);
  margin-top: var(--space-2);
}

/* ── Orbit diagram ── */
.narrative-orbit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
}

.orbit-container {
  position: relative;
  width: 340px;
  height: 340px;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(114,116,255,0.15);
}

.orbit-ring--1 {
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin1 18s linear infinite;
}

.orbit-ring--2 {
  width: 260px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(114,116,255,0.12);
  animation: orbitSpin2 28s linear infinite reverse;
}

.orbit-ring--3 {
  width: 340px;
  height: 340px;
  top: 0;
  left: 0;
  border-color: rgba(114,116,255,0.08);
  border-style: dashed;
  animation: orbitSpin3 42s linear infinite;
}

.orbit-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,66,253,0.25), transparent 70%);
  pointer-events: none;
}

.orbit-node {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(30,26,60,0.9);
  border: 1px solid rgba(114,116,255,0.45);
  z-index: 4;
}

/* Ring 1: 2 nodes at opposite ends */
.orbit-ring--1 .orbit-node--pos1 { top: -18px; left: 50%; transform: translateX(-50%); }
.orbit-ring--1 .orbit-node--pos2 { bottom: -18px; left: 50%; transform: translateX(-50%); }

/* Ring 2: 3 nodes evenly spaced */
.orbit-ring--2 .orbit-node--pos1 { top: -18px; left: 50%; transform: translateX(-50%); }
.orbit-ring--2 .orbit-node--pos2 { bottom: 15%; right: -18px; }
.orbit-ring--2 .orbit-node--pos3 { bottom: 15%; left: -18px; }

/* Ring 3: 1 node */
.orbit-ring--3 .orbit-node--pos1 { top: 50%; right: -18px; transform: translateY(-50%); }

.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(114,116,255,0.40);
  background: rgba(79,66,253,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes orbitSpin1 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbitSpin2 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbitSpin3 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   ABOUT — DOMAINS
   ============================================================ */
.domains-section {
  /* Was --space-12 (120px each side desktop) which produced ~184px gap
     to .narrative-section above and ~240px to .mission-section below.
     Tightened to --space-10 (80px) now that the "Innovation areas"
     eyebrow is gone — visual rhythm matches narrative-section's 64px
     padding more closely while keeping clear section separation.
     Mobile patch (style.css ≤768) still forces --space-9. */
  padding-block: var(--space-10);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}

.domains-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-9);
}

.domains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ── Domain card ── */
.domain-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.domain-card:hover {
  background: var(--surface-hover);
  box-shadow:
    0 8px 20px -4px rgba(80,100,255,0.25),
    0 16px 30px -10px rgba(100,80,255,0.22);
}

/* Domain card glow border */
.domain-card-glow-wrap {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.domain-card:hover .domain-card-glow-wrap,
.domain-card.is-open .domain-card-glow-wrap {
  opacity: 1;
}

/* Per-domain glow gradients */
.domain-card--bio .domain-card-glow-wrap    { background: linear-gradient(135deg, rgba(79,66,253,0.5), rgba(114,116,255,0.3)); }
.domain-card--lang .domain-card-glow-wrap   { background: linear-gradient(135deg, rgba(79,195,247,0.4), rgba(114,116,255,0.3)); }
.domain-card--climate .domain-card-glow-wrap { background: linear-gradient(135deg, rgba(74,250,138,0.35), rgba(114,116,255,0.3)); }
.domain-card--agent .domain-card-glow-wrap  { background: linear-gradient(135deg, rgba(255,114,116,0.4), rgba(114,116,255,0.3)); }
.domain-card--math .domain-card-glow-wrap   { background: linear-gradient(135deg, rgba(247,168,79,0.4), rgba(114,116,255,0.3)); }
.domain-card--viz .domain-card-glow-wrap    { background: linear-gradient(135deg, rgba(207,116,255,0.4), rgba(79,66,253,0.3)); }

/* Per-domain canvas backplate color. The matching .domain-canvas-wrap
   element receives an inline background-image (URL only) per row; this
   block supplies the color so editors never have to deal with CSS
   colors in wp-admin. Keep these in sync with the .domain-card--<key>
   modifiers used by the About-page renderer. */
.domain-card--climate .domain-canvas-wrap { background-color: rgb(4,16,10); }
.domain-card--agent   .domain-canvas-wrap { background-color: rgb(16,9,0); }
.domain-card--bio     .domain-canvas-wrap { background-color: rgb(10,4,20); }
.domain-card--lang    .domain-canvas-wrap { background-color: rgb(6,6,16); }
.domain-card--viz     .domain-canvas-wrap { background-color: rgb(4,9,15); }
.domain-card--math    .domain-canvas-wrap { background-color: rgb(10,4,20); }

.domain-canvas-wrap {
  height: 140px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  margin-bottom: var(--space-5);
  transition: height 0.5s cubic-bezier(0.16,1,0.3,1);
}

.domain-card.is-open .domain-canvas-wrap {
  height: 200px;
}

.domain-indicator {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  border: 1.5px solid rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  pointer-events: none;
  z-index: 3;
}

.domain-card:hover .domain-indicator {
  border-color: rgba(255,255,255,0.8);
  color: var(--text-2);
  background: rgba(255,255,255,0.08);
}

.domain-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  border: 1.5px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  font-size: 14px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.domain-close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-2);
  border-color: rgba(255,255,255,0.8);
}

.domain-card.is-open .domain-indicator { display: none; }
.domain-card.is-open .domain-close { display: flex; }

.domain-content {
  padding: 0 var(--space-6) var(--space-6);
}

.domain-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-default);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-3);
}

.domain-content h3 {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-3);
}

.domain-content p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
  font-weight: 400;
  margin-bottom: var(--space-5);
}

.domain-card.is-open {
  background: rgba(10,11,20,0.95);
  border-color: rgba(114,116,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 18px -8px rgba(80,100,255,0.40),
    0 18px 32px -14px rgba(100,80,255,0.42),
    0 24px 45px -20px rgba(80,60,220,0.32);
}

/* Hidden data panel inside each card (source for row-panel content) */
.domain-expand-panel { display: none; }

/* ── Row panel (injected below 3-card row) ── */
.domain-row-panel {
  grid-column: 1 / -1;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
  background: rgba(10,11,20,0.95);
  border: 1px solid rgba(114,116,255,0.35);
  border-radius: 14px;
}

.domain-row-panel.is-open {
  max-height: 600px;
  opacity: 1;
  padding: 48px;
}

.domain-row-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.domain-expand-label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-2);
  margin-bottom: var(--space-5);
}

.domain-row-panel-col p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
}

.domain-expand-project-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.domain-expand-project {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.domain-expand-project:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
}

.project-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-online);
  flex-shrink: 0;
}

.project-name {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-2);
  flex: 1;
}

.project-arrow {
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.domain-expand-project:hover .project-arrow {
  transform: translateX(3px);
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   ABOUT — MISSION
   ============================================================ */
.mission-section {
  padding-block: 120px;
  padding-inline: var(--page-gutter);
  text-align: center;
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
}

.mission-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(79,66,253,0.14), transparent);
  pointer-events: none;
}

.mission-inner {
  position: relative;
  z-index: var(--z-sticky);
  max-width: var(--container-text);
  margin-inline: auto;
}

.mission-inner .section-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  margin-bottom: var(--space-7);
}

.mission-section blockquote {
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: 1.0;
  color: var(--text-2);
  max-width: 900px;
  margin: 0 auto;
  border: none;
  padding: 0;
}

.mission-section blockquote strong {
  font-weight: 300;
}

/* ============================================================
   (removed) GLOW BORDER hover for .btn-hero — reverted to the
   simple background-darken hover from .btn-primary:hover to
   match the reference 01_FOUNDRY_HOME.html behaviour.
   ============================================================ */

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --page-gutter: 20px;
    --nav-height:  60px;
  }

  /* Brand text scales down slightly to match the compressed
   * mobile nav row (60px vs desktop 80px). 15px fits within the
   * available width at 320px+, but reads as oversized against
   * the shorter mobile bar; 14px keeps it prominent without
   * crowding the hamburger. */
  .nav-logo { font-size: 14px; }

  .nav-links { display: none; } /* full mobile nav coming in T12 */

  .hero { min-height: 100svh; }
  .hero-sub { font-size: var(--text-md); }

  footer {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .footer-brand {
    grid-column: 1 / -1;
    /* Drop the desktop 100px shift on mobile so the icon doesn't
       push off-screen at narrow widths. */
    margin-left: 0;
  }
  .footer-logo-img {
    /* Half the desktop size on mobile per design feedback. */
    width: 96px;
    height: 96px;
  }
  .footer-bottom {
    /* Keep legal links + Microsoft mark on the same horizontal line on
       mobile per design feedback. Center the row as a single flex line
       and allow it to wrap only if absolutely necessary. */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
  }
  .footer-bottom > .footer-legal-links,
  .footer-bottom > .footer-microsoft { grid-column: auto; justify-self: auto; }

  /* Carousel */
  .carousel-slide { min-width: 90vw; }
  .carousel-slide { flex-direction: column; }
  .cs-image { flex: 0 0 auto; min-height: 220px; width: 100%; }
  .cs-content { padding: var(--space-6) var(--space-5); }
  /* Tighter space below the badge pill on mobile — drop the h3 top margin
     so only the flex gap (--space-4) separates pill from title. */
  .cs-content h3 { margin: 0; }

  /* Mobile-only hero polish: add a soft top accent band so the
     composition isn't bottom-heavy. The bottom blend is handled by
     .hero::after in 02a-home-hero-carousel.css (fades to #141820 to
     match the body bg). Paint-only — no JS, no extra DOM. */
  .hero::before {
    background:
      radial-gradient(ellipse 90% 25% at 50% 0%, rgba(114,116,255,0.18) 0%, transparent 75%),
      radial-gradient(ellipse 80% 60% at 50% 60%, rgba(50,90,200,0.225) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 20% 40%, rgba(90,50,180,0.15)  0%, transparent 60%),
      radial-gradient(ellipse 40% 50% at 80% 30%, rgba(30,110,220,0.15) 0%, transparent 60%);
  }

  /* Grids */
  .grid-feature { grid-template-columns: 1fr; }
  .grid-3       { grid-template-columns: 1fr; }
  .grid-2       { grid-template-columns: 1fr; }

  /* About page */
  .vp-grid           { grid-template-columns: 1fr; }
  .narrative-grid     { grid-template-columns: 1fr; gap: var(--space-9); }
  .narrative-orbit    { height: 280px; }
  .orbit-container    { width: 260px; height: 260px; }
  .orbit-ring--3      { width: 260px; height: 260px; }
  .orbit-ring--2      { width: 200px; height: 200px; }
  .orbit-ring--1      { width: 120px; height: 120px; }
  .narrative-stats    { gap: var(--space-6); flex-wrap: wrap; }
  .domains-grid       { grid-template-columns: 1fr; }
  .domain-row-panel.is-open { padding: var(--space-6); }
  .domain-row-panel-inner   { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ============================================================
   INNOVATIONS PAGE — HERO
   ============================================================ */
.page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--space-9));
  padding-bottom: 80px;
  padding-inline: var(--page-gutter);
  text-align: center;
  overflow: hidden;
  z-index: var(--z-content);
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(79,66,253,0.16) 0%, transparent 65%);
  pointer-events: none;
}

.page-header-inner {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-text);
}

.page-header-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-5);
}

.page-header h1 {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-7);
}

.page-header .hero-sub {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text);
  max-width: 900px;
  margin-inline: auto;
  line-height: var(--lh-body);
}

/* ============================================================
   INNOVATIONS PAGE — RESULTS TOOLBAR
   ============================================================ */
.results-bar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  max-width: var(--container-max);
  margin-inline: auto;
  margin-bottom: var(--space-5);
  padding-inline: var(--page-gutter);
  align-items: center;
}

.results-bar-inner {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.results-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.results-count {
  font-size: var(--text-base);
  color: var(--text-2);
}

.results-count strong {
  color: var(--text-2);
  font-weight: 500;
}

/* Sort dropdown */
.filter-sort select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 0 40px 0 20px;
  height: 36px;
  font-family: var(--font-body);
  /* 16px pinned (do NOT use var(--text-base)) — iOS Safari auto-zooms
     <input>/<select>/<textarea> on focus when computed font-size < 16px.
     The fluid token would drop to 14px on small viewports. */
  font-size: 16px;
  color: var(--text-2);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s;
}

.filter-sort select:focus,
.filter-sort select:hover { border-color: rgba(255,255,255,0.28); }
.filter-sort select option { background: #0f1220; color: var(--text-2); }

/* View toggle group */
.results-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 4px;
}

.view-btn {
  width: 36px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: all 0.15s;
}

.view-btn.is-active {
  background: rgba(255,255,255,0.12);
  color: var(--text-2);
}

.view-btn:hover:not(.is-active) { color: rgba(255,255,255,0.7); }

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

/* ============================================================
   INNOVATIONS PAGE — MAIN LAYOUT
   ============================================================ */
.innovations-layout {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-11);
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: start;
  gap: var(--space-7);
  position: relative;
  z-index: var(--z-content);
}
/* Column 1 wraps search + (mobile) toggle + sidebar so the catalog
   in column 2 doesn't span multiple rows (which previously caused the
   grid algorithm to balloon row heights and push the sidebar way down). */
.innovations-layout > .filter-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  align-self: start;
  min-width: 0;
}
.innovations-layout > .empty-state          { grid-column: 1 / -1; }

/* ============================================================
   INNOVATIONS PAGE — FILTER SIDEBAR
   ============================================================ */
.filter-sidebar {
  /* `align-self: stretch` (default would stretch on the grid's
   * cross-axis but this is a flex-column child of .filter-col).
   * Use width:100% so the card fills the full column width
   * regardless of which sections are open — without this, the
   * card shrinks to its widest visible pill text and visibly
   * narrows when Domains (which has the long pill labels)
   * collapses. See screenshots in commit history. */
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Search */
.filter-search-wrap {
  position: relative;
}

.filter-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

.filter-search {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  /* 16px pinned — iOS Safari focus-zoom protection on text inputs. */
  font-size: 16px;
  padding: 10px 12px 10px 36px;
  transition: border-color 0.2s, background 0.2s;
}

.filter-search::placeholder {
  color: rgba(255,255,255,0.4);
}

.filter-search:focus {
  outline: none;
  border-color: rgba(114,116,255,0.5);
  background: rgba(255,255,255,0.09);
}

/* Sidebar divider */
.filter-sidebar-divider {
  height: 1px;
  background: var(--border);
}

/* Filter sections */
.filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filter-section-header {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-2);
}

.filter-section-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--ls-section-label);
  text-transform: uppercase;
  color: var(--text-2);
}

.filter-chevron {
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  transition: transform 0.25s ease;
  margin-left: auto;
}

.filter-section.is-open .filter-chevron {
  transform: rotate(180deg);
}

.filter-section-body {
  display: none;
}

.filter-section.is-open .filter-section-body {
  display: block;
}

/* Filter pills — vertical stack */
.filter-pills {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filter-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-4);
  border-radius: var(--radius-pill);
  border: none;
  box-shadow: none;
  background: rgba(255,255,255,0.07);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
  letter-spacing: var(--ls-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-pill:hover {
  background: rgba(255,255,255,0.13);
}

.filter-pill.is-active {
  background: rgba(255,255,255,0.22);
  color: var(--text-2);
  font-weight: 600;
}

/* Colored pills — any pill with --pill-color from the palette */
.filter-pill.has-pill-color:hover {
  background: rgba(var(--pill-color), 0.50);
}

.filter-pill.has-pill-color.is-active {
  background: rgba(var(--pill-color), 0.65);
  color: var(--text-2);
  font-weight: 600;
}

/* Count badge — right aligned */
.pill-count {
  margin-left: auto;
  font-size: var(--text-sm);
  color: inherit;
  font-weight: 600;
}

/* Filter pill focus state for keyboard nav */
.filter-pill:focus-visible {
  outline: 2px solid rgba(114,116,255,0.7);
  outline-offset: 2px;
}

/* ============================================================
   INNOVATIONS PAGE — CATALOG GRID
   ============================================================ */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

/* ============================================================
   INNOVATIONS PAGE — EXPERIMENT CARDS
   ============================================================ */
.exp-card {
  background: var(--surface-2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* I08: card body is now wrapped in an <a>; cursor handled natively. */
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, background 0.4s;
  position: relative;
  animation: cardIn 0.4s ease both;
  display: flex;
  flex-direction: column;
}

.exp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,66,253,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* I08: block-level anchor wrapping the entire card body. Inherits
   colour/decoration so existing typography is unaffected; lays out as
   a column so canvas-wrap and body stack like the original card. */
.exp-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  /* Make sure the anchor sits above the ::before glow gradient so
     pointer events reach it across the entire card. */
  position: relative;
  z-index: 1;
}
.exp-card-link:hover,
.exp-card-link:focus { color: inherit; text-decoration: none; }
.exp-card-link:focus { outline: none; }
.exp-card:focus-within {
  border-color: rgba(255,255,255,0.30);
  box-shadow:
    0 0 0 2px rgba(120,140,255,0.55),
    0 10px 20px -8px rgba(80,100,255,0.28);
}

.exp-card:hover {
  transform: translateY(-4px);
  background: var(--surface-hover);
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    0 10px 20px -8px rgba(80,100,255,0.28),
    0 20px 36px -14px rgba(100,80,255,0.28),
    0 28px 48px -20px rgba(80,60,220,0.18);
}

/* Canvas area */
.exp-card-canvas-wrap {
  position: relative;
  height: 140px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Card content */
.exp-card-body {
  padding: var(--space-5);
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exp-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.exp-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: var(--ls-default);
  text-transform: uppercase;
}

.exp-card-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.exp-card-status-dot.live {
  background: var(--status-online);
  box-shadow: 0 0 6px rgba(0,187,195,0.6);
}

.exp-card-status-dot.beta {
  background: #F58C1E;
}

.exp-card-domain {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-default);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
}

/* Domain badge colour — driven by --domain-color CSS var set from the
   pill-color palette in page-innovations.php. Any new domain term
   automatically picks up a colour; no CSS changes needed. */
.exp-card-domain[style*="--domain-color"] {
  color: rgb(var(--domain-color));
  border-color: rgba(var(--domain-color), 0.35);
  background: rgba(var(--domain-color), 0.12);
}

.exp-card-text {
  flex: 1;
}

.exp-card-text h3 {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-2);
}

.exp-card-tagline {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
  font-style: italic;
}

.exp-card-desc {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: var(--lh-body);
  flex: 1;
}

.exp-card-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.07);
}

.exp-card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.exp-card-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-default);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  background: transparent;
}

.exp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  /* I07: was rgba(255,255,255,0.35) — too low contrast for touch (no hover). */
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
  align-self: flex-end;
  white-space: nowrap;
}

.exp-card-cta svg {
  transition: transform 0.2s;
}

.exp-card:hover .exp-card-cta {
  color: var(--text-2);
}

.exp-card:hover .exp-card-cta svg {
  transform: translateX(3px);
}

/* ── List view ───────────────────────────────────────────────
   Image-on-the-left row layout. The card structure is:

     .exp-card  →  .exp-card-link  →  .exp-card-canvas-wrap  +  .exp-card-body

   Both the outer card AND the inner link use flex-direction:column by
   default (the link wraps the entire clickable surface), so flipping
   only the outer .exp-card to row leaves the link stacking image-on-top
   inside it. We flip the link too and pin the canvas to a fixed width
   so the body fills the rest of the row. */
.catalog-grid.view-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.catalog-grid.view-list .exp-card,
.catalog-grid.view-list .exp-card-link {
  flex-direction: row;
  align-items: stretch;
}

.catalog-grid.view-list .exp-card-canvas-wrap {
  flex: 0 0 220px;
  width: 220px;
  height: auto;
  min-height: 180px;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.catalog-grid.view-list .exp-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Card entrance animation ───────────────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-11) var(--space-5);
  color: rgba(255,255,255,0.5);
}

.empty-state-icon {
  font-size: 48px;
  display: block;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.empty-state h3 {
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-3);
  color: var(--text-2);
}

.empty-state p {
  font-size: var(--text-base);
}

/* ============================================================
   INNOVATIONS PAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  /* I02: tablet keeps a 2-col grid so cards don't stretch absurdly wide
     when the sidebar reflows below at ≤900px. */
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  /* I02: phones collapse to 1-col (4593-line rule below is the ≤768 pass
     which now leaves catalog-grid alone — see also override at ≤480). */
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) {
  /* Innovations layout shares the same --container-max as other pages, but
     unlike .container (no inline padding), it was adding 40px gutters on
     both sides — making the catalog area visibly narrower than About /
     Stories / Community. Drop the gutter on desktop; mobile keeps it. */
  .results-bar,
  .innovations-layout {
    padding-inline: 0;
  }
}

@media (max-width: 900px) {
  .innovations-layout {
    grid-template-columns: 1fr;
  }
  .innovations-layout > .filter-col {
    position: static;
  }
}

@media (max-width: 768px) {
  .filter-sidebar {
    position: static;
  }

  .results-bar-inner {
    flex-wrap: wrap;
  }

  .catalog-grid.view-list .exp-card,
  .catalog-grid.view-list .exp-card-link {
    flex-direction: column;
  }

  .catalog-grid.view-list .exp-card-canvas-wrap {
    flex: 0 0 auto;
    width: 100%;
    min-height: 120px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}

/* ============================================================
   COMMUNITY PAGE — HERO
   ============================================================ */
.community-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--space-9));
  padding-bottom: var(--space-9);
  padding-inline: var(--page-gutter);
  text-align: center;
  overflow: hidden;
  z-index: var(--z-content);
}

.community-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(79,66,253,0.16) 0%, transparent 65%);
  pointer-events: none;
}

.community-hero-inner {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-max);
  width: 100%;
}

.community-hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-5);
}

.community-hero h1 {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-7);
  max-width: 960px;
}

.community-hero .hero-sub {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-2);
  max-width: 760px;
  margin-inline: auto;
  line-height: var(--lh-body);
}

.community-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Match the stories pattern (`.lead-section` / `.feed-section`):
   drop the top padding entirely on the first section after the
   hero so the hero's padding-bottom is the only gap source.
   Sibling-scoped so other `.section` blocks below keep their
   default 96px breathing room. */
.community-hero + .section { padding-top: 0; }

/* ============================================================
   COMMUNITY PAGE — EVENT FEATURED
   ============================================================ */
.event-featured {
  display: grid;
  grid-template-columns: 380px 1fr;
  /* Fluid card height — shrinks with viewport so featured event card does
     not dominate small-screen content. */
  min-height: clamp(220px, 35vw, 340px);
  max-width: var(--container-max);
  margin: 0 auto var(--space-8);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.event-featured-img {
  position: relative;
  background: linear-gradient(145deg, #0d1230 0%, #151a45 40%, #0a0d2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.event-featured-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-featured-img .card-img-badge {
  top: var(--space-5);
  left: var(--space-5);
  margin-bottom: 0;
}

.event-date-badge {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.event-date-month {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
}

.event-date-day {
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1;
  color: var(--text-2);
}

.event-featured-body {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  justify-content: center;
}

.event-featured-body .card-meta,
.event-featured-body .card-title,
.event-featured-body .card-desc { align-self: stretch; }

.event-featured-body .card-title {
  font-size: var(--text-2xl);
}

.event-featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  gap: var(--space-4);
  align-self: stretch;
}

.event-register-cta {
  flex-shrink: 0;
}

.event-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   COMMUNITY PAGE — CARD (shared for events + blog)
   ============================================================ */
.card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(79,66,253,0.20);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
}

.card:hover {
  background: rgba(10,11,126,0.80);
  transform: translateY(-4px);
  box-shadow:
    0 8px 20px -4px rgba(80,100,255,0.30),
    0 16px 30px -10px rgba(100,80,255,0.28);
}

.card-img {
  position: relative;
  background: linear-gradient(145deg, #0d1230 0%, #151a45 40%, #0a0d2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-img--h160 {
  height: 160px;
}

.card-img-placeholder {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}

.card-img-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-meta {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--text-2);
}

.card-desc {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-2);
  font-weight: 400;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,1);
  border-radius: var(--radius-pill);
  padding: 8px 24px;
  margin-top: auto;
  align-self: flex-start;
  transition: background 0.2s, border-color 0.2s;
}

.card-link:hover {
  background: rgba(10,11,126,0.80);
  border-color: rgba(114,116,255,0.6);
}

/* ============================================================
   COMMUNITY PAGE — EVENT GRID
   ============================================================ */
.events-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto var(--space-6);
}

.events-row--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* ============================================================
   COMMUNITY PAGE — VIDEO SECTION
   ============================================================ */
.video-section {
  padding-block: var(--space-11);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}

.video-section-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.video-section .section-eyebrow {
  justify-content: center;
}

.video-section .section-title {
  margin-bottom: var(--space-4);
}

.video-section .section-sub {
  margin-bottom: var(--space-8);
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  overflow: hidden;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(79,66,253,0.18) 0%, transparent 70%),
    linear-gradient(145deg, #0d1230 0%, #151a45 40%, #0a0d2a 100%);
}

/* Homepage video click-to-play overlay (Foundry Settings → Homepage Video).
   The actual <video>/<iframe> sits underneath; .hpv-overlay covers it with
   the poster image + play button until the visitor clicks Play. JS then
   adds controls / triggers autoplay and removes this overlay. */
.hpv-stage {
  position: absolute;
  inset: 0;
}
.hpv-stage > video,
.hpv-stage > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.hpv-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: #0a0d2a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  transition: opacity 0.2s ease;
}
.hpv-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.hpv-overlay-btn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.hpv-overlay:hover .hpv-overlay-btn {
  transform: scale(1.06);
  background: rgba(255,255,255,0.20);
}

.video-placeholder-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.video-play-btn {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.video-play-btn:hover {
  transform: scale(1.06);
  background: rgba(255,255,255,0.20);
}

/* Make any block-editor embed (YouTube/Vimeo/Video block/Custom-HTML iframe)
   fill the 16:9 .video-wrapper box, since the wrapper uses the
   padding-top:56.25% trick and expects absolutely-positioned children. */
.video-wrapper > * {
  position: absolute;
  inset: 0;
  margin: 0;
}
.video-wrapper iframe,
.video-wrapper video,
.video-wrapper .wp-block-embed__wrapper {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-wrapper .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   COMMUNITY PAGE — BLOG GRID
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ============================================================
   COMMUNITY PAGE — BLOG CAROUSEL (replaces grid)
   ============================================================ */
.blog-carousel {
  max-width: var(--container-max);
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
.blog-carousel-track {
  display: flex;
  gap: 24px;
  padding-inline: 4px;
}
.blog-carousel-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .blog-carousel-card { flex-basis: 360px; }

  /* Desktop parity with `.connect-grid` (4-col below this section): the
     blog row is a 3-col grid that fills the same `--container-max`
     container instead of a fixed-width scroller. Mobile (<768) keeps the
     horizontal-scroll carousel so 320px cards stay tappable. */
  .blog-carousel {
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .blog-carousel-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-inline: 0;
  }
  .blog-carousel-card {
    flex: initial;
    width: auto;
    scroll-snap-align: none;
  }
}

/* ============================================================
   COMMUNITY PAGE — CONNECT SECTION
   ============================================================ */
.connect-section {
  padding-block: var(--space-11);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}

.connect-section .section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.connect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.connect-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease, border-color 0.3s ease;
}

.connect-card:hover {
  background: var(--surface-hover);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 18px -8px rgba(80,100,255,0.30),
    0 18px 32px -14px rgba(100,80,255,0.32);
}

.connect-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.engage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.connect-card-title {
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.2px;
  color: var(--text-2);
  line-height: var(--lh-heading);
}

.connect-card-desc {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-2);
  flex: 1;
  margin: 0;
}

.connect-card .card-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   COMMUNITY PAGE — NEWSLETTER
   ============================================================ */
.newsletter-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 40px;
  text-align: center;
}

.newsletter-inner {
  max-width: var(--container-text);
  margin-inline: auto;
}

.newsletter-inner h3 {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: var(--space-4);
}

.newsletter-inner p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.80);
  max-width: 500px;
  margin-inline: auto;
  line-height: var(--lh-body);
}

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 32px auto 0;
  justify-content: center;
}

.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  color: white;
  /* INTENTIONAL 16px (do NOT tokenize): iOS Safari auto-zooms inputs whose
     computed font-size < 16px on focus. Newsletter signup must not trigger
     focus-zoom. Same rule applies to all <input>/<textarea>/<select> below. */
  font-size: 16px;
  font-family: var(--font-body);
  transition: border-color 0.2s;
}

.newsletter-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.newsletter-input:focus {
  outline: none;
  border-color: rgba(114,116,255,0.5);
}

/* ============================================================
   COMMUNITY PAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .connect-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .event-featured {
    grid-template-columns: 1fr;
  }

  .event-featured-img {
    min-height: 200px;
  }

  .events-row {
    grid-template-columns: 1fr;
  }

  .events-row--2col {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .connect-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .community-hero-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   STORIES PAGE
   ============================================================ */

/* ── STORIES HERO ── */
.stories-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--space-9));
  padding-bottom: 80px;
  padding-inline: var(--page-gutter);
  text-align: center;
  overflow: hidden;
  z-index: var(--z-content);
}

.stories-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgba(79,66,253,0.16) 0%, transparent 65%);
  pointer-events: none;
}

.stories-hero-inner {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-text);
}

.stories-hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-5);
}

.stories-hero h1 {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
  margin-bottom: var(--space-6);
}

.stories-hero .hero-sub {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-2);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: var(--lh-body);
}

/* ── FEATURED LEAD CARDS ── */
.lead-section {
  /* Design (04_FOUNDRY_STORIES.html) uses padding-bottom only on
     .lead-section / .feed-section — top spacing comes from the
     hero's padding-bottom. Adding our own top padding here was
     stacking ~96px on top of the hero's 80px, leaving ~176px of
     dead space below the subtitle on desktop (~80px on mobile). */
  padding-bottom: var(--space-9);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}

.lead-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin-inline: auto;
}

.lead-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Fluid min-height (overridden to `auto` on ≤768 where the grid stacks). */
  min-height: clamp(280px, 50vw, 440px);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(79,66,253,0.20);
  border-radius: var(--radius-panel);
  overflow: hidden;
  transition: background 0.35s, box-shadow 0.35s;
}

.lead-card:hover {
  background: rgba(10,11,126,0.80);
  box-shadow:
    0 8px 30px -6px rgba(79,66,253,0.35),
    0 20px 50px -12px rgba(79,66,253,0.20);
}

.lead-card--reverse {
  direction: rtl;
}
.lead-card--reverse > * {
  direction: ltr;
}

.lead-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  min-height: 100%;
}

.lead-card-fpo {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.lead-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 64px 48px;
}

.lead-card-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: var(--ls-default);
}

.lead-card-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: #00BBC3;
  flex-shrink: 0;
}

.lead-card-content h2 {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--text-2);
}

.lead-card-content p {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text);
  opacity: 0.85;
}

.lead-card-stats {
  display: flex;
  gap: var(--space-6);
}

.lead-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lead-stat-value {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-2);
  line-height: 1;
}

.lead-stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--text);
  opacity: 0.7;
}

.lead-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.lead-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg, #4F42FD, #00BBC3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}

.lead-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lead-author-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
}

.lead-author-role {
  font-size: var(--text-xs);
  color: var(--text);
  opacity: 0.6;
}

.lead-card-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.lead-card-ctas .btn {
  text-align: center;
  justify-content: center;
}

/* ── STORIES FEED ── */
.feed-section {
  /* Match design: no top padding (hero or lead-section above already
     supplies the breathing room) and no top border. */
  padding-bottom: var(--space-10);
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: var(--z-content);
}

.feed-header {
  text-align: center;
  margin-bottom: var(--space-7);
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.story-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  border: 1px solid rgba(79,66,253,0.20);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  transition: background 0.35s, box-shadow 0.35s;
}

.story-card:hover {
  background: rgba(10,11,126,0.80);
  box-shadow:
    0 8px 30px -6px rgba(79,66,253,0.35),
    0 20px 50px -12px rgba(79,66,253,0.20);
}

.story-card-image {
  height: 200px;
  background: rgba(255,255,255,0.10);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-card-fpo {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow, 0.25em);
}

.story-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  flex: 1;
}

.story-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.story-card-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow, 0.25em);
  color: var(--text-2);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.story-card-date {
  font-size: var(--text-sm);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
  margin-left: auto;
}

.story-card-body h3 {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-default);
  color: var(--text-2);
}

.story-card-body p {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-2);
}

.story-card-actions {
  margin-top: auto;
  padding-top: var(--space-3);
}

.story-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1.5px solid rgba(255,255,255,1);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.story-card-cta:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
}

/* ── LOGO PARADE ── */
.logo-parade-section {
  padding-block: var(--space-11);
  padding-inline: var(--page-gutter);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: var(--z-content);
}

.logo-parade-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-2);
  text-align: center;
  margin-bottom: var(--space-8);
}

.logo-parade-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin-inline: auto;
}

.logo-slot {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  opacity: 0.64;
}

/* Variant used by page-stories.php when a real SVG brand mark is present.
   `filter: brightness(0) invert(1)` flattens any colour information in the
   SVG to pure white so the parade reads uniformly on the dark page bg
   (every Wikipedia logo is shipped in its native brand colour, which would
   clash). The 0.7 opacity matches the subdued look the text-only variant
   above had. max-width prevents wide wordmarks (Hertz, St. Luke's) from
   pushing the grid out of alignment. */
.logo-slot--img {
  opacity: 1;          /* override the text-variant fade; we fade the img instead */
  padding-inline: var(--space-2);
}
.logo-slot--img img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.logo-slot--img:hover img { opacity: 1; }

/* ── CTA SECTION ── */
.cta-section {
  position: relative;
  padding: 120px var(--page-gutter);
  border-top: 1px solid var(--border);
  z-index: var(--z-content);
}

.cta-strip {
  position: relative;
  z-index: var(--z-content);
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.cta-strip h3 {
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: var(--space-4);
}

.cta-strip p {
  font-size: var(--text-base);
  color: var(--text-2);
  opacity: 0.8;
  line-height: var(--lh-body);
  margin-bottom: var(--space-6);
}

/* ── STORIES RESPONSIVE ── */
@media (max-width: 1024px) {
  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .logo-parade-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .lead-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .lead-card--reverse {
    direction: ltr;
  }
  .lead-card-image {
    min-height: 200px;
  }
  .lead-card-content {
    padding: var(--space-6);
  }
  .feed-grid {
    grid-template-columns: 1fr;
  }
  .logo-parade-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* .stories-hero h1 mobile cap is handled by the grouped selector at
     `.page-header h1, .community-hero h1, .stories-hero h1` in the
     ≤768 block below (search for "Other page heroes"). */
}

/* ══════════════════════════════════════════════════════════════
   STORY DETAIL PAGE (single-story.php)
   Reuses tokens from :root — adds component classes only.
   Class collisions checked against existing .story-card / .story-hero
   on the listing page (page-stories.php) — no overlap.
   ══════════════════════════════════════════════════════════════ */

/* ── HEADER (breadcrumb, meta, title, byline) ── */
.story-detail .story-header {
  padding-top: var(--hero-top-padding);
  padding-bottom: var(--space-8);
  padding-inline: var(--page-gutter);
}
.story-detail .story-header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.story-detail .story-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-6);
}
.story-detail .story-breadcrumb a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.story-detail .story-breadcrumb a:hover { color: var(--text-2); }
.story-detail .story-breadcrumb-sep { opacity: 0.4; }
.story-detail .story-breadcrumb-current { color: var(--text-2); }
.story-detail .story-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.story-detail .story-meta-date {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--ls-default);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.story-detail .story-title {
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: var(--lh-title);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
  max-width: 960px;
  margin-bottom: var(--space-5);
}
.story-detail .story-byline {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.story-detail .story-byline-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.story-detail .story-byline-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.story-detail .story-byline-customer {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
}

/* ── HERO BANNER ── */
.story-detail .story-hero-banner-wrap {
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-8);
}
.story-detail .story-hero-banner {
  max-width: var(--container-max);
  margin-inline: auto;
  aspect-ratio: 24 / 9;
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-card);
  background:
    linear-gradient(135deg, rgba(79,66,253,0.25) 0%, rgba(0,187,195,0.15) 100%),
    rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.story-detail .story-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-detail .story-hero-banner-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ── SUMMARY ── */
.story-detail .story-section {
  padding-inline: var(--page-gutter);
  padding-block: var(--space-10);
}
.story-detail .story-section-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.story-detail .story-summary-section {
  /* Tighten the gap to the stats strip below — the previous
     `padding-block: var(--space-9)` (64px top + 64px bottom) stacked
     with the stat cards' own inner padding, leaving an oversized gap
     under the description. Keep the top breathing room from the hero
     banner intact, just trim the bottom. */
  padding-top: var(--space-9);
  padding-bottom: var(--space-4);
}
.story-detail .story-summary-inner {
  max-width: var(--container-text);
}
/* All summary/body paragraphs on the story detail page share the same
   `.story-summary-text` styling — uniform weight, line-height, color and
   letter-spacing across the description above the stats and the body
   content below. The lead/body rules below only override per-paragraph
   margins. */
.story-detail .story-summary-text,
.story-detail .story-body > p:first-child,
.story-detail .story-body .story-body-lead,
.story-detail .story-body p {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--lh-heading);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
}

/* ── KEY STATS STRIP ── */
.story-detail .story-stats-strip {
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-4);
}
.story-detail .story-stats-grid {
  max-width: var(--container-text);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Honor actual stat count (1, 2, 4) — default grid above is the 3-up case. */
.story-detail .story-stats-grid.story-stats-grid--1 { grid-template-columns: 1fr; max-width: 360px; }
.story-detail .story-stats-grid.story-stats-grid--2 { grid-template-columns: repeat(2, 1fr); }
.story-detail .story-stats-grid.story-stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
.story-detail .story-stat-card {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.story-detail .story-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(79,66,253,0.25), rgba(0,187,195,0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.story-detail .story-stat-value {
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--text-2);
  line-height: 1;
  letter-spacing: var(--ls-default);
}
.story-detail .story-stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: var(--lh-ui);
}

/* ── BODY (the_content output) ── */
.story-detail .story-body-section {
  padding-inline: var(--page-gutter);
  padding-block: var(--space-10);
}
/* Tighten the gap when the body immediately follows the stats strip
   (the common case) — without the override the combined paddings push
   the body content far below the stats grid. */
.story-detail .story-stats-strip + .story-body-section {
  padding-top: var(--space-6);
}
.story-detail .story-body {
  max-width: var(--container-text);
  margin-inline: auto;
}
/* First paragraph of the body — slightly larger lead style.
   Use :first-child (not :first-of-type) so a leading image/heading skips
   the lead treatment instead of promoting the second paragraph. Typography
   shared with `.story-summary-text` (see grouped rule above); this block
   only owns the lead's margin. */
.story-detail .story-body > p:first-child,
.story-detail .story-body .story-body-lead {
  margin-bottom: var(--space-7);
}
.story-detail .story-body h2,
.story-detail .story-body h3 {
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
  margin-top: var(--space-9);
  margin-bottom: var(--space-5);
}
.story-detail .story-body h4 {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-2);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}
.story-detail .story-body p {
  /* Typography (font-size, weight, line-height, color, letter-spacing)
     is shared with `.story-summary-text` via the grouped rule above so
     the whole summary on the story detail page reads as one block. */
  margin-bottom: var(--space-4);
}
.story-detail .story-body p + p { margin-top: 0; }
.story-detail .story-body a {
  color: var(--text-2);
  border-bottom: 1px solid rgba(114,116,255,0.6);
  padding-bottom: 1px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.story-detail .story-body a:hover { border-bottom-color: var(--text-2); }
.story-detail .story-body ul,
.story-detail .story-body ol {
  margin: var(--space-4) 0 var(--space-5);
  padding-left: var(--space-6);
  color: var(--text);
  line-height: var(--lh-body);
}
.story-detail .story-body li { margin-bottom: var(--space-2); }

/* Inline image (Gutenberg core/image with `class="story-inline-image"` or
   default core/image figure — both styled). */
.story-detail .story-body figure.wp-block-image,
.story-detail .story-body .story-inline-image {
  margin: var(--space-9) 0;
}
.story-detail .story-body figure.wp-block-image img,
.story-detail .story-body .story-inline-image img,
.story-detail .story-body .story-inline-image-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  display: block;
}
.story-detail .story-body .story-inline-image-frame {
  background:
    linear-gradient(135deg, rgba(79,66,253,0.18) 0%, rgba(0,187,195,0.10) 100%),
    rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.story-detail .story-body figure.wp-block-image figcaption,
.story-detail .story-body .story-inline-image-caption {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  line-height: var(--lh-body);
  margin-top: var(--space-3);
  font-style: italic;
  text-align: left;
}

/* Pull quote (Gutenberg core/quote OR explicit .pullquote markup). */
.story-detail .story-body blockquote,
.story-detail .story-body .pullquote,
.story-detail .story-body figure.wp-block-quote {
  margin: var(--space-9) 0;
  padding: var(--space-7) var(--space-7) var(--space-6);
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-card);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  position: relative;
  border-left-width: 1px;
}
.story-detail .story-body .pullquote-mark {
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-size: 48px;
  line-height: 1;
  color: rgba(114,116,255,0.45);
  font-weight: 300;
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
}
.story-detail .story-body blockquote p,
.story-detail .story-body .pullquote p,
.story-detail .story-body figure.wp-block-quote p {
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: var(--lh-heading);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
  margin-bottom: var(--space-5);
  padding-left: var(--space-7);
}
.story-detail .story-body blockquote cite,
.story-detail .story-body figure.wp-block-quote cite {
  display: inline-block;
  padding-left: var(--space-7);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
}
.story-detail .story-body .pullquote-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-left: var(--space-7);
  border-top: 1px solid var(--border);
}
.story-detail .story-body .pullquote-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg, #4F42FD, #00BBC3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.story-detail .story-body .pullquote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-detail .story-body .pullquote-author-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
}
.story-detail .story-body .pullquote-author-role {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  line-height: 1.3;
}

/* Mid-article stat duo (authors add `<div class="story-mid-stats">…</div>`
   via a Custom HTML block, or use core/columns with this wrapper class). */
.story-detail .story-body .story-mid-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-9) 0;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.story-detail .story-body .story-mid-stat-value {
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--text-2);
  line-height: 1;
  letter-spacing: var(--ls-default);
  margin-bottom: var(--space-2);
}
.story-detail .story-body .story-mid-stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ── BREAK TILE (wide CTA between sections) ── */
.story-detail .story-break-tile-wrap {
  padding-inline: var(--page-gutter);
  /* Top padding dropped so only the body-section's `padding-bottom`
     above owns the gap above the break tile; previously both stacked
     and pushed the tile ~128px below the last body paragraph. */
  padding-top: 0;
  padding-bottom: var(--space-8);
}
/* When the break tile sits immediately after the body section, also
   tighten the body-section's bottom padding so the resulting gap reads
   as ~40px instead of 80px on desktop. */
.story-detail .story-body-section:has(+ .story-break-tile-wrap) {
  padding-bottom: var(--space-7);
}
.story-detail .story-break-tile {
  max-width: var(--container-text);
  margin-inline: auto;
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-card);
  background:
    linear-gradient(135deg, rgba(79,66,253,0.18) 0%, rgba(0,187,195,0.10) 100%),
    var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
}
.story-detail .story-break-tile-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.story-detail .story-break-tile-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.story-detail .story-break-tile-heading {
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
  margin: 0;
}
.story-detail .story-break-tile-cta {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── TAGS SECTION (related innovations) ── */
.story-detail .story-tags-section {
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-10);
}
.story-detail .story-tags-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.story-detail .story-tags-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-top: 8px;
  flex-shrink: 0;
}
.story-detail .story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}
.story-detail .story-tag-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--ls-default);
  padding: 6px var(--space-3);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.story-detail .story-tag-chip:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}

/* ── STORY DETAIL RESPONSIVE ── */
@media (max-width: 960px) {
  .story-detail .story-stats-grid,
  .story-detail .story-stats-grid.story-stats-grid--3,
  .story-detail .story-stats-grid.story-stats-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-detail .story-break-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}
@media (max-width: 640px) {
  .story-detail .story-title { font-size: clamp(32px, 8vw, 48px); }
  .story-detail .story-stats-grid,
  .story-detail .story-stats-grid.story-stats-grid--2,
  .story-detail .story-stats-grid.story-stats-grid--3,
  .story-detail .story-stats-grid.story-stats-grid--4 {
    grid-template-columns: 1fr;
  }
  .story-detail .story-body .story-mid-stats { grid-template-columns: 1fr; }
  .story-detail .story-byline { flex-direction: column; align-items: flex-start; }
  .story-detail .story-tags-inner { flex-direction: column; gap: var(--space-3); }
  .story-detail .story-body blockquote p,
  .story-detail .story-body .pullquote p,
  .story-detail .story-body figure.wp-block-quote p {
    padding-left: 0;
  }
  .story-detail .story-body .pullquote-author { padding-left: 0; }
}

/* ── STORIES LISTING — CPT card image + title link wiring ──
   Added when page-stories.php was wired to the Story CPT. The image
   wrappers (.lead-card-image, .story-card-image) are now <a> elements,
   so we need to (a) reset link decoration, (b) make any injected <img>
   fill the container, and (c) make heading title <a> tags inherit color. */
.lead-card-image,
.story-card-image {
  text-decoration: none;
  color: inherit;
}
.lead-card-image img,
.story-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Read the full story on Microsoft.com →" — surfaced at the bottom of
   the per-story body when stories-data.php sets external_story_url. */
.story-source-link-wrap {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}
.story-source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 160ms ease;
}
.story-source-link:hover,
.story-source-link:focus-visible {
  color: var(--text);
}
.story-source-link svg {
  transition: transform 160ms ease;
}
.story-source-link:hover svg,
.story-source-link:focus-visible svg {
  transform: translateX(2px);
}
.lead-card-content h2 .lead-card-title-link,
.story-card-body h3 .story-card-title-link {
  color: inherit;
  text-decoration: none;
  background-image: none;
  border-bottom: none;
}
.lead-card-content h2 .lead-card-title-link:hover,
.story-card-body h3 .story-card-title-link:hover {
  color: var(--text-2);
}
.feed-empty {
  max-width: var(--container-max);
  margin: var(--space-8) auto;
  padding: var(--space-7) var(--page-gutter);
  text-align: center;
  font-size: var(--text-base);
  color: rgba(255,255,255,0.6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.02);
}

/* ══════════════════════════════════════════════════════════════
   BIOEMU INNOVATION PAGE (single-innovation-bioemu.php)
   Reuses tokens: --bg, --text, --text-2, --border, --border-card,
   --surface, --space-*, --radius-card, --radius-pill, --lh-body
   ══════════════════════════════════════════════════════════════ */
.bio-page { color: var(--text); }

/* ── HERO ── */
.bio-hero { padding-top: var(--hero-top-padding); padding-bottom: var(--space-11); }
.bio-hero-inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--space-6); }
.bio-back-link {
  display: inline-block; color: rgba(240,242,247,0.65); text-decoration: none;
  font-size: var(--text-sm); letter-spacing: var(--ls-default);
  margin-bottom: var(--space-7); transition: color 160ms ease;
}
.bio-back-link:hover { color: var(--text-2); }

.bio-pill-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.bio-pill {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border: 1px solid var(--border-tag); border-radius: var(--radius-pill);
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  text-transform: uppercase; color: var(--text-2); background: rgba(255,255,255,0.04);
}

/* Domain-specific pill colors — keep in sync with the filter pills on
   page-innovations.php and the .exp-card[data-domain] tag colors below. */
.bio-pill--domain[data-domain="geospatial-earth-science"]   { color: #C4D4FF; border-color: rgba(170,192,249,0.45); background: rgba(170,192,249,0.14); }
.bio-pill--domain[data-domain="robotics-physical-ai"]       { color: #4DA8FF; border-color: rgba(0,120,212,0.45);   background: rgba(0,120,212,0.14); }
.bio-pill--domain[data-domain="biomedical-sciences"]        { color: #FFB057; border-color: rgba(245,140,30,0.45);  background: rgba(245,140,30,0.14); }
.bio-pill--domain[data-domain="molecular-materials"]        { color: #D8BAFF; border-color: rgba(202,163,255,0.45); background: rgba(202,163,255,0.14); }
.bio-pill--domain[data-domain="code-software-engineering"]  { color: #00DDED; border-color: rgba(0,187,195,0.45);   background: rgba(0,187,195,0.14); }
.bio-pill--domain[data-domain="search-retrieval-knowledge"] { color: #8880FF; border-color: rgba(79,66,253,0.45);   background: rgba(79,66,253,0.14); }
.bio-pill--domain[data-domain="creative-generative-media"]  { color: #F050E0; border-color: rgba(209,42,202,0.45);  background: rgba(209,42,202,0.14); }
/* New (v2) domain term — Molecular & Materials renamed to Chemistry & Materials */
.bio-pill--domain[data-domain="chemistry-materials"]        { color: #D8BAFF; border-color: rgba(202,163,255,0.45); background: rgba(202,163,255,0.14); }
/* Generic fallback: any bio-pill that carries an inline --pill-color (RGB
   triplet) inherits its color from that variable. Used by innovation_type
   and innovation_capability pills on the detail page. */
.bio-pill[style*="--pill-color"] {
	color: rgb(var(--pill-color));
	border-color: rgba(var(--pill-color), 0.45);
	background: rgba(var(--pill-color), 0.14);
}

.bio-hero-grid {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
  gap: var(--space-10); align-items: center;
}
@media (max-width: 900px) { .bio-hero-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

.bio-hero-eyebrow {
  font-size: var(--text-xs); letter-spacing: var(--ls-hero-label);
  text-transform: uppercase; color: rgba(240,242,247,0.55);
  margin: 0 0 var(--space-4);
}
.bio-hero-title {
  font-size: var(--text-4xl); line-height: var(--lh-display); font-weight: 600;
  margin: 0 0 var(--space-5); color: var(--text-2);
}
.bio-hero-desc {
  font-size: var(--text-md); line-height: var(--lh-body);
  color: rgba(240,242,247,0.78); margin: 0 0 var(--space-7); max-width: 56ch;
}

.bio-stats { display: flex; gap: var(--space-9); margin-bottom: var(--space-7); }
.bio-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.bio-stat-num {
  font-size: var(--text-3xl); font-weight: 600; color: var(--text-2);
  line-height: var(--lh-title); letter-spacing: -0.01em;
}
.bio-stat-label {
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  text-transform: uppercase; color: rgba(240,242,247,0.55);
}

.bio-hero-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 14px 24px; border: 1px solid var(--text); border-radius: var(--radius-pill);
  background: var(--text); color: var(--bg); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.bio-hero-cta:hover { background: #ddd; border-color: #ddd; color: var(--bg); }
.bio-hero-cta-label { color: inherit; }
.bio-hero-cta-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 auto; color: inherit;
}
.bio-hero-cta-icon svg { width: 100%; height: 100%; display: block; }

.bio-hero-visual {
  border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--border-card); background: rgba(10,4,32,0.6);
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
}
.bio-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-hero-fpo { color: rgba(240,242,247,0.4); font-size: var(--text-sm); }

/* ── PLAYGROUND ── */
.playground-section { padding-block: var(--space-11); }
.playground-inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--space-6); }
.playground-title {
  font-size: var(--text-2xl); font-weight: 600; color: var(--text-2);
  margin: 0 0 var(--space-7); text-align: left;
}

.playground-card {
  border: 1px solid var(--border-card); border-radius: var(--radius-card);
  background: var(--surface-2);
  padding: var(--space-7);
  display: block;
}

.playground-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-6);
}
@media (max-width: 900px) { .playground-grid { grid-template-columns: 1fr; } }

.playground-panel {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
}

.playground-panel-header {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.playground-panel-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md); font-weight: 600; color: var(--text-2);
  margin: 0; line-height: 1.2;
}
.playground-panel-sub { font-size: var(--text-sm); color: rgba(240,242,247,0.6); }

.playground-card-dot {
  width: 8px; height: 8px; border-radius: var(--radius-circle);
  background: var(--status-online); box-shadow: 0 0 8px rgba(74,250,138,0.6);
}
.playground-card-dot--idle {
  background: rgba(240,242,247,0.35); box-shadow: none;
}

.playground-tabs {
  display: flex; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 4px; background: rgba(0,0,0,0.25);
}
.playground-tab {
  flex: 1; padding: 10px 14px; background: transparent; border: 0;
  color: rgba(240,242,247,0.6); font: inherit; font-size: var(--text-sm);
  border-radius: var(--radius-sm); cursor: not-allowed;
  letter-spacing: var(--ls-default);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.playground-tab-icon {
  width: 14px; height: 14px; flex: 0 0 auto;
}
.playground-tab.is-active {
  background: rgba(79,66,253,0.22); color: var(--text-2);
}

/* Preset chips */
.playground-presets {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.playground-presets-label {
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  text-transform: uppercase; color: rgba(240,242,247,0.5);
  margin-right: var(--space-2);
}
.playground-preset {
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-light); background: rgba(255,255,255,0.04);
  color: var(--text-2); font: inherit; font-size: var(--text-xs);
  letter-spacing: var(--ls-default); cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.playground-preset:hover { background: rgba(79,66,253,0.18); border-color: rgba(79,66,253,0.45); }

.playground-field { display: flex; flex-direction: column; gap: var(--space-2); }
.playground-field-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
}
.playground-label {
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  text-transform: uppercase; color: rgba(240,242,247,0.6);
}
.playground-counter {
  font-size: var(--text-xs); color: rgba(240,242,247,0.55);
  font-variant-numeric: tabular-nums;
}
.playground-counter[data-state="warn"]  { color: #ffcc6e; }
.playground-counter[data-state="error"] { color: #ff8a8a; }

.playground-input {
  padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-light); background: rgba(0,0,0,0.35);
  /* 16px pinned — iOS Safari focus-zoom protection on text inputs. */
  color: var(--text-2); font: inherit; font-size: 16px;
}
.playground-input:disabled { opacity: 0.85; cursor: not-allowed; }

.playground-helper {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-md); background: rgba(79,66,253,0.08);
  border: 1px solid rgba(79,66,253,0.18);
  font-size: var(--text-sm); color: rgba(240,242,247,0.85); line-height: var(--lh-ui);
}
.playground-helper-icon { line-height: 1; }
.playground-helper-text { flex: 1; }
/* Seeded zone content is a Gutenberg paragraph block; strip its block margins
   so it sits flush inside the helper flex row. */
.playground-helper p { margin: 0; flex: 1; }

.playground-conformations { display: flex; flex-direction: column; gap: var(--space-3); }
.playground-action-row { display: flex; flex-direction: column; gap: var(--space-5); }
.playground-conformations-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  text-transform: uppercase; color: rgba(240,242,247,0.6);
}
.playground-conformations-value {
  font-size: var(--text-md); font-weight: 600; color: var(--text-2);
  letter-spacing: var(--ls-default); text-transform: none;
}
.playground-conformations-row {
  display: flex; align-items: center; gap: var(--space-3);
}
.playground-stepper {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  border: 1px solid var(--border-light); background: rgba(0,0,0,0.3);
  color: var(--text-2); font-size: var(--text-md); cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Wrapper around preset buttons. Transparent on desktop (display: contents)
   so the existing flex layout in .playground-presets is unaffected; on mobile
   it becomes the horizontal-scroll row beneath the label. */
.playground-presets-chips { display: contents; }
.playground-slider {
  flex: 1; appearance: none; height: 4px; border-radius: var(--radius-pill);
  /* --slider-fill is set by JS to the current value as a percentage. */
  background: linear-gradient(
    to right,
    rgba(79,66,253,0.85) 0 var(--slider-fill, 20%),
    rgba(255,255,255,0.12) var(--slider-fill, 20%) 100%
  );
  outline: none;
}
.playground-slider::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: var(--radius-circle);
  background: #fff; border: 2px solid rgba(79,66,253,0.7); cursor: not-allowed;
}
.playground-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: var(--radius-circle);
  background: #fff; border: 2px solid rgba(79,66,253,0.7); cursor: not-allowed;
}
.playground-generate {
  padding: 12px 24px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #4F42FD, #7274FF); color: #fff; border: 0;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.02em; cursor: not-allowed;
  opacity: 0.85;
  width: 100%;
}

/* Tech stack row, OUTSIDE the card.
   Layout: label sits on its own row above a horizontally-scrollable pill
   strip. The label is part of the flex container but doesn't move with
   the pill scroll because the scroll is confined to the inner
   `.playground-stack-pills` track. */
.playground-stack {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
  margin-top: var(--space-5);
  padding-inline: var(--space-2);
}
.playground-stack-label {
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  color: rgba(240,242,247,0.75);
  font-weight: 600;
  margin-right: 0;
}
.playground-stack-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.playground-stack-pills::-webkit-scrollbar { width: 0; height: 0; display: none; }
.playground-pill {
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  font-size: var(--text-xs); color: rgba(240,242,247,0.85);
  letter-spacing: var(--ls-default);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── ABOUT BIOEMU ── */
.bio-about { padding-block: var(--space-11); }
.bio-about-inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--space-6); }
.bio-about-title {
  font-size: var(--text-2xl); font-weight: 600; color: var(--text-2);
  margin: 0 0 var(--space-7);
}
.bio-about-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-9);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  padding: 48px;
}
@media (max-width: 900px) { .bio-about-grid { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-7); } }
.bio-about-body p {
  font-size: var(--text-base); line-height: var(--lh-body);
  color: rgba(240,242,247,0.82); margin: 0 0 var(--space-5);
}
.bio-eyebrow-sm {
  font-size: var(--text-base); font-weight: 600;
  color: rgba(240,242,247,0.55);
  margin: 0 0 var(--space-4);
  padding-left: 10px;
  border-left: 3px solid #7274FF;
}
.bio-capability-list {
  list-style: none; padding: 0; margin: 0;
}
.bio-capability-list li {
  position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base); color: var(--text-2); line-height: var(--lh-ui);
}
.bio-capability-list li::before {
  content: "→"; position: absolute; left: 0; top: var(--space-3);
  color: rgba(114,116,255,0.85); font-weight: 600;
}
.bio-capability-list li:last-child { border-bottom: 0; }

/* ── READY TO EXPLORE ── */
.bio-explore { padding-block: var(--space-11); border-top: 1px solid var(--border); }
.bio-explore-inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--space-6); }
.bio-explore-title {
  font-size: var(--text-2xl); font-weight: 600; color: var(--text-2);
  margin: 0 0 var(--space-4);
}
.bio-explore-intro {
  font-size: var(--text-md); color: rgba(240,242,247,0.72);
  max-width: none; margin: 0 0 var(--space-9);
  white-space: nowrap;
}
.bio-explore-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--space-5); text-align: left;
}
@media (max-width: 1040px) { .bio-explore-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .bio-explore-grid { grid-template-columns: 1fr; } }
.bio-explore-card {
  display: flex; flex-direction: column;
  padding: var(--space-6); border: 1px solid var(--border-card);
  border-radius: 16px; background: rgba(255,255,255,0.04);
  text-decoration: none; color: var(--text);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.bio-explore-card:hover {
  transform: translateY(-2px); border-color: rgba(79,66,253,0.55);
  background: rgba(10,11,126,0.80);
}
.bio-explore-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: rgba(240,242,247,0.55);
  margin-bottom: var(--space-5);
}
.bio-explore-card-icon svg { width: 100%; height: 100%; display: block; }
.bio-explore-card-eyebrow {
  font-size: var(--text-xs); letter-spacing: var(--ls-section-label);
  text-transform: uppercase; color: rgba(240,242,247,0.5);
  margin-bottom: 4px;
}
.bio-explore-card-title {
  font-size: var(--text-md); font-weight: 600; color: var(--text-2);
  margin-bottom: var(--space-3);
}
.bio-explore-card-desc {
  font-size: var(--text-sm); color: rgba(240,242,247,0.7); line-height: var(--lh-ui);
  margin-bottom: var(--space-5);
}
/* CTA pinned to the bottom of every card so the row stays aligned regardless
   of description length. */
.bio-explore-card-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); letter-spacing: 0.02em;
  color: rgba(240,242,247,0.78);
}
.bio-explore-card:hover .bio-explore-card-cta { color: var(--text-2); }
.bio-explore-card-cta-arrow {
  transition: transform 200ms ease;
}
.bio-explore-card:hover .bio-explore-card-cta-arrow { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════
   BIOEMU PLAYGROUND — interactive states (Phase 4 / 5)
   ══════════════════════════════════════════════════════════════ */

/* Active tab pointer cursor (overrides earlier disabled-only styles) */
.playground-tab:not(:disabled) { cursor: pointer; }
.playground-tab:not(:disabled):hover { color: var(--text-2); }

.playground-textarea {
  resize: vertical; min-height: 120px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  /* 16px pinned — iOS Safari focus-zoom protection on textareas. */
  font-size: 16px; letter-spacing: 0.02em; word-break: break-all;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 10px 14px;
  color-scheme: dark;
}
.playground-textarea:focus {
  outline: none;
  border-color: rgba(79,66,253,0.55);
  background: rgba(255,255,255,0.06);
}
.playground-textarea::placeholder { color: rgba(240,242,247,0.35); }

/* ── BioEmu UniProt / PDB resolver UI ─────────────────────────
   Defensive [hidden] override: panes default to display:flex via
   .playground-pane below, which would otherwise win against the UA
   `[hidden] { display: none }` rule. The same trap caught Trellis.
   The resolver pane interior also uses .playground-field /
   .playground-id-meta — both of which set display:flex, so a class
   selector beats the UA `[hidden]` attribute selector. We restore
   the expected hide-on-`hidden` behaviour scoped to the BioEmu
   playground only, so we don't risk breaking other innovations. */
.playground-pane {
  display: flex; flex-direction: column; gap: var(--space-4);
}
.bioemu-pg-v1 .playground-pane[hidden],
.bioemu-pg-v1 .playground-field[hidden],
.bioemu-pg-v1 .playground-id-meta[hidden],
.bioemu-pg-v1 .playground-id-meta-row[hidden] { display: none !important; }

.playground-id-row {
  display: flex; gap: var(--space-2); align-items: stretch;
}
.playground-id-input {
  flex: 1 1 auto; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.playground-lookup-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; min-height: 40px;
  background: rgba(79,66,253,0.18); color: var(--text);
  border: 1px solid rgba(79,66,253,0.45); border-radius: 8px;
  font-weight: 600; font-size: var(--text-sm);
  cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}
.playground-lookup-btn:hover { background: rgba(79,66,253,0.28); border-color: rgba(79,66,253,0.6); }
.playground-lookup-btn:active { transform: translateY(1px); }
.playground-lookup-btn:disabled,
.playground-lookup-btn.is-busy { opacity: 0.6; cursor: progress; }

.playground-id-meta {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-card); border-radius: 8px;
  font-size: var(--text-sm);
}
.playground-id-meta-row {
  display: flex; gap: var(--space-3); align-items: baseline;
}
.playground-id-meta-label {
  flex: 0 0 auto; min-width: 80px;
  color: var(--text-2); text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.06em;
}
.playground-id-meta-value {
  flex: 1 1 auto; color: var(--text); word-break: break-word;
}

/* Themed <select>. The base .playground-input rule gives us the
   border + dark fill, but native <select> ignores most of that on
   some platforms (notably macOS / iOS) without explicit appearance
   resets. We also force `color-scheme: dark` so the open dropdown
   uses dark UA chrome instead of the system default. */
.playground-chain-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%;
  background-color: rgba(0,0,0,0.35);
  color: var(--text);
  color-scheme: dark;
  /* 16px pinned — iOS Safari focus-zoom protection on <select>. */
  font-family: inherit; font-size: 16px;
  padding: 12px 36px 12px 14px;
  background-image: linear-gradient(45deg,  transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.playground-chain-select:hover:not(:disabled) {
  border-color: rgba(79,66,253,0.55);
  background-color: rgba(0,0,0,0.45);
}
.playground-chain-select:focus {
  outline: none;
  border-color: rgba(79,66,253,0.7);
}
.playground-chain-select:disabled {
  opacity: 0.55; cursor: not-allowed;
  background-image: linear-gradient(45deg,  transparent 50%, rgba(240,242,247,0.25) 50%),
                    linear-gradient(135deg, rgba(240,242,247,0.25) 50%, transparent 50%);
}
/* Style the dropdown options (Chromium honours background-color, Firefox
   honours color-scheme above for the popup chrome). */
.playground-chain-select option {
  background: #14151c; color: var(--text);
}
.playground-chain-select option:disabled {
  color: rgba(240,242,247,0.4);
}

/* Side-by-side Reset + Generate buttons. On desktop they sit
   inline with the conformations slider via .playground-action-row's
   column layout — see mobile @media further down for the stacked
   variant. */
.playground-action-buttons {
  display: flex; align-items: stretch; gap: var(--space-3);
}
.playground-action-buttons .playground-generate { flex: 1 1 auto; width: auto; }

.playground-reset {
  flex: 0 0 auto;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); color: var(--text-2);
  border: 1px solid var(--border-light);
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.playground-reset:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--border); }
.playground-reset:active { transform: translateY(1px); }

/* Tech strip now lives below the About section, not inside the
   playground card — so .playground-card uses its natural symmetric
   padding (no bottom override needed). */

/* Re-enable the controls when not disabled */
.playground-input:not(:disabled) { cursor: text; }
.playground-stepper:not(:disabled) { cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.playground-stepper:not(:disabled):hover { background: rgba(79,66,253,0.18); border-color: rgba(79,66,253,0.45); }
.playground-slider:not(:disabled) { cursor: pointer; }
.playground-slider:not(:disabled)::-webkit-slider-thumb { cursor: grab; }
.playground-slider:not(:disabled)::-moz-range-thumb { cursor: grab; }
.playground-generate:not(:disabled) { cursor: pointer; opacity: 1; transition: filter 160ms ease, transform 160ms ease; }
.playground-generate:not(:disabled):hover { filter: brightness(1.08); }
.playground-generate:not(:disabled):active { transform: translateY(1px); }
.playground-generate:disabled { cursor: wait; opacity: 0.7; }

/* Status row (loading / error / info) */
.playground-status {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px 16px; margin: 0;
  border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--lh-ui);
}
.playground-status[hidden] { display: none; }
.playground-status--loading {
  background: rgba(79,66,253,0.10); border: 1px solid rgba(79,66,253,0.25); color: var(--text-2);
}
.playground-status--error {
  background: rgba(255,90,90,0.10); border: 1px solid rgba(255,90,90,0.35); color: #ffcfcf;
}

/* Spinner */
.playground-spinner {
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid rgba(79,66,253,0.25); border-top-color: rgba(114,116,255,0.95);
  border-radius: var(--radius-circle); animation: foundry-spin 800ms linear infinite;
}
@keyframes foundry-spin { to { transform: rotate(360deg); } }

/* 3D viewer container (right panel inset) */
.playground-viewer {
  position: relative; width: 100%; min-height: 420px;
  border-radius: var(--radius-md); overflow: hidden;
  background: #06030f;
  border: 1px solid var(--border);
}
.playground-viewer canvas { display: block; }

/* Pre-generate placeholder */
.playground-viewer-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-6); text-align: center;
  color: rgba(240,242,247,0.55); pointer-events: none;
}
.playground-viewer-placeholder[hidden] { display: none; }
.playground-viewer-placeholder p { margin: 0; font-size: var(--text-sm); color: var(--text-2); }
.playground-viewer-placeholder-sub { color: rgba(240,242,247,0.45) !important; font-size: var(--text-xs) !important; }
.playground-viewer-icon { width: 56px; height: 56px; color: rgba(114,116,255,0.65); margin-bottom: var(--space-2); }

/* Axis gizmo: pure-SVG triad + cube wireframe, rotation synced from main viewer.
   Lives in the actions row below the viewer (opposite Download PDB) so it's
   always visible alongside the result and never occluded by the 3Dmol canvas. */
.playground-gizmo {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.playground-gizmo svg { display: block; width: 100%; height: 100%; }
.playground-gizmo[hidden] { display: none; }

.playground-results-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4);
}
.playground-results-actions[hidden] { display: none; }
.playground-download {
  color: var(--text-2); text-decoration: none;
  padding: 8px 16px; border: 1px solid var(--border-card); border-radius: var(--radius-pill);
  font-size: var(--text-sm); letter-spacing: 0.02em;
  background: rgba(79,66,253,0.10);
  transition: background 160ms ease;
}
.playground-download:hover { background: rgba(79,66,253,0.22); }


/* ══════════════════════════════════════════════════════════════
   INNOVATION DEMO ZONE  (single-innovation.php static playgrounds)
   Renders an editor-replaceable image-or-video block between the
   hero and the About section. Visibility is opt-in: the section
   only mounts when the registry entry has a 'demo' array, or when
   an editor adds a Group block with anchor="demo".
   ══════════════════════════════════════════════════════════════ */
.bio-demo {
  padding: 0;
}
.bio-demo-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--space-6);
}
.bio-demo-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--ls-default);
  margin: 0 0 var(--space-6);
  color: var(--text);
}
.bio-demo-frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.bio-demo-frame--video {
  /* No forced aspect ratio: the video itself drives the height so
     non-16:9 sources render at their natural proportions while still
     filling the container's width. */
}
.bio-demo-frame--image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bio-demo-video,
.bio-demo-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
}
.bio-demo-frame--image .bio-demo-image {
  height: auto;
  object-fit: contain;
}
.bio-demo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-default);
  background: rgba(255,255,255,0.02);
}
.bio-demo-frame--image .bio-demo-placeholder {
  position: relative;
  inset: auto;
  min-height: 280px;
  width: 100%;
}
.bio-demo-caption {
  margin: var(--space-4) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-default);
}

/* Tech-stack strip rendered for static playground pages (Type 1 + Type 2).
   Shares the same content gutter as .bio-demo-inner / .bio-about-inner so
   the chips never escape the page grid. */
.bio-tech-only {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
}
.bio-tech-only .playground-stack {
  margin-top: 0;
  padding-inline: 0;
}

/* Pull the surrounding hero / about toward the tech strip so the chips
 * read as part of the hero block instead of floating in a ~280px void.
 * Default `.bio-hero` (96px bottom) + `.bio-tech-only` (24px) +
 * `.bio-about` (96px top) compounded to ~216px of empty space split by
 * a tiny chip row on static pages (e.g. Phi-4). The :has() selector
 * scopes the hero override strictly to static pages where the tech
 * strip is the very next sibling — interactive playgrounds (.bio-hero
 * → .playground-section → .bio-about) are unaffected. The adjacent
 * sibling rule on `.bio-about` is universally supported. */
.bio-hero:has(+ .bio-tech-only) { padding-bottom: var(--space-6); }
.bio-tech-only + .bio-about { padding-top: var(--space-6); }

/* Static pages with no tech stack collapse hero straight into About;
 * the same compound 192px void exists. Trim it the same way. */
.bio-hero + .bio-about { padding-top: var(--space-7); }
.bio-hero:has(+ .bio-about) { padding-bottom: var(--space-7); }

/* ──────────────────────────────────────────────────────────────
 * Desktop-only innovation page polish (D-01..D-04).
 * Scoped to min-width: 769px so mobile breakpoint behaviour
 * defined in _responsive-patches/04-innovations.css is fully
 * preserved. Each rule maps to a design spec line item:
 *   D-01: Hide standalone .bio-tech-only — desktop now renders
 *         the tech stack INSIDE .bio-about-side as .bio-side-tech.
 *         Mobile keeps the standalone strip untouched.
 *   D-02: .bio-about-side becomes a flex column so pills can be
 *         pinned to the bottom of the side panel via margin-top
 *         auto on .bio-side-tech, irrespective of capability list
 *         length.
 *   D-03: User-count number → 24px / weight 400.
 *   D-04: "Key capabilities" eyebrow → 16px / weight 600.
 * ────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  /* D-01: hide the mobile-only standalone tech strip */
  .bio-tech-only { display: none; }

  /* The hero-trim and about-trim ":has(+ .bio-tech-only)" rules
     above still match (since .bio-tech-only is in the DOM, just
     display:none), giving us a reduced ~48px gap between hero
     and about on desktop — exactly the "spacing reduced post
     its removal" the design calls for. */

  /* D-02: side panel pins tech pills to the bottom. The widget uses the
     same label + horizontal-scroll-pills pattern as the standalone
     .bio-tech-only strip; the label sits above the pills and never moves
     with the inner scroll. */
  .bio-about-side {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .bio-side-tech {
    margin-top: auto;
    /* Mirror the 24px bottom rhythm of `.bio-about-body p` (last paragraph)
       so the right column closes at the same baseline as the left.
       --space-5 clamps 16→24px; desktop hits the 24px ceiling. Mobile is
       already handled by the responsive patches. */
    margin-bottom: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
  }
  .bio-side-tech .playground-stack-label {
    margin-right: 0;
    margin-bottom: 0;
  }
  .bio-side-tech .playground-stack-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-2);
    padding-bottom: 2px;
  }
  .bio-side-tech .playground-stack-pills::-webkit-scrollbar {
    width: 0; height: 0; display: none;
  }

  /* D-03: user-count number sizing */
  .bio-stat-num {
    font-size: 24px;
    font-weight: 400;
  }

  /* D-04: Key Capabilities eyebrow sizing — now matched at the base
     .bio-eyebrow-sm rule (16px / 600 / --ls-eyebrow), so the desktop
     override here is redundant. Left as a no-op anchor in case future
     desktop-only nudges are needed. */
}

/* ── Coming-soon variant for unfinished interactive playgrounds ── */
.playground-card--coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: var(--space-9) var(--space-6);
  text-align: center;
}
.playground-coming-soon {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.playground-coming-soon-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-section-label);
  text-transform: uppercase;
  color: var(--text-2);
  padding: 4px 12px;
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
}
.playground-coming-soon-title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
}
.playground-coming-soon-desc {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}
.playground-coming-soon-cta {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  color: var(--text);
  background: rgba(79,66,253,0.12);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.playground-coming-soon-cta:hover {
  background: rgba(79,66,253,0.22);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   TRELLIS PLAYGROUND  (template-parts/playground-trellis.php)
   Bespoke image-to-3D UI. Reuses .playground-* shells from BioEmu
   for the outer card / panel / viewer chrome, and adds trellis-*
   classes for the input modality (dropzone, samples, segmented
   quality control, format select).
   ══════════════════════════════════════════════════════════════ */

/* Dropzone */
.trellis-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  padding: var(--space-5);
  border: 1.5px dashed var(--border-card);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  position: relative;
  overflow: hidden;
}
.trellis-dropzone:hover,
.trellis-dropzone.is-drag-over {
  border-color: rgba(79,66,253,0.55);
  background: rgba(79,66,253,0.06);
}
.trellis-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--text-2);
  pointer-events: none;
}
.trellis-dropzone-icon {
  width: 38px;
  height: 38px;
  color: var(--text-2);
  opacity: 0.75;
}
.trellis-dropzone-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
  letter-spacing: var(--ls-default);
}
.trellis-dropzone-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-2);
  letter-spacing: var(--ls-default);
}
.trellis-dropzone-preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  border-radius: calc(var(--radius-card) - 4px);
  object-fit: contain;
}
.trellis-dropzone.is-loaded .trellis-dropzone-empty { display: none; }

/* Sample picker */
.trellis-samples {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trellis-samples-label {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-section-label);
  text-transform: uppercase;
  color: var(--text-2);
}
.trellis-samples-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.trellis-sample {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.trellis-sample img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trellis-sample:hover {
  border-color: rgba(79,66,253,0.55);
  transform: translateY(-1px);
}
.trellis-sample.is-active {
  border-color: rgba(79,66,253,0.85);
  box-shadow: 0 0 0 2px rgba(79,66,253,0.25);
}

/* Controls */
.trellis-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.trellis-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trellis-control-value {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-left: auto;
}
.trellis-control .playground-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Segmented quality control */
.trellis-segmented {
  display: inline-flex;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 2px;
  background: rgba(255,255,255,0.03);
  width: fit-content;
}
.trellis-segment {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-default);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.trellis-segment:hover { color: var(--text); }
.trellis-segment.is-active {
  background: rgba(79,66,253,0.22);
  color: var(--text);
}

/* Custom Output-format dropdown (replaces native <select> for theme compliance) */
.trellis-dropdown { position: relative; width: 100%; }
.trellis-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-default);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}
.trellis-dropdown-toggle:hover { background: rgba(255,255,255,0.06); }
.trellis-dropdown-toggle:focus-visible,
.trellis-dropdown.is-open .trellis-dropdown-toggle {
  outline: none;
  border-color: rgba(79,66,253,0.55);
}
.trellis-dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trellis-dropdown-caret {
  width: 10px; height: 6px; flex-shrink: 0;
  color: rgba(240,242,247,0.6);
  transition: transform 160ms ease;
}
.trellis-dropdown.is-open .trellis-dropdown-caret { transform: rotate(180deg); }

.trellis-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: #14151b;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  max-height: 240px;
  overflow-y: auto;
}
.trellis-dropdown-menu[hidden] { display: none; }
.trellis-dropdown-option {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.trellis-dropdown-option:hover,
.trellis-dropdown-option.is-highlighted {
  background: rgba(79,66,253,0.16);
}
.trellis-dropdown-option.is-selected {
  background: rgba(79,66,253,0.28);
  color: #fff;
}
.trellis-dropdown-option:focus-visible { outline: none; background: rgba(79,66,253,0.22); }

/* ───── Rotating wireframe cube placeholder ───────────────────── */
.trellis-cube-scene {
  width: 120px; height: 120px;
  perspective: 600px;
  margin: 0 auto var(--space-2);
}
.trellis-cube {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: trellis-cube-spin 14s linear infinite;
}
.trellis-cube-face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(122, 108, 255, 0.55);
  background: linear-gradient(135deg, rgba(79,66,253,0.05), rgba(79,66,253,0.02));
  box-shadow: inset 0 0 24px rgba(79,66,253,0.08);
}
.trellis-cube-face--front  { transform: translateZ(60px); }
.trellis-cube-face--back   { transform: rotateY(180deg) translateZ(60px); }
.trellis-cube-face--right  { transform: rotateY( 90deg) translateZ(60px); }
.trellis-cube-face--left   { transform: rotateY(-90deg) translateZ(60px); }
.trellis-cube-face--top    { transform: rotateX( 90deg) translateZ(60px); }
.trellis-cube-face--bottom { transform: rotateX(-90deg) translateZ(60px); }

@keyframes trellis-cube-spin {
  0%   { transform: rotateX(-20deg) rotateY(  0deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

/* Hide the cube while the busy status banner is on screen */
.playground-viewer-placeholder.is-busy .trellis-cube-scene { display: none; }
.playground-viewer-placeholder.is-busy p { display: none; }

@media (prefers-reduced-motion: reduce) {
  .trellis-cube { animation: none; transform: rotateX(-20deg) rotateY(-25deg); }
}

/* Result meta line */
.trellis-result-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-2);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-section-label);
  text-transform: uppercase;
}
.trellis-result-meta-format {
  padding: 4px 10px;
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
}
.trellis-result-meta-size:empty { display: none; }

/* ── Trellis "OR DESCRIBE IT" divider + prompt textarea ────── */
.trellis-or-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.trellis-or-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.trellis-or-divider-text {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(240,242,247,0.5);
  font-weight: 500;
}
.trellis-prompt-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trellis-prompt {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  word-break: normal;
}
.trellis-prompt-hint {
  font-size: var(--text-xs);
  color: rgba(240,242,247,0.55);
  margin: 0;
}

/* Side-by-side rows inside the controls block (e.g. format + seed) */
.trellis-control-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.trellis-control--half { flex: 1 1 0; min-width: 0; }

/* Seed: stepper-only numeric input with a randomise button */
.trellis-seed-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trellis-seed-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: var(--text-sm);
  text-align: center;
  color-scheme: dark;
  -moz-appearance: textfield;
}
.trellis-seed-input::-webkit-outer-spin-button,
.trellis-seed-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trellis-seed-input:focus { outline: none; border-color: rgba(79,66,253,0.55); }
.trellis-seed-random {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.trellis-seed-random:hover { background: rgba(79,66,253,0.18); border-color: rgba(79,66,253,0.45); color: var(--text); }

@media (max-width: 640px) {
  .trellis-control-row { flex-direction: column; gap: var(--space-3); }
}

/* Disabled generate button until an image or prompt is provided */
.playground-generate[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ============================================================
   ════════════════════════════════════════════════════════════
   TRELLIS PLAYGROUND v2 — visual rebuild per
   08_FOUNDRY_TRELLIS 1.html reference (Apr 2026 design pass).
   ────────────────────────────────────────────────────────────
   Scoped under .trellis-pg-v2 for safety. New layout classes
   are prefixed `.tpg-` to avoid colliding with the legacy
   `.playground-panel`/`.playground-grid` globals (which the
   v2 template no longer uses). Widget-level reference classes
   (.pg-*, .upload-zone, .result-viewport, .sequence-textarea,
   .tech-stack-*, .tech-tag) have no global equivalent and are
   used verbatim.
   ════════════════════════════════════════════════════════════
   ============================================================ */

/* Tighten the section's vertical padding — the global
 * `.playground-section { padding-block: var(--space-11) }` (96px each
 * side) doubled up against `.bio-hero` (96px bottom) and `.bio-about`
 * (96px top) created ~192px voids above and below the panel. The
 * reference HTML uses ~80px between sections (just `padding-bottom`
 * on each `.page-section`). Zero out the playground's own padding so
 * the gap is governed entirely by the adjacent `.bio-hero` /
 * `.bio-about` paddings (~96px each). Compound selectors beat both
 * the desktop and mobile `.playground-section` rules on specificity.
 * Scoped per-variant so the legacy ACF-fallback playground is
 * untouched. */
.trellis-pg-v2.playground-section,
.bioemu-pg-v1.playground-section { padding-block: 0; }

/* Outer panel (replaces reference `.playground-panel` outer) */
.trellis-pg-v2 .tpg-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-panel);
  overflow: hidden;
  display: block;
  padding: 0;
}
.trellis-pg-v2 .tpg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.trellis-pg-v2 .tpg-col {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.trellis-pg-v2 .tpg-col + .tpg-col {
  border-left: 1px solid var(--border);
}
.trellis-pg-v2 .tpg-col--input {
  /* sliders + accordion can stretch — push action row to the bottom */
}
.trellis-pg-v2 .tpg-col--result {
  /* viewport flex-grows; actions sit underneath */
}
.trellis-pg-v2 .tpg-col-title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-3);
}
.trellis-pg-v2 .tpg-block { display: flex; flex-direction: column; }
.trellis-pg-v2 .tpg-input-pane { flex: 1; }
/* Re-assert UA `[hidden] { display: none }` — author-level `display: flex`
 * on `.tpg-input-pane` would otherwise silently override the attribute and
 * leave both panes visible at once. */
.trellis-pg-v2 .tpg-input-pane[hidden] { display: none; }
.trellis-pg-v2 .tpg-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trellis-pg-v2 .tpg-actions--input {
  margin-top: auto;
  padding-top: var(--space-4);
}
.trellis-pg-v2 .tpg-actions--result {
  margin-top: 0;
}
.trellis-pg-v2 .tpg-techstrip,
.bioemu-pg-v1 .tpg-techstrip {
  padding: var(--space-5) var(--space-7);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.trellis-pg-v2 .tpg-techstrip .tech-stack-title,
.bioemu-pg-v1 .tpg-techstrip .tech-stack-title {
  margin-bottom: 0;
  white-space: nowrap;
}

/* Inline status banner (right under the input action row) */
.trellis-pg-v2 .tpg-status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
}
.trellis-pg-v2 .tpg-status--loading {
  background: rgba(114,116,255,0.10);
  border-color: rgba(114,116,255,0.30);
  color: #c9caff;
}
.trellis-pg-v2 .tpg-status--error {
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,0.35);
  color: #ff9c9c;
}
.trellis-pg-v2 .tpg-status--info {
  background: rgba(0,187,195,0.08);
  border-color: rgba(0,187,195,0.25);
  color: #9bdfe2;
}

/* Upload zone */
.trellis-pg-v2 .upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: rgba(255,255,255,0.02);
  flex: 1;
  min-height: 240px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.trellis-pg-v2 .upload-zone:hover,
.trellis-pg-v2 .upload-zone:focus-visible,
.trellis-pg-v2 .upload-zone.is-drag-over {
  border-color: rgba(114,116,255,0.55);
  background: rgba(114,116,255,0.05);
}
.trellis-pg-v2 .upload-zone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
/* Author display:flex on upload-zone-empty/loaded overrides the UA
   [hidden] { display: none } rule, so the JS toggle (el.hidden = …)
   would otherwise leave BOTH states painted at once — empty icon +
   text bleeding through under a loaded preview, or a blank preview
   bar + action icons leaking into the base state. */
.trellis-pg-v2 .upload-zone-empty[hidden],
.trellis-pg-v2 .upload-zone-loaded[hidden] {
  display: none;
}
.trellis-pg-v2 .upload-zone-icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trellis-pg-v2 .upload-zone-empty p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.trellis-pg-v2 .upload-zone-filename {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.trellis-pg-v2 .upload-zone.is-loaded {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  cursor: default;
}
/* Loaded state container: image preview on top, filename + action toolbar
   (Replace / Remove) underneath. Switched from the older filename-only
   row so users can confirm the asset they uploaded. Only the explicit
   buttons trigger an action — clicking the preview itself does not
   re-open the file picker. */
.trellis-pg-v2 .upload-zone-loaded {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}
.trellis-pg-v2 .upload-zone-preview {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.25);
}
.trellis-pg-v2 .upload-zone-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  flex: 0 0 auto;
}
.trellis-pg-v2 .upload-zone-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.trellis-pg-v2 .upload-zone-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(10,4,32,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: rgba(240,242,247,0.85);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.trellis-pg-v2 .upload-zone-action:hover,
.trellis-pg-v2 .upload-zone-action:focus-visible {
  background: rgba(114,116,255,0.22);
  border-color: rgba(114,116,255,0.55);
  color: var(--text-2);
  outline: none;
}
.trellis-pg-v2 .upload-zone-action--danger:hover,
.trellis-pg-v2 .upload-zone-action--danger:focus-visible {
  background: rgba(255,90,90,0.20);
  border-color: rgba(255,90,90,0.60);
  color: #ffd6d6;
}

/* Sequence textarea (text mode) */
.trellis-pg-v2 .sequence-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  /* 16px pinned — iOS Safari focus-zoom protection on textareas. */
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  resize: none;
  min-height: 140px;
  outline: none;
  transition: border-color 0.2s;
}
.trellis-pg-v2 .sequence-textarea::placeholder { color: rgba(255,255,255,0.55); }
.trellis-pg-v2 .sequence-textarea:focus { border-color: rgba(114,116,255,0.5); }

/* Mode toggle */
.trellis-pg-v2 .pg-mode-toggle {
  display: inline-flex;
  /* `.tpg-col` is `display: flex; flex-direction: column;` so children
   * stretch to the column's full width by default — we want the toggle
   * pill to hug just the Image|Text labels. */
  align-self: flex-start;
  width: max-content;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}
.trellis-pg-v2 .pg-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--ls-default);
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 8px var(--space-5);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
}
.trellis-pg-v2 .pg-mode-btn:hover { color: rgba(255,255,255,0.75); }
.trellis-pg-v2 .pg-mode-btn.is-active {
  background: rgba(255,255,255,0.10);
  color: var(--text-2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Parameters collapsible */
.trellis-pg-v2 .pg-params-section {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.trellis-pg-v2 .pg-params-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: rgba(255,255,255,0.04);
  border: none;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  text-transform: none;
  letter-spacing: var(--ls-default);
}
.trellis-pg-v2 .pg-params-toggle:hover { background: rgba(255,255,255,0.07); }
.trellis-pg-v2 .pg-params-chevron { transition: transform 0.25s; transform: rotate(0deg); }
.trellis-pg-v2 .pg-params-body {
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, padding 0.25s;
  max-height: 1000px;
  opacity: 1;
}
.trellis-pg-v2 .pg-params-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.trellis-pg-v2 .pg-param-block { display: flex; flex-direction: column; gap: 6px; }
.trellis-pg-v2 .pg-param-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.trellis-pg-v2 .pg-param-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.trellis-pg-v2 .pg-param-info {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  cursor: help;
  transition: color 0.2s;
  font-style: normal;
}
.trellis-pg-v2 .pg-param-info:hover { color: rgba(255,255,255,0.7); }
.trellis-pg-v2 .pg-param-valuebox {
  min-width: 44px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-2);
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Green slider */
.trellis-pg-v2 .pg-green-slider-wrap { position: relative; padding: 4px 0; }
.trellis-pg-v2 .pg-green-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: rgba(255,255,255,0.18);
}
.trellis-pg-v2 .pg-green-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: transform 0.15s;
}
.trellis-pg-v2 .pg-green-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.trellis-pg-v2 .pg-green-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.55);
  cursor: pointer;
}
.trellis-pg-v2 .pg-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 0 1px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Seed input */
.trellis-pg-v2 .pg-seed-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  /* 16px pinned — iOS Safari focus-zoom protection on <input type=number>. */
  font-size: 16px;
  font-weight: 500;
  color: var(--text-2);
  outline: none;
  transition: border-color 0.2s;
  font-variant-numeric: tabular-nums;
}
.trellis-pg-v2 .pg-seed-input:focus { border-color: rgba(127,186,0,0.5); }
.trellis-pg-v2 .pg-seed-input::-webkit-inner-spin-button,
.trellis-pg-v2 .pg-seed-input::-webkit-outer-spin-button { opacity: 0.4; }

/* Action buttons (shared) */
.trellis-pg-v2 .pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.trellis-pg-v2 .pg-btn:focus-visible {
  outline: 2px solid rgba(114,116,255,0.7);
  outline-offset: 2px;
}
.trellis-pg-v2 .pg-btn:active { transform: scale(0.97); }
.trellis-pg-v2 .pg-btn:disabled,
.trellis-pg-v2 .pg-btn.is-disabled,
.trellis-pg-v2 .pg-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Author display:inline-flex above overrides UA [hidden]; restore it so
   JS-controlled visibility (e.g. the Stop button outside an active
   generation) actually hides the element. */
.trellis-pg-v2 .pg-btn[hidden] { display: none; }

.trellis-pg-v2 .pg-btn-primary {
  flex: 1;
  background: linear-gradient(135deg, #5254c8 0%, #7274FF 60%, #8f6fff 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 4px 14px rgba(114,116,255,0.40),
    0 2px 4px rgba(0,0,0,0.3);
}
.trellis-pg-v2 .pg-btn-primary:hover:not(:disabled):not(.is-disabled) {
  background: linear-gradient(135deg, #5f62d8 0%, #8486ff 60%, #9d7fff 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 6px 22px rgba(114,116,255,0.55),
    0 2px 6px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.trellis-pg-v2 .pg-btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.trellis-pg-v2 .pg-btn-primary .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.18);
  border-radius: 5px;
  flex-shrink: 0;
}

.trellis-pg-v2 .pg-btn-ghost {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.60);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.trellis-pg-v2 .pg-btn-ghost:hover:not(:disabled):not(.is-disabled) {
  color: var(--text-2);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}
.trellis-pg-v2 .pg-btn-ghost:active:not(:disabled) { transform: translateY(0) scale(0.97); }

.trellis-pg-v2 .pg-btn-danger {
  background: rgba(255,70,70,0.06);
  color: rgba(255,110,110,0.75);
  border: 1px solid rgba(255,80,80,0.20);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.trellis-pg-v2 .pg-btn-danger:hover:not(:disabled):not(.is-disabled) {
  background: rgba(255,70,70,0.14);
  color: #ff8080;
  border-color: rgba(255,80,80,0.45);
  box-shadow: 0 2px 10px rgba(255,60,60,0.2);
  transform: translateY(-1px);
}
.trellis-pg-v2 .pg-btn-danger:active:not(:disabled) { transform: translateY(0) scale(0.97); }

.trellis-pg-v2 .pg-btn-export {
  background: rgba(0,187,195,0.07);
  color: rgba(0,210,220,0.8);
  border: 1px solid rgba(0,187,195,0.22);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.trellis-pg-v2 .pg-btn-export:hover:not(.is-disabled):not([aria-disabled="true"]) {
  background: rgba(0,187,195,0.15);
  color: #00d4dc;
  border-color: rgba(0,187,195,0.45);
  box-shadow: 0 2px 10px rgba(0,187,195,0.22);
  transform: translateY(-1px);
}
.trellis-pg-v2 .pg-btn-export:active:not(.is-disabled) { transform: translateY(0) scale(0.97); }

/* 3D result viewport */
.trellis-pg-v2 .result-viewport {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  background: rgba(0,0,0,0.3);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 320px;
}
.trellis-pg-v2 .result-viewport-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5);
}
/* Re-assert UA `[hidden] { display: none }` — author `display: flex` above
 * silently overrides the attribute, leaving placeholder text visible behind
 * the mounted <model-viewer>. */
.trellis-pg-v2 .result-viewport-placeholder[hidden] { display: none; }
.trellis-pg-v2 .result-viewport-label {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-2);
}
.trellis-pg-v2 .result-viewport-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  max-width: 280px;
  line-height: var(--lh-body);
}
.trellis-pg-v2 .result-viewport model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Orientation gizmo — anchored bottom-left of the viewport, only revealed
   after a successful generation. SVG axis triad + wireframe cube rotation
   is driven by JS on each model-viewer `camera-change`. Matches the BioEmu
   playground gizmo. */
.trellis-pg-v2 .tpg-gizmo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 56px;
  height: 56px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 4px;
  pointer-events: none;
  z-index: 2;
}
.trellis-pg-v2 .tpg-gizmo svg { display: block; width: 100%; height: 100%; }
.trellis-pg-v2 .tpg-gizmo[hidden] { display: none; }

/* Tech-stack strip widgets */
.trellis-pg-v2 .tech-stack-title,
.bioemu-pg-v1 .tech-stack-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.trellis-pg-v2 .tech-stack-tags,
.bioemu-pg-v1 .tech-stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.trellis-pg-v2 .tech-tag,
.bioemu-pg-v1 .tech-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-default);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-tag);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  background: rgba(255,255,255,0.05);
}

/* Stack columns + adjust paddings on tablet/mobile */
@media (max-width: 900px) {
  .trellis-pg-v2 .tpg-grid { grid-template-columns: 1fr; }
  .trellis-pg-v2 .tpg-col + .tpg-col {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 640px) {
  .trellis-pg-v2 .tpg-col { padding: var(--space-5); }
  .trellis-pg-v2 .tpg-techstrip,
  .bioemu-pg-v1 .tpg-techstrip { padding: var(--space-4) var(--space-5); }
  .trellis-pg-v2 .tpg-actions { flex-wrap: wrap; }
  .trellis-pg-v2 .tpg-actions .pg-btn-primary { flex: 1 1 100%; }
}


/* ============================================================
   ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE PASS — added 2026 (theme v1.1.19)
   ────────────────────────────────────────────────────────────
   All rules below are wrapped in @media queries; nothing here
   should affect the desktop layout at viewport widths >=1025px.
   Breakpoints in use:
     ≤1024px  tablet               (light reflow)
     ≤900px   tablet-narrow        (innovations sidebar stack,
                                    bio-* grids stack — partly
                                    handled inline above)
     ≤768px   mobile-large         (hamburger nav, single-col)
     ≤480px   mobile-small         (full single-column, tighter
                                    spacing, full-width buttons)
   ════════════════════════════════════════════════════════════
   ============================================================ */

/* ── Hamburger + drawer base styles (always parsed; toggled via media query) ── */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: var(--space-3);
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.nav-hamburger:focus-visible {
  outline: 2px solid rgba(120,170,255,0.7);
  outline-offset: 2px;
}
.nav-hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: calc(var(--z-nav) + 1);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-drawer-backdrop[hidden] { display: none; }
body.nav-drawer-open .nav-drawer-backdrop {
  display: block;
  opacity: 1;
}

.nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: rgba(10, 10, 14, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  z-index: calc(var(--z-nav) + 2);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  flex-direction: column;
  padding: var(--space-5);
  gap: var(--space-5);
  overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding-block: var(--space-2);
}
.nav-drawer-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}
.nav-drawer-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
}
.nav-drawer-close:focus-visible {
  outline: 2px solid rgba(120,170,255,0.7);
  outline-offset: 2px;
}
.nav-drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-drawer-links a {
  display: block;
  padding: var(--space-4) var(--space-3);
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.nav-drawer-links a[aria-current="page"] {
  color: var(--text-2);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
}
.nav-drawer-actions {
  margin-top: auto;
  padding-top: var(--space-4);
}
.nav-drawer-actions .btn { width: 100%; justify-content: center; }
body.nav-drawer-open { overflow: hidden; }

/* Mobile filter sidebar toggle (innovations page) — desktop hides it. */
.filter-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.filter-sidebar-toggle .filter-sidebar-toggle-chevron {
  transition: transform 0.25s ease;
}
.filter-sidebar-toggle.is-open .filter-sidebar-toggle-chevron {
  transform: rotate(180deg);
}

/* ── ≤1024px : tablet ─────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Cap homepage hero so it doesn't dominate tablet viewports. */
  .hero { min-height: clamp(520px, 70vh, 680px); }

  /* 3-col footer grid stays as-is on tablet (brand + 3 link columns fit). */
  footer { grid-template-columns: 1.5fr repeat(3, 1fr); }

  /* Stories / community card grids reflow more aggressively. */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* 4-up "New on Labs" / generic 4-col grid → 2-col. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* About-page domain rows slightly tighter. */
  .domain-row-panel-inner { gap: var(--space-7); }

  /* Carousel single-card view starts here so peek-side cards don't crop awkwardly. */
  .carousel-slide { min-width: 80vw; }
}

/* ── ≤900px : tablet-narrow (innovations sidebar stack) ───── */
@media (max-width: 900px) {
  .innovations-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .filter-sidebar {
    position: static;
  }
}

/* ── ≤768px : mobile-large ────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --page-gutter:      20px;
    --hero-top-padding: calc(var(--nav-height) + var(--space-7));
  }

  /* Site-wide section spacing — desktop --space-11 (96px) is too much. */
  .section { padding-block: var(--space-9); }

  /* ── NAV ── */
  .nav-links,
  .nav-actions { display: none; }
  .nav-hamburger { display: inline-flex; }
  .nav-drawer { display: flex; }
  nav[aria-label="Main navigation"] { padding-inline: var(--page-gutter); }

  /* ── HERO (homepage) ──
     .hero h1 mobile cap lives in `_responsive-patches/01-global.css` G-11
     (single source of truth for all hero h1 sizes on ≤768). Adding a
     competing clamp here is dead code — patches load after style.css. */
  .hero {
    min-height: clamp(440px, 72vh, 600px);
    padding-bottom: var(--space-7);
  }
  .hero-label svg { width: 64px; height: 64px; }
  .hero-label { margin-bottom: var(--space-5); }
  .hero-sub { font-size: var(--text-md); }
  .hero-actions { gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
  .btn-hero {
    padding: var(--space-3) var(--space-6);
  }

  /* Other page heroes (innovations, community, stories). */
  .page-header,
  .community-hero,
  .stories-hero {
    padding-top: calc(var(--nav-height) + var(--space-7));
    padding-bottom: var(--space-8);
  }
  .page-header h1,
  .community-hero h1,
  .stories-hero h1 {
    font-size: clamp(34px, 8vw, 56px);
  }

  /* Tap target floor — applies to most CTAs across the theme.
     Note: .carousel-dot intentionally excluded — dots are decorative
     indicators (carousel is driven by swipe + arrows). They get a
     padded transparent hit area below instead of a 44px visual circle. */
  .btn-pill,
  .btn-hero,
  .nav-drawer-links a,
  .filter-pill,
  .view-btn,
  .carousel-arrow,
  .connect-link,
  .card-link,
  .story-card-cta,
  .bio-back-link,
  .bio-hero-cta,
  .playground-stepper,
  .playground-tab,
  .preset-chip,
  .playground-preset,
  .filter-search,
  .filter-sort select,
  .filter-section-header,
  .video-play-btn { min-height: 44px; min-width: 44px; }

  /* ── PERFORMANCE: kill decorative particle canvases on small screens. */
  #dot-canvas,
  #dot-canvas-2 { display: none !important; }

  /* ── HOMEPAGE "New on Labs" card mosaic ── */
  .grid-feature { grid-template-columns: 1fr; }
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .card-stack { gap: var(--space-3); }

  /* ── CAROUSEL ── */
  .carousel-section { padding-inline: 0; }
  .carousel-slide {
    min-width: 88vw;
    width: 88vw;
    flex-direction: column;
    margin: 0 8px;
  }
  .cs-image {
    flex: 0 0 auto;
    width: 100%;
    min-height: 200px;
  }
  .cs-content {
    flex: 1 1 auto;
    padding: var(--space-5);
  }
  .carousel-arrow {
    width: 44px;
    height: 44px;
  }
  .carousel-arrow--prev { left: 8px; }
  .carousel-arrow--next { right: 8px; }
  .carousel-dots { padding: 0 var(--space-3); margin-top: var(--space-5); gap: 0; }
  .carousel-dot {
    width: 10px; height: 10px;
    padding: 12px;
    background-clip: content-box;
    box-sizing: content-box;
  }
  .carousel-dot.cd-active { width: 28px; padding: 12px; background-clip: content-box; box-sizing: content-box; }

  /* ── FRONTIER / mission section ── */
  .frontier-section { min-height: 60vh; }

  /* ── FOOTER ── */
  footer { padding: var(--space-7) var(--page-gutter); }

  /* ── ABOUT page ──
     .narrative-text h2 mobile size is owned by _responsive-patches/03-about.css
     (A-10) which sets var(--text-2xl). Patches load after style.css, so any
     override here is dead. */

  /* ── INNOVATIONS page ── */
  .filter-sidebar-toggle { display: inline-flex; }
  .filter-sidebar {
    overflow: hidden;
    max-height: 0;
    padding-block: 0;
    border: none;
    background: transparent;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .filter-sidebar.is-mobile-open {
    max-height: 2000px;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--border-card);
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-card);
  }
  .results-bar-inner { gap: var(--space-3); }
  .results-toolbar-right { width: 100%; justify-content: space-between; }
  /* I02: catalog-grid is now controlled by the 1024 (2-col) and 599 (1fr)
     dedicated rules above; do NOT override it inside the ≤768 pass. */

  /* ── STORIES page ── */
  .lead-card-content { padding: var(--space-5); }
  .lead-card-stats { flex-wrap: wrap; gap: var(--space-4); }

  /* ── COMMUNITY page ── */
  .event-featured { grid-template-columns: 1fr; }
  .event-featured-img { min-height: 200px; }
  .event-featured-body { padding: var(--space-5); }
  .event-featured-body .card-title { font-size: var(--text-xl); }

  /* ── BIOEMU innovation page ── */
  .bio-hero { padding-bottom: var(--space-9); }
  .bio-hero-inner,
  .bio-about-inner,
  .bio-explore-inner { padding-inline: var(--page-gutter); }
  .bio-stats { gap: var(--space-6); flex-wrap: wrap; }
  .bio-hero-title { font-size: clamp(34px, 8vw, 56px); }

  /* ── FLOATING UI: anim toggle stays bottom-left, shrunk by existing 600px rule.
        Keep it visually distinct from any other floating UI by leaving 12px+ gap. */
  .foundry-anim-toggle { left: 12px; bottom: 12px; }

  /* Footer tagline can be wider on mobile since it's a single column. */
  .footer-tagline { max-width: none; }
}

/* ── ≤480px : mobile-small ────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --page-gutter: 20px;
  }

  /* Even tighter section spacing. */
  .section { padding-block: var(--space-8); }

  /* All multi-col grids fully collapse to 1-col. */
  .grid-2,
  .grid-3,
  .grid-4,
  .blog-grid,
  .feed-grid,
  .events-row,
  .events-row--2col,
  .connect-grid,
  .catalog-grid { grid-template-columns: 1fr; }

  /* Logo parade bumps down again from the 768px 2-col rule. */
  .logo-parade-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero: smaller, stacked CTAs full-width.
     .hero h1 font-size is owned by _responsive-patches/01-global.css G-11. */
  .hero { min-height: clamp(380px, 65vh, 520px); }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
  }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .community-hero-actions,
  .lead-card-ctas,
  .cs-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .community-hero-actions .btn,
  .lead-card-ctas .btn,
  .cs-cta .btn,
  .cs-cta .btn-primary,
  .cs-cta .btn-ghost-sm { width: 100%; justify-content: center; text-align: center; }

  /* Footer collapses to single column. */
  footer {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .footer-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
  }
  .footer-bottom > .footer-legal-links,
  .footer-bottom > .footer-microsoft { grid-column: auto; justify-self: auto; }

  /* Section titles scale down further. */
  .section-title { font-size: clamp(28px, 7vw, 40px); }

  /* Logo parade slot height. */
  .logo-slot { height: 40px; font-size: var(--text-sm); }

  /* Carousel arrows can crowd content; nudge dots wider. */
  .carousel-arrow { width: 40px; height: 40px; }

  /* Anim toggle: shrink + pin tighter to corner so it doesn't overlap anything. */
  .foundry-anim-toggle { left: 8px; bottom: 8px; padding: 6px; }
}

/* ============================================================
   ════════════════════════════════════════════════════════════
   PER-PAGE MOBILE FIXES — theme v1.1.20
   ════════════════════════════════════════════════════════════
   ============================================================ */

/* ── HOME ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* H02: bento horizontal cards → single column with reasonable image height. */
  .card-mini--horizontal { grid-template-columns: 1fr; }
  .card-mini--horizontal .card-mini-img--sm { height: 200px; }
}
@media (max-width: 480px) {
  /* H04: arrows are too crowded at tiny widths; rely on swipe + dots.
        Adjacent-slide peek (88vw + scale 0.97 + opacity 0.3) already
        cues users that the carousel is swipeable. */
  .carousel-arrow { display: none; }
}
/* H05: respect notch/safe-area-inset on the hero gutter (landscape). */
.hero {
  padding-inline:
    max(var(--page-gutter), env(safe-area-inset-left))
    max(var(--page-gutter), env(safe-area-inset-right));
}
/* H08: tactile feedback on hero CTA tap. */
.btn-hero:active { transform: scale(0.98); }

/* ── 360px ultra-narrow safety net — guarantee no horizontal scroll. */
@media (max-width: 360px) {
  :root { --page-gutter: 20px; }
  .hero h1 { font-size: clamp(28px, 11vw, 40px); }
}

/* ── INNOVATIONS LISTING ──────────────────────────────────── */
@media (max-width: 768px) {
  /* I01: results bar collapses cleanly to a single column on mobile. */
  .results-bar { grid-template-columns: 1fr; }
  .results-bar-inner { grid-column: 1; }

  /* I12 (USER DECISION): on mobile the search-wrap is moved OUT of the
     aside in markup (page-innovations.php) so it stays visible above the
     filter-drawer toggle even when the drawer is collapsed. */
}

/* ── ABOUT ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* A14: each domain card expands its own inline panel rather than
     reusing the shared row-level panel (which makes no sense in a
     single-column grid). */
  .domain-row-panel { display: none; }

  .domain-card.is-open .domain-expand-panel {
    display: block;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .domain-card .domain-expand-panel {
    /* Hidden when card not open; resets layout for the inline form. */
    grid-template-columns: 1fr;
  }
  .domain-expand-vision,
  .domain-expand-projects {
    margin-top: var(--space-5);
  }
  .domain-expand-vision:first-child,
  .domain-expand-projects:first-child {
    margin-top: 0;
  }

  /* A14: drop the desktop max-height clip on the row-panel for any
     edge cases where it might still apply (defensive). */
  .domain-row-panel.is-open { max-height: none; }

  /* A02/A03/A08/A11: section padding was already consolidated by the
     site-wide rule in the cross-cutting block. */

  /* A17: ensure Mission split-statement words wrap cleanly. */
  .mission-statement,
  .mission-statement * { word-break: break-word; }
}

/* ── STORIES ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* S01: hide the FPO image placeholder entirely on mobile. The
     placeholder adds vertical noise without communicating anything;
     keep it for desktop where the layout needs the visual mass. */
  .story-card-image,
  .lead-card-image { display: none; }

  /* S04: lead-card stacks vertically; reverse variant should not flip
     order on mobile since the image is hidden. */
  .lead-card,
  .lead-card.lead-card--reverse {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  /* S09 + M01: card-cta tap target sized via cross-cutting tap-target
     selector list; nothing more needed here. */

  /* S11: reduce h3 size at narrow widths so headlines wrap to <= 3 lines. */
  .story-card-body h3 { font-size: var(--text-lg); }
}

/* ── COMMUNITY ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* C2: featured event footer wraps so the 'Register Free' pill drops
     below the location instead of squeezing both into one row. */
  .event-featured-footer {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .event-featured-footer .event-location { flex: 1 1 100%; }
  .event-featured-footer .event-register-cta,
  .event-featured-footer .btn-pill { flex: 0 0 auto; }

  /* C3: card-link comfortable mobile padding (taller tap surface). */
  .card-link {
    padding-block: var(--space-4);
  }

  /* C6: newsletter section tightens its inline padding so the input +
     button can sit on one row at 480px-ish without overflow. */
  .newsletter-section { padding-inline: var(--page-gutter); }
  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
  .newsletter-form .newsletter-input,
  .newsletter-form .btn-pill { width: 100%; }
}
.newsletter-status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  min-height: 1.4em;
}

/* ── BIOEMU PLAYGROUND ────────────────────────────────────── */
/* Components introduced in Phase 2f (retry buttons, viewer hint,
   playground-status--info). */
.playground-status--info {
  background: rgba(120,140,255,0.10);
  border: 1px solid rgba(120,140,255,0.30);
  color: rgba(220,225,255,0.92);
}
.playground-retry {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.playground-retry[hidden] { display: none; }
.playground-retry-btn {
  appearance: none;
  border: 1px solid rgba(120,140,255,0.45);
  background: rgba(79,66,253,0.18);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  min-width: 96px;
}
.playground-retry-btn:hover { background: rgba(79,66,253,0.32); }
.playground-retry-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.20);
}
.playground-viewer-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  background: rgba(10,4,32,0.7);
  color: rgba(220,225,255,0.85);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.playground-viewer-hint[hidden] { display: none; }
.playground-viewer:focus-visible {
  outline: 2px solid rgba(120,170,255,0.80);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* B01/B02: smaller viewer min-height so the form stays mostly above
     the fold on phones. */
  .playground-viewer { min-height: 260px; }

  /* B03: tighter card padding on mobile. */
  .playground-card { padding: var(--space-4); }

  /* B04: presets wrap and stack with more breathing room. */
  .playground-presets {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* B05: slider row gets generous tap targets on mobile (steppers
     covered by cross-cutting tap-target floor). */
  .playground-conformations-row { gap: var(--space-3); }

  /* B06: the generate button spans full width on mobile. */
  .playground-generate { width: 100%; }
  /* Mobile action buttons stack with reset above generate so the
     primary action stays the largest tap-target at the bottom. */
  .playground-action-buttons { flex-direction: column-reverse; }
  .playground-action-buttons .playground-reset,
  .playground-action-buttons .playground-generate { width: 100%; }
  /* Tech strip moved out of the card; natural bottom padding applies. */

  /* B11: hide the desktop-only viewer hint on small screens; the hint
     overlay is for mouse users — touch users don't need a copy of
     'drag to rotate' since they can already pinch/swipe natively. */
  .playground-viewer-hint { display: none; }

  /* ──────────────────────────────────────────────────────────
     QA-R1 BUG 4 — BioEmu single-view compact playground.
     Reorders the grid so the 3D viewer sits at the top, collapses
     the sequence textarea to a single horizontally-scrolling line,
     turns presets into a horizontal scroller, and packs the
     conformations slider + Generate button into one row.
     All data-bio-* JS hooks are preserved; structural change only
     rewrites layout, not DOM.
     ────────────────────────────────────────────────────────── */

  /* Viewer first, input panel below. */
  .playground-grid { display: flex; flex-direction: column; gap: var(--space-4); }
  .playground-panel--result { order: -1; }
  .playground-viewer { min-height: 220px; }
  .playground-viewer-placeholder-sub { display: none; }
  .playground-helper { display: none; }
  /* R4: gizmo + download row — 8px gap to viewer, left-aligned gizmo,
     download on the right. Default state shows gizmo as placeholder;
     hidden during loading/error; restored on success with download. */
  .playground-results-actions {
    gap: var(--space-3);
    margin-top: 8px;
    justify-content: space-between;
  }
  .playground-gizmo { width: 48px; height: 48px; }

  /* Persistent gizmo placeholder: force actions row visible even when
     JS sets [hidden], but hide download until generation succeeds. */
  .playground-results-actions[hidden] {
    display: flex !important;
    justify-content: flex-start;
  }
  .playground-results-actions[hidden] .playground-download { display: none; }

  /* During loading or error, hide the entire actions row so the
     status/retry panel is the sole focus. JS clears [hidden] on
     success which brings both gizmo + download back. */
  .playground-panel--result:has(.playground-status:not([hidden])) .playground-results-actions,
  .playground-panel--result:has(.playground-retry:not([hidden])) .playground-results-actions {
    display: none !important;
  }

  /* Compress chrome — tighter card/panel padding so the playground
     occupies more of the viewport width (R2-2). */
  .playground-inner { padding-inline: var(--space-2); }
  .playground-card { padding: var(--space-2); }
  .playground-panel { padding: var(--space-2); }
  .playground-panel-header { margin-bottom: var(--space-2); }
  /* R4: result panel header sits flush so the viewer gets max height. */
  .playground-panel--result .playground-panel-header { margin-bottom: var(--space-1, 4px); }
  .playground-panel-sub { display: none; }

  /* R2-4: keep all three tabs visible as a horizontally-scrollable
     segmented control. UniProt / PDB stay disabled with the
     'Coming soon' tooltip — accessibility intent preserved. */
  .playground-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .playground-tabs::-webkit-scrollbar { display: none; }
  .playground-tab {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .playground-tab-icon { width: 15px; height: 15px; }

  /* Single-line protein sequence — textarea behaves like an input. */
  .playground-textarea {
    min-height: 0 !important;
    height: 44px;
    resize: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 12px;
    line-height: 20px;
  }

  /* R2-1: stack the "Try a preset" label above the chips, then the chips
     become the horizontal-scroll row below. */
  .playground-presets {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }
  .playground-presets-label {
    flex-shrink: 0;
    font-size: 10px;
    align-self: flex-start;
    margin-right: 0;
  }
  .playground-presets-chips {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 100%;
    padding-bottom: 4px;
  }
  .playground-presets-chips::-webkit-scrollbar { display: none; }
  .playground-preset {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Conformations: slider + Generate centered on the same row with
     generous breathing room (R3). */
  .playground-action-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
  }
  .playground-conformations { gap: var(--space-2); flex: 1; min-width: 0; }
  .playground-conformations-label {
    font-size: 10px;
  }
  /* R2-3: smaller value readout to fit the compact row. */
  .playground-conformations-value {
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .playground-conformations-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .playground-stepper { display: none; }
  /* R2-3: thinner slider track + smaller thumb on mobile. */
  .playground-slider { flex: 1; min-width: 0; height: 3px; }
  .playground-slider::-webkit-slider-thumb { width: 14px; height: 14px; }
  .playground-slider::-moz-range-thumb { width: 14px; height: 14px; }
  .playground-generate {
    width: auto;
    height: 40px;
    padding: 0 var(--space-4);
    flex-shrink: 0;
  }
}

/* QA-R1 BUG 3 — hide the floating animation toggle pill on mobile.
   Particle canvases are already display:none on ≤768 (style.css:4577),
   so the toggle has nothing to control. */
@media (max-width: 768px) {
  .foundry-anim-toggle { display: none !important; }
}

/* ── INNOVATION (single) ─────────────────────────────────── */
@media (max-width: 768px) {
  /* G07: the_content overflow guards (img/video/iframe/table/pre) are
     already covered by the cross-cutting .bio-about-body block in
     Phase 1 — keep this stub so future per-page rules have a home. */

  /* G11: hero CTA wraps below the eyebrow at narrow widths. */
  .bio-hero-cta {
    flex-wrap: wrap;
    text-align: left;
  }
  .bio-hero-cta-label { word-break: break-word; }
}

/* ════════════════════════════════════════════════════════════
   SITE-WIDE HYGIENE RULES
   ────────────────────────────────────────────────────────────
   Site-wide hygiene rules: focus-visible, skip-link, scroll-margin,
   anchor LCP overrides, the_content overflow guards, status-pill
   modifiers, hover guards on touch devices, prefers-reduced-motion,
   section-padding consolidation, footer link tap targets.
   ════════════════════════════════════════════════════════════
   ============================================================ */

/* ── Skip link (header.php) ────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  outline: 2px solid rgba(120,170,255,0.7);
  outline-offset: 2px;
}

/* ── Scroll-margin so anchor jumps clear the fixed nav. ───── */
#events,
#engage,
#main-content { scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }

/* ── Focus-visible — systematic outline pass for interactive
      surfaces that lacked any keyboard-focus indicator. Mirror
      the .nav-hamburger pattern. ───────────────────────────── */
.story-card-cta:focus-visible,
.card-link:focus-visible,
.connect-link:focus-visible,
.video-play-btn:focus-visible,
.bio-back-link:focus-visible,
.bio-hero-cta:focus-visible,
.bio-explore-card:focus-visible,
.btn-hero:focus-visible,
.filter-pill:focus-visible,
.filter-section-header:focus-visible,
.playground-tab:focus-visible,
.playground-preset:focus-visible,
.playground-stepper:focus-visible,
.exp-card:focus-visible,
.exp-card-cta:focus-visible,
footer a:focus-visible {
  outline: 2px solid rgba(120,170,255,0.7);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── the_content overflow guards (scoped to .bio-about-body
      so editor-authored content can't spill horizontally). ── */
.bio-about-body img,
.bio-about-body video,
.bio-about-body iframe,
.bio-about-body table,
.bio-about-body pre,
.bio-about-body .wp-block-embed iframe,
.bio-about-body .wp-block-gallery,
.bio-about-body figure { max-width: 100%; height: auto; }
.bio-about-body table { display: block; overflow-x: auto; }
.bio-about-body pre { overflow-x: auto; white-space: pre-wrap; }
.bio-about-body .alignwide,
.bio-about-body .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }

/* ── Status-pill modifier classes — used by the hero pill bar on the
      innovation detail page (rendered alongside domain/type/capability
      pills via single-innovation.php). The decorative status_badges
      checkbox field has been removed. */
.bio-pill--status               { font-weight: 600; letter-spacing: 0.05em; }
.bio-pill--status-experimental  { background: rgba(255, 200, 100, 0.15); border-color: rgba(255, 200, 100, 0.4); }
.bio-pill--status-research      { background: rgba(150, 200, 255, 0.15); border-color: rgba(150, 200, 255, 0.4); }
.bio-pill--status-production    { background: rgba(120, 220, 160, 0.15); border-color: rgba(120, 220, 160, 0.4); }

/* ── Hover guard for touch-only devices: kill hover transforms
      so cards don't get stuck in "hover" state after a tap. ── */
@media (hover: none) {
  .lead-card:hover,
  .story-card:hover,
  .story-card-cta:hover,
  .exp-card:hover,
  .domain-card:hover,
  .connect-card:hover,
  .bio-explore-card:hover,
  .btn-hero:hover,
  .card-mini:hover,
  .video-play-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: inherit;
  }
}

/* ── prefers-reduced-motion: respect on mobile only. ──────────
   Windows reports `reduce` by default which would blank ALL desktop
   animations. The manual anim-toggle (assets/js/anim-toggle.js) is
   the desktop accessibility control. On mobile (≤768) animations are
   already disabled; reinforce that here. The spinner exception stays
   universal since it's a functional indicator. */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
  .orbit-ring,
  .orbit-ring--1,
  .orbit-ring--2,
  .orbit-ring--3 { animation: none !important; }
  #dot-canvas,
  #dot-canvas-2 { display: none !important; }
}
/* Spinner keeps animating regardless of reduced-motion (functional indicator). */
@media (prefers-reduced-motion: reduce) {
  .playground-spinner {
    animation-duration: 800ms !important;
    animation-iteration-count: infinite !important;
  }
}

/* ── Mobile section-padding consolidation + footer link tap
      target floor. ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .vp-section,
  .narrative-section,
  .domains-section,
  .mission-section,
  .video-section,
  .connect-section,
  .newsletter-section,
  .bio-hero,
  .bio-about-grid,
  .bio-explore,
  .playground-section { padding-block: var(--space-9); }
  .bio-demo { padding-block: 0; }

  .footer-col a {
    display: inline-block;
    padding-block: 8px;
    min-height: 44px;
  }
}