/* ─────────────────────────────────────────────────────────────────────
   Quriso · v2 design system
   Modern, technical, confident. Linear/Vercel-school with Indian heritage warmth.
   3 themes (data-theme): precision · editorial · inverted
   5 palettes (data-palette): forest · burgundy · plum · terracotta · midnight
   ───────────────────────────────────────────────────────────────────── */

/* ═══ 1. PALETTE TOKENS — RGB triplets, untouched from v1 ═══ */
:root,
:root[data-palette="forest"] {
  --rgb-forest:   26 23 64;
  --rgb-forest2:  45 41 96;
  --rgb-saffron:  234 88 12;
  --rgb-saffron2: 245 158 11;
  --rgb-cream:    250 246 238;
  --rgb-sage:     232 228 245;
  --rgb-sage2:    245 239 226;
  --rgb-amber:    252 211 77;
  --rgb-ink:      26 24 48;
  --rgb-slate2:   107 106 126;
  --c-forest-deep: #0F0D2C;
  --c-orb-rim:     #F59E0B;
}
:root[data-palette="burgundy"] {
  --rgb-forest:   107 24 57;
  --rgb-forest2:  138 32 75;
  --rgb-saffron:  217 119 6;
  --rgb-saffron2: 245 158 11;
  --rgb-cream:    253 247 240;
  --rgb-sage:     253 226 217;
  --rgb-sage2:    251 207 195;
  --rgb-amber:    250 204 21;
  --rgb-ink:      40 28 32;
  --rgb-slate2:   122 100 110;
  --c-forest-deep: #4A0E26;
  --c-orb-rim:     #D97706;
}
:root[data-palette="plum"] {
  --rgb-forest:   76 29 149;
  --rgb-forest2:  95 39 175;
  --rgb-saffron:  234 88 12;
  --rgb-saffron2: 249 115 22;
  --rgb-cream:    253 250 245;
  --rgb-sage:     237 226 252;
  --rgb-sage2:    214 195 245;
  --rgb-amber:    252 211 77;
  --rgb-ink:      36 28 56;
  --rgb-slate2:   110 100 132;
  --c-forest-deep: #2E1065;
  --c-orb-rim:     #EA580C;
}
:root[data-palette="terracotta"] {
  --rgb-forest:   124 45 18;
  --rgb-forest2:  154 60 28;
  --rgb-saffron:  180 83 9;
  --rgb-saffron2: 217 119 6;
  --rgb-cream:    253 247 235;
  --rgb-sage:     254 235 200;
  --rgb-sage2:    250 218 168;
  --rgb-amber:    234 179 8;
  --rgb-ink:      45 28 18;
  --rgb-slate2:   135 110 88;
  --c-forest-deep: #5A1D0A;
  --c-orb-rim:     #B45309;
}
:root[data-palette="midnight"] {
  --rgb-forest:   30 41 59;
  --rgb-forest2:  51 65 85;
  --rgb-saffron:  234 88 12;
  --rgb-saffron2: 249 115 22;
  --rgb-cream:    253 250 244;
  --rgb-sage:     254 243 199;
  --rgb-sage2:    253 230 138;
  --rgb-amber:    252 211 77;
  --rgb-ink:      15 23 42;
  --rgb-slate2:   100 116 139;
  --c-forest-deep: #0F172A;
  --c-orb-rim:     #EA580C;
}

/* Hex convenience aliases */
:root {
  --forest:  rgb(var(--rgb-forest));
  --forest2: rgb(var(--rgb-forest2));
  --saffron: rgb(var(--rgb-saffron));
  --cream:   rgb(var(--rgb-cream));
  --sage:    rgb(var(--rgb-sage));
  --sage2:   rgb(var(--rgb-sage2));
  --amber:   rgb(var(--rgb-amber));
  --ink:     rgb(var(--rgb-ink));
  --slate2:  rgb(var(--rgb-slate2));
}

/* ═══ 2. THEME TOKENS — semantic vars per visual mode ═══ */

/* Default = precision */
:root {
  /* Surface scale */
  --page-bg:      rgb(var(--rgb-cream));
  --surface:      #FFFFFF;
  --surface-2:    rgb(var(--rgb-sage) / 0.4);
  --surface-dark: rgb(var(--rgb-forest));
  --surface-dark-2: var(--c-forest-deep);

  /* Hairlines */
  --hairline:        rgb(var(--rgb-forest) / 0.10);
  --hairline-strong: rgb(var(--rgb-forest) / 0.18);
  --hairline-faint:  rgb(var(--rgb-forest) / 0.06);

  /* Text */
  --text:        rgb(var(--rgb-ink));
  --text-muted:  rgb(var(--rgb-ink) / 0.68);
  --text-dim:    rgb(var(--rgb-ink) / 0.45);
  --text-on-dark:       rgb(var(--rgb-cream));
  --text-on-dark-muted: rgb(var(--rgb-cream) / 0.7);

  /* Display */
  --display-color: rgb(var(--rgb-forest));
  --accent: rgb(var(--rgb-saffron));
  --accent-2: rgb(var(--rgb-saffron2));

  /* Type */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-serif:   'Fraunces', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
  --display-tracking: -0.035em;
  --display-weight:   700;
  --display-style:    normal;
  --display-feature:  "ss01", "ss02", "cv11";

  /* Shape */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows — flat and confident */
  --shadow-flat: 0 1px 0 rgb(var(--rgb-forest) / 0.04);
  --shadow-card: 0 1px 0 rgb(var(--rgb-forest) / 0.04), 0 1px 2px rgb(var(--rgb-forest) / 0.04);
  --shadow-card-hover: 0 1px 0 rgb(var(--rgb-forest) / 0.04), 0 22px 50px -28px rgb(var(--rgb-forest) / 0.40);
  --shadow-deep: 0 30px 60px -32px rgb(var(--rgb-forest) / 0.5);

  /* Accent strengths */
  --accent-glow: 0 0 0 0 rgb(var(--rgb-saffron) / 0);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur:  .35s;
}

