/* Forgiveness+ — shared styles
   Palette taken from the logo: ink teal, slate blue, night indigo, forest,
   cream/sand/sage neutrals, charcoal-brown text, gold for actions only. */

:root {
  --ink: #142630;
  --ink-deep: #1B2830;
  --night: #131A2B;
  --night-2: #1C2338;
  --slate: #24333F;
  --forest: #1E4640;
  --cream: #F4F0E6;
  --cream-2: #F8F5ED;
  --sand: #EAE4D6;
  --sage: #DFE6DB;
  --rule: #C3BCAC;
  --text: #2A2724;
  --text-soft: #4A453C;
  --muted: #6B655A;
  --gold: #C9A227;
  --gold-ink: #23201C;
  --measure: 68ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 0.98; margin: 0; }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.25rem); line-height: 1.02; margin: 0; }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.08; margin: 0; }

p { margin: 0 0 1.1rem; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: #9A7B18; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--gold);
  color: var(--gold-ink); padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: min(1400px, 100%); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(3rem, 8vw, 6rem); }
.prose { max-width: var(--measure); }
.grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 850px) {
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .split-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}

.ink { background: var(--ink); color: var(--cream); }
.slate { background: var(--slate); color: var(--cream); }
.night { background: var(--night); color: var(--cream); }
.forest { background: var(--forest); color: var(--cream); }
.sand { background: var(--sand); }
.sage { background: var(--sage); }
.cream-2 { background: var(--cream-2); }
.ink .mono, .slate .mono, .night .mono, .forest .mono { color: rgba(244, 240, 230, 0.72); }
.ink p, .slate p, .night p, .forest p { color: rgba(244, 240, 230, 0.86); }
.edge { border-top: 1px solid var(--rule); }

/* ---------- header ---------- */
.site-head {
  background: var(--ink); color: var(--cream);
  border-bottom: 1px solid rgba(244, 240, 230, 0.14);
  position: sticky; top: 0; z-index: 50;
}
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--cream); }
.brand img { width: 40px; height: 40px; }
.brand span { font-family: "Instrument Serif", Georgia, serif; font-size: 1.6rem; }
.nav { display: none; }
.nav a { text-decoration: none; font-size: 0.95rem; }
@media (min-width: 950px) {
  .nav { display: flex; align-items: center; gap: 1.75rem; }
}
.menu-btn {
  background: transparent; color: var(--cream); border: 1px solid rgba(244, 240, 230, 0.3);
  min-width: 44px; min-height: 44px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
@media (min-width: 950px) { .menu-btn { display: none; } }
.mobile-nav { display: none; flex-direction: column; gap: 0.25rem; padding-bottom: 1rem; }
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav a { text-decoration: none; padding: 0.75rem 0; min-height: 44px; border-bottom: 1px solid rgba(244, 240, 230, 0.15); }

/* ---------- buttons ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.85rem 1.6rem; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
.btn { background: var(--gold); color: var(--gold-ink); }
.btn:hover { background: #B8941F; color: var(--gold-ink); }
.btn-ghost { background: transparent; border: 1px solid currentColor; }

/* ---------- pieces ---------- */
.eyebrow { display: flex; align-items: center; gap: 0.7rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.pill {
  font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.55rem 0.9rem; border-radius: 999px;
  background: rgba(244, 240, 230, 0.08); border: 1px solid rgba(244, 240, 230, 0.24);
}
.card { border: 1px solid var(--rule); background: var(--cream-2); padding: clamp(1.25rem, 3vw, 2rem); }
.card-link { text-decoration: none; color: inherit; display: block; transition: border-color 160ms ease; }
.card-link:hover, .card-link:focus-visible { border-color: var(--text); color: inherit; }
.rows { border-top: 1px solid var(--rule); }
.row { border-bottom: 1px solid var(--rule); padding-block: 1.4rem; }
@media (min-width: 850px) {
  .row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem; }
}
.lede { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; }
blockquote { margin: 0; }
blockquote p { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.25; }
cite { font-style: normal; }

figure { margin: 0; }
.seal { width: clamp(110px, 18vw, 190px); height: auto; }
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); }
.shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); }

/* ---------- forms ---------- */
form { display: flex; flex-direction: column; gap: 0.75rem; }
label { font-size: 0.9rem; }
input[type="email"], input[type="text"], textarea, select {
  width: 100%; min-height: 52px; padding: 0.75rem 1rem; font: inherit;
  border: 1px solid var(--rule); background: #FFFFFF; color: var(--text); border-radius: 0;
}
.ink input, .slate input, .night input, .forest input { background: transparent; color: var(--cream); border-color: var(--cream); }
.fineprint { font-size: 0.82rem; color: var(--muted); }
.ink .fineprint, .slate .fineprint, .night .fineprint, .forest .fineprint { color: rgba(244, 240, 230, 0.72); }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--cream); padding-block: clamp(3rem, 6vw, 4.5rem); }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 850px) { .foot-grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); } }
.foot-col { display: flex; flex-direction: column; gap: 0.6rem; }
.foot-col a { text-decoration: none; font-size: 0.95rem; min-height: 32px; }
.foot-legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 240, 230, 0.2);
  font-size: 0.82rem; line-height: 1.6; color: rgba(244, 240, 230, 0.72);
  display: grid; gap: 1rem;
}
@media (min-width: 850px) { .foot-legal { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ---------- Flodesk embeds ----------
   The form renders inside Flodesk's own styles. These rules only control the
   container so the embed sits on our section grounds instead of a white box. */
.fd-embed { margin-top: 0.75rem; background: transparent; }
.fd-embed iframe { width: 100% !important; border: 0; }

/* ---------- presence ---------- */
.site-head { box-shadow: inset 0 -1px 0 rgba(201, 162, 39, 0.35); }
section > .wrap > h2 { max-width: 22ch; }
.ink h2, .slate h2, .night h2, .forest h2 { max-width: 24ch; }
.card { transition: transform 160ms ease, border-color 160ms ease; }
.card-link:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card-link:hover { transform: none; } }
.btn { letter-spacing: 0.01em; }
figcaption h3 { margin-top: 0.35rem; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5rem; }

/* ---------- extended grounds ---------- */
.teal { background: #1D4A4E; color: var(--cream); }
.clay { background: #A85C3A; color: var(--cream); }
.plum { background: #5A3A52; color: var(--cream); }
.ink-deep { background: var(--ink-deep); color: var(--cream); }
.teal p, .clay p, .plum p, .ink-deep p { color: rgba(244, 240, 230, 0.88); }
.teal .mono, .clay .mono, .plum .mono, .ink-deep .mono { color: rgba(244, 240, 230, 0.75); }
.teal input, .clay input, .plum input, .ink-deep input { background: transparent; color: var(--cream); border-color: var(--cream); }

/* ---------- vertical rhythm ---------- */
h1 + p, h2 + p, h3 + p { margin-top: 0.85rem; }
.mono + h1, .mono + h2, .mono + h3 { margin-top: 0.6rem; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; max-width: var(--measure); }
.grid p, .rows p, .card p { max-width: none; }
section > .wrap > p + .grid { margin-top: 2rem; }
.lede { margin-top: 1rem; }

/* ---------- mobile refinements ---------- */
@media (max-width: 849px) {
  body { font-size: 1rem; line-height: 1.65; }
  h1 { line-height: 1.02; letter-spacing: -0.005em; }
  h2 { line-height: 1.06; }
  section { padding-block: 3rem; }
  .rows .row { display: block; }
  .rows .row > * + * { margin-top: 0.5rem; }
  .pills { gap: 0.4rem; }
  .pill { font-size: 0.65rem; padding: 0.5rem 0.75rem; }
  .btn, .btn-ghost { width: 100%; }
  figure + div, .grid > figure { margin-top: 0.5rem; }
}

/* ---------- embed fallback ---------- */
.fd-embed:empty::before {
  content: attr(data-fallback);
  display: block; padding: 1rem 0; font-size: 0.95rem; opacity: 0.85;
}

/* ---------- footer policy row ---------- */
.foot-policies {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  margin-top: 3.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(244, 240, 230, 0.2);
}
.foot-policies a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(244, 240, 230, 0.7); text-decoration: none;
  min-height: 30px; display: inline-flex; align-items: center;
}
.foot-policies a:hover { color: var(--gold); }
.foot-legal { margin-top: 1.75rem; font-size: 0.78rem; }

/* ---------- active nav ---------- */
.nav a[aria-current="page"], .mobile-nav a[aria-current="page"] {
  color: var(--gold); text-decoration: underline; text-underline-offset: 6px;
}

/* ---------- book tiles ---------- */
.book { display: flex; flex-direction: column; gap: 1rem; }
.book .cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--cream-2);
  border: 1px solid var(--rule);
  padding: clamp(0.75rem, 2vw, 1.5rem);
}
.sand .book .cover { background: var(--cream); }
.book figcaption { display: flex; flex-direction: column; gap: 0.4rem; }
.book figcaption .mono { min-height: 2.2em; }
.book figcaption h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.book figcaption p { font-size: 0.95rem; color: var(--text-soft); }
@media (min-width: 850px) {
  .grid.g-4 > .book { align-content: start; }
}

/* ============================================================
   Mobile refinement — breathing room, not just reflow
   ============================================================ */
@media (max-width: 849px) {
  :root { --pad: 1.4rem; }

  /* A smaller, steadier type scale. Huge headlines on a 390px screen
     leave no room for anything else. */
  body { font-size: 1.0625rem; line-height: 1.7; }
  h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); line-height: 1.06; }
  h2 { font-size: clamp(1.65rem, 6vw, 2.2rem); line-height: 1.12; }
  h3 { font-size: 1.25rem; line-height: 1.22; }
  .lede { font-size: 1.2rem; line-height: 1.45; }
  section .serif[style*="font-size"] { font-size: 1.5rem !important; line-height: 1.2; }

  /* Sections get real space above and below, and stop stacking
     edge to edge. */
  section { padding-block: 3.25rem; }
  section + section { border-top: 0; }
  .grid { gap: 2.25rem; }
  .grid.g-2, .grid.g-3, .grid.g-4 { gap: 2rem; }

  /* Headline, then a beat, then the paragraph. */
  h1 + p, h2 + p { margin-top: 0.9rem; }
  .mono + h1, .mono + h2 { margin-top: 0.75rem; }
  p + .grid, p + .rows { margin-top: 1.5rem; }

  /* Cards breathe instead of hugging their text. */
  .card { padding: 1.5rem 1.35rem; }
  .card h3 { margin-bottom: 0.15rem; }

  /* Row lists: stacked, with space between label and value. */
  .rows { border-top-width: 1px; }
  .row { padding-block: 1.25rem; }
  .row .mono { display: block; margin-bottom: 0.35rem; }

  /* Two book covers per row rather than one enormous one. */
  .grid.g-4 > .book { }
  section .grid.g-4:has(.book) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .book figcaption h3 { font-size: 1.05rem; }
  .book figcaption p { font-size: 0.88rem; line-height: 1.5; }
  .book figcaption .mono { min-height: 0; font-size: 0.66rem; }

  /* Header: shorter, so it doesn't eat the screen. */
  .head-in { min-height: 60px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 1.35rem; }

  /* Buttons stack full width with room around them. */
  .btn, .btn-ghost { width: 100%; margin-block: 0.15rem; }
  p:has(> .btn) { display: flex; flex-direction: column; gap: 0.6rem; }

  /* Pills read as metadata, not as a wall. */
  .pills { gap: 0.4rem; margin-top: 1.25rem; }
  .pill { font-size: 0.62rem; padding: 0.45rem 0.7rem; }

  /* Quotes scale down so one fits on screen. */
  blockquote p { font-size: 1.15rem; line-height: 1.38; }
  blockquote.card { padding: 1.35rem 1.25rem; }

  /* Images: shorter so text follows sooner. */
  .shot { aspect-ratio: 4 / 3; }
  .portrait { aspect-ratio: 1 / 1; }
  .seal { width: 96px; }

  /* Forms sit apart from what precedes them. */
  form { margin-top: 0.5rem; gap: 0.9rem; }
  input, select, textarea { font-size: 16px; }  /* stops iOS zooming on focus */

  /* Footer: clear columns, generous gaps, quiet legal type. */
  .foot-grid { gap: 2.25rem; }
  .foot-col a { min-height: 40px; display: flex; align-items: center; }
  .foot-policies { gap: 0.15rem 1rem; margin-top: 2.5rem; }
  .foot-policies a { min-height: 34px; }
  .foot-legal { font-size: 0.75rem; line-height: 1.65; gap: 1.25rem; }
}

@media (max-width: 420px) {
  h1 { font-size: 2rem; }
  section { padding-block: 2.75rem; }
  section .grid.g-4:has(.book) { grid-template-columns: 1fr; }
  .book .cover { aspect-ratio: 4 / 5; }
}

/* ============================================================
   Mobile pass 2 — footer legal, embedded forms, hero rhythm
   ============================================================ */

/* Flodesk renders its own white card. Give it a frame that reads as
   intentional on dark grounds instead of a floating slab. */
.fd-embed { border-radius: 2px; overflow: hidden; }
.ink .fd-embed, .slate .fd-embed, .night .fd-embed,
.forest .fd-embed, .teal .fd-embed, .plum .fd-embed,
.clay .fd-embed, .ink-deep .fd-embed {
  outline: 1px solid rgba(244, 240, 230, 0.25);
  outline-offset: 0;
}

@media (max-width: 849px) {
  /* Policy links: one per line, quiet, with room to tap.
     Running them together underlined made a wall of text. */
  .foot-policies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 1rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
  }
  .foot-policies a {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: rgba(244, 240, 230, 0.62);
    min-height: 38px;
    padding-right: 0.5rem;
  }
  .foot-policies a:active { color: var(--gold); }

  /* Legal block: smaller, looser, and clearly secondary. */
  .foot-legal { font-size: 0.72rem; line-height: 1.7; color: rgba(244, 240, 230, 0.6); }
  .foot-legal strong { color: rgba(244, 240, 230, 0.85); }

  /* Hero: give the headline air above and below rather than
     letting it sit against the nav and the paragraph. */
  section:first-of-type { padding-block: 2.5rem 3rem; }
  h1 { margin-bottom: 0.25rem; }

  /* Eyebrow lines wrap awkwardly in caps; tighten the tracking. */
  .mono { letter-spacing: 0.05em; font-size: 0.68rem; }

  /* Tall images crop shorter so copy isn't pushed off screen. */
  .split > figure img, .split-r > figure img { aspect-ratio: 5 / 4; }
}

@media (max-width: 420px) {
  .foot-policies { grid-template-columns: 1fr; }
  .foot-policies a { min-height: 34px; }
}

/* ---------- "What participants receive" ---------- */
.receive {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 850px) {
  .receive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
}
.receive-col { display: flex; flex-direction: column; gap: 1rem; }
.receive-head {
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--text);
  color: var(--text);
}
.receive-list { list-style: none; margin: 0; padding: 0; }
.receive-list li {
  padding: 1rem 0 1rem 2.25rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.receive-list li strong { color: var(--text); font-weight: 600; }
.receive-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45rem;
  width: 14px; height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.receive-note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 56ch;
}
@media (max-width: 849px) {
  .receive-list li { padding: 0.85rem 0 0.85rem 2rem; font-size: 0.95rem; }
  .receive-list li::before { top: 1.25rem; }
}

