/* ============================================================
   Eyebrow — section label above every heading
   11px · 0.32em letter-spacing · uppercase · muted · 500
   24px below
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4); /* 24px */
  display: block;
}

/* ============================================================
   Section title — Fraunces 400, italic <em> drops to 300 accent
   ============================================================ */
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.section-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

/* ============================================================
   Section subtitle — italic Fraunces, the brand voice
   ============================================================ */
.section-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  color: var(--muted);
  max-width: 600px;
}

/* ============================================================
   Buttons
   Single brand curve for every transition.
   ============================================================ */
/* Solid + outline buttons: square, uppercase, generous horizontal
   padding. Default width is intrinsic (inline-block) — buttons never
   stretch to fill their container unless the parent layout opts in by
   adding .btn--full. */
.btn,
.btn-primary,
.btn-accent,
.btn-secondary {
  display: inline-block;
  width: auto;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-3);
  color: var(--bg);
}

.btn-accent {
  background: var(--accent-3);
  color: var(--bg);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--accent-4);
  color: var(--bg);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

/* Inline text link variant. Not uppercase. Single-pixel underline that
   thickens to 2px on hover. */
.btn-text {
  display: inline-block;
  width: auto;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent-3);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  color: var(--accent-3);
  padding: 0 0 2px 0;
  line-height: 1.4;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-text:hover,
.btn-text:focus-visible {
  color: var(--accent-4);
  border-bottom-width: 2px;
  border-bottom-color: var(--accent-4);
}

/* Opt-in modifier: stretch to fill the parent's content box. Only
   applied where a layout explicitly needs a full-width button. */
.btn--full {
  display: block;
  width: 100%;
}

/* ============================================================
   Card — parchment block with 3px tan accent strip on top
   ============================================================ */
.card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--space-4) 22px; /* 24px 22px */
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-color 0.25s var(--ease-brand),
    background 0.25s var(--ease-brand);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-3);
}

.card-meta {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: 500;
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-line);
  color: var(--ink);
}

.card-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   Tier row — the framework primitive
   Coloured bar, parchment text, optional width step-down.
   ============================================================ */
.tier-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* 4px */
}

.tier-row {
  position: relative;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  color: var(--bg);
  background: var(--accent-3);
  transition: transform 0.35s var(--ease-brand);
}

.tier-row:hover { transform: translateX(6px); }

.tier-row--1 { background: var(--accent-1); width: 100%; }
.tier-row--2 { background: var(--accent-2); width: 92%; }
.tier-row--3 { background: var(--accent-3); width: 80%; }
.tier-row--4 { background: var(--accent-4); width: 66%; }
.tier-row--5 { background: var(--accent-5); width: 48%; }

.tier-row__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  font-style: italic;
  opacity: 0.55;
  line-height: 1;
}

.tier-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tier-row__label {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.tier-row__sub {
  font-family: var(--font-body);
  font-size: 12px;
  opacity: 0.78;
}

.tier-row__meta {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  text-align: right;
}

/* ============================================================
   Format note — dark callout on parchment
   ============================================================ */
.format-note {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 20px 28px;
  background: var(--ink);
  color: var(--bg);
}

.format-note__label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-3);
  white-space: nowrap;
}

.format-note__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(244, 237, 226, 0.9);
}

.format-note__text strong {
  font-weight: 500;
  font-style: italic;
  color: var(--accent-3);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  .tier-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: 16px 18px;
  }
  .tier-row__meta { text-align: left; }

  .format-note {
    flex-direction: column;
    gap: var(--space-2);
    padding: 16px 18px;
  }
}

/* ============================================================
   Site footer
   ============================================================ */
.footer {
  margin-top: var(--space-7); /* 100px */
  padding: var(--space-5) 0 var(--space-3);
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__link {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: none;
  /* F10-P1: 44px hit area on mobile. Footer links sit in a flex row of
     standalone targets, so each needs WCAG 2.5.5 minimums. The visual
     remains compact 11px eyebrow text — extra space is below/above. */
  padding: 14px 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.25s var(--ease-brand);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--accent-3);
}

.footer__sep {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.6;
}

.footer__copyright {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}

/* ============================================================
   Legal page templates — render output of /privacy, /terms, /cookies
   ============================================================ */
.legal-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.legal-header h1 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.legal-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 680px;
}

.legal-placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(184, 115, 42, 0.06);
  border-left: 3px solid var(--accent-3);
  padding: var(--space-3) var(--space-4);
}

/* ============================================================
   Generic page-header used by dynamic slug renderer + 404 + coming-soon
   ============================================================ */
.page-header,
.coming-soon {
  margin-bottom: var(--space-6);
  text-align: center;
}

.page-header h1,
.coming-soon h1 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.page-header .section-sub,
.coming-soon .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Cookie consent banner — fixed bottom, brand-true
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bg);
  border-top: 1px solid var(--line);
  /* F10-P1: extra bottom padding on devices with a home-indicator so
     the action buttons clear the system gesture bar. */
  padding:
    var(--space-3)
    max(var(--space-4), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-4), env(safe-area-inset-left));
  box-shadow: 0 -8px 24px rgba(31, 26, 22, 0.04);
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cookie-consent__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  flex: 1 1 320px;
}

.cookie-consent__text a {
  color: var(--accent-3);
  border-bottom: 1px solid currentColor;
  transition: color 0.25s var(--ease-brand);
}

.cookie-consent__text a:hover,
.cookie-consent__text a:focus-visible {
  color: var(--accent-4);
}

.cookie-consent__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cookie-consent__btn {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-height: 0;
  transition:
    background 0.25s var(--ease-brand),
    color 0.25s var(--ease-brand),
    border-color 0.25s var(--ease-brand);
}

.cookie-consent__btn--primary {
  background: var(--ink);
  color: var(--bg);
}

.cookie-consent__btn--primary:hover,
.cookie-consent__btn--primary:focus-visible {
  background: var(--accent-3);
  border-color: var(--accent-3);
}

.cookie-consent__btn--secondary:hover,
.cookie-consent__btn--secondary:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

@media (max-width: 560px) {
  .cookie-consent__inner { flex-direction: column; align-items: stretch; }
  .cookie-consent__actions { justify-content: stretch; }
  .cookie-consent__btn { flex: 1; }
}

/* ============================================================
   Global focus ring — every interactive element uses accent-3
   (warm tan brand accent). 3px solid keeps it clearly visible for
   keyboard navigators per WCAG visible-focus expectations, with a
   small offset so it never collides with the element's own border.
   ============================================================ */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-accent:focus-visible,
.btn-secondary:focus-visible,
.btn-text:focus-visible,
.cookie-consent__btn:focus-visible,
.footer__link:focus-visible,
.page-nav__cta:focus-visible,
.pricing-card__cta:focus-visible {
  outline: 3px solid var(--accent-3);
  outline-offset: 3px;
}

/* Cookie banner buttons get a min tap target */
.cookie-consent__btn { min-height: 44px; }

/* ============================================================
   .page-nav — sticky top nav
   Wordmark left, single CTA right. 64px tall. Border on scroll only.
   ============================================================ */
.page-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 64px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease-brand);
}

.page-nav--scrolled {
  border-bottom-color: var(--line);
}

.page-nav__inner {
  height: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--space-4); /* 24px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-nav__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
  line-height: 1;
  white-space: nowrap;
  /* F10-P1: 44px tap target. The wordmark glyphs are only ~18px tall;
     vertical-center inside a 44px-min flex box so the entire nav-left
     area is tappable on mobile. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.25s var(--ease-brand);
}

.page-nav__wordmark:hover,
.page-nav__wordmark:focus-visible {
  color: var(--accent-3);
}

.page-nav__wordmark em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

.page-nav__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background 0.25s var(--ease-brand),
    color 0.25s var(--ease-brand),
    transform 0.25s var(--ease-brand);
}

.page-nav__cta:hover,
.page-nav__cta:focus-visible {
  background: var(--accent-3);
  color: var(--bg);
  transform: translateY(-1px);
}

/* ============================================================
   .hero — centred opening section
   Mirrors brand-reference.html .header
   ============================================================ */
.hero {
  text-align: center;
  margin-bottom: 80px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.hero .eyebrow {
  margin-bottom: var(--space-4); /* 24px */
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-tracking);
  color: var(--ink);
  margin-bottom: 22px;
}

.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

.hero__subtitle,
.hero .subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto;
}

.hero__actions {
  margin-top: var(--space-5); /* 40px */
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   .section — content container
   ============================================================ */
.section {
  max-width: 920px;
  margin: 0 auto;
  padding: 60px 24px;
}

/* ============================================================
   .section-head — centred eyebrow + title + sub block
   ============================================================ */
.section-head {
  text-align: center;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3); /* 16px */
}

.section-head .eyebrow {
  margin-bottom: 0;
}

.section-head .section-title {
  margin-bottom: 0;
}

.section-head .section-sub {
  margin: 0 auto;
  max-width: 600px;
}

/* ============================================================
   .pricing-card — single tier with top accent strip
   ============================================================ */
.pricing-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    border-color 0.25s var(--ease-brand),
    transform 0.25s var(--ease-brand);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-3);
}

.pricing-card:hover {
  border-color: var(--accent-3);
}

.pricing-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.pricing-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  color: var(--ink);
}

.pricing-card__price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pricing-card__price-meta {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: var(--space-2);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.pricing-card__features li {
  position: relative;
  padding-left: 22px;
}

.pricing-card__features li::before {
  content: '·';
  position: absolute;
  left: 6px;
  top: -2px;
  color: var(--accent-3);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
}

.pricing-card__cta {
  margin-top: auto;
  align-self: stretch;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background 0.25s var(--ease-brand),
    color 0.25s var(--ease-brand),
    transform 0.25s var(--ease-brand);
}

.pricing-card__cta:hover,
.pricing-card__cta:focus-visible {
  background: var(--accent-3);
  transform: translateY(-1px);
}

/* Featured variant — ember strip, more breathing room */
.pricing-card--featured {
  padding: 44px 36px;
}

.pricing-card--featured::before {
  background: var(--accent-4);
  height: 3px;
}

.pricing-card--featured .pricing-card__cta {
  background: var(--accent-4);
}

.pricing-card--featured .pricing-card__cta:hover,
.pricing-card--featured .pricing-card__cta:focus-visible {
  background: var(--accent-3);
}

/* ============================================================
   .testimonial-card — italic quote + eyebrow attribution
   ============================================================ */
.testimonial-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.testimonial-card--hidden {
  display: none;
}

.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.testimonial-card__quote::before { content: '“'; color: var(--accent-3); margin-right: 2px; }
.testimonial-card__quote::after  { content: '”'; color: var(--accent-3); margin-left: 2px; }

.testimonial-card__attribution {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-2);
}

.testimonial-card__attribution strong {
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
   .video-embed — 16:9 player wrapper
   ============================================================ */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-embed > iframe,
.video-embed > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-embed__placeholder {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--bg);
  text-align: center;
  padding: var(--space-4);
}

.video-embed__placeholder::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 38%, var(--accent-3) 38%, var(--accent-3) 62%, transparent 62%) center/14px 14px no-repeat;
  opacity: 0.85;
}

/* When the embed wrapper is empty, surface the placeholder via the modifier */
.video-embed--empty .video-embed__placeholder { display: block; }

@media (max-width: 720px) {
  .pricing-card { padding: 28px 22px; }
  .pricing-card--featured { padding: 36px 26px; }
  .hero { margin-bottom: 60px; padding-bottom: 32px; }
  .section { padding: 48px var(--space-4); } /* 24px gutter per RULES.md #12 */
  .section-head { margin-bottom: 36px; }
  .page-nav__inner { padding: 0 var(--space-3); }
  .page-nav__cta { padding: 8px 14px; font-size: 12px; }
}

/* ===========================================================================
   Auth pages — centred card on parchment (login, setup, error states)
   =========================================================================== */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: var(--space-6) var(--space-3);
}

.auth-card {
  background: rgba(255, 252, 245, 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--space-5);
  max-width: 460px;
  width: 100%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.auth-card--error {
  text-align: center;
}

.auth-card__header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.auth-card__header .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

.auth-card__header .section-title {
  margin: 0;
}

.auth-card__lede {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--muted);
  margin: var(--space-2) 0 0;
}

