/* ============================================================================
 * LÝ MAISON — Design System (v2)
 * ============================================================================
 * "Saigon × Hanoi · a literary publication printed in 1923, designed today,
 *  with a Vietnamese soul and a French maison's discipline."
 *
 * Hero: navy field with twinkling stars, ivory text overlay
 * Rest: navy on ivory, editorial Cormorant Garamond throughout
 * Logos: 01 Editorial Italic (wordmark) + 06 Stacked Plaque (architectural)
 * No accent color — navy + ivory only
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,ital,wght@6..96,0,400;6..96,0,500;6..96,1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500&family=Noto+Serif+TC:wght@300;400&display=swap');

:root {
  /* ───── Palette ──────────────────────────────────────────────── */
  --navy:        #142847;
  --navy-2:      #0e1f3b;
  --navy-3:      #2a3b5e;
  --ivory:       #f5f1e6;
  --ivory-2:     #ebe4d2;
  --ivory-3:     #fbf9f0;

  --ink:         var(--navy);
  --paper:       var(--ivory);

  --muted:       rgba(20, 40, 71, 0.62);
  --muted-2:     rgba(20, 40, 71, 0.42);
  --muted-3:     rgba(20, 40, 71, 0.28);

  --hair:        rgba(20, 40, 71, 0.10);
  --hair-soft:   rgba(20, 40, 71, 0.05);
  --hair-strong: rgba(20, 40, 71, 0.22);
  --hair-on-navy: rgba(245, 241, 230, 0.15);

  /* ───── Type ─────────────────────────────────────────────────── */
  --display:     'Cormorant Garamond', 'Times New Roman', serif;
  --tracked:     'Bodoni Moda', 'Cormorant Garamond', serif;
  --ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hannom:      'Noto Serif TC', 'Songti SC', serif;
  /* Phase D: report body uses Crimson Pro for long-form reading comfort.
   * Cormorant Garamond stays for headings and brand display. */
  --report-body: 'Crimson Pro', 'Cormorant Garamond', 'Times New Roman', serif;

  /* ───── Spacing ──────────────────────────────────────────────── */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 1.8rem;
  --s5: 2.8rem;
  --s6: 4.5rem;
  --s7: 10.5rem;

  /* ───── Measures ─────────────────────────────────────────────── */
  --measure:       38rem;
  --measure-wide:  56rem;
  --measure-page:  78rem;
  /* Phase D: narrower column specifically for report body — improves
   * readability for the long-form generated content. */
  --measure-report: 32rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (max-width: 720px) { html { font-size: 16px; } }

body {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

main, header, footer, section, nav { position: relative; }

/* ════════════════════════════════════════════════════════════════════════════
 * Typography
 * ════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

h1, .display-1 {
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

h2, .display-2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--s3);
}

h3, .display-3 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-bottom: var(--s2);
}

h4 {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

p { margin-bottom: var(--s2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 500; color: var(--ink); }
em {
  font-style: italic;
  font-family: var(--display);
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s;
}
a:hover { opacity: 0.65; }

/* Eyebrow / kicker — sits above a title */
.kicker {
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
  display: inline-block;
}
.kicker::before { content: ', '; letter-spacing: 0; opacity: 0.7; }

/* Roman numeral, used in methodology */
.numeral {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--muted);
  line-height: 1;
  display: block;
  margin-bottom: var(--s2);
}

/* Drop cap for long-form opening paragraph */
.dropcap::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 5.2em;
  float: left;
  line-height: 0.88;
  margin: 0.08em 0.1em 0 -0.05em;
  color: var(--ink);
}

/* Pull quote */
.pull {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.36;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: var(--measure);
  padding: var(--s4) 0;
  border-top: 0.5px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}

/* ════════════════════════════════════════════════════════════════════════════
 * Wordmark & Stacked plaque
 * ════════════════════════════════════════════════════════════════════════════ */

/* Logo 01 — Editorial Italic (nav, body, footer, letterhead) */
.wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  border: none;
  padding: 0;
}
.wordmark em {
  font-style: italic;
  font-weight: 400;
}
.wordmark:hover { color: var(--ink); border: none; opacity: 1; }

.wordmark-lg {
  font-size: 2.2rem;
  font-weight: 500;
}

.wordmark-xl {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Logo 06 — Stacked Plaque (hero, report header, signage) */
.plaque {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--ink);
  animation: plaque-breath 9s ease-in-out infinite alternate;
  transform-origin: center center;
}
.plaque .ly {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4.5rem, 9vw, 6.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.plaque .rule {
  width: 5.2em;
  height: 0.5px;
  background: currentColor;
  opacity: 0.55;
  margin: 0.9em 0;
}
.plaque .ms {
  font-family: var(--tracked);
  font-size: clamp(0.78rem, 1.2vw, 0.98rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  animation: tracking-breath 9s ease-in-out infinite alternate;
}

/* Plaque animations — MAISON letter-spacing oscillates, whole plaque scales
 * gently in sync. Both axes share the same 9-second rhythm so the plaque
 * reads as one unified, breathing object. Wider range than v1. */
@keyframes tracking-breath {
  from { letter-spacing: 0.28em; }
  to   { letter-spacing: 0.62em; }
}
@keyframes plaque-breath {
  from { transform: scale(1.0); }
  to   { transform: scale(1.035); }
}

/* Smaller plaque variant — for report header */
.plaque-sm .ly { font-size: 3.8rem; }
.plaque-sm .ms { font-size: 0.78rem; letter-spacing: 0.4em; }
.plaque-sm .rule { width: 4.4em; margin: 0.6em 0; }

/* ════════════════════════════════════════════════════════════════════════════
 * Layout primitives
 * ════════════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: 0 var(--s3);
  position: relative;
}
@media (min-width: 720px) {
  .container { padding: 0 var(--s4); }
}

.narrow {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.wide {
  max-width: var(--measure-wide);
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Nav (default — light, navy on ivory)
 * ════════════════════════════════════════════════════════════════════════════ */

.site-nav {
  padding: 2.4rem 0 1.6rem;
  background: var(--ivory);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 0.5px solid var(--hair);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
}
.site-nav-inner > .wordmark {
  justify-self: start;
  grid-column: 1;
}
.site-nav-center {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-self: center;
  grid-column: 2;
}
.site-nav-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-self: end;
  grid-column: 3;
}

/* Dark nav variant — applies when nav sits on its own dark band (landing hero).
 * For pages where the nav sits BEFORE a hero starts (about, method), the
 * default ivory nav is used instead (no .dark class). */
.site-nav.dark {
  background: var(--navy);
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.18);
  color: var(--ivory);
}
.site-nav.dark .wordmark { color: var(--ivory); }
.site-nav.dark .lang-toggle button { color: var(--ivory); border-color: var(--ivory); }
.site-nav.dark .lang-toggle button.is-active { background: var(--ivory); color: var(--navy); }
.site-nav.dark .btn-link { color: var(--ivory); border-bottom-color: var(--ivory); }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 0.5px solid var(--ink);
  overflow: hidden;
}
.lang-toggle button {
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 0.42em 0.95em;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: background 0.2s, color 0.2s;
}
.lang-toggle button + button { border-left: 0.5px solid currentColor; }
.lang-toggle button.is-active {
  background: var(--ink);
  color: var(--ivory);
}
.lang-toggle button:hover:not(.is-active) {
  opacity: 0.65;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Hero — starfield variant (only on landing index)
 * ════════════════════════════════════════════════════════════════════════════ */

.hero-starfield {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s4) 0 var(--s5);
  position: relative;
  overflow: hidden;
  min-height: 92vh;
}
.hero-starfield::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(14, 31, 59, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.starfield i {
  position: absolute;
  background: var(--ivory);
  border-radius: 50%;
}
.starfield i.tw {
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.92; }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s6) 0;
  gap: var(--s4);
  min-height: 70vh;
}
.hero-content .kicker {
  color: rgba(245, 241, 230, 0.7);
}
.hero-content .kicker::before { opacity: 0.5; }
.hero-content .plaque { color: var(--ivory); }
.hero-tagline-block { max-width: 32rem; }
.hero-tagline-vn {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.42;
  color: var(--ivory);
  margin-bottom: 0.7em;
}
.hero-tagline-en {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 241, 230, 0.55);
}
.hero-content .btn-primary {
  background: transparent;
  color: var(--ivory);
  border: 0.5px solid var(--ivory);
}
.hero-content .btn-primary:hover {
  background: var(--ivory);
  color: var(--navy);
}

/* ════════════════════════════════════════════════════════════════════════════
 * Sections (navy on ivory)
 * ════════════════════════════════════════════════════════════════════════════ */

section {
  padding: var(--s6) 0;
  position: relative;
}
section.section-tight { padding: var(--s5) 0; }
section + section { border-top: 0.5px solid var(--hair); }

.section-header {
  margin-bottom: var(--s5);
  max-width: var(--measure);
}
.section-header-asymm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
@media (min-width: 900px) {
  .section-header-asymm {
    grid-template-columns: 1fr 1.6fr;
    gap: var(--s5);
    align-items: end;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Methodology — the four systems
 * ════════════════════════════════════════════════════════════════════════════ */

.methodology {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 0.5px solid var(--ink);
}
@media (min-width: 720px) {
  .methodology { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .methodology { grid-template-columns: repeat(4, 1fr); }
}

.method-card {
  padding: var(--s4) var(--s3) var(--s3) 0;
  border-bottom: 0.5px solid var(--ink);
  position: relative;
}
@media (min-width: 720px) {
  .method-card { border-left: 0.5px solid var(--ink); padding-left: var(--s3); }
  .method-card:first-child { border-left: none; padding-left: 0; }
}
@media (min-width: 1024px) {
  .method-card { padding-right: var(--s3); }
}

.method-card h3 {
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: var(--s1);
  letter-spacing: -0.012em;
}
.method-card .method-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.method-card p {
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Manifesto block
 * ════════════════════════════════════════════════════════════════════════════ */

.manifesto {
  padding: var(--s6) 0;
  position: relative;
  background: var(--ivory-2);
  border-top: 0.5px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}
.manifesto-quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.42;
  color: var(--ink);
  max-width: 46rem;
  letter-spacing: -0.005em;
  position: relative;
}
.manifesto-quote::before {
  content: '"';
  font-family: var(--display);
  font-style: italic;
  font-size: 4.6rem;
  position: absolute;
  top: -0.05em;
  left: -0.45em;
  color: var(--muted-2);
  line-height: 1;
}
.manifesto .container { padding-left: calc(var(--s3) + 0.6rem); }
@media (min-width: 720px) {
  .manifesto .container { padding-left: calc(var(--s4) + 0.6rem); }
}
.manifesto-attribution {
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s3);
}

/* ════════════════════════════════════════════════════════════════════════════
 * Pricing — feels like a menu, not SaaS
 * ════════════════════════════════════════════════════════════════════════════ */

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  max-width: var(--measure-wide);
  margin: 0 auto;
}
@media (min-width: 720px) {
  .price-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

.price-card {
  background: var(--ivory);
  border: 0.5px solid var(--ink);
  padding: var(--s4) var(--s4);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.3s;
}
.price-card:hover {
  transform: translateY(-4px);
  background: var(--ivory-2);
}
.price-card .price-num {
  position: absolute;
  top: var(--s2);
  right: var(--s3);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--muted);
}
.price-card h3 {
  font-size: 1.95rem;
  font-weight: 500;
  margin-bottom: var(--s2);
  letter-spacing: -0.015em;
}
.price-card .price-tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.price-card .amount {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--ink);
  margin-bottom: var(--s4);
  letter-spacing: -0.025em;
  border-bottom: 0.5px solid var(--ink);
  padding-bottom: var(--s2);
}
.price-card .amount .unit {
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
}
.price-card ul {
  list-style: none;
  margin-bottom: var(--s4);
}
.price-card li {
  padding: 0.55em 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.55;
  display: flex;
  gap: 0.7rem;
}
.price-card li::before {
  content: '·';
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Buttons
 * ════════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--ui);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 1.05em 2.2em;
  border: 0.5px solid var(--ink);
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  line-height: 1;
  color: var(--ink);
}
.btn::after {
  content: '→';
  font-family: var(--display);
  font-style: italic;
  letter-spacing: 0;
  font-size: 1.1em;
  transition: transform 0.3s;
}
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--ivory);
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--ivory);
}

.btn-link {
  padding: 0.5em 0;
  color: var(--ink);
  border-bottom: 0.5px solid var(--ink);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.btn-link::after { content: ''; }
.btn-link:hover { opacity: 0.65; }

.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn:disabled:hover { transform: none; }
.btn:disabled::after { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
 * Forms
 * ════════════════════════════════════════════════════════════════════════════ */

.form-section {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 0.5px solid var(--hair);
}
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.form-section-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: var(--s3);
  color: var(--ink);
  letter-spacing: -0.015em;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-bottom: var(--s3);
}
.field label {
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--ink); margin-left: 0.2em; opacity: 0.5; }
.field-hint {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
}
.field-error {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.92rem;
  color: #a83232;
}

.field input,
.field select,
.field textarea {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--ink);
  padding: 0.55em 0;
  outline: none;
  transition: border-color 0.25s, opacity 0.25s;
  border-radius: 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  opacity: 1;
  border-bottom-width: 1px;
}
.field input::placeholder {
  color: var(--muted-2);
  opacity: 1;
  font-style: italic;
  font-weight: 400;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row-3 { grid-template-columns: 2fr 1fr 1fr; }
}

/* Tier selection — visually rich cards */
.tier-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
@media (min-width: 720px) {
  .tier-select { grid-template-columns: 1fr 1fr; }
}
.tier-option {
  display: block;
  cursor: pointer;
  border: 0.5px solid var(--hair-strong);
  padding: var(--s4);
  background: var(--ivory);
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  position: relative;
}
.tier-option:hover {
  border-color: var(--ink);
  background: var(--ivory-2);
}
.tier-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tier-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--ivory-2);
  box-shadow: 0 2px 0 var(--ink);
}
.tier-option:has(input:checked)::before {
  content: '·';
  position: absolute;
  top: 0;
  right: var(--s3);
  color: var(--ink);
  font-size: 2.2rem;
  line-height: 1;
}
.tier-option .label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 0.25em;
  letter-spacing: -0.012em;
}
.tier-option .price {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.tier-option .desc {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
  font-family: var(--display);
}

.partner-block {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 0.5px solid var(--hair);
}
[data-tier="single"] .partner-block { display: none; }

/* Segmented control */
.segments {
  display: inline-flex;
  border: 0.5px solid var(--ink);
  margin-top: var(--s1);
  flex-wrap: wrap;
}
.segments label {
  padding: 0.65em 1.3em;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-right: 0.5px solid var(--ink);
  transition: all 0.2s;
  background: transparent;
}
.segments label:last-child { border-right: none; }
.segments input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segments label:has(input:checked) {
  background: var(--ink);
  color: var(--ivory);
}
.segments label:hover:not(:has(input:checked)) {
  background: var(--hair);
}

/* ════════════════════════════════════════════════════════════════════════════
 * Status page — starfield + plaque centerpiece
 * ════════════════════════════════════════════════════════════════════════════ */

body.body-status { background: var(--navy); color: var(--ivory); }

/* ════════════════════════════════════════════════════════════════════════════
 * Report
 * ════════════════════════════════════════════════════════════════════════════ */

.report-wrap {
  padding: var(--s5) 0 var(--s5);
}
.report-header {
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 0.5px solid var(--ink);
  text-align: center;
}
.report-header .plaque { margin-bottom: var(--s2); }
.report-header .kicker { margin-bottom: 0; }
.report-toolbar {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s3);
}

.report-content {
  font-family: var(--report-body);
  font-weight: 400;
  font-size: 18.5px;
  line-height: 1.72;
  color: var(--ink);
  max-width: var(--measure-report);
  margin: 0 auto;
}
.report-content h1 {
  font-weight: 500;
  font-size: 2.6rem;
  margin-top: 0;
  margin-bottom: var(--s4);
  text-align: center;
  letter-spacing: -0.025em;
}
.report-content h2 {
  font-weight: 500;
  font-size: 1.75rem;
  margin-top: var(--s6);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 0.5px solid var(--hair-strong);
  letter-spacing: -0.015em;
}
.report-content h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 1.32rem;
  margin-top: var(--s4);
  margin-bottom: var(--s2);
  color: var(--ink);
}
.report-content h4 {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s4);
  margin-bottom: var(--s1);
}
.report-content p {
  margin-bottom: var(--s2);
  max-width: none;
}
.report-content strong {
  font-weight: 500;
  color: var(--ink);
}
.report-content em {
  font-style: italic;
  color: var(--ink);
}
.report-content blockquote {
  border-left: 0.5px solid var(--ink);
  padding: var(--s2) 0 var(--s2) var(--s3);
  margin: var(--s4) 0;
  font-style: italic;
  color: var(--ink);
  font-size: 1.2rem;
}
.report-content ul, .report-content ol {
  margin-bottom: var(--s3);
  padding-left: var(--s3);
}
.report-content li { margin-bottom: 0.65em; }
.report-content hr {
  border: none;
  height: 0.5px;
  background: var(--hair-strong);
  margin: var(--s4) auto;
  width: 6rem;
}
.report-content table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 0.95rem;
  margin: var(--s3) 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  page-break-inside: avoid;
}
.report-content th, .report-content td {
  text-align: left;
  padding: 0.7em 0.6em;
  border-bottom: 0.5px solid var(--hair);
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.report-content th {
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--muted);
}

/* Phase C: screen-only safety — if a wide table sneaks through, allow
 * horizontal scroll on narrow viewports rather than blowing out layout.
 * Desktop keeps native table display. */
@media screen and (max-width: 719px) {
  .report-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
  .report-content tbody, .report-content thead { display: revert; }
}

