/* ============================================================
   SOLÈNE — Matrix Inner Mapping
   Design System · Phase 1
   ============================================================ */

:root {
  /* Palette (derived from the brand PDF) */
  --cream: #EDECE8; /* sampled from the official PDF background */
  --cream-soft: #F3F2EE;
  --ink: #2B2118;
  --dark: #251C14;
  --dark-2: #1E1610;
  --dark-3: #171009;
  --gold: #C2A05F;
  --stone: #C0C0C0; /* exact value requested for the Why Us bio-section */
  --gold-light: #E8CE96;
  --gold-glow: rgba(232, 206, 150, 0.55);
  --accent-red: #B03A36;
  --white: #FDFDFB;
  --line: rgba(43, 33, 24, 0.14);
  --line-light: rgba(239, 236, 229, 0.14);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --section-pad: clamp(5rem, 10vw, 9rem);
  --container: 1200px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--gold); color: var(--dark-3); }

.container {
  width: min(var(--container), 92%);
  margin-inline: auto;
}

/* ---------- Typography ---------- */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; line-height: 1.15; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.45em;
  text-transform: lowercase;
  color: var(--gold);
}

.display-1 {
  font-size: clamp(2.8rem, 6.5vw, 4.8rem);
  letter-spacing: 0.01em;
}

.display-2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  letter-spacing: 0.06em;
}

.accent-red { color: var(--accent-red); font-weight: 500; }
.accent-gold {
  color: var(--gold-light);
  text-shadow: 0 0 18px var(--gold-glow), 0 0 42px rgba(232, 206, 150, 0.25);
}
strong { font-weight: 500; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.1rem 0;
  background: transparent;
  transition: background 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft), padding 0.45s var(--ease-soft);
}
.site-header.scrolled {
  padding: 0.55rem 0;
  background: rgba(237, 236, 232, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 12px 34px -20px rgba(43, 33, 24, 0.35);
}
.site-header.on-dark:not(.scrolled) { color: var(--cream); }
/* 2026-08-26 fix: `backdrop-filter` (used above for the scrolled header's
   frosted-glass look) establishes a new containing block for any
   `position: fixed` descendant — including the mobile `.main-nav.open`
   overlay below, whose `inset: 0` is meant to span the whole viewport.
   With the header scrolled, that overlay was instead being confined to
   the header's own (short) box, so opening the mobile menu after
   scrolling showed a small, cut-off strip instead of the full-screen nav.
   Dropping the blur specifically while the menu is open removes that
   containing block, without changing the frosted-glass effect at any
   other time. */
.site-header:has(.main-nav.open) { backdrop-filter: none; -webkit-backdrop-filter: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: opacity 0.3s;
}
.logo:hover { opacity: 0.8; }
.logo-mark { width: 54px; height: 54px; flex: none; }
.logo > span { display: flex; flex-direction: column; justify-content: center; }
/* 2026-08-26: on mobile, the separate icon + "SOLÈNE" wordmark + tagline
   looked tacky/cramped in the header (per user screenshot) — swapped for
   one pre-composed lockup image there instead. Hidden by default (desktop
   keeps the original icon+text exactly as before); shown only inside the
   phones breakpoint below, and only in the header (`.site-header` scope)
   so the footer's icon+text logo is completely untouched. */
.logo-full-mobile { display: none; }
.logo-name {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  transform: translateY(2px);
}
.logo-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.57rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  margin-top: 0.06rem;
  opacity: 0.75;
}

/* Nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}
.main-nav a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.main-nav a:hover { color: var(--gold); }
.nav-login {
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.45rem 1.3rem !important;
  transition: background 0.35s, color 0.35s, border-color 0.35s !important;
}
.nav-login:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream) !important;
}
.nav-login::after { display: none; }

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  z-index: 102;
}
.nav-toggle span {
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(37, 28, 20, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cream);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-soft);
    z-index: 101;
  }
  .main-nav.open { opacity: 1; pointer-events: auto; }
  .main-nav a { font-size: 0.95rem; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 1.05rem 2.6rem;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s, transform 0.35s var(--ease-out);
  isolation: isolate;
}
/* [hidden] alone loses to the class rule above (same specificity, author
   rule wins over the UA stylesheet) — without this, a JS-hidden button
   (e.g. my-space.html showing only one of "View My Matrix Report" /
   "View Full Matrix Mapping Report" depending on membership) stays
   visible. Same fix as .arc-modal[hidden] / .page-hero[hidden] above. */
.btn[hidden] { display: none; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
  border-radius: inherit;
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform 0.4s var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn-outline-dark {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-outline-dark::before { background: var(--ink); }
.btn-outline-dark:hover { color: var(--cream); box-shadow: 0 18px 34px -18px rgba(43, 33, 24, 0.55); }

.btn-outline-light {
  border: 1px solid rgba(239, 236, 229, 0.6);
  color: var(--cream);
}
.btn-outline-light::before { background: var(--cream); }
.btn-outline-light:hover { color: var(--dark-2); border-color: var(--cream); box-shadow: 0 18px 40px -16px rgba(232, 206, 150, 0.35); }

.btn-gold {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 55%, var(--gold) 100%);
  background-size: 200% 100%;
  color: var(--dark-3);
  font-weight: 500;
  box-shadow: 0 14px 34px -14px rgba(194, 160, 95, 0.7);
}
.btn-gold::before { display: none; }
.btn-gold:hover {
  background-position: 100% 0;
  box-shadow: 0 20px 44px -14px rgba(194, 160, 95, 0.85);
}

/* ============================================================
   SECTIONS / UTILITIES
   ============================================================ */
.section { padding-block: var(--section-pad); position: relative; }
.section-dark {
  background: linear-gradient(175deg, var(--dark) 0%, var(--dark-2) 55%, var(--dark-3) 100%);
  color: var(--cream);
}
.section-heading { text-align: center; max-width: 900px; margin-inline: auto; }
.section-heading .sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  opacity: 0.85;
  margin-top: 0.4rem;
}

.hr-rule {
  width: min(520px, 60%);
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  margin: 0 auto 2.6rem;
  border: none;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -18%;
  width: 62vw; height: 62vw;
  background: radial-gradient(circle, rgba(232, 206, 150, 0.32) 0%, rgba(232, 206, 150, 0.08) 45%, transparent 68%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 1.6rem; }
.hero-title {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 1.2rem;
}
.hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  letter-spacing: 0.02em;
  margin-bottom: 2.4rem;
}
.hero-note {
  max-width: 480px;
  font-size: 0.98rem;
  margin-bottom: 2.8rem;
}
.hero-art { position: relative; display: grid; place-items: center; }
.hero-matrix-viz {
  position: relative;
  width: min(430px, 82vw);
  margin-inline: auto;
  animation: floaty 9s ease-in-out infinite;
}
.hero-chart-base {
  position: relative;
  width: 100%;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(43, 33, 24, 0.18));
  transition: opacity 0.6s var(--ease-out);
}
.hero-chart-colored {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: drop-shadow(0 30px 60px rgba(43, 33, 24, 0.18));
  transition: opacity 0.6s var(--ease-out);
}
.hero-matrix-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.hero-matrix-viz:hover .hero-chart-base { opacity: 0.15; }
.hero-matrix-viz:hover .hero-chart-colored,
.hero-matrix-viz:hover .hero-matrix-overlay { opacity: 1; pointer-events: auto; }
.hero-matrix-overlay .mn-node { cursor: pointer; }
.hero-matrix-overlay .mn-hit {
  fill: transparent; stroke: transparent; stroke-width: 3;
  transition: fill 0.25s, stroke 0.25s;
}
.hero-matrix-overlay .mn-node:hover .mn-hit { fill: rgba(194, 160, 95, 0.4); }
.hero-matrix-overlay .mn-node:focus { outline: none; }
.hero-matrix-overlay .mn-node:focus-visible .mn-hit { fill: rgba(194, 160, 95, 0.4); stroke: var(--gold); }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.hero-art .btn { margin-top: 2.4rem; }
.rotate-slow { transform-origin: center; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.55;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(var(--ink), transparent);
  animation: cue 2.2s var(--ease-soft) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 8rem; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  /* 2026-08-26: mobile-only — the matrix diagram (.hero-art) must render
     before the headline text (.hero-copy). Desktop's 2-column grid
     (text left, diagram right) is untouched: `order` only takes effect
     once the grid above collapses to a single column at this same
     breakpoint. */
  .hero-art { order: -1; }
  .hero-title { border-bottom: none; position: relative; }
  .hero-title::after {
    content: ""; display: block; width: 180px; height: 1px;
    background: var(--ink); margin: 1.1rem auto 0;
  }
  .hero-note { margin-inline: auto; }
  .scroll-cue { display: none; }
}

/* ============================================================
   DIFFERENCE  (Because knowing your "destiny" doesn't change your life…)
   ============================================================ */
.difference-heading { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.difference-heading .sub { text-align: right; max-width: 900px; margin-inline: auto; }

/* ============================================================
   PATTERN CARDS  (If this feels familiar…)
   ============================================================ */
.pattern-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
  perspective: 1400px;
}
.pattern-card {
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 24px 55px -26px rgba(43, 33, 24, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 2rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.85;
}
.pattern-card .emblem { width: 56px; opacity: 0.9; margin-bottom: 1.1rem; }

.pattern-punch {
  text-align: center;
}
.pattern-punch .line-2 { display: block; margin-top: 0.5rem; }
.pattern-sub {
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  margin-top: 2.8rem;
}
.pattern-magic {
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2.6rem;
}
.arrow-down {
  width: 54px;
  margin: 2.6rem auto 0;
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(9px); opacity: 1; }
}

@media (max-width: 900px) {
  .pattern-cards { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; max-width: 460px; margin-inline: auto; }
  .pattern-card { padding: 1.1rem 0.85rem; font-size: 0.82rem; line-height: 1.5; }
  .pattern-card .emblem { width: 32px; margin-bottom: 0.5rem; }
  .pattern-cards .pattern-card:last-child { grid-column: 1 / -1; width: 62%; margin-inline: auto; }
}

/* ============================================================
   KEY AREAS
   ============================================================ */
.keyareas-heading .accent { color: var(--gold); }
.keyareas-heading .sub { text-align: right; }

.map-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.map-art { position: relative; display: grid; place-items: center; }
.map-chart {
  width: min(480px, 88vw);
  position: relative;
  -webkit-mask-image: radial-gradient(circle closest-side at 46% 55%, #000 82%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 46% 55%, #000 82%, transparent 100%);
}

.map-text-card {
  background: rgba(23, 16, 9, 0.55);
  border: 1px solid rgba(232, 206, 150, 0.14);
  border-radius: 20px;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  gap: 1.4rem;
  font-size: 0.98rem;
}
.map-text-card .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-light);
}

.map-banner {
  background: rgba(23, 16, 9, 0.55);
  border: 1px solid rgba(232, 206, 150, 0.14);
  border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 4vw, 3.2rem);
  text-align: center;
  display: grid;
  gap: 1rem;
  font-size: 0.98rem;
  margin-bottom: clamp(4rem, 8vw, 6rem);
}

