/* DateNWed: landing page stylesheet ("Plum Hour").
 *
 * Linked AFTER base.css on the landing page only (served at /static/css/landing.css).
 * base.css keeps owning the auth-aware landing contract, the layout shell and the
 * shared header accent carriers; this file re-values its design tokens and styles
 * the marketing sections. It never defines --site-accent-fill / --site-accent-glow
 * (base.css is their only home, and a test pins that).
 *
 * Rules this file keeps (CLAUDE.md, DEV_GUIDE):
 *   - rem / em / % / vw only. Not one pixel unit. Hairlines are 0.0625rem.
 *   - No inline style, no inline script; this is the page's only stylesheet of its own.
 *   - Dark is the default (D13); light and system are selectable (landing.js).
 *   - Text uses --brand-ink / --accent-ink, never the raw brand colours
 *     (raw primary is 3.5:1 on the dark page, raw accent 1.5:1 on the light page).
 *   - Targets are 2.75rem or larger; focus is a visible outline; motion stops under
 *     prefers-reduced-motion.
 *
 * Contents
 *   1 tokens        2 page + type      3 header + buttons   4 hero + art + stars
 *   5 section kit   6 problem          7 belief             8 AstroMatch
 *   9 how it works  10 journey         11 trust             12 closing call
 *   13 footer       14 signed-in hero  15 breakpoints       16 motion
 */

/* ---------------------------------------------------------------- 1. tokens ---
 * Plum Hour is the decided palette (brand-palette.md 3.1 and 5.4). The three hexes
 * below equal site.json theme; when site.json is updated they belong in base.css
 * (the file the scaffolder keeps in sync), and these three lines can go. */
:root {
  color-scheme: dark;

  --color-primary: #9050a3;
  --color-secondary: #2b1a3d;
  --color-accent: #f2c78e;

  /* surfaces and text: dark is the default */
  --ink-0: #120d18;  --ink-1: #1b1424;  --ink-2: #271d33;
  --line: #3b2d4a;   --line-strong: #8d7b9e;
  --text-hi: #f6f1f9;  --text-mid: #d0c4db;  --text-low: #a898b8;

  /* brand roles */
  --color-on-brand: #ffffff;
  --brand-fill: var(--color-primary);
  --brand-fill-hover: #7f468f;
  --brand-fill-active: #734082;
  --brand-ink: #c5a4cf;
  --brand-ink-hover: #cdb1d6;
  --brand-strong: #ab7ab9;
  --focus: var(--brand-strong);
  --accent-ink: #f2c78e;
  --brand-tint: color-mix(in srgb, var(--color-primary) 14%, transparent);

  --glow-1: 26%;
  --glow-2: 22%;
  --glow-2-hue: var(--color-secondary);

  /* this page */
  --card-bg: linear-gradient(165deg, color-mix(in srgb, var(--ink-2) 78%, transparent), color-mix(in srgb, var(--ink-1) 94%, transparent));
  --card-edge: inset 0 0.0625rem 0 color-mix(in srgb, #ffffff 7%, transparent);
  --card-shadow: 0 1.5rem 3rem -1.75rem rgba(0, 0, 0, 0.65);
  --tint-bg: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-primary) 9%, transparent) 30%, color-mix(in srgb, var(--color-primary) 9%, transparent) 70%, transparent);
  --footer-bg: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-secondary) 55%, transparent));
  --star: color-mix(in srgb, #ffffff 62%, transparent);
  --star-bright: #ffffff;
  --art-line: color-mix(in srgb, #e3d2ee 46%, transparent);
  --art-gold: #f2c78e;
  --art-plum: #ab7ab9;
  --gem-facet: #120d18;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-card: 1.5rem;
  --radius-panel: 2rem;

  /* OTROTL network trigger tint (SHARED_NETWORK_OVERLAY reads these; this sheet is linked after its
     sheet, so these win by source order). The gold reads through --accent-ink: dark gold on light. */
  --otrotl-trigger-accent: var(--accent-ink);
  --otrotl-trigger-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --otrotl-trigger-accent-ring: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

:root[data-theme="light"] {
  color-scheme: light;

  --ink-0: #fbf8fc;  --ink-1: #ffffff;  --ink-2: #f3edf6;
  --line: #ddd2e5;   --line-strong: #7a6889;
  --text-hi: #1d1426;  --text-mid: #4b3d59;  --text-low: #665675;

  --brand-ink: #764286;
  --brand-ink-hover: #653973;
  --brand-strong: #9050a3;
  --accent-ink: #7f5920;

  --glow-1: 10%;
  --glow-2: 8%;
  --glow-2-hue: var(--color-primary);

  --card-bg: linear-gradient(165deg, #ffffff, color-mix(in srgb, var(--ink-2) 55%, #ffffff));
  --card-edge: inset 0 0.0625rem 0 #ffffff;
  --card-shadow: 0 1.5rem 3rem -1.75rem rgba(70, 36, 92, 0.35);
  --tint-bg: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-primary) 7%, transparent) 30%, color-mix(in srgb, var(--color-primary) 7%, transparent) 70%, transparent);
  --footer-bg: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-primary) 10%, transparent));
  --star: color-mix(in srgb, var(--color-primary) 38%, transparent);
  --star-bright: color-mix(in srgb, var(--color-primary) 70%, transparent);
  --art-line: color-mix(in srgb, #5a3a6e 52%, transparent);
  --art-gold: #7f5920;
  --art-plum: #9050a3;
  --gem-facet: #fbf8fc;
}

/* A dark "night" island: used by the journey band and the closing call, in BOTH
 * themes, so they stay a deliberate dark panel on the light page. It re-states the
 * dark token values for everything inside it. */