/* Theme: PRECISION (default — Linear/Vercel feel) */
:root[data-theme="precision"] {
  --page-bg: #FBF7EF;
  --surface: #FFFFFF;
  --surface-2: #F4EFE4;
  --hairline:        rgb(var(--rgb-forest) / 0.09);
  --hairline-strong: rgb(var(--rgb-forest) / 0.18);
  --display-tracking: -0.04em;
  --display-weight: 700;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --shadow-card: 0 1px 0 rgb(var(--rgb-forest) / 0.04);
  --shadow-card-hover: 0 1px 0 rgb(var(--rgb-forest) / 0.04), 0 22px 50px -30px rgb(var(--rgb-forest) / 0.35);
  --radius:    16px;
  --radius-lg: 22px;
}

/* Theme: EDITORIAL — Fraunces forward, magazine-grade */
:root[data-theme="editorial"] {
  --page-bg: #FAF4E6;
  --surface: #FFFDF7;
  --surface-2: #F3EAD3;
  --hairline:        rgb(var(--rgb-forest) / 0.14);
  --hairline-strong: rgb(var(--rgb-forest) / 0.28);
  --display-tracking: -0.025em;
  --display-weight: 900;
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --shadow-card: 0 1px 0 rgb(var(--rgb-forest) / 0.06);
  --shadow-card-hover: 0 2px 0 rgb(var(--rgb-forest) / 0.08), 0 26px 60px -28px rgb(var(--rgb-forest) / 0.35);
  --radius:    12px;
  --radius-lg: 18px;
}

/* Theme: INVERTED — dark inkwell base */
:root[data-theme="inverted"] {
  --page-bg: rgb(var(--rgb-forest));
  --surface: rgb(var(--rgb-cream) / 0.04);
  --surface-2: rgb(var(--rgb-cream) / 0.06);
  --hairline:        rgb(var(--rgb-cream) / 0.10);
  --hairline-strong: rgb(var(--rgb-cream) / 0.20);
  --hairline-faint:  rgb(var(--rgb-cream) / 0.05);
  --text:        rgb(var(--rgb-cream));
  --text-muted:  rgb(var(--rgb-cream) / 0.7);
  --text-dim:    rgb(var(--rgb-cream) / 0.45);
  --display-color: rgb(var(--rgb-cream));
  --display-tracking: -0.04em;
  --display-weight: 700;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --shadow-card: inset 0 1px 0 rgb(var(--rgb-cream) / 0.04);
  --shadow-card-hover: inset 0 1px 0 rgb(var(--rgb-cream) / 0.06), 0 24px 60px -30px rgb(0 0 0 / 0.6);
  --radius:    16px;
  --radius-lg: 22px;
}

/* ═══ 3. BASE ═══ */
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100vw; }
body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-sans);
  letter-spacing: -0.012em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

::selection { background: var(--accent); color: var(--cream); }

/* ═══ 4. TYPOGRAPHY ═══ */
.font-display {
  font-family: var(--font-display) !important;
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  letter-spacing: var(--display-tracking);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-feature-settings: var(--display-feature);
}
.tabular { font-variant-numeric: tabular-nums; }

/* Italic display flourish — Fraunces, regardless of theme display font */
.font-display.italic,
.font-display[style*="italic"] {
  font-family: 'Fraunces', ui-serif, Georgia, serif !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}
:root[data-theme="editorial"] .font-display.italic {
  font-weight: 400;
}

/* Theme-specific display weight rules — dial back the heaviest display weight */
:root[data-theme="precision"] .font-display { font-weight: var(--display-weight); }
:root[data-theme="precision"] .font-display.font-\[900\] { font-weight: 800; }
:root[data-theme="editorial"] .font-display.font-\[900\] { font-weight: 900; }
:root[data-theme="inverted"] .font-display { font-weight: var(--display-weight); }
:root[data-theme="inverted"] .font-display.font-\[900\] { font-weight: 800; }

/* ═══ 5. NEW PRIMITIVES ═══ */

/* Mono micro-label — used as Linear-style section codes */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mono-tag::before {
  content: '[';
  color: var(--text-dim);
  font-weight: 400;
}
.mono-tag::after {
  content: ']';
  color: var(--text-dim);
  font-weight: 400;
}

/* Hairline rule */
.hairline-rule {
  height: 1px;
  background: var(--hairline);
  width: 100%;
}