/* ---------- "How to DETACH" lockup ---------- */
.howto {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6em;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.75;
  margin-bottom: 0.15em;
}
h1 .howto { font-size: 0.26em; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; margin-bottom: 0.5em; }

/* ---------- pull quotes ---------- */
blockquote.pull {
  margin: 2.5rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--gold);
  max-width: var(--measure);
}
blockquote.pull p {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.25;
  font-style: italic;
  margin: 0;
}

/* ---------- in-article safety callout ----------
   Deliberately quiet: it must be findable by the reader who needs it
   without hijacking the article for everyone else. */
.safety {
  max-width: var(--measure);
  background: var(--sage);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--gold);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.safety p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text-soft); }
.safety .safety-label { color: var(--muted); }
.safety .safety-lines { color: var(--text); }
.safety .safety-lines strong { font-weight: 600; }

/* ============================================================
   Article — one continuous reading system.
   One measure, one rhythm, no section-by-section restarts.
   ============================================================ */
.article { background: var(--cream); }

.article-head {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
}
.article-head h1 {
  max-width: 19ch;
  font-size: clamp(2.3rem, 6vw, 4.25rem);
  line-height: 1.02;
  margin: 0.8rem 0 0;
}
.article-kicker { color: rgba(244, 240, 230, 0.7); }
.article-byline {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 2rem 0 0; font-size: 0.95rem; color: rgba(244, 240, 230, 0.8);
}
.article-byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.article-byline strong { color: var(--cream); font-weight: 500; }

/* The body: a single column, one type size, steady leading. */
.article-body {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
  display: flow-root;
}
.article-body > * { max-width: 63ch; margin-inline: auto; }
.article-body p {
  font-size: 1.125rem;
  line-height: 1.78;
  color: var(--text);
  margin: 0 0 1.45rem;
}
.article-body p em { font-style: italic; }

/* Opening line carries the weight instead of a separate lede block. */
.lede-line {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.55em;
  line-height: 1.1;
  display: inline;
}

/* Section headings, numbered, with space above and a hairline. */
.article-body h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.08;
  margin: 3.25rem 0 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.h-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  flex: none;
  position: relative;
  top: -0.35em;
}

/* Questions: tight pairing of number and text, no wide gutter. */
.q-list {
  list-style: none;
  margin: 1.75rem auto 2.25rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.q-list li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.85rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}
.q-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.q-text { font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.q-list li:last-child .q-text { font-weight: 600; }

/* Pull quotes break the column without leaving it. */
.article-body blockquote.pull {
  margin: 2.75rem auto;
  padding-left: 1.5rem;
  border-left: 3px solid var(--gold);
}
.article-body blockquote.pull p {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.24;
  font-style: italic;
  margin: 0;
}

.article-body .safety { margin: 2.75rem auto; }
.article-body .safety p { font-size: 1rem; line-height: 1.65; }

.signoff {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 1.5rem !important;
  color: var(--text);
  margin-top: 2.25rem !important;
}

.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.share .mono { margin-right: 0.25rem; }
.share a {
  font-size: 0.9rem; text-decoration: none;
  border: 1px solid var(--rule); padding: 0.55rem 1rem;
  min-height: 40px; display: inline-flex; align-items: center;
}
.share a:hover { border-color: var(--text); }

.article-end { padding-block: clamp(3rem, 7vw, 5rem); }

@media (max-width: 849px) {
  .article-body > * { max-width: none; }
  .article-body p { font-size: 1.05rem; line-height: 1.72; margin-bottom: 1.25rem; }
  .article-body h2 { margin-top: 2.5rem; padding-top: 1.35rem; gap: 0.7rem; }
  .q-list li { grid-template-columns: 2rem minmax(0, 1fr); padding: 0.9rem 0; }
  .q-text { font-size: 1rem; }
  .share a { flex: 1 1 auto; justify-content: center; }
}

/* ---------- article extras: figures, evidence list ---------- */
.article-figure { margin: 2.5rem auto; }
.article-figure img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--rule);
}
.ev-list .q-text { display: flex; flex-direction: column; gap: 0.35rem; }
.ev-list .q-text strong { font-size: 1.15rem; line-height: 1.25; font-weight: 400; font-family: "Instrument Serif", Georgia, serif; }
.ev-src, .ev-use {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.ev-use { text-transform: none; letter-spacing: 0.02em; font-family: inherit; font-size: 0.95rem; color: var(--text-soft); }
.ev-list li { padding-block: 1.35rem; }

/* Numbered lists inside articles keep the same alignment as the question list */
.article-body .q-list li strong { font-weight: 600; }

/* ---------- article: belt-and-braces spacing if flex is unavailable ---------- */
.h-num { margin-right: 0.85rem; }
.q-list { list-style: none; }
.q-list li { list-style: none; }

/* ============================================================
   Article footer — sign-off, share, next, and the book.
   Each gets its own band instead of stacking on the column.
   ============================================================ */
.signoff {
  margin: 3rem auto 0 !important;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-size: 1.6rem !important;
}
.share {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.share .mono { flex: 1 0 100%; margin-bottom: 0.35rem; color: var(--muted); }
.share a {
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 0.6rem 1.15rem;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
}
.share a:hover, .share a:focus-visible { border-color: var(--text); background: var(--cream-2); }

/* Read next */
.read-next { background: var(--sand); border-top: 1px solid var(--rule); }
.read-next .wrap { padding-block: clamp(2.5rem, 6vw, 4rem); }
.read-next h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.next-grid { display: grid; gap: 1rem; }
@media (min-width: 850px) { .next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.next-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--cream); border: 1px solid var(--rule);
  padding: 1.5rem; transition: border-color 160ms ease, transform 160ms ease;
}
.next-card:hover { border-color: var(--text); transform: translateY(-2px); }
.next-card .mono { color: var(--muted); }
.next-card h3 { font-size: 1.35rem; line-height: 1.2; margin: 0.5rem 0 0.4rem; }
.next-card p { font-size: 0.95rem; line-height: 1.6; color: var(--text-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) { .next-card:hover { transform: none; } }

/* The book band at the end of a post */
.article-end { padding-block: clamp(3rem, 7vw, 5rem); }
.article-end h2 { margin-bottom: 0.75rem; }
.article-end .card { display: flex; flex-direction: column; gap: 0.75rem; }
.article-end .card h3 { margin: 0; }


/* ============================================================
   Article, refined — quieter structure, more air, fewer signals
   ============================================================ */

/* Headings: a short gold rule instead of a number. */
.article-body h2 {
  display: block;
  border-top: 0;
  padding-top: 0;
  margin: 3.5rem 0 1.5rem;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  max-width: 24ch;
}
.article-body h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.1rem;
}
.h-num { display: none; }

/* Questions: a quiet sequence, no numerals, generous room. */
.q-list {
  list-style: none;
  margin: 2rem auto 2.5rem;
  padding: 0;
  border-top: 0;
}
.q-list li {
  display: block;
  padding: 1.35rem 0 1.35rem 1.5rem;
  border-bottom: 0;
  border-left: 2px solid var(--rule);
  margin-bottom: 0.35rem;
}
.q-list li:hover, .q-list li:focus-within { border-left-color: var(--gold); }
.q-text {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  line-height: 1.32;
  color: var(--text);
}
.q-list li:last-child { border-left-color: var(--gold); }
.q-list li:last-child .q-text { font-weight: 400; }

/* Evidence list keeps its sans body but loses the numerals. */
.ev-list li { padding-left: 1.5rem; }
.ev-list .q-text { font-family: inherit; font-size: 1rem; }
.ev-list .q-text strong { font-size: 1.3rem; }

/* Paragraph rhythm: a touch more room between thoughts. */
.article-body p { margin-bottom: 1.6rem; }
.article-body p + h2 { margin-top: 3.75rem; }

/* Safety note: a held space, not a warning box. */
.safety {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.75rem;
  margin: 3rem auto;
  gap: 1rem;
}
.safety-label {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}
.safety p { font-size: 1.05rem; line-height: 1.7; }
.safety .safety-lines { color: var(--text); }

/* Pull quotes: centered weight, no left rule competing with the safety note. */
.article-body blockquote.pull {
  border-left: 0;
  padding: 0;
  margin: 3rem auto;
  text-align: left;
}
.article-body blockquote.pull p {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.2;
  font-style: normal;
  color: var(--text);
}
.article-body blockquote.pull p::before {
  content: "";
  display: block;
  width: 40px; height: 2px;
  background: var(--gold);
  margin-bottom: 1.25rem;
}

@media (max-width: 849px) {
  .article-body h2 { margin: 2.75rem 0 1.25rem; }
  .article-body p { margin-bottom: 1.35rem; }
  .q-list li { padding: 1.1rem 0 1.1rem 1.1rem; }
  .safety { padding-left: 1.25rem; margin: 2.5rem auto; }
}

/* Orientation note: what this piece contains, before you commit to it. */
.article-note {
  max-width: 54ch;
  margin: 1.75rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(201, 162, 39, 0.6);
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(244, 240, 230, 0.78);
}

/* ============================================================
   Article column — one measure for everything, including the header.
   Children fill the column; nothing centers itself independently.
   ============================================================ */
.article .wrap,
.article-head .wrap,
.article-body {
  width: min(100%, 46rem);   /* ~66 characters at the body size */
  margin-inline: auto;
  padding-inline: var(--pad);
}
.article-body > *,
.article-body p,
.article-body h2,
.article-body .q-list,
.article-body .safety,
.article-body blockquote.pull,
.article-body .share,
.article-body .signoff,
.article-body .article-figure {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.article-body h2 { max-width: 20ch; }
.article-head h1 { max-width: none; }
.article-note { max-width: none; }

/* Quotes and questions align to the column edge, not to a private center. */
.article-body blockquote.pull { margin-block: 3rem; }
.q-list { margin-block: 2rem 2.5rem; }
.safety { margin-block: 3rem; }

/* The end matter keeps the site's wider grid, for contrast with the column. */
.read-next .wrap, .article-end .wrap { width: min(1400px, 100%); }

/* ---------- article header: proportion and air ---------- */
.article-head { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.5rem); }
.article-head h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.04; }
.article-kicker { font-size: 0.72rem; }
.article-byline { margin-top: 2.25rem; }

/* ---------- first paragraph: a settled opening ---------- */
.article-body > p:first-of-type { margin-top: 0; }
.lede-line { font-size: 1.45em; line-height: 1.15; }

/* ---------- questions: even rhythm, aligned rules ---------- */
.q-list li {
  padding: 1.25rem 0 1.25rem 1.4rem;
  margin: 0;
  border-left: 2px solid var(--rule);
}
.q-list li + li { margin-top: 0.75rem; }
.q-text { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.35; }

/* ---------- safety note: same indent language as the questions ---------- */
.safety { padding: 0.25rem 0 0.25rem 1.4rem; }
.safety-label { font-size: 1.3rem; margin-bottom: 0.25rem; }

/* ---------- pull quotes: full column, left aligned ---------- */
.article-body blockquote.pull p { max-width: 24ch; }

/* ---------- share row: tidy, left aligned ---------- */
.share { justify-content: flex-start; }
.share .mono { flex: 1 0 100%; }

/* ---------- portraits: keep the head in frame ---------- */
.portrait {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;   /* bias toward the top so foreheads survive the crop */
}
@media (max-width: 849px) {
  .portrait { aspect-ratio: 4 / 5; object-position: 50% 10%; }
}

/* ---------- numbered rows: close the gap between figure and text ---------- */
.row.row-num {
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: baseline;
}
.row > .mono:first-child { white-space: nowrap; }

/* Fallback for browsers without :has() — the rows still read, just wider. */


/* Two-column "modules / format" blocks keep their own rhythm */
.grid.g-2 > div > .rows { margin-top: 1rem; }

/* ============================================================
   COHESION PASS — one type system, one set of signals.
   Everything below overrides earlier experiments on purpose.
   ============================================================ */

/* 1. Opening line: same typeface as the body, carried by weight.
      The serif-inline treatment read as a mistake at paragraph size. */
.lede-line {
  font-family: inherit;
  font-size: 1.12em;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* 2. Eyebrows behave identically everywhere: same size, same color,
      same distance from what they introduce. */
.mono,
.article-kicker,
.foot-col > .mono,
.next-card .mono {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.mono + h1, .mono + h2, .mono + h3, .mono + p { margin-top: 0.7rem; }

/* 3. One heading rhythm across marketing pages and articles. */
section > .wrap > h2 { margin-bottom: 0.75rem; }
section > .wrap > h2 + p { margin-bottom: 1.5rem; }

/* 4. Links: one treatment. Body links underline, navigation doesn't,
      everything lands on gold when touched. */
.article-body a,
section p a,
.rows a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: #9A7B18; }
.ink a:hover, .slate a:hover, .night a:hover, .forest a:hover,
.teal a:hover, .plum a:hover, .clay a:hover, .ink-deep a:hover { color: var(--gold); }

/* 5. Buttons: one size, one weight, one hover. */
.btn, .btn-ghost {
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 0;
}

/* 6. Cards: one border, one hover, no drift between page types. */
.card, .next-card, .card-link {
  border-radius: 0;
  transition: border-color 160ms ease, transform 160ms ease;
}

/* 7. Rules and dividers: one weight, one color, everywhere. */
hr, .rows, .row, .edge, .share, .signoff, .foot-policies, .foot-legal {
  border-color: var(--rule);
}
.ink .rows, .slate .rows, .night .rows, .forest .rows,
.ink .row, .slate .row, .night .row, .forest .row { border-color: rgba(244, 240, 230, 0.22); }

/* 8. Quiet is a design decision: nothing moves unless the reader asks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 9. Focus: visible on every ground, never removed. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 1px; }

/* 10. Selection: warm, not system blue. */
::selection { background: rgba(201, 162, 39, 0.28); color: var(--text); }
.ink ::selection, .slate ::selection, .night ::selection,
.forest ::selection, .teal ::selection, .plum ::selection { color: var(--cream); }

/* 11. Named type roles, replacing inline sizes. */
.h-sm { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.15; }
.h-md { font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.12; }
.lead-serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
}
.name-line {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 0 0 0.25rem;
}
.signoff-inline {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  margin: 0;
}
.price-figure {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 3.4rem);
  line-height: 1;
  margin: 0;
}

/* ============================================================
   Fixes from the deployed screenshots
   ============================================================ */

/* 1. Empty Flodesk container was rendering its fallback inside a bordered
      box, which read as a broken input. When empty it's a quiet note;
      the frame only appears once the real form is in there. */
.fd-embed { outline: 0 !important; }
.fd-embed:empty {
  border-left: 2px solid rgba(201, 162, 39, 0.55);
  padding: 0.35rem 0 0.35rem 0.9rem;
}
.fd-embed:empty::before {
  content: attr(data-fallback);
  display: block;
  font-size: 0.92rem;
  line-height: 1.55;
  opacity: 0.8;
}
.fd-embed:not(:empty) {
  background: var(--cream);
  padding: 0.25rem;
}