.auth-card__lede strong {
  color: var(--ink);
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.form-input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.85);
  color: var(--ink);
  transition: border-color 200ms var(--ease-brand),
              box-shadow 200ms var(--ease-brand);
}

.form-input:hover {
  border-color: rgba(42, 34, 28, 0.32);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(184, 115, 42, 0.18);
}

.form-help {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.form-error {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--accent-5);
  background: rgba(138, 42, 31, 0.08);
  border-left: 3px solid var(--accent-5);
  padding: 10px 14px;
  border-radius: 4px;
  margin: 0;
}

.auth-form > .btn {
  margin-top: var(--space-2);
}

.auth-form__alt {
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  margin: var(--space-2) 0 0;
}

/* ========================================================================
   Dark theme variant — used for /admin/login (passwordless magic link).
   The admin console is intentionally visually distinct from the user
   product surface: ink background, parchment text, accent-3 (tan) accents.
   ======================================================================== */

.auth-page--dark {
  background: var(--ink);
  color: var(--bg);
}

/* Full-bleed dark backdrop: cover the entire viewport behind the centered
   card, regardless of the surrounding .page / .content padding. */
.auth-page--dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}

.auth-card--dark {
  background: rgba(30, 24, 18, 0.85);
  border: 1px solid rgba(184, 115, 42, 0.35);
  color: var(--bg);
}

.auth-card--dark .section-title,
.auth-card--dark .form-label {
  color: var(--bg);
}

.auth-card--dark .auth-card__header .eyebrow {
  color: var(--accent-3);
}

.auth-card--dark .auth-card__lede {
  color: rgba(244, 237, 226, 0.72);
}

.auth-card--dark .auth-card__lede strong {
  color: var(--bg);
}

.auth-card--dark .form-help {
  color: rgba(244, 237, 226, 0.65);
}

.auth-card--dark .form-input {
  background: rgba(244, 237, 226, 0.06);
  border-color: rgba(184, 115, 42, 0.32);
  color: var(--bg);
}

.auth-card--dark .form-input::placeholder {
  color: rgba(244, 237, 226, 0.45);
}

.auth-card--dark .form-input:hover {
  border-color: rgba(184, 115, 42, 0.55);
}

.auth-card--dark .form-input:focus {
  outline: none;
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(184, 115, 42, 0.28);
}

.auth-card--dark .btn-primary {
  background: var(--accent-3);
  color: var(--ink);
  border-color: var(--accent-3);
}

.auth-card--dark .btn-primary:hover,
.auth-card--dark .btn-primary:focus-visible {
  background: var(--accent-4);
  border-color: var(--accent-4);
}

.auth-card--dark .btn-text {
  color: var(--accent-3);
}

.auth-card--dark .btn-text:hover,
.auth-card--dark .btn-text:focus-visible {
  color: var(--bg);
}

.auth-card--dark .form-success {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--accent-3);
  margin: 0;
}

/* ============================================================
   Checkout — upsell (success/pdf) + confirmed
   ============================================================ */

.upsell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-6);
  text-align: center;
  position: relative;
  z-index: 2;
}

.confirmation-strip {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.confirmation-strip .eyebrow {
  color: var(--accent-3);
}

/* "Need help?" footer rendered at the bottom of every post-purchase
   confirmation page (upsell, decline, one-click confirmation). Mirrors
   the support details that ship inside the welcome-pack PDF so a
   buyer who closes the tab before the email lands always has a way
   to reach us. */
.support-footer {
  margin: var(--space-7) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  text-align: center;
  max-width: 540px;
}

.support-footer .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--accent-3);
}

.support-footer__body {
  margin: 0;
  color: var(--ink-soft, var(--ink));
  font-size: 0.95rem;
  line-height: 1.55;
}

.support-footer__body a {
  color: var(--ink);
  text-decoration: underline;
}

/* ---- One-to-One Mentorship waitlist phone field ---- */
/* Country-code dropdown sits inline next to the local number input.
   On narrow screens the row collapses so neither field shrinks below
   readability. */
.form-phone-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.form-input--country {
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
  max-width: 260px;
}
.form-input--phone {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 520px) {
  .form-phone-row { flex-direction: column; }
  .form-input--country { width: 100%; max-width: none; }
}

/* ---- Mentorship waitlist /thanks cross-promo + callout ---- */
.waitlist-thanks-callout {
  margin: var(--space-5) auto 0;
  max-width: 56ch;
  padding: var(--space-4) var(--space-5);
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--accent-3);
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.waitlist-promo {
  max-width: 960px;
  margin: var(--space-7) auto 0;
  padding: 0 var(--space-4);
}
.waitlist-promo__eyebrow {
  display: block;
  text-align: center;
  margin-bottom: var(--space-4);
}
.waitlist-promo__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.waitlist-promo__card {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.waitlist-promo__card:hover,
.waitlist-promo__card:focus-visible {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.waitlist-promo__card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  line-height: 1.25;
}
.waitlist-promo__card-body {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft, var(--ink));
  font-size: 0.95rem;
  line-height: 1.55;
}
.waitlist-promo__card-cta {
  display: inline-block;
  font-weight: 600;
  color: var(--accent-3);
}

.upsell__hero {
  margin-bottom: var(--space-4);
}

.upsell__hero .section-title {
  margin-top: var(--space-3);
}

/* Loud above-the-fold offer banner used on the post-purchase upsell
   pages. Sits directly under the green confirmation-strip so the
   timer + discounted price are the first thing the buyer sees. */
.upsell-banner {
  background: var(--ink);
  color: var(--bg);
  padding: 28px 24px 32px;
  margin: 0 calc(50% - 50vw) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  border-top: 3px solid var(--accent-3);
}

.upsell-banner__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-3);
}

.countdown {
  margin: var(--space-5) 0 var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Loud variant for the upsell-banner: bigger, brighter, no margin so
   it sits flush inside the dark banner. */
.countdown--loud {
  margin: 0;
  font-size: clamp(48px, 8vw, 72px);
  font-style: normal;
  font-weight: 400;
  color: var(--bg);
  letter-spacing: 0.04em;
}

.pricing-block--loud {
  margin: 0;
}
.pricing-block--loud .pricing-block__original {
  color: rgba(244, 237, 226, 0.55);
  text-decoration: line-through;
}
.pricing-block--loud .pricing-block__current {
  color: var(--bg);
  font-size: clamp(28px, 4vw, 40px);
}
.upsell-banner .pricing-block__label {
  color: rgba(244, 237, 226, 0.78);
  font-size: 13px;
  margin: 0;
}

.countdown__time {
  display: inline-block;
}

/* Embedded upsell video. The wrapper enforces a 16:9 box via
   aspect-ratio so the iframe fills it cleanly regardless of viewport
   width. Sits between the hero and the feature bullets. */
.upsell-video {
  margin: var(--space-4) auto var(--space-5);
  max-width: 720px;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.upsell-video__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Placeholder variant: dashed parchment box with a play glyph + small
   label. Visible only while `videos_show_placeholders` is true and no
   URL is configured for that upsell. */
.upsell-video--placeholder {
  background: rgba(31, 31, 31, 0.04);
  border: 2px dashed rgba(31, 31, 31, 0.32);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upsell-video__placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(31, 31, 31, 0.62);
}

.upsell-video__icon {
  font-size: 56px;
  line-height: 1;
  opacity: 0.45;
}

.upsell-video__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-block {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.pricing-block__original {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.pricing-block__current {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  color: var(--accent-3);
}

.pricing-block__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-4);
  margin: 0 0 var(--space-5);
}

.pricing-block__label.is-hidden {
  visibility: hidden;
}

.upsell-features {
  list-style: none;
  padding: 0;
  margin: var(--space-5) auto var(--space-6);
  max-width: 460px;
  text-align: left;
}

.upsell-features li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.upsell-features li:last-child {
  border-bottom: none;
}

.upsell-features em {
  font-style: italic;
  color: var(--accent-3);
}

.upsell-cta {
  margin: var(--space-5) 0 var(--space-3);
}

.upsell-cta .btn-accent {
  min-width: 280px;
}

.upsell-cta .btn-accent[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* ============================================================
   Loading state — Fraunces italic display serif while a CTA is
   processing, matching the brand voice instead of the body sans
   fallback. Sizing stays stable: padding + min-width on the parent
   .upsell-cta keep layout from jumping when the label swaps.
   ============================================================ */
.btn.is-loading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* ============================================================
   Inline checkout error — branded with deep-red accent so it reads
   as a brand voice, not a raw browser alert. Sits directly under
   the CTA inside .upsell-cta. Hidden by default via [hidden].
   ============================================================ */
.checkout-error {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-5);
  margin-top: var(--space-3);
  text-align: center;
}

.checkout-error[hidden] { display: none; }

/* ============================================================
   Decline link — clearly secondary to the CTA. Smaller, muted
   color, quiet dotted underline. Hover firms up to ink (kept as
   was). Focus-visible matches the site's global focus ring so
   keyboard users can find it. Vertical padding keeps the tap
   target ~34px tall without enlarging the text.
   ============================================================ */
.upsell-decline {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  border-bottom: 1px dotted var(--line);
}

.upsell-decline:hover,
.upsell-decline:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.upsell-decline:focus-visible {
  outline: 3px solid var(--accent-3);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Upsell hero — one-shot entrance animation on page load.
   Subtle fade + ~8px upward slide using the brand easing curve.
   Gated behind no-preference so reduced-motion users see the
   final static layout instantly with no animation.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .upsell__hero {
    animation: upsell-hero-in 450ms var(--ease-brand) both;
  }
}

@keyframes upsell-hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Countdown urgency — under 2 minutes the timer shifts to the
   deep-red accent so it reads as urgent. The color change always
   applies (incl. reduced motion). The gentle pulse is gated
   behind no-preference. Pulse targets only the time span so
   the live region wrapper itself doesn't animate.
   ============================================================ */
.countdown.is-urgent {
  color: var(--accent-5);
}

@media (prefers-reduced-motion: no-preference) {
  .countdown.is-urgent .countdown__time {
    animation: upsell-countdown-pulse 1.2s var(--ease-brand) infinite;
  }
}

@keyframes upsell-countdown-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.88; transform: scale(1.02); }
}

/* ============================================================
   Upsell CTA — hover lift uses the brand easing curve. Scoped
   to .upsell-cta so the global .btn-accent rule (used elsewhere)
   keeps its existing transition behavior. Press resets the
   transform so the button feels grounded on click.
   ============================================================ */
.upsell-cta .btn-accent {
  transition: transform 200ms var(--ease-brand),
              background-color 200ms var(--ease-brand);
}

.upsell-cta .btn-accent:active {
  transform: translateY(0);
}

/* ============================================================
   Small viewports (≤420px) — tighten the upsell hero, countdown,
   and pricing spacing so the primary CTA lands above the fold
   at 375x667. The AI-waitlist variant has no pricing block /
   countdown, so its tightening reduces to the hero + padding.
   ============================================================ */
@media (max-width: 420px) {
  .upsell {
    padding-top: var(--space-5);
  }

  .upsell__hero {
    margin-bottom: var(--space-3);
  }

  .countdown {
    margin: var(--space-3) 0 var(--space-3);
    font-size: 28px;
  }

  .pricing-block__current {
    font-size: 36px;
  }

  .pricing-block__original {
    font-size: 18px;
  }

  .pricing-block__label {
    margin-bottom: var(--space-3);
  }

  .upsell-features {
    margin: var(--space-3) auto var(--space-4);
  }

  .upsell-cta {
    margin-top: var(--space-3);
  }

  /* AI-waitlist variant has no countdown/pricing above it, so the
     desktop space-6 top margin is unnecessary at this width. Match
     the standard upsell CTA spacing to keep the button above fold. */
  .upsell-cta.upsell-cta--standalone {
    margin-top: var(--space-4);
  }
}

/* Confirmed page (decline destination) */
.checkout-confirmed {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  position: relative;
  z-index: 2;
}

.checkout-confirmed__home {
  margin-top: var(--space-5);
}

/* Standalone CTA wrapper for the AI-waitlist upsell (no pricing block above) */
.upsell-cta--standalone {
  margin-top: var(--space-6);
}