/* Quiet signature line at the end of the report */
.report-signature {
  text-align: center;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 0.5px solid var(--hair);
}
.report-signature .sig-rule {
  width: 5rem;
  height: 0.5px;
  background: var(--ink);
  margin: 0 auto var(--s3);
  opacity: 0.6;
}
.report-signature .sig-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--s1);
}
.report-signature .sig-line em { font-weight: 500; }
.report-signature .sig-claim {
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.report-signature .moon-icon {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Footer + lunar indicator
 * ════════════════════════════════════════════════════════════════════════════ */

footer.site-footer {
  padding: var(--s5) 0 var(--s4);
  font-size: 0.86rem;
  color: var(--muted);
}
/* Luna moth crest, centered above footer content (navy on ivory) */
footer.site-footer::before {
  content: "";
  display: block;
  width: 46px;
  height: 47px;
  margin: 0 auto var(--s3);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2230%2060%20160%20165%22%20width%3D%22160%22%20height%3D%22165%22%3E%3Cg%20fill%3D%22%23f5f1e6%22%3E%3Cellipse%20cx%3D%22110%22%20cy%3D%22118%22%20rx%3D%226%22%20ry%3D%2230%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2284%22%20r%3D%227%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23f5f1e6%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M106%2080%20C96%2070%2088%2064%2080%2054%22/%3E%3Cpath%20d%3D%22M114%2080%20C124%2070%20132%2064%20140%2054%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23f5f1e6%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M101%2075%20l-5%20-2%20M99%2072%20l-5%20-2%20M97%2069%20l-5%20-2%20M95%2066%20l-5%20-2%20M93%2063%20l-5%20-2%22/%3E%3Cpath%20d%3D%22M101%2075%20l5%202%20M99%2072%20l5%202%20M97%2069%20l5%202%20M95%2066%20l5%202%20M93%2063%20l5%202%22/%3E%3Cpath%20d%3D%22M119%2075%20l5%20-2%20M121%2072%20l5%20-2%20M123%2069%20l5%20-2%20M125%2066%20l5%20-2%20M127%2063%20l5%20-2%22/%3E%3Cpath%20d%3D%22M119%2075%20l-5%202%20M121%2072%20l-5%202%20M123%2069%20l-5%202%20M125%2066%20l-5%202%20M127%2063%20l-5%202%22/%3E%3C/g%3E%3Cpath%20d%3D%22M105%2096%20C80%2080%2048%2082%2034%20100%20C26%20110%2030%20124%2044%20130%20C60%20137%2084%20134%2098%20120%20C103%20113%20105%20104%20105%2096%20Z%22/%3E%3Cpath%20d%3D%22M115%2096%20C140%2080%20172%2082%20186%20100%20C194%20110%20190%20124%20176%20130%20C160%20137%20136%20134%20122%20120%20C117%20113%20115%20104%20115%2096%20Z%22/%3E%3Cpath%20d%3D%22M104%20130%20C90%20134%2073%20147%2069%20168%20C67%20182%2074%20196%2080%20207%20C85%20217%2093%20212%2095%20199%20C98%20178%20102%20150%20104%20134%20Z%22/%3E%3Cpath%20d%3D%22M116%20130%20C130%20134%20147%20147%20151%20168%20C153%20182%20146%20196%20140%20207%20C135%20217%20127%20212%20125%20199%20C122%20178%20118%20150%20116%20134%20Z%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  align-items: end;
}
@media (min-width: 720px) {
  .site-footer-inner { grid-template-columns: 1fr auto auto; }
}
.site-footer-tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.96rem;
  color: var(--muted);
  margin-top: var(--s1);
}
.site-footer-meta {
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Lunar indicator — small footer detail */
.lunar {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lunar .lunar-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
.lunar .lunar-icon {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 0.5px solid currentColor;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Lunar phase shapes */
.lunar[data-phase="new"]    .lunar-icon { background: transparent; }
.lunar[data-phase="waxing"] .lunar-icon { background: linear-gradient(90deg, transparent 50%, currentColor 50%); }
.lunar[data-phase="full"]   .lunar-icon { background: currentColor; }
.lunar[data-phase="waning"] .lunar-icon { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* Lunar on navy hero */
.hero-content .lunar,
.site-nav.dark .lunar {
  color: rgba(245, 241, 230, 0.7);
}
.hero-content .lunar .lunar-name,
.site-nav.dark .lunar .lunar-name { color: var(--ivory); }

/* ════════════════════════════════════════════════════════════════════════════
 * Page-load animations
 * ════════════════════════════════════════════════════════════════════════════ */

.fade-in {
  opacity: 0;
  animation: fadeIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s forwards;
}
.fade-in-stagger > * {
  opacity: 0;
  animation: fadeIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.fade-in-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.22s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.38s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.52s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.64s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.74s; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Utilities
 * ════════════════════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-muted { color: var(--muted); }
.text-ivory { color: var(--ivory); }
.italic { font-style: italic; }
.serif { font-family: var(--display); }
.center { text-align: center; }

[data-i18n-mode="vi"] .lang-en { display: none; }
[data-i18n-mode="en"] .lang-vi { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
 * Print
 * ════════════════════════════════════════════════════════════════════════════ */

@media print {
  @page {
    size: A4;
    margin: 18mm 0 16mm 0;
    background: #faf7f0;
  }
  html { font-size: 11pt; }
  body { background: #faf7f0; color: black; }
  body::before, body::after { display: none; }

  .site-nav, .report-toolbar, .site-footer, .no-print { display: none !important; }

  .report-wrap { padding: 0; }
  .report-header { margin-bottom: 1.5cm; border-bottom: 0.5pt solid black; }

  .plaque .ly { color: black; }
  .plaque .ms { color: black; animation: none; letter-spacing: 0.42em; }
  .plaque .rule { background: black; opacity: 1; }

  .report-content { color: black; font-size: 11pt; line-height: 1.65; max-width: 100%; }
  .report-content h1, .report-content h2, .report-content h3 {
    page-break-after: avoid; color: black;
  }
  .report-content h1 { font-size: 24pt; }
  .report-content h2 { font-size: 17pt; margin-top: 24pt; }
  .report-content h3 { font-size: 13pt; margin-top: 16pt; }
  .report-content h4 { font-size: 9pt; }
  .report-content p, .report-content li { orphans: 3; widows: 3; }
  .report-content blockquote { page-break-inside: avoid; }

  /* Phase C: print-specific table rules. Screen rules use display:block +
   * overflow on narrow viewports; print needs real table semantics back. */
  .report-content table {
    display: table !important;
    table-layout: fixed;
    width: 100%;
    overflow: visible;
    font-size: 9.5pt;
    page-break-inside: auto;
  }
  .report-content thead { display: table-header-group; }
  .report-content tr { page-break-inside: avoid; }
  .report-content th, .report-content td {
    padding: 0.5em 0.5em;
    font-size: 9.5pt;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .report-content th {
    font-size: 7.5pt;
    letter-spacing: 0.08em;
  }

  /* Phase C: report signature survives print cascade. Previously relied on
   * default visibility and inherited screen colors; now explicit. */
  .report-signature {
    display: block !important;
    page-break-before: avoid;
    margin-top: 1cm;
    color: black;
  }
  .report-signature .sig-rule { background: black; opacity: 0.5; }
  .report-signature .sig-line { color: black; }
  .report-signature .sig-claim { color: black; opacity: 0.7; }

  a { color: inherit; border-bottom: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }

  @page {
    background: #faf7f0;
    @bottom-center {
      content: "Lý Maison  ·  " counter(page);
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-size: 9pt;
      color: #8a8470;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Phase E — Landing v3 additions
 *
 *   - Bilingual hero headline (English + Vietnamese counterpart)
 *   - Five-mirror methodology specimen (replaces four-card grid)
 *   - Method-flow sentence (the five lenses in conversation)
 *   - Updated manifesto + passage styling
 *
 * All new classes prefixed `.lm-` so they don't collide with existing rules.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Hero bilingual headline block */
.lm-headline {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ivory);
  margin: 0 0 0.6rem;
}
.lm-headline em { font-style: italic; }
.lm-headline-vi {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.3;
  opacity: 0.72;
  color: var(--ivory);
  margin: 0 0 1.5rem;
}
.lm-tagline-italic {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.5;
  color: var(--ivory);
  opacity: 0.85;
  max-width: 28rem;
  margin: 0 auto;
}

/* Five-mirror methods section
 * Replaces the four-card grid with a typographic specimen list. */
.lm-mirrors {
  max-width: 38rem;
  margin: 0 auto;
}
.lm-mirror {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1.2rem;
  padding: 1.4rem 0;
  align-items: baseline;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.18);
}
.lm-mirror:last-child { border-bottom: 0; }
.lm-mirror-rune {
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  opacity: 0.6;
  text-align: center;
  padding-top: 0.18rem;
}
.lm-mirror-body { min-width: 0; }
.lm-mirror-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 0.7rem;
  margin-bottom: 0.35rem;
}
.lm-mirror-name {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
}
.lm-mirror-name-en {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.55;
}
.lm-mirror-essence {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  opacity: 0.85;
  margin: 0 0 0.2rem;
}
.lm-mirror-desc {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.78;
  margin: 0;
}

/* Method-flow sentence — the five lenses in conversation */
.lm-flow {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.78;
  max-width: 32rem;
  margin: 2.2rem auto 0;
  text-align: center;
  opacity: 0.82;
}
.lm-flow .lens {
  font-family: var(--display);
  font-style: italic;
  opacity: 1;
}
.lm-flow .arr {
  opacity: 0.45;
  margin: 0 0.35em;
  font-style: normal;
}

/* Section header centered variant (used for the new mirror + pricing sections) */
.lm-section-header {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--s4);
}
.lm-section-header .display-2 {
  font-style: italic;
  font-weight: 300;
}
.lm-section-header p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.82;
  margin: var(--s2) auto 0;
  max-width: 30rem;
}

/* Passage section — replaces the Yin Wood pull-quote */
.lm-passage {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s5) 0;
}
.lm-passage .container { text-align: center; }
.lm-passage-quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--ivory);
  max-width: 32rem;
  margin: 0 auto 1.2rem;
}
.lm-passage-attr {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--ivory);
  margin: 0;
}
.lm-passage .kicker { color: var(--ivory); opacity: 0.65; }


/* ════════════════════════════════════════════════════════════════════════════
 * Phase E — Landing v4 (Well diagram + hover panel + ritual)
 *
 * Supersedes the v3 .lm-mirror specimen list. The pentagon-arranged Well
 * diagram with hover-reveal panels is now the canonical mirrors section.
 *
 * All new classes are .lm-well-*, .lm-mirror-*, .lm-ritual-*, plus a few
 * additions to existing .lm-* and .price-card patterns.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Hero — plaque-centered composition */
.hero-content-centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s5) var(--s3) var(--s5);
  position: relative;
  z-index: 3;
  min-height: 88vh;
}
.hero-content-centered .plaque {
  margin: 0 auto var(--s4);
  color: var(--ivory);
}
.hero-content-centered .plaque .rule { background: var(--ivory); }
.lm-hero-headline {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  color: var(--ivory);
  margin: var(--s2) 0 var(--s2);
  max-width: 32rem;
}
.lm-hero-headline em { font-style: italic; }
.lm-hero-sub {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: var(--ivory);
  opacity: 0.78;
  margin: 0 auto var(--s4);
  max-width: 30rem;
}

/* Section header centered (mirrors, ritual, pricing) */
.lm-section-header {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--s4);
}
.lm-section-header .display-2 {
  font-style: normal;
  font-weight: 300;
}
.lm-section-header .display-2 em { font-style: italic; }
.lm-section-header p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.82;
  margin: var(--s2) auto 0;
  max-width: 30rem;
}

/* Mirrors section background + spacing */
.lm-mirrors-section {
  background: var(--ivory);
  padding: var(--s5) 0 var(--s5);
}

/* The Well diagram wrapper */
.lm-well-wrap {
  position: relative;
  max-width: 540px;
  margin: var(--s4) auto var(--s4);
  aspect-ratio: 1 / 1;
}
.lm-well-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mirror trigger buttons — positioned at pentagon points */
.lm-mirror-pt {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 110px;
  background: none;
  border: none;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--navy);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.lm-mirror-pt:focus { outline: none; }
.lm-mirror-pt:focus-visible {
  outline: 1px dashed rgba(20, 40, 71, 0.5);
  outline-offset: 4px;
}
.lm-mirror-pt:hover,
.lm-mirror-pt.is-active {
  transform: translate(-50%, -52%) scale(1.04);
}
.lm-mirror-pt:hover .lm-mirror-pt-glyph,
.lm-mirror-pt.is-active .lm-mirror-pt-glyph {
  opacity: 1;
}
.lm-mirror-pt-glyph {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  display: block;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.lm-mirror-pt-name {
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.1;
  display: block;
  margin-top: 0.3rem;
  opacity: 0.8;
}
.lm-mirror-pt-essence {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.78rem;
  display: block;
  margin-top: 0.1rem;
  opacity: 0.55;
}

/* Well center — Bạn / You */
.lm-well-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.lm-well-center-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.78;
  margin: 0;
}
.lm-well-center-you {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--ivory);
  margin: 0.4rem 0 0;
  line-height: 1;
}

/* Specimen popup — floats over the diagram, anchored to the active mirror.
 * Replaces the previous below-the-diagram panel. Each mirror trigger sets
 * --anchor-x and --anchor-y via JS; CSS then offsets relative to that anchor
 * using a class on the popup itself (`lm-popup-pos-*`).
 */
.lm-mirror-popup {
  position: absolute;
  width: clamp(18rem, 26vw, 22rem);
  background: var(--ivory);
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  box-shadow: 0 12px 40px -8px rgba(14, 31, 59, 0.18),
              0 2px 8px -2px rgba(14, 31, 59, 0.08);
  padding: 1.4rem 1.5rem 1.3rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 10;
  /* Anchor position is set via JS — these custom properties are read by the
   * positional class rules below. */
}
.lm-mirror-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Five anchor positions — each leans toward the centre of the well. */
.lm-mirror-popup.lm-popup-pos-top {
  left: var(--anchor-x);
  top: var(--anchor-y);
  transform: translate(-50%, -110%) translateY(-12px);
}
.lm-mirror-popup.lm-popup-pos-top.is-visible {
  transform: translate(-50%, -110%) translateY(-4px);
}
.lm-mirror-popup.lm-popup-pos-right {
  left: var(--anchor-x);
  top: var(--anchor-y);
  transform: translate(20px, -50%);
}
.lm-mirror-popup.lm-popup-pos-right.is-visible {
  transform: translate(28px, -50%);
}
.lm-mirror-popup.lm-popup-pos-bottom-right {
  left: var(--anchor-x);
  top: var(--anchor-y);
  transform: translate(-50%, 30px);
}
.lm-mirror-popup.lm-popup-pos-bottom-right.is-visible {
  transform: translate(-50%, 38px);
}
.lm-mirror-popup.lm-popup-pos-bottom-left {
  left: var(--anchor-x);
  top: var(--anchor-y);
  transform: translate(-50%, 30px);
}
.lm-mirror-popup.lm-popup-pos-bottom-left.is-visible {
  transform: translate(-50%, 38px);
}
.lm-mirror-popup.lm-popup-pos-left {
  left: var(--anchor-x);
  top: var(--anchor-y);
  transform: translate(-100%, -50%) translateX(-20px);
}
.lm-mirror-popup.lm-popup-pos-left.is-visible {
  transform: translate(-100%, -50%) translateX(-28px);
}

/* Popup interior */
.lm-popup-inner {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  align-items: baseline;
}
.lm-popup-glyph {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.85rem;
  color: var(--navy);
  opacity: 0.92;
  line-height: 1;
  text-align: center;
  padding-top: 0.1rem;
}
.lm-popup-body-wrap { min-width: 0; }
.lm-popup-name {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}
.lm-popup-origin {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.6;
  margin: 0 0 0.7rem;
}
.lm-popup-body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.85;
  margin: 0;
}

/* Dismiss button — small, top-right corner of popup */
.lm-popup-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--navy);
  opacity: 0.4;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: opacity 0.18s ease;
}
.lm-popup-close:hover { opacity: 0.85; }
.lm-popup-close:focus-visible { outline: 1px dashed rgba(20, 40, 71, 0.5); outline-offset: 2px; }

/* When any mirror is active, the inactive mirrors fade slightly — focus the
 * attention without darkening the whole stage. */
.lm-well-wrap.is-focused .lm-mirror-pt.is-dim { opacity: 0.42; }
.lm-mirror-pt { transition: opacity 0.28s ease, transform 0.3s ease; }

/* Mobile: anchor to centre instead, use full-width banner. Keeps popups
 * legible on small screens where edge-positioned popups would clip. */
@media (max-width: 640px) {
  .lm-mirror-popup,
  .lm-mirror-popup.lm-popup-pos-top,
  .lm-mirror-popup.lm-popup-pos-right,
  .lm-mirror-popup.lm-popup-pos-bottom-right,
  .lm-mirror-popup.lm-popup-pos-bottom-left,
  .lm-mirror-popup.lm-popup-pos-left {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    width: min(90vw, 22rem);
  }
  .lm-mirror-popup.is-visible {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Hide the popup-source spans that carry i18n payload — they're data, not display */
.lm-popup-source { display: none; }


/* The Ritual section — navy-grounded (Hero→Mirrors→Pricing→Ritual→House…) */
.lm-ritual {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s5) 0;
}
.lm-ritual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .lm-ritual-grid {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s5);
  }
}
.lm-ritual-prose .kicker { color: var(--navy); opacity: 0.7; }
.lm-ritual-prose .display-2 {
  color: var(--navy);
  font-weight: 300;
  margin-top: var(--s2);
}
.lm-ritual-prose .display-2 em { font-style: italic; }
.lm-ritual-prose .text-muted {
  color: var(--navy);
  opacity: 0.82;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.75;
  margin-top: var(--s3);
}
.lm-ritual-pull {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.75;
  padding-left: 1rem;
  border-left: 0.5px solid rgba(20, 40, 71, 0.32);
  margin: var(--s4) 0 0;
}
.lm-ritual-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding-top: 0.4rem;
}
.lm-ritual-step {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.2rem;
  align-items: flex-start;
}
.lm-ritual-num {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tracked);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--navy);
  opacity: 0.85;
}
.lm-ritual-step-title {
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--navy);
  margin: 0.25rem 0 0.4rem;
}
.lm-ritual-step-body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--navy);
  opacity: 0.82;
  margin: 0 0 0.7rem;
}
.lm-ritual-step-mech {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.58;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 0.5px solid rgba(20, 40, 71, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.lm-ritual-step-mech-label {
  font-family: var(--tracked);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
  color: var(--navy);
  flex-shrink: 0;
}

/* Featured price card (compatibility) — "Most chosen" badge */
.price-card-featured { position: relative; }
.price-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--tracked);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  z-index: 2;
}

/* Footer lineage line */
.site-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
}
.site-footer-meta-lineage {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0.65;
  max-width: 24rem;
  letter-spacing: 0;
  text-transform: none;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase E — Landing v5 additions (8-sections accordion, House of Lý, price-trust,
 * second CTA). Each section sits on ivory or alternates with navy.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Eight sections accordion ─── */
.lm-sections-section {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s5) 0;
}
.lm-sections-section .lm-section-header .kicker { color: var(--ivory); opacity: 0.7; }
.lm-sections-section .lm-section-header .display-2 {
  color: var(--ivory);
  font-weight: 300;
}
.lm-sections-section .lm-section-header .display-2 em { font-style: italic; }
.lm-sections-section .lm-section-header p {
  color: var(--ivory);
  opacity: 0.82;
}
.lm-sections-list {
  max-width: 44rem;
  margin: var(--s4) auto 0;
}
.lm-section-item {
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.22);
}
.lm-section-item:first-of-type {
  border-top: 0.5px solid rgba(245, 241, 230, 0.22);
}
.lm-section-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 3rem 1fr 1.5rem;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.6rem 0.5rem;
  transition: background 0.2s ease;
}
.lm-section-summary::-webkit-details-marker { display: none; }
.lm-section-summary:hover {
  background: rgba(245, 241, 230, 0.04);
}
.lm-section-num {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--ivory);
  opacity: 0.62;
  text-align: center;
  line-height: 1;
  padding-top: 0.1rem;
}
.lm-section-meta {
  min-width: 0;
}
.lm-section-name {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.2;
}
.lm-section-lede {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ivory);
  opacity: 0.7;
  margin-top: 0.35rem;
}
.lm-section-chevron {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ivory);
  opacity: 0.6;
  transition: transform 0.25s ease;
  text-align: center;
  padding-top: 0.1rem;
}
.lm-section-item[open] .lm-section-chevron {
  transform: rotate(45deg);
}
.lm-section-detail {
  padding: 0 0.5rem 1.7rem;
  margin-left: 4.4rem;
  animation: lm-accordion-fade 0.32s ease;
}
@keyframes lm-accordion-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lm-section-excerpt-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.6;
  margin: 0 0 0.7rem;
}
.lm-section-excerpt {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ivory);
  opacity: 0.88;
  margin: 0;
  max-width: 36rem;
}

