/* ═══════════════════════════════════════════════════════════════
   GLP-1 Exit — public resource site
   Editorial / clinical dark. Shares brand tokens with the Pepper
   app (assets/styles.css) but is a standalone marketing sheet:
   the app stylesheet is 3,400 lines of application chrome and
   nothing on these pages needs it.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0D1117;
  --bg-elev:     #141922;
  --bg-raised:   #1A202A;
  --fg:          #E6EDF3;
  --fg-soft:     rgba(230, 237, 243, 0.70);
  --fg-muted:    rgba(230, 237, 243, 0.42);
  --border:      rgba(230, 237, 243, 0.09);
  --border-soft: rgba(230, 237, 243, 0.05);

  --rose:        #F472B6;
  --rose-dim:    rgba(244, 114, 182, 0.12);
  --accent:      #A78BFA;
  --accent-dim:  rgba(167, 139, 250, 0.12);
  --amber:       #E8A33D;
  --amber-dim:   rgba(232, 163, 61, 0.12);
  --green:       #10B981;
  --green-dim:   rgba(16, 185, 129, 0.10);
  --red:         #EF4444;
  --red-dim:     rgba(239, 68, 68, 0.06);

  /* Hairlines for the tinted callouts, badges and status chips. Separate from
     the -dim fills because a 12%-alpha tint that reads as a soft glow on the
     dark canvas needs more weight to stay visible on the light one. */
  --accent-line: rgba(167, 139, 250, 0.18);
  --amber-line:  rgba(232, 163, 61, 0.25);
  --green-line:  rgba(16, 185, 129, 0.22);
  --red-line:    rgba(239, 68, 68, 0.20);

  --radius:      12px;
  --radius-lg:   18px;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:    "Outfit", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, SFMono-Regular, monospace;

  --measure: 1120px;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");

  /* Derived surfaces, shadows and accents. Everything below is overridden
     wholesale by the light theme, so rules should reference these rather
     than literal colours. */
  --surface:         rgba(20, 25, 34, 0.5);
  --surface-solid:   rgba(20, 25, 34, 0.72);
  --surface-hover:   rgba(26, 32, 42, 0.8);
  --panel-grad:      linear-gradient(168deg, var(--bg-elev), rgba(20, 25, 34, 0.35));
  --border-hi:       rgba(230, 237, 243, 0.20);
  --tint:            rgba(230, 237, 243, 0.05);
  --shimmer:         linear-gradient(90deg, rgba(230,237,243,0.08), rgba(230,237,243,0.16), rgba(230,237,243,0.08));
  --nav-bg:          rgba(13, 17, 23, 0.72);

  --btn-fg:          #0D1117;
  --primary-from:    #F9A8D4;
  --primary-to:      #F472B6;
  --primary-fg:      #17040E;
  --primary-ring:    rgba(244, 114, 182, 0.28);
  --primary-ring-hi: rgba(244, 114, 182, 0.40);
  --primary-glow:    rgba(244, 114, 182, 0.16);
  --primary-glow-hi: rgba(244, 114, 182, 0.22);
  --link-underline:  rgba(244, 114, 182, 0.45);

  --shadow-lg:       0 34px 90px rgba(0, 0, 0, 0.6);
  --shadow-md:       0 30px 80px rgba(0, 0, 0, 0.45);
  --shadow-btn:      0 10px 30px rgba(0, 0, 0, 0.4);

  --aurora-1:        rgba(244, 114, 182, 0.16);
  --aurora-2:        rgba(167, 139, 250, 0.13);
  --aurora-3:        rgba(232, 163, 61, 0.07);
  --grain-opacity:   0.55;

  --stage-bg:
    radial-gradient(120% 90% at 50% 6%, rgba(232, 163, 61, 0.12), transparent 62%),
    linear-gradient(168deg, #171C25, #0E1218 68%);
  --stage-cta-bg:    rgba(13, 17, 23, 0.86);
  --stage-hairline:  rgba(232, 176, 138, 0.34);
}

