/* ── NAV ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  /* High opacity so it reads as true navy (not a grey blend) wherever it
     sits — including at page-load, directly over the dark hero. */
  background: rgba(10,14,23,.95); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(193,154,78,.16);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-3);
  max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4);
  gap: var(--space-4);
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em;
  text-decoration: none; color: var(--cream-100); white-space: nowrap;
}
.brand-mark svg { width: 24px; height: 24px; flex-shrink: 0; }
.nav-links { display: none; gap: var(--space-5); list-style: none; }
.nav-links a { text-decoration: none; font-size: var(--fs-small); color: var(--cream-300); transition: color var(--dur-fast); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-300); }
@media (min-width: 900px) { .nav-links { display: flex; align-items: center; } }

.nav-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.lang-switcher { position: relative; }
.lang-switcher summary {
  list-style: none; cursor: pointer; font-size: var(--fs-small);
  border: 1px solid var(--line-on-dark-strong); border-radius: var(--radius-pill);
  padding: 6px 12px; color: var(--cream-100);
}
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher[open] summary { color: var(--gold-300); border-color: var(--gold-300); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-1); min-width: 140px; z-index: 50;
}
.lang-menu a {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm);
  text-decoration: none; font-size: var(--fs-small); color: var(--ink-700);
}
.lang-menu a:hover { background: var(--cream-100); }
.lang-menu a[aria-current="true"] { color: var(--gold-600); font-weight: 600; }

.nav-cta {
  display: none; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
  color: var(--navy-950); font-weight: 700;
  padding: 10px 20px; border-radius: var(--radius-pill);
  text-decoration: none; font-size: var(--fs-small);
  box-shadow: var(--shadow-gold); transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(193,154,78,.6); }
@media (min-width: 900px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; background: none; border: 1px solid var(--line-on-dark-strong);
  border-radius: var(--radius-md); padding: 8px 10px; cursor: pointer; color: var(--cream-100);
}
.nav-toggle[aria-expanded="true"] { color: var(--gold-300); border-color: var(--gold-300); }
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle-wrap { position: relative; }
@media (min-width: 900px) { .nav-toggle-wrap { display: none; } }

/* Pre-launch audit fix: repair the mobile nav drawer. Previously a native
   <details>/<summary> disclosure whose panel was `position:absolute; left:0;
   right:0` relative to the hamburger button's own (~40px) wrapper -- so the
   panel's rendered width was that of the button, not the viewport, and real
   label text (especially longer RU strings) clipped or pushed past the
   right edge. Rebuilt as a JS-driven drawer, fixed to the viewport (a
   `<details>` gives no hook for backdrop-click-close, Escape-close, or
   focus trapping, all required here). Markup/open-close logic lives in
   interactions.js; only cosmetic + layout rules live here. */
.mobile-menu-backdrop {
  position: fixed; inset: 0; background: rgba(6,9,16,.6);
  z-index: 210; opacity: 0; transition: opacity var(--dur-med) var(--ease-soft);
}
.mobile-menu-backdrop[hidden] { display: none; }
.mobile-menu-backdrop.is-open { opacity: 1; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  /* Responsive width with a sensible cap, not a fixed narrow panel --
     wide enough on the smallest supported phones (375px) for the longest
     EN/RU label (including the price-appended CTA button text) to wrap
     across at most two short lines, never clip. */
  width: min(86vw, 380px); max-width: 380px; box-sizing: border-box;
  background: var(--navy-950); box-shadow: var(--shadow-card);
  z-index: 220; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform var(--dur-med) var(--ease-soft);
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu ul { list-style: none; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); }
.mobile-menu a { text-decoration: none; color: var(--cream-100); font-size: 1.05rem; overflow-wrap: break-word; }

/* Scroll lock while the drawer is open. Deliberately NOT a plain
   `overflow: hidden` toggle -- besides base.css's <html> already having
   its own `overflow-x: hidden` (which blocks the CSS-spec quirk that
   would otherwise propagate <body>'s overflow to the real viewport
   scroller, so a plain body-only toggle silently does nothing), browsers
   can also just discard the scroll offset once an element stops being
   scrollable, so the page snaps to the top instead of returning to where
   it was after closing. Pinning <body> with `position: fixed` and a
   negative `top` (set inline by interactions.js to the exact scroll
   position at the moment the drawer opened) freezes the page in place
   without ever making it non-scrollable, so there is no offset to lose --
   closing clears this and does one explicit window.scrollTo() back to
   that saved position. Horizontal shift from the disappearing scrollbar
   is compensated with an inline padding-right set by interactions.js
   (measured live from the actual scrollbar width, so it's correct on any
   OS/browser and zero on platforms with overlay scrollbars that don't
   reflow layout at all). */
body.mobile-menu-open { position: fixed; left: 0; right: 0; }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: 600; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy-950); color: var(--cream-100); }
.btn-primary:hover { background: var(--navy-800); }
.btn-gold { background: var(--gold-500); color: var(--navy-950); }
.btn-gold:hover { background: var(--gold-600); }
.btn-outline { background: transparent; border-color: var(--border-light-strong); color: var(--navy-950); }
.btn-outline:hover { border-color: var(--navy-950); }
.btn-outline-dark { background: transparent; border-color: var(--line-on-dark-strong); color: var(--cream-100); }
.btn-outline-dark:hover { border-color: var(--gold-300); color: var(--gold-300); }
.btn-ghost { background: transparent; color: var(--navy-950); padding-inline: 4px; }
.btn[disabled], .btn-disabled {
  background: var(--beige-200); color: var(--ink-500); cursor: not-allowed; transform: none;
}
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: var(--fs-small); min-height: 36px; }

