/* ============================================================
   THE STARPRINT LAUNCH CALENDAR — sales page
   Mystic in the texture, ruthless in the structure.
   Built on The Starprints design-system tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scrollbar-width: thin; scrollbar-color: var(--gold-600) var(--cosmic-950); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cosmic-950); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-400), var(--gold-700)); border-radius: 99px; border: 3px solid var(--cosmic-950); }

body {
  margin: 0;
  background: var(--cosmic-950);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

/* ---------- velvet cosmic backdrop — FIXED behind whole page ---------- */
.page { position: relative; background: var(--cosmic-950); }
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,6,13,0.55) 0%, rgba(7,6,13,0.66) 50%, rgba(7,6,13,0.78) 100%),
    url('assets/constellations-bg.png') center top / cover no-repeat,
    var(--cosmic-950);
}
/* faint velvet grain over the sky */
.sky::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }

/* ---------- scattered gold sparkles ---------- */
.sparkle { position: absolute; pointer-events: none; color: var(--gold-300); opacity: 0.55; animation: twinkle 5s var(--ease-soft) infinite; z-index: 1; }
@keyframes twinkle { 0%,100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.7; transform: scale(1.08); } }
.twinkle-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tw { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, var(--star-white) 0%, rgba(246,236,200,0.5) 40%, rgba(255,255,255,0) 72%);
  opacity: 0.16; }
@media (prefers-reduced-motion: no-preference) {
  .tw { animation: twk var(--twd, 4s) var(--ease-soft) infinite; animation-delay: var(--twdelay, 0s); }
}
@keyframes twk { 0%,100% { opacity: 0.1; transform: scale(0.6); } 50% { opacity: 0.5; transform: scale(1); } }
.tw.flash { opacity: 1 !important; transform: scale(1.8) !important;
  background: radial-gradient(circle, #fff 0%, var(--gold-100) 45%, rgba(255,255,255,0) 75%);
  box-shadow: 0 0 9px 2px rgba(246,236,200,0.75); }

/* ---------- type roles ---------- */
.eyebrow {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-400); margin: 0;
}
.gold-foil {
  background: linear-gradient(176deg, var(--gold-100) 0%, var(--gold-400) 46%, var(--gold-600) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1, h2, h3 { margin: 0; }
.display {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  line-height: 1.04; letter-spacing: -0.005em; text-wrap: balance;
}
.lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted-dark); margin: 0; }
.body-copy { font-size: var(--text-md); font-weight: var(--fw-medium); line-height: 1.75; color: rgba(251,249,244,0.92); margin: 0; }
.body-copy + .body-copy { margin-top: 1.4em; }

/* ---------- filigree divider ---------- */
.filigree { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-500); }
.filigree::before, .filigree::after { content: ""; height: 1px; width: clamp(40px, 14vw, 130px); background: linear-gradient(90deg, transparent, var(--gold-600)); }
.filigree::after { background: linear-gradient(270deg, transparent, var(--gold-600)); }

/* ---------- section rhythm ---------- */
section { position: relative; }
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec-tight { padding: clamp(40px, 6vw, 76px) 0; }
.sec-argument { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(28px, 4vw, 48px); }
.sec.concept { padding-top: clamp(28px, 4vw, 48px); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 150px) 0 clamp(60px, 8vw, 96px); }
/* soft headline-side veil over the fixed sky for copy contrast */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(95deg, rgba(7,6,13,0.7) 14%, rgba(7,6,13,0.3) 46%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.masthead { text-align: center; position: relative; z-index: 1; margin-bottom: clamp(48px, 7vw, 88px); }
.masthead-logo-wrap { position: relative; display: inline-block; margin: 0 auto 16px; }
.masthead-logo { display: block; width: clamp(280px, 40vw, 460px); height: auto; margin: 0 auto 16px; filter: drop-shadow(0 4px 22px rgba(201,162,39,0.25)); }
.masthead-cmark { position: absolute; left: 99%; bottom: 14%; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: clamp(9px, 1.2vw, 14px); color: var(--gold-300); line-height: 1; }
.masthead-name { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.42em; text-indent: 0.42em; font-size: clamp(var(--text-base), 2.2vw, var(--text-xl)); font-weight: var(--fw-semibold); color: var(--gold-200); line-height: 1.2; }
.hero h1 { font-size: 54px; }
.hero h1 .line2 { display: block; padding-bottom: 0.1em; }
.hero-sub { margin-top: 22px; max-width: none; text-align: left; color: var(--star-white); }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cal { order: -1; max-width: 440px; margin: 0 auto; }
}
.hero-cal { align-self: start; }