/* ═══ Light theme ═══════════════════════════════════════════════════
   Set on <html data-theme="light">, chosen before first paint by the
   inline script in each page's <head>. The accent slots are re-pointed
   at the GLP1Exit.org logo's own blue and green, which carry a light
   background far better than the dark theme's rose and violet.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #FBFAF6;
  --bg-elev:     #FFFFFF;
  --bg-raised:   #F1F4F0;
  --fg:          #16223F;
  --fg-soft:     rgba(22, 34, 63, 0.74);
  --fg-muted:    rgba(22, 34, 63, 0.55);
  --border:      rgba(22, 34, 63, 0.14);
  --border-soft: rgba(22, 34, 63, 0.08);

  --rose:        #2F5DA8;                    /* logo blue takes the lead accent */
  --rose-dim:    rgba(47, 93, 168, 0.10);
  --accent:      #4B8B37;                    /* logo green */
  --accent-dim:  rgba(75, 139, 55, 0.12);
  --amber:       #A96716;
  --amber-dim:   rgba(169, 103, 22, 0.10);
  --green:       #2F7D4F;
  --green-dim:   rgba(47, 125, 79, 0.10);
  --red:         #BE3A31;
  --red-dim:     rgba(190, 58, 49, 0.07);

  --accent-line: rgba(75, 139, 55, 0.30);
  --amber-line:  rgba(169, 103, 22, 0.30);
  --green-line:  rgba(47, 125, 79, 0.28);
  --red-line:    rgba(190, 58, 49, 0.28);

  --surface:         #FFFFFF;
  --surface-solid:   #FFFFFF;
  --surface-hover:   #FFFFFF;
  --panel-grad:      linear-gradient(168deg, #FFFFFF, #F3F7FB);
  --border-hi:       rgba(22, 34, 63, 0.28);
  --tint:            rgba(22, 34, 63, 0.045);
  --shimmer:         linear-gradient(90deg, rgba(22,34,63,0.06), rgba(22,34,63,0.13), rgba(22,34,63,0.06));
  --nav-bg:          rgba(251, 250, 246, 0.84);

  --btn-fg:          #FFFFFF;
  --primary-from:    #3D77CC;
  --primary-to:      #27508F;
  --primary-fg:      #FFFFFF;
  --primary-ring:    rgba(39, 80, 143, 0.30);
  --primary-ring-hi: rgba(39, 80, 143, 0.48);
  --primary-glow:    rgba(39, 80, 143, 0.18);
  --primary-glow-hi: rgba(39, 80, 143, 0.26);
  --link-underline:  rgba(47, 93, 168, 0.45);

  --shadow-lg:       0 26px 64px rgba(22, 34, 63, 0.15);
  --shadow-md:       0 20px 48px rgba(22, 34, 63, 0.11);
  --shadow-btn:      0 10px 24px rgba(22, 34, 63, 0.15);

  --aurora-1:        rgba(47, 93, 168, 0.11);
  --aurora-2:        rgba(75, 139, 55, 0.11);
  --aurora-3:        rgba(232, 163, 61, 0.10);
  --grain-opacity:   0.26;

  --stage-bg:
    radial-gradient(120% 90% at 50% 4%, rgba(232, 163, 61, 0.20), transparent 60%),
    linear-gradient(168deg, #FFFFFF, #EDF3FA 72%);
  --stage-cta-bg:    rgba(255, 255, 255, 0.88);
  --stage-hairline:  rgba(47, 93, 168, 0.34);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--rose-dim); color: var(--fg); }

/* Fixed, non-interactive texture layers */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: var(--grain); background-repeat: repeat; opacity: var(--grain-opacity);
}
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52vw 40vw at 78% -8%, var(--aurora-1), transparent 62%),
    radial-gradient(46vw 38vw at 6% 14%, var(--aurora-2), transparent 60%),
    radial-gradient(60vw 48vw at 50% 108%, var(--aurora-3), transparent 66%);
}

