/* ============ Custom Properties ============ */
:root {
  /* Sprint — Website Design System v1.0 token migration. Values below are
     taken verbatim from the approved Design System doc (Section 2, Color
     System). --charcoal-soft/--terracotta-soft/--navy* etc. are this
     site's pre-existing secondary tokens, mapped onto the closest
     approved role rather than removed, since the Design System doesn't
     define every shade this codebase already depends on. */
  --ivory: #ffffff;
  --ivory-deep: #f7f2ea;
  --charcoal: #262321;
  --charcoal-soft: #6e6761;
  --terracotta: #a45f4b;
  --terracotta-hover: #7e4436;
  --terracotta-soft: #d9b3a8;
  --sage: #a8ada3;
  --sage-soft: #e7dacb;
  --navy: #45566b;
  --navy-soft: #dce3ea;
  --border: #e7dacb;
  --shadow: 0 10px 30px rgba(38, 35, 33, 0.08);
  --radius: 18px;

  /* Real Nutrition Solutions accent set (scoped to that case study only) */
  --rns-teal: #1c6470;
  --rns-teal-soft: #cfe3e4;
  --rns-purple: #9b7bb0;
  --rns-purple-soft: #e6dcee;
  --rns-coral: #e0637a;
  --rns-coral-soft: #f6d9de;
  --rns-lime: #8fae4a;
  --rns-lime-soft: #e4ecd3;
  /* Darkened, text-safe variants of --rns-lime/--rns-purple — the base
     tokens are decorative-only accents (4.5:1 contrast fails on white at
     small text sizes); these pass WCAG AA for text used at stage-panel
     scale. --rns-purple itself stays reserved for the large-scale Aloma
     signature only, where 3:1 large-text contrast is sufficient. */
  --rns-lime-text: #667c35;
  --rns-purple-text: #8c68a5;
  /* True turquoise pulled directly from the RealNutrition Solutions logo
     dots (sampled #00b6b5 / #00a6b3) — used only for the Stages of
     Change accent bars, not the global palette. */
  --rns-turquoise: #00b6b5;
  --rns-turquoise-soft: #cceceb;

  /* RNS editorial palette (2026-07-27 visual rebuild) — sampled directly
     from the RNS logo file per the approved scratch preview. Named
     distinctly from the --rns-teal/--rns-purple/--rns-lime/--terracotta
     tokens above: those are relied on elsewhere (the shared legacy
     #projectModal's .stage-card falls back to --rns-teal; --terracotta
     is a site-wide token used well outside RNS), so this is a new,
     RNS-overlay-exclusive set rather than a redefinition of existing
     values. Only used inside .rns-* selectors within #rnsOverlay. */
  --rns-edit-teal: #0c7a82;
  --rns-edit-teal-soft: #cfe3e4;
  --rns-edit-teal-deep: #0a545a;
  --rns-edit-lime: #64b83c;
  --rns-edit-lime-text: #3f6b23;
  --rns-edit-purple: #a878b4;
  --rns-edit-purple-text: #7a5488;
  --rns-edit-terracotta: #c26f34;
  --rns-edit-gold-text: #9c5726;
  --rns-edit-gold-soft: #f1ded0;
  --rns-edit-coral-bg: #644a6a;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --container-w: 1200px;
}

/* ============ Reset ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.15;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 120px 0; }

.section-label {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  max-width: 620px;
  margin-bottom: 20px;
}

/* ============ Sprint 03 — Sitewide Scroll-Reveal Motion ============
   Restrained on purpose: opacity + a small translateY, nothing bouncy or
   scaled, matching the same "anchored and calm" philosophy already
   established for Lisa's own entrance animation (see .lisa-system).
   Applied at the block/section level (whole cards grid, whole timeline,
   whole paragraph groups) rather than per-paragraph or per-card, so nothing
   feels busy or staggered — the site should feel like it's settling into
   place once, not performing. Toggled by a single additive
   IntersectionObserver in script.js; the existing spine-rail scrollspy
   observer is untouched. Deliberately not applied to any element that
   already defines its own `transition` (e.g. .solution-card, .info-card)
   to avoid one rule silently overriding the other's timing — those get
   their reveal treatment via a parent/grid wrapper instead. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ Placeholder Blocks ============ */
.placeholder-block {
  position: relative;
  background-color: var(--ivory-deep);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal-soft);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 220px;
  overflow: hidden;
}

.placeholder-photo {
  display: none;
}

.placeholder-block.has-photo {
  background-image: none;
}

.placeholder-block.has-photo::before,
.placeholder-block.has-photo > span {
  display: none;
}

.placeholder-block.has-photo .placeholder-photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-block::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta-soft);
}

.icon-block {
  position: relative;
  min-height: 56px;
  width: 56px;
  border-radius: 14px;
  margin-bottom: 22px;
  background-image: none;
  background-color: var(--terracotta-soft);
}

.icon-block::before { display: none; }

.belief-card:nth-child(2) .icon-block { background-color: var(--navy-soft); }
.belief-card:nth-child(3) .icon-block { background-color: var(--sage-soft); }

/* ============ Header / Nav ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 240, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.navbar {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--charcoal-soft);
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a:hover { color: var(--terracotta); }

.nav-cta {
  background: var(--terracotta);
  color: var(--ivory) !important;
  padding: 10px 22px;
  border-radius: 999px;
  margin-left: 20px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover {
  background: var(--terracotta-hover);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

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

/* ============ Spine Rail (systems thread linking sections) ============ */
.spine-rail {
  position: fixed;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  z-index: 60;
}

.spine-rail::before {
  content: "";
  position: absolute;
  top: -34px;
  bottom: -34px;
  left: 50%;
  width: 1px;
  background: var(--border);
  z-index: -1;
}

.spine-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--charcoal-soft);
  opacity: 0.3;
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.spine-dot:hover { opacity: 0.7; }

.spine-dot.active {
  opacity: 1;
  background: var(--terracotta);
  transform: scale(1.5);
}

@media (max-width: 1320px) {
  .spine-rail { display: none; }
}

/* ============ Chapter Map ============ */
.chapter-map-wrap {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--ivory);
}

.chapter-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

.chapter-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.chapter-item:last-child { border-right: none; }

/* Corrected: first/last items previously had their outer padding zeroed
   out, which made their hover/focus background fill asymmetrically —
   text sat flush against one edge while the middle item had even
   padding on both sides. Equal padding on every item, with the item's
   own left/right margin absorbing the alignment against the section
   edge instead, keeps the hover fill reading as one consistent card
   regardless of position in the row. */
.chapter-item:hover,
.chapter-item:focus-visible {
  background: var(--ivory-deep);
}

.chapter-item:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.chapter-num {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terracotta);
}

.chapter-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.25;
}

.chapter-desc {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
}

/* ============ Hero ============ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 136px 0 60px;
  background: #f7f3ee;
}

.hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  min-height: 70vh;
}

.hero-text {
  flex: 0 0 51%;
  max-width: 51%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 48px;
}

/* Sprint 02 — quieted from the terracotta accent color to a neutral,
   letter-spaced label. Terracotta is now reserved for two deliberate
   moments only: the primary CTA and the quote's final line below —
   fewer, more considered accent touches instead of five+ scattered ones. */
/* Typography Correction Pass — restored to terracotta and the sitewide
   0.18em letter-spacing, matching .section-label exactly. Sprint 02
   deliberately detuned this to charcoal-soft as one of several "reduce
   terracotta touchpoints" moves; the Founder's later, more specific
   instruction (eyebrow labels are the one tier that should always carry
   terracotta, applied identically everywhere) supersedes that for this
   specific element — flagged here, not silently overwritten. */
.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 24px;
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.16;
  color: var(--charcoal);
  margin-bottom: 28px;
  max-width: 620px;
}

.hero-line-a {
  display: block;
  color: var(--charcoal-soft);
}

.hero-line-b {
  display: block;
  color: var(--charcoal);
}

.hero-subheadline {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal-soft);
  max-width: 520px;
  margin-bottom: 36px;
}

/* Sprint 02 — lighter treatment, same words. Border thinned and
   softened, and the closing line now carries emphasis through color
   alone rather than color + bold stacked together. */
.hero-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  margin-bottom: 56px;
}

.hero-body p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

.hero-body p:last-child {
  font-weight: 400;
  color: var(--terracotta);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Sprint 02 — quieted further so the primary CTA reads as the one clear
   next step; the border-bottom affordance is dropped in favor of plain
   underline-on-hover only. */
.hero-secondary-link {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-secondary-link:hover {
  color: var(--terracotta);
  border-color: var(--terracotta-soft);
}

/* ---------- Visual column: Aloma's portrait is the hero's only visual
   anchor here. Lisa is no longer laid out relative to it — she's a
   persistent fixed element defined below, independent of any section. ---------- */
.hero-lisa-col {
  position: relative;
  flex: 0 0 45%;
  max-width: 45%;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}

.hero-portrait {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--ivory-deep);
  aspect-ratio: 3 / 4;
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* =====================================================================
   LISA — persistent, fixed, site-wide digital host. Anchored bottom-right
   of the viewport at all times; not tied to the hero or any section.
   z-index sits above the sticky nav (100) but below the case-study modal
   (300/320) — see the modal-open rule below for why that's not enough on
   its own.
   ===================================================================== */
.lisa-system {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0;
  /* Opacity only — no transform. A held (forwards) transform on this
     element would make it the containing block for any descendant
     position:fixed element (the mobile bottom-sheet card uses exactly
     that), breaking its escape to the viewport. */
  animation: lisaSettle 0.4s ease 0.15s forwards;
}

@keyframes lisaSettle {
  to {
    opacity: 1;
  }
}

/* A case-study modal is a focused, full-attention moment — Lisa recedes
   rather than floating on top of it. Opacity/pointer-events instead of
   display:none so she doesn't pop back in abruptly when the modal closes. */
body.modal-open .lisa-system {
  /* !important is required here: the one-time entrance animation uses
     animation-fill-mode:forwards, which holds opacity:1 at a cascade
     priority above ordinary author rules (including ones with higher
     selector specificity) for as long as it's "active" — a plain rule
     here is silently ignored. */
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Project-aware Lisa is the deliberate exception to the rule above: she
   was explicitly summoned via "Ask Lisa about this project" while that
   project stays open, so she needs to actually render (and be above the
   project overlay's own z-index of 320, not behind it). Two-class
   selector outweighs body.modal-open alone despite the matching
   !important, per ordinary specificity rules. lisa.js toggles this class
   only for the lifetime of a project-aware session. */
body.modal-open.lisa-project-aware-open .lisa-system {
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 340;
}

/* Only the panel itself renders above the project — the pill stays
   hidden so nothing but the panel competes with the project's own
   content while it's open. */
body.lisa-project-aware-open .lisa-prompt-pill {
  display: none;
}

/* The full-body figure is no longer part of Lisa's persistent footprint
   (launch-mode Lisa pass): a large fixed image risked covering card/nav/
   form content depending on scroll position, and read as dominating the
   page rather than waiting to be invited. Her approved appearance now
   lives in the small resting launcher (.lisa-pill-avatar) instead. Kept
   in the DOM (not removed) only so the voice is-speaking/is-listening
   avatar-state hooks in lisa.js keep a valid target; never rendered. */
.lisa-figure-stage {
  display: none;
}

/* ---------- Conversation panel — one bounded box for every open state
   (compact intro teaser, chat, voice). Anchored bottom-right, always
   fully inside the viewport, internal scrolling handles long content
   instead of the panel itself growing past the viewport edge. ---------- */
.lisa-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 48px));
  max-height: min(620px, calc(100vh - 48px));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120, 90, 70, 0.1);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(48, 38, 30, 0.14);
  padding: 20px 22px;
  opacity: 0;
  transform: translateY(8px);
  animation: lisaCardIn 0.3s ease forwards;
}

@keyframes lisaCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lisa-card.is-dismissed {
  /* !important required: closePanel() adds is-dismissed without
     removing is-expanded (a dismissed conversation can be reopened
     back into the same expanded state), so both classes are present
     at once here. .lisa-card.is-expanded's own display:flex is equal
     specificity and would otherwise win by source order, silently
     keeping the "closed" panel visible. */
  display: none !important;
}

/* ---------- Resting launcher — small, unobtrusive, lower-right. Never
   covers text, buttons, cards, nav, or forms; this is the *only* resting
   state, at every viewport. ---------- */
.lisa-prompt-pill {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(120, 90, 70, 0.14);
  box-shadow: 0 10px 24px rgba(48, 38, 30, 0.16);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Shown only while the panel is closed (is-dismissed is the panel's
   default state, set directly in the markup) — the sole trigger for
   showing this launcher, no separate JS-managed visibility to keep in
   sync. */
.lisa-card.is-dismissed ~ .lisa-prompt-pill {
  display: inline-flex;
}

.lisa-prompt-pill:hover {
  transform: translateY(-1px);
  border-color: var(--terracotta-soft);
}

.lisa-pill-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex: 0 0 auto;
}

.lisa-pill-main {
  display: block;
}

/* Populated only after a visitor closes a project — carries them back to
   Lisa with the context of what they just viewed, without reopening the
   panel automatically. */
.lisa-pill-context {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--charcoal-soft);
  margin-top: 1px;
}

.lisa-prompt-pill.has-context {
  align-items: flex-start;
  padding: 8px 14px;
  border-color: var(--terracotta-soft);
}

.lisa-prompt-pill.has-context .lisa-pill-main {
  color: var(--terracotta);
}

/* Voice is not part of the public launch. The markup and JS behind it stay
   intact (see index.html comment) so it can be reactivated later without
   rebuilding it — this is the single rule that keeps it non-rendered. */
#lisaVoiceBtn,
#lisaVoiceView {
  display: none !important;
}

/* Project-aware "Ask Lisa about this project" — a small secondary corner
   control that renders above a dedicated project overlay (z-index 320)
   so it stays reachable while a project is open, but never competes with
   the project's own content or close control. Shown/hidden via lisa.js. */
.lisa-project-ask {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 330;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(120, 90, 70, 0.14);
  box-shadow: 0 10px 24px rgba(48, 38, 30, 0.16);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.lisa-project-ask:hover,
.lisa-project-ask:focus-visible {
  transform: translateY(-1px);
  border-color: var(--terracotta-soft);
}

/* Once project-aware Lisa is actually expanded, she occupies this same
   corner herself — the entry control steps aside rather than sitting
   underneath/behind her panel. Must exclude is-dismissed explicitly:
   closePanel() adds is-dismissed without removing is-expanded (see the
   .lisa-card.is-dismissed rule above), so is-expanded alone stays matched
   forever after Lisa's first use this session, not just while she's
   actually visible. */
.lisa-system:has(.lisa-card.is-expanded:not(.is-dismissed)) + .lisa-project-ask {
  display: none;
}

.lisa-project-ask-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex: 0 0 auto;
}

/* [hidden] and .lisa-project-ask{display:inline-flex} have equal
   specificity, and author rules always beat the UA stylesheet regardless
   of source order — the same cascade gap already fixed once for
   .lisa-view[hidden] above. Without this, toggling the hidden property
   from JS has no visible effect. */
.lisa-project-ask[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .lisa-project-ask {
    right: 12px;
    bottom: 12px;
    padding: 7px 12px 7px 7px;
    font-size: 0.68rem;
  }

  .lisa-project-ask-avatar {
    width: 22px;
    height: 22px;
  }
}

/* Once a conversation mode is chosen (chat/voice), the active view fills
   whatever space remains under the kicker within the card's own bounded
   box (see .lisa-card above) — one source of truth for how tall this is
   allowed to get, so footer controls (input row, Start a New
   Conversation) never overflow past the card's own bottom edge. */
.lisa-card.is-expanded .lisa-card-kicker {
  flex: 0 0 auto;
}