.area-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.area-card {
  background: linear-gradient(165deg, rgba(56, 42, 30, 0.75), rgba(30, 22, 16, 0.9));
  border: 1px solid rgba(232, 206, 150, 0.12);
  border-radius: 18px;
  padding: 2.2rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.5s;
}
.area-card:hover {
  transform: translateY(-10px);
  border-color: rgba(232, 206, 150, 0.45);
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.75), 0 0 40px -18px var(--gold-glow);
}
.area-icon {
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: radial-gradient(circle, rgba(239, 236, 229, 0.95) 0%, rgba(239, 236, 229, 0.75) 60%, rgba(239, 236, 229, 0.2) 100%);
  box-shadow: 0 0 34px 4px rgba(239, 236, 229, 0.28);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.area-card:hover .area-icon {
  transform: scale(1.08);
  box-shadow: 0 0 44px 8px var(--gold-glow);
}
.area-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.area-desc { font-size: 0.86rem; line-height: 1.75; opacity: 0.85; color: var(--cream); }

@media (max-width: 1080px) { .area-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .map-grid { grid-template-columns: 1fr; } .keyareas-heading .sub { text-align: center; } }
@media (max-width: 680px)  { .area-cards { grid-template-columns: repeat(2, 1fr); } .area-cards .area-card:last-child { grid-column: 1 / -1; } }

/* ============================================================
   COMPARISON  (How is this different?)
   ============================================================ */
.compare-title { text-align: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: stretch;
  max-width: 1060px;
  margin-inline: auto;
}
.compare-divider { background: var(--ink); opacity: 0.7; }
.compare-col.highlight {
  position: relative;
  background: linear-gradient(180deg, var(--white), var(--cream-soft));
  border: 1px solid rgba(194, 160, 95, 0.35);
  border-radius: 22px;
  padding: clamp(2rem, 3.4vw, 2.8rem) clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 34px 70px -38px rgba(43, 33, 24, 0.35), 0 0 44px -22px var(--gold-glow);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.compare-col.highlight:hover {
  transform: translateY(-6px);
  box-shadow: 0 42px 84px -36px rgba(43, 33, 24, 0.4), 0 0 56px -18px var(--gold-glow);
}
.compare-badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 55%, var(--gold) 100%);
  color: var(--dark-3);
  font-family: var(--sans);
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  padding: 0.4rem 1.1rem; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(194, 160, 95, 0.9);
}
.compare-col.highlight .eyebrow { text-align: center; margin-bottom: 0.5rem; }
.compare-col h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2.2rem;
}
.compare-col.highlight h3 { color: var(--gold); }
.compare-col ul { list-style: none; display: grid; gap: 1.5rem; }
.compare-col li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-size: 1rem;
}
.compare-col .check {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0.25rem;
  stroke: var(--ink);
}
.compare-col.highlight .check { stroke: var(--gold); }

@media (max-width: 800px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-divider { width: 60%; height: 1px; margin-inline: auto; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-heading .sub { font-style: normal; font-family: var(--sans); font-size: 1.05rem; }
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.testimonial {
  background: var(--white);
  border-radius: 22px;
  padding: 2.4rem 2.1rem 2rem;
  box-shadow: 0 26px 60px -30px rgba(43, 33, 24, 0.4);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.testimonial:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -34px rgba(43, 33, 24, 0.5);
}
.testimonial .quote {
  font-size: 0.95rem;
  line-height: 1.85;
  flex: 1;
  display: grid;
  gap: 1rem;
}
.testimonial-footer {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.testimonial-avatar {
  width: 48px; height: 48px;
  flex: none;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.testimonial-name { font-size: 0.92rem; font-weight: 400; }
.stars { color: #E8B33B; letter-spacing: 0.2em; font-size: 0.85rem; }

@media (max-width: 900px) { .testimonial-cards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.final-cta .emblem { width: 163px; margin: 0 auto 2.6rem; opacity: 0.9; }
.final-cta h2 { margin-bottom: 1.2rem; }
.final-cta p {
  max-width: 560px;
  margin: 0 auto 3rem;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  opacity: 0.9;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--dark-3);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-light);
}
.footer-brand p {
  font-size: 0.88rem;
  opacity: 0.65;
  max-width: 300px;
  margin-top: 1.2rem;
}
.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.75rem; }
.footer-col a {
  font-size: 0.9rem;
  opacity: 0.75;
  transition: opacity 0.3s, color 0.3s;
}
.footer-col a:hover { opacity: 1; color: var(--gold-light); }

.social-row { display: flex; gap: 0.9rem; }
.social-row a {
  width: 40px; height: 40px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.35s, background 0.35s, transform 0.35s var(--ease-out);
}
.social-row a:hover {
  border-color: var(--gold);
  background: rgba(232, 206, 150, 0.08);
  transform: translateY(-3px);
}
.social-row svg { width: 17px; height: 17px; fill: var(--cream); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  font-size: 0.78rem;
  opacity: 0.5;
  letter-spacing: 0.06em;
}

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

/* ============================================================
   INNER / PLACEHOLDER PAGES
   ============================================================ */
.page-hero {
  min-height: 72svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}
/* [hidden] alone loses to the class rule above (same specificity, author
   rule wins over the UA stylesheet) — without this, a JS-hidden hero (e.g.
   my-space.html's signed-out state) stays in the layout, full height,
   stacked on top of whatever should be showing instead. Same fix as
   .arc-modal[hidden] above. */
.page-hero[hidden] { display: none; }
.page-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: 40%;
  width: 80vw; height: 80vw;
  max-width: 780px; max-height: 780px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 206, 150, 0.2) 0%, rgba(232, 206, 150, 0.05) 45%, transparent 65%);
  pointer-events: none;
}
.page-hero .container { position: relative; margin-top: clamp(1.5rem, 4vw, 3rem); }
.page-hero .emblem { width: 160px; margin: 0 auto 2.4rem; opacity: 0.9; }
.page-hero .eyebrow { margin-bottom: 1.4rem; }
.page-hero h1 { margin-bottom: 1.4rem; }
.page-hero .lede {
  max-width: 540px;
  margin: 0 auto;
  font-size: clamp(1rem, 2vw, 1.18rem);
  opacity: 0.85;
}
.phase-pill {
  display: inline-block;
  margin-top: 2.6rem;
  padding: 0.7rem 1.8rem;
  border: 1px solid var(--gold);
  border-radius: 100px;
  color: var(--gold);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ============================================================
   MATRIX CALCULATOR  (visual ref: PDF p.2 · logic: MIM DOCX)
   ============================================================ */
.calc-hero {
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 4rem;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* after calculation the grey matrix is removed — form takes full width */
.calc-hero.calculated { min-height: auto; }
.calc-hero.calculated .calc-grid { grid-template-columns: 1fr; justify-items: center; }
.calc-hero.calculated .calc-form-wrap { text-align: center; }
.calc-hero.calculated .calc-input-row { justify-content: center; }
.calc-grey-matrix {
  width: min(480px, 85vw);
  margin-inline: auto;
  animation: floaty 9s ease-in-out infinite;
  filter: drop-shadow(0 26px 50px rgba(43, 33, 24, 0.16));
}
.calc-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
#birthdate {
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  width: 190px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s;
}
#birthdate:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(194, 160, 95, 0.16);
}
.gender-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.gender-toggle button {
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  color: var(--ink);
  opacity: 0.75;
  border-left: 1px solid var(--line);
  transition: background 0.3s, opacity 0.3s;
}
.gender-toggle button:first-child { border-left: none; }
.gender-toggle button:hover { opacity: 1; background: var(--cream-soft); }
.gender-toggle button.active {
  background: var(--ink);
  color: var(--cream);
  opacity: 1;
}
.date-error {
  color: var(--accent-red);
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
}
.btn-calc {
  border: 2px solid #C0392B;
  color: #C0392B;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  padding: 1rem 2.8rem;
  margin-top: 1.2rem;
}
.btn-calc::before { background: #C0392B; }
.btn-calc:hover { color: var(--cream); box-shadow: 0 18px 36px -18px rgba(192, 57, 43, 0.6); }

/* ---------- Results ---------- */
.calc-results { padding-bottom: var(--section-pad); }
.results-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.matrix-viz {
  position: relative;
  width: min(640px, 100%);
  margin-inline: auto;
}
.matrix-viz img { width: 100%; display: block; }
.matrix-viz svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.matrix-viz svg .mn-node,
.ms-matrix-viz svg .mn-node { cursor: pointer; pointer-events: auto; }
.matrix-viz svg .mn-hit,
.ms-matrix-viz svg .mn-hit { fill: transparent; stroke: transparent; stroke-width: 3; transition: fill 0.25s, stroke 0.25s; }
.matrix-viz svg .mn-node:hover .mn-hit,
.ms-matrix-viz svg .mn-node:hover .mn-hit { fill: rgba(194, 160, 95, 0.3); }
.matrix-viz svg .mn-node:focus,
.ms-matrix-viz svg .mn-node:focus { outline: none; }
.matrix-viz svg .mn-node:focus-visible .mn-hit,
.ms-matrix-viz svg .mn-node:focus-visible .mn-hit { fill: rgba(194, 160, 95, 0.3); stroke: var(--gold); }

/* Sticky (floating, right-hand) diagram — every position is clickable,
   same as the main diagram up top, but dimmed by default so the reader's
   current spot (.is-current) still reads as the "you are here" marker. */
.rp-sticky-inner svg .mn-node { cursor: pointer; pointer-events: auto; opacity: 0.42; transition: opacity 0.25s; }
.rp-sticky-inner svg .mn-node:hover,
.rp-sticky-inner svg .mn-node:focus-visible { opacity: 0.75; }
.rp-sticky-inner svg .mn-node.is-current { opacity: 1; }
.rp-sticky-inner svg .mn-node.is-current .mn-dot {
  filter: drop-shadow(0 0 5px rgba(194, 160, 95, 0.85));
}
.rp-sticky-inner svg .mn-hit { fill: transparent; stroke: transparent; stroke-width: 3; transition: fill 0.25s, stroke 0.25s; }
.rp-sticky-inner svg .mn-node:hover .mn-hit { fill: rgba(194, 160, 95, 0.3); }
.rp-sticky-inner svg .mn-node:focus { outline: none; }
.rp-sticky-inner svg .mn-node:focus-visible .mn-hit { fill: rgba(194, 160, 95, 0.3); stroke: var(--gold); }
.results-title { letter-spacing: 0.08em; }
.results-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin: 0.9rem 0 2.4rem;
  font-size: 1.02rem;
  color: #6b5f52;
}
.results-meta strong { color: var(--ink); font-weight: 500; }

.health-title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
}
.health-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.55rem;
  font-size: 0.95rem;
}
.health-table th {
  font-weight: 400;
  text-align: left;
  color: #8a7d6d;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0 1rem 0.2rem;
}
.health-table td {
  background: var(--white);
  padding: 0.6rem 1rem;
  box-shadow: 0 10px 22px -14px rgba(43, 33, 24, 0.35);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.health-table td:first-child { border-radius: 10px 0 0 10px; letter-spacing: 0.16em; }
.health-table td:last-child { border-radius: 0 10px 10px 0; }
.health-table .health-total td {
  background: #3A2E23;
  color: var(--cream);
  font-weight: 400;
}

/* ---------- Missions ---------- */
.missions-block { margin-top: clamp(4rem, 8vw, 6.5rem); }
.missions-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(43, 33, 24, 0.4);
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-bottom: 0.8rem;
}
.missions-box {
  border: 1px solid var(--ink);
  border-radius: 34px;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3.4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
}
.mission h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.3rem; }
.mission p { font-size: 0.85rem; opacity: 0.8; max-width: 420px; }
.mission-diagram {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 1.1rem;
  min-height: 62px;
}
.mission-pair { display: grid; gap: 0.55rem; }
.mission-row { display: flex; align-items: center; gap: 0.6rem; }
.mission-label {
  font-size: 0.78rem;
  width: 2.4rem;
  opacity: 0.85;
}
.mission-circle {
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
}
.mission-bracket {
  width: 26px;
  align-self: stretch;
  margin: 4px 0;
  border: 1px solid var(--ink);
  border-left: none;
  border-radius: 0 8px 8px 0;
  position: relative;
}
.mission-bracket::after {
  content: "";
  position: absolute;
  right: -12px; top: 50%;
  width: 12px; height: 1px;
  background: var(--ink);
}
.mission-diagram .mission-result { margin-left: 12px; width: 34px; height: 34px; }
.mission-diagram > .mission-result:only-child { margin-left: 3.0rem; }

/* ---------- Report ---------- */
.report-block { margin-top: clamp(4rem, 8vw, 6.5rem); }
.report-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(43, 33, 24, 0.4);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-bottom: 0.8rem;
}
.report-box {
  border: 1px solid var(--ink);
  border-radius: 34px;
  padding: clamp(1.8rem, 4vw, 3.5rem);
}
.report-box:empty { min-height: 380px; }

/* ---------- Report presentation (visual ref: example.pdf) ---------- */
.rp { font-size: 0.95rem; }

/* Three-column report layout: arcana card pinned top-left, flowing
   content in the middle, position diagram pinned top-right — both side
   panels follow the scroll and re-highlight/re-sync to whichever
   arcana's block is currently in view. */