/* ── BADGES / STATUS ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill);
}
.badge-active { background: rgba(79,122,92,0.12); color: var(--status-active); }
.badge-soon { background: rgba(178,138,74,0.14); color: var(--gold-700); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── HERO (cinematic split) ───────────────────────────────────────────── */
.hero {
  background: var(--navy-950);
  color: var(--cream-100);
  padding-block: var(--space-8) var(--space-7);
  position: relative; overflow: hidden;
}
.hero-glow {
  position: absolute; inset: -10% -10% auto auto; width: 70%; height: 90%;
  background: radial-gradient(closest-side, var(--gold-glow), transparent 70%);
  filter: blur(10px); pointer-events: none; z-index: 0;
}
.hero-glow.b { inset: auto auto -20% -15%; width: 55%; height: 70%; background: radial-gradient(closest-side, rgba(54,69,105,.55), transparent 70%); }
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  background-size: 160px 160px;
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero-grid { position: relative; z-index: 2; display: grid; gap: var(--space-7); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-6); } }
.hero h1 { color: var(--cream-100); margin-block: var(--space-3); letter-spacing: -.015em; }
.hero-subhead {
  margin-top: 12px; font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-subhead); color: var(--gold-300); max-width: 40ch; line-height: 1.4;
}
.hero .lead { margin-top: var(--space-3); font-size: var(--fs-lead); color: var(--cream-300); max-width: 56ch; }
.hero-offer {
  margin-top: var(--space-4); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 10px 12px 10px 20px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(246,241,230,.07), rgba(246,241,230,.02));
  border: 1px solid var(--line-on-dark-strong);
}
.hero-price { display: flex; align-items: baseline; gap: 5px; }
.hero-price .amount { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-300); line-height: 1; }
.hero-price .unit { font-size: .7rem; color: var(--cream-500); letter-spacing: .03em; line-height: 1.2; }
.hero-offer .btn { min-height: 44px; padding: 0 22px; font-size: .9rem; }
.hero-note { margin-top: var(--space-3); font-size: var(--fs-small); color: rgba(246,241,230,.55); display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 14px; height: 14px; color: var(--gold-300); }
.hero-delivery-note { margin-top: 8px; font-size: var(--fs-small); color: var(--gold-300); }
/* Pre-launch audit fix #27: Personal-Portrait-only benefit rows (existing
   copy.heroBenefit1/2/3 -- the same approved strings/icons already used on
   the homepage hero, reused here rather than inventing new copy). Hidden
   by default (desktop/tablet) -- this content is mobile-only, revealed in
   the max-width:767px block below. */
.hero-benefits { display: none; list-style: none; margin: 0; padding: 0; }

/* Pre-launch audit fix #27 ("simplify the mobile price and primary CTA
   block"): the desktop .hero-offer pill (padding + border + pill radius)
   was designed for a single-row layout with the price and button side by
   side. Below ~430px the button no longer fits next to the price and
   wraps onto its own line via the pill's own flex-wrap -- but the pill
   background/border stays wrapped tightly around BOTH now-stacked rows,
   producing a "nested oval" look (a rounded pill containing a second,
   fully-rounded button-pill inside it) with dead side padding and a CTA
   that never reaches full width. This mobile-only override replaces the
   pill with a plain stacked block (price row, then a full-width CTA) and
   reveals the benefit rows above. Desktop/tablet (>=768px) keeps the
   original .hero-offer pill rule above completely untouched. */
@media (max-width: 767px) {
  .hero-offer { display: grid; gap: var(--space-3); background: none; border: none; padding: 0; border-radius: 0; }
  .hero-offer .btn { width: 100%; }
  .hero-benefits { display: grid; gap: 10px; margin-top: var(--space-4); }
  .hero-benefits li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); color: rgba(246,241,230,.75); }
  .hero-benefits svg { width: 16px; height: 16px; color: var(--gold-300); flex-shrink: 0; margin-top: 1px; }
}

/* Closing callback line (PP-10) shown just above the order panel — a plain
   quote-style line, not another CTA. */
.order-closing-line { max-width: 62ch; margin: 0 auto var(--space-5); text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-700); }

/* Scope-boundary clarification (NP-08/13/22 — "this is what the report is
   NOT"), rendered directly under the section-head heading for every
   product that has one (Relationship Dynamics, Career Direction, Couple
   Compatibility — same shared code path, see templates/product.js
   painPromise). Pre-launch audit fix #24: previously centered, narrow
   (60ch) and muted -- looked like a floating disclaimer disconnected from
   the left-aligned heading above it. Now a normal left-aligned intro
   paragraph, same max-width as .section-head so it visually reads as part
   of the same heading block, with a tighter, deliberate gap before the
   first two-column content block below (no more relying on incidental
   collapsed-margin spacing). Not a card, badge or new section — same
   plain <p>, just correctly positioned and styled. */
.boundary-note { margin-top: var(--space-3); margin-bottom: var(--space-3); text-align: left; font-size: var(--fs-body); color: var(--ink-700); max-width: 640px; }

/* ── HERO PHOTO BACKDROP (Personal Portrait only — homepage + its own
   product page) — sits behind the existing glow/mockup layers, never
   replaces the real report-preview screenshots in .mockup-stage. ──────── */
.hero-photo-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo-bg picture { display: block; width: 100%; height: 100%; }
.hero-photo-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .32; }
.hero-photo-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,23,.55) 0%, rgba(10,14,23,.85) 55%, var(--navy-950) 100%);
}