/* Section index — vertical mono indicator at top of section */
.section-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Surface mode helpers — used via inline class to apply theme surface */
.surface       { background: var(--surface); border: 1px solid var(--hairline); }
.surface-2     { background: var(--surface-2); border: 1px solid var(--hairline-faint); }
.surface-flat  { background: transparent; border: 1px solid var(--hairline); }

/* ═══ 6. THEME-AWARE OVERRIDES of v1 utility classes ═══
   The JSX uses Tailwind utility classes (bg-cream, text-forest, border-forest/10).
   We override those classes here so the same JSX looks different per theme.
   Critical: only override what visually needs to change. */

/* Page surface */
:root[data-theme="precision"] .bg-cream { background-color: var(--page-bg) !important; }
:root[data-theme="editorial"] .bg-cream { background-color: var(--page-bg) !important; }

/* INVERTED — flip surfaces site-wide */
:root[data-theme="inverted"] body { background: var(--page-bg); }

:root[data-theme="inverted"] .bg-cream {
  background-color: rgb(var(--rgb-forest)) !important;
  color: rgb(var(--rgb-cream)) !important;
}
:root[data-theme="inverted"] .bg-cream\/85,
:root[data-theme="inverted"] .bg-cream\/95 {
  background-color: rgb(var(--rgb-forest) / 0.85) !important;
}
:root[data-theme="inverted"] .bg-sage,
:root[data-theme="inverted"] .bg-sage\/40,
:root[data-theme="inverted"] .bg-sage\/45,
:root[data-theme="inverted"] .bg-sage\/65 {
  background-color: rgb(var(--rgb-cream) / 0.04) !important;
}
:root[data-theme="inverted"] .text-forest { color: rgb(var(--rgb-cream)) !important; }
:root[data-theme="inverted"] .text-forest\/85 { color: rgb(var(--rgb-cream) / 0.85) !important; }
:root[data-theme="inverted"] .text-ink,
:root[data-theme="inverted"] .text-ink\/75,
:root[data-theme="inverted"] .text-ink\/70,
:root[data-theme="inverted"] .text-ink\/65,
:root[data-theme="inverted"] .text-ink\/85 {
  color: rgb(var(--rgb-cream) / 0.75) !important;
}
:root[data-theme="inverted"] .text-ink\/45,
:root[data-theme="inverted"] .text-slate2 {
  color: rgb(var(--rgb-cream) / 0.5) !important;
}
:root[data-theme="inverted"] .border-forest,
:root[data-theme="inverted"] .border-forest\/10,
:root[data-theme="inverted"] .border-forest\/15,
:root[data-theme="inverted"] .border-forest\/20,
:root[data-theme="inverted"] .border-forest\/25 {
  border-color: rgb(var(--rgb-cream) / 0.12) !important;
}
:root[data-theme="inverted"] .border-cream\/15 { border-color: rgb(var(--rgb-cream) / 0.15) !important; }

/* Architecture chart cards on inverted */
:root[data-theme="inverted"] .arch-layer-card { background: rgb(var(--rgb-cream) / 0.04) !important; }

/* Cream-on-forest sections (DiscoverPillar, FinalCta, Footer, Inverted's HQ map block):
   On inverted theme, those are SAME color as page — so add a hairline border. */
:root[data-theme="inverted"] .bg-forest,
:root[data-theme="inverted"] .bg-forest\/95 {
  background-color: rgb(var(--rgb-forest)) !important;
  border-top: 1px solid var(--hairline-faint);
}

/* ═══ 7. NAV ═══ */
header.fixed {
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
header.fixed.bg-cream\/85 {
  background-color: rgb(var(--rgb-cream) / 0.78) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
:root[data-theme="inverted"] header.fixed.bg-cream\/85 {
  background-color: rgb(var(--rgb-forest) / 0.78) !important;
  border-bottom: 1px solid var(--hairline) !important;
}

/* Brand mark — uses the actual Quriso logo */
.quriso-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background-color: #FBF7EF;
  background-image: url("../assets/favicon-192.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgb(var(--rgb-forest) / 0.08);
}
.quriso-mark::before,
.quriso-mark::after { content: none; }
:root[data-theme="inverted"] .quriso-mark {
  box-shadow: 0 0 0 1px rgb(var(--rgb-cream) / 0.18);
}

/* ═══ 8. BUTTONS ═══ */
.btn { transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn:active { transform: translateY(1px); }

/* Layout safety net: Tailwind preflight sets `svg { display:block }`, so an
   icon inside a button that ISN'T already a flex container drops onto its own
   line (the "Book walkthrough ⏎ →" bug). Any .btn that doesn't bring its own
   `flex` becomes an inline-flex with centered content, a sensible icon gap,
   and no wrapping. Buttons that already declare `flex …` are left untouched. */
.btn:not(.flex):not(.inline-flex) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
}
/* Belt-and-braces: never let a button's inline icon wrap to a new line. */
.btn svg { flex-shrink: 0; }

/* Saffron CTA — refined */
.bg-saffron {
  background-color: var(--accent) !important;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.12) inset,
    0 -1px 0 rgb(0 0 0 / 0.16) inset,
    0 6px 20px -8px rgb(var(--rgb-saffron) / 0.5);
}
.bg-saffron:hover {
  background-color: var(--accent-2) !important;
}

/* Forest CTA (dark button) */
.bg-forest {
  background-color: var(--forest);
}

/* Refine the saffron-ringed play button on hero */
.link-forest::after { background: var(--accent); }

/* ═══ 9. MODULE CARD — completely restyled ═══ */
.module-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  padding: 24px 26px !important;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.module-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.module-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong) !important;
  box-shadow: var(--shadow-card-hover);
}
.module-card:hover::before { transform: scaleX(1); }