.rp-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr minmax(220px, 280px);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.rp-main { min-width: 0; }
.rp-after { border-top: 1px solid var(--line); }
/* the diagram + zone-navigation menu float together as one unit. The
   full menu must always render in full — no internal scrollbar — so
   this is intentionally NOT height-capped; on a short window it will
   simply extend past the fold like any other sticky content. */
.rp-sticky-right {
  position: sticky;
  top: clamp(90px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.rp-sticky-diagram { flex: none; }
.rp-sticky-card-wrap {
  position: sticky;
  top: clamp(90px, 12vh, 140px);
}
.rp-sticky-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
}
.rp-sticky-inner img {
  width: 100%; height: 100%;
  filter: grayscale(1) opacity(0.45);
}
.rp-sticky-inner svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.rp-sticky-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  transition: transform 0.35s var(--ease-out);
}
.rp-sticky-card:hover { transform: translateY(-3px); }
.rp-sticky-card img {
  display: block;
  margin: 0 auto;
  width: min(213px, 78%);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -26px rgba(43, 33, 24, 0.5);
  transition: box-shadow 0.35s;
}
.rp-sticky-card:hover img { box-shadow: 0 26px 54px -22px rgba(194, 160, 95, 0.65); }
.rp-sticky-card-name {
  display: block;
  margin-top: 0.6rem;
  font-size: 1rem;
  color: var(--ink);
}

/* zone-navigation menu, pinned below the sticky diagram — same plain
   bordered-box style as the reference (border like .missions-box, bold
   weight for the current zone, no highlight box), but sized so all 16
   items always render in full, with no internal scrollbar, while
   staying pinned alongside the diagram as you scroll. */
.rp-sticky-nav {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  border: 1px solid var(--ink);
  border-radius: 14px;
  padding: 0.55rem 0.6rem;
  background: transparent;
  /* Pulled up toward the diagram. The diagram sits in a square container
     while the chart itself is a circle, so a band of empty space is left
     under it; this closes ~30% of the visible gap between the chart and
     this menu. A percentage margin resolves against the column's width,
     so the shift stays proportional at every breakpoint. */
  margin-top: -4%;
}
.rp-nav-item {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.76rem;
  line-height: 1.25;
  transition: background 0.2s, color 0.2s;
}
.rp-nav-item:hover { background: rgba(194, 160, 95, 0.12); }
.rp-nav-item.active {
  font-weight: 700;
  color: var(--dark);
  background: none;
}

.rp-zone { padding: clamp(1.6rem, 3vw, 2.6rem) 0; }
.rp-zone + .rp-zone { border-top: 1px solid var(--line); }
.rp-zone-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
}
.rp-zone-intro {
  font-style: italic;
  opacity: 0.85;
  max-width: 640px;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
}
.rp-block {
  position: relative;
  margin: 2.2rem 0 2.8rem;
}

/* ---------- Free Snapshot — gated zone teasers ---------- */
.rp-lock-icon { font-size: 1.1rem; margin-right: 0.1rem; }
.rp-gated .rp-arc-grid,
.rp-desconly .rp-arc-grid {
  margin-bottom: 1.6rem;
}
.rp-unlock {
  margin-top: 1.6rem;
  background: var(--cream-soft);
  border: 1px solid #e7e0d1;
  border-radius: 16px;
  padding: 1.6rem;
  text-align: center;
}
.rp-unlock-head {
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}
.rp-unlock-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #6b6255;
  max-width: 560px;
  margin: 0 auto 1.2rem;
}
.rp-unlock-btn { margin: 0 auto; }
/* Free Snapshot — replaces the paid-only Career/Core Tasks/Practices &
   Recommendations parts of an Arcana block with a short locked note. */
.rp-locked-note {
  font-style: italic;
  opacity: 0.7;
  font-size: 0.92rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}
.yi-teaser-age {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: #7a7264;
  margin: 0 0 0.8rem;
}
.rp-yearly-teaser .yi-chips { margin-bottom: 0.4rem; }

/* ---------- "Continue your journey" explainer pop-up ---------- */
.upgrade-explainer .arc-dialog { text-align: left; }
.upgrade-explainer .eyebrow { display: block; margin-bottom: 0.5rem; }
.upgrade-explainer h3 { font-size: 1.5rem; margin: 0 0 0.9rem; }
.upgrade-explainer .arc-desc { margin-bottom: 1.2rem; }
.upgrade-explainer .arc-pos { margin-bottom: 1.6rem; }
.upgrade-explainer .ue-cta { display: inline-flex; }
@keyframes rpBlockJumped {
  0% { box-shadow: 0 0 0 0 rgba(194, 160, 95, 0.5); background: rgba(232, 206, 150, 0.24); }
  100% { box-shadow: 0 0 0 22px rgba(194, 160, 95, 0); background: rgba(232, 206, 150, 0); }
}
.rp-block-jumped {
  border-radius: 18px;
  animation: rpBlockJumped 1.7s ease-out;
}
.rp-arc-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.rp-arc-num {
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  background: var(--white);
}
.rp-arc-name {
  font-style: italic;
  font-size: 1.45rem;
  font-weight: 600;
}
.rp-p { margin-bottom: 0.85rem; line-height: 1.8; text-align: justify; }
.rp-pm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin: 1.4rem 0;
  clear: none;
}
.rp-pm-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-bottom: 0.6rem;
}
.rp-plus { color: #4C8A3F; }
.rp-minus { color: var(--accent-red); }
.rp-sub {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 1.3rem 0 0.5rem;
}
.rp-list {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.7;
}
.rp-list li { padding-left: 1.1em; position: relative; }
.rp-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.rp-practices {
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1.3rem;
  margin: 1.5rem 0 0.5rem;
  clear: both;
  background: var(--white);
}
.rp-practices .rp-sub { margin-top: 0; }
.rp-career {
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1.3rem;
  margin: 1.5rem 0 0.5rem;
  clear: both;
  background: var(--cream-soft);
}
.rp-career .rp-sub { margin-top: 0; color: var(--gold); }
.rp-combos {
  clear: both;
  border-top: 1px dashed var(--line);
  padding-top: 1.4rem;
  margin-top: 1.6rem;
}
.rp-combo-title { font-size: 1.3rem; font-style: italic; margin-bottom: 0.6rem; }
.rp-mission-title { font-size: 1.4rem; margin-bottom: 0.4rem; }

/* ---------- Yearly Influence widget (age slider + modal) ---------- */
.yi-widget {
  display: grid;
  grid-template-columns: min(300px, 34vh) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.2rem);
  align-items: start;
  justify-content: center;
  max-width: 900px;
  margin: 0.4rem auto 0;
}
.yi-card-col { display: grid; justify-items: center; gap: 0.9rem; width: 100%; }
.yi-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin: 0; text-align: center;
}
.yi-card-img {
  display: block;
  width: min(216px, 100%);
  height: auto;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -24px rgba(43, 33, 24, 0.45);
}
.yi-info-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.55rem; width: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 0.85rem 0.9rem;
}
.yi-info-box { display: grid; align-content: center; gap: 0.25rem; text-align: center; }
.yi-info-label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; }
.yi-info-val { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; }
.yi-info-box-wide .yi-info-val { font-size: 0.88rem; letter-spacing: 0.01em; opacity: 0.7; white-space: nowrap; }
.yi-info-name {
  display: block; font-family: var(--serif);
  font-size: 1.08rem; margin-top: 0.15rem; line-height: 1.25;
}
.yi-slider-row { display: flex; align-items: center; gap: 0.55rem; width: 100%; }
.yi-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px; background: #ded6c8; cursor: pointer; outline: none;
}
.yi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--gold);
  box-shadow: 0 2px 6px rgba(43, 33, 24, 0.18); cursor: pointer;
}
.yi-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--gold);
  box-shadow: 0 2px 6px rgba(43, 33, 24, 0.18); cursor: pointer;
}
.yi-step, .yi-reset {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
  transition: border-color 0.25s, background 0.25s;
}
.yi-step:hover, .yi-reset:hover { border-color: var(--gold); background: rgba(232, 206, 150, 0.18); }
.yi-text-col { display: grid; align-content: start; gap: 0.6rem; padding-top: 0; }
.yi-text-col .arc-label { margin: 0; font-size: 0.7rem; }
.yi-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.yi-chips .rp-chip { font-size: 0.85rem; padding: 6px 14px; }
.yi-blurb { display: grid; gap: 0.75rem; margin: 1rem 0 0; max-width: 52ch; }
.yi-blurb p { font-size: 1.06rem; line-height: 1.75; color: #453d31; margin: 0; }
.yi-open-btn {
  justify-self: start; margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}

@media (max-width: 860px) {
  .yi-widget {
    grid-template-columns: 1fr;
    justify-items: center; text-align: center;
    gap: 1.8rem;
  }
  .yi-card-col { max-width: 320px; }
  .yi-text-col { justify-items: center; max-width: 520px; }
  .yi-chips { justify-content: center; }
  .yi-blurb { text-align: center; margin-top: 0.5rem; }
  .yi-open-btn { justify-self: center; margin-top: 1.1rem; }
}

@media (max-width: 720px) {
  .rp-pm { grid-template-columns: 1fr; }
}

/* 2026-08-26: mobile-only duplicate of a tracked block's card — see
   report.js. Hidden by default (desktop, where the floating sticky card
   already shows the current arcana). Uses the compound selector
   `.rp-arc-card.rp-arc-card-mobile-only` (specificity 0,0,2,0) so it
   reliably beats the base `.rp-arc-card { display: block; }` rule
   further down the file regardless of source order. */
.rp-arc-card.rp-arc-card-mobile-only { display: none; }

@media (max-width: 860px) {
  .rp-layout { grid-template-columns: 1fr; }
  /* the floating card can't track scroll position on a single-column
     mobile layout, so it's hidden here in favor of each block carrying
     its own copy of the card (.rp-arc-card-mobile-only, above). */
  .rp-sticky-card-wrap { display: none; }
  /* 2026-08-26: on mobile the position diagram + zone-nav list (both live
     inside .rp-sticky-right) don't behave the same way they do on desktop
     — user request: remove them from mobile only, desktop untouched. */
  .rp-sticky-right { display: none; }
  .rp-arc-card.rp-arc-card-mobile-only { display: block; }
  .rp-block .rp-arc-card-mobile-only { float: none; margin: 0 auto 1.2rem; width: min(240px, 62vw); }

  /* 2026-08-26: mobile zone accordion — report.js wraps each zone in a
     <details>/<summary> on mobile only (isMobileLayout); desktop keeps
     the plain flowing layout untouched. Summary shows only the zone
     name (report.js sets summary.textContent = sec.title, nothing
     else) — the zone's own internal .rp-zone-title is hidden below so
     the name doesn't appear twice. */
  .rp-zone-acc { border-top: 1px solid var(--line); }
  .rp-zone-acc:last-of-type { border-bottom: 1px solid var(--line); }
  .rp-zone-acc > summary.rp-zone-acc-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 0.1rem; cursor: pointer; list-style: none;
    font-family: var(--serif); font-size: 1.18rem; color: var(--ink);
  }
  .rp-zone-acc > summary.rp-zone-acc-summary::-webkit-details-marker { display: none; }
  .rp-zone-acc > summary.rp-zone-acc-summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-right: 0.2rem;
    border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
    transform: rotate(45deg); transition: transform 0.3s var(--ease-out);
  }
  .rp-zone-acc[open] > summary.rp-zone-acc-summary::after { transform: rotate(-135deg); }
  .rp-zone-acc-body { padding-bottom: 0.4rem; }
  .rp-zone-acc-body .rp-zone-title { display: none; }
  .rp-zone-acc-body .rp-zone { padding-top: 0; }
  .rp-zone-acc-body .rp-zone + .rp-zone { border-top: none; }
}

@media (max-width: 900px) {
  .calc-hero { min-height: auto; padding-top: 8rem; }
  .calc-grid, .results-grid { grid-template-columns: 1fr; }
  .calc-form-wrap { text-align: center; }
  .calc-input-row { justify-content: center; }
  .missions-box { grid-template-columns: 1fr; }
}