/* ── LAYERED REPORT MOCKUP ───────────────────────────────────────────── */
.mockup-stage { position: relative; z-index: 2; perspective: 1600px; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.mockup-card {
  position: relative; width: min(440px, 88vw); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-deep); border: 1px solid rgba(246,241,230,.2);
  transform: rotate3d(0,1,0,-10deg) rotate(2deg);
  animation: float-main 7s ease-in-out infinite;
  transition: transform var(--dur-med) var(--ease-soft);
}
.mockup-stage:hover .mockup-card { transform: rotate3d(0,1,0,-3deg) rotate(1deg) scale(1.02); }
.mockup-card img { width: 100%; display: block; filter: brightness(1.22) contrast(1.08) saturate(1.05); }
.mockup-card .fade-mask { position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(180deg, transparent, var(--navy-950) 96%); }
.mockup-card-back {
  position: absolute; top: 40px; left: -34px; width: min(360px, 74vw);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card);
  border: 1px solid rgba(246,241,230,.14); opacity: .88;
  transform: rotate3d(0,1,0,-15deg) rotate(-5deg) translateZ(-60px);
  animation: float-back 8s ease-in-out infinite .4s; z-index: -1;
}
.mockup-card-back img { width: 100%; display: block; filter: brightness(1.15); }
@keyframes float-main { 0%,100% { transform: rotate3d(0,1,0,-10deg) rotate(2deg) translateY(0); } 50% { transform: rotate3d(0,1,0,-10deg) rotate(2deg) translateY(-14px); } }
@keyframes float-back { 0%,100% { transform: rotate3d(0,1,0,-15deg) rotate(-5deg) translateZ(-60px) translateY(0); } 50% { transform: rotate3d(0,1,0,-15deg) rotate(-5deg) translateZ(-60px) translateY(-9px); } }
.mockup-chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--cream-50); color: var(--navy-950); border-radius: var(--radius-md);
  padding: 10px 14px; font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-card);
  animation: chip-float 6s ease-in-out infinite;
}
.mockup-chip.c1 { top: 6%; right: -6%; animation-delay: .2s; }
.mockup-chip.c2 { bottom: 10%; right: -10%; animation-delay: 1.1s; }
.mockup-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
@keyframes chip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 620px) { .mockup-chip { display: none; } }

/* Reveal-on-scroll (progressive enhancement — content is present without JS) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-3, 620ms) var(--ease-out), transform var(--dur-3, 620ms) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── BREADCRUMBS ─────────────────────────────────────────────────────── */
.breadcrumbs { padding-block: var(--space-3); border-bottom: 1px solid var(--border-light); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-small); color: var(--ink-500); }
.breadcrumbs a { text-decoration: none; color: var(--ink-500); }
.breadcrumbs a:hover { color: var(--navy-950); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--cream-500); }
.breadcrumbs li[aria-current] { color: var(--ink-900); }

/* ── CARDS / CATALOG ─────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-4); }
/* Pre-launch audit fix #23: the previous auto-fit/minmax rule greedily
   fit as many 280px-wide columns as the container allowed -- at typical
   desktop widths that meant 4 columns for 6 products (a 4+2 layout), not
   the approved 3x2. Explicit per-breakpoint column counts instead. */
.catalog-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
.related-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.product-card {
  position: relative; overflow: hidden;
  background: var(--navy-900); border-radius: var(--radius-xl);
  display: flex; flex-direction: column; min-height: 400px;
  text-decoration: none; color: var(--cream-100); box-shadow: var(--shadow-card);
  transition: transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-deep); }
.product-card:hover .product-card-img { transform: scale(1.05); }
.product-card-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.product-card-media picture { display: block; width: 100%; height: 100%; }
.product-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-3, 620ms) var(--ease-soft);
}
.product-card-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,14,23,.12) 0%, rgba(10,14,23,.58) 55%, rgba(10,14,23,.94) 100%);
}
.product-card-body { position: relative; z-index: 2; padding: var(--space-5); display: flex; flex-direction: column; height: 100%; }
.product-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.product-index { font-family: var(--font-display); font-size: .85rem; color: rgba(246,241,230,.5); }
.status-pill {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 800;
  padding: 5px 11px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px;
}
.status-pill.active { background: rgba(163,201,168,.16); color: #a8d3ae; }
.status-pill.soon { background: rgba(227,203,146,.16); color: var(--gold-300); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.product-card h3 { margin-top: var(--space-4); font-size: 1.55rem; line-height: 1.22; color: var(--cream-100); overflow-wrap: break-word; }
.product-card p { margin-top: 10px; font-size: .95rem; line-height: 1.6; color: rgba(246,241,230,.8); flex: 1; }
.product-card-foot { margin-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--line-on-dark); }
.product-price { font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-300); }
.product-tbd { font-size: .78rem; color: rgba(246,241,230,.55); }
.card-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-on-dark-strong); display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast); flex-shrink: 0; }
.product-card:hover .card-arrow { background: var(--gold-300); border-color: var(--gold-300); color: var(--navy-950); transform: translateX(3px); }
.product-card-linkover { position: absolute; inset: 0; z-index: 3; }

/* ── SECTIONS: pain/promise/receive/faq ─────────────────────────────── */
.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-2); }

.pain-promise-split { display: grid; gap: 2px; border-radius: var(--radius-xl); overflow: hidden; grid-template-columns: 1fr; }
@media (min-width: 820px) { .pain-promise-split { grid-template-columns: 1fr 1fr; } }
.pp-half { padding: var(--space-6); }
.pp-half.pain { background: var(--cream-100); }
.pp-half.promise { background: var(--navy-950); color: var(--cream-100); }
.pp-half h3 { font-size: 1.5rem; }
.pp-half p { margin-top: var(--space-3); color: var(--ink-700); }
.pp-half.promise p { color: rgba(246,241,230,.72); }
/* Legacy simple variant, still used by early-access product pages */
.pain-promise { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .pain-promise { grid-template-columns: 1fr 1fr; } }
.pp-card { padding: var(--space-5); border-radius: var(--radius-lg); }
.pp-pain { background: var(--cream-100); border: 1px solid var(--border-light); }
.pp-promise { background: var(--navy-950); color: var(--cream-100); }
.pp-card h3 { margin-bottom: var(--space-3); }

.receive-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.receive-group { background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-4); }
.receive-group-heading { font-weight: 700; margin-bottom: var(--space-2); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-700); }
.receive-group-items { list-style: none; display: grid; gap: 8px; }
.receive-group-item { padding-left: 18px; position: relative; font-size: var(--fs-small); }
.receive-group-item::before { content: "•"; position: absolute; left: 0; color: var(--gold-500); }

.receive-showcase { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .receive-showcase { grid-template-columns: repeat(3, 1fr); } }
.receive-panel { background: var(--cream-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; }
.receive-panel .big-num { position: absolute; top: var(--space-4); right: var(--space-4); font-family: var(--font-display); font-size: 2.2rem; color: var(--border-light); }
.receive-panel h4 { font-size: 1.15rem; margin-bottom: var(--space-3); }
.receive-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.receive-panel li { padding-left: 20px; position: relative; font-size: .92rem; color: var(--ink-700); }
.receive-panel li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); }

