:root {
  /* Approved master palette — docs/brand/masters/chrome-live-2026-09-25/PALETTE_AND_LOGO.md */
  --black-leather: #11100e;
  --warm-ivory: #f4ebdd;
  --warm-gold: #b98a47;
  --graphite-ink: #2b2926;
  --ink: #2b2926;
  --ink-soft: #3d3832;
  --paper: #f4ebdd;
  --paper-ruled: #ebe2d2;
  --ivory: #f4ebdd;
  --leather: #11100e;
  --gold: #b98a47;
  --gold-bright: #c9a05a;
  --blush: #b98a47; /* remapped off pink — warm gold only */
  --graphite: #2b2926;
  --mist: rgba(244, 235, 221, 0.08);
  /*
   * Contrast roles (same family — not a second palette).
   * Color-blind / WCAG: meaning via luminance + type weight, never hue alone.
   * Warm Gold on Warm Ivory fails AA — use gold-ink-on-paper for labels on cream.
   */
  --text-on-dark: #f4ebdd;
  --text-muted-on-dark: #ddd3c3; /* ~12.8:1 on leather — readable secondary */
  --text-quiet-on-dark: #c4b8a4; /* ~9.7:1 — micro/help, not body */
  --accent-on-dark: #c9a05a; /* gold-bright · ~7.8:1 — links/labels on leather */
  --gold-ink-on-paper: #5c4320; /* ~7.8:1 on ivory — chapter labels on cream */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Serif 4", "Cormorant Garamond", Georgia, serif;
  --font-ui: "DM Sans", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  background: #050505;
  min-height: 100vh;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Site-wide scrolling photo field (replaces plain black) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    #050505
    url("/deck/site-scroll-bg.jpg?v=glass1")
    center / cover no-repeat;
  background-attachment: fixed;
  transform: scale(1.06);
  transform-origin: center;
}

/* Shaded glass over the scrolling field — lightened so transport image reads through */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(
      165deg,
      rgba(6, 5, 4, 0.22) 0%,
      rgba(5, 4, 3, 0.34) 42%,
      rgba(4, 3, 2, 0.46) 100%
    ),
    radial-gradient(120% 80% at 50% 0%, rgba(180, 190, 210, 0.12) 0%, transparent 55%);
  backdrop-filter: blur(12px) saturate(0.74) brightness(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.74) brightness(0.9);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-transparency: reduce) {
  body::before {
    transform: none;
  }
  body::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(5, 4, 3, 0.94);
  }
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
  z-index: -1;
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* faint journal margin line on dark field */
.atmosphere::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: clamp(1.1rem, 4vw, 2.75rem);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(185, 138, 71, 0.18) 12%,
    rgba(185, 138, 71, 0.1) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

a { color: var(--accent-on-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 3px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  position: sticky;
  top: 0;
  backdrop-filter: blur(16px) saturate(0.55);
  -webkit-backdrop-filter: blur(16px) saturate(0.55);
  background: rgba(8, 6, 5, 0.52);
  z-index: 10;
  border-bottom: 1px solid rgba(196, 165, 116, 0.15);
}
.site-header nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.92rem;
  font-family: var(--font-ui);
}
.site-header nav a:not(.btn) { color: var(--paper); opacity: 0.85; }
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  line-height: 0;
}
.logo-lockup:hover { text-decoration: none; opacity: 0.92; }
.logo-book {
  width: auto;
  height: 2.55rem;
  aspect-ratio: 1476 / 913;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  background: transparent;
}
.logo-book-foot {
  height: 3.6rem;
  width: auto;
  aspect-ratio: 1476 / 913;
  object-fit: contain;
  background: transparent;
}
.logo-watermark {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 0.88;
  filter: drop-shadow(0 1px 0 rgba(255, 248, 230, 0.15));
}
.logo-mark {
  margin: 0 0 0.5rem;
  line-height: 0;
}
.logo-tm {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--accent-on-dark);
  font-weight: 600;
}
.site-header .logo-book {
  height: 2.55rem;
  width: auto;
  aspect-ratio: 1320 / 737;
  object-fit: contain;
}
.first-example {
  margin: 1.25rem 0 1.35rem;
  max-width: 22rem;
  text-align: left;
}
.first-example .bubble {
  margin: 0.35rem 0;
  padding: 0.65rem 0.8rem;
  border-radius: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.4;
}
.first-example .me {
  margin-left: 2rem;
  background: rgba(196, 165, 116, 0.88);
  color: #1a1410;
}
.first-example .jott {
  margin-right: 1.5rem;
  background: rgba(255, 248, 236, 0.08);
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: var(--paper);
}
.availability {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin: 0.4rem 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
}
.availability span {
  border: 1px solid rgba(196, 165, 116, 0.28);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}
.availability .live { color: #d7c39a; }
.availability .coming { color: var(--text-quiet-on-dark); }
.hero-position {
  max-width: 36rem;
  margin-top: 0.35rem;
}
.product-console-line {
  margin-top: 0.65rem;
  opacity: 0.92;
}
.skill-status {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
  opacity: 0.9;
}
.skill-status.live { color: #2f6b45; }
.skill-status.beta { color: #8a6a28; }
.skill-status.coming { color: rgba(28, 25, 22, 0.55); }
.journal-black .skill-status.live { color: #d7c39a; }
.journal-black .skill-status.beta { color: #c4a574; }
.journal-black .skill-status.coming { color: var(--text-quiet-on-dark); }
.comic-paper .skill-status.live { color: #2f6b45; }
.comic-paper .skill-status.beta { color: #8a6a28; }
.comic-paper .skill-status.coming { color: rgba(28, 25, 22, 0.55); }
.story-continue {
  padding: 2.5rem 1.5rem 0.5rem;
  text-align: center;
}
.story-continue h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0.25rem 0;
}
.beta-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink, #1a1410);
  background: var(--gold-bright);
  padding: 0.22rem 0.45rem;
  border-radius: 0.15rem;
  line-height: 1;
  vertical-align: middle;
}
.beta-tag-inline {
  vertical-align: baseline;
  position: relative;
  top: -0.05em;
}
.hero-brand-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.35rem;
}
.logo, .logo-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  text-decoration: none;
}
.logo-sm { font-size: 1.25rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  padding: 0.78rem 1.35rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: none; }
/* Primary CTA — solid warm gold, ink text (header/footer chrome) */
.btn-gold {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink) !important;
  box-shadow: none;
}
.btn-gold:hover {
  background: var(--gold);
  border-color: var(--accent-on-dark);
  color: var(--ink) !important;
}
/* Ivory solid — contact / invite primary (ref plate 04) */
.btn-ivory {
  background: var(--warm-ivory);
  border-color: var(--warm-ivory);
  color: var(--ink) !important;
}
.btn-ivory:hover {
  background: #ebe2d2;
  border-color: #ebe2d2;
  color: var(--ink) !important;
}
/* Secondary — thin gold outline, gold text (chrome kit) */
.btn-ghost {
  border-color: rgba(201, 166, 107, 0.9);
  color: var(--gold-bright) !important;
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--gold-bright);
  background: rgba(201, 166, 107, 0.08);
  color: var(--gold-bright) !important;
}
.btn-lg { padding: 0.9rem 1.6rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-gold:disabled { opacity: 0.5; cursor: wait; transform: none; }
/* Status hairlines (button sheet VII) */
.btn-status {
  background: transparent;
  border-color: rgba(235, 230, 220, 0.45);
  color: var(--paper) !important;
}
.btn-status.is-error { border-color: rgba(176, 96, 88, 0.85); }
.btn-status.is-success { border-color: rgba(110, 140, 100, 0.85); }

/* Brand-first homepage hero (video lives at bottom) */
.hero-brand {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) 4rem;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-brand-mark {
  display: inline-block;
  font-size: clamp(2.8rem, 7vw, 4rem);
  margin: 0;
  line-height: 1;
}
.hero-brand-row .beta-tag {
  margin-top: 0.35rem;
}

/* Storyboard hero — full-bleed lifestyle plane */
.hero-storyboard {
  position: relative;
  min-height: min(92vh, 52rem);
  display: grid;
  align-items: end;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(196, 165, 116, 0.18);
}
.hero-storyboard-media {
  position: absolute;
  inset: 0;
}
.hero-storyboard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.hero-storyboard-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 10, 9, 0.35) 0%, rgba(12, 10, 9, 0.55) 45%, rgba(12, 10, 9, 0.92) 100%),
    linear-gradient(90deg, rgba(12, 10, 9, 0.55) 0%, transparent 55%);
}
.hero-storyboard-copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  padding: clamp(5.5rem, 12vh, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vh, 3.5rem);
}
.hero-storyboard-copy .tagline {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  margin: 0.35rem 0 0.75rem;
}
.hero-storyboard-copy .lede {
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: rgba(243, 235, 224, 0.92);
  margin: 0 0 0.5rem;
}
.hero-storyboard-copy .journal-aside {
  margin-bottom: 1.35rem;
}

.storyboard-band {
  padding-top: 0;
  padding-bottom: 0;
}
.storyboard-frame {
  margin: 0;
  max-width: 72rem;
  margin-inline: auto;
}
.storyboard-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.storyboard-caption {
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  color: var(--gold-bright);
  margin: 1.25rem auto 2rem;
  max-width: 32rem;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
  max-width: 52rem;
  margin: 0 auto 1.75rem;
  text-align: left;
}
.promise-grid h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
  color: var(--gold-bright);
}
.promise-grid p {
  margin: 0;
  color: var(--text-muted-on-dark);
  font-size: 0.98rem;
}
.promise-line {
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem) !important;
  margin-top: 0.5rem !important;
}
@media (max-width: 800px) {
  .promise-grid { grid-template-columns: 1fr 1fr; }
  .hero-storyboard { min-height: min(88vh, 40rem); }
}
@media (max-width: 520px) {
  .promise-grid { grid-template-columns: 1fr; }
}
.hero-brand h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  margin: 0;
  color: var(--ivory);
}
.steps-rich li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.steps-rich span {
  color: var(--text-muted-on-dark);
  font-weight: 400;
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
  margin-top: 2rem;
  text-align: left;
}
.feature-row h3 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}
.feature-row p {
  margin: 0;
  color: var(--text-muted-on-dark);
  font-size: 0.95rem;
}
.send-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
  text-align: left;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.send-modes h3 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
}
.send-modes p {
  margin: 0;
  color: var(--text-on-dark);
}
.plans-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: left;
}
.plan {
  padding: 1.5rem;
  border: 1px solid rgba(196, 165, 116, 0.25);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.25);
}
.plan-featured {
  border-color: rgba(224, 195, 138, 0.55);
  background: rgba(196, 165, 116, 0.08);
}
.plan-price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin: 0.35rem 0 1rem;
  color: var(--ivory);
}
.plan-price span {
  font-size: 1rem;
  color: var(--text-quiet-on-dark);
}
.plan ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  color: var(--text-on-dark);
}
.plan li { margin: 0.35rem 0; }

.film-section {
  border-top: 1px solid rgba(196, 165, 116, 0.15);
  background: rgba(0, 0, 0, 0.35);
  padding-bottom: 2.5rem;
}
.film-section-intro {
  text-align: center;
  padding-bottom: 1rem;
}
.film-section-cta {
  text-align: center;
  margin: 1rem 0 0;
}
.onboard-film-embed {
  min-height: min(78vh, 720px);
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(196, 165, 116, 0.28);
  overflow: hidden;
}
.deck-gallery {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.deck-gallery .deck-frame { margin: 0; }

@media (max-width: 720px) {
  .hero-brand { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .send-modes { grid-template-columns: 1fr; }
  .plans-row { grid-template-columns: 1fr; }
  .onboard-film-embed { min-height: 70svh; border-radius: 0; }
}

/* ── Cinematic onboarding film ───────────────────────── */
.hero-cinematic {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
  position: relative;
  min-height: min(100vh, 920px);
  isolation: isolate;
}
.onboard-film {
  position: relative;
  min-height: min(100vh, 920px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(196, 165, 116, 0.16), transparent 60%),
    linear-gradient(180deg, #1a1410 0%, #0a0807 55%, #050403 100%);
  cursor: pointer;
}
.film-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.film-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4.5rem 1.25rem 5.5rem;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.7s ease;
}
.film-scene.is-on {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}
.film-caption {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--text-muted-on-dark);
  text-align: center;
  max-width: 28rem;
}
.film-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 600;
  color: var(--ivory);
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.film-line-dim { color: var(--text-quiet-on-dark); font-style: italic; font-weight: 500; }

.film-notebook {
  width: min(220px, 42vw);
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(125deg, rgba(224, 195, 138, 0.12), transparent 40%),
    linear-gradient(160deg, #2a211c 0%, #100c0a 55%, #070605 100%);
  border-radius: 0.35rem 1.1rem 1.1rem 0.35rem;
  border: 1px solid rgba(196, 165, 116, 0.45);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(224, 195, 138, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  animation: filmFloat 4.5s ease-in-out infinite;
}
.film-notebook-end { width: min(160px, 34vw); }
.film-nb-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--gold-bright);
  text-shadow: 0 0 40px rgba(224, 195, 138, 0.25);
}
.film-nb-line {
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@keyframes filmFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

.film-meet {
  width: min(420px, 88vw);
  height: min(220px, 36vw);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(212, 165, 154, 0.35), transparent 45%),
    linear-gradient(135deg, #3a2a28, #1a1210 70%);
  display: grid;
  place-items: end center;
  padding-bottom: 1.5rem;
  border: 1px solid rgba(196, 165, 116, 0.2);
  margin-bottom: 0.5rem;
  filter: saturate(0.85);
}
.film-meet-card {
  background: rgba(250, 246, 239, 0.94);
  color: #1a1410;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  border-radius: 0.25rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  animation: filmPop 0.6s ease both;
}

.film-contact {
  text-align: center;
  padding: 1.75rem 2rem;
  border-radius: 1.25rem;
  background: rgba(28, 24, 21, 0.92);
  border: 1px solid rgba(196, 165, 116, 0.3);
  min-width: min(280px, 80vw);
  margin-bottom: 0.75rem;
  animation: filmPop 0.55s ease both;
}
.film-contact-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--gold-bright);
  margin: 0;
}
.film-contact-phone {
  margin: 0.35rem 0 0.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.film-contact-meta {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet-on-dark);
}

.film-phone {
  width: min(340px, 88vw);
  background: #14110f;
  border-radius: 1.75rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
  padding: 0.85rem 0.7rem 1.1rem;
  min-height: 380px;
}
.film-phone-bar {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent-on-dark);
  font-size: 1.55rem;
  margin-bottom: 0.65rem;
}
.film-thread {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 300px;
}
.film-scene[data-scene="capture"] .film-phone,
.film-scene[data-scene="confirm"] .film-phone,
.film-scene[data-scene="recall"] .film-phone,
.film-scene[data-scene="remind"] .film-phone,
.film-scene[data-scene="nudge"] .film-phone,
.film-scene[data-scene="upgrade"] .film-phone {
  transform: scale(1.02);
}
.film-pop { animation: filmPop 0.55s ease both; }
.film-pop-delay { animation: filmPop 0.55s 0.35s ease both; opacity: 0; }
.film-pop-late { animation: filmPop 0.55s 0.7s ease both; opacity: 0; }
.film-scene.is-on .film-pop-delay,
.film-scene.is-on .film-pop-late { opacity: 1; }
@keyframes filmPop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.film-end-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 4.5rem);
  color: var(--gold-bright);
  margin: 0.5rem 0 0;
  animation: filmShimmer 2.8s ease-in-out infinite;
}
.film-end-promise {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 600;
  margin: 0;
  color: var(--ivory);
  letter-spacing: 0.02em;
}
@keyframes filmShimmer {
  0%, 100% { text-shadow: 0 0 24px rgba(224, 195, 138, 0.15); }
  50% { text-shadow: 0 0 48px rgba(224, 195, 138, 0.4); }
}

.film-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem) 1.1rem;
  background: linear-gradient(transparent, rgba(5, 4, 3, 0.85));
  pointer-events: none;
}
.film-chrome > * { pointer-events: auto; }
.film-progress-track {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(243, 235, 224, 0.15);
  overflow: hidden;
}
.film-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: inherit;
  transition: width 0.1s linear;
}
.film-play {
  border: 1px solid rgba(196, 165, 116, 0.45);
  background: rgba(20, 17, 15, 0.7);
  color: var(--paper);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
.film-play:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.film-runtime {
  font-size: 0.75rem;
  color: var(--text-quiet-on-dark);
  letter-spacing: 0.06em;
}

.hero-endcard {
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%) translateY(18px);
  z-index: 6;
  text-align: center;
  width: min(560px, 92vw);
  padding: 1.25rem 1rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}
.hero-endcard.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.onboard-film.is-playing .film-chrome {
  opacity: 1;
}
.film-chrome {
  opacity: 0.95;
}
.hero-cinematic:has(.hero-endcard.is-visible) .film-scene[data-scene="end"] .film-end-brand,
.hero-cinematic:has(.hero-endcard.is-visible) .film-scene[data-scene="end"] .film-end-promise,
.hero-cinematic:has(.hero-endcard.is-visible) .film-scene[data-scene="end"] .film-caption {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-endcard .logo {
  display: block;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  margin-bottom: 0.15rem;
}
.hero-endcard h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  margin: 0;
}
.hero-endcard .tagline { margin: 0.35rem 0 0.85rem; }
.hero-endcard .cta-row { justify-content: center; margin-top: 0.5rem; }

.film-storyboard-ref { margin-top: 1.5rem; }
.film-storyboard-ref figcaption { margin-top: 0.65rem; text-align: center; }

@media (max-width: 720px) {
  .onboard-film-embed .film-phone { min-height: 300px; }
  .onboard-film-embed .film-thread { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-notebook,
  .film-end-brand,
  .film-pop,
  .film-pop-delay,
  .film-pop-late,
  .film-meet-card { animation: none !important; opacity: 1 !important; }
  .film-scene { transition: none; }
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) 4rem;
  max-width: 1180px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--font-hand);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 1.15rem;
  color: var(--accent-on-dark);
  margin: 0 0 0.75rem;
  opacity: 0.9;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 7vw, 4.4rem);
  line-height: 1.05;
  margin: 0;
  color: var(--ivory);
  animation: inkIn 0.85s ease both;
}
.tagline {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  color: var(--gold-bright);
  margin: 0.65rem 0 1rem;
  line-height: 1.25;
  animation: inkIn 0.9s 0.08s ease both;
}
.lede, .section-lede {
  color: var(--text-on-dark);
  font-size: 1.12rem;
  max-width: 34rem;
  font-weight: 400;
}
.journal-aside {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: rgba(212, 184, 136, 0.88);
  margin: 1rem 0 0;
  max-width: 22rem;
  line-height: 1.35;
  transform: rotate(-0.8deg);
  animation: inkIn 1s 0.15s ease both;
}
@keyframes inkIn {
  from { opacity: 0; transform: translateY(0.4rem); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
.journal-aside { animation-name: inkInTilt; }
@keyframes inkInTilt {
  from { opacity: 0; transform: translateY(0.4rem) rotate(-0.8deg); }
  to { opacity: 1; transform: rotate(-0.8deg); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 1rem; }
.micro { font-size: 0.8rem; color: var(--text-quiet-on-dark); }

.hero-visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}
.phone {
  width: min(280px, 78vw);
  background: #1c1815;
  border-radius: 2rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  padding: 0.75rem 0.65rem 1rem;
  position: relative;
  z-index: 2;
  animation: rise 0.9s ease both;
}
.phone-notch {
  width: 88px;
  height: 8px;
  background: #0a0807;
  border-radius: 999px;
  margin: 0.15rem auto 0.75rem;
}
.phone-screen { display: flex; flex-direction: column; gap: 0.55rem; min-height: 320px; }
.thread-label {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent-on-dark);
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
}
.bubble {
  max-width: 92%;
  padding: 0.7rem 0.85rem;
  border-radius: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.bubble.me {
  align-self: flex-end;
  background: #2f6fed;
  color: white;
  border-bottom-right-radius: 0.3rem;
}
.bubble.jott {
  align-self: flex-start;
  background: #2a2420;
  color: var(--paper);
  border: 1px solid rgba(196, 165, 116, 0.25);
  border-bottom-left-radius: 0.3rem;
  white-space: pre-wrap;
}
.notebook {
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: 180px;
  height: 240px;
  background:
    repeating-linear-gradient(
      transparent,
      transparent 14px,
      rgba(28, 25, 22, 0.07) 14px,
      rgba(28, 25, 22, 0.07) 15px
    ),
    linear-gradient(145deg, #f0ebe2, #e2dcd0 70%);
  border-radius: 0.15rem 0.55rem 0.55rem 0.15rem;
  border: 1px solid rgba(28, 25, 22, 0.2);
  box-shadow:
    -6px 0 0 #1a1510,
    0 22px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1.35rem 1rem 1rem 1.35rem;
  transform: rotate(6deg);
  z-index: 1;
  color: var(--ink);
}
.nb-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.85rem;
  color: #6b5428;
  line-height: 1;
}
.nb-stamp {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  margin-top: 0.85rem;
  opacity: 0.85;
  transform: rotate(-2deg);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.notebook { animation: riseTilt 1.1s 0.15s ease both; }
@keyframes riseTilt {
  from { opacity: 0; transform: translateY(18px) rotate(6deg); }
  to { opacity: 1; transform: rotate(6deg); }
}

.band {
  padding: 4rem clamp(1.25rem, 4vw, 3rem);
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}
/* Open journal page — use explicitly via .journal-page */
.journal-page {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      transparent,
      transparent 1.65rem,
      rgba(28, 25, 22, 0.06) 1.65rem,
      rgba(28, 25, 22, 0.06) calc(1.65rem + 1px)
    ),
    linear-gradient(90deg, rgba(180, 70, 60, 0.12) 0 2px, transparent 2px),
    var(--paper);
  color: var(--ink);
  border-radius: 0.15rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 18px 40px rgba(0, 0, 0, 0.35);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 2.75rem) 2.75rem calc(1.5rem + 1.25rem);
  animation: pageSettle 0.7s ease both;
}
/* PRIMARY watermark — circular black-leather seal (Brand North Star) */
.journal-page::after {
  content: none; /* prefer explicit <img.journal-watermark> for reliable paint */
}
.journal-watermark {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(62%, 16rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.journal-page > *:not(.journal-watermark) {
  position: relative;
  z-index: 1;
}
@keyframes pageSettle {
  from { opacity: 0; transform: translateY(0.75rem) rotate(-0.4deg); }
  to { opacity: 1; transform: none; }
}
.journal-page h2 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--ink);
}
.journal-page .section-lede,
.journal-page p,
.journal-page li {
  color: var(--ink-soft);
}
.journal-page .steps-rich span {
  color: var(--ink-soft) !important;
}
.band-dark {
  max-width: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184, 154, 106, 0.08), transparent 60%);
  border-block: 1px solid rgba(196, 165, 116, 0.12);
  text-align: center;
}
.band-dark .steps { max-width: 720px; margin: 1.5rem auto 2rem; text-align: left; }
.jott-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: var(--gold-bright);
  letter-spacing: 0.04em;
  margin: 1.25rem 0 0.75rem;
}
.signup-form {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
  margin: 1.5rem 0 1rem;
  text-align: left;
}
.signup-form[hidden] {
  display: none !important;
}
.signup-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted-on-dark);
}
.signup-form input {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border-radius: 0;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: rgba(12, 10, 9, 0.55);
  color: var(--paper);
}
.signup-form .optional { opacity: 0.55; font-size: 0.78rem; }
.founder-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--gold-bright);
  margin: 0.5rem 0 0.25rem;
}
.founder-bio { max-width: 40rem; margin-left: auto; margin-right: auto; }
.about-page { max-width: 40rem; }
.about-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  margin: 0.25rem 0;
  font-weight: 500;
}
.founder-section-title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 2rem 0 0.85rem;
  opacity: 0.9;
}
.founder-prose p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(232, 228, 220, 0.86);
  margin: 0 0 1rem;
}
.comic-founder {
  max-width: 40rem;
  text-align: left;
  background:
    radial-gradient(ellipse 55% 40% at 50% 0%, rgba(184, 154, 106, 0.14), transparent 65%),
    #070605;
}
.comic-founder h2 {
  text-align: left;
}
.comic-founder-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 1.75rem 0 0.75rem;
  opacity: 0.88;
}
.comic-founder-prose p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(232, 228, 220, 0.84);
  margin: 0 0 1rem;
  max-width: none;
}
.comic-founder .comic-lead {
  margin: 0.35rem 0 0;
  text-align: left;
}
.comic-founder-sign {
  margin-top: 1.5rem;
  font-style: italic;
  opacity: 0.8;
  text-align: left;
}
.comic-founder .cta-row {
  justify-content: flex-start;
}
@media (max-width: 800px) {
  .comic-founder .cta-row { justify-content: center; }
  .comic-founder,
  .comic-founder h2,
  .comic-founder .comic-lead,
  .comic-founder-sign { text-align: center; }
}

