/* Guitar Buddha — Marketing site styles
   Theme tokens come from ../themes/{strata,terra,obsidian,sand}.css
   (linked dynamically via <link id="theme-link">)
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--ch-900);
  color: var(--cr-100);
  font-family: var(--f-b);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── Type helpers ─────────────────────────────────────── */
.eye  { font-family: var(--f-m); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ru-500); }
.eye-sub { font-family: var(--f-m); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ch-500); }
.disp-xl { font-family: var(--f-d); font-weight: 700; font-size: clamp(48px, 7vw, 96px); line-height: 1.0; letter-spacing: -0.02em; color: var(--cr-100); }
.disp-lg { font-family: var(--f-d); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.015em; color: var(--cr-100); }
.disp-md { font-family: var(--f-d); font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.01em; color: var(--cr-100); }
.disp-sm { font-family: var(--f-d); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--cr-100); }
.caveat  { font-family: var(--f-h); font-weight: 500; font-style: italic; color: var(--ru-400); }
.body-lg { font-size: 19px; color: var(--ch-400); line-height: 1.6; }
.body-md { font-size: 16px; color: var(--ch-400); line-height: 1.65; }
.mono-tag { font-family: var(--f-m); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ch-500); }

/* ── Layout grid ───────────────────────────────────────── */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px) { .wrap { padding: 0 20px; } }

section { position: relative; }

/* ── Glass card recipe (matches app) ───────────────────── */
.glass {
  background: var(--glass-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-lg);
  border-radius: 20px;
}
.glass-strong {
  background: var(--glass-1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-xl);
  border-radius: 24px;
}

/* ═════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(30,33,36,0.85) 0%, rgba(30,33,36,0.5) 60%, transparent 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  padding: 18px 0;
}
.nav-brand { display: flex; align-items: center; gap: 14px; }
.nav-brand img { width: 44px; height: 44px; object-fit: contain; }
.nav-brand-text { font-family: var(--f-d); font-weight: 700; font-size: 22px; color: var(--cr-100); letter-spacing: -0.015em; }
.nav-links { display: flex; gap: 32px; margin-left: auto; }
.nav-links a {
  font-size: 16px; color: var(--ch-400); transition: color .2s;
  position: relative; padding: 4px 0;
}
.nav-links a:hover { color: var(--cr-100); }

.theme-swatches { display: flex; gap: 6px; padding: 4px; border-radius: 10px;
  background: var(--glass-3); border: 1px solid rgba(255,255,255,0.08); }
.theme-swatch {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  position: relative;
}
.theme-swatch:hover { transform: scale(1.1); }
.theme-swatch[aria-selected="true"] { box-shadow: 0 0 0 2px var(--ru-500); }
.theme-swatch[data-theme="strata"]   { background: linear-gradient(135deg,#1e2124,#3d4449); }
.theme-swatch[data-theme="terra"]    { background: linear-gradient(135deg,#282724,#4a4740); }
.theme-swatch[data-theme="obsidian"] { background: linear-gradient(135deg,#111110,#222120); }
.theme-swatch[data-theme="sand"]     { background: linear-gradient(135deg,#f7f3ed,#e0d9cc); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  transition: transform .15s, box-shadow .2s, filter .2s, background .2s;
  cursor: pointer; white-space: nowrap;
}
.btn-primary {
  background: var(--ru-500); color: #fff;
  box-shadow: 0 6px 20px rgba(184,100,62,0.35);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(184,100,62,0.45); }
.btn-ghost {
  background: var(--glass-2); color: var(--cr-100);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.btn-ghost:hover { background: var(--glass-1); transform: translateY(-1px); }

/* App store buttons */
.appstore {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 14px;
  background: var(--ch-900); color: var(--cr-100);
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform .15s, background .2s;
}
.appstore:hover { transform: translateY(-2px); background: var(--ch-800); }
.appstore svg { width: 26px; height: 26px; flex-shrink: 0; }
.appstore-lines { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.appstore-lines .small { font-size: 10px; letter-spacing: .04em; color: var(--ch-400); }
.appstore-lines .big   { font-size: 16px; font-weight: 600; }

/* ═════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  padding: 56px 0 96px;
  position: relative;
  background:
    radial-gradient(ellipse 800px 400px at 80% 10%, rgba(184,100,62,0.10), transparent 60%),
    radial-gradient(ellipse 600px 600px at 10% 60%, rgba(90,143,168,0.06), transparent 70%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }

.hero-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(184,100,62,0.1);
  border: 1px solid rgba(184,100,62,0.3);
  font-family: var(--f-m); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ru-400);
  margin-bottom: 28px;
}
.hero-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ru-500);
  box-shadow: 0 0 8px var(--ru-500);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.hero h1 { margin-bottom: 20px; max-width: 12ch; }
.hero h1 .hl { color: var(--ru-400); }
.hero-sub { font-size: 21px; color: var(--ch-400); line-height: 1.55; max-width: 38ch; margin-bottom: 14px; }
.hero-caveat { font-family: var(--f-h); font-style: italic; font-size: 26px; color: var(--ru-400); margin-bottom: 36px; }

.hero-form { display: flex; gap: 10px; max-width: 460px; margin-bottom: 18px; flex-wrap: wrap; }
.hero-form input[type="email"] {
  flex: 1; min-width: 220px;
  padding: 13px 18px; border-radius: 12px;
  background: var(--glass-2);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--cr-100); font-family: var(--f-b); font-size: 15px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hero-form input::placeholder { color: var(--ch-500); }
.hero-form input:focus { outline: none; border-color: var(--ru-500); box-shadow: 0 0 0 3px rgba(184,100,62,0.18); }
.hero-form-note { font-family: var(--f-m); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ch-500); }

/* Form error message (shown when /api/contact fails) */
.form-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(184,100,62,0.10);
  border: 1px solid rgba(184,100,62,0.35);
  border-radius: 10px;
  font-family: var(--f-m); font-size: 12px; letter-spacing: .04em;
  color: var(--ru-400);
  max-width: 460px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.form-error.show {
  opacity: 1;
  transform: translateY(0);
}
.footer-form ~ .form-error { margin-left: auto; margin-right: auto; }

.hero-cta-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; align-items: center; }