/* Why Us */
.philosophy {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: 2.8rem;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  text-align: center;
}
.philosophy .serif-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  color: var(--gold-light);
  text-shadow: 0 0 18px var(--gold-glow);
}

/* Muted uppercase label used for the small in-content markers throughout
   the Why Us redesign (WHO AM I?, WHERE IT ALL BEGAN, BOUNDARIES, …) —
   distinct from .eyebrow (gold, lowercase) since these sit on both light
   and stone backgrounds and need to read as quiet structure, not accent. */
.label-mute {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
/* Larger variant for a label that introduces its own section heading
   (MATRIX + PSYCHOLOGY, WHY MATRIX INNER MAPPING) rather than sitting
   quietly inside a paragraph flow. */
.label-mute-lg { font-size: 0.85rem; letter-spacing: 0.18em; opacity: 0.65; color: var(--gold); }

/* ---------- "Most people stop at interpretation." intro ---------- */
.stop-interp-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.stop-interp-grid h2 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.18;
}
.stop-interp-grid .copy {
  display: grid;
  gap: 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.78;
  opacity: 0.88;
}
.stop-interp-grid .copy strong { color: var(--ink); opacity: 1; }
@media (max-width: 860px) {
  .stop-interp-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Bio — full-bleed sticky portrait + long-form narrative ----------
   The photo panel is its own full-viewport-height sticky column, OUTSIDE
   the centered .container, so it touches the true left edge of the screen
   and is always visually "full" (image is cover-fit to 100vh) no matter
   how long the narrative column runs — no empty gray gap ever opens up
   beneath it. The WHO AM I? / heading caption sits directly on the image
   as an overlay, not below it. */
.bio-section {
  display: grid;
  grid-template-columns: minmax(280px, 38vw) 1fr;
  align-items: start;
  background: linear-gradient(to bottom, var(--stone, #C0C0C0) 0%, var(--stone, #C0C0C0) 90%, var(--cream) 100%);
  color: var(--ink);
}
.bio-photo-panel {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.bio-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bio-photo-caption {
  position: absolute;
  left: 0; right: 0; top: 0;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(20, 15, 9, 0.82) 0%, rgba(20, 15, 9, 0.4) 60%, transparent 100%);
}
.bio-photo-caption .label-mute { color: var(--cream); opacity: 0.75; }
.bio-photo-caption h2 {
  color: var(--cream);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  margin-top: 0.4rem;
}
.bio-copy-col { padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
.bio-copy { max-width: 660px; display: grid; gap: 1.5rem; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.8; }
.bio-copy .label-mute { margin-top: 0.6rem; }
.bio-copy em { font-style: italic; }
.bio-rule { border: none; border-top: 1px solid rgba(43, 33, 24, 0.22); margin: 0.6rem 0; }
.bio-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  color: var(--ink);
}
.bio-pull strong { font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
.bio-copy .conclusion {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--dark);
}
@media (max-width: 860px) {
  .bio-section { grid-template-columns: 1fr; background: var(--stone, #C0C0C0); }
  .bio-photo-panel { position: static; height: 60vh; }
}

/* ---------- "Where it all comes from" numbered list ---------- */
.comes-from-eyebrow { text-align: center; margin-bottom: 0.6rem; }
.comes-from-title-main {
  text-align: center;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 400;
  color: var(--ink);
  opacity: 0.88;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.comes-from-list { border-top: 1px solid var(--line); }
.comes-from-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.3fr;
  gap: clamp(1.4rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.comes-from-num { font-family: var(--sans); font-size: 0.9rem; color: var(--ink); opacity: 0.5; padding-top: 0.2rem; }
.comes-from-heading { font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.3; }
.comes-from-body { opacity: 0.78; line-height: 1.78; text-align: justify; }
.comes-from-body em { font-style: italic; }
@media (max-width: 860px) {
  .comes-from-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .comes-from-body { text-align: left; }
}

.pull-quote-wrap { text-align: center; padding-top: clamp(2.2rem, 4vw, 3rem); padding-bottom: clamp(0.5rem, 1vw, 1rem); }
.pull-quote-wrap::before,
.pull-quote-wrap::after {
  content: ""; display: block; width: 60px; height: 1px; background: var(--line);
  margin: 0 auto;
}
.pull-quote-wrap::before { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.pull-quote-wrap::after { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  max-width: 880px;
  margin-inline: auto;
  line-height: 1.45;
  opacity: 0.88;
}

/* ---------- "Why would a date of birth…" + Matrix/Psychology diagram ---------- */
.dob-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.dob-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.dob-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.25; margin-top: 0.6rem; }
.dob-copy .label-mute { margin-bottom: 0.6rem; }
.dob-copy p { margin-top: 1.2rem; opacity: 0.85; line-height: 1.78; }
.dob-diagram {
  border: 1px solid var(--line);
  background: var(--cream-soft);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.dob-diagram-inner {
  border: 1px solid var(--line);
  padding: clamp(2.2rem, 4vw, 3rem) clamp(1.2rem, 2vw, 1.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.dob-circle {
  width: clamp(96px, 12vw, 140px);
  height: clamp(96px, 12vw, 140px);
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dob-circle.psych { border-color: rgba(43, 33, 24, 0.3); }
.dob-circle .dob-name { font-family: var(--serif); font-size: clamp(1rem, 1.8vw, 1.25rem); }
.dob-link { width: 22px; height: 1px; background: var(--gold); flex: none; }
.dob-labels {
  display: flex; justify-content: space-around; margin-top: 1rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
}
@media (max-width: 860px) {
  .dob-grid { grid-template-columns: 1fr; }
  .dob-diagram { max-width: 380px; margin-inline: auto; }
}

/* ---------- "What Matrix Inner Mapping is not" ---------- */
.not-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.not-grid > div { padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.4rem, 2.6vw, 2rem); border-right: 1px solid var(--line); }
.not-grid > div:last-child { border-right: none; }
.not-grid h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.32; margin-bottom: 0.7rem; }
.not-grid p { opacity: 0.72; line-height: 1.72; font-size: 0.96rem; }
.section-dark .not-grid { border-top-color: var(--line-light); }
.section-dark .not-grid > div { border-right-color: var(--line-light); }
@media (max-width: 860px) {
  .not-grid { grid-template-columns: 1fr; }
  .not-grid > div { border-right: none; border-bottom: 1px solid var(--line); }
  .not-grid > div:last-child { border-bottom: none; }
}
/* Left-aligned heading variant — used on a light (not dark) "boundaries"
   section, so it reads as the start of the row of cards below it rather
   than a centered banner. */
.section-heading-left { text-align: left; max-width: 700px; margin-inline: 0; }
.section-heading-left .sub { margin-left: 0; }

/* ---------- Closing CTA — "A map. Not a label." ---------- */
.final-cta { text-align: center; }
.final-cta .eyebrow { color: var(--ink); opacity: 0.5; letter-spacing: 0.22em; }
.final-cta h2 {
  font-size: clamp(2.3rem, 5.6vw, 3.3rem);
  margin-top: 0.6rem;
}
.final-cta p.sub { max-width: 560px; margin: 1.4rem auto 2rem; font-size: clamp(1.02rem, 2vw, 1.18rem); opacity: 0.75; line-height: 1.7; }

/* ============================================================
   MY SPACE — personal dashboard
   ============================================================ */
.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor; /* readable on light header and dark mobile menu */
  border-radius: 100px;
  padding: 0.3rem 1rem 0.3rem 0.35rem;
  opacity: 0.9;
  transition: border-color 0.3s, background 0.3s, opacity 0.3s;
}
.nav-account:hover { opacity: 1; }
.nav-account:hover { border-color: var(--gold); background: rgba(232, 206, 150, 0.12); }
.nav-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--line);
}

.ms { padding-bottom: var(--section-pad); }
.ms-hero {
  padding: 9rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.ms-hero::before {
  content: "";
  position: absolute;
  top: -40%; right: -12%;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(232, 206, 150, 0.3) 0%, transparent 62%);
  pointer-events: none;
}
.ms-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2.5rem;
  position: relative;
}
.ms-hero .eyebrow { margin-bottom: 1rem; }
.ms-hero-sub { font-style: italic; font-weight: 500; opacity: 0.75; font-size: 0.72em; }
.ms-journey { margin-top: 1.2rem; font-size: 0.95rem; opacity: 0.65; }
.ms-hero-avatar .ms-avatar-img {
  width: clamp(96px, 12vw, 136px);
  height: clamp(96px, 12vw, 136px);
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--gold);
  padding: 10px;
  box-shadow: 0 24px 50px -24px rgba(43, 33, 24, 0.4);
}

.ms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  align-items: start;
}
.ms-card {
  background: var(--white);
  border-radius: 26px;
  padding: clamp(1.8rem, 3.4vw, 2.8rem);
  box-shadow: 0 28px 60px -34px rgba(43, 33, 24, 0.4);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.ms-card:hover { box-shadow: 0 36px 74px -34px rgba(43, 33, 24, 0.45); }
.ms-wide { grid-column: 1 / -1; }
.ms-card-title {
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  letter-spacing: 0.05em;
  margin-bottom: 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

/* profile */
.ms-profile-top { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.6rem; }
.ms-profile-avatar { text-align: center; flex: none; }
.ms-profile-avatar .ms-avatar-img {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
  padding: 8px;
  background: var(--cream-soft);
}
.ms-avatar-btn {
  display: block;
  margin: 0.5rem auto 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.ms-avatar-btn:hover { border-color: var(--gold); }
.ms-profile-id h2 { font-size: 1.7rem; }
.ms-avatar-panel {
  border: 1px dashed rgba(194, 160, 95, 0.6);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
  background: rgba(232, 206, 150, 0.07);
}
.ms-avatar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.ms-panel-hint {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.8rem;
}
.ms-avatar-close {
  flex: none;
  width: 26px;
  height: 26px;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.ms-avatar-close:hover { border-color: var(--gold); color: var(--gold); }
.ms-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.7rem;
}
.ms-avatar-choice {
  border: 1.5px solid var(--line);
  border-radius: 50%;
  padding: 6px;
  background: var(--white);
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.ms-avatar-choice:hover { transform: scale(1.06); border-color: var(--gold); }
.ms-avatar-choice.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(194, 160, 95, 0.25); }
.ms-avatar-choice img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
.ms-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.6rem;
}
.ms-facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.15rem;
}
.ms-facts dd { font-size: 0.98rem; font-weight: 400; }

/* matrix card */
.ms-matrix-viz { position: relative; width: min(340px, 100%); margin: 1rem auto; }
.ms-matrix-viz img { width: 100%; display: block; }
.ms-matrix-viz svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ms-matrix-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1rem; }

/* rows / lists */
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.66rem; letter-spacing: 0.22em; }
.ms-list { display: grid; gap: 0.9rem; }
.ms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
  transition: border-color 0.35s, background 0.35s;
}
.ms-row:hover { border-color: rgba(194, 160, 95, 0.6); background: rgba(232, 206, 150, 0.05); }
.ms-row-title { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.ms-row-meta { font-size: 0.84rem; opacity: 0.65; }
.ms-row-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ms-status { letter-spacing: 0.08em; }
.ms-status-full { color: #8a6a2f; font-weight: 500; }

.ms-row-rename {
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  transition: opacity 0.2s;
}
.ms-row-rename:hover { opacity: 0.9; }
.ms-row-rename-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 220px;
  flex-wrap: wrap;
}
.ms-row-rename-form input {
  flex: 1;
  min-width: 160px;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  background: var(--white);
  color: var(--ink);
}

/* courses */
.ms-course {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
}
.ms-course-cover { width: 74px; height: 74px; object-fit: contain; border-radius: 12px; background: var(--cream-soft); padding: 8px; }
.ms-course-body { flex: 1; }
.ms-progress {
  height: 5px;
  background: var(--cream);
  border-radius: 10px;
  overflow: hidden;
  margin: 0.5rem 0 0.3rem;
}
.ms-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 10px; }

/* empty states */
.ms-empty:not([hidden]) {
  text-align: center;
  padding: 1.6rem 1rem 0.8rem;
  display: grid;
  justify-items: center;
  gap: 1rem;
}
.ms-empty p { max-width: 380px; font-size: 0.95rem; opacity: 0.7; }
.ms-empty-art { width: 130px; opacity: 0.8; }
.ms-empty-emblem { width: 74px; opacity: 0.85; }

/* settings */
.ms-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); }
.ms-settings-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.ms-settings-block select {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream-soft);
  color: var(--ink);
}
.ms-check { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; margin-bottom: 0.7rem; cursor: pointer; }
.ms-check input { accent-color: var(--gold); width: 16px; height: 16px; }
.ms-danger-btn {
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}
.ms-danger-btn::before { background: var(--accent-red); }
.ms-danger-btn:hover { color: var(--cream); }
.ms-signout {
  margin-top: 2.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-red);
  opacity: 0.8;
  border-bottom: 1px solid transparent;
}
.ms-signout:hover { opacity: 1; border-color: var(--accent-red); }