/* ── Start / QR trial onboarding ─────────────────────── */
.start-page {
  max-width: 52rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  margin-top: 1.75rem;
  text-align: left;
}
.start-qr-frame {
  margin: 0;
  padding: 0.65rem;
  background: #f3ebe0;
  border: 1px solid rgba(196, 165, 116, 0.35);
}
.start-qr-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.start-qr-frame figcaption {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #3a322a;
  text-align: center;
  margin-top: 0.45rem;
}
.start-qr-frame figcaption a { color: #5a4632; }
.start-step-list {
  margin: 0 0 1.25rem;
  padding-left: 1.2rem;
  color: rgba(232, 228, 220, 0.88);
  line-height: 1.55;
}
.start-step-list li + li { margin-top: 0.55rem; }
.start-cta { justify-content: flex-start; flex-wrap: wrap; }
.start-onboard { max-width: 28rem; }
.start-form { margin-top: 1.25rem; }
.start-qr-inline {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem auto 0;
  max-width: 36rem;
  text-align: left;
}
.start-qr-inline img {
  width: 7.5rem;
  height: 7.5rem;
  background: #f3ebe0;
  padding: 0.35rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
}
.start-qr-inline .start-qr-copy {
  flex: 1 1 12rem;
  min-width: 11rem;
}
.start-qr-inline .start-qr-copy p {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  opacity: 0.85;
}
@media (max-width: 700px) {
  .start-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .start-step-list { text-align: left; }
  .start-cta { justify-content: center; }
  .start-qr-frame { width: min(14rem, 70vw); }
}
.btn-block { width: 100%; }
.band h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.grid-3 article {
  padding: 1.35rem;
  border-radius: 1rem;
  background: var(--mist);
  border: 1px solid rgba(196, 165, 116, 0.18);
}
.grid-3 h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  color: var(--gold-bright);
}
.grid-3 p { margin: 0; color: var(--text-on-dark); font-size: 0.95rem; }

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: 0.85rem 0 0.85rem 3rem;
  position: relative;
  border-bottom: 1px solid rgba(196, 165, 116, 0.12);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--accent-on-dark);
  display: block;
  place-items: unset;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

details {
  border-bottom: 1px solid rgba(196, 165, 116, 0.18);
  padding: 1rem 0;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ivory);
}
details p { color: var(--text-muted-on-dark); margin: 0.6rem 0 0; }

/* Full /faq — black leather · Roman nav · sunglass hero (Brand Guidelines) */
.faq-site {
  background: #11100e;
}
.faq-main {
  position: relative;
}
.faq-hero {
  position: relative;
  overflow: hidden;
  /* Condensed vs full-viewport — match home density (P0-004) */
  min-height: min(58vh, 28rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(185, 138, 71, 0.18);
  background: #080808;
}
.faq-hero-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.faq-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  filter: saturate(0.62) contrast(1.12) brightness(0.34);
}
.faq-hero-veil {
  position: absolute;
  inset: 0;
  /* Near-black sunglass lens */
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.32) 40%, rgba(8, 8, 8, 0.94) 100%),
    radial-gradient(120% 80% at 50% 18%, rgba(185, 138, 71, 0.08) 0%, transparent 55%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.7);
}
.faq-hero-copy {
  position: relative;
  z-index: 1;
  width: min(46rem, 100%);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 3.5vh, 2.25rem);
}
.faq-hero .chapter-roman-mark {
  margin: 0 0 0.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.28em;
  color: var(--accent-on-dark);
  text-indent: 0.28em;
}
.faq-hero .comic-page-num {
  color: var(--accent-on-dark);
  letter-spacing: 0.2em;
  margin: 0 0 0.65rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
}
.faq-hero .chapter-roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05em;
  letter-spacing: 0.22em;
  color: var(--accent-on-dark);
  text-transform: none;
}
.faq-hero .faq-chapter-kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}
.faq-hero h1 {
  margin: 0 0 0.55rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--text-on-dark);
  letter-spacing: 0.02em;
}
.faq-intro {
  margin: 0.35rem auto 1.35rem !important;
  max-width: 28rem;
  color: var(--text-on-dark) !important;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.45;
}
.faq-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 0.65rem;
  max-width: 32rem;
}
.faq-search input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
  border: 1px solid rgba(185, 138, 71, 0.35);
  background: rgba(8, 8, 8, 0.72);
  color: #f4ebdd;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0;
  outline: none;
}
.faq-search input[type="search"]::placeholder {
  color: var(--text-quiet-on-dark);
}
.faq-search input[type="search"]:focus {
  border-color: rgba(201, 160, 90, 0.75);
  box-shadow: 0 0 0 1px rgba(201, 160, 90, 0.25);
}
.faq-search .btn {
  flex: 0 0 auto;
}
.faq-search-status {
  min-height: 1.1rem;
  margin: 0 0 1.1rem;
  color: var(--text-quiet-on-dark);
  letter-spacing: 0.04em;
}
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  justify-content: center;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
}
.faq-jump-roman {
  max-width: 40rem;
  margin: 0 auto;
}
.faq-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--accent-on-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
}
.faq-jump a:hover,
.faq-jump a.is-active {
  color: #c9a05a;
  border-bottom-color: rgba(201, 160, 90, 0.55);
}
.faq-jump .faq-roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05em;
  letter-spacing: 0.18em;
  color: #c9a05a;
  text-transform: none;
}
.faq-jump .faq-nav-label {
  font-weight: 500;
}
.faq-body {
  background: #11100e !important;
  border-block: none;
  padding: clamp(2rem, 5vh, 3.25rem) 1.25rem 3.5rem;
}
.faq-book,
.faq-book-black {
  max-width: 42rem;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  color: #f4ebdd;
  padding: 0;
}
.faq-book-black .faq-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: #f4ebdd;
  border-bottom-color: rgba(185, 138, 71, 0.28);
}
.faq-book-black .faq-roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15em;
  letter-spacing: 0.18em;
  color: #c9a05a;
  flex: 0 0 auto;
}
.faq-book-black .faq-group-name {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.faq-book-black .faq-group details {
  border-bottom-color: rgba(185, 138, 71, 0.16);
}
.faq-book-black .faq-group details summary {
  color: #f7f3eb;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
}
.faq-book-black .faq-group details summary::before {
  color: var(--accent-on-dark);
}
.faq-book-black .faq-group details p {
  color: var(--text-on-dark);
}
.faq-book-black .faq-group details a {
  color: #c9a05a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-page-cta {
  justify-content: center;
  margin-top: 2rem;
  gap: 0.75rem;
}
.faq-group {
  margin: 0 0 2rem;
  text-align: left;
}
.faq-group[hidden] {
  display: none !important;
}
.faq-group details[hidden] {
  display: none !important;
}
.faq-group-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--gold-bright);
  margin: 0 0 0.35rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.35);
  letter-spacing: 0.02em;
}
.faq-group details {
  border-bottom: 1px solid rgba(196, 165, 116, 0.14);
  padding: 0.85rem 0;
}
.faq-group details summary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.35;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  cursor: pointer;
}
.faq-group details summary::-webkit-details-marker { display: none; }
.faq-group details summary::before {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--accent-on-dark);
  width: 0.9rem;
}
.faq-group details[open] summary::before { content: "–"; }
.faq-group details p {
  margin: 0.55rem 0 0.15rem 1.55rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.faq-group .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.88em;
}
@media (max-width: 640px) {
  .faq-hero {
    min-height: min(62vh, 26rem);
    align-items: center;
  }
  .faq-hero-copy {
    padding-top: 3.75rem;
  }
  .faq-jump-roman a {
    flex: 1 1 calc(50% - 0.75rem);
    justify-content: flex-start;
  }
  .faq-search {
    flex-direction: column;
  }
  .faq-search .btn {
    width: 100%;
  }
}

.site-footer {
  text-align: center;
  padding: 2.75rem 1.25rem 2.25rem;
  border-top: 1px solid rgba(196, 165, 116, 0.22);
  color: var(--text-muted-on-dark);
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.2) 0%, rgba(8, 6, 5, 0.55) 100%);
}
.site-footer .logo { display: block; margin-bottom: 0.35rem; }
.site-footer > p:not(.micro):not(.site-footer-mission) {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: rgba(212, 184, 136, 0.92);
}
.site-footer .site-footer-hand {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: rgba(212, 184, 136, 0.92);
  margin: 0.15rem 0 0.85rem;
}
.site-footer .site-footer-mission {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 166, 107, 0.88);
  margin: 1.15rem 0 0.55rem;
}
.site-footer .micro {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-footer .micro a {
  color: rgba(201, 166, 107, 0.92);
}
.site-footer .micro a:hover {
  color: var(--gold-bright);
}
.site-footer .legal-line {
  opacity: 0.7;
  letter-spacing: 0.04em;
  text-transform: none;
  font-family: var(--font-ui);
  font-size: 0.72rem;
}

/* SMS / legal shell — same chrome as brochure; readable measure on black */
.legal-shell-main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 1.75rem) 2.5rem;
  color: var(--text-on-dark);
}
.legal-shell-main h1,
.legal-shell-main h2 {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  color: var(--text-on-dark);
}
.legal-shell-main a {
  color: var(--accent-on-dark);
}

/* Try / chat */
.try-page .try-layout {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
  display: grid;
  gap: 1.5rem;
}
.try-intro, .chat-shell {
  background: rgba(26, 21, 18, 0.88);
  border: 1px solid rgba(196, 165, 116, 0.28);
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.try-intro h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin: 0 0 0.5rem;
}
.try-intro form { display: grid; gap: 1rem; margin-top: 1.25rem; }
label { display: grid; gap: 0.35rem; font-size: 0.88rem; color: var(--text-on-dark); }
.optional { opacity: 0.6; font-weight: 400; }
input {
  border-radius: 0.75rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: #100e0c;
  color: var(--paper);
  padding: 0.85rem 1rem;
  font: inherit;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-quiet-on-dark);
  opacity: 1;
}
input:focus {
  outline: 2px solid rgba(196, 165, 116, 0.55);
  outline-offset: 1px;
}
.hidden { display: none !important; }
.pill {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 165, 116, 0.4);
  color: var(--accent-on-dark);
}
.sms-live-card {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  border-radius: 1rem;
  background: rgba(196, 165, 116, 0.08);
  display: grid;
  gap: 0.35rem;
}
.sms-live-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.sms-live-number {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--gold-bright);
  text-decoration: none;
}
.sms-live-number:hover { text-decoration: underline; }

.chat-shell { display: flex; flex-direction: column; min-height: min(72vh, 720px); }
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.2);
}
.status { display: block; font-size: 0.78rem; color: var(--text-quiet-on-dark); }
.linkish {
  background: none;
  border: none;
  color: var(--accent-on-dark);
  cursor: pointer;
  font: inherit;
}
.chat-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem 0;
}
.chat-hints button {
  border-radius: 999px;
  border: 1px solid rgba(196, 165, 116, 0.3);
  background: transparent;
  color: var(--text-on-dark);
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.5rem 0 1rem;
}
.composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  border-top: 1px solid rgba(196, 165, 116, 0.2);
  padding-top: 0.85rem;
}
.chat-foot { margin: 0.65rem 0 0; text-align: center; }

.privacy-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  margin: 0.35rem 0 0.75rem;
}
/* P0-004: solid leather under privacy body — no site-scroll photo / glass blur */
body.privacy-solid {
  background: #11100e;
  color: var(--text-on-dark);
}
body.privacy-solid::before,
body.privacy-solid::after,
body.privacy-solid .atmosphere {
  display: none !important;
}
body.privacy-solid .privacy-page.band {
  background: #11100e;
  max-width: 42rem;
  padding-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
body.privacy-solid .privacy-page .section-lede,
body.privacy-solid .privacy-page .privacy-list,
body.privacy-solid .privacy-page .privacy-faq dd,
body.privacy-solid .privacy-page p:not(.micro) {
  color: var(--text-on-dark);
}
body.privacy-solid .privacy-page .privacy-block h2,
body.privacy-solid .privacy-page .privacy-faq dt {
  color: var(--accent-on-dark);
}
body.privacy-solid .privacy-page a {
  color: var(--accent-on-dark);
}
body.privacy-solid .privacy-page .micro {
  color: var(--text-quiet-on-dark);
}
body.privacy-solid .chapter-opener {
  min-height: min(42vh, 22rem);
}
.privacy-block {
  margin-top: 1.65rem;
  max-width: 38rem;
}
.privacy-block h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--accent-on-dark);
}
.privacy-list {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  color: var(--text-on-dark);
}
.privacy-list li { margin: 0.4rem 0; }
.intent-page .intent-faq-list {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.55rem;
  max-width: 38rem;
}
.intent-page .intent-faq-item {
  border-top: 1px solid rgba(185, 138, 71, 0.22);
  padding: 0.65rem 0 0.2rem;
}
.intent-page .intent-faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #f4ebdd;
  list-style: none;
}
.intent-page .intent-faq-item summary::-webkit-details-marker { display: none; }
.intent-page .intent-season-note {
  max-width: 38rem;
  color: var(--text-quiet-on-dark);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--gold-bright);
}
.canonical {
  margin-top: 1.5rem;
  max-width: 38rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: rgba(243, 235, 224, 0.9);
}
.deck-frame {
  margin: 1.5rem auto;
  max-width: 960px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(196, 165, 116, 0.25);
}
.deck-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.brand-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 900px;
  margin: 1.5rem auto 0;
}
.brand-tray img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0.85rem;
  border: 1px solid rgba(196, 165, 116, 0.2);
}
.founder-quote {
  max-width: 36rem;
  margin: 1.75rem auto 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: rgba(243, 235, 224, 0.92);
  font-style: italic;
}
.founder-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--accent-on-dark);
  font-family: var(--font-body);
}

/* ── UX feedback loop ───────────────────────────────────────── */
.feedback-page .feedback-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) 4rem;
  align-items: start;
}
.feedback-rail h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  line-height: 1.15;
}
.feedback-progress {
  list-style: none;
  margin: 1.75rem 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.feedback-progress li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  color: var(--text-quiet-on-dark);
  transition: color 0.2s ease, transform 0.2s ease;
}
.feedback-progress li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1px solid rgba(196, 165, 116, 0.4);
  background: transparent;
}
.feedback-progress li.active {
  color: var(--gold-bright);
  transform: translateX(2px);
}
.feedback-progress li.active::before {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(224, 195, 138, 0.2);
}
.feedback-progress li.done {
  color: var(--text-muted-on-dark);
}
.feedback-progress li.done::before {
  background: rgba(196, 165, 116, 0.55);
  border-color: transparent;
}
.feedback-stage {
  min-height: 28rem;
}
.feedback-card {
  border: 1px solid rgba(196, 165, 116, 0.22);
  background: linear-gradient(160deg, rgba(243, 235, 224, 0.06), rgba(12, 10, 9, 0.35));
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  animation: feedbackIn 0.35s ease;
}
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.feedback-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  margin: 0.35rem 0 0.75rem;
}
.mission-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin: 1.25rem 0 0.5rem;
  padding: 0.95rem 1.1rem;
  border-left: 2px solid var(--gold);
  background: rgba(196, 165, 116, 0.08);
}
.mission-label {
  margin: 0;
  flex: 1 1 12rem;
  color: rgba(243, 235, 224, 0.85);
  font-size: 0.95rem;
}
.choice-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.35rem 0 0.5rem;
}
.choice-chip {
  appearance: none;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: transparent;
  color: var(--paper);
  border-radius: 999px;
  padding: 0.7rem 1.15rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.choice-chip:hover {
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}
.choice-chip.selected {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  border-color: transparent;
}
.note-label {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted-on-dark);
}
.note-label textarea,
.note-label input {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(196, 165, 116, 0.3);
  background: rgba(12, 10, 9, 0.45);
  color: var(--paper);
  font: inherit;
  padding: 0.85rem 1rem;
  resize: vertical;
}
.note-label textarea:focus,
.note-label input:focus {
  outline: 2px solid rgba(224, 195, 138, 0.45);
  outline-offset: 1px;
}
.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.feedback-cue {
  position: sticky;
  bottom: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: rgba(12, 10, 9, 0.92);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  animation: feedbackIn 0.4s ease;
}
.feedback-cue p {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.92rem;
  color: var(--text-on-dark);
}
.feedback-cue .linkish {
  background: none;
  border: none;
  color: var(--text-quiet-on-dark);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .notebook { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  /* Legacy compact header only — never hide Sep 25 data-site-nav drawer links */
  .site-header:not([data-site-nav]) nav a:not(.btn) { display: none; }
  .brand-tray { grid-template-columns: 1fr; }
  .brand-tray img { height: 200px; }
  .feedback-page .feedback-layout { grid-template-columns: 1fr; }
  .feedback-progress { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0.85rem; }
  .feedback-progress li { font-size: 0.8rem; }
  .core-hierarchy li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ── CORE / Founding 50 ──────────────────────────────────────── */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--gold-bright);
}
.core-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-style: italic;
  color: var(--text-on-dark);
  max-width: 34rem;
}
.core-badge {
  margin: 1.25rem 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  border-radius: 0.35rem;
  background: rgba(12, 10, 9, 0.55);
  max-width: 22rem;
  letter-spacing: 0.04em;
}
.core-badge.sample { opacity: 0.95; }
.core-badge.compact-badge {
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  max-width: 100%;
}
.core-badge p { margin: 0.15rem 0; }
.core-badge-community {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--gold-bright);
  letter-spacing: 0.16em;
}
.core-badge-cohort {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.12em;
}
.core-badge-uri {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--accent-on-dark);
  margin-top: 0.55rem !important;
}
.core-badge-member {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.05rem;
  color: var(--paper);
}
.core-badge-era {
  font-size: 0.78rem;
  color: var(--text-quiet-on-dark);
  letter-spacing: 0.08em;
  margin-top: 0.45rem !important;
}
.core-hierarchy {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 40rem;
}
.core-hierarchy li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.35rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(196, 165, 116, 0.15);
}
.core-hierarchy .core-level {
  grid-row: span 2;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  align-self: center;
}
.core-hierarchy strong { color: var(--paper); }
.core-hierarchy span:last-child {
  grid-column: 2;
  font-size: 0.88rem;
  color: var(--text-quiet-on-dark);
}
.workflow-line {
  margin: 1.25rem 0;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  letter-spacing: 0.06em;
}
.contrib-card {
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--gold);
  background: rgba(196, 165, 116, 0.08);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.88rem;
  color: rgba(243, 235, 224, 0.9);
  white-space: pre-wrap;
  overflow-x: auto;
}
.signup-form select,
.signup-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(196, 165, 116, 0.3);
  background: rgba(12, 10, 9, 0.45);
  color: var(--paper);
  font: inherit;
  padding: 0.75rem 1rem;
}
.signup-modes {
  display: flex;
  gap: 0.35rem;
  margin: 1.25rem 0 1rem;
  max-width: 28rem;
}
.signup-mode {
  appearance: none;
  flex: 1;
  background: transparent;
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: var(--text-muted-on-dark);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.signup-mode.is-active {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--accent-on-dark);
}
.pricing-mockup {
  max-width: 52rem;
  margin: 0.5rem auto 1.5rem;
  text-align: left;
}
.pricing-mockup-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold-bright);
  padding: 0.28rem 0.55rem;
  border-radius: 0.15rem;
  margin: 0 0 0.85rem;
}
.pricing-mockup-lede {
  margin: 0 0 1.35rem !important;
  max-width: 36rem;
  text-align: left;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}