/* Hero visual: floating phone mockup with ambient blur */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.hero-visual::before {
  content: ''; position: absolute; inset: 10% -10% 10% -10%;
  background: radial-gradient(ellipse at center, rgba(184,100,62,0.18), transparent 65%);
  filter: blur(40px); z-index: 0;
}
.hero-mark {
  position: absolute; right: -40px; top: 40px;
  width: 280px; opacity: .08; z-index: 0; pointer-events: none;
}

/* ── Phone frame (marketing-scale) ─────────────────────── */
.phone-frame {
  width: 320px; height: 660px;
  background: var(--glass-bg);
  border-radius: 44px;
  border: 1.5px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-xl), 0 0 0 8px rgba(0,0,0,0.4), 0 60px 100px rgba(0,0,0,0.6);
  overflow: hidden; display: flex; flex-direction: column;
  position: relative; z-index: 1;
  transform: rotate(-2deg);
  flex-shrink: 0;
}
.phone-frame.r { transform: rotate(2deg); }
.phone-frame.no-rot { transform: none; }
.phone-sbar { display: flex; justify-content: space-between; padding: 14px 24px 0; flex-shrink: 0; }
.phone-sbar-time { font-size: 13px; font-weight: 600; color: var(--cr-100); }
.phone-sbar-icons { display: flex; gap: 5px; align-items: center; color: var(--cr-100); }
.phone-screen { flex: 1; padding: 18px 22px; overflow: hidden; display: flex; flex-direction: column; }