/* toast */
.ms-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.8rem 1.7rem;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
  z-index: 200;
}
.ms-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms-hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ms-settings-grid { grid-template-columns: 1fr; }
  .ms-profile-top { flex-direction: column; text-align: center; }
}

/* print — Download Report (PDF) via browser print */
@media print {
  /* Printing the report from the browser should land as close as possible to
     the client-facing PDF the API renders (api/src/lib/report-html.js) — same
     stacked, full-width layout, same plain labelled sections, no floating
     side panels. */
  .site-header, .site-footer, .calc-hero, .scroll-cue, .ms-toast, .upgrade,
  .rp-sticky-right, .rp-sticky-card-wrap, .rp-zone-nav, .report-actions,
  .rp-unlock, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .calc-results { padding: 0; }
  .container { max-width: none; padding: 0; }

  /* single flowing column — the two sticky side panels are screen-only */
  .rp-layout { display: block !important; }
  .rp-main, .rp-after { min-width: 0; width: 100%; }
  .rp { font-size: 13px; }

  /* zones */
  .rp-zone { padding: 0; margin-bottom: 26px; }
  .rp-zone + .rp-zone { border-top: none; }
  .rp-zone-title { font-size: 23px; margin: 0 0 12px; }
  .rp-zone-intro { max-width: 100%; margin-bottom: 20px; font-size: 12.5px; }

  /* one arcana block: card centred above the text, not floated beside it */
  .rp-block { margin: 0 0 26px; }
  .rp-block + .rp-block { border-top: 1px solid rgba(43, 33, 24, 0.5); padding-top: 26px; }
  .rp-block .rp-arc-card {
    float: none;
    display: block;
    margin: 6px auto 18px;
    width: 122px;
    break-inside: avoid;
  }
  .rp-arc-cue { display: block; text-align: center; }
  .rp-arc-head { break-inside: avoid; }
  .rp-arc-num { width: 30px; height: 30px; font-size: 12.5px; }
  .rp-arc-name { font-size: 16px; }

  /* labelled sections — stacked full width, no boxes */
  .rp-p { font-size: 12.5px; line-height: 1.8; text-align: left; }
  .rp-pm { display: block; grid-template-columns: 1fr; margin: 16px 0 0; }
  .rp-pm-col + .rp-pm-col { margin-top: 16px; }
  .rp-pm-title { font-size: 10.5px; letter-spacing: 0.16em; }
  .rp-plus { color: #2E9C8E; }
  .rp-minus { color: #E08A3C; }
  .rp-sub { font-size: 10.5px; letter-spacing: 0.16em; margin: 18px 0 9px; }
  .rp-list { font-size: 12px; }
  .rp-list li::before { color: var(--ink); }
  .rp-practices, .rp-career {
    border: none; background: none; padding: 0; margin: 18px 0 0; border-radius: 0;
  }
  .rp-career .rp-sub { color: inherit; }

  /* health card — flat zebra rows, same as the PDF */
  .health-table { border-collapse: collapse; border-spacing: 0; font-size: 12.5px; }
  .health-table td { box-shadow: none; background: transparent; padding: 8px 10px; }
  .health-table tbody tr:nth-child(odd) td { background: #F4F3F0; }
  .health-table .health-total td { background: #3A2E23 !important; color: #EDECE8 !important; }

  /* a whole zone block is routinely taller than a page — forcing it to stay
     intact just pushes it to the next page and leaves the current one blank,
     so only the small units that actually fit are kept together. */
  .rp-block, .rp-practices, .rp-career, .rp-pm-col, .rp-combos { break-inside: auto; }
  .rp-spot, .rp-arc-head, .rp-block .rp-arc-card, .rp-list li { break-inside: avoid; }
  h3, h4, h5 { break-after: avoid; }
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 8rem 4% 5rem;
  position: relative;
  overflow: hidden;
}
.login-wrap::before {
  content: "";
  position: absolute;
  right: -15%; top: -20%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(232, 206, 150, 0.28) 0%, transparent 62%);
  pointer-events: none;
}
.login-card {
  width: min(440px, 100%);
  background: var(--white);
  border-radius: 26px;
  padding: clamp(2.4rem, 5vw, 3.4rem);
  box-shadow: 0 40px 90px -40px rgba(43, 33, 24, 0.5);
  position: relative;
}
.login-card .emblem { width: 72px; margin: 0 auto 1.6rem; }
.login-card h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
.login-card .hint {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 2.2rem;
}
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  color: var(--ink);
  opacity: 0.75;
}
.field input {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream-soft);
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field select {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream-soft);
  color: var(--ink);
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(194, 160, 95, 0.16);
}
.field-hint { font-size: 0.76rem; opacity: 0.6; margin-top: 0.45rem; line-height: 1.4; }
.forgot-row { text-align: right; margin: -0.5rem 0 1.8rem; }
.forgot-row a {
  font-size: 0.84rem;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.forgot-row a:hover { border-color: var(--gold); }
.login-card .btn { width: 100%; justify-content: center; }
.create-row {
  text-align: center;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.create-row a { color: var(--accent-red); font-weight: 400; }
.create-row a:hover { text-decoration: underline; }

.oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0;
  color: var(--ink);
  opacity: 0.45;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.oauth-divider::before, .oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s;
}
.btn-google:hover { border-color: rgba(43, 33, 24, 0.35); background: var(--cream-soft); }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   CONTINUE YOUR JOURNEY — pricing / upgrade
   ============================================================ */
.upgrade {
  padding-block: var(--section-pad);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.upgrade.shown { opacity: 1; transform: none; }
.upgrade .section-heading { margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.upgrade .section-heading .sub { color: rgba(239, 236, 229, 0.82); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: start;
}
.plan {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(239, 236, 229, 0.16);
  border-radius: 24px;
  padding: 2.2rem 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.4s;
}
.plan:hover { transform: translateY(-4px); border-color: rgba(232, 206, 150, 0.45); }
.plan-featured {
  border-color: rgba(232, 206, 150, 0.55);
  background: linear-gradient(180deg, rgba(232, 206, 150, 0.12), rgba(255,255,255,0.02));
  box-shadow: 0 40px 90px -50px rgba(194, 160, 95, 0.8);
}
.plan-ribbon {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 55%, var(--gold) 100%);
  color: var(--dark-3);
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  padding: 0.4rem 1.1rem; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(194, 160, 95, 0.9);
}
.plan-ribbon-alt {
  background: transparent; color: var(--gold-light);
  border: 1px solid rgba(232, 206, 150, 0.6);
}
.plan-head { display: flex; flex-direction: column; gap: 0.35rem; text-align: center; }
.plan-emoji { font-size: 1.7rem; }
.plan-name { color: var(--cream); font-size: 1.5rem; letter-spacing: 0.04em; }
.plan-early {
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85;
}
.plan-price { color: var(--cream); font-family: var(--serif); margin-top: 0.2rem; line-height: 1.1; }
.plan-was { text-decoration: line-through; opacity: 0.5; font-size: 1.15rem; margin-right: 0.3rem; }
.plan-now { font-size: 2.4rem; font-weight: 600; color: var(--gold-light); }
.plan-cur { font-size: 0.8rem; letter-spacing: 0.2em; opacity: 0.7; }
.plan-tagline {
  font-size: 0.9rem; line-height: 1.55; color: rgba(239, 236, 229, 0.78);
  font-style: italic; margin-top: 0.4rem;
}
.plan-list {
  list-style: none; display: grid; gap: 0.6rem;
  font-size: 0.9rem; color: rgba(239, 236, 229, 0.9);
}
.plan-list-2col { grid-template-columns: 1fr; }
.plan-list li {
  position: relative; padding-left: 1.5rem; line-height: 1.4;
}
.plan-list li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: 0.8rem;
}
.plan-sub {
  display: block; font-size: 0.74rem; letter-spacing: 0.02em;
  opacity: 0.62; margin-top: 0.15rem;
}
.plan-price-note {
  font-size: 0.8rem; letter-spacing: 0.02em; color: rgba(239, 236, 229, 0.72);
  margin-top: 0;
}
.plan-cta { width: 100%; justify-content: center; margin-top: auto; }
.plans-note {
  text-align: center; max-width: 620px; margin: 2.6rem auto 0;
  font-size: 0.86rem; font-style: italic; color: rgba(239, 236, 229, 0.62);
}
.plans-secure {
  text-align: center; margin-top: 0.9rem;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(239, 236, 229, 0.5);
}
@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* 2026-08-26: this used to promote the Unlimited/subscription plan
     (.plan-featured) to the top of the single-column mobile stack via
     `order: -1`. User request: on mobile, the Complete Matrix plan
     (data-plan="complete") must come before the subscription plan —
     removed so the natural source order (complete, unlimited,
     signature — same left-to-right order the 3-column desktop grid
     already shows) is what renders here too. Desktop's grid is
     untouched either way since this rule only ever applied at this
     max-width. */
}

/* ============================================================
   PURCHASE SUCCESS
   ============================================================ */
.success-hero { text-align: center; }
.success-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2.4rem;
}
.success-spinner {
  width: 42px; height: 42px; margin: 2.4rem auto 0;
  border: 3px solid rgba(194, 160, 95, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: success-spin 0.9s linear infinite;
}
@keyframes success-spin { to { transform: rotate(360deg); } }

/* ============================================================
   MY SPACE — Signature beneficiary panel + membership pill
   ============================================================ */
.ms-plan-pill {
  display: inline-block;
  padding: 0.2rem 0.7rem; border-radius: 100px;
  background: rgba(194, 160, 95, 0.16);
  color: var(--gold); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
}
.ms-share-intro { margin-bottom: 1.2rem; opacity: 0.8; }
.ms-share-credits { color: var(--gold); font-weight: 500; }
.ms-share-form {
  display: grid; grid-template-columns: 1.4fr 1fr 0.9fr 1.1fr auto; gap: 0.8rem; align-items: end;
}
.ms-share-form .field { margin: 0; }
@media (max-width: 760px) { .ms-share-form { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL PAGES (Privacy Policy, Terms & Conditions)
   ============================================================ */
.legal-hero { text-align: center; padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 6vw, 4.5rem); }
.legal-hero .eyebrow { margin-bottom: 1.2rem; }
.legal-hero h1 { margin-bottom: 1.2rem; }
.legal-meta {
  display: inline-block;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(232, 206, 150, 0.4); border-radius: 100px;
  padding: 0.4rem 1.1rem;
}

/* legal tab bar (Privacy · Terms · Contact) */
.legal-tabs {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  margin-top: 2.4rem;
}
.legal-tabs a {
  padding: 0.62rem 1.5rem; border-radius: 100px;
  border: 1px solid rgba(239, 236, 229, 0.28); color: var(--cream);
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color 0.35s, color 0.35s, background 0.35s, transform 0.3s var(--ease-out);
}
.legal-tabs a:hover { border-color: var(--gold-light); transform: translateY(-2px); }
.legal-tabs a.is-active {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 55%, var(--gold) 100%);
  color: var(--dark-3); border-color: transparent; font-weight: 500;
}

.legal { padding-block: clamp(3rem, 6vw, 4.5rem) var(--section-pad); }

/* plain-language summary */
.legal-summary {
  max-width: 940px; margin: 0 auto clamp(2.6rem, 5vw, 4rem);
  background: var(--cream-soft);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
}
.legal-summary h2 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.1rem;
}
.legal-summary ul { list-style: none; display: grid; gap: 0.7rem; margin: 0; }
.legal-summary li { position: relative; padding-left: 1.6rem; line-height: 1.65; }
.legal-summary li::before {
  content: "✦"; position: absolute; left: 0; top: 0.05rem; color: var(--gold); font-size: 0.8rem;
}
.legal-summary-note { margin-top: 1.2rem; font-size: 0.82rem; font-style: italic; opacity: 0.62; }