/* ============================================================
   .cards-grid — responsive grid for marketing card rows
   --3 → 3 columns desktop, 1 column mobile
   Used by /pdf "What's Inside" and any future 3-up card layout.
   ============================================================ */
.cards-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.cards-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

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

/* Title + body inside a marketing .card */
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  color: var(--ink);
  margin: 0;
}

.card__body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   .pricing-card-wrap — single-card centring container.
   The 480px max-width matches the /pdf spec for the lone
   pricing card; multi-card pricing rows use a different
   wrapper (e.g. .pricing-grid) so this stays specific.
   ============================================================ */
.pricing-card-wrap {
  max-width: 480px;
  margin: var(--space-5) auto 0;
}

/* ============================================================
   .section-header — eyebrow + title + sub stacked above a
   section's content (cards, lists, etc). The plain .hero
   already centres itself; this is for inner sections.
   ============================================================ */
.section-header {
  margin-bottom: var(--space-4);
}

/* ============================================================
   .page-nav__cta — accent button living in the top nav.
   Smaller padding than the hero CTA so it sits nicely
   alongside the wordmark.
   ============================================================ */
.page-nav__cta {
  font-size: 13px;
  padding: 10px 18px;
  min-height: 40px;
}

/* ============================================================
   .tier-pyramid — five-tier framework visual
   Mirrors brand-reference's .demo-pyramid pattern, promoted to a
   production primitive. Each tier its accent colour with decreasing
   widths (100% → 92% → 80% → 66% → 48%) and a staggered fade-in-up
   animation using --ease-brand. Sizes per F2-P2 spec:
     num   — Fraunces italic 300 36px
     label — Fraunces 500
     sub   — Inter Tight 13px
   ============================================================ */
.tier-pyramid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-5) 0 0;
}

.tier {
  position: relative;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  color: var(--bg);
  opacity: 0;
  transform: translateY(12px);
  animation: tier-rise 0.7s var(--ease-brand) forwards;
}

@keyframes tier-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger — each tier delays by 90ms past the previous. */
.tier--1 { background: var(--accent-1); width: 100%; animation-delay: 0ms;   }
.tier--2 { background: var(--accent-2); width: 92%;  animation-delay: 90ms;  }
.tier--3 { background: var(--accent-3); width: 80%;  animation-delay: 180ms; }
.tier--4 { background: var(--accent-4); width: 66%;  animation-delay: 270ms; }
.tier--5 { background: var(--accent-5); width: 48%;  animation-delay: 360ms; }

/* Honour OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .tier {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.tier__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  opacity: 0.55;
}

.tier__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tier__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.tier__sub {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.78;
}

.tier__meta {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
  font-weight: 500;
  opacity: 0.7;
}

@media (max-width: 720px) {
  .tier {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
    /* On mobile, force every tier to full width so labels never
       wrap awkwardly inside the narrowest tiers. The visual
       hierarchy is preserved by the colour stack alone. */
    width: 100% !important;
  }
  .tier__meta { text-align: left; }
}

/* ============================================================
   .prose-origin — long-form origin/philosophy block
   Fraunces 300 italic per the brand spec for prose, generous
   measure (~62ch) and line-height. Used on the homepage origin
   section. Em accents are styled with the parchment-on-deep-red
   feel by inheriting from .section-title em (already accent-3).
   ============================================================ */
.prose-origin {
  max-width: 62ch;
  margin: var(--space-5) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: left;
}

.prose-origin em {
  font-style: italic;
  color: var(--accent-3);
  font-weight: 400;
}

/* Multi-paragraph body: each blank line in the admin textarea becomes
   a <p>. Spacing matches the section rhythm without ballooning the
   block — first paragraph hugs the eyebrow/headline above. */
.prose-origin p {
  margin: 0;
}
.prose-origin p + p {
  margin-top: 1.1em;
}

/* Hero CTA — sits below the subhead with breathing room, mirrors the
   sticky-nav CTA visually. Centered on the hero block. */
.hero--home .hero__cta {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

@media (max-width: 720px) {
  .prose-origin { font-size: 19px; line-height: 1.5; }
}

/* ============================================================
   .teaser-card — homepage product teasers (PDF / Tracker /
   Course). Same visual primitive as .card (3px tan strip,
   parchment field, line border) but the entire card is a link
   so the affordance is immediate, with a small chevron meta.
   ============================================================ */
.teaser-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-brand),
              box-shadow 0.25s var(--ease-brand);
}

.teaser-card:hover,
.teaser-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(44, 58, 46, 0.45);
  outline: none;
}

.teaser-card__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-3);
}

.teaser-card__cta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--accent-3);
}

.teaser-card__cta::after {
  content: ' →';
  transition: transform 0.25s var(--ease-brand);
  display: inline-block;
}

.teaser-card:hover .teaser-card__cta::after,
.teaser-card:focus-visible .teaser-card__cta::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .teaser-card,
  .teaser-card__cta::after {
    transition: none;
  }
  .teaser-card:hover,
  .teaser-card:focus-visible {
    transform: none;
  }
}

/* ============================================================
   .coaching-teaser — homepage custom-coaching invitation row
   Quiet centred section, italic invite text + single btn-accent
   CTA. Lives between the product teasers and the footer.
   ============================================================ */
.coaching-teaser {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
}

.coaching-teaser__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  margin-bottom: var(--space-4);
  color: var(--ink);
}

/* ============================================================
   .pricing-cards-grid — three pricing cards side-by-side on
   desktop, stacked at ≤768px. Used on /compare. Distinct from
   the single-card .pricing-card-wrap (480px centred) used by
   /pdf, /course-info, /tracker-info.
   ============================================================ */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-cards-grid > .pricing-card {
  margin: 0;
  height: 100%;
}

@media (max-width: 768px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: var(--space-3);
  }
}

/* Quiet "not sure?" footnote sitting under the 3-up grid. */
.compare-footnote {
  text-align: center;
  margin-top: var(--space-4);
}

/* ============================================================
   Course dashboard (F5-P2) — /course
   ============================================================ */

/* Top nav user block: greeting + logout, sits opposite the wordmark */
.page-nav__user {
  display: flex;
  align-items: center;
  gap: var(--space-3, 16px);
}
.page-nav__greet {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.page-nav__greet em {
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 720px) {
  .page-nav__greet { display: none; }
}

/* Full-width chapter context banner ----------------------------- */
.chapter-banner {
  background: var(--accent-3);
  color: var(--bg);
  margin: 0 calc(50% - 50vw);
  padding: 28px calc(50vw - 50% + 24px);
}
.chapter-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.chapter-banner__eyebrow {
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(244, 237, 226, 0.78);
  margin-bottom: 10px;
}
.chapter-banner__name {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
}
.chapter-banner__name em { font-style: italic; font-weight: 300; }
.chapter-banner__value {
  display: block;
  margin-top: 6px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: rgba(244, 237, 226, 0.85);
}
.chapter-banner__progress {
  min-width: 220px;
  text-align: right;
}
.chapter-banner__day {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(244, 237, 226, 0.92);
  margin-bottom: 8px;
  font-weight: 500;
}
.chapter-banner__bar {
  height: 6px;
  background: rgba(244, 237, 226, 0.22);
  overflow: hidden;
}
.chapter-banner__bar-fill {
  height: 100%;
  background: var(--bg);
  transition: width 240ms ease;
}
@media (max-width: 720px) {
  .chapter-banner__inner { grid-template-columns: 1fr; }
  .chapter-banner__progress { text-align: left; min-width: 0; }
}

/* Course dashboard layout --------------------------------------- */
.course-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.course-section {
  margin-bottom: 72px;
}
.course-section:last-child { margin-bottom: 0; }
.course-section__head {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.course-section__head .eyebrow {
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 12px;
  display: block;
}

/* Top-level progress bar (mirrors chapter-banner bar but on parchment) */
.course-progress-bar {
  height: 6px;
  background: rgba(31, 26, 22, 0.10);
  margin-bottom: 28px;
  overflow: hidden;
}
.course-progress-bar__fill {
  height: 100%;
  background: var(--accent-3);
  transition: width 240ms ease;
}

/* Module rows in the progress section --------------------------- */
.module-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.module-row {
  background: var(--bg);
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: background 160ms ease;
}
.module-row:hover,
.module-row:focus-visible {
  background: rgba(184, 115, 42, 0.06);
  outline: none;
}
.module-row__num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.module-row__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
}
.module-row__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-3);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.module-row__check--empty {
  background: transparent;
  border: 1px solid var(--line);
}
.module-row__next-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
  font-weight: 600;
  background: var(--accent-4);
  padding: 5px 10px;
  line-height: 1;
}
.module-row--next {
  background: rgba(197, 86, 42, 0.05);
}
.module-row--next .module-row__num,
.module-row--next .module-row__title {
  color: var(--accent-4);
}
.module-row--complete .module-row__title { color: var(--muted); }

/* Module cards grid --------------------------------------------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.module-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 24px 22px 22px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform 200ms var(--ease-brand),
              border-color 200ms var(--ease-brand),
              opacity 200ms var(--ease-brand);
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-3);
}
.module-card:hover,
.module-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-3);
  outline: none;
}
.module-card__num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  color: var(--muted);
  letter-spacing: -0.02em;
}
.module-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: var(--type-h3-size);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-line);
  margin-top: 6px;
}
.module-card__title--complete {
  text-decoration: line-through;
  text-decoration-color: rgba(31, 26, 22, 0.35);
  color: var(--muted);
}
.module-card__sub {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.module-card__badge {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-2);
  background: rgba(74, 92, 58, 0.10);
  padding: 5px 10px;
  line-height: 1;
}

/* Floating chat widget ------------------------------------------ */
.floating-chat {
  position: fixed;
  /* F10-P1: respect iOS home-indicator safe area so the FAB never
     sits under the system gesture bar on devices with a notch. */
  bottom: max(24px, env(safe-area-inset-bottom));
  right: max(24px, env(safe-area-inset-right));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent-3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(31, 26, 22, 0.22);
  z-index: 100;
  transition: transform 200ms ease, background 200ms ease;
}
.floating-chat:hover,
.floating-chat:focus-visible {
  background: var(--accent-3);
  color: var(--bg);
  transform: translateY(-2px);
  outline: none;
}
.floating-chat__icon {
  font-size: 22px;
  font-family: 'Fraunces', serif;
  line-height: 1;
}
.floating-chat__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--bg);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  white-space: nowrap;
  padding: 6px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  letter-spacing: 0.02em;
}
.floating-chat:hover .floating-chat__tooltip,
.floating-chat:focus-visible .floating-chat__tooltip {
  opacity: 1;
}
@media (max-width: 480px) {
  .floating-chat {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    width: 48px; height: 48px;
  }
  .floating-chat__icon { font-size: 18px; }
  .floating-chat__tooltip { display: none; }
}

/* ============================================================
   Course module page (F5-P3) — /course/module-:n
   ============================================================ */

/* Three-cell top nav: wordmark, module title (centred), back link */
.page-nav__inner--module {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3, 16px);
  align-items: center;
}
.page-nav__module-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .page-nav__module-title { display: none; }
  .page-nav__inner--module { grid-template-columns: auto auto; justify-content: space-between; }
}

/* Page wrapper -------------------------------------------------- */
.module-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.module-page__header {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.module-page__title {
  margin-top: 12px;
}
.module-page__sub {
  margin-top: 14px;
  max-width: 640px;
}

/* Video embed (16:9 responsive) --------------------------------- */
.module-page__video {
  margin-bottom: 56px;
}
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed--placeholder {
  background: rgba(31, 26, 22, 0.06);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-embed--placeholder .video-embed__placeholder-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: -0.005em;
}

/* Lesson prose column ------------------------------------------- */
.module-page__lesson {
  margin-bottom: 64px;
}
.lesson-prose {
  max-width: 680px;
  margin: 0 auto;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.lesson-prose > * + * { margin-top: 1.1em; }
.lesson-prose h2,
.lesson-prose h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  margin-top: 1.6em;
}
.lesson-prose h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
}
.lesson-prose h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
}
.lesson-prose em { font-style: italic; }
.lesson-prose strong { font-weight: 600; }
.lesson-prose a {
  color: var(--accent-3);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-3);
}
.lesson-prose a:hover,
.lesson-prose a:focus-visible { color: var(--accent-4); border-color: var(--accent-4); }
.lesson-prose ul,
.lesson-prose ol { padding-left: 1.4em; }
.lesson-prose li + li { margin-top: 0.4em; }
.lesson-prose blockquote {
  border-left: 3px solid var(--accent-3);
  padding-left: 18px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--muted);
}
.lesson-prose .module-page__placeholder {
  color: var(--muted);
  font-style: italic;
}