.lp-night {
  color-scheme: dark;
  --ink-0: #120d18;  --ink-1: #1b1424;  --ink-2: #271d33;
  --line: #3b2d4a;   --line-strong: #8d7b9e;
  --text-hi: #f6f1f9;  --text-mid: #d0c4db;  --text-low: #a898b8;
  --brand-ink: #c5a4cf;  --brand-ink-hover: #cdb1d6;  --brand-strong: #ab7ab9;  --focus: #ab7ab9;
  --accent-ink: #f2c78e;
  --brand-tint: color-mix(in srgb, #9050a3 14%, transparent);
  --star: color-mix(in srgb, #ffffff 62%, transparent);
  --star-bright: #ffffff;
  --card-bg: linear-gradient(165deg, color-mix(in srgb, #271d33 78%, transparent), color-mix(in srgb, #1b1424 94%, transparent));
  --card-edge: inset 0 0.0625rem 0 color-mix(in srgb, #ffffff 7%, transparent);
  background:
    radial-gradient(48rem 26rem at 50% -10%, color-mix(in srgb, #9050a3 42%, transparent), transparent 70%),
    linear-gradient(165deg, #34204a 0%, #1f1530 52%, #150f1d 100%);
  color: var(--text-mid);
}

/* ---------------------------------------------------------- 2. page + type --- */
html { scroll-padding-top: 5rem; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-mid);
  background:
    radial-gradient(70rem 40rem at 82% -6%, color-mix(in srgb, var(--color-primary) var(--glow-1), transparent), transparent 70%),
    radial-gradient(52rem 34rem at 4% 6%, color-mix(in srgb, var(--glow-2-hue) var(--glow-2), transparent), transparent 68%),
    var(--ink-0);
  overflow-x: hidden;
}

a { color: var(--brand-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--brand-ink-hover); }

/* an outline, not a box-shadow, so forced-colour modes keep it */
:focus-visible { outline: 0.1875rem solid var(--focus); outline-offset: 0.125rem; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 100;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  border: 0.125rem solid var(--focus); border-radius: 0.75rem;
  background: var(--ink-1); color: var(--text-hi); font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:hover { color: var(--text-hi); }
.skip-link:focus { top: 1rem; }

/* ----------------------------------------------------- 3. header + buttons --- */
.site-header { background: color-mix(in srgb, var(--ink-0) 80%, transparent); }
.nav { gap: 1rem; padding: 0.65rem 0; }

.brand {
  gap: 0.6rem; min-height: 2.75rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem;
  letter-spacing: -0.015em; color: var(--text-hi);
}
.brand:hover { color: var(--text-hi); }
.brand-n { color: var(--accent-ink); font-style: italic; }
.brand-mark {
  width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; flex: none;
  background: linear-gradient(150deg, var(--color-primary), var(--color-secondary));
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.16), 0 0.5rem 1.4rem -0.55rem color-mix(in srgb, var(--color-primary) 80%, transparent);
  color: #ffffff;
}
.brand-mark svg { width: 1.85rem; height: 1.85rem; }
.brand-gem { fill: var(--color-accent); stroke: none; }

.nav-links { gap: 0.25rem 0.5rem; }
.nav-links a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem;
  border-radius: 0.75rem; font-size: 0.9rem; font-weight: 500; color: var(--text-mid);
}
.nav-links a:not(.btn):hover { color: var(--text-hi); background: var(--brand-tint); }
.nav-cta, .nav-group { gap: 0.5rem; }
.nav-group .auth-identity { padding: 0.25rem 0.6rem; min-height: 2.75rem; }

/* The landing page's header (`.nav--zones`, frontend/index.html) follows the fleet standard, DOCS
 * NEW_WEBSITE_BUILD/LANDING_HEADER_STANDARD.md (ratified 2026-10-23): three zones on one grid row.
 * Start: the network trigger, the brand and the Beta badge. Middle: the primary links, wide screens
 * only. End: the auth cluster, the theme toggle and the menu button. Section 15 holds its ONE collapse
 * point. The other pages' header copies are still the older single flex row with width bands; they
 * move to this layout in their own PRs. */
.nav.nav--zones { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; }
.nav--zones .nav-start {
  display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 0.5rem; position: relative;
}
.nav--zones .nav-start > .otrotl-network-trigger { grid-column: 1; grid-row: 1; margin-left: 0; }
.nav--zones .nav-start > .brand { grid-column: 2; grid-row: 1; }
.nav--zones .nav-start > .beta-badge--nav { grid-column: 3; grid-row: 1; margin-left: 0; }
.nav--zones .nav-links { margin-left: 0; flex-wrap: nowrap; min-width: 0; }
.nav--zones .nav-links--primary { grid-column: 2; justify-content: flex-end; }
.nav--zones .nav-links--end { grid-column: 3; }
.nav--zones .nav-group .auth-identity-name { max-width: 8rem; }

.btn {
  justify-content: center; min-height: 2.75rem; padding: 0.55rem 1.3rem;
  border-radius: 999rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; text-align: center; white-space: nowrap;
}
.btn-lg { min-height: 3.25rem; padding: 0.8rem 1.9rem; font-size: 1rem; white-space: normal; }

a.btn.btn-primary {
  --btn-fg: var(--color-on-brand);
  color: var(--btn-fg);
  background: linear-gradient(135deg, var(--brand-fill), var(--brand-fill-hover));
  box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.22), 0 0.75rem 1.75rem -0.8rem color-mix(in srgb, var(--color-primary) 85%, transparent);
}
a.btn.btn-primary:hover {
  color: var(--btn-fg);
  background: linear-gradient(135deg, var(--brand-fill-hover), var(--brand-fill-active));
  box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.22), 0 1rem 2.25rem -0.8rem color-mix(in srgb, var(--color-primary) 95%, transparent);
}
a.btn.btn-primary:active { background: var(--brand-fill-active); transform: none; }

a.btn.btn-ghost {
  --btn-bd: var(--brand-strong);
  color: var(--brand-ink);
  background: transparent;
}
a.btn.btn-ghost:hover { color: var(--brand-ink-hover); background: var(--brand-tint); border-color: var(--brand-strong); }

.btn i { font-size: 0.95em; }

.theme-toggle {
  display: none; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0; margin-left: 0.15rem;
  border: 0.0625rem solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--brand-ink); font-size: 1rem; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
html.js .theme-toggle { display: inline-grid; }
.theme-toggle:hover { background: var(--brand-tint); color: var(--brand-ink-hover); }
.theme-toggle [data-theme-icon] { display: none; }
html[data-theme-pref="system"] .theme-toggle [data-theme-icon="system"],
html[data-theme-pref="light"] .theme-toggle [data-theme-icon="light"],
html[data-theme-pref="dark"] .theme-toggle [data-theme-icon="dark"] { display: inline-block; }

/* The menu button, styled like the theme toggle. Shown only once script runs (html.js), because
 * /static/js/landing-menu.js is what opens #site-menu, and only below the collapse point (section 15). */
.nav-menu-btn, .site-menu__close {
  display: none; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0.0625rem solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--brand-ink); font-size: 1rem; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-menu-btn { margin-left: 0.15rem; }
html.js .nav-menu-btn, .site-menu__close { display: inline-grid; }
.nav-menu-btn:hover, .site-menu__close:hover { background: var(--brand-tint); color: var(--brand-ink-hover); }

/* The header menu, #site-menu: a native <dialog> (dnw-modal.css gives the 85vh/85dvh cap, the
 * scrolling .modal-body and the backdrop). It opens as a panel at the top right, under the header. */
dialog.site-menu { width: min(22rem, 100% - 2rem); margin: 4.5rem 1rem auto auto; }
.site-menu__panel {
  background: var(--ink-1); border: 0.0625rem solid var(--line); border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.6);
}
.site-menu__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 0.0625rem solid var(--line);
}
.site-menu__title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--text-hi); }
.site-menu__body { padding: 0.5rem; }
.site-menu__body a {
  display: block; min-height: 2.75rem; padding: 0.7rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.95rem; font-weight: 500; line-height: 1.35; color: var(--text-mid);
}
.site-menu__body a:hover { color: var(--text-hi); background: var(--brand-tint); }
/* The author rule above would beat the browser's [hidden] rule: keep gated items (Shop, Mall) hidden. */
.site-menu__body [hidden] { display: none !important; }