.steps { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { display: flex; flex-direction: column; gap: 6px; }
.step-num { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-600); }

.steps-strip { display: grid; gap: var(--space-5); grid-template-columns: 1fr; position: relative; }
@media (min-width: 760px) { .steps-strip { grid-template-columns: repeat(4, 1fr); } }
.steps-strip::before { content: ""; position: absolute; top: 26px; left: 0; right: 0; height: 1px; background: var(--border-light); display: none; }
@media (min-width: 760px) { .steps-strip::before { display: block; } }
.step-item { position: relative; }
.step-num-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--navy-950); color: var(--gold-300); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.3rem; position: relative; z-index: 1; }
.step-item h4 { margin-top: var(--space-3); font-size: 1.1rem; }
.step-item p { margin-top: 6px; font-size: .88rem; color: var(--ink-500); }

.faq-item { border-bottom: 1px solid var(--border-light); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: var(--space-3) 0; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 1.05rem; gap: var(--space-3);
}
.faq-a { display: none; padding-bottom: var(--space-3); color: var(--ink-700); font-size: var(--fs-small); }
.faq-a p + p { margin-top: 10px; }
.faq-item[open] .faq-a { display: block; }
.faq-chevron { transition: transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

/* ── EARLY ACCESS (formerly "coming soon") — full-width, same visual
   weight as the active-product panels, never a small dashed box. ─────── */
.early-access-panel, .coming-soon-panel {
  background: var(--navy-950); color: var(--cream-100);
  border-radius: var(--radius-xl); padding: var(--space-6); text-align: left;
  position: relative; overflow: hidden;
}
.early-access-panel h3, .coming-soon-panel h3 { font-size: var(--fs-h3); max-width: 26ch; }
.early-access-panel p, .coming-soon-panel p { color: rgba(246,241,230,.75) !important; max-width: 60ch; font-size: 1.05rem; }
.early-access-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .early-access-grid { grid-template-columns: 1.3fr .7fr; } }

/* ── LARGE PRODUCT MOTIF VISUAL — parity with the report mockup for
   products that don't have a real report yet. Same scale/shadow/rotation
   as .mockup-card so every product hero carries equal visual weight. ─── */
.motif-stage { position: relative; z-index: 2; perspective: 1600px; display: flex; justify-content: center; align-items: center; min-height: 380px; }
.motif-card {
  position: relative; width: min(420px, 86vw); aspect-ratio: 4 / 5; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--navy-800), var(--navy-950) 70%);
  box-shadow: var(--shadow-deep); border: 1px solid rgba(246,241,230,.16);
  transform: rotate3d(0,1,0,-10deg) rotate(2deg);
  animation: float-main 7s ease-in-out infinite;
  transition: transform var(--dur-med) var(--ease-soft);
}
.motif-stage:hover .motif-card { transform: rotate3d(0,1,0,-3deg) rotate(1deg) scale(1.02); }
.motif-card svg { width: 58%; height: 58%; color: var(--gold-300); opacity: .85; }
.motif-card-photo { overflow: hidden; }
.motif-card-photo picture { display: block; width: 100%; height: 100%; }
.motif-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motif-card-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,14,23,0) 50%, rgba(10,14,23,.9) 100%);
}
.motif-card .motif-badge {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2;
  background: var(--cream-50); color: var(--navy-950); border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-card);
  white-space: nowrap;
}

/* ── PRODUCT CAROUSEL (horizontal, arrows + dots + drag + mobile peek) ─── */
.carousel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.carousel-controls { display: flex; gap: 10px; }
/* Pre-launch audit fix (repair all carousels): interactions.js hides
   arrows/dots entirely (not just :disabled) when every card already fits
   the viewport, via the standard `hidden` attribute -- but the browser's
   own default `[hidden] { display: none }` UA rule is overridden by the
   `display: flex` author rules above/below (author styles always win over
   user-agent defaults, even at equal specificity), so [hidden] alone was
   silently doing nothing here. Scoped overrides, not a global [hidden]
   rule, so no unrelated hidden element elsewhere on the site is affected. */
.carousel-controls[hidden], .carousel-dots[hidden] { display: none; }
.carousel-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-light);
  background: var(--cream-50); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-soft); color: var(--navy-950);
}
.carousel-btn:hover:not(:disabled) { background: var(--navy-950); color: var(--cream-100); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.carousel-btn:disabled { opacity: .32; cursor: not-allowed; }
.theme-dark .carousel-btn { background: transparent; border-color: var(--line-on-dark-strong); color: var(--cream-100); }
.theme-dark .carousel-btn:hover:not(:disabled) { background: var(--gold-300); color: var(--navy-950); }

.carousel-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel-track { display: flex; gap: var(--space-4); padding-block: 6px 10px; list-style: none; margin: 0; }
.carousel-track .product-card { scroll-snap-align: start; flex: 0 0 auto; width: min(320px, 78vw); }

.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-4); }
.carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border-light); cursor: pointer; padding: 0; transition: all var(--dur-med) var(--ease-soft); }
.theme-dark .carousel-dots button { background: var(--line-on-dark-strong); }
.carousel-dots button[aria-current="true"] { width: 26px; border-radius: var(--radius-pill); background: var(--gold-500); }

