:root {
  --ink: #1B1E24;
  --terracotta: #C43E1F;
  --terracotta-dim: #A6331A;
  --mustard: #E0A93A;
  --teal: #1F7A6C;
  --paper: #F5F6F5;
  --card: #FFFFFF;
  --line: rgba(27, 30, 36, 0.12);
  --muted: rgba(27, 30, 36, 0.6);
  --nav-menu-bg: #E7E9E8;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.wrap {
  max-width: 756px;
  margin: 0 auto;
  padding: 0 20px;
}

.rule { border: none; border-top: 1px solid var(--line); margin: 0; }

/* ---------- hand-drawn circle annotation ---------- */
.annotate {
  position: relative;
  display: inline-block;
  color: var(--terracotta);
}

.annotate .ink {
  position: absolute;
  top: -0.22em;
  left: -0.22em;
  right: -0.22em;
  bottom: -0.16em;
  width: calc(100% + 0.44em);
  height: calc(100% + 0.38em);
  overflow: visible;
  pointer-events: none;
}

/* ---------- nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 246, 245, 0.94);
  backdrop-filter: blur(6px);
  padding-top: env(safe-area-inset-top);
}

.site-nav .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.site-nav .logo {
  font-family: -apple-system, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.site-nav.no-logo .bar { justify-content: flex-end; }

.bar-actions { display: flex; align-items: center; gap: 2px; }

.nav-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.nav-search-toggle:hover { background: rgba(27, 30, 36, 0.06); }
.nav-search-toggle svg { width: 19px; height: 19px; display: block; }
.nav-search-toggle[aria-expanded="true"] { background: rgba(196, 62, 31, 0.08); color: var(--terracotta); }

.nav-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 28px rgba(27, 30, 36, 0.14);
  padding: 14px 0;
  z-index: 15;
}
.nav-search-panel[hidden] { display: none; }

/* Dimming scrim behind the search panel. Without this, a short suggestions
   list (often just one result) ends abruptly and whatever real page content
   sits directly beneath it in normal document flow reads as part of the
   same block, since .nav-search-panel has no backdrop of its own, only a
   solid background on its own box. Sibling of <nav>, not a child of it:
   .site-nav's backdrop-filter creates a containing block for fixed-position
   descendants, which would trap a scrim placed inside nav to the nav's own
   box instead of the full viewport. */
.nav-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 30, 36, 0.4);
  z-index: 14;
}
.nav-search-backdrop[hidden] { display: none; }

.site-nav .logo-img-wrap { display: block; line-height: 0; }
.site-nav .logo-img { height: 48px; width: auto; display: block; }

.site-nav .links-logo {
  display: block;
  height: 34px;
  width: auto;
  margin: 4px 0 14px;
  /* .links is a column flex container with no align-items set, so its
     default (stretch) forces this image's width to fill the full menu
     width while height stays pinned at 22px, distorting the wordmark
     into a badly horizontally-stretched, blurred double-vision look.
     align-self opts this one flex child out of stretch so width:auto
     actually resolves from the image's own aspect ratio. */
  align-self: flex-start;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: -10px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 0 auto;
}

.site-nav .links {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  width: min(75%, 320px);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  margin: 0;
  padding: 4px 20px 20px;
  background: var(--nav-menu-bg, var(--paper));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  box-shadow: 0 14px 28px rgba(27, 30, 36, 0.14);
}

.site-nav .links.open { display: flex; }

.site-nav .links a {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-decoration: none;
  padding: 12px 4px;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--line);
}

.site-nav .links a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--ink);
}

.site-nav .links a:last-child { border-bottom: none; }
.site-nav .links a:hover { color: var(--terracotta); }
.site-nav .links a.nav-cta { flex-direction: column; align-items: center; justify-content: center; }

.nav-desc {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.nav-cta .nav-desc { color: rgba(245, 246, 245, 0.75); }

.site-nav .links a.nav-cta {
  background: var(--terracotta);
  color: var(--paper);
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
  border-bottom: none;
  margin-top: 6px;
}

.site-nav .links a.nav-cta:hover { background: var(--terracotta-dim); color: var(--paper); }

/* ---------- nav expandable sub-list: reveals related essays under a single
   nav item on click, instead of adding a new top-level item or a new page.
   Closed by default on every load; state doesn't persist across navigation. ---------- */
.nav-item-expandable {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.nav-item-expandable > a { border-bottom: none; flex: 1; }

.nav-expand-toggle {
  position: absolute;
  top: 8px;
  right: 4px;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px -4px 0 0;
  color: var(--muted);
  cursor: pointer;
}
.nav-expand-toggle svg { width: 16px; height: 16px; display: block; transition: transform 0.15s ease; }
.nav-expand-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-sublist { display: none; grid-template-columns: 1fr; gap: 8px; padding: 2px 4px 14px 29px; }
.nav-sublist.show { display: grid; }
.site-nav .links .nav-sublist a {
  display: block; text-decoration: none; color: var(--muted); font-size: 0.78rem; font-weight: 500;
  padding: 0; border-bottom: none;
}
.site-nav .links .nav-sublist a .nav-desc { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-expand-toggle svg { transition: none; }
}

@media (min-width: 640px) {
  .menu-toggle { display: none; }
  .site-nav .links {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border-top: none;
    box-shadow: none;
  }
  .site-nav .links a { padding: 0; border-bottom: none; font-size: 0.95rem; white-space: nowrap; flex-shrink: 0; }
  .site-nav .links a svg { display: none; }
  .site-nav .links a.nav-cta { padding: 8px 16px; margin-top: 0; font-size: 0.88rem; }
  .site-nav .logo { font-size: 1.05rem; }
  .site-nav .logo-img { height: 54px; }
  .site-nav .links-logo { display: none; }
  .nav-desc { display: none; }

  .nav-item-expandable { flex-direction: row; align-items: center; border-bottom: none; gap: 2px; flex-shrink: 0; }
  .nav-item-expandable > a { flex: 0 0 auto; white-space: nowrap; }
  .nav-expand-toggle { position: static; padding: 2px; margin: 0; flex-shrink: 0; }
  .nav-sublist {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(27, 30, 36, 0.14);
    padding: 12px 14px;
    width: 340px;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }
  .nav-sublist.show { display: grid; }
  .site-nav .links .nav-sublist a { padding: 6px; border-radius: 6px; font-size: 0.8rem; }
  .site-nav .links .nav-sublist a:hover { background: rgba(196, 62, 31, 0.07); color: var(--ink); }
  .site-nav .links .nav-sublist a .nav-desc { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: 28px 0 22px; overflow: hidden; }

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 340px;
  height: 340px;
  top: -160px;
  right: -100px;
  background: radial-gradient(circle, rgba(196, 62, 31, 0.14), transparent 70%);
}

.hero::after {
  width: 280px;
  height: 280px;
  bottom: -150px;
  left: -90px;
  background: radial-gradient(circle, rgba(224, 169, 58, 0.14), transparent 70%);
}

.hero .wrap { position: relative; z-index: 1; }

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

@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}

.hero-logo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 0 12px;
  animation: heroFadeUp 0.6s ease-out both;
}

@media (min-width: 640px) {
  .hero-logo { max-width: 420px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border-radius: 999px;
  padding: 0;
  margin-bottom: 18px;
  animation: heroFadeUp 0.6s ease-out both;
}

.eyebrow-icon { width: 12px; height: 12px; color: var(--muted); flex-shrink: 0; opacity: 0.8; }

.eyebrow-byline-group {
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.eyebrow-dot { opacity: 0.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-style: normal; }
.eyebrow { flex-wrap: wrap; row-gap: 2px; }

.hero h1 {
  font-size: clamp(1.9rem, 8vw, 3.6rem);
  letter-spacing: -0.01em;
  max-width: 18ch;
  animation: heroFadeUp 0.7s ease-out 0.12s both;
}

@keyframes wordColorShift {
  to { color: var(--terracotta); }
}

.accent-word {
  position: relative;
  display: inline-block;
  color: var(--ink);
  animation: wordColorShift 0.5s ease-out 0.95s forwards;
}

.grad-word .accent-word {
  animation: none;
  background: linear-gradient(90deg, var(--ink), var(--terracotta) 32%, var(--mustard) 64%, var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accent-underline {
  position: absolute;
  left: -3%;
  bottom: -0.12em;
  width: 106%;
  height: 0.3em;
  overflow: visible;
  color: var(--terracotta);
  pointer-events: none;
}

.accent-underline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawPath 0.55s ease-out 0.55s forwards;
}

.hero-tagline {
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(0.8rem, 3.4vw, 1.35rem);
  white-space: nowrap;
  margin: 10px 0 16px;
  letter-spacing: -0.005em;
  animation: heroFadeUp 0.6s ease-out 1.15s both;
}

.hero-report-link {
  margin: -8px 0 20px;
  animation: heroFadeUp 0.6s ease-out 1.25s both;
}
.hero-report-link a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(30, 27, 22, 0.3);
}
.hero-report-link a:hover { color: var(--terracotta); text-decoration-color: var(--terracotta); }

.proof-row { display: flex; gap: 18px; margin: 0; flex-wrap: wrap; justify-content: center; }
.proof-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.proof-item svg { color: var(--ink); }

/* Above 900px the hero's left-flush logo/headline/tagline left roughly
   half the viewport empty on the right, with no visual counterweight.
   Centering the whole block turns that into even, deliberate margin on
   both sides instead of one-sided dead space. Left-aligned below 900px
   is unaffected. */
@media (min-width: 900px) {
  .hero .wrap { text-align: center; }
  .hero-logo { margin-left: auto; margin-right: auto; }
  .hero h1 { margin-left: auto; margin-right: auto; }
}

.proof-item b {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 639px) {
  .hero-logo { margin: 0 0 10px; }
  .eyebrow { margin-bottom: 10px; }
  .beats-teaser { padding: 18px 0 30px; }
}

@media (min-width: 640px) {
  .hero { padding: 72px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow, .hero h1, .hero-tagline, .hero-report-link, .accent-word {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .accent-word { color: var(--terracotta); }
  .accent-underline path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- persona picker: self-select a role right under the hero;
   each tile links straight to that role's own dedicated page (see
   for-*.html and the .persona-page-* block below) rather than expanding
   inline, so "this applies to you" gets a real page, not two cards. ---------- */
.persona-picker { padding: 6px 0 26px; }
.persona-picker-label {
  text-align: center; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 1.2; margin: 0 0 18px;
}
.persona-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; max-width: 620px; margin: 0 auto;
}
.persona-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  font-family: inherit; color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.persona-tile:hover { border-color: var(--terracotta); }
.persona-tile svg { width: 22px; height: 22px; color: var(--ink); flex-shrink: 0; }
.persona-tile-name { font-size: 0.78rem; font-weight: 700; }

.tile-icon-chip {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
}
.tile-icon-chip svg { width: 20px; height: 20px; color: var(--ink); }
.tile-icon-chip.chip-a { background: rgba(196, 62, 31, 0.14); }
.tile-icon-chip.chip-b { background: rgba(224, 169, 58, 0.28); }
.tile-icon-chip.chip-c { background: rgba(31, 122, 108, 0.14); }
.tile-icon-chip.chip-d { background: rgba(27, 30, 36, 0.1); }
.tile-icon-chip.chip-square { border-radius: 12px; }

/* Persona picker's own icons: reviewed and approved at 68px/no background,
   50% larger than the shared .tile-icon-chip default and with colour coming
   only from the icon's own multi-accent detailing, not a tinted backdrop.
   Scoped to .persona-tile so the shared chip-a/b/c/d system used elsewhere
   (explore-hub cards, landing-hub category tiles) is untouched. */
.persona-tile .tile-icon-chip.chip-square {
  width: 68px; height: 68px; background: none;
}
.persona-tile .tile-icon-chip svg { width: 34px; height: 34px; }

@media (min-width: 640px) {
  .persona-tiles { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- persona landing pages (for-*.html): a dedicated page per
   role linked from the homepage persona picker above, with a hero header
   and blurb naming why the site is relevant to that role, then a curated
   reading list spanning principles/experiments/sessions for it. ---------- */
.persona-page-hero { padding: 44px 0 8px; text-align: center; scroll-margin-top: 136px; }
.persona-page-hero .tile-icon-chip { width: 60px; height: 60px; margin: 0 auto 18px; }
.persona-page-hero .tile-icon-chip svg { width: 30px; height: 30px; }
.persona-page-hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); margin: 0 0 14px; }
.persona-page-blurb { max-width: 58ch; margin: 0 auto; color: var(--muted); font-size: 1.02rem; }

.persona-page-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  max-width: 800px; margin: 34px auto 0; padding: 0 20px 20px;
}
@media (min-width: 700px) {
  .persona-page-grid { grid-template-columns: 1fr 1fr; }
}
.persona-page-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
}
.persona-page-card h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; margin: 0 0 6px; }
.persona-page-card p { font-size: 0.9rem; color: var(--muted); margin: 0 0 8px; }