/* ═════════════════════════════════════════════════════════
   MANIFESTO
═══════════════════════════════════════════════════════════ */
.manifesto {
  padding: 120px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.manifesto .eye { margin-bottom: 24px; }
.manifesto-quote {
  font-family: var(--f-d); font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.15;
  max-width: 18ch; margin: 0 auto 36px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.manifesto-quote .accent { color: var(--ru-400); }
.manifesto-caveat {
  font-family: var(--f-h); font-style: italic;
  font-size: 32px; color: var(--ru-400);
  max-width: 32ch; margin: 0 auto;
}
.manifesto-divider {
  width: 60px; height: 1px; margin: 36px auto;
  background: var(--ru-500);
  position: relative;
}
.manifesto-divider::before, .manifesto-divider::after {
  content: ''; position: absolute; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--ru-500); transform: translateY(-50%);
}
.manifesto-divider::before { left: -10px; }
.manifesto-divider::after  { right: -10px; }

/* ═════════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════════ */
.features { padding: 120px 0 80px; }
.features-head { max-width: 720px; margin-bottom: 72px; }
.features-head .eye { margin-bottom: 18px; }
.features-head h2 { margin-bottom: 16px; }

.feature-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
@media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  padding: 32px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 360px;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
.feature-card .eye { margin-bottom: 16px; }
.feature-card h3 {
  font-family: var(--f-d); font-weight: 700;
  font-size: clamp(28px, 2.4vw, 36px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--cr-100);
  margin-bottom: 12px;
}
.feature-card p { color: var(--ch-400); font-size: 16px; line-height: 1.6; max-width: 36ch; }
.feature-illust {
  margin-top: auto; padding-top: 24px;
  display: flex; align-items: center; justify-content: flex-end;
}
.feature-illust svg { width: 100%; max-width: 220px; height: auto; }

/* Card spans */
.f-songs    { grid-column: span 7; }
.f-ideas    { grid-column: span 5; }
.f-jam      { grid-column: span 5; }
.f-tuner    { grid-column: span 4; }
.f-practice { grid-column: span 3; }
@media (max-width: 880px) {
  .f-songs, .f-ideas, .f-jam, .f-tuner, .f-practice { grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════════════════
   ATMOSPHERE: 3-phone band
═══════════════════════════════════════════════════════════ */
.atmosphere {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 1000px 400px at 50% 0%, rgba(184,100,62,0.08), transparent 60%);
  text-align: center;
  overflow: hidden;
}
.atmosphere .eye { margin-bottom: 18px; }
.atmosphere h2 { margin: 0 auto 16px; max-width: 22ch; }
.atmosphere p { color: var(--ch-400); font-size: 18px; max-width: 52ch; margin: 0 auto 64px; }

.phone-band {
  display: flex; gap: 24px; justify-content: center; align-items: center;
  padding: 0 16px;
  flex-wrap: wrap;
}
.phone-band .phone-frame { transform: rotate(-3deg); }
.phone-band .phone-frame:nth-child(2) { transform: rotate(0deg) translateY(-20px); z-index: 2; }
.phone-band .phone-frame:nth-child(3) { transform: rotate(3deg); }

/* ═════════════════════════════════════════════════════════
   PRIVACY / LOCAL-FIRST
═══════════════════════════════════════════════════════════ */
.privacy { padding: 120px 0; }
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 880px) { .privacy-grid { grid-template-columns: 1fr; gap: 48px; } }
.privacy h2 { margin: 14px 0 20px; }
.privacy p { color: var(--ch-400); font-size: 18px; line-height: 1.65; margin-bottom: 14px; max-width: 44ch; }

.privacy-visual {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.privacy-visual svg { width: 100%; max-width: 420px; height: auto; }

.privacy-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.privacy-list li { display: flex; align-items: flex-start; gap: 14px; }
.privacy-list .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ru-500);
  flex-shrink: 0; margin-top: 9px;
  box-shadow: 0 0 8px rgba(184,100,62,0.5);
}
.privacy-list strong { color: var(--cr-100); font-weight: 600; }

/* ═════════════════════════════════════════════════════════
   PRICING / TIP JAR
═══════════════════════════════════════════════════════════ */
.pricing {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 1000px 500px at 50% 50%, rgba(184,100,62,0.10), transparent 70%);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pricing-head { max-width: 720px; margin: 0 auto 56px; }
.pricing-head .eye { margin-bottom: 18px; }
.pricing-head h2 { margin-bottom: 16px; }
.pricing-head p { color: var(--ch-400); font-size: 18px; line-height: 1.6; }

.pricing-banner {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 18px 28px;
  background: var(--glass-2);
  border: 1px solid rgba(184,100,62,0.25);
  border-radius: 16px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  margin-bottom: 56px;
}
.pricing-banner .free {
  font-family: var(--f-d); font-weight: 700; font-size: 28px;
  color: var(--cr-100); letter-spacing: -0.01em;
}
.pricing-banner .pb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ru-500); }
.pricing-banner .sub {
  font-family: var(--f-m); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ch-400);
}