/* ── SELECTOR ("Find your reading" — radio-tabs, works without JS) ─────── */
.selector { background: var(--cream-100); border-radius: var(--radius-xl); padding: var(--space-6); position: relative; }
.selector-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.selector-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.selector-choices label {
  cursor: pointer; padding: 12px 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-light); font-size: .92rem; font-weight: 600;
  transition: all var(--dur-fast) var(--ease-soft); background: var(--cream-50);
}
.selector-choices label:hover { border-color: var(--gold-500); }
.selector:has(#sel-1:checked) .selector-choices label[for="sel-1"],
.selector:has(#sel-2:checked) .selector-choices label[for="sel-2"],
.selector:has(#sel-3:checked) .selector-choices label[for="sel-3"],
.selector:has(#sel-4:checked) .selector-choices label[for="sel-4"],
.selector:has(#sel-5:checked) .selector-choices label[for="sel-5"],
.selector:has(#sel-6:checked) .selector-choices label[for="sel-6"] {
  background: var(--navy-950); color: var(--cream-100); border-color: var(--navy-950);
}
.selector:has(#sel-1:focus-visible) label[for="sel-1"],
.selector:has(#sel-2:focus-visible) label[for="sel-2"],
.selector:has(#sel-3:focus-visible) label[for="sel-3"],
.selector:has(#sel-4:focus-visible) label[for="sel-4"],
.selector:has(#sel-5:focus-visible) label[for="sel-5"],
.selector:has(#sel-6:focus-visible) label[for="sel-6"] {
  outline: 2px solid var(--gold-600); outline-offset: 2px;
}
.selector-panels { position: relative; margin-top: var(--space-5); }
#sel-1:checked ~ .selector-panels #sel-panel-1,
#sel-2:checked ~ .selector-panels #sel-panel-2,
#sel-3:checked ~ .selector-panels #sel-panel-3,
#sel-4:checked ~ .selector-panels #sel-panel-4,
#sel-5:checked ~ .selector-panels #sel-panel-5,
#sel-6:checked ~ .selector-panels #sel-panel-6 { display: grid; animation: panel-in var(--dur-3, 620ms) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── INSIDE-THE-REPORT PREVIEW GRID ──────────────────────────────────────
   Pre-launch audit fix #28 (final approved redesign, superseding fix #25's
   carousel of tall 9:14 report-page-shaped cards): a plain static grid --
   3 equal columns on desktop, 1 column on mobile -- of self-contained
   cards. Card height is driven by content (no aspect-ratio), and CSS Grid
   row-stretch keeps all 3 cards the same height as the tallest one, so
   there's no large unused blank area. Index, motif, title and description
   all live inside the one card element -- no separate caption below it. */
.report-preview-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .report-preview-grid { grid-template-columns: repeat(3, 1fr); } }
.report-preview-card {
  background: var(--navy-900); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column;
}
.report-preview-index { font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; color: rgba(246,241,230,.45); }
.report-preview-motif { display: block; width: 52px; height: 52px; margin: var(--space-5) auto; color: var(--gold-300); opacity: .85; }
.report-preview-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--cream-100); }
.report-preview-desc { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: rgba(246,241,230,.7); }

/* Preview-pending — full-width, same section scale as the real report
   preview carousel, used only where no real report exists yet. */
.preview-pending-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4); padding: var(--space-7) var(--space-5);
  background: var(--cream-100); border-radius: var(--radius-xl);
}
.preview-pending-panel svg { width: 96px; height: 96px; color: var(--gold-500); opacity: .6; }
.preview-pending-panel h3 { font-size: var(--fs-h3); }
.preview-pending-panel p { max-width: 52ch; color: var(--ink-700); font-size: 1.05rem; }

/* ── METHODOLOGY (visual, not tiny cards) ───────────────────────────── */
/* Pre-launch audit fix #9: grid-template-columns changed from a hardcoded
   repeat(3, 1fr) to auto-fit -- this class is exclusively used by the
   standalone Methodology page (verified: no other template references
   .method-grid/.method-item/.method-index), which now groups Big Five +
   DISC together (2 items) instead of all 3 frameworks in one row, so the
   grid needs to size itself to however many items are actually inside
   rather than always assuming 3. */
.method-grid { display: grid; gap: var(--space-5); margin-top: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 820px) { .method-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.method-item { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--border-light); }
.method-icon { width: 52px; height: 52px; color: var(--gold-600); margin-bottom: var(--space-3); }
.method-item h3 { font-size: 1.3rem; }
.method-item p { margin-top: 10px; color: var(--ink-700); font-size: .95rem; }
.method-index { position: absolute; top: -.15em; right: 0; font-family: var(--font-display); font-size: 3.4rem; color: var(--border-light); z-index: -1; }

/* Methodology page layer sections (pre-launch audit fix #9): each of the
   three layers (scientific / synthesis / symbolic) gets its own .section,
   using the SAME light/dark alternation already established elsewhere on
   the site (e.g. howItWorks/faq use a light cream background, report-
   preview/related use the dark navy .theme-dark treatment) -- not a new
   visual language, just applied here to keep the scientific layer visually
   distinct from the symbolic one, per the approved brief. */
.methodology-layer-note { margin-top: var(--space-4); max-width: 62ch; }
.methodology-not-claim { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: 62ch; }
.methodology-not-claim li { padding-left: 22px; position: relative; }
.methodology-not-claim li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); }

.trust-banner {
  margin-top: var(--space-7); display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: 1fr; background: var(--navy-950); color: var(--cream-100);
  border-radius: var(--radius-xl); padding: var(--space-6); position: relative; overflow: hidden;
}
@media (min-width: 860px) { .trust-banner { grid-template-columns: 1.2fr .8fr; } }
.trust-banner h3 { font-size: var(--fs-h3); max-width: 24ch; }
.trust-banner p { margin-top: var(--space-3); color: rgba(246,241,230,.68); max-width: 52ch; }
/* Pre-launch audit fix ("remove the Trust Center price pill"): modifier
   on the same .trust-banner card used by the Personal Portrait
   methodology section's "Trust Center" note -- the base .trust-banner
   1.2fr/.8fr split above (text + price chip) is for the UNRELATED usage
   still live on home.js, and must stay untouched there. This modifier
   only widens the disclaimer text column back to the full card width now
   that its price-chip column is gone, and lifts the text's own max-width
   cap so it can actually use the freed space rather than staying pinned
   to its old (narrower) column width. */
@media (min-width: 860px) { .trust-banner-full { grid-template-columns: 1fr; } }
.trust-banner-full h3, .trust-banner-full p { max-width: none; }
.trust-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.trust-stats div { text-align: center; padding: var(--space-4) var(--space-2); border-radius: var(--radius-md); background: rgba(246,241,230,.05); border: 1px solid var(--line-on-dark); }

/* ── UNDERSTAND BLOCK (pre-launch audit fix #19, Personal Portrait only) ─
   .understand-banner is a modifier on the existing .trust-banner card --
   same dark card, same padding/radius -- it only overrides the OUTER
   grid back to a single column (the base .trust-banner 1.2fr/.8fr desktop
   split is for the unrelated text+price-chip layout used elsewhere on
   this page and on home.js, and must stay untouched there). Inside, the
   small heading sits on its own full-width row, then .understand-columns
   splits the approved copy's own <p> tags into a balanced two-column
   row on desktop and stacks them on mobile/narrow tablet. */
.trust-banner.understand-banner { align-items: start; }
@media (min-width: 860px) { .trust-banner.understand-banner { grid-template-columns: 1fr; } }
.understand-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-6); }
@media (min-width: 860px) { .understand-columns { grid-template-columns: 1fr 1fr; } }
.understand-columns p { margin: 0; max-width: 48ch; color: rgba(246,241,230,.72); line-height: 1.65; }
/* One locale's approved answer (ET) is a single combined paragraph rather
   than two -- grid-column:1/-1 lets it span the full row instead of
   leaving an empty second column, and column-count splits that one
   paragraph into two reading-width sub-columns on desktop (same visual
   balance as the two-paragraph case) without capping it to a narrow
   max-width, which would just recreate a smaller version of the original
   "empty space on the right" problem this fix addresses. Mobile/narrow
   tablet keeps it as one natural-width paragraph -- already comfortable
   at that viewport width. */