/* ─── Type ─── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 4.7rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); line-height: 1.1; }
h3 { font-size: 1.32rem; line-height: 1.24; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--fg); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; flex: none;
}
.eyebrow.bare::before { display: none; }
.lede { font-size: clamp(1.06rem, 1.9vw, 1.24rem); color: var(--fg-soft); }
.muted { color: var(--fg-muted); }
.serif-em { font-style: italic; color: var(--rose); }

/* ─── Shell ─── */
.wrap { width: min(100% - 44px, var(--measure)); margin-inline: auto; }
section { position: relative; }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ─── Nav ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-soft);
}
.nav-in {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
/* The GLP1Exit.org shield. Full-colour artwork, so it carries both themes
   without a variant — only the wordmark beside it needs theming, and that
   is live text. */
.brand-mark {
  width: 34px; height: auto; flex: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.32));
}
[data-theme="light"] .brand-mark { filter: drop-shadow(0 2px 7px rgba(22, 34, 63, 0.18)); }
.brand-name {
  font-family: var(--font-display); font-size: 18px; letter-spacing: -0.02em; line-height: 1;
}
.brand-name span { color: var(--fg-muted); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: 14px; color: var(--fg-soft); letter-spacing: 0.005em;
  transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--fg); }
@media (max-width: 760px) {
  .nav-links { gap: 18px; }
  .nav-links a.hide-sm { display: none; }
}

/* ─── Theme toggle ───────────────────────────────────────────────────
 * Sits at the end of the nav. Both icons are in the DOM; CSS shows the
 * one for the theme you would switch *to*, so the control always reads
 * as "go here" rather than "you are here".
 */
.theme-toggle {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--fg-soft);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-hi); background: var(--tint); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .i-sun { display: block; }
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  background: var(--fg); color: var(--btn-fg);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn.primary {
  background: linear-gradient(135deg, var(--primary-from), var(--primary-to));
  color: var(--primary-fg);
  box-shadow: 0 0 0 1px var(--primary-ring), 0 8px 26px var(--primary-glow);
}
.btn.primary:hover { box-shadow: 0 0 0 1px var(--primary-ring-hi), 0 14px 34px var(--primary-glow-hi); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn.ghost:hover { background: var(--tint); border-color: var(--border-hi); }
.btn.wide { width: 100%; }
.btn.lg { padding: 16px 30px; font-size: 16px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.textlink {
  color: var(--fg); border-bottom: 1px solid var(--link-underline);
  padding-bottom: 1px; transition: border-color 0.2s ease, color 0.2s ease;
}
.textlink:hover { color: var(--rose); border-color: var(--rose); }

/* ─── Hero ─── */
.hero { padding: clamp(64px, 11vh, 128px) 0 clamp(56px, 9vh, 104px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(32px, 6vw, 84px); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--rose); }
.hero .lede { max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note { margin-top: 22px; font-size: 13.5px; color: var(--fg-muted); max-width: 46ch; }

.hero-art { position: relative; }
.hero-art img {
  width: 100%; border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.hero-art::after {
  content: ""; position: absolute; inset: -14% -10% -18% -10%; z-index: -1;
  background: radial-gradient(60% 50% at 50% 44%, var(--aurora-3), transparent 70%);
  filter: blur(18px);
}
@media (max-width: 900px) { .hero-art { max-width: 380px; margin-inline: auto; } }

/* ─── Pepper orb stage ───────────────────────────────────────────────
 * The hero's click target: Pepper's orb (the same mark as the app icon
 * and OG card) glowing behind a phone showing the app. Drawn entirely in
 * CSS/SVG — no bitmap — so it stays sharp at any size and inherits the
 * palette. `--peach` is the orb's own copper, matching icon-512.png.
 */
.orb-stage {
  --peach: #E8B08A;
  --peach-hot: #FFD9BC;
  --peach-deep: #8C4F35;
  position: relative; display: block; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--border);
  background: var(--stage-bg);
  box-shadow: var(--shadow-lg);
  color: var(--fg); text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1),
              border-color 0.4s ease, box-shadow 0.5s ease;
}
.orb-stage:hover, .orb-stage:focus-visible {
  transform: translateY(-4px);
  border-color: var(--stage-hairline);
  box-shadow: var(--shadow-lg), 0 0 62px rgba(232, 163, 61, 0.18);
}
.orb-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Scene ------------------------------------------------------------- */
.orb-scene { position: relative; display: block; aspect-ratio: 1 / 1.02; }

.orb-aura {
  position: absolute; left: 50%; top: 42%; width: 116%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 163, 61, 0.30), rgba(232, 163, 61, 0.10) 42%, transparent 68%);
  filter: blur(16px);
}