/* contents rail + article */
.legal-layout {
  display: grid; grid-template-columns: 210px 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 1020px; margin-inline: auto; align-items: start;
}
.legal-aside { position: sticky; top: 110px; }
.legal-aside-title {
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.legal-aside ol { list-style: none; display: grid; gap: 0.55rem; counter-reset: toc; }
.legal-aside li { counter-increment: toc; }
.legal-aside a {
  display: block; font-size: 0.86rem; line-height: 1.4; color: var(--ink); opacity: 0.7;
  padding-left: 1.7rem; position: relative;
  border-left: 1px solid var(--line); padding-block: 0.15rem;
  transition: color 0.3s, opacity 0.3s, border-color 0.3s;
}
.legal-aside a::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 0.5rem; top: 0.15rem;
  font-size: 0.66rem; color: var(--gold); opacity: 0.8; font-variant-numeric: tabular-nums;
}
.legal-aside a:hover { opacity: 1; color: var(--accent-red); border-color: var(--gold); }

/* sections */
.legal-sec { padding: clamp(1.6rem, 3vw, 2.2rem) 0; }
.legal-sec + .legal-sec { border-top: 1px solid var(--line); }
.legal-sec:first-child { padding-top: 0; }
.legal-body h2 {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: 0.02em; margin-bottom: 1rem;
}
.legal-num {
  font-family: var(--sans); font-weight: 500; font-size: 0.9rem;
  color: var(--gold); letter-spacing: 0.1em; flex: none;
}
.legal-body h3 {
  font-family: var(--serif); font-size: 1.12rem; margin: 1.6rem 0 0.7rem; color: var(--ink);
}
.legal-body p { margin-bottom: 1.05rem; line-height: 1.78; }
.legal-body > *:last-child, .legal-sec > *:last-child { margin-bottom: 0; }
.legal-body ul { list-style: none; margin: 0 0 1.3rem; display: grid; gap: 0.7rem; }
.legal-body ul li { position: relative; padding-left: 1.6rem; line-height: 1.72; }
.legal-body ul li::before {
  content: "✦"; position: absolute; left: 0; top: 0.06rem; color: var(--gold); font-size: 0.76rem;
}
.legal-body ul li strong { color: var(--ink); }
.legal-body a { color: var(--accent-red); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.legal-body a:hover { border-color: var(--accent-red); }
.legal-body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.85em; background: var(--cream-soft);
  padding: 0.1rem 0.4rem; border-radius: 6px; border: 1px solid var(--line);
}
.legal-contact { font-size: 1.05rem; }
.legal-note {
  font-size: 0.86rem; color: var(--ink); opacity: 0.75;
  background: var(--cream-soft); border-left: 2px solid var(--gold);
  padding: 0.9rem 1.2rem; border-radius: 0 12px 12px 0;
}
.legal-back { max-width: 1020px; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.legal-back a { color: var(--gold); letter-spacing: 0.04em; font-size: 0.82rem; text-transform: uppercase; }
.legal-back a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 2rem; }
  .legal-aside { position: static; border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.5rem; background: var(--cream-soft); }
  .legal-aside ol { columns: 2; column-gap: 1.6rem; }
  .legal-aside li { break-inside: avoid; margin-bottom: 0.4rem; }
  .legal-aside a { border-left: none; }
}
@media (max-width: 520px) { .legal-aside ol { columns: 1; } }

.legal-lede {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic; line-height: 1.6; color: var(--ink);
  padding-bottom: 1.8rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { padding-block: clamp(3rem, 6vw, 4.5rem) var(--section-pad); }
.contact-grid {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; max-width: 1000px;
}
.contact-card {
  background: var(--white);
  border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 40px 90px -46px rgba(43, 33, 24, 0.5);
}
.contact-card-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.contact-card-sub { opacity: 0.75; margin-bottom: 1.8rem; }
.field textarea {
  width: 100%; font: inherit; font-size: 0.98rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream-soft); color: var(--ink);
  resize: vertical; min-height: 130px; line-height: 1.6;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(194, 160, 95, 0.16);
}
.contact-card .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
/* honeypot — visually hidden, still in the accessibility tree off-screen */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  font-size: 0.9rem; line-height: 1.5;
  padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 1.2rem;
  border: 1px solid var(--line); background: var(--cream-soft);
}
.form-status-error { color: var(--accent-red); border-color: rgba(176, 58, 54, 0.35); background: rgba(176, 58, 54, 0.06); }
.form-status-ok { color: #4f7a3a; border-color: rgba(79, 122, 58, 0.35); background: rgba(79, 122, 58, 0.08); }
.form-status-pending { opacity: 0.8; }

.contact-info { display: grid; gap: 2rem; padding-top: 0.6rem; }
.contact-info-block { display: grid; gap: 0.5rem; }
.contact-info-title {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
}
.contact-email { color: var(--accent-red); font-size: 1.08rem; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.contact-email:hover { border-color: var(--accent-red); }
.contact-muted { font-size: 0.9rem; opacity: 0.75; line-height: 1.65; }
.contact-muted a { color: var(--accent-red); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.contact-muted a:hover { border-color: var(--accent-red); }
.contact-social { display: flex; gap: 0.7rem; }
.contact-social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}
.contact-social a:hover { border-color: var(--gold); background: var(--cream-soft); transform: translateY(-2px); }
.contact-social svg { width: 18px; height: 18px; fill: var(--ink); }

@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CHECKOUT DIALOG (plan + promo code + price breakdown)
   ============================================================ */
.checkout-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 1.2rem;
}
/* Without this the closed dialog keeps `display: grid` — an author rule beats
   the browser's own `[hidden] { display: none }` — so an invisible full-screen
   layer stays on top of the page and swallows every click. Same fix as
   .arc-modal[hidden] / .page-hero[hidden] / .btn[hidden]. */
.checkout-modal[hidden] { display: none; }
.checkout-backdrop {
  position: absolute; inset: 0;
  background: rgba(23, 16, 9, 0.62); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.checkout-modal.open .checkout-backdrop { opacity: 1; }
.checkout-dialog {
  position: relative;
  width: min(440px, 100%);
  background: var(--white);
  border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: 0 50px 100px -40px rgba(23, 16, 9, 0.7);
  transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.checkout-modal.open .checkout-dialog { transform: none; opacity: 1; }
.checkout-close {
  position: absolute; top: 1rem; right: 1.2rem;
  font-size: 1.6rem; line-height: 1; color: var(--ink); opacity: 0.5;
  transition: opacity 0.3s;
}
.checkout-close:hover { opacity: 1; }
.checkout-dialog .eyebrow { margin-bottom: 0.6rem; }
.co-title { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.co-tagline { opacity: 0.72; font-size: 0.92rem; margin: 0.3rem 0 1.6rem; }

.co-promo { margin-bottom: 1.4rem; }
.co-promo label {
  display: block; font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink);
  opacity: 0.7; margin-bottom: 0.55rem;
}
.co-promo-row { display: flex; gap: 0.6rem; }
.co-promo-row input {
  flex: 1; font: inherit; font-size: 0.95rem;
  padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream-soft); color: var(--ink); text-transform: uppercase;
  letter-spacing: 0.06em; transition: border-color 0.3s, box-shadow 0.3s;
}
.co-promo-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(194, 160, 95, 0.16); }
.co-promo-row .btn { flex: none; }
.co-promo-msg { font-size: 0.84rem; margin-top: 0.6rem; }
.co-promo-ok { color: #4f7a3a; }
.co-promo-err { color: var(--accent-red); }

.co-summary {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; margin-bottom: 1.6rem; display: grid; gap: 0.6rem;
}
.co-line { display: flex; justify-content: space-between; font-size: 0.96rem; }
.co-line[hidden] { display: none; }
.co-line span:first-child { opacity: 0.75; }
.co-discount { color: var(--accent-red); }
.co-total { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.co-total span:first-child { opacity: 1; }
.co-continue { width: 100%; justify-content: center; }
.co-secure {
  text-align: center; margin-top: 1rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5;
}

/* ============================================================
   ADMIN (promo codes)
   ============================================================ */
.admin { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-pad); }
.admin-gate:not([hidden]) { display: grid; place-items: center; }
.admin-gate .login-card { box-shadow: 0 40px 90px -46px rgba(43, 33, 24, 0.4); }
.admin-grid { display: grid; grid-template-columns: 360px 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }

.admin-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: start; }
@media (max-width: 1100px) { .admin-grid-3 { grid-template-columns: 1fr; } }
.admin-price-card .admin-price-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.2rem; }
.admin-price-card .admin-price-current { font-size: 0.86rem; opacity: 0.75; margin-bottom: 1rem; }
.admin-price-card .admin-price-current strong { color: var(--ink); opacity: 1; }
.admin-override-pill {
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.22rem 0.6rem; border-radius: 999px; white-space: nowrap;
  background: rgba(194, 160, 95, 0.16); color: var(--gold);
}
.admin-price-card .admin-form-actions { flex-wrap: wrap; }

.admin-form-card .field { margin-bottom: 1rem; }
.admin-legend {
  display: block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink); opacity: 0.75; margin-bottom: 0.6rem;
}
.admin-hint { font-size: 0.78rem; opacity: 0.6; margin-top: 0.4rem; }
.admin-form-actions { display: flex; gap: 0.8rem; margin-top: 1.4rem; }

.admin-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.admin-list { display: grid; gap: 0.9rem; }
.admin-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem;
  background: var(--cream-soft);
}
.admin-row-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.3rem; }
.admin-code {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.08em;
  font-size: 1.02rem; color: var(--ink);
}
.admin-row-meta { font-size: 0.86rem; opacity: 0.8; }
.admin-row-sub { margin-top: 0.15rem; opacity: 0.68; font-size: 0.82rem; }
.admin-note { font-style: italic; }
.admin-row-actions { display: flex; gap: 0.5rem; flex: none; }
.admin-del { border: 1px solid rgba(176, 58, 54, 0.5); color: var(--accent-red); }
.admin-del:hover { background: var(--accent-red); color: var(--cream); }