.understand-columns p:only-child { grid-column: 1 / -1; max-width: none; }
@media (min-width: 860px) { .understand-columns p:only-child { column-count: 2; column-gap: var(--space-6); } }

/* ── TRUST CENTER info cards (pre-launch audit fix #21, Trust Center only)
   Compact 2x2 editorial grid on desktop, one card per row on mobile/
   narrow tablet -- same restrained card treatment as .testimonial-card
   (plain surface, no icons/badges/photos). */
.trust-info-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .trust-info-grid { grid-template-columns: 1fr 1fr; } }
.trust-info-card { background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-5); }
.trust-info-card h3 { font-size: 1.25rem; }
.trust-info-card p { margin-top: var(--space-3); color: var(--ink-700); line-height: 1.6; }
.trust-info-card ul { margin-top: var(--space-2); padding-left: 20px; color: var(--ink-700); line-height: 1.6; }
.trust-info-card a { color: var(--gold-700); }

/* ── TESTIMONIALS (pre-launch audit fix #18, Personal Portrait only) ────
   One shared markup structure for both breakpoints: the grid alone
   reflows from 1 column (mobile) to a 2x2 grid (desktop) -- no separate
   desktop/mobile markup. Restrained: plain surface-card, no photos, no
   ratings, no oversized decorative quotation marks. */
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-2); }
@media (min-width: 700px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
.testimonial-card {
  margin: 0; background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.testimonial-card p { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-700); }
.testimonial-card cite { margin-top: auto; font-style: normal; font-size: var(--fs-small); font-weight: 600; color: var(--gold-700); }
.trust-stats .num { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-300); }
.trust-stats .lbl { font-size: .72rem; color: rgba(246,241,230,.55); margin-top: 4px; letter-spacing: .03em; }

/* ── STICKY CTA (thin, unobtrusive) ─────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: rgba(10,14,23,.92); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(193,154,78,.14);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
/* Pre-launch audit fix: reserve exactly the sticky CTA's own measured
   height (set live by interactions.js as --sticky-cta-height, includes
   its own env(safe-area-inset-bottom) padding automatically) as bottom
   padding on <body> -- but ONLY while it's actually visible, so pages
   where it never appears (or before it becomes visible) get zero extra
   space. This pushes the footer/order-form/legal text at the true bottom
   of the page up by the CTA's own height, so the fixed bar never
   overlaps them, whatever that height happens to be on a given page or
   breakpoint. */
body.has-sticky-cta-visible { padding-bottom: var(--sticky-cta-height, 0px); }
/* scroll-padding-bottom informs the browser's OWN native scroll-into-view
   behavior (scrollIntoView(), and the auto-scroll that happens when a
   focused form field/button is off-screen -- e.g. a keyboard user tabbing
   through the order form) that the bottom `--sticky-cta-height` of the
   viewport is not usable space, so it never lands a scrolled-to/focused
   element exactly where the fixed bar would cover it. Set on <html>, the
   actual scrolling element for this document (padding-bottom above stays
   on <body> -- the standard place to extend a document's scrollable
   content area). Applied as soon as the page HAS a sticky CTA at all
   (not gated to .is-visible like the body padding is) -- this property
   only affects where a scroll target lands, it never renders visible
   space, so there is no "excessive empty space" concern here. Gating it
   to visibility caused a real bug: on shorter pages the scroll that
   first reveals the order form is the same scroll that first triggers
   the CTA, so the visibility class hadn't been added yet at the moment
   the browser computed the landing position. */
html.has-sticky-cta { scroll-padding-bottom: var(--sticky-cta-height, 0px); }
/* Pre-launch audit fix #12: same reasoning as scroll-padding-bottom above,
   applied to the top side -- the sticky .site-header would otherwise cover
   the top of any anchor-jump target (#order, reached via the header CTA,
   hero CTA or sticky CTA). --header-height is measured live by
   interactions.js, so it self-adjusts to the header's real rendered height
   on any breakpoint/locale. Applied unconditionally (every page has a
   header), not gated to any class. */
html { scroll-padding-top: var(--header-height, 0px); }
/* Single CTA, no separate price/label — the button copy already carries
   the price ("Order Personal Portrait — $19"), a second price chip next
   to it was a redundant repetition. */
.sticky-cta-inner { max-width: var(--container-max); margin-inline: auto; padding: 10px var(--space-4); }
.sticky-cta .btn { min-height: 44px; font-size: .92rem; }

/* ── PRODUCT PAGE: hero tabs, order panel ───────────────────────────── */
.pp-hero-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .pp-hero-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.pp-tabs { display: flex; gap: 8px; margin-top: var(--space-5); flex-wrap: wrap; }
.pp-tab-btn {
  border: 1px solid var(--line-on-dark-strong); background: rgba(246,241,230,.06); color: var(--cream-100);
  border-radius: var(--radius-pill); padding: 9px 16px; font-size: .82rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: all var(--dur-fast);
}
.pp-tab-btn:hover { border-color: var(--gold-300); color: var(--gold-300); }