/* Dotted orbit — the ring from the app icon, turning slowly. */
.orb-ring {
  position: absolute; left: 50%; top: 42%; width: 82%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dotted rgba(232, 176, 138, 0.52);
  animation: orb-spin 64s linear infinite;
}

.orb-body {
  position: absolute; left: 50%; top: 42%; width: 63%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 33%, var(--peach-hot), var(--peach) 38%, #B4694A 72%, var(--peach-deep) 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.72),
    0 26px 70px rgba(140, 79, 53, 0.5),
    inset -14px -20px 46px rgba(60, 25, 12, 0.42);
  animation: orb-breathe 7.5s ease-in-out infinite;
}
/* Specular highlight, kept soft so the sphere reads as lit, not glassy. */
.orb-spec {
  position: absolute; left: 26%; top: 18%; width: 34%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 66%);
  filter: blur(5px);
}

@keyframes orb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orb-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}

/* Phone — sized and placed so it covers only the orb's lower half, leaving
   the lit top arc reading clearly above it. Its bottom runs off the scene
   and is swallowed by the frosted CTA bar. */
.orb-phone {
  /* The device screen stays dark in both themes — it is a phone, not a
     page — so its contents use these instead of the page tokens. */
  --scr-fg: #E6EDF3;
  --scr-muted: rgba(230, 237, 243, 0.46);
  position: absolute; left: 50%; bottom: -20%; width: 40%;
  transform: translateX(-50%) rotate(-2.2deg);
  aspect-ratio: 1 / 2.02;
  border-radius: 30px / 26px;
  padding: 7px;
  background: linear-gradient(150deg, #4A5160, #1B1F27 46%, #333A47);
  box-shadow:
    0 -2px 30px rgba(232, 163, 61, 0.22),
    0 30px 60px rgba(0, 0, 0, 0.62);
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.orb-stage:hover .orb-phone, .orb-stage:focus-visible .orb-phone {
  transform: translateX(-50%) rotate(-2.2deg) translateY(-8px);
}
.orb-notch {
  position: absolute; left: 50%; top: 15px; z-index: 2;
  transform: translateX(-50%);
  width: 28%; height: 8px; border-radius: 99px;
  background: #05070A;
}
.orb-screen {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  height: 100%; padding: 26px 9px 0;
  border-radius: 24px / 21px; overflow: hidden;
  background: linear-gradient(178deg, #14181F, #0B0E13);
}

/* Miniature app UI -------------------------------------------------- */
.ui-head { display: flex; align-items: center; gap: 5px; padding: 0 2px 1px; }
.ui-head b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 11px; letter-spacing: -0.01em; color: var(--scr-fg);
}
.ui-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--peach-hot), var(--peach) 46%, var(--peach-deep));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.ui-card {
  display: block; padding: 6px 7px 7px;
  border-radius: 8px;
  border: 1px solid rgba(230, 237, 243, 0.07);
  background: rgba(232, 163, 61, 0.055);
}
.ui-card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ui-k {
  display: block; font-family: var(--font-mono);
  font-size: 6px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--scr-muted); white-space: nowrap;
}
.ui-v {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.02em; color: var(--scr-fg);
  white-space: nowrap;
}
.ui-v i { font-style: normal; font-size: 7px; font-weight: 400; color: var(--scr-muted); }