/* Worksheet block ----------------------------------------------- */
.module-page__worksheet {
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.worksheet__heading { margin-bottom: 0; }
.worksheet {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.worksheet__textarea {
  width: 100%;
  min-height: 280px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 24px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 160ms ease;
}
.worksheet__textarea:focus {
  border-color: var(--accent-3);
}
.worksheet__textarea::placeholder {
  color: var(--muted);
  font-style: italic;
}
.worksheet__status {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
  text-align: right;
}

/* Mark-complete block ------------------------------------------- */
.module-complete {
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.module-complete__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  justify-content: center;
}
.module-complete__check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(244, 237, 226, 0.25);
  color: var(--bg);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 200ms ease, transform 200ms ease;
}
.module-complete--done .module-complete__btn {
  background: var(--accent-2);
  cursor: default;
}
.module-complete--done .module-complete__btn:hover {
  background: var(--accent-2);
  transform: none;
}
.module-complete--done .module-complete__check {
  opacity: 1;
  transform: scale(1);
  background: rgba(244, 237, 226, 0.35);
}
.module-complete__btn[disabled] {
  opacity: 1; /* keep "Completed" visually solid, not greyed */
}
.module-complete__error {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  color: var(--accent-5);
  text-align: center;
}

/* Bottom prev / next nav ---------------------------------------- */
.module-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.module-nav__btn--next { justify-self: end; }
.module-nav__btn--prev { justify-self: start; }
.module-nav__btn--placeholder { display: block; }
@media (max-width: 480px) {
  .module-nav { grid-template-columns: 1fr; }
  .module-nav__btn--next,
  .module-nav__btn--prev { justify-self: stretch; text-align: center; }
}

/* ============================================================
   Closing-soon banner (F5-P4) — /course dashboard, last 3 days
   ============================================================ */
.closing-banner {
  background: var(--accent-5); /* deep red #8a2a1f */
  color: var(--bg);            /* parchment */
}
.closing-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.closing-banner__eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.85;
  margin-bottom: 10px;
}
.closing-banner__text {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 720px;
}
.closing-banner__cta { white-space: nowrap; }

/* Inverted secondary — parchment outline on dark backgrounds */
.btn-secondary--inverted {
  background: transparent;
  color: var(--bg);
  border: 1px solid var(--bg);
}
.btn-secondary--inverted:hover,
.btn-secondary--inverted:focus-visible {
  background: var(--bg);
  color: var(--accent-5);
}

@media (max-width: 720px) {
  .closing-banner__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .closing-banner__text { font-size: 19px; }
  .closing-banner__cta { justify-self: start; }
}

/* ============================================================
   F5-P6 — Course UX pass
   ============================================================ */

/* (1a) Module CARD: faded check badge + softened "done" state -- */
.module-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(74, 92, 58, 0.18);   /* --accent-2 @ 18% */
  color: var(--accent-2);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transition: background 200ms var(--ease-brand), transform 200ms var(--ease-brand);
}
.module-card--complete {
  opacity: 0.78;
  transition: opacity 200ms var(--ease-brand), transform 200ms var(--ease-brand), border-color 200ms var(--ease-brand);
}
.module-card--complete:hover,
.module-card--complete:focus-visible {
  opacity: 1;
}
.module-card--complete:hover .module-card__check,
.module-card--complete:focus-visible .module-card__check {
  background: rgba(74, 92, 58, 0.30);
  transform: scale(1.06);
}

/* (1b) Module ROW: faded check badge in --accent-2 + strikethrough */
.module-row--complete .module-row__title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(31, 26, 22, 0.32);
}
.module-row--complete .module-row__check {
  background: rgba(74, 92, 58, 0.18);
  color: var(--accent-2);
  border: 0;
}

/* (2) Worksheet: better typography, generous padding, accent-3 focus ring */
.worksheet__textarea {
  padding: 28px 30px;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  transition: border-color 220ms var(--ease-brand),
              box-shadow 220ms var(--ease-brand),
              background-color 220ms var(--ease-brand);
}
.worksheet__textarea:hover {
  border-color: rgba(184, 115, 42, 0.55);
}
.worksheet__textarea:focus {
  /* WCAG 2.1 1.4.11: the visible focus indicator needs >=3:1 contrast
     against adjacent surfaces. A 4px ring at 0.40 alpha against parchment
     gives a clearly visible ember-tan halo without feeling neon. */
  border-color: var(--accent-3);
  box-shadow: 0 0 0 4px rgba(184, 115, 42, 0.40);
  background-color: #faf6ee;
  outline: none;
}
.worksheet__textarea::placeholder {
  color: var(--muted);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
}

/* (3) Module page entrance — subtle fade-up using brand easing */
@keyframes mp-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.module-page {
  animation: mp-fade-up 520ms var(--ease-brand) both;
}
@media (prefers-reduced-motion: reduce) {
  .module-page { animation: none; }
}

/* (4) Progress bar meta — X/total + percentage */
.course-progress-bar { margin-bottom: 10px; }
.course-progress-bar__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.course-progress-bar__count {
  color: var(--ink);
  font-weight: 600;
}
.course-progress-bar__sep { opacity: 0.45; }
.course-progress-bar__pct {
  color: var(--accent-3);
  font-weight: 600;
}

/* (5) Mobile chapter banner — readable on 375px without horizontal scroll */
@media (max-width: 480px) {
  .chapter-banner {
    padding: 22px calc(50vw - 50% + 16px);
  }
  .chapter-banner__inner { gap: 14px; }
  .chapter-banner__eyebrow {
    font-size: var(--type-eyebrow-size);
    /* Tighter than canonical 0.32em — small-screen compactness. */
    letter-spacing: 0.22em;
    margin-bottom: 8px;
  }
  .chapter-banner__name {
    /* Inherit canonical h2 sizing from base rule; only adjust wrap behavior. */
    word-break: break-word;
  }
  .chapter-banner__value { font-size: 14px; line-height: 1.4; }
  .chapter-banner__day { font-size: 12px; margin-bottom: 6px; }
  .chapter-banner__bar { height: 5px; }
  /* Keep the closing-soon banner equally tame on tiny screens */
  .closing-banner__inner { padding: 22px 16px; }
  .closing-banner__text { font-size: 17px; line-height: 1.4; }
}

/* ============================================================
   .setup-page — focused single-page form for /tracker/setup.
   Centered on parchment, no top nav. Brand-true: eyebrow labels,
   generous spacing, accent-3 submit, italic Fraunces end-date line.
   ============================================================ */
.setup-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-3) var(--space-7);
}

.setup-shell {
  width: 100%;
  max-width: 560px;
}

.setup-header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.setup-header .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.setup-header .section-title {
  margin: 0 0 var(--space-3);
}

.setup-header .section-sub {
  margin: 0 auto;
  max-width: 480px;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.setup-field__label {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

.setup-goals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.setup-goal {
  display: flex;
  flex-direction: column;
}

.setup-add-goal {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.setup-field__hint {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.setup-end-date {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin: var(--space-2) 0 0;
  text-align: center;
}

.setup-submit {
  align-self: stretch;
  margin-top: var(--space-2);
}

@media (max-width: 560px) {
  .setup-page { padding: var(--space-5) var(--space-3) var(--space-6); }
  .setup-form { gap: var(--space-4); }
}

/* ============================================================
   F11-P5 — Chapter reflect & close (/tracker/reflect)
   Focused single-page form mirroring .setup-page family.
   Four reflection textareas with per-field autosave indicators,
   primary "Close this chapter" CTA + branded confirmation modal,
   and a quiet "Mark as abandoned" secondary action.
   ============================================================ */
.reflect-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-3) var(--space-7);
}

.reflect-shell {
  width: 100%;
  max-width: 640px;
}

.reflect-header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.reflect-header .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.reflect-header .section-title {
  margin: 0 0 var(--space-3);
}

.reflect-header .section-sub {
  margin: 0 auto;
  max-width: 520px;
}

.reflect-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.reflect-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reflect-field__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

.reflect-field__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--font-body);
}

.reflect-field__textarea::placeholder {
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}

.reflect-status {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  min-height: 1em;
}

.reflect-status--error {
  color: var(--accent-5);
}

.reflect-submit {
  align-self: stretch;
  margin-top: var(--space-3);
}

.reflect-abandon {
  margin-top: var(--space-4);
  text-align: center;
}

.reflect-abandon__btn {
  font-size: 13px;
  color: var(--muted);
  border-bottom-color: var(--line);
}

.reflect-abandon__btn:hover,
.reflect-abandon__btn:focus-visible {
  color: var(--accent-5);
  border-bottom-color: var(--accent-5);
}

/* ----- Modal ----- */
.reflect-modal[hidden] { display: none; }

.reflect-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.reflect-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(2px);
}

.reflect-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent-3) 8%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--accent-1) 6%, transparent) 0%, transparent 45%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  text-align: center;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--ink) 25%, transparent);
  overflow: hidden;
}

.reflect-modal__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.reflect-modal__title,
.reflect-modal__body,
.reflect-modal__actions {
  position: relative;
  z-index: 1;
}

.reflect-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}

.reflect-modal__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

.reflect-modal__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

body.reflect-modal-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .reflect-page { padding: var(--space-5) var(--space-3) var(--space-6); }
  .reflect-form { gap: var(--space-4); }
  .reflect-modal__card { padding: var(--space-4); }
}

/* ============================================================
   F11-P2 — Tracker dashboard (/tracker)
   Daily-driver surface for buyers in an in-progress chapter:
   chapter hero, today check-in, goals list, share toggle.
   ============================================================ */

.tracker-dashboard {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: flex;
  flex-direction: column;
}

/* Mobile-first source order is checkin → hero → goals → … so the
   daily check-in card sits above the fold on a phone. On desktop we
   reorder back to the original visual rhythm (hero → checkin → …)
   so existing buyers don't see a layout swap on the surface they
   already know. */
@media (min-width: 721px) {
  .tracker-dashboard > .chapter-hero  { order: 1; }
  .tracker-dashboard > .checkin-card  { order: 2; }
  .tracker-dashboard > .goals-section { order: 3; }
  .tracker-dashboard > .tracker-nav-links { order: 4; }
  .tracker-dashboard > .share-section { order: 5; }
}

/* ---------- Chapter hero ---------- */
.chapter-hero {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

/* Identity card — promotes the chapter title to a page-identity
   block instead of looking like a labelled form input. Subtle tinted
   background + tan rule on the left mirrors the brand's habit-badge
   treatment without introducing new colour tokens. */
.chapter-hero__identity {
  background: color-mix(in srgb, var(--accent-3) 5%, transparent);
  border-left: 3px solid var(--accent-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.chapter-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.chapter-hero__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.chapter-hero__name em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

.chapter-hero__dates {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

/* Habit badge — eyebrow + Fraunces 500 in accent-3 */
.habit-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--accent-3) 8%, transparent);
  border-left: 3px solid var(--accent-3);
  margin-bottom: var(--space-5);
  max-width: 100%;
}

.habit-badge__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

.habit-badge__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--accent-3);
}

/* Days-remaining progress */
.chapter-hero__progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chapter-hero__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.chapter-hero__day {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Days-remaining dual readout. The fraction (X/45) is the loud
   primary number; the percent immediately follows it in muted text
   so it never competes for attention. Tabular-nums keeps the
   character widths stable as the day ticks up. */
.chapter-hero__day-fraction {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.chapter-hero__day-percent {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chapter-hero__remain {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
}

.chapter-hero__bar {
  height: 6px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}

.chapter-hero__bar-fill {
  height: 100%;
  background: var(--accent-3);
  transition: width 240ms var(--ease-brand);
}

/* ---------- Section primitive (matches course-section) ---------- */
.tracker-section {
  margin-bottom: var(--space-6);
}

.tracker-section:last-child {
  margin-bottom: 0;
}

.tracker-section__head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.tracker-section__head .eyebrow {
  margin-bottom: 12px;
}

.tracker-section__head .section-title {
  margin: 0;
}

/* ---------- Today's check-in card ---------- */
.checkin-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.checkin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-3);
}

.checkin-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

.checkin-card__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
  color: var(--ink);
  margin: 0;
}