/* Module card icon well */
.module-card .bg-sage {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--hairline-faint);
  border-radius: 10px !important;
}

/* Module card number — make it monospace */
.module-card .font-display.italic {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-size: 15px !important;
  letter-spacing: 0.05em;
  color: var(--accent) !important;
  text-transform: uppercase;
  font-weight: 500;
}

/* ═══ 10. EYEBROWS / TAGS ═══
   Replace the boring uppercase tracked text with mono code labels. */
.tracking-\[0\.18em\].uppercase.text-saffron {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tracking-\[0\.18em\].uppercase.text-saffron::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}

/* The pill-style eyebrow on hero ("Manage. Discover. Grow.") — refine */
.bg-sage.text-forest.text-\[12px\] {
  background-color: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  font-size: 15px !important;
  padding: 8px 16px !important;
}
:root[data-theme="inverted"] .bg-sage.text-forest.text-\[12px\] {
  background-color: rgb(var(--rgb-cream) / 0.04) !important;
  border-color: var(--hairline-strong) !important;
  color: rgb(var(--rgb-cream)) !important;
}

/* ═══ 11. ARCHITECTURE LAYERS ═══ */
.arch-layer-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  transition: transform .55s var(--ease), opacity .55s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.arch-layer-card:hover { border-color: var(--hairline-strong) !important; }
.arch-layer-card.is-accent { border-color: rgb(var(--rgb-saffron) / 0.35) !important; }

/* ═══ 12. SECTION CHROME ═══ */

/* Replace the wavy SVG divider with hairline-rule presence */
.wavy { display: none; }

/* Module card grid integration card (Tally box) */
.border-dashed.border-forest\/25 {
  border-style: dashed !important;
  border-color: var(--hairline-strong) !important;
}

/* "Five governance layers" section bg */
.bg-sage\/45 {
  background-color: var(--surface-2) !important;
}
:root[data-theme="inverted"] .bg-sage\/45 {
  background-color: rgb(var(--rgb-cream) / 0.03) !important;
}

/* Trust strip (forest marquee) — keep forest but refine */
section.bg-forest.marquee { border-block: 1px solid var(--hairline); }

/* ═══ 13. HERO ILLUSTRATION ═══ */
.hero-illustration-wrap {
  position: relative;
}
.hero-illustration-wrap::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--rgb-saffron) / 0.18), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* Hero illustration — theme-aware tile faces */
.hero-tile rect.hero-tile-face {
  fill: var(--surface);
  stroke: rgb(var(--rgb-forest) / 0.45);
}
:root[data-theme="inverted"] .hero-tile rect.hero-tile-face {
  fill: rgb(var(--rgb-cream) / 0.05);
  stroke: rgb(var(--rgb-cream) / 0.3);
}
:root[data-theme="inverted"] .hero-tile text {
  fill: rgb(var(--rgb-cream)) !important;
}