.pricing-refresh-intro {
  margin: 1.25rem 0 0.85rem !important;
  max-width: 36rem;
  font-family: var(--font-ui);
  color: rgba(28, 24, 20, 0.72);
}
.founding-offer {
  margin: 1.25rem 0 0.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(196, 165, 116, 0.4);
  background: rgba(196, 165, 116, 0.08);
  text-align: left;
  max-width: 40rem;
}
.founding-offer h3,
.founding-offer-list + h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  margin: 0 0 0.65rem;
  color: var(--gold-bright);
}
.founding-offer ul,
.founding-offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.founding-offer li,
.founding-offer-list li {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.founding-offer li::before,
.founding-offer-list li::before {
  content: "·";
  color: var(--accent-on-dark);
  margin-right: 0.45rem;
}
.pricing-card {
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: rgba(12, 10, 9, 0.35);
  padding: 1.1rem 1rem 1.25rem;
  border-radius: 0;
}
.pricing-card-featured {
  border-color: rgba(212, 184, 136, 0.65);
  background: rgba(184, 154, 106, 0.12);
}
.pricing-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
  color: var(--gold-bright);
}
.pricing-price {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 500;
  color: var(--ivory);
  margin: 0.15rem 0 0.35rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.pricing-price span,
.pricing-period {
  font-size: 0.72em;
  opacity: 0.75;
  margin-left: 0.12rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.pricing-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.pricing-card li {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-on-dark);
  padding-left: 0.85rem;
  position: relative;
}
.pricing-card li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--accent-on-dark);
}
.hero-beta-note {
  margin-top: 1rem;
  max-width: 28rem;
  opacity: 0.85;
}
.hero-beta-note a { color: var(--gold-bright); }
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
.signup-gtm {
  max-width: 28rem;
  opacity: 0.75;
}
.cohort-explain {
  display: grid;
  gap: 1.25rem;
  max-width: 36rem;
  margin: 1.5rem auto 1.25rem;
  text-align: left;
}
.cohort-explain article h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  color: var(--gold-bright);
}
.cohort-explain article p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}
.cohort-explain .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.88em;
}
.journal-page details .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9em;
}
.signup-next {
  max-width: 28rem;
  margin: 1.25rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(196, 165, 116, 0.2);
}
.founding-wall {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.founding-wall li {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(196, 165, 116, 0.2);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-stats {
  margin-top: 1rem;
  max-width: 36rem;
  color: rgba(243, 235, 224, 0.85);
}
.invite-copy p { max-width: 40rem; }
.core-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4rem);
  margin: 0.25rem 0 0.5rem;
}

/* ── Brand profile page ─────────────────────────────────────── */
.brand-profile-hero {
  min-height: min(72vh, 640px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0 auto;
}
.brand-profile-frame {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 0.35rem;
  overflow: hidden;
  border: 1px solid rgba(196, 165, 116, 0.28);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
  background: #050403;
}
.brand-profile-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-lockup {
  text-align: left;
}
.brand-lockup-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.18em;
  margin: 0 0 0.75rem;
  color: var(--ivory);
}
.brand-lockup-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--gold-bright);
  margin: 0 0 1.25rem;
}
.brand-lockup-mantra {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--text-on-dark);
  margin: 0 0 0.75rem;
  max-width: 22rem;
  line-height: 1.45;
}
.brand-lockup-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-quiet-on-dark);
  margin: 0 0 1.5rem;
  max-width: 22rem;
  line-height: 1.4;
}
.brand-lockup-phone {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--accent-on-dark);
  margin: 0;
}
.brand-lockup-web {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-quiet-on-dark);
}
.brand-mantra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 1.5rem;
}
.brand-mantra-grid h3 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}
.brand-mantra-grid p {
  margin: 0;
  color: var(--text-on-dark);
}
.brand-asset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.brand-asset-row a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.brand-asset-row img {
  width: min(220px, 42vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.35rem;
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: #050403;
}

@media (max-width: 720px) {
  .brand-profile-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }
  .brand-lockup { text-align: center; }
  .brand-lockup-mantra { margin-left: auto; margin-right: auto; }
  .brand-mantra-grid { grid-template-columns: 1fr; }
}

/* ── Cohort console (founder ops) ─────────────────────────────── */
.console-page .console {
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.console-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin: 0.25rem 0 0.75rem;
}
.console-gate-form { max-width: 22rem; }
.console-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 1.25rem;
}
.console-stat {
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(196, 165, 116, 0.35);
  border-bottom: 1px solid rgba(196, 165, 116, 0.12);
}
.console-stat-k {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.35rem;
}
.console-stat-v {
  font-size: 1.15rem;
  color: var(--gold-bright);
}
.console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.18);
  padding-bottom: 0.75rem;
}
.console-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--paper);
  opacity: 0.55;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.console-tab.is-active {
  opacity: 1;
  color: var(--gold-bright);
  border-bottom-color: var(--accent-on-dark);
}
.console-refresh { margin-left: auto; }
.console-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.console-toolbar input[type="search"],
.console-toolbar select {
  background: rgba(250, 246, 239, 0.06);
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: var(--paper);
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
  min-width: 12rem;
}
.console-check {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.88rem;
  opacity: 0.85;
}
.console-table-wrap { overflow-x: auto; }
.console-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.console-table th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 500;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.25);
}
.console-table td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid rgba(243, 235, 224, 0.06);
  vertical-align: top;
}
.console-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.console-item {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(196, 165, 116, 0.14);
}
.console-item header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
}
.console-pill {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border: 1px solid rgba(196, 165, 116, 0.35);
  padding: 0.15rem 0.45rem;
  color: var(--gold-bright);
}
.console-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}
.console-invite-form {
  max-width: 36rem;
  display: inline-block;
  vertical-align: top;
  width: min(100%, 36rem);
}
.console-preview {
  display: inline-block;
  vertical-align: top;
  width: min(100%, 28rem);
  margin-left: 0;
  margin-top: 1.5rem;
}
@media (min-width: 900px) {
  .console-preview {
    margin-left: 2rem;
    margin-top: 0;
  }
}
.console-draft-body {
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
}
.console-dialog {
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: #14110f;
  color: var(--paper);
  padding: 1.5rem;
  max-width: 24rem;
  width: calc(100% - 2rem);
}
.console-dialog::backdrop {
  background: rgba(8, 6, 5, 0.72);
}
.console-dialog h2 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 0.75rem;
}

/* ── Cohort workspace (Slack-style console) ───────────────────── */
.ws-page { min-height: 100vh; }
.ws-login-main {
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 4rem;
}
.ws-login-form { margin-top: 1.5rem; }
.ws {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) 1fr;
  min-height: 100vh;
}
.ws-sidebar {
  border-right: 1px solid rgba(196, 165, 116, 0.18);
  background: rgba(8, 6, 5, 0.55);
  padding: 1rem 0.85rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ws-brand { margin-bottom: 1rem; }
.ws-plan {
  margin: 0.2rem 0 0;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}

.home-console .home-main {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 4rem;
}
.home-id {
  font-size: 1.35rem;
  color: var(--gold-bright);
  margin: 0.35rem 0;
}
.home-membership {
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 1.25rem;
}
.home-block {
  margin: 2rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(196, 165, 116, 0.18);
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0 1.25rem;
}
.home-board {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.92rem;
}
.home-board li {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(243, 235, 224, 0.06);
}

/* ── Core 50 beta console ─────────────────────────────────── */
.core-beta-page .beta-chip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink, #1a1410);
  background: var(--gold-bright);
  padding: 0.25rem 0.55rem;
  border-radius: 0.2rem;
}
.core-beta-main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 4rem;
}
.core-beta-hero {
  margin-bottom: 1.75rem;
  animation: coreBetaIn 0.55s ease both;
}
.core-beta-hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0.35rem 0 0.5rem;
}
.core-beta-hero .section-lede {
  max-width: 32rem;
  margin-top: 0.85rem;
}
@keyframes coreBetaIn {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}
.core-beta-proto {
  margin: 1.5rem 0 2rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(196, 165, 116, 0.2);
  animation: coreBetaIn 0.65s ease 0.08s both;
}
.core-beta-proto-head .micro { margin: 0.25rem 0 0.85rem; opacity: 0.7; }
.proto-thread {
  min-height: 12rem;
  max-height: 22rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 0 1rem;
  scroll-behavior: smooth;
}
.proto-bubble {
  max-width: 92%;
  animation: coreBetaIn 0.35s ease both;
}
.proto-bubble p {
  margin: 0.2rem 0 0;
  line-height: 1.45;
}
.proto-who {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.proto-you { align-self: flex-end; text-align: right; }
.proto-you p { color: var(--gold-bright); }
.proto-jott { align-self: flex-start; }
.proto-prompts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.proto-prompt {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: var(--paper);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 0.35rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.proto-prompt:hover {
  opacity: 1;
  border-color: rgba(196, 165, 116, 0.55);
}
.proto-compose {
  display: grid;
  gap: 0.65rem;
}
.proto-compose textarea {
  width: 100%;
  resize: vertical;
  min-height: 4rem;
  font: inherit;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(196, 165, 116, 0.28);
  border-radius: 0.4rem;
  padding: 0.75rem 0.85rem;
}
.core-beta-feedback {
  margin: 2rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(196, 165, 116, 0.2);
  animation: coreBetaIn 0.7s ease 0.14s both;
}
.fb-types {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}
.fb-type {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(196, 165, 116, 0.45);
  color: var(--paper);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 0.25rem;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.75;
}
.fb-type.is-active {
  opacity: 1;
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: rgba(196, 165, 116, 0.1);
}
.fb-mine {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fb-mine li {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.85;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(196, 165, 116, 0.2);
  border-radius: 2px;
}
.fb-cohort .fb-meta {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 0.2rem;
}
.fb-cohort li.is-mine {
  border-color: rgba(196, 165, 116, 0.45);
  background: rgba(196, 165, 116, 0.06);
  opacity: 1;
}
.fb-mine-tag {
  color: var(--gold-bright, #c4a574);
  text-transform: lowercase;
}
.founder-usage-stats {
  margin: 0.75rem 0 1.25rem;
}
.founder-usage-history {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.founder-usage-history li {
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(196, 165, 116, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
.founder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0 1.25rem;
}
.founder-tab {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: inherit;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  opacity: 0.7;
}
.founder-tab.is-active {
  opacity: 1;
  border-color: var(--gold-bright, #c4a574);
  color: var(--gold-bright, #c4a574);
}
.founder-panel[hidden] {
  display: none !important;
}
.founder-narrative {
  margin: 0.5rem 0 0.75rem;
  padding: 0.85rem 1rem;
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.78rem;
  line-height: 1.45;
  border: 1px solid rgba(196, 165, 116, 0.22);
  background: rgba(0, 0, 0, 0.18);
}
.cohort-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0 1.5rem;
}
.cohort-card {
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(196, 165, 116, 0.2);
  background: rgba(196, 165, 116, 0.04);
}
.cohort-card h4 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.cohort-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  opacity: 0.85;
}
.founder-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 1.25rem;
  border: 1px solid rgba(196, 165, 116, 0.18);
}
.founder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.founder-table th,
.founder-table td {
  padding: 0.4rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid rgba(196, 165, 116, 0.12);
  white-space: nowrap;
}
.founder-table th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 500;
}
.founder-table tr.is-dim {
  opacity: 0.45;
}
.founder-time-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: flex-end;
  margin: 0.5rem 0 1rem;
}
.founder-time-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.founder-time-form input {
  min-width: 7rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: transparent;
  color: inherit;
  font: inherit;
}
.fb-pill {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-right: 0.35rem;
}
.core-beta-more {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196, 165, 116, 0.14);
}
.core-beta-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: 0.35rem 0;
}
.core-beta-more > summary::-webkit-details-marker { display: none; }
.core-beta-more[open] > summary { opacity: 0.85; color: var(--gold-bright); }
.core-beta-more-body .home-block:first-child { border-top: 0; padding-top: 0.5rem; }

/* Vision-board branding + Core expectations + GTM */
.core-login-mark,
.core-hero-mark {
  display: block;
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  margin: 0.15rem 0 0.35rem;
  line-height: 1;
  animation: coreBetaIn 0.5s ease both;
}
.hero-remember {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  color: var(--gold-bright);
  margin: 0.15rem 0 0.65rem;
  letter-spacing: 0.01em;
}
.brand-mantra {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(224, 195, 138, 0.85);
  margin: 1rem 0 0;
  line-height: 1.45;
}
.motto-whisper {
  opacity: 0.55;
  margin-top: 1.25rem;
  max-width: 22rem;
}
.nav-quiet {
  font-size: 0.85rem;
  color: var(--paper) !important;
  opacity: 0.7;
}
.nav-quiet:hover { opacity: 1; }

.core-expect {
  margin: 0 0 1.75rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(196, 165, 116, 0.18);
  animation: coreBetaIn 0.6s ease 0.05s both;
}
.core-expect-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.core-expect-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.core-expect-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

.core-strategy {
  margin: 2.5rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(196, 165, 116, 0.28);
  animation: coreBetaIn 0.75s ease 0.12s both;
}
.core-strategy-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  margin: 0.25rem 0 0.5rem;
  color: var(--ivory);
}
.strategy-eq {
  font-size: 0.95rem;
  color: var(--text-on-dark);
  margin: 0.75rem 0 0;
  max-width: 36rem;
}
.strategy-inspire {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--gold);
  background: rgba(196, 165, 116, 0.06);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ivory);
}
.strategy-inspire-lg {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
}
.strategy-motto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin: 0 0 1.5rem;
}
.strategy-motto span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  opacity: 0.9;
}
.strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .strategy-grid { grid-template-columns: 1fr; }
}
.strategy-panel p {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(243, 235, 224, 0.85);
}
.strategy-path {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-dark);
}
.strategy-pillars,
.strategy-personas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0.5rem 0 1.5rem;
}
.strategy-pillars-wide,
.strategy-personas-wide {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.strategy-pillars article h4,
.strategy-personas article h4,
.strategy-pillars article h3,
.strategy-personas article h3 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 500;
}
.strategy-pillars article p,
.strategy-personas article p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted-on-dark);
}
.strategy-details {
  margin: 0.75rem 0;
  border-top: 1px solid rgba(196, 165, 116, 0.14);
  padding-top: 0.65rem;
}
.strategy-details > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  padding: 0.35rem 0;
  color: var(--paper);
}
.strategy-details > summary::-webkit-details-marker { display: none; }
.strategy-details[open] > summary {
  opacity: 1;
  color: var(--gold-bright);
}
.battle-table {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.75rem 0;
  font-size: 0.82rem;
}
.battle-table-wide { max-width: 720px; margin-left: auto; margin-right: auto; }
.battle-row {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.15fr;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(243, 235, 224, 0.06);
}
.battle-head { opacity: 0.55; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.battle-f { color: var(--text-quiet-on-dark); }
.battle-j { color: var(--gold-bright); }
@media (max-width: 560px) {
  .battle-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .battle-a::before { content: "Apple: "; opacity: 0.5; }
  .battle-j::before { content: "JoTT: "; }
}
.strategy-objections {
  margin: 0.75rem 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.strategy-lang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}
.strategy-lang-wide {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
@media (max-width: 560px) {
  .strategy-lang { grid-template-columns: 1fr; }
}
.strategy-lang ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.strategy-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.strategy-boards-wide {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.strategy-board {
  display: block;
  text-decoration: none !important;
  color: var(--paper);
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.strategy-board:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.strategy-board img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(196, 165, 116, 0.22);
  border-radius: 0.25rem;
  display: block;
  background: rgba(0, 0, 0, 0.35);
}
.strategy-board span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  opacity: 0.7;
  line-height: 1.3;
}
.strategy-downloads {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.strategy-full-link { margin-top: 0.85rem; }

.strategy-roadmap {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}
.strategy-roadmap-wide {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.strategy-roadmap .mono {
  color: var(--gold-bright);
  margin-right: 0.35rem;
}

.core-beta-foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(196, 165, 116, 0.14);
  text-align: center;
}
.core-beta-foot .logo {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.35rem;
}

.strategy-desk {
  max-width: 1100px;
  margin: 0 auto;
}
.strategy-desk-hero {
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) 2.5rem;
  text-align: center;
}
.strategy-desk-mark {
  font-size: clamp(2.8rem, 7vw, 4rem);
  margin: 0.25rem 0;
  display: block;
}
.strategy-desk-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin: 0.25rem 0;
  color: var(--ivory);
}
.strategy-page .tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-bright);
  margin: 0.35rem 0 0.75rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@media (max-width: 560px) {
  .fb-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strategy-boards { grid-template-columns: 1fr; }
}

.ws-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0.85rem 0 0.35rem;
}
.ws-channels, .ws-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ws-channel, .ws-nav-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--paper);
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.35rem;
  cursor: pointer;
  opacity: 0.7;
}
.ws-channel:hover, .ws-nav-btn:hover { opacity: 1; background: rgba(243, 235, 224, 0.05); }
.ws-channel.is-active, .ws-nav-btn.is-active {
  opacity: 1;
  background: rgba(196, 165, 116, 0.12);
  color: var(--gold-bright);
}
.ws-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0;
}
.ws-logout {
  margin-top: auto;
  background: none;
  border: 0;
  color: var(--text-quiet-on-dark);
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0.5rem;
}
.ws-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}
.ws-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ws-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.16);
}
.ws-top h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  margin: 0;
}
.ws-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ws-msg {
  max-width: 42rem;
}
.ws-msg header {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
.ws-msg p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
}
.ws-msg-system { opacity: 0.65; font-style: italic; }
.ws-msg-feedback {
  border-left: 2px solid var(--gold);
  padding-left: 0.75rem;
}
.ws-msg-me { align-self: flex-end; text-align: right; }
.ws-msg-me header { justify-content: flex-end; }
.ws-rx-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.ws-rx, .ws-rx-add {
  appearance: none;
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: rgba(12, 10, 9, 0.4);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.78rem;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}
.ws-rx.is-mine {
  border-color: var(--accent-on-dark);
  color: var(--gold-bright);
}
.ws-composer {
  border-top: 1px solid rgba(196, 165, 116, 0.16);
  padding: 0.65rem 1.25rem 1rem;
  background: rgba(8, 6, 5, 0.4);
}
.ws-emoji-bar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.ws-emoji-bar.is-armed { opacity: 1; }
.ws-emoji-bar button {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.15rem;
}
.ws-composer-row {
  display: flex;
  gap: 0.5rem;
}
.ws-composer-row input {
  flex: 1;
  background: rgba(250, 246, 239, 0.06);
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: var(--paper);
  border-radius: 0.45rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
}
.ws-proto-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem 0;
}
.ws-proto-hints button {
  appearance: none;
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: transparent;
  color: var(--text-on-dark);
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.ws-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 0 1.25rem 2rem;
}
@media (max-width: 860px) {
  .ws { grid-template-columns: 1fr; }
  .ws-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(196, 165, 116, 0.18);
  }
  .ws-dash-grid { grid-template-columns: 1fr; }
}