.checkin-card__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.checkin-card__form {
  margin: 0;
}

.checkin-card__btn {
  min-width: 160px;
}

/* `Y` keycap hint sits inline inside the primary check-in button. We
   only show it on devices with a fine pointer (mouse/trackpad); on
   touch devices the hint is meaningless and would just steal width
   from the button label. The button keeps gap-spacing via inline-flex
   so the keycap visually attaches to the label. */
.checkin-card__btn[data-checkin-primary] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.checkin-card__keycap {
  display: none;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--bg) 60%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 18%, transparent);
  color: var(--bg);
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  min-width: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .checkin-card__keycap { display: inline-flex; }
}

.checkin-card__done {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  min-height: 48px;
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  color: var(--accent-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  align-self: flex-start;
}

.checkin-card__done-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-2);
  color: var(--bg);
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.streak {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: var(--muted);
  margin: 0;
}

.streak em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-3);
  font-size: 22px;
  margin: 0 2px;
}

/* ---------- Goals list ---------- */
.goals-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: var(--space-4);
}

.goal-row__form {
  margin: 0;
  background: var(--bg);
}

.goal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  transition: background 160ms var(--ease-brand);
}

.goal-row:hover {
  background: color-mix(in srgb, var(--accent-3) 5%, transparent);
}

.goal-row__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.goal-row__box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 160ms var(--ease-brand),
              border-color 160ms var(--ease-brand);
}

.goal-row__input:focus-visible + .goal-row__box {
  outline: 3px solid var(--accent-3);
  outline-offset: 2px;
}

.goal-row__input:checked + .goal-row__box {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.goal-row__input:checked + .goal-row__box::after {
  content: '✓';
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.goal-row__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.goal-row--complete .goal-row__text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
}

.goal-row__date {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}

.goal-row__noscript-btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent-3);
  color: var(--bg);
  border: 0;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}

.goals-list__empty {
  background: var(--bg);
  padding: 18px 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}

/* Side quest row (read-only display, sits beneath goals) */
.side-quest-row {
  background: var(--bg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-top: 1px dashed var(--line);
}

.side-quest-row__icon {
  font-size: 20px;
  line-height: 1;
}

.side-quest-row__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.side-quest-row__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

/* Add-goal inline reveal */
.add-goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.add-goal__form {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  max-width: 520px;
}

.add-goal__form[hidden] {
  display: none;
}

.add-goal__input {
  flex: 1;
}

.add-goal__submit {
  flex-shrink: 0;
}

/* ---------- Nav links ---------- */
.tracker-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-3);
}

/* ---------- Share section (subtle bottom block) ---------- */
.share-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  opacity: 0.92;
}

.share-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.share-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.share-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.share-toggle__track {
  position: relative;
  width: 42px;
  height: 24px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
  transition: background 200ms var(--ease-brand);
  flex-shrink: 0;
}

.share-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--bg);
  border-radius: 50%;
  transition: transform 200ms var(--ease-brand);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent);
}

.share-toggle__input:checked + .share-toggle__track {
  background: var(--accent-3);
}

.share-toggle__input:checked + .share-toggle__track .share-toggle__thumb {
  transform: translateX(18px);
}

.share-toggle__input:focus-visible + .share-toggle__track {
  outline: 3px solid var(--accent-3);
  outline-offset: 3px;
}

.share-toggle__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.share-section__help {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  max-width: 480px;
}

.share-error {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--accent-5);
  margin-top: var(--space-1);
}

.share-error[hidden] { display: none; }

/* ============================================================
   Going-public confirmation modal
   ============================================================ */
.share-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.share-modal-backdrop[hidden] { display: none; }

.share-modal {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--space-5);
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.share-modal__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
  color: var(--ink);
}

.share-modal__heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

.share-modal__body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--ink);
}

.share-modal__body a {
  color: var(--accent-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease-brand);
}

.share-modal__body a:hover,
.share-modal__body a:focus-visible {
  color: var(--accent-4);
}

.share-modal__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .tracker-dashboard { padding: 40px 20px 64px; }
  .checkin-card { padding: var(--space-4); }
  .checkin-card__btn { min-width: 0; flex: 1; }
  .checkin-card__actions { gap: var(--space-2); }
  .goal-row { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .goal-row__date { grid-column: 2; padding-left: 0; }
  .side-quest-row { padding: 14px 16px; }
  .add-goal__form { flex-direction: column; max-width: none; }
}
/* ---------------------------------------------------------------- *
 * F6-P4 — Chat page (/chat) and floating chat widget panel.
 *
 * Two surfaces share the canonical .floating-chat circular button:
 *   1. The full-page chat at /chat (.chat-shell, .chat-message, etc.)
 *   2. The floating widget that opens an iframe panel on /course/* and
 *      /tracker/* pages (.floating-chat-panel).
 *
 * Brand rules honored:
 *   - Parchment background via base.css (no rounded corners on cards).
 *   - Fraunces with <em> italic on "AI" wordmark.
 *   - Inter Tight 15px/1.6 for message bodies.
 *   - All transitions use var(--ease-brand).
 *   - All colors come from tokens.css (no raw hex).
 * ---------------------------------------------------------------- */

/* ----- chat page shell ----- */

.chat-body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
}

.chat-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.chat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 4px 18px;
  border-bottom: 1px solid var(--line);
}

.chat-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.chat-wordmark em {
  font-style: italic;
  font-weight: 300;
}

.chat-header__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.chat-provider {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}

.chat-clear {
  font-size: 13px;
}

/* ----- messages area ----- */

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
}

.chat-message {
  max-width: 88%;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

.chat-message__body {
  padding: 14px 18px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-message--user {
  align-self: flex-end;
  background: var(--accent-3);
  color: var(--bg);
}

.chat-message--ai {
  align-self: flex-start;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  /* Subtle fade-up entrance — brand easing. */
  animation: chat-ai-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  padding-top: 3px; /* room for the strip */
}

.chat-message__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-3);
}

/* ----- typing indicator ----- */

.chat-typing__dots {
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
  padding: 14px 18px;
}

.chat-typing__dots em {
  display: inline-block;
  font-style: italic;
  animation: chatTypingDot 1.2s var(--ease-brand) infinite;
}

.chat-typing__dots em:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dots em:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTypingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

/* AI message entrance — soft fade + lift, brand easing. */
@keyframes chat-ai-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Placeholder styling — Fraunces italic, muted. (F6-P6) */
.chat-input::placeholder {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--muted);
  opacity: 1; /* Firefox lowers placeholder opacity by default */
}

/* Inline chat error — replaces window.alert. Sits in the messages
   stream like a system note, styled in the warning red token. */
.chat-error {
  align-self: stretch;
  margin: 4px 0;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent-5);
  background: color-mix(in srgb, var(--accent-5) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent-5) 30%, var(--line));
  border-radius: 6px;
  animation: chat-ai-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ----- composer ----- */

.chat-input-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  /* F10-P1: pad bottom to clear iOS home-indicator / virtual keyboard
     gesture area. max() means desktop still gets the original 24px. */
  padding: 16px 0 max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.chat-input {
  flex: 1 1 auto;
  font-family: var(--font-body);
  /* F10-P1: 16px floor — anything <16px causes iOS Safari to zoom
     the viewport on focus, which breaks the layout we just verified. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 14px;
  resize: none;
  outline: none;
  min-height: 48px;
  max-height: 140px;
  box-sizing: border-box;
  transition: border-color 0.18s var(--ease-brand);
}

.chat-input:focus {
  border-color: var(--accent-3);
}

.chat-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-send {
  flex: 0 0 auto;
  align-self: stretch;
}

.chat-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .chat-shell { padding: 0 14px; }
  /* F10-P1: chat-wordmark renders as <h1>; brand min for headings is
     24px on mobile, so we hold it at 24 instead of dropping to 19. */
  .chat-wordmark { font-size: 24px; }
  .chat-message { max-width: 94%; }
}

/* ---------------------------------------------------------------- *
 * Floating chat widget panel — opens from the .floating-chat button.
 * The button styles already exist higher up in this file.
 * ---------------------------------------------------------------- */

.floating-chat--hidden {
  display: none !important;
}

.floating-chat-panel {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 380px;
  height: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(31, 26, 22, 0.18);
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.floating-chat-panel--open {
  display: flex;
}

.floating-chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.floating-chat-panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--ink);
  letter-spacing: -0.005em;
}

.floating-chat-panel__title em {
  font-style: italic;
  font-weight: 300;
}

.floating-chat-panel__close {
  font-size: 13px;
  padding: 4px 8px;
}

.floating-chat-panel__iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--bg);
}

@media (max-width: 480px) {
  .floating-chat-panel {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    height: 70vh;
  }
}

/* ============================================================
   F9.5-P3 — Brand reference primitives
   These supplement the existing component vocabulary with
   patterns documented on /admin/styleguide. Use them before
   inventing new ones. Every value is a brand token; every
   transition uses var(--ease-brand); every animation honors
   prefers-reduced-motion.
   ============================================================ */

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, var(--accent-3) 20%, transparent);
  border-top-color: var(--accent-3);
  border-radius: 50%;
  animation: spinner-rotate 0.9s var(--ease-brand) infinite;
}
.spinner--small { width: 16px; height: 16px; border-width: 2px; }
.spinner--large { width: 36px; height: 36px; border-width: 3px; }

@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ---- Skeleton (parchment shimmer) ---- */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 6%, transparent) 0%,
    color-mix(in srgb, var(--ink) 12%, transparent) 50%,
    color-mix(in srgb, var(--ink) 6%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s var(--ease-brand) infinite;
  height: 14px;
}
.skeleton--title { height: 28px; }
.skeleton--block { height: 120px; }

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.6; } }

/* ---- Saved indicator (writes a quiet "Saved" with sage dot) ---- */
.saved-indicator {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.saved-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* ---- Modal / dialog ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-3);
  animation: modal-fade 200ms var(--ease-brand) both;
}
.modal {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  max-width: 480px;
  width: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: modal-rise 240ms var(--ease-brand) both;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-3);
}
.modal__eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3-size);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-line);
  color: var(--ink);
  margin: 0;
}
.modal__title em { font-style: italic; font-weight: 300; color: var(--accent-3); }
.modal__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .modal-overlay, .modal { animation: none; } }

/* ---- Toast notifications ---- */
.toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-3);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(31, 26, 22, 0.12);
  pointer-events: auto;
  animation: toast-slide 280ms var(--ease-brand) both;
}
/* --info inherits the default tan strip from .toast — no override needed. */
.toast--success { border-left-color: var(--accent-2); }
.toast--error   { border-left-color: var(--accent-5); }
.toast__title {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  /* Tighter than canonical 0.32em on purpose — toasts are dense chrome. */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.toast__body { margin: 0; }
@keyframes toast-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---- Generic badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1;
  background: color-mix(in srgb, var(--accent-3) 12%, transparent);
  color: var(--accent-3);
}
/* Background opacity bumped to 22% (was 14%) and text shifted to the
   darkest member of each colour family so chips clear WCAG AA 4.5:1
   against parchment even at 10px / weight 600. */
.badge--neutral { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.badge--success { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-1); }
.badge--warning { background: color-mix(in srgb, var(--accent-4) 22%, transparent); color: var(--accent-5); }
.badge--danger  { background: color-mix(in srgb, var(--accent-5) 22%, transparent); color: var(--accent-5); }

/* ---- Status dot ---- */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.status-dot--active::before  { background: var(--accent-2); }
.status-dot--pending::before { background: var(--accent-3); }
.status-dot--warning::before { background: var(--accent-4); }
.status-dot--error::before   { background: var(--accent-5); }