/* ═══ 14. ANIMATIONS — refined and unchanged ═══ */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes heroRoomGlow {
  0%, 70%, 100% { opacity: 0; transform: scale(0.94); }
  10%, 38%      { opacity: 1; transform: scale(1); }
}
.hero-room-glow {
  opacity: 0;
  transform-origin: center;
  animation: heroRoomGlow 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.45s);
}
@keyframes heroBellSwing { 0%,100% { transform: rotate(-8deg);} 50% { transform: rotate(8deg);} }
.hero-bell { animation: heroBellSwing 2.8s ease-in-out infinite; }
@keyframes heroPennant { 0%,100% { transform: scaleX(1) skewY(0deg);} 50% { transform: scaleX(0.94) skewY(-2deg);} }
.hero-pennant { animation: heroPennant 3.2s ease-in-out infinite; }
@keyframes heroSparkRise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(-90px) scale(1.1); opacity: 0; }
}
.hero-spark { animation: heroSparkRise 7s ease-out infinite; transform-origin: center; }
@keyframes heroPulse { 0%,100% { opacity: 1;} 50% { opacity: 0.4;} }
.hero-pulse { animation: heroPulse 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes rimPulse {
  0%,100% { opacity: 0.85; filter: blur(0); }
  50%     { opacity: 1;    filter: blur(0.5px); }
}
.rim-pulse { animation: rimPulse 5s ease-in-out infinite; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Hero tile interactive */
.hero-tile { cursor: pointer; transition: transform .25s var(--ease), filter .25s var(--ease); transform-origin: center; transform-box: fill-box; }
.hero-tile rect.hero-tile-face { transition: fill .25s var(--ease), stroke .25s var(--ease), stroke-width .25s var(--ease); }
.hero-tile rect.hero-tile-glowstatic { opacity: 0; transition: opacity .25s var(--ease); }
.hero-tile:hover { transform: translateY(-2px) scale(1.04); }
.hero-tile:hover rect.hero-tile-face { fill: #FFF4D8; stroke: var(--accent); stroke-width: 1.8; }
.hero-tile:hover rect.hero-tile-glowstatic { opacity: 1; }
.hero-tile:focus { outline: none; }
.hero-tile:focus-visible rect.hero-tile-face { stroke: var(--accent); stroke-width: 2.2; }

/* Float WA pulse */
@keyframes waPulse {
  0%,100% { box-shadow: 0 8px 24px -8px rgb(var(--rgb-forest) / 0.4), 0 0 0 0 rgb(var(--rgb-saffron) / 0.5); }
  50%     { box-shadow: 0 8px 24px -8px rgb(var(--rgb-forest) / 0.4), 0 0 0 18px rgb(var(--rgb-saffron) / 0); }
}
.wa-pulse { animation: waPulse 3.4s ease-out infinite; }

/* Architecture pulse */
@keyframes layerPulse {
  0%   { box-shadow: 0 0 0 0 rgb(var(--rgb-saffron) / 0.45); }
  100% { box-shadow: 0 0 0 14px rgb(var(--rgb-saffron) / 0); }
}
.layer-pulse { animation: layerPulse 1.6s ease-out 1; }

/* Sticky pillar layout helper */
.pillar-sticky { position: sticky; top: 96px; }

/* Link underline */
.link-forest { position: relative; }
.link-forest::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.link-forest:hover::after { transform: scaleX(1); }

/* Lab card (Discover pillar dark cards) */
.lab-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.lab-card:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--rgb-saffron) / 0.5) !important;
  box-shadow: 0 24px 50px -22px rgb(var(--rgb-saffron) / 0.35);
}

/* Hero text-grain & subtle dot grid on cream */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgb(var(--rgb-forest)) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* Pill amber (Coming soon) */
.pill-amber {
  background: var(--amber);
  color: rgb(var(--rgb-ink));
  border: 1px solid rgb(var(--rgb-forest) / 0.18);
  font-family: var(--font-mono);
}

/* Coordinator section document illustration */
.doc-illu { stroke: rgb(var(--rgb-forest)); fill: rgb(var(--rgb-sage)); stroke-width: 1.5; }
:root[data-theme="inverted"] .doc-illu {
  stroke: rgb(var(--rgb-cream));
  fill: rgb(var(--rgb-cream) / 0.06);
}

/* Lightbox */
.lightbox { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgb(var(--rgb-forest) / 0.65); }

/* ═══ 15. POSH REFINEMENT UTILITIES ═══ */
.hairline-gold-top    { box-shadow: inset 0 1px 0 0 rgb(var(--rgb-saffron2) / 0.35); }
.hairline-gold-bottom { box-shadow: inset 0 -1px 0 0 rgb(var(--rgb-saffron2) / 0.35); }
.posh-card-shadow     { box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 1px 2px rgb(var(--rgb-forest) / 0.04), 0 24px 60px -32px rgb(var(--rgb-forest) / 0.35); }

/* ═══ 16. EDITORIAL theme — push serif moments harder ═══ */
:root[data-theme="editorial"] .font-display {
  font-feature-settings: "ss01", "ss02", "cv11";
}
:root[data-theme="editorial"] .module-card .font-display:not(.italic) {
  font-family: var(--font-display) !important;
}
:root[data-theme="editorial"] h1.font-display,
:root[data-theme="editorial"] h2.font-display {
  letter-spacing: -0.03em;
}

/* ═══ 17. PRECISION theme — tight grotesk display ═══ */
:root[data-theme="precision"] h1.font-display,
:root[data-theme="precision"] h2.font-display {
  letter-spacing: -0.045em;
  font-weight: 700;
}
:root[data-theme="precision"] h1.font-display.font-\[900\] { font-weight: 800; }

/* ═══ 18. INVERTED theme — glow accents ═══ */
:root[data-theme="inverted"] .module-card {
  background: rgb(var(--rgb-cream) / 0.04) !important;
}
:root[data-theme="inverted"] .module-card:hover {
  background: rgb(var(--rgb-cream) / 0.06) !important;
  box-shadow: 0 1px 0 rgb(var(--rgb-cream) / 0.06) inset, 0 24px 60px -30px rgb(0 0 0 / 0.6);
}
:root[data-theme="inverted"] .module-card .bg-sage {
  background: rgb(var(--rgb-cream) / 0.08) !important;
  border-color: rgb(var(--rgb-cream) / 0.1) !important;
  color: rgb(var(--rgb-cream)) !important;
}
:root[data-theme="inverted"] .module-card .text-forest { color: rgb(var(--rgb-cream)) !important; }
:root[data-theme="inverted"] .module-card .text-ink\/75 { color: rgb(var(--rgb-cream) / 0.7) !important; }
:root[data-theme="inverted"] .arch-layer-card .text-forest { color: rgb(var(--rgb-cream)) !important; }
:root[data-theme="inverted"] .arch-layer-card .text-ink\/70 { color: rgb(var(--rgb-cream) / 0.7) !important; }
:root[data-theme="inverted"] .arch-layer-card .text-forest\/45 { color: rgb(var(--rgb-cream) / 0.4) !important; }