.ui-spark { display: block; width: 100%; height: 20px; margin-top: 3px; color: var(--peach); }

.ui-bar {
  display: block; margin-top: 5px; height: 4px; border-radius: 99px;
  background: rgba(230, 237, 243, 0.10); overflow: hidden;
}
.ui-bar span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--peach), #F2C9A8);
}

/* Progress donut. The radial mask punches out the middle, so this element
   must stay empty — any text inside would be masked away with it. */
.ui-ring {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--peach) 0 50%, rgba(230, 237, 243, 0.10) 50% 100%);
  -webkit-mask: radial-gradient(circle, transparent 8px, #000 8.5px);
          mask: radial-gradient(circle, transparent 8px, #000 8.5px);
}

/* Call to action ---------------------------------------------------- */
.orb-cta {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--stage-cta-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.orb-apple { flex: none; width: 21px; height: 21px; color: var(--fg); }
.orb-cta-text { display: block; min-width: 0; }
.orb-cta-text b {
  display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg);
}
.orb-cta-text em {
  display: block; margin-top: 1px; font-style: normal;
  font-size: 11.5px; color: var(--fg-muted);
}
.orb-arrow {
  margin-left: auto; flex: none; font-size: 16px; color: var(--fg-muted);
  transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.25, 1), color 0.3s ease;
}
.orb-stage:hover .orb-arrow, .orb-stage:focus-visible .orb-arrow {
  transform: translateX(5px); color: var(--peach);
}
/* The CTA bar is near-white in the light theme, where the orb's light copper
   would all but vanish — use its deep shade there instead. */
[data-theme="light"] .orb-stage:hover .orb-arrow,
[data-theme="light"] .orb-stage:focus-visible .orb-arrow { color: var(--peach-deep); }

@media (prefers-reduced-motion: reduce) {
  .orb-ring, .orb-body { animation: none; }
  .orb-stage, .orb-phone, .orb-arrow { transition: none; }
  .orb-stage:hover, .orb-stage:focus-visible { transform: none; }
  .orb-stage:hover .orb-phone, .orb-stage:focus-visible .orb-phone {
    transform: translateX(-50%) rotate(-2.2deg);
  }
}

/* Page-load reveal */
.reveal { opacity: 0; transform: translateY(18px); animation: rise 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards; }
.reveal.d1 { animation-delay: 0.06s; }
.reveal.d2 { animation-delay: 0.14s; }
.reveal.d3 { animation-delay: 0.24s; }
.reveal.d4 { animation-delay: 0.34s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ─── The two paths ─── */
.paths { padding: clamp(56px, 8vw, 96px) 0; }
.path-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
@media (max-width: 860px) { .path-grid { grid-template-columns: 1fr; } }

.path {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 32px 32px; border-radius: var(--radius-lg);
  background: var(--panel-grad);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.path:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.path::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.path.rose::before { background: linear-gradient(90deg, transparent, var(--rose), transparent); }
.path-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--fg-muted); margin-bottom: 16px;
}
.path h3 { margin-bottom: 10px; }
.path p { color: var(--fg-soft); font-size: 15px; }
.path ul { margin: 4px 0 24px; padding: 0; list-style: none; }
.path li {
  position: relative; padding-left: 22px; font-size: 14.5px;
  color: var(--fg-soft); margin-bottom: 8px;
}
.path li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.75;
}
.path.rose li::before { background: var(--rose); }
.path .btn { margin-top: auto; align-self: flex-start; }
.price-tag {
  font-family: var(--font-mono); font-size: 13px; color: var(--amber);
  background: var(--amber-dim); border: 1px solid var(--amber-line);
  padding: 4px 11px; border-radius: 999px; display: inline-block; margin-bottom: 14px;
}