/* ---- Calendar grid ---- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-grid__head {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
}
.calendar-cell {
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  position: relative;
}
.calendar-cell--filled {
  background: var(--accent-2);
  color: var(--bg);
  border-color: var(--accent-2);
}
.calendar-cell--today {
  border-color: var(--accent-3);
  border-width: 2px;
  color: var(--ink);
  font-weight: 600;
}
.calendar-cell--out { opacity: 0.35; }

/* ---- Person card ---- */
.person-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--space-4) 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.person-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-3);
}
.person-card__role {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.person-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3-size);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-line);
  color: var(--ink);
}
.person-card__bio {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* ---- Chapter card (history-list item) ---- */
.chapter-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--space-4) 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
}
.chapter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-3);
}
.chapter-card__dates {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.chapter-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3-size);
  letter-spacing: var(--type-h3-tracking);
  line-height: var(--type-h3-line);
  color: var(--ink);
  margin: 0;
}
.chapter-card__name em { font-style: italic; font-weight: 300; color: var(--accent-3); }
.chapter-card__value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin: 6px 0 0;
}
.chapter-card__streak {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-3);
  font-weight: 500;
  white-space: nowrap;
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty-state__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.empty-state__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  color: var(--ink);
  margin: 0;
}
.empty-state__title em { font-style: italic; font-weight: 300; color: var(--accent-3); }
.empty-state__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  color: var(--muted);
  max-width: 420px;
  margin: 0;
}

/* ============================================================
   /admin/styleguide page chrome (F9.5-P3)
   Internal-only canonical brand reference. Each section pairs
   a JetBrains Mono spec block with a live demo.
   ============================================================ */
.sg-page { max-width: 1100px; margin: 0 auto; padding: 60px 24px 120px; }

.sg-page__nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.sg-page__nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px dotted var(--line);
}
.sg-page__nav a:hover { color: var(--accent-3); }

.sg-page__hero { text-align: center; margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.sg-page__hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-tracking); margin: var(--space-3) 0; }
.sg-page__hero h1 em { font-style: italic; font-weight: 300; color: var(--accent-3); }
.sg-page__hero p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-line); color: var(--muted); max-width: 600px; margin: 0 auto; }

.sg-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border-left: 3px solid var(--accent-3);
}
.sg-toc__item {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
  display: flex;
  gap: 10px;
  border-bottom: none;
  transition: color 200ms var(--ease-brand);
}
.sg-toc__item:hover { color: var(--accent-3); }
.sg-toc__num { color: var(--accent-3); font-weight: 600; min-width: 22px; }

.sg-section {
  margin: 0 0 var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.sg-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.sg-section__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-3);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sg-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
  color: var(--ink);
  margin: 0;
}
.sg-section__title em { font-style: italic; font-weight: 300; color: var(--accent-3); }

.sg-spec {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-left: 3px solid var(--accent-3);
  padding: 14px 18px;
  margin: var(--space-3) 0 var(--space-4);
  white-space: pre-wrap;
  overflow-x: auto;
}
.sg-spec strong { color: var(--ink); font-weight: 600; }
.sg-spec em { font-style: italic; color: var(--accent-3); }

.sg-demo {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--space-5);
  margin: var(--space-3) 0;
  position: relative;
}
.sg-demo--frame {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.sg-demo--frame .modal-overlay,
.sg-demo--frame .toast-stack {
  position: absolute;
}
.sg-demo--dark { background: var(--ink); color: var(--bg); }

.sg-grid { display: grid; gap: var(--space-3); }
.sg-grid--2 { grid-template-columns: 1fr 1fr; }
.sg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sg-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 720px) {
  .sg-grid--2, .sg-grid--3 { grid-template-columns: 1fr; }
}

.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sg-stack { display: flex; flex-direction: column; gap: var(--space-3); }

.sg-swatch { display: flex; flex-direction: column; gap: 4px; }
.sg-swatch__chip { height: 96px; border: 1px solid var(--line); }
.sg-swatch__name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 600; margin-top: 8px; }
.sg-swatch__hex { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.sg-swatch__role { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 13px; color: var(--muted); }

.sg-type-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.sg-type-row:last-child { border-bottom: none; }
.sg-type-row__label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.sg-type-row__sample { color: var(--ink); margin: 0; }

.sg-space-row { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-3); align-items: center; padding: 4px 0; }
.sg-space-row__bar { background: var(--accent-3); height: 14px; }
.sg-space-row__label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.sg-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  margin: var(--space-3) 0 0;
}

/* ============================================================
   Admin console shell — dark theme variant of the brand.
   F8-P1. Used by /admin (Overview) + /admin/:section (placeholders).
   Background var(--ink), text var(--bg), accent var(--accent-3).
   Mirrors the .auth-page--dark fixed-backdrop trick so the dark
   surface covers the viewport even outside the .content padding.
   ============================================================ */

.admin-page {
  background: var(--ink);
  color: var(--bg);
  min-height: 100vh;
  position: relative;
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1);
}

.admin-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(184, 115, 42, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 82% 92%, rgba(74, 92, 58, 0.06) 0%, transparent 45%);
}

/* Two-column shell: sticky sidebar nav + scrollable main pane. */
.admin-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  transition: grid-template-columns 0.25s ease;
}
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; transition: none; }
}

/* Collapsed desktop state — sidebar shrinks to a thin rail. */
.admin-shell.is-collapsed {
  grid-template-columns: 56px 1fr;
}
@media (max-width: 900px) {
  .admin-shell.is-collapsed { grid-template-columns: 1fr; }
}

/* ---- Sidebar ---- */
.admin-sidebar {
  border-right: 1px solid rgba(184, 115, 42, 0.18);
  padding: var(--space-5) var(--space-4);
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: padding 0.25s ease;

  /* Firefox subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 115, 42, 0.25) transparent;
}

/* Firefox: slightly more visible thumb on hover */
.admin-sidebar:hover {
  scrollbar-color: rgba(184, 115, 42, 0.48) transparent;
}

/* WebKit (Chrome/Safari) subtle scrollbar — sidebar only */
.admin-sidebar::-webkit-scrollbar {
  width: 6px;
}
.admin-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(184, 115, 42, 0.22);
  border-radius: 3px;
  transition: background 0.2s ease;
}
.admin-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(184, 115, 42, 0.45);
}

@media (max-width: 900px) {
  .admin-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(184, 115, 42, 0.18);
  }
}

/* Collapsed sidebar: narrow rail, hide labels and sign-out text */
.admin-shell.is-collapsed .admin-sidebar {
  padding: var(--space-5) var(--space-2);
}
.admin-shell.is-collapsed .admin-sidebar__label,
.admin-shell.is-collapsed .admin-sidebar__brand,
.admin-shell.is-collapsed .admin-sidebar__signout-label {
  display: none;
}
/* Keep sign-out div visible in collapsed rail; show arrow icon only */
.admin-sidebar__signout-icon {
  display: none;
  font-size: 16px;
  line-height: 1;
}
.admin-shell.is-collapsed .admin-sidebar__signout-icon {
  display: block;
  text-align: center;
}
.admin-shell.is-collapsed .admin-sidebar__link {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 10px var(--space-2);
  border-left-width: 2px;
}
.admin-shell.is-collapsed .admin-sidebar__num {
  text-align: center;
}

/* Mobile collapsed: show/hide the nav, keep brand+toggle always visible */
@media (max-width: 900px) {
  .admin-shell.is-collapsed .admin-sidebar__label,
  .admin-shell.is-collapsed .admin-sidebar__signout-label,
  .admin-shell.is-collapsed .admin-sidebar__brand {
    display: revert;
  }
  .admin-shell.is-collapsed .admin-sidebar__signout-icon {
    display: none;
  }
  .admin-shell.is-collapsed .admin-sidebar nav {
    display: none;
  }
  .admin-shell.is-collapsed .admin-sidebar__link {
    grid-template-columns: 32px 1fr;
    justify-items: start;
    padding: 10px var(--space-3);
    border-left-width: 2px;
  }
  .admin-shell.is-collapsed .admin-sidebar__num {
    text-align: left;
  }
}

/* Header row: brand + toggle side-by-side */
.admin-sidebar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.admin-sidebar__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  color: var(--bg);
  margin: 0;
  display: block;
  text-decoration: none;
}
.admin-sidebar__brand em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

/* Toggle button */
.admin-sidebar__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(184, 115, 42, 0.25);
  border-radius: 6px;
  color: rgba(244, 237, 226, 0.6);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.admin-sidebar__toggle:hover,
.admin-sidebar__toggle:focus-visible {
  color: var(--bg);
  background: rgba(184, 115, 42, 0.12);
  border-color: rgba(184, 115, 42, 0.5);
  outline: none;
}
.admin-sidebar__toggle:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 2px;
}

/* In collapsed state, header becomes a column so toggle is still accessible */
.admin-shell.is-collapsed .admin-sidebar__header {
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-4);
}
@media (max-width: 900px) {
  .admin-shell.is-collapsed .admin-sidebar__header {
    flex-direction: row;
    align-items: flex-start;
  }
}

.admin-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-sidebar__link {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: 10px var(--space-3);
  text-decoration: none;
  color: rgba(244, 237, 226, 0.72);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.admin-sidebar__link:hover,
.admin-sidebar__link:focus-visible {
  color: var(--bg);
  background: rgba(244, 237, 226, 0.04);
  outline: none;
}
.admin-sidebar__link--active {
  color: var(--bg);
  background: rgba(184, 115, 42, 0.10);
  border-left-color: var(--accent-3);
}
.admin-sidebar__num {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-3);
  font-weight: 500;
}
.admin-sidebar__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
}

.admin-sidebar__signout {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(184, 115, 42, 0.18);
}
.admin-sidebar__signout a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(244, 237, 226, 0.55);
  font-family: var(--font-body);
  font-size: 13px;
  text-decoration: none;
}
.admin-sidebar__signout a:hover,
.admin-sidebar__signout a:focus-visible { color: var(--accent-3); outline: none; }

/* Collapsed rail: center the sign-out icon */
.admin-shell.is-collapsed .admin-sidebar__signout a {
  justify-content: center;
}

/* ---- Main content ---- */
.admin-main {
  padding: var(--space-5) var(--space-5) var(--space-6);
  min-width: 0;
}
@media (max-width: 600px) { .admin-main { padding: var(--space-4); } }

.admin-page-head { margin-bottom: var(--space-5); }
.admin-page-head .eyebrow {
  color: var(--accent-3);
  display: block;
  margin-bottom: var(--space-2);
}
.admin-page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-tracking);
  color: var(--bg);
  margin: 0;
}
.admin-page-head h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

/* ---- Section block (one per Overview data block) ---- */
.admin-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(184, 115, 42, 0.14);
}
.admin-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-section__head {
  margin-bottom: var(--space-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-section__head .eyebrow {
  color: var(--accent-3);
  display: block;
  margin-bottom: var(--space-2);
}
.admin-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking);
  color: var(--bg);
  margin: 0;
}
.admin-section__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}
.admin-section__meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(244, 237, 226, 0.55);
}

/* ---- Stat grid (top-of-page counters) ---- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.admin-stat {
  background: rgba(244, 237, 226, 0.04);
  border: 1px solid rgba(184, 115, 42, 0.18);
  padding: var(--space-3) var(--space-4);
}
.admin-stat__label {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(244, 237, 226, 0.55);
  margin-bottom: var(--space-2);
  display: block;
}
.admin-stat__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bg);
  font-variant-numeric: tabular-nums;
}

/* ---- Tables (funnel, recent purchases) ---- */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bg);
}
.admin-table th {
  text-align: left;
  padding: 10px var(--space-3);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-3);
  border-bottom: 1px solid rgba(184, 115, 42, 0.32);
  font-weight: 500;
  white-space: nowrap;
}
.admin-table td {
  padding: 12px var(--space-3);
  border-bottom: 1px solid rgba(244, 237, 226, 0.08);
  vertical-align: top;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table__num { font-variant-numeric: tabular-nums; }
.admin-table__rate {
  font-variant-numeric: tabular-nums;
  color: var(--accent-3);
}
.admin-table__muted { color: rgba(244, 237, 226, 0.55); }

/* ---- Empty-state copy ---- */
.admin-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  color: rgba(244, 237, 226, 0.55);
  padding: var(--space-4) 0;
  margin: 0;
}