/* OTROTL network trigger (#otrotl-network-btn, SHARED_NETWORK_OVERLAY). Its look comes from the
 * overlay's own sheet, linked before this file; these rules tint and size it like the theme toggle.
 * The gold reads through --accent-ink, which turns to the dark gold on the light page (raw gold is
 * 1.5:1 there). The :where() rule has ZERO specificity on purpose: the overlay sheet's
 * `.otrotl-network-trigger { display: inline-flex }` beats it whenever that sheet loads, and when the
 * binding is off the sheet 404s and the button stays hidden instead of showing a control that does
 * nothing. A 503 "Network overlay unavailable" makes the overlay script hide it as well. The tint
 * tokens (--otrotl-trigger-accent*) sit in the :root block of section 1. */
:where(.otrotl-network-trigger) { display: none; }
.nav .otrotl-network-trigger {
  width: 2.75rem; height: 2.75rem; margin-left: 0.15rem;
  border-color: var(--line-strong); border-radius: 50%;
  background: transparent;
}
.nav .otrotl-network-trigger:hover {
  background: var(--otrotl-trigger-accent-soft); border-color: var(--otrotl-trigger-accent-ring);
}
.nav .otrotl-network-trigger__icon { font-size: 1rem; }

/* ----------------------------------------------- 4. hero + art + star field --- */
.lp { position: relative; }

