/* ===========================================================================
   Campaign landing pages (/lp/)
   ---------------------------------------------------------------------------
   Self-contained: this file is loaded INSTEAD of the theme's styles.css, not
   alongside it. That is deliberate. styles.css sets `html { font-size: 10px }`
   theme-wide, while this design is authored at the 16px browser default and
   uses `rem` throughout; loading both would render every landing page at
   62.5% scale, and `rem` being root-relative means no wrapper can undo it.

   Class vocabulary is shared by all three ICP pages (Young Professionals,
   Parents, Teens). The three source mockups each invented their own names for
   the same components; this file is the single normalised set, so a fix to the
   wizard or the price card lands on every page at once. Per-ICP differences
   are content, not CSS — see apps/core/lp_content.py.
   ======================================================================== */

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

:root{
  --brand-blue:#1f497d;
  --brand-red:#e43638;
  --accent-blue:#2f57ef;
  --cta-emerald:#059669;
  --cta-emerald-hover:#047857;
  --cta-gold:#d4a017;
  --star-gold:#f59e0b;
  --heading:#192335;
  --body:#4a5568;
  --body-light:#6b7385;
  --bg-cream:#FDFCF9;
  --bg-section:#F7F6F3;
  --bg-white:#ffffff;
  --border:#e6e3f1;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,.10);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Header logo height. The source mockups used 36-38px, which reads much
     smaller than the real site (styles.css caps the theme header logo at
     75px) — these pages sit on the same brand, so they follow the site. */
  --logo-height:30px;
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}

html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--body);background:var(--bg-cream);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{color:var(--heading);line-height:1.2;font-weight:800}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Respect a reduced-motion preference: every animation here is decorative. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* Visible keyboard focus. The mockups removed outlines everywhere; these
   pages are ad landing pages and still have to be operable by keyboard. */
:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px}

/* The script toggles the `hidden` property on panels whose author CSS sets
   an explicit `display`, which would otherwise win over the UA stylesheet's
   [hidden]{display:none} and leave them visible. */
[hidden]{display:none !important}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== DRAFT RIBBON (staff preview only) ===== */
.draft-ribbon{background:#7c2d12;color:#fff;text-align:center;padding:8px 20px;
  font-size:.8125rem;font-weight:700;letter-spacing:.3px;position:relative;z-index:110}

/* ===== NOTIFICATION BANNER ===== */
.notif-banner{background:linear-gradient(135deg,var(--brand-red),#c0392b);
  color:#fff;text-align:center;padding:10px 20px;font-size:.875rem;
  font-weight:600;position:relative;z-index:100}
.notif-banner span{animation:pulse-text 2s infinite}
@keyframes pulse-text{0%,100%{opacity:1}50%{opacity:.7}}

/* ===== HEADER ===== */
.lp-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-wrap img{height:var(--logo-height);width:auto}
.logo-text{font-size:1.125rem;font-weight:800;color:var(--brand-blue)}
.guarantee-badge{display:flex;align-items:center;gap:6px;background:#EEF7ED;
  border:1px solid #C6E9C0;border-radius:100px;padding:6px 14px;font-size:.75rem;
  font-weight:600;color:#15803d;white-space:nowrap}
.guarantee-badge svg{width:16px;height:16px;flex-shrink:0}
.zalo-btn{display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-blue);color:#fff;border-radius:100px;padding:8px 16px;
  font-size:.8125rem;font-weight:700;transition:var(--transition);white-space:nowrap}
.zalo-btn:hover{background:var(--brand-blue);transform:translateY(-1px)}

/* ===== HERO ===== */
.hero{padding:60px 0 48px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f0f4ff 0%,var(--bg-cream) 100%)}
.hero::before{content:'';position:absolute;top:-120px;left:50%;
  transform:translateX(-50%);width:600px;height:600px;
  background:radial-gradient(circle,rgba(47,87,239,.08) 0%,transparent 70%);
  pointer-events:none}
.hero h1{font-size:2rem;margin-bottom:16px;max-width:720px;margin-left:auto;
  margin-right:auto;position:relative}