/* ---- AB test cards ---- */
.admin-ab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
.admin-ab-card {
  background: rgba(244, 237, 226, 0.04);
  border: 1px solid rgba(184, 115, 42, 0.18);
  padding: var(--space-4);
}
.admin-ab-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
  color: var(--bg);
  margin: 0 0 var(--space-3);
}
.admin-ab-card__variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
}
.admin-ab-card__variant-label {
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 6px;
  font-weight: 500;
}
.admin-ab-card__variant-stat {
  color: rgba(244, 237, 226, 0.78);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.admin-ab-card__variant-rate {
  color: var(--bg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  margin-top: 6px;
}

/* ---- Placeholder body for sections not yet built ---- */
.admin-placeholder {
  padding: var(--space-7) 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  color: rgba(244, 237, 226, 0.55);
  margin: 0;
}

/* ============================================================
   F8-P2 — Admin section forms (Pricing / SEO / AI Settings)

   Lives inside the dark .admin-page shell, so we override the
   light .form-input defaults to read against ink. Toast styling
   is shared with the global .toast/.toast-stack stack — only
   surface-specific positioning + the format-note variant +
   the dark inputs are added here.
   ============================================================ */

/* Form layout primitives ---------------------------------------------- */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.admin-fieldset {
  border: 1px solid rgba(184, 115, 42, 0.18);
  background: rgba(244, 237, 226, 0.03);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0;
}
.admin-fieldset__legend {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-3);
  font-weight: 600;
  padding: 0 var(--space-2);
}
.admin-fieldset__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.admin-field .form-label {
  color: var(--bg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.admin-field__key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(244, 237, 226, 0.55);
  font-weight: 400;
  letter-spacing: 0;
}
.admin-field .form-help {
  color: rgba(244, 237, 226, 0.6);
}
.admin-field .form-help strong { color: var(--accent-3); font-weight: 500; }
.admin-field .form-help .is-over { color: var(--accent-4); font-weight: 600; }

/* Dark inputs --------------------------------------------------------- */
.admin-input {
  background: rgba(31, 26, 22, 0.55);
  color: var(--bg);
  border: 1px solid rgba(184, 115, 42, 0.32);
  border-radius: 4px;
}
.admin-input::placeholder { color: rgba(244, 237, 226, 0.4); }
.admin-input:hover {
  border-color: rgba(184, 115, 42, 0.55);
  background: rgba(31, 26, 22, 0.7);
}
.admin-input:focus {
  outline: none;
  border-color: var(--accent-3);
  box-shadow: 0 0 0 3px rgba(184, 115, 42, 0.22);
  background: rgba(31, 26, 22, 0.85);
}
.admin-input--multiline {
  font-family: var(--font-body);
  line-height: 1.55;
  resize: vertical;
  min-height: 96px;
}
.admin-input--prompt {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 280px;
}
.admin-input[type="number"] { font-variant-numeric: tabular-nums; }

/* Form actions row ---------------------------------------------------- */
.admin-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.admin-form__hint {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: rgba(244, 237, 226, 0.6);
}

/* Format-note (warning) — inverted variant for the dark admin shell --- */
.admin-format-note {
  background: rgba(244, 237, 226, 0.04);
  border: 1px solid rgba(184, 115, 42, 0.32);
  border-left: 3px solid var(--accent-4);
}
.admin-format-note .format-note__label { color: var(--accent-4); }
.admin-format-note .format-note__text  { color: rgba(244, 237, 226, 0.85); }
.admin-format-note .format-note__text strong { color: var(--accent-3); }

/* Toast stack — when shown inside an admin shell pin to viewport so
   the message is visible regardless of scroll. Inherits the global
   .toast colors (success → --accent-2, error → --accent-5). */
.admin-page .toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 600;
}

/* ----- F8-P3 — full-width admin field span -------------------------- */
.admin-field--full { grid-column: 1 / -1; }

/* ============================================================
 * F8-P4 — Admin section editors (Users, Testimonials, Waitlists,
 *         Pages, Funnel chart, AB tests).
 * Reuses .admin-table, .admin-section, .admin-form, .admin-input
 * from F8-P1/P2/P3. Adds the missing primitives only.
 * ============================================================ */

/* Tiny variant of .btn for inline row actions. Slightly tighter
   padding + smaller type than .btn-secondary. */
.btn-tiny {
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  border-radius: 6px;
}

/* Row-level action cluster (Grant/Revoke/Resend, Edit/Delete, etc).
   Wraps gracefully on narrow screens and keeps a consistent gap. */
.admin-row__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* Status pills used for product access, publish state, AB active,
   etc. Solid fills tinted by tone class. Compact and uppercase. */
.admin-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  margin-right: 0.25rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #f4ede2;
  background: #6b5d50;
  white-space: nowrap;
}
.admin-badge--forest { background: #3a5742; }
.admin-badge--sage   { background: #7a8b6c; }
.admin-badge--tan    { background: #b8732a; }
.admin-badge--ember  { background: #c84a2a; }
.admin-badge--muted  { background: rgba(31, 26, 22, 0.45); color: #d6cfc4; }

/* Drag-handle column for reorderable testimonial rows. The cell is
   a grip; the cursor changes to "move" so the affordance reads. */
.admin-table__drag {
  width: 24px;
  cursor: move;
  color: #8a7c6e;
  font-size: 1.05rem;
  user-select: none;
  text-align: center;
}
.admin-table__dragging { opacity: 0.5; }

/* Quote column — clamp width so a long quote doesn't stretch the table. */
.admin-table__quote {
  max-width: 360px;
  color: #2a2520;
}

/* Expand/collapse column for waitlist & pages detail rows. */
.admin-table__expand        { width: 28px; text-align: center; }
.admin-table__expand-btn {
  background: rgba(31, 26, 22, 0.12);
  border: 1px solid rgba(31, 26, 22, 0.2);
  color: #2a2520;
  width: 24px; height: 24px;
  line-height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  padding: 0;
}
.admin-table__expand-btn:hover { background: rgba(31, 26, 22, 0.2); }
.admin-table__detail > td      { background: rgba(31, 26, 22, 0.04); }

.admin-detail {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0.6rem 0.4rem;
}
.admin-detail dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b5d50;
}
.admin-detail dd {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #2a2520;
}

/* ----- Tabs (waitlists) -------------------------------------------- */
.admin-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid rgba(31, 26, 22, 0.15);
}
.admin-tabs__spacer { flex: 1 1 auto; }
.admin-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #6b5d50;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.7rem 1rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.admin-tab--active {
  color: #2a2520;
  border-bottom-color: #b8732a;
}
.admin-tab__count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  background: rgba(31, 26, 22, 0.1);
  border-radius: 999px;
  color: #2a2520;
}

/* ----- Confirmation modal ------------------------------------------ */
.admin-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(31, 26, 22, 0.55);
  z-index: 1000;
}
.admin-modal--open { display: flex; }
.admin-modal__panel {
  background: #f4ede2;
  border: 1px solid rgba(31, 26, 22, 0.2);
  border-radius: 10px;
  max-width: 480px;
  width: calc(100% - 2rem);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 24px 48px rgba(31, 26, 22, 0.3);
}
.admin-modal__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  margin: 0 0 0.8rem;
  color: #2a2520;
}
.admin-modal__body {
  color: #4a4036;
  margin: 0 0 1.2rem;
  line-height: 1.5;
}
.admin-modal__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* ----- Inline form card (testimonial add/edit) --------------------- */
.admin-form-card {
  margin-top: 1.2rem;
  padding: 1.2rem 1.4rem 1rem;
  background: rgba(31, 26, 22, 0.04);
  border: 1px solid rgba(31, 26, 22, 0.12);
  border-radius: 8px;
}
.admin-form-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  margin: 0 0 0.8rem;
  color: #2a2520;
}

/* ----- Funnel SVG chart -------------------------------------------- */
.admin-funnel-chart-wrap {
  background: rgba(31, 26, 22, 0.04);
  border: 1px solid rgba(31, 26, 22, 0.12);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.admin-funnel-chart {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
}

/* ----- AB test variant card additions ------------------------------ */
.admin-ab-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.admin-ab-card__variant {
  background: rgba(31, 26, 22, 0.04);
  border: 1px solid rgba(31, 26, 22, 0.1);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
}
.admin-ab-card__variant-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  color: #2a2520;
  margin: 0.2rem 0 0.6rem;
}
.admin-ab-card__variant-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}
.admin-ab-card__variant-stat,
.admin-ab-card__variant-rate {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: #6b5d50;
}
.admin-ab-card__variant-rate { color: #2a2520; font-weight: 600; }
/* Phone-specific (≤430px) tightening so the check-in card sits as
   close to the top as possible — every pixel of vertical room is one
   pixel less of "scroll to find the button". */
@media (max-width: 430px) {
  .tracker-dashboard { padding: 24px 16px 56px; gap: var(--space-4); }
  .checkin-card { padding: 18px 18px; gap: var(--space-3); }
  .checkin-card__heading { font-size: 22px; line-height: 1.2; }
  .chapter-hero { margin-bottom: var(--space-5); padding-bottom: var(--space-4); }
  .chapter-hero__identity { padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   Daily-completion celebration
   Sage tinted toast pinned to the bottom on mobile, top-center on
   desktop. Auto-dismisses via JS; CSS only handles the reveal.
   ============================================================ */
.celebration {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--accent-2) 14%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
  border-left: 3px solid var(--accent-2);
  color: var(--accent-2);
  padding: 14px 22px;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--ink) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-brand), transform 240ms var(--ease-brand);
}

.celebration[hidden] {
  /* The default `display: none` from the [hidden] attr keeps the toast
     out of the layout entirely until JS opts it in. */
  display: none;
}

.celebration.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .celebration { transition: none; }
}

@media (min-width: 721px) {
  .celebration {
    bottom: auto;
    top: 24px;
  }
}

.celebration__inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.celebration__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-2);
  color: var(--bg);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.celebration__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent-2);
}

.celebration__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--accent-2) 80%, var(--ink));
  margin-top: 2px;
}
/* ============================================================
   F11-P4 — three-year history page (/tracker/history)
   Scoped under .history-page so nothing leaks into the dashboard
   or setup form. Mirrors the brand calendar-grid pattern: 1px gaps
   on var(--line) over var(--bg) cells to create hairline dividers.
   ============================================================ */
.history-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.history-section {
  margin-bottom: var(--space-6);
}

.history-section:last-of-type {
  margin-bottom: var(--space-5);
}

.history-section__head {
  margin-bottom: var(--space-4);
}

.history-section__head .eyebrow {
  margin-bottom: 12px;
}

.history-section__head .section-title {
  margin: 0;
}

/* ---------- Horizontal scroll wrapper with edge fade ---------- */
.history-page .history-scroll {
  overflow-x: auto;
  /* Subtle gradient fade indicator at left/right edges so it's clear
     there's more to scroll on narrow viewports. Mask is supported in
     all evergreen browsers; older browsers degrade to a hard edge,
     which is still legible. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  padding: 4px 28px;
  margin: 0 -28px;
}

/* ---------- Timeline table ---------- */
.history-page .history-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  min-width: 880px;
}

.history-page .history-table__head,
.history-page .history-row__summary {
  display: grid;
  grid-template-columns:
    72px
    minmax(180px, 1fr)
    minmax(180px, 1.4fr)
    minmax(220px, 1.8fr)
    minmax(140px, 1fr)
    140px;
  align-items: center;
  background: var(--bg);
  padding: 14px 18px;
  gap: var(--space-3);
}

.history-page .history-table__head {
  background: var(--bg);
}

.history-page .history-table__head .history-cell {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.history-page .history-row {
  background: var(--bg);
  position: relative;
}

.history-page .history-row--placeholder {
  background: color-mix(in srgb, var(--bg) 92%, var(--muted) 8%);
}

.history-page .history-row--current {
  background: color-mix(in srgb, var(--accent-3) 7%, var(--bg));
  box-shadow: inset 3px 0 0 var(--accent-3);
}

.history-page details.history-row > .history-row__summary {
  cursor: pointer;
  list-style: none;
  transition: background 200ms var(--ease-brand);
}

.history-page details.history-row > .history-row__summary::-webkit-details-marker {
  display: none;
}

.history-page details.history-row > .history-row__summary::marker {
  content: '';
}

.history-page details.history-row:not([open]) > .history-row__summary:hover,
.history-page details.history-row:not([open]) > .history-row__summary:focus-visible {
  background: color-mix(in srgb, var(--accent-3) 5%, var(--bg));
}

.history-page details.history-row[open] > .history-row__summary {
  background: color-mix(in srgb, var(--accent-3) 6%, var(--bg));
}

.history-page details.history-row > .history-row__summary:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: -2px;
}

