/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Palette */
  --bg:     #111111;
  --bg-soft: #1a1a1a;
  --card:   rgba(27, 27, 27, 0.65);
  --text:   #f7f0e2;
  --muted:  #cebfa7;
  --gold:   #d19a49;
  --copper: #b46d3f;
  --cta:    #d95a2a;
  --line:   rgba(209, 154, 73, 0.22);
  --ok:     #79d4a7;

  /* Type scale — 1.25 ratio (Major Third) */
  --t-xs:   0.75rem;    /* 12px  labels, fine print */
  --t-sm:   0.875rem;   /* 14px  captions, secondary */
  --t-base: 1rem;       /* 16px  body */
  --t-md:   1.0625rem;  /* 17px  subhead / lead */
  --t-lg:   1.25rem;    /* 20px  h3 / card titles */
  --t-xl:   1.5rem;     /* 24px  small heading */
  --t-2xl:  1.875rem;   /* 30px  h2 */
  --t-3xl:  2.625rem;   /* 42px  h1 */

  /* Leading */
  --lead-tight:   1.15;
  --lead-snug:    1.3;
  --lead-normal:  1.65;
  --lead-relaxed: 1.75;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

/* Guitar-pick cursor */
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22'%3E%3Cpath d='M9,21 C3,17 0,13 0,8 C0,3.6 4,0 9,0 C14,0 18,3.6 18,8 C18,13 15,17 9,21Z' fill='%23d19a49' opacity='.88'/%3E%3C/svg%3E") 9 21, crosshair;
}
a, button, .btn, [role="button"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22'%3E%3Cpath d='M9,21 C3,17 0,13 0,8 C0,3.6 4,0 9,0 C14,0 18,3.6 18,8 C18,13 15,17 9,21Z' fill='%23d19a49' opacity='.88'/%3E%3C/svg%3E") 9 21, pointer;
}
input, textarea, select { cursor: text; }
.btn:disabled, .btn-lock { cursor: not-allowed !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%,  #36261a, transparent 35%),
    radial-gradient(circle at 90% 100%, #2a1a12, transparent 35%),
    var(--bg);
  font-family: "Lato", sans-serif;
  font-size: var(--t-base);
  line-height: var(--lead-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY — HEADINGS
   ============================================================ */
h1, h2, h3, h4 {
  font-family: "Lustria", serif;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 1rem;
}
h1 {
  font-size: var(--t-3xl);
  line-height: var(--lead-tight);
  letter-spacing: 0.01em;
}
h2 {
  font-size: var(--t-2xl);
  line-height: var(--lead-snug);
  letter-spacing: 0.01em;
}
h3 {
  font-size: var(--t-lg);
  line-height: var(--lead-snug);
  letter-spacing: 0.02em;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.page-shell   { max-width: 980px; margin: 0 auto; padding: 4rem 1rem; position: relative; z-index: 2; }
.offer-shell  { display: grid; gap: 1.5rem; }

/* ============================================================
   BRAND LOGO
   ============================================================ */
.brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem;
  text-decoration: none;
}
.brand-logo img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.brand-logo--inside       { margin: 0 auto .75rem; }
.brand-logo--inside img   { max-width: 200px; }

@media (max-width: 640px) {
  .brand-logo img         { max-width: 180px; }
  .brand-logo--inside img { max-width: 160px; }
}

/* ============================================================
   GLASS CARD — scroll-reveal + hover
   ============================================================ */
.glass-card {
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease-out, transform .65s ease-out, border-color .35s, box-shadow .35s;
}
.glass-card.is-visible { opacity: 1; transform: translateY(0); }
.glass-card:hover {
  border-color: rgba(209,154,73,.42);
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(209,154,73,.1), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Inner glow follows cursor */
.glass-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--card-mx, 50%) var(--card-my, -20%), rgba(209,154,73,.1), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.glass-card:hover::before { opacity: 1; }

/* String-pluck accent line */
.glass-card::after {
  content: "";
  position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209,154,73,.75), transparent);
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}
.glass-card:hover::after { animation: string-pluck .6s ease-out forwards; }
@keyframes string-pluck {
  0%   { opacity: 0;  transform: scaleX(.4) translateY(0); }
  14%  { opacity: 1;  transform: scaleX(1)  translateY(0); }
  30%  { transform: scaleX(1) translateY(-5px); }
  50%  { transform: scaleX(1) translateY(3px); }
  68%  { transform: scaleX(1) translateY(-2px); }
  84%  { transform: scaleX(1) translateY(1px); }
  100% { transform: scaleX(1) translateY(0); opacity: .55; }
}

/* ============================================================
   UTILITY TEXT CLASSES
   ============================================================ */
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-xs);
  font-weight: 700;
  margin: 0 0 0.75rem;
  display: block;
}
.subhead {
  color: var(--muted);
  font-size: var(--t-md);
  line-height: var(--lead-relaxed);
  margin: 0 0 0.85rem;
}
.subhead--tight { margin-bottom: 0.4rem; }
.subhead--top   { margin-top: 1rem; }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.lux-form  { margin-top: 1.25rem; }
.field-wrap { margin-bottom: 1rem; }
label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: var(--t-sm); }
input {
  width: 100%;
  background: rgba(0,0,0,.3);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: .85rem .95rem;
  font-family: "Lato", sans-serif;
  font-size: var(--t-base);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(209,154,73,.18);
  transform: translateY(-1px);
}
.error-text { color: #ffad8b; font-size: var(--t-sm); min-height: 1.1rem; margin: .35rem 0 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border: none;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: transform .25s, filter .25s, box-shadow .25s;
}
.btn-primary {
  background: linear-gradient(110deg, var(--cta), #e0883f);
  color: #fff;
  box-shadow: 0 10px 30px rgba(217,90,42,.35);
}
.btn-secondary {
  background: rgba(209,154,73,.32);
  color: #ffffff;
  border: 1px solid rgba(209,154,73,.7);
}
.btn:hover,
.btn:focus-visible          { transform: translateY(-2px); filter: brightness(1.07); }
.btn-primary:hover,
.btn-primary:focus-visible  { box-shadow: 0 0 26px rgba(217,90,42,.55); }
.btn-secondary:hover,
.btn-secondary:focus-visible { background: rgba(209,154,73,.45); box-shadow: 0 0 14px rgba(209,154,73,.4); }
.btn:disabled, .btn-lock    { opacity: .58; box-shadow: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ============================================================
   COPY BUTTON
   ============================================================ */
.btn-copy {
  background: rgba(209,154,73,.28);
  color: #fff7e6;
  border: 1px solid rgba(209,154,73,.7);
  border-radius: 999px;
  padding: .5rem 1.25rem;
  font-family: "Lato", sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-copy:hover,
.btn-copy:focus-visible { background: rgba(209,154,73,.45); border-color: var(--gold); color: #fff; }
.btn-copy.copied        { background: rgba(121,212,167,.28); color: #c8f3dd; border-color: rgba(121,212,167,.7); }

/* ============================================================
   COUPON BOX
   ============================================================ */
.coupon-box {
  background: rgba(209,154,73,.07);
  border: 1px solid rgba(209,154,73,.32);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin: 1.25rem 0;
  text-align: center;
}
.coupon-code {
  font-family: "Lustria", serif;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: .4rem 0 .75rem;
  display: block;
}

/* Hero inline coupon variant — double class for specificity over base */
.coupon-box.coupon-box--hero {
  text-align: left;
  padding: 1rem 1.5rem;
}
.coupon-hero-label {
  font-size: var(--t-sm);
  color: var(--muted);
  margin: 0 0 .35rem;
}
.coupon-hero-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.coupon-hero-price {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.coupon-hero-note {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--muted);
}
.coupon-hero-code {
  color: var(--gold);
  letter-spacing: 0.1em;
  font-weight: 800;
}

/* Coupon subhead (repeat offer section) */
.coupon-subhead { margin: 0; }

/* ============================================================
   VIDEO
   ============================================================ */
.video-shell {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(209,154,73,.3);
  margin: 1.25rem 0;
}
video { width: 100%; display: block; background: #000; }
.video-placeholder {
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--muted);
  background: rgba(0,0,0,.3);
  font-size: var(--t-sm);
}

/* ============================================================
   TESTIMONIALS — VIDEO GRID
   ============================================================ */
.testimonial-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.testimonial-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.testimonial-card .video-shell {
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(209,154,73,.2);
}
.testimonial-caption { padding: 1rem 1.1rem; }
.testimonial-caption p {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lead-relaxed);
  margin: 0;
}
.student-note {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lead-relaxed);
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ============================================================
   CHECKLIST
   ============================================================ */
.check-list { list-style: none; padding: 0; margin: .85rem 0; }
.check-list li {
  padding: .5rem 0 .5rem 2rem;
  position: relative;
  color: var(--muted);
  font-size: var(--t-md);
  line-height: var(--lead-normal);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* ============================================================
   METHOD LABEL
   ============================================================ */
.method-label {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  background: rgba(209,154,73,.1);
  border: 1px solid rgba(209,154,73,.3);
  border-radius: 999px;
  padding: .3rem .9rem;
}

/* ============================================================
   FEATURE LIST
   ============================================================ */
.feature-list {
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: var(--t-md);
  line-height: 1.9;
  margin: 0;
}

/* ============================================================
   BENEFIT GRID
   ============================================================ */
.benefit-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 1.25rem;
}
.benefit-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
}
.benefit-title {
  font-weight: 700;
  color: var(--text);
  font-size: var(--t-base);
  margin: 0 0 .4rem;
}
.benefit-desc {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lead-normal);
  margin: 0;
}

/* ============================================================
   WRITTEN QUOTE TESTIMONIALS
   ============================================================ */
.quote-grid { display: grid; gap: 1.25rem; margin-top: 1rem; }
.quote-card {
  border-left: 2px solid var(--gold);
  padding: .85rem 0 .85rem 1.4rem;
  margin: 0;
}
.quote-text {
  font-style: italic;
  color: var(--text);
  font-size: var(--t-base);
  line-height: var(--lead-relaxed);
  margin: 0 0 .6rem;
  font-weight: 500;
}
.quote-attr {
  color: var(--muted);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { margin-top: .5rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-q {
  font-weight: 700;
  color: var(--text);
  font-size: var(--t-base);
  margin: 0 0 .45rem;
}
.faq-a {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lead-relaxed);
  margin: 0;
}

/* ============================================================
   OFFER MICRO-COPY
   ============================================================ */
.offer-micro {
  color: var(--muted);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  margin-top: .6rem;
}
.trust-copy { color: var(--muted); font-size: var(--t-sm); margin-top: .85rem; }

/* ============================================================
   MISC COMPONENTS
   ============================================================ */
.lead-card    { max-width: 680px; margin: 2rem auto; }
.unlock-panel { margin-bottom: 1rem; }
.progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
#unlockProgressBar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--copper), var(--gold));
  transition: width .4s ease-out;
}
.unlock-status { color: var(--muted); margin-top: .6rem; transition: color .6s ease; }
.locked-hint   { min-height: 1.25rem; color: #e8c998; font-size: var(--t-sm); }

.preview-card {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255,255,255,.03);
}
.preview-mobile {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 1rem;
  min-height: 150px;
  background: rgba(0,0,0,.35);
  position: relative;
}
.phone-notch {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}

/* Bridge unlock recap */
.unlock-recap {
  background: rgba(209,154,73,.06);
  border: 1px solid rgba(209,154,73,.25);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0 .5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.unlock-recap.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   ATMOSPHERE — ambient light + grain + string
   ============================================================ */
.ambient-lights, .grain-overlay { position: fixed; inset: 0; pointer-events: none; }
.ambient-lights {
  background: radial-gradient(circle at var(--mx, 70%) var(--my, 10%), rgba(209,154,73,.18), transparent 30%);
  will-change: background;
}
.grain-overlay {
  opacity: .08;
  background-image: radial-gradient(rgba(255,255,255,.7) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
}
body::after {
  content: "";
  position: fixed; left: 0; right: 0; top: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  animation: strings 12s linear infinite alternate;
}
@keyframes strings {
  from { transform: translateX(-10%); }
  to   { transform: translateX(10%); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  :root {
    --t-3xl: 2rem;
    --t-2xl: 1.5rem;
    --t-xl:  1.25rem;
  }
  .glass-card    { padding: 1.5rem; border-radius: 18px; }
  .preview-card  { grid-template-columns: 1fr; }
  .coupon-code   { font-size: 1.75rem; }
  .coupon-box    { padding: 1.25rem; }
}

@media (max-width: 480px) {
  :root {
    --t-3xl: 1.75rem;
    --t-2xl: 1.375rem;
  }
  .glass-card { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .glass-card { opacity: 1 !important; transform: none !important; }
}