/* ---------- hero founder portrait (replaces calendar art) ---------- */
.hero-portrait { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; align-self: start; box-shadow: var(--shadow-lg), var(--shadow-inset-hairline); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transform: scale(1.12); transform-origin: 50% 40%; }
.hero-portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(12,10,22,0.74)); }
.hero-portrait-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 20px 22px; }
.hero-portrait-name { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.08; color: var(--star-white); }
.hero-portrait-role { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--gold-300); }

/* ---------- the calendar / lightning hero artwork ---------- */
.cal {
  position: relative; background: var(--mist-100);
  border-radius: var(--radius-lg); padding: 22px 22px 26px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(201,162,39,0.25);
}
.cal-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.cal-month { font-family: var(--font-display); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-sm); color: var(--navy-800); }
.cal-yr { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--ink-700); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.cal-dow span { text-align: center; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-700); font-weight: var(--fw-heavy); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-xs);
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 4px 5px;
  font-size: 10px; font-weight: var(--fw-bold); color: var(--ink-700);
  background: rgba(26,22,32,0.05); box-shadow: inset 0 0 0 1px rgba(26,22,32,0.10);
}
.cal-cell.empty { background: transparent; box-shadow: none; }
.cal-cell.bolt { color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.45); cursor: pointer; transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft); }
.cal-cell.bolt:hover { transform: scale(1.12); z-index: 4; box-shadow: inset 0 0 0 1px var(--gold-400), 0 0 14px rgba(246,236,200,0.5); }
.cal-cell.bolt .glyph { position: absolute; inset: 0; display: grid; place-items: center; }
.cal-cell.bolt svg { width: 46%; height: 46%; filter: drop-shadow(0 0 8px rgba(201,162,39,0.65)); }
.cal-cell.bolt-gold { background: radial-gradient(circle at 50% 40%, rgba(201,162,39,0.22), rgba(201,162,39,0.04)); }
.cal-cell.bolt-gold svg { fill: var(--gold-600); }
.cal-cell.bolt-teal { background: radial-gradient(circle at 50% 40%, rgba(79,163,168,0.28), rgba(79,163,168,0.05)); }
.cal-cell.bolt-teal svg { fill: var(--aurora-teal); filter: drop-shadow(0 0 9px rgba(79,163,168,0.6)); }
.cal-cell.bolt-magenta { background: radial-gradient(circle at 50% 40%, rgba(193,120,164,0.28), rgba(193,120,164,0.05)); }
.cal-cell.bolt-magenta svg { fill: var(--aurora-magenta); filter: drop-shadow(0 0 9px rgba(193,120,164,0.6)); }
.cal-cell.bolt .num { position: relative; z-index: 2; color: var(--ink-900); font-weight: var(--fw-bold); }
.cal-caption { margin-top: 16px; text-align: center; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--ink-700); }
.cal-caption b { color: var(--gold-600); font-weight: var(--fw-bold); }
.cal-caption-2 { display: block; margin-top: 3px; color: var(--ink-700); }