/* ── Comic / journal narrative ───────────────────────────── */
.comic-journal {
  display: block;
}
.comic-panel {
  padding: clamp(1.75rem, 4.5vh, 3rem) clamp(1.25rem, 4vw, 3rem);
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  animation: comicIn 0.7s ease both;
}
.comic-panel + .comic-panel {
  border-top: 1px solid rgba(196, 165, 116, 0.16);
}
@keyframes comicIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.comic-page-num {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 1rem;
  opacity: 0.85;
}
.comic-panel h1,
.comic-panel h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0.35rem 0 0.85rem;
  color: var(--ivory);
}
.comic-hand {
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  color: var(--gold-bright);
  margin: 0.5rem 0 0.85rem;
  line-height: 1.3;
}
.comic-body {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-on-dark);
  max-width: 34rem;
  margin: 0 auto 0.75rem;
}
.comic-speech {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  color: var(--ivory);
  margin: 1rem auto;
}
.comic-speech-soft { color: var(--gold-bright); }
.comic-question { margin-top: 1.25rem; }
.comic-mark { display: block; font-size: 2.15rem; margin: 0 0 0.5rem; letter-spacing: 0.02em; }
.comic-open { max-width: none; padding: 0; }
.comic-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: min(72vh, 38rem);
  align-items: stretch;
}
.comic-leather {
  background: #050403;
  display: grid;
  place-items: center;
  padding: 1.25rem 1.5rem;
}
.comic-leather-link {
  display: block;
  width: min(92%, 26rem);
  line-height: 0;
  border-radius: 0.2rem;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.comic-leather-link:hover,
.comic-leather-link:focus-visible {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.06);
  outline: none;
}
.comic-leather img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
}
.comic-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 4vw, 3rem);
  background:
    linear-gradient(165deg, rgba(22, 18, 14, 0.95), rgba(12, 10, 9, 0.98));
}
.comic-copy .cta-row { justify-content: flex-start; }
/* Chapter-book paper: aged ivory + light ruled lines + margin rule */
.chapter-paper,
.comic-paper,
.comic-ruled {
  background-color: #efe2cc;
  background-image:
    linear-gradient(
      90deg,
      transparent 2.75rem,
      rgba(176, 110, 96, 0.28) 2.75rem,
      rgba(176, 110, 96, 0.28) calc(2.75rem + 1px),
      transparent calc(2.75rem + 1px)
    ),
    repeating-linear-gradient(
      transparent,
      transparent 1.75rem,
      rgba(130, 105, 70, 0.15) 1.75rem,
      rgba(130, 105, 70, 0.15) calc(1.75rem + 1px)
    ),
    radial-gradient(ellipse 85% 50% at 12% 0%, rgba(160, 120, 70, 0.16), transparent 58%),
    radial-gradient(ellipse 70% 48% at 96% 100%, rgba(120, 85, 50, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(90, 70, 40, 0.05), transparent 70%),
    linear-gradient(180deg, #f4e8d4 0%, #ead9c0 45%, #e0ceb0 100%);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(80, 55, 30, 0.07),
    inset 0 0 48px rgba(120, 90, 50, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.18);
}
.comic-dark-spread {
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(60, 48, 36, 0.4), transparent 70%),
    #0a0807;
}
.handwritten-card {
  max-width: 22rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem 1.35rem 1.25rem;
  background: var(--ivory);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  transform: rotate(-1.2deg);
  border: 1px solid rgba(28, 25, 22, 0.12);
}
.hc-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid rgba(28, 25, 22, 0.2);
  padding-bottom: 0.4rem;
}
.hc-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.55;
  color: #3a322a;
}
.hc-notes li + li { margin-top: 0.2rem; }
.hc-aside {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: #8a6a4a;
  margin: 1rem 0 0;
}
.time-ticks {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--gold-bright);
  margin: 1rem 0 1.25rem;
  opacity: 0.9;
}
.comic-lost {
  background:
    radial-gradient(ellipse 55% 45% at 50% 28%, rgba(72, 52, 36, 0.38), transparent 68%),
    linear-gradient(180deg, #0c0a08 0%, #060504 100%);
}
.lost-subjects {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  color: var(--gold-bright);
  margin: 0.35rem 0 1.35rem;
  letter-spacing: 0.04em;
  animation: lostSubjectsIn 1s 0.15s ease both;
}
.lost-subjects span:nth-child(odd) {
  opacity: 0.95;
}
.lost-subjects span:nth-child(even) {
  opacity: 0.45;
  transform: translateY(-0.1em);
}
.comic-lost-close {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.8vw, 1.4rem);
  color: rgba(243, 235, 224, 0.92);
  margin-top: 0.35rem;
}
.comic-lost .lost-line-1 { animation: comic-fade-up 0.85s 0.08s ease both; }
.comic-lost .lost-line-2 { animation: comic-fade-up 0.9s 0.28s ease both; }
.comic-lost .lost-line-3 { animation: comic-fade-up 1s 0.48s ease both; }
@keyframes lostSubjectsIn {
  from { opacity: 0; letter-spacing: 0.18em; transform: translateY(0.4rem); }
  to { opacity: 1; letter-spacing: 0.04em; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lost-subjects,
  .comic-lost .lost-line-1,
  .comic-lost .lost-line-2,
  .comic-lost .lost-line-3 {
    animation: none;
  }
}
.comic-phone-panel { background: #0e0c0a; }
.comic-phone {
  max-width: 22rem;
  margin: 1.25rem auto 0;
  border: 1px solid rgba(196, 165, 116, 0.35);
  border-radius: 1.1rem;
  overflow: hidden;
  background: #12100d;
  text-align: left;
}
.comic-phone-light { background: #1a1612; }
.comic-phone-bar {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--gold-bright);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.2);
}
.comic-thread { padding: 0.85rem; display: grid; gap: 0.55rem; }
.comic-reconnect {
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(184, 154, 106, 0.18), transparent 65%),
    #11100e;
}
.comic-panel .pricing-grid { margin-top: 1.5rem; text-align: left; }
.comic-panel .pricing-mockup-badge { margin: 0.5rem auto 0; }
.comic-panel .cohort-explain { margin-top: 1.5rem; }
.comic-panel .signup-form,
.comic-panel .signup-modes { margin-left: auto; margin-right: auto; }

/* Home /#pricing — chapter-book plate · Roman V · shaded lens (no lined paper) */
.comic-panel.pricing-chapter {
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 100%;
  background: #080808;
  background-image: none;
  color: #f4ebdd;
  border-block: 1px solid rgba(185, 138, 71, 0.18);
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.pricing-chapter-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pricing-chapter-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pen hero: lockup upper · barrel lower — keep pen in frame under the lens */
  object-position: center 62%;
  display: block;
  filter: saturate(0.55) contrast(1.08) brightness(0.38);
}
.pricing-chapter-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 42% at 50% 22%, rgba(185, 138, 71, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.9) 48%, rgba(8, 8, 8, 0.95) 100%),
    rgba(8, 8, 8, 0.68);
}
.pricing-chapter-copy {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.75rem, 7vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vh, 4rem);
}
.comic-panel.pricing-chapter .chapter-roman-mark {
  margin: 0 0 0.35rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.28em;
  color: #c9a05a;
  text-indent: 0.28em;
}
.comic-panel.pricing-chapter .comic-page-num {
  color: var(--accent-on-dark);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}
.comic-panel.pricing-chapter .chapter-roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05em;
  letter-spacing: 0.22em;
  color: #c9a05a;
}
.comic-panel.pricing-chapter h2 {
  color: #f7f3eb;
  margin: 0 0 0.65rem;
}
.comic-panel.pricing-chapter .comic-body,
.comic-panel.pricing-chapter .pricing-refresh-intro,
.comic-panel.pricing-chapter .pricing-share-line {
  color: var(--text-on-dark);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.comic-panel.pricing-chapter .pricing-refresh-intro {
  font-family: var(--font-ui);
}
.comic-panel.pricing-chapter .pricing-share-line {
  margin-top: 1.35rem !important;
  text-align: center;
}
.comic-panel.pricing-chapter .pricing-family-howto {
  max-width: 36rem;
  margin: 1.75rem auto 0;
  text-align: left;
  padding: 1.1rem 1.15rem 1.2rem;
  border-top: 1px solid rgba(185, 138, 71, 0.28);
}
.comic-panel.pricing-chapter .pricing-family-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  color: var(--accent-on-dark, #c9a05a);
  letter-spacing: 0.02em;
}
.comic-panel.pricing-chapter .pricing-family-lede,
.comic-panel.pricing-chapter .pricing-family-note {
  color: var(--text-on-dark);
  margin: 0 0 0.85rem;
}
.comic-panel.pricing-chapter .pricing-family-note {
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-size: 0.95rem;
  opacity: 0.92;
}
.comic-panel.pricing-chapter .pricing-family-steps {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-on-dark);
  font-family: var(--font-body, var(--font-serif));
  font-size: 1rem;
  line-height: 1.55;
}
.comic-panel.pricing-chapter .pricing-family-steps li {
  margin: 0.4rem 0;
}
.comic-panel.pricing-chapter .pricing-family-howto a {
  color: var(--accent-on-dark, #c9a05a);
  text-underline-offset: 0.15em;
}
.comic-panel.pricing-chapter .pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.comic-panel.pricing-chapter .pricing-card {
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(185, 138, 71, 0.28);
  color: #f4ebdd;
  backdrop-filter: blur(2px);
}
.comic-panel.pricing-chapter .pricing-card-featured {
  background: rgba(18, 16, 12, 0.72);
  border-color: rgba(201, 160, 90, 0.55);
}
.comic-panel.pricing-chapter .pricing-card h3 {
  color: #c9a05a;
}
.comic-panel.pricing-chapter .pricing-price {
  color: #f4ebdd;
}
.comic-panel.pricing-chapter .pricing-price span,
.comic-panel.pricing-chapter .pricing-period {
  color: #c9a05a;
  opacity: 1;
}
.comic-panel.pricing-chapter .pricing-chapter-cta {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
@media (max-width: 700px) {
  .comic-panel.pricing-chapter .pricing-grid {
    grid-template-columns: 1fr;
  }
  .comic-panel.pricing-chapter .chapter-roman-mark {
    font-size: clamp(2.4rem, 14vw, 3.25rem);
  }
}

/* Home /#faq — chapter-book plate · Roman VIII · no lined journal-page · Sep 25 type */
.comic-panel.faq-chapter {
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 100%;
  background: #11100e;
  background-image:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(185, 138, 71, 0.12), transparent 62%);
  color: #f4ebdd;
  border-block: 1px solid rgba(185, 138, 71, 0.2);
  box-shadow: none;
  text-align: center;
  padding: 0;
}
.faq-chapter-copy {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1.25rem, 4vw, 2.25rem);
}
.comic-panel.faq-chapter .chapter-roman-mark {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--accent-on-dark);
  text-indent: 0.22em;
}
.comic-panel.faq-chapter .comic-page-num {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--accent-on-dark);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  opacity: 1;
}
.comic-panel.faq-chapter .chapter-roman {
  font-family: var(--font-display);
  font-size: 1.05em;
  letter-spacing: 0.22em;
  color: #c9a05a;
}
/* UI sans kicker — never Caveat / paper-journal hand */
.comic-panel.faq-chapter .faq-chapter-kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(185, 138, 71, 0.92);
}
.comic-panel.faq-chapter h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: #f4ebdd;
  margin: 0 0 0.65rem;
}
.comic-panel.faq-chapter .faq-intro {
  font-family: var(--font-body);
  color: var(--text-on-dark);
  max-width: 32rem;
  margin: 0 auto 1.35rem;
}
.comic-panel.faq-chapter .faq-group {
  text-align: left;
  margin-top: 0.5rem;
}
.comic-panel.faq-chapter .faq-group details {
  border-bottom: 1px solid rgba(185, 138, 71, 0.22);
  background: transparent;
  padding: 0.95rem 0;
}
.comic-panel.faq-chapter .faq-group details summary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: #f4ebdd;
}
.comic-panel.faq-chapter .faq-group details summary::before {
  font-family: var(--font-ui);
  color: var(--accent-on-dark);
}
.comic-panel.faq-chapter .faq-group details p {
  font-family: var(--font-body);
  color: var(--text-muted-on-dark);
  margin-left: 1.55rem;
}
.comic-panel.faq-chapter .faq-group details a {
  color: var(--accent-on-dark);
}
.comic-panel.faq-chapter .faq-chapter-cta {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.75rem;
}
/* Dark-chapter CTAs — never journal-light ink ghost */
.comic-panel.faq-chapter .btn-ghost,
.comic-panel.pricing-chapter .btn-ghost {
  color: var(--accent-on-dark) !important;
  border-color: rgba(185, 138, 71, 0.85);
  background: transparent;
}
.comic-panel.faq-chapter .btn-gold,
.comic-panel.pricing-chapter .btn-gold {
  font-family: var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .comic-panel.faq-chapter .chapter-roman-mark {
    font-size: clamp(2.1rem, 12vw, 2.85rem);
  }
  .comic-panel.faq-chapter .faq-group details summary {
    font-size: 1.08rem;
  }
  .comic-panel.faq-chapter .faq-group details p {
    margin-left: 1.35rem;
    font-size: 0.98rem;
  }
}

@media (max-width: 800px) {
  .comic-spread { grid-template-columns: 1fr; min-height: auto; }
  .comic-leather { min-height: 14rem; padding: 1.1rem 1.25rem; }
  .comic-leather-link { width: min(78%, 18rem); }
  .comic-leather img { width: 100%; }
  .comic-copy { align-items: center; text-align: center; }
  .comic-copy .cta-row { justify-content: center; }
}

/* Console as open journal */
.core-beta-page.journal-console .core-beta-main {
  max-width: 38rem;
}
.console-chapter {
  margin: 0 0 2rem;
  padding: 1.25rem 0 1.75rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.18);
}
.console-chapter-num {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 0.5rem;
}
.core-beta-foot-quiet {
  text-align: center;
  padding: 2rem 0 1rem;
  opacity: 0.55;
}
.core-beta-foot-quiet .logo { font-size: 1.6rem; margin: 0; }

/* ── Black leather journal read (approved #11100E) ─────────── */
.journal-black {
  background: transparent;
  color: var(--text-on-dark);
}
.journal-black .atmosphere {
  background: transparent;
}
.journal-black .site-header {
  background: rgba(8, 6, 5, 0.55);
  backdrop-filter: blur(14px) saturate(0.6);
  -webkit-backdrop-filter: blur(14px) saturate(0.6);
  border-bottom-color: rgba(185, 138, 71, 0.12);
}
.journal-black .comic-page-num,
.journal-black .console-chapter-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-on-dark);
  font-size: 0.85rem;
  /* Prefer Roman chapter labels in markup (I · II · III) — not Arabic */
}
.journal-black .comic-panel h1,
.journal-black .comic-panel h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
}
.journal-black .comic-lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  color: var(--text-muted-on-dark);
  margin: 0.35rem 0 0.7rem;
  letter-spacing: 0.02em;
}
.journal-black .comic-body {
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--text-on-dark);
}
.journal-black .comic-hand { display: none; } /* prefer comic-lead */

.comic-open.comic-black {
  position: relative;
  max-width: none;
  padding: 0;
  overflow: hidden;
}
.comic-hero-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.comic-hero-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(0.35) contrast(1.08) brightness(0.55);
}
.comic-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.75) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.85) 100%);
}
.comic-spread-overlay {
  position: relative;
  z-index: 1;
  background: transparent;
}
.journal-black .comic-leather {
  background: transparent;
}
.journal-black .comic-copy {
  background: transparent;
}
.journal-black .comic-panel + .comic-panel {
  border-top-color: rgba(255, 255, 255, 0.07);
}
.journal-black .comic-paper,
.journal-black .comic-ruled,
.journal-black .chapter-paper {
  background-color: #efe2cc;
  background-image:
    linear-gradient(
      90deg,
      transparent 2.75rem,
      rgba(176, 110, 96, 0.26) 2.75rem,
      rgba(176, 110, 96, 0.26) calc(2.75rem + 1px),
      transparent calc(2.75rem + 1px)
    ),
    repeating-linear-gradient(
      transparent,
      transparent 1.75rem,
      rgba(130, 105, 70, 0.14) 1.75rem,
      rgba(130, 105, 70, 0.14) calc(1.75rem + 1px)
    ),
    radial-gradient(ellipse 85% 50% at 12% 0%, rgba(160, 120, 70, 0.14), transparent 58%),
    radial-gradient(ellipse 70% 48% at 96% 100%, rgba(120, 85, 50, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(90, 70, 40, 0.045), transparent 70%),
    linear-gradient(180deg, #f4e8d4 0%, #ead9c0 45%, #e0ceb0 100%);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(80, 55, 30, 0.06),
    inset 0 0 40px rgba(120, 90, 50, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.journal-black .comic-paper h1,
.journal-black .comic-paper h2,
.journal-black .comic-ruled h1,
.journal-black .comic-ruled h2,
.journal-black .chapter-paper h1,
.journal-black .chapter-paper h2 {
  color: var(--ink);
}
.journal-black .comic-paper .comic-body,
.journal-black .comic-paper .comic-lead,
.journal-black .comic-ruled .comic-body,
.journal-black .chapter-paper .comic-body {
  color: var(--graphite-ink);
}
.journal-black .comic-paper .comic-page-num,
.journal-black .comic-ruled .comic-page-num,
.journal-black .chapter-paper .comic-page-num,
.comic-paper.home-chapter .comic-page-num {
  color: var(--gold-ink-on-paper);
}
.journal-black .comic-paper a,
.journal-black .comic-ruled a,
.journal-black .chapter-paper a {
  color: var(--gold-ink-on-paper);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.journal-black .comic-dark-spread,
.journal-black .comic-phone-panel,
.journal-black .comic-reconnect,
.journal-black .comic-founder {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(14px) saturate(0.5);
  -webkit-backdrop-filter: blur(14px) saturate(0.5);
}
.journal-black .comic-black {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px) saturate(0.5);
  -webkit-backdrop-filter: blur(12px) saturate(0.5);
}

.comic-papers-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 52rem;
  margin: 1.5rem auto 0;
  text-align: left;
}
.comic-papers-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.comic-papers-shot img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.25) contrast(1.05) brightness(0.85);
}
.handwritten-card-dark {
  background: #111;
  color: #e8e4dc;
  border: 1px solid rgba(196, 181, 154, 0.35);
  box-shadow: none;
  transform: none;
}
.handwritten-card-dark .hc-name {
  color: #f2efe8;
  border-bottom-color: rgba(196, 181, 154, 0.35);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}
.handwritten-card-dark .hc-notes {
  font-family: "Caveat", cursive;
  color: #d4cfc4;
}
.handwritten-card-dark .hc-aside {
  color: #a89880;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
}

.journal-black .comic-phone {
  background: rgba(10, 10, 10, 0.72);
  border-color: rgba(255,255,255,0.12);
  border-radius: 0.35rem;
}
.journal-black .pricing-card {
  background: rgba(10, 10, 10, 0.7);
  border-color: rgba(255,255,255,0.12);
}
.journal-black .pricing-card-featured {
  background: #12100c;
  border-color: rgba(196, 181, 154, 0.55);
}
.journal-black .beta-tag {
  background: #c4b59a;
  color: #000;
}

.journal-console.journal-black .core-beta-main {
  color: #e8e4dc;
}
.journal-console.journal-black .console-chapter {
  border-bottom-color: rgba(185, 138, 71, 0.22);
}

/* Console closer to leather / gold brochure (P2 polish) */
.journal-console.journal-black {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(185, 138, 71, 0.12), transparent 55%),
    linear-gradient(180deg, #16130f 0%, var(--leather) 40%, #0c0b09 100%);
}
.journal-console.journal-black .atmosphere {
  opacity: 0.55;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(244, 235, 221, 0.04), transparent 45%),
    radial-gradient(ellipse at 80% 100%, rgba(185, 138, 71, 0.06), transparent 40%);
}
.journal-console.journal-black .core-beta-main {
  border-top: 1px solid rgba(185, 138, 71, 0.18);
}
.journal-console.journal-black .ws-login-main,
.journal-console.journal-black .console-chapter {
  background: linear-gradient(180deg, rgba(244, 235, 221, 0.03), transparent 40%);
}
.journal-console.journal-black .btn-gold {
  box-shadow: 0 0 0 1px rgba(185, 138, 71, 0.35);
}
.journal-console.journal-black .natural-compose textarea,
.journal-console.journal-black .natural-compose input[type="search"],
.journal-console.journal-black .natural-compose input[type="text"],
.journal-console.journal-black .ws-login-form input {
  border-color: rgba(185, 138, 71, 0.35);
  background: rgba(17, 16, 14, 0.85);
  color: var(--ivory);
}
.journal-console.journal-black .ws-section-label,
.journal-console.journal-black .comic-page-num {
  color: var(--accent-on-dark);
}

@media (max-width: 800px) {
  .comic-papers-layout { grid-template-columns: 1fr; }
  .comic-spread-overlay { grid-template-columns: 1fr; }
  .comic-hero-plane { min-height: 100%; }
  .comic-open.comic-black .comic-spread { min-height: min(72vh, 36rem); }
}

/* Full-bleed branded storyboards in the journal */
.comic-board-full {
  max-width: 56rem;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}
.comic-board-frame {
  margin: 1.25rem 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  background: #000;
}
.comic-board-frame img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
  filter: contrast(1.04) brightness(0.92);
}
.journal-black .comic-board-frame {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}

