:root{
  --c-accent:#f05f5c; --c-accent-hover:#EE4844;
  --c-ink:#020617; --c-muted:#64748b; --c-muted-2:#475569;
  --c-card-body:#cbd5e1; --c-subtitle:#e2e8f0; --c-white:#fff;
  --c-light:#f1f5f9; --c-icon:#020617;
  --grad-dark:radial-gradient(120% 120% at 50% 100%, #075985 0%, #082f49 100%);
  --radius-media:16px; --radius-btn:12px; --radius-pill:100px;
  --shadow:0 4px 16px rgba(0,0,0,.25);
  --maxw:1140px; --pad-x:150px; --pad-y:96px;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--c-ink);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.section{padding:var(--pad-y) var(--pad-x)}
.section--dark{background:var(--grad-dark);color:var(--c-white)}
.section--light{background:var(--c-light)}
.container{width:100%;max-width:var(--maxw);margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);
  background:var(--c-accent);color:#fff;font-weight:600;font-size:20px;line-height:1.5;
  padding:12px 24px;border:0;border-radius:var(--radius-btn);cursor:pointer;
  transition:background-color .2s ease}
.btn:hover,.btn:focus-visible{background:var(--c-accent-hover)}

.media-frame{border-radius:var(--radius-media);overflow:hidden;box-shadow:var(--shadow);
  background:#e2e8f0}
/* box-shadow paints outside the border box, so overflow:hidden clips the embed/img
   to rounded corners WITHOUT clipping the shadow. Single element is sufficient. */

.embed--video{position:relative;width:100%}            /* Vidalytics injects its own 16:9 box */
.embed--quiz{width:100%;max-width:781px;margin-inline:auto}

.pill{display:inline-flex;background:var(--c-accent);color:#fff;font-weight:600;font-size:20px;
  line-height:1.5;padding:12px 24px;border-radius:var(--radius-pill)}

h1,h2,h3{letter-spacing:-.02em;line-height:1.25}

/* ── Navbar ── */
.navbar{padding-block:0;min-height:80px;display:flex;align-items:center}
.navbar__inner{display:flex;justify-content:center}

/* ── Hero ── */
.hero{display:flex;flex-direction:column;gap:64px;align-items:center;text-align:center}
.hero__copy{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:940px}
.hero h1{font-size:48px;font-weight:700}
.lead{font-size:24px;font-weight:500;color:var(--c-muted);line-height:1.33}

/* ── Process ── */
.process{display:flex;flex-direction:column;gap:64px}
.process__title{font-size:36px;font-weight:700;text-align:center}
.process__head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.process__desc{font-size:20px;font-weight:500;color:var(--c-muted)}
.process__rows{display:flex;flex-direction:column;gap:48px}
.prow{display:flex;align-items:center;gap:64px}
.prow__media{flex:0 0 540px;max-width:540px}
.prow__media img{width:100%;height:auto}
.prow__text{flex:1;display:flex;flex-direction:column;gap:12px}
.prow__text h3{font-size:24px;font-weight:600}
.prow__text p{font-size:16px;color:var(--c-muted);line-height:1.5}
.eyebrow-number{width:48px;height:auto}

/* ── Reviews ── */
.reviews{display:flex;flex-direction:column;gap:64px}
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.reviews__head h2{font-size:36px;font-weight:700}
.reviews__grid{display:flex;gap:40px}
.rcard{flex:1;display:flex;flex-direction:column;gap:16px;padding:28px 24px;border:2px solid var(--c-accent);border-radius:16px}
.rcard__pfp{width:80px;height:80px;border-radius:50%;object-fit:cover}
.rcard__head{display:flex;flex-direction:column}
.rcard__name{font-size:24px;font-weight:600;color:#fff}
.rcard__sub{font-size:16px;font-weight:600;color:var(--c-subtitle)}
.rcard__body{font-size:14px;font-weight:500;color:var(--c-card-body);line-height:1.43}

/* ── FAQ ── */
.faq{display:flex;flex-direction:column;gap:64px}
.faq__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.faq__heading{display:flex;flex-direction:column;gap:16px}
.faq__heading h2{font-size:36px;font-weight:700;color:var(--c-ink)}
.faq__heading p{font-size:20px;font-weight:500;color:var(--c-muted)}
.faq__list{display:flex;flex-direction:column;gap:40px}
.faq__head--nobtn{justify-content:center;text-align:center}
.faq__head--nobtn .faq__heading{align-items:center}
.faq-item__answer p{white-space:pre-line}

/* ── CTA ── */
.cta{display:flex;flex-direction:column;gap:64px;align-items:center}
.cta__copy{text-align:center;display:flex;flex-direction:column;gap:16px}
.cta__copy h2{font-size:36px;font-weight:700}
.cta__copy p{font-size:20px;font-weight:500;color:var(--c-muted-2)}

/* ── Footer ── */
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.footer__links{display:flex;gap:12px;font-size:14px;font-weight:500}
.footer__copy{font-size:14px;font-weight:500}

/* ── Confirmation page ── */
.confirm-step{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.confirm-step h2{font-size:36px;font-weight:700}
.lead--muted{color:var(--c-muted)}
.confirm-email{max-width:781px;margin-inline:auto}
.confirm-email img{width:100%;height:auto}
/* 2x5 grid: 2 equal columns, rows top-aligned so each cell hugs its review image */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:start}
.review-grid__cell img{width:100%;height:auto}

/* ── FAQ accordion + icon morph (Task 6) ── */
.faq-item{border:2px solid var(--c-accent);border-radius:16px;padding:32px;overflow:hidden}
.faq-item__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:40px;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--c-ink)}
.faq-item__question{font-size:18px;font-weight:600;line-height:1.55}
.faq-item__icon{flex:0 0 24px;color:var(--c-icon);line-height:0}
/* smooth height via grid-rows 0fr -> 1fr (animates to true content height) */
.faq-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease,margin-top .35s ease;margin-top:0}
.faq-item__answer{overflow:hidden;min-height:0}
.faq-item__answer p{font-size:14px;font-weight:500;color:var(--c-muted);line-height:1.43;white-space:pre-line}
.faq-item.is-open .faq-item__panel{grid-template-rows:1fr;margin-top:16px}
/* + morphs to − : collapse the vertical bar, smoothly */
.faq-item__bar-v{transform-origin:center;transition:transform .3s ease,opacity .3s ease}
.faq-item.is-open .faq-item__bar-v{transform:scaleY(0);opacity:0}
.faq-item__bar-h{transition:transform .3s ease}
.faq-item.is-open .faq-item__icon svg{transition:transform .3s ease}