.persona-page-back { text-align: center; padding: 8px 20px 70px; }
.persona-page-back a { font-size: 0.88rem; font-weight: 700; color: var(--terracotta); text-decoration: underline; }

.ex-tag {
  display: inline-block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; background: var(--mustard); color: var(--ink); margin-bottom: 7px;
}
.why-line { font-size: 0.8rem; color: var(--teal); font-weight: 700; margin: 0 0 8px; }
a.read-link { font-size: 0.8rem; color: var(--terracotta); text-decoration: underline; font-weight: 700; }

/* ---------- about ---------- */
.about { padding: 22px 0 24px; scroll-margin-top: 136px; }

/* A left-flush bio inside the full-width .wrap left roughly half the
   desktop viewport empty on the right. Framed as a quiet card, narrower
   and centered, rather than just narrowing the text column, so the
   extra space around it reads as a deliberate module, not leftover
   layout. Text inside stays left-aligned; only the card is centered. */
@media (min-width: 900px) {
  .about .wrap {
    max-width: 620px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    padding: 40px 44px;
  }
}

.about .lede {
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  max-width: 56ch;
  margin: 0;
}

.about .lede b { font-weight: 700; }


.about .bio {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 58ch;
  margin: 16px 0 0;
}

.credentials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.credential-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

.credential-item .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); }

@media (min-width: 640px) {
  .about { padding: 32px 0 40px; }
  .credentials { flex-direction: row; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
}

/* ---------- shared section eyebrow label ---------- */
.label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

/* ---------- category filter chips (Principles, Field Sessions, Experiments, The Science Behind archive pages) ---------- */

.toc-intro {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 16px;
}

@media (min-width: 760px) {
  /* 46ch left most of the (now-narrower) desktop .wrap empty on the
     right of every page's opening paragraph, the same "half-screen
     paragraph" pattern already fixed once for the homepage's About/
     field-note sections. Widening the measure here fixes it at the
     one shared class instead of per page. */
  .toc-intro { max-width: 68ch; font-size: 0.92rem; }
}

/* category filter row — a single scrollable line on every viewport (the
   old wrapping layout broke onto 2-3 rows on mobile once a row held more
   than ~2 chips; a horizontal-scroll strip, the same pattern already used
   for the mobile rail-nav, keeps it to one line at any chip count) */
.toc-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin-bottom: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.toc-tabs::-webkit-scrollbar { display: none; }

.toc-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toc-tab:hover { border-color: var(--terracotta); }

.toc-tab-icon { flex-shrink: 0; width: 14px; height: 14px; color: var(--muted); }
.toc-tab.active .toc-tab-icon { color: var(--paper); }

.toc-tab-label {
  white-space: nowrap;
}

.toc-tab-count {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--muted);
  background: var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  min-width: 1.5em;
  text-align: center;
}

.toc-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.toc-tab.active .toc-tab-count {
  background: rgba(245, 246, 245, 0.2);
  color: var(--paper);
}

/* ---------- journey selector (homepage curated entry point) ---------- */
.journey { padding: 22px 0 28px; scroll-margin-top: 136px; }

.journey-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.journey-question {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  line-height: 1.28;
  margin: 12px auto 0;
  max-width: 22ch;
}

.lens-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.lens-btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lens-btn.active { background: var(--ink); color: var(--paper); }

.lens-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 8px auto 0;
  max-width: 34ch;
}

.stage-row {
  display: flex;
  align-items: flex-start;
  margin: 18px auto 0;
  max-width: 460px;
}

.stage-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  text-decoration: none;
  color: var(--ink);
}

.stage-connector {
  flex: 0 0 auto;
  width: 16px;
  height: 38px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  opacity: 0.85;
}

.stage-connector svg { width: 13px; height: 13px; }

.stage-icon-wrap {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stage-icon-wrap svg { width: 18px; height: 18px; color: var(--terracotta); }

.stage-node:hover .stage-icon-wrap { border-color: var(--terracotta); background: rgba(196, 62, 31, 0.06); }

.stage-node-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  max-width: 100%;
}

.stage-node-count { font-size: 0.6rem; color: var(--muted); }

.featured-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.principles-search-cta { display: flex; gap: 8px; position: relative; }

.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(27, 30, 36, 0.14);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
}

.search-suggestions[hidden] { display: none; }

.search-suggestion {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 0.88rem;
  cursor: pointer;
}

.search-suggestion:hover,
.search-suggestion.active {
  background: rgba(178, 71, 43, 0.08);
  color: var(--terracotta);
}

.search-suggestion mark {
  background: rgba(217, 164, 65, 0.4);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.search-suggestion-group {
  padding: 10px 12px 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-suggestion-group:first-child { padding-top: 4px; }

.principles-search-cta input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-family: inherit;
  min-height: 44px;
}

.principles-search-cta button {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  min-height: 44px;
  flex-shrink: 0;
}

.principles-search-cta button:hover { background: var(--terracotta); }

.featured-browse-all {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--terracotta);
  text-decoration: none;
}

.featured-browse-all:hover { text-decoration: underline; }

@media (min-width: 560px) {
  .featured-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .principles-search-cta { max-width: 340px; }
}

/* ---------- stage view (curated landing from the homepage journey selector) ---------- */
.stage-view {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 136px;
}

.stage-view .toc-intro { margin: 0 0 20px; }

.view-toggle { display: flex; gap: 8px; margin-bottom: 20px; }

.view-btn {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.view-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.view-grouped { display: flex; flex-direction: column; gap: 14px; }
.view-grouped[hidden] { display: none; }

.outcome-group {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}

.outcome-group h3 { margin: 0 0 8px; font-size: 0.98rem; }

.outcome-group ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}

.outcome-group li a,
.view-sequence a {
  color: var(--terracotta);
  font-weight: 700;
  text-decoration: none;
}

.outcome-group li a:hover,
.view-sequence a:hover { text-decoration: underline; }

.view-sequence {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.view-sequence[hidden] { display: none; }

.view-sequence li {
  position: relative;
  padding: 0 0 18px 26px;
  border-left: 2px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

.view-sequence li:last-child { border-left-color: transparent; padding-bottom: 0; }

.view-sequence li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
}

.stage-solo-note {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 18px;
  font-style: italic;
}

.stage-view-close {
  display: inline-block;
  margin-top: 22px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--terracotta);
  text-decoration: none;
}

.stage-view-close:hover { text-decoration: underline; }

/* ---------- landing hub (nav-entry layer: intro, category tiles, full index) ---------- */
.landing-hub { padding: 32px 0 30px; border-bottom: 1px solid var(--line); scroll-margin-top: 136px; }

.landing-hub-intro {
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 8px 0 22px;
  max-width: 62ch;
}

.landing-hub .view-toggle { margin-bottom: 18px; }

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

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
}

.cat-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 16px 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.cat-tile:hover, .cat-tile:focus-visible { border-color: var(--terracotta); }

.cat-tile.active { border-color: var(--terracotta); background: rgba(178, 71, 43, 0.06); }

/* fixed column count for a merged hub + index (see science-behind-article
   skill): a small, known number of tiles that should stay one tidy row at
   every width, not stretch across the standard 3-up desktop grid and leave
   an empty track when there are only 1 or 2 of them */
.cat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 460px; }

.sb-domain-row { margin: 0 0 10px; }

/* Desktop default: icon sits above the title row, generous chip size,
   matching every other tile-based component on this site (explore-hub-card,
   persona-tile), a spacious vertical read, since a 3-up desktop column has
   plenty of width per tile. */
.cat-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cat-tile-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; }

.cat-icon { width: 22px; height: 22px; color: var(--ink); }

.cat-name { font-size: 0.9rem; font-weight: 700; line-height: 1.25; }

.cat-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.cat-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

/* Mobile: a 2-up grid leaves far less width per tile than 3-up desktop
   columns do, so the same vertical, generously-padded card reads as mostly
   empty space with a name and count nobody can parse without more context
   (the original complaint). Tighten the chip, fonts, and padding so the
   added description line fits without pushing the tile taller than it
   needs to be or forcing horizontal scroll, a genuinely different
   density from desktop's, not the same tile scaled down. */
@media (max-width: 640px) {
  .cat-tile { padding: 11px 12px; }
  .cat-tile-head { gap: 8px; margin-bottom: 6px; }
  .cat-tile .tile-icon-chip { width: 28px; height: 28px; flex-shrink: 0; }
  .cat-tile .tile-icon-chip .cat-icon { width: 14px; height: 14px; }
  .cat-name { font-size: 0.8rem; line-height: 1.2; }
  .cat-count { font-size: 0.62rem; padding: 2px 6px; }
  .cat-desc { font-size: 0.72rem; line-height: 1.35; }
}

.hub-anchor-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px 24px;
}

.hub-anchor-grid.cols-1 { grid-template-columns: 1fr; }

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

.hub-anchor-link {
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  display: inline-block;
  padding-bottom: 1px;
}

.hub-anchor-link:hover { border-bottom-color: var(--terracotta); color: var(--terracotta); }

.hub-anchor-link.has-icon { display: inline-flex; align-items: center; gap: 8px; }
.hub-anchor-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.hub-anchor-icon svg { width: 19px; height: 19px; }

/* ---------- principles archive page (search + filter + full list) ---------- */
.principles-index { padding: 28px 0 40px; scroll-margin-top: 136px; }

.principles-index-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  margin: 0 0 8px;
}

.principles-search { margin-bottom: 16px; }

.principles-search input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
  min-height: 48px;
}

.principles-empty {
  font-size: 0.9rem;
  color: var(--muted);
  padding: 20px 0;
  text-align: center;
}

.principles-list { margin-top: 6px; }

/* ---------- principle sections ---------- */
.principle {
  padding: 4px 0;
  scroll-margin-top: 136px;
  border-top: 1px solid var(--line);
}

/* collapsed by default — a compact, scannable row (icon, number, title,
   one-line definition). Expanding reveals the illustration + full article
   below. This is what keeps the homepage from being a 36-section wall of
   text: only what you click open takes up real space. */
.principle-details summary.principle-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  min-height: 44px;
}

.principle-summary::-webkit-details-marker { display: none; }
.principle-summary::marker { content: ""; }
.principle-summary:hover h3 { color: var(--terracotta); }

.principle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.principle-number {
  font-family: Georgia, serif;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(27, 30, 36, 0.22);
}

.principle-icon { width: 28px; height: 28px; color: var(--ink); flex-shrink: 0; stroke-width: 1.4; }

.principle-summary-text { flex: 1; min-width: 0; }
.principle h3 { font-size: clamp(1.05rem, 3.6vw, 1.3rem); margin: 0; transition: color 0.15s ease; }

.principle .subterm {
  font-size: 0.6em;
  color: var(--muted);
  font-family: inherit;
}

/* ---------- salient question (the headline hook above a definition/body) ---------- */
.salient-question {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 4px 0 5px;
}

