/* apply.cleverprofits.com
 *
 * STRUCTURE IS 1:1 WITH THE CLICKFUNNELS PAGE. STYLING IS v3.
 *
 * Every colour, radius and font lives in the token block below, so the restyle
 * is a token edit rather than a rewrite. The ClickFunnels look (electric blue
 * #1F31D8, pill glows, a 4s shimmer sweep on the header badge) is deliberately
 * NOT carried over — it is not the v3 brand. Stan's call 2026-09-18: port the
 * structure, restyle to v3.
 *
 * v3 brand: Clever Blue #0A2C92, Deep Navy #04165C, Figtree + Inter.
 */

:root{
  --clever-blue:#0A2C92;
  --deep-navy:#04165C;
  --ink:#14192B;
  --muted:#5C6478;
  --line:#E2E6EF;
  --ground:#FFFFFF;
  --ground-alt:#F7F8FB;
  --ground-dark:#04165C;
  --on-dark:#EEF1FA;
  --on-dark-muted:#A8B4D8;
  --radius:14px;
  --radius-pill:999px;
  --wrap:1120px;
  --disp:'Figtree','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--clever-blue)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:72px 0}

h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;text-wrap:balance;margin:0 0 16px}
h1{font-size:clamp(30px,4.6vw,52px);line-height:1.08;font-weight:800}
h2{font-size:clamp(25px,3.2vw,38px);line-height:1.15;font-weight:700}
h3{font-size:19px;line-height:1.3;font-weight:600;margin-bottom:8px}
p{margin:0 0 16px}

.kicker{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.14em;
        text-transform:uppercase;color:var(--clever-blue);margin:0 0 12px}

/* ── CTA ─────────────────────────────────────────────────────────────── */
.cta{display:inline-block;background:var(--clever-blue);color:#fff;text-decoration:none;
     font-family:var(--disp);font-weight:700;font-size:17px;padding:16px 38px;
     border-radius:var(--radius-pill);transition:transform .18s ease,background .18s ease;
     margin-top:8px}
.cta:hover{background:#0b34ad;transform:translateY(-2px)}
.cta:focus-visible{outline:3px solid #8FA8F0;outline-offset:3px}

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero{background:var(--ground-dark);color:var(--on-dark);padding:64px 0 76px;text-align:center}
.hero h1{color:#fff;max-width:20ch;margin-inline:auto}
.hero h1 em{font-style:normal;color:#8FA8F0}
.eyebrow{font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.18em;
         text-transform:uppercase;color:#8FA8F0;margin:0 0 18px}
.lede{font-size:19px;color:var(--on-dark-muted);max-width:62ch;margin:0 auto 32px}
.proof-line{color:var(--on-dark-muted);font-size:16px;margin:26px auto 20px;max-width:56ch}

.vsl{max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);
     overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14)}
.vsl video,.vsl iframe{width:100%;height:100%;display:block}
.vsl-placeholder{display:flex;align-items:center;justify-content:center;height:100%;
     color:var(--on-dark-muted);font-family:var(--body);font-size:14.5px;text-align:center;padding:20px}

/* ── LOGOS / STATS ───────────────────────────────────────────────────── */
.logos{background:var(--ground-alt);padding:44px 0;text-align:center}
.logos .kicker{margin-bottom:22px}
.stats{padding:56px 0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;text-align:center}
.stat .n{display:block;font-family:var(--disp);font-size:46px;font-weight:800;line-height:1;
         color:var(--clever-blue);font-variant-numeric:tabular-nums}
.stat .l{display:block;margin-top:8px;color:var(--muted);font-size:15px}

/* ── BENEFITS ────────────────────────────────────────────────────────── */
.benefits{background:var(--ground-alt);text-align:center}

/* ── CASE STUDIES ────────────────────────────────────────────────────── */
.cases{text-align:center}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;
           margin-top:36px;text-align:left}
.case{margin:0}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
    background:#000 center/cover no-repeat;cursor:pointer}
.yt-play{position:absolute;inset:0;margin:auto;width:66px;height:46px;border:0;cursor:pointer;
    border-radius:12px;background:rgba(0,0,0,.72)}
.yt-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
    border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt:hover .yt-play{background:var(--clever-blue)}
.case-n{display:block;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--clever-blue);margin:18px 0 8px}
.case blockquote{margin:0 0 10px;font-size:17px;line-height:1.5}
.case cite,.quote cite{font-style:normal;color:var(--muted);font-size:14.5px}

/* ── TESTIMONIALS ────────────────────────────────────────────────────── */
.quotes{background:var(--ground-alt);text-align:center}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
            margin-bottom:34px;text-align:left}
.quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.quote img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.quote h3{font-size:17px}
.quote blockquote{margin:0 0 14px;color:var(--muted);font-size:15.5px}
.quote cite b{display:block;color:var(--ink);font-weight:600}
.quote cite span{display:block;font-size:13.5px}

/* ── PACKAGES ────────────────────────────────────────────────────────── */
.packages{text-align:center}
.pkg img{width:44px;height:44px;margin-bottom:14px}
.pkg ul{margin:0;padding-left:20px;color:var(--muted);font-size:15px}
.pkg li{margin-bottom:7px}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{background:var(--ground-alt)}
.faq h2{text-align:center;margin-bottom:30px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
             padding:18px 22px;margin-bottom:12px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:17.5px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--clever-blue);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details>*:not(summary){margin-top:14px}