/* ─── Section header ─── */
.sec-head { max-width: 62ch; margin-bottom: 40px; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head p { color: var(--fg-soft); }

/* ─── Resource cards ─── */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 18px; }
.res {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.res:hover { background: var(--surface-hover); border-color: var(--border-hi); transform: translateY(-3px); }
.res .kicker {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--accent);
}
.res h3 { font-size: 1.16rem; }
.res p { font-size: 14.5px; color: var(--fg-soft); margin: 0; }
.res .more {
  margin-top: auto; padding-top: 12px; font-size: 13.5px; color: var(--fg-muted);
  font-family: var(--font-mono); letter-spacing: 0.06em;
}
.res:hover .more { color: var(--rose); }

/* ─── Course sales page ─── */
.buy-panel {
  position: relative;
  padding: 34px 32px; border-radius: var(--radius-lg);
  border: 1px solid var(--amber-line);
  background: linear-gradient(170deg, var(--amber-dim), var(--surface-solid));
}
.buy-price {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.buy-price .amount {
  font-family: var(--font-display); font-size: 3.1rem; line-height: 1; letter-spacing: -0.02em;
}
.buy-price .unit { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase; }
.buy-price .amount.loading {
  color: transparent; background: var(--shimmer);
  background-size: 200% 100%; border-radius: 8px; animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.buy-sub { font-size: 14px; color: var(--fg-muted); margin-bottom: 24px; }
.buy-list { list-style: none; margin: 0 0 26px; padding: 0; }
.buy-list li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 14.5px; color: var(--fg-soft);
}
.buy-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px;
  border-left: 1.6px solid var(--amber); border-bottom: 1.6px solid var(--amber);
  transform: rotate(-45deg);
}
.buy-secure {
  margin-top: 16px; font-size: 12.5px; color: var(--fg-muted);
  display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center;
}
.buy-secure svg { width: 13px; height: 13px; flex: none; }

.split {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 96px; }
@media (max-width: 900px) { .sticky { position: static; } }

/* Curriculum list */
.mods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.mods li {
  display: grid; grid-template-columns: 54px 1fr; gap: 18px;
  padding: 22px 4px; border-bottom: 1px solid var(--border);
}
.mods .n {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
  letter-spacing: 0.08em; padding-top: 4px;
}
.mods h3 { font-size: 1.12rem; margin-bottom: 5px; }
.mods p { font-size: 14.5px; color: var(--fg-soft); margin: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 34px 20px 2px;
  font-size: 1.02rem; font-weight: 400; color: var(--fg); position: relative;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rose); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted);
  transform: rotate(45deg); transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq .answer { padding: 0 40px 22px 2px; color: var(--fg-soft); font-size: 15px; }

/* ─── Callouts ─── */
.note {
  border-radius: var(--radius); padding: 18px 22px; font-size: 14px;
  line-height: 1.62; color: var(--fg-soft);
  background: var(--accent-dim); border: 1px solid var(--accent-line);
}
.note.warn { background: var(--amber-dim); border-color: var(--amber-line); }
.note.med {
  background: var(--red-dim); border-color: var(--red-line);
  color: var(--fg-soft);
}
.note.ok { background: var(--green-dim); border-color: var(--green-line); }
.note .note-title {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: 7px;
}