/* 2. Hero sections were stretching to fill, leaving dead space under the
      right-hand card. Content aligns to the top and the section only takes
      the height it needs. */
section.ink > .wrap.split,
section.teal > .wrap.split,
section.forest > .wrap.split,
section.slate > .wrap.split,
section.night > .wrap.split,
section.plum > .wrap.split,
section.clay > .wrap.split,
section.ink-deep > .wrap.split,
section.ink > .wrap.split-r,
section.teal > .wrap.split-r { align-items: start; }

/* Interior page heroes don't need homepage-scale padding. */
main > section:first-of-type { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

/* 3. Status and waitlist cards sit at the top of their column and keep a
      sensible width, instead of floating in a tall empty field. */
.card { align-self: start; }
@media (min-width: 850px) {
  .split > .card, .split-r > .card { max-width: 30rem; margin-left: auto; }
}

/* 4. Long program titles: allow a tighter measure so they don't run to five
      lines before the supporting copy appears. */
section > .wrap.split h1 { max-width: 16ch; }

/* Tighten the handoff from masthead to first line. The old value read as a gap
   rather than a breath. */
.article-body { padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(3rem, 7vw, 5rem); }
.article-head { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.article-note { margin-top: 1.5rem; font-size: 0.95rem; }



/* credential line near the purchase decision */
.creds {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 60ch;
}
.forest .creds, .ink .creds, .slate .creds { color: rgba(244, 240, 230, 0.86); }

/* book purchase links */
.buy { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.buy a {
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--text); color: var(--text);
  padding: 0.5rem 0.85rem; min-height: 40px;
  display: inline-flex; align-items: center;
}
.buy a.primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.buy a:hover { border-color: var(--gold); color: var(--text); }


/* Flodesk: the forms carry their own colors now (set per form in Flodesk).
   The site only spaces the container and guarantees the button reads as a button. */
.fd-embed { margin-top: 0.75rem; }
.fd-embed:not(:empty) { background: transparent; padding: 0; }
.fd-embed button[type="submit"],
.fd-embed input[type="submit"] {
  background-color: #C9A227 !important;
  color: #23201C !important;
  border-color: #C9A227 !important;
  font-weight: 600 !important;
}
.fd-embed button[type="submit"]:hover,
.fd-embed input[type="submit"]:hover { background-color: #B8931F !important; }

/* Word-labeled rows: label on its own column wide enough for a phrase,
   stacking above the text on narrow screens. */
.row:not(.row-num) { column-gap: 1.5rem; }
@media (min-width: 850px) {
  .rows .row:not(.row-num) { grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); }
}
@media (max-width: 849px) {
  .rows .row:not(.row-num) { grid-template-columns: 1fr; row-gap: 0.35rem; }
}

/* ============================================================
   Pricing tiers
   ============================================================ */
.tiers { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 850px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .tiers.tiers-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tier {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.sand .tier, .sage .tier { background: var(--cream); }
.tier-live { border: 2px solid var(--gold); background: #FBF8F0; }
.tier-price {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1; margin: 0.25rem 0 0;
}
.tier-plan { font-size: 0.9rem; color: var(--text-soft); margin: 0; }
.tier-when {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.tier-lead { font-size: 1rem; line-height: 1.6; color: var(--text-soft); margin: 0.25rem 0 0.25rem; }
.tier-list { list-style: none; padding: 0; margin: 0.25rem 0 0.75rem; flex: 1; }
.tier-list li {
  position: relative; padding: 0.55rem 0 0.55rem 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem; line-height: 1.5; color: var(--text);
}
.tier-list li::before {
  content: ""; position: absolute; left: 0.1rem; top: 1rem;
  width: 10px; height: 6px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.tier-list li.tier-plus { background: rgba(201, 162, 39, 0.08); padding-left: 1.6rem; }
.tier .btn, .tier .btn-ghost { width: 100%; justify-content: center; text-align: center; }
.tier-note { margin-top: 1.5rem; max-width: 62ch; font-size: 0.95rem; color: var(--text-soft); }

/* two prices side by side in the program hero card */
.price-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.5rem 0 0.75rem; }
.price-pair .price-figure { font-size: clamp(2.2rem, 4.5vw, 3rem); }
.price-pair .mono { margin-top: 0.35rem; }

/* ---------- Notes Journal ---------- */
.journal-hero { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--rule); }
.ink .journal-hero { border-color: rgba(244, 240, 230, 0.2); }
.journal-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.journal-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #fff; }
.journal-soon { color: var(--gold); }
@media (max-width: 849px) {
  .journal-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.5rem; }
}

/* ============================================================
   Alignment pass
   ============================================================ */

/* Rows: the narrow label column is only for short mono labels.
   Question-and-answer rows (FAQ, "for you if") get the balanced split back. */
@media (min-width: 850px) {
  .rows .row:not(.row-num) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 2.5rem; }
  .rows .row:not(.row-num):has(> .mono:first-child) { grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); column-gap: 1.5rem; }
  .rows .row > h3 { margin: 0; }
}

/* Split sections: text beside a card or form aligns to the top edge,
   so both columns start on the same line. Text beside an image stays centered. */
.split, .split-r { align-items: start; }
.split:has(> figure), .split-r:has(> figure) { align-items: center; }

/* Book captions: every title starts on the same line across the row. */
.book figcaption .mono { min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book .buy { margin-top: 0.5rem; }

/* Question rows inside a half-width column stack: heading above answer.
   Rows with short mono labels keep their label column. */
.split > div > .rows .row:not(.row-num):not(:has(> .mono:first-child)),
.split-r > div > .rows .row:not(.row-num):not(:has(> .mono:first-child)) { display: block; }
.split > div > .rows .row > h3, .split-r > div > .rows .row > h3 { margin: 0 0 0.5rem; }
.split > .rows > .row:not(.row-num):not(:has(> .mono:first-child)),
.split-r > .rows > .row:not(.row-num):not(:has(> .mono:first-child)) { display: block; }
.split > .rows > .row > h3, .split-r > .rows > .row > h3 { margin: 0 0 0.5rem; }

/* FAQ accordions: the summary spans the full row, with "Open" at the far edge. */
details.row, .rows details.row { display: block !important; }
details.row > summary { width: 100%; }

/* ============================================================
   Sticky behavior
   ============================================================ */

/* Anything a link jumps to lands below the sticky header, not under it. */
[id] { scroll-margin-top: 88px; }
@media (max-width: 849px) { [id] { scroll-margin-top: 72px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Phone-only action bar on program pages: appears once the hero has scrolled away,
   disappears while the pricing or waitlist is already on screen. */
.sticky-cta { display: none; }
@media (max-width: 849px) {
  .sticky-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: #142630; border-top: 1px solid rgba(201, 162, 39, 0.4);
    transform: translateY(110%); transition: transform 220ms ease;
  }
  .sticky-cta.is-on { transform: translateY(0); }
  .sticky-cta-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 240, 230, 0.82);
  }
  .sticky-cta .btn { width: auto; min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.92rem; margin: 0; }
  body:has(.sticky-cta.is-on) .site-foot { padding-bottom: 4.5rem; }
}
@media (max-width: 849px) and (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

@media (max-width: 849px) { .sticky-cta .btn { white-space: nowrap; flex: none; } .sticky-cta-label { flex: 1; } }

/* ============================================================
   Buttons: one considered hover, everywhere.
   Gold deepens and lifts a hair; outlines fill; nothing jumps.
   ============================================================ */
.btn, .btn-ghost, .buy a, .share a, .tier .btn, .tier .btn-ghost, .sticky-cta .btn, .nav .btn {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease, transform 180ms ease;
  text-decoration: none;
}
.btn {
  border: 1px solid var(--gold);
  box-shadow: 0 1px 0 rgba(35, 32, 28, 0.08);
}
.btn:hover, .btn:focus-visible {
  background: #B8931F; border-color: #B8931F; color: var(--gold-ink);
  box-shadow: 0 6px 18px -8px rgba(154, 123, 24, 0.55);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(35, 32, 28, 0.08); }

/* Outline buttons fill with the text color on light grounds... */
.btn-ghost { border: 1px solid var(--text); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--text); color: var(--cream); border-color: var(--text);
  transform: translateY(-1px);
}
/* ...and with cream on dark grounds. */
.ink .btn-ghost, .slate .btn-ghost, .night .btn-ghost, .forest .btn-ghost,
.teal .btn-ghost, .plum .btn-ghost, .clay .btn-ghost, .ink-deep .btn-ghost {
  border-color: rgba(244, 240, 230, 0.7); color: var(--cream);
}
.ink .btn-ghost:hover, .slate .btn-ghost:hover, .night .btn-ghost:hover, .forest .btn-ghost:hover,
.teal .btn-ghost:hover, .plum .btn-ghost:hover, .clay .btn-ghost:hover, .ink-deep .btn-ghost:hover {
  background: var(--cream); color: var(--ink); border-color: var(--cream);
}

/* Small format buttons on book tiles and the share row. */
.buy a:hover, .buy a:focus-visible, .share a:hover, .share a:focus-visible {
  background: var(--text); color: var(--cream); border-color: var(--text);
}
.buy a.primary:hover, .buy a.primary:focus-visible {
  background: #B8931F; border-color: #B8931F; color: var(--gold-ink);
}

/* Cards that are links lift gently and pick up a gold edge. */
.card-link, .next-card { transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.card-link:hover, .next-card:hover, .card-link:focus-visible, .next-card:focus-visible {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(20, 38, 48, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn-ghost:hover, .card-link:hover, .next-card:hover { transform: none; }
}

/* ============================================================
   Balance and symmetry
   ============================================================ */

/* Page heroes: heading and card share a center line, so leftover space
   divides evenly above and below instead of pooling under the card. */
main > section:first-of-type > .wrap.split,
main > section:first-of-type > .wrap.split-r { align-items: center; }

/* Text beside a photograph centers on it (this rule was being outranked). */
main section > .wrap.split:has(> figure),
main section > .wrap.split-r:has(> figure) { align-items: center; }

/* Where one column is much shorter, it travels with the reader (set by layout.js). */
@media (min-width: 850px) {
  .wrap.split > [data-stick], .wrap.split-r > [data-stick] { position: sticky; top: 104px; }
}

/* The tile photo in a card grid matches the cards beside it. */
.grid > figure { margin: 0; }
.grid > figure > img.shot { height: 100%; min-height: 100%; object-fit: cover; }

/* Short explanation under a list item (The Trigger Tracker App). */
.li-note {
  display: block; margin-top: 0.3rem;
  font-size: 0.86rem; line-height: 1.5; color: var(--text-soft);
}
.ink .li-note, .slate .li-note, .night .li-note, .forest .li-note { color: rgba(244, 240, 230, 0.72); }

/* Hero cards center with the heading (an older rule pinned cards to the top). */
main > section:first-of-type > .wrap.split > .card,
main > section:first-of-type > .wrap.split-r > .card,
main > section:first-of-type > .wrap.split > div,
main > section:first-of-type > .wrap.split-r > div { align-self: center; }

/* In a half-width column there isn't room for a label column: every row stacks,
   label above text. Full-width rows keep their two columns. */
@media (min-width: 850px) {
  .split .rows .row:not(.row-num), .split-r .rows .row:not(.row-num) { display: block; }
  .split .rows .row > .mono:first-child, .split-r .rows .row > .mono:first-child { margin-bottom: 0.4rem; }
}

/* Cards in a row share one height, so the row ends on a clean line. */
.grid.g-2 > .card, .grid.g-3 > .card, .grid.g-4 > .card,
.grid.g-2 > .card-link, .grid.g-3 > .card-link, .grid.g-4 > .card-link { align-self: stretch; }

/* Notes Journal tip under the program price */
.journal-tip { text-align: center; margin-top: 0.75rem; }
.ink .journal-tip a, .forest .journal-tip a, .teal .journal-tip a { color: var(--gold); }
.planner input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ============================================================
   Breadcrumbs, book offer, and forms inside cards
   ============================================================ */
.crumbs { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1.25rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.crumbs span { color: rgba(244, 240, 230, 0.6); }

/* "How to" is a small lead-in above the title, never a second headline. */
.howto { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.78; font-size: 0.3em; margin-bottom: 0.45em; }
h3 .howto { font-size: 0.5em; letter-spacing: 0.12em; }

/* Book offer at the end of an article: two balanced halves, one rule between them. */
.book-offer { display: grid; gap: 2.5rem; max-width: 68rem; }
@media (min-width: 850px) {
  .book-offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
  .book-offer-form { border-left: 1px solid rgba(201, 162, 39, 0.45); padding-left: 3rem; }
}
.book-offer .lockup { font-size: clamp(3rem, 6vw, 4.5rem); line-height: 0.95; margin: 0.75rem 0 0.5rem; }
.book-sub { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.3rem; color: rgba(244, 240, 230, 0.86); margin: 0 0 1rem; }
.book-offer-form h3 { font-size: 1.6rem; margin: 0.5rem 0 0.5rem; }

/* A form never sits in a box inside a box: cards holding a Flodesk form
   become a gold rule and open space, so the form's own panel is the only panel. */
.card:has(> .fd-embed) {
  background: transparent !important; border: 0 !important;
  border-left: 2px solid var(--gold) !important; border-radius: 0;
  padding: 0.25rem 0 0.25rem 1.5rem !important; box-shadow: none !important;
}

/* ============================================================
   Interactive tools
   ============================================================ */
.tool-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.tool-nav a { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--cream);
  border: 1px solid rgba(244, 240, 230, 0.35); padding: 0.55rem 0.9rem; min-height: 40px; display: inline-flex; align-items: center;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.tool-nav a:hover, .tool-nav a:focus-visible { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.tool-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.tool-controls label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; }
.tool-controls select { min-height: 46px; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); background: #fff; font: inherit; font-weight: 400; }
label.check { flex-direction: row !important; align-items: center; gap: 0.5rem; font-weight: 400 !important; }
label.check input { width: 18px; height: 18px; accent-color: var(--gold); }

/* Breathing circle */
.breath { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem 0; }
.breath-ring { width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rule);
  display: grid; place-items: center; background: radial-gradient(circle, rgba(201,162,39,0.10), transparent 70%); }
.breath-dot { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #E8C75A, var(--gold) 55%, #9A7B18);
  transform: scale(0.45); transition: transform 1s ease-in-out; box-shadow: 0 10px 40px -12px rgba(154,123,24,0.6); }
.breath-cue { font-family: "Instrument Serif", Georgia, serif; font-size: 1.6rem; margin: 0; }
.breath-time { margin: 0; }

.timer-face, .stretch { text-align: center; padding: 2rem 1rem; border: 1px solid var(--rule); background: var(--cream); }
.timer-big { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(3.5rem, 8vw, 5rem); line-height: 1; margin: 0 0 0.5rem; }
.stretch h3 { font-size: 1.6rem; margin: 0.5rem 0; }
.stretch .quiz-meter { margin: 1rem auto; max-width: 320px; }

/* Ambient sound */
.sound-list { display: grid; gap: 0.75rem; }
.sound-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; cursor: pointer;
  padding: 1rem 1.25rem; min-height: 64px; background: transparent; color: var(--cream);
  border: 1px solid rgba(244, 240, 230, 0.3); font: inherit; transition: border-color 180ms ease, background-color 180ms ease; }
.sound-btn span { font-size: 0.88rem; color: rgba(244, 240, 230, 0.72); }
.sound-btn:hover, .sound-btn:focus-visible { border-color: var(--gold); }
.sound-btn[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 162, 39, 0.12); }
.sound-btn[aria-pressed="true"] strong::after { content: "  · playing"; color: var(--gold); font-weight: 400; font-size: 0.85rem; }
.vol { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; color: rgba(244,240,230,0.86); }
.vol input { flex: 1; accent-color: var(--gold); }

/* Calculators */
.calc label { display: block; margin-top: 1rem; font-weight: 600; font-size: 0.9rem; }
.calc output { float: right; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--text); }
.calc input[type="range"] { width: 100%; margin-top: 0.5rem; accent-color: var(--gold); }
.calc-result { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); font-size: 1.02rem; }