.lp-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-stars::before,
.lp-stars::after { content: ""; position: absolute; inset: 0; }
.lp-stars::before {
  background-image:
    radial-gradient(circle at 60.8% 20.0%, var(--star) 0, var(--star) 0.066rem, transparent 0.106rem),
    radial-gradient(circle at 90.3% 33.1%, var(--star) 0, var(--star) 0.052rem, transparent 0.092rem),
    radial-gradient(circle at 41.7% 61.6%, var(--star) 0, var(--star) 0.056rem, transparent 0.096rem),
    radial-gradient(circle at 82.1% 87.4%, var(--star) 0, var(--star) 0.064rem, transparent 0.104rem),
    radial-gradient(circle at 8.2% 22.7%, var(--star) 0, var(--star) 0.060rem, transparent 0.100rem),
    radial-gradient(circle at 81.7% 11.2%, var(--star) 0, var(--star) 0.044rem, transparent 0.084rem),
    radial-gradient(circle at 13.6% 45.3%, var(--star) 0, var(--star) 0.060rem, transparent 0.100rem),
    radial-gradient(circle at 5.6% 66.9%, var(--star) 0, var(--star) 0.043rem, transparent 0.083rem),
    radial-gradient(circle at 58.4% 60.6%, var(--star) 0, var(--star) 0.046rem, transparent 0.086rem),
    radial-gradient(circle at 41.9% 66.9%, var(--star) 0, var(--star) 0.060rem, transparent 0.100rem),
    radial-gradient(circle at 47.1% 92.0%, var(--star) 0, var(--star) 0.055rem, transparent 0.095rem),
    radial-gradient(circle at 47.6% 45.9%, var(--star) 0, var(--star) 0.066rem, transparent 0.106rem),
    radial-gradient(circle at 24.9% 72.8%, var(--star) 0, var(--star) 0.046rem, transparent 0.086rem),
    radial-gradient(circle at 83.2% 68.4%, var(--star) 0, var(--star) 0.064rem, transparent 0.104rem),
    radial-gradient(circle at 11.0% 64.1%, var(--star) 0, var(--star) 0.037rem, transparent 0.077rem),
    radial-gradient(circle at 97.6% 66.5%, var(--star) 0, var(--star) 0.037rem, transparent 0.077rem),
    radial-gradient(circle at 97.7% 45.2%, var(--star) 0, var(--star) 0.070rem, transparent 0.110rem),
    radial-gradient(circle at 3.5% 89.4%, var(--star) 0, var(--star) 0.063rem, transparent 0.103rem),
    radial-gradient(circle at 94.5% 21.0%, var(--star) 0, var(--star) 0.042rem, transparent 0.082rem),
    radial-gradient(circle at 90.2% 83.5%, var(--star) 0, var(--star) 0.036rem, transparent 0.076rem),
    radial-gradient(circle at 98.8% 97.5%, var(--star) 0, var(--star) 0.045rem, transparent 0.085rem),
    radial-gradient(circle at 4.8% 29.9%, var(--star) 0, var(--star) 0.053rem, transparent 0.093rem),
    radial-gradient(circle at 46.2% 15.3%, var(--star) 0, var(--star) 0.054rem, transparent 0.094rem),
    radial-gradient(circle at 40.5% 82.8%, var(--star) 0, var(--star) 0.040rem, transparent 0.080rem),
    radial-gradient(circle at 64.1% 68.7%, var(--star) 0, var(--star) 0.059rem, transparent 0.099rem),
    radial-gradient(circle at 61.7% 63.9%, var(--star) 0, var(--star) 0.035rem, transparent 0.075rem),
    radial-gradient(circle at 44.9% 19.8%, var(--star) 0, var(--star) 0.063rem, transparent 0.103rem),
    radial-gradient(circle at 75.4% 53.6%, var(--star) 0, var(--star) 0.056rem, transparent 0.096rem),
    radial-gradient(circle at 76.9% 89.4%, var(--star) 0, var(--star) 0.068rem, transparent 0.108rem),
    radial-gradient(circle at 58.5% 28.6%, var(--star) 0, var(--star) 0.053rem, transparent 0.093rem),
    radial-gradient(circle at 34.9% 48.4%, var(--star) 0, var(--star) 0.064rem, transparent 0.104rem),
    radial-gradient(circle at 68.1% 28.2%, var(--star) 0, var(--star) 0.060rem, transparent 0.100rem),
    radial-gradient(circle at 90.0% 97.8%, var(--star) 0, var(--star) 0.048rem, transparent 0.088rem),
    radial-gradient(circle at 81.7% 82.2%, var(--star) 0, var(--star) 0.056rem, transparent 0.096rem),
    radial-gradient(circle at 73.2% 54.4%, var(--star) 0, var(--star) 0.060rem, transparent 0.100rem),
    radial-gradient(circle at 56.5% 98.9%, var(--star) 0, var(--star) 0.056rem, transparent 0.096rem),
    radial-gradient(circle at 88.8% 93.1%, var(--star) 0, var(--star) 0.059rem, transparent 0.099rem),
    radial-gradient(circle at 27.2% 23.6%, var(--star) 0, var(--star) 0.056rem, transparent 0.096rem),
    radial-gradient(circle at 33.1% 20.3%, var(--star) 0, var(--star) 0.043rem, transparent 0.083rem),
    radial-gradient(circle at 69.3% 3.0%, var(--star) 0, var(--star) 0.046rem, transparent 0.086rem),
    radial-gradient(circle at 55.7% 87.2%, var(--star) 0, var(--star) 0.051rem, transparent 0.091rem),
    radial-gradient(circle at 37.4% 44.5%, var(--star) 0, var(--star) 0.043rem, transparent 0.083rem),
    radial-gradient(circle at 35.9% 81.1%, var(--star) 0, var(--star) 0.058rem, transparent 0.098rem),
    radial-gradient(circle at 33.5% 65.8%, var(--star) 0, var(--star) 0.036rem, transparent 0.076rem),
    radial-gradient(circle at 60.4% 62.2%, var(--star) 0, var(--star) 0.042rem, transparent 0.082rem),
    radial-gradient(circle at 38.4% 37.0%, var(--star) 0, var(--star) 0.036rem, transparent 0.076rem);
}
.lp-stars::after {
  background-image:
    radial-gradient(circle at 8.5% 7.7%, var(--star-bright) 0, var(--star-bright) 0.093rem, transparent 0.133rem),
    radial-gradient(circle at 92.4% 66.3%, var(--star-bright) 0, var(--star-bright) 0.079rem, transparent 0.119rem),
    radial-gradient(circle at 97.6% 16.1%, var(--star-bright) 0, var(--star-bright) 0.099rem, transparent 0.139rem),
    radial-gradient(circle at 68.2% 56.1%, var(--star-bright) 0, var(--star-bright) 0.087rem, transparent 0.127rem),
    radial-gradient(circle at 6.5% 34.4%, var(--star-bright) 0, var(--star-bright) 0.071rem, transparent 0.111rem),
    radial-gradient(circle at 79.3% 80.0%, var(--star-bright) 0, var(--star-bright) 0.083rem, transparent 0.123rem),
    radial-gradient(circle at 69.4% 91.8%, var(--star-bright) 0, var(--star-bright) 0.094rem, transparent 0.134rem),
    radial-gradient(circle at 75.1% 19.0%, var(--star-bright) 0, var(--star-bright) 0.101rem, transparent 0.141rem),
    radial-gradient(circle at 11.4% 88.5%, var(--star-bright) 0, var(--star-bright) 0.114rem, transparent 0.154rem),
    radial-gradient(circle at 11.1% 50.7%, var(--star-bright) 0, var(--star-bright) 0.088rem, transparent 0.128rem),
    radial-gradient(circle at 33.5% 26.3%, var(--star-bright) 0, var(--star-bright) 0.086rem, transparent 0.126rem),
    radial-gradient(circle at 94.1% 66.0%, var(--star-bright) 0, var(--star-bright) 0.101rem, transparent 0.141rem),
    radial-gradient(circle at 87.2% 64.1%, var(--star-bright) 0, var(--star-bright) 0.091rem, transparent 0.131rem),
    radial-gradient(circle at 27.6% 72.6%, var(--star-bright) 0, var(--star-bright) 0.071rem, transparent 0.111rem),
    radial-gradient(circle at 37.0% 24.8%, var(--star-bright) 0, var(--star-bright) 0.073rem, transparent 0.113rem),
    radial-gradient(circle at 44.8% 17.0%, var(--star-bright) 0, var(--star-bright) 0.094rem, transparent 0.134rem);
  animation: lp-twinkle 6s ease-in-out infinite alternate;
}
.lp-hero > .lp-stars {
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
/* keep the sky out from behind the copy: a stray star beside a letter reads as punctuation */
.lp-band > .lp-stars,
.lp-final > .lp-stars {
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 55%, #000 100%);
}

.lp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 8vw, 7rem);
}
.lp-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lp-hero__copy { max-width: 40rem; }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  padding: 0.4rem 0.95rem; border: 0.0625rem solid var(--line-strong); border-radius: 999rem;
  background: color-mix(in srgb, var(--ink-1) 70%, transparent);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent-ink);
}

.lp-h1 {
  margin: 1.4rem 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.75rem, 8.4vw, 5.35rem); line-height: 1.02; letter-spacing: -0.032em;
  color: var(--text-hi); text-wrap: balance;
}
.lp-h1 em {
  font-style: italic; padding-right: 0.08em;
  color: var(--accent-ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lp-h1 em {
    background: linear-gradient(100deg, var(--accent-ink) 10%, var(--brand-ink) 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

.lp-lede {
  margin: 1.6rem 0 0; max-width: 34rem;
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem); line-height: 1.7; color: var(--text-mid);
}
.lp-lede--soft { margin-top: 0.85rem; font-size: clamp(1rem, 1.6vw, 1.0625rem); color: var(--text-low); }

.lp-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.lp-cta-row--center { justify-content: center; }
.lp-login-hint { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--text-low); }
.lp-login-hint a { display: inline-block; padding: 0.7rem 0.25rem; margin: -0.7rem 0; font-weight: 600; text-decoration: underline; }

.lp-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.lp-chips li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem; border: 0.0625rem solid var(--line); border-radius: 999rem;
  background: color-mix(in srgb, var(--ink-1) 66%, transparent);
  font-size: 0.875rem; color: var(--text-mid);
}
.lp-chips i { color: var(--accent-ink); }

.lp-art { position: relative; width: min(100%, 35rem); margin-inline: auto; aspect-ratio: 1; }
.lp-art::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 46%, transparent) 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 46%, transparent 70%);
  filter: blur(1.25rem);
}
.lp-art-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }

.art-line { fill: none; stroke: var(--art-line); stroke-width: 1.1; }
.art-dim { opacity: 0.6; }
.art-gold { fill: none; stroke: var(--art-gold); stroke-width: 1.7; stroke-linecap: round; }
.art-fill-gold { fill: var(--art-gold); }
.art-fill-plum { fill: var(--art-plum); }
.art-aspect-gold { fill: color-mix(in srgb, var(--art-gold) 6%, transparent); stroke: var(--art-gold); stroke-width: 1.1; stroke-linejoin: round; opacity: 0.8; }
.art-aspect-plum { fill: none; stroke: var(--art-plum); stroke-width: 1.1; stroke-linejoin: round; opacity: 0.75; }
.art-node { fill: var(--ink-0); stroke: var(--art-gold); stroke-width: 1.5; }
.art-halo { fill: url(#lp-halo); }
.art-ring-a { fill: none; stroke: var(--art-gold); stroke-width: 3.2; }
.art-ring-b { fill: none; stroke: var(--art-plum); stroke-width: 3.2; }
.art-lens { fill: url(#lp-lens); }
.art-gem { fill: var(--art-gold); }
.art-gem-facet { fill: none; stroke: var(--gem-facet); stroke-width: 0.9; stroke-linejoin: round; opacity: 0.55; }
.halo-a { stop-color: var(--art-plum); stop-opacity: 0.42; }
.halo-b { stop-color: var(--art-plum); stop-opacity: 0; }
.lens-a { stop-color: var(--art-gold); stop-opacity: 0.32; }
.lens-b { stop-color: var(--art-plum); stop-opacity: 0.18; }

.lp-art-spin { transform-box: view-box; transform-origin: 50% 50%; animation: lp-spin 240s linear infinite; }
.lp-art-twinkle path { animation: lp-twinkle 4.5s ease-in-out infinite alternate; }
.lp-art-twinkle path:nth-child(2) { animation-delay: 1.2s; }
.lp-art-twinkle path:nth-child(3) { animation-delay: 2.4s; }
.lp-art-twinkle path:nth-child(4) { animation-delay: 3.3s; }

@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* ------------------------------------------------------ 4b. beta banner ----- *
 * The beta banner above both views and the header's Beta badge (DECISIONS D23).
 * Both ship with the `hidden` attribute and landing.js removes it while the beta
 * runs; the [hidden] rules keep their own `display` from overriding that. The
 * headline is --text-hi on a tinted card and the badge says "Beta" in words (not
 * colour alone); the kicker, icon and badge carry the gold accent. */
.lp-offer[hidden], .beta-badge[hidden] { display: none; }
.lp-offer { position: relative; z-index: 1; padding-top: clamp(1.25rem, 3vw, 2rem); }
.lp-offer__card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  border: 0.125rem solid color-mix(in srgb, var(--accent-ink) 55%, transparent);
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-ink) 14%, var(--ink-1)), color-mix(in srgb, var(--color-primary) 16%, var(--ink-1)));
  box-shadow: var(--card-edge), var(--card-shadow);
}
.lp-offer__ico {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); font-size: 1.25rem;
}
.lp-offer__copy { flex: 1 1 18rem; min-width: 0; }
.lp-offer__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink);
}
.lp-offer__title {
  margin: 0.3rem 0 0.35rem; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-hi);
}
.lp-offer__title time { white-space: nowrap; }
.lp-offer__terms { margin: 0; max-width: 46rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text-mid); }
.lp-offer__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; flex: none; }
.lp-offer__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem;
  padding: 0 0.75rem; border-radius: 999rem; font-size: 0.9rem; font-weight: 600;
  color: var(--brand-ink); text-decoration: underline; text-underline-offset: 0.2em;
}
.lp-offer__link:hover { color: var(--brand-ink-hover); background: var(--brand-tint); }

.beta-badge {
  display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999rem;
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 60%, transparent);
  background: color-mix(in srgb, var(--accent-ink) 14%, transparent);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.4; color: var(--accent-ink);
}
.beta-badge--nav { margin-left: -0.5rem; flex: none; }
/* BA-13: below 34rem the inline badge pushed the header row past the viewport
   (measured at 375px: scrollWidth 393 for a guest, 414 signed in, the theme toggle
   clipped; at 481px: 498 and 510). There it leaves the row and sits as a small pill
   on the lower edge of the brand mark, so it takes no row width at any phone size.
   It is placed absolutely in the brand's grid cell of the header's start zone (section
   3), so it adds no width to that column, centred on the mark (2.5rem, or the 2.25rem
   phone mark below 30rem); its top edge sits 0.7rem (0.575rem) below the row's middle.
   The background is opaque because the pill overlaps the mark's gradient. */
@media (max-width: 33.99rem) {
  .nav--zones .nav-start > .beta-badge--nav {
    grid-column: 2; grid-row: 1; position: absolute; top: 50%; left: 1.25rem; z-index: 2;
    margin: 0; transform: translate(-50%, 0.7rem);
    padding: 0 0.3rem; font-size: 0.625rem; letter-spacing: 0.04em; line-height: 1.4;
    background: color-mix(in srgb, var(--accent-ink) 18%, var(--ink-0));
    pointer-events: none;
  }
}
@media (max-width: 29.99rem) {
  .lp-offer__ico { display: none; }
  .lp-offer__actions { flex: 1 1 100%; }
  .nav--zones .nav-start > .beta-badge--nav { left: 1.125rem; transform: translate(-50%, 0.575rem); }
}