/* ─── House of Lý section — slim, two-column with frontispiece SVG ─── */
.lm-house {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s5) 0;
}
.lm-house-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  align-items: center;
}
@media (min-width: 820px) {
  .lm-house-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s5);
  }
}
.lm-house-intro .kicker { color: var(--ivory); opacity: 0.7; }
.lm-house-intro .display-2 {
  color: var(--ivory);
  font-weight: 300;
  margin-top: var(--s2);
}
.lm-house-intro .display-2 em { font-style: italic; }
.lm-house-prose {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ivory);
  opacity: 0.82;
  margin: var(--s3) 0 0;
  max-width: 32rem;
}
.lm-house-frontispiece {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.lm-house-frontispiece svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 820px) {
  .lm-house-frontispiece {
    max-width: 320px;
    margin-top: var(--s2);
  }
}

/* ─── Price-trust block under price cards ─── */
.lm-price-trust {
  max-width: 38rem;
  margin: var(--s4) auto 0;
  text-align: center;
}
.lm-price-trust-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  color: var(--navy);
  opacity: 0.85;
  margin: 0 0 0.9rem;
}
.lm-price-trust-label {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.55;
}
.lm-price-trust-delivery {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.72;
  margin: 0 auto;
  max-width: 30rem;
}

/* ─── Second CTA section ─── */
.lm-second-cta {
  background: var(--ivory);
  padding: var(--s5) 0;
}
.lm-second-cta-inner {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}
.lm-second-cta-inner .display-2 {
  font-style: italic;
  font-weight: 300;
  margin: var(--s2) 0;
}
.lm-second-cta-sub {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy);
  opacity: 0.75;
  margin: 0 0 var(--s4);
}

/* ─── Mobile responsive adjustments ─── */
@media (max-width: 640px) {
  .lm-section-summary {
    grid-template-columns: 2rem 1fr 1.2rem;
    gap: 0.8rem;
    padding: 1.3rem 0.25rem;
  }
  .lm-section-num { font-size: 0.78rem; }
  .lm-section-name { font-size: 1.1rem; }
  .lm-section-lede { font-size: 0.86rem; }
  .lm-section-detail {
    margin-left: 2.8rem;
    padding-right: 0;
  }
  .lm-section-excerpt { font-size: 0.95rem; }

  .lm-house-intro .display-2,
  .lm-second-cta-inner .display-2 {
    font-size: 1.8rem;
  }

  .lm-price-trust-methods {
    flex-direction: column;
    gap: 0.4rem;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase F additions — FAQ + Moonlight popup + status progress + gift-soon tag
 * + Crimson Pro system push for long-form body
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Crimson Pro system push for long-form body ────────────────────────────
 *  Ensures body prose uses Crimson Pro consistently. Cormorant stays for
 *  display moments only (headlines, plaque, italic pull-quotes).
 */
.text-muted,
.kicker + p,
.lm-section-header > p,
.lm-house-prose,
.manifesto-quote,
.lm-second-cta-sub {
  font-family: 'Crimson Pro', Georgia, serif;
}

/* ─── FAQ section ───────────────────────────────────────────────────────────
 *  Sits between manifesto (navy) and second-cta (ivory) — so FAQ is ivory.
 *  Same accordion pattern as the 8-sections block, simplified for Q+A.
 */
.lm-faq {
  background: var(--ivory);
  color: var(--navy);
  padding: var(--s5) 0;
}
.lm-faq .lm-section-header {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--s4);
}
.lm-faq .lm-section-header .kicker { opacity: 0.7; }
.lm-faq .lm-section-header > p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy);
  opacity: 0.78;
  margin-top: var(--s2);
}
.lm-faq-list {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 1.2rem;
}
@media (max-width: 1024px) {
  .lm-faq-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lm-faq-list { grid-template-columns: 1fr; gap: 0.4rem; max-width: 42rem; }
}
.lm-faq-item {
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.18);
}
.lm-faq-item:first-of-type {
  border-top: 0.5px solid rgba(20, 40, 71, 0.18);
}
/* In multi-column layouts, every item needs a top border too */
@media (min-width: 641px) {
  .lm-faq-item { border-top: 0.5px solid rgba(20, 40, 71, 0.18); }
}
.lm-faq-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  gap: 1.2rem;
  align-items: center;
  padding: 1.45rem 0.5rem;
  transition: background 0.2s ease;
}
.lm-faq-summary::-webkit-details-marker { display: none; }
.lm-faq-summary:hover { background: rgba(20, 40, 71, 0.025); }
.lm-faq-q {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.35;
}
.lm-faq-chevron {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
  opacity: 0.55;
  transition: transform 0.25s ease;
  text-align: center;
}
.lm-faq-item[open] .lm-faq-chevron {
  transform: rotate(45deg);
}
.lm-faq-detail {
  padding: 0 0.5rem 1.4rem;
  animation: lm-accordion-fade 0.32s ease;
}
.lm-faq-a {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--navy);
  opacity: 0.85;
  margin: 0;
  max-width: 36rem;
}

/* ─── Gift-coming-soon tag in price-trust block ─────────────────────────────
 *  Neutral, restrained — a small one-line marker beneath the trust block.
 */
.lm-price-gift-soon {
  margin: var(--s2) 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
}
.lm-price-gift-soon-label {
  font-weight: 500;
}
.lm-price-gift-soon-sep {
  opacity: 0.5;
}
.lm-price-gift-soon-note {
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════════════
 * MOONLIGHT — newsletter / support / socials popup (bottom-right)
 * ════════════════════════════════════════════════════════════════════════════
 *
 *  Layout: fixed-position container in the bottom-right corner. Two children:
 *    (1) Trigger button (circular, navy, crescent moon icon) — always visible
 *    (2) Card with signup form + support + socials — slides up from below
 *
 *  When the container has .is-open, the card is visible and the trigger fades.
 */
.lm-moonlight {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 950;
  pointer-events: none;
}
.lm-moonlight > * {
  pointer-events: auto;
}

/* ─── Trigger button ─── */
.lm-moonlight-trigger {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 0.5px solid rgba(245, 241, 230, 0.35);
  background: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 20px rgba(20, 40, 71, 0.25);
  transition: transform 0.22s ease, opacity 0.22s ease, box-shadow 0.22s ease;
}
.lm-moonlight-trigger svg {
  width: 1.5rem;
  height: 1.5rem;
}
.lm-moonlight-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 40, 71, 0.35);
}
.lm-moonlight.is-open .lm-moonlight-trigger {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

/* ─── Card (popup body) ─── */
.lm-moonlight-card {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(22rem, calc(100vw - 2.8rem));
  background: var(--navy);
  color: var(--ivory);
  border-radius: 4px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 14px 40px rgba(20, 40, 71, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.lm-moonlight.is-open .lm-moonlight-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lm-moonlight-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 0;
  color: var(--ivory);
  opacity: 0.6;
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lm-moonlight-close:hover { opacity: 1; }

.lm-moonlight-header { margin-bottom: 1.1rem; padding-right: 1.6rem; }
.lm-moonlight-kicker {
  display: block;
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.7;
  margin-bottom: 0.5rem;
}
.lm-moonlight-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ivory);
  margin: 0 0 0.5rem;
}
.lm-moonlight-sub {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ivory);
  opacity: 0.78;
  margin: 0;
}

.lm-moonlight-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.lm-moonlight-input {
  background: transparent;
  border: 0.5px solid rgba(245, 241, 230, 0.32);
  color: var(--ivory);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s ease;
}
.lm-moonlight-input::placeholder {
  color: var(--ivory);
  opacity: 0.42;
  font-style: italic;
}
.lm-moonlight-input:focus { border-color: rgba(245, 241, 230, 0.7); }
.lm-moonlight-submit {
  background: var(--ivory);
  color: var(--navy);
  border: 0;
  font-family: var(--tracked);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lm-moonlight-submit:hover { opacity: 0.88; }

.lm-moonlight-success {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ivory);
  opacity: 0.82;
  margin: 0 0 1rem;
  padding: 0.7rem 0;
}

.lm-moonlight-divider {
  height: 0.5px;
  background: rgba(245, 241, 230, 0.18);
  margin: 0.6rem 0 0.85rem;
}

.lm-moonlight-support,
.lm-moonlight-socials {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin: 0.35rem 0;
}
.lm-moonlight-meta-label {
  font-family: var(--tracked);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.55;
  min-width: 4rem;
}
.lm-moonlight-meta-link {
  color: var(--ivory);
  opacity: 0.85;
  text-decoration: none;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.32);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lm-moonlight-meta-link:hover {
  opacity: 1;
  border-bottom-color: rgba(245, 241, 230, 0.7);
}
.lm-moonlight-socials { gap: 0.7rem; align-items: center; }
.lm-moonlight-social {
  color: var(--ivory);
  opacity: 0.75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.lm-moonlight-social:hover { opacity: 1; }
.lm-moonlight-social svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Mobile breakpoint: keep popup usable on small screens */
@media (max-width: 480px) {
  .lm-moonlight {
    bottom: 1rem;
    right: 1rem;
  }
  .lm-moonlight-trigger {
    width: 3rem;
    height: 3rem;
  }
  .lm-moonlight-trigger svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .lm-moonlight-card {
    width: calc(100vw - 2rem);
    padding: 1.4rem 1.2rem 1.2rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * STATUS PROGRESS — bar + percentage + stage list
 * ════════════════════════════════════════════════════════════════════════════ */
.status-progress {
  margin: var(--s3) 0 var(--s2);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.status-progress-track {
  height: 2px;
  background: rgba(245, 241, 230, 0.18);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.status-progress-fill {
  height: 100%;
  background: var(--ivory);
  width: 0%;
  border-radius: 1px;
  transition: width 0.12s linear;
  box-shadow: 0 0 12px rgba(245, 241, 230, 0.4);
}
.status-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: var(--ivory);
}
.status-progress-pct {
  font-family: var(--tracked);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  opacity: 0.85;
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
}
.status-progress-eta {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  opacity: 0.6;
  text-align: right;
  flex: 1;
  margin-left: 1rem;
}

/* ─── Stage list (vertical, compact) ─── */
.status-stages-list {
  list-style: none;
  padding: 0;
  margin: var(--s3) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 20rem;
}
.status-stages-item {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.9rem;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.4s ease;
  text-align: left;
}
.status-stages-item.is-complete { opacity: 0.7; }
.status-stages-item.is-active   { opacity: 1; }
.status-stages-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 0.5px solid rgba(245, 241, 230, 0.55);
  background: transparent;
  margin-left: 0.3rem;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.status-stages-item.is-complete .status-stages-dot {
  background: rgba(245, 241, 230, 0.55);
}
.status-stages-item.is-active .status-stages-dot {
  background: var(--ivory);
  border-color: var(--ivory);
  box-shadow: 0 0 10px rgba(245, 241, 230, 0.55);
}
.status-stages-label {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ivory);
}
.status-stages-item.is-active .status-stages-label {
  font-style: normal;
  font-family: var(--display);
}


/* ════════════════════════════════════════════════════════════════════════════
 * STATUS PAGE — full-navy treatment + large plaque anchor
 * ════════════════════════════════════════════════════════════════════════════ */

body.status-page {
  background: var(--navy);
  color: var(--ivory);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  isolation: isolate; /* contain stacking contexts */
}

/* Kill any inherited gradient/overlay artifacts that might bleed through */
body.status-page::before,
body.status-page::after,
body.status-page .status-wrap::before,
body.status-page .status-wrap::after,
body.status-page main::before,
body.status-page main::after {
  display: none !important;
  background: transparent !important;
}

/* Starfield fills the page background — dots only, NO overlay/gradient */
body.status-page .lm-starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: transparent !important;
}
body.status-page .lm-starfield::before,
body.status-page .lm-starfield::after {
  display: none !important;
}

/* Language toggle — fixed top-right */
.status-lang {
  position: fixed;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 100;
}
.status-lang button {
  background: transparent;
  border: 0.5px solid rgba(245, 241, 230, 0.32);
  color: var(--ivory);
  font-family: var(--ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
}
.status-lang button.is-active {
  opacity: 1;
  border-color: var(--ivory);
}
.status-lang button:first-child { border-right: 0; }

/* Main column — centered, fits in viewport */
.status-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) 1.5rem;
  background: transparent;
}
.status-wrap {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  background: transparent;
}

/* ─── Plaque — smaller, fits comfortably above content ─── */
.status-plaque-large {
  margin: 0 auto var(--s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.status-plaque-large .status-plaque-ly {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 0.9;
  color: var(--ivory);
}
.status-plaque-large .status-plaque-ly em {
  font-style: italic;
}
.status-plaque-large .status-plaque-rule {
  width: 3.6rem;
  height: 0.5px;
  background: var(--ivory);
  opacity: 0.55;
}
.status-plaque-large .status-plaque-maison {
  font-family: 'Bodoni Moda', var(--display), serif;
  font-weight: 400;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  letter-spacing: 0.4em;
  color: var(--ivory);
  opacity: 0.92;
  padding-left: 0.4em;
}

/* ─── Status card — sits on navy, transparent ─── */
.status-page .status-card {
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: center;
}
.status-page .status-stage {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
  color: var(--ivory);
  margin: 0 0 0.7rem;
}
.status-page .status-detail {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ivory);
  opacity: 0.75;
  margin: 0 auto;
  max-width: 28rem;
}

/* Footer when on status page — sits on navy, no contrasting bg */
.status-footer {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--ivory);
  border-top: 0.5px solid rgba(245, 241, 230, 0.12);
}
body.status-page .site-footer-tagline,
body.status-page .site-footer-meta {
  color: var(--ivory);
  opacity: 0.7;
}
body.status-page .wordmark {
  color: var(--ivory);
}

/* Mobile breakpoints */
@media (max-width: 640px) {
  .status-plaque-large { margin-bottom: var(--s4); gap: 0.6rem; }
  .status-plaque-large .status-plaque-rule { width: 3.5rem; }
  .status-main { padding: var(--s4) 1.2rem; }
  .status-progress-meta { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .status-progress-eta { text-align: left; margin-left: 0; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * ORDER PAGE — centered form + Crimson Pro for long-form prose
 * ════════════════════════════════════════════════════════════════════════════ */

/* Center the form column tighter than the default narrow container.
 * The header (kicker + title + lede) stays centered, the form fields
 * align centered too with comfortable max-width. */
.order-form-wrap {
  max-width: 32rem;
  margin: 0 auto;
  text-align: center;
}

/* Override the order page's inline-styled hero header to be centered */
body:not(.status-page) .container.narrow {
  max-width: 38rem;
  margin: 0 auto;
}
body:not(.status-page) .container.narrow .kicker,
body:not(.status-page) .container.narrow h1.display-2 {
  text-align: center;
}
body:not(.status-page) .container.narrow > p.text-muted {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 32rem;
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-style: normal !important;
  font-size: 1rem;
  line-height: 1.7;
}

/* Push Crimson Pro into the form prose (hints, error messages) */
.field-hint {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-style: normal !important;
  font-size: 0.92rem !important;
  line-height: 1.6;
  opacity: 0.78;
}
.field-error {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-style: italic !important;
}
#form-error {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.95rem !important;
  line-height: 1.6;
}

/* Center each form-section header */
.form-section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Tier select — center the grid */
.tier-select {
  margin-left: auto;
  margin-right: auto;
  max-width: 30rem;
}

/* The submit button row — center it */
form#order-form > .btn,
form#order-form > div:has(> .btn),
form#order-form .form-submit-row {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
form#order-form .form-submit-row .btn {
  display: inline-block;
}

/* Form field labels can stay aligned-left within their fields — that's how
 * forms work — but the FIELD containers themselves are centered as a column.
 * Each .field stays left-aligned internally for input readability. */
.form-section .field {
  text-align: left;
}
.form-section .field label {
  text-align: left;
}

/* Centered "we'll let you know" / contact prefs section */
.form-section .field input[type="radio"] + .label,
.form-section .field input[type="checkbox"] + .label {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: normal;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase G additions — multi-page split
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Cross-page nav links (about + method in site nav) ───────────────────── */
.site-nav-link {
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ivory);
  opacity: 0.75;
  text-decoration: none;
  padding: 0.4rem 0;
  transition: opacity 0.2s ease, border-bottom-color 0.2s ease;
  border-bottom: 0.5px solid transparent;
}
.site-nav-link:hover { opacity: 1; }
.site-nav-link.is-current {
  opacity: 1;
  border-bottom-color: rgba(245, 241, 230, 0.55);
}

/* ─── Discreet hyperlinks (italic, with arrow) ────────────────────────────── */
.lm-discreet-link-wrap {
  padding: 0 0 var(--s4);
  border-top: 0 !important;  /* opt out of global section + section hairline */
}
.lm-discreet-link-wrap--ivory {
  background: var(--ivory);
}
.lm-discreet-link-wrap--navy {
  background: var(--navy);
}
.lm-discreet-link-wrap .container {
  text-align: center;
}
.lm-discreet-link {
  display: inline-block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  letter-spacing: 0.005em;
  border-bottom: 0.5px solid transparent;
  transition: border-bottom-color 0.25s ease, opacity 0.2s ease;
}
.lm-discreet-link-wrap--ivory .lm-discreet-link {
  color: var(--navy);
  opacity: 0.78;
}
.lm-discreet-link-wrap--ivory .lm-discreet-link:hover {
  opacity: 1;
  border-bottom-color: rgba(20, 40, 71, 0.55);
}
.lm-discreet-link-wrap--navy .lm-discreet-link {
  color: var(--ivory);
  opacity: 0.78;
}
.lm-discreet-link-wrap--navy .lm-discreet-link:hover {
  opacity: 1;
  border-bottom-color: rgba(245, 241, 230, 0.55);
}

/* ─── Pricing on navy ─────────────────────────────────────────────────────── */
.lm-pricing {
  padding: var(--s5) 0;
}
.lm-pricing--navy {
  background: var(--navy);
  color: var(--ivory);
}
.lm-pricing--navy .lm-section-header .kicker { color: var(--ivory); opacity: 0.7; }
.lm-pricing--navy .lm-section-header .display-2 {
  color: var(--ivory);
  font-weight: 300;
}
.lm-pricing--navy .lm-section-header .display-2 em { font-style: italic; }

/* ─── Hairline price card variant (transparent, ivory borders) ─────────── */
.price-card--hairline {
  background: transparent !important;
  border: 0.5px solid rgba(245, 241, 230, 0.32);
  color: var(--ivory);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.price-card--hairline:hover {
  border-color: rgba(245, 241, 230, 0.6);
  background: rgba(245, 241, 230, 0.025) !important;
}
.price-card--hairline .price-num,
.price-card--hairline h3,
.price-card--hairline .price-tagline,
.price-card--hairline .amount,
.price-card--hairline .amount .unit,
.price-card--hairline ul li {
  color: var(--ivory);
}
.price-card--hairline .price-tagline {
  opacity: 0.78;
}
.price-card--hairline ul li {
  opacity: 0.82;
  border-bottom-color: rgba(245, 241, 230, 0.16);
}
.price-card--hairline .btn-secondary {
  border-color: var(--ivory);
  color: var(--ivory);
  background: transparent;
}
.price-card--hairline .btn-secondary:hover {
  background: var(--ivory);
  color: var(--navy);
}

/* Inverted "Most chosen" badge on navy */
.lm-pricing--navy .price-card-featured .price-badge {
  background: var(--ivory);
  color: var(--navy);
}

/* Price-trust block when on navy */
.lm-price-trust--on-navy {
  color: var(--ivory);
}
.lm-price-trust--on-navy .lm-price-trust-label,
.lm-price-trust--on-navy .lm-price-trust-methods,
.lm-price-trust--on-navy .lm-price-trust-delivery,
.lm-price-trust--on-navy .lm-price-gift-soon,
.lm-price-trust--on-navy .lm-price-gift-soon-label,
.lm-price-trust--on-navy .lm-price-gift-soon-sep,
.lm-price-trust--on-navy .lm-price-gift-soon-note {
  color: var(--ivory);
}

/* ─── Manifesto ivory variant (flipped from default navy) ───────────────── */
.manifesto--ivory {
  background: var(--ivory);
  color: var(--navy);
}
.manifesto--ivory .manifesto-quote {
  color: var(--navy);
}
.manifesto--ivory .manifesto-attribution {
  color: var(--navy);
  opacity: 0.65;
}

/* ─── FAQ navy variant (flipped from default ivory) ─────────────────────── */
.lm-faq--navy {
  background: var(--navy);
  color: var(--ivory);
}
.lm-faq--navy .lm-section-header .kicker { color: var(--ivory); opacity: 0.7; }
.lm-faq--navy .lm-section-header .display-2,
.lm-faq--navy .lm-section-header .display-2 em {
  color: var(--ivory);
}
.lm-faq--navy .lm-section-header > p {
  color: var(--ivory);
  opacity: 0.78;
}
.lm-faq--navy .lm-faq-item {
  border-bottom-color: rgba(245, 241, 230, 0.22);
}
.lm-faq--navy .lm-faq-item:first-of-type {
  border-top-color: rgba(245, 241, 230, 0.22);
}
.lm-faq--navy .lm-faq-summary:hover {
  background: rgba(245, 241, 230, 0.035);
}
.lm-faq--navy .lm-faq-q,
.lm-faq--navy .lm-faq-chevron {
  color: var(--ivory);
}
.lm-faq--navy .lm-faq-chevron { opacity: 0.65; }
.lm-faq--navy .lm-faq-a {
  color: var(--ivory);
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════════════
 * /about and /method PAGE styles
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Page hero (slim, navy ground, starfield) ──────────────────────────── */
.lm-page-hero {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s6) 0 var(--s5);
  position: relative;
  overflow: hidden;
}
.lm-page-hero .lm-starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lm-page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}
.lm-page-hero-inner .kicker {
  color: var(--ivory);
  opacity: 0.7;
}
.lm-page-hero-inner .display-1 {
  color: var(--ivory);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.15;
  margin: var(--s2) 0 var(--s3);
}
.lm-page-hero-inner .display-1 em { font-style: italic; }
.lm-page-hero-lede {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ivory);
  opacity: 0.82;
  max-width: 32rem;
  margin: 0 auto;
}

/* ─── About sections (alternating navy / ivory) ─────────────────────────── */
.lm-about-section {
  padding: var(--s5) 0;
}
.lm-about-section--ivory {
  background: var(--ivory);
  color: var(--navy);
}
.lm-about-section--navy {
  background: var(--navy);
  color: var(--ivory);
}
.lm-about-block {
  max-width: 38rem;
  margin: 0 auto;
}
.lm-about-h {
  font-weight: 300;
  margin: 0 0 var(--s3);
  text-align: left;
}
.lm-about-section--navy .lm-about-h,
.lm-about-section--navy .kicker {
  color: var(--ivory);
}
.lm-about-section--navy .kicker { opacity: 0.7; }
.lm-about-prose p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.78;
  margin: 0 0 var(--s3);
}
.lm-about-section--ivory .lm-about-prose p {
  color: var(--navy);
  opacity: 0.88;
}
.lm-about-section--navy .lm-about-prose p {
  color: var(--ivory);
  opacity: 0.86;
}
.lm-about-intro {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ivory);
  opacity: 0.82;
  margin: 0 0 var(--s4);
  max-width: 38rem;
  font-style: italic;
}