.hero h1 .highlight{color:var(--accent-blue);position:relative}
.hero .sub{font-size:1.0625rem;color:var(--body);max-width:600px;
  margin:0 auto 28px;line-height:1.7}
.hero-cta{display:inline-flex;align-items:center;gap:8px;
  background:var(--cta-emerald);color:#fff;font-size:1.125rem;font-weight:700;
  padding:16px 36px;border-radius:100px;border:none;cursor:pointer;
  transition:var(--transition);box-shadow:0 4px 20px rgba(5,150,105,.3)}
.hero-cta:hover{background:var(--cta-emerald-hover);transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(5,150,105,.4)}
.hero-cta.is-compact{font-size:1rem;padding:14px 32px}
.hero-micro{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;
  margin-top:16px;font-size:.8125rem;color:var(--body-light)}
.hero-micro span{display:inline-flex;align-items:center;gap:4px}
.hero-micro .check{color:var(--cta-emerald);font-weight:700}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.trust-pill{display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-white);border:1px solid var(--border);border-radius:100px;
  padding:8px 16px;font-size:.75rem;font-weight:600;color:var(--heading)}

/* ===== SHARED SECTION FURNITURE ===== */
.lp-section{padding:64px 0}
/* Alternating section backgrounds are positional, not hand-tagged: the
   Parents page inserts an extra section after the hero, and any hard-coded
   `alt` class would put two grey bands next to each other. `.hero` and
   `.final-cta` are <section>s too, so they count in the sequence — the hero
   is always first and paints its own gradient, and .final-cta is not a
   .lp-section, so neither is affected. */
.lp-section:nth-of-type(even){background:var(--bg-section)}
.lp-section h2{text-align:center;font-size:1.75rem;margin-bottom:12px}
.lp-section .lead{text-align:center;color:var(--body-light);font-size:1rem;
  max-width:560px;margin:0 auto 36px}
/* Eyebrow above a section title. Only some ICPs use one, so it renders
   only when the content dict supplies `tag`. */
.section-tag{display:block;width:fit-content;margin:0 auto 14px;
  background:rgba(47,87,239,.08);color:var(--accent-blue);font-weight:700;
  font-size:.8125rem;padding:6px 14px;border-radius:999px;letter-spacing:.3px}
.section-head{text-align:center;margin-bottom:40px}
.section-head h2{margin-bottom:12px}
.section-head .lead{margin-bottom:0}

/* ===== REAP WIZARD ===== */
.reap-card{background:var(--bg-white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);max-width:640px;margin:0 auto;overflow:hidden}
.reap-steps{display:flex;border-bottom:1px solid var(--border);list-style:none}
.reap-step-ind{flex:1;text-align:center;padding:14px 8px;font-size:.75rem;
  font-weight:700;color:var(--body-light);position:relative;
  transition:var(--transition)}
.reap-step-ind.active{color:var(--accent-blue)}
.reap-step-ind.active::after{content:'';position:absolute;bottom:0;left:0;right:0;
  height:3px;background:var(--accent-blue);border-radius:3px 3px 0 0}
.reap-step-ind.done{color:var(--cta-emerald)}
.reap-step-ind .num{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;border:2px solid currentColor;
  font-size:.6875rem;margin-bottom:4px}
.reap-step-ind.active .num{background:var(--accent-blue);color:#fff;
  border-color:var(--accent-blue)}
.reap-step-ind.done .num{background:var(--cta-emerald);color:#fff;
  border-color:var(--cta-emerald)}
.reap-body{padding:32px 28px;min-height:320px;display:flex;flex-direction:column}
.reap-view{display:none;flex-direction:column;gap:20px;animation:fadeUp .4s ease}
.reap-view.active{display:flex}
.reap-view h3{font-size:1.0625rem;margin-bottom:4px}
.reap-view .step-lead{font-size:.875rem;color:var(--body-light);margin-bottom:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}}

/* Step 1 — goal selection */
.goal-cards{display:flex;flex-direction:column;gap:12px}
.goal-card{border:2px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;cursor:pointer;transition:var(--transition);display:flex;
  align-items:center;gap:14px;background:var(--bg-white);text-align:left;
  font-family:inherit;width:100%}