.salient-question mark {
  background: rgba(224, 169, 58, 0.5);
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
  font-style: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.salient-question.lg { font-size: clamp(1rem, 4vw, 1.2rem); margin: 8px 0 12px; max-width: 44ch; }

.principle .definition {
  font-size: 0.85rem;
  color: rgba(27, 30, 36, 0.78);
  max-width: 60ch;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.principle-chev {
  flex-shrink: 0;
  color: var(--terracotta);
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.principle-details[open] .principle-chev { transform: rotate(90deg); }

.principle-body { margin: 4px 0 24px; max-width: 480px; }
.principle-body .illustration { margin: 0 auto; }
.principle-body .principle-continuation { margin: 0 auto; }

@media (min-width: 760px) {
  .principle-icon { width: 30px; height: 30px; }
  .principle .definition { font-size: 0.9rem; }
  .principle-body { max-width: 620px; }
}

.illustration {
  position: relative;
  border-radius: 14px;
  /* Own intrinsic cap, not just reliance on a narrow ancestor: on
     principles.html this sits inside .principle-body (480/620px), which
     kept it in check, but science-behind.html's .sb-block has no such
     cap, so width:100% on the svg below stretched it to the full .wrap
     column, ~850px tall on a 756px desktop wrap. Capping it here fixes
     it at the component itself, not per-page. */
  max-width: 480px;
  margin: 0 auto;
  /* Each mechanism-diagram SVG below has its own viewBox, sized to
     whatever height its actual title/row/caption content needs (a
     short two-line title needs less canvas than a wrapped three-line
     one) — there is no single fixed aspect ratio that fits all 56 of
     them any more, so this box doesn't declare one. The SVG carries
     width:100% and no explicit height (see the rule below), which
     means the browser sizes it from its own viewBox aspect ratio, the
     same way an <img> auto-sizes from its intrinsic dimensions — the
     box simply wraps snugly around whatever height that produces, so
     there is no way for a diagram's content to render smaller than the
     available width lets it, on any screen. (Earlier versions of this
     rule tried to keep a fixed aspect-ratio in step with the
     diagrams' shape by hand; that's the class of bug being avoided
     here — see the git history on this rule for the two times it went
     wrong: a 16:9 box under 4:3 diagrams, then a 4:3 box under
     variable-height ones, both silently shrinking every label.) */
  text-align: center;
  padding: 16px;
  color: rgba(245, 246, 245, 0.95);
  font-size: 0.82rem;
}

.illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 760px) {
  .illustration { padding: 20px; font-size: 0.85rem; max-width: 560px; }
}

.illustration::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(245, 246, 245, 0.4);
  border-radius: 8px;
  pointer-events: none;
}

.illustration span { position: relative; max-width: 22ch; }

.caption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------- continuation card: the diagram, the "Likely mechanism" note,
   and the article teaser used to render as three separate boxes with
   three separate visual treatments, and the CTA at the end read as a
   disconnected grey button. They're one continuous card now: the
   illustration keeps its own colour identity and squares off its bottom
   corners, and this card picks up exactly where it left off, all the way
   down to a real (if quiet) pill button instead of plain text or a stark
   tag. See design-options-review round 2, "Option 1A: Soft-Tint Pill". */
.illustration { border-radius: 14px 14px 0 0; }

.principle-continuation {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 0 16px 4px;
}
@media (min-width: 760px) {
  .principle-continuation { padding: 0 20px 6px; }
}

/* the single named psychological process most likely driving the effect,
   surfaced as soon as a principle is opened — one click, not two, since
   it's more load-bearing than any one subsection of the full article
   below. No longer its own floating card: a hairline divider is the only
   thing separating it from the diagram above and the teaser below. */
.mechanism-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.mechanism-note .mechanism-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--terracotta-dim);
  flex-shrink: 0;
}

.mechanism-note .mechanism-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- embedded article (case study) ---------- */
.article { margin: 0; padding: 0; border-top: none; }

.article summary {
  cursor: pointer;
  list-style: none;
  display: block;
}

.article summary::-webkit-details-marker { display: none; }
.article summary::marker { content: ""; }

.article-hook { padding: 14px 0 12px; }

/* teaser: a real, multi-line stretch of the article's actual opening
   paragraph (not a 3-4 line clip that cuts off mid-sentence), fading
   out gradually into the CTA below rather than a hard edge — the fade
   itself is the hint that there's more, so the button doesn't have to
   announce it alone. Lives inside <summary>, so it survives the closed
   state. */
.teaser-fade {
  position: relative;
  max-height: 9.2em;
  max-width: 62ch;
  overflow: hidden;
  margin-bottom: 6px;
}
.teaser-fade::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.6em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--card) 78%);
}
.teaser-text {
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgba(27, 30, 36, 0.78);
  margin: 0;
}
.teaser-text b { color: var(--ink); }

/* the CTA: a real, tappable pill button, quiet enough not to compete
   with the diagram above it — not plain text (too easy to miss as
   clickable) and not the old stark grey tag pill (read as a disconnected
   UI control). It's a <span> rather than a <button>: the actual click
   target is the native <summary> the whole hook lives inside, so a
   second interactive element here would be redundant. Stays visible
   once the article is open, doubling as the "collapse" control (chevron
   rotates to point down). */
.cta-wrap { text-align: center; padding-top: 2px; }
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(196, 62, 31, 0.09);
  color: var(--terracotta);
  font-size: 0.86rem;
  font-weight: 700;
  transition: background 0.15s ease;
}
.article summary:hover .cta-pill { background: rgba(196, 62, 31, 0.16); }

.cta-pill .chev {
  color: var(--terracotta);
  transition: transform 0.2s ease;
  font-size: 1.1rem;
}
.article[open] .cta-pill .chev { transform: rotate(90deg); }
.article[open] .teaser-fade { display: none; }
.article[open] .article-hook { padding-bottom: 14px; }

.article-body { margin-top: 18px; max-width: 62ch; }

.article-block { margin-top: 16px; }
.article-block:first-child { margin-top: 0; }

.article-block .k {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terracotta);
  font-weight: 700;
  margin-bottom: 5px;
}

.article-block p { margin: 0; font-size: 0.92rem; color: rgba(27, 30, 36, 0.85); }
.article-block p + p { margin-top: 12px; }

.study-card {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ---------- "Spotted in the wild" real-screenshot evidence block ---------- */
.spotted-wild {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.spotted-wild .lbl {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terracotta);
  font-weight: 700;
  margin-bottom: 8px;
}
.spotted-wild .spotted-intro { margin: 0 0 14px; font-size: 0.92rem; color: rgba(27, 30, 36, 0.85); }
.spotted-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .spotted-grid { grid-template-columns: 1fr; }
}
.spotted-item img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.spotted-item.single {
  max-width: 340px;
  margin: 0 auto;
}
.spotted-caption { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.spotted-caption b { color: var(--ink); }
.spotted-disclosure {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- study flow diagram (how the study was actually run) ---------- */
.flow-diagram {
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 10px;
}

.flow-tag {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 14px;
  text-align: center;
}

.flow-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.flow-icon { width: 26px; height: 26px; color: var(--ink); flex-shrink: 0; }
.flow-start-label { font-size: 0.8rem; font-weight: 700; }

.flow-arrow-down {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  color: rgba(27, 30, 36, 0.3);
}
.flow-arrow-down svg { width: 16px; height: 16px; }

.flow-split {
  display: flex;
  justify-content: center;
  margin: 2px 0 4px;
}

.flow-split-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--mustard);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
  max-width: 32ch;
}

.diff-highlight {
  background: rgba(224, 169, 58, 0.4);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap;
}

.flow-branches {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.flow-path {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 6px;
}

.flow-path.path-a { border-top: 3px solid var(--terracotta); }
.flow-path.path-b { border-top: 3px solid var(--teal); }

.path-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 9px;
}
.path-a .path-tag { color: var(--terracotta); }
.path-b .path-tag { color: var(--teal); }

.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
  min-width: 0;
}
.flow-step:last-child { margin-bottom: 0; }
.flow-step-icon { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; margin-top: 1px; }
.flow-step-label { font-size: 0.72rem; color: rgba(27, 30, 36, 0.88); line-height: 1.3; }

.flow-step.step-rows-wrap { align-items: flex-start; }
.flow-step.step-rows-wrap .flow-step-icon { margin-top: 3px; }
.step-rows {
  display: grid;
  grid-template-columns: minmax(1.6em, auto) minmax(2.6em, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 5px;
  row-gap: 7px;
  font-size: 0.66rem;
  color: rgba(27, 30, 36, 0.88);
  min-width: 0;
  flex: 1;
}
.step-row { display: contents; }
.step-cell { display: flex; align-items: center; gap: 3px; min-width: 0; }
.step-cell.time { justify-content: flex-start; }
.step-cell.mid { justify-content: flex-start; }
.step-cell.out { overflow-wrap: break-word; }
.cell-arrow { color: var(--muted); font-size: 0.58rem; flex-shrink: 0; }
.step-cell .dash { color: var(--muted); }
.step-cell .diff-highlight { padding: 1px 4px; }
.flavor-icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 3px; flex-shrink: 0; }
.condition-icon { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; margin-right: 4px; flex-shrink: 0; }

.flow-result { margin-top: 6px; }
.result-group { margin-bottom: 12px; }
.result-group:last-child { margin-bottom: 0; }
.result-group-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.result-group.group-a .result-group-label { color: var(--terracotta); }
.result-group.group-b .result-group-label { color: var(--teal); }

.result-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.78rem; }
.result-row:last-child { margin-bottom: 0; }
.result-label { width: 8.5em; flex-shrink: 0; }
.result-bar-track { flex: 1; background: var(--line); border-radius: 5px; height: 10px; overflow: hidden; }
.result-bar-fill { height: 100%; border-radius: 5px; background: var(--ink); }
.result-pct { font-weight: 700; width: 3.4em; text-align: right; flex-shrink: 0; }

