/* ==========================================================================
   StoreMore — experience presets
   Same components and behaviour; each preset swaps tokens, typography, motion
   intensity and illustration treatment. Default is styles.css plus Apple Blue for actions.
   Theme-dependent tokens are scoped with [data-theme] (app.js always sets it),
   so a preset's light palette never leaks into dark mode.
   ========================================================================== */

/* ---------- Shared additions: personalize entry points ---------- */

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--accent-ink);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.text-btn:hover { background: var(--surface-2); }
.text-btn .i { width: 16px; height: 16px; }

.nav-personalize .i { width: 18px; height: 18px; }
.menu-item {
  padding: 14px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-2);
  font-size: 1.0625rem;
  font-weight: 350;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 1100px) {
  .label-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Stickers (illustration layer, presets opt in) ---------- */

.hero-copy { position: relative; }
.stickers { position: absolute; inset: 0; pointer-events: none; }
.sticker {
  position: absolute;
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.15));
}
.sticker:nth-child(1) { top: 118px; left: 0; rotate: -12deg; }
.sticker:nth-child(2) { top: 214px; right: 0; rotate: 10deg; }
.sticker:nth-child(3) { top: 330px; left: 3%; rotate: -6deg; }
:root[data-ambient="on"] .sticker { animation: wiggle 5s ease-in-out infinite; }
:root[data-ambient="on"] .sticker:nth-child(2) { animation-delay: -1.7s; }
:root[data-ambient="on"] .sticker:nth-child(3) { animation-delay: -3.1s; }
@keyframes wiggle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Decorative only; on narrow screens there is no free space beside the copy */
@media (max-width: 760px) {
  .stickers { display: none; }
}

/* ---------- Junior safeguards notice ---------- */

.junior-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 24px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--trust-tint);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
}
.junior-notice .i { width: 22px; height: 22px; margin-top: 1px; color: var(--trust-ink); }
.junior-notice b { color: var(--ink); }

/* ---------- Playful extras (optional gamification) ---------- */

.play-badge {
  display: inline-block;
  margin: 18px 0 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--warm-tint);
  color: var(--warm-ink);
  font-size: 0.75rem;
  font-weight: 700;
}
.play-cheer { color: var(--warm-ink); font-weight: 700; }
@media (max-width: 900px) { .play-badge { margin: 0 0 0 6px; } }