/* Ritual step on navy variant */
.lm-ritual-step--on-navy {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: var(--s4);
}
.lm-ritual-step--on-navy .lm-ritual-num {
  border-color: rgba(245, 241, 230, 0.4);
  color: var(--ivory);
}
.lm-ritual-step--on-navy .lm-ritual-step-title {
  color: var(--ivory);
}
.lm-ritual-step--on-navy .lm-ritual-step-body {
  color: var(--ivory);
  opacity: 0.82;
}
.lm-ritual-step--on-navy .lm-ritual-step-mech {
  color: var(--ivory);
  opacity: 0.6;
  border-top-color: rgba(245, 241, 230, 0.18);
}
.lm-ritual-step--on-navy .lm-ritual-step-mech-label {
  color: var(--ivory);
}
.lm-about-ritual-steps {
  max-width: 38rem;
  margin: 0 auto var(--s5);
}

/* Mech-deeper block */
.lm-about-block--mech-deeper {
  border-top: 0.5px solid rgba(245, 241, 230, 0.22);
  padding-top: var(--s4);
  margin-top: var(--s4);
}
.lm-about-block--mech-deeper .display-3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.7rem;
  margin: var(--s2) 0 var(--s3);
}

/* Practitioner block */
.lm-about-block--practitioner {
  text-align: center;
  max-width: 36rem;
}
.lm-about-block--practitioner .lm-about-h {
  text-align: center;
  margin: var(--s2) auto var(--s3);
}
.lm-about-practitioner-p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--navy);
  opacity: 0.88;
  margin: 0 auto;
  max-width: 34rem;
}

/* ─── Method page sections ──────────────────────────────────────────────── */
.lm-method-section {
  padding: var(--s5) 0;
}
.lm-method-section--ivory {
  background: var(--ivory);
  color: var(--navy);
}
.lm-method-section .lm-section-header {
  max-width: 38rem;
  margin: 0 auto var(--s5);
  text-align: center;
}

/* Mirror essays — vertical stack, restrained editorial */
.lm-mirror-essays {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.lm-mirror-essay {
  border-top: 0.5px solid rgba(20, 40, 71, 0.18);
  padding-top: var(--s3);
}
.lm-mirror-essay:first-child {
  border-top: 0;
  padding-top: 0;
}
.lm-mirror-essay-head {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: var(--s2);
}
.lm-mirror-essay-num {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--navy);
  opacity: 0.55;
  text-align: center;
  line-height: 1;
}
.lm-mirror-essay-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--navy);
  margin: 0 0 0.3rem;
  line-height: 1.15;
}
.lm-mirror-essay-origin {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
  margin: 0;
}
.lm-mirror-essay-body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--navy);
  opacity: 0.88;
  margin: 0;
  padding-left: 3.8rem;
}

/* Method's eight-sections — overlay with method-specific styles  */
.lm-method-sections-section {
  background: var(--navy);
  color: var(--ivory);
  padding: var(--s5) 0;
}
.lm-method-sections-section .lm-section-header .kicker {
  color: var(--ivory);
  opacity: 0.7;
}
.lm-method-sections-section .lm-section-header .display-2 {
  color: var(--ivory);
}
.lm-method-sections-section .lm-section-header > p {
  color: var(--ivory);
  opacity: 0.82;
}
.lm-method-sections-section .lm-section-item {
  border-bottom-color: rgba(245, 241, 230, 0.22);
}
.lm-method-sections-section .lm-section-item:first-of-type {
  border-top-color: rgba(245, 241, 230, 0.22);
}
.lm-method-sections-section .lm-section-summary:hover {
  background: rgba(245, 241, 230, 0.035);
}
.lm-method-sections-section .lm-section-num,
.lm-method-sections-section .lm-section-name,
.lm-method-sections-section .lm-section-lede,
.lm-method-sections-section .lm-section-chevron,
.lm-method-sections-section .lm-section-excerpt-label,
.lm-method-sections-section .lm-section-excerpt {
  color: var(--ivory);
}
.lm-method-sections-section .lm-section-num { opacity: 0.6; }
.lm-method-sections-section .lm-section-lede { opacity: 0.7; }
.lm-method-sections-section .lm-section-chevron { opacity: 0.6; }
.lm-method-sections-section .lm-section-excerpt-label { opacity: 0.55; }
.lm-method-sections-section .lm-section-excerpt { opacity: 0.88; }

/* Mobile breakpoints */
@media (max-width: 640px) {
  .lm-mirror-essay-body { padding-left: 0; }
  .lm-mirror-essay-head { grid-template-columns: 2rem 1fr; gap: 0.8rem; }
  .lm-mirror-essay-name { font-size: 1.45rem; }
  .lm-page-hero { padding: var(--s5) 0 var(--s4); }
}


/* ─── Mobile: hide cross-page nav links (about / method) to prevent crowding ─
 *  The links remain accessible via the discreet hyperlinks on the landing,
 *  and via the page CTAs on About + Method themselves.
 */