.admin-status {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  padding: 0.22rem 0.6rem; border-radius: 100px;
}
.admin-status-active { background: rgba(79, 122, 58, 0.15); color: #4f7a3a; }
.admin-status-expired { background: rgba(176, 58, 54, 0.12); color: var(--accent-red); }
.admin-status-disabled { background: rgba(43, 33, 24, 0.1); color: var(--ink); opacity: 0.7; }
.admin-status-used_up { background: rgba(194, 160, 95, 0.18); color: #9a7b33; }

@media (max-width: 560px) {
  .admin-row { flex-direction: column; align-items: stretch; }
  .admin-row-actions { justify-content: flex-end; }
}

/* ---------- Admin dashboard shell (nav + tabs) ---------- */
.admin-shell { display: flex; align-items: flex-start; gap: 2rem; }
.admin-nav {
  flex: none;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: sticky;
  top: 100px;
}
.admin-nav-item {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: background 0.2s, color 0.2s;
}
button.admin-nav-item:hover { background: rgba(194, 160, 95, 0.12); }
.admin-nav-item.is-active { background: var(--ink); color: var(--cream); font-weight: 600; }
.admin-nav-disabled { opacity: 0.42; cursor: default; display: flex; justify-content: space-between; align-items: center; }
.admin-nav-disabled em { font-style: normal; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.admin-nav-divider { height: 1px; background: var(--line); margin: 0.6rem 0.4rem; }
.admin-main { flex: 1; min-width: 0; }
.admin-tab + .admin-tab { margin-top: 0; }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-nav {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .admin-nav-divider { display: none; }
}

/* ---------- Revenue tab: stat tiles, chart, plan breakdown ---------- */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.admin-stat-tile {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.admin-stat-label { font-family: var(--sans); font-size: 0.78rem; color: #7a7264; margin: 0 0 0.4rem; }
.admin-stat-value { font-family: var(--sans); font-weight: 600; font-size: 1.6rem; margin: 0; }

.admin-chart-card, .admin-plan-card { margin-bottom: 1.6rem; }
.admin-chart { position: relative; width: 100%; }
.admin-chart-svg { width: 100%; height: 220px; display: block; overflow: visible; }
.admin-chart-grid { stroke: var(--line); stroke-width: 1; }
.admin-chart-bar { fill: var(--ink); opacity: 0.82; }
.admin-chart-bar.is-peak { fill: var(--gold); opacity: 1; }
.admin-chart-bar.is-hover { fill: var(--gold); opacity: 1; }
.admin-chart-hit { fill: transparent; cursor: pointer; }
.admin-chart-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin-chart-axis {
  font-family: var(--sans);
  font-size: 8px;
  text-anchor: middle;
  fill: #9a9082;
}
.admin-chart-peak-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 9px;
  text-anchor: middle;
  fill: var(--ink);
}
.admin-chart-tooltip {
  position: absolute;
  top: 0;
  transform: translate(-50%, -6px);
  background: var(--dark);
  color: var(--cream);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 14px 30px -14px rgba(43, 33, 24, 0.5);
}
.admin-chart-tooltip strong { display: block; font-size: 0.92rem; }
.admin-chart-tooltip span { opacity: 0.75; font-size: 0.74rem; }

.admin-plan-list { display: grid; gap: 1rem; }
.admin-plan-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.admin-plan-name { font-weight: 600; }
.admin-plan-amount { font-size: 0.86rem; opacity: 0.75; flex: none; }
.admin-plan-bar-track { height: 8px; border-radius: 100px; background: var(--cream-soft); border: 1px solid var(--line); overflow: hidden; }
.admin-plan-bar-fill { height: 100%; background: var(--gold); border-radius: 100px; }

/* ---------- Orders / Users tabs: tables + pagination ---------- */
.admin-list-controls { display: flex; align-items: center; gap: 0.6rem; }
.admin-list-controls select,
.admin-list-controls input[type="search"] {
  font: inherit;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
}
.admin-list-controls input[type="search"] { min-width: 200px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admin-table th {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9082;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tbody tr:hover { background: rgba(194, 160, 95, 0.06); }
.admin-table-sub { font-size: 0.78rem; opacity: 0.62; }
.admin-code-sm { font-size: 0.76rem; padding: 2px 8px; }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.admin-page-info { font-size: 0.82rem; opacity: 0.7; }

/* ============================================================
   MOBILE OPTIMIZATION — iPhone-first refinements
   Foundations (all sizes) + tuned phone breakpoints.
   ============================================================ */

/* prevent iOS text inflation; keep anchor targets clear of the fixed header */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 92px; }

/* safe-area insets for the notch / home indicator */
.site-header { padding-top: calc(1.1rem + env(safe-area-inset-top)); }
.site-header.scrolled { padding-top: calc(0.55rem + env(safe-area-inset-top)); }
.header-inner { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.main-nav.open { padding: calc(env(safe-area-inset-top) + 1rem) 1.2rem calc(env(safe-area-inset-bottom) + 1rem); }
.site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.ms-toast { margin-bottom: env(safe-area-inset-bottom); }

/* ---------- tablets & small laptops ---------- */
@media (max-width: 760px) {
  .rp-p { text-align: left; }              /* justify looks ragged in narrow columns */
  .rp-spot { width: min(200px, 44vw); }
}

/* ============ PHONES (≤ 640px) ============ */
@media (max-width: 640px) {
  :root { --section-pad: clamp(3.2rem, 9vw, 5rem); }

  /* prevent Safari zoom-on-focus: every text field ≥ 16px */
  .field input, .field select, .field textarea,
  #birthdate, .co-promo-row input, #gate-token,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="datetime-local"], textarea, select { font-size: 16px; }

  /* buttons: comfortable tap targets, calmer letter-spacing */
  .btn { letter-spacing: 0.18em; padding: 0.95rem 1.9rem; min-height: 48px; }
  .btn-sm { padding: 0.7rem 1.3rem; min-height: 42px; }

  /* header — swap the icon+wordmark+tagline trio for the single lockup
     image (see the `.logo-full-mobile` comment above); scoped to
     `.site-header` only so the footer's logo is untouched. Padding is
     trimmed here too (mobile only) so the bigger logo actually fills the
     header's vertical space instead of floating in a lot of empty cream
     padding — safe-area inset is kept so it still clears the notch. */
  .site-header { padding-top: calc(0.5rem + env(safe-area-inset-top)); padding-bottom: 0.5rem; }
  .site-header .logo-mark, .site-header .logo > span { display: none; }
  .site-header .logo-full-mobile { display: block; height: 82px; width: auto; }
  .header-inner { gap: 0.8rem; }
  .logo-mark { width: 44px; height: 44px; }
  .logo-name { font-size: 1.25rem; letter-spacing: 0.16em; }
  .logo-tag { font-size: 0.5rem; letter-spacing: 0.18em; }
  .nav-toggle { padding: 0.6rem; margin-right: -0.3rem; }
  .main-nav a { font-size: 1.05rem; padding: 0.6rem 1rem; }

  /* headings a touch tighter so wide tracking doesn't crowd */
  .display-2 { letter-spacing: 0.03em; }
  .section-heading .sub, .page-hero .lede { font-size: 1rem; }

  /* calculator input → single, full-width, thumb-friendly */
  .calc-hero { min-height: auto; padding-top: 6.2rem; padding-bottom: 2.4rem; }
  .calc-input-row { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  #birthdate { width: 100%; text-align: center; font-size: 16px; padding: 0.95rem 1.1rem; }
  .gender-toggle { width: 100%; }
  .gender-toggle button { flex: 1; padding: 0.95rem 0.5rem; font-size: 0.95rem; }
  .btn-calc { width: 100%; justify-content: center; }
  .calc-grey-matrix { width: min(300px, 74vw); }

  /* results + health card */
  .results-meta { gap: 0.6rem 2rem; font-size: 0.95rem; margin-bottom: 1.8rem; }
  .health-table { border-spacing: 0 0.4rem; }
  .health-table th { font-size: 0.62rem; letter-spacing: 0.04em; padding: 0.3rem 0.35rem; }
  .health-table td { font-size: 0.82rem; padding: 0.55rem 0.4rem; }
  .health-table td:first-child { letter-spacing: 0.02em; font-size: 0.72rem; }

  /* report readability */
  .report-box { padding: clamp(1.2rem, 5vw, 1.8rem); border-radius: 22px; }
  .rp { font-size: 1rem; }
  .rp-p { line-height: 1.75; margin-bottom: 1rem; }
  .rp-spot { float: none; width: min(220px, 60vw); margin: 0 auto 1.4rem; }
  .rp-list li { line-height: 1.65; }

  /* pricing */
  .plan { padding: 1.9rem 1.5rem; }
  .plans { gap: 1.2rem; }
  .plan-now { font-size: 2.1rem; }
  .plans-note { font-size: 0.82rem; }

  /* checkout dialog → premium bottom sheet */
  .checkout-modal { align-items: flex-end; padding: 0; }
  .checkout-dialog {
    width: 100%; max-height: 92svh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: 26px 26px 0 0;
    padding: 1.8rem 1.4rem calc(1.8rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .checkout-modal.open .checkout-dialog { transform: translateY(0); }

  /* auth */
  .login-wrap { padding: 6.4rem 5% calc(3rem + env(safe-area-inset-bottom)); min-height: auto; }

  /* My Space */
  .ms-hero { padding-top: 6.5rem; }
  .ms-facts { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; }
  .ms-matrix-actions { flex-direction: column; }
  .ms-matrix-actions .btn { width: 100%; justify-content: center; }
  .ms-row { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .ms-row-actions { justify-content: flex-start; }
  .ms-row-actions .btn { flex: 1; justify-content: center; }
  .ms-avatar-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }

  /* key areas — mobile 3+2 layout to match reference: three even
     cards for Love / Money / Blocks, then Resources / Personal
     Power wrap onto their own row — CENTERED, not left-aligned,
     per explicit follow-up ("ele trebuie sa fie pe centru"). Grid
     can't center a short last row on its own, so this switches to
     flexbox: each card gets a fixed ~1/3-width basis with no grow,
     and `justify-content: center` centers whichever cards land on
     each wrapped line (all 3 on row 1, the leftover 2 on row 2).
     A thin vertical accent still marks the start of that second
     group. Cards are scaled down — icon, title and body copy all
     shrink — since three now have to fit across one phone-width
     row. This overrides the 680px tablet rule above (2 cols, last
     card full width) only at true phone widths. */
  .area-cards {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.47rem; grid-template-columns: none;
  }
  .area-card {
    /* 2026-08-26: whole card scaled ~15% smaller across the board
       (gap, padding, icon, type) per explicit follow-up — cards
       were reading as too tall/long for the row. */
    /* exact thirds after the two 0.47rem gaps — not a 33.333%
       approximation, which rounds just over 100% on some widths
       and wraps the 3rd card onto its own line */
    flex: 0 0 calc((100% - 0.94rem) / 3); width: calc((100% - 0.94rem) / 3);
    padding: 0.85rem 0.47rem; gap: 0.43rem; border-radius: 12px;
  }
  .area-icon { width: 37px; height: 37px; font-size: 0.98rem; }
  .area-title { font-size: 0.63rem; letter-spacing: 0.03em; }
  .area-desc { font-size: 0.56rem; line-height: 1.4; }
  .area-cards .area-card:nth-child(4) { position: relative; }
  .area-cards .area-card:nth-child(4)::before {
    content: ""; position: absolute; left: -0.28rem; top: 12%; bottom: 12%;
    width: 1px; background: rgba(232, 206, 150, 0.28);
  }

  /* legal + contact */
  .legal-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .legal-tabs a { padding: 0.55rem 1.05rem; font-size: 0.62rem; }
  .legal-summary { border-radius: 14px; }
  .contact-card { padding: 1.6rem 1.4rem; }

  /* social icons: bigger tap targets */
  .social-row a, .contact-social a { width: 46px; height: 46px; }

  /* footer */
  .footer-grid { gap: 2rem 1.5rem; }
}

/* ============ SMALL PHONES (≤ 400px) ============ */
@media (max-width: 400px) {
  .container { width: 91%; }
  .logo-tag { display: none; }             /* keep the header clean on the narrowest devices */
  .display-1 { font-size: clamp(2.4rem, 12vw, 3rem); }
  .plan { padding: 1.7rem 1.3rem; }
  .ms-facts { grid-template-columns: 1fr; }
  .co-promo-row { flex-direction: column; }
  .co-promo-row .btn { width: 100%; justify-content: center; }
  .legal-aside ol { columns: 1; }
}

/* larger touch targets for icon buttons everywhere on touch devices */
@media (hover: none) and (pointer: coarse) {
  .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; }
  .checkout-close { padding: 0.4rem; min-width: 40px; min-height: 40px; }
}

/* ============================================================
   ARCANA CARDS (in report) + ARCANA MODAL
   ============================================================ */
.rp-arc-card {
  display: block; width: min(230px, 42vw); margin: 0 auto 1.2rem;
  background: none; border: none; padding: 0; cursor: pointer; text-align: center;
  transition: transform 0.35s var(--ease-out);
}
.rp-block .rp-arc-card { float: left; margin: 0 1.6rem 1rem 0; }
.rp-arc-card img {
  width: 100%; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 20px 44px -26px rgba(43, 33, 24, 0.5);
  transition: box-shadow 0.35s, transform 0.35s var(--ease-out);
}
.rp-arc-card:hover { transform: translateY(-3px); }
.rp-arc-card:hover img { box-shadow: 0 26px 54px -22px rgba(194, 160, 95, 0.65); }
.rp-arc-cue {
  display: inline-flex; align-items: center; gap: 0.45rem; justify-content: center;
  margin-top: 0.7rem; font-family: var(--serif); font-size: 1rem; color: var(--ink);
}
.rp-arc-cue-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--dark); color: var(--gold-light);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans);
  font-size: 0.72rem; flex: none;
}
.rp-arc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1.1rem; margin-top: 0.8rem;
}
.rp-arc-grid .rp-arc-card { width: 100%; margin: 0; float: none; }
/* the zone's Arcana is already pictured in the floating sticky card —
   this variant repeats just the number + name, no image, so it isn't
   shown twice */
.rp-arc-card-no-image { display: flex; align-items: center; justify-content: center; min-height: 2.4rem; }
.rp-arc-card-no-image .rp-arc-cue { margin-top: 0; }
/* Left over from an earlier grid layout for description-only zones,
   replaced 2026-08-25 by real .rp-block + arcanaHeader() markup (same
   look as every other zone) — kept, unused, for rollback. */
.rp-arc-grid-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
}
.rp-arc-grid-item .rp-arc-caption { text-align: center; max-width: 220px; margin: 0 auto; }
/* 2026-08-25: description-only zones (Heart's Desire, Talents, Higher
   Essence, Health, Paternal/Maternal Line) render each Arcana as a real
   .rp-block with the same colored-badge arcanaHeader() every other zone
   uses. No image ever appears here (only the floating sticky card shows
   one); in its place, a short caption + locked note fill the block. */
.rp-arc-caption {
  font-size: 0.98rem; line-height: 1.75; color: #6b6255; margin: 0 0 0.6rem; max-width: 640px;
}
.rp-arc-locked-note { border-top: none; padding-top: 0; margin-top: 0; }

/* Life Missions — In Depth: 4 cards in a row, title only; full reading
   opens in the shared .arc-modal pop-up on tap. */
.missions-row-report {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-top: 1rem;
}
.mission-report-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: center;
  transition: transform 0.3s var(--ease-out);
}
.mission-report-card:hover { transform: translateY(-3px); }
.mission-report-card h4 { margin: 0; font-size: clamp(1rem, 2vw, 1.2rem); }
.mission-report-img { width: 100%; }
.mission-report-img img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -26px rgba(43, 33, 24, 0.5);
  transition: box-shadow 0.3s;
}
.mission-report-card:hover .mission-report-img img { box-shadow: 0 26px 54px -22px rgba(194, 160, 95, 0.65); }

@media (max-width: 720px) {
  .missions-row-report { grid-template-columns: 1fr 1fr; }
}

/* 2026-08-26: previously collapsed to a single column below 480px, so on
   real phones each mission card rendered full-width and stacked vertically.
   Requested mobile layout is the 2x2 grid (title above image, two per row)
   at every mobile width, matching the reference screenshot — so the
   1-column override is intentionally removed; the 720px rule above now
   also governs the narrowest phones. Both breakpoints sit well inside the
   report's mobile range (<860px), so desktop is untouched either way. */

.rp-chip {
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 12px; font-size: 0.8rem; color: var(--dark);
}

/* modal */
.arc-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1.2rem; }
/* [hidden] alone loses to the class rule above (same specificity, author
   rule wins over the UA stylesheet) — without this, a closed modal keeps
   this full-screen fixed overlay in the layout with pointer-events on,
   silently blocking every click on the page until reload. */