.confetti { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.confetti i {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confetti 1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes confetti {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

/* ---------- Motion controls ---------- */

/* data-motion: the person's choice combined with the OS reduced-motion setting */
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
/* data-ambient: looping decoration (floating cards, caret, stickers); calm presets switch it off */
:root[data-ambient="off"] :is(.float, .caret, .sticker) { animation: none !important; }

/* ---------- Personalize panel ---------- */

.panel {
  width: min(660px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.panel::backdrop { background: rgb(10 10 12 / 0.45); }
/* The Subscribe popup (public/core.js): a narrower panel with one field */
.subscribe { width: min(440px, calc(100% - 32px)); }
.subscribe .panel-inner { gap: 16px; }
.subscribe .form-field { margin: 0; }
.subscribe-lede { color: var(--ink-2); line-height: 1.5; }
.subscribe-done { justify-items: start; }
.subscribe-done .i-done { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--trust-tint); color: var(--trust-ink); }
.panel-inner { display: grid; gap: 22px; padding: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.panel-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--trust-tint);
  color: var(--trust-ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}
.panel-note .i { width: 16px; height: 16px; margin-top: 2px; }

.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field-note { margin-top: 8px; color: var(--ink-3); font-size: 0.8125rem; }

.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preset-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.preset-option:hover { border-color: var(--line-strong); }
.preset-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-tint); }
.preset-option:has(input:focus-visible) { outline: 3px solid var(--focus, var(--brand)); outline-offset: 2px; }
.preset-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.preset-text { display: grid; min-width: 0; line-height: 1.3; }
.preset-text b { font-size: 1rem; }
.preset-text small { color: var(--ink-2); font-size: 0.8125rem; }
.preset-text em { margin-top: 2px; color: var(--ink-3); font-size: 0.75rem; font-style: normal; }

/* Swatches preview each preset regardless of the active one */
.preset-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  font-size: 1.25rem;
}
.preset-swatch i { position: absolute; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; }
.preset-swatch i:nth-of-type(1) { right: 6px; }
.preset-swatch i:nth-of-type(2) { right: 17px; }
.swatch-default { border: 1px solid #e8e8ed; background: #f5f5f7; color: #1d1d1f; font-family: "Onest", sans-serif; }
.swatch-default i:nth-of-type(1) { background: #1d1d1f; }
.swatch-default i:nth-of-type(2) { background: #86868b; }
.swatch-classic { border: 1px solid #e3e9ef; background: #ffffff; color: #12354e; font-family: "Onest", sans-serif; }
.swatch-classic i:nth-of-type(1) { background: #12354e; }
.swatch-classic i:nth-of-type(2) { background: #f99d1b; }
.swatch-vibe { border: 2px solid #1b1a1c; background: #fff8f2; box-shadow: 2px 2px 0 #1b1a1c; color: #1b1a1c; font-family: "Bricolage Grotesque", sans-serif; }
.swatch-vibe i:nth-of-type(1) { background: #ff2d55; }
.swatch-vibe i:nth-of-type(2) { background: #c6f432; box-shadow: 0 0 0 1px #1b1a1c; }
.swatch-nostalgia { border: 1px solid #e6d9c6; background: #f8f1e7; color: #2b2118; font-family: "Fraunces", serif; font-style: italic; }
.swatch-nostalgia i:nth-of-type(1) { background: #c23a32; }
.swatch-nostalgia i:nth-of-type(2) { background: #d9a441; }
.swatch-clarity { border: 2px solid #0d0d0f; background: #fff; color: #0d0d0f; font-family: "Atkinson Hyperlegible", sans-serif; }
.swatch-clarity i:nth-of-type(1) { background: #c8102e; }
.swatch-clarity i:nth-of-type(2) { background: #0d0d0f; }
.swatch-junior { border-radius: 18px; background: linear-gradient(135deg, #dbe9ff, #fff1c7); color: #1a2035; font-family: "Nunito", sans-serif; font-weight: 900; }
.swatch-junior i:nth-of-type(1) { background: #ef3b4f; }
.swatch-junior i:nth-of-type(2) { background: #8b5cf6; }

.segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.segmented label { position: relative; flex: 1 1 0; }
.segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented input:disabled { cursor: not-allowed; }
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.segmented input:checked + span { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus, var(--brand)); outline-offset: 1px; }
.segmented input:disabled + span { opacity: 0.45; }

.switch-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
}
.switch-row + .switch-row { margin-top: 10px; }
.switch-row > span:first-child { display: grid; gap: 2px; }
.switch-row b { font-size: 1rem; }
.switch-row small { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.4; }
.switch-row input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch-row:has(input:focus-visible) { outline: 3px solid var(--focus, var(--brand)); outline-offset: 2px; }
.switch-row input:checked + .toggle { background: var(--toggle-on, var(--ink)); }
.switch-row input:checked + .toggle::after { background: var(--on-toggle, var(--on-brand)); }
.switch-row input:checked + .toggle::after { transform: translateX(16px); }
.toggle::after { transition: transform 0.2s var(--ease); }

.panel-foot { display: flex; justify-content: space-between; gap: 12px; }

@media (max-width: 640px) {
  .panel {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  .panel-inner { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .preset-grid { grid-template-columns: 1fr; }
}

/* ---------- Debug overlay (?debug) ---------- */

.debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 80;
  width: min(360px, calc(100% - 24px));
  max-height: 60vh;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: #111113;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
  color: #e9e9ee;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.debug-title { margin-bottom: 8px; color: #ff8a96; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.debug-section { margin-top: 10px; color: #9d9ba5; }
.debug dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.debug dt { color: #9d9ba5; }
.debug dd { margin: 0; }
.debug ol, .debug ul { margin: 4px 0 0; padding-left: 16px; list-style: revert; }
.debug .bad { color: #ffb347; }
.debug label { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; }
:root[data-debug-critical="on"] [data-critical] { outline: 2px dashed #3ccf7f; outline-offset: 3px; }

/* ==========================================================================
   Default: black and white in Onest (styles.css), with Apple Blue for actions, as on apple.com.
   - Buttons are #0071E3 with white text (4.7:1). They go darker on hover (#0062C4) and press
     (#0058B0), not lighter, so the white text stays readable.
   - Links are #0066CC (5.6:1), and #2997FF in dark mode (7:1).
   - The logo, icons, headings and status colours stay black and white.
   ========================================================================== */

:root[data-preset="default"] {
  --primary: #0071e3;
  --primary-hover: #0062c4;
  --primary-active: #0058b0;
  --on-primary: #ffffff;
}
:root[data-preset="default"]:not([data-theme="dark"]) { --link: #0066cc; --focus: #0071e3; }
@media (prefers-color-scheme: dark) {
  :root[data-preset="default"]:not([data-theme="light"]) { --link: #2997ff; --focus: #2997ff; }
}
:root[data-preset="default"][data-theme="dark"] { --link: #2997ff; --focus: #2997ff; }
/* Apple's pill-shaped, flat buttons */
:root[data-preset="default"] .btn { border-radius: 980px; }
:root[data-preset="default"] .btn-primary { box-shadow: none; }
/* The black panel's main button is the same blue as every other main action
   (blue on black 4.5:1, white text on blue 4.7:1) */
:root[data-preset="default"] .cta-box .btn-white { background: var(--primary); color: var(--on-primary); }
:root[data-preset="default"] .cta-box .btn-white:hover { background: var(--primary-hover); }
:root[data-preset="default"] .cta-box .btn-white:active { background: var(--primary-active); }

/* ==========================================================================
   Classic: minimal, on white, in StoreMore navy (Dark Tyrian Blue #12354E) and orange
   (Yellow Orange #F99D1B), in Onest.
   Navy carries text, links and focus (12.8:1 on white). Orange fills buttons and accents with navy
   text on it (6:1). It's never used for text on white (2.1:1); headline accents use a deeper
   orange (#B86D00, 4:1, large text only).
   ========================================================================== */

:root[data-preset="classic"]:not([data-theme="dark"]) {
  --bg: #ffffff;
  --bg-soft: #f7f9fb;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --line: #e3e9ef;
  --line-strong: #cdd7e0;
  --ink: #12354e;
  --ink-2: #3e5a70;
  --ink-3: #5c7283;
  --brand: #f99d1b;
  --primary: #f99d1b;
  --primary-hover: #e98c08;
  --on-brand: #12354e;
  --accent-ink: #12354e;
  --accent-word: #b86d00;
  --brand-tint: #fef4e6;
  --focus: #12354e;
 
  --trust: #12354e;
  --trust-tint: #edf2f6;
  --trust-ink: #12354e;
  --ai: #12354e;
  --ai-tint: #edf2f6;
  --ai-ink: #12354e;
  --toggle-on: #12354e;
  --on-toggle: #ffffff;
  --series-1: #12354e;
  --series-2: #f99d1b;
  --series-3: #7f9bb0;
  --series-4: #fcd59b;
}
@media (prefers-color-scheme: dark) {
  :root[data-preset="classic"]:not([data-theme="light"]) {
    --bg: #0b1d2b;
    --bg-soft: #0f2333;
    --surface: #12293b;
    --surface-2: #193449;
    --line: #23415a;
    --line-strong: #2f5270;
    --ink: #eef3f7;
    --ink-2: #c3d0da;
    --ink-3: #9fb2c1;
    --brand: #f99d1b;
    --primary: #f99d1b;
    --primary-hover: #ffb13d;
    --on-brand: #12354e;
    --accent-ink: #f99d1b;
    --accent-word: #f99d1b;
    --brand-tint: #33270f;
    --focus: #f99d1b;
   
    --trust: #c3d0da;
    --trust-tint: #162f43;
    --trust-ink: #c3d0da;
    --ai: #c3d0da;
    --ai-tint: #162f43;
    --ai-ink: #c3d0da;
    --toggle-on: #f99d1b;
    --on-toggle: #12354e;
    --series-1: #f99d1b;
    --series-2: #9fb2c1;
    --series-3: #5c7283;
    --series-4: #2f5270;
  }
}
:root[data-preset="classic"][data-theme="dark"] {
  --bg: #0b1d2b;
  --bg-soft: #0f2333;
  --surface: #12293b;
  --surface-2: #193449;
  --line: #23415a;
  --line-strong: #2f5270;
  --ink: #eef3f7;
  --ink-2: #c3d0da;
  --ink-3: #9fb2c1;
  --brand: #f99d1b;
  --primary: #f99d1b;
  --primary-hover: #ffb13d;
  --on-brand: #12354e;
  --accent-ink: #f99d1b;
  --accent-word: #f99d1b;
  --brand-tint: #33270f;
  --focus: #f99d1b;
 
  --trust: #c3d0da;
  --trust-tint: #162f43;
  --trust-ink: #c3d0da;
  --ai: #c3d0da;
  --ai-tint: #162f43;
  --ai-ink: #c3d0da;
  --toggle-on: #f99d1b;
  --on-toggle: #12354e;
  --series-1: #f99d1b;
  --series-2: #9fb2c1;
  --series-3: #5c7283;
  --series-4: #2f5270;
}

:root[data-preset="classic"] .btn-primary { box-shadow: 0 8px 20px -12px rgb(249 157 27 / 0.75); }
:root[data-preset="classic"] .cta-box { background: #12354e; color: #ffffff; }
:root[data-preset="classic"][data-theme="dark"] .cta-box { background: #163a55; }
:root[data-preset="classic"] .cta-box::before {
  background:
    radial-gradient(70% 90% at 50% -20%, rgb(255 255 255 / 0.12), transparent 60%),
    radial-gradient(50% 70% at 100% 110%, rgb(249 157 27 / 0.28), transparent 70%);
}
:root[data-preset="classic"] .btn-white { color: #12354e; }
:root[data-preset="classic"] .btn-white:hover { background: #fef4e6; }
/* Soft navy and orange glows behind the hero glass */
:root[data-preset="classic"] .orb { opacity: 0.35; filter: blur(50px); }
:root[data-preset="classic"] .orb-a { background: radial-gradient(circle, #fcd59b, rgb(249 157 27 / 0.45) 55%, transparent 72%); }
:root[data-preset="classic"] .orb-b { background: radial-gradient(circle, #c9d6e0, rgb(18 53 78 / 0.3) 55%, transparent 72%); }
:root[data-preset="classic"] .orb-c { background: radial-gradient(circle, #fde8c8, rgb(249 157 27 / 0.3) 55%, transparent 72%); }
:root[data-preset="classic"][data-theme="dark"] .orb { opacity: 0.28; filter: blur(50px); }

/* ==========================================================================
   Colour styles
   Default is black and white in Onest (styles.css), and Classic is navy and orange (above).
   Vibe, Nostalgia, Clarity and Junior start from the original StoreMore red palette and DM Sans
   set here, then add their own look below.
   ========================================================================== */

:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) {
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]):not([data-theme="dark"]) {
  --bg: #fbf9f7;
  --bg-soft: #f5f1ee;
  --surface: #ffffff;
  --surface-2: #f4f0ed;
  --line: #ebe5e1;
  --line-strong: #d9d1cc;
  --ink: #1b1a1c;
  --ink-2: #4a4850;
  --ink-3: #6c6a72;
  --brand: #e23744;
  --primary: #d7263d;
  --primary-hover: #b91d32;
  --accent-ink: #c81f35;
  --brand-tint: #fdecee;
 
  --trust: #2a78d6;
  --trust-tint: #e8f1fc;
  --trust-ink: #1c5cab;
  --ai: #6250d6;
  --ai-tint: #efedfc;
  --ai-ink: #4a3aa7;
  --warm-tint: #fdf3e1;
  --warm-ink: #8a5a00;
  --ok: #19804a;
  --ok-tint: #e5f4ea;
  --on-ok: #ffffff;
  --series-1: #2a78d6;
  --series-2: #1baf7a;
  --series-3: #6250d6;
  --series-4: #eda100;
}
@media (prefers-color-scheme: dark) {
  :root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]):not([data-theme="light"]) {
    --bg: #111113;
    --bg-soft: #17171a;
    --surface: #1c1c20;
    --surface-2: #24242a;
    --line: #2c2c33;
    --line-strong: #3d3d46;
    --ink: #f3f2f4;
    --ink-2: #c6c4cc;
    --ink-3: #9d9ba5;
    --brand: #ff4d5e;
    --primary: #d7263d;
    --primary-hover: #b91d32;
    --accent-ink: #ff7380;
    --brand-tint: #2b1519;
   
    --trust: #3987e5;
    --trust-tint: #15233a;
    --trust-ink: #8dbaf2;
    --ai: #9085e9;
    --ai-tint: #211d3a;
    --ai-ink: #b8b0f5;
    --warm-tint: #2a2112;
    --warm-ink: #f0c060;
    --ok: #3ccf7f;
    --ok-tint: #11291c;
    --on-ok: #08140d;
    --series-1: #3987e5;
    --series-2: #199e70;
    --series-3: #9085e9;
    --series-4: #c98500;
  }
}
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"])[data-theme="dark"] {
  --bg: #111113;
  --bg-soft: #17171a;
  --surface: #1c1c20;
  --surface-2: #24242a;
  --line: #2c2c33;
  --line-strong: #3d3d46;
  --ink: #f3f2f4;
  --ink-2: #c6c4cc;
  --ink-3: #9d9ba5;
  --brand: #ff4d5e;
  --primary: #d7263d;
  --primary-hover: #b91d32;
  --accent-ink: #ff7380;
  --brand-tint: #2b1519;
 
  --trust: #3987e5;
  --trust-tint: #15233a;
  --trust-ink: #8dbaf2;
  --ai: #9085e9;
  --ai-tint: #211d3a;
  --ai-ink: #b8b0f5;
  --warm-tint: #2a2112;
  --warm-ink: #f0c060;
  --ok: #3ccf7f;
  --ok-tint: #11291c;
  --on-ok: #08140d;
  --series-1: #3987e5;
  --series-2: #199e70;
  --series-3: #9085e9;
  --series-4: #c98500;
}
/* Same in light and dark: white on the brand colour, errors in the accent colour */
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) {
  --on-brand: #ffffff;
  --accent-word: var(--brand);
  --danger: var(--accent-ink);
  --danger-tint: var(--brand-tint);
  --toggle-on: #19804a;
  --on-toggle: #ffffff;
}

:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .brand { font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .btn-primary { box-shadow: 0 8px 20px -10px rgb(215 38 61 / 0.7); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .cta-box { background: var(--primary); color: #fff; }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .btn-white { color: #b01b2f; }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .cta-box::before {
  background:
    radial-gradient(70% 90% at 50% -20%, rgb(255 255 255 / 0.14), transparent 60%),
    radial-gradient(50% 70% at 100% 110%, rgb(110 0 20 / 0.35), transparent 70%);
}
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .btn-white:hover { background: #fff1f2; }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .assurances .i,
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .gb-kicker,
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .memory-lock { color: var(--ok); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .tone-ok { background: var(--ok-tint); color: var(--ok); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .tone-warm { background: var(--warm-tint); color: var(--warm-ink); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .milestone-badge { box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent); }
/* Brand-red glows behind the hero glass */
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .orb { opacity: 0.4; filter: blur(46px); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .orb-a { background: radial-gradient(circle, #ff9aa8, rgb(226 55 68 / 0.55) 55%, transparent 72%); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .orb-b { background: radial-gradient(circle, #ffc4cc, rgb(226 55 68 / 0.38) 55%, transparent 72%); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"]) .orb-c { background: radial-gradient(circle, #ffd9de, rgb(240 100 108 / 0.36) 55%, transparent 72%); }
:root:is([data-preset="vibe"], [data-preset="nostalgia"], [data-preset="clarity"], [data-preset="junior"])[data-theme="dark"] .orb { opacity: 0.32; }

/* ==========================================================================
   Presets
   ========================================================================== */

/* ---------- Vibe (inspired by Gen Z): bold type, sticker energy, neo-brutal edges ---------- */

:root[data-preset="vibe"] {
  --font-display: "Bricolage Grotesque", var(--font);
  --radius-lg: 26px;
  --radius-xl: 36px;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bob-dur: 4.5s;
  --bob-dist: -10px;
  --pop: #c6f432;
}
:root[data-preset="vibe"]:not([data-theme="dark"]) {
  --bg: #fff8f2;
  --bg-soft: #fff0e6;
  --brand: #ff2d55;
  --primary: #e0193a;
  --primary-hover: #b8102c;
  --accent-ink: #c8102e;
  --brand-tint: #ffe1e7;
  --ai: #7c3aed;
  --ai-tint: #f1e8ff;
  --ai-ink: #5b21b6;
}
:root[data-preset="vibe"][data-theme="dark"] {
  --bg: #0d0d10;
  --bg-soft: #15151a;
  --surface: #1a1a20;
  --brand: #ff4d6d;
  --brand-tint: #3a1220;
  --ai: #a78bfa;
  --ai-tint: #241a3d;
  --ai-ink: #c4b5fd;
}
:root[data-preset="vibe"] .hero h1 { letter-spacing: -0.035em; }
:root[data-preset="vibe"] .accent {
  padding: 0 0.08em;
  background: linear-gradient(transparent 58%, var(--pop) 58% 92%, transparent 92%);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:root[data-preset="vibe"][data-theme="dark"] .accent { background: none; color: var(--pop); }
:root[data-preset="vibe"] .hero::before {
  background:
    radial-gradient(closest-side at 32% 50%, var(--brand-tint), transparent),
    radial-gradient(closest-side at 70% 46%, color-mix(in srgb, var(--pop) 35%, transparent), transparent);
}
:root[data-preset="vibe"] :is(.card, .trust-card, .app, .ai-demo, .eyebrow, .provider-list li, .chip, .btn-secondary, .allow-list div, .dupes, .bulk) {
  border: 2px solid var(--ink);
}
:root[data-preset="vibe"] :is(.card, .trust-card, .app, .ai-demo) { box-shadow: 5px 5px 0 var(--ink); }
:root[data-preset="vibe"] .card:hover { transform: translate(-2px, -2px) rotate(-0.4deg); box-shadow: 7px 7px 0 var(--ink); }
:root[data-preset="vibe"] .btn { border-radius: 999px; }
:root[data-preset="vibe"] .btn-primary { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-preset="vibe"] .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
:root[data-preset="vibe"] .btn-sm { box-shadow: none; }
:root[data-preset="vibe"] .kicker {
  padding: 4px 12px;
  border: 2px solid #1b1a1c;
  border-radius: 999px;
  background: var(--pop);
  color: #1b1a1c;
}
:root[data-preset="vibe"] .pill { background: var(--pop); }
:root[data-preset="vibe"] .ph:not(.blurry) { filter: saturate(1.15); }
:root[data-preset="vibe"] .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--pop); color: #1b1a1c; }

/* ---------- Nostalgia (inspired by millennials): warm paper, serif, polaroids ---------- */

:root[data-preset="nostalgia"] {
  --font-display: "Fraunces", Georgia, serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --bob-dur: 10s;
  --bob-dist: -4px;
}
:root[data-preset="nostalgia"]:not([data-theme="dark"]) {
  --bg: #f8f1e7;
  --bg-soft: #f1e7d8;
  --surface: #fffaf2;
  --surface-2: #f3eadc;
  --line: #e6d9c6;
  --line-strong: #d4c2a8;
  --ink: #2b2118;
  --ink-2: #5a4a3b;
  --ink-3: #7a6857;
  --brand: #d4483f;
  --primary: #c23a32;
  --primary-hover: #9e2c25;
  --accent-ink: #b0342c;
  --brand-tint: #f6e0d5;
  --ai: #7a5ea8;
  --ai-tint: #efe6f6;
  --ai-ink: #5c4386;
  --trust-tint: #e7eef5;
  --warm-tint: #f9ecd2;
}
:root[data-preset="nostalgia"][data-theme="dark"] {
  --bg: #17130f;
  --bg-soft: #1d1813;
  --surface: #221c16;
  --surface-2: #2a231c;
  --line: #382f26;
  --line-strong: #4a3f33;
  --ink: #f4ece1;
  --ink-2: #d2c5b4;
  --ink-3: #a89887;
  --brand: #f06a5e;
  --accent-ink: #f48a80;
  --brand-tint: #33201a;
  --ai-tint: #261f33;
}
:root[data-preset="nostalgia"] :is(h1, h2) { font-weight: 700; letter-spacing: -0.02em; }
:root[data-preset="nostalgia"] .accent { font-style: italic; font-weight: 600; }
:root[data-preset="nostalgia"] .kicker {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
:root[data-preset="nostalgia"] .hero::before { background: radial-gradient(closest-side, var(--warm-tint), transparent); }
:root[data-preset="nostalgia"] .ph:not(.blurry) { filter: sepia(0.22) saturate(0.9) contrast(0.97); }
/* Polaroid frames */
:root[data-preset="nostalgia"] .tiles .tile {
  border-radius: 3px;
  background: #fffdf8;
  box-shadow: 0 2px 8px -2px rgb(60 40 20 / 0.35);
}
:root[data-preset="nostalgia"] .tiles .tile .ph { inset: 5px 5px 16px; }
:root[data-preset="nostalgia"] .tiles .tile:nth-child(odd) { rotate: -1.2deg; }
:root[data-preset="nostalgia"] .tiles .tile:nth-child(even) { rotate: 1deg; }
:root[data-preset="nostalgia"] .memory-front { border: 6px solid #fffdf8; border-bottom-width: 22px; border-radius: 4px; }
:root[data-preset="nostalgia"] .memory-back { border-radius: 4px; }
:root[data-preset="nostalgia"] .memory-front::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 50%;
  width: 70px;
  height: 22px;
  translate: -50% 0;
  rotate: -3deg;
  background: rgb(240 226 196 / 0.85);
}

/* ---------- Clarity (inspired by Gen X and boomers): bigger text, strong contrast, calm ---------- */

:root[data-preset="clarity"] {
  font-size: 112.5%; /* all type is rem-based, so this scales every label */
  --font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
}
:root[data-preset="clarity"]:not([data-theme="dark"]) {
  --bg: #ffffff;
  --bg-soft: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #efeff1;
  --line: #cfcfd4;
  --line-strong: #9a9aa3;
  --ink: #0d0d0f;
  --ink-2: #2e2e33;
  --ink-3: #4a4a52;
  --brand: #c8102e;
  --primary: #c8102e;
  --primary-hover: #9c0c24;
  --accent-ink: #a50d26;
  --brand-tint: #fde8eb;
}
:root[data-preset="clarity"][data-theme="dark"] {
  --bg: #0b0b0c;
  --bg-soft: #121214;
  --surface: #161618;
  --line: #4a4a52;
  --line-strong: #6a6a74;
  --ink: #ffffff;
  --ink-2: #e4e4e7;
  --ink-3: #c4c4cc;
  --brand: #ff6b7a;
  --accent-ink: #ff8a96;
}
:root[data-preset="clarity"] :is(h1, h2) { font-weight: 700; letter-spacing: -0.015em; }
:root[data-preset="clarity"] .hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.08; }
:root[data-preset="clarity"] .hero::before, :root[data-preset="clarity"] .eyebrow-dot { display: none; }
:root[data-preset="clarity"] .btn { font-weight: 700; }
:root[data-preset="clarity"] .btn-lg { min-height: 56px; }
:root[data-preset="clarity"] .kicker { letter-spacing: 0.04em; }
:root[data-preset="clarity"] :focus-visible { outline-width: 4px; }
:root[data-preset="clarity"] .footer li a { text-decoration: underline; text-underline-offset: 3px; }
:root[data-preset="clarity"] .card:hover { transform: none; }

/* ---------- Junior (the brightest, simplest style): rounded, bright, roomy ---------- */

:root[data-preset="junior"] {
  --font: "Nunito", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --bob-dur: 6s;
  --bob-dist: -8px;
}
:root[data-preset="junior"]:not([data-theme="dark"]) {
  --bg: #f5f8ff;
  --bg-soft: #ecf2ff;
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --line: #dde5f3;
  --line-strong: #c3cfe4;
  --ink: #1a2035;
  --ink-2: #434b66;
  --ink-3: #5f6781;
  --brand: #ef3b4f;
  --primary: #d92640;
  --primary-hover: #b51c33;
  --accent-ink: #c41f38;
  --brand-tint: #ffe6ea;
  --trust-tint: #e3efff;
  --ai: #8b5cf6;
  --ai-tint: #f0e9ff;
  --ai-ink: #6d3fd6;
  --warm-tint: #fff4d6;
}
:root[data-preset="junior"][data-theme="dark"] {
  --bg: #0f1220;
  --bg-soft: #151a2b;
  --surface: #1a2033;
  --surface-2: #222a40;
  --line: #2c3550;
  --line-strong: #3d4866;
  --ink: #f2f5ff;
  --ink-2: #c9d0e6;
  --ink-3: #9ba5c2;
  --brand: #ff5a6c;
  --brand-tint: #3a1622;
  --trust-tint: #172a47;
  --ai-tint: #251c44;
  --warm-tint: #2e2612;
}
:root[data-preset="junior"] :is(h1, h2) { font-weight: 900; letter-spacing: -0.02em; }
:root[data-preset="junior"] .hero::before {
  background:
    radial-gradient(closest-side at 35% 50%, var(--trust-tint), transparent),
    radial-gradient(closest-side at 68% 45%, var(--warm-tint), transparent);
}
:root[data-preset="junior"] .btn { border-radius: 999px; }
:root[data-preset="junior"] .btn-lg { min-height: 58px; padding: 0 28px; }
:root[data-preset="junior"] .chip { min-height: 48px; }
:root[data-preset="junior"] .tile { border-radius: 16px; }
:root[data-preset="junior"] .card { border-width: 2px; }
:root[data-preset="junior"] .bento .card:nth-child(1) { border-top: 6px solid var(--brand); }
:root[data-preset="junior"] .bento .card:nth-child(2) { border-top: 6px solid var(--ai); }
:root[data-preset="junior"] .bento .card:nth-child(3) { border-top: 6px solid var(--trust); }
:root[data-preset="junior"] .bento .card:nth-child(4) { border-top: 6px solid #f5b400; }
:root[data-preset="junior"] .bento .card:nth-child(5) { border-top: 6px solid #19a974; }