@media (max-width: 720px) {
  .site-nav-link {
    display: none;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase G2 — background revert per image 1 scheme
 * Hero(navy) → Mirrors(ivory) → Pricing(ivory) → Ritual(navy) →
 * House(ivory) → Manifesto(navy) → FAQ(ivory) → Second CTA(navy)
 *
 * House and Second CTA flip from their original variants. The unused
 * lm-pricing--navy, lm-ritual--ivory, manifesto--ivory, lm-faq--navy
 * rules from the previous batch are left in place but no longer applied
 * (the variant classes are removed from the markup, so they're dead CSS).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── House on ivory ───
 * Flips the default lm-house (navy) to ivory bg + navy text.
 * The Frontispiece SVG colors were swapped in the markup directly
 * (ivory hairlines → navy hairlines) so it renders correctly here.
 */
.lm-house--ivory {
  background: var(--ivory) !important;
  color: var(--navy) !important;
}
.lm-house--ivory .lm-section-header .kicker,
.lm-house--ivory .display-2,
.lm-house--ivory .display-2 em,
.lm-house--ivory .lm-house-prose {
  color: var(--navy);
}
.lm-house--ivory .lm-house-prose {
  opacity: 0.85;
}
/* If the house section had any ivory hairlines/borders, flip them to navy */
.lm-house--ivory hr,
.lm-house--ivory .hairline {
  border-color: rgba(20, 40, 71, 0.22);
  background: rgba(20, 40, 71, 0.22);
}

/* ─── Second CTA on navy ───
 * Flips the default lm-second-cta (ivory) to navy bg + ivory text.
 */
.lm-second-cta--navy {
  background: var(--navy) !important;
  color: var(--ivory) !important;
}
.lm-second-cta--navy .kicker,
.lm-second-cta--navy .display-2,
.lm-second-cta--navy .display-2 em,
.lm-second-cta--navy .lm-second-cta-sub {
  color: var(--ivory);
}
.lm-second-cta--navy .kicker { opacity: 0.7; }
.lm-second-cta--navy .lm-second-cta-sub { opacity: 0.82; }
/* Primary button on navy stays ivory-bordered, ivory text */
.lm-second-cta--navy .btn-primary {
  background: var(--ivory);
  color: var(--navy);
  border-color: var(--ivory);
}
.lm-second-cta--navy .btn-primary:hover {
  background: transparent;
  color: var(--ivory);
}


/* ════════════════════════════════════════════════════════════════════════════
 * GIFT FLOW — order page tier + form section + redemption banner
 * ════════════════════════════════════════════════════════════════════════════ */

/* 3-column tier select for desktop, stacks on mobile */
.tier-select--3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  .tier-select--3col {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}

/* Gift tier option — visually distinct via a subtle italic accent */
.tier-option--gift .label::after {
  content: ' ✦';
  opacity: 0.4;
  font-size: 0.85em;
}

/* Show/hide logic based on .is-gift-mode on the form root */
[data-gift-only] { display: none; }
.is-gift-mode [data-gift-only] { display: block; }
.is-gift-mode [data-non-gift-only] { display: none; }

/* Gift form section styling */
.gift-form-section {
  /* Inherits .form-section spacing */
}
.gift-form-section > .kicker {
  display: block;
  margin-bottom: var(--s2);
}
.gift-form-intro {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.78;
  max-width: 32rem;
  margin: 0 0 var(--s3);
}
.gift-tier-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  max-width: 28rem;
}

/* Textarea field — match input styling */
.field textarea {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  padding: 0.7rem 0.9rem;
  outline: none;
  border-radius: 2px;
  transition: border-color 0.25s;
  resize: vertical;
  min-height: 5rem;
}
.field textarea:focus {
  border-color: var(--navy);
}

/* ─── Redemption banner — shown when ?code=XYZ is in URL and valid ─── */
.gift-redeem-banner {
  background: var(--ivory-2);
  border: 0.5px solid rgba(20, 40, 71, 0.22);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
  margin: 0 auto var(--s4);
  max-width: 32rem;
  position: relative;
}
.gift-redeem-banner-kicker {
  display: block;
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.gift-redeem-banner-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.gift-redeem-banner-from {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.78;
  margin: 0;
}
.gift-redeem-banner-msg {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.85;
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 0.5px solid rgba(20, 40, 71, 0.18);
}
.gift-redeem-banner-applied {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.78;
}
.gift-redeem-banner-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 1.6rem;
  height: 1.6rem;
  background: transparent;
  border: 0;
  color: var(--navy);
  opacity: 0.5;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.gift-redeem-banner-close:hover { opacity: 1; }

/* ─── Gift thank-you / success state ─── */
.gift-thanks {
  text-align: center;
  max-width: 32rem;
  margin: var(--s5) auto;
}
.gift-thanks-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.gift-thanks-lede {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.82;
  margin: 0 auto var(--s4);
  max-width: 28rem;
}
.gift-thanks-code-block {
  display: inline-block;
  background: var(--ivory-2);
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  border-radius: 4px;
  padding: 1.2rem 2rem;
  margin: 0 auto var(--s3);
}
.gift-thanks-code-label {
  display: block;
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.gift-thanks-code {
  font-family: var(--tracked);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.gift-thanks-code-note {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0.65;
  margin: 0 auto;
  max-width: 26rem;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase G3 fixes
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Ritual on navy — flip all child text to ivory ─── */
.lm-ritual,
.lm-ritual .kicker,
.lm-ritual .display-2,
.lm-ritual .display-2 em,
.lm-ritual-prose .kicker,
.lm-ritual-prose .display-2,
.lm-ritual-prose .text-muted,
.lm-ritual-pull,
.lm-ritual-num,
.lm-ritual-step-title,
.lm-ritual-step-body,
.lm-ritual-step-mech,
.lm-ritual-step-mech-label {
  color: var(--ivory) !important;
}
.lm-ritual-prose .kicker { opacity: 0.7; }
.lm-ritual-prose .text-muted { opacity: 0.82; }
.lm-ritual-pull {
  opacity: 0.78;
  border-left-color: rgba(245, 241, 230, 0.32) !important;
}
.lm-ritual-num {
  border-color: rgba(245, 241, 230, 0.4) !important;
}
.lm-ritual-step-body { opacity: 0.82; }
.lm-ritual-step-mech { opacity: 0.6; }
.lm-ritual-step-mech {
  border-top-color: rgba(245, 241, 230, 0.18) !important;
}

/* ─── Nav links — must be visible on BOTH ivory and navy nav ─── */
.site-nav .site-nav-link { color: var(--navy); }
.site-nav.dark .site-nav-link { color: var(--ivory); }
.site-nav .site-nav-link.is-current {
  border-bottom-color: rgba(20, 40, 71, 0.55);
}
.site-nav.dark .site-nav-link.is-current {
  border-bottom-color: rgba(245, 241, 230, 0.55);
}


/* ════════════════════════════════════════════════════════════════════════════
 * ADMIN PORTAL — login + dashboard
 * Restrained palette consistent with brand. Functional, not editorial.
 * ════════════════════════════════════════════════════════════════════════════ */

body.admin-page {
  background: var(--ivory);
  color: var(--ink);
  margin: 0;
  min-height: 100vh;
  font-family: var(--ui);
}

/* ─── Login screen ─── */
/* The hidden HTML attribute must win over display:flex on these toggle roots.
 * Without this, .admin-login { display: flex } shows the login screen even
 * when JS sets loginEl.hidden = true. */
.admin-login[hidden],
.admin-dashboard[hidden] {
  display: none !important;
}

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: 2rem;
}
.admin-login-inner {
  max-width: 22rem;
  text-align: center;
  color: var(--ivory);
}
.admin-login-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.admin-login-ly {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 4rem;
  line-height: 0.9;
  color: var(--ivory);
}
.admin-login-rule {
  width: 3rem;
  height: 0.5px;
  background: var(--ivory);
  opacity: 0.55;
}
.admin-login-maison {
  font-family: var(--tracked);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  color: var(--ivory);
  opacity: 0.85;
  padding-left: 0.36em;
}
.admin-login-lede {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  opacity: 0.78;
  margin: 0 0 1.6rem;
}
.admin-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.6rem;
  background: var(--ivory);
  color: var(--navy);
  border: 0;
  border-radius: 3px;
  font-family: var(--ui);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.admin-login-note {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 1.2rem 0 0;
}
.admin-login-err {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.9rem;
  margin-top: 1rem;
  padding: 0.8rem;
  background: rgba(255, 100, 100, 0.15);
  border: 0.5px solid rgba(255, 100, 100, 0.4);
  border-radius: 3px;
  color: var(--ivory);
}

/* ─── Dashboard ─── */
.admin-header {
  background: var(--navy);
  color: var(--ivory);
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.18);
}
.admin-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-brand {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.admin-brand-ly {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.6rem;
}
.admin-brand-meta {
  font-family: var(--tracked);
  font-size: 0.65rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.75;
}
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
.admin-user-email {
  opacity: 0.78;
  font-family: var(--ui);
}
.admin-signout-btn {
  background: transparent;
  border: 0.5px solid rgba(245, 241, 230, 0.4);
  color: var(--ivory);
  font-family: var(--ui);
  font-size: 0.75rem;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-signout-btn:hover { background: rgba(245, 241, 230, 0.1); }

.admin-tabs {
  background: var(--ivory-2);
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.15);
}
.admin-tabs-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
}
.admin-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--navy);
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.9rem 1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.admin-tab:hover { opacity: 0.85; }
.admin-tab.is-active {
  opacity: 1;
  border-bottom-color: var(--navy);
}

.admin-main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-section-head h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  margin: 0;
  color: var(--navy);
}
.admin-section-note {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.7;
  margin: -0.5rem 0 1.5rem;
}
.admin-refresh-meta {
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
}
.admin-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-filters select {
  font-family: var(--ui);
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  background: var(--ivory);
  border-radius: 2px;
}

/* ─── Stats grid ─── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.admin-stat-card {
  background: var(--ivory);
  border: 0.5px solid rgba(20, 40, 71, 0.18);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
}
.admin-stat-primary {
  background: var(--navy);
  color: var(--ivory);
  border-color: var(--navy);
}
.admin-stat-mini {
  background: var(--ivory-2);
  border-color: rgba(20, 40, 71, 0.12);
}
.admin-stat-label {
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.5rem;
}
.admin-stat-value {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.admin-stat-loading {
  grid-column: 1 / -1;
  font-style: italic;
  opacity: 0.6;
  padding: 2rem;
  text-align: center;
}

/* ─── Tables ─── */
.admin-table-wrap {
  background: var(--ivory);
  border: 0.5px solid rgba(20, 40, 71, 0.18);
  border-radius: 3px;
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table thead th {
  text-align: left;
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.65;
  padding: 0.85rem 1rem;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.18);
  background: var(--ivory-2);
}
.admin-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.1);
  vertical-align: top;
}
.admin-table tbody tr:hover { background: rgba(20, 40, 71, 0.025); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .admin-mono {
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.admin-empty {
  text-align: center;
  padding: 2rem;
  opacity: 0.55;
  font-style: italic;
}

/* ─── Status pills ─── */
.admin-pill {
  display: inline-block;
  font-family: var(--tracked);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  background: rgba(20, 40, 71, 0.1);
}
.admin-pill-paid     { background: rgba(80, 160, 100, 0.18); color: #2a6c40; }
.admin-pill-pending  { background: rgba(220, 170, 70, 0.18); color: #8a5e10; }
.admin-pill-cancelled { background: rgba(168, 50, 50, 0.15); color: #832525; }
.admin-pill-queued     { background: rgba(120, 140, 180, 0.18); color: #354766; }
.admin-pill-calculating,
.admin-pill-writing,
.admin-pill-rendering  { background: rgba(180, 140, 90, 0.18); color: #6c4a1d; }
.admin-pill-ready      { background: rgba(80, 160, 100, 0.18); color: #2a6c40; }
.admin-pill-failed     { background: rgba(168, 50, 50, 0.18); color: #832525; }
.admin-pill-gift       { background: rgba(120, 90, 160, 0.18); color: #4a2c7a; }
.admin-pill-redeemed   { background: rgba(80, 160, 100, 0.18); color: #2a6c40; }
.admin-pill-emailed    { background: rgba(120, 140, 180, 0.18); color: #354766; }
.admin-pill-pending_email { background: rgba(220, 170, 70, 0.22); color: #8a5e10; }

/* ─── Gift cards ─── */
.admin-gift-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
}
.admin-gift-card {
  background: var(--ivory);
  border: 0.5px solid rgba(20, 40, 71, 0.18);
  border-radius: 3px;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.admin-gift-pending_email {
  border-color: rgba(220, 170, 70, 0.5);
  background: rgba(255, 250, 240, 1);
}
.admin-gift-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-gift-code {
  font-family: 'SFMono-Regular', 'Menlo', monospace;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.admin-gift-meta {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.85;
}
.admin-gift-meta strong {
  font-weight: 500;
  opacity: 0.7;
}
.admin-gift-msg {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.78;
  padding: 0.7rem;
  background: var(--ivory-2);
  border-left: 2px solid rgba(20, 40, 71, 0.25);
  border-radius: 2px;
}
.admin-gift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.admin-gift-action {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  background: transparent;
  color: var(--navy);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s;
}
.admin-gift-action:hover { background: rgba(20, 40, 71, 0.05); }
.admin-gift-action-primary {
  background: var(--navy);
  color: var(--ivory);
}
.admin-gift-action-primary:hover { background: var(--navy-3); }

/* ─── Promo form ─── */
.admin-promo-form {
  background: var(--ivory);
  border: 0.5px solid rgba(20, 40, 71, 0.18);
  border-radius: 3px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-promo-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 720px) {
  .admin-promo-form-row { grid-template-columns: 1fr; }
}
.admin-promo-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-promo-field label {
  font-family: var(--tracked);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}
.admin-promo-field input,
.admin-promo-field select {
  font-family: var(--ui);
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border: 0.5px solid rgba(20, 40, 71, 0.32);
  background: var(--ivory);
  border-radius: 2px;
  outline: none;
}
.admin-promo-field input:focus,
.admin-promo-field select:focus { border-color: var(--navy); }
.admin-promo-submit {
  align-self: flex-start;
  background: var(--navy);
  color: var(--ivory);
  border: 0;
  font-family: var(--tracked);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-promo-submit:hover { background: var(--navy-3); }
.admin-promo-result {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  border-radius: 2px;
  margin: 0;
}
.admin-promo-result-ok  { background: rgba(80, 160, 100, 0.15); color: #2a6c40; }
.admin-promo-result-err { background: rgba(168, 50, 50, 0.08); color: #832525; }


/* ════════════════════════════════════════════════════════════════════════════
 * Phase H — proportions, restructure, polish
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Tier cards equal height + consistent inner spacing ─── */
.tier-select--3col .tier-option {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 14rem;
  padding: 1.4rem 1.3rem 1.4rem;
}
.tier-select--3col .tier-option .label {
  margin-bottom: 0.35rem;
  font-size: 1.4rem;
  line-height: 1.2;
}
.tier-select--3col .tier-option .price {
  margin-bottom: 0.8rem;
  font-family: var(--tracked);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}
.tier-select--3col .tier-option .desc {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  flex: 1;
}
.tier-select--3col .tier-option:has(input:checked) {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase H — starfield generic, ritual mechanism grid, pentagon mirrors,
 * About footer practitioner block
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Starfield dots (generic module) ─────────────────────────────────── */
.lm-starfield-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--ivory);
  border-radius: 50%;
  pointer-events: none;
  animation: lm-twinkle 4s ease-in-out infinite alternate;
}
@keyframes lm-twinkle {
  from { opacity: 0.15; }
  to   { opacity: 0.75; }
}
.lm-with-starfield {
  position: relative;
  overflow: hidden;
}
.lm-with-starfield .lm-starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.lm-with-starfield > .container {
  position: relative;
  z-index: 1;
}

/* ─── About: ritual mechanism horizontal grid ─────────────────────────── */
.lm-ritual-mech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 64rem;
  margin: 0 auto var(--s5);
}
@media (max-width: 980px) {
  .lm-ritual-mech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lm-ritual-mech-grid { grid-template-columns: 1fr; }
}
.lm-ritual-mech-card {
  background: transparent;
  border: 0.5px solid rgba(245, 241, 230, 0.22);
  border-radius: 3px;
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 0.25s, background 0.25s;
}
.lm-ritual-mech-card:hover {
  border-color: rgba(245, 241, 230, 0.5);
  background: rgba(245, 241, 230, 0.02);
}
.lm-ritual-mech-num {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--ivory);
  opacity: 0.55;
}
.lm-ritual-mech-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--ivory);
  margin: 0;
}
.lm-ritual-mech-body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ivory);
  opacity: 0.78;
  margin: 0;
}

/* ─── About: wide block for ritual-mech header section ─── */
.lm-about-block--wide {
  max-width: 48rem;
}

/* ─── About: mech-deeper block on navy — flip text colors ─── */
.lm-about-section--navy .lm-about-block--mech-deeper {
  border-top-color: rgba(245, 241, 230, 0.22);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.lm-about-section--navy .lm-about-block--mech-deeper .kicker,
.lm-about-section--navy .lm-about-block--mech-deeper .display-3 {
  color: var(--ivory);
}
.lm-about-section--navy .lm-about-block--mech-deeper .kicker { opacity: 0.7; }

/* ─── Method: pentagon mirror layout (3 top + 2 bottom offset) ────────── */
.lm-mirrors-pentagon {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
}
.lm-mirrors-pent-row {
  display: grid;
  gap: 1.8rem;
}
.lm-mirrors-pent-row--top {
  grid-template-columns: repeat(3, 1fr);
}
.lm-mirrors-pent-row--bottom {
  /* 2 cards offset toward the center, creating an inverted pentagon */
  grid-template-columns: repeat(2, 1fr);
  max-width: 66%;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .lm-mirrors-pent-row--top { grid-template-columns: repeat(2, 1fr); }
  .lm-mirrors-pent-row--bottom {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .lm-mirrors-pent-row--top,
  .lm-mirrors-pent-row--bottom {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .lm-mirrors-pentagon { gap: 1.4rem; }
}
/* Mirror essay card in pentagon layout — more contained */
.lm-mirrors-pentagon .lm-mirror-essay {
  border: 0.5px solid rgba(20, 40, 71, 0.18);
  border-top: 0.5px solid rgba(20, 40, 71, 0.18);
  padding: 1.6rem 1.4rem;
  border-radius: 3px;
  transition: border-color 0.25s, background 0.25s;
}
.lm-mirrors-pentagon .lm-mirror-essay:hover {
  border-color: rgba(20, 40, 71, 0.45);
  background: rgba(20, 40, 71, 0.02);
}
.lm-mirrors-pentagon .lm-mirror-essay-head {
  margin-bottom: 0.8rem;
}
.lm-mirrors-pentagon .lm-mirror-essay-name {
  font-size: 1.4rem;
}
.lm-mirrors-pentagon .lm-mirror-essay-body {
  padding-left: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ─── About footer with promoted practitioner block ───────────────────── */
.site-footer--with-practitioner {
  padding: var(--s6) 0 var(--s4);
  background: var(--navy);
  color: var(--ivory);
}
.site-footer--with-practitioner .wordmark,
.site-footer--with-practitioner .site-footer-tagline,
.site-footer--with-practitioner .site-footer-meta,
.site-footer--with-practitioner [data-lunar] {
  color: var(--ivory);
}
.site-footer--with-practitioner [data-lunar] {
  opacity: 0.78;
}
.practitioner-footer-block {
  max-width: 36rem;
  margin: 0 auto var(--s5);
  text-align: center;
  padding-bottom: var(--s5);
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.18);
}
.practitioner-footer-block .kicker {
  color: var(--ivory);
  opacity: 0.65;
  display: block;
  margin-bottom: 1rem;
}
.practitioner-footer-h {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--ivory);
  margin: 0 0 1.4rem;
}
.practitioner-footer-p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ivory);
  opacity: 0.82;
  margin: 0 auto 2rem;
  max-width: 32rem;
}
.practitioner-footer-block .btn-primary {
  display: inline-block;
  background: var(--ivory);
  color: var(--navy);
  border-color: var(--ivory);
}
.practitioner-footer-block .btn-primary:hover {
  background: transparent;
  color: var(--ivory);
}
.site-footer-inner--minimal {
  padding-top: 0;
  border-top: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase I — promo code field + newsletter consent + strike-through prices
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Promo code field on order page ────────────────────────────────────── */
.promo-code-section {
  /* sits before submit button, slightly tighter */
}
.promo-code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: stretch;
}
.promo-code-row input {
  font-family: var(--display);
  letter-spacing: 0.04em;
}
.promo-apply-btn {
  font-family: var(--tracked);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  padding: 0.7rem 1.2rem;
  white-space: nowrap;
  cursor: pointer;
}
.promo-status {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  border-radius: 2px;
}
.promo-status-ok {
  color: #2a6c40;
  background: rgba(80, 160, 100, 0.1);
  border: 0.5px solid rgba(80, 160, 100, 0.3);
}
.promo-status-err {
  color: #832525;
  background: rgba(168, 50, 50, 0.05);
  border: 0.5px solid rgba(168, 50, 50, 0.25);
}

/* ─── Strikethrough original price in submit button when promo applied ──── */
.submit-price-original {
  text-decoration: line-through;
  opacity: 0.55;
  margin-right: 0.5rem;
  font-weight: 400;
}

/* ─── Moonlight: discreet consent line ──────────────────────────────────── */
.lm-moonlight-consent {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ivory);
  opacity: 0.55;
  margin: 0.5rem 0 0;
  text-align: left;
}
.lm-moonlight-consent a {
  color: var(--ivory);
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.3);
  margin: 0 0.18em;
  font-style: italic;
}
.lm-moonlight-consent a:hover {
  opacity: 1;
  border-bottom-color: rgba(245, 241, 230, 0.7);
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase I (continued) — order page title overflow + card sizing
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Order page title: keep on one line, smaller font on narrow viewports ─ */
.order-page-title {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  margin-bottom: var(--s2);
  line-height: 1.15;
  text-align: center;
}
@media (max-width: 720px) {
  .order-page-title {
    white-space: normal;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }
}

/* ─── Tier cards: bigger, more square, more breathing room ─── */
.tier-select--3col {
  gap: 1.3rem;
}
.tier-select--3col .tier-option {
  min-height: 18rem;
  padding: 1.8rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tier-select--3col .tier-option .label {
  margin-bottom: 0.5rem;
  font-size: 1.55rem;
  line-height: 1.2;
}
.tier-select--3col .tier-option .price {
  margin-bottom: 1.2rem;
  font-family: var(--tracked);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  opacity: 0.78;
}
.tier-select--3col .tier-option .desc {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.65;
  flex: 1;
  margin-top: 0.4rem;
}
/* Gift card needs more top margin on desc since it has no price line */
.tier-select--3col .tier-option--gift .desc {
  margin-top: 1.4rem;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase I followup — Option 4 form font
 * Inter Medium sentence-case labels + Crimson Pro italic hints
 * Override the tracked-caps style for form labels specifically (other kicker
 * usages like section headers keep their editorial styling).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Form labels: Inter Medium, sentence case, larger, readable ───────── */
.field label,
.form-section .field label {
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.78;
  margin-bottom: 0.4rem;
  display: block;
}
.field label .req {
  color: var(--ink);
  margin-left: 0.15em;
  opacity: 0.4;
  font-weight: 400;
}

/* ─── Form section titles: same treatment, slightly larger ───────────── */
.form-section-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.25;
}

/* ─── Field hint: Crimson Pro italic, smaller, lighter ────────────────── */
.field-hint {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink);
  opacity: 0.6;
  margin-top: 0.4rem;
  display: block;
  line-height: 1.5;
}

/* ─── Inline help text in form (the "leave blank if not remembered" etc) ── */
.text-muted {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  color: var(--ink);
  opacity: 0.65;
}

/* ─── Segments (radio button groups) ─────────────────────────────────── */
.segments label {
  font-family: var(--ui);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 0.88rem;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase L — coming-soon page
 * ════════════════════════════════════════════════════════════════════════════ */

body.coming-soon-page {
  background: var(--navy);
  color: var(--ivory);
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 1.4rem 1.6rem;
  position: relative;
  z-index: 10;
}
.cs-lang-toggle {
  /* uses .lang-toggle base styling */
}
.cs-lang-toggle button {
  background: transparent;
  color: var(--ivory);
  border-color: var(--ivory);
  opacity: 0.6;
}
.cs-lang-toggle button.is-active {
  background: var(--ivory);
  color: var(--navy);
  opacity: 1;
}

/* Stage layout: wheel on left, content on right at desktop;
   stacked at mobile */
.cs-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* SVG wheel container */
.cs-wheel-wrap {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.cs-wheel {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG text styling — referenced by classes inside SVG */
.cs-mirror-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  fill: #f5f1e6;
}
.cs-mirror-num {
  font-family: 'Bodoni Moda', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: #f5f1e6;
  opacity: 0.55;
}
.cs-plaque-ly {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 88px;
  fill: #f5f1e6;
}
.cs-plaque-maison {
  font-family: 'Bodoni Moda', 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: 0.42em;
  fill: #f5f1e6;
  opacity: 0.9;
}

/* Content side */
.cs-content {
  max-width: 28rem;
  margin: 0 auto;
}
.cs-eyebrow {
  font-family: 'Bodoni Moda', 'Cormorant Garamond', serif;
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.65;
  display: block;
  margin-bottom: 1rem;
}
.cs-lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--ivory);
  margin: 0 0 2rem;
}

.cs-form,
.cs-pwd-form {
  margin: 0 0 1.2rem;
}
.cs-form-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ivory);
  opacity: 0.78;
  display: block;
  margin-bottom: 0.5rem;
}
.cs-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}
.cs-input {
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.4);
  color: var(--ivory);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  padding: 0.55rem 0;
  outline: none;
  border-radius: 0;
  transition: border-bottom-color 0.2s;
}
.cs-input:focus {
  border-bottom-color: var(--ivory);
}
.cs-input::placeholder {
  color: var(--ivory);
  opacity: 0.4;
  font-style: italic;
}
.cs-submit {
  background: transparent;
  border: 0.5px solid var(--ivory);
  color: var(--ivory);
  font-family: 'Bodoni Moda', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cs-submit:hover {
  background: var(--ivory);
  color: var(--navy);
}
.cs-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-consent {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ivory);
  opacity: 0.55;
  margin: 0.5rem 0 0;
}
.cs-consent a {
  color: var(--ivory);
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(245, 241, 230, 0.3);
  margin: 0 0.18em;
  font-style: italic;
}
.cs-consent a:hover {
  opacity: 1;
  border-bottom-color: rgba(245, 241, 230, 0.7);
}

.cs-success {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  color: var(--ivory);
  opacity: 0.85;
  margin: 0 0 1.4rem;
}
.cs-pwd-err {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  color: #f5b8b8;
  opacity: 0.85;
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

.cs-or {
  font-family: 'Bodoni Moda', serif;
  font-size: 0.62rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.4;
  text-align: center;
  margin: 1.4rem 0 1.2rem;
  position: relative;
}
.cs-or::before, .cs-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 0.5px;
  background: rgba(245, 241, 230, 0.2);
}
.cs-or::before { left: 0; }
.cs-or::after  { right: 0; }

.cs-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ivory);
  opacity: 0.55;
  margin: 2rem 0 0;
  text-align: center;
}

.cs-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  font-family: 'Bodoni Moda', serif;
  font-size: 0.65rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.55;
}
.cs-footer-lineage {
  text-transform: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}

/* ─── Mobile layout: stack wheel above content ─── */
@media (max-width: 880px) {
  body.coming-soon-page { overflow: auto; }
  .cs-stage {
    grid-template-columns: 1fr;
    padding: 0 1.5rem 2rem;
    gap: 1rem;
  }
  .cs-wheel-wrap {
    max-width: 380px;
  }
  .cs-content {
    text-align: center;
  }
  .cs-content .cs-form-label {
    text-align: left;
  }
  .cs-or::before, .cs-or::after { width: 25%; }
  .cs-footer {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .cs-lede { font-size: 1.2rem; }
  .cs-form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Phase L — admin order detail modal
 * ════════════════════════════════════════════════════════════════════════════ */

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-modal[hidden] {
  display: none !important;
}
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 71, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.admin-modal-panel {
  position: relative;
  background: var(--ivory);
  border-radius: 4px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  max-width: 640px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.15);
}
.admin-modal-header h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--navy);
}
.admin-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
  opacity: 0.55;
  padding: 0;
  width: 2rem;
  height: 2rem;
}
.admin-modal-close:hover { opacity: 1; }
.admin-modal-body {
  padding: 1.4rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.admin-detail-section {
  margin-bottom: 1.5rem;
}
.admin-detail-section:last-child { margin-bottom: 0; }
.admin-detail-h {
  font-family: 'Bodoni Moda', serif;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.15);
}
.admin-detail-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.88rem;
}
.admin-detail-grid dt {
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  opacity: 0.65;
  font-weight: 400;
}
.admin-detail-grid dd {
  margin: 0;
  color: var(--navy);
}
.admin-detail-grid dd a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(20,40,71,0.3);
}
.admin-detail-msg {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  background: rgba(20, 40, 71, 0.04);
  padding: 0.5rem 0.8rem;
  border-radius: 2px;
  border-left: 2px solid rgba(20, 40, 71, 0.25);
  grid-column: 1 / -1;
  margin-top: 0.3rem;
}
.admin-detail-err {
  color: #832525;
  font-size: 0.85rem;
}
.admin-empty-inline {
  color: var(--navy);
  opacity: 0.5;
  font-style: italic;
}

