/* ==== Shared ==== */
/* Every book cover / page preview in this project is A4 portrait */
:root { --ratio-book: 1 / 1.414; }

/* Image zoom trigger — a real button so keyboard users can open the lightbox */
.zoom-btn {
  display: block; width: 100%; padding: 0;
  background: none; border: none; cursor: zoom-in;
  border-radius: var(--r-md);
}

/* ==== Hero ==== */
/* Both download buttons have to sit inside the first screen, so the cover column is
   narrower and the top padding tighter than a normal hero would be. Height budget at
   1080p: 40 pad + 121 h1 + 63 lead + 56 countdown + 348 cards + 65 trust = 693 of 768. */
.hero {
  padding: var(--sp-6) 0 var(--sp-20);
  position: relative;
  overflow: hidden;
  /* Aurora ground: violet top-right, cyan bottom-left, gold behind the cover */
  background:
    radial-gradient(60% 45% at 85% 0%, var(--glow-violet), transparent 65%),
    radial-gradient(50% 40% at 0% 100%, var(--glow-cyan), transparent 60%),
    radial-gradient(35% 45% at 12% 30%, var(--glow-gold), transparent 65%),
    var(--surface);
}
/* Particle canvas sits behind the grid; pointer-events off so nothing is blocked */
.hero-particles {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 330px) 1fr;
  gap: var(--sp-12); align-items: start;
}

.hero-cover { position: relative; }
.hero-cover img {
  width: 100%; aspect-ratio: var(--ratio-book); object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.hero-cover .zoom-btn:hover img { transform: translateY(-6px) scale(1.01); }

/* Pro edition tucked under the basic cover — two books read as two tiers */
.hero-cover-pro {
  width: 46%; margin: -16% 0 0 auto;
  position: relative; z-index: 1;
}
.hero-cover-pro img { box-shadow: var(--sh-lg), 0 0 0 3px var(--surface); }

.hero-content h1 {
  font-size: var(--fs-4xl); font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--sp-2) 0 var(--sp-3);
}
.hero-content > p {
  font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--ink-2); margin-bottom: var(--sp-3); max-width: 68ch;
}

/* ==== Flash / offer card ==== */
.flash-card {
  margin-top: var(--sp-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.flash-header {
  background: linear-gradient(135deg, var(--dark-surface), var(--dark-bg));
  color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-5);
}
.flash-label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--brand); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: 0.01em;
}
.countdown { display: flex; align-items: center; gap: var(--sp-1); }
.cd-box {
  background: var(--danger); color: #fff;
  font-size: var(--fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 40px; text-align: center;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
}
.cd-colon { color: var(--dark-muted); font-weight: 700; }

.flash-body { padding: var(--sp-6); }

/* ==== Two-tier offer ==== */
.offer-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4); align-items: stretch;
}
.offer-card {
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.offer-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
/* stretch equalises card height, so the CTA is pushed down to line both buttons up */
.offer-card .buy-btn { margin-top: auto; padding: var(--sp-3) var(--sp-5); }
.offer-card .pw-note { align-self: flex-start; }

.offer-tier {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--brand-ink); margin-bottom: var(--sp-3);
}

.offer-points {
  list-style: none; margin: var(--sp-3) 0 var(--sp-4);
}
.offer-points li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--ink-3); margin-bottom: var(--sp-2);
}
.offer-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--brand-ink);
}

.price-anchor {
  font-size: var(--fs-xs); color: var(--ink-muted);
  margin-top: var(--sp-1);
}

/* Pro card inverts to the dark surface already used by .flash-header and the footer,
   so the tier difference is visible before a single word is read. No new tokens. */
.offer-card--pro {
  background: linear-gradient(155deg, var(--dark-surface), var(--dark-bg));
  border-color: var(--brand-soft-border);
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.offer-card--pro:hover { border-color: var(--brand-soft-border); box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.16), var(--sh-brand); }
.offer-card--pro .price-label,
.offer-card--pro .price-old,
.offer-card--pro .price-anchor { color: var(--dark-muted); }
/* --brand fails contrast on white (hence --brand-ink) but passes on the dark surface */
.offer-card--pro .offer-tier { color: var(--brand); }
.offer-card--pro .price-big { color: var(--brand); }
/* stays after the muted rule above, and outranks it on specificity either way */
.offer-card--pro .price-old strong { color: var(--brand); }
.offer-card--pro .offer-points li { color: var(--dark-text); }
.offer-card--pro .offer-points li::before { background: var(--brand); }
.offer-card--pro .pw-note {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--dark-text);
}
.offer-card--pro .pw-note strong { color: var(--brand); }

.price-label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  letter-spacing: 0.02em;
}
.price-big {
  font-size: var(--fs-4xl); font-weight: 900; color: var(--danger);
  line-height: 1.05; letter-spacing: -0.02em;
}
.price-old { font-size: var(--fs-sm); color: var(--ink-3); }
.price-old s { color: var(--ink-muted); }
.price-old strong { color: var(--danger-strong); font-weight: 700; }

.buy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 52px;
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-lg); font-weight: 700;
  padding: var(--sp-3) var(--sp-8); border-radius: var(--r-md);
  white-space: nowrap;
  box-shadow: var(--sh-brand);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.buy-btn:hover {
  background: var(--brand-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(245, 197, 24, 0.42);
}
.buy-btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }

.pw-note {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-3);
  background: var(--brand-soft); border: 1px dashed var(--brand-soft-border);
  border-radius: var(--r-sm);
}
.pw-note strong { font-size: var(--fs-md); color: var(--ink); letter-spacing: 0.18em; }

/* What's inside + proof thumbnails — BELOW the offer grid, not inside a card:
   anything added inside the cards stretches both and pushes the download
   buttons past the first-screen fold contract */
.pro-inside {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.offer-deliverables {
  font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-3);
}
.offer-deliverables strong { color: var(--brand-ink); font-weight: 700; }
.offer-proof { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.offer-proof .zoom-btn { flex: 1 1 0; min-width: 0; max-width: 118px; }
.offer-proof img {
  width: 100%; aspect-ratio: var(--ratio-book); object-fit: cover;
  border: 1px solid var(--dark-border); border-radius: var(--r-sm);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.offer-proof .zoom-btn:hover img { transform: translateY(-3px); border-color: var(--brand-soft-border); }

.author-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3);
}
.author-note svg { flex-shrink: 0; margin-top: 3px; color: var(--brand-ink); }

.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
}
.trust-item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3);
}
.trust-item svg { color: var(--brand-ink); flex-shrink: 0; }

/* ==== Sticky mobile CTA ==== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: none; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(11, 11, 16, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
/* two tiers share the bar 50/50 — no room left for a price column at 375px */
.sticky-cta .buy-btn {
  flex: 1 1 0; min-width: 0;
  font-size: var(--fs-md); padding: var(--sp-3) var(--sp-4);
  box-shadow: none;
}