/* ============================================================
   Inkwell — marketing site
   Shared stylesheet for index / pricing / privacy / terms
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  --ink:        #0b1220;   /* near-black, footer + primary buttons */
  --ink-soft:   #1a2233;   /* dark panel */
  --text:       #1c2433;   /* body text on light */
  --text-muted: #5b6472;   /* secondary text */
  --text-faint: #8b93a1;   /* tertiary / labels */
  --line:       #e6e8ec;   /* hairline borders */
  --card:       #ffffff;
  --bg:         #ffffff;
  --bg-tint:    #f7f8f9;   /* alt section background */
  --bg-sage:    #eef2ec;   /* soft green band (testimonials) */
  --on-dark:    #e8eaef;   /* text on dark footer */
  --on-dark-mut:#9aa3b2;

  --hero-1: #e8f0f4;       /* hero gradient stops */
  --hero-2: #f4f1ec;
  --hero-3: #eef3ec;

  --gold:      #b07c12;   /* matches existing quest/challenge reward accents */
  --gold-soft: #c79a3c;
  --parchment: #f6ead8;   /* personal / aside / disclosure contexts */
  --good:      #3f7a4f;
  --warn:      #a3791f;
  --bad:       #b3402f;

  --maxw: 1180px;
  --radius: 14px;
  --radius-lg: 20px;

  --font-display: "Cinzel", Georgia, serif;
  --font-serif:   "Lora", Georgia, serif;
  --font-sans:    "Alegreya Sans", system-ui, -apple-system, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: 88px; }
.section--tint { background: var(--bg-tint); }
.section--sage { background: var(--bg-sage); }
.center { text-align: center; }