/* Clickable rows in orders table */
.admin-row-clickable { cursor: pointer; }
.admin-row-clickable:hover { background: rgba(20, 40, 71, 0.04); }
.admin-detail-btn {
  background: transparent;
  border: 0.5px solid rgba(20, 40, 71, 0.3);
  color: var(--navy);
  font-family: 'Bodoni Moda', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-detail-btn:hover {
  background: var(--navy);
  color: var(--ivory);
}

@media (max-width: 560px) {
  .admin-detail-grid {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .admin-detail-grid dt { font-size: 0.72rem; opacity: 0.55; }
  .admin-detail-grid dd { margin-bottom: 0.5rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase I followup 2 — tier cards: wider, less cramped
 * ════════════════════════════════════════════════════════════════════════════ */

/* The order form is in .container.narrow which is good for form fields but
 * makes the 3 tier cards too cramped (~16rem wide each). Break the cards
 * out wider for visual breathing room.  */
.tier-select.tier-select--3col {
  max-width: none;
  width: calc(100% + 6rem);
  margin-left: -3rem;
  margin-right: -3rem;
  gap: 1.2rem;
}
.tier-select--3col .tier-option {
  min-height: 13rem;
  padding: 1.6rem 1.4rem;
  border-radius: 3px;
}
.tier-select--3col .tier-option .label {
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}
.tier-select--3col .tier-option .price {
  font-size: 0.78rem;
  margin-bottom: 0.8rem;
  letter-spacing: 0.14em;
  opacity: 0.78;
}
.tier-select--3col .tier-option .desc {
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .tier-select.tier-select--3col {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .tier-select--3col .tier-option {
    min-height: 10rem;
    padding: 1.3rem 1.2rem;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase I followup 3 — cards pop against backgrounds, About spacing
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── Spacing before the ritual mechanism cards on About ─── */
.lm-about-block + .lm-ritual-mech-grid {
  margin-top: var(--s5);
}
.lm-ritual-mech-grid {
  margin-bottom: var(--s6);
}

/* ─── About: ritual mech cards on navy → fill with navy-3 for pop ─── */
.lm-ritual-mech-card {
  background: var(--navy-3);
  border-color: rgba(245, 241, 230, 0.12);
}
.lm-ritual-mech-card:hover {
  background: #324569;
  border-color: rgba(245, 241, 230, 0.32);
}

/* ─── Method: mirror essay cards (on ivory) → fill with ivory-2 for pop ─── */
.lm-mirrors-pentagon .lm-mirror-essay {
  background: var(--ivory-3);
  border-color: rgba(20, 40, 71, 0.1);
}
.lm-mirrors-pentagon .lm-mirror-essay:hover {
  background: var(--ivory-2);
  border-color: rgba(20, 40, 71, 0.32);
}

/* ─── Method: origin metadata → demoted, italic one-liner ─── */
.lm-mirror-essay-origin {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.6;
  margin: 0.15rem 0 0;
  line-height: 1.4;
}

/* ─── Method: 8-sections list items (on navy) → fill with navy-3 ─── */
.lm-method-sections-section .lm-section-item {
  background: var(--navy-3);
  border-color: rgba(245, 241, 230, 0.12);
  margin-bottom: 0.6rem;
  border-radius: 3px;
  border-top: 0.5px solid rgba(245, 241, 230, 0.12);
  border-bottom: 0;
}
.lm-method-sections-section .lm-section-item:hover {
  background: #324569;
  border-color: rgba(245, 241, 230, 0.32);
}
.lm-method-sections-section .lm-section-item[open] {
  background: #324569;
}
.lm-method-sections-section .lm-section-summary {
  padding: 1.2rem 1.4rem;
}
.lm-method-sections-section .lm-section-detail {
  padding: 0 1.4rem 1.4rem;
}

/* ─── "Sample" label on 8-sections section ─── */
.lm-sections-sample-note {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ivory);
  opacity: 0.55;
  text-align: center;
  margin: 0 0 1.6rem;
  padding: 0.5rem 1rem;
  display: inline-block;
  border: 0.5px solid rgba(245, 241, 230, 0.25);
  border-radius: 2px;
}
.lm-sections-sample-wrap {
  text-align: center;
  margin-bottom: 1rem;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X — Tier section v2 (dynamic anatomy)
 * ════════════════════════════════════════════════════════════════════════════
 * Renders on home page below hero. The section toggles between v1 (legacy
 * price cards) and v2 (dynamic anatomy) via data-tier-version attribute on
 * the parent .lm-pricing section. tier-v2.js shows/hides the matching block.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Feature flag visibility (both blocks present, JS shows one) */
.lm-pricing[data-tier-version="v1"] [data-tier-v2] { display: none; }
.lm-pricing[data-tier-version="v2"] [data-tier-v1] { display: none; }

/* ─── V2: section header copy ─── */
.lm-tier-v2-h {
  text-align: center;
  margin-bottom: 0.6rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.18;
}
.lm-tier-v2-sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  opacity: 0.72;
  text-align: center;
  max-width: 32rem;
  margin: 0 auto var(--s4);
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

/* ─── V2: anatomy panel ─── */
.lm-tier-v2-anatomy {
  background: var(--ivory-3);
  border: 0.5px solid rgba(20, 40, 71, 0.15);
  border-radius: 3px;
  padding: 1.5rem 1.8rem;
  margin: 0 auto var(--s4);
  max-width: 40rem;
  min-height: 16rem;  /* prevents layout jump when toggling */
}
.lm-tier-v2-anatomy-h {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--navy);
  margin: 0 0 1.1rem;
  opacity: 0.92;
}
.lm-tier-v2-anatomy-h em {
  font-style: normal;
  opacity: 0.55;
  font-size: 0.85rem;
  margin-left: 0.5rem;
  font-weight: 400;
}
.lm-tier-v2-anatomy-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  font-family: var(--serif-text);
  font-size: 0.9rem;
  color: var(--navy);
}
.lm-tier-v2-anatomy-subgroup-h {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.12);
}
.lm-tier-v2-anatomy-items {
  display: grid;
  gap: 0.5rem;
}
.lm-tier-v2-anatomy-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.lm-tier-v2-anatomy-num {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.72rem;
  opacity: 0.5;
}
.lm-tier-v2-anatomy-name {
  font-style: italic;
  line-height: 1.4;
}

/* ─── V2: tier cards ─── */
.lm-tier-v2-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  max-width: 42rem;
  margin: 0 auto;
  align-items: stretch;  /* equal heights */
}
.lm-tier-v2-card {
  background: var(--ivory-3);
  border: 0.5px solid rgba(20, 40, 71, 0.2);
  border-radius: 3px;
  padding: 1.6rem 1.5rem 1.4rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 18rem;  /* equal-size requirement from spec */
}
.lm-tier-v2-card:hover {
  background: var(--ivory-2);
}
.lm-tier-v2-card.is-selected {
  border: 1.5px solid var(--navy);
  background: var(--ivory-3);
}
.lm-tier-v2-card.is-selected::after {
  content: '';
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy);
}
.lm-tier-v2-badge {
  position: absolute;
  top: -0.6rem;
  left: 1.2rem;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 2px;
}
.lm-tier-v2-num {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
  margin-bottom: 0.4rem;
}
.lm-tier-v2-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--navy);
  line-height: 1.1;
  margin: 0 0 0.4rem;
}
.lm-tier-v2-price {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: 0.005em;
  color: var(--navy);
  opacity: 1;
  margin-bottom: 0.95rem;
  line-height: 1.05;
}
.lm-tier-v2-price .lm-tier-v2-price-unit {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-left: 0.4rem;
  font-weight: 400;
  vertical-align: baseline;
}
.lm-tier-v2-desc {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.93rem;
  color: var(--navy);
  line-height: 1.55;
  opacity: 0.85;
  margin: 0;
  flex: 1;
}
.lm-tier-v2-cta {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  border: 0.5px solid var(--navy);
  border-radius: 2px;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.lm-tier-v2-cta:hover {
  background: var(--navy);
  color: var(--ivory);
}
.lm-tier-v2-card.is-selected .lm-tier-v2-cta {
  background: var(--navy);
  color: var(--ivory);
}

/* ─── V2: mobile ─── */
@media (max-width: 720px) {
  .lm-tier-v2-cards {
    grid-template-columns: 1fr;
  }
  .lm-tier-v2-card {
    min-height: auto;  /* let single-col cards sit naturally */
  }
}
@media (max-width: 580px) {
  .lm-tier-v2-anatomy {
    padding: 1.2rem 1.3rem;
    min-height: 0;
  }
  .lm-tier-v2-anatomy-cols {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .lm-tier-v2-h {
    font-size: 1.9rem;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X — Order form: choice cards (replaces .segments for language + delivery)
 * ════════════════════════════════════════════════════════════════════════════ */

.lm-choice-grid {
  display: grid;
  gap: 0.7rem;
}
.lm-choice-grid--2 { grid-template-columns: 1fr 1fr; }
.lm-choice-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

.lm-choice-card {
  position: relative;
  cursor: pointer;
  display: block;
}
.lm-choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lm-choice-card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1rem;
  background: var(--ivory-3);
  border: 1px solid rgba(20, 40, 71, 0.28);
  border-radius: 6px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  min-height: 3.6rem;
}
.lm-choice-card:hover .lm-choice-card-inner {
  background: var(--ivory-2);
  border-color: rgba(20, 40, 71, 0.5);
  box-shadow: 0 2px 8px rgba(20, 40, 71, 0.07);
}
.lm-choice-card input:checked + .lm-choice-card-inner {
  border-color: var(--navy);
  border-width: 2px;
  background: var(--ivory-3);
  box-shadow: 0 3px 12px rgba(20, 40, 71, 0.14);
  transform: translateY(-1px);
}
.lm-choice-card input:focus-visible + .lm-choice-card-inner {
  outline: 2px solid rgba(20, 40, 71, 0.4);
  outline-offset: 1px;
}
.lm-choice-card input:checked + .lm-choice-card-inner::after {
  content: '';
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--ivory-3);
}

.lm-choice-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--navy);
  opacity: 0.75;
  flex-shrink: 0;
}
.lm-choice-card-icon svg {
  width: 100%;
  height: 100%;
}

.lm-choice-card-label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
}

/* Language-specific card variant: prominent flag/code + dual label */
.lm-choice-card--lang .lm-choice-card-inner {
  padding: 1rem 1.1rem;
  justify-content: flex-start;
  gap: 0.9rem;
  min-height: 4.2rem;
}
.lm-choice-card-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 1.9rem;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(20, 40, 71, 0.25);
  border: 0.5px solid rgba(20, 40, 71, 0.18);
}
.lm-choice-card-flag svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Selected language card: ring the flag + lift, so the active choice is loud */
.lm-choice-card--lang input:checked + .lm-choice-card-inner .lm-choice-card-flag {
  box-shadow: 0 0 0 2px var(--navy), 0 2px 6px rgba(20, 40, 71, 0.25);
}
.lm-choice-card-mid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.lm-choice-card-sublabel {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--navy);
  opacity: 0.55;
  margin-top: 0.1rem;
  font-weight: 400;
}

/* Mobile: 3-col delivery becomes 1-col on phones */
@media (max-width: 520px) {
  .lm-choice-grid--3 { grid-template-columns: 1fr; }
  .lm-choice-grid--2 { grid-template-columns: 1fr; }
  .lm-choice-card-inner { justify-content: flex-start; padding-left: 1rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.2 — Home hero split layout: ferris wheel left, content right
 * ════════════════════════════════════════════════════════════════════════════ */
.lm-hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 2.5rem;
  padding: var(--s5) 0 var(--s6);
  max-width: 84rem;
  margin: 0 auto;
}

/* Wheel column */
.lm-hero-wheel-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.lm-hero-wheel {
  display: block;
  width: 100%;
  height: auto;
}
.lm-hero-wheel-mirror-num {
  font-family: var(--tracked);
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: #f5f1e6;
  opacity: 0.55;
  font-style: italic;
}
.lm-hero-wheel-mirror-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  fill: #f5f1e6;
  opacity: 1;
}
.lm-hero-wheel-plaque-ly {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 88px;
  fill: #f5f1e6;
  opacity: 1;
}
.lm-hero-wheel-plaque-maison {
  font-family: var(--tracked);
  font-size: 10px;
  letter-spacing: 0.42em;
  fill: #f5f1e6;
  opacity: 0.9;
}

/* Content column — sits on the right at desktop */
.lm-hero-content {
  text-align: left;
  max-width: 32rem;
}
.lm-hero-content .lm-hero-headline {
  text-align: left;
  margin-bottom: 1.2rem;
}
.lm-hero-content .lm-hero-sub {
  text-align: left;
  margin-bottom: 2rem;
  max-width: 30rem;
}