.lisa-card.is-expanded .lisa-view {
  flex: 1 1 auto;
  min-height: 0;
}

.lisa-card-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--charcoal-soft);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  opacity: 0.6;
}

.lisa-card-close:hover {
  opacity: 1;
}

.lisa-card-kicker {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 10px;
  padding-right: 20px;
}

.lisa-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--charcoal);
}

.lisa-title {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.lisa-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* [hidden] normally beats a class of equal specificity only by source
   order — too fragile here. Force it explicitly so the voice/chat views
   never lay out (and never get revealed by a clipping accident) until
   showView() removes the attribute. */
.lisa-view[hidden] {
  display: none;
}

.lisa-view-voice,
.lisa-view-chat {
  /* Height comes from the parent card's own flex budget (.lisa-card.
     is-expanded .lisa-view { flex: 1 1 auto }) rather than a second,
     independently-computed viewport max-height — one source of truth
     for how tall this is allowed to get. The scroll region lives one
     level deeper (.lisa-chat-scroll / .lisa-voice-scroll) so the input
     row, mic controls, and reset button stay put as a stable footer
     instead of scrolling away with the message history. */
  min-height: 0;
  overflow: hidden;
}

.lisa-chat-scroll,
.lisa-voice-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* A little breathing room so the first/last line never sits flush
     against the panel edge or the input row's top border. */
  padding: 2px 2px 4px;
  margin: -2px -2px 0;
}

.lisa-message {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
}

.lisa-view-intro .lisa-message {
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.lisa-intro-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.lisa-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  flex: 1;
  /* min-width:0 still matters even with short labels — keeps this safe if
     copy ever changes again without silently overflowing/clipping. */
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 43, 39, 0.14);
  background: #fff;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lisa-btn-icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  display: block;
}

.lisa-card-btn:hover {
  transform: translateY(-1px);
  border-color: var(--terracotta-soft);
}

.lisa-card-btn.is-primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}

.lisa-card-btn.is-primary:hover {
  background: var(--terracotta-hover);
}

.lisa-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.62rem;
  color: #a89e94;
}

.lisa-card-footer svg {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}

/* ---------- Transcript / chat ---------- */
.lisa-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.lisa-bubble {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 15px;
  font-size: 0.83rem;
  line-height: 1.5;
}

.lisa-bubble.from-lisa {
  align-self: flex-start;
  background: var(--ivory-deep);
  color: var(--charcoal);
  border-bottom-left-radius: 4px;
}

.lisa-bubble.from-visitor {
  align-self: flex-end;
  background: var(--terracotta);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Restrained vertical menu, not a row of unevenly-sized pills — every
   option shares the same width, alignment, padding, and radius so the
   list reads as one organized menu rather than competing shapes. */
.lisa-quick-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lisa-quick-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lisa-quick-option::after {
  content: '\203A';
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  color: var(--charcoal-soft);
  opacity: 0.55;
}

.lisa-quick-option:hover {
  background: var(--ivory-deep);
  border-color: var(--terracotta-soft);
}

.lisa-quick-option:hover::after {
  color: var(--terracotta);
  opacity: 0.9;
}

.lisa-quick-option:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.lisa-quick-option:active {
  background: var(--terracotta-soft);
  border-color: var(--terracotta);
}

/* Stable footer control, sitting outside the scrolling transcript so it
   stays reachable no matter how long the conversation gets — a "clear
   secondary control" per the approved chat-control hierarchy, one step
   more prominent than the quiet text links below the input row. */
.lisa-utility-row {
  flex: 0 0 auto;
  display: flex;
}

.lisa-browse-topics {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--ivory-deep);
  color: var(--charcoal);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lisa-browse-topics svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.lisa-browse-topics:hover,
.lisa-browse-topics:focus-visible {
  border-color: var(--terracotta-soft);
  background: #fff;
}

.lisa-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 10px;
}

.lisa-input-row input {
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.83rem;
  background: #fff;
  color: var(--charcoal);
}

.lisa-input-row input:focus {
  outline: none;
  border-color: var(--terracotta-soft);
}

.lisa-send {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.lisa-send:hover {
  background: var(--terracotta-hover);
}

/* ---------- Voice view ---------- */
.lisa-voice-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.lisa-voice-controls[hidden] {
  display: none;
}

.lisa-mic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--terracotta);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 0 rgba(193, 105, 79, 0.4);
}

.lisa-mic-icon {
  display: block;
  width: 15px;
  height: 22px;
  border-radius: 8px;
  background: #fff;
  position: relative;
}

.lisa-mic-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 22px;
  height: 12px;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 11px 11px;
}

.lisa-mic.is-listening {
  animation: lisaMicPulse 1.4s ease-in-out infinite;
}

@keyframes lisaMicPulse {
  0% { box-shadow: 0 0 0 0 rgba(193, 105, 79, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(193, 105, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(193, 105, 79, 0); }
}

.lisa-voice-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lisa-voice-status {
  font-size: 0.78rem;
  color: var(--charcoal-soft);
  text-align: center;
}

.lisa-listening-dots {
  display: none;
  align-items: center;
  gap: 3px;
}

.lisa-listening-dots.is-active {
  display: inline-flex;
}

.lisa-listening-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sage);
  animation: lisaDotBounce 1s ease-in-out infinite;
}

.lisa-listening-dots i:nth-child(2) { animation-delay: 0.15s; }
.lisa-listening-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes lisaDotBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-3px); opacity: 1; }
}

.lisa-voice-pending {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.lisa-voice-pending[hidden] {
  display: none;
}

.lisa-switch-mode {
  align-self: center;
  background: none;
  border: none;
  color: var(--terracotta);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px;
}

.lisa-switch-mode:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
/* Lisa is fixed to the viewport; the hero portrait is not — its height is
   driven by content, not viewport height. On short viewports (common on
   laptops once browser chrome is subtracted — 1440x900 screens often
   render an ~800px viewport) Lisa's corner sits relatively higher up
   against a portrait that hasn't gotten any shorter, risking the card
   reaching up into Aloma's face. Shrinking her footprint when vertical
   space is tight keeps her clear of it regardless of exact geometry. */
@media (max-height: 900px) {
  .lisa-view-intro .lisa-message {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 8px;
  }

  /* The hero's height is content-driven, not viewport-driven — shrinking
     its padding and type scale here keeps the hero comfortable on short
     laptop viewports (~700-800px, e.g. 1366x768 screens). */
  .hero {
    padding: 84px 0 32px;
  }

  .hero-eyebrow {
    margin-bottom: 10px;
  }

  .hero-headline {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    margin-bottom: 12px;
  }

  .hero-subheadline {
    margin-bottom: 16px;
  }

  .hero-body {
    gap: 5px;
    margin-bottom: 18px;
  }
}

.lisa-hero-compact-cta {
  /* Kept in the DOM per index.html's comment (voice-parity pattern) but
     never shown — the compact hero-docked card state it belonged to has
     been removed; Lisa now only ever has the one resting launcher. */
  display: none;
}

@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 8px;
  }

  .hero-text {
    flex: 0 0 auto;
    max-width: 100%;
    align-items: flex-start;
    padding-bottom: 0;
    text-align: left;
  }

  .hero-lisa-col {
    flex: 0 0 auto;
    max-width: 420px;
    width: 100%;
    margin-top: 28px;
  }

  .hero-portrait {
    width: 84%;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 110px 0 40px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .hero-portrait {
    width: 100%;
  }

  /* Two side-by-side buttons don't fit a narrow card without wrapping —
     stack them, and stack the kicker too so the title has room. */
  .lisa-card-kicker {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .lisa-intro-actions {
    flex-direction: column;
    gap: 7px;
  }

  .lisa-system {
    right: 12px;
    bottom: 12px;
  }

  /* Mobile open state: a compact fixed launcher gives way to a bottom
     sheet — near-full-width, anchored to the bottom edge with safe
     margins on every side, independent of .lisa-system's own corner
     anchoring (escapes to position:fixed here so left/right can both be
     set). Long content scrolls internally (.lisa-chat-scroll /
     .lisa-voice-scroll); the sheet itself never grows past the viewport. */
  .lisa-card:not(.is-dismissed) {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    top: auto;
    width: auto;
    max-height: min(78vh, calc(100vh - 24px));
    border-radius: 20px;
    z-index: 150;
  }

  /* Mirrors the desktop body.modal-open.lisa-project-aware-open .lisa-system
     z-index bump: once the card escapes to its own position:fixed box at
     this breakpoint, it stacks in the root context on its own terms and
     needs the same explicit lift above a project overlay (z-index 320). */
  body.lisa-project-aware-open .lisa-card:not(.is-dismissed) {
    z-index: 340;
  }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--terracotta);
  color: var(--ivory);
}

.btn-primary:hover {
  background: var(--terracotta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--charcoal);
  transform: translateY(-2px);
}

/* ============ Why This Website Exists — Chapter One ============ */
/* One elegant editorial chapter, not a grid of fragments. A subtle warm
   wash (sanctioned by the Design System for "large atmospheric
   backgrounds") gives the section its own tonal identity, distinct from
   How I Think's flat ivory-deep panel directly below it. */
.believe {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  padding-top: 56px;
  padding-bottom: 24px;
}

/* Section label brought higher and given a touch more presence — the
   chapter's own opening cue, read before a visitor has any context for
   the founder yet. This section still deliberately doesn't use the
   shared .section-title heading every other section uses: its content
   carries the emphasis (the central question, the belief statement)
   rather than a conventional heading. */
.believe-label {
  font-size: 0.85rem;
  margin-bottom: 28px;
}

/* Redesigned chapter — a vertical editorial sequence rather than three
   side-by-side columns: two large opening statements, a focused two-up
   explanation, a quiet horizontal "bridge" naming the four disciplines,
   a second big pivot statement, three parallel "Sometimes it's..."
   considerations, and a closing pull-quote + handoff line. Every visual
   technique here (two-column pairing, three-column row, quiet dot-
   divided bridge) reuses patterns already established elsewhere on the
   site (WAE's capability rows, RNS's text-index nav) rather than
   introducing new visual language. */
.believe-chapter {
  max-width: 760px;
}

.believe-statement {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.28;
  color: var(--charcoal);
  margin: 0 0 14px;
}

.believe-statement-last {
  margin-bottom: 28px;
}

.believe-statement-line {
  display: block;
}

.believe-highlight {
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 4px 6px;
  z-index: 1;
}

/* Sized to sit close behind the word, like a background rather than a
   shape extending past it. */
.believe-highlight::before {
  content: '';
  position: absolute;
  inset: -3% -3%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Real hand-painted terracotta brush textures (provided assets, not a
   hand-coded approximation) — one per highlighted word. */
.believe-highlight-1::before {
  background-image: url("images/believe-brush-done.png");
}

.believe-highlight-2::before {
  background-image: url("images/believe-brush-think.png");
}

.believe-highlight-1,
.believe-highlight-2 {
  transform: rotate(-0.6deg);
}

.believe-div {
  border: none;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

.believe-focal {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  color: var(--charcoal);
  margin: 16px 0 20px;
}

.believe-explain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin-bottom: 36px;
}

.believe-explain p {
  color: var(--charcoal-soft);
  line-height: 1.65;
  margin: 0;
  font-size: 0.96rem;
}

/* Discipline bridge — a quiet divider naming the four disciplines,
   same dot-separated text-index language as RNS's desktop nav, not a
   boxed content block. */
.believe-bridge {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 22px;
}

.believe-bridge-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.believe-bridge-items {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.believe-bridge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.believe-bridge-icon {
  width: 28px;
  height: 28px;
  color: var(--terracotta);
}

.believe-bridge-icon svg {
  width: 100%;
  height: 100%;
}

.believe-bridge-item span {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  font-weight: 600;
}

.believe-bridge-sep {
  color: var(--border);
  font-size: 1.2rem;
}

.believe-condensed {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.believe-condensed strong {
  font-weight: 600;
}

.pivot-heading {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--charcoal);
  line-height: 1.25;
  margin: 0 auto 4px;
  max-width: 560px;
}

.believe-pivot-underline {
  display: block;
  margin: 6px auto 36px;
  width: 190px;
  color: var(--terracotta);
}

.believe-sometimes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 36px;
}

.believe-sometimes-item {
  padding: 0 22px;
  text-align: center;
  border-left: 1px solid var(--border);
}

.believe-sometimes-item:first-child {
  border-left: none;
  padding-left: 0;
}

.believe-sometimes-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.believe-sometimes-icon svg {
  width: 19px;
  height: 19px;
}

.believe-sometimes-item h3 {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 700;
  margin: 0 0 8px;
}

.believe-sometimes-item p {
  font-size: 0.9rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  margin: 0;
}

.believe-quote {
  border-left: 3px solid var(--terracotta);
  padding-left: 22px;
  margin: 0 0 34px;
}

.believe-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--charcoal);
  line-height: 1.5;
  margin: 0;
}

.believe-ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--terracotta);
}

.believe-ornament-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.believe-ornament svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.believe-closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 30px;
}

.believe-closing-l1 {
  color: var(--terracotta);
  display: block;
}

.believe-closing-l2 {
  color: var(--charcoal);
  display: block;
}

@media (max-width: 900px) {
  .believe-sometimes-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .believe-sometimes-item:nth-child(2) {
    border-left: 1px solid var(--border);
  }
  .believe-sometimes-item:nth-child(3) {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 20px 22px 0;
  }
  .believe-quote p {
    line-height: 1.65;
  }
}

@media (max-width: 640px) {
  .believe-statement {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
  .believe-chapter {
    padding: 0 4px;
  }
  .believe-explain {
    gap: 12px;
  }
  .believe-bridge {
    flex-direction: column;
    gap: 16px;
  }
  .believe-bridge-rule {
    display: none;
  }
  .believe-bridge-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    column-gap: 16px;
    width: 100%;
    max-width: 280px;
  }
  .believe-bridge-sep {
    display: none;
  }
  .believe-condensed {
    font-size: 1.1rem;
    font-weight: 600;
  }
  .pivot-heading {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }
  .believe-sometimes-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .believe-sometimes-item,
  .believe-sometimes-item:nth-child(2),
  .believe-sometimes-item:nth-child(3) {
    border-left: none;
    border-top: none;
    padding: 0;
  }
  .believe-quote p {
    font-size: 1.08rem;
  }
  .believe-quote {
    margin-bottom: 14px;
  }
  .believe-ornament {
    margin-bottom: 14px;
  }
}

/* ============ How I Think ============ */
/* Two-column composition: a quiet reserved image area on the left, the
   reflective vertical narrative on the right — deliberately the opposite
   of Why This Website Exists' wide horizontal chapter below. */
.think { background: var(--ivory-deep); padding-top: 32px; }

.think-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.think-visual .placeholder-block {
  min-height: 380px;
}

.think-copy {
  max-width: 560px;
}

.think-lead {
  color: var(--charcoal-soft);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-top: 18px;
}

.think-lead:first-of-type { margin-top: 0; }

.think-lead strong { color: var(--charcoal); }

/* The bold narrative anchors get extra lead-in space so they still read
   as distinct beats, while the supporting paragraphs around them sit
   closer together. */
.think-lead:has(strong) {
  margin-top: 30px;
}

/* ============ Solutions ============ */
.solutions { background: var(--ivory); }

.selected-work-intro {
  max-width: 680px;
}

.selected-work-intro p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal-soft);
  margin-top: 20px;
}

.selected-work-intro p:first-child {
  margin-top: 0;
}

.solutions-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 76px;
}

.solutions-grid::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--border);
}

/* Sprint 03 — content-driven height, replacing a fixed 590px. Grid's
   default align-items:stretch still equalizes height within a row (so
   siblings never look mismatched against each other), but rows are no
   longer forced to a single sitewide number regardless of actual content
   length — the specific tablet 2-column unevenness a fixed height masked
   without fixing is a stretch problem between UNEQUAL rows, not something
   a taller fixed number could ever solve. min-height keeps short cards
   (e.g. the placeholder-cover one) from collapsing too short. */