/* ---- Type ---- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
h1.display { font-size: clamp(3rem, 6vw, 5rem); }
h2.display { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3.display { font-size: 1.5rem; }

.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--text-muted);
  margin: 18px auto 0;
  max-width: 620px;
  text-wrap: pretty;
}
.lede + .lede { margin-top: 10px; }
.lede--accent { color: var(--text); font-weight: 500; }
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-faint);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .01em;
  padding: 13px 26px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(11,18,32,.22); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn--block { width: 100%; }
.btn--disabled { background: var(--bg-tint); color: var(--text-faint); cursor: not-allowed; border-color: var(--line); }

/* Inkling CTA — black border normally, cycling gradient glow on hover */
.btn--gradient {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--gradient:hover {
  border-color: transparent;
  transform: translateY(-2px);
  animation: glow-cycle 2.6s linear infinite;
}
@keyframes glow-cycle {
  0%   { box-shadow: 0 0 0 1.5px #2563eb, 0 0 10px 3px rgba(37,99,235,.55), 0 0 26px 10px rgba(37,99,235,.28); }
  25%  { box-shadow: 0 0 0 1.5px #06b6d4, 0 0 13px 4px rgba(6,182,212,.65),  0 0 30px 12px rgba(6,182,212,.32); }
  50%  { box-shadow: 0 0 0 1.5px #059669, 0 0 13px 4px rgba(5,150,105,.65),  0 0 30px 12px rgba(5,150,105,.32); }
  75%  { box-shadow: 0 0 0 1.5px #06b6d4, 0 0 13px 4px rgba(6,182,212,.65),  0 0 30px 12px rgba(6,182,212,.32); }
  100% { box-shadow: 0 0 0 1.5px #2563eb, 0 0 10px 3px rgba(37,99,235,.55), 0 0 26px 10px rgba(37,99,235,.28); }
}

/* Start Your Story nav CTA — matches the challenge reward pill's gold */
.btn--gold {
  background: linear-gradient(180deg, #fbe7a8, #f3cf7a);
  border: 1.5px solid #e7c878;
  color: #5b4715;
}
.btn--gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(196,148,41,.55);
}

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
/* Slightly smaller nav buttons */
.site-header .btn--primary, .site-header .btn--gold { font-size: .88rem; padding: 9px 18px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 42px; width: auto; display: block; }
.site-footer .brand img { height: 40px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a.navlink { font-size: .98rem; color: var(--text-muted); }
.nav a.navlink:hover { color: var(--ink); }

/* Learn dropdown. The menu is display:none by default and revealed by the
   data-open attribute, so a page with no JavaScript simply shows the Learn
   link pointing at the hub. */
.navdrop { position: relative; display: flex; align-items: center; }
.navdrop__trigger { display: inline-flex; align-items: center; gap: 5px; }
.navdrop__chev { width: 13px; height: 13px; flex: none; transition: transform .18s ease; }
.navdrop[data-open="true"] .navdrop__chev { transform: rotate(180deg); }
.navdrop[data-open="true"] .navdrop__trigger { color: var(--ink); }
.navdrop__menu {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%); min-width: 216px; z-index: 60;
  flex-direction: column; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 38px -20px rgba(11, 18, 32, .34);
}
.navdrop[data-open="true"] .navdrop__menu { display: flex; }
/* Bridges the gap under the trigger so the menu survives the cursor crossing it. */
.navdrop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.navdrop__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-family: var(--font-sans); font-size: .95rem; color: var(--text);
}
.navdrop__menu a:hover { background: var(--bg-tint); color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: none; padding: 6px; margin: 0;
  color: var(--ink); cursor: pointer; border-radius: 6px;
}
.nav-toggle svg { width: 24px; height: 24px; display: block; }

.mobile-nav {
  display: none; flex-direction: column;
  position: fixed; top: 72px; left: 0; right: 0; z-index: 49;
  background: #fff; border-top: 1px solid var(--line);
  padding: 6px 24px 12px;
  box-shadow: 0 16px 30px -18px rgba(11, 18, 32, .3);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 14px 0; font-family: var(--font-sans); font-size: 1.02rem;
  color: var(--text); border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.mobile-nav__sub { padding-left: 18px; font-size: .96rem; color: var(--text-muted); }

/* ---- Hero ---- */
.hero {
  position: relative;
  text-align: center;
  background:
    radial-gradient(1200px 420px at 18% 0%, var(--hero-1), transparent 60%),
    radial-gradient(1000px 460px at 85% 12%, var(--hero-3), transparent 62%),
    linear-gradient(180deg, var(--hero-2), #ffffff 78%);
}
/* Homepage hero — tall, full-bleed behind transparent header */
.hero--home {
  min-height: 540px;
  padding: 150px 0 64px; /* trimmed so the next section peeks above the fold */
}
/* Tame the home headline so the hero reads less stacked */
.hero--home h1.display { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
/* Pricing/other page heroes — compact, still clears fixed header */
.hero--page {
  padding: calc(72px + 72px) 0 72px;
}
.hero .cta-row { margin-top: 76px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* rotating hero subhead */
.hero-sub-wrap {
  position: relative;
  height: 3.4rem;
  margin: 14px auto 0;
  max-width: 720px;
}
.hero-sub {
  position: absolute;
  width: 100%;
  left: 0; top: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .55s ease;
  line-height: 1.4;
  white-space: nowrap;
}
.hero-sub.active { opacity: 1; }
.hero-sub .word-display {   /* FOCUS: Spectral */
  font-family: 'Spectral', Georgia, serif;
  font-style: normal;
  font-size: 1.1em;
  font-weight: 400;
  color: var(--ink);
}
.hero-sub .word-uncial {   /* WORLD: Cinzel Decorative */
  font-family: 'Cinzel Decorative', serif;
  font-weight: 400;
  font-size: .88em;
  letter-spacing: .04em;
  color: var(--ink);
}
.hero-sub .word-script {   /* story: Allura script */
  font-family: 'Allura', cursive;
  font-size: 1.25em;
  line-height: 1;
  vertical-align: 0.06em;
  color: var(--ink);
}

/* hero callout — pulls the "blank page to Chapter One" promise into its own card */
.hero-callout {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 44px auto 0;
  max-width: 560px;
  padding: 15px 22px;
  text-align: left;
  background: rgba(255, 255, 255, .68);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, .35);
  backdrop-filter: saturate(140%) blur(6px);
}
.hero-callout__icon {
  flex: none;
  width: 26px; height: 26px;
  color: var(--ink);
}
.hero-callout p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
}

/* typewriter */
.tw-wrap { display: inline-block; }
.tw { color: var(--ink); }
.tw-cursor {
  display: inline-block;
  width: 3px; height: 1em;
  background: var(--ink);
  margin-left: 4px;
  transform: translateY(4px);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- Editor preview ---- */
.preview-shell {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(11,18,32,.28);
  overflow: hidden;
}
.preview-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.preview-tab {
  font-size: .82rem; color: var(--text-muted);
  padding: 6px 12px; border-radius: 8px; background: var(--bg-tint);
}
.preview-tab--active { background: var(--ink); color: #fff; }
.preview-body { padding: 26px clamp(20px, 5vw, 64px); }
.preview-body .doc-meta { font-family: var(--font-sans); color: var(--text-faint); font-size: .8rem; display:flex; gap:18px; justify-content:flex-end; margin-bottom: 18px; }
.preview-body p { font-family: var(--font-serif); color: var(--text); margin: 0 0 14px; }
.preview-body .chapter { font-family: var(--font-sans); font-size:.8rem; color: var(--text-faint); margin-bottom: 20px; }

/* ---- Interactive feature explorer (left list / right stage) ---- */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  margin-top: 52px;
  text-align: left;
  align-items: stretch;
}
.fs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fs-item {
  display: flex; gap: 16px; align-items: flex-start;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  padding: 18px 20px;
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.fs-item:hover { background: rgba(11, 18, 32, .03); }
.fs-item.is-active { background: #fff; border-left-color: var(--ink); box-shadow: 0 14px 34px -26px rgba(11, 18, 32, .35); }
.fs-num {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; color: var(--text-faint); padding-top: 3px;
  transition: color .2s ease;
}
.fs-item.is-active .fs-num { color: var(--ink); }
.fs-text { display: flex; flex-direction: column; gap: 5px; }
.fs-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.fs-desc {
  font-family: var(--font-serif); font-size: .96rem; color: var(--text-muted);
  line-height: 1.5;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.fs-item.is-active .fs-desc { max-height: 8rem; opacity: 1; }

.fs-stage { position: relative; min-height: 380px; }
.fs-panel { position: absolute; inset: 0; }
.fs-panel[hidden] { display: none; }
.fs-placeholder {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(620px 280px at 30% 0%, var(--hero-1), transparent 70%),
    linear-gradient(180deg, #fff, var(--bg-tint));
  box-shadow: 0 30px 60px -36px rgba(11, 18, 32, .3);
}
.fs-placeholder__label { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.fs-placeholder__note { font-family: var(--font-sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }

/* ---- Start Your Story challenge graphic ---- */
.challenge {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 30px 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -36px rgba(11, 18, 32, .3);
  text-align: left;
}
.challenge__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.challenge__eyebrow {
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; font-weight: 700; color: var(--text-faint);
}
.challenge__reward {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem; color: var(--text-muted);
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
  transition: background .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.challenge__reward svg { width: 18px; height: 18px; flex: none; transition: color .5s ease; }
.challenge__reward-wrap { display: flex; justify-content: center; margin-top: 34px; }
/* reward chip stays gray, then lights up amber once the bar finishes filling */
.challenge.is-filled .challenge__reward {
  background: linear-gradient(180deg, #fbe7a8, #f3cf7a);
  border-color: #e7c878; color: #5b4715;
  box-shadow: 0 0 0 4px rgba(243, 207, 122, .35), 0 12px 26px -10px rgba(196, 148, 41, .7);
  animation: rewardPop .6s ease both;
}
.challenge.is-filled .challenge__reward svg { color: #b07c12; }
@keyframes rewardPop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.07); } }

.challenge__progress { position: relative; margin: 4px 8px 0; }
.challenge__track { position: relative; height: 8px; border-radius: 999px; background: var(--line); }
.challenge__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #06b6d4, #059669);
  transition: width 6s linear;
}
.challenge.in-view .challenge__fill { width: 100%; }

/* typewriter that chugs along the bar as it fills */
.challenge__type {
  position: absolute; left: 0; bottom: calc(100% + 7px); transform: translateX(-50%);
  color: #0f766e; z-index: 3; transition: left 6s linear;
}
.challenge__type svg { width: 23px; height: 23px; display: block; }
.challenge.in-view .challenge__type { left: 100%; }
.challenge.in-view .challenge__type svg { animation: chug .4s steps(2, end) 15; }
@keyframes chug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

.challenge__dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 14px; height: 14px; border-radius: 999px;
  background: #fff; border: 2px solid #c2cad6; box-shadow: 0 2px 6px rgba(11, 18, 32, .12);
  transition: border-color .35s ease var(--d, 0s), background .35s ease var(--d, 0s);
}
.challenge.in-view .challenge__dot { border-color: #059669; }
.challenge.in-view .challenge__dot--goal { background: #059669; }

.challenge__milestones { position: relative; height: 48px; margin-top: 24px; }
.challenge__ms { position: absolute; top: 0; transform: translateX(-50%); width: 120px; text-align: center; }
.challenge__ms--start { left: 0; transform: none; width: 80px; text-align: left; }
.challenge__ms--goal { transform: translateX(-100%); text-align: right; }
.challenge__ms b {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--ink); transform-origin: center bottom;
}
.challenge__ms--start b { transform-origin: left bottom; }
.challenge__ms--goal b { transform-origin: right bottom; }
.challenge.in-view .challenge__ms b { color: #059669; }
/* each number pops as the typewriter reaches it (delay set inline via --d) */
.challenge.in-view .challenge__ms:not(.challenge__ms--start) b { animation: msPop .55s ease var(--d, 0s) both; }
@keyframes msPop {
  0%   { transform: scale(1);    color: var(--ink); text-shadow: none; }
  35%  { transform: scale(1.38); color: #059669; text-shadow: 0 0 14px rgba(5, 150, 105, .45); }
  100% { transform: scale(1);    color: #059669; text-shadow: none; }
}
.challenge__ms--start b { color: var(--text-faint); }
.challenge.in-view .challenge__ms--start b { color: var(--text-muted); }
.challenge__ms i { display: block; font-style: normal; font-family: var(--font-serif); font-size: .76rem; line-height: 1.3; color: var(--text-muted); margin-top: 5px; }

.challenge__stats { display: flex; gap: 34px; flex: none; }
.challenge__stat { text-align: center; }
.challenge__stat strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.challenge__stat span { font-family: var(--font-sans); font-size: .78rem; color: var(--text-muted); margin-top: 5px; display: block; }

/* heroic intro lines above the challenge graphic */
.quest-hed {
  font-family: 'Cinzel Decorative', var(--font-display);
  font-weight: 700; font-size: clamp(1rem, 2.3vw, 1.5rem);
  color: var(--ink); line-height: 1.3; white-space: nowrap; margin: 26px 0 22px;
  text-wrap: pretty;
}
.quest-sub { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text-muted); margin: 0; text-wrap: pretty; }

/* the four challenge pillars, pulled out as numbered cards above the graphic */
.quest { list-style: none; margin: 30px auto 0; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quest__item {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 16px; box-shadow: 0 14px 30px -26px rgba(11, 18, 32, .4);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.quest__item:hover { transform: translateY(-5px); box-shadow: 0 22px 38px -16px rgba(214, 164, 58, .55); border-color: #e7c878; }
.quest__num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: #c79a3c; }
.quest__item > span:last-child { font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: var(--ink); line-height: 1.32; text-wrap: pretty; }

/* ---- Feature grid ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 52px; text-align: left; }
.compass-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; text-align: left; }
/* Homepage-only wrapper for the live Synopsis demo borrowed from the Compass page */
.compass-demo { max-width: 560px; margin: 44px auto 0; text-align: left; }
.compass-mark { width: 58px; height: 58px; margin: 0 auto 20px; display: block; color: var(--gold); }
.compass-grid .feature {
  background: var(--card);
  transition: transform .18s ease, box-shadow .35s ease, border-color .35s ease;
}
.compass-grid .feature:hover {
  border-color: rgba(199, 154, 60, .55);
  box-shadow:
    0 0 0 1px rgba(199, 154, 60, .4),
    0 0 16px 1px rgba(176, 124, 18, .5),
    0 0 42px 6px rgba(176, 124, 18, .32),
    0 14px 30px -20px rgba(11, 18, 32, .3);
}
.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(11,18,32,.3); }
.feature .ico { width: 26px; height: 26px; color: var(--ink); margin-bottom: 14px; }
.feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0 0 8px; color: var(--ink); }
.feature p { margin: 0; color: var(--text-muted); font-size: .98rem; }

/* ---- How it works (Start Your Story) ---- */
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.hiw-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 26px; text-align: center;
}
.hiw-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--gold);
  margin-bottom: 12px;
}
.hiw-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 12px; color: var(--ink); }
.hiw-card p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 900px) { .hiw-grid { grid-template-columns: 1fr; } }

/* ---- Steps (start in seconds) ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }

/* Reassurance strip beneath the steps (distinct from the pricing page's .trust-row) */
.steps-trust {
  list-style: none; margin: 40px auto 0; padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: center; gap: 14px 34px;
}
.steps-trust li {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: .93rem; color: var(--text-muted);
  white-space: nowrap;
}
.steps-trust svg { width: 17px; height: 17px; flex: none; color: var(--gold); opacity: .85; }
@media (max-width: 700px) {
  .steps-trust { grid-template-columns: repeat(2, auto); gap: 12px 24px; }
}
@media (max-width: 560px) {
  .steps-trust { grid-template-columns: max-content; justify-items: start; gap: 10px; }
  .steps-trust li { font-size: .88rem; white-space: normal; }
}
.step {
  text-align: center; padding: 8px;
  opacity: .4;
  transition: opacity 1.1s ease;
}
.step.lit { opacity: 1; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: #d7dbe2; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  margin-bottom: 16px;
  transition: background 1.1s ease;
}
.step.lit .step-num {
  background: var(--ink);
  animation: step-glow 2s ease-in-out;
}
/* a soft, slow breath of light — no abrupt pop */
@keyframes step-glow {
  0%   { transform: scale(.98); box-shadow: 0 0 0 0 rgba(11,18,32,0); }
  50%  { transform: scale(1.03); box-shadow: 0 0 0 9px rgba(11,18,32,.07); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(11,18,32,0); }
}
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); margin: 0 0 8px; }
.step p { margin: 0 auto; color: var(--text-muted); font-size: .98rem; max-width: 300px; }

/* ---- Testimonials ---- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(11,18,32,.32); }
/* Decorative mark sits behind the text as a watermark so it costs no vertical space */
.quote .mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4rem;
  color: #c8cdd6;
  line-height: 1;
  position: absolute; top: 4px; right: 14px;
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.quote p {
  font-family: var(--font-serif); font-style: italic; color: var(--text); margin: 0;
  font-size: .95rem; line-height: 1.6;
  position: relative;
}

/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 28px auto 0; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem; color: var(--ink);
  padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-q .chev { transition: transform .2s ease; flex: none; }
.faq-item[open] .faq-q .chev { transform: rotate(180deg); }
.faq-a { padding: 0 18px 14px; color: var(--text-muted); font-family: var(--font-serif); font-size: .95rem; line-height: 1.6; text-wrap: pretty; }

/* ---- Pricing ---- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; align-items: start; }
.tier {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tier:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -26px rgba(11,18,32,.34); }
.tier--featured { border-color: var(--ink); border-width: 2px; box-shadow: 0 24px 50px -28px rgba(11,18,32,.4); }
.tier__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-family: var(--font-sans); font-weight: 700;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.tier__badge--soon { background: #fff; color: var(--text-faint); border: 1px solid var(--line); }
.tier__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: 0; }
.tier__tag { font-family: var(--font-serif); color: var(--text-muted); margin: 8px 0 18px; min-height: 2.8em; }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: 3rem; color: var(--ink); line-height: 1; }
.tier__price span { font-family: var(--font-sans); font-weight: 500; font-size: .95rem; color: var(--text-muted); }
.tier__note { color: var(--text-muted); font-size: .95rem; margin: 14px 0 22px; }
.tier hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.tier .incl-label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; color: var(--text-faint); margin-bottom: 14px; }
.tier .incl-sub { font-style: italic; font-family: var(--font-serif); color: var(--text-muted); font-size: .92rem; margin: 0 0 12px; }
.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--text); margin-bottom: 11px; }
.feat-list li.muted { color: var(--text-muted); }
.feat-list svg { flex: none; width: 18px; height: 18px; color: var(--ink); margin-top: 3px; }
.tier--soon .feat-list svg { color: var(--text-faint); }

.trust-row { display: flex; gap: 90px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.trust-row .item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 500; font-size: .98rem; color: var(--text-muted); letter-spacing: .01em; }
.trust-row svg { width: 22px; height: 22px; color: var(--ink); }

/* ---- Legal pages ---- */
.legal { max-width: 760px; margin-inline: auto; padding-block: 56px 64px; }
.legal-hero { text-align: center; padding: calc(72px + 52px) 0 40px;
  background: linear-gradient(180deg, var(--hero-1), #ffffff 90%); }
.legal-hero .eyebrow { display: block; margin-bottom: 14px; }
.legal-hero h1 { margin: 0; font-size: clamp(2rem, 3.5vw, 2.8rem); }
.legal-hero .sub { font-family: var(--font-serif); color: var(--text-muted); font-size: 1.15rem; margin: 14px 0 0; }
.legal-hero .eff { color: var(--text-faint); font-size: .82rem; letter-spacing: .04em; margin-top: 10px; }

/* anchor offset so sticky header doesn't cover section titles */
.legal h2[id], .legal-letter[id] { scroll-margin-top: 90px; }

/* personal intro letter */
.legal-letter {
  background: #fdf9f0;
  border: 1px solid #ece1cc;
  border-radius: var(--radius-lg);
  padding: 34px 38px; margin-bottom: 40px;
}
.legal-letter .salutation { font-weight: 700; color: var(--ink); font-size: 1.08rem; margin: 0 0 16px; }
.legal-letter p { font-family: var(--font-serif); color: var(--text); margin: 0 0 16px; line-height: 1.7; }
.legal-letter .rule { border: 0; border-top: 1px solid var(--line); margin: 24px 0 16px; }
.legal-letter .sign { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--text-faint); margin: 0; }

/* table of contents */
.legal-toc {
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 34px; margin-bottom: 52px;
}
.legal-toc h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; margin: 0 0 18px; color: var(--ink); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { margin-bottom: 11px; }
.legal-toc a { color: var(--text-muted); font-size: .98rem; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; }
.legal-toc a .n { color: var(--text-faint); margin-right: 8px; }

/* sections */
.legal section { margin-bottom: 44px; }
.legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--ink);
  margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.legal h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin: 22px 0 8px; }
.legal p { color: var(--text-muted); margin: 14px 0; }
.legal ul { margin: 12px 0; padding-left: 22px; }
.legal li { color: var(--text-muted); margin-bottom: 8px; }
.legal .eff-inline { font-size: .9rem; color: var(--text-faint); }
.legal .eff-inline b { color: var(--text-muted); }
.legal a.inline { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* highlighted commitment callout */
.legal-callout {
  background: var(--bg-tint); border-left: 4px solid var(--ink);
  border-radius: 0 10px 10px 0; padding: 20px 24px; margin: 20px 0;
}
.legal-callout p { color: var(--ink); font-weight: 700; margin: 0; font-family: var(--font-sans); }

/* contact card */
.legal-contact {
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin: 18px 0;
}
.legal-contact .name { font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.legal-contact p { margin: 4px 0; color: var(--text-muted); }

.legal-footnote { text-align: center; color: var(--text-faint); font-size: .85rem;
  padding-top: 28px; margin-top: 8px; border-top: 1px solid var(--line); }

/* ---- Final CTA band ---- */
.final-cta { text-align: center; padding-block: 84px; }
.final-cta__note {
  margin: 20px auto 0; max-width: 520px;
  font-family: var(--font-serif); font-size: .93rem; line-height: 1.6; color: var(--text-muted);
}
.final-cta__note a {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px;
}
.final-cta__note a:hover { text-decoration-color: var(--gold); }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: var(--on-dark); padding-block: 56px 30px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
.site-footer .brand { color: #fff; }
.footer-tagline { color: var(--on-dark-mut); max-width: 340px; margin-top: 14px; font-family: var(--font-serif); font-size: .92rem; line-height: 1.55; }
.footer-col h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; font-size: 1rem; margin: 0 0 16px; color: #fff; }
.footer-col a { display: block; color: var(--on-dark-mut); margin-bottom: 11px; font-size: .96rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--on-dark-mut); font-size: .88rem;
}
.footer-bottom .legal-links { display: flex; gap: 24px; }
.footer-bottom a:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid-3, .tiers, .steps { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .compass-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
  /* Brand block spans the width, the two link columns sit side by side */
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .section { padding-block: 64px; }
  .tier--featured { order: -1; }
  .feature-split { grid-template-columns: 1fr; }
  .quest { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
  .fs-stage { min-height: 340px; }
  /* On stacked layout, always show descriptions so the list reads on its own */
  .fs-desc { max-height: 8rem; opacity: 1; }
}
@media (max-width: 560px) {
  .compass-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .challenge__stats { grid-template-columns: 1fr; gap: 14px; }
  .challenge__ms i { display: none; }
  .challenge__ms { width: 56px; }
  .challenge__ms--start { width: 42px; }
  .challenge__ms b { font-size: .78rem; }
  .challenge__milestones { height: 22px; }
  .quest-hed { white-space: normal; font-size: 1.15rem; }
  .quest-sub { font-size: .95rem; }
  .hero-callout { flex-direction: column; text-align: center; gap: 10px; }
  .hero-callout p { text-align: center; }
}
/* The desktop nav stops fitting beside the wordmark a little under 900px,
   so the hamburger takes over from there rather than at phone width. */
@media (max-width: 880px) {
  .nav { gap: 10px; }
  .nav .navlink { display: none; }
  .navdrop { display: none; }
  .site-header .btn--gold { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
}

@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---- Animated Codex preview (feature explorer, panel 01) ---- */
.codex-anim {
  --cx-accent: #4f46e5;          /* indigo used for links + "appears" bars */
  --cx-accent-soft: #c7c4f2;
  position: relative;
  height: 100%;
  min-height: 380px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -36px rgba(11, 18, 32, .3);
  font-family: var(--font-sans);
  color: var(--text);
  user-select: none;
}

/* Each view is a complete, stacked "screenshot" that crossfades */
.cx__view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0;
}
.cx__view--1 { opacity: 1; animation: cxV1 16s linear infinite; }
.cx__view--2 { animation: cxV2 16s linear infinite; }
.cx__view--3 { animation: cxV3 16s linear infinite; }
.cx__view--4 { animation: cxV4 16s linear infinite; }

@keyframes cxV1 { 0%{opacity:1} 22%{opacity:1} 25%{opacity:0} 97%{opacity:0} 100%{opacity:1} }
@keyframes cxV2 { 0%{opacity:0} 22%{opacity:0} 25%{opacity:1} 47%{opacity:1} 50%{opacity:0} 100%{opacity:0} }
@keyframes cxV3 { 0%{opacity:0} 47%{opacity:0} 50%{opacity:1} 72%{opacity:1} 75%{opacity:0} 100%{opacity:0} }
@keyframes cxV4 { 0%{opacity:0} 72%{opacity:0} 75%{opacity:1} 97%{opacity:1} 100%{opacity:0} }

/* Top bar */
.cx__bar {
  flex: none; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.cx__crumb { display: flex; align-items: center; gap: 7px; color: var(--text-muted); min-width: 0; }
.cx__crumb svg { width: 13px; height: 13px; color: var(--ink); flex: none; }
.cx__crumb b { color: var(--ink); font-weight: 600; }
.cx__sep { color: var(--text-faint); }
.cx__status { display: flex; align-items: center; gap: 14px; flex: none; }
.cx__saved { color: #2e8b57; font-weight: 500; }
.cx__count { color: var(--text-faint); }

/* Body: sidebar + main */
.cx__body { flex: 1; display: flex; min-height: 0; }
.cx__side {
  flex: none; width: 158px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  background: #fcfcfd;
}
.cx__side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink);
}
.cx__side-head span { color: var(--text-faint); font-size: 13px; }

/* Tab icon row (cursor clicks these) */
.cx__tabs {
  display: flex; gap: 16px; padding: 6px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.cx__tab {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  border-bottom: 2px solid transparent; padding-bottom: 8px;
}
.cx__tab svg { width: 16px; height: 16px; }
.cx__tab.is-on { color: var(--ink); border-bottom-color: var(--cx-accent); }

.cx__add {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; font-size: 11.5px; color: var(--text-muted);
}
.cx__add svg { width: 13px; height: 13px; }

/* Sidebar tree */
.cx__tree { padding: 4px 6px; overflow: hidden; }
.cx__group {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 6px 4px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.cx__group svg { width: 12px; height: 12px; color: #d8a23a; }
.cx__group i { margin-left: auto; color: var(--text-faint); font-style: normal; font-weight: 500; }
.cx__row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 16px; font-size: 12px; color: var(--text);
  border-radius: 6px;
}
.cx__row svg { width: 13px; height: 13px; color: var(--text-faint); flex: none; }
.cx__row b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx__row i { margin-left: auto; color: var(--text-faint); font-style: normal; font-size: 10px; }
.cx__row.is-sel { background: rgba(79, 70, 229, .1); color: var(--ink); }
.cx__row.is-sel svg { color: var(--cx-accent); }
.cx__side-empty {
  margin: auto; padding: 24px 18px; text-align: center;
  font-size: 11.5px; color: var(--text-faint); font-family: var(--font-serif);
}

/* Main content area */
.cx__main { flex: 1; padding: 18px 22px; overflow: hidden; min-width: 0; }
.cx__field-label { font-size: 10px; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 5px; }
.cx__field {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; color: var(--ink); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.cx__field svg { width: 13px; height: 13px; color: var(--text-faint); }
.cx__eyebrow {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin: 0 0 6px;
}
.cx__appears { font-size: 13.5px; color: var(--ink); font-weight: 600; margin: 0 0 3px; }
.cx__appears-sub { font-size: 11px; color: var(--text-faint); margin: 0 0 10px; }
.cx__bars { display: flex; gap: 6px; margin-bottom: 12px; }
.cx__bars span { flex: 1; height: 16px; border-radius: 3px; background: #e9eaf0; }
.cx__bars span.on { background: var(--cx-accent); }
.cx__bars span.on2 { background: #2c1f9c; }
.cx__appears-note { font-size: 11px; color: var(--text-muted); margin: 2px 0; }
.cx__link { font-size: 12px; color: var(--cx-accent); font-weight: 600; margin-top: 10px; display: inline-flex; gap: 5px; align-items: center; }
.cx__link svg { width: 12px; height: 12px; }

/* Prose (manuscript view) */
.cx__prose { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.6; color: #2a2f3a; }
.cx__prose p { margin: 0 0 11px; }
.cx__prose em { color: var(--cx-accent); font-style: normal; border-bottom: 1px dotted var(--cx-accent-soft); }
.cx__prose .ital { font-style: italic; }

/* Outline cards */
.cx__outline-h { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.cx__outline-sub { font-size: 11px; color: var(--text-muted); margin: 0 0 14px; }
.cx__part { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 0 0 9px; }
.cx__part svg { width: 13px; height: 13px; color: #d8a23a; }
.cx__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.cx__card { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.cx__card-t { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink); }
.cx__card-t svg { width: 12px; height: 12px; color: var(--text-faint); }
.cx__card-w { font-size: 10px; color: var(--text-faint); margin: 3px 0 0 19px; }

/* Lore body */
.cx__lore-tag { display: inline-block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--cx-accent); background: rgba(79,70,229,.1); border-radius: 999px; padding: 3px 9px; margin-bottom: 11px; }
.cx__lore-h { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 10px; }

/* Animated cursor + click ring */
.cx__cursor {
  position: absolute; top: 88px; left: 21px;
  width: 18px; height: 18px; z-index: 20; pointer-events: none;
  animation: cxCursor 16s ease-in-out infinite;
}
.cx__cursor svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(11,18,32,.4)); }
.cx__ring {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; margin: -11px; border-radius: 50%;
  border: 2px solid var(--cx-accent); opacity: 0;
  animation: cxRing 4s ease-out infinite;
}
@keyframes cxCursor {
  0%   { left:21px; transform: scale(1); }
  20%  { left:21px; transform: scale(1); }
  22%  { left:57px; transform: scale(.82); }
  24%  { left:57px; transform: scale(1); }
  45%  { left:57px; transform: scale(1); }
  47%  { left:93px; transform: scale(.82); }
  49%  { left:93px; transform: scale(1); }
  70%  { left:93px; transform: scale(1); }
  72%  { left:129px; transform: scale(.82); }
  74%  { left:129px; transform: scale(1); }
  95%  { left:129px; transform: scale(1); }
  97%  { left:21px; transform: scale(.82); }
  99%  { left:21px; transform: scale(1); }
  100% { left:21px; transform: scale(1); }
}
@keyframes cxRing {
  0%,82% { opacity: 0; transform: scale(.35); }
  88%    { opacity: .5; transform: scale(.4); }
  100%   { opacity: 0; transform: scale(1.5); }
}

/* ---- Animated character sketch (feature explorer, panel 02) ---- */
.codex-anim--char { display: flex; flex-direction: column; }
.csk__scroll-wrap { flex: 1; overflow: hidden; }
.csk__scroll { position: relative; padding: 16px 22px 40px; transition: transform .6s ease; }
.csk__section { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin: 16px 0 9px; }
.csk__section--first { margin-top: 0; }
.csk__block { margin-bottom: 12px; }
.csk__lbl { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 6px; }
.csk__lbl-tools { display: flex; gap: 12px; color: var(--text-faint); }
.csk__lbl-tools svg { width: 13px; height: 13px; }
.csk__input {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; min-height: 42px;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink);
}
.csk__input--filled { display: flex; align-items: center; justify-content: space-between; min-height: 0; }
.csk__input--filled svg { width: 13px; height: 13px; color: var(--text-faint); }
.csk__typed:empty::before { content: attr(data-ph); color: var(--text-faint); }
.csk__caret {
  display: inline-block; width: 1.5px; height: 1.05em;
  background: var(--cx-accent); margin-left: 1px; vertical-align: text-bottom; opacity: 0;
}
.csk__caret.on { animation: cskBlink 1.05s steps(1, end) infinite; }
@keyframes cskBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* ---- Animated lore management (feature explorer, panel 03) ---- */
.lore-anim { display: flex; flex-direction: column; }
.lore-manage { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 11.5px; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.lore-manage svg { width: 13px; height: 13px; }
.lore-cats-h { padding: 9px 14px 5px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.lore-tree { padding: 0 6px 6px; overflow: hidden; }
.lore-cat { display: flex; align-items: center; gap: 7px; padding: 6px 8px; font-size: 11.5px; color: var(--text); border-radius: 6px; }
.lore-cat .chev { width: 10px; height: 10px; color: var(--text-faint); flex: none; }
.lore-cat .cat-ico { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.lore-cat b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lore-cat i { margin-left: auto; color: var(--text-faint); font-style: normal; font-size: 10px; padding-left: 4px; }
.lore-cat.is-active { background: rgba(79, 70, 229, .1); color: var(--cx-accent); font-weight: 600; }
.lore-cat.is-active .cat-ico, .lore-cat.is-active .chev { color: var(--cx-accent); }

.lore-main { flex: 1; position: relative; overflow: hidden; }
.lore-detail { position: absolute; inset: 0; opacity: 0; padding: 14px 22px; overflow: hidden; transition: opacity .45s ease; }
.lore-detail.is-shown { opacity: 1; }
.lore-back { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.lore-back svg { width: 14px; height: 14px; }
.lore-appears { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.lore-appears-sub { font-size: 11px; color: var(--text-faint); margin: 0 0 9px; }
.lore-divider { height: 1px; background: var(--line); margin: 12px 0 14px; }

/* JS-driven cursor for the lore preview */
.lore-cursor { position: absolute; top: 0; left: 0; width: 18px; height: 18px; z-index: 20; pointer-events: none; transition: transform .5s ease; }
.lore-cursor svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(11, 18, 32, .4)); }
.lore-ring { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2px solid var(--cx-accent); opacity: 0; }
.lore-cursor.click .lore-ring { animation: cxClick .55s ease-out 1; }
@keyframes cxClick { 0% { opacity: .5; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---- Animated project management (feature explorer, panel 04) ---- */
.pm-anim { display: flex; flex-direction: column; background: #fff; }
.pm-bar { flex: none; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); }
.pm-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); }
.pm-brand svg { width: 16px; height: 16px; color: var(--ink); }
.pm-bar-right { display: flex; align-items: center; gap: 11px; font-size: 11px; color: var(--text-faint); }
.pm-bar-right svg { width: 14px; height: 14px; }
.pm-body { flex: 1; position: relative; overflow: hidden; background: var(--bg-tint); padding: 16px 18px; }
.pm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pm-head h4 { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); margin: 0; }
.pm-newseries { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cx-accent); font-weight: 600; }
.pm-newseries svg { width: 13px; height: 13px; }
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pm-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 86px; }
.pm-card h5 { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink); margin: 0 0 7px; padding-right: 16px; }
.pm-stat { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); padding: 1px 0; }
.pm-stat b { color: var(--ink); font-weight: 600; }
.pm-sep { height: 1px; background: var(--line); margin: 6px 0; }
.pm-edited { font-size: 9.5px; color: var(--text-faint); }
.pm-dots { position: absolute; top: 9px; right: 8px; color: var(--text-faint); }
.pm-dots svg { width: 14px; height: 14px; }
.pm-card--start { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--text-muted); min-height: 86px; }
.pm-plus { width: 30px; height: 30px; border-radius: 50%; background: #eef0f4; display: flex; align-items: center; justify-content: center; }
.pm-plus svg { width: 16px; height: 16px; color: var(--text-muted); }
.pm-card--start span { font-size: 11.5px; font-weight: 600; }
.pm-card--new { display: none; opacity: 0; transform: scale(.92); transition: opacity .4s ease, transform .4s ease; }
.pm-card--new.show { opacity: 1; transform: scale(1); }
.pm-card--new.leaving { opacity: 0; transform: scale(.85); }

.pm-series { overflow: hidden; max-height: 0; opacity: 0; margin-bottom: 0;
  background: #fff; border: 1px solid var(--cx-accent-soft); border-radius: 10px;
  transition: max-height .5s ease, opacity .4s ease, margin .4s ease, padding .4s ease; padding: 0 12px; }
.pm-series.show { max-height: 170px; opacity: 1; margin-bottom: 14px; padding: 11px 12px; }
.pm-series-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.pm-series-h svg { width: 15px; height: 15px; color: var(--cx-accent); }
.pm-series-h i { color: var(--text-faint); font-style: normal; font-weight: 500; font-size: 10.5px; margin-left: 5px; }
.pm-series .pm-card { max-width: 220px; }

/* Context menu + submenu */
.pm-menu, .pm-submenu {
  position: absolute; z-index: 25; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(11, 18, 32, .35);
  padding: 5px; font-size: 11.5px; opacity: 0; pointer-events: none; transition: opacity .14s ease;
}
.pm-menu { width: 172px; }
.pm-submenu { width: 152px; z-index: 26; }
.pm-menu.show, .pm-submenu.show { opacity: 1; }
.pm-mi { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; color: var(--text); white-space: nowrap; }
.pm-mi svg { width: 13px; height: 13px; color: var(--text-muted); flex: none; }
.pm-mi .pm-caret { margin-left: auto; }
.pm-mi.hi { background: rgba(79, 70, 229, .08); }
.pm-mi--accent { color: var(--cx-accent); font-weight: 600; }
.pm-mi--accent svg { color: var(--cx-accent); }
.pm-mi--danger { color: #c0392b; }
.pm-mi--danger svg { color: #c0392b; }

/* ---- Animated share access (feature explorer, panel 05) ---- */
.share-anim {
  --sh-bg: #161d2b; --sh-panel: #232c3e; --sh-line: #333d52;
  --sh-text: #e6e9f0; --sh-mut: #9aa3b2; --sh-accent: #6c5ce7;
  position: relative; overflow: hidden;
}
.share-editor { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.share-ed-bar { flex: none; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 11px; }
.share-ed-bar .cx__crumb b { color: var(--ink); }
.share-ed-tools { display: flex; align-items: center; gap: 14px; color: var(--text-faint); }
.share-ed-tools svg { width: 15px; height: 15px; }
.share-ed-tools .share-btn { color: var(--ink); }
.share-ed-body { flex: 1; padding: 18px 22px; overflow: hidden; }

.notes-dock { position: absolute; inset: 0; display: flex; background: #fff; overflow: hidden; }
.notes-dock__editor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.notes-dock__editor .share-ed-bar { flex: none; }
.notes-dock__body { flex: 1; padding: 18px 22px; overflow: hidden; }
.notes-dock__side {
  flex: none; width: 220px; border-left: 1px solid var(--line); padding: 16px;
  background: var(--bg-sage); overflow: hidden;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.22, .9, .32, 1);
}
.notes-dock__side.is-open { transform: translateX(0); }
.notes-dock__side-head { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.notes-dock__note { font-size: 12.5px; line-height: 1.5; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }

.notes-btn {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(11, 18, 32, .12);
  color: var(--ink); box-shadow: 0 8px 20px -6px rgba(11, 18, 32, .35);
  backdrop-filter: blur(3px); cursor: default;
}
.notes-btn svg { width: 18px; height: 18px; }

.share-overlay { position: absolute; inset: 0; background: rgba(8, 12, 20, .62); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.share-overlay.show { opacity: 1; }
.share-modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%) scale(.96);
  width: 384px; max-width: 92%; max-height: 95%;
  background: var(--sh-bg); border-radius: 14px; color: var(--sh-text);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; z-index: 10;
}
.share-modal.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.share-mhead { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--sh-line); }
.share-mhead .sh-ico { width: 17px; height: 17px; color: var(--sh-accent); margin-top: 2px; flex: none; }
.share-mhead h5 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: #fff; }
.share-mhead .sh-sub { font-size: 11px; color: var(--sh-mut); }
.share-mhead .sh-x { margin-left: auto; color: var(--sh-mut); width: 15px; height: 15px; flex: none; }
.share-mbody { padding: 11px 14px; overflow: hidden; }
.share-info { background: rgba(108, 92, 231, .15); border: 1px solid rgba(108, 92, 231, .35); border-radius: 8px; padding: 8px 10px; font-size: 10.5px; line-height: 1.5; color: #c5bdf3; margin-bottom: 13px; }
.share-info b { color: #d7d1f8; display: block; font-size: 11px; margin-bottom: 2px; }
.share-sect { font-size: 12px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.share-lbl { font-size: 10.5px; color: var(--sh-mut); margin: 8px 0 4px; }
.share-radio { display: flex; align-items: center; gap: 9px; border: 1px solid var(--sh-line); border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; font-size: 11.5px; }
.share-radio.is-on { border-color: var(--sh-accent); }
.share-radio .sh-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--sh-mut); flex: none; position: relative; }
.share-radio.is-on .sh-dot { border-color: var(--sh-accent); }
.share-radio.is-on .sh-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sh-accent); }
.share-radio span i { display: block; font-style: normal; font-size: 10px; color: var(--sh-mut); }

.share-select { position: relative; background: var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 8px; padding: 7px 11px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.share-select svg { width: 13px; height: 13px; color: var(--sh-mut); }
.share-select__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 8px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); padding: 4px; z-index: 6; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.share-select--up .share-select__menu { top: auto; bottom: calc(100% + 4px); }
.share-select__menu.open { opacity: 1; }
.share-opt { padding: 7px 8px; border-radius: 5px; font-size: 12px; display: flex; align-items: center; gap: 7px; color: var(--sh-text); }
.share-opt.is-sel { color: #fff; }
.share-opt.is-sel::before { content: "✓"; color: var(--sh-accent); font-size: 11px; }
.share-opt.hi { background: rgba(255, 255, 255, .07); }

.share-check { display: flex; align-items: center; gap: 10px; border: 1px solid var(--sh-line); border-radius: 8px; padding: 7px 11px; margin-top: 8px; font-size: 11.5px; }
.share-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--sh-mut); flex: none; display: flex; align-items: center; justify-content: center; }
.share-box svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.share-check.checked .share-box { background: var(--sh-accent); border-color: var(--sh-accent); }
.share-check.checked .share-box svg { opacity: 1; }
.share-check i { display: block; font-style: normal; font-size: 10px; color: var(--sh-mut); }

.share-gen { margin-top: 10px; background: var(--sh-accent); color: #fff; border-radius: 8px; padding: 10px; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; }
.share-success { margin-top: 10px; display: none; }
.share-success.show { display: block; }
.share-success.pop { animation: sharePop .55s ease; }
@keyframes sharePop { 0% { transform: scale(.96); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
.share-link { display: flex; align-items: center; gap: 9px; background: var(--sh-panel); border: 1px solid var(--sh-accent); border-radius: 8px; padding: 9px 11px; font-size: 11.5px; color: #fff; }
.share-link svg { width: 14px; height: 14px; color: #4ad295; flex: none; }
.share-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-copied { margin-left: auto; color: #4ad295; font-size: 10.5px; font-weight: 600; flex: none; }

/* ---- Animated export (feature explorer, panel 06) ---- */
.export-anim { position: relative; overflow: hidden; }
.ex-menu {
  position: absolute; top: 46px; right: 14px; width: 190px; z-index: 12;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -16px rgba(11, 18, 32, .3); padding: 5px;
  opacity: 0; pointer-events: none; transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease;
}
.ex-menu.show { opacity: 1; transform: translateY(0); }
.ex-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 6px; font-size: 12px; color: var(--text); }
.ex-item svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.ex-item.hi { background: rgba(79, 70, 229, .09); }
.ex-item b { font-weight: 500; }
.ex-item .ex-sub { display: block; font-size: 9.5px; color: var(--text-faint); }
.ex-item .ex-caret { margin-left: auto; width: 12px; height: 12px; }
.ex-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.ex-submenu {
  position: absolute; right: calc(100% + 6px); bottom: -2px; width: 184px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -16px rgba(11, 18, 32, .3); padding: 5px;
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.ex-submenu.show { opacity: 1; }

.ex-toast {
  position: absolute; right: 16px; bottom: 14px; z-index: 14;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 34px -14px rgba(11, 18, 32, .35); padding: 9px 13px;
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.ex-toast.show { opacity: 1; transform: translateY(0); }
.ex-toast b { font-size: 11.5px; color: var(--ink); font-weight: 600; }
.ex-toast .ex-state { display: block; font-size: 10px; color: var(--text-faint); }
.ex-spin { width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--cx-accent); border-radius: 50%; animation: exSpin .7s linear infinite; flex: none; }
.ex-toast.done .ex-spin { display: none; }
.ex-check { display: none; width: 16px; height: 16px; color: #2e8b57; flex: none; }
.ex-toast.done .ex-check { display: block; }
@keyframes exSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .codex-anim { min-height: 340px; }
}
@media (max-width: 480px) {
  .cx__side { width: 132px; }
  .cx__main { padding: 14px 14px; }
  .cx__cards { grid-template-columns: 1fr; }
}

/* The demo mocks are laid out for a 607px stage. On a phone the stage is
   roughly 312-382px, and four pieces of fixed pixel sizing stop fitting. */
@media (max-width: 560px) {
  /* Panels needed 405px of height for the share dialog but were given 340px,
     which clipped the primary action off the bottom. */
  .fs-stage, .codex-anim { min-height: 430px; }
  .share-modal { max-height: 100%; }

  /* Opening the backup submenu beside its parent needs 380px of width, so on a
     phone it rendered up to 77px off the left edge. Drill down over the parent
     menu instead of flanking it. */
  .ex-submenu { right: auto; left: 0; }

  /* A 220px panel in the flex row left the manuscript a ~120px column that
     wrapped to two words a line. Overlay it so the editor keeps full width. */
  .notes-dock__side { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; }

  /* Three cards across the grid left ~95px each, colliding label and value. */
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The mock's title bar carries a project name, a document name, a save state
   and a word count. Those need about 410px and the bar is ~314px wide on a
   phone, so the breadcrumb wrapped to three lines inside a fixed 40px bar and
   was clipped 8px top and bottom. Keep the document name, which says what the
   demo is showing, and drop the two parts that can be inferred. Used on both
   the homepage panels and the Compass demos. */
@media (max-width: 560px) {
  .cx__crumb { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .cx__proj, .cx__sep, .cx__count { display: none; }
  /* A long document name ellipsises rather than pushing the save state out. */
  .cx__crumb b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ---- Accessibility ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tw-cursor { animation: none !important; }
}

/* ============================================================
   Compare portal (/compare)
   ============================================================ */

.cmp-intro { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-muted); max-width: 680px; margin: 16px auto 0; }

/* Matrix table */
.cmp-matrix-wrap {
  overflow-x: auto;
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
table.cmp-matrix { width: 100%; border-collapse: collapse; min-width: 780px; }
table.cmp-matrix th, table.cmp-matrix td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
table.cmp-matrix th { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); background: var(--bg-tint); }
table.cmp-matrix th a { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--gold-soft); }
table.cmp-matrix th a:hover { color: var(--gold); }
table.cmp-matrix th.cmp-rowlabel-head, table.cmp-matrix td.cmp-rowlabel {
  text-align: left; font-family: var(--font-sans); font-weight: 600; color: var(--ink);
  background: #fff; position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--line);
}
table.cmp-matrix th.cmp-rowlabel-head { background: var(--bg-tint); }
table.cmp-matrix th.cmp-col-inkwell { background: #fffaf0; color: var(--ink); border-bottom: 3px solid var(--gold); }
table.cmp-matrix tbody tr:last-child td { border-bottom: none; }
table.cmp-matrix tbody tr:nth-child(even) td:not(.cmp-rowlabel) { background: var(--bg-tint); }
.cmp-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cmp-symbol { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cmp-symbol.tone-good { color: var(--good); }
.cmp-symbol.tone-warn { color: var(--warn); }
.cmp-symbol.tone-bad  { color: var(--bad); }
.cmp-cell-label { font-size: .82rem; color: var(--text-muted); }

/* Compact two-tool table used on spoke pages */
table.cmp-table-2 { width: 100%; border-collapse: collapse; }
table.cmp-table-2 th, table.cmp-table-2 td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; }
table.cmp-table-2 th { font-family: var(--font-display); font-weight: 600; color: var(--ink); background: var(--bg-tint); }
table.cmp-table-2 th.cmp-rowlabel-head, table.cmp-table-2 td.cmp-rowlabel { text-align: left; background: #fff; font-weight: 600; color: var(--ink); }
table.cmp-table-2 th.cmp-rowlabel-head { background: var(--bg-tint); }
table.cmp-table-2 tbody tr:nth-child(even) td:not(.cmp-rowlabel) { background: var(--bg-tint); }

/* Legend */
.cmp-legend { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 18px; font-size: .88rem; color: var(--text-muted); }
.cmp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cmp-legend .cmp-symbol { font-size: .95rem; }

/* Drilldown cards */
.cmp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.cmp-card {
  display: block; padding: 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: #fff; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cmp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(11,18,32,.3); border-color: var(--gold-soft); }
.cmp-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); margin: 0 0 8px; }
.cmp-card p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.cmp-card--soon { background: var(--bg-tint); cursor: default; }
.cmp-card--soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.cmp-card--soon h3 { color: var(--text-muted); }
.cmp-soon-tag {
  display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; margin-bottom: 10px;
}

/* Parchment blocks: disclosure/disclaimer, at-a-glance card, closing CTA */
.cmp-parchment { background: var(--parchment); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); }
.cmp-disclosure p { margin: 0 0 14px; color: var(--text); font-size: .96rem; }
.cmp-disclosure p:last-child { margin-bottom: 0; font-size: .85rem; color: var(--text-muted); }

.cmp-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cmp-glance div h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cmp-glance div p { margin: 0; color: var(--text); }

/* At-a-glance: two standalone cards instead of one split card */
.cmp-glance-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-glance-card h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cmp-glance-card p { margin: 0; color: var(--text); }

/* Two eras: side-by-side columns instead of a stacked wall of paragraphs */
.cmp-era-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 30px; align-items: start; }
.cmp-era-col { padding-right: 4px; }
.cmp-era-col + .cmp-era-col { border-left: 1px solid var(--line); padding-left: 32px; }
.cmp-era-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cmp-era-head .ico { width: 26px; height: 26px; flex: none; }
.cmp-era-logo { object-fit: contain; border-radius: 4px; }
.cmp-era-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); margin: 0; }
.cmp-era-tag {
  display: block; font-family: var(--font-sans); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px;
}
.cmp-era-col p { font-family: var(--font-serif); color: var(--text); margin-top: 14px; }
.cmp-era-col p:first-of-type { margin-top: 0; }

/* Who should choose which: two choice cards instead of a wall of prose */
.cmp-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.cmp-choice-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.cmp-choice-card--gold { border-color: #ecdba8; background: #fffdf8; }
.cmp-choice-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 0 0 16px; }
.cmp-choice-card ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-choice-card li { display: flex; gap: 10px; font-family: var(--font-serif); color: var(--text); }
.cmp-choice-card li svg { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--good); }
.cmp-choice-card p { margin: 0; color: var(--text-muted); font-size: .93rem; font-family: var(--font-serif); }

.cmp-cta { text-align: center; }
.cmp-cta h2 { margin: 0 0 10px; }
.cmp-cta p { color: var(--text); margin: 0 0 22px; }

/* Feature card groups */
.cmp-feature-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.cmp-feature-card { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.cmp-feature-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 0 8px; }
.cmp-feature-card p { margin: 0; color: var(--text-muted); font-size: .93rem; }
.cmp-feature-group--gold .cmp-feature-card { border-color: #ecdba8; background: #fffdf8; }
.cmp-feature-group--gold .cmp-feature-card .ico { color: var(--gold); }
.cmp-feature-card .ico { width: 24px; height: 24px; color: var(--ink); margin-bottom: 12px; display: block; }

.cmp-section-lede { font-family: var(--font-serif); font-size: 1.08rem; color: var(--text-muted); max-width: 700px; }
.cmp-foot-disclaimer { font-size: .82rem; color: var(--on-dark-mut); margin: 0 0 20px; }

@media (max-width: 900px) {
  .cmp-cards { grid-template-columns: repeat(2, 1fr); }
  .cmp-feature-group { grid-template-columns: repeat(2, 1fr); }
  .cmp-glance { grid-template-columns: 1fr; }
  .cmp-glance-row { grid-template-columns: 1fr; }
  .cmp-era-row { grid-template-columns: 1fr; gap: 36px; }
  .cmp-era-col + .cmp-era-col { border-left: none; padding-left: 4px; border-top: 1px solid var(--line); padding-top: 30px; }
  .cmp-choice-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cmp-cards { grid-template-columns: 1fr; }
  .cmp-feature-group { grid-template-columns: 1fr; }
}

/* ---- Writing apps breakdown page ---- */
.wab-intro { max-width: 640px; }

/* Disclosure card with buttons */
.wab-disclosure p { margin: 0; color: var(--text); font-size: 1.08rem; font-family: var(--font-serif); line-height: 1.6; }
.wab-disclosure-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

.wab-toc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 28px; margin-top: 30px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px 24px;
}
.wab-toc span { font-family: var(--font-sans); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.wab-toc a { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.wab-toc a:hover { color: var(--gold); }

.wab-category { font-family: var(--font-display); font-weight: 600; margin: 0 0 26px; padding-bottom: 16px; border-bottom: 2px solid var(--gold-soft); scroll-margin-top: 90px; }

.wab-list { display: flex; flex-direction: column; gap: 18px; }
.wab-item {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease;
}
.wab-item:hover { border-color: var(--gold-soft); box-shadow: 0 14px 30px -24px rgba(11,18,32,.35); }
.wab-item[open] { border-color: var(--gold-soft); box-shadow: 0 18px 40px -26px rgba(11,18,32,.4); }
.wab-item + .wab-category { margin-top: 60px; }

.wab-summary {
  list-style: none; cursor: pointer; padding: 22px 26px; display: flex;
  align-items: center; gap: 18px; font-family: var(--font-sans);
  transition: background .18s ease;
}
.wab-summary:hover { background: var(--bg-tint); }
.wab-item[open] .wab-summary { background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.wab-summary::-webkit-details-marker { display: none; }
.wab-logo {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 5px;
}
.wab-summary h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--ink); margin: 0; flex: 1; }
.wab-summary .chev { flex: none; color: var(--gold); transition: transform .2s ease; }
.wab-item[open] .wab-summary .chev { transform: rotate(180deg); }

.wab-body { padding: 26px; }
.wab-glance { font-family: var(--font-serif); font-size: 1.14rem; line-height: 1.6; color: var(--ink); margin: 0; }
.wab-price {
  font-family: var(--font-sans); font-size: 1rem; color: var(--text); margin: 16px 0 0;
  background: var(--bg-tint); border-radius: var(--radius); padding: 14px 18px; line-height: 1.55;
}
.wab-price b { color: var(--ink); font-weight: 700; }

.wab-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.wab-col { border-radius: var(--radius); padding: 20px 22px; }
.wab-pros { background: #f2f7f3; border: 1px solid #d9e8dd; }
.wab-cons { background: #fbf3f1; border: 1px solid #f0d9d3; }
.wab-col h4 {
  font-family: var(--font-sans); font-weight: 700; font-size: .82rem; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.wab-pros h4 { color: var(--good); }
.wab-cons h4 { color: var(--bad); }
.wab-col h4::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor;
}
.wab-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.wab-col li { display: flex; gap: 10px; font-family: var(--font-serif); font-size: 1rem; line-height: 1.5; color: var(--text); }
.wab-col li svg { flex: none; width: 17px; height: 17px; margin-top: 4px; }
.wab-pros li svg { color: var(--good); }
.wab-cons li svg { color: var(--bad); }

.wab-best {
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.6; color: var(--text);
  margin: 24px 0 0; background: var(--parchment); border-radius: var(--radius); padding: 20px 22px;
}
.wab-best b {
  font-family: var(--font-sans); font-weight: 700; font-size: .82rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px;
}

.wab-full-link { display: inline-block; margin-top: 20px; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-soft); }
.wab-full-link:hover { color: var(--ink); }

@media (max-width: 640px) {
  .wab-columns { grid-template-columns: 1fr; gap: 14px; }
  .wab-summary { padding: 18px 18px; gap: 14px; }
  .wab-logo { width: 40px; height: 40px; }
  .wab-summary h3 { font-size: 1.14rem; }
  .wab-body { padding: 20px 18px; }
  .wab-disclosure-actions .btn { width: 100%; }
}

/* ============================================================
   Compass page (/compass)
   ============================================================ */
.compass-hero .compass-mark { margin-bottom: 24px; }
.compass-hero .lede { max-width: 680px; }
/* land anchor jumps (from the outcomes cards) clear of the header */
.section[id] { scroll-margin-top: 88px; }

/* Opening + closing centered prose blocks */
.compass-prose { max-width: 720px; margin-inline: auto; text-align: left; }
.compass-prose p {
  font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.7;
  color: var(--text-muted); margin: 0 0 18px;
}
.compass-prose p:last-child { margin-bottom: 0; }
.compass-prose .display { text-align: center; }

/* Feature block */
.cf-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2rem); color: var(--ink);
  margin: 0; line-height: 1.15;
}
/* Tier chips — quiet gold pills beside each feature heading */
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cf-chip {
  font-family: var(--font-sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
  background: rgba(176, 124, 18, .08); border: 1px solid var(--gold-soft);
  border-radius: 999px; padding: 4px 11px; line-height: 1.3;
}
.cf-chip--soon { color: #fff; background: var(--gold); border-color: var(--gold); }
.cf-sub {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.42rem); color: var(--text);
  margin: 20px 0 0; line-height: 1.3;
}
.cf-body { margin-top: 16px; }
.cf-body p {
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.7;
  color: var(--text-muted); margin: 0 0 16px; max-width: 60ch;
}
.cf-body p:last-child { margin-bottom: 0; }
.cf-body .cf-body__grounded { color: var(--text); font-weight: 500; }

/* Intro card + outcomes preview */
.compass-intro-card {
  position: relative; margin-top: 26px; padding: 30px clamp(24px, 4vw, 40px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -46px rgba(11, 18, 32, .4);
  border-left: 3px solid var(--gold-soft);
}
.compass-outcomes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 820px; margin: 28px auto 0;
}
.outcome {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 22px 14px; background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.outcome:hover { transform: translateY(-3px); border-color: var(--gold-soft); box-shadow: 0 18px 40px -30px rgba(11, 18, 32, .4); }
.outcome svg { width: 26px; height: 26px; color: var(--gold); }
.outcome b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.outcome span { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

/* Two-column feature (text + media slot, image-ready) */
.cf-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px); align-items: center;
}
.cf-split--rev .cf-split__text { order: 2; }
.cf-split--rev .cf-split__media { order: 1; }

/* Media placeholder — swap the frame's inner SVG for an <img> later */
.cf-media__frame {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3; overflow: hidden;
  background:
    radial-gradient(560px 260px at 30% 0%, var(--hero-1), transparent 70%),
    linear-gradient(180deg, #fff, var(--bg-tint));
  box-shadow: 0 30px 60px -40px rgba(11, 18, 32, .35);
  display: flex; align-items: center; justify-content: center;
}
.cf-media__frame > svg { width: 78%; height: 78%; color: var(--gold); opacity: .9; }
.cf-media__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Frame variant that hosts a live interactive demo instead of a static glyph */
.cf-media__frame--anim {
  display: block; padding: 0; background: #fff; aspect-ratio: 4 / 3.6;
  border: 2px solid var(--gold-soft);
  box-shadow: 0 30px 60px -40px rgba(11, 18, 32, .35), 0 0 0 1px rgba(176, 124, 18, .08);
}

@media (max-width: 700px) {
  .compass-outcomes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .cf-split { grid-template-columns: 1fr; gap: 28px; }
  .cf-split--rev .cf-split__text { order: 1; }
  .cf-split--rev .cf-split__media { order: 2; }
}

/* ---- Animated Synopsis demo (Compass page) ---- */
.syn-anim {
  --cx-accent: #4f46e5;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff; font-family: var(--font-sans); color: var(--text);
  user-select: none;
}
.syn-anim .cx__crumb b { color: var(--ink); }
.syn-anim .share-ed-tools { position: relative; z-index: 2; }
.syn-btn { border-radius: 6px; padding: 3px; transition: color .2s ease, background .2s ease; }
.syn-btn.is-on { color: var(--cx-accent); background: rgba(79, 70, 229, .1); }
.syn-body { flex: 1; padding: 18px 22px; overflow: hidden; }

.syn-pop {
  position: absolute; top: 50px; right: 14px; bottom: 16px; width: 240px; z-index: 10;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 48px -18px rgba(11, 18, 32, .38);
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.syn-pop.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.syn-pop__head { flex: none; display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.syn-pop__ico { width: 15px; height: 15px; color: var(--cx-accent); margin-top: 2px; flex: none; }
.syn-pop__head h5 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.syn-pop__sub { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.syn-pop__x { margin-left: auto; width: 12px; height: 12px; color: var(--text-faint); flex: none; }
.syn-pop__body { flex: 1; min-height: 0; overflow-y: auto; padding: 11px 13px 13px; }

/* Content states swap via display so the card's height follows whichever
   state is current, matching the real panel growing once the recap lands. */
.syn-pop__desc, .syn-pop__loading, .syn-pop__result { display: none; }
.syn-pop__desc.show { display: block; animation: synFade .3s ease; }
.syn-pop__result.show { display: block; animation: synFade .3s ease; }
.syn-pop__loading.show { display: flex; animation: synFade .3s ease; }
@keyframes synFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.syn-pop__desc p, .syn-pop__result p { margin: 0 0 10px; font-size: 11px; line-height: 1.55; color: var(--text-muted); }

.syn-pop__btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--ink); color: #fff; border-radius: 8px; padding: 8px;
  font-size: 11.5px; font-weight: 600;
}
.syn-pop__btn svg { width: 13px; height: 13px; }

.syn-pop__loading { align-items: center; gap: 8px; padding: 6px 0; font-size: 11px; color: var(--text-faint); }

.syn-pop__update { font-size: 11px; color: var(--cx-accent); font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.syn-pop__update svg { width: 11px; height: 11px; }

@media (max-width: 700px) {
  .syn-pop { width: 74%; }
}

/* ---- Animated Heartbeat demo (Compass page) ---- */
.hb-anim {
  --cx-accent: #4f46e5;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff; font-family: var(--font-sans); color: var(--text);
  user-select: none;
}
.hb-anim .cx__crumb b { color: var(--ink); }
.hb-anim .share-ed-tools { position: relative; z-index: 2; }
.hb-btn { border-radius: 6px; padding: 3px; transition: color .2s ease, background .2s ease; }
.hb-btn.is-on { color: var(--gold); background: rgba(176, 124, 18, .1); }
.hb-content { flex: 1; position: relative; overflow: hidden; }
.hb-content .syn-body { position: absolute; inset: 0; padding: 18px 22px; overflow: hidden; }

#hb-menu { top: 46px; right: 45px; }
.pm-mi.hi svg { color: var(--gold); }

.hb-panel {
  position: absolute; inset: 0; background: #fff; padding: 20px 22px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.hb-panel.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hb-panel__head { display: flex; align-items: center; gap: 9px; }
.hb-panel__ico { width: 17px; height: 17px; color: var(--ink); flex: none; }
.hb-panel__head h5 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.hb-panel__x { margin-left: auto; width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.hb-panel__sub { margin: 5px 0 0; font-size: 11px; color: var(--text-muted); }

.hb-panel__card {
  position: relative; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 20px 16px; min-height: 170px;
}

.hb-empty { display: none; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 22px 10px; }
.hb-empty.show { display: flex; animation: synFade .3s ease; }
.hb-empty p { margin: 0; font-size: 11.5px; color: var(--text-muted); max-width: 30ch; }
.hb-scan-btn { background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 16px; font-size: 11.5px; font-weight: 600; }

.hb-loading { display: none; align-items: center; justify-content: center; gap: 8px; padding: 40px 10px; font-size: 11px; color: var(--text-faint); }
.hb-loading.show { display: flex; animation: synFade .3s ease; }

.hb-chart { display: none; }
.hb-chart.show { display: block; animation: synFade .3s ease; }
.hb-chart svg { width: 100%; height: auto; display: block; }
.hb-fill { fill: var(--parchment); opacity: 0; transition: opacity .5s ease .1s; }
.hb-line {
  fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 720; stroke-dashoffset: 720; transition: stroke-dashoffset 1.3s ease;
}
.hb-chart.show .hb-fill { opacity: 1; }
.hb-chart.show .hb-line { stroke-dashoffset: 0; }
.hb-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; color: var(--text-faint); }
.hb-caption { margin: 10px 0 0; font-size: 10.5px; color: var(--text-muted); }
.hb-rescan { position: absolute; right: 18px; bottom: 14px; font-size: 10.5px; font-weight: 600; color: var(--gold); }

@media (max-width: 700px) {
  #hb-menu { right: 14px; }
}

/* ---- Animated Ask demo (Compass page) ---- */
.ask-anim {
  --cx-accent: #4f46e5;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff; font-family: var(--font-sans); color: var(--text);
  user-select: none;
}
.ask-anim .cx__crumb b { color: var(--ink); }
.ask-anim .share-ed-tools { position: relative; z-index: 2; }
.ask-btn { border-radius: 6px; padding: 3px; transition: color .2s ease, background .2s ease; }
.ask-btn.is-on { color: var(--gold); background: rgba(176, 124, 18, .1); }
.ask-content { flex: 1; position: relative; overflow: hidden; }

#ask-menu { top: 46px; right: 45px; }

.ask-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px -30px rgba(11, 18, 32, .4);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.22, .9, .32, 1);
}
.ask-panel.show { transform: translateX(0); }
.ask-panel__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ask-panel__ico { width: 15px; height: 15px; color: var(--gold); flex: none; }
.ask-panel__head h5 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); }
.ask-panel__trash { margin-left: auto; width: 13px; height: 13px; color: var(--text-faint); flex: none; opacity: 0; transition: opacity .2s ease; }
.ask-panel__trash.show { opacity: 1; }
.ask-panel__x { margin-left: 10px; width: 13px; height: 13px; color: var(--text-faint); flex: none; }

.ask-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.ask-empty { display: none; }
.ask-empty.show { display: block; animation: synFade .3s ease; }
.ask-empty p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-muted); }

.ask-convo { display: none; flex-direction: column; gap: 10px; }
.ask-convo.show { display: flex; }
.ask-bubble { font-size: 11px; line-height: 1.55; border-radius: 12px; padding: 9px 12px; max-width: 88%; }
.ask-bubble--user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.ask-bubble--reply { align-self: flex-start; background: var(--bg-tint); color: var(--text); border-bottom-left-radius: 4px; max-width: 100%; }
.ask-bubble--reply p { margin: 0; }

.ask-loading { display: none; align-self: flex-start; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-faint); padding: 4px 2px; }
.ask-loading.show { display: flex; animation: synFade .3s ease; }

.ask-answer { display: none; align-self: flex-start; max-width: 100%; }
.ask-answer.show { display: block; animation: synFade .3s ease; }
.ask-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ask-chip { font-size: 9.5px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }

.ask-input-row { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line); }
.ask-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 13px; font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden;
}
.ask-send {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ask-send svg { width: 13px; height: 13px; }

@media (max-width: 700px) {
  .ask-panel { width: 88%; }
  #ask-menu { right: 14px; }
}

/* ---- Animated Atlas demo (Compass page) ---- */
.atlas-anim {
  --cx-accent: #4f46e5;
  --atlas-blue: #5f8aa3;
  --atlas-sage: #7c9b6e;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff; font-family: var(--font-sans); color: var(--text);
  user-select: none;
}
.atlas-anim .cx__crumb b { color: var(--ink); }
.atlas-anim .share-ed-tools { position: relative; z-index: 2; }
.atlas-btn { border-radius: 6px; padding: 3px; transition: color .2s ease, background .2s ease; }
.atlas-btn.is-on { color: var(--gold); background: rgba(176, 124, 18, .1); }

.atlas-content { flex: 1; position: relative; overflow: hidden; }
#atlas-menu { top: 46px; right: 45px; }

.atlas-panel {
  position: absolute; inset: 0; background: #fff; padding: 18px 22px 20px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  display: flex; flex-direction: column;
}
.atlas-panel.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.atlas-panel__head { display: flex; align-items: center; gap: 9px; flex: none; }
.atlas-panel__ico { width: 17px; height: 17px; color: var(--ink); flex: none; }
.atlas-panel__head h5 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.atlas-panel__x { margin-left: auto; width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.atlas-panel__sub { margin: 5px 0 0; font-size: 11px; color: var(--text-muted); flex: none; }

.atlas-card {
  position: relative; flex: 1; min-height: 0; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.atlas-toolbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.atlas-toggle { display: flex; gap: 6px; }
.atlas-pill {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.atlas-pill svg { width: 11px; height: 11px; }
.atlas-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.atlas-legend { display: flex; align-items: center; gap: 12px; font-size: 9.5px; color: var(--text-faint); }
.atlas-legend span { display: flex; align-items: center; gap: 5px; }
.atlas-legend i { display: inline-block; width: 16px; height: 0; border-top: 1.6px solid var(--gold); font-style: normal; }
.atlas-legend i.dashed { border-top-style: dashed; border-top-color: var(--gold-soft); }

.atlas-graph { position: relative; flex: 1; min-height: 0; }
.atlas-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-edge { stroke: var(--gold); stroke-width: 1.4; opacity: .45; vector-effect: non-scaling-stroke; transition: opacity .3s ease, stroke-width .3s ease; }
.atlas-edge--dashed { stroke: var(--gold-soft); stroke-dasharray: 5 4; }
.atlas-edge.dim { opacity: .06; }
.atlas-edge.hi { opacity: 1; stroke-width: 2.4; }

.atlas-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: opacity .3s ease;
}
.atlas-node.dim { opacity: .18; }
.atlas-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--atlas-blue);
  box-shadow: 0 0 0 4px #fff, 0 4px 10px -4px rgba(11, 18, 32, .4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.atlas-node--lore .atlas-dot { background: var(--atlas-sage); }
.atlas-node.is-sel .atlas-dot { transform: scale(1.3); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gold), 0 8px 20px -8px rgba(11, 18, 32, .5); }
.atlas-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.atlas-node.is-sel .atlas-label { color: var(--ink); }

.atlas-detail {
  position: absolute; top: 16px; right: 16px; width: 210px; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 48px -18px rgba(11, 18, 32, .38); padding: 14px;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.atlas-detail.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.atlas-detail__name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.atlas-detail__name .atlas-dot { width: 15px; height: 15px; box-shadow: none; flex: none; }
.atlas-detail__count { font-size: 10px; color: var(--text-faint); margin: 3px 0 11px; }
.atlas-detail__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }
.atlas-detail__item { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }
.atlas-detail__item b { color: var(--ink); font-weight: 700; }
.atlas-detail__link { font-size: 10.5px; font-weight: 600; color: var(--cx-accent); }

@media (max-width: 700px) {
  .atlas-detail { width: 68%; }
}

/* All four demos on this page are sized so their content exactly fills the
   frame on a desktop. The frame is 4/3.6, so it gets shorter as it narrows,
   while the content it holds is text that gets taller as it wraps. Squeezed
   from both ends, each demo hides its own payload on a phone: at 360px half
   the generated synopsis (121px of 250px) sat below its window, the Heartbeat
   chart card hung 66px past the panel, the Ask conversation lost 152px, and
   the Atlas graph collapsed from 262px to 13px. Give them a taller frame. */
@media (max-width: 560px) {
  /* An aspect ratio is the wrong tool here: it makes the frame shorter as it
     narrows, exactly when the text inside needs more lines. Heights instead,
     per demo, since they differ by 150px in what they need. */
  .cf-media__frame--anim { aspect-ratio: auto; }
  #synopsis .cf-media__frame--anim { height: 400px; }
  #heartbeat .cf-media__frame--anim { height: 380px; }
  #ask .cf-media__frame--anim { height: 490px; }
  #atlas .cf-media__frame--anim { height: 460px; }
}
/* The narrowest phones wrap the same copy onto yet more lines. */
@media (max-width: 380px) {
  #synopsis .cf-media__frame--anim { height: 450px; }
  #ask .cf-media__frame--anim { height: 530px; }
  #atlas .cf-media__frame--anim { height: 470px; }
}

/* Atlas only: the graph is the panel's one flexible child, so on top of the
   frame it also needed the chrome above it to take less, and its nodes to
   stop carrying desktop footprints at phone-sized spacings. */
@media (max-width: 560px) {
  .atlas-panel { padding: 14px 16px 16px; }
  .atlas-panel__sub { font-size: 10px; }
  .atlas-toolbar { gap: 8px; padding: 9px 12px; }
  .atlas-legend { gap: 8px; }

  /* Node positions are percentages but the dots and labels were fixed, so the
     distances between them shrank while their footprints did not. */
  .atlas-node { gap: 3px; }
  .atlas-dot { width: 18px; height: 18px; box-shadow: 0 0 0 3px #fff, 0 3px 8px -4px rgba(11, 18, 32, .4); }
  /* Two-word labels on an edge node ran past the card, so let them wrap
     rather than nudging individual nodes off their connecting lines. */
  .atlas-label { font-size: 9px; white-space: normal; max-width: 62px; text-align: center; line-height: 1.25; }
  .atlas-detail__name .atlas-dot { width: 11px; height: 11px; }
}

/* ============================================================
   Learn hub + craft guides (/learn)
   ============================================================ */

/* ---- Hub ---- */
.learn-intro { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-muted); max-width: 700px; margin: 16px auto 0; text-wrap: pretty; }

.learn-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
.learn-card {
  display: flex; flex-direction: column; padding: 30px 28px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.learn-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(11,18,32,.3); border-color: var(--gold-soft); }
.learn-card__icon {
  display: block; width: 32px; height: 32px; flex: none;
  color: var(--gold-soft); margin-bottom: 18px;
  transition: color .15s ease;
}
.learn-card:hover .learn-card__icon { color: var(--gold); }
.learn-card h2, .learn-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--ink); margin: 0 0 10px; line-height: 1.25; }

/* Three lanes read better in a row than in the two-up guide grid. */
.learn-cards--lanes { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .learn-cards--lanes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Calculators on /learn/tools/*. The gold-soft border matches the convention
   used for live demos elsewhere on the site. Every value the calculator shows
   is also present in the markup, so the panel is correct without JavaScript.
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.calc {
  background: #fff; border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: 0 18px 40px -28px rgba(11,18,32,.34);
}
.calc__field { display: flex; flex-direction: column; gap: 8px; }
.calc__label {
  font-family: var(--font-sans); font-weight: 500; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
}
.calc__input {
  font-family: var(--font-sans); font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 500; color: var(--ink); width: 100%; max-width: 340px;
  padding: 12px 16px; background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius);
  -moz-appearance: textfield;
}
.calc__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; background: #fff; }
.calc__input--sm { font-size: 1.15rem; max-width: 150px; padding: 9px 13px; }

.calc__results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line);
}
.calc__result { display: flex; flex-direction: column; gap: 5px; }
.calc__num {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.1; color: var(--ink);
}
.calc__result--lead .calc__num { color: var(--gold); font-size: clamp(1.9rem, 3.8vw, 2.5rem); }
.calc__cap {
  font-family: var(--font-sans); font-weight: 500; font-size: .95rem; color: var(--text);
}
.calc__sub {
  font-family: var(--font-serif); font-size: .86rem; line-height: 1.5;
  color: var(--text-muted); text-wrap: pretty;
}

.calc__mini {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
}
.calc__mini .calc__label { flex: none; }
.calc__mini-out {
  flex: 1 1 260px; margin: 0; font-family: var(--font-serif);
  font-size: .95rem; line-height: 1.6; color: var(--text-muted); text-wrap: pretty;
}
.calc__mini-out strong { color: var(--ink); font-weight: 600; }

.calc__row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.calc__select {
  font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink);
  width: 100%; min-width: 260px; height: 50px; padding: 0 16px; background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.calc__select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; background: #fff; }
.calc__row .calc__field { flex: 1 1 260px; }
.calc__row .calc__field + .calc__field { flex: 0 1 190px; }
/* Match the select's metrics so the two labels sit on one line. */
.calc__row .calc__input { font-size: 1.05rem; height: 50px; padding: 0 16px; max-width: none; }
/* One stacked column of results, for tools that report a verdict rather than
   a row of figures. */
.calc__results--stack { display: block; }

.nl-verdict { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.nl-status {
  flex: none; font-family: var(--font-sans); font-weight: 700; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
.nl-status--in    { color: var(--good); background: rgba(63, 122, 79, .12); }
.nl-status--under { color: var(--warn); background: rgba(163, 121, 31, .13); }
.nl-status--over  { color: var(--bad);  background: rgba(179, 64, 47, .11); }
.nl-sentence {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.35; color: var(--ink);
}

.nl-bar {
  position: relative; height: 12px; margin: 26px 0 0;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px;
}
.nl-band {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--gold-soft); opacity: .45;
}
.nl-marker {
  position: absolute; top: -6px; bottom: -6px; width: 2px;
  background: var(--ink); border-radius: 1px; transform: translateX(-1px);
}
.nl-scale {
  margin: 14px 0 0; font-family: var(--font-serif); font-size: .9rem;
  color: var(--text-muted); text-wrap: pretty;
}

/* ---- Glossary (/learn/glossary) ---- */
.gloss-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px 32px; flex-wrap: wrap; max-width: 760px; margin: 0 auto;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.gloss-bar__field { display: flex; flex-direction: column; gap: 8px; flex: 0 1 300px; }
.gloss-bar__field .calc__input { max-width: none; width: 100%; height: 46px; font-size: 1rem; padding: 0 14px; }
.gloss-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.gloss-nav a {
  padding: 7px 13px; border-radius: 999px; background: var(--bg-tint);
  border: 1px solid var(--line); font-family: var(--font-sans); font-size: .86rem;
  color: var(--text-muted);
}
.gloss-nav a:hover { color: var(--ink); border-color: var(--gold-soft); }
.gloss-status {
  max-width: 760px; margin: 16px auto 0; font-family: var(--font-serif);
  font-size: .92rem; color: var(--text-muted);
}

.gloss-body { max-width: 760px; }
.gloss__group + .gloss__group { margin-top: 8px; }
.gloss__heading {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2;
  margin: 52px 0 0; padding-bottom: 14px; border-bottom: 2px solid var(--gold-soft);
  scroll-margin-top: 96px;
}
.gloss__group:first-child .gloss__heading { margin-top: 0; }
.gloss__count {
  font-family: var(--font-sans); font-weight: 500; font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
}
.gloss { margin: 0; }
.gloss__item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.gloss__item:last-child { border-bottom: 0; }
.gloss__term {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.04rem;
  color: var(--ink); margin: 0 0 6px; scroll-margin-top: 96px;
}
.gloss__def {
  margin: 0; font-family: var(--font-serif); font-size: 1rem; line-height: 1.7;
  color: var(--text-muted); text-wrap: pretty;
}
.gloss__def a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.gloss__def a:hover { color: var(--ink); }

@media (max-width: 620px) {
  .gloss-bar { align-items: stretch; }
  .gloss-bar__field { flex: 1 1 100%; }
}

/* A single line of follow-up under a results row. */
.calc__note {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-size: .97rem; color: var(--text-muted); text-wrap: pretty;
}
.calc__note + .calc__mini { margin-top: 20px; padding-top: 20px; }

@media (max-width: 720px) {
  .calc { padding: 24px 20px; }
  .calc__results { gap: 18px; margin-top: 24px; padding-top: 22px; }
}
.learn-card p { margin: 0; color: var(--text-muted); font-family: var(--font-serif); font-size: .97rem; line-height: 1.6; text-wrap: pretty; }
.learn-card__meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
  display: flex; gap: 14px; align-items: center;
}
.learn-card__cue { color: var(--gold); }

/* "Start where you are": guides grouped by the phase the writer is in,
   so the grouping carries the structure rather than a false sequence. */
.learn-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.learn-phase {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 12px;
}
.learn-phase__title {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); margin: 0 0 4px; padding-bottom: 14px;
  border-bottom: 2px solid var(--gold-soft);
}
.learn-phase__icon { width: 22px; height: 22px; flex: none; color: var(--gold-soft); }
.learn-phase__item {
  display: block; padding: 20px 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.learn-phase__item:last-child { border-bottom: 0; }
.learn-phase__q {
  display: block; font-family: var(--font-serif); font-size: .99rem;
  line-height: 1.55; color: var(--text-muted); text-wrap: pretty;
}
.learn-phase__a {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem; color: var(--ink);
}
.learn-phase__a svg { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.learn-phase__item:hover .learn-phase__a { color: var(--gold); }
.learn-phase__item:hover .learn-phase__a svg { transform: translateX(3px); }
.learn-phase__item:hover .learn-phase__q { color: var(--text); }

/* ---- Guide pages ---- */
.guide-meta {
  margin-top: 22px; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px 18px; font-family: var(--font-sans); font-size: .8rem;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint);
}
.guide-meta span { display: inline-flex; align-items: center; gap: 8px; }
.guide-meta span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }

.guide-crumb { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 18px; }
.guide-crumb a { color: var(--text-muted); border-bottom: 1px solid var(--line); }
.guide-crumb a:hover { color: var(--gold); border-bottom-color: var(--gold-soft); }

/* The short, extractable answer directly under the hero */
.guide-answer {
  max-width: 760px; margin: 0 auto; background: var(--parchment);
  border-radius: var(--radius-lg); padding: clamp(24px, 3.6vw, 34px);
}
.guide-answer h2 {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px;
}
.guide-answer p { margin: 0; font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.65; color: var(--text); text-wrap: pretty; }
.guide-answer p + p { margin-top: 14px; }

/* Table of contents */
.guide-toc {
  max-width: 760px; margin: 34px auto 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px;
}
.guide-toc h2 { font-family: var(--font-sans); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; }
.guide-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.guide-toc li { font-family: var(--font-sans); font-size: .98rem; color: var(--text-muted); }
.guide-toc a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--gold-soft); }
.guide-toc a:hover { color: var(--gold); }

/* Prose body */
.guide-body { max-width: 760px; margin: 0 auto; }
.guide-body h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.2;
  margin: 56px 0 0; padding-bottom: 14px; border-bottom: 2px solid var(--gold-soft);
  scroll-margin-top: 96px; text-wrap: balance;
}
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: 1.2rem; margin: 34px 0 0; scroll-margin-top: 96px;
}
.guide-body p {
  font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.75;
  color: var(--text); margin: 18px 0 0; text-wrap: pretty;
}
.guide-body p.guide-lead { font-size: 1.1rem; color: var(--text); font-weight: 500; }
.guide-body p.guide-caption { margin-top: 12px; font-size: .88rem; color: var(--text-faint); line-height: 1.55; }
.guide-body ul, .guide-body ol { font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.7; color: var(--text); margin: 18px 0 0; padding-left: 24px; }
.guide-body li { margin-bottom: 10px; text-wrap: pretty; }
.guide-body li:last-child { margin-bottom: 0; }
.guide-body strong { font-weight: 600; color: var(--ink); }
.guide-body a:not(.btn) { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--gold-soft); }
.guide-body a:not(.btn):hover { color: var(--gold); }

/* Pull-aside: a short craft note set apart from the flow */
.guide-note {
  margin: 30px 0 0; padding: 20px 24px; background: var(--bg-tint);
  border-left: 3px solid var(--gold-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.guide-note p { margin: 0; font-size: .99rem; color: var(--text-muted); }
.guide-note p + p { margin-top: 12px; }
.guide-note strong { color: var(--ink); }

/* Tables */
.guide-table-wrap { overflow-x: auto; margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
/* Tables carry more columns than the prose column comfortably fits, so let
   them break out a little wider than the 760px measure on large screens. */
@media (min-width: 1040px) {
  .guide-table-wrap { width: 900px; margin-left: -70px; }
}
table.guide-table { width: 100%; border-collapse: collapse; min-width: 660px; background: #fff; }
table.guide-table th, table.guide-table td {
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--font-sans); font-size: .95rem; line-height: 1.55; vertical-align: top;
}
table.guide-table thead th {
  font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); background: var(--bg-tint); white-space: nowrap;
}
table.guide-table tbody th { font-weight: 600; color: var(--ink); width: 26%; }
/* Five-column tables cannot spare 26% on the row header. */
table.guide-table--wide tbody th { width: auto; white-space: nowrap; }
table.guide-table--wide th, table.guide-table--wide td { padding-left: 14px; padding-right: 14px; }
table.guide-table td { color: var(--text-muted); }
table.guide-table tbody tr:last-child th, table.guide-table tbody tr:last-child td { border-bottom: 0; }

/* Copyable plain-text template */
.guide-template { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.guide-template__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 18px; background: var(--bg-tint); border-bottom: 1px solid var(--line);
}
.guide-template__bar h3 { font-family: var(--font-sans); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.guide-copy {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 14px; cursor: pointer; flex: none;
  transition: border-color .15s ease, color .15s ease;
}
.guide-copy:hover { border-color: var(--gold-soft); color: var(--gold); }
.guide-template pre {
  margin: 0; padding: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.7; color: var(--text); white-space: pre; tab-size: 2;
}

.guide-template-alt {
  margin-top: 16px; padding: 16px 20px;
  background: var(--parchment); border-radius: var(--radius);
  font-family: var(--font-serif); font-size: .97rem; line-height: 1.65; color: var(--text);
}
.guide-body p.guide-template-alt { margin-top: 16px; }

/* Related guides */
.guide-related { max-width: 760px; margin: 0 auto; }
.guide-related h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: 0 0 22px; text-align: center; }
.guide-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide-related-card {
  display: block; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.guide-related-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(11,18,32,.3); border-color: var(--gold-soft); }
.guide-related-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 6px; line-height: 1.3; }
.guide-related-card p { margin: 0; font-family: var(--font-serif); font-size: .88rem; color: var(--text-muted); line-height: 1.55; }

/* In-context product tie-in */
.guide-inkwell { max-width: 760px; margin: 0 auto; }
.guide-inkwell h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.7rem); color: var(--ink); margin: 0 0 14px; }
.guide-inkwell p { margin: 0 0 16px; font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.guide-inkwell p:last-of-type { margin-bottom: 22px; }

.guide-cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Guide FAQ reuses .faq / .faq-item / .faq-q / .faq-a from the homepage */
.guide-faq { max-width: 760px; margin: 0 auto; }
.guide-faq h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--ink); margin: 0; text-align: center; }

@media (max-width: 900px) {
  .learn-cards, .learn-phases, .guide-related-grid { grid-template-columns: 1fr; }
  .guide-body h2 { margin-top: 44px; }
}