/* Photo chapters — Meet + card-back campaign */
.comic-photo-chapter {
  max-width: 52rem;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(60, 48, 36, 0.35), transparent 60%),
    #11100e;
}
.comic-photo-frame {
  margin: 1.35rem auto 0;
  max-width: 44rem;
  overflow: hidden;
  border: 1px solid rgba(235, 230, 220, 0.12);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.5);
  animation: comic-photo-rise 0.9s ease-out both;
}
.comic-photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: contrast(1.03) saturate(0.92);
}
.comic-photo-frame-card {
  max-width: 36rem;
}
.comic-card-campaign {
  text-align: center;
}
.comic-card-campaign .comic-body {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.comic-campaign-line {
  margin-top: 1.5rem;
  font-style: italic;
  opacity: 0.92;
  animation: comic-fade-up 1s 0.25s ease-out both;
}
.comic-campaign-mark {
  display: block;
  margin: 0.35rem 0 0.15rem;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  animation: comic-fade-up 1s 0.4s ease-out both;
}
@keyframes comic-photo-rise {
  from { opacity: 0; transform: translateY(1.1rem); }
  to { opacity: 1; transform: none; }
}
@keyframes comic-fade-up {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .comic-photo-frame,
  .comic-campaign-line,
  .comic-campaign-mark {
    animation: none;
  }
}


/* Console — skills / timeline / reminders */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.skill-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  padding: 0.9rem 1rem;
  background: rgba(235, 230, 220, 0.04);
  border: 1px solid rgba(184, 154, 106, 0.28);
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.skill-card:hover,
.skill-card:focus-visible {
  border-color: var(--gold-bright);
  background: rgba(184, 154, 106, 0.1);
  outline: none;
}
.skill-card strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-bright);
}
.skill-card span {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.85;
}
.jott-timeline,
.jott-reminders {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.jott-timeline li,
.jott-reminders li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(235, 230, 220, 0.1);
  text-align: left;
}
.jott-timeline time,
.reminder-due {
  font-size: 0.75rem;
  color: var(--accent-on-dark);
  opacity: 0.9;
}
.jott-timeline strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.jott-timeline p,
.jott-reminders p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.reminder-status {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  grid-column: 2;
}
.jott-reminders li {
  grid-template-columns: 7.5rem 1fr;
}
.jott-reminders li p {
  grid-column: 1 / -1;
}
.reminder-compose {
  align-items: stretch;
}
.reminder-compose input[type="date"] {
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(185, 138, 71, 0.35);
  background: rgba(17, 16, 14, 0.55);
  color: var(--ivory, #f4ebdd);
  font: inherit;
}
.reminder-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.85rem 0 0.35rem;
}
.reminder-filter {
  appearance: none;
  border: 1px solid rgba(185, 138, 71, 0.35);
  background: transparent;
  color: var(--text-muted-on-dark);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.3rem;
  cursor: pointer;
  min-height: 2.4rem;
}
.reminder-filter.is-active {
  border-color: var(--accent-on-dark);
  color: var(--accent-on-dark);
  background: rgba(185, 138, 71, 0.12);
}
.reminder-row.is-overdue .reminder-status {
  color: #e8a070;
}
.reminder-row.is-done {
  opacity: 0.72;
}
.reminder-row .reminder-done {
  grid-column: 2;
  justify-self: start;
}
#reminderSummary {
  margin: 0.35rem 0 0;
  opacity: 0.8;
}
.timeline-empty {
  grid-template-columns: 1fr !important;
  border: none !important;
}
.product-skill-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  text-align: left;
}
.product-skill-row article {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(28, 25, 22, 0.15);
}
.journal-black .product-skill-row article {
  border-top-color: rgba(235, 230, 220, 0.12);
}
.product-skill-row h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
}
.product-skill-row p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.88;
}
.product-loop-line {
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--gold-bright);
  margin: 0.75rem 0 0;
}

/* Join — beta expectations */
.beta-expect {
  max-width: 28rem;
  margin: 1.35rem auto 1.5rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  border: 1px solid rgba(184, 154, 106, 0.35);
  background: rgba(235, 230, 220, 0.04);
}
.beta-expect-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.65rem;
  color: var(--gold-bright);
}
.beta-expect-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.beta-expect-list a { color: var(--gold-bright); }
.beta-expect-note {
  margin: 0.85rem 0 0;
  opacity: 0.8;
}

.legal-line {
  margin-top: 0.65rem;
  opacity: 0.75;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.core-beta-foot-quiet .legal-line {
  margin-top: 0.5rem;
  text-align: center;
}

/* ── jott support bot widget ───────────────────────────────── */
#jottSupportRoot {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  font-family: "DM Sans", system-ui, sans-serif;
}
.jott-support-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(196, 165, 116, 0.55);
  border-radius: 0;
  background: rgba(18, 16, 14, 0.92);
  color: var(--gold-bright, #c4a574);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  letter-spacing: 0.08em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  box-shadow: none;
}
.jott-support-fab-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  flex-shrink: 0;
}
.jott-support-fab:hover {
  border-color: var(--gold-bright, #c4a574);
}
.jott-support-panel {
  position: absolute;
  right: 0;
  bottom: 3.25rem;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(28rem, 70vh);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: rgba(14, 12, 10, 0.97);
  color: var(--text-on-dark);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.jott-support-panel[hidden] {
  display: none !important;
}
.jott-support-head {
  position: relative;
  padding: 0.85rem 2.25rem 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(196, 165, 116, 0.18);
}
.jott-support-name {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gold-bright, #c4a574);
}
.jott-support-sub {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  opacity: 0.7;
}
.jott-support-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.jott-support-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem 0;
}
.jott-support-chip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: transparent;
  color: inherit;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  opacity: 0.85;
}
.jott-support-chip:hover {
  opacity: 1;
  border-color: var(--gold-bright, #c4a574);
}
.jott-support-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 10rem;
}
.jott-support-bubble {
  max-width: 95%;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(196, 165, 116, 0.16);
}
.jott-support-bubble p {
  margin: 0;
}
.jott-support-you {
  align-self: flex-end;
  background: rgba(196, 165, 116, 0.12);
}
.jott-support-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
}
.jott-support-links {
  margin-top: 0.45rem !important;
  font-size: 0.72rem;
}
.jott-support-links a {
  color: var(--gold-bright, #c4a574);
}
.jott-support-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid rgba(196, 165, 116, 0.18);
}
.jott-support-form input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(196, 165, 116, 0.28);
  color: inherit;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
}
.jott-support-form .btn {
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
}
.jott-support-foot {
  margin: 0;
  padding: 0 0.75rem 0.65rem;
  opacity: 0.65;
}
@media (max-width: 520px) {
  #jottSupportRoot {
    right: 0.65rem;
    bottom: 0.65rem;
  }
  .jott-support-panel {
    width: min(22rem, calc(100vw - 1.3rem));
  }
}

.ops-univrs-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  align-items: center;
}
#opsCursorPrompt {
  margin: 0.35rem 0 1rem;
  white-space: pre-wrap;
  opacity: 0.8;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Membership transaction page (/subscribe/hosted · /subscribe/success) */
.subscribe-page .subscribe-band {
  max-width: 40rem;
  text-align: center;
}
.subscribe-page .eyebrow {
  font-family: var(--font-ui, "DM Sans", sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 0.75rem;
}
.subscribe-page h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 550;
  font-size: clamp(1.85rem, 4.5vw, 2.55rem);
  line-height: 1.15;
  margin: 0 0 0.85rem;
  color: var(--ink, #f4ebdd);
}
.subscribe-page .section-lede {
  max-width: 32rem;
  margin: 0 auto 1.5rem;
  opacity: 0.9;
}
.subscribe-defer {
  margin: 0 auto 1.75rem;
  max-width: 32rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid rgba(185, 138, 71, 0.35);
  background:
    linear-gradient(165deg, rgba(185, 138, 71, 0.12), transparent 55%),
    rgba(12, 10, 8, 0.55);
  text-align: left;
  animation: subscribeRise 0.7s ease both;
}
.subscribe-defer h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  color: var(--accent-on-dark);
}
.subscribe-defer p {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.subscribe-defer .micro {
  margin: 0;
  opacity: 0.85;
}
.subscribe-plan-grid {
  display: grid;
  gap: 0.75rem;
  margin: 0 auto 1.5rem;
  max-width: 36rem;
  text-align: left;
}
@media (min-width: 640px) {
  .subscribe-plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.subscribe-plan-card {
  padding: 1rem 1rem 1.1rem;
  border: 1px solid rgba(185, 138, 71, 0.22);
  background: rgba(8, 7, 6, 0.45);
  animation: subscribeRise 0.75s ease both;
}
.subscribe-plan-card:nth-child(2) { animation-delay: 0.08s; }
.subscribe-plan-card:nth-child(3) { animation-delay: 0.16s; }
.subscribe-plan-card-featured {
  border-color: rgba(185, 138, 71, 0.55);
  background:
    linear-gradient(180deg, rgba(185, 138, 71, 0.14), transparent 60%),
    rgba(8, 7, 6, 0.55);
}
.subscribe-plan-pick {
  font-family: var(--font-ui, "DM Sans", sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 0.35rem;
}
.subscribe-plan-card h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 0.45rem;
  color: var(--ink, #f4ebdd);
}
.subscribe-plan-price {
  margin: 0.2rem 0 0.35rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.15rem);
  font-weight: 500;
  line-height: 1.1;
  color: #f4ebdd;
}
.subscribe-plan-price .subscribe-plan-period {
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 0.12rem;
  color: #c9a05a;
  opacity: 1;
}
.subscribe-plan-jotts {
  font-family: var(--font-ui, "DM Sans", sans-serif);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--text-on-dark);
}
.subscribe-plan-jotts span {
  font-size: 0.9em;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.8;
  margin-left: 0.15rem;
}
.subscribe-summary {
  margin: 0 auto 1.5rem;
  max-width: 22rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(185, 138, 71, 0.35);
  background: rgba(8, 7, 6, 0.5);
  animation: subscribeRise 0.7s ease both;
}
.subscribe-summary h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}
.subscribe-note {
  max-width: 32rem;
  margin: 0 auto 0.55rem;
  opacity: 0.82;
}
.subscribe-cta {
  margin-top: 1.75rem;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.subscribe-success-page .tagline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  margin: 1.25rem 0 0.35rem;
  color: var(--accent-on-dark);
}
@keyframes subscribeRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Cancel survey */
.cancel-band {
  max-width: 28rem;
}
.cancel-form fieldset.cancel-q {
  border: 0;
  margin: 1.25rem 0 0;
  padding: 0;
}
.cancel-form legend {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}
.cancel-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cancel-option {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(196, 165, 116, 0.22);
  cursor: pointer;
  font-size: 0.9rem;
}
.cancel-option:has(input:checked) {
  border-color: var(--gold-bright, #c4a574);
  background: rgba(196, 165, 116, 0.08);
}
.cancel-option input {
  margin-top: 0.2rem;
}
.cancel-done {
  margin: 1.5rem 0;
  display: grid;
  gap: 0.75rem;
}
.cancel-done .btn {
  justify-self: start;
}

/* ── Mrs. Coy marketing reel ─────────────────────────── */
.reel-page .reel-hero {
  position: relative;
  min-height: min(72vh, 36rem);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.reel-hero-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.reel-hero-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.reel-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 14, 12, 0.35) 0%, rgba(18, 14, 12, 0.55) 45%, rgba(18, 14, 12, 0.92) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(196, 165, 116, 0.18), transparent 55%);
}
.reel-hero-copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3rem) clamp(1.75rem, 4.5vw, 2.75rem);
  max-width: 40rem;
}
.reel-hero-copy .logo {
  font-size: clamp(2.6rem, 8vw, 4rem);
  margin: 0 0 0.65rem;
  color: var(--text-on-dark);
}
.reel-hero-copy h1 {
  font-family: "Cormorant Garamond", "Source Serif 4", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.15rem);
  line-height: 1.12;
  color: var(--text-on-dark);
  margin: 0 0 0.85rem;
  letter-spacing: -0.02em;
}
.reel-lede {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--text-muted-on-dark);
  max-width: 28rem;
  margin: 0 0 1.35rem;
}
.reel-watch {
  text-align: center;
}
.reel-player {
  margin: 1.5rem auto 0;
  max-width: 420px;
  width: min(100%, 92vw);
  border: 1px solid rgba(196, 165, 116, 0.28);
  background: #12100e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.reel-player-inline {
  margin-top: 1.75rem;
}
.reel-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #11100e;
  vertical-align: middle;
}
.reel-quote {
  margin: 1.75rem auto 0;
  max-width: 34rem;
  text-align: left;
  padding: 1.15rem 1.25rem;
  border-left: 2px solid rgba(196, 165, 116, 0.55);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.02rem;
  color: inherit;
  opacity: 0.92;
}
.reel-quote .reel-reply {
  margin: 0.85rem 0 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.reel-point {
  text-align: center;
}
.reel-point .section-lede {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  .reel-page .reel-hero { min-height: min(68vh, 32rem); }
  .reel-hero-copy h1 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
}

/* ——— Natural UI: elderly + older kids (simplicity-first) ——— */
.natural-ui {
  --natural-type: 1.125rem;
  --natural-lead: 1.65;
  --natural-gap: 1.35rem;
  font-size: var(--natural-type);
  line-height: var(--natural-lead);
}

.natural-ui .natural-nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
}

.natural-ui .natural-nav .nav-quiet {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.35rem 0.15rem;
  border-bottom: 2px solid transparent;
}

.natural-ui .natural-nav .nav-quiet:hover,
.natural-ui .natural-nav .nav-quiet:focus-visible {
  border-bottom-color: rgba(196, 181, 154, 0.85);
  outline: none;
}

.natural-ui .natural-lede,
.natural-ui .section-lede {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.55;
  max-width: 36rem;
}

.natural-ui .natural-start-hint {
  margin-top: 1.25rem;
}

.natural-ui .natural-start-hint .btn {
  font-size: 1.15rem;
  padding: 0.95rem 1.75rem;
}

.natural-ui .ws-section-label,
.natural-ui h1,
.natural-ui h2 {
  letter-spacing: 0.01em;
}

.natural-ui .natural-steps {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: var(--natural-gap);
  max-width: 36rem;
}

.natural-ui .natural-steps li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 1.12rem;
  line-height: 1.5;
}

.natural-ui .natural-steps .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(196, 181, 154, 0.2);
  border: 1px solid rgba(196, 181, 154, 0.55);
  color: #e8e4dc;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.natural-ui .natural-compose {
  gap: 0.85rem;
  align-items: stretch;
}

.natural-ui .natural-compose textarea,
.natural-ui .natural-compose input[type="search"],
.natural-ui .natural-compose input[type="text"],
.natural-ui .natural-compose input[type="date"],
.natural-ui .ws-login-form input {
  font-size: 1.15rem;
  line-height: 1.5;
  padding: 0.95rem 1.05rem;
  min-height: 3rem;
}

.natural-ui .natural-compose textarea {
  min-height: 5.5rem;
}

.natural-ui .natural-compose .btn-lg,
.natural-ui .btn-lg {
  font-size: 1.12rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
}

.natural-ui .example-ask {
  font-size: 1.05rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding: 0.2rem 0.1rem;
}

.natural-ui .example-ask:focus-visible {
  outline: 2px solid rgba(196, 181, 154, 0.9);
  outline-offset: 3px;
}

.natural-ui .proto-thread {
  font-size: 1.08rem;
  line-height: 1.55;
}

.natural-ui .jott-reminders li,
.natural-ui .jott-timeline li {
  font-size: 1.08rem;
  line-height: 1.5;
  padding: 0.85rem 0;
}

.natural-ui .natural-people button,
.natural-ui .jott-reminders button {
  font-size: 1.08rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
}

.natural-ui .fb-types {
  gap: 0.65rem;
}

.natural-ui .fb-type {
  font-size: 1.05rem;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
}

.natural-ui .natural-more > summary {
  cursor: pointer;
  font-size: 1.15rem;
  padding: 0.85rem 0;
  list-style: none;
}

.natural-ui .natural-more > summary::-webkit-details-marker {
  display: none;
}

.natural-ui .natural-more > summary::before {
  content: "▸ ";
  color: #c4b59a;
}

.natural-ui .natural-more[open] > summary::before {
  content: "▾ ";
}

.natural-ui .core-beta-hero {
  padding-bottom: 1.75rem;
}

.natural-ui .console-chapter {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

@media (max-width: 720px) {
  .natural-ui {
    --natural-type: 1.1rem;
  }

  .natural-ui .natural-nav nav {
    gap: 0.45rem 0.85rem;
  }

  .natural-ui .natural-nav .nav-quiet {
    font-size: 1rem;
  }

  .natural-ui .natural-compose {
    flex-direction: column;
  }

  .natural-ui .natural-compose .btn-lg {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .natural-ui * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Private beta legal gate */
.legal-check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
  font-size: 1rem;
  line-height: 1.45;
  margin: 0.75rem 0 1rem;
}
.legal-check input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: #c4b59a;
}
.legal-gate-main {
  max-width: 28rem;
}
.confidential-banner {
  color: #c4b59a;
  border: 1px solid rgba(196, 181, 154, 0.35);
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  max-width: 40rem;
}

/* ── Onboarding / promote flow ─────────────────────────── */
.flow-page .flow-hero {
  /* Match home first-plate density — leave room for next content peek */
  min-height: min(88vh, 44rem);
  min-height: min(88dvh, 44rem);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: end;
  gap: 0;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.flow-page .flow-hero.is-in,
.flow-page .flow-hero-compact {
  opacity: 1;
  transform: none;
}
.flow-hero-compact { min-height: min(58vh, 30rem); }
.flow-hero-dual {
  grid-template-columns: minmax(18rem, 0.92fr) minmax(20rem, 1.18fr);
  align-items: stretch;
  background: rgba(5, 5, 5, 0.28);
}
.flow-hero-pane {
  position: relative;
  min-height: inherit;
  overflow: hidden;
}
.flow-hero-pane-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flow-hero-pane-book .flow-hero-pane-img {
  object-position: center 45%;
  filter: saturate(0.95) contrast(1.06) brightness(0.78);
}
.flow-hero-pane-book::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.35) 0%, rgba(5, 5, 5, 0.2) 40%, rgba(5, 5, 5, 0.82) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.55) 0%, transparent 55%);
  pointer-events: none;
}
.flow-hero-pane-start {
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flow-hero-pane-start::after {
  display: none;
}
.flow-hero-start-art {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(1.25rem, 4vh, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
}
.flow-hero-pane-start .flow-hero-pane-img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: min(88vh, 42rem);
  object-fit: contain;
  object-position: center center;
  filter: none;
}
.flow-hero-qr-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
  width: min(46%, 13rem);
  aspect-ratio: 1;
  z-index: 3;
  border-radius: 0.65rem;
}
.flow-hero-qr-hit:focus-visible {
  outline: 2px solid var(--gold-bright, #c9a66b);
  outline-offset: 4px;
}
.flow-hero-pane-photos .flow-hero-pane-img {
  object-position: center 42%;
  filter: saturate(0.96) contrast(1.05) brightness(0.88);
  animation: flowHeroPhotosIn 1.1s ease both;
}
.flow-hero-pane-photos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.55) 0%, transparent 28%);
  pointer-events: none;
}
@keyframes flowHeroPhotosIn {
  from { transform: scale(1.04); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }
}
.flow-hero-dual .flow-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 28rem;
  margin-top: auto;
  padding: clamp(5rem, 12vh, 8rem) clamp(1.35rem, 4vw, 3rem) clamp(2.5rem, 7vh, 4.5rem);
}
.flow-hero-copy {
  padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 8vh, 5rem);
  position: relative;
  z-index: 2;
  max-width: 34rem;
}
.flow-brand {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 1rem;
}
.flow-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1.02;
  margin: 0 0 0.75rem;
  color: var(--paper);
}
.flow-lede {
  font-size: 1.2rem;
  color: var(--text-muted-on-dark);
  margin: 0 0 1.75rem;
  max-width: 22rem;
}
.flow-hero-visual {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: 1;
}
.flow-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.05);
}
.flow-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,10,9,0.92) 0%, rgba(12,10,9,0.35) 42%, transparent 70%);
  pointer-events: none;
}
.flow-section {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 40rem;
}
.flow-open {
  padding-top: clamp(3.5rem, 11vh, 6rem);
  padding-bottom: 1.75rem;
}
.flow-open h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.1;
  margin: 0.35rem 0 1rem;
  color: var(--paper);
}
.flow-open .flow-support + .flow-support {
  margin-top: 0.65rem;
}
.flow-kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 0.5rem;
}
.flow-section h2,
.flow-step-copy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  margin: 0 0 0.65rem;
  color: var(--paper);
}
.flow-support { color: var(--text-muted-on-dark); margin: 0; }
.flow-step {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.flow-step.is-in { opacity: 1; transform: none; }
.flow-step-alt { grid-template-columns: 1fr 1.15fr; }
.flow-step-alt .flow-step-media { order: 2; }
.flow-step-alt .flow-step-copy { order: 1; }
.flow-step-media {
  margin: 0;
  min-height: clamp(16rem, 42vh, 28rem);
  overflow: hidden;
}
.flow-step-media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  min-height: clamp(14rem, 38vh, 26rem);
}
.flow-step-media-pair img {
  min-height: clamp(14rem, 38vh, 26rem);
  border-radius: 0;
}
.flow-step-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}
.flow-num {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 0.5rem;
}
.flow-step-copy p { color: var(--text-on-dark); }
.flow-script {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--gold-bright);
  margin: 1rem 0;
}
.flow-bubble {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  background: rgba(235, 230, 220, 0.06);
  border-left: 2px solid rgba(184, 154, 106, 0.55);
  padding: 0.9rem 1rem;
  margin: 0.75rem 0 1rem;
  color: var(--paper);
  overflow-x: auto;
}
.flow-pay {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: var(--font-ui);
  color: var(--paper);
}
.flow-pay li::before {
  content: "· ";
  color: var(--accent-on-dark);
}
.flow-close { padding-bottom: 5rem; }
.promote-main {
  padding: 0 clamp(1.5rem, 5vw, 4rem) 4rem;
  max-width: 40rem;
}
.promote-block { margin-bottom: 2.5rem; }
.promote-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.65rem;
  margin: 0 0 0.75rem;
}
@media (max-width: 860px) {
  .flow-page .flow-hero,
  .flow-step,
  .flow-step-alt {
    grid-template-columns: 1fr;
  }
  .flow-step-media-pair {
    grid-template-columns: 1fr;
  }
  .flow-hero-dual {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .flow-hero-pane-photos {
    order: -1;
    min-height: 46vh;
  }
  .flow-hero-pane-book,
  .flow-hero-pane-start {
    min-height: auto;
  }
  .flow-hero-pane-start .flow-hero-pane-img {
    max-height: min(78vh, 34rem);
  }
  .flow-hero-qr-hit {
    width: min(52%, 12rem);
  }
  .flow-hero-pane-photos::after {
    background: linear-gradient(180deg, transparent 35%, rgba(5, 5, 5, 0.9) 100%);
  }
  .flow-hero-visual {
    position: relative;
    inset: auto;
    height: 48vh;
    order: -1;
  }
  .flow-hero-visual::after {
    background: linear-gradient(180deg, transparent 30%, rgba(12,10,9,0.95) 100%);
  }
  .flow-step-alt .flow-step-media,
  .flow-step-alt .flow-step-copy { order: initial; }
  .flow-hero-copy,
  .flow-hero-dual .flow-hero-copy { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-hero-pane-photos .flow-hero-pane-img { animation: none !important; }
}

/* ── Short product demo (save → recall → correct → reconnect) ─ */
.demo-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.demo-page .demo-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.75rem, 2.5vh, 1.75rem) clamp(1rem, 3.5vw, 2.5rem) 1.5rem;
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.demo-page h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.2vw, 2.45rem);
  margin: 0 0 0.35rem;
}
.demo-sub {
  color: var(--text-muted-on-dark);
  margin: 0 0 0.95rem;
}
.demo-phone-wrap {
  width: 100%;
}
.demo-phone {
  text-align: left;
  background: linear-gradient(165deg, #1a1612 0%, #0e0c0a 100%);
  border: 1px solid rgba(184, 154, 106, 0.28);
  border-radius: 1.35rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.demo-phone-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(184, 154, 106, 0.18);
  background: rgba(12, 10, 9, 0.85);
}
.demo-phone-bar img {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  object-fit: cover;
}
.demo-phone-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--paper);
}
.demo-phone-bar span {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--accent-on-dark);
  letter-spacing: 0.04em;
}
.demo-thread {
  height: min(38vh, 22rem);
  overflow-y: auto;
  padding: 1.1rem 1.1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(184, 154, 106, 0.08), transparent 55%),
    #12100d;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 154, 106, 0.45) rgba(18, 16, 13, 0.9);
}
.demo-thread::-webkit-scrollbar {
  width: 6px;
}
.demo-thread::-webkit-scrollbar-track {
  background: rgba(12, 10, 9, 0.85);
  border-radius: 999px;
}
.demo-thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(204, 174, 126, 0.65), rgba(150, 120, 80, 0.75));
  border-radius: 999px;
}
.demo-idle {
  margin: auto;
  text-align: center;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.demo-idle .micro {
  color: var(--text-quiet-on-dark);
  max-width: 16rem;
}
.demo-bubble {
  max-width: 92%;
  padding: 0.8rem 1rem;
  border-radius: 1.05rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.demo-bubble.show {
  opacity: 1;
  transform: none;
}
.demo-jott {
  align-self: flex-start;
  background: rgba(242, 238, 230, 0.14);
  border: 1px solid rgba(184, 154, 106, 0.42);
  color: #f7f3ea;
  border-bottom-left-radius: 0.25rem;
}
.demo-you {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(204, 174, 126, 0.95), rgba(168, 136, 92, 0.96));
  color: #11100e;
  border-bottom-right-radius: 0.25rem;
  font-weight: 500;
}
.demo-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgba(184, 154, 106, 0.18);
  min-height: 3.25rem;
}
.demo-controls[hidden],
.demo-controls [hidden],
.demo-progress[hidden],
.demo-close-line[hidden] {
  display: none !important;
}
.demo-progress {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(215, 195, 154, 0.85);
  margin-left: auto;
}
.demo-caption {
  margin: 0.75rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted-on-dark);
}
.demo-close-line {
  margin: 0.45rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  font-style: italic;
  color: var(--gold-bright, #d7c39a);
}
.demo-cta-block {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.demo-cta-secondary {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.demo-cta-secondary:hover {
  color: var(--paper);
}
.demo-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  width: 100%;
}
.demo-tab {
  appearance: none;
  border: 1px solid rgba(184, 154, 106, 0.28);
  background: rgba(235, 230, 220, 0.05);
  color: var(--text-muted-on-dark);
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 2.4vw, 0.82rem);
  letter-spacing: 0.02em;
  padding: 0.55rem 0.35rem;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  min-width: 0;
}
.demo-tab:hover {
  border-color: rgba(184, 154, 106, 0.5);
  color: var(--paper);
}
.demo-tab.is-on {
  background: linear-gradient(135deg, rgba(184, 154, 106, 0.88), rgba(150, 120, 80, 0.92));
  border-color: transparent;
  color: #11100e;
  font-weight: 600;
}
.demo-beta-notes {
  max-width: 52rem;
  margin: 0 auto 3rem;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  text-align: left;
}
.demo-beta-notes h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 0 0 0.4rem;
  text-align: center;
}
.demo-notes-lede {
  text-align: center;
  color: var(--text-quiet-on-dark);
  margin: 0 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
}
.demo-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.demo-notes-grid article {
  border-top: 1px solid rgba(184, 154, 106, 0.22);
  padding-top: 1rem;
}
.demo-notes-grid h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
}
.demo-notes-grid p {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: var(--text-muted-on-dark);
  line-height: 1.45;
}
.demo-notes-grid .btn {
  margin-top: 0.35rem;
}
@media (max-width: 520px) {
  .demo-page .demo-stage {
    max-width: 100%;
    justify-content: flex-start;
    padding-top: 1rem;
  }
  .demo-tab {
    font-size: 0.68rem;
    padding: 0.5rem 0.2rem;
  }
  .demo-thread {
    height: min(42vh, 22rem);
  }
}