.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}

.solution-card::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--navy-soft);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Excludes the moment the pointer is over an interactive element inside
   the card (Explore Project / Request a Demo): without this, hovering
   those triggers this same lift + the summary-expand below, which
   moves the element out from under a stationary pointer and
   immediately drops its own :hover state — the button can never stay
   hovered. .actions-hover is a discrete class toggled by script.js on
   mouseenter/mouseleave of those specific elements — deliberately not
   a live :has(:hover) selector, which tracked correctly in every
   automated check here but reportedly still visibly flickered under
   real mouse input. Card-level hover treatment still applies
   everywhere else on the card. */
.solution-card:hover:not(.actions-hover),
.solution-card.is-active:not(.actions-hover) {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--terracotta-soft);
  z-index: 5;
}

.solution-card.is-active:not(.actions-hover)::before {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: translateX(-50%) scale(1.3);
}

.solution-card.is-dimmed {
  opacity: 0.55;
}

.solution-card .placeholder-block {
  min-height: 180px;
  margin-bottom: 20px;
}

.solution-cover {
  flex: 0 0 auto;
  height: 280px;
  min-height: 0;
}

.solution-cover.has-photo .placeholder-photo {
  object-fit: contain;
  background: var(--ivory-deep);
}

/* Real Nutrition Solutions card — the complete official logo asset
   (icon + wordmark + tagline, one flattened file from the brand's own
   logo folder), centered with generous surrounding background rather
   than cropped or approximated with site typography. */
.rns-card-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory-deep);
  padding: 20px;
  text-transform: none;
  letter-spacing: normal;
}

.rns-card-full-logo {
  width: 96%;
  max-width: 480px;
  height: auto;
  display: block;
}

.solution-card h3 {
  flex: 0 0 auto;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.solution-meta {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--charcoal-soft);
  opacity: 0.6;
  margin: -6px 0 12px;
}

.solution-card p {
  color: var(--charcoal-soft);
  font-size: 0.95rem;
}

.solution-status {
  display: inline-block;
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  border: 1px solid var(--terracotta-soft);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}

/* "Built" — a completed, permanent state, deliberately not terracotta
   (the site's single accent color, reserved for CTAs/active moments) so
   it doesn't read as "in progress" or draw the same attention as an
   action. Muted sage/olive instead, with a border only a shade off the
   background so it stays quiet. */
.solution-status.is-built {
  color: #5b6b4a;
  border-color: #d3dcc0;
  background: #e6ead9;
}

.solution-status.is-stealth {
  color: var(--navy);
  border-color: var(--navy-soft);
  background: var(--navy-soft);
}

/* Clinical Nutrition IN Practice's "Applied" — same quiet filled
   treatment as the rest of this chip system (soft tint + a darker,
   readable text of the same hue), deliberately not terracotta. */
.solution-status.is-progress-navy {
  color: var(--navy);
  border-color: var(--navy-soft);
  background: var(--navy-soft);
}

/* CarboQuest's "MVP in Development" — same pattern, a different hue
   (plum) so it reads distinctly from Applied's navy and Built's sage. */
.solution-status.is-progress-plum {
  color: #6b4d80;
  border-color: var(--rns-purple-soft);
  background: var(--rns-purple-soft);
}

.solution-status.is-prototype {
  color: var(--navy);
  border-color: var(--navy-soft);
  background: var(--navy-soft);
}

/* Clinical Nutrition Decision-Support Concept's "Concept Exploration"
   — same filled-pill pattern as the rest of the status chips, a cool
   dusty rose (not gold/amber — too close to terracotta) distinct from
   Built/Applied/MVP in Development/Founder-Led. */
.solution-status.is-concept {
  color: #8a5468;
  border-color: #ecdce3;
  background: #ecdce3;
}

/* Restrained secondary line beneath the formal card title — clearly
   subordinate to the h3, never competing with it or the status badge. */
.solution-module-id {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 8px;
}

.solution-status.is-founder {
  color: var(--rns-teal);
  border-color: var(--rns-teal-soft);
  background: var(--rns-teal-soft);
}

.solution-status.is-ai {
  color: var(--sage);
  border-color: var(--sage-soft);
  background: var(--sage-soft);
}

.solution-summary {
  flex: 1 1 auto;
  overflow: hidden;
  max-height: 4.4em;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0 0 16px;
  transition: max-height 0.3s ease;
}

/* Deliberately NOT excluded by .actions-hover like the lift/dot above:
   the summary's expanded height needs to stay constant for the entire
   time the pointer is anywhere in the card, including over the button.
   The button sits in normal document flow directly below this text, so
   if the summary collapsed back down the moment the pointer reached
   the button (as an .actions-hover exclusion would do here), that
   collapse would yank the button up from under the pointer — the
   exact "vibration" this whole fix exists to prevent, just caused by a
   height change instead of the transform. */
.solution-card:hover .solution-summary,
.solution-card.is-active .solution-summary {
  max-height: 20em;
}

.solution-explore {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--terracotta);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* The arrow nudges right on hover via transform, not by animating
   `gap` — gap changes the element's own layout box, which (if the
   pointer happened to be resting near the arrow) could shift it out
   from under a stationary cursor and immediately drop :hover, then
   restore it once the gap reverted — a self-triggered on/off flutter
   independent of the card-level fix above. transform doesn't affect
   layout, so this can't happen. */
.solution-explore span {
  transition: transform 0.2s ease;
}

.solution-explore:hover {
  color: var(--terracotta-hover);
}

.solution-explore:hover span {
  transform: translateX(4px);
}

/* Two-CTA cards (currently Business Operations Platform only) — the
   primary Explore action keeps its existing text-link treatment; Request
   a Demo is a distinct, quieter secondary action beside it. */
.solution-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.solution-card-actions .solution-explore {
  margin-top: 0;
}

.solution-demo-btn {
  flex: 0 0 auto;
  background: var(--ivory);
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--terracotta);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.solution-demo-btn:hover,
.solution-demo-btn:focus-visible {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}

.solution-demo-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.solution-demo-btn:active {
  background: var(--terracotta-hover);
  border-color: var(--terracotta-hover);
  color: var(--ivory);
}

/* Upcoming case studies: the CTA itself communicates "not ready yet" at the
   point of decision, using the same muted tone already used elsewhere for
   secondary text — no new color, no new visual language. */
.solution-card.is-upcoming .solution-explore {
  color: var(--charcoal-soft);
}

.solution-card.is-upcoming .solution-explore:hover {
  color: var(--charcoal);
}

.solution-list {
  list-style: disc;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solution-list li {
  font-size: 0.9rem;
  color: var(--charcoal-soft);
}

.demonstrates-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 18px 0 8px;
}

.demonstrates-label:first-child {
  margin-top: 0;
}

.solution-note {
  display: block;
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.65;
  margin-top: 10px;
}

.protected-note {
  display: none;
  margin: -20px 0 32px;
  padding: 10px 16px;
  border-left: 2px solid var(--navy-soft);
  background: var(--ivory-deep);
  border-radius: 0 8px 8px 0;
}

.protected-note.is-visible {
  display: block;
}

/* ============ Generic info card grid (Challenge cards, Protected System Areas) ============ */
.info-card-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.info-card.has-preview {
  padding: 0 18px 18px;
}

/* Sprint 03 — unified with .solution-card's hover language (same lift,
   shadow, and accent border color) so every card on the site, whether in
   Selected Work or inside a project modal, reads as one consistent
   system rather than two similar-but-different ones. */
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--terracotta-soft);
}

/* Typography Correction Pass — the single highest-impact fix in this
   pass. This is the "Card Title" tier (same conceptual role as
   .solution-card h3, .timeline-content h4, .challenge-card h4), all of
   which are serif via the inherited h1–h4 default — but this one is a
   <p>, not a heading tag, so it was silently falling back to the body
   sans-serif instead. Same hierarchy level, two different font families
   — this is very likely the specific thing that read as "competing
   typography" throughout every project modal's card grids (Key Design
   Decisions, AI Team, Protected Areas, etc.), since it's the single most
   repeated card pattern on the site. */
.info-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.info-card-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

.info-card.is-locked {
  background-color: var(--ivory-deep);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
}

.info-card.is-locked.has-preview {
  background-color: #fff;
  background-image: none;
}

.info-card-lock {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--navy);
}

.info-card-lock svg {
  width: 14px;
  height: 14px;
}

.info-card-preview {
  position: relative;
  margin: 0 -18px 14px;
  height: 140px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.info-card-preview.has-photo .placeholder-photo {
  object-fit: contain;
  background: var(--ivory-deep);
}

.info-card-preview-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(250, 246, 240, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  color: var(--navy);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.info-card-preview-badge svg {
  width: 11px;
  height: 11px;
}

@media (max-width: 640px) {
  .info-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Approach pathway (Clinical Nutrition Decision-Support Platform) ============ */
.pathway-steps {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pathway-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 22px 0;
}

.pathway-step::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 13px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.pathway-step:last-child::before {
  display: none;
}

.pathway-step:last-child {
  padding-bottom: 0;
}

.pathway-step-num {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid var(--navy-soft);
  color: var(--navy);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.8rem;
}

.pathway-step-text {
  padding-top: 3px;
  font-size: 0.95rem;
  color: var(--charcoal);
}

.solution-cta {
  display: none;
  margin-top: 24px;
}

.solution-cta.is-visible {
  display: block;
}

/* ============ Project Case Study Modal ============ */
/* overflow:hidden on body alone doesn't lock scrolling — the actual
   scrolling root in standards mode is <html>, so without this the
   underlying page can still drift via focus-triggered scrollIntoView
   or keyboard input while a project overlay covers it (invisible to
   the user, but breaks anything — like history scroll restoration —
   that depends on the page's scroll position staying put). Derived via
   :has() from the existing body.modal-open toggle rather than adding
   the class to <html> at every one of its ~10 call sites in script.js. */
html:has(body.modal-open),
body.modal-open {
  overflow: hidden;
  overflow-anchor: none;
}

/* Mobile Lisa bottom sheet: lisa.js adds this only at the mobile
   breakpoint (see isMobileLisaLayout()) while the panel is open, so the
   page behind the sheet doesn't scroll along with it. */
body.lisa-panel-open {
  overflow: hidden;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.project-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 43, 40, 0.55);
}

.project-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  max-height: 95vh;
  background: var(--ivory);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.project-modal.is-open .project-modal-panel {
  transform: translateY(0);
}

.project-modal-scroll {
  max-height: 95vh;
  overflow-y: auto;
  padding: 52px 44px 44px;
}

.project-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--charcoal-soft);
  cursor: pointer;
}

.project-modal-hero {
  min-height: 320px;
  margin-bottom: 24px;
}

.project-modal-hero.has-photo .placeholder-photo {
  object-fit: contain;
  background: var(--ivory-deep);
}

.project-modal-hero.is-light.has-photo .placeholder-photo {
  background: #fff;
  padding: 40px;
}

.placeholder-block.fit-cover.has-photo .placeholder-photo {
  object-fit: cover;
}

/* Used where the full illustration must stay visible with nothing
   cropped (e.g. How I Think's puzzle-piece illustration) — the box still
   fills its layout slot, but the image itself letterboxes instead of
   cropping to fill it. */
.placeholder-block.fit-contain.has-photo .placeholder-photo {
  object-fit: contain;
  background: var(--ivory-deep);
}

.project-modal-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 10px 0 8px;
}

#modalMeta.solution-meta {
  margin: 0 0 14px;
}

.project-modal-tagline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.project-modal-tagline:empty {
  display: none;
}

.project-modal-intro {
  margin-top: 32px;
  margin-bottom: 36px;
}

.project-modal-intro p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin-top: 14px;
}

.project-modal-intro p:first-child {
  margin-top: 0;
}

.project-modal-section {
  margin-top: 32px;
}

/* Typography Correction Pass — unified with the sitewide eyebrow-label
   tier (.section-label). This is semantically an <h3> for document
   outline/accessibility, but visually it's the same "small uppercase
   subsection marker" role as every other eyebrow label on the site —
   font-size/letter-spacing were previously a near-duplicate (0.75rem/
   0.08em vs 0.8rem/0.18em) with no reason for the difference. */
.project-modal-section h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}

.project-modal-section p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
  margin-top: 12px;
}

.project-modal-section p:first-child {
  margin-top: 0;
}

/* Additive, ordered content-block renderer — used only by projects that set
   `contentBlocks`. Scoped entirely under .content-blocks-section so it
   cannot affect the fixed-slot sections other projects use. */
.content-blocks-section .content-block {
  margin-top: 28px;
}

.content-blocks-section .content-block:first-child {
  margin-top: 0;
}

.content-block-emphasis {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--charcoal);
  margin-top: 28px;
}

.content-blocks-section .content-block-emphasis:first-child {
  margin-top: 0;
}

.content-block-cards .info-card-grid {
  margin-top: 16px;
}

.content-block-collapsible {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.content-block-collapsible > summary {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  cursor: pointer;
  list-style: none;
}

.content-block-collapsible > summary::-webkit-details-marker {
  display: none;
}

.content-block-collapsible > summary::before {
  content: '+ ';
}

.content-block-collapsible[open] > summary::before {
  content: '\2212 ';
}

.content-block-collapsible-body {
  margin-top: 14px;
}

.content-block-collapsible-body .info-card-grid {
  margin-top: 12px;
}

/* Nested accordion rows (e.g. AI Executive Team roster) — compact, neutral,
   reuses the same info-card typography weights without the card chrome. */
.content-block-accordion {
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.accordion-row {
  border-bottom: 1px solid var(--border);
}

.accordion-row summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  list-style: none;
}

.accordion-row summary::-webkit-details-marker {
  display: none;
}

.accordion-row summary::before {
  content: '+';
  font-weight: 500;
  color: var(--charcoal-soft);
  width: 1em;
}

.accordion-row[open] summary::before {
  content: '\2212';
}

.accordion-row-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0 0 14px;
}

.project-walkthrough {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

.walkthrough-header {
  margin-bottom: 20px;
}

.walkthrough-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 8px;
}

.walkthrough-title {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-bottom: 6px;
}

.walkthrough-step {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.6;
}

.walkthrough-image {
  min-height: 260px;
  margin-bottom: 16px;
}

.walkthrough-image.has-photo {
  min-height: 0;
  max-height: 72vh;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: flex-start;
  background: var(--ivory-deep);
}

.walkthrough-image.has-photo .placeholder-photo {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}

.walkthrough-explanation p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--charcoal-soft);
  margin-top: 12px;
}

.walkthrough-explanation p:first-child {
  margin-top: 0;
}

.walkthrough-block + .walkthrough-block {
  margin-top: 20px;
}

.walkthrough-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.walkthrough-explanation em {
  font-family: var(--font-serif);
  font-style: italic;
}

.walkthrough-explanation .solution-list {
  margin-top: 12px;
}

.walkthrough-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}

.walkthrough-nav .btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============ Choose Your Challenge ============ */
.challenge-section {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.feature-heading {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  margin: 0 0 10px;
}

.challenge-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--charcoal-soft);
  margin: 0 0 24px;
}

.challenge-progress {
  margin-bottom: 32px;
}

.challenge-progress-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 4px;
}

.challenge-progress-count {
  font-size: 0.9rem;
  color: var(--charcoal-soft);
  margin-bottom: 10px;
}

.challenge-progress-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.challenge-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--terracotta-soft);
  transition: background 0.3s ease, transform 0.3s ease;
}

.challenge-progress-dot.is-complete {
  background: var(--terracotta);
  transform: scale(1.2);
}

.challenge-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.challenge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.challenge-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow);
  border-color: var(--terracotta-soft);
}