/* pulse for hero bolts */
@media (prefers-reduced-motion: no-preference) {
  .cal-cell.bolt svg { animation: boltpulse 3.4s var(--ease-soft) infinite; }
  .cal-cell.bolt:nth-of-type(odd) svg { animation-delay: 1.1s; }
}
@keyframes boltpulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* glitter on hover */
.cal-cell.bolt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.95) 0, transparent 12%),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,0.85) 0, transparent 10%),
    radial-gradient(circle at 35% 75%, rgba(246,236,200,0.9) 0, transparent 11%),
    radial-gradient(circle at 70% 72%, rgba(255,255,255,0.8) 0, transparent 9%);
}
@media (prefers-reduced-motion: no-preference) {
  .cal-cell.bolt:hover svg { animation: glitter 0.55s var(--ease-soft) infinite; }
  .cal-cell.bolt:hover::after { animation: glitterDots 0.5s steps(2, jump-none) infinite; }
}
@keyframes glitter {
  0%,100% { transform: scale(1) rotate(-4deg); filter: brightness(1.15) drop-shadow(0 0 6px rgba(246,236,200,0.7)); }
  50% { transform: scale(1.14) rotate(4deg); filter: brightness(1.85) drop-shadow(0 0 13px rgba(255,255,255,0.95)); }
}
@keyframes glitterDots {
  0% { opacity: 0.25; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 0.95; transform: scale(1.05) rotate(25deg); }
  100% { opacity: 0.45; transform: scale(0.95) rotate(-15deg); }
}

/* ============================================================
   CTA BUTTON (gold, large, impossible to miss)
   ============================================================ */
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-md);
  letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
  padding: 20px 40px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--ink-900);
  background: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-400) 50%, var(--gold-600) 100%);
  box-shadow: var(--shadow-pill), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), background var(--dur-base);
}
.cta-btn:hover { background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 50%, var(--gold-500) 100%); box-shadow: var(--shadow-pill), var(--shadow-glow-gold), inset 0 1px 0 rgba(255,255,255,0.5); transform: translateY(-2px); }
.cta-btn:active { transform: translateY(0) scale(0.99); }
.cta-btn svg { width: 19px; height: 19px; fill: currentColor; }
.cta-btn.full { width: 100%; }
.cta-note { margin-top: 14px; font-size: var(--text-sm); color: var(--star-white); letter-spacing: 0.01em; }
.cta-block { text-align: center; }

/* ============================================================
   ARGUMENT BODY
   ============================================================ */
.argument { text-align: center; }
.argument .body-copy { max-width: 66ch; margin-left: auto; margin-right: auto; text-wrap: pretty; }

/* argument paired with the calendar — two-column, copy left-aligned */
.argument-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 60px); align-items: start; max-width: 1080px; }
.argument-cal { position: sticky; top: clamp(24px, 8vh, 90px); margin-top: clamp(-210px, -15vw, -120px); }
.argument-col { text-align: left; }
.argument-col .body-copy { max-width: none; margin-left: 0; margin-right: 0; }
.argument-col .pull { margin-left: 0; margin-right: 0; text-align: left; }
@media (max-width: 820px) {
  .argument-grid { grid-template-columns: 1fr; }
  .argument-cal { position: static; max-width: 420px; margin: 0 auto; order: -1; }
  .argument-col { text-align: center; }
  .argument-col .body-copy { max-width: 66ch; margin-left: auto; margin-right: auto; }
  .argument-col .pull { margin-left: auto; margin-right: auto; text-align: center; }
}

/* the screenshot line — its own weight & breathing room */
.pull {
  margin: clamp(28px, 4vw, 44px) auto; text-align: center;
  font-family: var(--font-serif); font-weight: var(--fw-medium);
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--star-white);
}
.pull .gold-foil { font-weight: var(--fw-semibold); }

/* ============================================================
   CONCEPT SECTION (the calendar gives you 90 days)
   ============================================================ */