/* ------------------------------------------------------- 5. section kit ----- */
.lp-section { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.lp-section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), 100% - 2.5rem); height: 0.0625rem;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent); opacity: 0.45;
}
.lp-section--tint { background: var(--tint-bg); }
.lp-closing::before, .lp-section--tint::before { display: none; }
#journey::before { display: none; }

.lp-kicker {
  display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.125rem; letter-spacing: 0.01em; color: var(--accent-ink);
}
.lp-kicker::before {
  content: ""; flex: none; width: 0.9rem; height: 0.9rem; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.lp-title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.1; letter-spacing: -0.024em;
  color: var(--text-hi); text-wrap: balance;
}
.lp-body { margin: 0 0 1.1rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.75; color: var(--text-mid); text-wrap: pretty; }
.lp-head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.lp-head .lp-body { margin-bottom: 0; }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-head--center .lp-kicker { justify-content: center; }
.lp-head--center .lp-body { margin-inline: auto; }
.lp-center { display: flex; justify-content: center; margin-top: clamp(2rem, 5vw, 3.25rem); }

.lp-card {
  position: relative; margin: 0; list-style: none;
  padding: 1.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-card);
  background: var(--card-bg); box-shadow: var(--card-edge), var(--card-shadow);
}
.lp-card h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--text-hi);
}
.lp-card p { margin: 0; font-size: 0.975rem; line-height: 1.7; color: var(--text-mid); }

.lp-ico {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 42%, transparent); border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--accent-ink) 24%, transparent), color-mix(in srgb, var(--color-primary) 24%, transparent));
  color: var(--accent-ink); font-size: 1.2rem;
}

.lp-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

/* ----------------------------------------------------------- 6. problem ----- */
.lp-stat {
  position: relative; margin: 0; padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 38%, var(--line)); border-radius: var(--radius-panel);
  background:
    radial-gradient(22rem 16rem at 100% 0, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 70%),
    var(--card-bg);
  box-shadow: var(--card-edge), var(--card-shadow);
}
.lp-stat-line {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--text-hi);
}
.lp-stat-num {
  display: block; margin: 0.15em 0 0.05em; font-weight: 400;
  font-size: clamp(3.6rem, 11vw, 6.25rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--accent-ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lp-stat-num {
    background: linear-gradient(100deg, var(--accent-ink), var(--brand-ink));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.lp-stat-source { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-low); }

.lp-compare { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.lp-compare__col {
  padding: 1.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-card);
}
.lp-compare__col--muted { background: color-mix(in srgb, var(--ink-1) 55%, transparent); }
.lp-compare__col--lit {
  border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--line));
  background: var(--card-bg); box-shadow: var(--card-edge), var(--card-shadow);
}
.lp-compare__title {
  margin: 0 0 1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em;
  color: var(--text-hi);
}
.lp-compare__col--muted .lp-compare__title { color: var(--text-mid); }
.lp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.lp-list li { position: relative; padding-left: 1.7rem; line-height: 1.55; color: var(--text-mid); }
.lp-list li::before {
  content: ""; position: absolute; left: 0; top: 0.4em; width: 0.85rem; height: 0.85rem; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.lp-compare__col--muted .lp-list li { color: var(--text-low); }
.lp-compare__col--muted .lp-list li::before { color: var(--text-low); opacity: 0.6; }
.lp-compare__col--lit .lp-list li { color: var(--text-hi); }
.lp-compare__col--lit .lp-list li::before { color: var(--accent-ink); }
.lp-aside {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--text-mid);
}

/* ------------------------------------------------------------ 7. belief ----- */
.lp-lineage-wrap {
  padding: clamp(1.75rem, 4vw, 2.5rem); border: 0.0625rem solid var(--line); border-radius: var(--radius-panel);
  background: var(--card-bg); box-shadow: var(--card-edge), var(--card-shadow);
}
.lp-lineage-title {
  margin: 0 0 1.75rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--accent-ink);
}
.lp-lineage {
  display: grid; gap: 2rem; margin: 0; padding: 0 0 0 1.75rem; list-style: none;
  border-left: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 50%, transparent);
}
.lp-lineage li { position: relative; }
.lp-lineage li::before {
  content: ""; position: absolute; left: -2.19rem; top: 0.5rem; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--accent-ink); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--accent-ink) 22%, transparent);
}
.lp-lineage__when { display: block; margin-bottom: 0.25rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--text-hi); }
.lp-lineage__what { display: block; line-height: 1.65; color: var(--text-mid); }

/* -------------------------------------------------------- 8. AstroMatch ----- */
.lp-badge {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 1.5rem 0 0; padding: 0.45rem 1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 50%, transparent); border-radius: 999rem;
  background: color-mix(in srgb, var(--accent-ink) 10%, transparent);
  font-size: 0.875rem; font-weight: 500; color: var(--accent-ink);
}

.lp-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lp-theme { flex: 0 1 100%; }

.lp-key { margin-top: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.lp-key__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.015em; color: var(--text-hi); }
.lp-key__lede { margin: 0.5rem 0 1.5rem; color: var(--text-mid); }
.lp-key__list li { text-align: left; }
.lp-key__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.lp-key__list li {
  flex: 0 1 100%; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 0.9rem; align-items: center;
  padding: 0.8rem 1.1rem 0.8rem 0.8rem; border: 0.0625rem solid var(--line); border-radius: 1rem;
  background: color-mix(in srgb, var(--ink-1) 70%, transparent);
}
.lp-key__list i {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--brand-tint); color: var(--accent-ink); font-size: 1.05rem;
}
.lp-key__list b { font-weight: 600; color: var(--text-hi); line-height: 1.3; }
.lp-key__list span { font-size: 0.9rem; line-height: 1.4; color: var(--text-mid); }

/* ------------------------------------------------------ 9. how it works ----- */
.lp-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lp-step { padding-top: 2.25rem; }
.lp-step__num {
  position: absolute; top: -1.35rem; left: 1.5rem; display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 55%, transparent); border-radius: 50%;
  background: var(--ink-0); color: var(--accent-ink);
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--accent-ink) 12%, transparent);
}
.lp-steps { padding-top: 1.35rem; }