.challenge-card.is-complete {
  border-color: var(--sage-soft);
}

.challenge-card-number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--terracotta);
  margin-bottom: 8px;
}

.challenge-card-checkmark {
  position: absolute;
  top: 16px;
  right: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid var(--sage);
  color: var(--sage);
  font-size: 0.7rem;
  line-height: 1;
}

.challenge-card.is-complete .challenge-card-checkmark {
  display: flex;
}

.challenge-card-illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--sage-soft) 0%, var(--ivory-deep) 65%);
}

.challenge-card-illustration::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
}

.challenge-card:nth-child(2) .challenge-card-illustration {
  background: linear-gradient(150deg, var(--navy-soft) 0%, var(--ivory-deep) 65%);
}

.challenge-card:nth-child(3) .challenge-card-illustration {
  background: linear-gradient(150deg, var(--terracotta-soft) 0%, var(--ivory-deep) 65%);
}

.challenge-card:nth-child(4) .challenge-card-illustration {
  background: linear-gradient(150deg, var(--sage-soft) 0%, var(--navy-soft) 100%);
}

.challenge-card-illustration.has-photo .placeholder-photo {
  object-fit: contain;
}

.challenge-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  transition: transform 0.35s ease;
}

.challenge-icon svg {
  width: 100%;
  height: 100%;
}

.challenge-card:hover .challenge-icon {
  transform: scale(1.1) rotate(-3deg);
}

.challenge-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.challenge-difficulty {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  border: 1px solid var(--terracotta-soft);
  border-radius: 999px;
  padding: 3px 10px;
}

.challenge-difficulty.is-intermediate {
  color: var(--navy);
  border-color: var(--navy-soft);
}

.challenge-time {
  font-size: 0.75rem;
  color: var(--charcoal-soft);
  opacity: 0.65;
}

.challenge-card h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.challenge-card-question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin-bottom: 12px;
}

.challenge-card-objective {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  opacity: 0.75;
  margin-bottom: 18px;
}

.challenge-explore {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--terracotta-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--terracotta);
  cursor: pointer;
  transition: gap 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.challenge-explore:hover {
  gap: 10px;
  color: #fff;
  background: var(--terracotta);
  border-color: var(--terracotta);
  box-shadow: 0 4px 14px rgba(193, 105, 79, 0.28);
}

@media (max-width: 640px) {
  .challenge-cards-grid {
    grid-template-columns: 1fr;
  }

  .future-module-cards {
    grid-template-columns: 1fr;
  }
}

/* ============ Challenge Modal (nested over the case study) ============ */
.challenge-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.challenge-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.challenge-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 43, 40, 0.42);
}

.challenge-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  max-height: 86vh;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.challenge-modal.is-open .challenge-modal-panel {
  transform: translateY(0);
}

.challenge-modal-scroll {
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 48px 40px 56px;
}

@media (max-width: 640px) {
  .challenge-modal {
    padding: 12px;
  }

  .challenge-modal-scroll {
    padding: 44px 22px 40px;
  }
}

.challenge-modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.challenge-illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--sage-soft) 0%, var(--ivory-deep) 65%);
}

.challenge-illustration.has-photo .placeholder-photo {
  object-fit: contain;
  background: var(--ivory-deep);
}

.challenge-illustration-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  text-align: center;
  padding: 0 12px;
}

.challenge-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 480px) {
  .challenge-modal-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .challenge-modal-nav .btn {
    width: 100%;
  }
}

.journey-completion {
  display: none;
  text-align: center;
}

.journey-completion.is-revealed {
  display: block;
  animation: completionReveal 0.6s ease;
}

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

.journey-completion .feature-heading {
  margin-top: 0;
}

.completion-glow {
  position: relative;
  padding: 12px 0 4px;
}

.completion-glow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--sage-soft) 0%, transparent 70%);
  opacity: 0.7;
  z-index: -1;
}

.journey-completion #completeBody p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
  margin-top: 12px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.journey-completion #completeBody p:first-child {
  margin-top: 0;
}

/* ============ Future Learning Modules (roadmap) ============ */
.future-modules-grid {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.future-module-group-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}

.future-module-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.future-module-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ivory-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.future-module-name {
  font-size: 0.9rem;
  color: var(--charcoal);
}

.future-module-badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.7;
  white-space: nowrap;
}

/* ============ Help Shape CarboQuest ============ */
.feedback-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

.feedback-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--charcoal-soft);
  margin-top: -8px;
}

.feedback-form {
  margin-top: 20px;
}

/* ============ Business Transformation ============ */
.transformation-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

/* ============ Protected System Areas ============ */
.protected-areas-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

/* ============ Real Nutrition Solutions ============ */
.brand-line {
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rns-purple);
  margin: 0 0 28px;
}

.brand-line.is-visible {
  display: block;
}

.stages-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

.stages-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stage-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px 18px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stage-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--stage-color, var(--rns-teal));
}

.stage-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.stage-num {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--stage-color, var(--rns-teal));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stage-card h4 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.stage-card p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

@media (max-width: 900px) {
  .stages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .stages-grid {
    grid-template-columns: 1fr;
  }
}

.founder-note-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

.founder-quote {
  margin: 20px 0 16px;
  padding-left: 20px;
  border-left: 2px solid var(--rns-purple-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--charcoal);
}

.founder-note-section p:not(.founder-quote) {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--charcoal-soft);
}

.transformation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 8px;
}

.transformation-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}

.transformation-col:last-child .transformation-label {
  color: var(--navy);
}

@media (max-width: 640px) {
  .transformation-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============ Journey ============ */
.journey { background: var(--ivory); border-top: 1px solid var(--border); padding-top: 56px; }

.journey-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
}

.journey-copy p { color: var(--charcoal-soft); max-width: 380px; }

.timeline {
  border-left: 2px solid var(--border);
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.timeline-item { position: relative; }

.timeline-dot {
  position: absolute;
  left: -44px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--ivory);
  box-shadow: 0 0 0 2px var(--navy);
}

.timeline-year {
  font-family: var(--font-serif);
  color: var(--navy);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.timeline-content h4 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.timeline-content p {
  color: var(--charcoal-soft);
  font-size: 0.95rem;
  margin-top: 12px;
}

.timeline-content p:first-of-type {
  margin-top: 0;
}

/* Résumé picker — nested directly under the intro copy (not floating
   below the much-taller timeline column) so it reads as a small,
   designed component attached to this section rather than an orphaned
   afterthought. Two slim, identically-shaped cards keep titles, tags,
   and arrows aligned to each other automatically — quiet by default,
   picking up the same terracotta accent as every other link on hover. */
.journey-resume {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}

.journey-resume-lead {
  font-size: 0.78rem;
  color: var(--charcoal-soft);
  margin: 0 0 2px;
}

.journey-resume-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.journey-resume-card:hover,
.journey-resume-card:focus-visible {
  border-color: var(--terracotta-soft);
  background: var(--ivory-deep);
}

.journey-resume-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--charcoal);
}

.journey-resume-tags {
  font-size: 0.72rem;
  color: var(--charcoal-soft);
}

.journey-resume-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease, gap 0.2s ease;
}

.journey-resume-card:hover .journey-resume-cta,
.journey-resume-card:focus-visible .journey-resume-cta {
  color: var(--terracotta);
  gap: 8px;
}

/* ============ Before You Go ============ */
.before-you-go { background: var(--ivory); border-top: 1px solid var(--border); }

.before-you-go-inner { max-width: 620px; }

.before-you-go-inner p { margin-top: 20px; }

.before-you-go-inner p:first-of-type { margin-top: 0; }

.before-you-go-closing { margin-top: 32px; }

/* ============ Connect ============ */
.connect { background: var(--ivory-deep); }

.connect-inner { max-width: 620px; }

.connect-sub {
  color: var(--charcoal-soft);
  margin-bottom: 44px;
}

.connect-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row label {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.form-row input,
.form-row textarea,
.form-row select {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--charcoal);
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(193, 105, 79, 0.15);
}

.connect-form .btn { align-self: flex-start; }

.form-note {
  font-size: 0.9rem;
  color: var(--sage);
  min-height: 1.2em;
}

/* ============ Footer ============ */
.site-footer {
  padding: 36px 0;
  border-top: 1px solid var(--border);
  background: var(--ivory);
}

.footer-inner {
  display: flex;
  justify-content: center;
}

.footer-inner p {
  font-size: 0.9rem;
  color: var(--charcoal-soft);
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .think-inner,
  .journey-inner {
    grid-template-columns: 1fr;
  }

  .think-visual { order: 2; }
  .think-copy { order: 1; }

  .believe-grid,
  .solutions-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Same reasoning as the 720px rule below: fixed 590px only earns its
     keep in a 3-column row that needs every card to line up together.
     At 2 columns, paired cards already match each other's height via this
     same fixed value, so there's no alignment need being served — only
     wasted space inside the shorter (placeholder) cards. */
  .solution-card {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .section { padding: 80px 0; }

  /* .section's mobile padding above is equal-specificity with these two
     and appears later in source, so without this it silently wins and
     restores the large 80px gap this pass was specifically fixing. */
  .section.believe {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  .section.think {
    padding-top: 32px;
  }

  .section.ai-team {
    padding-top: 40px;
  }

  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.open { max-height: 400px; }

  .nav-links li {
    width: 100%;
    border-top: 1px solid var(--border);
  }

  /* The <li>'s padding used to visually imply a full-width tap target
     that the <a> itself didn't actually fill (the anchor stayed sized
     to its text glyphs), so taps outside the small text box silently
     did nothing. Move the padding onto the anchor and make it a block
     so the clickable box matches the visible row exactly. */
  .nav-links li a:not(.nav-cta) {
    display: block;
    width: 100%;
    padding: 16px 32px;
  }

  .nav-cta {
    display: inline-block;
    margin: 4px 32px 16px;
  }

  .believe-grid,
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  /* Fixed 590px only makes sense when cards sit side by side and need to
     line up. Single-column mobile has no alignment need, so let each card
     size to its own content instead of carrying forced empty space. */
  .solution-card {
    height: auto;
    min-height: 0;
  }

  .chapter-map {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }

  .chapter-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 24px 16px;
  }

  .chapter-item:first-child { padding-left: 0; }
  .chapter-item:last-child { padding-right: 0; border-bottom: none; }
  .chapter-item:nth-child(3) { border-bottom: none; }
}

/* ============ Business Operations Platform — SaaS Experience ============ */
.bop-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--ivory);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.bop-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bop-overlay-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bop-overlay-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 96px;
}

.bop-header {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.bop-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.bop-close:hover,
.bop-close:focus-visible {
  color: var(--terracotta);
  gap: 12px;
}

.bop-header-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.bop-header-main h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 8px 0 6px;
}

.bop-header-meta {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
}

.bop-header-demo {
  flex: 0 0 auto;
}

/* Tabs — accessible ARIA tabs pattern (roving tabindex, arrow-key
   navigation handled in script.js). Horizontally scrollable rather than
   compressed once labels stop fitting. */
.bop-tabs {
  display: flex;
  gap: 4px;
  margin-top: 28px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bop-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bop-tab:hover {
  color: var(--charcoal);
}

.bop-tab.is-active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.bop-tab:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.bop-panels {
  margin-top: 40px;
  max-width: 720px;
}

.bop-panel[hidden] {
  display: none;
}

.bop-lede {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--charcoal);
  margin-bottom: 24px;
}

.bop-panel-p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
  margin-top: 16px;
}

.bop-panel-p:first-of-type { margin-top: 0; }

.bop-panel-note {
  font-size: 0.9rem;
  font-style: italic;
}

.bop-subhead {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 40px;
  margin-bottom: 4px;
}

.bop-panel > .bop-subhead:first-child { margin-top: 0; }

.bop-mini-head {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 28px;
  margin-bottom: 4px;
}

.bop-challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.bop-challenge-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ivory-deep);
}

.bop-challenge-card h4 {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.bop-challenge-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

.bop-overview-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.bop-overview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.bop-overview-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bop-overview-card span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
}

.bop-overview-card:hover img,
.bop-overview-card:focus-visible img {
  border-color: var(--terracotta);
  transform: translateY(-2px);
}

.bop-screenshot {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--ivory-deep);
  cursor: zoom-in;
  overflow: hidden;
}

.bop-screenshot img {
  width: 100%;
  display: block;
}

.bop-screenshot-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(46, 43, 40, 0.75);
  color: #fff;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bop-screenshot:hover .bop-screenshot-hint,
.bop-screenshot:focus-visible .bop-screenshot-hint {
  opacity: 1;
}

.bop-demonstrates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.bop-demonstrates-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.bop-demonstrates ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bop-demonstrates li {
  font-size: 0.88rem;
  color: var(--charcoal-soft);
}

.bop-transformation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 20px;
}

.bop-transformation-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-bottom: 12px;
}

.bop-transformation-list li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--charcoal-soft);
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.bop-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 28px;
  border-radius: 16px;
  background: var(--ivory-deep);
}

.bop-next-step p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--charcoal);
}

@media (max-width: 900px) {
  .bop-overlay-inner { padding: 28px 20px 72px; }
  .bop-challenge-grid,
  .bop-overview-nav,
  .bop-demonstrates,
  .bop-transformation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .bop-overview-nav,
  .bop-demonstrates,
  .bop-transformation-grid {
    grid-template-columns: 1fr;
  }
  .bop-header-main {
    align-items: flex-start;
  }
  .bop-header-demo {
    width: 100%;
    text-align: center;
  }
  .bop-next-step {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============ Screenshot Lightbox ============ */
.bop-lightbox {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(38, 35, 33, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bop-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bop-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.bop-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

/* ============ Request a Demo ============ */
.demo-dialog {
  position: fixed;
  inset: 0;
  z-index: 330;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.demo-dialog.is-open {
  opacity: 1;
  pointer-events: auto;
}

.demo-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 43, 40, 0.55);
}

.demo-dialog-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ivory);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.demo-dialog.is-open .demo-dialog-panel {
  transform: translateY(0);
}

.demo-dialog-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--charcoal-soft);
  cursor: pointer;
}

.demo-dialog h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.demo-dialog-sub {
  font-size: 0.9rem;
  color: var(--terracotta);
  margin-bottom: 24px;
}

.demo-dialog form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--charcoal-soft);
  opacity: 0.7;
}

.demo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#demoFormNote.is-error {
  color: #b3462c;
}

.form-field-error {
  font-size: 0.82rem;
  color: #b3462c;
  margin-top: -6px;
}

.form-row textarea.is-invalid {
  border-color: #b3462c;
}

/* ============ CarboQuest — dedicated learning experience ============
   Deliberately distinct from the Business Operations Platform's flat
   SaaS surface: a warm sage/terracotta gradient backdrop, rounded
   chapter framing, and a playful-but-polished progress trail, per the
   Experience Spec's "educational product, not a slide deck" direction. */
.cq-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: linear-gradient(160deg, var(--sage-soft) 0%, var(--ivory-deep) 45%, var(--ivory) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cq-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cq-overlay-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cq-overlay-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 32px 96px;
}

.cq-header {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

.cq-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.cq-close:hover,
.cq-close:focus-visible {
  color: var(--terracotta);
  gap: 12px;
}

.cq-header #cqOverlayTitle {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 8px 0 6px;
}

.cq-header-meta {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  margin-bottom: 16px;
}

.cq-chapter-title {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--terracotta);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: var(--shadow);
}

.cq-progress {
  margin-bottom: 40px;
}

.cq-progress-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-bottom: 4px;
}

.cq-progress-count {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.cq-progress-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cq-progress-dot {
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--terracotta-soft);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cq-progress-dot.is-complete {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: scaleY(1.25);
}

.cq-challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .cq-challenge-grid {
    grid-template-columns: 1fr;
  }
}