/* ---------- Cells ---------- */
.history-page .history-cell {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  min-width: 0;
}

.history-page .history-cell--num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 0;
}

.history-page .history-cell--period {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.history-page .history-cell--name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.history-page .history-cell--name em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

.history-page .history-cell--goals,
.history-page .history-cell--habit {
  font-size: 13px;
  color: var(--muted);
}

.history-page .history-cell__goals-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-page .history-cell__placeholder {
  color: var(--muted);
  opacity: 0.5;
}

/* ---------- Status badge ---------- */
.history-page .history-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.history-page .history-status__glyph {
  font-size: 14px;
  line-height: 1;
}

.history-page .history-status--in-progress { color: var(--accent-3); }
.history-page .history-status--completed { color: var(--accent-2); }
.history-page .history-status--not-completed { color: var(--accent-5); }
.history-page .history-status--empty { color: var(--muted); opacity: 0.7; }

/* ---------- Inline expansion panel ---------- */
.history-page .history-row__expand {
  background: color-mix(in srgb, var(--bg) 96%, var(--ink) 4%);
  border-top: 1px dashed var(--line);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
}

.history-page details.history-row[open] > .history-row__expand {
  animation: history-expand-in 240ms var(--ease-brand);
}

@keyframes history-expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.history-page .history-expand__section {
  grid-column: 1 / -1;
}

.history-page .history-expand__reflection {
  grid-column: span 1;
  min-width: 0;
}

.history-page .history-expand__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.history-page .history-expand__goals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-page .history-expand__goal {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
}

.history-page .history-expand__goal--complete {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
}

.history-page .history-expand__goal-mark {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2);
  text-align: center;
}

.history-page .history-expand__goal:not(.history-expand__goal--complete) .history-expand__goal-mark {
  color: var(--muted);
  font-weight: 400;
}

.history-page .history-expand__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.history-page .history-expand__empty {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Visual timeline strip ---------- */
.history-page .history-strip-scroll {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.history-page .history-strip {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.history-page .history-strip__block {
  flex: 0 0 168px;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  transition:
    transform 240ms var(--ease-brand),
    background 240ms var(--ease-brand);
}

.history-page .history-strip__block:hover {
  transform: translateY(-2px);
}

.history-page .history-strip__block--future {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
}

.history-page .history-strip__block--completed {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--bg);
}

.history-page .history-strip__block--not-completed {
  background: color-mix(in srgb, var(--accent-5) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--accent-5) 40%, var(--line));
  color: var(--ink);
}

.history-page .history-strip__block--current {
  background: var(--bg);
  border: 2px solid var(--accent-3);
  color: var(--ink);
  animation: history-block-pulse 2.6s var(--ease-brand) infinite;
}

@keyframes history-block-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-3) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-3) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-page .history-strip__block--current {
    animation: none;
  }
  .history-page details.history-row[open] > .history-row__expand {
    animation: none;
  }
}

.history-page .history-strip__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  opacity: 0.75;
}

.history-page .history-strip__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-page .history-strip__name--empty {
  opacity: 0.5;
}

/* ---------- Back link ---------- */
.history-page .history-back {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-start;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .history-page {
    padding: 36px 16px 64px;
  }

  .history-page .history-scroll {
    padding: 4px 16px;
    margin: 0 -16px;
  }

  .history-page .history-table__head,
  .history-page .history-row__summary {
    padding: 12px 14px;
    gap: var(--space-2);
  }

  .history-page .history-row__expand {
    grid-template-columns: 1fr;
    padding: var(--space-3) var(--space-4);
  }

  .history-page .history-cell--name { font-size: 16px; }
  .history-page .history-cell--period { font-size: 13px; }
  .history-page .history-strip__block { flex: 0 0 148px; }
}

/* ============================================================
   Community wall — public chapter wall (/community)
   ============================================================ */

/* CTA strip above the grid */
.wall-cta-strip {
  max-width: 1100px;
  margin: 0 auto var(--space-5);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.wall-share-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--accent-5);
}

/* Wall grid — calendar-grid pattern: var(--bg) cards, var(--line) 1px gaps */
.wall-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-7);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* Empty state — full-width single cell */
.wall-grid--empty {
  display: block;
  background: transparent;
  border: 1px solid var(--line);
}

/* Individual chapter card */
.wall-card {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 3px coloured accent strip at the top, colour set inline via style */
.wall-card__accent {
  height: 3px;
  flex-shrink: 0;
}

.wall-card__body {
  padding: var(--space-4) 20px var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Chapter name — Fraunces 500, italic <em> for key word */
.wall-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.wall-card__name em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-3);
}

/* Value — eyebrow style, accent-3 */
.wall-card__value {
  color: var(--accent-3);
  margin-bottom: 0;
}

/* Progress bar */
.wall-card__progress {
  height: 4px;
  background: rgba(31, 26, 22, 0.10);
  overflow: hidden;
}

.wall-card__progress-fill {
  height: 100%;
  background: var(--accent-3);
  transition: width 240ms ease;
}

/* Habit block */
.wall-card__habit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wall-card__habit .eyebrow {
  margin-bottom: 0;
}

.wall-card__habit-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

/* Footer row: goals + name */
.wall-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.wall-card__goals {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}

.wall-card__who {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.wall-card__anon {
  font-style: italic;
  opacity: 0.7;
}

/* Empty state */
.wall-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  background: var(--bg);
}

.wall-empty__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .wall-grid {
    grid-template-columns: 1fr;
    padding: 0 0 var(--space-6);
  }
  .wall-cta-strip { padding: 0 var(--space-3); }
}

/* ============================================================
   Waitlist & homepage layout helpers (QA pass)
   - .waitlist-form: 560px-wide centred container for waitlist intakes
     (replaces the .auth-page wrapper which forces full-viewport vertical
     centring intended for login flows).
   - .hero--home / .page--home: tighten the gap between the sticky nav
     and the homepage hero heading without affecting other pages.
   - .hero--waitlist: same hero primitive, no extra top padding so it
     sits comfortably above the form section.
   ============================================================ */
.waitlist-form {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}
.waitlist-form .auth-form { width: 100%; }

.page--home,
.page--compare {
  padding-top: var(--space-3);
}

.hero--home,
.hero--compare {
  padding-top: var(--space-5);
}

/* Compare page = the de-facto pricing page. Tighten the vertical
   rhythm so all three cards + the AI teaser fit on a 13" laptop
   without scrolling. Scoped to .page--compare so /pdf, /tracker-info
   and /course-info keep their roomier per-product spacing. */
.page--compare .hero {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
}
.page--compare .section {
  padding: 40px 24px;
}
.page--compare .section-header {
  margin-bottom: var(--space-4);
}
.page--compare .pricing-card {
  padding: 24px 22px;
  gap: var(--space-2);
}
.page--compare .pricing-card__features {
  margin: var(--space-2) 0 var(--space-3);
  gap: 6px;
  font-size: 16px;
}

.hero--waitlist {
  margin-bottom: var(--space-5);
}

.form-label-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
}

/* ======================================================================
   Admin AI Playground — pg-* components
   ====================================================================== */

.pg-row--top {
  margin-bottom: var(--space-3);
}

.pg-user-field {
  max-width: 560px;
}

/* Context card */
.pg-context-card {
  background: rgba(244, 237, 226, 0.04);
  border: 1px solid rgba(244, 237, 226, 0.12);
  border-radius: 6px;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.pg-context-card__head {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(244, 237, 226, 0.08);
  background: rgba(244, 237, 226, 0.03);
}
.pg-context-card__body {
  padding: 16px;
}

.pg-ctx-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.pg-ctx-list dt {
  color: rgba(244, 237, 226, 0.55);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 1px;
}
.pg-ctx-list dd {
  color: rgba(244, 237, 226, 0.9);
  margin: 0;
}
.pg-ctx-list dd em {
  color: rgba(244, 237, 226, 0.4);
  font-style: italic;
}

.pg-goal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-goal-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pg-goal-tick {
  font-size: 12px;
  flex-shrink: 0;
  color: rgba(244, 237, 226, 0.45);
}
.pg-goal-tick--done {
  color: var(--accent-2);
}

/* Controls bar */
.pg-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.pg-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(244, 237, 226, 0.8);
}
.pg-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-3);
  cursor: pointer;
}
.pg-toggle__label {
  user-select: none;
}

/* Chat area inside the playground */
.pg-chat {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(244, 237, 226, 0.12);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.pg-messages {
  min-height: 280px;
  max-height: 480px;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(244, 237, 226, 0.02);
  /* Reset chat-messages full-page sizing */
  flex: none;
}
.pg-input-form {
  border-top: 1px solid rgba(244, 237, 226, 0.1);
  border-radius: 0;
}

/* Debug panel */
.pg-debug {
  margin-top: var(--space-2);
  border: 1px solid rgba(244, 237, 226, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.pg-debug__summary {
  padding: 10px 16px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: rgba(244, 237, 226, 0.55);
  cursor: pointer;
  user-select: none;
  background: rgba(244, 237, 226, 0.03);
  list-style: none;
}
.pg-debug__summary::-webkit-details-marker { display: none; }
.pg-debug__summary::before {
  content: '▶ ';
  font-size: 10px;
}
details[open] .pg-debug__summary::before { content: '▼ '; }
.pg-debug__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pg-debug__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-debug__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(244, 237, 226, 0.45);
}
.pg-debug__value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-3);
}
.pg-debug__prompt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(244, 237, 226, 0.75);
  background: rgba(244, 237, 226, 0.04);
  border: 1px solid rgba(244, 237, 226, 0.08);
  border-radius: 4px;
  padding: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  margin: 0;
}

/* Playground user search + listbox combo */
.pg-user-search {
  margin-bottom: 6px;
}
.pg-user-select[size] {
  height: auto;
  border-radius: 4px;
  overflow-y: auto;
  background: rgba(31, 26, 22, 0.6);
}
.pg-user-select[size] option {
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 3px;
}
.pg-user-select[size] option:checked {
  background: var(--accent-3);
  color: var(--paper);
}

/* ============================================================
   Promo banner — site-wide sticky announcement strip
   Background: brand orange (--accent-3), text: dark ink.
   Dismissed per-session via inline script in the banner HTML.
   ============================================================ */
.promo-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  background: var(--accent-3);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.promo-banner__msg {
  margin: 0;
  flex: 1;
}

.promo-banner__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.7;
  padding: 2px 6px;
  border-radius: 2px;
  transition: opacity 0.15s var(--ease-brand);
}

.promo-banner__close:hover,
.promo-banner__close:focus-visible {
  opacity: 1;
}

/* ============================================================
   Admin · Promotions section styles
   ============================================================ */
.promo-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.promo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}

.promo-table th,
.promo-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.promo-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.promo-code-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-3);
  text-decoration: none;
}

.promo-code-link:hover { text-decoration: underline; }

.promo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}

.badge--live      { background: #2c5f2e; color: #a8e6a0; }
.badge--scheduled { background: #3a4a6b; color: #a0b8f0; }
.badge--expired   { background: #4a3a2e; color: #c0a080; }
.badge--disabled  { background: #3a3a3a; color: #a0a0a0; }

.promo-banner-on {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-3);
}

.promo-radio-group,
.promo-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.promo-radio,
.promo-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}

.promo-meta-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--muted);
}

.promo-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.promo-danger-zone h3 { margin-bottom: var(--space-2); }

.promo-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.promo-switch input[type="checkbox"] {
  width: 36px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent-3);
}

.promo-switch__label {
  font-family: var(--font-body);
  font-size: 14px;
}

.admin-empty {
  color: var(--muted);
  font-style: italic;
  padding: var(--space-4) 0;
}

.admin-section__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--bg);
  margin-bottom: var(--space-2);
}

.admin-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}