/* ---------------------------------------------------------- 10. journey ----- */
.lp-band {
  position: relative; overflow: hidden; border: 0.0625rem solid #3b2d4a; border-radius: var(--radius-panel);
  padding: clamp(2.75rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.lp-band__inner { position: relative; z-index: 1; }
.lp-journey { position: relative; display: grid; gap: 2.25rem; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; }
.lp-journey::before {
  content: ""; position: absolute; left: 2.25rem; top: 2.25rem; bottom: 2.25rem; width: 0.0625rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ink) 20%, transparent), var(--accent-ink), color-mix(in srgb, var(--accent-ink) 20%, transparent));
}
.lp-journey__stop { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1.25rem; align-items: start; text-align: left; }
.lp-journey__node {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 70%, transparent);
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--accent-ink) 30%, #1f1530), #1f1530 72%);
  color: var(--accent-ink); font-size: 1.5rem;
  box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--accent-ink) 10%, transparent), 0 1rem 2rem -1rem rgba(0, 0, 0, 0.7);
}
.lp-journey__stop:last-child .lp-journey__node {
  background: radial-gradient(circle at 30% 22%, #f9dcb0, #d9a763 80%); color: #2b1a3d; border-color: #f2c78e;
  box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--accent-ink) 18%, transparent), 0 0 2.5rem -0.25rem color-mix(in srgb, var(--accent-ink) 55%, transparent);
}
.lp-journey h3 {
  margin: 0.2rem 0 0.35rem; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: -0.015em; color: var(--text-hi);
}
.lp-journey p { margin: 0; max-width: 20rem; line-height: 1.65; color: var(--text-mid); }

/* ------------------------------------------------------------ 11. trust ----- */
.lp-trust { display: grid; gap: 1rem; }
.lp-trust__item { padding: 1.75rem; }

/* ----------------------------------------------------- 12. closing call ----- */
.lp-closing { padding-top: 0; }
.lp-final {
  position: relative; overflow: hidden; text-align: center; border: 0.0625rem solid #3b2d4a; border-radius: var(--radius-panel);
  padding: clamp(3.25rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 4rem);
}
.lp-final__inner { position: relative; z-index: 1; margin-inline: auto; max-width: 40rem; }
.lp-final__mark {
  display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1.5rem; border-radius: 50%;
  border: 0.0625rem solid color-mix(in srgb, var(--accent-ink) 60%, transparent);
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--accent-ink) 26%, transparent), transparent 75%);
  color: var(--accent-ink); font-size: 1.6rem;
}
.lp-final .lp-title { margin-bottom: 1rem; }
.lp-final .lp-body { margin-inline: auto; }

/* ----------------------------------------------------------- 13. footer ----- */
.site-footer { margin-top: 0; padding: 3.25rem 0 2.5rem; background: var(--footer-bg); }
.foot { gap: 1rem 2rem; font-size: 0.9375rem; color: var(--text-low); }
.foot .brand { font-size: 1.2rem; }
.foot-domain { color: var(--text-low); }
.foot-links { gap: 0.25rem 0.5rem; flex-wrap: wrap; }
.foot-links { align-items: center; }
.foot-links a {
  min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.75rem; line-height: 2.75rem; color: var(--brand-ink);
}
.foot-links a:hover { color: var(--brand-ink-hover); background: var(--brand-tint); }
.foot-lower {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 0.0625rem solid var(--line);
}
.foot-note { margin: 0; max-width: 40rem; font-size: 0.9rem; line-height: 1.65; color: var(--text-low); }

.theme-group { display: none; border: 0.0625rem solid var(--line-strong); border-radius: 999rem; padding: 0.2rem; }
html.js .theme-group { display: inline-flex; }
.theme-group button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem; border: 0; border-radius: 999rem;
  background: transparent; color: var(--text-mid); font: 500 0.875rem/1 var(--font-body); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.theme-group button:hover { background: var(--brand-tint); color: var(--text-hi); }