.tip-jar { max-width: 920px; margin: 0 auto; }
.tip-jar-label {
  font-family: var(--f-h); font-style: italic; font-size: 26px;
  color: var(--ru-400); margin-bottom: 28px;
}
.tip-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 720px) { .tip-tiers { grid-template-columns: 1fr; } }
.tip-tier {
  padding: 32px 24px;
  background: var(--glass-2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  text-align: center;
  cursor: pointer;
}
.tip-tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(184,100,62,0.4);
}
.tip-tier .icon { font-size: 36px; line-height: 1; margin-bottom: 16px; }
.tip-tier .tip-icon {
  width: 56px; height: 56px;
  display: block; margin: 0 auto 18px;
}
.tip-tier .amount {
  font-family: var(--f-d); font-weight: 700; font-size: 32px;
  color: var(--cr-100); letter-spacing: -0.01em; line-height: 1;
  margin-bottom: 8px;
}
.tip-tier .name {
  font-family: var(--f-m); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ru-400);
}
.pricing-foot {
  margin-top: 48px;
  font-family: var(--f-h); font-style: italic; font-size: 24px;
  color: var(--ch-400);
}

/* ═════════════════════════════════════════════════════════
   THEMES SHOWCASE
═══════════════════════════════════════════════════════════ */
.themes-section {
  padding: 120px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.themes-head { text-align: center; max-width: 720px; margin: 0 auto 72px; }
.themes-head .eye { margin-bottom: 18px; }
.themes-head h2 { margin-bottom: 16px; }
.themes-head p { color: var(--ch-400); font-size: 18px; }

.themes-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 880px) { .themes-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .themes-grid { grid-template-columns: 1fr; } }