/* Completion / Future Modules / Feedback / Updates — a single continuous,
   celebratory-but-calm sequence once Complete This Chapter fires. */
.cq-completion,
.cq-future-modules,
.cq-feedback,
.cq-updates {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.cq-completion {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  border-top: none;
  padding-top: 0;
}

.cq-completion-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--terracotta);
  font-size: 1.4rem;
  margin: 0 auto 18px;
}

.cq-completion h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 10px;
}

.cq-completion-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracotta);
  margin-bottom: 18px;
}

.cq-completion #cqCompleteBody p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 12px;
}

.cq-section-label {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-bottom: 8px;
}

.cq-section-intro {
  color: var(--charcoal-soft);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 8px;
}

.cq-section-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracotta);
  margin-bottom: 20px;
}

.cq-feedback form,
.cq-updates form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin-top: 20px;
}

.cq-updates-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.cq-updates-row label {
  width: 100%;
}

.cq-updates-row input {
  flex: 1 1 220px;
}

.cq-updates-row .btn {
  flex: 0 0 auto;
}

/* ---- Challenge detail — nested overlay ---- */
.cq-challenge-overlay {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cq-challenge-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cq-challenge-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 43, 40, 0.42);
}

.cq-challenge-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  max-height: 86vh;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}

.cq-challenge-overlay.is-open .cq-challenge-panel {
  transform: translateY(0);
}

.cq-challenge-scroll {
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 48px 40px 56px;
}

.cq-challenge-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cq-complete-hint {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  font-style: italic;
  margin-top: 8px;
}

#cqCompleteChapterBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .cq-overlay-inner {
    padding: 28px 20px 72px;
  }

  .cq-challenge-overlay {
    padding: 12px;
  }

  .cq-challenge-scroll {
    padding: 44px 22px 40px;
  }

  .cq-updates-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cq-updates-row .btn {
    width: 100%;
  }
}

/* ============ Real Nutrition Solutions — founder-led guided journey ============
   Warmer and more editorial than BOP (flat SaaS) or CarboQuest (sage/
   terracotta gradient + card journey): generous ivory space, a soft
   teal accent, and a single continuous scroll organized into chapters
   rather than tabs or a challenge grid. */
.rns-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--ivory-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.rns-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.rns-overlay-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* The mobile nav toggling position:fixed removes/re-adds its height
     from this container's flow; without this, the browser's automatic
     scroll-anchoring "compensates" for that reflow by nudging scrollTop
     on its own, fighting the explicit restore in closeRnsMobileNav(). */
  overflow-anchor: none;
}

.rns-overlay-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 120px;
}

.rns-header {
  padding-bottom: 24px;
  margin-bottom: 12px;
}

.rns-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.rns-close:hover,
.rns-close:focus-visible {
  color: var(--rns-edit-terracotta);
  gap: 12px;
}

.rns-header-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

/* Full logo lockup — icon + wordmark + tagline — replacing the icon-only
   mark. Same treatment as the Stages of Change lockup, scaled for the
   header. */
.rns-header-logo-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rns-header-logo-row img {
  width: 100%;
  max-width: 90px;
  height: auto;
}

.rns-header-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--rns-edit-teal);
  line-height: 1.05;
  margin: 0;
}

.rns-header-tagline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--rns-edit-purple);
  margin: 4px 0 0;
}

.rns-header-meta {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
}

.rns-chapter-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Quiet, editorial text-index — reads like a table of contents rather
   than app-style filter chips: no fill, no border, no radius. Section
   labels are separated by thin dot dividers, and the active/hovered
   label gets a subtle terracotta underline instead of a background. */
.rns-chapter-link {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.rns-chapter-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rns-edit-terracotta);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.rns-chapter-link:hover,
.rns-chapter-link:focus-visible {
  color: var(--rns-edit-terracotta);
}

.rns-chapter-link:hover::after,
.rns-chapter-link:focus-visible::after {
  transform: scaleX(1);
}

.rns-chapter-nav-sep {
  color: var(--border);
  font-size: 0.8rem;
  margin: 0 12px;
  user-select: none;
}

/* Mobile-only sticky "Explore" nav — hidden on desktop; replaces the
   pill row on narrow viewports so it doesn't wrap into several rows of
   vertical space. */
.rns-mobile-nav {
  display: none;
}

@media (max-width: 640px) {
  .rns-chapter-nav {
    display: none;
  }

  .rns-mobile-nav {
    display: block;
  }

  /* Section-start landing offset — the persistent fixed trigger sits on
     top of the content, so every scroll target needs breathing room
     equal to its actual rendered height (set as --rns-mobile-nav-offset
     by JS, since that height depends on the device's safe-area-inset
     and must never be a single hardcoded number) plus a small
     intentional gap. scroll-margin-top is respected natively by
     scrollIntoView({block:'start'}), so no manual offset math is
     needed at the call site. */
  .rns-chapter,
  .rns-header,
  #rnsHowChangeBeginsAnchor {
    scroll-margin-top: var(--rns-mobile-nav-offset, 80px);
  }

  /* Get Uncomfortable is a full-bleed colored section (its own 48px
     internal padding already clears the trigger before the eyebrow
     label starts) — giving it the same scroll-margin as everything
     else would push its landing point down and reveal a strip of the
     previous (non-plum) section above it, which is exactly what this
     section must never show. Compound selector so this reliably wins
     over the general .rns-chapter rule regardless of source order. */
  .rns-chapter.rns-interrupt {
    scroll-margin-top: 0;
  }
}

/* Persistent trigger — a small fixed circular button, independent of
   the header block, so it stays reachable no matter how far the user
   has scrolled down the page (a sticky-within-header trigger scrolls
   away once its containing block scrolls out of view; this doesn't).
   Positioned top-right, clear of both the back-link (top-left) and the
   Lisa project-ask button (bottom-right, z-index 330) so neither
   control conflicts with the other. Offsets account for the iOS status
   bar / notch via env(safe-area-inset-*). */
.rns-mobile-nav-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .rns-mobile-nav-trigger {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 400;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(38, 35, 33, 0.18);
  }

  .rns-mobile-nav-trigger .rns-mobile-nav-label {
    display: none;
  }
}

.rns-mobile-nav-trigger:focus-visible {
  outline: 2px solid var(--rns-edit-terracotta);
  outline-offset: -2px;
}

.rns-mobile-nav-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  flex: 0 0 auto;
}

.rns-mobile-nav-icon span {
  display: block;
  height: 1.5px;
  background: var(--charcoal);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.rns-mobile-nav-trigger[aria-expanded="true"] .rns-mobile-nav-icon span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.rns-mobile-nav-trigger[aria-expanded="true"] .rns-mobile-nav-icon span:nth-child(2) {
  opacity: 0;
}

.rns-mobile-nav-trigger[aria-expanded="true"] .rns-mobile-nav-icon span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

.rns-mobile-nav-menu {
  display: none;
}

/* True full-screen state — not a dropdown. Covers the entire visible
   RNS page area so no underlying content is visible, and sits above
   the Lisa project-ask button (hidden entirely via JS while open,
   since its body-level stacking context can't be out-ranked by a
   z-index nested inside #rnsOverlay). The trigger becomes the
   full-width top close bar. */
.rns-mobile-nav.is-open {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
}

.rns-mobile-nav.is-open .rns-mobile-nav-trigger {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: var(--ivory);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.rns-mobile-nav.is-open .rns-mobile-nav-trigger .rns-mobile-nav-label {
  display: inline;
}

.rns-mobile-nav.is-open .rns-mobile-nav-menu {
  display: block;
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--ivory);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.rns-mobile-nav-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 20px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--charcoal);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.rns-mobile-nav-item:last-child {
  border-bottom: none;
}

.rns-mobile-nav-item:focus-visible {
  outline: 2px solid var(--rns-edit-terracotta);
  outline-offset: -2px;
  background: var(--ivory-deep);
}

.rns-mobile-nav-item:hover {
  background: var(--ivory-deep);
}

.rns-chapter {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

.rns-chapter:focus {
  outline: none;
}

.rns-chapter-opening {
  border-top: none;
  padding-top: 12px;
}

/* Chapter 1 — Created for Real Life: full-width eyebrow, then headline
   (left) / support paragraphs (right), a full-width pull quote, and
   "The Story Behind It" narrative. Matches the approved scratch preview
   exactly. */
.rns-hero-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

#rnsHeroBrand.rns-hero-brand {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rns-edit-gold-text);
  margin: 0 0 22px;
}

.rns-chapter p.rns-hero-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal);
  margin: 0;
}

.rns-chapter p.rns-hero-statement em {
  font-style: italic;
  font-weight: 700;
  color: var(--rns-edit-terracotta);
}

.rns-hero-part {
  border-left: 1px solid var(--border);
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rns-chapter .rns-hero-part p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--charcoal);
  margin: 0 0 14px;
}

.rns-chapter .rns-hero-part p:last-child {
  margin-bottom: 0;
}

.rns-hero-quote-block {
  max-width: 640px;
  margin: 40px 0;
}

.rns-chapter p.rns-quote-mark {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  color: var(--rns-edit-terracotta);
  opacity: 0.3;
  line-height: 1;
  margin: 0 0 -14px;
}

.rns-quote-mark-close {
  text-align: right;
  margin: -30px 0 -6px;
}

.rns-chapter p.rns-quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--rns-edit-terracotta);
  border-left: 3px solid var(--rns-edit-terracotta);
  padding-left: 22px;
  margin: 0 0 16px;
}

.rns-chapter p.rns-quote-byline {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin: 0;
  padding-left: 22px;
}

.rns-hero-story {
  padding: 40px 0 0;
  border-top: 1px solid var(--border);
}

#rnsHeroStoryLabel.rns-hero-story-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rns-edit-gold-text);
  display: block;
  margin: 0 0 18px;
}

.rns-chapter .rns-hero-story p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin: 0 0 20px;
}

.rns-chapter .rns-hero-story p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .rns-hero-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }

  .rns-chapter p.rns-hero-statement {
    font-size: 1.9rem;
  }

  .rns-hero-part {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 28px;
  }

  .rns-hero-quote-block {
    margin: 32px 0;
  }

  .rns-chapter p.rns-quote-text {
    font-size: 1.3rem;
  }

  .rns-hero-story {
    padding-top: 32px;
  }
}

/* Chapter 2 — Get Uncomfortable: full-bleed plum interruption, matching
   the approved scratch composition's "Action" color treatment. Breaks
   out of .rns-overlay-inner's side padding via negative margins so the
   color reads edge-to-edge within the modal, not just inset text. */
.rns-interrupt {
  background: var(--rns-edit-coral-bg);
  color: #fdf6ee;
  margin: 0 -32px;
  padding: 64px 32px;
  border-top: none;
}

.rns-chapter p.rns-interrupt-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fdf6ee;
  opacity: 0.85;
  margin-bottom: 18px;
}

.rns-chapter p.rns-interrupt-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  max-width: 640px;
  margin: 0;
}

.rns-interrupt-body {
  max-width: 640px;
  margin: 32px 0 0;
  text-align: left;
}

.rns-chapter .rns-interrupt-body p {
  color: #fbe9df;
}

.rns-chapter p.rns-interrupt-climax {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  color: #fff;
  max-width: 640px;
  margin: 32px auto 0;
  text-align: center;
}

@media (max-width: 640px) {
  .rns-chapter.rns-interrupt {
    margin: 0 -20px;
    padding: 48px 24px;
  }
}

/* Subsection labels distinguish the three formerly-separate chapters
   (Why People Get Stuck, How Change Begins, The Model That Inspired
   It) now nested inside one top-level chapter. */
.rns-chapter p.rns-subsection-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rns-edit-gold-text);
  margin-bottom: 14px;
}

.rns-subsection-label-spaced {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.rns-whystuck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.rns-chapter p.rns-whystuck-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--charcoal);
  margin: 0;
}

.rns-chapter p.rns-whystuck-headline em {
  font-style: italic;
  color: var(--rns-edit-terracotta);
}

.rns-whystuck-body {
  border-left: 1px solid var(--border);
  padding-left: 48px;
}

@media (max-width: 760px) {
  .rns-whystuck-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rns-whystuck-body {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 28px;
  }
}

/* Each thought stays its own block; a short terracotta rule marks the
   pacing between them, matching the approved editorial rhythm. */
.rns-whystuck-body p {
  position: relative;
  padding-bottom: 20px;
}

.rns-whystuck-body p::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  border-top: 2px solid var(--rns-edit-terracotta);
}

.rns-whystuck-body p:last-child {
  padding-bottom: 0;
}

.rns-whystuck-body p:last-child::after {
  display: none;
}

.rns-whystuck-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
  margin: 8px 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.rns-chapter p.rns-whystuck-point-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rns-edit-gold-text);
  margin-bottom: 8px !important;
}

.rns-ticket {
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--rns-edit-gold-soft);
  border-radius: 16px;
  padding: 24px 28px;
}

.rns-ticket-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background: var(--rns-edit-gold-soft);
}

.rns-ticket-text {
  flex: 1 1 auto;
}

.rns-chapter p.rns-ticket-line {
  color: var(--charcoal);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.rns-chapter p.rns-ticket-line:last-child {
  margin-bottom: 0;
}

.rns-chapter p.rns-ticket-line-emphasis {
  font-style: italic;
  color: var(--rns-edit-terracotta);
}

.rns-chapter p.rns-model-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  color: var(--rns-edit-gold-text);
  border-left: 2px solid var(--rns-edit-gold-text);
  padding-left: 18px;
  max-width: 600px;
  margin-bottom: 20px;
}

.rns-model-body {
  max-width: 620px;
}

@media (max-width: 640px) {
  .rns-whystuck-points {
    grid-template-columns: 1fr;
  }
}

/* Chapter 3 — How Change Begins: left-aligned intro, staggered pathway
   steps, quiet model footnote. */
.rns-chapter p.rns-how-change-intro {
  font-size: 1.05rem;
  color: var(--charcoal);
  max-width: 560px;
  margin-bottom: 32px;
}

.rns-stagger-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  margin-bottom: 28px;
}

.rns-stagger-divider {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  color: var(--rns-edit-terracotta);
  font-size: 1.2rem;
}

.rns-stagger-step {
  padding: 0 22px;
}

.rns-stagger-step:not(:first-child) {
  border-left: 1px solid var(--border);
}

.rns-stagger-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 3.2rem;
  color: var(--rns-edit-terracotta);
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}

.rns-stagger-phrase {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--charcoal);
  display: block;
}

@media (max-width: 760px) {
  .rns-stagger-steps {
    grid-template-columns: 1fr;
    padding-top: 20px;
  }

  .rns-stagger-divider {
    display: none;
  }

  .rns-stagger-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 0 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
  }

  .rns-stagger-step:not(:first-child) {
    border-left: none;
  }

  .rns-stagger-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .rns-stagger-step:nth-child(3) {
    margin-left: 16px;
  }

  .rns-stagger-step:nth-child(5) {
    margin-left: 32px;
  }

  .rns-stagger-num {
    font-size: 2.2rem;
    margin-bottom: 0;
    flex: 0 0 auto;
    width: 44px;
  }
}

.rns-chapter p.rns-chapter-label {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 18px;
}

.rns-chapter-sub {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rns-edit-gold-text);
  margin-bottom: 24px;
}

/* Why the Caterpillar Is My Favorite — cream section background, book-
   like drop cap on the opening line, and the two emotional beats (the
   "muscle"/mind quote, the closing "beautiful caterpillars" line) each
   carrying their own approved accent color rather than staying neutral. */
.rns-cat-sec {
  background: var(--cream, var(--ivory-deep));
  margin: 0 -32px;
  padding: 8px 32px 1px;
}

@media (max-width: 640px) {
  .rns-chapter.rns-cat-sec {
    margin: 0 -20px;
    padding: 8px 20px 1px;
  }
}