.faq p,.faq li{color:var(--muted);font-size:15.5px}

/* ── APPLY / FORM ────────────────────────────────────────────────────── */
.apply{background:var(--ground-dark);color:var(--on-dark);text-align:center}
.apply h2{color:#fff}
.form-slot{max-width:720px;margin:28px auto 0;min-height:420px;background:rgba(255,255,255,.05);
           border:1px dashed rgba(255,255,255,.28);border-radius:var(--radius);
           display:flex;align-items:center;justify-content:center;color:var(--on-dark-muted)}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot{background:#020E38;color:var(--on-dark-muted);padding:40px 0;text-align:center;font-size:14px}
.foot a{color:var(--on-dark)}
.foot .small{font-size:12.5px;max-width:74ch;margin-inline:auto;opacity:.75}

@media (max-width:640px){
  body{font-size:16px}
  section{padding:52px 0}
  .hero{padding:44px 0 56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* ── hero payoff ──────────────────────────────────────────────────────────
   "For One Monthly Fee" is the end of the headline and should land as the
   payoff, not trail off. Heavier weight plus a brand underline drawn as a
   gradient so it sits under the text without a descender clash. */
.hero h1 .payoff{
  display:inline-block;font-weight:900;color:#fff;
  background-image:linear-gradient(180deg,#8FA8F0,#8FA8F0);
  background-repeat:no-repeat;background-size:100% 4px;background-position:0 100%;
  padding-bottom:6px;
}
@media(max-width:640px){ .hero h1 .payoff{background-size:100% 3px;padding-bottom:4px} }

/* ── trusted-by marquee ───────────────────────────────────────────────────
   Lifted from the organic booking page. Track holds the logo set twice so the
   -50% translate loops seamlessly. Pauses on hover; static under reduced motion. */
.tmarquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tmarquee-track{display:flex;align-items:center;width:max-content;
  gap:clamp(40px,5vw,78px);animation:tmarquee 42s linear infinite}
.tmarquee:hover .tmarquee-track{animation-play-state:paused}
.tmarquee-track img{height:clamp(30px,3vw,42px);width:auto;object-fit:contain;
  opacity:.58;transition:opacity .2s ease;flex:none}
.tmarquee-track img:hover{opacity:.95}
@keyframes tmarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .tmarquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}

/* ── benefits as one list, not a grid of cards ────────────────────────────
   Stan 2026-09-22: read down a single column rather than scanning boxes, and
   keep it out of full page width on desktop while letting it breathe on mobile. */
.benefits{text-align:left}
.benefits h2{text-align:center}
.benefit-list{list-style:none;margin:34px auto 30px;padding:0;
  max-width:820px;                     /* constrained on desktop, per Stan */
  border-top:1px solid var(--line)}
.benefit-list li{display:flex;gap:20px;align-items:flex-start;
  padding:22px 4px;border-bottom:1px solid var(--line)}
.benefit-list .bn{flex:none;font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.08em;color:var(--clever-blue);opacity:.55;padding-top:3px;min-width:28px}
.benefit-list h3{margin:0 0 5px;font-size:17.5px;line-height:1.35}
.benefit-list p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media(max-width:640px){
  .benefit-list{max-width:none}        /* full width on mobile, per Stan */
  .benefit-list li{gap:14px;padding:18px 0}
  .benefit-list .bn{min-width:22px;font-size:12px}
  .benefit-list h3{font-size:16.5px}
}

/* ── packages: four across, headline toggles the list like a dropdown ──── */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:34px 0 30px;text-align:left}
.pkg{border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  background:#fff;display:flex;flex-direction:column}
.pkg img{width:40px;height:40px;margin-bottom:12px}
.pkg h3{margin:0;font-size:16px;line-height:1.3}
.pkg-toggle{all:unset;display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;width:100%;cursor:pointer;font:inherit;font-weight:800;color:var(--ink)}
.pkg-toggle .chev{flex:none;width:9px;height:9px;margin-top:5px;
  border-right:2px solid var(--clever-blue);border-bottom:2px solid var(--clever-blue);
  transform:rotate(45deg);transition:transform .22s ease;opacity:.75}
.pkg-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}
/* Collapse via max-height, not the grid 0fr->1fr trick.
   Two reasons that trick failed here and both are worth remembering:
   it sizes only the FIRST row, so it needs exactly one child (eight <li>
   siblings silently stayed open) - and even with the .pkg-list wrapper added,
   `1fr` resolved to 0px inside the flex-column .pkg card, including when forced
   inline. max-height is less elegant but resolves correctly in any container.
   The 700px ceiling clears the longest list (8 items, ~335px measured). */
.pkg-list{overflow:hidden;max-height:0;
  transition:max-height .28s ease,margin-top .28s ease}
.pkg-list > ul{margin:0;padding:0 0 0 18px;color:var(--muted);font-size:14.5px}
.pkg-list li{margin-bottom:6px}
.pkg.open .pkg-list, .pkg:hover .pkg-list{max-height:700px;margin-top:12px}
@media(max-width:1024px){ .pkg-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){
  .pkg-grid{grid-template-columns:1fr}
  /* no hover on touch - Stan's call: always open on mobile */
  .pkg-list{max-height:none;margin-top:12px}
  .pkg-toggle{cursor:default}
  .pkg-toggle .chev{display:none}
}