.theme-card {
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-md);
  transition: transform .2s, box-shadow .2s;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column;
}
.theme-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.theme-card-preview {
  padding: 28px 22px 0; height: 240px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.theme-card-preview .eye-mini { font-family: var(--f-m); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.theme-card-preview .head-mini { font-family: var(--f-d); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.theme-card-preview .sub-mini { font-family: var(--f-h); font-size: 17px; font-style: italic; margin-bottom: 8px; }
.theme-card-preview .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-family: var(--f-m); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.theme-card-preview .chord-row { display: flex; gap: 6px; margin-top: auto; padding-bottom: 18px; }
.theme-card-preview .chord-chip { padding: 6px 10px; border-radius: 8px; font-family: var(--f-m); font-size: 11px; }
.theme-card-body { padding: 18px 22px 20px; }
.theme-card-name { font-family: var(--f-d); font-weight: 700; font-size: 18px; color: var(--cr-100); margin-bottom: 4px; }
.theme-card-desc { font-size: 13px; color: var(--ch-400); }

/* Theme card per-theme palette (these are STATIC previews — independent of selected theme) */
.tc-strata   { background: linear-gradient(165deg,#3d4449 0%,#2a2d32 40%,#35393e 100%); }
.tc-strata   .head-mini { color: #e8dfd0; } .tc-strata .eye-mini { color: #b8643e; }
.tc-strata   .sub-mini  { color: #d07d56; } .tc-strata .pill { background: rgba(184,100,62,0.12); color: #d07d56; border:1px solid rgba(184,100,62,0.3); }
.tc-strata   .chord-chip { background: rgba(255,255,255,0.06); color: #e8dfd0; border: 1px solid rgba(255,255,255,0.1); }

.tc-terra    { background: linear-gradient(165deg,#4a4740 0%,#393830 40%,#42403a 100%); }
.tc-terra    .head-mini { color: #f0e3cf; } .tc-terra .eye-mini { color: #c47a52; }
.tc-terra    .sub-mini  { color: #d99878; } .tc-terra .pill { background: rgba(196,122,82,0.14); color: #d99878; border:1px solid rgba(196,122,82,0.3); }
.tc-terra    .chord-chip { background: rgba(255,255,255,0.05); color: #f0e3cf; border: 1px solid rgba(255,255,255,0.08); }

.tc-obsidian { background: linear-gradient(165deg,#1A1918 0%,#111110 40%,#191817 100%); }
.tc-obsidian .head-mini { color: #ebe1cf; } .tc-obsidian .eye-mini { color: #c06b42; }
.tc-obsidian .sub-mini  { color: #d8825b; } .tc-obsidian .pill { background: rgba(192,107,66,0.14); color: #d8825b; border:1px solid rgba(192,107,66,0.3); }
.tc-obsidian .chord-chip { background: rgba(255,255,255,0.04); color: #ebe1cf; border: 1px solid rgba(255,255,255,0.06); }

.tc-sand     { background: linear-gradient(165deg,#f7f3ed 0%,#ede8df 40%,#e8e1d3 100%); }
.tc-sand     .head-mini { color: #3a3128; } .tc-sand .eye-mini { color: #a05a37; }
.tc-sand     .sub-mini  { color: #a05a37; } .tc-sand .pill { background: rgba(160,90,55,0.12); color: #a05a37; border:1px solid rgba(160,90,55,0.3); }
.tc-sand     .chord-chip { background: rgba(58,49,40,0.06); color: #3a3128; border: 1px solid rgba(58,49,40,0.1); }

/* ═════════════════════════════════════════════════════════
   MAKER'S NOTE
═══════════════════════════════════════════════════════════ */
.maker {
  padding: 120px 0;
  text-align: center;
}
.maker-inner { max-width: 640px; margin: 0 auto; }
.maker .eye { margin-bottom: 24px; }
.maker-text {
  font-family: var(--f-d); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4;
  color: var(--cr-100); margin-bottom: 28px;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.maker-text em { color: var(--ru-400); font-style: italic; }
.maker-sig { font-family: var(--f-h); font-style: italic; font-size: 32px; color: var(--ru-400); }

/* ═════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.faq { padding: 80px 0 120px; }
.faq-head { text-align: center; margin-bottom: 64px; }
.faq-head .eye { margin-bottom: 16px; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--glass-2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; text-align: left;
  font-family: var(--f-d); font-weight: 700; font-size: 19px;
  color: var(--cr-100); letter-spacing: -0.005em;
}
.faq-q-icon {
  width: 24px; height: 24px; flex-shrink: 0; margin-left: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
  transition: transform .25s, background .2s;
  color: var(--ru-400);
}
.faq-item[open] .faq-q-icon { transform: rotate(45deg); background: rgba(184,100,62,0.12); }
.faq-a {
  padding: 0 26px 22px;
  color: var(--ch-400); font-size: 16px; line-height: 1.7;
  max-width: 64ch;
}
.faq-q::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ═════════════════════════════════════════════════════════
   FOOTER / WAITLIST
═══════════════════════════════════════════════════════════ */
.footer {
  padding: 120px 0 56px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(ellipse 700px 500px at 50% 0%, rgba(184,100,62,0.08), transparent 70%);
  text-align: center;
}
.footer-mark { width: 88px; opacity: .85; margin: 0 auto 32px; }
.footer h2 { margin-bottom: 18px; }
.footer-sub { font-size: 19px; color: var(--ch-400); margin-bottom: 36px; max-width: 44ch; margin-left: auto; margin-right: auto; }
.footer-form {
  display: flex; gap: 10px; max-width: 480px; margin: 0 auto 56px;
  flex-wrap: wrap; justify-content: center;
}
.footer-form input[type="email"] {
  flex: 1; min-width: 240px;
  padding: 14px 20px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid rgba(255,255,255,0.14);
  color: var(--cr-100); font-size: 15px; font-family: var(--f-b);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.footer-form input:focus { outline: none; border-color: var(--ru-500); box-shadow: 0 0 0 3px rgba(184,100,62,0.18); }
.footer-stores { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }

/* Instagram variant of the appstore-style pill */
.appstore-ig {
  background: linear-gradient(135deg, #2a2118 0%, #1e1a16 100%);
  border-color: rgba(184,100,62,0.3);
}
.appstore-ig:hover {
  background: linear-gradient(135deg, #3d2a1c 0%, #2a2118 100%);
  border-color: rgba(184,100,62,0.5);
}
.appstore-ig svg { color: var(--ru-400); width: 24px; height: 24px; }

.footer-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--f-m); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ch-500); flex-wrap: wrap; gap: 16px;
}
.footer-bar a { color: var(--ch-500); transition: color .2s; }
.footer-bar a:hover { color: var(--ru-400); }
.footer-bar-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.footer-social { display: inline-flex; align-items: center; gap: 6px; }
.footer-social svg { transition: color .2s; }
.footer-domain { color: var(--ru-400) !important; }

/* ── Toast (form success feedback) ─────────────────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ch-800); color: var(--cr-100);
  padding: 14px 24px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  border: 1px solid rgba(184,100,62,0.4);
  box-shadow: var(--shadow-xl);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 100;
  display: flex; align-items: center; gap: 12px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .check {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ru-500);
  display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   SAND THEME OVERRIDES
   Sand inverts the scale (light bg, dark text). All copy
   colored cr-100/cream and all white-tinted borders need
   to be remapped for readability on parchment.
═══════════════════════════════════════════════════════════ */

html[data-theme="sand"] body { color: var(--ch-300); }

/* Primary copy — anything that was cream becomes deep espresso */
html[data-theme="sand"] .disp-xl,
html[data-theme="sand"] .disp-lg,
html[data-theme="sand"] .disp-md,
html[data-theme="sand"] .disp-sm,
html[data-theme="sand"] .nav-brand-text,
html[data-theme="sand"] .hero h1,
html[data-theme="sand"] .hero h1 .hl,
html[data-theme="sand"] .feature-card h3,
html[data-theme="sand"] .manifesto-quote,
html[data-theme="sand"] .theme-card-name,
html[data-theme="sand"] .maker-text,
html[data-theme="sand"] .faq-q,
html[data-theme="sand"] .pricing-banner .free,
html[data-theme="sand"] .tip-tier .amount,
html[data-theme="sand"] .privacy-list strong,
html[data-theme="sand"] .footer h2,
html[data-theme="sand"] .atmosphere h2 {
  color: var(--ch-300);
}

/* Hero highlight & caveat & secondary copy — keep rust accents */
html[data-theme="sand"] .hero h1 .hl { color: var(--ru-600); }
html[data-theme="sand"] .manifesto-quote .accent { color: var(--ru-600); }
html[data-theme="sand"] .maker-text em { color: var(--ru-600); }

/* Body / secondary copy — ch-400 (dark bark) is already dark enough, but
   the hero-sub and feature-card p inherit fine. Lift ch-500 slightly. */
html[data-theme="sand"] .hero-sub,
html[data-theme="sand"] .feature-card p,
html[data-theme="sand"] .privacy p,
html[data-theme="sand"] .privacy-list li,
html[data-theme="sand"] .themes-head p,
html[data-theme="sand"] .atmosphere p,
html[data-theme="sand"] .pricing-head p,
html[data-theme="sand"] .footer-sub,
html[data-theme="sand"] .faq-a {
  color: var(--ch-400);
}

/* Theme card descriptions */
html[data-theme="sand"] .theme-card-desc { color: var(--ch-400); }

/* Pricing banner sub label and footer caveat */
html[data-theme="sand"] .pricing-banner .sub,
html[data-theme="sand"] .pricing-foot { color: var(--ch-500); }

/* Mono-tag eyebrows (ch-500 already works — driftwood on parchment) */
html[data-theme="sand"] .mono-tag,
html[data-theme="sand"] .eye-sub,
html[data-theme="sand"] .hero-form-note,
html[data-theme="sand"] .nav-links a {
  color: var(--ch-500);
}

html[data-theme="sand"] .nav-links a:hover { color: var(--ch-300); }

/* Borders — white-tinted borders disappear on light bg. Use dark alpha. */
html[data-theme="sand"] .glass,
html[data-theme="sand"] .glass-strong,
html[data-theme="sand"] .phone-frame,
html[data-theme="sand"] .feature-card,
html[data-theme="sand"] .faq-item,
html[data-theme="sand"] .theme-card,
html[data-theme="sand"] .tip-tier,
html[data-theme="sand"] .hero-form input[type="email"],
html[data-theme="sand"] .footer-form input[type="email"],
html[data-theme="sand"] .btn-ghost {
  border-color: rgba(58,49,40,0.12);
}
html[data-theme="sand"] .theme-swatches { border-color: rgba(58,49,40,0.10); }
html[data-theme="sand"] .pricing-banner { border-color: rgba(184,100,62,0.35); }
html[data-theme="sand"] .faq-q-icon { border-color: rgba(58,49,40,0.20); }

/* Top-section dividers (currently white alphas) */
html[data-theme="sand"] .manifesto,
html[data-theme="sand"] .themes-section,
html[data-theme="sand"] .footer,
html[data-theme="sand"] .footer-bar,
html[data-theme="sand"] .pricing {
  border-color: rgba(58,49,40,0.08);
}

/* Nav background — make it warm parchment, not the dark gradient */
html[data-theme="sand"] .nav {
  background: linear-gradient(180deg, rgba(247,243,237,0.92) 0%, rgba(247,243,237,0.6) 60%, transparent 100%);
}

/* Form inputs — placeholder & focus */
html[data-theme="sand"] .hero-form input[type="email"],
html[data-theme="sand"] .footer-form input[type="email"] {
  color: var(--ch-300);
  background: rgba(255,252,246,0.7);
}
html[data-theme="sand"] .hero-form input::placeholder,
html[data-theme="sand"] .footer-form input::placeholder {
  color: var(--ch-500);
}

/* Ghost button (none currently used but ensure readable) */
html[data-theme="sand"] .btn-ghost { color: var(--ch-300); background: rgba(255,252,246,0.7); }
html[data-theme="sand"] .btn-ghost:hover { background: rgba(255,252,246,0.9); }

/* App Store buttons — keep dark always (they're store-style stickers) */
html[data-theme="sand"] .appstore {
  background: #1e1a12;
  color: #faf7f2;
  border-color: rgba(0,0,0,0.2);
}
html[data-theme="sand"] .appstore:hover { background: #2a2118; }
html[data-theme="sand"] .appstore-lines .small { color: #c4c0b8; }

/* Toast — already dark, but ensure readable */
html[data-theme="sand"] .toast {
  background: #2a2118;
  color: #faf7f2;
}

/* Hero status pill — bump contrast */
html[data-theme="sand"] .hero-status {
  background: rgba(184,100,62,0.12);
  border-color: rgba(184,100,62,0.4);
  color: var(--ru-600);
}

/* Privacy SVG inner phone fill — was ch-800 (dark in dark themes,
   parchment in sand). Keep it darker for contrast against the halo. */
html[data-theme="sand"] .privacy-visual svg rect[x="170"] {
  fill: #e0d9cc;
}

/* Toast check icon and dots/borders that use rust — already fine */

/* Footer bar links */
html[data-theme="sand"] .footer-bar { color: var(--ch-500); }
html[data-theme="sand"] .footer-bar a { color: var(--ch-500); }
html[data-theme="sand"] .footer-bar a:hover { color: var(--ru-600); }
html[data-theme="sand"] .footer-domain { color: var(--ru-600) !important; }

/* Tip jar label (Caveat) — keep rust but slightly deeper for contrast */
html[data-theme="sand"] .tip-jar-label,
html[data-theme="sand"] .hero-caveat,
html[data-theme="sand"] .manifesto-caveat,
html[data-theme="sand"] .maker-sig { color: var(--ru-600); }
html[data-theme="sand"] .tip-tier .name { color: var(--ru-600); }

/* Feature illust SVG colors — they hardcode var(--ru-500), still fine on light */
/* but the chord label text inside the practice SVG uses fill="var(--ru-500)" — fine */

/* Inline cr-100 / cr-200 colors used in phone mockups */
html[data-theme="sand"] [style*="color:var(--cr-100)"],
html[data-theme="sand"] [style*="color: var(--cr-100)"] { color: var(--ch-300) !important; }
html[data-theme="sand"] [style*="color:var(--cr-200)"],
html[data-theme="sand"] [style*="color: var(--cr-200)"] { color: var(--ch-400) !important; }

/* Inline ch-800 backgrounds inside phone mockups (action-icon-wrap etc.) —
   in sand, ch-800 is light parchment which disappears. Tint to warmer stone. */
html[data-theme="sand"] [style*="background:var(--ch-800)"],
html[data-theme="sand"] [style*="background: var(--ch-800)"] { background: rgba(184,100,62,0.10) !important; }

/* Vinyl record gradients inside phone mockups stay dark (vinyl is black) — OK */