.result-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.result-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.result-table th {
  text-align: right;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  color: var(--muted);
  padding: 0 0 8px;
  white-space: nowrap;
}
.result-table th:first-child { text-align: left; }
.result-table th.col-a { color: var(--terracotta); }
.result-table th.col-b { color: var(--teal); }
.result-table td {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.result-table td.row-label { text-align: left; font-weight: 700; white-space: normal; padding-right: 8px; }
.result-table td.pct { font-weight: 700; font-size: 0.9rem; }
.result-table td.pct.a { color: var(--terracotta); }
.result-table td.pct.b { color: var(--teal); }
.result-table td.result-arrow { color: var(--muted); font-size: 0.75rem; padding: 0 4px; }
.result-table td.result-delta { font-weight: 800; color: var(--ink); background: rgba(224, 169, 58, 0.3); border-radius: 6px; padding: 4px 7px; font-size: 0.78rem; }

.flow-insight {
  font-size: 0.85rem;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: rgba(27, 30, 36, 0.85);
}
.flow-insight b { color: var(--terracotta); }

.flow-validity { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.v-badge { font-size: 0.78rem; padding: 9px 11px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.v-badge b { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.v-badge.internal b { color: var(--teal); }
.v-badge.external b { color: var(--terracotta); }

.lbl-full { display: none; }

@media (min-width: 480px) {
  .flow-diagram { padding: 20px 18px; }
  .flow-path { padding: 14px; }
  .path-tag { font-size: 0.72rem; letter-spacing: 0.05em; margin-bottom: 12px; }
  .flow-step-icon { width: 20px; height: 20px; }
  .flow-step-label { font-size: 0.85rem; }

  .step-rows {
    grid-template-columns: minmax(2.4em, auto) minmax(4.8em, auto) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    font-size: 0.85rem;
  }
  .cell-arrow { font-size: 0.78rem; }
  .step-cell .diff-highlight { padding: 3px 8px; }

  .lbl-full { display: inline; }
  .lbl-short { display: none; }

  .flavor-icon { width: 16px; height: 16px; }
  .condition-icon { width: 15px; height: 15px; margin-right: 5px; }

  .flow-split-badge { font-size: 0.85rem; padding: 8px 16px; }
  .flow-insight { font-size: 0.92rem; }
  .v-badge { font-size: 0.85rem; padding: 11px 13px; }

  .result-table { font-size: 0.9rem; }
  .result-table td { padding: 11px 0; }
  .result-table td.pct { font-size: 1rem; }
}

@media (min-width: 600px) {
  .flow-branches { gap: 16px; }
  .flow-validity { flex-direction: row; }
  .v-badge { flex: 1; }
}

/* ---------- outcome funnel (cohort narrowing + conversion map) ---------- */
.outcome-funnel {
  margin: 20px 0 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 16px;
}
.funnel-stage-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
}
.funnel-stage-icon { width: 18px; height: 18px; color: var(--ink); flex-shrink: 0; }
.funnel-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}
a.funnel-stage-name {
  font-family: Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a.funnel-stage-name:hover { border-bottom-color: var(--teal); }
.funnel-stage-task {
  font-size: 0.78rem;
  color: var(--muted);
  flex-basis: 100%;
  margin-left: 30px;
}
.funnel-stage-count {
  margin-left: auto;
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.funnel-stage-count span { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; font-size: 0.68rem; color: var(--muted); margin-left: 3px; }
.funnel-bar-track {
  height: 12px;
  background: rgba(30, 27, 22, 0.07);
  border-radius: 999px;
  margin: 0 0 0 30px;
  overflow: hidden;
}
.funnel-bar-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
}
.funnel-connector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 14px 30px;
  flex-wrap: wrap;
}
.funnel-connector svg { width: 13px; height: 13px; color: rgba(30, 27, 22, 0.32); flex-shrink: 0; }
.funnel-rate { font-size: 0.74rem; font-weight: 700; color: var(--teal); white-space: nowrap; }
.funnel-drop { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.funnel-drop::before { content: "\00b7"; margin-right: 6px; color: rgba(30, 27, 22, 0.3); }
.funnel-close {
  margin: 4px 0 0 30px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.5;
}
.funnel-close b { color: var(--terracotta); }

.funnel-substep-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0 30px;
  padding: 2px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--teal);
  cursor: pointer;
}
.funnel-substep-toggle:hover { text-decoration: underline; }
.funnel-substep-toggle svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform 0.2s ease; }
.funnel-substep-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.funnel-substeps {
  margin: 10px 0 0 30px;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.funnel-substeps[hidden] { display: none; }
.funnel-substep { display: flex; align-items: flex-start; gap: 9px; }
.funnel-substep-icon { width: 17px; height: 17px; color: var(--ink); flex-shrink: 0; margin-top: 1px; }
.funnel-substep-label { font-size: 0.78rem; line-height: 1.45; color: rgba(30, 27, 22, 0.85); }
.funnel-substep-label b { color: var(--ink); }

@media (max-width: 520px) {
  .funnel-substep-toggle, .funnel-substeps { margin-left: 0; }
}

@media (max-width: 520px) {
  .funnel-stage-task { margin-left: 0; flex-basis: 100%; }
  .funnel-bar-track { margin-left: 0; margin-top: 6px; }
  .funnel-connector { margin-left: 0; }
  .funnel-close { margin-left: 0; }
  .funnel-stage-count { margin-left: 0; }
}

@media (min-width: 480px) {
  .outcome-funnel { padding: 24px 22px; }
  a.funnel-stage-name { font-size: 1rem; }
  .funnel-stage-task { font-size: 0.82rem; }
  .funnel-close { font-size: 0.92rem; }
}

/* ---------- chain stepper (roadmap chain with a missing link, one line) ---------- */
.chain-stepper-wrap { margin: 16px 0 6px; }
.chain-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}
.chain-stepper::-webkit-scrollbar { display: none; }
.chain-pill {
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 5px 11px;
}
.chain-pill.gap {
  border: 1.5px dashed var(--mustard);
  background: rgba(224, 169, 58, 0.16);
  color: var(--terracotta);
}
.chain-sep { color: var(--muted); flex-shrink: 0; font-size: 0.72rem; margin: 0 5px; }

@media (min-width: 700px) {
  .chain-pill { font-size: 0.88rem; padding: 8px 18px; }
  .chain-sep { font-size: 0.85rem; margin: 0 11px; }
}

/* ---------- thesis callout (the report's hero message, top and close) ---------- */
.thesis-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--terracotta);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 18px 0;
}
.thesis-icon { width: 28px; height: 28px; color: var(--ink); flex-shrink: 0; margin-top: 2px; }
.thesis-callout h4 { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; margin: 0 0 8px; }
.thesis-callout p { font-size: 0.86rem; line-height: 1.55; color: rgba(27, 30, 36, 0.85); margin: 0 0 9px; }
.thesis-callout p:last-child { margin-bottom: 0; }
.thesis-callout p b { color: var(--ink); }

@media (min-width: 480px) {
  .thesis-callout h4 { font-size: 1.08rem; }
  .thesis-callout p { font-size: 0.9rem; }
}

.study-card .citation { font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; }
.study-card .citation a { color: var(--terracotta); text-decoration: underline; }
.study-card .journal { font-size: 0.78rem; color: var(--muted); margin-bottom: 10px; }

.method-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 600px) { .method-grid { grid-template-columns: 1fr 1fr; } }