.rns-chapter p.rns-cat-drop {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin: 0 0 24px;
}

.rns-chapter p.rns-cat-drop.rns-cat-first::first-letter {
  font-size: 4rem;
  font-weight: 600;
  float: left;
  line-height: 0.8;
  padding-right: 14px;
  padding-top: 4px;
  color: var(--rns-edit-lime);
}

.rns-chapter p.rns-cat-drop.rns-cat-strong {
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 14px;
}

.rns-chapter p.rns-cat-drop.rns-cat-approach {
  font-size: 1.05rem;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.rns-cat-quote-block {
  margin: 48px 0;
  text-align: center;
}

.rns-chapter p.rns-cat-quote {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1.4;
  color: var(--rns-edit-terracotta);
  margin: 0;
}

.rns-cat-close {
  text-align: center;
  margin-top: 40px;
}

.rns-chapter p.rns-cat-close-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  line-height: 1.3;
  color: var(--rns-edit-lime);
  margin: 0;
}

/* What This Work Creates — two-column grid: intro + closing line on the
   left, a circular-icon outcomes list on the right. Matches the approved
   scratch preview exactly. */
.rns-creates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 32px;
}

.rns-chapter .rns-creates-intro p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--charcoal);
  margin: 0 0 16px;
}

.rns-chapter p.rns-creates-close {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 24px;
  color: var(--charcoal);
}

.rns-creates-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.rns-creates-item:last-child {
  border-bottom: none;
}

.rns-creates-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--rns-edit-terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rns-edit-terracotta);
  flex: 0 0 auto;
}

.rns-creates-icon svg {
  width: 20px;
  height: 20px;
}

.rns-chapter .rns-creates-item p {
  font-size: 1.02rem;
  margin: 0;
  color: var(--charcoal);
}

@media (max-width: 760px) {
  .rns-creates-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Beyond Nutrition — full-bleed deep-teal band (label + statement +
   support), followed by a separate triad-row list and a row of colored
   connector icons on the normal page background. Matches the approved
   scratch preview exactly. */
#rnsEcosystemBody {
  background: var(--rns-edit-teal-deep);
  color: #fff;
  margin: 0 -32px;
  padding: 64px 32px 48px;
}

@media (max-width: 640px) {
  #rnsEcosystemBody {
    margin: 0 -20px;
    padding: 48px 24px 36px;
  }
}

.rns-beyond-label {
  color: var(--rns-edit-gold-text);
  float: right;
}

h2.rns-ecosystem-statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.12;
  max-width: 640px;
  margin: 40px 0 24px;
  clear: both;
  color: #fff;
}

.rns-chapter p.rns-ecosystem-support {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0 0 14px;
}

.rns-beyond-bottom {
  padding-top: 0;
  padding-bottom: 0;
}

.rns-beyond-triad {
  border-top: 1px solid var(--border);
}

.rns-beyond-triad-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}

.rns-beyond-triad-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--rns-edit-terracotta);
  width: 64px;
  flex: 0 0 auto;
}

.rns-chapter .rns-beyond-triad-row p {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin: 0;
  color: var(--charcoal);
}

.rns-beyond-connectors {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  padding: 32px 0 0;
}

.rns-beyond-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rns-beyond-connector-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--cc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc);
}

.rns-beyond-connector-dot svg {
  width: 22px;
  height: 22px;
}

.rns-beyond-connector span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.rns-chapter p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

/* Stages of Change — full logo lockup (icon + wordmark + tagline)
   anchoring the section, same treatment/scale as the approved scratch
   preview's .rns-model-logo-row. */
.rns-stages-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 8px;
}

.rns-stages-logo-row img {
  width: 150px;
  height: auto;
}

.rns-chapter p.rns-stages-wordmark {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--rns-edit-teal);
  line-height: 1.05;
  margin: 0;
}

.rns-chapter p.rns-stages-tagline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--rns-edit-purple);
  margin: 6px 0 0;
}

@media (max-width: 760px) {
  .rns-stages-logo-row {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }

  .rns-stages-logo-row img {
    width: 120px;
  }

  .rns-stages-logo-row > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .rns-stages-wordmark {
    font-size: 1.9rem;
    text-align: center;
  }
}

/* Stages of Change — plain accordion, matching the approved scratch
   preview exactly: no stage expanded by default, one panel open at a
   time, no logo-highlight graphic. */
.rns-stages-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 24px;
}

p.rns-stages-lede {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  margin: 0 0 8px;
}

p.rns-stages-sub {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rns-edit-gold-text);
  margin: 0 0 16px;
}

p.rns-stages-question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 0 0 12px;
  color: var(--charcoal);
}

p.rns-stages-explore {
  font-size: 0.86rem;
  color: var(--charcoal-soft);
  margin: 0 0 8px;
}

.rns-stages-explore-arrow {
  font-size: 1.3rem;
  color: var(--rns-edit-terracotta);
  margin: 0;
}

.rns-accordion {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.rns-accordion-item {
  border-bottom: 1px solid var(--border);
  background: var(--ivory);
}

.rns-accordion-item:last-child {
  border-bottom: none;
}

.rns-accordion-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.02rem;
}

.rns-accordion-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--stage-color);
  flex: 0 0 auto;
  transition: background 0.2s ease;
}

.rns-accordion-item[data-open="true"] .rns-accordion-dot {
  background: var(--stage-color);
}

.rns-accordion-plus {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--charcoal-soft);
  transition: transform 0.2s ease;
}

.rns-accordion-item[data-open="true"] .rns-accordion-plus {
  transform: rotate(45deg);
}

.rns-accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.rns-accordion-item[data-open="true"] .rns-accordion-panel {
  max-height: 600px;
}

.rns-accordion-panel-inner {
  padding: 0 22px 26px 53px;
}

p.rns-accordion-kicker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stage-color);
  margin: 0 0 8px;
}

.rns-accordion-panel-inner p.rns-accordion-desc {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--charcoal-soft);
  margin: 0;
}

.rns-accordion-message-box {
  margin-top: 16px;
  background: var(--ivory-deep);
  border-radius: 10px;
  padding: 14px 18px;
  border-left: 3px solid var(--stage-color);
}

.rns-accordion-message-box p {
  font-family: 'Dancing Script', var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--stage-color);
  margin: 0;
  line-height: 1.4;
}

.rns-script-line {
  font-family: 'Dancing Script', var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
}

.rns-hand-heart {
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
  vertical-align: -0.08em;
  margin-left: 2px;
}

p.rns-signature {
  font-family: 'Dancing Script', var(--font-serif);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--rns-edit-purple);
  text-align: left;
  margin-top: 16px;
}

/* Final Words — three related reflections, not three equal boxes: no
   vertical divider rules (whitespace alone implies the separation),
   uneven column widths, and a gentle downward cascade left → center →
   right, closing on the signature. Matches the approved scratch preview
   exactly. */
.rns-founder-note {
  text-align: left;
  border-top: 1px solid var(--border);
  padding: 48px 32px 48px;
  background: var(--cream);
  margin: 0 -32px;
}

.rns-founder-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--rns-edit-terracotta);
  margin: 0 0 24px;
}

.rns-founder-columns {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  gap: 40px;
  align-items: start;
}

.rns-founder-col-2,
.rns-founder-col-3 {
  border-left: 1px solid var(--border);
  padding-left: 40px;
}

.rns-chapter p.rns-founder-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--charcoal-soft);
  line-height: 1.6;
  margin: 0 0 8px;
}

.rns-chapter p.rns-founder-line:last-child {
  margin-bottom: 0;
}

.rns-chapter p.rns-founder-line-highlight {
  color: var(--rns-edit-terracotta);
}

.rns-chapter p.rns-founder-line-emphasis {
  color: var(--charcoal);
}

/* "Why?" — the pivot the eye lands on in the center column: enough
   presence to anchor it, still italic, still in flow (not a heading). */
.rns-chapter p.rns-founder-line-pivot {
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--rns-edit-terracotta);
  margin-bottom: 10px;
}

/* "Get uncomfortable." — the strongest moment via weight and its
   upright contrast against the italic lines everywhere else. */
.rns-chapter p.rns-founder-line-close {
  font-style: normal;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .rns-overlay-inner {
    padding: 28px 20px 96px;
  }

  .rns-header-main {
    gap: 14px;
    /* On desktop this margin separates the title block from the pill
       chapter-nav that follows it. On mobile that nav is replaced by
       the persistent fixed trigger (effectively zero-height in flow),
       so the same margin was just adding dead space above the first
       chapter — tightened to match. */
    margin-bottom: 16px;
  }

  .rns-header {
    padding-bottom: 12px;
  }

  .rns-header-logo-row img {
    max-width: 70px;
  }

  .rns-header-wordmark {
    font-size: 1.4rem;
  }

  .rns-chapter {
    padding: 40px 0;
  }

  /* .rns-chapter-opening's own padding-top:12px (unmedia-queried, see
     base rule) is the same specificity as this rule and comes earlier
     in the file, so without the compound selector this generic mobile
     override silently wins and re-inflates the gap under the header
     back to 40px on mobile — the exact gap flagged as "huge". */
  .rns-chapter.rns-chapter-opening {
    padding-top: 12px;
  }

  .rns-founder-note {
    padding: 56px 20px;
    margin: 0 -20px;
  }

  .rns-founder-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rns-founder-col-2,
  .rns-founder-col-3 {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 24px;
  }
}

.rns-updates {
  padding: 48px 0;
}

.rns-updates form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
  margin-top: 28px;
}

.rns-updates-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.rns-updates-row label {
  width: 100%;
}

.rns-updates-row input {
  flex: 1 1 220px;
  font-size: 1rem;
}

.rns-updates-row .btn {
  flex: 0 0 auto;
  font-size: 0.9rem;
  padding: 14px 32px;
  border-radius: 26px;
}

@media (max-width: 640px) {
  .rns-updates-row {
    flex-direction: column;
    align-items: stretch;
  }

  .rns-updates-row .btn {
    width: 100%;
  }
}

/* Help Shape What Comes Next — quiet listening, not a CTA. Refined
   2026-07-28 against CarboQuest's feedback form as the discipline
   benchmark: one calm content width shared by the intro copy and the
   form, tighter inter-paragraph spacing, and a clearer break before
   the questions begin. RNS's own voice (serif italic labels, the
   plum/terracotta palette) is kept — only the layout discipline changes. */
.rns-updates #rnsJoinJourneyBody p {
  max-width: 560px;
  margin-bottom: 8px;
}

.rns-chapter p.rns-shape-prompt {
  color: var(--rns-edit-terracotta);
  font-weight: 600;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 4px 0 0;
}

#rnsUpdatesForm {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 560px;
}

.rns-shape-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

.rns-shape-field label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.4;
  max-width: 560px;
  margin-bottom: 0;
  display: block;
}

/* First question opens the conversation — slightly more weight than
   the one that follows it. */
.rns-shape-field-primary label {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Field treatment — one consistent height/border/radius/background
   across every input in this form (textareas and the email field
   below), matching the CarboQuest benchmark exactly rather than each
   field having its own bespoke padding and border tint. */
.rns-shape-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 72px;
  width: 100%;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rns-shape-field textarea:focus-visible {
  outline: none;
  border-color: var(--rns-edit-coral-bg);
  box-shadow: 0 0 0 3px rgba(100, 74, 106, 0.1);
}

/* Stage of Change is a lighter, quieter question than the two
   open-ended ones — smaller, upright, muted. */
.rns-shape-field-stage label {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal-soft);
}

.rns-shape-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  padding-top: 8px;
  margin-top: 4px;
}

.rns-shape-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--charcoal);
  cursor: pointer;
}

.rns-shape-radio input {
  accent-color: var(--rns-edit-coral-bg);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Optional email/consent — left-aligned and quieter than the required
   questions above (smaller kicker label, muted intro, no centering),
   so it reads as a calm coda rather than a second form bolted onto the
   first. */
.rns-shape-connect {
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rns-shape-connect-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin: 0;
}

.rns-shape-connect-intro {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  max-width: 480px;
  margin: 0;
}

.rns-shape-connect input[type='email'] {
  display: block;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  max-width: 320px;
  margin: 2px 0 0;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rns-shape-connect input[type='email']:focus-visible {
  outline: none;
  border-color: var(--rns-edit-coral-bg);
  box-shadow: 0 0 0 3px rgba(100, 74, 106, 0.1);
}

.rns-shape-connect-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  cursor: pointer;
  max-width: 420px;
  margin: 4px 0 0;
  text-align: left;
}

.rns-shape-connect-check input {
  accent-color: var(--rns-edit-coral-bg);
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  cursor: pointer;
  flex-shrink: 0;
}

.rns-shape-submit-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  gap: 10px;
}

/* A real, intentional button — same solid-fill/pill structure as the
   site's standard .btn.btn-primary (and CarboQuest's "Share Idea"),
   in RNS's own plum/Action color rather than terracotta, so the
   submit area reads as a deliberate final step, not an afterthought. */
#rnsUpdatesForm button[type='submit'] {
  all: unset;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: var(--rns-edit-coral-bg);
  padding: 14px 34px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

#rnsUpdatesForm button[type='submit']:hover,
#rnsUpdatesForm button[type='submit']:focus-visible {
  background: var(--rns-edit-terracotta);
}

@media (max-width: 640px) {
  .rns-shape-radios {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #rnsUpdatesForm {
    gap: 24px;
  }
}

/* ============ Clinical Nutrition IN Practice — staged reasoning experience ============
   Calm and clinically grounded rather than warm/editorial (RNS), flat
   SaaS (BOP), or playful (CarboQuest): cool navy accents against ivory
   space, thin rule lines, a vertical reasoning pathway instead of tabs
   or challenge cards. Reuses the site's existing --navy tokens rather
   than introducing a new accent set. */
.cnip-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--ivory);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cnip-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cnip-overlay-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cnip-overlay-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 120px;
}

.cnip-header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.cnip-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.cnip-close:hover,
.cnip-close:focus-visible {
  color: var(--navy);
  gap: 12px;
}

#cnipOverlayTitle {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 8px 0 6px;
}

/* "IN" is the visual hinge of the title — real text, not an image or
   status badge, styled with color + a restrained underline. */
.cnip-in {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--terracotta-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.cnip-header-meta {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  margin-bottom: 16px;
}

.cnip-chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.cnip-chapter-link {
  background: #fff;
  border: 1px solid var(--navy-soft);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cnip-chapter-link:hover,
.cnip-chapter-link:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Mobile persistent nav — shared pattern with RNS/CDSP, see the
   detailed comments on .rns-mobile-nav-trigger for the full rationale
   (fixed positioning independent of the header, full-screen coverage,
   Lisa-button hiding via JS, safe-area insets). */
.cnip-mobile-nav {
  display: none;
}

@media (max-width: 640px) {
  .cnip-chapter-nav {
    display: none;
  }

  .cnip-mobile-nav {
    display: block;
  }
}

.cnip-mobile-nav-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .cnip-mobile-nav-trigger {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 400;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--navy-soft);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(38, 35, 33, 0.18);
  }

  .cnip-mobile-nav-trigger .cnip-mobile-nav-label {
    display: none;
  }
}

.cnip-mobile-nav-trigger:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

.cnip-mobile-nav-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  flex: 0 0 auto;
}