/* Stress cycle */
.cycle { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 850px) { .cycle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.cy-nodes { display: grid; gap: 0.5rem; }
.cy-node { display: flex; align-items: center; gap: 1rem; text-align: left; cursor: pointer; font: inherit;
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.4rem; padding: 0.9rem 1.1rem; min-height: 56px;
  background: var(--cream); color: var(--text); border: 1px solid var(--rule); position: relative;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.cy-node .cy-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--gold); letter-spacing: 0.08em; }
.cy-node:hover, .cy-node:focus-visible { border-color: var(--gold); transform: translateX(3px); }
.cy-node[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.cy-node + .cy-node::before { content: ""; position: absolute; left: 1.55rem; top: -0.55rem; width: 1px; height: 0.55rem; background: var(--gold); }
.cy-panels { min-height: 100%; }
.cy-panel h3 { font-size: 1.8rem; margin: 0.4rem 0 0.75rem; }

/* Quiz */
.quiz-wrap { max-width: 52rem; }
.quiz .q { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 1.4rem 0; }
.quiz legend { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.3; padding: 0; margin-bottom: 0.9rem; display: flex; gap: 0.9rem; }
.q-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--gold); padding-top: 0.45rem; flex: none; }
.q-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 600px) { .q-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q-opts label { position: relative; }
.q-opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.q-opts span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.5rem; text-align: center;
  border: 1px solid var(--rule); font-size: 0.92rem; background: var(--cream); transition: all 160ms ease; }
.q-opts input:hover + span { border-color: var(--text); }
.q-opts input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.q-opts input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.quiz-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.quiz-foot .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.quiz-progress { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); }
.quiz-meter { height: 6px; background: var(--rule); margin: 1rem 0; overflow: hidden; }
.quiz-meter span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 600ms ease; }
.quiz-result:focus { outline: none; }