/* Inverted: ring colors in form inputs etc */
:root[data-theme="inverted"] input,
:root[data-theme="inverted"] textarea,
:root[data-theme="inverted"] select {
  background: rgb(var(--rgb-cream) / 0.04) !important;
  border-color: var(--hairline-strong) !important;
  color: rgb(var(--rgb-cream)) !important;
}
:root[data-theme="inverted"] input::placeholder,
:root[data-theme="inverted"] textarea::placeholder {
  color: rgb(var(--rgb-cream) / 0.4) !important;
}

/* Inverted: dashed integration callout */
:root[data-theme="inverted"] .border-dashed.border-forest\/25 {
  background: rgb(var(--rgb-cream) / 0.03) !important;
  color: rgb(var(--rgb-cream) / 0.8) !important;
}

/* ═══ 19. ACCESSIBILITY & DEVICE SAFETY ═══ */
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

html { -webkit-tap-highlight-color: transparent; }
.lightbox { overscroll-behavior: contain; }
.hero-tile { touch-action: manipulation; }

@supports not (aspect-ratio: 1 / 1) {
  .aspect-square { aspect-ratio: auto; height: 0; padding-bottom: 100%; position: relative; }
  .aspect-square > svg { position: absolute; inset: 0; }
  .aspect-video  { aspect-ratio: auto; height: 0; padding-bottom: 56.25%; position: relative; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lightbox { background: rgb(var(--rgb-forest) / 0.92) !important; }
}

@supports (height: 100svh) {
  .min-h-\[80vh\] { min-height: 80svh; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-room-glow, .hero-bell, .hero-pennant, .hero-spark, .hero-pulse, .rim-pulse, .marquee-track, .wa-pulse { animation: none !important; }
  .hero-room-glow { opacity: 1 !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ═══ 20. THEME-AWARE BACKGROUND WASHES & MISC FIXES ═══ */

/* Hero section wash — replaces hardcoded radial in JSX */
.hero-bg-wash {
  background: radial-gradient(60% 60% at 75% 20%,
                              rgb(var(--rgb-saffron2) / 0.20) 0%,
                              transparent 65%);
}
:root[data-theme="precision"] .hero-bg-wash {
  background: radial-gradient(60% 60% at 75% 20%,
                              rgb(var(--rgb-saffron2) / 0.18) 0%,
                              transparent 70%);
}
:root[data-theme="editorial"] .hero-bg-wash {
  background:
    radial-gradient(60% 60% at 75% 20%, rgb(var(--rgb-saffron2) / 0.28) 0%, transparent 60%),
    radial-gradient(50% 50% at 10% 30%, rgb(var(--rgb-sage) / 0.6) 0%, transparent 70%);
}
:root[data-theme="inverted"] .hero-bg-wash {
  background:
    radial-gradient(60% 60% at 75% 20%, rgb(var(--rgb-saffron) / 0.18) 0%, transparent 60%),
    radial-gradient(45% 45% at 15% 60%, rgb(var(--rgb-saffron2) / 0.08) 0%, transparent 70%);
}

/* Italic display words inside h1/h2 — always Fraunces, regardless of theme display */
h1 .italic.font-\[400\],
h2 .italic.font-\[400\],
h3 .italic.font-\[400\],
.font-display .italic,
span.italic {
  font-family: 'Fraunces', ui-serif, Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
}

/* Inverted: panelize dark sections so they don't blend into the page */
:root[data-theme="inverted"] .bg-forest {
  background-color: var(--c-forest-deep) !important;
}
:root[data-theme="inverted"] .bg-forest\/95 {
  background-color: var(--c-forest-deep) !important;
}

/* Inverted: footer + final CTA need to look like inset panels */
:root[data-theme="inverted"] footer.bg-forest {
  border-top: 1px solid var(--hairline);
}

/* Inverted: trust strip (marquee) — keep but slightly raised */
:root[data-theme="inverted"] section.bg-forest.marquee {
  background-color: rgb(var(--rgb-forest2)) !important;
  border-block: 1px solid var(--hairline);
}

/* Inverted: featured testimonial */
:root[data-theme="inverted"] .bg-forest\/95 + * { /* no-op selector kept for parity */ }

/* HeroBlob halo — make theme-aware via CSS override of the absolute child */
:root[data-theme="inverted"] .hero-illustration-wrap > div[style*="radial-gradient"] {
  background: radial-gradient(60% 55% at 50% 55%, rgb(var(--rgb-saffron) / 0.35), transparent 70%) !important;
}

/* Editorial: more dramatic display weight in heroes */
:root[data-theme="editorial"] h1.font-display.font-\[900\] {
  letter-spacing: -0.035em;
  line-height: 0.95;
}

/* Precision: tighter h2 leading */
:root[data-theme="precision"] h2.font-display {
  line-height: 1.0;
}

/* Marquee in inverted: drop the dot-saffron color to slightly softer */
:root[data-theme="inverted"] .marquee .font-display { color: rgb(var(--rgb-cream) / 0.9) !important; }

/* The lab cards' translucent borders read poorly in inverted (same forest bg).
   Strengthen them. */
:root[data-theme="inverted"] .lab-card {
  border-color: rgb(var(--rgb-cream) / 0.15) !important;
  background-color: rgb(var(--rgb-cream) / 0.04) !important;
}

/* ═══ 21. SMALL TYPE REFINEMENTS ═══ */

/* The h1/h2 still using inline clamp font-size — bump the line-height tighter for precision */
:root[data-theme="precision"] h1.font-display { line-height: 0.94 !important; }

/* Hero CTAs spacing */
.btn.bg-saffron,
.btn.bg-forest {
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* The "Watch the 90-second walkthrough" link icon ring */
.link-forest .border-forest\/30 {
  border-color: var(--hairline-strong) !important;
  background: var(--surface);
  transition: all .2s var(--ease);
}
.link-forest:hover .border-forest\/30 {
  border-color: var(--accent) !important;
  color: var(--accent);
}

/* Module card cluster — tighten the integration callout */
.border-dashed.border-forest\/25 {
  background: transparent !important;
  border-style: dashed !important;
  border-color: var(--hairline-strong) !important;
}

/* Architecture caption row dots */
:root[data-theme="inverted"] .text-slate2 .bg-forest\/60 {
  background: rgb(var(--rgb-cream) / 0.5) !important;
}

/* Footer Q. brand mark refinement */
footer .font-display.text-\[34px\] { letter-spacing: -0.04em; }

/* ═══ FAQ accordion ═══ */
.faq-item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open] {
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-card);
}
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color .2s var(--ease);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { background: rgb(var(--rgb-forest) / 0.025); }
.faq-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.35;
  text-wrap: balance;
}
.faq-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  flex-shrink: 0;
  transition: transform .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  background: var(--accent);
  color: var(--cream);
}
.faq-answer {
  padding: 0 26px 24px 26px;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 16px;
  max-width: 68ch;
}
.faq-answer p { text-wrap: pretty; }
@media (max-width: 640px) {
  .faq-summary { padding: 18px 20px; gap: 16px; }
  .faq-question { font-size: 16px; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-answer { padding: 0 20px 20px 20px; font-size: 15px; }
}
:root[data-theme="inverted"] .faq-item {
  background: rgb(var(--rgb-cream) / 0.04);
}
:root[data-theme="inverted"] .faq-item[open] {
  background: rgb(var(--rgb-cream) / 0.06);
}

/* ═══ DPDP cookie strip ═══ */
.dpdp-strip {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--text-muted);
  box-shadow: 0 24px 60px -28px rgb(var(--rgb-forest) / 0.35);
  z-index: 60;
  animation: dpdpRise .4s var(--ease);
}
@keyframes dpdpRise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.dpdp-strip a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dpdp-strip-close {
  margin-left: auto;
  background: var(--accent);
  color: white;
  border: 0;
  font: inherit;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.dpdp-strip-close:hover { background: var(--accent-2); }
@media (max-width: 480px) {
  .dpdp-strip { font-size: 13px; padding: 12px 14px; }
}

/* ═══ Footer lockup — proper Q-mark + wordmark composition ═══
   Replaces the washed-out wordmark-dark.png PNG with a crisp inline
   composition: colored Q-mark icon + cream "uriso." in Fraunces +
   smaller italic tagline. Pixel-aligned, vector text, professional. */
.footer-lockup {
  text-decoration: none;
}
.footer-lockup-mark {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgb(var(--rgb-cream) / 0.04);
  padding: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgb(var(--rgb-cream) / 0.10);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer-lockup:hover .footer-lockup-mark {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgb(var(--rgb-saffron) / 0.45);
}
.footer-lockup-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
.footer-lockup-word {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.035em;
  color: rgb(var(--rgb-cream));
  line-height: 1;
  font-feature-settings: "ss01";
  /* Visual baseline-tuning: the Q-mark image is square but the wordmark
     should sit at its optical baseline. The mark contains the "Q",
     so reading order is [Q-mark][uriso.] = "Quriso." */
  position: relative;
  top: -1px;
}
.footer-lockup-dot {
  color: var(--accent);
  margin-left: 1px;
}
.footer-lockup-tagline {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgb(var(--rgb-cream) / 0.55);
  margin-top: 4px;
  line-height: 1.2;
}
@media (max-width: 640px) {
  .footer-lockup-mark { width: 48px; height: 48px; padding: 5px; }
  .footer-lockup-word { font-size: 32px; }
  .footer-lockup-tagline { font-size: 13px; }
}

/* Sticky scrollbar polish */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--rgb-forest) / 0.18);
  border: 3px solid var(--page-bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--rgb-forest) / 0.32); }