.cnip-mobile-nav-icon span {
  display: block;
  height: 1.5px;
  background: var(--charcoal);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cnip-mobile-nav-trigger[aria-expanded="true"] .cnip-mobile-nav-icon span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.cnip-mobile-nav-trigger[aria-expanded="true"] .cnip-mobile-nav-icon span:nth-child(2) {
  opacity: 0;
}

.cnip-mobile-nav-trigger[aria-expanded="true"] .cnip-mobile-nav-icon span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

.cnip-mobile-nav-menu {
  display: none;
}

.cnip-mobile-nav.is-open {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
}

.cnip-mobile-nav.is-open .cnip-mobile-nav-trigger {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.cnip-mobile-nav.is-open .cnip-mobile-nav-trigger .cnip-mobile-nav-label {
  display: inline;
}

.cnip-mobile-nav.is-open .cnip-mobile-nav-menu {
  display: block;
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.cnip-mobile-nav-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 20px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--charcoal);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.cnip-mobile-nav-item:last-child {
  border-bottom: none;
}

.cnip-mobile-nav-item:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  background: var(--navy-soft);
}

.cnip-mobile-nav-item:hover {
  background: var(--navy-soft);
}

.cnip-chapter {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

.cnip-chapter:focus {
  outline: none;
}

.cnip-chapter-opening {
  border-top: none;
  padding-top: 24px;
  text-align: center;
}

.cnip-cover-media {
  max-width: 620px;
  margin: 0 auto 14px;
}

.cnip-cover-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cnip-cover-trigger:hover,
.cnip-cover-trigger:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
}

.cnip-cover-trigger:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.cnip-cover-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.cnip-cover-caption {
  margin: 8px 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--charcoal-soft);
  opacity: 0.85;
}

/* ---------- Clinical Nutrition IN Practice — cover-image lightbox ---------- */
.cnip-lightbox {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  background: rgba(38, 35, 33, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cnip-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cnip-lightbox-hint {
  color: #fff;
  font-size: 0.78rem;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.cnip-lightbox-scroll {
  max-width: 100%;
  max-height: calc(100% - 30px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: var(--shadow);
  /* Lets a visitor drag-scroll to pan around once zoomed, in addition to
     native touch/trackpad scrolling and pinch-zoom (the page's viewport
     meta tag doesn't disable user scaling, so pinch-zoom already works
     here without any extra JS). */
  touch-action: pan-x pan-y pinch-zoom;
}

.cnip-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  cursor: zoom-in;
}

.cnip-lightbox-img.is-zoomed {
  max-width: none;
  max-height: none;
  width: 1900px;
  cursor: zoom-out;
}

.cnip-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 640px) {
  .cnip-lightbox-img.is-zoomed {
    width: 1100px;
  }
}

/* ---------- Website & AI Experience — cover-image lightbox ----------
   Identical component/pattern to cnip-cover-trigger/cnip-lightbox above,
   just namespaced per-project like every other project in this file. */
.wae-cover-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wae-cover-trigger:hover,
.wae-cover-trigger:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
}

.wae-cover-trigger:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.wae-lightbox {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  background: rgba(38, 35, 33, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.wae-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.wae-lightbox-hint {
  color: #fff;
  font-size: 0.78rem;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.wae-lightbox-scroll {
  max-width: 100%;
  max-height: calc(100% - 30px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: var(--shadow);
  touch-action: pan-x pan-y pinch-zoom;
}

.wae-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  cursor: zoom-in;
}

.wae-lightbox-img.is-zoomed {
  max-width: none;
  max-height: none;
  width: 1900px;
  cursor: zoom-out;
}

.wae-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 640px) {
  .wae-lightbox-img.is-zoomed {
    width: 1100px;
  }
}

/* ---------- Clinical Nutrition Decision-Support Concept —
   cover-image lightbox ---------- Same pattern again. */
.cdsp-cover-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cdsp-cover-trigger:hover,
.cdsp-cover-trigger:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
}

.cdsp-cover-trigger:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.cdsp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  background: rgba(38, 35, 33, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cdsp-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cdsp-lightbox-hint {
  color: #fff;
  font-size: 0.78rem;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.cdsp-lightbox-scroll {
  max-width: 100%;
  max-height: calc(100% - 30px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  box-shadow: var(--shadow);
  touch-action: pan-x pan-y pinch-zoom;
}

.cdsp-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  cursor: zoom-in;
}

.cdsp-lightbox-img.is-zoomed {
  max-width: none;
  max-height: none;
  width: 1900px;
  cursor: zoom-out;
}

.cdsp-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 640px) {
  .cdsp-lightbox-img.is-zoomed {
    width: 1100px;
  }
}

.cnip-tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 560px;
  margin: 0 auto;
}

.cnip-chapter-label {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 18px;
}

.cnip-chapter-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
  margin-bottom: 28px;
}

.cnip-chapter p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

/* Behind Every Recommendation — restrained two-up cards, no icons, no
   quiz framing. */
.cnip-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cnip-rec-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.cnip-rec-card h4 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--navy);
}

.cnip-rec-card p {
  font-size: 0.92rem;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .cnip-recommendation-grid {
    grid-template-columns: 1fr;
  }
}

/* Clinical Reasoning — a vertical staged pathway (editorial timeline),
   not tabs, not a quiz, not a fake EHR. Each stage is a structural
   label + the verbatim approved paragraph(s) that belong to it. */
.cnip-reasoning-pathway {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
}

.cnip-stage {
  position: relative;
  padding: 0 0 46px 44px;
  border-left: 1px solid var(--navy-soft);
  margin-left: 15px;
}

.cnip-stage:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.cnip-stage-num {
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cnip-stage-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 14px;
  padding-top: 4px;
}

.cnip-stage-body {
  max-width: 600px;
}

.cnip-stage-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 12px;
}

.cnip-stage-body p:last-child {
  margin-bottom: 0;
}

.cnip-reasoning-close {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--navy);
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 8px;
}

/* Where This Shows Up — two supporting panels, side by side on desktop. */
.cnip-rounds-media {
  width: 140px;
  height: auto;
  margin-bottom: 24px;
  opacity: 0.85;
}

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

.cnip-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.cnip-panel h4 {
  font-size: 0.98rem;
  color: var(--navy);
  margin-bottom: 10px;
}

.cnip-panel ul {
  list-style: none;
}

.cnip-panel li {
  font-size: 0.9rem;
  color: var(--charcoal-soft);
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.cnip-panel li:first-child {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 640px) {
  .cnip-panels {
    grid-template-columns: 1fr;
  }
}

/* What This Reveals — the closing emphasis line is the central
   takeaway, given real visual weight rather than sitting inside a
   paragraph. */
.cnip-final-emphasis {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--charcoal);
  max-width: 620px;
  border-top: 1px solid var(--border);
  padding-top: 40px;
  margin-top: 24px;
  margin-bottom: 8px;
}

/* Next Step — restrained closing CTA, no form. Extra top padding gives
   real separation from the final emphasis statement above it. */
.cnip-next-step {
  padding-top: 72px;
}

.cnip-next-step .cnip-chapter-label {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-bottom: 20px;
}

.cnip-next-step-intro {
  max-width: 560px;
}

.cnip-cta-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.cnip-secondary-link {
  background: none;
  border: none;
  padding: 10px 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cnip-secondary-link:hover,
.cnip-secondary-link:focus-visible {
  color: var(--terracotta);
}

@media (max-width: 640px) {
  .cnip-overlay-inner {
    padding: 28px 20px 96px;
  }

  .cnip-chapter {
    padding: 40px 0;
  }

  .cnip-next-step {
    padding-top: 56px;
  }

  .cnip-cta-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cnip-cta-actions .btn,
  .cnip-secondary-link {
    width: 100%;
  }
}

/* ============ Clinical Nutrition Decision-Support Concept — research/exploration workspace ============
   Repositioned 2026-07-20 from an "evolving blueprint" register that
   read as too close to completed software. Same restrained node/
   pathway visual language, but the grid ground is softened further so
   it reads as quiet paper texture behind the research narrative rather
   than a product surface, and the interaction now visualizes
   disciplined inquiry (Exploration Plan) rather than finished product
   logic. */
.cdsp-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background-color: var(--ivory);
  background-image:
    linear-gradient(rgba(46, 43, 40, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 43, 40, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cdsp-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cdsp-overlay-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cdsp-overlay-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 32px 120px;
}

.cdsp-header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  background: var(--ivory);
}

.cdsp-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.cdsp-close:hover,
.cdsp-close:focus-visible {
  color: var(--navy);
  gap: 12px;
}

#cdspOverlayTitle {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  margin: 8px 0 4px;
}

.cdsp-header-meta {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
  margin-bottom: 16px;
}

.cdsp-chapter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.cdsp-chapter-link {
  background: #fff;
  border: 1px solid var(--navy-soft);
  border-radius: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cdsp-chapter-link:hover,
.cdsp-chapter-link:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Mobile persistent nav — shared pattern with RNS/CNIP, see the
   detailed comments on .rns-mobile-nav-trigger for the full rationale. */
.cdsp-mobile-nav {
  display: none;
}

@media (max-width: 640px) {
  .cdsp-chapter-nav {
    display: none;
  }

  .cdsp-mobile-nav {
    display: block;
  }
}

.cdsp-mobile-nav-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .cdsp-mobile-nav-trigger {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 400;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--navy-soft);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(38, 35, 33, 0.18);
  }

  .cdsp-mobile-nav-trigger .cdsp-mobile-nav-label {
    display: none;
  }
}

.cdsp-mobile-nav-trigger:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

.cdsp-mobile-nav-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  flex: 0 0 auto;
}

.cdsp-mobile-nav-icon span {
  display: block;
  height: 1.5px;
  background: var(--charcoal);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cdsp-mobile-nav-trigger[aria-expanded="true"] .cdsp-mobile-nav-icon span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.cdsp-mobile-nav-trigger[aria-expanded="true"] .cdsp-mobile-nav-icon span:nth-child(2) {
  opacity: 0;
}

.cdsp-mobile-nav-trigger[aria-expanded="true"] .cdsp-mobile-nav-icon span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

.cdsp-mobile-nav-menu {
  display: none;
}

.cdsp-mobile-nav.is-open {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
}

.cdsp-mobile-nav.is-open .cdsp-mobile-nav-trigger {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.cdsp-mobile-nav.is-open .cdsp-mobile-nav-trigger .cdsp-mobile-nav-label {
  display: inline;
}

.cdsp-mobile-nav.is-open .cdsp-mobile-nav-menu {
  display: block;
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.cdsp-mobile-nav-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 20px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--charcoal);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.cdsp-mobile-nav-item:last-child {
  border-bottom: none;
}

.cdsp-mobile-nav-item:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  background: var(--navy-soft);
}

.cdsp-mobile-nav-item:hover {
  background: var(--navy-soft);
}

.cdsp-chapter {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  background: var(--ivory);
}

.cdsp-chapter:focus {
  outline: none;
}

.cdsp-chapter-opening {
  border-top: none;
  padding-top: 32px;
  text-align: center;
}

.cdsp-cover-media {
  max-width: 420px;
  margin: 0 auto 20px;
}

.cdsp-cover-img {
  width: 100%;
  height: auto;
  display: block;
}

.cdsp-opening-body {
  max-width: 600px;
  margin: 0 auto;
}

.cdsp-opening-line {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.6;
  color: var(--charcoal);
  margin-bottom: 18px;
}

/* Contextual bridge — a brief editorial callout, not a chapter. */
.cdsp-bridge {
  max-width: 600px;
  margin: 36px auto;
  padding: 20px 24px;
  border-left: 2px solid var(--terracotta-soft);
  background: #fff;
}

.cdsp-bridge p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--charcoal);
}

.cdsp-chapter-label {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 18px;
}

.cdsp-chapter-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
  margin-bottom: 24px;
}

.cdsp-chapter p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

/* Why It May Be Worth Exploring — controlled text column beside a small
   abstract fragmentation-to-question diagram (an open question, not a
   resolved decision — see the diagram's own dashed circle). */
.cdsp-problem-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}

.cdsp-problem-diagram {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.cdsp-problem-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 760px) {
  .cdsp-problem-layout {
    grid-template-columns: 1fr;
  }

  .cdsp-problem-diagram {
    order: -1;
    max-width: 260px;
    margin: 0 auto 24px;
  }
}

/* What Needs to Be Validated — a plain, readable discovery agenda, not
   a checklist styled as a warning. */
.cdsp-validation-list {
  margin: 18px 0 0;
  padding-left: 22px;
  max-width: 620px;
}

.cdsp-validation-list li {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 10px;
}

.cdsp-validation-list li:last-child {
  margin-bottom: 0;
}

/* Exploration Plan — connected node pathway, real buttons, no
   completion state, no scoring; visualizes disciplined research, not
   finished product logic. */
.cdsp-system-map {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cdsp-stage-node {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cdsp-stage-node:hover,
.cdsp-stage-node:focus-visible {
  border-color: var(--navy);
}

.cdsp-stage-node.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
  background: var(--navy-soft);
}

.cdsp-stage-node-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
}

.cdsp-stage-node-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.3;
}

.cdsp-stage-detail {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.cdsp-stage-detail-num {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.75;
  margin-bottom: 6px;
}

.cdsp-stage-detail-label {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.cdsp-stage-detail-text {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .cdsp-stage-node {
    flex: 1 1 100%;
  }
}

/* What This Exploration Demonstrates — four wide capability panels,
   expand-on-demand, all content present in the DOM regardless of
   open state. */
.cdsp-capability-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cdsp-capability-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 24px;
}

.cdsp-capability-panel summary {
  padding: 18px 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cdsp-capability-panel summary::-webkit-details-marker {
  display: none;
}

.cdsp-capability-panel summary::after {
  content: '+';
  font-weight: 400;
  color: var(--charcoal-soft);
}

.cdsp-capability-panel[open] summary::after {
  content: '\2212';
}

.cdsp-capability-list {
  padding: 4px 0 22px 20px;
}

.cdsp-capability-list li {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  line-height: 1.65;
  margin-bottom: 8px;
}

.cdsp-capability-list li:last-child {
  margin-bottom: 0;
}

/* Current Stage — restrained box, not a legal-warning panel. */
.cdsp-status-box {
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.cdsp-status-box p:last-child {
  margin-bottom: 0;
}

/* Possible Future Direction — plain paragraphs; the uncertainty is
   intentional, so no roadmap markers, status badges, or timeline
   styling that would imply committed plans. */

/* Next Step */
.cdsp-next-step-intro {
  max-width: 560px;
}

.cdsp-cta-actions {
  margin-top: 20px;
}

@media (max-width: 640px) {
  .cdsp-overlay-inner {
    padding: 28px 20px 96px;
  }

  .cdsp-chapter {
    padding: 40px 0;
  }

  .cdsp-status-box {
    padding: 22px 20px;
  }
}

/* ============ AI Executive Team — standalone homepage section ============
   Operating-model framing, not novelty: quiet cards, no illustration,
   independently expandable, Aloma's directive framing given its own
   line before the roles. A hairline divider + tightened top padding
   separate it cleanly from Selected Work above, instead of relying on
   .section's large generic 120px gap. */
.ai-team {
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.ai-team-intro {
  max-width: 640px;
}

.ai-team-intro p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

.ai-team-framing {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
  margin-bottom: 0;
}

/* Positioned directly after the heading, before the intro paragraph,
   so Aloma's authority is established before the named roles. */
.ai-team-framing-lead {
  max-width: 640px;
  margin-bottom: 20px;
}

/* Contextual return path from AI Executive Team back to the Website &
   AI Experience case study — hidden by default, shown only via wae-*
   JS when the visitor arrived through "See the Operating Model." */
.ai-team-return[hidden] {
  display: none;
}

.ai-team-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 24px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.ai-team-return:hover,
.ai-team-return:focus-visible {
  color: var(--terracotta);
  gap: 12px;
}

.ai-team-return-bottom {
  margin-top: 32px;
  margin-bottom: 0;
}

.ai-team-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ai-team-role {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 22px;
}

.ai-team-role summary {
  padding: 18px 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-team-role summary::-webkit-details-marker {
  display: none;
}

.ai-team-role summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--charcoal-soft);
}

.ai-team-role[open] summary::after {
  content: '\2212';
}

.ai-team-role-text {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  line-height: 1.65;
  padding: 0 0 20px;
  margin: 0;
}

.ai-team-closing {
  margin-top: 32px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracotta);
  max-width: 640px;
}

@media (max-width: 720px) {
  .ai-team-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Website & AI Experience — decision-log retrospective ============
   A quiet "design notebook" register: numbered entries on one side,
   one entry's detail shown at a time — distinct from BOP's tabs,
   CarboQuest's challenges, RNS's chapters, CNIP's clinical pathway,
   and CDSP's research map by virtue of its content (a retrospective
   log, not a product or learning surface), while reusing the same
   proven, accessible node+detail interaction shape. */
.wae-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--ivory);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.wae-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.wae-overlay-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}