/* Challenge */
.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.day { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); transition: opacity 200ms ease; }
.day h3 { font-size: 1.25rem; margin: 0 0 0.3rem; }
.day p { margin: 0; font-size: 0.97rem; }
.day-check { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; padding-top: 0.15rem; }
.day-check input { width: 20px; height: 20px; accent-color: var(--gold); }
.day-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.day.is-done h3 { text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.day.is-done { opacity: 0.72; }

/* Ask form */
.ask-form label { display: block; font-weight: 600; font-size: 0.92rem; }
.ask-form textarea, .ask-form input[type="email"] { width: 100%; margin-top: 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid var(--rule); font: inherit; background: #fff; }
.ask-form textarea:focus-visible, .ask-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.qa p { max-width: 68ch; margin-top: 0.75rem; }

/* ============================================================
   Scroll motion: content settles into place as it arrives.
   Only when JavaScript runs and reduced motion is off.
   ============================================================ */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-soft { animation: float-soft 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .float-soft { animation: none; }
}

/* ============================================================
   Signup bands: cover beside, form directly under the copy,
   so the form's height can never push the columns apart.
   ============================================================ */
.signup { display: grid; gap: 2rem; align-items: center; max-width: 64rem; }
@media (min-width: 850px) { .signup { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; } }
.signup-cover { margin: 0; }
.signup-cover img { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto;
  border-radius: 10px; box-shadow: 0 24px 50px -28px rgba(20, 38, 48, 0.55); transform: rotate(-2deg); }
@media (max-width: 849px) { .signup-cover img { max-width: 200px; } }
.signup-body h2 { margin-top: 0.4rem; }
.signup-form { margin-top: 1.25rem; max-width: 34rem; }

/* Flodesk's own outer wrappers: no extra padding, width, or panel color,
   so the form lines up with the text above it. Inner fields keep Flodesk's styling. */
.fd-embed > div, .fd-embed > div > div, .fd-embed > form, .fd-embed > div > form {
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  max-width: 100% !important; background: transparent !important; box-shadow: none !important;
}

/* The framework */
.framework { display: grid; gap: 2rem; }
@media (min-width: 850px) {
  .framework { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; row-gap: 1rem; align-items: start; }
  .framework-intro { grid-column: 1; grid-row: 1; }
  .collision { grid-column: 1; grid-row: 2; }
  .framework-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.collision { margin: 0; max-width: 320px; }
.collision svg { width: 100%; height: auto; display: block; }
.chips { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.45rem 0.9rem; border: 1px solid rgba(20, 38, 48, 0.25); border-radius: 999px; font-size: 0.92rem; background: rgba(244, 240, 230, 0.6); }

/* Answered questions: the question on the left, a +/– on the right, never touching. */
details.qa > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; cursor: pointer; list-style: none; }
details.qa > summary::-webkit-details-marker { display: none; }
.qa-toggle { flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--rule); border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 1rem; line-height: 1; }
.qa-toggle::before { content: "+"; }
details.qa[open] .qa-toggle::before { content: "\2013"; }
details.qa > summary:hover .qa-toggle { border-color: var(--gold); }

/* Rest debt */
.rest { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 900px) { .rest { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.rest-in label { display: block; font-weight: 600; font-size: 0.92rem; }
.rest-in output { float: right; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 400; }
.rest-in input[type="range"] { width: 100%; margin-top: 0.5rem; accent-color: var(--gold); }
.rest-times { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-top: 1.25rem; }
.rest-times .mono { grid-column: 1 / -1; margin: 0.5rem 0 0; }
.rest-times input { display: block; width: 100%; margin-top: 0.35rem; min-height: 44px; padding: 0.4rem 0.6rem; border: 1px solid var(--rule); border-radius: 8px; font: inherit; background: #fff; }
.rest-habits { border: 0; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.6rem; }
.rest-habits legend { margin-bottom: 0.5rem; }
.rest-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.rest-big { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; margin: 0.35rem 0 0.5rem; }
.rest-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; height: 120px; margin-top: 1.5rem; }
.rest-week .night { position: relative; background: rgba(20, 38, 48, 0.08); border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; }
.rest-week .night span { display: block; width: 100%; background: linear-gradient(180deg, #2B4A5A, #142630); border-radius: 8px 8px 0 0; transition: height 400ms ease; }
.rest-week .night em { position: absolute; top: 0.4rem; left: 0; right: 0; text-align: center; font-style: normal; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; color: var(--muted); }
.rest-tips { margin: 0.75rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.rest-cta { margin: 1.75rem 0 1rem; padding: 1.5rem; border-radius: 12px; background: var(--ink); color: var(--cream); }
.rest-cta h3 { margin: 0.35rem 0 0.5rem; }
.rest-cta p { color: rgba(244, 240, 230, 0.86); }

/* Trigger log */
.tlog { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 900px) { .tlog { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } }
.pick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.pick button { font: inherit; font-size: 0.92rem; cursor: pointer; padding: 0.55rem 0.95rem; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff; color: var(--text); transition: all 160ms ease; }
.pick button:hover, .pick button:focus-visible { border-color: var(--text); }
.pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tlog-scale { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.tlog-scale input { flex: 1; accent-color: var(--gold); }
.tlog-scale output { font-family: "Instrument Serif", Georgia, serif; font-size: 2rem; min-width: 2ch; text-align: right; }
.entry { border-left: 3px solid var(--gold); }
.entry h3 { margin: 0.35rem 0 0.25rem; }
.entry-reset { margin-top: 0.75rem; font-weight: 600; }

/* The Trigger Tracker page: its own palette lives in these variables.
   When the app's brand colors arrive, only this block changes. */
.tt-theme {
  --tt-deep: #131A2B;      /* hero and dark bands */
  --tt-accent: #C9A227;    /* primary buttons */
  --tt-accent-ink: #23201C;
  --tt-soft: #F4F0E6;      /* light bands */
}
.tt-theme > section.night { background: var(--tt-deep); }
.tt-theme .btn { background: var(--tt-accent); border-color: var(--tt-accent); color: var(--tt-accent-ink); }

/* ============================================================
   Warmth: softer corners, gentler depth, friendlier controls.
   Same structure and typography; it just stops feeling like a form.
   ============================================================ */
:root { --r-sm: 8px; --r-md: 14px; --r-pill: 999px; }
.btn, .btn-ghost, .buy a, .share a { border-radius: var(--r-sm); }
.card, .tier, .next-card, .card-link, .timer-face, .stretch, .cy-node, .cy-panels, .sound-btn,
.ask-form, .planner, .entry, .rest-in, .faq-item { border-radius: var(--r-md); }
.q-opts span { border-radius: 10px; }
.tool-controls select, .ask-form textarea, .ask-form input[type="email"], .planner input,
.contact-form input, .contact-form select, .contact-form textarea { border-radius: var(--r-sm); }
.tool-nav a { border-radius: var(--r-pill); }
.card-link:hover { border-radius: var(--r-md); }
img.portrait, .journal-strip img, .journal-hero, main figure img:not(.seal) { border-radius: var(--r-md); }
.card:has(> .fd-embed) { border-radius: 0 !important; }

/* Cards on light grounds get a warm surface and a soft lift instead of a hard outline. */
.sand .card, .edge .card, .sage .card, .cream .card {
  background: #FBF8F1; border-color: rgba(195, 188, 172, 0.7);
  box-shadow: 0 1px 0 rgba(20, 38, 48, 0.03), 0 18px 40px -32px rgba(20, 38, 48, 0.35);
}
.tier { box-shadow: 0 22px 48px -34px rgba(20, 38, 48, 0.4); }

/* Rows breathe a little more, and links feel like invitations. */
.rows .row { padding-top: 1.15rem; padding-bottom: 1.15rem; }
main p a:not(.btn):not(.btn-ghost) { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 160ms ease, text-decoration-color 160ms ease; }
main p a:not(.btn):not(.btn-ghost):hover { text-decoration-color: var(--gold); }

/* The Trigger Tracker page in the app's own palette. */
.tt-theme {
  --tt-porcelain: #FBFAF7; --tt-card: #F3F1EA; --tt-ink: #26303E; --tt-ink-soft: #4A5568;
  --tt-muted: #6B7280; --tt-harbor: #3D7A91; --tt-harbor-deep: #29586B; --tt-navy: #171D2B; --tt-gold: #D9A441;
  background: var(--tt-porcelain); color: var(--tt-ink-soft);
}
.tt-theme > section.edge, .tt-theme > section.sand, .tt-theme > section.sage, .tt-theme > section.cream { background: var(--tt-porcelain); }
.tt-theme > section.sand { background: var(--tt-card); }
.tt-theme > section.night, .tt-theme > section.ink { background: var(--tt-navy); }
.tt-theme h1, .tt-theme h2, .tt-theme h3 { color: var(--tt-ink); }
.tt-theme > section.night h1, .tt-theme > section.night h2, .tt-theme > section.night h3,
.tt-theme > section.ink h1, .tt-theme > section.ink h2, .tt-theme > section.ink h3 { color: #F4F3EF; }
.tt-theme .mono, .tt-theme .fineprint { color: var(--tt-muted); }
.tt-theme > section.night .mono, .tt-theme > section.ink .mono, .tt-theme > section.night .fineprint { color: rgba(244, 243, 239, 0.72); }
.tt-theme .card, .tt-theme .tier { background: var(--tt-card); border-color: rgba(38, 48, 62, 0.12); }
.tt-theme .btn { background: var(--tt-harbor); border-color: var(--tt-harbor); color: #fff; }
.tt-theme .btn:hover, .tt-theme .btn:focus-visible { background: var(--tt-harbor-deep); border-color: var(--tt-harbor-deep); color: #fff; box-shadow: 0 8px 20px -10px rgba(41, 88, 107, 0.6); }
.tt-theme .btn-ghost { border-color: var(--tt-harbor); color: var(--tt-harbor-deep); }
.tt-theme .btn-ghost:hover { background: var(--tt-harbor-deep); border-color: var(--tt-harbor-deep); color: #fff; }
.tt-theme > section.night .btn-ghost, .tt-theme > section.ink .btn-ghost { border-color: rgba(244, 243, 239, 0.7); color: #F4F3EF; }
.tt-theme main a:not(.btn):not(.btn-ghost), .tt-theme p a:not(.btn):not(.btn-ghost) { color: var(--tt-harbor-deep); }
.tt-theme > section.night p a:not(.btn):not(.btn-ghost), .tt-theme > section.ink p a:not(.btn):not(.btn-ghost) { color: #9FC7D6; }
.tt-theme .tier-list li::before { color: var(--tt-harbor); }
.tt-theme .tier-live { border-color: var(--tt-harbor); }

/* Phone frame for app screenshots (porcelain captures sit inside it). */
.phone-frame { width: min(280px, 72vw); aspect-ratio: 9 / 19.5; border-radius: 42px; padding: 11px;
  background: #1E2433; box-shadow: 0 30px 60px -30px rgba(23, 29, 43, 0.55), inset 0 0 0 1px rgba(255,255,255,0.06); margin: 0 auto; }
.phone-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; background: var(--tt-porcelain, #FBFAF7); }

/* ============================================================
   Homepage hero: the headline over a slow, breathing light.
   ============================================================ */
.hero-home { position: relative; overflow: hidden; }
.hero-home-inner { position: relative; z-index: 1; max-width: 62rem; padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.hero-home h1 { font-size: clamp(3rem, 7.5vw, 6rem); line-height: 0.98; max-width: 14ch; margin: 0.75rem 0 1.25rem; }
.hero-sub { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; max-width: 34ch; color: #F4F0E6; margin: 0; }
.hero-cred { max-width: 52ch; color: rgba(244, 240, 230, 0.8); margin: 1rem 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero-tertiary { margin-top: 1.25rem; font-size: 0.95rem; }
.hero-tertiary a { color: rgba(244, 240, 230, 0.86); }
.hero-tertiary a::after { content: "  \2192"; }
.hero-ambient { position: absolute; inset: -20%; z-index: 0; pointer-events: none; }
.hero-ambient span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: hero-breathe 6s ease-in-out infinite alternate; }
.hero-ambient span:first-child { width: 55vw; height: 55vw; right: 2%; top: 8%; background: radial-gradient(circle, rgba(30, 70, 64, 0.95), transparent 65%); }
.hero-ambient span:last-child { width: 40vw; height: 40vw; right: 22%; bottom: 0; background: radial-gradient(circle, rgba(201, 162, 39, 0.35), transparent 65%); animation-delay: -3s; }
@keyframes hero-breathe { from { transform: scale(0.92); opacity: 0.4; } to { transform: scale(1.08); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .hero-ambient span { animation: none; } }

/* The first Grace Check question, on the homepage */
.gc-inline { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 850px) { .gc-inline { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.gc-q .lead-serif { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3; margin: 0 0 1.25rem; }
.q-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.q-links a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--rule); border-radius: 10px;
  text-decoration: none; color: var(--text); background: #fff; transition: all 160ms ease; }
.q-links a:hover, .q-links a:focus-visible { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-1px); }

/* The four pillars */
.pillars { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pillar { background: #FBF8F1; border: 1px solid rgba(195, 188, 172, 0.7); border-radius: var(--r-md); padding: 1.5rem;
  box-shadow: 0 18px 40px -32px rgba(20, 38, 48, 0.35); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; align-self: start; }
.pillar:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 24px 48px -30px rgba(20, 38, 48, 0.45); }
.pillar summary { list-style: none; cursor: pointer; }
.pillar summary::-webkit-details-marker { display: none; }
.pillar-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { margin: 0.4rem 0 0.4rem; font-size: 1.35rem; }
.pillar-more { display: inline-block; margin-top: 0.5rem; font-size: 0.88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.pillar-more::after { content: " +"; }
.pillar[open] .pillar-more::after { content: " \2013"; }
.pillar-body { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .pillar:hover { transform: none; } }

/* The Yes Tax: a live page from the guide */
.signup-live { align-items: start; }
@media (min-width: 850px) { .signup-live { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.script-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 1rem; }
.script-chips button { font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.45rem 0.85rem; min-height: 40px; border-radius: 999px;
  border: 1px solid rgba(20, 38, 48, 0.25); background: rgba(255, 255, 255, 0.7); color: var(--text); transition: all 160ms ease; }
.script-chips button:hover { border-color: var(--text); }
.script-chips button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.script-page { position: relative; background: #F4F0E6; border-radius: 6px 14px 14px 6px; padding: 1.75rem 1.75rem 1.5rem 2rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 26px 50px -30px rgba(20, 38, 48, 0.5); border-left: 4px solid var(--ink); }
.script-page h3 { font-size: 1.6rem; margin: 0.3rem 0 0; }
.script-say { font-family: "Instrument Serif", Georgia, serif; font-size: 1.45rem; line-height: 1.3; color: var(--ink); }
.script-blur { filter: blur(4px); opacity: 0.55; user-select: none; margin-top: 1rem; }
.script-lock { margin: 0.75rem 0 0; font-weight: 600; font-size: 0.92rem; }

/* The Grace Map */
.grace-map { background: linear-gradient(160deg, #142630 0%, #1E4640 100%); color: #F4F0E6; border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 30px 60px -34px rgba(20, 38, 48, 0.6); }
.grace-map h2 { color: #F4F0E6; margin: 1.25rem 0 0.5rem; }
.grace-map > p { color: rgba(244, 240, 230, 0.86); max-width: 56ch; }
.gm-head { display: flex; align-items: center; gap: 0.9rem; }
.gm-head .mono { color: var(--gold); margin: 0; }
.gm-date { margin: 0.15rem 0 0; font-size: 0.85rem; color: rgba(244, 240, 230, 0.7); }
.gm-terrain { display: grid; gap: 1rem; margin-top: 1.75rem; }
.gm-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 3.5rem; gap: 1rem; align-items: center; }
@media (max-width: 640px) { .gm-row { grid-template-columns: 1fr 3rem; } .gm-bar { grid-column: 1 / -1; grid-row: 2; } }
.gm-label strong { display: block; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.2rem; }
.gm-label span { font-size: 0.85rem; color: rgba(244, 240, 230, 0.72); }
.gm-bar { height: 10px; background: rgba(244, 240, 230, 0.14); border-radius: 999px; overflow: hidden; }
.gm-bar span { display: block; height: 100%; background: rgba(244, 240, 230, 0.55); border-radius: 999px; transition: width 800ms ease; }
.gm-row.is-top .gm-bar span { background: var(--gold); }
.gm-pct { margin: 0; text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; }
.gm-foot { margin: 1.75rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(244, 240, 230, 0.55); }

/* Access terms, crisis line, terms strip */
.access { margin: 0.25rem 0 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); background: rgba(30, 70, 64, 0.08);
  border-radius: 999px; padding: 0.35rem 0.8rem; display: inline-block; }
.crisis-note { margin: 1.5rem 0 0; font-size: 0.88rem; color: rgba(244, 240, 230, 0.78); }
.crisis-note a { color: inherit; }
.terms-strip { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.terms-strip li { padding: 0.55rem 0.95rem; border-radius: 999px; background: rgba(244, 240, 230, 0.1); border: 1px solid rgba(244, 240, 230, 0.25); font-size: 0.88rem; color: rgba(244, 240, 230, 0.9); }
.terms-strip strong { margin-right: 0.35rem; color: #F4F0E6; }
.terms-strip a { color: inherit; }

/* The shop: three shelves */
.shelf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.shelf-head > div { max-width: 56ch; }
.shelf { display: grid; gap: 1rem; margin-top: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.shelf-item { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: #FBF8F1;
  border: 1px solid rgba(195, 188, 172, 0.7); border-radius: var(--r-md); padding: 1.35rem 1.35rem 1.25rem;
  box-shadow: 0 18px 40px -32px rgba(20, 38, 48, 0.35); transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.shelf-item:hover, .shelf-item:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 24px 48px -30px rgba(20, 38, 48, 0.45); }
.shelf-badge { align-self: flex-start; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: rgba(30, 70, 64, 0.09); color: var(--ink); border-radius: 999px; padding: 0.3rem 0.65rem; }
.shelf-item h3 { margin: 0.8rem 0 0.25rem; font-size: 1.35rem; line-height: 1.2; }
.shelf-price { margin: 0; font-size: 0.9rem; font-weight: 600; }
.shelf-for { margin: 0.75rem 0 0; font-size: 0.95rem; font-style: italic; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .shelf-item:hover { transform: none; } }

/* Help */
.help-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.help-grid h3 { margin: 0.35rem 0 0.5rem; }

/* Footer policies: four main links, then the rest, quieter */
.foot-policies { display: grid; gap: 0.6rem; }
.fp-primary, .fp-secondary { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.fp-secondary a { font-size: 0.85em; opacity: 0.75; }

/* Pages fade into each other instead of snapping. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.hero-ambient span:first-child { background: radial-gradient(circle, rgba(42, 102, 92, 1), transparent 65%); }
@keyframes hero-breathe { from { transform: scale(0.9); opacity: 0.5; } to { transform: scale(1.1); opacity: 0.9; } }

/* The Trigger Tracker page: the app's own mark, type, and dusk gradient. */
.tt-theme { --tt-dusk: linear-gradient(135deg, #26667E 0%, #546AA5 55%, #9282CD 100%); }
.tt-brand { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: #F4F3EF; }
.tt-brand img { width: 40px; height: 40px; border-radius: 50%; }
.tt-brand sup { font-size: 0.55em; }
.tt-theme h1, .tt-theme h2 { font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.tt-theme h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.tt-theme h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.tt-theme h3 { font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.tt-theme .btn { background: var(--tt-dusk); border: 0; color: #fff; border-radius: 10px; }
.tt-theme .btn:hover, .tt-theme .btn:focus-visible { background: linear-gradient(135deg, #1F566B 0%, #475D96 55%, #7F70BF 100%); color: #fff; }
.tt-shot { margin: 0; align-self: center; text-align: center; }
.tt-shot img { width: 100%; max-width: 410px; height: auto; border-radius: 16px; background: var(--tt-porcelain);
  box-shadow: 0 1px 0 rgba(38,48,62,0.05), 0 28px 56px -34px rgba(23, 29, 43, 0.4); }
.tt-shot figcaption { margin-top: 0.75rem; font-size: 0.9rem; color: var(--tt-muted); }
.tier-pay { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--muted); }
.pay-methods { text-align: center; margin: 0.6rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }

/* Meditation player */
.player { align-self: center; }
.player-top { display: flex; align-items: center; gap: 0.9rem; }
.player-top img { border-radius: 12px; }
.player-title { font-family: "Instrument Serif", Georgia, serif; font-size: 1.6rem; margin: 0; line-height: 1.1; }
.player-by { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--muted); }
.player-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 1.5rem 0 0.5rem; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--ink) var(--p, 0%), rgba(20, 38, 48, 0.15) var(--p, 0%)); }
.player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid #FBF8F1; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.player-seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid #FBF8F1; }
.player-times { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); }
.player-ctrls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1rem; }
.player-play { width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer; background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgba(154, 123, 24, 0.7); transition: transform 180ms ease, background-color 180ms ease; }
.player-play:hover, .player-play:focus-visible { background: #B8931F; transform: scale(1.04); }
.player-play svg { width: 28px; height: 28px; fill: currentColor; }
.player-skip { font: inherit; font-size: 0.85rem; cursor: pointer; background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.5rem 0.9rem; min-height: 44px; color: var(--text); transition: border-color 160ms ease; }
.player-skip:hover, .player-skip:focus-visible { border-color: var(--text); }
.player-state { text-align: center; margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--muted); }
.player.is-playing .player-top img { animation: float-soft 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .player.is-playing .player-top img { animation: none; } }
.gm-email { margin-top: 2rem; padding: 1.5rem; border-radius: var(--r-md); background: #FBF8F1; border: 1px solid rgba(195, 188, 172, 0.7); }
.gm-email h3 { margin: 0.35rem 0 0.5rem; }
.player-play svg[hidden] { display: none; }
.tt-theme .lede { font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.55; }

/* ============================================================
   The GraceOS
   ============================================================ */
.os { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .os { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.os-stack { display: grid; gap: 0.5rem; }
.os-layer { display: grid; grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; text-align: left; cursor: pointer;
  font: inherit; padding: 1rem 1.25rem; min-height: 64px; border-radius: var(--r-md); border: 1px solid rgba(20, 38, 48, 0.18);
  background: #FBF8F1; color: var(--text); transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.os-layer:nth-child(1) { margin: 0 2rem; } .os-layer:nth-child(2) { margin: 0 1.5rem; } .os-layer:nth-child(3) { margin: 0 1rem; } .os-layer:nth-child(4) { margin: 0 0.5rem; }
.os-layer:hover, .os-layer:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.os-n { grid-row: 1 / span 2; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8rem; color: var(--gold); padding-top: 0.2rem; }
.os-name { font-family: "Instrument Serif", Georgia, serif; font-size: 1.45rem; line-height: 1.1; }
.os-tag { font-size: 0.88rem; color: var(--muted); }
.os-layer[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.os-layer[aria-pressed="true"] .os-tag { color: rgba(244, 240, 230, 0.75); }
.os-foundation { border: 1px solid var(--gold); background: linear-gradient(180deg, #FBF8F1, #F3EAD2); }
.os-foundation[aria-pressed="true"] { background: linear-gradient(135deg, #142630, #1E4640); border-color: var(--gold); }
.os-panel h3 { font-size: 1.9rem; margin: 0.35rem 0 0.25rem; }
.os-q { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.2rem; color: var(--muted); margin: 0 0 1rem; }
.os-links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.os-links a::after { content: "  \2192"; }
.os-start { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .os-layer:hover { transform: none; } }

/* The compact stack on the homepage */
.os-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; align-self: center; }
.os-mini a { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.8rem 1.1rem; border-radius: 12px; text-decoration: none;
  color: #F4F0E6; border: 1px solid rgba(244, 240, 230, 0.22); background: rgba(244, 240, 230, 0.04);
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.3rem; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.os-mini li:nth-child(1) a { margin: 0 1.6rem; } .os-mini li:nth-child(2) a { margin: 0 1.2rem; } .os-mini li:nth-child(3) a { margin: 0 0.8rem; } .os-mini li:nth-child(4) a { margin: 0 0.4rem; }
.os-mini span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--gold); }
.os-mini em { margin-left: auto; font-style: normal; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 0.85rem; color: rgba(244, 240, 230, 0.7); }
.os-mini a:hover, .os-mini a:focus-visible { background: rgba(244, 240, 230, 0.1); border-color: var(--gold); transform: translateY(-1px); }
.os-mini .is-foundation a { border-color: var(--gold); background: rgba(201, 162, 39, 0.1); }
.foot-os { margin: 0.5rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.foot-os a { color: var(--gold); text-decoration: none; }
.gm-layer { margin: 1.5rem 0 0; font-size: 0.95rem; color: rgba(244, 240, 230, 0.86); }
.gm-layer a { color: var(--gold); }

/* Gift pages */
.gift-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.35rem; }
.gift-form legend { margin-bottom: 0.5rem; }
.gift-form input:not([type="radio"]):not([type="checkbox"]) { width: 100%; min-height: 46px; padding: 0.55rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--r-sm); font: inherit; background: #fff; margin-bottom: 0.6rem; }
.gift-form input:focus-visible, .gift-form textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.redeem-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; }
.redeem-steps li { counter-increment: step; position: relative; padding: 1.25rem 1.25rem 1.25rem 4rem; border-radius: var(--r-md); background: #FBF8F1; border: 1px solid rgba(195, 188, 172, 0.7); }
.redeem-steps li::before { content: counter(step); position: absolute; left: 1.25rem; top: 1.2rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--cream); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; }
.redeem-steps h3 { margin: 0 0 0.25rem; }
.redeem-steps p { margin: 0; }

/* Desk stretch illustrations */
.stretch-fig { margin: 0 auto 0.5rem; width: min(220px, 60vw); }
.stretch-fig svg { width: 100%; height: auto; display: block; }
.stretch-strip { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.stretch-strip li { background: #FBF8F1; border: 1px solid rgba(195, 188, 172, 0.7); border-radius: 12px; padding: 0.4rem 0.4rem 0.6rem; text-align: center; transition: border-color 200ms ease, opacity 200ms ease; }
.stretch-strip svg { width: 100%; max-width: 110px; height: auto; display: block; margin: 0 auto; }
.stretch-strip span { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.stretch-strip li.is-current { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.35); }
.stretch-strip li.is-done { opacity: 0.55; }
@media (max-width: 480px) { .stretch-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Footer policies: both rows identical in font, size, and color. */
.fp-secondary a { font-size: inherit; opacity: 1; }
.fp-primary a, .fp-secondary a { font-size: 0.64rem; }
@media (max-width: 849px) {
  .foot-policies { display: grid; grid-template-columns: 1fr; gap: 0; }
  .fp-primary, .fp-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1rem; }
  .fp-primary a, .fp-secondary a { font-size: 0.6rem; }
}

/* Animated stretch figures. The large figure always moves; thumbnails move on hover
   and while their stretch is running. Still under reduced motion. */
.fig .an-neck { transform-box: view-box; transform-origin: 100px 66px; }
.fig .an-shoulders { transform-box: view-box; transform-origin: 100px 78px; }
.fig .an-chest { transform-box: view-box; transform-origin: 88px 121px; }
.fig .an-twist { transform-box: view-box; transform-origin: 100px 100px; }
.fig .an-twist-head { transform-box: view-box; transform-origin: 100px 66px; }
.fig .an-wrist-l { transform-box: view-box; transform-origin: 66px 78px; }
.fig .an-wrist-r { transform-box: view-box; transform-origin: 134px 78px; }
.fig .an-fold { transform-box: view-box; transform-origin: 96px 121px; }
@keyframes st-neck { 0%, 12% { transform: rotate(0deg); } 45%, 60% { transform: rotate(32deg); } 90%, 100% { transform: rotate(0deg); } }
@keyframes st-shoulders { 0% { transform: translate(0, 0); } 25% { transform: translate(0, -6px); } 50% { transform: translate(-2px, -3px); } 75% { transform: translate(0, 2px); } 100% { transform: translate(0, 0); } }
@keyframes st-chest { 0%, 10% { transform: rotate(0deg); } 45%, 65% { transform: rotate(-9deg); } 100% { transform: rotate(0deg); } }
@keyframes st-twist { 0%, 10% { transform: scaleX(1); } 45%, 65% { transform: scaleX(0.84); } 100% { transform: scaleX(1); } }
@keyframes st-twist-head { 0%, 10% { transform: translateX(4px); } 45%, 65% { transform: translateX(-4px); } 100% { transform: translateX(4px); } }
@keyframes st-wrist { 0% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } 100% { transform: rotate(-35deg); } }
@keyframes st-fold { 0%, 10% { transform: rotate(-58deg); } 50%, 65% { transform: rotate(0deg); } 100% { transform: rotate(-58deg); } }
@keyframes st-arrow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.stretch-fig .fig .an-neck, .stretch-strip li:hover .an-neck, .stretch-strip li.is-current .an-neck { animation: st-neck 5s ease-in-out infinite; }
.stretch-fig .fig .an-shoulders, .stretch-strip li:hover .an-shoulders, .stretch-strip li.is-current .an-shoulders { animation: st-shoulders 2.4s ease-in-out infinite; }
.stretch-fig .fig .an-chest, .stretch-strip li:hover .an-chest, .stretch-strip li.is-current .an-chest { animation: st-chest 5s ease-in-out infinite; }
.stretch-fig .fig .an-twist, .stretch-strip li:hover .an-twist, .stretch-strip li.is-current .an-twist { animation: st-twist 5s ease-in-out infinite; }
.stretch-fig .fig .an-twist-head, .stretch-strip li:hover .an-twist-head, .stretch-strip li.is-current .an-twist-head { animation: st-twist-head 5s ease-in-out infinite; }
.stretch-fig .fig .an-wrist-l, .stretch-fig .fig .an-wrist-r, .stretch-strip li:hover .an-wrist-l, .stretch-strip li:hover .an-wrist-r,
.stretch-strip li.is-current .an-wrist-l, .stretch-strip li.is-current .an-wrist-r { animation: st-wrist 1.8s ease-in-out infinite; }
.stretch-fig .fig .an-wrist-r, .stretch-strip li:hover .an-wrist-r, .stretch-strip li.is-current .an-wrist-r { animation-delay: -0.9s; }
.stretch-fig .fig .an-fold, .stretch-strip li:hover .an-fold, .stretch-strip li.is-current .an-fold { animation: st-fold 6s ease-in-out infinite; }
.stretch-fig .fig .an-arrow, .stretch-strip li.is-current .an-arrow { animation: st-arrow 2.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fig * { animation: none !important; }
}
.fig .an-fold-arm { transform-box: view-box; transform-origin: 124px 108px; }
@keyframes st-fold-arm { 0%, 10% { transform: rotate(58deg); } 50%, 65% { transform: rotate(0deg); } 100% { transform: rotate(58deg); } }
.stretch-fig .fig .an-fold-arm, .stretch-strip li:hover .an-fold-arm, .stretch-strip li.is-current .an-fold-arm { animation: st-fold-arm 6s ease-in-out infinite; }
.book-get { max-width: 48rem; }
.book-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* ============================================================
   The Self-Trust Kit
   ============================================================ */
.reset-hero { margin: 0; align-self: center; }
.reset-fig { width: min(300px, 70vw); height: auto; display: block; margin: 0 auto; }
.reset-fig .rs-hand { transform-box: view-box; transform-origin: 152px 206px; transform: rotate(38deg); transition: transform 1.2s ease-in-out; }
.reset-fig .rs-bridge { stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 2.5s ease-in-out; }
.reset-fig .rs-heart, .reset-fig .rs-mind { opacity: 0.35; transform-box: fill-box; transform-origin: center; transition: opacity 600ms ease; }
/* the hero plays the whole sequence on a slow loop */
.reset-hero .rs-hand { animation: rs-hand 9s ease-in-out infinite; }
.reset-hero .rs-bridge { animation: rs-bridge 9s ease-in-out infinite; }
.reset-hero .rs-heart, .reset-hero .rs-mind { animation: rs-glow 9s ease-in-out infinite; }
@keyframes rs-hand { 0% { transform: rotate(38deg); } 15%, 55% { transform: rotate(0deg); } 70%, 100% { transform: rotate(38deg); } }
@keyframes rs-bridge { 0%, 45% { stroke-dashoffset: 130; } 75%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 130; } }
@keyframes rs-glow { 0%, 40% { opacity: 0.35; } 60%, 90% { opacity: 1; } 100% { opacity: 0.35; } }
/* the guided card follows the steps */
.reset-card.is-touch .rs-hand, .reset-card.is-say .rs-hand { transform: rotate(0deg); }
.reset-card.is-say .rs-heart { opacity: 1; animation: rs-pulse 1.1s ease-in-out infinite; }
.reset-card.is-bridge .rs-bridge, .reset-card.is-done .rs-bridge { stroke-dashoffset: 0; }
.reset-card.is-bridge .rs-heart, .reset-card.is-bridge .rs-mind, .reset-card.is-done .rs-heart, .reset-card.is-done .rs-mind { opacity: 1; }
@keyframes rs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.reset-stage { margin: 0 0 0.75rem; }
.reset-stage .reset-fig { width: min(220px, 60vw); }
.reset-card { text-align: center; }
.reset-say { font-family: "Instrument Serif", Georgia, serif; font-size: 1.45rem; line-height: 1.3; min-height: 3.8rem; margin: 0.5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .reset-fig * { animation: none !important; transition: none !important; }
  .reset-hero .rs-hand { transform: rotate(0deg); } .reset-hero .rs-bridge { stroke-dashoffset: 0; } .reset-hero .rs-heart, .reset-hero .rs-mind { opacity: 1; }
}
.autopsy label, .thermo label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.9rem; }
.autopsy input, .autopsy textarea, .thermo input[type="text"], .thermo input:not([type]) , .thermo [data-t-note] {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--r-sm); font: inherit; font-weight: 400; background: #fff; }
.autopsy input:focus-visible, .autopsy textarea:focus-visible, .thermo input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.autopsy-out { margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--r-md); background: var(--ink); color: var(--cream); }
.autopsy-out .mono { color: var(--gold); }
.autopsy-out .btn-ghost { border-color: rgba(244,240,230,.7); color: var(--cream); }
.thermo-scale { display: flex !important; align-items: center; gap: 1rem; }
.thermo-scale input { flex: 1; accent-color: var(--gold); }
.thermo-scale output { font-family: "Instrument Serif", Georgia, serif; font-size: 2rem; order: 2; min-width: 2ch; text-align: right; }
.thermo-chart { width: 100%; height: auto; margin-top: 1rem; background: #fff; border-radius: 10px; border: 1px solid rgba(195,188,172,.6); }
.thermo-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.75rem; font-size: 0.92rem; }
.thermo-stats p { margin: 0; }
@media print {
  body.printing-autopsy .site-head, body.printing-autopsy .site-foot,
  body.printing-autopsy main > section:not(#autopsy),
  body.printing-autopsy #autopsy .autopsy-wrap > div:first-child,
  body.printing-autopsy .autopsy label, body.printing-autopsy .autopsy fieldset,
  body.printing-autopsy .autopsy p:has(button), body.printing-autopsy .after-sting,
  body.printing-autopsy .r90-choices { display: none !important; }
  body.printing-autopsy .autopsy-out, body.printing-autopsy .ruling-card { background: none !important; color: #000 !important; }
  body.printing-autopsy .ruling-card .mono, body.printing-autopsy .rc-mark { color: #6B6358 !important; }
  body.printing-autopsy .ruling-card p { color: #000 !important; }
}

/* Self-Trust figure, refined: the hand rests on the heart, rises to the forehead, returns. */
.reset-fig .rs-hand { transform-origin: 0 0; transform: translate(10px, 88px); transition: transform 1.2s ease-in-out; }
.reset-card.is-touch .rs-hand, .reset-card.is-say .rs-hand { transform: translate(0, 0); }
.reset-card.is-bridge .rs-hand, .reset-card.is-done .rs-hand { transform: translate(10px, 88px); }
.reset-hero .rs-hand { animation: rs-hand2 9s ease-in-out infinite; }
@keyframes rs-hand2 { 0% { transform: translate(10px, 88px); } 15%, 45% { transform: translate(0, 0); } 58%, 100% { transform: translate(10px, 88px); } }
@keyframes rs-bridge { 0%, 55% { stroke-dashoffset: 130; } 80%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 130; } }
/* on dark grounds, outlines turn cream so the figure stays legible */
.ink .reset-fig [stroke="#142630"] { stroke: #F4F0E6; }
.ink .reset-fig [fill="#E4DCCB"] { fill: rgba(244, 240, 230, 0.12); }
@media (prefers-reduced-motion: reduce) { .reset-hero .rs-hand { transform: translate(0, 0); } }

/* Rest week: labels below the bars, where they can be read */
.rest-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; height: auto; margin-top: 1.5rem; }
.night-col { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.night-col .night { width: 100%; height: 110px; background: rgba(20, 38, 48, 0.08); border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; }
.night-col em { font-style: normal; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.78rem; color: var(--text); }
.night-col b { font-weight: 400; font-size: 0.72rem; color: var(--muted); }

/* Decision Autopsy: one centered form, two columns on desktop */
.autopsy-wrap { max-width: 52rem; }
.autopsy-wrap > div:first-child { text-align: center; max-width: 44rem; margin: 0 auto 2rem; }
.autopsy-grid { display: grid; gap: 0 1.25rem; }
@media (min-width: 720px) { .autopsy-grid { grid-template-columns: 1fr 1fr; } .autopsy-grid .span-2 { grid-column: 1 / -1; } }

/* ============================================================
   The 90-Second Shame Reset
   ============================================================ */
.reset90 { text-align: center; align-self: center; }
.r90-face { position: relative; width: min(230px, 62vw); margin: 0 auto 1rem; }
.r90-ring { width: 100%; height: auto; display: block; }
.r90-arc { transition: stroke-dashoffset 250ms linear; }
.r90-count { position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font-family: "Instrument Serif", Georgia, serif; font-size: 3.4rem; line-height: 1; }
.r90-say { font-family: "Instrument Serif", Georgia, serif; font-size: 1.4rem; line-height: 1.3; margin: 0.5rem 0 0; min-height: 3.6rem; }
.r90-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.r90-chip { font: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.5rem 0.9rem; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff; color: var(--text); transition: all 160ms ease; }
.r90-chip:hover, .r90-chip:focus-visible { border-color: var(--text); }
.r90-chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.r90-own { width: 100%; margin-top: 0.4rem; padding: 0.55rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--r-sm); font: inherit; }
.r90-end { width: 100%; margin: 0 0 0.5rem; font-weight: 600; }
.r90-endrow { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; width: 100%; }
/* the ring breathes during move two */
.reset90.is-p1 .r90-face::after { content: ""; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.35), transparent 70%); transform: scale(.55); transition: transform 4s ease-in-out; }
.reset90.is-p1.is-inhale .r90-face::after { transform: scale(1); transition-duration: 4s; }
.reset90.is-p1:not(.is-inhale) .r90-face::after { transform: scale(.55); transition-duration: 8s; }
.reset90.is-done .r90-count { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .reset90 .r90-face::after { transition: none; } }

/* The pocket card */
.pocket-card { background: #FBF8F1; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.5rem 1.6rem;
  max-width: 24rem; box-shadow: 0 18px 40px -30px rgba(20,38,48,.45); align-self: center; }
.pocket-card .mono { color: var(--gold); margin: 0 0 0.75rem; }
.pocket-card ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.pc-foot { margin: 1rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 0.6rem; }
@media print {
  body.printing-card > *:not(main), body.printing-card main > section:not(#card) { display: none !important; }
  body.printing-card #card .wrap > div:first-child { display: none !important; }
  body.printing-card .pocket-card { box-shadow: none; page-break-inside: avoid; }
}
/* The reset card carries its own colors, wherever it sits */
.reset90 { background: #FBF8F1; color: var(--text); border-color: rgba(195, 188, 172, 0.8); }
.reset90 .mono { color: var(--muted); }
.reset90 .r90-say { color: var(--text); }
.reset90 .r90-count { color: var(--ink); }
.reset90.is-done .r90-count { color: var(--gold); }
.reset90 .r90-face { z-index: 0; }
.reset90 .r90-count { position: absolute; inset: 0; z-index: 2; }
.reset90.is-p1 .r90-face::after { z-index: 1; }
.r90-choices[hidden], .autopsy-out[hidden], .gm-email[hidden] { display: none !important; }

/* Self-Trust Kit: rating, tags, ruling card, findings */
.sting { display: flex !important; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.sting input { flex: 1; accent-color: var(--gold); }
.sting output { font-family: "Instrument Serif", Georgia, serif; font-size: 1.8rem; min-width: 2ch; text-align: right; }
.ruling { border: 0; padding: 0; margin: 1.25rem 0 0; }
.ruling legend { margin-bottom: 0.6rem; }
.ruling-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.ruling-row span { font-family: "Instrument Serif", Georgia, serif; font-size: 1.1rem; white-space: nowrap; }
.ruling-row input { flex: 1; min-width: 12rem; margin: 0 !important; }
.ruling-card { background: linear-gradient(160deg, #142630 0%, #1E4640 100%); color: #F4F0E6; border-radius: 16px; padding: 1.5rem 1.6rem; }
.ruling-card .mono { color: var(--gold); margin: 0 0 0.75rem; }
.rc-title { font-family: "Instrument Serif", Georgia, serif; font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.75rem; }
.ruling-card p { color: rgba(244, 240, 230, 0.88); }
.rc-ruling { font-family: "Instrument Serif", Georgia, serif; font-size: 1.15rem; border-top: 1px solid rgba(201,162,39,.4); padding-top: 0.9rem; margin-top: 0.9rem; }
.rc-mark { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,240,230,.6); }
.rc-mark img { border-radius: 50%; }
.after-sting { margin-top: 1.25rem; }
.tags { margin-bottom: 1rem; }
.tags .mono { margin: 0.75rem 0 0.35rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-row button { font: inherit; font-size: 0.85rem; cursor: pointer; padding: 0.4rem 0.8rem; min-height: 40px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; color: var(--text); }
.tag-row button:hover { border-color: var(--text); }
.tag-row button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.thermo-find, .thermo-low { margin-top: 1rem; padding: 1rem 1.15rem; border-radius: var(--r-md); background: rgba(30, 70, 64, 0.07); border: 1px solid rgba(30, 70, 64, 0.18); }
.thermo-low { background: rgba(201, 162, 39, 0.1); border-color: rgba(201, 162, 39, 0.35); }
.thermo-find p, .thermo-low p { margin: 0.25rem 0 0; font-size: 0.95rem; }
.thermo-find[hidden], .thermo-low[hidden] { display: none !important; }
.inline-offer { text-decoration: underline; text-underline-offset: 4px; }
.privacy-note { font-size: 0.85rem; color: rgba(244, 240, 230, 0.7); margin-top: 1rem; }
.privacy-note::before { content: "\1F512  "; }
.layer-tag { color: var(--gold-text) !important; margin-bottom: 0.25rem !important; }
.st-after { margin-top: 1rem; }
.st-after[hidden] { display: none !important; }

/* Sleep week: bars read against a target line instead of filling the box */
.rest-week { position: relative; }
.night-col .night { position: relative; background: rgba(20, 38, 48, 0.05); }
.night-col .night::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--target, 80%); height: 0; border-top: 1px dashed rgba(201, 162, 39, 0.9); }
.night-col .night span { border-radius: 8px 8px 0 0; transition: height 400ms ease; }
.night-col .night span.is-met { background: linear-gradient(180deg, #2F6F63, #1E4640); }
.night-col .night span.is-short { background: linear-gradient(180deg, #4C6B79, #2B4A5A); }

.rest-out { padding-bottom: 1.5rem; }

/* The free-guide band: form sits directly under its copy, with no inherited padding */
.signup-live { align-items: start; }
.signup-body .signup-form { margin-top: 1rem; }
.signup-form .fd-embed > div, .signup-form .fd-embed > div > div { padding-top: 0 !important; padding-bottom: 0 !important; }
.usp { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; max-width: 54ch; }
.usp li { position: relative; padding-left: 1.4rem; font-size: 0.97rem; color: rgba(244, 240, 230, 0.86); }
.usp li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.usp strong { color: #F4F0E6; }

/* The GraceOS layer strip: where you are, and what comes next */
.layer-strip-wrap { padding: 1.25rem 0; background: var(--ink); border-top: 1px solid rgba(201, 162, 39, 0.3); }
.layer-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin: 0; color: rgba(244, 240, 230, 0.86); font-size: 0.92rem; }
.layer-strip a { text-decoration: none; }
.layer-strip .mono { color: var(--gold); margin: 0; }
.layer-strip a:hover .mono { text-decoration: underline; text-underline-offset: 4px; }
.layer-strip .layer-next a { color: #F4F0E6; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Thumb-friendly: 16px form text (no iOS zoom on focus),
   44px targets for standalone links, legible small labels.
   ============================================================ */
@media (max-width: 849px) {
  input, select, textarea, button { font-size: 16px; }
  input[type="range"] { min-height: 44px; }
  .mono { font-size: 0.78rem; }
  .shelf-badge, .fineprint, .day-n, .gm-pct, .player-times, .night-col em, .night-col b { font-size: 0.78rem; }
  .crumbs { font-size: 0.76rem; }
  p > a:only-child, .card p > a:only-child, .rows .row p > a:only-child,
  .layer-strip a, .os-links a, .tool-nav a, .shelf-item, .qa > summary {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .layer-strip { gap: 0.25rem 1rem; }
  .brand { min-height: 44px; }
  .buy a, .share a, .btn, .btn-ghost, .r90-chip, .pick button, .tag-row button, .script-chips button { min-height: 44px; }
  .q-opts span { min-height: 52px; }
}
@media (max-width: 849px) {
  /* form text never below 16px, so phones don't zoom on focus */
  input:not([type="range"]), select, textarea { font-size: 16px !important; }
  /* the smallest labels lift to a legible size */
  .book figcaption .mono, .pc-foot, .pay-methods, .foot-os, .shelf-badge, .gm-foot, .rc-mark { font-size: 0.76rem; }
}
.next-line { margin: 0; font-size: 1rem; }

/* The organizations request form */
.req-progress { height: 5px; background: rgba(20,38,48,.1); border-radius: 999px; overflow: hidden; margin-bottom: 0.6rem; }
.req-progress span { display: block; height: 100%; width: 25%; background: var(--gold); transition: width 300ms ease; }
.req-step { display: none; border: 0; padding: 0; margin: 1rem 0 0; }
.req-step.is-on { display: block; }
.req-step legend { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.9rem; padding: 0; }
.req label { display: block; font-weight: 600; font-size: 0.92rem; margin-top: 1rem; }
.req input:not([type="checkbox"]), .req textarea { display: block; width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--r-sm); font: inherit; background: #fff; }
.req input:focus-visible, .req textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.req-nav { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.req-nav .btn, .req-nav .btn-ghost { flex: 1; justify-content: center; }

/* Shame Reset: practice mode, the moon, the standing sentence */
.r90-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; margin-top: 1rem; }
.r90-practice-note { margin-top: 0.4rem; }
.r90-standing { width: 100%; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.r90-save { border-style: dashed; }
.r90-voice { margin-top: 0.75rem; }
.moon { background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.3rem 0.4rem; color: inherit; opacity: 0.75; }
.moon:hover, .moon[aria-pressed="true"] { opacity: 1; color: var(--gold); }
.reset-dark body, html.reset-dark body { background: #0E1720; }
html.reset-dark section.edge, html.reset-dark section.sage, html.reset-dark section.sand { background: #0E1720; color: rgba(244,240,230,.82); }
html.reset-dark h1, html.reset-dark h2, html.reset-dark h3 { color: #F4F0E6; }
html.reset-dark .card { background: #16222D; border-color: rgba(244,240,230,.14); color: rgba(244,240,230,.86); }
html.reset-dark .reset90 { background: #16222D; color: rgba(244,240,230,.9); }
html.reset-dark .reset90 .r90-count, html.reset-dark .reset90 .r90-say { color: #F4F0E6; }
html.reset-dark .r90-chip, html.reset-dark .r90-own { background: #1D2B37; color: #F4F0E6; border-color: rgba(244,240,230,.25); }
html.reset-dark .r90-chip[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
html.reset-dark .pocket-card { background: #16222D; color: rgba(244,240,230,.88); border-color: rgba(244,240,230,.18); }
html.reset-dark .rows .row { border-color: rgba(244,240,230,.14); }
html.reset-dark .mono { color: rgba(244,240,230,.66); }
.reset90.is-practice::before { content: "Practice run"; display: block; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.row.is-scope .mono { color: var(--gold); }
.ribbon { margin: 1rem 0 0; padding: 0.9rem 1rem; border-left: 2px solid var(--gold); background: rgba(201, 162, 39, 0.06);
  font-size: 0.92rem; border-radius: 0 10px 10px 0; }
.ribbon .mono { display: block; color: var(--gold); margin: 0 0 0.15rem; }
.ribbon .mono + .mono, .ribbon .mono:nth-of-type(2) { margin-top: 0.6rem; }
.ink .ribbon, .night .ribbon { background: rgba(201, 162, 39, 0.1); }
.worked { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--rule); font-size: 0.9rem; color: var(--muted); }
.worked .mono { display: block; color: var(--gold); margin-bottom: 0.2rem; }
html.reset-dark .r90-ring circle:first-of-type { stroke: rgba(244, 240, 230, 0.16); }
html.reset-dark .night-col .night { background: rgba(244, 240, 230, 0.08); }
/* Optional email slot, shown only once a Flodesk form id is configured */
.capture { margin-top: 1.5rem; padding: 1.25rem 1.35rem; border-radius: var(--r-md); background: #FBF8F1; border: 1px solid rgba(195,188,172,.7); }
.capture[hidden] { display: none !important; }
.capture h3 { margin: 0.3rem 0 0.4rem; font-size: 1.25rem; }
html.reset-dark .capture { background: #16222D; border-color: rgba(244,240,230,.16); }
.r90-panel { margin-top: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: rgba(30, 70, 64, 0.07);
  border: 1px solid rgba(30, 70, 64, 0.18); text-align: left; }
.r90-panel[hidden] { display: none !important; }
.r90-panel .mono { color: var(--gold); margin: 0 0 0.35rem; }
.r90-panel p { margin: 0.5rem 0 0; font-size: 0.95rem; }
html.reset-dark .r90-panel { background: rgba(244, 240, 230, 0.06); border-color: rgba(244, 240, 230, 0.16); }
.r90-welcome { margin-top: 0.75rem; }
.r90-welcome[hidden] { display: none !important; }

/* ============================================================
   Mechanism and limits: a footer to each tool, never a wedge
   between its label and its heading.
   ============================================================ */
.ribbon { display: grid; gap: 1.25rem; margin: 2.5rem 0 0.5rem; padding: 1.4rem 1.5rem;
  border-radius: var(--r-md); background: rgba(30, 70, 64, 0.05); border: 1px solid rgba(30, 70, 64, 0.16);
  box-shadow: inset 3px 0 0 var(--gold); }
@media (min-width: 760px) { .ribbon { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.ribbon .mono { margin: 0 0 0.3rem; color: var(--gold); }
.ribbon p:not(.mono) { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.ink .ribbon, .night .ribbon, .forest .ribbon { background: rgba(244, 240, 230, 0.06); border-color: rgba(244, 240, 230, 0.16); }
.sand .ribbon { background: rgba(30, 70, 64, 0.06); }
html.reset-dark .ribbon { background: rgba(244, 240, 230, 0.06); border-color: rgba(244, 240, 230, 0.16); }
@media (max-width: 759px) { .ribbon { margin-top: 2rem; padding: 1.2rem 1.25rem; } }
.cite-context { display: block; margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; color: var(--muted); font-style: normal; }
.ink .cite-context, .night .cite-context { color: rgba(244, 240, 230, 0.6); }
.print-line { margin: 0.35rem 0 0.75rem; font-size: 0.85rem; color: var(--muted); }
.ink .print-line, .night .print-line { color: rgba(244, 240, 230, 0.66); }
.pay-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0.9rem; justify-content: center; }
.pay-badges span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.3rem 0.55rem; border: 1px solid var(--rule); border-radius: 6px; color: var(--muted); background: #fff; }
.ink .pay-badges span, .night .pay-badges span { background: rgba(244,240,230,.08); border-color: rgba(244,240,230,.24); color: rgba(244,240,230,.8); }
.tier .pay-badges { justify-content: flex-start; }
.access-strip { margin: 0; font-size: 0.95rem; }
.access-strip .mono { display: inline-block; color: var(--gold); margin-right: 0.5rem; }
@media (max-width: 849px) { .pay-badges span { font-size: 0.68rem; } }
[data-offer-soon][hidden] { display: none !important; }

/* Sleep chart legend, in the flow with room beneath it */
.rest-legend { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 2rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
.legend-dash { display: inline-block; width: 26px; height: 0; border-top: 1px dashed rgba(201, 162, 39, 0.9); }
.rest-out h3 { margin-top: 0; }
@media (max-width: 849px) { .rest-legend { font-size: 0.72rem; margin-bottom: 1.5rem; } }
.heritage-line { margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--gold); font-size: 0.95rem; color: rgba(244, 240, 230, 0.8); }
.heritage-line .mono { display: block; color: var(--gold); margin-bottom: 0.2rem; }
.heritage-line em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.15em; color: #F4F0E6; }

/* ============================================================
   Gold, legible. Bright gold stays on dark grounds and buttons;
   text on cream, sand, sage, and cards uses a deeper gold that
   clears 4.5:1 instead of the 2.1:1 the bright one managed.
   ============================================================ */
:root { --gold-text: #6E5410; }
.h-num, .q-num, .cy-node .cy-n, .q-n, .os-n, .layer-tag, .ribbon .mono, .worked .mono, .r90-panel .mono, .access-strip .mono, .pocket-card .mono, .row.is-scope .mono, .reset90.is-practice::before, .journal-soon, .moon:hover, .moon[aria-pressed="true"], .sound-btn[aria-pressed="true"] strong::after { color: var(--gold-text); }
.ink .h-num, .ink .q-num, .ink .cy-node .cy-n, .ink .q-n, .ink .os-n, .ink .layer-tag, .ink .ribbon .mono, .ink .worked .mono, .ink .r90-panel .mono, .ink .access-strip .mono, .ink .pocket-card .mono, .ink .row.is-scope .mono, .ink .reset90.is-practice::before, .ink .journal-soon, .ink .sound-btn[aria-pressed="true"] strong::after, .night .h-num, .night .q-num, .night .cy-node .cy-n, .night .q-n, .night .os-n, .night .layer-tag, .night .ribbon .mono, .night .worked .mono, .night .r90-panel .mono, .night .access-strip .mono, .night .pocket-card .mono, .night .row.is-scope .mono, .night .reset90.is-practice::before, .night .journal-soon, .night .sound-btn[aria-pressed="true"] strong::after, .forest .h-num, .forest .q-num, .forest .cy-node .cy-n, .forest .q-n, .forest .os-n, .forest .layer-tag, .forest .ribbon .mono, .forest .worked .mono, .forest .r90-panel .mono, .forest .access-strip .mono, .forest .pocket-card .mono, .forest .row.is-scope .mono, .forest .reset90.is-practice::before, .forest .journal-soon, .forest .sound-btn[aria-pressed="true"] strong::after, .teal .h-num, .teal .q-num, .teal .cy-node .cy-n, .teal .q-n, .teal .os-n, .teal .layer-tag, .teal .ribbon .mono, .teal .worked .mono, .teal .r90-panel .mono, .teal .access-strip .mono, .teal .pocket-card .mono, .teal .row.is-scope .mono, .teal .reset90.is-practice::before, .teal .journal-soon, .teal .sound-btn[aria-pressed="true"] strong::after, .plum .h-num, .plum .q-num, .plum .cy-node .cy-n, .plum .q-n, .plum .os-n, .plum .layer-tag, .plum .ribbon .mono, .plum .worked .mono, .plum .r90-panel .mono, .plum .access-strip .mono, .plum .pocket-card .mono, .plum .row.is-scope .mono, .plum .reset90.is-practice::before, .plum .journal-soon, .plum .sound-btn[aria-pressed="true"] strong::after, .clay .h-num, .clay .q-num, .clay .cy-node .cy-n, .clay .q-n, .clay .os-n, .clay .layer-tag, .clay .ribbon .mono, .clay .worked .mono, .clay .r90-panel .mono, .clay .access-strip .mono, .clay .pocket-card .mono, .clay .row.is-scope .mono, .clay .reset90.is-practice::before, .clay .journal-soon, .clay .sound-btn[aria-pressed="true"] strong::after, .slate .h-num, .slate .q-num, .slate .cy-node .cy-n, .slate .q-n, .slate .os-n, .slate .layer-tag, .slate .ribbon .mono, .slate .worked .mono, .slate .r90-panel .mono, .slate .access-strip .mono, .slate .pocket-card .mono, .slate .row.is-scope .mono, .slate .reset90.is-practice::before, .slate .journal-soon, .slate .sound-btn[aria-pressed="true"] strong::after, .ink-deep .h-num, .ink-deep .q-num, .ink-deep .cy-node .cy-n, .ink-deep .q-n, .ink-deep .os-n, .ink-deep .layer-tag, .ink-deep .ribbon .mono, .ink-deep .worked .mono, .ink-deep .r90-panel .mono, .ink-deep .access-strip .mono, .ink-deep .pocket-card .mono, .ink-deep .row.is-scope .mono, .ink-deep .reset90.is-practice::before, .ink-deep .journal-soon, .ink-deep .sound-btn[aria-pressed="true"] strong::after, .grace-map .h-num, .grace-map .q-num, .grace-map .cy-node .cy-n, .grace-map .q-n, .grace-map .os-n, .grace-map .layer-tag, .grace-map .ribbon .mono, .grace-map .worked .mono, .grace-map .r90-panel .mono, .grace-map .access-strip .mono, .grace-map .pocket-card .mono, .grace-map .row.is-scope .mono, .grace-map .reset90.is-practice::before, .grace-map .journal-soon, .grace-map .sound-btn[aria-pressed="true"] strong::after, .autopsy-out .h-num, .autopsy-out .q-num, .autopsy-out .cy-node .cy-n, .autopsy-out .q-n, .autopsy-out .os-n, .autopsy-out .layer-tag, .autopsy-out .ribbon .mono, .autopsy-out .worked .mono, .autopsy-out .r90-panel .mono, .autopsy-out .access-strip .mono, .autopsy-out .pocket-card .mono, .autopsy-out .row.is-scope .mono, .autopsy-out .reset90.is-practice::before, .autopsy-out .journal-soon, .autopsy-out .sound-btn[aria-pressed="true"] strong::after, .ruling-card .h-num, .ruling-card .q-num, .ruling-card .cy-node .cy-n, .ruling-card .q-n, .ruling-card .os-n, .ruling-card .layer-tag, .ruling-card .ribbon .mono, .ruling-card .worked .mono, .ruling-card .r90-panel .mono, .ruling-card .access-strip .mono, .ruling-card .pocket-card .mono, .ruling-card .row.is-scope .mono, .ruling-card .reset90.is-practice::before, .ruling-card .journal-soon, .ruling-card .sound-btn[aria-pressed="true"] strong::after, .rest-cta .h-num, .rest-cta .q-num, .rest-cta .cy-node .cy-n, .rest-cta .q-n, .rest-cta .os-n, .rest-cta .layer-tag, .rest-cta .ribbon .mono, .rest-cta .worked .mono, .rest-cta .r90-panel .mono, .rest-cta .access-strip .mono, .rest-cta .pocket-card .mono, .rest-cta .row.is-scope .mono, .rest-cta .reset90.is-practice::before, .rest-cta .journal-soon, .rest-cta .sound-btn[aria-pressed="true"] strong::after, html.reset-dark .h-num, html.reset-dark .q-num, html.reset-dark .cy-node .cy-n, html.reset-dark .q-n, html.reset-dark .os-n, html.reset-dark .layer-tag, html.reset-dark .ribbon .mono, html.reset-dark .worked .mono, html.reset-dark .r90-panel .mono, html.reset-dark .access-strip .mono, html.reset-dark .pocket-card .mono, html.reset-dark .row.is-scope .mono, html.reset-dark .reset90.is-practice::before, html.reset-dark .journal-soon, html.reset-dark .sound-btn[aria-pressed="true"] strong::after, .layer-strip-wrap .h-num, .layer-strip-wrap .q-num, .layer-strip-wrap .cy-node .cy-n, .layer-strip-wrap .q-n, .layer-strip-wrap .os-n, .layer-strip-wrap .layer-tag, .layer-strip-wrap .ribbon .mono, .layer-strip-wrap .worked .mono, .layer-strip-wrap .r90-panel .mono, .layer-strip-wrap .access-strip .mono, .layer-strip-wrap .pocket-card .mono, .layer-strip-wrap .row.is-scope .mono, .layer-strip-wrap .reset90.is-practice::before, .layer-strip-wrap .journal-soon, .layer-strip-wrap .sound-btn[aria-pressed="true"] strong::after { color: var(--gold); }
.tier-list li::before, .os-links a::after { color: var(--gold-text); }
.ink .tier-list li::before, .night .tier-list li::before, .forest .tier-list li::before { color: var(--gold); }
.gm-layer a, .foot-os a, .crumbs a, .gm-head .mono, .os-mini span { color: var(--gold); }

/* Light cards inside dark sections carry their own text colors */
.reset90 .btn-ghost { color: var(--text); border-color: var(--rule); }
.reset90 .btn-ghost:hover, .reset90 .btn-ghost:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.reset90 .fineprint, .reset90 .r90-practice-note, .r90-panel p, .r90-welcome { color: var(--muted); }
.r90-panel .mono, .reset90 .mono { color: var(--gold-text); }
html.reset-dark .r90-panel .mono, html.reset-dark .reset90 .mono { color: var(--gold); }
html.reset-dark .reset90 .btn-ghost { color: #F4F0E6; border-color: rgba(244,240,230,.4); }
html.reset-dark .reset90 .fineprint, html.reset-dark .r90-panel p { color: rgba(244,240,230,.72); }
/* The foundation layer reads dark until it's the one selected */
.os-foundation:not([aria-pressed="true"]), .os-foundation:not([aria-pressed="true"]) .os-tag { color: var(--text); }
.os-foundation:not([aria-pressed="true"]) .os-name { color: var(--ink); }
/* Captions on every dark ground */
.ink .cite-context, .night .cite-context, .forest .cite-context, .teal .cite-context,
.plum .cite-context, .clay .cite-context, .slate .cite-context { color: rgba(244, 240, 230, 0.72); }
/* The layer tag on dark grounds keeps the bright gold */
.ink .layer-tag, .night .layer-tag, .forest .layer-tag, .teal .layer-tag { color: var(--gold) !important; }
/* Light cards inside dark sections: the deeper gold wins there too */
.ink .reset90 .mono, .ink .r90-panel .mono, .ink .reset90.is-practice::before,
.night .reset90 .mono, .night .r90-panel .mono, .night .reset90.is-practice::before { color: var(--gold-text); }
html.reset-dark .ink .reset90 .mono, html.reset-dark .ink .r90-panel .mono,
html.reset-dark .ink .reset90.is-practice::before { color: var(--gold); }
/* A selected stage turns dark, so its number returns to bright gold */
.cy-node[aria-pressed="true"] .cy-n { color: var(--gold); }
.os-layer[aria-pressed="true"] .os-n { color: var(--gold); }

/* Rest debt: the inputs stay with you, and the results keep a readable measure */
@media (min-width: 900px) {
  .rest { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 3.5rem; }
  .rest-in { position: sticky; top: 104px; }
  .rest-out { max-width: 62ch; }
}
.how { margin: 1rem 0 0; max-width: 54ch; }
.how summary { cursor: pointer; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.4rem 0; min-height: 40px; display: flex; align-items: center; }
.how summary::marker { color: var(--gold-text); }
.how p { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--muted); max-width: 62ch; }
.ink .how summary, .night .how summary { color: rgba(244, 240, 230, 0.7); }

/* The guide band: the copy and form stay with the reader while the script card scrolls */
@media (min-width: 900px) {
  .signup-live { align-items: start; }
  .signup-live .signup-body { position: sticky; top: 104px; }
}
.script-blur { max-height: 7.5rem; overflow: hidden; }

/* ============================================================
   Breathing room: a slightly wider rhythm between sections and
   inside grids on larger screens. Measure stays book-width.
   ============================================================ */
@media (min-width: 900px) {
  section { padding-block: clamp(4rem, 7.5vw, 7rem); }
  .grid { gap: 2rem; }
  .grid.g-2 { gap: 2.5rem; }
  section > .wrap > h2 + p, section > .wrap > p.lede { margin-top: 1rem; }
  .rows .row { padding-top: 1.3rem; padding-bottom: 1.3rem; }
}

/* Flodesk in narrow places: give the embed the full width of its card,
   and style the hosted-form button when a form runs as a link instead. */
.card > .fd-embed:not(:empty) { margin-inline: -0.25rem; }
.fd-embed:not(:empty) { min-width: 0; }
.form-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 0.75rem; }
.form-link + .fineprint { margin-top: 0.5rem; }

/* ============================================================
   A light card inside a dark section carries its own text colors.
   Cards meant to be dark set their color inline, which still wins.
   ============================================================ */
.ink .card:not(.card-dark), .night .card:not(.card-dark), .forest .card:not(.card-dark), .teal .card:not(.card-dark), .plum .card:not(.card-dark), .clay .card:not(.card-dark), .slate .card:not(.card-dark), .ink-deep .card:not(.card-dark) { color: var(--text); }
.ink .card:not(.card-dark) .mono, .night .card:not(.card-dark) .mono, .forest .card:not(.card-dark) .mono, .teal .card:not(.card-dark) .mono,
.plum .card:not(.card-dark) .mono, .clay .card:not(.card-dark) .mono, .slate .card:not(.card-dark) .mono { color: var(--gold-text); }
.ink .card:not(.card-dark) .fineprint, .night .card:not(.card-dark) .fineprint, .forest .card:not(.card-dark) .fineprint,
.teal .card:not(.card-dark) .fineprint, .plum .card:not(.card-dark) .fineprint, .slate .card:not(.card-dark) .fineprint { color: var(--muted); }
.ink .card:not(.card-dark) h2, .ink .card:not(.card-dark) h3, .night .card:not(.card-dark) h2, .night .card:not(.card-dark) h3, .forest .card:not(.card-dark) h3,
.teal .card:not(.card-dark) h3, .plum .card:not(.card-dark) h3, .clay .card:not(.card-dark) h3, .slate .card:not(.card-dark) h3 { color: var(--ink); }
.ink .card:not(.card-dark) .rows .row, .night .card:not(.card-dark) .rows .row, .forest .card:not(.card-dark) .rows .row { border-color: var(--rule); }
.ink .card:not(.card-dark) a:not(.btn):not(.btn-ghost), .night .card:not(.card-dark) a:not(.btn):not(.btn-ghost),
.forest .card:not(.card-dark) a:not(.btn):not(.btn-ghost), .teal .card:not(.card-dark) a:not(.btn):not(.btn-ghost) { color: var(--ink); text-decoration-color: var(--gold); }

/* Dark cards keep the bright gold and cream they were built with */
.card-dark .mono { color: var(--gold); }
.card-dark, .card-dark p, .card-dark .fineprint { color: rgba(244, 240, 230, 0.86); }
.card-dark .rows .row { border-color: rgba(244, 240, 230, 0.2); }
.card-dark a:not(.btn):not(.btn-ghost) { color: #F4F0E6; }
/* Crisis lines read on whatever ground they land on */
.sand .crisis-note, .sage .crisis-note, .edge .crisis-note, .cream .crisis-note { color: var(--muted); }
.sand .crisis-note a, .sage .crisis-note a, .edge .crisis-note a { color: var(--ink); }

/* Gold labels on the colored dark grounds: a touch lighter, so they clear 4.5:1 */
.forest .mono, .teal .mono, .plum .mono, .clay .mono,
.forest .card-dark .mono, .teal .card-dark .mono, .plum .card-dark .mono, .clay .card-dark .mono,
.forest .layer-tag, .teal .layer-tag { color: #D9B443; }
/* Clay was too light to carry cream text */
.clay { background: #94502F; }
/* Crisis lines: muted by default, cream only on dark grounds */
.crisis-note { color: var(--muted); }
.crisis-note a { color: var(--ink); }
.ink .crisis-note, .night .crisis-note, .forest .crisis-note, .teal .crisis-note,
.plum .crisis-note, .clay .crisis-note, .slate .crisis-note { color: rgba(244, 240, 230, 0.8); }
.ink .crisis-note a, .night .crisis-note a, .forest .crisis-note a, .teal .crisis-note a,
.plum .crisis-note a, .clay .crisis-note a, .slate .crisis-note a { color: #F4F0E6; }
/* The Trigger Tracker's own muted tone, on each of its grounds */
.tt-theme { --tt-muted: #5F6672; }
.tt-theme > section.night .mono, .tt-theme > section.ink .mono,
.tt-theme > section.night .fineprint, .tt-theme > section.ink .fineprint { color: #A7AFBC; }
/* Clay is the warmest ground, so its labels go pale gold rather than gold */
.clay .mono, .clay .card-dark .mono, .clay .layer-tag { color: #F4E3B8; }
/* The app page: links on its dark bands use its pale harbor */
.tt-theme > section.ink p a:not(.btn):not(.btn-ghost),
.tt-theme > section.ink li a:not(.btn):not(.btn-ghost),
.tt-theme > section.ink .rows a:not(.btn):not(.btn-ghost) { color: #9FC7D6; }
.tt-theme .layer-strip .layer-next a { color: #F4F0E6; }
.clay .fineprint, .clay .card-dark .fineprint { color: rgba(244, 240, 230, 0.95); }

/* The practitioners card: built to be read on the dark hero, not inherited from it */
.use-card { align-self: center; background: linear-gradient(160deg, rgba(244,240,230,.10), rgba(244,240,230,.04));
  border: 1px solid rgba(244,240,230,.22); border-radius: var(--r-md); padding: clamp(1.4rem, 3vw, 2rem); backdrop-filter: blur(2px); }
.use-card > .mono { color: var(--gold); margin: 0 0 1.1rem; }
.use-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.use-list li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.9rem; align-items: start;
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(244,240,230,.16); }
.use-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.use-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--gold); border: 1px solid rgba(201,162,39,.5); border-radius: 50%; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center; }
.use-when { font-family: "Instrument Serif", Georgia, serif; font-size: 1.2rem; color: #F4F0E6; margin: 0 0 0.2rem; }
.use-list p:not(.use-when) { margin: 0; font-size: 0.95rem; color: rgba(244,240,230,.85); }
.use-list a { color: #F4F0E6; text-decoration: underline; text-decoration-color: rgba(201,162,39,.8); text-underline-offset: 3px; }
.use-list a:hover { text-decoration-color: var(--gold); }
.use-foot { margin: 1.2rem 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,240,230,.6); }
.tt-theme section.layer-strip-wrap .layer-strip .layer-next a { color: #F4F0E6; }
.ribbon-note { max-width: 62ch; margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--muted); }
.ink .ribbon-note, .night .ribbon-note, .forest .ribbon-note { color: rgba(244, 240, 230, 0.7); }
/* A hidden element stays hidden, whatever display its class sets */
[hidden] { display: none !important; }

/* ============================================================
   Homepage hero on wide screens: the words hold the left,
   a slow light holds the right. Below 1100px it stacks as before.
   ============================================================ */
.hero-home-inner { max-width: 82rem; }
.hero-orb { display: none; }
@media (min-width: 1100px) {
  .hero-home-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .hero-copy { max-width: 42rem; }
  .hero-orb { display: grid; place-items: center; position: relative; aspect-ratio: 1; width: min(30vw, 440px); justify-self: center; }
  .orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(201, 162, 39, 0.35); }
  .orb-ring::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(244, 240, 230, 0.12); }
  .orb-core { width: 58%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, rgba(232, 199, 90, 0.95), rgba(201, 162, 39, 0.75) 45%, rgba(30, 70, 64, 0.15) 72%);
    filter: blur(2px); animation: hero-orb 6s ease-in-out infinite alternate; }
}
@keyframes hero-orb { from { transform: scale(0.88); opacity: 0.75; } to { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .orb-core { animation: none; } }