.concept { text-align: center; }
/* inverted light "dreamfield" panel */
.concept.dream {
  background: radial-gradient(120% 90% at 50% -10%, var(--mist-200) 0%, var(--mist-100) 55%, var(--mist-cream) 100%);
  color: var(--ink-900);
  box-shadow: inset 0 1px 0 rgba(201,162,39,0.25), inset 0 -1px 0 rgba(201,162,39,0.18);
}
.concept.dream .filigree { color: var(--gold-600); }
.concept.dream .filigree::before { background: linear-gradient(90deg, transparent, var(--gold-600)); }
.concept.dream .filigree::after { background: linear-gradient(270deg, transparent, var(--gold-600)); }
.concept.dream .concept-name, .concept.dream .concept-l2 { color: var(--ink-900); }
.concept.dream .concept-l3.gold-foil { background: linear-gradient(180deg, var(--gold-500) 0%, var(--gold-600) 50%, var(--gold-700) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.concept.dream .body-copy { color: var(--ink-700); }
.concept.dream .step h4 { color: var(--ink-900); }
.concept.dream .step p { color: var(--ink-500); }
.concept.dream .stop-line { color: var(--ink-900); }
.concept.dream .stop-line .x { color: var(--aurora-magenta); box-shadow: inset 0 0 0 1px rgba(193,120,164,0.5); }
.concept.dream .guarantee { color: var(--ink-500); }
.concept h2 { font-size: clamp(30px, 4.6vw, 52px); max-width: 30ch; margin: 0 auto; }
.concept-name { display: block; white-space: nowrap; }
.concept-l2, .concept-l3 { display: block; }
@media (max-width: 620px) { .concept-name { white-space: normal; } .concept h2 { max-width: 18ch; } }
.concept .body-copy { max-width: 56ch; margin-left: auto; margin-right: auto; text-align: center; }

/* mini three-step row */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: clamp(40px,5vw,60px) 0 0; text-align: center; }
.step { background: var(--pure-white); border-radius: var(--radius-md); padding: 26px 20px 24px; box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(201,162,39,0.18); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step .medallion {
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; display: block;
  color: var(--gold-600); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 56px; line-height: 1; margin-bottom: 4px;
}
.step h4 { font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; font-size: var(--text-base); color: var(--star-white); font-weight: var(--fw-semibold); margin: 0; }
.step p { margin: 0; font-size: var(--text-sm); color: var(--text-muted-dark); line-height: var(--leading-relaxed); max-width: 26ch; text-wrap: balance; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; gap: 30px; max-width: 320px; margin-inline: auto; } }

/* sequential lightning flash on the 1-2-3 medallions */
@media (prefers-reduced-motion: no-preference) {
  .steps .step .medallion { animation: medalFlash 6s var(--ease-soft) infinite; will-change: transform, color; }
  .steps .step:nth-child(2) .medallion { animation-delay: 1.8s; }
  .steps .step:nth-child(3) .medallion { animation-delay: 3.6s; }
}
@keyframes medalFlash {
  0%, 12%, 100% { color: var(--gold-600); text-shadow: none; transform: scale(1); }
  3% { color: var(--gold-400); text-shadow: 0 0 16px rgba(212,175,55,0.85), 0 0 30px rgba(212,175,55,0.45); transform: scale(1.13); }
  7% { color: var(--gold-500); text-shadow: 0 0 8px rgba(212,175,55,0.4); transform: scale(1.02); }
}

/* contrast pair: stop / stop */
.stop-pair { max-width: 56ch; margin: clamp(40px,5vw,56px) auto 0; display: flex; flex-direction: column; gap: 14px; }
.stop-line { display: flex; gap: 14px; align-items: flex-start; text-align: left; font-size: var(--text-md); line-height: 1.55; color: rgba(251,249,244,0.86); }
.stop-line .x { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; color: var(--aurora-pink); box-shadow: inset 0 0 0 1px rgba(224,166,196,0.4); font-size: 13px; }

/* ============================================================
   AUTHOR
   ============================================================ */
.author { background: linear-gradient(180deg, transparent, rgba(28,37,72,0.28), transparent); }
.author-wrap { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.author-photo-frame { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg), var(--shadow-inset-hairline); }
.author-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transform: scale(1.36); transform-origin: 50% 46%; }
.author-photo-frame image-slot { display: block; width: 100%; height: 100%; }
.author-photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,10,22,0.5)); }
.author-byline { font-family: var(--font-display); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-sm); color: var(--gold-300); margin-top: 18px; }
.author h3 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: clamp(22px, 2.7vw, 30px); color: var(--star-white); margin: 0 0 4px; white-space: nowrap; }
.author .body-copy { margin-top: 16px; }
@media (max-width: 760px) { .author-wrap { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .author h3 { white-space: normal; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-head { text-align: center; margin-bottom: clamp(32px, 5vw, 52px); }
.testi-eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-sm); color: var(--gold-300); margin: 0; }
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 28px); align-items: center; max-width: 940px; margin: 0 auto; }
.testi-card { margin: 0; background: var(--mist-100); border-radius: var(--radius-lg); padding: clamp(12px, 1.4vw, 18px); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(201,162,39,0.22); }
.testi-shot { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 8px); }
@media (max-width: 760px) { .testi-grid { grid-template-columns: 1fr; max-width: 480px; } }