.method-col { font-size: 0.82rem; }
.method-col .lbl { display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.method-col.strength .lbl { color: var(--teal); }
.method-col.weakness .lbl { color: var(--terracotta); }

.excerpts { margin-top: 12px; }
.excerpts .lbl { display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }

.excerpt { font-size: 0.85rem; padding: 9px 11px; background: var(--paper); border-radius: 8px; margin-bottom: 7px; }
.excerpt:last-child { margin-bottom: 0; }
.excerpt.quoted { border-left: 3px solid var(--teal); }
.excerpt.paraphrase { border-left: 3px solid var(--line); }
.excerpt .tag { display: block; font-size: 0.65rem; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

.also-note { margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.also-note b { color: var(--ink); }

.bg-terracotta { background: var(--terracotta); }
.bg-mustard { background: var(--mustard); color: var(--ink); }
.bg-teal { background: var(--teal); }
.bg-ink { background: var(--ink); }

/* ---------- special report ---------- */
.report {
  padding: 40px 0 44px;
  scroll-margin-top: 136px;
  background: var(--teal);
  color: var(--paper);
}

.report .eyebrow {
  display: inline-flex;
  color: var(--ink);
  background: var(--mustard);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.report h2 { font-size: clamp(1.5rem, 7vw, 2.3rem); margin: 0 0 14px; max-width: 20ch; color: var(--paper); }
.report .lede { font-size: 0.97rem; color: rgba(245, 246, 245, 0.82); max-width: 62ch; margin: 0 0 30px; }
.report .lede b { color: var(--mustard); }

.report-section { margin-top: 40px; scroll-margin-top: 136px; padding-top: 32px; border-top: 2px solid rgba(245, 246, 245, 0.22); }
.report-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.report-section h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--paper); }
.report-section .intro { font-size: 0.92rem; color: rgba(245, 246, 245, 0.78); max-width: 64ch; margin: 0 0 18px; }

.case-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.case-card {
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-left: 5px solid var(--mustard);
  border-radius: 4px 12px 12px 4px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.case-tag {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--paper);
  margin-bottom: 9px;
}

.case-card h4 { font-size: 1rem; margin-bottom: 6px; }
.case-card .case-body p { margin: 0 0 8px; font-size: 0.87rem; color: rgba(27, 30, 36, 0.85); }
.case-card .case-body p.lesson { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); margin-bottom: 0; }
.case-card .lesson b { color: var(--terracotta); }
.case-card .case-cite { font-size: 0.76rem; color: var(--muted); margin-top: 10px; }
.case-card .case-cite a { color: var(--terracotta); text-decoration: underline; }

@media (min-width: 700px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) {
  .report { padding: 52px 0 60px; }
  .report-section { margin-top: 40px; padding-top: 32px; }
}

/* ---------- evidence-strength ladder (evidence-strength.html) ---------- */
.evidence-ladder {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin-bottom: 18px;
}

.evidence-ladder .rung { padding: 18px 0; }
.evidence-ladder .rung + .rung { border-top: 1px dashed var(--line); }

.evidence-ladder .rung-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.evidence-ladder .rung-head-left { display: flex; align-items: center; gap: 10px; }
.evidence-ladder .rung-icon { width: 30px; height: 30px; flex: none; color: var(--ink); }
.evidence-ladder .rung-name { font-family: Georgia, serif; font-weight: 700; font-size: 1.02rem; }

.evidence-ladder .rung-strength {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.evidence-ladder .rung-bar-track {
  background: rgba(27, 30, 36, 0.08);
  border-radius: 999px;
  height: 10px;
  margin: 0 0 12px;
  overflow: hidden;
}

.evidence-ladder .rung-bar { height: 100%; border-radius: 999px; }
.evidence-ladder .rung.tier-1 .rung-bar { background: var(--terracotta); width: 96%; }
.evidence-ladder .rung.tier-2 .rung-bar { background: var(--mustard); width: 72%; }
.evidence-ladder .rung.tier-3 .rung-bar { background: var(--teal); width: 46%; }
.evidence-ladder .rung.tier-4 .rung-bar { background: rgba(27, 30, 36, 0.35); width: 20%; }

.evidence-ladder .rung-claim { font-size: 0.9rem; margin: 0 0 8px; color: rgba(27, 30, 36, 0.88); }
.evidence-ladder .rung-examples { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 0; }

/* ---------- strength spectrum: a horizontal at-a-glance strip that sits
   above the vertical evidence-ladder cards, using the same 4 tier colors so
   the two visuals read as one system rather than two competing ones. ---------- */
.strength-spectrum { margin: 4px 0 24px; }
.spectrum-endpoints { display: flex; justify-content: space-between; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.spectrum-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.spectrum-seg { height: 12px; border-radius: 999px; }
.spectrum-seg.tier-4 { background: rgba(27, 30, 36, 0.25); }
.spectrum-seg.tier-3 { background: var(--teal); }
.spectrum-seg.tier-2 { background: var(--mustard); }
.spectrum-seg.tier-1 { background: var(--terracotta); }
.spectrum-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.spectrum-label { text-align: center; font-size: 0.72rem; }
.spectrum-label b { display: block; font-family: Georgia, serif; font-size: 0.78rem; margin-bottom: 2px; }
.spectrum-label span { color: var(--muted); font-size: 0.68rem; }

/* ---------- rung subtypes: 2-3 real named variants nested under each rung
   of the evidence ladder, so "natural experiment" etc. isn't left as one
   flat category. ---------- */
.rung-subtypes { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.subtype b { display: block; font-size: 0.8rem; margin-bottom: 2px; color: var(--ink); }
.subtype span { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

@media (min-width: 640px) {
  .rung-subtypes.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .rung-subtypes.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- source fidelity ranking: a ranked list of named studies (not
   methodology tiers), borrowing the evidence-ladder's bar-track visual
   convention (a filled horizontal bar signalling relative strength) applied
   per named source instead of per category. ---------- */
.source-fidelity {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
}
.source-fidelity .fid-row { padding: 16px 0; display: flex; gap: 14px; align-items: flex-start; }
.source-fidelity .fid-row + .fid-row { border-top: 1px dashed var(--line); }
.source-fidelity .fid-rank {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 0.92rem;
  color: var(--terracotta);
}
.source-fidelity .fid-body { flex: 1; min-width: 0; }
.source-fidelity .fid-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-bottom: 6px; }
.source-fidelity .fid-name { font-family: Georgia, serif; font-weight: 700; font-size: 0.98rem; }
.source-fidelity .fid-tag {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}
.source-fidelity .fid-bar-track {
  background: rgba(27, 30, 36, 0.08);
  border-radius: 999px;
  height: 8px;
  margin: 0 0 10px;
  overflow: hidden;
}
.source-fidelity .fid-bar { height: 100%; border-radius: 999px; background: var(--terracotta); }
.source-fidelity .fid-why { font-size: 0.88rem; margin: 0; color: rgba(27, 30, 36, 0.88); line-height: 1.5; }

@media (min-width: 640px) {
  .source-fidelity .fid-rank { width: 34px; height: 34px; font-size: 1rem; }
}

/* ---------- pattern-compare: side-by-side mini device mockups comparing two
   named UX patterns, used in a special report's own header/toc-intro area.
   Visual system #19 (see VISUAL-SYSTEMS.md). Distinct from #10's
   .app-mock-phone (a single hero mockup inside an experiment/session
   article body): this is always a pair, always inside the report header,
   and both columns share the same numbered content blocks so the reader
   can see it's the identical form under two different rules, not two
   different forms. Built clamp()-first so the pair stays side by side at
   every width down to a real phone screen, never stacking. ---------- */
.pattern-compare { display: flex; gap: clamp(8px, 3vw, 24px); flex-wrap: nowrap; justify-content: center; margin: 22px 0 4px; }
.pattern-compare-col { flex: 1 1 0; min-width: 0; max-width: 240px; text-align: center; }
.pattern-compare-label { font-size: clamp(10px, 2.4vw, 12px); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: clamp(6px, 2vw, 10px); }
.pattern-compare-label.flow { color: var(--terracotta); }
.pattern-compare-label.load { color: var(--teal); }
.pattern-phone-wrap { position: relative; padding: 0 clamp(6px, 2vw, 10px) clamp(6px, 2vw, 10px) 0; }
.pattern-phone-ghost { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: clamp(12px, 4vw, 20px); background: rgba(27, 30, 36, 0.04); transform: translate(clamp(4px, 1.4vw, 7px), clamp(4px, 1.4vw, 7px)); opacity: 0.6; }
.pattern-phone { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: clamp(12px, 4vw, 20px); padding: clamp(7px, 2.5vw, 13px) clamp(6px, 2vw, 11px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.pattern-screen { background: var(--paper); border-radius: 9px; padding: clamp(8px, 3vw, 13px) clamp(6px, 2.2vw, 11px); min-height: clamp(170px, 44vw, 240px); display: flex; flex-direction: column; }
.pattern-step-label { font-size: clamp(8.5px, 2.3vw, 11px); color: var(--muted); margin-bottom: clamp(5px, 1.6vw, 8px); display: flex; align-items: center; gap: 5px; }
.pattern-step-badge { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--terracotta); color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pattern-bar-track { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: clamp(9px, 3vw, 14px); }
.pattern-bar-fill { height: 100%; background: var(--terracotta); border-radius: 999px; }
.pattern-field { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; height: clamp(16px, 5vw, 30px); margin-bottom: clamp(6px, 1.8vw, 9px); flex-shrink: 0; }
.pattern-cta { margin-top: auto; background: var(--terracotta); color: #fff; border-radius: 6px; height: clamp(20px, 5vw, 30px); display: flex; align-items: center; justify-content: center; font-size: clamp(8px, 1.9vw, 10.5px); font-weight: 700; letter-spacing: 0.03em; }
.pattern-load-wrap { position: relative; flex: 1; overflow: hidden; }
.pattern-load-block { display: flex; align-items: flex-start; gap: 6px; margin-bottom: clamp(8px, 2.4vw, 12px); }
.pattern-load-num { flex-shrink: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal); font-size: 7.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; background: var(--paper); }
.pattern-load-fields { flex: 1; display: flex; flex-direction: column; gap: clamp(4px, 1.4vw, 6px); min-width: 0; }
.pattern-load-fields .pattern-field { margin-bottom: 0; }
.pattern-load-fade { position: absolute; bottom: 0; left: 0; right: 0; height: clamp(34px, 11vw, 52px); background: linear-gradient(to bottom, transparent, var(--paper)); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.pattern-scroll-chevron { color: var(--teal); font-size: clamp(11px, 2.8vw, 15px); font-weight: 700; line-height: 1; }
.pattern-caption { font-size: clamp(10px, 2.4vw, 11.5px); color: var(--muted); line-height: 1.5; margin: clamp(7px, 2.2vw, 11px) 0 0; text-align: left; }
.pattern-caption .icon { display: inline-block; width: 13px; text-align: center; font-weight: 700; }
.pattern-caption.flow .icon { color: var(--terracotta); }
.pattern-caption.load .icon { color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .pattern-scroll-chevron { animation: pattern-bounce 1.6s ease-in-out infinite; }
}
@keyframes pattern-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- hallmarks: short phrase-pattern callouts, and the four-question
   checklist that closes the evidence-ladder section. ---------- */
.hallmark-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .hallmark-list { grid-template-columns: 1fr 1fr; } }
.hallmark-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.hallmark-item .phrase { font-family: Georgia, serif; font-style: italic; font-size: 0.92rem; color: var(--ink); margin: 0 0 6px; }
.hallmark-item .note { font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.45; }

.questions-callout {
  background: var(--card);
  border-left: 5px solid var(--terracotta);
  border-radius: 4px 12px 12px 4px;
  padding: 20px 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin-top: 6px;
}
.questions-callout h4 { font-family: Georgia, serif; font-size: 1.02rem; margin: 0 0 14px; }
.questions-callout ol { margin: 0; padding-left: 20px; }
.questions-callout li { margin-bottom: 12px; font-size: 0.88rem; }
.questions-callout li:last-child { margin-bottom: 0; }
.questions-callout li b { display: block; font-family: Georgia, serif; font-style: italic; color: var(--ink); margin-bottom: 3px; }
.questions-callout li span { color: var(--muted); font-size: 0.83rem; line-height: 1.5; }

/* ---------- report-light: a quieter alternative to the site's default
   solid-teal .report band, used on the 3 special-report pages that sit
   outside the site's regular content types (evidence-strength,
   policy-based-evidence, dont-say-the-e-word). Left as a modifier class
   rather than changed on .report itself, since every other .report section
   site-wide (reading-the-research, experiments) keeps the original teal. A
   plain color swap to a paper-toned background would blend straight into
   the page around it, so this pairs the lighter fill with a terracotta
   top/bottom rule that still reads as "a distinct zone" without a full
   dark color block. ---------- */
.report.report-light {
  background: var(--nav-menu-bg);
  color: var(--ink);
  border-top: 5px solid var(--terracotta);
  border-bottom: 5px solid var(--terracotta);
}
.report.report-light .report-section { border-top-color: rgba(27, 30, 36, 0.14); }
.report.report-light .report-section h3 { color: var(--ink); }
.report.report-light .report-section .intro { color: rgba(27, 30, 36, 0.78); }

/* ---------- story stack: a chunked, icon-led "story so far" that sits in
   the hero band before the full report, on the same 3 pages as
   .report-light above. Icons follow the site's small-icon convention
   (24-36px, ink stroke, one terracotta/mustard/teal accent), chained the
   way sessions.html's live-demo flow diagram chains steps, adapted into a
   short summary rather than a full teardown. ---------- */
.story-stack-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  color: var(--muted); margin: 26px 0 10px;
}
.story-stack {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.story-stack-item { display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start; }
.story-stack-item + .story-stack-item { border-top: 1px dashed var(--line); }
.story-stack-icon { width: 32px; height: 32px; flex: none; color: var(--ink); margin-top: 2px; }
.story-stack-item h4 { font-family: Georgia, serif; font-size: 0.96rem; margin: 0 0 4px; color: var(--ink); }
.story-stack-item p { font-size: 0.83rem; color: var(--muted); margin: 0; line-height: 1.5; }

@media (min-width: 640px) {
  .story-stack-item { padding: 18px 22px; }
}

/* ---------- field map: the classical economics / psychology / behavioural
   economics / behavioural science / UX & product design relationship
   diagram on nobody-owns-a-bias.html. Harmonised with sessions.html's own
   "Where Behavioural Economics Actually Sits" chart: classical economics
   and psychology are drawn as two neutral endpoints of one axis, with
   behavioural economics (terracotta) sitting between them, exactly like
   that chart's own colour coding. Below that axis, a vertical trunk shows
   the separate, sequential applied chain: behavioural economics feeds
   behavioural science (mustard), which feeds UX & product design (teal).
   This is two different relationships (a trade-off axis, then a one-way
   chain), not five equal peers, so it deliberately isn't drawn as a single
   flat row. ---------- */
.field-map { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px 20px; margin: 24px 0 4px; }
.field-map-axis-label { text-align: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.field-map-axis { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
@media (min-width: 560px) { .field-map-axis { flex-direction: row; align-items: flex-start; gap: 4px; } }
.field-map-node { flex: 1; text-align: center; padding: 6px 4px; border-top: 1px dashed var(--line); }
.field-map-axis .field-map-node:first-child { border-top: none; }
@media (min-width: 560px) {
  .field-map-node { border-top: none; border-left: 1px dashed var(--line); }
  .field-map-node:first-child { border-left: none; }
  .field-map-node.order-1 { order: 1; }
  .field-map-node.order-2 { order: 2; }
  .field-map-node.order-3 { order: 3; }
}
.field-map-node .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-bottom: 6px; }
.field-map-node h4 { font-family: Georgia, serif; font-size: 0.92rem; margin: 0 0 3px; }
.field-map-node p { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.4; }
.field-map-node.accent h4 { color: var(--terracotta); }
.field-map-trunk-wrap { display: flex; flex-direction: column; align-items: center; }
.field-map-trunk { width: 1px; height: 22px; background: var(--line); }
.field-map-chain { display: flex; flex-direction: column; align-items: center; width: 100%; }
.field-map-chain-node { text-align: center; padding: 4px 12px; max-width: 320px; }
.field-map-chain-node .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-bottom: 6px; }
.field-map-chain-node h4 { font-family: Georgia, serif; font-size: 0.92rem; margin: 0 0 3px; }
.field-map-chain-node h4.mustard { color: var(--mustard); }
.field-map-chain-node h4.teal { color: var(--teal); }
.field-map-chain-node p { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.4; }
.field-map-note { text-align: center; font-family: Georgia, serif; font-style: italic; font-size: 0.85rem; color: var(--ink); margin: 16px 0 0; border-top: 1px dashed var(--line); padding-top: 12px; }

/* ---------- field note tag: a generic small pill reused as the eyebrow
   tag on experiment blueprints ("Experiment blueprint") and field
   sessions ("A session recap, not a study"). Not tied to any one
   section wrapper. ---------- */
.field-note-tag {
  display: inline-block;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
  background: var(--line); color: var(--muted);
  margin-bottom: 14px;
}

/* ---------- explore hub: the single consolidated destination grid that
   replaced four separate teaser sections (Science Behind, Reports,
   Experiments, and the old "More to explore"). Icon chips reuse
   .tile-icon-chip from the persona picker verbatim, so this doesn't
   introduce a new icon treatment alongside the site's existing ones. ---------- */
.explore-hub { padding: 28px 0; border-top: 1px solid var(--line); }
.explore-hub-title { font-family: Georgia, serif; font-size: 1.25rem; margin: 0 0 6px; }
.explore-hub-sub { font-size: 0.85rem; color: var(--muted); margin: 0 0 16px; max-width: 52ch; }

.explore-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.explore-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 8px 16px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.explore-hub-card:hover { border-color: var(--terracotta); }

.explore-hub-text { display: flex; flex-direction: column; gap: 2px; }
.explore-hub-name { font-family: Georgia, serif; font-weight: 700; font-size: 0.86rem; line-height: 1.25; }
.explore-hub-count { font-size: 0.72rem; color: var(--muted); }

@media (min-width: 640px) {
  .explore-hub { padding: 40px 0; border-top: none; }
  .explore-hub-title { font-size: 1.7rem; margin-bottom: 8px; }
  .explore-hub-sub { font-size: 0.95rem; margin-bottom: 28px; }
  .explore-hub-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .explore-hub-card { flex-direction: row; text-align: left; align-items: center; gap: 14px; padding: 20px 18px; border-radius: 14px; }
  .explore-hub-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); transform: translateY(-2px); }
  .explore-hub-card .tile-icon-chip { flex-shrink: 0; }
  .explore-hub-name { font-size: 0.98rem; }
}

/* ---------- inline newsletter (compact, sits right after the hero so
   signing up doesn't require scrolling past all 36 principles to reach
   the full version at the very bottom of the page) ---------- */
.newsletter-inline { padding: 20px 0 8px; }

.newsletter-inline-row {
  padding: 20px 22px;
  background: rgba(196, 62, 31, 0.055);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newsletter-inline-text { max-width: 48ch; }

.newsletter-inline-heading { display: flex; align-items: center; gap: 9px; }
.newsletter-icon { width: 19px; height: 19px; color: var(--terracotta); flex-shrink: 0; }
.newsletter-inline-heading strong { font-size: 1rem; }

.newsletter-inline-points {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-inline-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.newsletter-inline-points li b { color: var(--ink); font-weight: 700; }

.newsletter-point-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ink);
}

@media (min-width: 640px) {
  .newsletter-inline-row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.newsletter-inline-form {
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; flex-shrink: 0;
}
.newsletter-inline-form input {
  font-family: inherit; font-size: 0.92rem; padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.newsletter-inline-form button {
  font-family: inherit; font-size: 0.92rem; font-weight: 700; padding: 11px 14px; border-radius: 8px;
  border: none; background: var(--terracotta); color: var(--paper); cursor: pointer;
}
.newsletter-inline-form button:hover { background: var(--terracotta-dim); }

@media (min-width: 640px) {
  .newsletter-inline-form { width: 320px; }
}

/* ---------- newsletter ---------- */
.newsletter { background: var(--ink); color: var(--paper); padding: 36px 0; }
.newsletter .wrap { max-width: 540px; text-align: center; }
.newsletter h2 { font-size: clamp(1.3rem, 6vw, 2rem); }
.newsletter p { color: rgba(245, 246, 245, 0.68); margin: 8px 0 18px; font-size: 0.9rem; }
.newsletter .fine { font-size: 0.76rem; color: rgba(245, 246, 245, 0.5); margin: 14px 0 0; }

.newsletter-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; }
.newsletter-form input {
  font-family: inherit; font-size: 0.95rem; padding: 12px 16px; border-radius: 8px;
  border: 1px solid rgba(245, 246, 245, 0.25); background: var(--paper); color: var(--ink);
}
.newsletter-form button {
  font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 12px 16px; border-radius: 8px;
  border: none; background: var(--terracotta); color: var(--paper); cursor: pointer;
}
.newsletter-form button:hover { background: var(--terracotta-dim); }

@media (min-width: 480px) {
  .newsletter-form { flex-direction: row; max-width: 420px; }
  .newsletter-form input { flex: 1; }
}

@media (min-width: 640px) {
  .newsletter { padding: 48px 0; }
}

/* ---------- field sessions page ---------- */
.session-toc { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.session-toc a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.session-toc a:hover { border-color: var(--terracotta); }
.session-toc a:hover .session-toc-title { color: var(--terracotta); }

.session-toc-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); transition: color 0.15s ease; }
.session-toc-meta { font-size: 0.8rem; color: var(--muted); }

/* icon-led row variant — the row's icon is always the entry's own hero
   icon reused, never a new one, so the same object is recognisable in
   every list it appears in (see science-behind-article skill) */
.session-toc a.has-icon { flex-direction: row; align-items: center; gap: 12px; }
.session-toc-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--paper-alt, rgba(30, 27, 22, 0.05));
  color: var(--ink);
}
.session-toc-icon svg { width: 26px; height: 26px; }
.session-toc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (min-width: 640px) {
  .session-toc { flex-direction: row; flex-wrap: wrap; }
  .session-toc li { flex: 1 1 260px; }
  .session-toc a { height: 100%; }
}

.session-upcoming-label { display: block; margin: 22px 0 8px; }

.session-toc-upcoming li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
}

.session-toc-upcoming .session-toc-title { font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.session-toc-upcoming .session-toc-meta { font-size: 0.8rem; color: var(--muted); }

@media (min-width: 640px) {
  .session-toc-upcoming { flex-direction: row; flex-wrap: wrap; }
  .session-toc-upcoming li { flex: 1 1 260px; }
}

.session { padding: 8px 0 48px; scroll-margin-top: 136px; }
.session .field-note-tag { margin-right: 8px; }
.session > .wrap > .case-tag {
  display: inline-block;
  margin-bottom: 14px;
  background: none;
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
}
.session h2 { font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 400; margin: 4px 0 8px; max-width: 24ch; }
.session-meta { font-size: 0.85rem; color: var(--muted); margin: 0 0 20px; }

.session-headline { display: flex; align-items: flex-start; gap: 12px; }
.session-headline-icon {
  width: clamp(20px, 5vw, 26px);
  height: clamp(20px, 5vw, 26px);
  color: var(--terracotta);
  flex-shrink: 0;
  margin-top: 6px;
}
.session-headline-text { flex: 1; min-width: 0; }

.session .salient-question.lg {
  display: inline-block;
  border-bottom: 1.5px solid var(--teal);
  padding-bottom: 6px;
}
.session .salient-question mark { background: rgba(224, 169, 58, 0.35); }
.session .session-panel > p, .session .rail-content > p { font-size: 0.95rem; color: rgba(27, 30, 36, 0.85); max-width: 68ch; margin: 0 0 18px; }
.session .case-grid { margin: 24px 0; }

.session-quote {
  margin: 28px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--terracotta);
  background: var(--card);
  border-radius: 4px 12px 12px 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  max-width: 62ch;
}

.session .also-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.85rem; }

.session-demo { margin: 22px 0 28px; }
.session-demo .flow-diagram { background: var(--card); }
.session-demo .also-note { margin-top: 12px; padding-top: 0; border-top: none; }

.case-icon { width: 24px; height: 24px; color: var(--ink); margin-bottom: 8px; }

.session-trio { margin: 30px 0; }
.session-trio h3 { font-size: 1.1rem; margin: 0 0 4px; }
.session-trio .trio-sub { font-size: 0.85rem; color: var(--muted); max-width: 56ch; margin: 0 0 16px; }
.session-trio .also-note { margin-top: 14px; padding-top: 0; border-top: none; }
.trio-card .case-body p { margin-bottom: 0; }

/* condensed panels: these cards carry only an icon, a tag, and a title —
   no body copy — so the full-size card padding built for the "why it
   landed" paragraph just leaves empty space. Tighten everything and go
   2-up even on the narrowest phones, so density matches content. */
.condensed-trio { grid-template-columns: repeat(2, 1fr); gap: 8px; }

.condensed-trio .trio-card {
  padding: 10px 12px;
  border-left-width: 3px;
  border-radius: 3px 8px 8px 3px;
}

.condensed-trio .case-icon { width: 18px; height: 18px; margin-bottom: 5px; }
.condensed-trio .case-tag { font-size: 0.56rem; padding: 2px 6px; margin-bottom: 5px; letter-spacing: 0.04em; }
.condensed-trio h4 { font-size: 0.82rem; margin-bottom: 0; line-height: 1.25; }

@media (min-width: 640px) {
  .session { padding: 16px 0 72px; }
  .session-quote { padding: 22px 26px; font-size: 1.15rem; }
  .session-demo { margin: 30px 0 36px; }
  .session-trio { margin: 40px 0; }
  .trio-grid { grid-template-columns: repeat(3, 1fr); }
  .condensed-trio .trio-card { padding: 12px 14px; }
  .condensed-trio h4 { font-size: 0.88rem; }
}

/* session view toggle (Full / Condensed / In your banking app / In-app messages) */
.session-toggle { flex-wrap: wrap; margin: 4px 0 22px; }

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

/* ---------- session photo collage ---------- */
.session-collage-wrap { margin: 22px 0 4px; }

.session-collage {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 210px;
  gap: 8px;
}

.session-collage .photo-cell {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: var(--line);
}

.session-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }

.session-photo { filter: none; }

.session-collage-wrap .caption { margin-top: 10px; text-align: center; }

@media (min-width: 640px) {
  .session-collage-wrap { margin: 30px 0 6px; }
  .session-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 190px);
    grid-template-areas:
      "hero hero podium podium"
      "env traps screen screen";
    gap: 10px;
  }
  .area-hero { grid-area: hero; }
  .area-podium { grid-area: podium; }
  .area-env { grid-area: env; }
  .area-traps { grid-area: traps; }
  .area-screen { grid-area: screen; }
}

/* ---------- numbered steps ("in your banking app" panel) ---------- */
.flow-step.numbered .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---------- app message mockups ("in-app messages" panel) ---------- */
.app-mock-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 20px 0 6px; }

.app-mock-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 12px;
  text-align: center;
}

.app-mock-phone {
  max-width: 260px;
  margin: 0 auto;
  border: 8px solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 12px 30px rgba(27, 30, 36, 0.18);
}

.app-mock-print {
  max-width: 260px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-left: 10px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 12px 30px rgba(27, 30, 36, 0.18);
}
.app-mock-print-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: 2px;
}

.app-mock-screen { padding: 22px 18px 20px; text-align: left; }
.app-mock-icon { width: 30px; height: 30px; margin-bottom: 12px; }
.app-mock-screen h4 { font-size: 1.02rem; margin: 0 0 8px; }
.app-mock-screen p { font-size: 0.82rem; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }

.app-mock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.app-chip {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}

.app-chip.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.app-mock-progress { margin: 0 0 14px; }
.app-mock-progress-label { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.app-mock-progress-track { height: 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.app-mock-progress-fill { height: 100%; background: var(--terracotta); border-radius: 999px; }

.app-mock-callout {
  margin: 6px 0 14px;
  padding: 9px 11px;
  background: var(--paper);
  border-left: 3px solid var(--terracotta);
  border-radius: 4px 8px 8px 4px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(27, 30, 36, 0.82);
}
.app-mock-callout b { color: var(--ink); }

.app-mock-microcopy { font-size: 0.78rem; color: var(--ink); margin: 0 0 6px; line-height: 1.4; font-weight: 600; }
.app-mock-why { font-size: 0.72rem; color: var(--muted); font-style: italic; margin: 0 0 12px; line-height: 1.4; }

.context-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.context-toggle-btn {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.context-toggle-btn.active { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); }

.app-cta {
  display: block;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 9px;
  background: var(--terracotta);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.app-cta:hover { background: var(--terracotta-dim); }

.app-skip {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}

.app-mock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(27, 30, 36, 0.1);
}

.app-mock-banner-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); }
.app-mock-banner-text { font-size: 0.78rem; flex: 1; line-height: 1.35; }
.app-mock-banner-cta { font-size: 0.76rem; font-weight: 700; color: var(--terracotta); text-decoration: none; flex-shrink: 0; cursor: default; }

.app-mock-note {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  max-width: 340px;
  margin: 12px auto 0;
}

@media (min-width: 700px) {
  .app-mock-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- doc/ticket-style mock (non-phone applied panels) ---------- */
.doc-mock {
  max-width: 460px;
  margin: 22px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  /* tighter on mobile — inside .rail-content, every horizontal pixel here
     is coming straight out of the checklist text column (see
     .doc-mock-list li below); widens back out once there's room to spare */
  padding: 16px 14px;
  box-shadow: 0 8px 22px rgba(27, 30, 36, 0.1);
}
@media (min-width: 480px) {
  .doc-mock { padding: 20px 22px; }
}

.doc-mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.doc-mock-icon { width: 22px; height: 22px; color: var(--ink); flex-shrink: 0; }

.doc-mock-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-mock-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 0.85rem; color: rgba(27, 30, 36, 0.85); line-height: 1.4; }
/* the tag ("Primary:" / "Guardrail:" / …) and its description are wrapped
   in one <span> so they form a single flex item (any element child of a
   flex container becomes its own flex item, so an unwrapped <b> sits
   beside the following text in the row instead of above it) — the tag
   sits on its own line via a <br> in the markup, and the description below
   it gets the wrapper's full width instead of being squeezed by a label
   eating part of the first line. */
.doc-mock-list li > span:last-child { min-width: 0; }

.doc-mock-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 5px;
  background: var(--teal);
  color: var(--paper);
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 480px) {
  .doc-mock-list li { gap: 9px; }
  .doc-mock-check { width: 18px; height: 18px; font-size: 0.7rem; }
}