.first-path {
  list-style: decimal;
  margin: 0.5rem 0 1.25rem;
  padding-left: 1.25rem;
  font-family: var(--font-ui);
  max-width: 28rem;
}
.first-path li { margin: 0.35rem 0; }
.first-path-clear {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 32rem;
}
.first-path-clear li { margin: 0.45rem 0; }
.signup-plain {
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.signup-founding-line {
  max-width: 34rem;
  margin-top: 0.35rem;
}
.signup-seats {
  max-width: 34rem;
  margin: 0.35rem 0 1.25rem;
  opacity: 0.8;
}
.signup-next-hint {
  margin: 0.65rem 0 0;
  max-width: 34rem;
  line-height: 1.45;
  color: var(--text-muted-on-dark);
}
.signup-form-clear .btn-lg:disabled,
.signup-form-clear .btn-lg[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.25);
}
.signup-plain-box {
  margin: 0 0 1rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(184, 154, 106, 0.35);
  border-radius: 0.65rem;
  background: rgba(184, 154, 106, 0.08);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-on-dark);
  max-width: 34rem;
}
.signup-form-clear input[type="tel"] {
  font-size: 1.15rem;
  padding: 0.85rem 0.95rem;
  min-height: 3rem;
}
.signup-form-clear .legal-check {
  font-size: 0.95rem;
  line-height: 1.5;
}
.signup-form-clear .btn-lg {
  font-size: 1.1rem;
  min-height: 3.1rem;
}

.first-run {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.first-run section {
  scroll-margin-top: 5.5rem;
}
.first-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.first-rail li {
  border: 1px solid rgba(196, 165, 116, 0.28);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  color: var(--text-quiet-on-dark);
}
.first-rail li.is-done { color: #d7c39a; }
.first-rail li.is-now {
  color: #1a1410;
  background: rgba(196, 165, 116, 0.9);
  border-color: transparent;
}
.first-run h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0.2rem 0 0.6rem;
}
.first-run .step-kicker {
  font-family: var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--accent-on-dark);
  margin: 0;
}
.first-run textarea,
.first-run input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0.8rem 0 0.9rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(196, 165, 116, 0.35);
  background: rgba(255, 248, 236, 0.06);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
}
.first-run textarea { min-height: 6.5rem; resize: vertical; }
.first-teach-triad {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0 1.25rem;
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}
.first-teach-triad span {
  display: block;
}
.first-example-label,
.first-example-later {
  margin: 0.85rem 0 0.35rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}
.first-example-later {
  margin-top: 1rem;
}
.first-thread { margin-top: 1.25rem; }
.first-thread .bubble { white-space: pre-wrap; }
.first-why {
  margin-top: 1.5rem;
  padding-top: 0.25rem;
}
.first-core {
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}
.jott-unit-explain {
  margin: 1rem 0 1.5rem;
  max-width: 36rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.45;
}
.jott-unit-explain p { margin: 0.4rem 0; }


/* ── Bio + Founding 50 cohort invite ─────────────────────── */
.bio-cohort .invite-header .invite-seal {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 165, 116, 0.85);
  margin-right: 0.75rem;
}
.bio-hero {
  position: relative;
  min-height: min(72vh, 640px);
  display: grid;
  align-items: end;
  padding: 4rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  overflow: hidden;
}
.bio-hero-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bio-hero-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0.42;
  animation: bioPlaneIn 1.4s ease-out both;
}
.bio-hero-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.35) 0%, rgba(8, 6, 5, 0.55) 45%, rgba(8, 6, 5, 0.96) 100%),
    radial-gradient(ellipse 70% 50% at 70% 20%, rgba(184, 154, 106, 0.18), transparent 60%);
}
.bio-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  animation: bioCopyIn 0.9s ease-out 0.2s both;
}
.bio-brand {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 2.2rem);
  font-weight: 500;
  color: var(--gold-bright, #e8d4a8);
  margin: 0 0 0.35rem;
  letter-spacing: 0.02em;
}
.bio-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  line-height: 1.05;
  margin: 0 0 0.4rem;
  color: var(--text-on-dark);
}
.bio-title {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: rgba(196, 165, 116, 0.9);
  margin: 0 0 1.25rem;
}
.bio-lede {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  color: var(--text-on-dark);
  margin: 0 0 1.75rem;
  max-width: 32rem;
}
.bio-section {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3.5rem clamp(1.25rem, 5vw, 2rem) 1rem;
  scroll-margin-top: 5rem;
}
.bio-section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 4.5vw, 2.55rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text-on-dark);
}
.bio-kicker {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #c4a574);
  margin: 0 0 0.65rem;
  opacity: 0.9;
}
.bio-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--gold, #c4a574);
  margin: 0 0 0.55rem;
  opacity: 0.85;
}
.bio-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(232, 228, 220, 0.86);
  margin: 0 0 1rem;
}
.bio-quiet {
  opacity: 0.78;
  font-style: italic;
}
.bio-list,
.bio-steps {
  margin: 0.75rem 0 1.25rem;
  padding-left: 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-on-dark);
}
.bio-list li,
.bio-steps li {
  margin: 0.45rem 0;
}
.bio-cohort-section .bio-wall {
  margin: 1.5rem 0 1.25rem;
}
.bio-you-note {
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.2rem;
  border-left: 2px solid rgba(196, 165, 116, 0.55);
  background: linear-gradient(90deg, rgba(184, 154, 106, 0.08), transparent 70%);
}
.bio-you-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  margin: 0 0 0.25rem;
  color: var(--gold-bright, #e8d4a8);
}
.bio-you-meta {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(196, 165, 116, 0.85);
  margin: 0 0 0.65rem;
}
.bio-you-note-text {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text-on-dark);
}
.bio-timeline {
  display: grid;
  gap: 1.25rem;
  margin: 1.25rem 0 0;
}
.bio-timeline article {
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 1px solid rgba(196, 165, 116, 0.35);
}
.bio-timeline .mono {
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold, #c4a574);
  margin: 0 0 0.25rem;
}
.bio-timeline h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
  color: var(--text-on-dark);
}
.bio-timeline p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(232, 228, 220, 0.78);
}
.bio-accept {
  padding-bottom: 4rem;
}
.bio-accept .cta-row {
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.invite-fine {
  margin-top: 1.5rem;
  opacity: 0.65;
}
.bio-cohort [hidden] {
  display: none !important;
}
@keyframes bioPlaneIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 0.42; transform: none; }
}
@keyframes bioCopyIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bio-hero-plane img,
  .bio-hero-copy { animation: none; }
}
@media (max-width: 720px) {
  .bio-hero {
    min-height: min(68vh, 32rem);
    align-items: end;
  }
  .bio-hero-plane img {
    object-position: center 22%;
  }
  .bio-cohort .invite-header nav .invite-seal {
    display: none;
  }
}

/* ── Invite private beta brief (letter + brief) ─────────── */
.invite-brief .brief-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 4.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(0rem, 2vw, 1rem) 3rem;
}
.brief-letter {
  background:
    linear-gradient(180deg, rgba(18, 14, 11, 0.96), rgba(8, 6, 5, 0.98)),
    #11100e;
  border-right: 1px solid rgba(196, 165, 116, 0.22);
  padding: 2rem 1.5rem 2.5rem;
  position: sticky;
  top: 4.25rem;
  align-self: start;
  max-height: calc(100vh - 4.5rem);
  overflow: auto;
}
.brief-main {
  background:
    linear-gradient(165deg, rgba(245, 240, 230, 0.97), rgba(232, 224, 210, 0.98));
  color: #1a1612;
  padding: 2.25rem clamp(1.35rem, 4vw, 3rem) 3rem;
  border-radius: 0 0 0.35rem 0;
}
.brief-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 165, 116, 0.92);
  margin: 0 0 0.55rem;
}
.brief-for {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 500;
  color: var(--text-on-dark);
  margin: 0 0 0.2rem;
  line-height: 1.1;
}
.brief-role {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 165, 116, 0.88);
  margin: 0 0 1.25rem;
}
.brief-block {
  margin: 1.35rem 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(196, 165, 116, 0.28);
}
.brief-letter-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-on-dark);
  margin: 0 0 0.85rem;
}
.brief-sign {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.95rem;
  color: var(--text-muted-on-dark);
  margin: 1.5rem 0 0.35rem;
}
.brief-sign-name {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-style: normal;
  color: var(--text-on-dark);
}
.brief-mantra {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  color: rgba(196, 165, 116, 0.9);
  margin: 1.5rem 0 0.4rem;
}
.brief-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7048;
  margin: 0 0 0.85rem;
}
.brief-main h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: #14110e;
  margin: 0 0 0.65rem;
  line-height: 1.1;
}
.brief-promise {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7048;
  margin: 0 0 0.45rem;
}
.brief-tagline {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: #2a241e;
  margin: 0 0 2rem;
}
.brief-chapter {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(138, 112, 72, 0.28);
}
.brief-chapter .bio-num {
  color: #8a7048;
  margin: 0.15rem 0 0;
}
.brief-chapter h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: #14110e;
  margin: 0 0 0.45rem;
}
.brief-main .bio-body {
  color: rgba(26, 22, 18, 0.86);
  font-size: 1rem;
}
.brief-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 1.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(138, 112, 72, 0.28);
  border-bottom: 1px solid rgba(138, 112, 72, 0.28);
}
.brief-timeline .mono {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #8a7048;
  margin: 0 0 0.2rem;
}
.brief-timeline h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: #14110e;
  margin: 0;
}
.brief-claim .cta-row { margin: 1.25rem 0 0.75rem; }
.brief-claim .micro { color: rgba(26, 22, 18, 0.55); }
.brief-claim a { color: #6b5530; }
.brief-wall {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(138, 112, 72, 0.28);
}
.brief-wall .brief-label { color: #8a7048; }
.brief-main .founding-wall li {
  border-color: rgba(138, 112, 72, 0.28);
  color: #1a1612;
  background: rgba(255, 255, 255, 0.35);
}
.invite-brief .invite-fine { color: var(--text-quiet-on-dark); }
@media (max-width: 900px) {
  .invite-brief .brief-layout {
    grid-template-columns: 1fr;
    padding: 0 0 2rem;
  }
  .brief-letter {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid rgba(196, 165, 116, 0.22);
  }
  .brief-timeline {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .brief-timeline { grid-template-columns: 1fr; }
}

.bio-lede-support {
  max-width: 32rem;
  margin: 0 0 1rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}
.bio-avail {
  margin: 0 0 1.25rem;
  max-width: 32rem;
}
.bio-cta-note {
  margin-top: 0.75rem;
  opacity: 0.7;
}
.bio-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
}

.invite-feedback-cmds .mono {
  color: var(--gold-bright, #e8d4a8);
  font-weight: 600;
}
.invite-feedback-cmds .micro {
  display: inline;
  margin-left: 0.35rem;
}

/* Homepage — audience / trust + compact loop */
.audience-trust {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.audience-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.85rem;
}
.audience-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 3.6vw, 2.15rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  color: var(--paper);
}
.audience-trust-line {
  margin: 0 auto 0.75rem;
  max-width: 32rem;
  color: var(--text-on-dark);
}
.audience-promise {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--accent-on-dark);
}
.demo-teaser {
  text-align: center;
}
.demo-teaser h2 {
  margin-bottom: 0.5rem;
}
.loop-compact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.1rem;
  align-items: center;
  margin-top: 1rem;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}
.loop-compact-media {
  margin: 0;
}
.loop-compact-phone {
  margin: 0 auto;
}
@media (max-width: 800px) {
  .loop-compact-grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Vision board · Sarah Chen flow ——— */
.vision-page {
  min-height: 100vh;
}
.vision-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 2rem) clamp(1.25rem, 4vw, 3rem) 1.25rem;
  min-height: min(68vh, 34rem);
  box-sizing: border-box;
}
.vision-hero-copy {
  max-width: 28rem;
}
.vision-brand-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.75rem;
}
.vision-brand-mark .logo-book-hero {
  width: clamp(4.75rem, 10vw, 6.25rem);
  height: clamp(4.75rem, 10vw, 6.25rem);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  animation: vision-brand-in 0.9s ease both;
}
.vision-brand-name {
  margin: 0 0 0.55rem;
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  animation: vision-rise 0.85s 0.08s ease both;
}
.vision-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 3.35rem);
  line-height: 1.05;
  margin: 0 0 0.45rem;
  letter-spacing: -0.02em;
  animation: vision-rise 0.85s 0.12s ease both;
}
.vision-subject {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-style: italic;
  color: var(--text-muted-on-dark);
  animation: vision-rise 0.85s 0.16s ease both;
}
.vision-lede {
  margin: 0 0 1.4rem;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  color: var(--text-muted-on-dark);
  letter-spacing: 0.02em;
  animation: vision-rise 0.85s 0.22s ease both;
}
.vision-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  animation: vision-rise 0.85s 0.32s ease both;
}
.vision-cta-secondary {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-muted-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.vision-cta-secondary:hover {
  color: var(--paper);
}

.vision-phone-stage {
  justify-self: center;
  width: min(100%, 22.5rem);
  animation: vision-phone-in 1s 0.18s ease both;
}
.vision-phone {
  position: relative;
  background: linear-gradient(165deg, #1c1813 0%, #0d0b09 100%);
  border: 1px solid rgba(184, 154, 106, 0.32);
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.vision-phone-notch {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.5rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(242, 238, 230, 0.12);
  z-index: 2;
}
.vision-phone-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.15rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(184, 154, 106, 0.18);
  background: rgba(12, 10, 9, 0.9);
}
.vision-phone-bar img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
}
.vision-phone-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--paper);
}
.vision-phone-bar span {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--accent-on-dark);
  letter-spacing: 0.04em;
}
.vision-thread {
  height: min(42vh, 26rem);
  overflow-y: auto;
  padding: 1rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(184, 154, 106, 0.08), transparent 55%),
    #12100d;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 154, 106, 0.45) rgba(18, 16, 13, 0.9);
}
.vision-idle {
  margin: auto;
  text-align: center;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.vision-idle-kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.vision-idle-line {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-on-dark);
}
.vision-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid rgba(184, 154, 106, 0.18);
}
.vision-controls[hidden],
.vision-close-line[hidden] {
  display: none !important;
}
.vision-progress {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(215, 195, 154, 0.85);
  margin-left: auto;
}