/* Tablet */
@media (max-width:1024px){
  :root{--pad-x:64px;--pad-y:72px}
  .reviews__grid{flex-wrap:wrap}
  .rcard{flex:1 1 45%}
}
/* Mobile — matches the 375px design frame (spacing + type scale) */
@media (max-width:768px){
  :root{--pad-x:16px;--pad-y:64px}
  .navbar{min-height:60px}
  .hero,.process,.reviews,.faq,.cta{gap:48px}
  .hero{padding:24px var(--pad-x) 64px}
  .hero h1{font-size:34px;line-height:1.2}
  .lead{font-size:18px}
  .process__title,.reviews__head h2,.faq__heading h2,.cta__copy h2,.confirm-step h2{font-size:24px}
  .process__desc{font-size:18px}
  .prow__text h3{font-size:18px}
  .rcard__name{font-size:20px}
  .rcard__sub{font-size:14px}
  .rcard__body{font-size:12px}
  .faq__heading p{font-size:16px}
  .faq-item__question{font-size:14px}
  .faq-item__answer p{font-size:12px}
  .cta__copy p{font-size:16px}
  .btn{width:100%;font-size:18px;padding:16px 24px}
  /* stacking */
  .prow{flex-direction:column-reverse;gap:24px}
  .prow--reverse{flex-direction:column}
  .prow__media{flex-basis:auto;width:100%;max-width:none}
  .process__rows{gap:40px}
  .reviews__head,.faq__head{flex-direction:column;align-items:flex-start;gap:24px}
  .reviews__grid{flex-direction:column;gap:24px}
  .rcard{flex-basis:auto}
  .review-grid{grid-template-columns:1fr;gap:24px}
  .embed--quiz{max-width:none}
  .faq__list{gap:24px}
  .faq-item__q{gap:12px}
}

/* ── Legal pages (Privacy / Terms) ── */
.legal{padding:var(--pad-y) var(--pad-x)}
.legal__inner{max-width:820px;margin-inline:auto}
.legal__head{display:flex;flex-direction:column}
.legal__title{font-size:48px;font-weight:700;color:var(--c-ink);letter-spacing:-.02em;line-height:1.15}
.legal__org{font-size:20px;font-weight:600;color:var(--c-accent);margin-top:8px}
.legal__updated{font-size:16px;font-weight:500;color:var(--c-muted);margin-top:4px}
.legal__rule{height:3px;border:0;background:var(--c-accent);border-radius:2px;margin:24px 0 0}
.legal__body{margin-top:32px}
.legal__body > :first-child{margin-top:0}
.legal__body h2{font-size:36px;font-weight:700;color:var(--c-ink);letter-spacing:-.02em;line-height:1.25;margin:48px 0 0}
.legal__body h3{font-size:24px;font-weight:600;color:var(--c-ink);line-height:1.3;margin:28px 0 0}
.legal__body p{font-size:16px;font-weight:500;color:var(--c-muted);line-height:1.65;margin:14px 0 0}
.legal__body ul{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.legal__body li{font-size:16px;font-weight:500;color:var(--c-muted);line-height:1.6}
.legal__body li::marker{color:var(--c-accent)}
.legal__body a{color:var(--c-accent);text-decoration:underline;overflow-wrap:anywhere}
.legal__body strong{color:var(--c-ink);font-weight:600}
@media (max-width:768px){
  .legal__title{font-size:34px}
  .legal__body h2{font-size:24px}
  .legal__body h3{font-size:20px}
}