.goal-card:hover{border-color:var(--accent-blue);background:#f8f9ff}
.goal-card.selected,.goal-card[aria-pressed="true"]{border-color:var(--accent-blue);
  background:#eef2ff}
.goal-card .icon{font-size:1.5rem;flex-shrink:0}
.goal-card .info h4{font-size:.9375rem;margin-bottom:2px}
.goal-card .info p{font-size:.8125rem;color:var(--body-light);margin:0}

/* Step 2 — writing/speaking sample */
.sample-block{border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.sample-block + .sample-block{margin-top:16px}
.sample-block h4{font-size:.875rem;font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;gap:8px}
.sample-block .prompt{font-size:.8125rem;color:var(--body-light);
  margin-bottom:12px;font-style:italic}
.mic-btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand-red);
  color:#fff;border:none;border-radius:100px;padding:12px 24px;font-size:.875rem;
  font-weight:600;cursor:pointer;transition:var(--transition);font-family:inherit}
.mic-btn:hover{background:#c0392b}
.mic-btn.recording{animation:pulse-rec 1s infinite}
@keyframes pulse-rec{0%,100%{box-shadow:0 0 0 0 rgba(228,54,56,.4)}
  50%{box-shadow:0 0 0 12px rgba(228,54,56,0)}}
.rec-timer{margin-top:8px;font-size:.8125rem;color:var(--brand-red);font-weight:600}
.writing-area{width:100%;min-height:100px;border:1px solid var(--border);
  border-radius:8px;padding:12px;font-family:var(--font);font-size:.875rem;
  resize:vertical;outline:none;transition:border-color .2s}
.writing-area:focus{border-color:var(--accent-blue)}

/* Step 3 — analysis */
.analysis-bars{display:flex;flex-direction:column;gap:16px}
.bar-item{display:flex;flex-direction:column;gap:6px}
.bar-label{display:flex;justify-content:space-between;font-size:.8125rem;
  font-weight:600}
.bar-track{height:10px;background:#e5e7eb;border-radius:100px;overflow:hidden}
.bar-fill{height:100%;border-radius:100px;width:0;
  transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.bar-fill.fluency{background:var(--accent-blue)}
.bar-fill.lexical{background:var(--cta-emerald)}
.bar-fill.grammar{background:var(--star-gold)}
.bar-fill.pronun{background:var(--brand-red)}
.analysis-result{text-align:center;padding:20px;
  background:linear-gradient(135deg,#eef2ff,#f0fdf4);border-radius:var(--radius);
  margin-top:8px}
.analysis-result .band{font-size:2.5rem;font-weight:900;color:var(--accent-blue)}
.analysis-result .band-label{font-size:.875rem;color:var(--body-light);font-weight:600}
.analysis-result .band-note{font-size:.8125rem;color:var(--body-light);margin-top:8px}

/* Step 4 — opt-in */
.optin-form{display:flex;flex-direction:column;gap:14px}
.optin-form label{font-size:.8125rem;font-weight:600;color:var(--heading);
  display:flex;flex-direction:column;gap:4px}
.optin-form input{border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:.9375rem;font-family:var(--font);outline:none;
  transition:border-color .2s}
.optin-form input:focus{border-color:var(--accent-blue)}
.optin-form input[aria-invalid="true"]{border-color:var(--brand-red)}
/* Inline validation message. Hidden until the script fills it in, so the
   layout does not jump — and it is the same markup a real backend will
   reuse for server-side errors. */
.field-error{font-size:.75rem;font-weight:600;color:var(--brand-red);
  min-height:0;display:none}
.field-error.show{display:block}
.optin-submit{background:var(--cta-emerald);color:#fff;border:none;
  border-radius:100px;padding:14px;font-size:1rem;font-weight:700;cursor:pointer;
  transition:var(--transition);font-family:inherit}
.optin-submit:hover{background:var(--cta-emerald-hover)}
.optin-success{text-align:center;padding:24px;animation:fadeUp .5s ease}
.optin-success .big-check{font-size:3rem;margin-bottom:12px}
.optin-success h3{color:var(--cta-emerald);margin-bottom:8px}
.optin-success p{font-size:.9375rem;color:var(--body);margin-bottom:16px}
.optin-success .cta-zalo{display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-blue);color:#fff;font-size:1rem;font-weight:700;
  padding:14px 28px;border-radius:100px;transition:var(--transition)}
.optin-success .cta-zalo:hover{background:var(--brand-blue);transform:translateY(-2px)}

.reap-nav{display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:20px;gap:12px}
.btn-secondary{background:transparent;border:2px solid var(--border);
  color:var(--heading);border-radius:100px;padding:10px 24px;font-size:.875rem;
  font-weight:600;cursor:pointer;transition:var(--transition);font-family:inherit}
.btn-secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.btn-primary{background:var(--accent-blue);color:#fff;border:none;
  border-radius:100px;padding:10px 24px;font-size:.875rem;font-weight:600;
  cursor:pointer;transition:var(--transition);font-family:inherit}
.btn-primary:hover{background:var(--brand-blue)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-primary:disabled:hover{background:var(--accent-blue)}

/* ===== PROOF ===== */
.proof-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:40px}
.score-card{background:var(--bg-white);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow);text-align:center}
.score-card .before-after{display:flex;align-items:center;justify-content:center;
  gap:16px;margin-bottom:16px}
.score-card .band-box{padding:12px 20px;border-radius:var(--radius);
  font-weight:800;font-size:1.5rem}
.band-before{background:#fef2f2;color:var(--brand-red)}
.band-after{background:#f0fdf4;color:var(--cta-emerald)}
.score-card .arrow{font-size:1.25rem;color:var(--body-light)}
.score-card .timeline{font-size:.8125rem;color:var(--body-light);font-weight:600;
  background:var(--bg-section);display:inline-block;padding:4px 12px;
  border-radius:100px}
.score-card .stars{color:var(--star-gold);font-size:.9375rem;margin-top:10px;
  letter-spacing:2px}
.score-card .quote{font-size:.9375rem;color:var(--body);font-style:italic;
  margin-top:12px;line-height:1.6}
.score-card .name{font-size:.8125rem;font-weight:700;color:var(--heading);
  margin-top:8px}
.score-card .role{font-size:.75rem;color:var(--body-light);margin-top:2px}
.proof-video-heading{text-align:center;font-size:1.25rem;margin-bottom:20px}
.video-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;-webkit-overflow-scrolling:touch}
.video-carousel::-webkit-scrollbar{display:none}
.video-card{min-width:280px;scroll-snap-align:start;background:var(--bg-white);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-shrink:0}
.video-thumb{height:160px;width:100%;display:flex;align-items:center;
  justify-content:center;position:relative;border:none;padding:0;
  background:linear-gradient(135deg,var(--brand-blue),var(--accent-blue));
  background-size:cover;background-position:center;font-family:inherit}
button.video-thumb{cursor:pointer}
/* A card with no video is not interactive and shows no play affordance. */
.video-thumb.is-empty{cursor:default}
.play-icon{width:56px;height:56px;background:rgba(255,255,255,.92);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  color:var(--brand-blue);transition:var(--transition);
  box-shadow:0 4px 16px rgba(0,0,0,.25)}
.video-card.is-playable:hover .play-icon{transform:scale(1.1);background:#fff}

/* ===== VIDEO MODAL ===== */
.video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(9,12,20,.85)}
.video-modal-inner{position:relative;width:min(900px,100%);}
.video-modal-frame{position:relative;padding-top:56.25%;background:#000;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-modal-close{position:absolute;top:-44px;right:0;background:transparent;
  border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:4px 10px}
.video-modal-close:hover{opacity:.7}
.video-card .vid-info{padding:16px}
.video-card .vid-info h4{font-size:.875rem;margin-bottom:4px}
.video-card .vid-info p{font-size:.8125rem;color:var(--body-light)}

/* ===== GAP ANALYSIS ===== */
.gap-table{max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.gap-col-head{padding:16px 20px;font-size:.8125rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.5px}
.gap-col-head.bad{background:#fef2f2;color:var(--brand-red)}
.gap-col-head.good{background:#f0fdf4;color:var(--cta-emerald)}
.gap-row{padding:14px 20px;font-size:.875rem;display:flex;align-items:flex-start;
  gap:8px;border-bottom:1px solid var(--border);background:var(--bg-white)}
.gap-row .icon{flex-shrink:0;font-size:1rem}
/* Without column heads the first row needs the rounded top corners. */
.gap-table.no-heads .gap-row:nth-child(1){border-top-left-radius:var(--radius-lg)}
.gap-table.no-heads .gap-row:nth-child(2){border-top-right-radius:var(--radius-lg)}

/* ===== ROI GRID (Parents) =====
   Three cost scenarios side by side. Only the Parents page renders this;
   the other two ICPs make the same argument in the gap table. */
.roi-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:1000px;
  margin:0 auto}
.roi-card{border-radius:var(--radius-lg);padding:28px 22px;
  border:2px solid var(--border);background:var(--bg-white)}
.roi-card.red{border-color:#fecaca;background:#fff5f5}
.roi-card.amber{border-color:#fde68a;background:#fffbeb}
.roi-card.green{border-color:var(--cta-emerald);background:#ecfdf5;
  box-shadow:0 12px 30px rgba(5,150,105,.15)}
.roi-card h3{font-size:1.1875rem;margin-bottom:16px}
.roi-card ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.roi-card li{font-size:.9375rem;padding-left:22px;position:relative}
.roi-card li::before{content:"•";position:absolute;left:6px}
.roi-callout{margin:32px auto 0;max-width:1000px;text-align:center;
  background:var(--brand-blue);color:#fff;padding:22px;border-radius:16px;
  font-size:1.25rem;font-weight:800}

/* ===== VALUE STACK ===== */
.stack-card{background:var(--bg-white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);max-width:640px;margin:0 auto;overflow:hidden}
.stack-items{padding:28px}
.stack-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border)}
.stack-item:last-child{border-bottom:none}
.stack-item .si-icon{width:40px;height:40px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0}
.stack-item:nth-child(1) .si-icon{background:#eef2ff}
.stack-item:nth-child(2) .si-icon{background:#fef9c3}
.stack-item:nth-child(3) .si-icon{background:#f0fdf4}
.stack-item:nth-child(4) .si-icon{background:#fce7f3}
.stack-item:nth-child(5) .si-icon{background:#fff7ed}
.stack-item .si-text h4{font-size:.9375rem;margin-bottom:2px}
.stack-item .si-text p{font-size:.8125rem;color:var(--body-light)}
.stack-item .si-value{margin-left:auto;font-size:.8125rem;color:var(--body-light);
  text-decoration:line-through;white-space:nowrap;flex-shrink:0}
.stack-footer{background:linear-gradient(135deg,var(--brand-blue),var(--accent-blue));
  color:#fff;padding:28px;text-align:center}
.stack-footer .old-price{font-size:1rem;text-decoration:line-through;opacity:.7;
  margin-bottom:4px}
.stack-footer .new-price{font-size:2rem;font-weight:900;margin-bottom:4px}
.stack-footer .price-note{font-size:.8125rem;opacity:.8;margin-bottom:16px}
.stack-footer .cta-book{display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--brand-blue);font-size:1rem;font-weight:700;
  padding:14px 32px;border-radius:100px;transition:var(--transition)}
.stack-footer .cta-book:hover{transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(0,0,0,.2)}

/* ===== PARENT PITCH ===== */
.parent-card{max-width:640px;margin:0 auto;
  background:linear-gradient(135deg,#fffbeb,#fef3c7);border:2px solid #fcd34d;
  border-radius:var(--radius-lg);padding:36px 28px;text-align:center}
.parent-card .tag{display:inline-block;background:#f59e0b;color:#fff;
  font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:100px;
  margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}
.parent-card h2{font-size:1.5rem;margin-bottom:12px}
.parent-card p{font-size:1rem;color:var(--body);margin-bottom:8px;line-height:1.7}
.parent-card .save-amount{font-size:1.75rem;font-weight:900;color:var(--brand-red);
  margin:16px 0}
.parent-card .body-small{font-size:.9375rem}
.parent-card .cta-parent{display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-blue);color:#fff;font-size:1rem;font-weight:700;
  padding:14px 28px;border-radius:100px;transition:var(--transition);margin-top:8px}
.parent-card .cta-parent:hover{background:var(--accent-blue);transform:translateY(-2px)}

/* ===== FAQ ===== */
.faq-list{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg-white);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.faq-q{padding:18px 20px;font-size:.9375rem;font-weight:700;color:var(--heading);
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;transition:var(--transition);width:100%;background:none;border:none;
  font-family:inherit;text-align:left}
.faq-q:hover{color:var(--accent-blue)}
.faq-q .arrow-icon{transition:transform .3s;font-size:1.25rem;flex-shrink:0}
.faq-item.open .faq-q .arrow-icon{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 20px 20px;font-size:.9375rem;color:var(--body);line-height:1.7}
.faq-cta-wrap{text-align:center;margin-top:36px}

/* ===== FINAL CTA ===== */
.final-cta{padding:64px 0;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--brand-blue),var(--accent-blue))}
.final-cta h2{color:#fff;font-size:1.75rem;margin-bottom:12px}
.final-cta p{opacity:.85;font-size:1rem;margin:0 auto 24px;max-width:500px}
.final-cta .hero-cta{box-shadow:0 4px 20px rgba(0,0,0,.2)}

/* ===== FOOTER ===== */
.lp-footer{background:var(--heading);color:rgba(255,255,255,.6);text-align:center;
  padding:24px;font-size:.75rem}
.lp-footer p + p{margin-top:4px}
.lp-footer a{text-decoration:underline}

/* ===== STICKY BAR (mobile) ===== */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:80;
  background:var(--bg-white);border-top:1px solid var(--border);padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(100%);transition:transform .3s;
  box-shadow:0 -4px 20px rgba(0,0,0,.08)}
.sticky-bar.visible{transform:translateY(0)}
.sticky-bar .sb-text{font-size:.8125rem;font-weight:700;color:var(--heading)}
.sticky-bar .sb-text span{display:block;font-size:.6875rem;font-weight:500;
  color:var(--body-light)}
.sticky-bar .sb-btn{background:var(--cta-emerald);color:#fff;border-radius:100px;
  padding:12px 20px;font-size:.875rem;font-weight:700;white-space:nowrap;
  transition:var(--transition)}
.sticky-bar .sb-btn:hover{background:var(--cta-emerald-hover)}

/* ===== SOCIAL PROOF TOAST ===== */
.proof-toast{position:fixed;bottom:80px;left:16px;z-index:70;
  background:var(--bg-white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:12px 16px;display:flex;align-items:center;gap:10px;max-width:320px;
  transform:translateX(-120%);transition:transform .5s cubic-bezier(.4,0,.2,1);
  border-left:4px solid var(--cta-emerald)}
.proof-toast.show{transform:translateX(0)}
.proof-toast .pt-avatar{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-blue),var(--cta-emerald));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-weight:700;font-size:.8125rem;flex-shrink:0}
.proof-toast .pt-text{font-size:.75rem;line-height:1.4}
.proof-toast .pt-text strong{color:var(--heading)}
.proof-toast .pt-text .pt-time{color:var(--body-light);font-size:.6875rem}

/* ===== BREAKPOINTS ===== */
@media(min-width:768px){
  :root{--logo-height:36px}
  .hero h1{font-size:2.75rem}
  .hero .sub{font-size:1.125rem}
  .proof-grid{grid-template-columns:1fr 1fr}
  .reap-body{padding:36px 40px}
  .goal-cards{flex-direction:row}
  .goal-card{flex:1}
  .sticky-bar{display:none !important}
  body{padding-bottom:0 !important}
}
@media(min-width:1024px){
  .hero h1{font-size:3.25rem}
  .roi-grid{grid-template-columns:repeat(3,1fr)}
  /* The recommended column is lifted, as in the source design. */
  .roi-card.green{transform:scale(1.03)}
}
@media(max-width:767px){
  body{padding-bottom:64px}
  .guarantee-badge{display:none}
  .header-inner{padding:0 4px}
  .proof-toast{bottom:76px;left:8px;right:8px;max-width:none}
}