.wae-overlay-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 32px 120px;
}

.wae-header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.wae-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal-soft);
  cursor: pointer;
  transition: color 0.2s ease, gap 0.2s ease;
}

.wae-close:hover,
.wae-close:focus-visible {
  color: var(--terracotta);
  gap: 12px;
}

#waeOverlayTitle {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  margin: 8px 0 4px;
}

.wae-header-meta {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
}

.wae-chapter {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

.wae-chapter:focus {
  outline: none;
}

.wae-chapter-opening {
  border-top: none;
  padding-top: 24px;
}

.wae-opening-hero {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 20px;
  max-width: 680px;
}

.wae-opening-body {
  max-width: 640px;
}

.wae-opening-body p {
  color: var(--charcoal-soft);
  line-height: 1.75;
  margin-bottom: 14px;
}

.wae-opening-media {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.wae-opening-img,
.wae-log-image {
  width: 100%;
  height: auto;
  display: block;
}

.wae-chapter-label {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 10px;
}

.wae-chapter-sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
  margin-bottom: 28px;
}

/* Decision Log — register (left) + single detail panel (right),
   collapsing to a stacked, vertically-readable sequence on mobile. */
.wae-log-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

.wae-log-register {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wae-log-node {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wae-log-node:hover,
.wae-log-node:focus-visible {
  border-color: var(--terracotta);
}

.wae-log-node.is-active {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 1px var(--terracotta);
  background: var(--terracotta-soft);
}

.wae-log-node-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--terracotta);
  color: var(--terracotta);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
}

.wae-log-node-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.3;
}

.wae-log-detail {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  padding: 28px 32px;
  min-height: 200px;
}

.wae-log-detail-num {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  opacity: 0.75;
  margin-bottom: 6px;
}

.wae-log-detail-label {
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.wae-log-detail-body p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 12px;
}

.wae-log-emphasis {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--charcoal);
  margin-top: 16px;
}

.wae-requirement-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}

.wae-requirement-group-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 8px;
}

.wae-requirement-group ul {
  padding-left: 18px;
}

.wae-requirement-group li {
  font-size: 0.86rem;
  color: var(--charcoal-soft);
  line-height: 1.55;
  margin-bottom: 6px;
}

.wae-conversation-steps,
.wae-architecture-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wae-conversation-step,
.wae-architecture-step {
  background: var(--ivory-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--navy);
}

.wae-transition-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracotta);
  margin-top: 14px;
}

.wae-design-specimen {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 24px;
  background: var(--ivory-deep);
  border-radius: var(--radius);
}

.wae-specimen-serif {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.wae-specimen-sans {
  font-size: 0.98rem;
  color: var(--charcoal-soft);
}

.wae-specimen-btn {
  opacity: 1 !important;
  cursor: default;
  padding: 10px 22px;
  font-size: 0.95rem;
}

.wae-specimen-status {
  margin: 0;
  font-size: 0.78rem;
  padding: 5px 14px;
}

.wae-specimen-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 0.9rem;
  color: var(--charcoal-soft);
}

.wae-personalities-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.wae-personality-link,
.wae-personality-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  text-align: left;
}

.wae-personality-link {
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.wae-personality-link:hover,
.wae-personality-link:focus-visible {
  border-color: var(--terracotta);
}

.wae-personality-link strong,
.wae-personality-item strong {
  font-size: 0.86rem;
  color: var(--charcoal);
}

.wae-personality-link span,
.wae-personality-item span {
  font-size: 0.78rem;
  color: var(--charcoal-soft);
}

/* Human Judgment / AI-Assisted Execution — an editorial pairing, not a
   generic two-stat dashboard card: a restrained line icon, a serif
   title, a quiet subheading, then a spaced list. The two columns share
   the same card treatment (white, bordered) so the contrast between
   them comes from their accent color and icon only — terracotta for
   the human column (the site's own accent), charcoal/ink for AI, kept
   deliberately quieter so it reads as supporting rather than equal
   weight. */
.wae-human-ai-split {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.wae-split-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.wae-split-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.wae-split-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.wae-split-icon svg {
  width: 18px;
  height: 18px;
}

.wae-split-human .wae-split-icon {
  color: var(--terracotta);
  background: var(--terracotta-soft);
}

.wae-split-ai .wae-split-icon {
  color: var(--charcoal);
  background: var(--ivory-deep);
}

.wae-split-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 2px;
}

.wae-split-subheading {
  font-size: 0.78rem;
  color: var(--charcoal-soft);
  margin: 0;
}

.wae-split-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wae-split-col li {
  position: relative;
  padding-left: 16px;
  font-size: 0.88rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
}

.wae-split-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1.5px;
}

.wae-split-human li::before {
  background: var(--terracotta);
}

.wae-split-ai li::before {
  background: var(--charcoal-soft);
}

.wae-results-list {
  margin-top: 4px;
  padding-left: 20px;
}

.wae-results-list li {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  line-height: 1.6;
  margin-bottom: 8px;
}

.wae-log-image {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Mobile-only forward control — reading a decision on mobile otherwise
   means reopening the full-screen menu or scrolling back up to the
   register just to advance by one. Deliberately a quiet text link (same
   treatment as the operating-model/secondary links elsewhere in this
   project), not a button, so it doesn't compete with the persistent
   hamburger as the way to jump to any decision. Desktop is unaffected —
   hidden entirely above the mobile breakpoint. */
.wae-log-next {
  display: none;
}

@media (max-width: 640px) {
  .wae-log-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .wae-log-next:hover,
  .wae-log-next:focus-visible {
    color: var(--charcoal);
  }

  .wae-log-next[hidden] {
    display: none;
  }
}

@media (max-width: 780px) {
  .wae-log-layout {
    grid-template-columns: 1fr;
  }

  .wae-requirement-groups,
  .wae-personalities-list,
  .wae-human-ai-split {
    grid-template-columns: 1fr;
  }
}

/* Lisa's Role */
.wae-lisa-layout {
  display: grid;
  grid-template-columns: 1.6fr 0.55fr;
  gap: 24px;
  align-items: center;
}

.wae-lisa-body p {
  color: var(--charcoal-soft);
  line-height: 1.75;
  margin-bottom: 14px;
}

/* box-sizing:border-box + padding-top gives her hair breathing room from
   the top edge instead of touching it; height:100% + object-fit:contain
   on the image (rather than a fixed pixel height + cover) guarantees
   nothing is ever cropped, only scaled to fit. Narrower column + a
   smaller gap than the rest of the layout keeps her close to the text
   she's gesturing toward, instead of stranded at the far right of a
   wide, mostly-empty column. */
.wae-lisa-media {
  box-sizing: border-box;
  height: 340px;
  padding: 24px 20px 0;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--ivory-deep);
}

/* The <picture> wrapper has no height of its own, so the image's
   height:100% below has nothing definite to resolve against without
   this — omitting it is what let the image render at its full natural
   size instead of scaling to fit, overflowing the box and getting
   clipped by overflow:hidden above. */
.wae-lisa-media picture {
  display: block;
  height: 100%;
}

.wae-lisa-img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* Three capabilities — a quiet icon row (thin-line icons in soft
   terracotta circles), not a colored dashboard-style icon grid, so it
   stays consistent with the rest of the site's restraint. */
.wae-lisa-capabilities {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.wae-lisa-capability {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wae-lisa-capability-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wae-lisa-capability-icon svg {
  width: 16px;
  height: 16px;
}

.wae-lisa-capability h3 {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: var(--charcoal);
}

.wae-lisa-capability p {
  font-size: 0.84rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 760px) {
  .wae-lisa-layout {
    grid-template-columns: 1fr;
  }

  .wae-lisa-media {
    order: -1;
    height: 280px;
  }

  .wae-lisa-capabilities {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Operating Model reference */
.wae-operating-model p {
  max-width: 600px;
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin-bottom: 16px;
}

.wae-operating-model-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wae-operating-model-link:hover,
.wae-operating-model-link:focus-visible {
  color: var(--terracotta);
}

/* Next Step */
.wae-cta-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.wae-secondary-link {
  background: none;
  border: none;
  padding: 10px 0;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wae-secondary-link:hover,
.wae-secondary-link:focus-visible {
  color: var(--terracotta);
}

@media (max-width: 640px) {
  .wae-overlay-inner {
    padding: 28px 20px 96px;
  }

  .wae-chapter {
    padding: 36px 0;
  }

  .wae-log-detail {
    padding: 22px 20px;
  }

  .wae-cta-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .wae-cta-actions .btn,
  .wae-secondary-link {
    width: 100%;
  }
}

/* ============ WAE mobile "browse decisions" nav ============
   Same proven full-screen pattern as RNS/CNIP/CDSP's chapter nav
   (persistent fixed trigger, true full-screen overlay on open, scroll
   lock + exact scroll-position restore + Lisa-hiding all handled by
   the shared initChapterMobileNav()) — just scoped to the ten
   decisions rather than the whole project's chapters, and using WAE's
   own terracotta accent (already the active-decision color in the
   register) instead of RNS's edit-mode palette. */
.wae-mobile-nav {
  display: none;
}

@media (max-width: 640px) {
  .wae-mobile-nav {
    display: block;
  }

  .wae-log-detail,
  .wae-chapter {
    scroll-margin-top: var(--wae-mobile-nav-offset, 80px);
  }
}

.wae-mobile-nav-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .wae-mobile-nav-trigger {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 400;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(38, 35, 33, 0.18);
  }

  .wae-mobile-nav-trigger .wae-mobile-nav-label {
    display: none;
  }
}

.wae-mobile-nav-trigger:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.wae-mobile-nav-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  flex: 0 0 auto;
}

.wae-mobile-nav-icon span {
  display: block;
  height: 1.5px;
  background: var(--charcoal);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.wae-mobile-nav-trigger[aria-expanded="true"] .wae-mobile-nav-icon span:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}

.wae-mobile-nav-trigger[aria-expanded="true"] .wae-mobile-nav-icon span:nth-child(2) {
  opacity: 0;
}

.wae-mobile-nav-trigger[aria-expanded="true"] .wae-mobile-nav-icon span:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}

.wae-mobile-nav-menu {
  display: none;
}

.wae-mobile-nav.is-open {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
}

.wae-mobile-nav.is-open .wae-mobile-nav-trigger {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px;
  background: var(--ivory);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.wae-mobile-nav.is-open .wae-mobile-nav-trigger .wae-mobile-nav-label {
  display: inline;
}

.wae-mobile-nav.is-open .wae-mobile-nav-menu {
  display: block;
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--ivory);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.wae-mobile-nav-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 20px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--charcoal);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.wae-mobile-nav-item:last-child {
  border-bottom: none;
}

.wae-mobile-nav-item:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
  background: var(--ivory-deep);
}

.wae-mobile-nav-item:hover {
  background: var(--ivory-deep);
}

.wae-mobile-nav-item.is-active {
  color: var(--terracotta);
  font-weight: 600;
  background: var(--terracotta-soft);
}

/* ============ Lisa refinement additions ============ */
.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;
}

.lisa-about-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--charcoal-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Quiet utility tier (Start a New Conversation / About Lisa) inside the
   chat view — both deliberately smaller and less prominent than Browse
   Topics above the input row, per the approved control hierarchy. */
.lisa-footer-links {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.lisa-footer-links .lisa-reset,
.lisa-footer-links .lisa-about-toggle {
  margin-top: 0;
}

.lisa-view-chat .lisa-about-panel {
  flex: 0 0 auto;
  margin-top: 0;
}

.lisa-about-toggle:hover,
.lisa-about-toggle:focus-visible {
  color: var(--terracotta);
}

.lisa-about-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--ivory-deep);
  border-radius: 10px;
}

.lisa-about-panel p {
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0;
}

/* ---------- Report a problem — compact detour from the chat view,
   reusing the same bounded .lisa-card box; no new panel chrome. ---------- */
.lisa-view-report {
  overflow-y: auto;
}

.lisa-report-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--charcoal);
  margin: 0;
}

.lisa-report-warning {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin: 0;
}

.lisa-report-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.lisa-report-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lisa-report-field label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.lisa-report-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.lisa-report-field textarea,
.lisa-report-field input {
  font-family: inherit;
  font-size: 0.83rem;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--charcoal);
  resize: vertical;
}

.lisa-report-field textarea:focus,
.lisa-report-field input:focus {
  outline: none;
  border-color: var(--terracotta-soft);
}

.lisa-report-field textarea.is-invalid {
  border-color: #b3453f;
}

.lisa-report-field-error {
  font-size: 0.68rem;
  color: #b3453f;
  margin: 0;
}

.lisa-report-actions {
  display: flex;
  gap: 8px;
}

.lisa-report-cancel {
  flex: 1;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 43, 39, 0.14);
  background: #fff;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lisa-report-cancel:hover {
  transform: translateY(-1px);
  border-color: var(--terracotta-soft);
}

.lisa-report-actions .lisa-card-btn {
  flex: 1;
}

.lisa-report-note {
  font-size: 0.72rem;
  color: var(--sage);
  min-height: 1.2em;
  margin: 0;
}

.lisa-report-note.is-error {
  color: #b3453f;
}

/* Compact success state — after a successful submission the fields and
   submit control step aside so only the confirmation and a single "Back
   to conversation" control remain. Reset the moment Lisa closes or the
   visitor returns to the conversation (see resetReportView() in lisa.js),
   never left showing on a later reopen. */
.lisa-view-report.is-submitted .lisa-report-warning,
.lisa-view-report.is-submitted .lisa-report-field,
.lisa-view-report.is-submitted .lisa-report-actions .lisa-card-btn {
  display: none;
}

.lisa-voice-notice {
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--charcoal-soft);
  opacity: 0.85;
  margin-bottom: 10px;
}

.lisa-reset {
  align-self: center;
  background: none;
  border: none;
  margin-top: 8px;
  padding: 4px 0;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--charcoal-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.lisa-reset:hover,
.lisa-reset:focus-visible {
  color: var(--terracotta);
}

.lisa-bubble-thinking {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}

.lisa-thinking-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--charcoal-soft);
  opacity: 0.5;
  animation: lisaThinkingPulse 1.1s ease-in-out infinite;
}

.lisa-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.lisa-thinking-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes lisaThinkingPulse {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .lisa-thinking-dot {
    animation: none;
    opacity: 0.7;
  }
}

.lisa-limited-note {
  align-self: flex-start;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--charcoal-soft);
  opacity: 0.8;
  margin: -4px 0 0;
}

.lisa-input-row input:disabled,
.lisa-send:disabled,
.lisa-mic:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Selected Work cards — mobile action-row fix. At narrow widths the
   two buttons (Explore Project + Request a Demo, currently only on
   Business Operations Platform) didn't fit on one line at their
   desktop gap/padding, so the row wrapped and Request a Demo landed
   directly beneath Explore Project with only ~20px separation — close
   enough that a tap aimed at Explore could land on Demo instead.
   Appended at the end of the file (rather than edited in place above)
   so it reliably wins over the equal-specificity desktop rules
   regardless of their position in the cascade. */
@media (max-width: 640px) {
  .solution-card-actions {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .solution-demo-btn {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}