.vision-bubble,
.vision-card {
  max-width: 94%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.vision-bubble.show,
.vision-card.show {
  opacity: 1;
  transform: none;
}
.vision-bubble {
  padding: 0.75rem 0.95rem;
  border-radius: 1.05rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.vision-you {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(204, 174, 126, 0.95), rgba(168, 136, 92, 0.96));
  color: #11100e;
  border-bottom-right-radius: 0.25rem;
  font-weight: 500;
}
.vision-jott {
  align-self: flex-start;
  background: rgba(242, 238, 230, 0.12);
  border: 1px solid rgba(184, 154, 106, 0.38);
  color: #f7f3ea;
  border-bottom-left-radius: 0.25rem;
}
.vision-card {
  align-self: flex-start;
  width: 100%;
  background: linear-gradient(155deg, #1b1915, #13110e);
  border: 1px solid rgba(184, 154, 106, 0.3);
  border-radius: 1rem;
  padding: 0.95rem 1rem;
}
.vision-card-mark {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.vision-script {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--paper);
}
.vision-check {
  color: var(--gold-bright);
  font-size: 1.1rem;
}
.vision-person {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0.15rem 0 0.35rem;
}
.vision-card ul {
  margin: 0.35rem 0 0.55rem;
  padding-left: 1.05rem;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--text-on-dark);
  line-height: 1.45;
}
.vision-ask {
  margin: 0.55rem 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--text-muted-on-dark);
}
.vision-yesno {
  display: flex;
  gap: 0.5rem;
}
.vision-yesno span {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(184, 154, 106, 0.35);
  color: var(--text-muted-on-dark);
}
.vision-yesno .is-yes {
  background: linear-gradient(135deg, rgba(184, 154, 106, 0.9), rgba(150, 120, 80, 0.95));
  color: #11100e;
  border-color: transparent;
  font-weight: 600;
  animation: vision-pulse-yes 1.4s ease infinite;
}
.vision-muted {
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-quiet-on-dark);
}
.vision-link-btn {
  appearance: none;
  border: 1px solid rgba(184, 154, 106, 0.45);
  background: transparent;
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  cursor: default;
  margin-top: 0.35rem;
}
.vision-shot-badge {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.65rem;
  background:
    linear-gradient(135deg, rgba(60, 52, 40, 0.9), rgba(28, 24, 18, 0.95)),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(184, 154, 106, 0.08) 11px, rgba(184, 154, 106, 0.08) 12px);
  border: 1px dashed rgba(184, 154, 106, 0.45);
  font-family: var(--font-ui);
  margin-bottom: 0.45rem;
}
.vision-shot-badge strong {
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--paper);
}
.vision-shot-badge span {
  font-size: 0.78rem;
  color: var(--text-muted-on-dark);
}
.vision-shot-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.vision-tags-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.vision-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.vision-tag {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 154, 106, 0.4);
  background: rgba(41, 38, 31, 0.9);
  color: var(--paper);
  animation: vision-tag-in 0.45s ease both;
}
.vision-tag:nth-child(2) { animation-delay: 0.05s; }
.vision-tag:nth-child(3) { animation-delay: 0.1s; }
.vision-tag:nth-child(4) { animation-delay: 0.15s; }
.vision-tag:nth-child(5) { animation-delay: 0.2s; }
.vision-tag:nth-child(6) { animation-delay: 0.25s; }
.vision-nudge-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.vision-nudge-card p {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.vision-rail-wrap {
  max-width: 52rem;
  margin: 0 auto 2.5rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.vision-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.vision-rail-btn {
  appearance: none;
  border: 1px solid rgba(184, 154, 106, 0.28);
  background: rgba(235, 230, 220, 0.04);
  color: var(--text-muted-on-dark);
  border-radius: 0.65rem;
  padding: 0.65rem 0.3rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  min-width: 0;
}
.vision-rail-btn:hover {
  border-color: rgba(184, 154, 106, 0.5);
  color: var(--paper);
  transform: translateY(-1px);
}
.vision-rail-btn.is-on {
  background: linear-gradient(135deg, rgba(184, 154, 106, 0.9), rgba(150, 120, 80, 0.95));
  border-color: transparent;
  color: #11100e;
}
.vision-rail-num {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
}
.vision-rail-label {
  font-family: var(--font-ui);
  font-size: clamp(0.68rem, 2.2vw, 0.82rem);
  font-weight: 600;
  white-space: nowrap;
}
.vision-caption {
  margin: 0.35rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text-muted-on-dark);
}
.vision-close-line {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-style: italic;
  color: var(--gold-bright);
}

.vision-strip-section {
  max-width: 72rem;
  margin: 0 auto 3rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.vision-strip-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 0.35rem;
}
.vision-strip-lede {
  margin: 0 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text-quiet-on-dark);
}
.vision-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.55rem, 1.5vw, 1rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.vision-strip.is-in {
  opacity: 1;
  transform: none;
}
.vision-mini {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  color: inherit;
}
.vision-mini-frame {
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 1rem;
  border: 1px solid rgba(184, 154, 106, 0.28);
  background: linear-gradient(165deg, #1a1612, #0e0c0a);
  padding: 0.55rem 0.45rem;
  margin-bottom: 0.55rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
}
.vision-mini:hover .vision-mini-frame,
.vision-mini.is-active .vision-mini-frame {
  border-color: rgba(184, 154, 106, 0.65);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.vision-mini.is-active .vision-mini-frame {
  outline: 1px solid rgba(212, 184, 136, 0.55);
}
.vision-mini-bar {
  display: block;
  height: 0.55rem;
  border-radius: 0.25rem;
  background: rgba(242, 238, 230, 0.12);
  margin-bottom: 0.45rem;
}
.vision-mini-bubble {
  display: block;
  height: 1.35rem;
  border-radius: 0.55rem;
  margin-bottom: 0.35rem;
  background: rgba(242, 238, 230, 0.1);
}
.vision-mini-bubble.you {
  margin-left: 28%;
  background: linear-gradient(135deg, rgba(204, 174, 126, 0.75), rgba(168, 136, 92, 0.8));
}
.vision-mini-bubble.jott {
  margin-right: 22%;
  border: 1px solid rgba(184, 154, 106, 0.3);
}
.vision-mini-bubble.short {
  height: 0.85rem;
  width: 55%;
  margin-left: auto;
}
.vision-mini-card {
  display: block;
  height: 3.2rem;
  border-radius: 0.55rem;
  background: rgba(184, 154, 106, 0.12);
  border: 1px solid rgba(184, 154, 106, 0.25);
  margin-bottom: 0.35rem;
}
.vision-mini-card.tall {
  height: 4.5rem;
}
.vision-mini-chip {
  display: block;
  width: 42%;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(184, 154, 106, 0.45);
}
.vision-mini-shot {
  display: block;
  height: 2.8rem;
  border-radius: 0.45rem;
  border: 1px dashed rgba(184, 154, 106, 0.45);
  background: rgba(60, 52, 40, 0.55);
  margin-bottom: 0.4rem;
}
.vision-mini-tags {
  display: flex;
  gap: 0.25rem;
}
.vision-mini-tags::before,
.vision-mini-tags::after {
  content: "";
  flex: 1;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(184, 154, 106, 0.35);
}
.vision-mini-nudge {
  display: block;
  height: 2.4rem;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, rgba(184, 154, 106, 0.22), rgba(184, 154, 106, 0.08));
  border: 1px solid rgba(184, 154, 106, 0.35);
}
.vision-mini-cap {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted-on-dark);
}
.vision-mini-cap em {
  font-style: normal;
  color: var(--accent-on-dark);
  margin-right: 0.25rem;
  letter-spacing: 0.06em;
}
.vision-mini.is-active .vision-mini-cap {
  color: var(--paper);
}

.vision-static-board {
  max-width: 64rem;
  margin: 0 auto 3.5rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.vision-static-board figure {
  margin: 0;
}
.vision-static-board img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
  border: 1px solid rgba(184, 154, 106, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.vision-static-board figcaption {
  margin-top: 0.65rem;
  text-align: center;
  color: var(--text-quiet-on-dark);
}

.vision-end-cta {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 4rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.vision-end-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  margin: 0.35rem 0 0.55rem;
}
.vision-end-cta p {
  margin: 0 0 1.25rem;
  color: var(--text-muted-on-dark);
  font-family: var(--font-ui);
}
.vision-end-cta .vision-cta-row {
  justify-content: center;
}

@keyframes vision-brand-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes vision-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes vision-phone-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes vision-pulse-yes {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 154, 106, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(184, 154, 106, 0); }
}
@keyframes vision-tag-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .vision-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
    padding-top: 1.25rem;
  }
  .vision-hero-copy {
    max-width: none;
    margin: 0 auto;
  }
  .vision-brand-mark {
    justify-content: center;
  }
  .vision-cta-row {
    justify-content: center;
  }
  .vision-phone-stage {
    width: min(100%, 21rem);
  }
}
@media (max-width: 640px) {
  .vision-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.28rem;
  }
  .vision-rail-btn {
    padding: 0.5rem 0.15rem;
  }
  .vision-rail-label {
    font-size: 0.62rem;
  }
  .vision-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .vision-mini:last-child {
    grid-column: 1 / -1;
    max-width: 10.5rem;
    margin: 0 auto;
  }
  .vision-thread {
    height: min(48vh, 24rem);
  }
  .vision-title {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }
}