/* ═══ 22. SAFE FALLBACKS ═══ */

/* If the display face hasn't loaded yet, body text falls back to Inter gracefully. */
@supports not (font-variation-settings: "wght" 400) {
  .font-display { font-variation-settings: normal; }
}

/* Print */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .bg-forest, .bg-forest2 { background: #fff !important; color: #000 !important; }
  .text-cream { color: #000 !important; }
  .hero-room-glow, .hero-spark, .hero-bell, .hero-pennant { display: none !important; }
}

/* ═══ 23. TYPE SYSTEM — modular, editorial, restraint-first ═══
   Reference points (all measured live):
     Apple.com         body 17px / 1.47
     Stripe.com        body 16px / 1.5
     Linear.app        body 15px / 1.55
     Vercel.com        body 14-15px / 1.5
     NYT article       body 19px / 1.5 (long-form)
     Medium article    body 18-20px / 1.58
   We sit at 17px desktop / 16px mobile — slightly more generous than
   pure SaaS to honour our editorial display type, but well clear of
   the "too big to scan" zone Material Design warns against (>18px body).

   Scale (1.25 minor-third), all rendered in Inter:
     11–12px  caps eyebrow / mono code
     13–14px  caption, footnote, helper
     15px     small body, nav, button, input
     17px     body (DESKTOP base) ── 16px on mobile
     18–20px  lead paragraph
     22–28px  card / sub-section titles
     30–48px  h2 (clamp in JSX)
     40–80px  h1 (clamp in JSX)

   Headings and the lead paragraphs already use inline clamp() sizes
   in the JSX. We deliberately do NOT override those — they're already
   tuned and respond to viewport. We just set the body baseline and
   provide gentle touch-ups for mobile.
*/

body {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
}

/* Buttons inherit body weight but use a touch-friendly size */
.btn {
  font-size: 15px;
  letter-spacing: -0.005em;
}

/* Form inputs — 15px desktop, 16px mobile (iOS no-zoom threshold) */
input, textarea, select {
  font-size: 15px;
}

/* Hero / section H1 fine-tuning — let the inline clamp() drive size,
   we just want consistent tracking + leading across themes. */
h1.font-display {
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2.font-display {
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3.font-display {
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Paragraphs without an explicit size class inherit body 17/16, but
   pull-quotes and lead grafs benefit from the slightly looser leading. */
p { text-wrap: pretty; }

/* Eyebrow / mono-tag micro-labels — keep their existing inline tailwind
   sizes (12-13px) but enforce caps tracking for crispness. */
.tracking-\[0\.18em\] { letter-spacing: 0.16em; }

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  .btn { font-size: 16px; }
  input, textarea, select { font-size: 16px !important; }

  /* The inline clamp() H1s already scale, but reinforce balance + leading
     so 4-line hero copy doesn't sprawl on small screens. */
  h1.font-display {
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
  h2.font-display { line-height: 1.08; }
}

/* ─── Small phones (≤ 420px) — pull hero/h1 in a notch ─── */
@media (max-width: 420px) {
  h1.font-display { font-size: clamp(34px, 9.5vw, 44px) !important; }
  h2.font-display { font-size: clamp(28px, 7.5vw, 36px) !important; }
  h3.font-display { font-size: clamp(22px, 6vw, 28px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   24. AUDIT PASS — June 2026
   Loaded after tailwind.css, so same-specificity utility overrides win.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── A · BODY-TEXT CONTRAST (WCAG AA) ───
   The lightest body copy was rgb(ink)/0.70–0.75 on cream — borderline below
   the 4.5:1 AA threshold for normal text. Floor it at 0.86 so paragraphs are
   comfortably legible, while leaving genuinely-dim micro-labels (/45, slate2,
   eyebrows) alone so hierarchy is preserved. Scoped to NOT touch the inverted
   theme (which has its own cream-on-dark rules above). */
:root:not([data-theme="inverted"]) .text-ink\/70,
:root:not([data-theme="inverted"]) .text-ink\/75 {
  color: rgb(var(--rgb-ink) / 0.86);
}
:root:not([data-theme="inverted"]) .text-ink\/80 {
  color: rgb(var(--rgb-ink) / 0.88);
}
:root:not([data-theme="inverted"]) .text-forest\/70,
:root:not([data-theme="inverted"]) .text-forest\/75 {
  color: rgb(var(--rgb-forest) / 0.86);
}
/* Cream-on-dark body copy (forest/inverted sections) — lift the lightest
   tiers so they clear AA on the deep navy ground too. */
.text-cream\/55 { color: rgb(var(--rgb-cream) / 0.68); }
.text-cream\/60 { color: rgb(var(--rgb-cream) / 0.72); }
.text-cream\/70 { color: rgb(var(--rgb-cream) / 0.8); }

/* ─── C · SECTION VERTICAL RHYTHM ───
   Normalise every top-level section to one padding scale so the scroll
   cadence is even. Tailwind utilities (py-20/24, md:py-24/28) stay as the
   source of truth; here we just guarantee a consistent *minimum* and kill
   the few ad-hoc paddings that drifted. 96px desktop / 72px mobile. */
@media (min-width: 768px) {
  section.py-20,
  section.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  section.md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
}

/* ─── C · EQUAL CARD HEIGHTS ───
   Any grid of feature/pillar/module cards stretches its items so card
   bottoms align — ragged card heights are the #1 "almost-premium" tell.
   Targets the common card wrappers without forcing it on prose grids. */
.module-card,
.arch-layer-card,
.faq-item { height: 100%; }
.grid > .module-card,
.grid > .arch-layer-card { align-self: stretch; }
/* Make the pillar/feature card grids align their rows. */
.cards-grid,
.pillar-grid { align-items: stretch; }