/* Tablet and below: stack — wheel on top, content below */
@media (max-width: 900px) {
  .lm-hero-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: var(--s4) 0 var(--s5);
  }
  .lm-hero-wheel-wrap {
    max-width: 460px;
  }
  .lm-hero-content {
    margin: 0 auto;
    text-align: center;
  }
  .lm-hero-content .lm-hero-headline,
  .lm-hero-content .lm-hero-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 580px) {
  .lm-hero-wheel-wrap {
    max-width: 360px;
  }
  .lm-hero-wheel-mirror-name { font-size: 18px; }
  .lm-hero-wheel-mirror-num { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.2 — Personal anatomy: 2 columns when single group (4+4 layout)
 * Matches compat's two-column vertical height.
 * ════════════════════════════════════════════════════════════════════════════ */
.lm-tier-v2-anatomy-cols--single {
  /* Single group: one column wrapper, items go 2-col inside */
  grid-template-columns: 1fr;
}
.lm-tier-v2-anatomy-items--2col {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
@media (max-width: 580px) {
  .lm-tier-v2-anatomy-items--2col {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.3 — Nav CTA emphasis ("Order a reading" as a pill button)
 * ════════════════════════════════════════════════════════════════════════════ */
.btn-link--emphasized {
  padding: 0.55rem 1.1rem;
  border: 0.5px solid currentColor;
  border-radius: 2px;
  text-decoration: none;
  background: none;
  border-bottom: 0.5px solid currentColor;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
/* On ivory nav: filled navy pill with ivory text */
.site-nav:not(.dark) .btn-link--emphasized {
  background: var(--navy);
  color: var(--ivory);
  border-color: var(--navy);
}
.site-nav:not(.dark) .btn-link--emphasized:hover {
  background: var(--navy-3);
  border-color: var(--navy-3);
  opacity: 1;
}
/* On navy nav (home): filled ivory pill with navy text */
.site-nav.dark .btn-link--emphasized {
  background: var(--ivory);
  color: var(--navy);
  border-color: var(--ivory);
}
.site-nav.dark .btn-link--emphasized:hover {
  background: var(--ivory-2);
  border-color: var(--ivory-2);
  opacity: 1;
}
/* Override the base ::after pseudo so it doesn't add an underline */
.btn-link--emphasized::after { display: none; }

/* Hero headline/sub at full ivory */
.lm-hero-content .lm-hero-headline,
.lm-hero-content .lm-hero-sub {
  color: var(--ivory);
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.4 — Navy footer (site-wide)
 * ════════════════════════════════════════════════════════════════════════════ */
footer.site-footer {
  background: var(--navy);
  border-top: 0.5px solid rgba(245, 241, 230, 0.18);
  color: var(--ivory);
}
footer.site-footer .wordmark,
footer.site-footer .site-footer-tagline,
footer.site-footer .site-footer-meta,
footer.site-footer .site-footer-meta-lineage,
footer.site-footer [data-lunar] {
  color: var(--ivory);
}
footer.site-footer .site-footer-tagline {
  opacity: 0.92;
}
footer.site-footer .site-footer-meta,
footer.site-footer .site-footer-meta-lineage {
  opacity: 0.72;
}
footer.site-footer .lunar-name,
footer.site-footer [data-lunar] .lunar-name {
  color: var(--ivory);
  opacity: 0.78;
}
/* moonlight socials in footer — render in ivory */
footer.site-footer .lm-moonlight-social,
footer.site-footer .lm-moonlight-social svg {
  color: var(--ivory);
  opacity: 0.68;
}
footer.site-footer .lm-moonlight-social:hover,
footer.site-footer .lm-moonlight-social:hover svg {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.4 — Hero CTA: filled ivory pill on navy hero ground
 * Mirrors the menu pill style but reversed (ivory bg, navy text), so the
 * hero CTA is now the most prominent conversion target on the page.
 * ════════════════════════════════════════════════════════════════════════════ */
.lm-hero-content .btn-primary {
  background: var(--ivory);
  color: var(--navy);
  border: 0.5px solid var(--ivory);
  padding: 0.85rem 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  display: inline-block;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lm-hero-content .btn-primary:hover {
  background: var(--ivory-2);
  border-color: var(--ivory-2);
  color: var(--navy);
}
.lm-hero-content .btn-primary::after { display: none; }


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.7 — Collapse ivory gaps between navy sections and navy footer
 * ════════════════════════════════════════════════════════════════════════════
 * When a navy section directly precedes the navy footer, the section's bottom
 * padding plus the footer's top padding stacks, creating visual ivory dead-air
 * once the footer was made navy. These rules collapse that gap so navy reads
 * continuously from the section into the footer. Also kills the section+section
 * hairline rule when navy meets navy.
 * ════════════════════════════════════════════════════════════════════════════ */

/* The "Sẵn sàng bắt đầu" / Ready to begin section directly before footer */
.lm-second-cta--navy {
  padding-bottom: var(--s4);
}
.lm-second-cta--navy + footer.site-footer,
.lm-second-cta--navy + .site-footer {
  padding-top: var(--s4);
  border-top: 0;
}

/* About page: the navy footer-with-practitioner already manages its own top
 * padding via .site-footer--with-practitioner — but the section above ends
 * with var(--s6) bottom padding (global). Tighten that. */
section + footer.site-footer--with-practitioner {
  border-top: 0;
}
section:has(+ footer.site-footer--with-practitioner) {
  padding-bottom: var(--s4);
}
/* Fallback for browsers without :has() — manually tighten via class added in html */
.lm-section-before-practitioner {
  padding-bottom: var(--s4) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.7 — Method page section h1 (mirrors_h) at smaller display-2 size
 * The h1 semantic stays for SEO/a11y; visual size drops to match a section header
 * not a page hero, since the page leads with the mirrors immediately.
 * ════════════════════════════════════════════════════════════════════════════ */
.lm-method-section .lm-section-header h1.display-1 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.08;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.10 — Admin orders: export button, soft-delete, expandable rows
 * ════════════════════════════════════════════════════════════════════════════ */

/* Export to Excel button */
.admin-export-btn {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  background: var(--navy);
  color: var(--ivory);
  border: 0.5px solid var(--navy);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.admin-export-btn:hover { background: var(--navy-3); }

/* Row action cell holds Details + Delete side by side */
.admin-row-actions {
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Delete / Restore button */
.admin-delete-btn {
  font-family: var(--ui);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  background: none;
  color: #9a3434;
  border: 0.5px solid rgba(154, 52, 52, 0.4);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.admin-delete-btn:hover {
  background: #9a3434;
  color: var(--ivory);
}
.admin-delete-btn.is-restore {
  color: #2f6b3f;
  border-color: rgba(47, 107, 63, 0.4);
}
.admin-delete-btn.is-restore:hover {
  background: #2f6b3f;
  color: var(--ivory);
}

/* Secondary name in the Name column (the "& Partner" part) */
.admin-name-amp {
  opacity: 0.6;
  font-size: 0.92em;
}

/* Expandable detail row */
.admin-order-row.is-expanded {
  background: rgba(20, 40, 71, 0.04);
}
.admin-order-detail-row > td {
  padding: 0 !important;
  background: rgba(20, 40, 71, 0.025);
}
.admin-inline-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem 2rem;
  padding: 1.1rem 1.4rem 1.3rem;
}
.admin-inline-person-h {
  font-family: var(--tracked);
  font-style: italic;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 0.5px solid rgba(20, 40, 71, 0.12);
}
.admin-inline-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  margin: 0;
  font-size: 0.82rem;
}
.admin-inline-grid dt {
  font-family: var(--ui);
  color: var(--navy);
  opacity: 0.5;
  font-size: 0.76rem;
}
.admin-inline-grid dd {
  margin: 0;
  color: var(--navy);
}
.admin-inline-detail-foot {
  grid-column: 1 / -1;
  font-family: var(--ui);
  font-size: 0.72rem;
  color: var(--navy);
  opacity: 0.45;
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════════════════
 * Phase X.15 — Admin: truncated/error flag in report generation diagnostics
 * ════════════════════════════════════════════════════════════════════════════ */
.admin-stop-truncated {
  color: #9a3434;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   Awaiting-payment page (pay.html) — lives on the navy starfield ground,
   same anchor as the status page. Plaque + heading in ivory; the QR and
   transfer details sit inside one contained ivory card for dark-on-light
   legibility.
   ════════════════════════════════════════════════════════════════════════ */
.pay-wrap { max-width: 30rem; }
.pay-lede { margin-bottom: var(--s4); }

/* Numbered steps — ivory on navy */
.pay-steps {
  list-style: none; margin: 0 0 var(--s4); padding: 0;
  display: flex; flex-direction: column; gap: 0.7rem; text-align: left;
}
.pay-step { display: flex; align-items: flex-start; gap: 0.7rem; }
.pay-step-num {
  flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 0.5px solid rgba(245, 241, 230, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-size: 0.72rem; color: var(--ivory); opacity: 0.85;
}
.pay-step-text {
  font-family: 'Crimson Pro', Georgia, serif; font-size: 0.95rem;
  line-height: 1.4; color: var(--ivory); opacity: 0.8; padding-top: 0.15rem;
}

/* Contained ivory payment card */
.pay-card {
  background: var(--ivory-3);
  border-radius: 10px;
  padding: var(--s4);
  margin: 0 0 var(--s4);
  text-align: left;
  box-shadow: 0 18px 50px -28px rgba(0,0,0,0.5);
}

.pay-qr-frame {
  margin: 0 auto var(--s3);
  width: 220px; max-width: 100%; aspect-ratio: 1 / 1;
  background: #fff; border: 0.5px solid var(--hair); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pay-qr-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pay-qr-fallback { padding: 1.2em; font-size: 0.85rem; color: var(--muted); text-align: center; }

.pay-details { margin: 0; border-top: 0.5px solid var(--hair); }
.pay-detail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 0.7em 0; border-bottom: 0.5px solid var(--hair);
}
.pay-detail-row dt {
  font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.pay-detail-row dd {
  margin: 0; font-family: var(--ui); font-size: 0.92rem; color: var(--ink);
  text-align: right; display: flex; align-items: center; gap: 0.4em; justify-content: flex-end;
}
.pay-ref-code { font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pay-detail-row--ref dd { font-size: 1rem; }

.pay-copy {
  border: none; background: none; cursor: pointer; color: var(--muted-2);
  font-size: 0.9rem; line-height: 1; padding: 0.1em 0.25em; border-radius: 3px;
  transition: color 0.15s ease;
}
.pay-copy:hover { color: var(--ink); }

.pay-ref-note {
  font-size: 0.78rem; color: var(--muted); font-family: var(--display);
  font-style: italic; margin: var(--s2) 0 0; text-align: center;
}

/* Actions */
.pay-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.pay-paid-btn { width: 100%; padding: 1.15em; }

/* Disabled countdown state — visibly greyed, pulsing while it waits */
.pay-paid-btn:disabled,
.pay-paid-btn[disabled] {
  background: rgba(245, 241, 230, 0.14);
  color: rgba(245, 241, 230, 0.55);
  border-color: rgba(245, 241, 230, 0.18);
  cursor: not-allowed;
  animation: pay-wait 1.8s ease-in-out infinite;
}
.pay-paid-count { font-variant-numeric: tabular-nums; }
@keyframes pay-wait {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.95; }
}

.pay-cancel-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--ivory); opacity: 0.5; transition: opacity 0.15s ease;
}
.pay-cancel-link:hover { opacity: 0.85; }

.pay-fineprint {
  margin-top: var(--s3); font-size: 0.78rem; color: var(--ivory); opacity: 0.6;
  text-align: center; font-family: var(--display); font-style: italic;
}

/* ─── Status-page notice screen (bank-transfer verification states) ─────── */
.status-notice { margin-top: var(--s3); }
.status-notice-detail {
  font-family: 'Crimson Pro', Georgia, serif; font-size: 1rem;
  color: var(--ivory); opacity: 0.78; line-height: 1.65; margin: 0 auto var(--s4); max-width: 28rem;
}
.status-notice-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }

/* ─── Status-page loading shimmer on the progress bar — shows life ─────── */
.status-progress-fill {
  position: relative; overflow: hidden;
}
.status-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245,241,230,0.35), transparent);
  transform: translateX(-100%);
  animation: status-shimmer 1.8s ease-in-out infinite;
}
@keyframes status-shimmer {
  100% { transform: translateX(100%); }
}

/* Breathing dot beside the stage heading while working */
.status-working-dot {
  display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--ivory); margin-left: 0.5rem; vertical-align: middle;
  animation: status-pulse 1.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1); }
}

/* ─── Bank-transfer reconciliation controls (admin orders) ─────────────── */
.admin-pill-verified   { background: rgba(80, 160, 100, 0.18); color: #2a6c40; }
.admin-pill-awaiting_verification,
.admin-pill-pending_review { background: rgba(220, 170, 70, 0.18); color: #8a5e10; }
.admin-pill-payment_failed { background: rgba(168, 50, 50, 0.18); color: #832525; }

.admin-reconcile-btn,
.admin-notreceived-btn {
  background: transparent;
  border: 0.5px solid rgba(20, 40, 71, 0.3);
  color: var(--navy);
  font-family: 'Bodoni Moda', serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.admin-reconcile-btn { border-color: rgba(42, 108, 64, 0.5); color: #2a6c40; }
.admin-reconcile-btn:hover { background: #2a6c40; color: var(--ivory); border-color: #2a6c40; }
.admin-notreceived-btn { border-color: rgba(131, 37, 37, 0.4); color: #832525; }
.admin-notreceived-btn:hover { background: #832525; color: var(--ivory); border-color: #832525; }

/* Unverified bank-transfer rows: subtle left accent + status dot */
.admin-order-row--unverified > td:first-child { box-shadow: inset 3px 0 0 rgba(220, 170, 70, 0.7); }
.admin-unverified-dot { color: #c79a3a; font-size: 0.7em; vertical-align: middle; margin-left: 0.2em; }

/* ════════════════════════════════════════════════════════════════════════
   REPORT PAGE — redesign (Option A: Editorial Classic)
   Cormorant Garamond (display) · Spectral (body) · Bodoni Moda (caps)
   Wide margins · drop-caps · pastel system-reference annotations
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --lm-sys-bazi:#9a7b5a;     /* warm bronze-taupe */
  --lm-sys-tuvi:#7e6a96;     /* muted plum */
  --lm-sys-western:#5f7a92;  /* dusty slate-blue */
  --lm-sys-num:#6f8a72;      /* sage */
}

.lm-report-page{ background:var(--ivory); }
.lm-report-shell{ max-width:1320px; margin:0 auto; padding:48px 40px 96px; }

.lm-report-head{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; margin-bottom:8px;
}
.lm-report-head .report-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ─── Chart-summary header ─────────────────────────────────────────────── */
.lm-summary{
  background:transparent; border:none;
  border-radius:0; padding:0 0 6px; margin:30px auto 0; max-width:780px;
  box-shadow:none; border-bottom:0.5px solid var(--hair, rgba(20,40,71,0.14));
}
.lm-sum-typebar{ display:flex; justify-content:flex-end; margin-bottom:6px; }
.lm-sum-type{
  font-family:'Inter',sans-serif; font-size:0.64rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--muted,#5c6577);
  border:0.5px solid rgba(20,40,71,0.22); border-radius:2px; padding:0.32rem 0.65rem;
}
.lm-sum-subject{ padding-top:4px; }
.lm-sum-divider{ height:0.5px; background:rgba(20,40,71,0.12); margin:22px 0; }
.lm-sum-top{ margin-bottom:18px; padding-bottom:15px; border-bottom:0.5px solid rgba(20,40,71,0.12); }
.lm-sum-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.7rem; color:var(--navy,#142847); line-height:1.05; }
.lm-sum-dob{ font-family:'Inter',sans-serif; font-size:0.8rem; color:var(--muted,#5c6577); margin-top:5px; }
.lm-sum-systems{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px; }
.lm-sysrow{ display:flex; align-items:flex-start; gap:10px; }
.lm-sysmain{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lm-sysline{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.lm-sysdot{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; transform:translateY(5px); }
.lm-d-bazi{ background:var(--lm-sys-bazi); }
.lm-d-tuvi{ background:var(--lm-sys-tuvi); }
.lm-d-western{ background:var(--lm-sys-western); }
.lm-d-num{ background:var(--lm-sys-num); }
.lm-sysk{ font-family:'Inter',sans-serif; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy,#142847); opacity:0.6; }
.lm-sysv{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:1.32rem; line-height:1.05; color:var(--navy,#142847); }
.lm-syssub{ font-family:'Spectral',serif; font-size:0.82rem; line-height:1.35; color:var(--ink,#1c2840); }
.lm-sum-note{ font-family:'Spectral',serif; font-style:italic; color:var(--muted,#5c6577); font-size:0.84rem; line-height:1.55; margin-top:18px; padding-top:16px; border-top:0.5px solid rgba(20,40,71,0.12); }

/* ─── Body layout: contents sidebar + reading column ───────────────────── */
/* Report body: a flex row where the contents sidebar sits well out in the left
   gutter (near the margin) and the prose column is centered and wider. The
   sidebar is sticky so it follows scroll. A right spacer balances it so the
   prose stays page-centered. */
.lm-report-body{ display:flex; justify-content:center; gap:64px; margin-top:34px; align-items:flex-start; }
.lm-report-toc{ flex:0 0 190px; width:190px; position:sticky; top:32px; align-self:flex-start; max-height:calc(100vh - 56px); overflow-y:auto; }
.lm-report-content{ flex:0 1 920px; max-width:920px; }
.lm-report-body::after{ content:""; flex:0 0 190px; }
@media (max-width:1400px){
  .lm-report-body{ flex-direction:column; align-items:center; gap:24px; }
  .lm-report-toc{ position:static; flex:1 1 auto; width:100%; max-width:920px; }
  .lm-report-content{ flex:1 1 auto; width:100%; max-width:920px; }
  .lm-report-body::after{ display:none; }
}

.lm-contents{ }
.lm-contents-h{ font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--navy,#142847); margin-bottom:22px; }
.lm-contents ol{ list-style:none; counter-reset:lmtoc; padding:0; margin:0; }
.lm-contents li{ counter-increment:lmtoc; padding:11px 0; }
.lm-contents a{ display:flex; align-items:baseline; gap:12px; color:var(--navy,#142847); text-decoration:none; border-bottom:none; padding-bottom:0; font-family:'Spectral',serif; font-size:0.98rem; opacity:1; transition:color 0.15s, opacity 0.15s; line-height:1.4; }
.lm-contents a:hover{ opacity:1; color:var(--navy,#142847); }
.lm-contents a::before{ content:counter(lmtoc,decimal-leading-zero); font-family:'Inter',sans-serif; font-size:0.66rem; font-weight:500; color:var(--navy,#142847); opacity:0.55; flex:0 0 auto; letter-spacing:0.05em; }

/* ─── Report typography (Option A) ─────────────────────────────────────── */
.lm-report-content h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:2.6rem; color:var(--navy,#142847); line-height:1.08; margin:0 0 0.4em; }
.lm-sec-num{ display:block; font-family:'Inter',sans-serif; font-size:0.72rem; letter-spacing:0.1em; color:var(--muted-2,#8a93a6); margin:54px 0 6px; }
.lm-report-content h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:2.3rem; color:var(--navy,#142847); line-height:1.08; margin:0 0 2px; position:relative; }
.lm-report-content h2::after{ content:''; display:block; width:38px; height:2px; background:var(--navy,#142847); opacity:0.32; margin:15px 0 24px; }
.lm-report-content h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.72rem; color:var(--navy,#142847); line-height:1.12; margin:42px 0 14px; position:relative; }
.lm-report-content h3::after{ content:''; display:block; width:26px; height:1.5px; background:var(--navy,#142847); opacity:0.28; margin:11px 0 0; }
.lm-report-content h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem; letter-spacing:0.04em; color:var(--navy,#142847); margin:24px 0 8px; }

.lm-report-content p{ font-family:'Spectral',serif; font-size:1.075rem; line-height:1.68; color:var(--ink,#1c2840); margin:0 0 17px; }
.lm-report-content strong{ font-weight:600; color:var(--navy,#142847); }
.lm-report-content em{ font-style:italic; }

/* drop cap on first paragraph of each section */
.lm-report-content p.lm-lead::first-letter{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  float:left; font-size:3.7em; line-height:0.76; padding:0.04em 0.1em 0 0; color:var(--navy,#142847);
}

/* blockquote = the "axis" / closing line */
.lm-report-content blockquote{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.35rem;
  color:var(--navy,#142847); opacity:0.9; line-height:1.4;
  margin:24px 0; padding-left:20px; border-left:2px solid rgba(20,40,71,0.22);
}
.lm-report-content blockquote p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.35rem; margin:0; }

/* lists */
.lm-report-content ul, .lm-report-content ol{ font-family:'Spectral',serif; font-size:1.05rem; line-height:1.6; color:var(--ink,#1c2840); margin:0 0 17px; padding-left:1.4em; }
.lm-report-content li{ margin-bottom:7px; }

/* tables (cross-system synthesis) */
.lm-report-content table{ width:100%; border-collapse:collapse; margin:22px 0; font-family:'Spectral',serif; font-size:0.92rem; }
.lm-report-content th{ font-family:'Inter',sans-serif; font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted,#5c6577); text-align:left; padding:8px 12px; border-bottom:1px solid rgba(20,40,71,0.22); font-weight:600; }
.lm-report-content td{ padding:9px 12px; border-bottom:0.5px solid rgba(20,40,71,0.1); color:var(--ink,#1c2840); vertical-align:top; }

/* ─── System-reference annotations ─────────────────────────────────────── */
.lm-ref{
  font-style:italic; color:var(--muted,#5c6577);
  border-bottom:1px dotted var(--lm-ref-c,#8a93a6);
  cursor:help; position:relative; padding-bottom:0.5px;
}
.lm-ref[data-sys="bazi"]{ --lm-ref-c:var(--lm-sys-bazi); }
.lm-ref[data-sys="tuvi"]{ --lm-ref-c:var(--lm-sys-tuvi); }
.lm-ref[data-sys="western"]{ --lm-ref-c:var(--lm-sys-western); }
.lm-ref[data-sys="num"]{ --lm-ref-c:var(--lm-sys-num); }
.lm-ref-tip{
  position:absolute; left:0; bottom:142%; width:288px; max-width:78vw;
  background:var(--navy,#142847); color:var(--ivory,#f5f1e6); border-radius:8px;
  padding:13px 15px; font-family:'Inter',sans-serif; font-style:normal;
  font-size:0.78rem; line-height:1.52;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:all 0.16s ease;
  box-shadow:0 16px 44px -18px rgba(0,0,0,0.6); z-index:30; pointer-events:none;
}
.lm-ref-tip::after{ content:''; position:absolute; left:18px; top:100%; border:6px solid transparent; border-top-color:var(--navy,#142847); }
.lm-ref-tsys{ display:block; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--lm-ref-c,#8a93a6); filter:brightness(1.55); margin-bottom:5px; }
.lm-ref:hover .lm-ref-tip, .lm-ref:focus .lm-ref-tip{ opacity:1; visibility:visible; transform:translateY(0); }

/* ─── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .lm-report-body{ flex-direction:column; gap:24px; }
  .lm-report-toc{ position:static; flex:1 1 auto; width:100%; border-bottom:0.5px solid rgba(20,40,71,0.12); padding-bottom:18px; }
  .lm-contents ol{ columns:2; column-gap:24px; }
  .lm-report-content{ max-width:100%; }
  .lm-sum-systems{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .lm-report-shell{ padding:32px 20px 72px; }
  .lm-summary{ padding:24px 22px; }
  .lm-contents ol{ columns:1; }
}

/* ─── Print / PDF ──────────────────────────────────────────────────────── */
@media print{
  .lm-report-shell{ max-width:100%; padding:0; }
  .no-print-sticky{ position:static !important; }
  /* The web sidebar TOC becomes a full contents PAGE at the front in print */
  .lm-report-body{ display:block; }
  .lm-report-toc{ break-after:page; page-break-after:always; padding-top:1cm; }
  .lm-contents ol{ columns:1; font-size:1.05rem; }
  .lm-contents a{ opacity:1; }
  .lm-report-content{ max-width:100%; }
  .lm-summary{ break-inside:avoid; box-shadow:none; }
  /* Annotations: show inline, suppress hover cards (they print as footnote-ish parentheticals if desired; here we just keep the underline) */
  .lm-ref-tip{ display:none; }
  .lm-ref{ border-bottom:1px dotted #999; color:#444; }
  .lm-report-content h2{ break-after:avoid; }
  .lm-report-content p{ orphans:3; widows:3; }
  .lm-sec-num{ break-after:avoid; }
}

/* ════════════════════════════════════════════════════════════════════════
   THESIS-STYLE PRINT / PDF  (comprehensive redesign)
   Cover page · contents page · elegant body · closing.
   One continuous warm-paper background, no "box" contrast.
   This block comes AFTER the earlier print rules so it wins on cascade.
   ════════════════════════════════════════════════════════════════════════ */
@media print {

  /* ---- Page setup: off-white fills the WHOLE sheet (margin:0); text spacing
     is applied as padding on the content so there is no white margin strip. ---- */
  @page {
    size: A4;
    margin: 18mm 0 16mm 0;   /* top + bottom breathing room; footer sits in bottom margin */
    background: #faf7f0;      /* off-white extends behind margin bands where supported */
  }
  @page :first {
    margin: 0;               /* cover fills the full sheet */
  }

  html, body {
    background: #faf7f0 !important;   /* single off-white paper tone everywhere */
    color: #1c2840 !important;
  }

  /* Hide all chrome */
  .site-nav, .site-footer, .no-print, .report-toolbar,
  .lang-toggle, #print-btn { display: none !important; }

  /* Kill the on-screen shell framing so there is no inner/outer color split */
  .lm-report-page, .report-wrap { background: #faf7f0 !important; padding: 0 !important; }
  .lm-report-shell { max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #faf7f0 !important; }
  /* Text spacing now lives as padding on the content blocks (since @page margin
     is 0). Cover and closing manage their own full-bleed layout. */
  /* With @page margin:0 the off-white fills the whole sheet. Text breathing room
     is created with padding on the content. Left/right padding applies per page;
     top/bottom padding pads the first/last edges, and generous heading margins
     keep continuation-page tops from crowding the edge. */
  #report-summary-mount, .lm-report-body { padding: 0 22mm; box-sizing: border-box; }
  #report-summary-mount { padding-top: 22mm; }
  #report-content { padding-bottom: 20mm; }
  /* keep section headings clear of a fresh page top */
  .lm-report-content h2 { margin-top: 14mm; }
  .lm-report-content h2:first-child { margin-top: 0; }
  /* Thesis pagination via natural DOM flow + break control.
     DOM order: summary, then body(toc, content). Cover injected first, closing last. */
  .lm-report-shell { display: block !important; }
  .lm-report-body { display: block !important; }
  .lm-report-head { display: none !important; }  /* hide on-screen header in print */
  .lm-report-content { max-width: 100% !important; }

  /* ---- COVER PAGE ----
     Injected by report-viewer.js as #lm-cover. Fills the first sheet. */
  #lm-cover {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    width: 100%;
    background: #faf7f0 !important;   /* white base — the navy field sits on top */
    color: #f5f1e6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-after: page;
    page-break-after: always;
    padding: 0 24mm;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Navy field with elegant curved cutouts is an injected SVG (#lm-cover-field),
     absolutely positioned to fill the page behind the content. */
  #lm-cover .lm-cover-field {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Subtle starfield (matches the website navy background) over the navy field */
  #lm-cover .lm-cover-stars {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* All cover content sits above the navy field */
  #lm-cover > * { position: relative; z-index: 1; }
  #lm-cover .lm-cover-crest { margin-bottom: 9mm; }
  #lm-cover .lm-cover-crest svg { display: block; }
  #lm-closing .lm-closing-crest { margin-bottom: 7mm; }
  #lm-closing .lm-closing-crest svg { display: block; }
  /* Wordmark as one unit (matches the closing page) */
  #lm-cover .lm-cover-wordmark {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
    font-size: 38pt; line-height: 1; color: #f5f1e6; margin-bottom: 22mm;
  }
  #lm-cover .lm-cover-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30pt;
    line-height: 1.15; color: #f5f1e6; margin-bottom: 8mm; max-width: 130mm;
  }
  #lm-cover .lm-cover-sub {
    font-family: 'Inter', sans-serif; font-size: 10pt; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(245,241,230,0.7); margin-bottom: 4mm;
  }
  #lm-cover .lm-cover-names {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18pt;
    color: #f5f1e6; margin-bottom: 3mm;
  }
  #lm-cover .lm-cover-dob {
    font-family: 'Inter', sans-serif; font-size: 9pt; color: rgba(245,241,230,0.65);
  }
  #lm-cover .lm-cover-foot {
    position: absolute; bottom: 22mm; left: 0; right: 0;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11pt;
    color: rgba(245,241,230,0.75);
  }

  /* ---- CONTENTS PAGE ---- */
  .lm-report-toc {
    position: static !important;
    break-before: avoid !important; page-break-before: avoid !important;
    break-after: page; page-break-after: always;
    padding-top: 8mm;
  }
  .lm-contents-h {
    font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16pt;
    color: #142847; letter-spacing: 0; text-transform: none; margin-bottom: 4mm;
    padding-bottom: 2.5mm; border-bottom: 0.5px solid rgba(20,40,71,0.25);
  }
  .lm-contents ol { columns: 1 !important; list-style: none; counter-reset: lmtoc; }
  .lm-contents li { counter-increment: lmtoc; padding: 1.9mm 0; }
  .lm-contents a { border-bottom: none; padding-bottom: 0; }
  .lm-contents a {
    color: #142847 !important; opacity: 1 !important; text-decoration: none;
    font-family: 'Spectral', serif; font-size: 10pt; display: flex; align-items: baseline; gap: 3.5mm;
  }
  .lm-contents a::before {
    content: counter(lmtoc, decimal-leading-zero);
    font-family: 'Inter', sans-serif; font-size: 8pt; color: #8a93a6;
  }

  /* ---- CHART SUMMARY (intro page block) — flat, no card, no box ---- */
  .lm-summary {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
    break-inside: avoid;
    margin: 0 0 6mm 0;
  }
  .lm-sum-typebar { justify-content: flex-start; margin-bottom: 4mm; }
  .lm-sum-type { border-color: rgba(20,40,71,0.3) !important; color: #5c6577 !important; }
  .lm-sum-name { font-size: 20pt; }
  .lm-sum-systems { gap: 3mm 12mm; }
  .lm-sum-note {
    font-family: 'Spectral', serif; font-style: italic; font-size: 10.5pt;
    line-height: 1.6; color: #5c6577; border-top: 0.5px solid rgba(20,40,71,0.2);
    margin-top: 6mm; padding-top: 5mm;
  }
  /* A heading for the intro page */
  .lm-summary::before {
    content: "";
  }

  /* ---- BODY ---- */
  .lm-report-content h1 { display: none; }  /* title lives on the cover now */
  .lm-sec-num {
    font-family: 'Bodoni Moda', serif; font-size: 10pt; letter-spacing: 0.15em;
    color: #9aa3b5; margin: 0 0 3mm 0;
  }
  .lm-report-content h2 {
    font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 20pt;
    color: #142847; break-after: avoid; margin: 0 0 1mm 0;
  }
  .lm-report-content h2::after { width: 30px; height: 1.5px; margin: 4mm 0 6mm 0; opacity: 0.4; }
  .lm-report-content h3 { font-size: 14pt; break-after: avoid; }
  .lm-report-content h4 { break-after: avoid; }
  .lm-report-content p {
    font-family: 'Spectral', serif; font-size: 11pt; line-height: 1.62;
    color: #1c2840; orphans: 3; widows: 3; margin: 0 0 3.5mm 0;
  }
  /* Drop cap, kept but print-tuned */
  .lm-report-content p.lm-lead::first-letter {
    font-family: 'Cormorant Garamond', serif; font-weight: 600;
    font-size: 3.4em; line-height: 0.78; padding: 0.04em 0.1em 0 0; color: #142847;
  }
  /* Each major section starts on a fresh page for a thesis feel.
     (Comment out the next rule if you prefer continuous flow.) */
  /* Sections flow naturally rather than each forcing a new page (which left
     near-empty pages for short sections). Keep a heading with the text that
     follows it, and avoid splitting a heading across pages. */
  .lm-report-content h2 { break-before: auto; page-break-before: auto; break-after: avoid; page-break-after: avoid; }
  .lm-report-content h2 + p, .lm-report-content h3 + p { break-before: avoid; }
  /* but the very first H2 should not force an extra blank page after the intro */

  .lm-report-content blockquote {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14pt;
    color: #142847; border-left: 2px solid rgba(20,40,71,0.3);
    padding-left: 5mm; margin: 5mm 0; break-inside: avoid;
  }
  .lm-report-content blockquote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14pt; }

  .lm-report-content ul, .lm-report-content ol {
    font-family: 'Spectral', serif; font-size: 11pt; line-height: 1.55;
  }
  .lm-report-content table { break-inside: avoid; font-size: 9.5pt; }
  .lm-report-content th { color: #5c6577; border-bottom-color: rgba(20,40,71,0.3); }

  /* Annotations: in print, show the term subtly underlined, drop the hover card */
  .lm-ref-tip { display: none !important; }
  .lm-ref { border-bottom: 0.5px dotted #b0a896; color: #5c6577; font-style: italic; }

  /* ---- CLOSING PAGE ----
     Injected by report-viewer.js as #lm-closing (the signature + tagline). */
  #lm-closing {
    break-before: page; page-break-before: always;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; height: 80vh;
  }
  #lm-closing .lm-closing-plaque {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 28pt;
    color: #142847; margin-bottom: 6mm;
  }
  #lm-closing .lm-closing-rule { width: 50px; height: 1px; background: rgba(20,40,71,0.3); margin: 5mm 0; }
  #lm-closing .lm-closing-tagline {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13pt;
    color: #5c6577; margin-top: 4mm;
  }
  #lm-closing .lm-closing-meta {
    font-family: 'Inter', sans-serif; font-size: 8.5pt; letter-spacing: 0.1em;
    color: #8a93a6; margin-top: 8mm;
  }

  /* Hide the on-screen signature block; the closing page replaces it */
  .report-signature { display: none !important; }

  /* Elements injected only for print are hidden on screen (see screen rule below) */
}

/* Print-only injected elements are hidden on screen */
#lm-cover, #lm-closing { display: none; }


/* ─── Order form: off-white panel for contrast against the ivory page ───── */
#order-form {
  background: var(--ivory, #f5f1e6);
  border: 0.5px solid rgba(20, 40, 71, 0.12);
  border-radius: 10px;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: 0 1px 3px rgba(20, 40, 71, 0.04);
}
/* Order page background is off-white so the ivory form box reads as the
   fill-in area (the contrast was requested reversed). */
body.order-page { background: #faf7f0; }
body.order-page .site-nav { background: #faf7f0; }

/* ─── Compatibility contents: two-level (parts + nested sections) ───────── */
.lm-contents-compat .lm-toc-part > a {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
  font-size: 1.05rem; color: var(--navy, #142847); opacity: 1;
}
.lm-contents-compat .lm-toc-part { padding-top: 16px; padding-bottom: 4px; }
.lm-contents-compat .lm-toc-part:first-child { padding-top: 0; }
.lm-contents-compat .lm-toc-sublist { list-style: none; counter-reset: none; padding: 0 0 6px 0; margin: 0; }
.lm-contents-compat .lm-toc-sub { counter-increment: none; padding: 4px 0 4px 14px; border-left: 1px solid rgba(20,40,71,0.12); margin-left: 2px; }
.lm-contents-compat .lm-toc-sub > a {
  font-family: 'Spectral', serif; font-size: 0.86rem; color: var(--navy, #142847);
  opacity: 0.78; gap: 0; text-decoration: none; border-bottom: none; padding-bottom: 0;
  display: block; line-height: 1.32;
}
.lm-contents-compat .lm-toc-sub > a::before { content: none; }
.lm-contents-compat .lm-toc-sub > a:hover { opacity: 1; }
.lm-contents-compat > ol > li > a::before { /* hide the number on part rows */ content: none; }

/* ─── Compatibility PDF: clear part divisions + own contents page ──────── */
@media print {
  /* Each PART A/B/C starts on a fresh page so the three parts are clearly
     divided rather than reading as one continuous report. */
  .lm-compat h2 {
    break-before: page !important; page-break-before: always !important;
    break-after: avoid; page-break-after: avoid;
  }
  /* The first part should not add a blank page right after the contents page;
     but since contents has its own break-after, a break-before on the first H2
     is fine — it lands the first part cleanly on its own page. */

  /* H3 sub-sections in compatibility get title emphasis in print too */
  .lm-compat h3 {
    font-size: 16pt; font-weight: 600; margin-top: 9mm; margin-bottom: 3mm;
    break-after: avoid; page-break-after: avoid;
  }
  .lm-compat h3::after { content: ''; display: block; width: 24px; height: 1.5px; background: #142847; opacity: 0.3; margin: 3mm 0 0; }

  /* Compatibility contents page: render the two-level structure clearly */
  .lm-contents-compat .lm-toc-part > a { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 13pt; color: #142847; }
  .lm-contents-compat .lm-toc-part { padding: 4mm 0 1.5mm; }
  .lm-contents-compat .lm-toc-part:first-child { padding-top: 0; }
  .lm-contents-compat .lm-toc-sublist { list-style: none; padding: 0; margin: 0; }
  .lm-contents-compat .lm-toc-sub { padding: 1.2mm 0 1.2mm 6mm; border-left: 0.5px solid rgba(20,40,71,0.18); margin-left: 1mm; border-bottom: none; }
  .lm-contents-compat .lm-toc-sub > a { font-family: 'Spectral', serif; font-size: 10.5pt; color: #142847; opacity: 0.82; display: block; }
  .lm-contents-compat .lm-toc-sub > a::before { content: none; }
  .lm-contents-compat > ol > li > a::before { content: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ORDER PAGE — AMBIENT MOTHS (crest navy, JS-driven flight)
   Position + heading are controlled by moth-flight.js so each moth always
   FACES the direction it flies (front-view moths fly up/down; side-view moths
   fly along their horizontal axis), turning to face a new heading before
   moving there. Randomized waypoints keep it from feeling like a loop.
   CSS here only styles the layer and the wing-beat (which stays purely visual).
   ════════════════════════════════════════════════════════════════════════════ */

.order-moths {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.order-moth {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  /* JS sets transform: translate(...) rotate(...) each frame */
}
.order-moth svg, .m3-pose { transform-style: preserve-3d; overflow: visible; }

/* Per-moth opacity (navy reads true at these levels over cream) */
.order-moth--a { opacity: 0.72; }
.order-moth--b { opacity: 0.58; }
.order-moth--c { opacity: 0.66; }
.order-moth--d { opacity: 0.52; }

/* ── WING-BEAT only (position/heading handled in JS) ──
   Front-view moths fold wings around a vertical body hinge; side-view moths
   fold around the horizontal body axis. Beat stays subtle so navy mass holds. */
.m3-near, .m3-far, .m3-root { transform-box: fill-box; }

/* front view: vertical hinge */
.moth-front .m3-near { transform-origin: left center; }
.moth-front .m3-far  { transform-origin: right center; }
.order-moth--a .m3-near { animation: nearbeat 0.62s ease-in-out infinite; }
.order-moth--a .m3-far  { animation: farbeat  0.62s ease-in-out infinite; }
.order-moth--c .m3-near { animation: nearbeat 0.7s ease-in-out infinite; }
.order-moth--c .m3-far  { animation: farbeat  0.7s ease-in-out infinite; }

/* side view: horizontal hinge */
.moth-side .m3-near { transform-origin: left center; }
.moth-side .m3-far  { transform-origin: right center; }
.order-moth--b .m3-near { animation: sidebeat-n 0.5s ease-in-out infinite; }
.order-moth--b .m3-far  { animation: sidebeat-f 0.5s ease-in-out infinite; }
.order-moth--d .m3-near { animation: sidebeat-n 0.42s ease-in-out infinite; }
.order-moth--d .m3-far  { animation: sidebeat-f 0.42s ease-in-out infinite; }

@keyframes nearbeat {
  0%,100% { transform: perspective(300px) rotateY(2deg)  scaleX(1); }
  50%     { transform: perspective(300px) rotateY(22deg) scaleX(0.94); }
}
@keyframes farbeat {
  0%,100% { transform: perspective(300px) rotateY(-2deg)  scaleX(1); }
  50%     { transform: perspective(300px) rotateY(-18deg) scaleX(0.92); }
}
@keyframes sidebeat-n {
  0%,100% { transform: perspective(300px) rotateX(4deg)  scaleY(1); }
  50%     { transform: perspective(300px) rotateX(40deg) scaleY(0.8); }
}
@keyframes sidebeat-f {
  0%,100% { transform: perspective(300px) rotateX(-4deg)  scaleY(1); }
  50%     { transform: perspective(300px) rotateX(-34deg) scaleY(0.76); }
}

/* Reduced motion: JS leaves a couple resting; ensure no wing animation */
@media (prefers-reduced-motion: reduce) {
  .m3-near, .m3-far { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ORDER PAGE — INTAKE BOX (ivory)
   Wraps only the first person's birth details. Product selection sits above it.
   ════════════════════════════════════════════════════════════════════════════ */

.order-intake-box {
  background: var(--ivory, #f5f1e6);
  border: 0.5px solid rgba(20, 40, 71, 0.13);
  border-radius: 12px;
  padding: clamp(1.8rem, 5vw, 3rem);
  box-shadow:
    0 1px 4px rgba(20, 40, 71, 0.05),
    0 0 0 1px rgba(245, 241, 230, 0.6) inset;
  position: relative;
  z-index: 1;
  margin-top: var(--s4);
  margin-bottom: var(--s5);
}

.order-intake-lede {
  margin-top: var(--s2);
  margin-bottom: var(--s4);
  max-width: 34rem;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.72;
  color: rgba(20, 40, 71, 0.72);
}

/* Precision note — sits above the first-person box, friendly, unboxed */
.order-precision-note {
  max-width: 38rem;
  margin: var(--s3) auto var(--s3);
  font-family: 'Spectral', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(20, 40, 71, 0.7);
  text-align: center;
}

/* Contact lede — darker than text-muted for clear visibility */
.order-contact-lede {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--navy, #142847);
  opacity: 0.92;
}

/* WhatsApp split field — country-code select + number input side by side */
.whatsapp-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.whatsapp-cc {
  flex: 0 0 auto;
  width: 6.6rem;
  min-width: 6.6rem;
  font-variant-numeric: tabular-nums;
}
.whatsapp-number {
  flex: 1 1 auto;
  min-width: 0;
}

/* Relationship context box — same ivory treatment, with its own lede */
.order-context-box .order-context-lede {
  margin: 0 0 var(--s3) 0;
  max-width: 34rem;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(20, 40, 71, 0.7);
}

/* Stack the two compatibility boxes (person 2, context) with rhythm */
.partner-block.order-intake-box { margin-top: var(--s4); }

/* Revealed "other" text blocks animate in softly */
.rel-type-other-block:not(.hidden),
.rel-status-other-block:not(.hidden) {
  animation: lm-reveal 0.28s ease-out;
}
@keyframes lm-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* #order-form no longer carries the box look — the wrapper div does */
#order-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Tier section sits above the box with comfortable rhythm */
.order-tier-section {
  margin-top: var(--s4);
  margin-bottom: var(--s2);
}

/* Keep all page content above the moth layer */
.container.narrow,
.site-nav,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Order page background stays off-white so the ivory box reads as fill-in */
body.order-page { background: #faf7f0; }
body.order-page .site-nav { background: #faf7f0; }