.theme-group button[aria-pressed="true"] { background: var(--brand-fill-hover); color: #ffffff; }
.theme-group button[aria-pressed="true"]:hover { background: var(--brand-fill-active); color: #ffffff; }

/* --------------------------------------------------- 14. signed-in hero ----- */
.auth-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.auth-hero > .lp-stars {
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.auth-hero h1 { font-weight: 400; letter-spacing: -0.025em; }
.auth-hero .section-title { font-weight: 400; color: var(--text-hi); }
.auth-hero-meta { color: var(--text-low); }
.auth-avatar { color: #ffffff; background: linear-gradient(150deg, var(--color-primary), var(--color-secondary)); }
.auth-identity { color: var(--text-hi); }
.auth-identity:hover { color: var(--text-hi); background: var(--brand-tint); }
.quick-action {
  min-height: 2.75rem; color: var(--text-hi);
  border-radius: 1.1rem; background: var(--card-bg); box-shadow: var(--card-edge), var(--card-shadow);
}
.quick-action:hover { color: var(--text-hi); border-color: var(--brand-strong); }
.quick-action b { color: var(--text-hi); }
.quick-action small { color: var(--text-low); }
.card-ico {
  color: var(--accent-ink); background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent);
}

/* ------------------------------------------------------ 15. breakpoints ----- */
/* The landing header (.nav--zones) has ONE collapse point, 75rem, per the fleet standard. Measured
   2026-10-23: the full guest bar (four section links, AstroMatch, Help, Log in, Request invite, the
   trigger and the toggle) first fits at about 74.5rem with a classic 15px scrollbar. Below it the
   primary links, Log in, Dashboard and Sign out are in #site-menu and the identity link shows the
   avatar only (its aria-label names the account). No other rule hides an item of this header; the
   rest are size steps. */
@media (max-width: 74.99rem) {
  .nav--zones .nav-links--primary, .nav--zones .nav-links .nav-wide, .nav--zones .auth-identity-name { display: none; }
  .nav--zones .nav-group .auth-identity { gap: 0; padding: 0.25rem; min-width: 2.75rem; justify-content: center; }
}
@media (min-width: 75rem) {
  html.js .nav--zones .nav-menu-btn { display: none; }
  .nav--zones .nav-links--primary { column-gap: 0.375rem; }
  .nav--zones .nav-links--primary a { padding-inline: 0.5rem; }
}
/* A size step, not a hidden item: below 37.5rem the brand shows the mark alone (the link keeps its
   aria-label), because the trigger, the full brand, the Beta badge, Request invite, the toggle and the
   menu button need about 33.5rem of row, plus the gutters and a classic scrollbar. */
@media (max-width: 37.49rem) {
  .nav--zones .brand-word { display: none; }
}
@media (max-width: 29.99rem) {
  .nav.nav--zones { column-gap: 0.375rem; }
  .nav--zones .nav-start { column-gap: 0.375rem; }
}
/* Below 24rem, a classic 15px scrollbar leaves 21.5rem of row at 360px: "Request invite" ran 3.5px
   into the brand mark (measured on datenwed.com, 2026-10-23). The two grid gaps (the empty middle
   track keeps both) and the button get smaller; it stays 2.75rem tall. Measured after: 5.4px clear
   with the scrollbar, 20.6px without. */
@media (max-width: 23.99rem) {
  .nav.nav--zones { column-gap: 0.25rem; }
  .nav--zones .nav-links .btn { padding-inline: 0.6rem; font-size: 0.8rem; }
}
/* The rules below are for the OTHER pages' header copies (the single flex row with width bands:
   astromatch, mall, shop, partner-with-us), until they move to the zones layout. */
@media (max-width: 69.99rem) {
  .nav-links a.hide-md { display: none; }
}
@media (max-width: 42.5rem) {
  .nav-links a.hide-sm { display: none; }
}
@media (max-width: 29.99rem) {
  .nav { gap: 0.5rem; }
  .nav-links { gap: 0.25rem; flex-wrap: nowrap; }
  .nav-links .hide-xs { display: none; }
  .brand { font-size: 1.15rem; gap: 0.45rem; }
  .brand-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; }
  .brand-mark svg { width: 1.65rem; height: 1.65rem; }
  .nav-links .btn { padding-inline: 1rem; font-size: 0.85rem; }
  .auth-identity-name { display: none; }
  .nav-group { gap: 0.25rem; }
  .nav-group .auth-identity { padding: 0.25rem; }
  .lp-cta-row .btn { flex: 1 1 100%; }
  .lp-card, .lp-compare__col, .lp-trust__item { padding: 1.5rem 1.25rem; }
  .foot-lower { flex-direction: column; align-items: flex-start; }
  .theme-group button { padding: 0 0.7rem; }
}
@media (min-width: 70rem) {
  .nav-links { column-gap: 0.375rem; }
  .nav-links a:not(.btn) { padding-inline: 0.55rem; }
}
/* Header fit for the banded flex row, measured 2026-10-23 on the landing page before it moved to the
   zones layout (datenwed#156). The other pages' header copies still use that row, so these stay
   until they move: slightly tighter gaps and buttons at 30rem-45rem and 70rem-74.5rem, and, signed
   in, the avatar without the name below 60rem and a narrower Sign out below 30rem. */
@media (min-width: 30rem) and (max-width: 44.99rem) {
  .nav { gap: 0.5rem; }
  .nav-links { column-gap: 0.375rem; }
  .nav-links .btn { padding-inline: 0.9rem; }
}
@media (min-width: 70rem) and (max-width: 74.49rem) {
  .nav-links a:not(.btn) { padding-inline: 0.5rem; }
  .nav-links .btn { padding-inline: 1.1rem; }
}
@media (max-width: 59.99rem) {
  body.is-authenticated .auth-identity-name { display: none; }
  body.is-authenticated .nav-group .auth-identity {
    gap: 0; padding: 0.25rem; min-width: 2.75rem; justify-content: center;
  }
}
@media (max-width: 29.99rem) {
  body.is-authenticated .nav-group .btn { padding-inline: 0.75rem; }
}
@media (max-width: 22.99rem) {
  body.is-authenticated .nav:not(.nav--zones) .theme-toggle { display: none !important; }
}
@media (max-width: 21.99rem) {
  .container { width: min(var(--maxw), 100% - 2rem); }
  .brand { font-size: 1.05rem; }
  .nav:not(.nav--zones) .theme-toggle { display: none !important; }
}
@media (min-width: 30rem) {
  .lp-key__list li { flex-basis: calc((100% - 0.75rem) / 2); }
}
@media (min-width: 32rem) {
  .lp-theme { flex-basis: calc((100% - 1rem) / 2); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .lp-key__list li { flex-basis: calc((100% - 1.5rem) / 3); }
  .lp-theme { flex-basis: calc((100% - 2rem) / 3); }
  .lp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .lp-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .lp-journey::before {
    left: 16.66%; right: 16.66%; top: 2.25rem; bottom: auto; width: auto; height: 0.0625rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-ink) 25%, transparent), var(--accent-ink), color-mix(in srgb, var(--accent-ink) 25%, transparent));
  }
  .lp-journey__stop { display: block; text-align: center; }
  .lp-journey__node { margin: 0 auto 1.4rem; }
  .lp-journey p { margin-inline: auto; }
}
@media (max-width: 47.99rem) {
  .lp-band > .lp-stars,
  .lp-final > .lp-stars {
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 11%, transparent 20%, transparent 82%, #000 92%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 11%, transparent 20%, transparent 82%, #000 92%, #000 100%);
  }
}
@media (min-width: 60rem) {
  .lp-hero > .lp-stars {
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 6%, transparent 12%, transparent 50%, #000 58%, #000 100%), linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 0, #000 6%, transparent 12%, transparent 50%, #000 58%, #000 100%), linear-gradient(180deg, #000 60%, transparent 100%);
    mask-composite: intersect;
  }
  .lp-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .lp-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .lp-split--even { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .lp-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .lp-key__list li { flex-basis: calc((100% - 2.25rem) / 4); }
}
@media (min-width: 75rem) {
  .lp-theme { flex-basis: calc((100% - 4rem) / 5); }
}
@media (max-width: 59.99rem) {
  .lp-art { width: min(100%, 24rem); }
}

/* -------------------------------------------------------------- 16. motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .lp-stars::after { opacity: 1; }
}

/* ---------------------------------------------- 16. not-found page (BA-13) --- */
/* frontend/not-found.html: the branded 404 a browser gets for a missing page. */
.nf-main { padding: clamp(3rem, 10vw, 6rem) 0 4rem; }
.nf-container { max-width: 36rem; text-align: center; }
.nf-code {
  margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 14vw, 4.5rem);
  font-weight: 500; line-height: 1; color: var(--accent-ink);
}
.nf-title {
  margin: 1rem 0 0.75rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; color: var(--text-hi);
}
.nf-text { margin: 0 auto; max-width: 30rem; color: var(--text-mid); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.nf-links .btn { display: inline-flex; align-items: center; gap: 0.5rem; }