/* ============================================================
   PRICE + INLINE CHECKOUT
   ============================================================ */
.buy { position: relative; }
#buy.buy { padding-top: 20px; }
.buy-card {
  max-width: 540px; margin: 0 auto; position: relative;
  background: linear-gradient(180deg, var(--cosmic-850), var(--cosmic-900));
  border-radius: var(--radius-xl); padding: clamp(30px, 4vw, 46px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-hairline), var(--shadow-glow-aurora);
}
.buy-price { text-align: center; margin-bottom: 8px; }
.buy-price .amt { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: clamp(48px, 8vw, 76px); line-height: 1; }
.buy-price .sub { display: block; margin-top: 8px; font-size: var(--text-md); color: var(--text-muted-dark); letter-spacing: 0.01em; }

/* form */
.form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--gold-300); }
.field .hint { font-size: var(--text-xs); color: var(--text-muted-dark); letter-spacing: 0; text-transform: none; font-weight: var(--fw-medium); }
.field input {
  width: 100%; padding: 15px 16px; border-radius: var(--radius-sm); border: none;
  background: rgba(255,255,255,0.05); color: var(--star-white);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-medium);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); outline: none;
  transition: box-shadow var(--dur-fast), background var(--dur-fast);
}
.field input::placeholder { color: rgba(251,249,244,0.34); }
.field input:focus { box-shadow: inset 0 0 0 1px var(--gold-400); background: rgba(255,255,255,0.08); }
.field input.invalid { box-shadow: inset 0 0 0 1px var(--aurora-pink); }
.field .err { font-size: var(--text-xs); color: var(--aurora-pink); letter-spacing: 0; text-transform: none; font-weight: var(--fw-semibold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* payment strip */
.pay-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07); }
.pay-head span { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--gold-300); }
.pay-head .cards { display: flex; gap: 6px; opacity: 0.7; }
.pay-head .cards i { width: 30px; height: 19px; border-radius: 3px; background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }

.secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; font-size: var(--text-xs); color: var(--text-muted-dark); letter-spacing: 0.02em; }
.secure svg { width: 14px; height: 14px; fill: var(--gold-400); }

.buy-cta-wrap { margin-top: 22px; }
.stripe-note { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 13px 15px; border-radius: var(--radius-sm); background: rgba(26,22,32,0.04); box-shadow: inset 0 0 0 1px rgba(26,22,32,0.10); font-size: var(--text-sm); color: var(--ink-700); }
.stripe-note svg { width: 15px; height: 15px; fill: var(--gold-600); flex: none; }

/* ---- order bump (full 90-day map add-on) ---- */
.bump { position: relative; display: flex; gap: 13px; align-items: flex-start; cursor: pointer; margin-top: 4px; padding: 16px 17px; border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(201,162,39,0.10), rgba(201,162,39,0.045));
  box-shadow: inset 0 0 0 1.5px rgba(201,162,39,0.45);
  transition: box-shadow 0.18s var(--ease-glide), background 0.18s var(--ease-glide); }
.bump:hover { background: linear-gradient(180deg, rgba(201,162,39,0.15), rgba(201,162,39,0.07)); }
.bump.on { box-shadow: inset 0 0 0 2px var(--gold-600), var(--shadow-glow-gold);
  background: linear-gradient(180deg, rgba(201,162,39,0.18), rgba(201,162,39,0.085)); }