.order-panel { background: var(--navy-950); color: var(--cream-100); border-radius: var(--radius-xl); padding: var(--space-6); position: relative; overflow: hidden; }
.order-panel-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; position: relative; z-index: 1; }
@media (min-width: 900px) { .order-panel-grid { grid-template-columns: 1fr 1fr; } }
.order-price-block { display: flex; align-items: baseline; gap: 10px; margin-top: var(--space-3); }
.order-price-block .amount { font-family: var(--font-display); font-size: 3.2rem; color: var(--gold-300); }
.order-checklist { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 10px; }
.order-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: rgba(246,241,230,.78); }
.order-checklist svg { width: 18px; height: 18px; color: var(--gold-300); flex-shrink: 0; margin-top: 2px; }

/* ── COMPARISON TABLE (desktop/tablet only — unchanged) ─────────────────
   Its own min-width (720px) plus the .container side padding (2 × --space-4
   = 48px) needs >= 768px to fit without horizontal scrolling -- verified
   directly (table renders at exactly 720px inside 720px of available
   content width at a 768px viewport, zero overflow). 768px is the classic
   tablet breakpoint and is used as the swap point here. Below that,
   .compare-cards (below) is shown instead — never both at once, see the
   display:none pair below, so there is exactly one accessible copy of
   this content at any width. */
.compare-scroll { overflow-x: auto; }
@media (max-width: 767.98px) { .compare-scroll { display: none; } }
.compare-table { border-collapse: collapse; width: 100%; min-width: 720px; }
.compare-table th, .compare-table td {
  text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border-light);
  vertical-align: top; font-size: var(--fs-small);
}
.compare-table th { font-family: var(--font-display); font-size: 1rem; font-weight: 500; }
.compare-table td:first-child, .compare-table th:first-child { font-weight: 600; }

/* ── COMPARISON CARDS (mobile only — pre-launch audit fix) ───────────────
   Replaces the table below 768px: same per-product data (see compare.js),
   one card per report, no horizontal scrolling. Whole card is one real
   link (.compare-card-linkover) rather than a separate nested button, so
   there's exactly one focusable/interactive element per card; the visible
   "Choose this report" pill is decorative (aria-hidden) and the link's own
   aria-label carries the unambiguous accessible name. */
.compare-cards { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .compare-cards { display: none; } }
.compare-card {
  position: relative; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--surface-card);
}
.compare-card-linkover { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.compare-card-title { margin: 0 0 6px; font-size: 1.05rem; overflow-wrap: break-word; }
.compare-card-for { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--ink-700); overflow-wrap: break-word; }
.compare-card-for .eyebrow { margin-right: 6px; }
.compare-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.compare-card-price { font-family: var(--font-display); font-size: 1.2rem; }
.compare-card-cta { pointer-events: none; }

/* ── RELATED / CTA BAND ──────────────────────────────────────────────── */
.related-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cta-band {
  background: var(--navy-950); color: var(--cream-100);
  border-radius: var(--radius-lg); padding: var(--space-6);
  text-align: center; display: grid; gap: var(--space-3); justify-items: center;
}
.cta-band h2 { color: var(--cream-100); }

/* ── FOOTER (pre-launch audit fix #14) ──────────────────────────────────
   Compact three-column structure (brand / Explore / Trust & Legal) at
   >=768px (this site's established mobile/desktop split -- matches
   tokens.css's own @media (max-width: 640px) compression breakpoint, with
   768-1023px treated as the same "compact columns" desktop layout since
   three narrow columns already fit comfortably at tablet width). Below
   that, brand/tagline/email stack first, then Explore and Trust & Legal
   each become their own accordion (native <details>/<summary>, the same
   accessible disclosure pattern already used by .faq-item and
   .method-modern-item elsewhere on this site) so link lists never render
   as one dense inline row. Dark navy / warm cream / muted gold only -- no
   star fields, icons or decorative badges. */
.site-footer { background: var(--navy-950); color: var(--cream-300); padding-block: var(--space-5); }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.footer-col-brand { display: grid; gap: var(--space-2); align-content: start; }
.footer-col-brand .brand-mark { font-size: 1rem; color: var(--cream-100); }
.footer-col-brand .brand-mark svg { width: 20px; height: 20px; }
.footer-tagline { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--cream-300); max-width: 42ch; }
.footer-email { color: var(--cream-100); text-decoration: none; font-size: var(--fs-small); line-height: 1.6; }
.footer-email:hover { color: var(--gold-300); text-decoration: underline; }
.footer-email-label { color: var(--cream-500); }

/* Explore / Trust & Legal columns -- native <details>, always rendered
   `open` in markup so content is never lost if JS fails to load; JS only
   adds aria-expanded syncing and forces `open` back on above the mobile
   breakpoint (see interactions.js) so a link tapped closed on a phone
   doesn't stay collapsed after rotating to a wider viewport. */
.footer-accordion { border: none; }
.footer-col-heading {
  color: var(--gold-300); font-size: var(--fs-small); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--space-3); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.footer-col-heading::-webkit-details-marker { display: none; }
.footer-accordion-chevron { color: var(--gold-300); transition: transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.footer-accordion[open] .footer-accordion-chevron { transform: rotate(180deg); }
.footer-accordion-body ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.footer-accordion-body a { color: var(--cream-100); text-decoration: none; font-size: var(--fs-small); line-height: 1.6; }
.footer-accordion-body a:hover { color: var(--gold-300); text-decoration: underline; }

.footer-bottom {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-micro); color: var(--cream-500);
  /* Own safe-area floor independent of the sticky CTA (whose height, when
     present, already pushes this via body.has-sticky-cta-visible's
     padding-bottom -- see below), so the copyright line still clears a
     phone's home-indicator on pages with no sticky CTA at all. */
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
  .footer-col-heading { cursor: default; pointer-events: none; }
  .footer-accordion-chevron { display: none; }
}
@media (max-width: 767px) {
  .footer-col-heading { cursor: pointer; padding-block: var(--space-2); }
  .footer-accordion { border-top: 1px solid var(--line-on-dark); padding-block: var(--space-2); }
  .footer-col-brand { padding-bottom: var(--space-3); }
}