.arc-modal[hidden] { display: none; }
.arc-backdrop {
  position: absolute; inset: 0; background: rgba(23, 16, 9, 0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.arc-modal.open .arc-backdrop { opacity: 1; }
.arc-dialog {
  position: relative; width: min(600px, 100%); max-height: 90svh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; background: var(--white); border-radius: 22px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.arc-modal.open .arc-dialog { transform: none; opacity: 1; }
.arc-close { position: absolute; top: 0.9rem; right: 1.1rem; font-size: 1.7rem; line-height: 1; color: #9a8f7f; z-index: 2; }
.arc-close:hover { color: var(--ink); }
.arc-loading { padding: 2rem 0; text-align: center; color: var(--ink); opacity: 0.7; }

.arc-head { display: flex; gap: 1.4rem; align-items: flex-start; }
.arc-card-wrap { width: 128px; flex: none; }
.arc-card-wrap img { width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 16px 34px -20px rgba(43,33,24,0.5); }
.arc-head-info { flex: 1; min-width: 0; }
.arc-badge-row { display: flex; align-items: center; gap: 0.6rem; }
.arc-num { width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex: none; }
.arc-name { font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.15; }
.arc-subtitle { font-style: italic; color: #8a7c62; font-size: 1rem; margin: 0.3rem 0 0.9rem; }
.arc-label { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin: 1.2rem 0 0.6rem; }
.arc-pos-label { color: #4f7a3a; }
.arc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.arc-desc { font-size: 0.95rem; line-height: 1.75; color: #4a4236; margin: 0; }
.arc-pos { list-style: none; display: grid; gap: 0.5rem; margin: 0; }
.arc-pos li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; line-height: 1.6; color: #4a4236; }
.arc-pos li::before { content: "✓"; position: absolute; left: 0; color: #5a8a3a; }
.arc-deep li::before { content: "✦"; color: var(--gold); }

.arc-locked { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.arc-lock-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.arc-lock-head .serif { font-size: 1.2rem; }
.arc-lock-pill { background: var(--dark); color: var(--gold-light); border-radius: 100px; padding: 4px 11px; font-size: 0.7rem; }
.arc-lock-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
.arc-lock-tab { background: var(--cream-soft); border: 1px solid var(--line); border-radius: 100px; padding: 7px 13px; font-size: 0.82rem; color: #7a7264; }
.arc-unlock { background: var(--cream-soft); border: 1px solid #e7e0d1; border-radius: 16px; padding: 1.6rem; text-align: center; }
.arc-unlock-eyebrow { color: #a8895a; margin-top: 0; }
.arc-unlock-head { font-size: 1.5rem; margin: 0 0 1rem; }

.arc-note { margin-top: 1.6rem; font-size: 0.8rem; line-height: 1.6; color: var(--ink); opacity: 0.6; font-style: italic; }

/* report title ⓘ note */
.rp-arc-disclaimer { font-size: 0.82rem; opacity: 0.62; font-style: italic; margin: 0.4rem 0 1.6rem; }

@media (max-width: 640px) {
  .rp-block .rp-arc-card { float: none; margin: 0 auto 1.2rem; width: min(240px, 62vw); }
  .arc-modal { align-items: flex-end; padding: 0; }
  .arc-dialog {
    width: 100%; max-height: 92svh; border-radius: 24px 24px 0 0;
    padding: 1.6rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .arc-modal.open .arc-dialog { transform: translateY(0); }
  .arc-head { gap: 1rem; }
  .arc-card-wrap { width: 96px; }
}

/* ============================================================
   MY SPACE — Your Matrix Journey (Arcana sections)
   ============================================================ */
.ms-journey-head { grid-column: 1 / -1; text-align: center; margin: clamp(1.5rem,4vw,2.5rem) 0 0.4rem; }
.ms-journey-head .display-2 { margin: 0.2rem 0; }
.ms-journey-note { font-size: 0.82rem; font-style: italic; opacity: 0.6; max-width: 640px; margin: 0.4rem auto 0; }
#ms-journey-sections { display: grid; gap: 1.2rem; }

.msj-sec { }
.msj-head { margin-bottom: 1rem; }
.msj-single { width: min(220px, 60%); margin: 0 auto; }
.msj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }
.msj-carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.msj-carousel > .rp-arc-card { flex: 0 0 46%; scroll-snap-align: center; margin: 0; }

/* fanned stack (Trauma) */
.msj-fan { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }
.msj-fan-card { position: absolute; width: 150px; margin: 0; transition: transform 0.4s var(--ease-out); }
.msj-fan-card img { box-shadow: 0 16px 34px -18px rgba(43,33,24,0.55); }
.msj-fan-0 { transform: rotate(-13deg) translateX(-74px); z-index: 1; }
.msj-fan-1 { transform: translateY(-8px); z-index: 3; }
.msj-fan-2 { transform: rotate(13deg) translateX(74px); z-index: 2; }
.msj-fan:hover .msj-fan-0 { transform: rotate(-16deg) translateX(-92px); }
.msj-fan:hover .msj-fan-2 { transform: rotate(16deg) translateX(92px); }
.msj-combined { text-align: center; margin-top: 0.4rem; }
.msj-combined::before { content: ""; }
.msj-combined { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--gold); }

/* missions */
.msj-missions { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.msj-mission { text-align: center; }
.msj-mission-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }

/* prognostica */
.msj-prog { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.msj-prog-card { width: 150px; flex: none; }
.msj-prog-ctrl { flex: 1; min-width: 200px; }
.msj-prog-age { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.6rem; }
.msj-slider { width: 100%; accent-color: var(--gold); }
.msj-prog-hint { font-size: 0.8rem; opacity: 0.65; margin: 0.5rem 0 0; }

@media (max-width: 640px) {
  .msj-carousel > .rp-arc-card { flex-basis: 62%; }
  .msj-fan { height: 250px; }
  .msj-fan-card { width: 120px; }
  .msj-fan-0 { transform: rotate(-12deg) translateX(-56px); }
  .msj-fan-2 { transform: rotate(12deg) translateX(56px); }
  .msj-single { width: min(220px, 72%); }
}

/* ============================================================
   MY SPACE — refined hierarchy (sticky bar + chart hero)
   ============================================================ */
#ms-dashboard { padding-top: clamp(4.8rem, 9vh, 6.2rem); }
.ms-hero { padding-top: 2rem !important; }

/* sticky profile bar */
.ms-sticky {
  position: sticky; top: clamp(54px, 8vh, 74px); z-index: 90;
  padding: 0.55rem 0; margin-bottom: 1.6rem;
  background: rgba(253, 253, 251, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 100px;
  box-shadow: 0 14px 34px -22px rgba(43, 33, 24, 0.4);
}
.ms-sticky-inner { display: flex; align-items: center; gap: 0.9rem; width: min(var(--container), 92%); }
.ms-sticky-chart { position: relative; width: 46px; height: 46px; flex: none; }
.ms-sticky-chart img { width: 100%; display: block; }
.ms-sticky-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ms-sticky-id { flex: 1; min-width: 0; }
.ms-sticky-name { font-size: 1.1rem; line-height: 1.1; margin: 0; }
.ms-sticky-meta { font-size: 0.76rem; color: #8a7c62; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-sticky-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); background: var(--white); flex: none; padding: 3px; }

/* reordered flow: chart hero → arcana journey → profile → the rest */
#matrix { order: -3; }
#ms-journey { order: -2; }
#profile { order: -1; grid-column: 1 / -1; }

/* chart hero */
.ms-chart-hero { text-align: center; position: relative; overflow: hidden; }
.ms-chart-hero::before {
  content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 120%;
  background: radial-gradient(circle, rgba(232, 206, 150, 0.28) 0%, transparent 60%);
  pointer-events: none;
}
.ms-chart-hero > * { position: relative; }
.ms-chart-eyb { margin-bottom: 0.5rem; }
.ms-chart-title { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.ms-chart-hero .ms-row-meta { text-align: center; }
.ms-chart-hero .ms-matrix-viz { width: min(460px, 92%); margin: 1.4rem auto 1.2rem; }
.ms-chart-hero .ms-matrix-actions { justify-content: center; }

/* journey heading divider */
.ms-journey-head { border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 4vw, 2.6rem); }

@media (max-width: 640px) {
  .ms-sticky { border-radius: 20px; top: 56px; }
  .ms-sticky-name { font-size: 1rem; }
  .ms-sticky-meta { font-size: 0.7rem; }
  .ms-chart-hero .ms-matrix-viz { width: min(360px, 86%); }
}

/* My Space — desktop: carousels show all cards in a row; keep content graceful in wide cards */
@media (min-width: 760px) {
  .msj-carousel { overflow: visible; }
  .msj-carousel > .rp-arc-card { flex: 1 1 0; }
  .msj-single { width: 200px; }
  .ms-chart-hero .ms-matrix-viz { width: min(420px, 70%); }
}