.bump input { position: absolute; opacity: 0; width: 0; height: 0; }
.bump-check { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(255,255,255,0.65); box-shadow: inset 0 0 0 1.5px rgba(201,162,39,0.55);
  transition: background 0.18s var(--ease-glide), box-shadow 0.18s var(--ease-glide); }
.bump-check svg { width: 15px; height: 15px; fill: none; stroke: var(--cosmic-950); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: opacity 0.16s, transform 0.16s var(--ease-glide); }
.bump.on .bump-check { background: linear-gradient(180deg, var(--gold-300), var(--gold-600)); box-shadow: inset 0 0 0 1.5px var(--gold-700); }
.bump.on .bump-check svg { opacity: 1; transform: scale(1); }
.bump-body { display: flex; flex-direction: column; gap: 4px; }
.bump-eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 11px; font-weight: var(--fw-semibold); color: var(--gold-700); }
.bump-title { font-family: var(--font-serif); font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.28; }
.bump-desc { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-700); }

/* ---- light (cream) checkout scheme, matching the calendar ---- */
.buy-card {
  background: radial-gradient(120% 90% at 50% -10%, var(--mist-200) 0%, var(--mist-100) 60%, var(--mist-cream) 100%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,162,39,0.4), var(--shadow-glow-gold);
  color: var(--ink-900);
}
.buy-card .gold-foil { background: linear-gradient(180deg, var(--gold-500) 0%, var(--gold-600) 50%, var(--gold-700) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buy-price .sub { color: var(--ink-500); }
.buy-card .field label { color: var(--gold-700); }
.buy-card .field .hint { color: var(--ink-500); }
.buy-card .field input {
  background: rgba(26,22,32,0.04); color: var(--ink-900);
  box-shadow: inset 0 0 0 1px rgba(26,22,32,0.14);
}
.buy-card .field input::placeholder { color: var(--ink-500); }
.buy-card .field input:focus { box-shadow: inset 0 0 0 1px var(--gold-500); background: rgba(26,22,32,0.02); }
.buy-card .pay-head { border-top: 1px solid rgba(26,22,32,0.12); }
.buy-card .pay-head span { color: var(--gold-700); }
.buy-card .pay-head .cards i { background: rgba(26,22,32,0.10); box-shadow: inset 0 0 0 1px rgba(26,22,32,0.12); }
.buy-card .secure { color: var(--ink-500); }
.buy-card .secure svg { fill: var(--gold-600); }
.buy-card .success h3 { color: var(--ink-900); }
.buy-card .success .body-copy { color: var(--ink-700); }
.buy-card .success .deliver { background: rgba(26,22,32,0.04); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.35); color: var(--ink-700); }
.buy-card .success .deliver b { color: var(--gold-700); }

/* trust line under hero/price ctas */
.guarantee { text-align: center; margin-top: 16px; font-size: var(--text-sm); color: var(--text-muted-dark); }

/* ---------- success state ---------- */
.success { text-align: center; animation: rise 0.6s var(--ease-glide) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.success .check { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-600));
  display: grid; place-items: center; box-shadow: var(--shadow-glow-gold), inset 0 0 0 1px rgba(255,255,255,0.3); }
.success .check svg { width: 34px; height: 34px; fill: none; stroke: var(--cosmic-950); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.success h3 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: clamp(28px, 4vw, 44px); color: var(--star-white); }
.success .body-copy { max-width: 40ch; margin: 14px auto 0; }
.success .deliver { margin-top: 24px; padding: 16px 20px; border-radius: var(--radius-md); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--border-hairline); font-size: var(--text-sm); color: var(--text-muted-dark); }
.success .deliver b { color: var(--gold-200); font-weight: var(--fw-bold); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { text-align: center; padding: 56px 0 44px; border-top: 1px solid rgba(255,255,255,0.05); }
.foot img { height: auto; width: clamp(220px, 32vw, 320px); margin: 0 auto 18px; opacity: 0.9; }
.foot p { font-family: var(--font-display); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); color: var(--ink-500); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
  html { scroll-behavior: auto; }
}