/* ── FORM (order / contact) ─────────────────────────────────────────── */
.field { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .helper { font-size: var(--fs-micro); color: var(--ink-500); }
.field input, .field select, .field textarea {
  font: inherit; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-light-strong); background: var(--surface-card);
  min-height: 44px; width: 100%; box-sizing: border-box;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-950); }
.form-error { display: none; color: var(--danger); font-size: var(--fs-small); margin-bottom: var(--space-3); }
.form-error.visible { display: block; }

/* Order-panel forms specifically (Personal Portrait's #order-form and the
   Gift/assessment #additional-order-form) sit on the dark .order-panel
   background, unlike a plain light-surface .field elsewhere -- this label/
   helper color pair was previously ~10 literal, hand-duplicated inline
   style="color:..." strings spread across both order-form templates (pre-
   launch audit fix "unify the visual form system"); now one shared rule,
   so the two forms' typography can't silently drift the way their legal-
   text color already had (.75 vs .6 opacity -- unified to .75 below). */
.order-panel .field label { color: var(--cream-100); }
.order-panel .field .helper { color: rgba(246,241,230,.6); }

/* Shared consent/legal-block styling. Personal Portrait's marketing-consent
   checkbox+label and the Gift/assessment forms' plain disclosure paragraph
   (.legal-line) are deliberately DIFFERENT markup -- they collect different
   things and one is a real opt-in, the other isn't (consent meaning is out
   of scope to change) -- but both now share one typography/color/spacing
   treatment instead of two independently hand-tuned inline-style blocks. */
.order-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-4); }
.order-consent input[type="checkbox"] { min-height: auto; width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.order-consent label, .order-panel .legal-line {
  font-weight: 400; font-size: var(--fs-small); color: rgba(246,241,230,.75); line-height: var(--lh-body);
}
.order-consent label { margin: 0; }
.order-panel .legal-line { margin: 0 0 var(--space-4); }
.form-card { background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }

/* ── TRUST / LOGOS STRIP ─────────────────────────────────────────────── */
.trust-strip { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.trust-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.trust-item .icon { color: var(--gold-600); flex-shrink: 0; }

/* ── UTILS ───────────────────────────────────────────────────────────── */
.theme-dark { background: var(--surface-dark); color: var(--cream-100); }
.theme-dark h2, .theme-dark h3 { color: var(--cream-100); }
.text-muted { color: var(--ink-500); }
.mt-0 { margin-top: 0; }
.stack { display: grid; gap: var(--space-4); }
.center { text-align: center; }

/* ── RECOMMENDED-PRODUCT PANEL (selector result) ─────────────────────── */
.recommended-panel {
  display: none; grid-template-columns: 1fr; gap: var(--space-5); align-items: center;
  padding: var(--space-5); border-radius: var(--radius-lg); background: var(--navy-950); color: var(--cream-100);
}
@media (min-width: 760px) { .recommended-panel { grid-template-columns: auto 1fr auto; } }
.recommended-visual {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(closest-side, var(--gold-glow), var(--navy-900) 75%);
  border: 1px solid rgba(246,241,230,.18);
}
.recommended-visual picture { display: block; width: 100%; height: 100%; }
.recommended-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recommended-body .eyebrow { display: flex; align-items: center; gap: 8px; }
.recommended-body h3 { margin-top: 8px; font-size: 1.5rem; }
.recommended-body p { margin-top: 8px; color: rgba(246,241,230,.72); max-width: 56ch; }
.recommended-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
@media (min-width: 760px) { .recommended-actions { align-items: flex-end; } }
.recommended-status { font-size: .78rem; color: rgba(246,241,230,.55); text-align: center; }

/* ── BENEFIT ICON GRID ("what you receive") ──────────────────────────── */
.benefit-icon-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.benefit-icon-item { display: flex; align-items: center; gap: 14px; padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.benefit-icon-item svg { width: 30px; height: 30px; color: var(--gold-600); flex-shrink: 0; }
.benefit-icon-item span { font-size: 1rem; font-weight: 600; }

/* ── COMPACT METHODOLOGY MODULE (Big Five / DISC / Symbolic layer) ───────
   Replaces the old overlapping Venn diagram. Pre-launch audit fix ("fix
   the Personal Portrait methodology section"): previously a native
   <details>/<summary> accordion (only card 1 open by default on mobile,
   and desktop's "force every item open" override didn't reliably work in
   current Chrome — see the render.js comment on renderMethodologyModule).
   Now plain, always-visible cards at every width: mobile stacks all 3
   full-width with their descriptions already showing; desktop shows all
   3 as equal connected columns. No collapsed state exists anymore. ───── */
.method-modern-grid { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 820px) { .method-modern-grid { grid-template-columns: repeat(3, 1fr); } }
.method-modern-item { background: var(--surface-card); }
.method-modern-summary {
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.method-modern-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-900); }
.method-modern-tag { font-size: var(--fs-micro); color: var(--ink-500); text-align: right; }
.method-modern-body { padding: 0 var(--space-4) var(--space-4); color: var(--ink-700); font-size: var(--fs-small); }
.method-modern-body p + p, .method-modern-body h4 { margin-top: 10px; }
@media (min-width: 820px) {
  .method-modern-summary { flex-direction: column; align-items: flex-start; gap: 4px; }
  .method-modern-tag { text-align: left; }
}

/* ── COMPACT TRUST CHIP (replaces the $19 / ~15m stat-block pair — the
   "~15m typical delivery" figure was an unverified claim, dropped). ─────── */
.trust-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(246,241,230,.06); border: 1px solid var(--line-on-dark); white-space: nowrap; }
.trust-chip .amount { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-300); }
.trust-chip .lbl { font-size: .8rem; color: rgba(246,241,230,.65); }