/* ── CANONICAL house-home header (all agents) ── */
/* Visual: leather bar + gold tracked nav (ref plate 03). Live IA unchanged. */
.site-header[data-site-nav] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.9rem clamp(0.85rem, 3vw, 1.75rem);
  position: sticky;
  top: 0;
  backdrop-filter: blur(16px) saturate(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  background:
    linear-gradient(180deg, rgba(12, 10, 8, 0.82) 0%, rgba(8, 6, 5, 0.72) 100%);
  z-index: 10;
  border-bottom: 1px solid rgba(201, 166, 107, 0.22);
}
.site-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(212, 184, 136, 0.45);
  border-radius: 0.35rem;
  text-decoration: none;
  flex-shrink: 0;
  background: rgba(8, 6, 5, 0.35);
}
.site-home:hover {
  border-color: var(--accent-on-dark);
  text-decoration: none;
  opacity: 1;
}
.site-home-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.site-header[data-site-nav] .site-nav {
  display: flex;
  gap: 1.15rem;
  align-items: center;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  font-weight: 500;
}
.site-header[data-site-nav] .site-nav a:not(.btn) {
  color: var(--accent-on-dark);
  opacity: 1;
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1.2;
}
.site-header[data-site-nav] .site-nav a:not(.btn):hover {
  opacity: 1;
  text-decoration: none;
  color: #c9a05a;
}
.site-header[data-site-nav] .site-nav a.is-active,
.site-header[data-site-nav] .site-nav a[aria-current="page"] {
  opacity: 1;
  color: #c9a05a;
  box-shadow: inset 0 -1px 0 rgba(185, 138, 71, 0.95);
}
.site-header[data-site-nav] .btn {
  padding: 0.45rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: 0.75rem;
  text-transform: uppercase;
}
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(212, 184, 136, 0.45);
  border-radius: 0.15rem;
  background: transparent;
  cursor: pointer;
  color: var(--accent-on-dark);
}
.site-nav-toggle-bars,
.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.site-nav-toggle-bars::before,
.site-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-nav-toggle-bars::before { top: -5px; }
.site-nav-toggle-bars::after { top: 5px; }
.site-header.is-nav-open .site-nav-toggle-bars { background: transparent; }
.site-header.is-nav-open .site-nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}
.site-header.is-nav-open .site-nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}
@media (max-width: 860px) {
  .site-nav-toggle { display: inline-flex; margin-left: auto; }
  .site-header[data-site-nav] .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.55rem 1rem 1rem;
    /* Black Leather drawer — never cream lined paper */
    background: rgba(17, 16, 14, 0.98);
    border-bottom: 1px solid rgba(185, 138, 71, 0.22);
    font-family: var(--font-ui);
    font-size: 0.72rem;
  }
  .site-header[data-site-nav].is-nav-open .site-nav {
    display: flex;
  }
  .site-header[data-site-nav] .site-nav a:not(.btn) {
    display: block;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid rgba(185, 138, 71, 0.16);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-on-dark);
  }
  .site-header[data-site-nav] .site-nav a:not(.btn):hover,
  .site-header[data-site-nav] .site-nav a.is-active,
  .site-header[data-site-nav] .site-nav a[aria-current="page"] {
    color: #c9a05a;
    box-shadow: none;
  }
  .site-header[data-site-nav] .site-nav .btn {
    margin-top: 0.7rem;
    width: 100%;
    justify-content: center;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* ── Home · full-bleed desk-Capri · BLACK → LOGO → MESSAGE · crisp / masculine ─── */
.home-desk-hero {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #11100e;
  /* Condense first plate — product should read before a full-viewport scroll */
  min-height: min(78vh, 40rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: none;
  box-shadow: none;
}
.home-desk-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  animation: jlHeroSettle 1.15s ease both;
}
.home-desk-plane picture,
.home-desk-plane img {
  width: 100%;
  height: 100%;
  display: block;
}
.home-desk-plane img {
  object-fit: cover;
  object-position: center center;
}
.home-desk-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(17, 16, 14, 0.28) 0%, transparent 28%, transparent 58%, rgba(17, 16, 14, 0.78) 100%),
    linear-gradient(90deg, rgba(17, 16, 14, 0.12) 0%, transparent 42%);
}
.home-desk-copy {
  position: relative;
  z-index: 2;
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vh, 5rem) clamp(1.15rem, 4vw, 3rem) 0;
  animation: jlCopyIn 0.95s 0.1s ease both;
}
.home-desk-lockup {
  display: none !important;
}
.home-desk-wordmark {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #f4ebdd;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}
.home-desk-promise {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #f4ebdd;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}
.home-hero-sub {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--accent-on-dark);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.home-hero-lede {
  margin: 0 0 1rem;
  max-width: 22rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  line-height: 1.4;
  color: var(--text-on-dark);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75);
}
/* Desktop wide: plate already paints logo+message — hide HTML stack (SEO stays in DOM via same nodes when mobile shows them; desktop uses clip) */
@media (min-width: 921px) {
  .home-desk-plate-hide {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
}
.home-chapter-mark {
  position: absolute;
  top: clamp(4.5rem, 10vh, 6rem);
  right: clamp(1rem, 4vw, 2.5rem);
  z-index: 2;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(4.5rem, 12vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.28em;
  color: rgba(185, 138, 71, 0.18);
  pointer-events: none;
  text-indent: 0.28em;
}
.home-chapter-label,
.home-chapter > .comic-page-num {
  margin: 0 0 0.55rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.home-desk-copy .home-chapter-label {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
/* Chapter plates on mid-page home panels (Roman only) */
.home-chapter {
  position: relative;
  overflow: hidden;
  padding-top: clamp(1.35rem, 3.5vh, 2.25rem);
  padding-bottom: clamp(1.35rem, 3.5vh, 2.25rem);
}
.home-chapter > .chapter-roman-mark {
  position: absolute;
  top: 1.1rem;
  right: clamp(0.75rem, 3vw, 1.75rem);
  z-index: 0;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(3.5rem, 10vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.28em;
  color: rgba(185, 138, 71, 0.16);
  pointer-events: none;
  text-indent: 0.28em;
}
.home-chapter > .comic-page-num,
.home-chapter > h2,
.home-chapter > .comic-body,
.home-chapter > .audience-headline,
.home-chapter > .audience-trust-line,
.home-chapter > .audience-promise,
.home-chapter > .cta-row,
.home-chapter > .loop-compact-grid,
.home-chapter > .mono,
.home-chapter > .comic-lead,
.home-chapter > .brand-authority-definition,
.home-chapter > .signup-modes,
.home-chapter > .signup-form,
.home-chapter > .micro {
  position: relative;
  z-index: 1;
}
.home-chapter .chapter-roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.22em;
  color: #c9a05a;
}
.comic-paper.home-chapter > .chapter-roman-mark {
  color: rgba(92, 67, 32, 0.22);
}
.home-hero-cta {
  margin: 0;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.home-rebrand .home-hero-cta .btn,
.home-rebrand .home-hero-cta .btn-lg {
  border-radius: 0.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-ui);
  font-weight: 500;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.home-hero-cta .btn-ghost {
  color: #f4ebdd !important;
  border-color: rgba(185, 138, 71, 0.85);
  background: rgba(17, 16, 14, 0.35);
}
.home-hero-cta .btn-ghost:hover {
  border-color: var(--accent-on-dark);
  background: rgba(185, 138, 71, 0.12);
}

/* Home launch clarity · SMS demo · use cases · $ pricing (brand73) */
.home-hero-support {
  margin: 0.35rem 0 0.45rem;
  max-width: 28rem;
  font-family: var(--font-body, "Source Serif 4", Georgia, serif);
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.45;
  color: var(--text-on-dark);
}
/* Soft Drift education above Save contact — first-five-seconds (scorecard P1) */
.home-hero-edu {
  margin: 0 0 0.85rem;
  max-width: 28rem;
  font-family: var(--font-ui, "DM Sans", system-ui, sans-serif);
  font-size: clamp(0.82rem, 2.1vw, 0.92rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted-on-dark, rgba(244, 235, 221, 0.82));
}
.home-demo-kicker {
  margin: 1.25rem 0 0.35rem;
  font-family: var(--font-ui, "DM Sans", system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink-on-paper, #5c4320);
}
.comic-dark-spread .home-demo-kicker,
.comic-black .home-demo-kicker {
  color: #c9a05a;
}
.home-demo-lede {
  margin-bottom: 0.85rem;
}
.home-sms-demo {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0 0.5rem;
}
.home-sms-phone {
  width: min(100%, 22rem);
}
.home-sms-later {
  margin: 0.65rem 0.35rem;
  font-family: var(--font-ui, "DM Sans", system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(185, 138, 71, 0.85);
  text-align: center;
}
.home-demo-note {
  text-align: center;
  margin-top: 0.65rem;
}
.home-usecase-list {
  list-style: none;
  margin: 1rem auto 0.85rem;
  padding: 0;
  max-width: 36rem;
  display: grid;
  gap: 0.85rem;
}
.home-usecase-list li {
  margin: 0;
  font-family: var(--font-body, "Source Serif 4", Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--text-on-dark);
}
.home-usecase-list a {
  color: var(--accent-on-dark);
  text-decoration: none;
}
.home-usecase-list a:hover {
  text-decoration: underline;
}
.home-habit-loop {
  text-align: center;
  margin: 0.65rem 0 0.85rem;
}
.home-habit-media {
  display: block;
  width: min(100%, 18rem);
  margin: 0.5rem auto 0;
}
.pricing-jotts {
  margin: 0 0 0.65rem;
  font-family: var(--font-ui, "DM Sans", system-ui, sans-serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-on-dark);
}
.pricing-jotts span {
  opacity: 0.75;
  margin-left: 0.15rem;
}
.comic-panel.pricing-chapter .pricing-jotts {
  color: var(--text-on-dark);
}
.comic-panel.pricing-chapter .pricing-card h3 {
  margin-bottom: 0.15rem;
}
.privacy-faq {
  margin: 0.85rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.privacy-faq dt {
  font-family: var(--font-ui, "DM Sans", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0;
}
.privacy-faq dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-body, "Source Serif 4", Georgia, serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-on-dark);
}
.journal-light .privacy-faq dd,
.privacy-page .privacy-faq dd {
  color: var(--text-on-dark);
}

.home-pptm {
  position: relative;
  z-index: 2;
  width: min(72rem, 100%);
  margin: clamp(0.85rem, 2.5vh, 1.5rem) auto 0;
  padding: 0.75rem clamp(1.15rem, 4vw, 3rem) clamp(0.9rem, 2.5vh, 1.35rem);
  border-top: 1px solid rgba(185, 138, 71, 0.45);
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
/* Retired two-col split — keep inert for stale caches */
.home-split-hero,
.home-split-inner,
.home-split-copy,
.home-split-visual,
.home-split-book,
.home-split-phone,
.home-hero-lockup-img {
  display: none !important;
}
/* Open-page beat after cover: warm ivory paper inside leather book */
.home-rebrand #brand-authority.comic-paper {
  max-width: min(46rem, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(185, 138, 71, 0.28);
  box-shadow: 0 0 0 10px #11100e, 0 28px 64px rgba(0, 0, 0, 0.45);
}
/* Retired marble full-bleed classes — keep inert for stale caches */
.home-book-hero,
.home-book-mark,
.home-book-brand,
.home-book-url {
  display: none !important;
}
/* Home: solid leather chrome — same IA as every brochure page */
body.home-rebrand::after {
  display: none;
}
.home-rebrand .site-header,
.home-rebrand .site-header[data-site-nav] {
  background: rgba(17, 16, 14, 0.96);
  border-bottom: 1px solid rgba(185, 138, 71, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-rebrand .site-header nav a:not(.btn),
.home-rebrand .site-header[data-site-nav] .site-nav a:not(.btn) {
  color: var(--accent-on-dark);
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
}
.home-rebrand .site-header nav a:not(.btn):hover {
  color: #c9a05a;
  text-decoration: none;
}
.home-rebrand .site-header .btn-gold {
  border-radius: 0.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-rebrand .site-home {
  border-color: rgba(185, 138, 71, 0.55);
  background: #050505;
  overflow: hidden;
  padding: 0.12rem;
  border-radius: 0.2rem;
}
.home-rebrand .site-home-icon {
  filter: none;
}
.home-rebrand .loop-compact-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.15rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.home-site-footer .logo-book-foot {
  height: 2.75rem;
  width: auto;
  aspect-ratio: 584 / 314;
  border-radius: 0.15rem;
}
.home-foot-tag {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 166, 107, 0.9);
  margin: 0 0 0.75rem;
}
@media (max-width: 920px) {
  /* Full first viewport · portrait desk-Capri crop · sunglass · TextJoTT™ HTML readable */
  body.home-rebrand .atmosphere::before,
  body.home-rebrand .atmosphere::after {
    display: none;
  }
  .home-desk-hero {
    /* Keep first screen product-forward; leave room for chapter II peek */
    min-height: min(92svh, 44rem);
    min-height: min(92dvh, 44rem);
    justify-content: flex-end;
  }
  .home-desk-plane {
    /* Viable photo plane — upper stage, not a muddy full-bleed smear */
    inset: 0 0 auto 0;
    height: min(50svh, 28rem);
    height: min(50dvh, 28rem);
  }
  .home-desk-plane img {
    opacity: 1;
    visibility: visible;
    object-fit: cover;
    /* Capri SMS phone centered in hero3m portrait */
    object-position: center 36%;
    filter: saturate(0.9) contrast(1.06) brightness(0.82);
  }
  .home-desk-veil {
    /* Light sunglass on photo · hard fade into leather copy band */
    background:
      linear-gradient(180deg, rgba(8, 7, 6, 0.18) 0%, rgba(8, 7, 6, 0.12) 45%, rgba(8, 7, 6, 0.72) 82%, #11100e 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 40%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.28);
  }
  .home-desk-copy {
    position: relative;
    z-index: 2;
    padding: 1.15rem 1.15rem 0;
    max-width: 22rem;
    margin-left: 0;
    margin-right: auto;
    background: linear-gradient(180deg, rgba(17, 16, 14, 0) 0%, #11100e 18%);
  }
  .home-desk-copy .home-chapter-label {
    margin-bottom: 0.55rem;
  }
  .home-desk-plate-hide {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }
  .home-desk-plate-hide.home-desk-wordmark {
    width: auto !important;
    max-width: 22rem !important;
    margin: 0 0 0.5rem !important;
  }
  .home-desk-plate-hide.home-desk-promise,
  .home-desk-plate-hide.home-hero-sub,
  .home-desk-plate-hide.home-hero-lede {
    width: auto !important;
    max-width: 22rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .home-desk-promise {
    font-size: clamp(1.7rem, 6.6vw, 2.15rem);
    margin-bottom: 0.4rem;
  }
  .home-hero-sub {
    margin-bottom: 0.55rem;
    font-size: clamp(1rem, 3.4vw, 1.15rem);
  }
  .home-hero-lede {
    margin-bottom: 0.9rem;
    font-size: clamp(0.92rem, 3.1vw, 1.05rem);
  }
  .home-hero-cta {
    gap: 0.45rem;
    flex-wrap: nowrap;
  }
  .home-hero-cta .btn,
  .home-hero-cta .btn-lg {
    flex: 1 1 auto;
    padding: 0.7rem 0.65rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
  }
  .home-pptm {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    font-size: 0.68rem;
  }
  .home-chapter-mark {
    top: 4.25rem;
    font-size: clamp(3.25rem, 20vw, 5rem);
    opacity: 0.4;
  }
  /* No ivory paper chapter in the mobile cover story */
  body.home-rebrand.journal-black #brand-authority.comic-paper {
    max-width: none;
    margin: 0;
    border: none;
    box-shadow: none;
    background-color: #11100e !important;
    background-image: none !important;
    color: var(--text-on-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.home-rebrand.journal-black #brand-authority.comic-paper h2,
  body.home-rebrand.journal-black #brand-authority.comic-paper .brand-authority-definition,
  body.home-rebrand.journal-black #brand-authority.comic-paper .comic-body {
    color: var(--text-on-dark) !important;
  }
  body.home-rebrand.journal-black #brand-authority.comic-paper > .chapter-roman-mark {
    color: rgba(185, 138, 71, 0.16);
  }
  body.home-rebrand.journal-black #brand-authority.comic-paper .comic-page-num {
    color: var(--accent-on-dark);
  }
}

/* ── Chapter openers — same book world on dark pages ─── */
.chapter-opener {
  position: relative;
  max-width: none;
  margin: 0 0 0.5rem;
  padding: 0;
  min-height: min(52vh, 28rem);
  overflow: hidden;
  background: #11100e;
}
.chapter-opener-plane {
  position: absolute;
  inset: 0;
}
.chapter-opener-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(0.95) contrast(1.04) brightness(0.72);
}
.chapter-opener-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 6, 4, 0.82) 0%, rgba(8, 6, 4, 0.45) 48%, rgba(8, 6, 4, 0.2) 100%),
    linear-gradient(180deg, transparent 40%, rgba(8, 6, 4, 0.75) 100%);
}
.chapter-opener-copy {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  padding: clamp(4.5rem, 10vh, 6rem) clamp(1.35rem, 4vw, 3rem) clamp(2rem, 5vh, 3rem);
}
.chapter-opener-copy .eyebrow,
.chapter-opener-kicker {
  margin: 0 0 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.chapter-opener-copy h1 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  color: var(--text-on-dark);
}
.chapter-opener-copy .section-lede,
.chapter-opener-note {
  margin: 0;
  max-width: 22rem;
  color: var(--text-muted-on-dark);
  font-size: 1.05rem;
}
.chapter-opener-note {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  color: var(--accent-on-dark);
}
.chapter-opener-closed .chapter-opener-plane img {
  object-fit: contain;
  object-position: center center;
  padding: 2rem;
  filter: brightness(0.92);
  background: #0a0908;
}
.chapter-opener-desk .chapter-opener-plane img {
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(0.92) contrast(1.05) brightness(0.68);
}
.chapter-opener-drawer .chapter-opener-plane img {
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.95) contrast(1.08) brightness(0.82);
}
.console-login-opener {
  margin: 0 0 0.25rem;
  min-height: min(42vh, 22rem);
}
.console-book-sig {
  margin: 0 0 1rem;
  max-width: 7.5rem;
}
.console-book-sig img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.natural-ui .console-book-sig {
  filter: saturate(0.95) contrast(1.02);
}
.demo-desk {
  display: grid;
  grid-template-columns: minmax(12rem, 0.85fr) minmax(16rem, 1.15fr);
  gap: 1.5rem;
  align-items: end;
  max-width: 52rem;
  margin: 0 auto 1.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background:
    linear-gradient(165deg, #f3ebe0 0%, #e8dfd0 55%, #ddd2c0 100%);
  border: 1px solid rgba(43, 35, 28, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.demo-desk-book {
  margin: 0;
}
.demo-desk-book img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 22rem;
  mix-blend-mode: multiply;
  filter: contrast(1.05);
}
.demo-page .demo-desk .demo-phone {
  border-radius: 0;
  border: 1px solid rgba(26, 20, 14, 0.55);
  box-shadow: 0 10px 28px rgba(26, 20, 14, 0.28);
  background: #11100e;
}
.demo-page .demo-stage {
  max-width: 52rem;
}
@media (max-width: 860px) {
  .demo-desk {
    grid-template-columns: 1fr;
  }
  .demo-desk-book {
    max-width: 16rem;
    margin: 0 auto;
  }
  .chapter-opener {
    min-height: min(48vh, 24rem);
  }
}

/* ── Homepage light journal (desk lifestyle) ─────────────── */
.journal-light {
  --jl-paper: #f4ebdd;
  --jl-paper-deep: #ebe2d2;
  --jl-ink: #2b2926;
  --jl-ink-soft: #3d3832;
  --jl-gold: #b98a47;
  --jl-gold-bright: #c9a05a;
  --jl-line: rgba(43, 41, 38, 0.12);
  /* Cream lives on panels; page field uses site glass bg */
  background: transparent;
  color: var(--jl-ink);
}
.journal-light .atmosphere {
  background: transparent;
}
.journal-light .atmosphere::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(185, 138, 71, 0.2) 12%,
    rgba(185, 138, 71, 0.1) 70%,
    transparent 100%
  );
}
.journal-light .atmosphere::after {
  opacity: 0.045;
}
.journal-light .site-header,
.journal-light .site-header[data-site-nav] {
  background:
    linear-gradient(180deg, rgba(12, 10, 8, 0.88) 0%, rgba(8, 6, 5, 0.78) 100%);
  border-bottom: 1px solid rgba(201, 166, 107, 0.22);
}
.journal-light .site-header nav a:not(.btn),
.journal-light .site-header[data-site-nav] .site-nav a:not(.btn) {
  color: var(--accent-on-dark);
  font-family: var(--font-ui);
  opacity: 1;
}
.journal-light .site-header[data-site-nav] .site-nav a:not(.btn):hover,
.journal-light .site-header[data-site-nav] .site-nav a.is-active,
.journal-light .site-header[data-site-nav] .site-nav a[aria-current="page"] {
  color: #c9a05a;
  box-shadow: inset 0 -1px 0 rgba(185, 138, 71, 0.95);
}
.journal-light .site-nav-toggle {
  border-color: rgba(138, 109, 61, 0.45);
  color: var(--jl-gold);
}
.journal-light .btn-gold {
  border-color: var(--jl-gold-bright);
  color: var(--jl-ink) !important;
  background: var(--jl-gold-bright);
  box-shadow: none;
  border-radius: 0.75rem;
}
.journal-light .btn-gold:hover {
  background: var(--jl-gold);
  border-color: var(--jl-gold);
  color: var(--jl-ink) !important;
}
.journal-light .btn-ghost {
  border-color: rgba(185, 138, 71, 0.75);
  color: var(--jl-ink) !important;
  background: transparent;
  border-radius: 0.75rem;
}
.journal-light .btn-ghost:hover {
  background: rgba(185, 138, 71, 0.08);
  border-color: var(--jl-gold);
}
/* On dark hero CTAs, ghost stays gold outline + gold text */
.journal-light .home-book-hero .btn-ghost {
  color: var(--gold-bright) !important;
  border-color: rgba(201, 166, 107, 0.9);
}

/* Clean brand hero over full-bleed plane */
.comic-spread-overlay.comic-spread-brand {
  grid-template-columns: 1fr;
  align-items: end;
  justify-items: start;
  max-width: 36rem;
  margin-right: auto;
  padding: clamp(2rem, 8vh, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.25rem, 7vh, 3.75rem);
}
.comic-spread-overlay.comic-spread-brand .comic-copy {
  max-width: 28rem;
  background: transparent;
}
.comic-spread-overlay.comic-spread-brand .flow-brand {
  font-size: clamp(1.85rem, 5.5vw, 2.65rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
}
.comic-spread-overlay.comic-spread-brand .flow-brand-mark {
  margin: 0 0 0.65rem;
  line-height: 0;
}
.comic-spread-overlay.comic-spread-brand .hero-wordmark {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  max-height: 7.5rem;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}
.comic-founder-mark {
  display: flex;
  justify-content: center;
  margin: 1.35rem 0 0;
}
.comic-founder-mark img {
  width: min(100%, 16rem);
  height: auto;
  object-fit: contain;
}

.comic-open.comic-light-hero {
  position: relative;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: #050505;
  min-height: min(72vh, 36rem);
}
.journal-light .comic-light-hero .comic-hero-plane img {
  object-position: center 38%;
  filter: saturate(0.82) contrast(1.14) brightness(0.42);
  animation: jlHeroSettle 1.15s ease both;
}
.journal-light .comic-light-hero .comic-hero-veil {
  /* Near-black sunglass lens — photo reads faintly through tinted glass */
  background:
    linear-gradient(105deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.48) 62%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.82) 100%),
    radial-gradient(120% 80% at 50% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 55%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.65);
}
.journal-light .comic-sunglass-hero .comic-hero-plane img {
  object-position: center 32%;
  filter: saturate(0.7) contrast(1.18) brightness(0.32);
}
.journal-light .comic-sunglass-hero .comic-hero-veil {
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 36%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.88) 100%),
    radial-gradient(100% 70% at 70% 18%, rgba(180, 190, 210, 0.07) 0%, transparent 50%);
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.75);
}
.journal-light .comic-light-hero .comic-copy {
  animation: jlCopyIn 0.95s 0.12s ease both;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: 0.2rem;
  background: rgba(4, 4, 6, 0.42);
  backdrop-filter: blur(10px) saturate(0.85);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(197, 160, 89, 0.16);
}
.journal-light .comic-light-hero .flow-brand {
  color: var(--jl-gold, #c5a059);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}
.journal-light .comic-light-hero .flow-brand-mark {
  color: transparent;
}
.journal-light .comic-light-hero h1 {
  color: #f7f3eb;
  font-size: clamp(2.35rem, 6.5vw, 3.6rem);
}
.journal-light .comic-light-hero .comic-lead {
  color: rgba(247, 243, 235, 0.88);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
}

.journal-light .comic-page-num,
.journal-light .console-chapter-num,
.journal-light .eyebrow {
  color: var(--jl-gold);
}
.journal-light .comic-panel h1,
.journal-light .comic-panel h2,
.journal-light .audience-headline {
  color: var(--jl-ink);
}
.journal-light .comic-lead,
.journal-light .comic-body,
.journal-light .audience-trust-line,
.journal-light .section-lede,
.journal-light .micro,
.journal-light .comic-speech {
  color: var(--jl-ink-soft);
}
.journal-light .comic-speech-soft,
.journal-light .audience-promise,
.journal-light .audience-eyebrow {
  color: var(--jl-gold);
}
.journal-light .comic-panel + .comic-panel {
  border-top-color: var(--jl-line);
}
.journal-light .comic-journal > .comic-panel:not(.home-book-hero):not(.comic-board-full):not(.pricing-chapter):not(#pricing):not(.faq-chapter):not(#faq) {
  background-color: #efe2cc;
  background-image:
    linear-gradient(
      90deg,
      transparent 2.75rem,
      rgba(176, 110, 96, 0.26) 2.75rem,
      rgba(176, 110, 96, 0.26) calc(2.75rem + 1px),
      transparent calc(2.75rem + 1px)
    ),
    repeating-linear-gradient(
      transparent,
      transparent 1.75rem,
      rgba(130, 105, 70, 0.14) 1.75rem,
      rgba(130, 105, 70, 0.14) calc(1.75rem + 1px)
    ),
    radial-gradient(ellipse 85% 50% at 12% 0%, rgba(160, 120, 70, 0.14), transparent 58%),
    radial-gradient(ellipse 70% 48% at 96% 100%, rgba(120, 85, 50, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(90, 70, 40, 0.045), transparent 70%),
    linear-gradient(180deg, #f4e8d4 0%, #ead9c0 45%, #e0ceb0 100%);
  color: var(--jl-ink);
  box-shadow:
    inset 0 0 0 1px rgba(80, 55, 30, 0.06),
    inset 0 0 40px rgba(120, 90, 50, 0.05),
    0 14px 34px rgba(0, 0, 0, 0.14);
}
.journal-light .comic-paper,
.journal-light .comic-ruled,
.journal-light .demo-teaser,
.journal-light .loop-compact,
.journal-light .comic-black:not(.pricing-chapter):not(.faq-chapter),
.journal-light .comic-dark-spread,
.journal-light .comic-founder,
.journal-light .audience-trust {
  background-color: #efe2cc;
  background-image:
    linear-gradient(
      90deg,
      transparent 2.75rem,
      rgba(176, 110, 96, 0.26) 2.75rem,
      rgba(176, 110, 96, 0.26) calc(2.75rem + 1px),
      transparent calc(2.75rem + 1px)
    ),
    repeating-linear-gradient(
      transparent,
      transparent 1.75rem,
      rgba(130, 105, 70, 0.14) 1.75rem,
      rgba(130, 105, 70, 0.14) calc(1.75rem + 1px)
    ),
    radial-gradient(ellipse 85% 50% at 12% 0%, rgba(160, 120, 70, 0.14), transparent 58%),
    radial-gradient(ellipse 70% 48% at 96% 100%, rgba(120, 85, 50, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(90, 70, 40, 0.045), transparent 70%),
    linear-gradient(180deg, #f4e8d4 0%, #ead9c0 45%, #e0ceb0 100%);
  color: var(--jl-ink);
}
.journal-light .comic-board-frame {
  border-color: rgba(28, 25, 22, 0.12);
  background: #fff;
  box-shadow: 0 18px 40px rgba(28, 25, 22, 0.08);
}
.journal-light .comic-board-frame img {
  filter: contrast(1.02) brightness(1.02);
}
.journal-light .comic-phone {
  background: #fff;
  border-color: rgba(28, 25, 22, 0.12);
  color: var(--jl-ink);
}
.journal-light .pricing-card {
  background: rgba(255, 252, 247, 0.92);
  border-color: rgba(28, 25, 22, 0.12);
  color: var(--jl-ink);
}
.journal-light .pricing-card-featured {
  background: rgba(184, 154, 106, 0.12);
  border-color: rgba(138, 109, 61, 0.45);
}
.journal-light .pricing-card h3,
.journal-light .founding-offer h3 {
  color: var(--jl-ink);
}
.journal-light .founding-offer li,
.journal-light .pricing-card li,
.journal-light .pricing-price {
  color: var(--jl-ink-soft);
}

/* Home /#pricing — never inherit journal-light lined paper (chapter lens owns the look) */
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter,
.journal-light .comic-journal > .comic-panel.pricing-chapter {
  background: #080808;
  background-image: none;
  background-color: #080808;
  color: #f4ebdd;
  box-shadow: none;
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .comic-page-num,
.journal-light .comic-journal > .comic-panel.pricing-chapter .comic-page-num,
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .chapter-roman-mark,
.journal-light .comic-journal > .comic-panel.pricing-chapter .chapter-roman-mark {
  color: #c9a05a;
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter h2,
.journal-light .comic-journal > .comic-panel.pricing-chapter h2 {
  color: #f7f3eb;
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .comic-body,
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-refresh-intro,
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-share-line,
.journal-light .comic-journal > .comic-panel.pricing-chapter .comic-body,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-refresh-intro,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-share-line {
  color: var(--text-on-dark);
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-card,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-card {
  background: rgba(10, 10, 10, 0.55);
  border-color: rgba(185, 138, 71, 0.28);
  color: #f4ebdd;
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-card-featured,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-card-featured {
  background: rgba(18, 16, 12, 0.72);
  border-color: rgba(201, 160, 90, 0.55);
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-card h3,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-card h3 {
  color: #c9a05a;
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-price,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-price {
  color: #f4ebdd;
}
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .pricing-price span,
.journal-light .comic-journal > .comic-panel.pricing-chapter .pricing-price span {
  color: #f4ebdd;
  opacity: 1;
}

/* Home /#faq — never inherit journal-light lined paper */
.journal-light .comic-journal > #faq.comic-panel.faq-chapter,
.journal-light .comic-journal > .comic-panel.faq-chapter {
  background: #11100e;
  background-image:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(185, 138, 71, 0.12), transparent 62%);
  background-color: #11100e;
  color: #f4ebdd;
  box-shadow: none;
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .comic-page-num,
.journal-light .comic-journal > .comic-panel.faq-chapter .comic-page-num,
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .chapter-roman-mark,
.journal-light .comic-journal > .comic-panel.faq-chapter .chapter-roman-mark,
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .faq-chapter-kicker,
.journal-light .comic-journal > .comic-panel.faq-chapter .faq-chapter-kicker {
  color: var(--accent-on-dark);
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter h2,
.journal-light .comic-journal > .comic-panel.faq-chapter h2 {
  color: #f4ebdd;
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .faq-intro,
.journal-light .comic-journal > .comic-panel.faq-chapter .faq-intro {
  color: var(--text-on-dark);
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .faq-group details,
.journal-light .comic-journal > .comic-panel.faq-chapter .faq-group details {
  border-bottom-color: rgba(185, 138, 71, 0.22);
  background: transparent;
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .faq-group details summary,
.journal-light .comic-journal > .comic-panel.faq-chapter .faq-group details summary {
  color: #f4ebdd;
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .faq-group details p,
.journal-light .comic-journal > .comic-panel.faq-chapter .faq-group details p {
  color: var(--text-muted-on-dark);
}
.journal-light .comic-journal > #faq.comic-panel.faq-chapter .btn-ghost,
.journal-light .comic-journal > .comic-panel.faq-chapter .btn-ghost,
.journal-light .comic-journal > #pricing.comic-panel.pricing-chapter .btn-ghost,
.journal-light .comic-journal > .comic-panel.pricing-chapter .btn-ghost {
  color: var(--accent-on-dark) !important;
  border-color: rgba(185, 138, 71, 0.85);
  background: transparent;
}

.journal-light .band-dark {
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.65), rgba(232, 225, 212, 0.9)),
    #efe8dc;
  border-block-color: var(--jl-line);
}
.journal-light .faq-book,
.journal-light .journal-page {
  color: var(--jl-ink);
}
.journal-light .faq-book h2,
.journal-light .faq-group details summary {
  color: var(--jl-ink);
}
.journal-light .faq-group details {
  border-color: var(--jl-line);
}
.journal-light .faq-group details p {
  color: var(--jl-ink-soft);
}
.journal-light #signup {
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(184, 154, 106, 0.14), transparent 70%),
    linear-gradient(180deg, #f6f1e8 0%, #ebe3d4 100%);
}
.journal-light .signup-form label,
.journal-light .legal-check,
.journal-light .signup-plain,
.journal-light .signup-plain-box,
.journal-light .signup-founding-line,
.journal-light .signup-next-hint {
  color: var(--jl-ink-soft);
}
.journal-light .signup-form input,
.journal-light .signup-form input[type="tel"] {
  background: #fff;
  color: var(--jl-ink);
  border-color: rgba(28, 25, 22, 0.18);
}
.journal-light .signup-mode {
  color: var(--jl-ink-soft);
  border-color: rgba(28, 25, 22, 0.14);
}
.journal-light .signup-mode.is-active {
  color: var(--jl-ink);
  border-color: rgba(138, 109, 61, 0.55);
  background: rgba(184, 154, 106, 0.12);
}
.journal-light .site-footer {
  color: var(--jl-ink-soft);
  border-top-color: var(--jl-line);
  background: #ebe4d6;
}
.journal-light .site-footer > p:not(.micro) {
  color: var(--jl-gold);
}
.journal-light a {
  color: var(--jl-gold);
}

@keyframes jlHeroSettle {
  from { transform: scale(1.04); opacity: 0.72; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes jlCopyIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-light .comic-light-hero .comic-hero-plane img,
  .journal-light .comic-light-hero .comic-copy {
    animation: none !important;
  }
}
@media (max-width: 800px) {
  .journal-light .comic-light-hero {
    min-height: min(68vh, 32rem);
  }
  .journal-light .comic-light-hero .comic-hero-plane img {
    object-position: center 30%;
  }
  .journal-light .comic-light-hero .comic-hero-veil,
  .journal-light .comic-sunglass-hero .comic-hero-veil {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.68) 42%, rgba(0, 0, 0, 0.92) 100%),
      radial-gradient(100% 60% at 50% 10%, rgba(180, 190, 210, 0.06) 0%, transparent 55%);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.7);
  }
  .journal-light .comic-light-hero .comic-copy {
    background: rgba(4, 4, 6, 0.62);
  }
  .comic-spread-overlay.comic-spread-brand .hero-wordmark {
    width: min(100%, 17rem);
    max-height: 5.75rem;
  }
  .comic-spread-overlay.comic-spread-brand {
    align-items: end;
    max-width: none;
  }
  /* Home mobile drawer stays Black Leather + Warm Gold — Sep 25 chrome */
  .journal-light .site-header[data-site-nav] .site-nav {
    background: rgba(17, 16, 14, 0.98);
    border-bottom-color: rgba(185, 138, 71, 0.22);
  }
  .journal-light .site-header[data-site-nav] .site-nav a:not(.btn) {
    border-bottom-color: rgba(185, 138, 71, 0.16);
    color: var(--accent-on-dark);
    font-family: var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .journal-light .site-header[data-site-nav] .site-nav a:not(.btn):hover,
  .journal-light .site-header[data-site-nav] .site-nav a.is-active,
  .journal-light .site-header[data-site-nav] .site-nav a[aria-current="page"] {
    color: #c9a05a;
  }
  .journal-light .site-header[data-site-nav] .site-nav .btn-gold {
    color: #11100e !important;
  }
}