.doc-mock + .app-mock-note { max-width: 460px; }

/* ---------- digital & product experiments page ---------- */
.experiment { padding: 8px 0 48px; scroll-margin-top: 136px; border-top: 1px solid var(--line); }
.experiment .field-note-tag { margin-right: 8px; }
.experiment > .wrap > .case-tag { display: inline-block; margin-bottom: 14px; }
.experiment h2 { font-size: clamp(1.4rem, 6vw, 2rem); margin: 4px 0 8px; max-width: 26ch; }
.experiment .also-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.85rem; }
.experiment h3 { font-size: 1.05rem; margin: 30px 0 4px; }
.experiment > .wrap > p.exp-lede { font-size: 0.95rem; color: rgba(27, 30, 36, 0.85); max-width: 68ch; margin: 0 0 6px; }

.exp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }

.exp-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

.exp-tag.industry { border-color: var(--terracotta); color: var(--terracotta-dim); background: rgba(196, 62, 31, 0.06); }
.exp-tag.applies { color: var(--muted); }
.exp-tag.status { background: var(--line); color: var(--muted); border-color: transparent; }

.experiment .article-block { max-width: 68ch; }
.experiment .article-block:first-of-type { margin-top: 22px; }

/* control-vs-treatment comparison: reuses .app-mock-grid, with a 3-up
   variant for designs that need a second treatment arm alongside control */
.app-mock-grid.cols-3 { gap: 22px; }
@media (min-width: 900px) {
  .app-mock-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- power calc (sample size the experiment would need) ---------- */
.power-calc {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 68ch;
}

.power-calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 14px;
  margin-top: 12px;
}

.power-stat .stat-lbl {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 3px;
}

.power-stat .stat-val { font-family: Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.power-stat .stat-val small { font-family: -apple-system, sans-serif; font-size: 0.6rem; font-weight: 700; color: var(--muted); display: block; margin-top: 1px; }
.power-stat.accent .stat-val { color: var(--terracotta); }

.power-calc-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}
.power-calc-note b { color: var(--ink); }

@media (min-width: 560px) {
  .power-calc-grid { grid-template-columns: repeat(4, 1fr); }
  .power-stat .stat-val { font-size: 1.45rem; }
}

.experiment .doc-mock { margin: 18px 0 0; max-width: 68ch; }
.experiment .doc-mock + .app-mock-note { margin: 10px 0 0; text-align: left; max-width: 68ch; }

@media (min-width: 640px) {
  .experiment { padding: 16px 0 72px; }
}

/* ---------- section rail (wayfinding nav for long articles: Experiments
   and Field Sessions' full write-ups).

   At 640px and up the rail is a vertical dot-column beside the content,
   living inside its own internally-scrolling frame (.rail-scroll).
   Sticky only engages against a real scrolling ancestor, and the page
   itself isn't reliably that ancestor: viewed through the Claude
   Artifact preview, the outer viewer stretches the page to its full
   content height and scrolls its own outer window instead, so a rail
   sticky to the document never sees any scroll to react to and just
   sits inert. Giving the rail its own overflow-y:auto box sidesteps
   that entirely — the nav sticks to a container that is guaranteed to
   actually scroll, in the preview and once deployed alike.

   Below 640px the rail is a horizontal chip strip pinned to the top of
   the content instead of a side column — a persistent vertical sidebar
   was eating into the content column's width on exactly the screens
   that have the least width to spare. Real mobile use surfaced a second
   problem with reusing the same internal-scroll-box trick here: on a
   phone the box is nearly the full screen height, so a touch-scroll
   gesture starting almost anywhere gets captured by the box's own
   scrollport instead of the page — the whole page never moves, only the
   content trapped inside the box does. Mobile therefore skips the box
   entirely and lets .rail-scroll sit in normal document flow, so any
   touch-scroll simply scrolls the real page, the way a reader expects.
   The Artifact-preview problem this box existed to dodge doesn't apply
   on mobile screens anyway (that preview issue is a desktop authoring
   concern), so there's no real scroll-reliability to trade away. */
.rail-layout { margin: 22px 0 0; }
.rail-scroll {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  align-items: start;
  padding: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
@media (min-width: 640px) {
  .rail-scroll {
    grid-template-columns: 128px 1fr; grid-template-rows: none; gap: 22px; padding: 22px 26px 26px;
    /* Tall enough that the box reads as "the page," not a small window
       onto it — 100dvh minus roughly the sticky site-nav's height,
       floored so it never gets cramped on a short screen and capped so
       it doesn't turn into an oversized void on a tall desktop monitor. */
    height: calc(100dvh - 96px);
    min-height: 460px;
    max-height: 880px;
    overflow-y: auto;
    /* Without an explicit overflow-x, the CSS spec silently converts it
       to auto too (the "visible becomes auto when the other axis isn't
       visible" rule) — the box becomes horizontally scrollable even
       though nothing here is meant to scroll sideways, and on touch
       that reads as a left/right swipe nudging the whole rail. Lock
       both the paint and the gesture to vertical only. */
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
@media (min-width: 900px) {
  .rail-scroll { grid-template-columns: 148px 1fr; gap: 32px; }
}

.rail-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 8px;
  /* NOT sticky below 640px, on purpose (regression fixed here after it
     shipped once): .rail-scroll is normal document flow on mobile (see
     above), which means a sticky rail-nav has no bounded ancestor to
     "let go" of. It stayed pinned at top:96px for the entire length of
     the section, permanently overlapping the article's own body copy
     scrolling underneath its opaque background, one line clipped, then
     the next, for as long as the reader kept scrolling. Real-device
     screenshots caught this reading as body text randomly truncating
     mid-sentence right at the strip's top and bottom edges. Position:
     sticky only overlays correctly when it can become un-stuck once its
     bounded container ends; without that container here, plain static
     flow (the strip appears once, then scrolls away like normal
     content) is the only mobile fix that doesn't reintroduce the
     touch-scroll-capture bug .rail-scroll's box was already removed to
     fix (see the comment above). */
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
@media (min-width: 640px) {
  /* Back inside .rail-scroll's own internal scrollport here, so top:0
     is relative to that bounded box, not the unbounded page — sticky is
     safe here because the box's own height (see .rail-scroll above) is
     what lets the nav "run out" of room to stay stuck against, instead
     of trailing the reader indefinitely. */
  .rail-nav { flex-direction: column; flex-wrap: nowrap; gap: 0; padding-top: 2px; border-bottom: none; position: sticky; top: 0; z-index: 2; }
}
.rail-content { min-width: 0; padding: 14px 16px 0; }
@media (min-width: 640px) {
  .rail-content { padding: 0; }
}

.rail-step {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 32px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  transition: border-color 0.2s ease, background 0.2s ease;
}
@media (min-width: 640px) {
  .rail-step { flex: initial; align-items: flex-start; gap: 7px; min-height: 34px; padding: 0; border-radius: 0; border: none; background: none; }
}
.rail-dot-col { display: flex; flex-direction: row; align-items: center; }
@media (min-width: 640px) {
  .rail-dot-col { flex-direction: column; }
}
.rail-dot { width: 8px; height: 8px; margin-top: 0; border-radius: 50%; background: var(--line); border: 1.5px solid var(--line); flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease; }
@media (min-width: 640px) {
  .rail-dot { margin-top: 4px; }
}
.rail-line { display: none; }
@media (min-width: 640px) {
  .rail-line { display: block; width: 2px; flex: 1; min-height: 12px; background: var(--line); transition: background 0.2s ease; }
  .rail-step:last-child .rail-line { display: none; }
}

.rail-label {
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, font-weight 0.2s ease;
}
@media (min-width: 640px) {
  .rail-label { font-size: 0.75rem; white-space: normal; }
}
.rail-label:hover { color: var(--terracotta); }
.rail-step.active { border-color: var(--terracotta); background: rgba(196, 62, 31, 0.08); }
@media (min-width: 640px) {
  .rail-step.active { border-color: transparent; background: none; }
}
.rail-step.active .rail-dot { background: var(--terracotta); border-color: var(--terracotta); }
.rail-step.active .rail-label { color: var(--terracotta); font-weight: 800; }
.rail-step.done .rail-dot { background: var(--teal); border-color: var(--teal); }
.rail-step.done .rail-line { background: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .rail-dot, .rail-line, .rail-label, .rail-step { transition: none; }
  .rail-scroll { scroll-behavior: auto; }
}

/* ---------- session diagrams: positioning plot + trend chart ---------- */
.be-chart-wrap, .trend-chart-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px 14px;
  margin: 18px 0 24px;
}
.be-chart-svg, .trend-chart-svg { width: 100%; height: auto; display: block; }
.be-chart-axis-label { font-size: 8.5px; fill: var(--muted); font-family: inherit; }
.be-chart-point-label { font-size: 9px; fill: var(--ink); font-family: inherit; font-weight: 700; }
.be-chart-point-sub { font-size: 7.6px; fill: var(--muted); font-family: inherit; }
.be-chart-callout-text { font-size: 8px; fill: var(--ink); font-family: inherit; line-height: 1.4; }
.be-chart-footnote { font-size: 7.6px; fill: var(--muted); font-family: inherit; font-style: italic; }
.trend-chart-tag { font-size: 8.6px; fill: var(--muted); font-family: inherit; }
.trend-chart-date { font-size: 7.6px; fill: var(--muted); font-family: inherit; }
.trend-chart-badge-text { font-size: 8.6px; fill: var(--ink); font-family: inherit; font-weight: 700; }

/* ---------- homepage search band: a standalone search moment right after
   the hero, for a visitor who already knows what they want and scrolled
   past the pitch. Kept alongside the hero-adjacent nav search and the
   .journey section's own inline search, not a replacement for either. ---------- */
.search-band {
  padding: 22px 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.search-band-label {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 3px;
}
.search-band-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 14px;
}
.search-band .principles-search-cta { max-width: 420px; margin: 0 auto; }

@media (min-width: 640px) {
  .search-band { padding: 34px 0; }
  .search-band-label { font-size: 1.3rem; }
  .search-band-sub { font-size: 0.92rem; }
}

/* ---------- illustrated beats (homepage narrative teaser: principles / reports / experiments) ---------- */
.beats-teaser { padding: 30px 0; }

.beats-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 16px;
}

.beats-row {
  display: flex;
  flex-direction: column;
}

.beats-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.beats-card:first-child { border-top: none; }

.beats-icon { display: block; flex: 0 0 auto; width: 26px; height: 26px; color: var(--ink); margin-top: 1px; }

.beats-card-text h3 { font-family: Georgia, serif; font-size: 0.9rem; margin: 0 0 2px; }
.beats-card-text p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

.beats-close { text-align: center; padding-top: 16px; }
.beats-close p { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.beats-cta {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--terracotta);
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 44px;
  line-height: 24px;
}

@media (min-width: 640px) {
  .beats-row { flex-direction: row; gap: 18px; }
  .beats-card {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
  }
  .beats-icon { width: 34px; height: 34px; margin-top: 0; margin-bottom: 10px; }
  .beats-card-text h3 { font-size: 1rem; margin-bottom: 5px; }
  .beats-card-text p { font-size: 0.86rem; line-height: 1.45; }
}

/* ---------- apply-it page (adaptive principle/problem to experiment tool) ---------- */
.apply-tool { padding: 8px 0 48px; }

.apply-qdots { display: flex; gap: 6px; margin-bottom: 20px; }
.apply-qdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: width 0.15s ease, background 0.15s ease; }
.apply-qdot.active { background: var(--terracotta); width: 20px; border-radius: 4px; }
.apply-qdot.done { background: var(--mustard); }

.apply-card[hidden] { display: none; }

.apply-back {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  display: inline-block;
}
.apply-back:hover { color: var(--terracotta); }

.apply-qtext {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.3;
}

.apply-doorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; }
@media (max-width: 560px) { .apply-doorgrid { grid-template-columns: 1fr; } }