/* ─── Article ─── */
.article { padding: clamp(48px, 7vw, 84px) 0 0; }
.article-body { max-width: 68ch; }
.article-body h2 { font-size: clamp(1.5rem, 2.7vw, 1.95rem); margin: 46px 0 14px; }
.article-body h3 { font-size: 1.16rem; margin: 30px 0 9px; }
.article-body p, .article-body li { color: var(--fg-soft); }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 1.05em; }
.article-body li { margin-bottom: 8px; }
.article-body .note { margin: 26px 0; }
.article-meta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-muted); margin-top: 16px;
}
.article-title { margin-bottom: 18px; max-width: 20ch; }
.article-title.long { max-width: 26ch; }
.backlink {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: var(--fg-muted); margin-bottom: 26px; transition: color 0.2s ease;
}
.backlink:hover { color: var(--fg); }

/* Question / prompt blocks used in the provider guide */
.qlist { list-style: none; padding: 0; margin: 0 0 1.4em; counter-reset: q; }
.qlist li {
  counter-increment: q; position: relative; padding: 16px 0 16px 46px;
  border-bottom: 1px solid var(--border-soft); font-size: 15px; color: var(--fg);
}
.qlist li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 0; top: 17px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--rose); letter-spacing: 0.05em;
}
.qlist li .why { display: block; margin-top: 5px; font-size: 13.5px; color: var(--fg-muted); }

/* ─── Status page (access / cancelled) ─── */
.status-wrap { min-height: 76vh; display: grid; place-items: center; padding: 64px 0; }
.status-card {
  width: min(100%, 620px); text-align: left;
  padding: clamp(30px, 5vw, 46px); border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface-solid);
  box-shadow: var(--shadow-md);
}
.status-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 22px; border: 1px solid var(--border);
}
.status-icon svg { width: 22px; height: 22px; }
.status-icon.ok { background: var(--green-dim); border-color: var(--green-line); color: var(--green); }
.status-icon.warn { background: var(--amber-dim); border-color: var(--amber-line); color: var(--amber); }
.status-icon.err { background: var(--red-dim); border-color: var(--red-line); color: var(--red); }
.status-card h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 12px; }
.status-card p { color: var(--fg-soft); font-size: 15px; }
.status-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.receipt {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted);
  display: grid; gap: 6px;
}
.receipt div { display: flex; gap: 10px; justify-content: space-between; }
.receipt span:last-child { color: var(--fg-soft); text-align: right; word-break: break-all; }

/* Skeleton while verifying payment */
.skel { display: grid; gap: 12px; }
.skel i {
  display: block; height: 13px; border-radius: 6px;
  background: var(--shimmer);
  background-size: 200% 100%; animation: shimmer 1.5s linear infinite;
}
.skel i:nth-child(1) { width: 82%; }
.skel i:nth-child(2) { width: 64%; }
.skel i:nth-child(3) { width: 71%; }

.hidden { display: none !important; }

.form-error {
  margin-top: 14px; font-size: 13.5px; color: var(--red);
  background: var(--red-dim); border: 1px solid var(--red-line);
  border-radius: 10px; padding: 11px 14px;
}

/* ─── Footer ─── */
.footer { margin-top: clamp(64px, 9vw, 110px); border-top: 1px solid var(--border); padding: 44px 0 56px; }
/* Full logo lockup. The wordmark is dark navy ink, so the dark theme gets a
   variant with the type knocked out to near-white; the shield is identical
   in both. Only one is ever displayed. */
.brand-lockup-link { display: block; max-width: 268px; }
.footer-lockup { display: block; width: 100%; max-width: 268px; height: auto; }
.footer-lockup.on-light { display: none; }
[data-theme="light"] .footer-lockup.on-dark { display: none; }
[data-theme="light"] .footer-lockup.on-light { display: block; }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 34px; }
@media (max-width: 760px) { .footer-in { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer h4 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: 14px; font-weight: 400;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { font-size: 14px; color: var(--fg-soft); transition: color 0.2s ease; }
.footer a:hover { color: var(--fg); }
.footer-brand p { font-size: 13.5px; color: var(--fg-muted); max-width: 42ch; margin-top: 14px; }
.footer-legal {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--border-soft);
  font-size: 12.5px; color: var(--fg-muted); line-height: 1.7;
}