.apply-door {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.apply-door:hover, .apply-door:focus-visible { border-color: var(--terracotta); }
.apply-door b { display: block; font-family: Georgia, serif; font-size: 1.05rem; margin-bottom: 5px; }
.apply-door span { font-size: 0.86rem; color: var(--muted); }

.apply-field { margin-bottom: 16px; max-width: 560px; }
.apply-field label { display: block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 6px; }
.apply-field textarea, .apply-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.94rem;
  padding: 10px 12px;
  resize: vertical;
  min-height: 44px;
}
.apply-field textarea:focus, .apply-field input:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.apply-autotext {
  width: 100%;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.apply-autotext.filled { color: var(--ink); border-style: solid; background: var(--card); }
.apply-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
@media (max-width: 560px) { .apply-2col { grid-template-columns: 1fr; } }

.apply-hint { font-size: 0.84rem; color: var(--muted); margin: 0 0 12px; }

.apply-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; max-width: 720px; }
.apply-chiprow-scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; }

.apply-chip {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}
.apply-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; }
.apply-chip.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.apply-chip.selected .dot { background: var(--mustard); }

.apply-checklist { max-width: 640px; margin-bottom: 18px; }
.apply-checklist-group { margin-bottom: 18px; }
.apply-checklist-group:last-child { margin-bottom: 0; }
.apply-checklist-lbl { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--terracotta); margin-bottom: 8px; }
.apply-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.apply-check-item:last-child { margin-bottom: 0; }
.apply-check-item:hover, .apply-check-item:focus-visible { border-color: var(--terracotta); }
.apply-check-item .box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  margin-top: 1px;
  position: relative;
  background: var(--paper);
}
.apply-check-item.selected { border-color: var(--ink); }
.apply-check-item.selected .box { background: var(--terracotta); border-color: var(--terracotta); }
.apply-check-item.selected .box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.apply-btn {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 11px 18px;
  cursor: pointer;
  min-height: 44px;
  text-decoration: none;
  display: inline-block;
}
.apply-btn.primary { background: var(--terracotta); border-color: var(--terracotta); color: var(--paper); }
.apply-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.apply-brief {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 720px;
}
.apply-brief h4 { font-family: Georgia, serif; font-size: 1.2rem; margin: 0 0 12px; }
.apply-brief-row { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.apply-brief-row:first-of-type { border-top: none; }
.apply-brief-row b { flex: 0 0 140px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.apply-brief-row span { flex: 1; font-size: 0.92rem; }
.apply-brief-row a { color: var(--terracotta); font-weight: 700; text-decoration: none; }
.apply-brief-row a:hover { text-decoration: underline; }
.apply-brief-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- footer ---------- */
footer { padding: 18px 0 max(18px, env(safe-area-inset-bottom)); font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-direction: column; gap: 12px; }
footer ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--terracotta); }

@media (min-width: 640px) {
  footer .wrap { flex-direction: row; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .practice-item { transition: none; }
}

/* ---------- the science behind page ---------- */
.sb-entry { padding: 8px 0 34px; scroll-margin-top: 136px; }

.sb-head { display: flex; flex-direction: row; align-items: center; gap: 14px; margin-bottom: 6px; }

.sb-hero-icon-wrap {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-hero-icon { width: 50px; height: 50px; color: var(--ink); }
@media (min-width: 600px) {
  .sb-hero-icon-wrap { width: 96px; height: 96px; border-radius: 18px; }
  .sb-hero-icon { width: 68px; height: 68px; }
}

.sb-head-text { flex: 1; min-width: 0; }
.sb-head-text h2 { font-family: Georgia, serif; font-size: 1.2rem; line-height: 1.3; margin: 0 0 8px; text-wrap: balance; }
@media (min-width: 600px) { .sb-head-text h2 { font-size: 1.5rem; } }

.sb-lead { font-size: 1rem; color: var(--ink); line-height: 1.55; margin: 0 0 16px; max-width: 66ch; }

.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.sb-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--card);
}
.sb-tag.domain { color: var(--ink); border-color: var(--ink); }
.sb-tag.signal { color: var(--terracotta); border-color: var(--terracotta); }

.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.sb-chip:hover { border-color: var(--terracotta); color: var(--terracotta); }

.sb-block { margin: 0 0 22px; display: flow-root; }
.sb-block .k { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--terracotta); margin-bottom: 6px; }
.sb-block p { font-size: 0.94rem; line-height: 1.62; margin: 0; max-width: 68ch; }
.sb-block p + p { margin-top: 12px; }
.sb-block a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.sb-block a:hover { text-decoration-color: var(--terracotta); }

.sb-screenshot { float: right; margin: 0 0 12px 20px; max-width: 200px; text-align: center; }
.sb-screenshot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(27, 30, 36, 0.12); }
.sb-screenshot span { display: block; font-size: 0.72rem; color: var(--muted); font-style: italic; margin-top: 8px; line-height: 1.4; }
@media (max-width: 560px) { .sb-screenshot { float: none; margin: 14px auto; max-width: 240px; } }

.sb-split { margin: 28px 0 26px; }
.sb-split-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.sb-split-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (min-width: 600px) { .sb-split-grid { grid-template-columns: 1fr 1fr; } }
.sb-split-col { background: var(--card); padding: 16px 18px; }
.sb-split-col.real { border-top: 3px solid var(--teal); }
.sb-split-col.perceived { border-top: 3px solid var(--terracotta); }
.sb-split-col-lbl { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; margin-bottom: 10px; }
.sb-split-col.real .sb-split-col-lbl { color: var(--teal); }
.sb-split-col.perceived .sb-split-col-lbl { color: var(--terracotta); }
.sb-split-col ul { margin: 0; padding-left: 18px; font-size: 0.86rem; line-height: 1.6; }
.sb-split-col li { margin-bottom: 8px; }
.sb-split-col li:last-child { margin-bottom: 0; }
.sb-split-col a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }

.sb-sources, .sb-brands { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.sb-sources .lbl, .sb-brands .lbl { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.sb-sources p, .sb-brands p { font-size: 0.84rem; color: var(--muted); line-height: 1.6; margin: 0 0 6px; }
.sb-sources a, .sb-brands a { color: var(--terracotta); font-weight: 600; text-decoration: none; }
.sb-sources a:hover, .sb-brands a:hover { text-decoration: underline; }
.sb-brands-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .sb-brands-list { grid-template-columns: repeat(3, 1fr); } }
.sb-brand-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.sb-brand-card b { display: block; font-size: 0.88rem; margin-bottom: 3px; }
.sb-brand-card span { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.sb-brand-card a { font-size: 0.78rem; }
.sb-brand-note { font-size: 0.76rem; color: var(--muted); margin-top: 10px; font-style: italic; }

/* secondary filter axis (signal type), sits beneath the primary domain
   toc-tabs; same chip visual language, kept in its own labeled row rather
   than merged into one tab set, so the two axes stay visibly distinct */
.sb-subhead-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin: 0 0 8px; }
.sb-signal-tabs { margin-top: -6px; }

/* ---------- Live Sessions (illustrative interactive sessions, run with
   a real audience) ---------- */
.live-hero { padding: 32px 0 8px; }
.live-hero-intro { font-size: 0.98rem; color: var(--muted); line-height: 1.6; margin: 8px 0 0; max-width: 62ch; }
.live-session-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; margin: 28px 0; }
.live-session-eyebrow { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta); font-weight: 700; margin-bottom: 8px; }
.live-session-card h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; margin: 0 0 6px; }
.live-session-dek { font-size: 0.95rem; color: var(--muted); margin: 0 0 16px; max-width: 60ch; }
.live-session-card .mechanism-note { margin-bottom: 0; }

/* collapsed by default, matching principles.html's own accordion pattern —
   eyebrow, title, one-line dek and the mechanism-note stay visible; the
   full write-up, try-it links, and how-it-works steps only take up real
   space once clicked open. */
.live-session-details summary.live-session-summary {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
  padding-right: 32px;
}
.live-session-summary::-webkit-details-marker { display: none; }
.live-session-summary::marker { content: ""; }
.live-session-summary:hover h2 { color: var(--terracotta); }
.live-session-chev {
  position: absolute;
  top: 2px;
  right: 0;
  color: var(--terracotta);
  font-size: 1.3rem;
  transition: transform 0.2s ease;
}
.live-session-details[open] .live-session-chev { transform: rotate(90deg); }
.live-session-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.live-session-card p.body-text { font-size: 0.92rem; line-height: 1.65; margin: 0 0 14px; max-width: 62ch; }
.live-try-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.live-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; padding: 11px 18px; border-radius: 10px; text-decoration: none; }
.live-btn.primary { background: var(--ink); color: var(--paper); }
.live-btn.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.live-btn.reveal { background: transparent; color: var(--terracotta); border: 1.5px solid var(--terracotta); }
.live-try-note { font-size: 0.78rem; color: var(--muted); margin: 4px 0 0; }
.scenario-quicklinks { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; padding: 12px 14px; background: var(--paper-alt, var(--card)); border: 1px solid var(--line); border-radius: 10px; }
.scenario-quicklink { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; }
.scenario-quicklink .sq-title { color: var(--ink); }
.scenario-quicklink .sq-links { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.sq-linkpair { display: inline-flex; align-items: center; gap: 4px; }
.scenario-quicklink .sq-links a { font-size: 0.76rem; font-weight: 700; color: var(--terracotta); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
.sq-copy { font-size: 0.68rem; font-weight: 700; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; cursor: pointer; font-family: inherit; }
.sq-copy[data-copied="true"] { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.live-howitworks { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.live-howitworks h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px; color: var(--ink); }
.live-howitworks ol { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.6; color: var(--muted); }
.live-howitworks li { margin-bottom: 8px; }
.live-howitworks li b { color: var(--ink); }
.live-session-links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.live-session-links a { color: var(--terracotta); font-weight: 600; }
.live-more { margin: 36px 0 8px; padding: 18px 20px; background: var(--paper-alt, var(--card)); border-radius: 12px; border: 1px dashed var(--line); font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.live-more b { color: var(--ink); }

/* ---------- Interactive coin-flip widgets (the-coin-has-no-memory.html) ---------- */
.coin-widget { margin: 18px 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.coin-widget-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta); font-weight: 700; margin-bottom: 12px; }
.coin-widget-prompt { margin: 0 0 12px; font-size: 0.92rem; color: var(--ink); }
.coin-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.coin-btn { background: var(--terracotta); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 0.85rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.coin-btn:hover { opacity: 0.9; }
.coin-btn:disabled { opacity: 0.45; cursor: default; }
.coin-btn.secondary { background: none; border: 1.5px solid var(--line); color: var(--ink); }
.coin-btn.secondary.picked { border-color: var(--terracotta); color: var(--terracotta); }
.coin-visual-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.coin-face { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #E7BE5E, #C48A25); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); flex-shrink: 0; }
.coin-face.small { width: 26px; height: 26px; font-size: 0.72rem; border-width: 1.5px; }
.coin-face.flipping { animation: coinSpin 0.45s linear; }
@keyframes coinSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(1080deg); } }
.coin-seq-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.coin-stat-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
.coin-stat { font-size: 0.82rem; color: var(--muted); }
.coin-stat b { display: block; font-family: Georgia, serif; font-size: 1.15rem; color: var(--ink); font-weight: 700; }
.coin-readout { font-size: 0.88rem; color: var(--ink); margin: 0 0 6px; }
.coin-readout b { color: var(--terracotta); }
.coin-verdict { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.coin-verdict b.sig { color: var(--terracotta); }
.coin-verdict b.notsig { color: var(--teal); }
.coin-tally { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
.coin-track-wrap { margin-bottom: 6px; }
.coin-track-label { font-size: 0.75rem; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.coin-track { position: relative; height: 26px; background: var(--paper-alt, #EBECEC); border-radius: 13px; margin-bottom: 4px; }
.coin-track-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.coin-track-dot { position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--terracotta); border: 2px solid var(--card); transform: translateX(-50%); }
.coin-track-dot.group-b { background: var(--teal); }
.coin-track-range { font-size: 0.78rem; color: var(--muted); }