/* The Ten Minute Tutor — concept · Scalus
   Brand palette supplied by Liz Dunoon (Canva, ttmt-square-transparent):
   #2e63a3 blue · #d90710 red · #ffd764 yellow · #ffffff · #000000 */

:root{
  /* Liz, 28 Jul: "There is a lot of red on this page and I think it reminds people of
     school and red pens, change this to blue tones." The action colour is now a brighter
     blue that still separates from the structural brand blue, so the two tone hierarchy
     survives. The --red* names are kept so every existing rule follows automatically.
     Original brand red #d90710 preserved in tmt.css.pre-blue if she wants it back. */
  --action:#1f77d0;      /* action blue, replaces the brand red */
  --action-2:#3f92e8;
  --action-deep:#12508f;
  --red:var(--action);
  --red-2:var(--action-2);
  --red-deep:var(--action-deep);
  --blue:#2e63a3;        /* brand blue — structure and trust */
  --blue-2:#7fb0e8;
  --blue-deep:#1f4778;
  --blue-soft:#e7eefa;
  --yellow:#ffd764;      /* brand yellow — highlight and celebration */
  --yellow-2:#ffe9a6;

  /* Liz + Tim, call of 7 Aug: "buttons related to register for training will be green,
     buttons related to buying the app will be orange". Orange is Liz's own hex from
     WhatsApp 6 Aug (#F97316). No green hex was ever supplied, so the green is chosen to
     match: #F97316 is Tailwind orange-500, so the green is that same scale's green-600,
     deepened for white-text contrast. Swap --green* here if Liz sends her own. */
  --orange:#f97316;      /* Liz, 6 Aug: "Every app sign up button ... Orange (#F97316)" */
  --orange-2:#fb923c;
  --orange-deep:#ea580c;
  --green:#16a34a;       /* register / progress toward the training */
  --green-2:#22c55e;
  --green-deep:#15803d;
  --ink:#0b0e14;         /* brand black */
  --ink-2:#4b5568;
  --navy:#10233d;        /* dark section base, drawn down from the brand blue */
  --navy-2:#1e4478;
  --cream:#e8f0fb;       /* Liz, 28 Jul: "make the website background bluer" */
  --paper:#ffffff;
  --line:rgba(11,14,20,.11);
  --shadow:0 24px 60px -24px rgba(11,14,20,.30);
  --shadow-sm:0 10px 30px -12px rgba(11,14,20,.24);
  --glass:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.7);
  --r:22px; --r-sm:14px;
  --wrap:1180px;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --head:'Sora',var(--sans);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.02em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sec{padding:96px 0}
@media(max-width:640px){.sec{padding:60px 0}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--red),var(--blue));box-shadow:0 0 12px rgba(31,119,208,.5)}

/* ---------- concept ribbon ---------- */
.concept-note{position:fixed;bottom:14px;left:14px;right:14px;max-width:560px;margin:0 auto;z-index:115;
  background:rgba(11,14,20,.93);color:#fff;border-radius:14px;padding:11px 16px;font-size:13px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm)}
.concept-note button{background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:.7}
.concept-note button:hover{opacity:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:600;
  font-size:16px;padding:15px 28px;border-radius:100px;cursor:pointer;border:0;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--red-2),var(--red-deep));color:#fff;
  box-shadow:0 14px 30px -10px rgba(18,80,143,.5)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(18,80,143,.6)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-3px)}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-line:hover{transform:translateY(-3px);border-color:var(--red)}
.btn-lg{font-size:17px;padding:17px 34px}

/* ---------- action colour coding (call of 7 Aug) ----------
   ORANGE = buy the app / start a subscription.  GREEN = register for the free training.
   These override .btn-primary / .btn-line / .btn-ghost wherever they are added, so the
   size and shape of every button is untouched — only the colour carries the meaning. */
.btn-buy{background:linear-gradient(135deg,var(--orange-2),var(--orange-deep));color:#fff;
  box-shadow:0 14px 30px -10px rgba(234,88,12,.5)}
.btn-buy:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(234,88,12,.62)}
.btn-reg{background:linear-gradient(135deg,var(--green-2),var(--green-deep));color:#fff;
  box-shadow:0 14px 30px -10px rgba(21,128,61,.5)}
.btn-reg:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(21,128,61,.62)}

/* Outline and on-dark variants keep their weight in the hierarchy but pick up the
   matching accent, so a secondary training link still reads as "training". */
.btn-line.btn-reg{background:#fff;color:var(--green-deep);border:1.5px solid rgba(22,163,74,.42);box-shadow:var(--shadow-sm)}
.btn-line.btn-reg:hover{border-color:var(--green);background:rgba(22,163,74,.06)}
.btn-line.btn-buy{background:#fff;color:var(--orange-deep);border:1.5px solid rgba(249,115,22,.42);box-shadow:var(--shadow-sm)}
.btn-line.btn-buy:hover{border-color:var(--orange);background:rgba(249,115,22,.06)}
.btn-ghost.btn-reg{background:rgba(34,197,94,.3);color:#fff;border:1.5px solid rgba(74,222,128,.75);box-shadow:none}
.btn-ghost.btn-reg:hover{background:rgba(34,197,94,.44)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-deep);
  background:rgba(31,119,208,.09);padding:7px 15px;border-radius:100px}
.eyebrow.on-dark{color:var(--blue-2);background:rgba(127,176,232,.16)}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:16px;padding:10px 14px 10px 20px;border-radius:100px;
  background:rgba(232,240,251,.82);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 30px -14px rgba(11,14,20,.3);transition:.3s}
.hd.scrolled .hd-in{background:rgba(255,255,255,.9);box-shadow:0 12px 34px -16px rgba(11,14,20,.4)}
.brand{display:flex;align-items:center}
.brand img{height:42px;width:auto}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-weight:600;font-size:15px;color:var(--ink-2);transition:.2s;white-space:nowrap}
.nav a:hover{color:var(--red-deep)}
.nav a.active,.mMenu a.active{color:var(--red-deep)}
@media(max-width:1080px){.nav{gap:15px}.nav a{font-size:14px}}
.hd-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mMenu{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:#fff;z-index:99;
  transform:translateX(100%);transition:.35s cubic-bezier(.4,0,.2,1);padding:96px 28px 40px;
  box-shadow:-20px 0 60px -20px rgba(11,14,20,.4);display:flex;flex-direction:column;gap:6px}
.mMenu.open{transform:translateX(0)}
.mMenu a{padding:14px 8px;font-family:var(--head);font-weight:600;font-size:19px;border-bottom:1px solid var(--line)}
.mMenu .btn{margin-top:18px;justify-content:center}

/* ---------- hero ---------- */
/* Liz, call of 7 Aug: too much negative space between the 30 day money back guarantee
   and the "Why the struggle happens" heading. Hero foot and the next section's head are
   both pulled in, which closes roughly 186px of dead space down to about 120px. */
.hero{position:relative;padding:150px 0 56px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 55% at 82% 8%,rgba(74,131,200,.34),transparent 60%),
    radial-gradient(50% 50% at 10% 30%,rgba(46,99,163,.16),transparent 60%),
    linear-gradient(180deg,#e9f1fb 0%,var(--cream) 62%)}
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;z-index:-1;animation:float 14s ease-in-out infinite}
.blob.b1{width:340px;height:340px;background:radial-gradient(circle,rgba(255,215,100,.75),transparent 70%);top:-60px;right:6%}
.blob.b2{width:300px;height:300px;background:radial-gradient(circle,rgba(74,131,200,.5),transparent 70%);bottom:-40px;left:-4%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-h1{font-size:clamp(2.3rem,5.2vw,4rem);color:var(--ink);margin:20px 0 0}
.hero-h1 .w{display:inline-block;opacity:0;transform:translateY(22px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.hero-h1 .w.in{opacity:1;transform:none}
.hero-h1 .mark{color:transparent;background:linear-gradient(120deg,var(--red),var(--red-2));-webkit-background-clip:text;background-clip:text}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--ink-2);max-width:520px;margin:22px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stores{display:flex;gap:14px;align-items:center;margin-top:26px;flex-wrap:wrap}
.stores img{height:52px;width:auto;border-radius:11px;transition:transform .25s;filter:drop-shadow(0 8px 18px rgba(11,14,20,.28))}
.stores a:hover img{transform:translateY(-3px)}
.hero-trust{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
/* Liz, 28 Jul: number and its unit sit together on the top line, both bold and blue,
   with the unit word at half the size of the number. */
.hero-trust .n{font-family:var(--head);font-weight:800;font-size:1.9rem;color:var(--blue-deep);line-height:1;
  display:flex;align-items:baseline;gap:.3rem;white-space:nowrap}
.hero-trust .n .u{font-size:50%;font-weight:800;color:var(--blue-deep)}
.hero-trust .l{font-size:13px;color:var(--ink-2);margin-top:6px;max-width:130px}

.hero-media{position:relative}
.hero-frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);
  border:6px solid #fff;transform:rotate(1.4deg);transition:transform .5s}
.hero-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hero-media:hover .hero-frame{transform:rotate(0)}
.hero-badge{position:absolute;z-index:3;background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--glass-brd);border-radius:18px;padding:14px 18px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:12px}
.hero-badge .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,var(--red-2),var(--red-deep));color:#fff;flex:none}
.hero-badge .t{font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);line-height:1.15}
.hero-badge .s{font-size:12px;color:var(--ink-2)}
/* Liz, call of 7 Aug: the badges must not sit over the children's faces. On the new
   uncropped photo the faces run from about 20% to 62% of the height, so both badges are
   pushed out to the corners, clear of that band. */
.hb-1{top:-22px;left:-30px}
.hb-2{bottom:-38px;right:-32px}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-media{order:-1;max-width:460px;margin:0 auto}
  .hb-1{left:-10px}.hb-2{right:-6px}
}

/* ---------- section heads ---------- */
.sec-head{max-width:720px;margin:0 auto 54px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.75rem);margin:16px 0 0;color:var(--ink)}
.sec-head.on-dark h2{color:#fff}
.sec-head p{font-size:1.1rem;color:var(--ink-2);margin:16px 0 0}
.sec-head.on-dark p{color:rgba(255,255,255,.72)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---------- empathy / problem ---------- */
.empathy{background:linear-gradient(180deg,var(--cream),#fff)}
.hero + .empathy{padding-top:64px}
.hero + .empathy .sec-head{margin-bottom:44px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.pcard .num{font-family:var(--head);font-weight:800;font-size:2.4rem;color:rgba(46,99,163,.16);position:absolute;top:12px;right:20px}
.pcard h3{font-size:1.2rem;margin:0 0 8px;color:var(--ink)}
.pcard p{margin:0;color:var(--ink-2);font-size:.98rem}
@media(max-width:820px){.steps3{grid-template-columns:1fr}}

/* ---------- why different (glass on dark) ---------- */
.dark{position:relative;background:radial-gradient(70% 60% at 80% 0%,var(--navy-2),var(--navy));color:#fff;overflow:hidden}
.dark .dblob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;z-index:0}
/* pure red over navy goes muddy at full strength, so the warm blob is dialled back */
.dark .dblob.o{width:400px;height:400px;background:var(--red);top:-120px;left:-90px;opacity:.26}
.dark .dblob.s{width:420px;height:420px;background:var(--blue);bottom:-140px;right:-100px}
.dark .wrap{position:relative;z-index:1}
.glassgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:30px;backdrop-filter:blur(10px);transition:transform .3s,background .3s,border .3s}
.gcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
.gcard .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:26px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(63,146,232,.92),rgba(18,80,143,.92));box-shadow:0 12px 26px -10px rgba(18,80,143,.6)}
.gcard.blue .ic{background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.gcard h3{font-size:1.25rem;margin:0 0 10px}
.gcard p{margin:0;color:rgba(255,255,255,.74);font-size:.98rem}
@media(max-width:820px){.glassgrid{grid-template-columns:1fr}}

/* ---------- program / whats included ---------- */
.incl{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.incl-list{display:flex;flex-direction:column;gap:16px}
.icard{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.icard:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.icard .b{flex:none;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:1.3rem;color:#fff;
  background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.icard:nth-child(2n) .b{background:linear-gradient(135deg,var(--red-2),var(--red-deep))}
.icard h3{font-size:1.1rem;margin:0 0 4px;color:var(--ink)}
.icard p{margin:0;font-size:.95rem;color:var(--ink-2)}
.incl-media{position:relative}
.incl-media img{border-radius:var(--r);box-shadow:var(--shadow);border:6px solid #fff}
.pill-float{position:absolute;bottom:-16px;left:-16px;background:var(--glass);backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-sm);font-family:var(--head)}
.pill-float b{font-size:1.5rem;color:var(--red-deep);display:block;line-height:1}
.pill-float span{font-size:12px;color:var(--ink-2)}
@media(max-width:900px){.incl{grid-template-columns:1fr;gap:34px}.incl-media{max-width:440px;margin:0 auto}}

/* ---------- how it works ---------- */
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.hcard{position:relative;text-align:center;padding:38px 26px 30px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm)}
.hcard .st{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:1.5rem;color:#fff;
  background:linear-gradient(135deg,var(--red-2),var(--red-deep));box-shadow:0 14px 28px -10px rgba(18,80,143,.5)}
.hcard h3{font-size:1.2rem;margin:0 0 8px}
.hcard p{margin:0;color:var(--ink-2);font-size:.97rem}
@media(max-width:820px){.how3{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- founder ---------- */
.founder{background:linear-gradient(180deg,#fff,var(--blue-soft))}
.founder-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.founder-photo{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.founder blockquote{font-family:var(--head);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.32;color:var(--ink);margin:16px 0 22px}
.founder .who{font-weight:700;color:var(--red-deep);font-family:var(--head)}
.founder .who span{display:block;font-family:var(--sans);font-weight:400;color:var(--ink-2);font-size:.95rem}
@media(max-width:860px){.founder-in{grid-template-columns:1fr;gap:32px}.founder-photo{max-width:360px}}

/* ---------- reviews ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vcard{background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  position:relative;aspect-ratio:9/11}
.vcard iframe{width:100%;height:100%;border:0;display:block}
.vcard .cap{position:absolute;top:12px;left:12px;z-index:2;background:rgba(11,14,20,.75);color:#fff;
  padding:6px 12px;border-radius:100px;font-size:12px;font-weight:600;backdrop-filter:blur(4px);pointer-events:none}
@media(max-width:820px){.vgrid{grid-template-columns:1fr;max-width:360px;margin:0 auto}}

.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
.qcard .stars{color:var(--red);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.qcard p{margin:0 0 16px;color:var(--ink);font-size:1rem}
.qcard .by{display:flex;align-items:center;gap:12px}
.qcard .by img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:var(--shadow-sm)}
.qcard .by b{font-family:var(--head);font-size:.95rem;color:var(--ink);display:block}
.qcard .by span{font-size:.82rem;color:var(--ink-2)}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* ---------- student review videos ---------- */
.svgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1040px){.svgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.svgrid{grid-template-columns:repeat(2,1fr);gap:12px}}
.svid{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;margin:0;border:0;
  appearance:none;font:inherit;text-align:left;background:#0b0e14;cursor:pointer;
  border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .28s,box-shadow .28s,outline-color .2s}
.svid:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svid video{width:100%;height:100%;object-fit:cover;display:block}
.svid::after{content:'';position:absolute;inset:auto 0 0 0;height:54%;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(11,14,20,.85),rgba(11,14,20,.25) 55%,transparent)}
.svid-name{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;color:#fff;
  font-family:var(--head);font-weight:600;font-size:.85rem;line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.svid-sound{position:absolute;top:9px;right:9px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  background:rgba(11,14,20,.6);backdrop-filter:blur(6px);color:#fff;border-radius:100px;
  padding:5px 10px;font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.02em;
  transition:background .25s}
.svid.is-live{outline:3px solid var(--red);outline-offset:0}
.svid.is-live .svid-sound{background:var(--red)}
.svid:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* before the clip is attached, the poster carries the tile */
.svid video[data-idle]{opacity:.92}
@media(prefers-reduced-motion:reduce){.svid:hover{transform:none}}

/* hidden until "See more" is pressed */
.svid[hidden]{display:none}
.svmore{display:flex;justify-content:center;margin-top:30px}

/* ---------- review ticker (continuous scrolling wall) ---------- */
.ticker{position:relative;overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tickscroll 150s linear infinite}
.ticker:hover .ticker-track,.ticker.is-held .ticker-track{animation-play-state:paused}
.ticker .svid{width:212px;flex:none;margin-right:14px;aspect-ratio:3/4}
.ticker .svid-name{font-size:.8rem}
@keyframes tickscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:720px){
  .ticker .svid{width:148px;margin-right:10px}
  .ticker .svid-name{font-size:.72rem;left:9px;right:9px;bottom:8px}
  .ticker .svid-sound{padding:4px 8px;font-size:9.5px;top:7px;right:7px}
  .ticker-track{animation-duration:105s}
}
/* no auto motion for reduced-motion users: swipe it instead */
@media(prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ticker-track{animation:none}
}

/* ---------- value / comparison ---------- */
.value-in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.value-in img{border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line)}
.coffee{font-family:var(--head);font-weight:800;font-size:clamp(2rem,4vw,3rem);color:var(--red-deep);line-height:1}
@media(max-width:860px){.value-in{grid-template-columns:1fr;gap:30px}}

/* ---------- guarantee ---------- */
.guar{position:relative;overflow:hidden}
.guar-card{background:linear-gradient(135deg,var(--navy-2),var(--navy));color:#fff;border-radius:28px;
  padding:56px 48px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
/* Liz, 29 Jul: "we need a real guarantee image something like this" (a gold official
   looking seal from thefitnessguy.uk), then 4 Aug: "any guarantee image that looks
   similar, not too fussed, just needs to look official". Built as inline SVG rather
   than a raster so it stays crisp at any size and ships no extra request. Blue and
   yellow, never red, per her 28 Jul note that red reads as school and red pens. */
.guar-seal{width:132px;height:132px;margin:0 auto 22px;display:block;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.34))}
.guar-seal svg{width:100%;height:100%;display:block}
/* Sized to the arc, not by eye: the top arc is a r=74 semicircle, so ~232px of path.
   At 15px with 2.1px tracking the 20 character ring overran it and rendered as
   "ONEV BACK GUARANTE". 12.5px with 1px tracking leaves real headroom. */
.gseal-ring{font-family:var(--head);font-weight:800;font-size:12.5px;fill:#ffffff;letter-spacing:1px}
.gseal-pc{font-family:var(--head);font-weight:800;font-size:34px;fill:#123a66;text-anchor:middle}
.gseal-days{font-family:var(--head);font-weight:800;font-size:14px;fill:#2e63a3;text-anchor:middle;letter-spacing:1.4px}
@media (max-width:520px){.guar-seal{width:112px;height:112px}}
.guar-card h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 14px}
.guar-card p{color:rgba(255,255,255,.78);max-width:620px;margin:0 auto;font-size:1.05rem}

/* ---------- final CTA ---------- */
.finalcta{background:radial-gradient(70% 80% at 50% 0%,rgba(74,131,200,.20),transparent 60%),var(--cream);text-align:center}
.finalcta h2{font-size:clamp(2rem,4.4vw,3.2rem);color:var(--ink);max-width:760px;margin:0 auto}
.finalcta p{font-size:1.15rem;color:var(--ink-2);max-width:560px;margin:18px auto 0}
.finalcta .hero-cta{justify-content:center}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:rgba(255,255,255,.7);padding:56px 0 32px}
.ft-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand img{height:44px;background:#fff;padding:8px 12px;border-radius:12px}
.ft-tag{font-size:.95rem;max-width:360px;margin-top:14px}
.ft-links{display:flex;gap:26px;flex-wrap:wrap}
.ft-links a{font-weight:600;font-size:.95rem;color:rgba(255,255,255,.8)}
.ft-links a:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:.85rem}
.scalus-badge{color:rgba(255,255,255,.7)}
.scalus-badge b{color:#fff}
.scalus-badge:hover{color:#fff}

/* ---------- pricing cards ---------- */
.pricing-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:30px 0 6px}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:22px 30px;min-width:210px;text-align:center;box-shadow:var(--shadow-sm)}
.price-card.featured{background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-color:transparent;
  box-shadow:0 18px 40px -14px rgba(31,71,120,.6)}
.pc-tag{display:inline-block;font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.pc-amt{font-family:var(--head);font-weight:800;font-size:2.1rem;color:var(--ink);line-height:1}
.pc-amt span{font-size:1rem;font-weight:600;opacity:.75}
.pc-note{font-size:.85rem;color:var(--ink-2);margin-top:8px}
/* featured card sits on brand blue — keep its text white, tag in brand yellow */
.price-card.featured .pc-tag{color:var(--yellow)}
.price-card.featured .pc-amt{color:#fff}
.price-card.featured .pc-note{color:rgba(255,255,255,.88)}

/* ---------- inner page hero ---------- */
.phero{position:relative;padding:148px 0 62px;overflow:hidden;
  background:
    radial-gradient(60% 60% at 82% 0%,rgba(74,131,200,.34),transparent 62%),
    radial-gradient(50% 50% at 6% 24%,rgba(255,215,100,.34),transparent 60%),
    linear-gradient(180deg,#e9f1fb 0%,var(--cream) 80%)}
.phero .wrap{position:relative;z-index:1}
.phero-in{max-width:760px}
.phero h1{font-size:clamp(2.05rem,4.6vw,3.35rem);color:var(--ink);margin:18px 0 0}
.phero h1 .mark{color:transparent;background:linear-gradient(120deg,var(--red),var(--red-2));
  -webkit-background-clip:text;background-clip:text}
.phero p{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-2);margin:20px 0 0;max-width:640px}
.phero .hero-cta{margin-top:28px}
@media(max-width:640px){.phero{padding:118px 0 46px}}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);margin-bottom:16px;flex-wrap:wrap}
.crumb a{font-weight:600}
.crumb a:hover{color:var(--red-deep)}
.crumb i{font-style:normal;opacity:.45}
.crumb b{font-weight:600;color:var(--red-deep)}

/* ---------- link cards (page teasers) ---------- */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.lcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .28s,box-shadow .28s,border-color .28s}
.lcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(31,119,208,.42)}
.lcard .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--red-2),var(--red-deep));
  box-shadow:0 12px 26px -10px rgba(18,80,143,.5)}
.lcard:nth-child(2n) .ic{background:linear-gradient(135deg,var(--blue-2),var(--blue));
  box-shadow:0 12px 26px -10px rgba(46,99,163,.55)}
.lcard h3{font-size:1.18rem;margin:0 0 8px;color:var(--ink)}
.lcard p{margin:0 0 16px;color:var(--ink-2);font-size:.96rem;flex:1}
.lcard .go{font-family:var(--head);font-weight:600;font-size:.93rem;color:var(--red-deep)}
.lcard:hover .go{text-decoration:underline}
@media(max-width:900px){.lgrid{grid-template-columns:1fr}}

/* ---------- CTA band (closes every inner page) ---------- */
.ctaband{background:linear-gradient(135deg,var(--navy-2),var(--navy));color:#fff;border-radius:28px;
  padding:52px 46px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.ctaband h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0 0 14px}
.ctaband p{color:rgba(255,255,255,.78);max-width:580px;margin:0 auto;font-size:1.04rem}
.ctaband .hero-cta{justify-content:center}
.ctaband .btn-line{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none}
.ctaband .btn-line:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
@media(max-width:640px){.ctaband{padding:38px 24px}}

/* ---------- keep reading strip ---------- */
.morelinks{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.morelinks a{font-family:var(--head);font-weight:600;font-size:.92rem;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:11px 20px;
  box-shadow:var(--shadow-sm);transition:.25s}
.morelinks a:hover{color:var(--red-deep);border-color:rgba(31,119,208,.42);transform:translateY(-2px)}

/* ---------- level anatomy ---------- */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lvl{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:22px;
  box-shadow:var(--shadow-sm);text-align:center}
.lvl b{font-family:var(--head);font-weight:800;font-size:2rem;color:var(--red-deep);display:block;line-height:1}
.lvl span{display:block;font-size:.92rem;color:var(--ink-2);margin-top:8px}
@media(max-width:820px){.levels{grid-template-columns:repeat(2,1fr)}}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--head);font-weight:600;
  font-size:1.04rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--head);font-size:1.5rem;color:var(--red-deep);line-height:1;flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq .fa{padding:0 24px 22px;margin:0;color:var(--ink-2);font-size:.99rem}

/* ---------- webinar ---------- */
.webinar{background:var(--navy);position:relative;overflow:hidden}
.webinar .dblob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.webinar .dblob.o{width:420px;height:420px;background:var(--yellow);top:-120px;right:-80px;opacity:.32}
.webinar .dblob.s{width:380px;height:380px;background:var(--blue);bottom:-140px;left:-90px}
/* Liz, call of 7 Aug: the webinar video should run the full length of the content column
   beside it, rather than sitting short against a taller stack of quotes. Stretching the
   row makes the player fill that height; it keeps its own 16/9 inside, so nothing is
   distorted. Below 960px the column stacks and it goes back to a plain 16/9 block.
   NB: aspect-ratio must NOT stay on once the height is definite, or it drives the WIDTH
   from that height and the player overflows its column and covers the quotes. */
.webinar-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:stretch;position:relative;z-index:1}
.webinar-video{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  width:100%;height:100%;min-height:320px;background:#04101f}
.webinar-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wq-list{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.wq{background:rgba(255,255,255,.06);border-left:3px solid var(--yellow);border-radius:0 14px 14px 0;
  padding:14px 20px;color:#eaf1f8;font-size:1.02rem;line-height:1.5}
/* Liz, call of 7 Aug: the bolded text should match the yellow vertical line beside it. */
.wq b{color:var(--yellow)}

/* ---------- mobile ---------- */
@media(max-width:960px){
  .webinar-grid{grid-template-columns:1fr;gap:26px;align-items:center}
  .webinar-video{height:auto;min-height:0}
}
@media(max-width:940px){
  .nav,.hd-cta .btn{display:none}
  .burger{display:flex}
}
@media(max-width:640px){
  .hd-in{margin-top:10px;padding:8px 8px 8px 16px}
  .brand img{height:36px}
  .hero{padding:120px 0 60px}
  .hero-cta .btn{width:100%;justify-content:center}
  .stores{justify-content:center}
  .hero-trust{gap:20px;justify-content:space-between}
  .hero-trust .n{font-size:1.5rem}
  .hero-badge{padding:10px 12px}
  .hb-1{left:-6px;top:-12px}.hb-2{right:-4px;bottom:-12px}
  .guar-card{padding:40px 24px}
  .btn{width:100%;justify-content:center}
  .finalcta .hero-cta,.hero-cta{width:100%}
  .value-in img{max-width:100%}
}

/* ---------- inside the app ----------
   Liz's reference, thefitnessguy.uk: alternating text and angled phone rows on a banded
   background. The phones are constrained by HEIGHT, not width, because her front and
   left slanted renders have very different aspect ratios and matching their width would
   make the angled ones look twice the size of the straight ones. */
.appsec{background:linear-gradient(180deg,#fff,var(--cream))}
.approw{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(28px,4vw,52px) 0}
.approw+.approw{border-top:1px solid var(--line)}
/* min-width:0 stops a long word forcing the grid track wider than its share, which is
   how a two column row starts scrolling sideways at ~1000px. */
.approw .apptxt{min-width:0;padding:0 4px}
.approw .apptxt h3{font-family:var(--head);font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.25;margin:0 0 14px;color:var(--ink)}
.approw .apptxt p{margin:0 0 14px;font-size:1.05rem;line-height:1.75;color:var(--ink-2)}
.approw .apptxt p:last-child{margin-bottom:0}
.appshot{display:flex;justify-content:center;min-width:0}
.appshot img{display:block;width:auto;height:auto;max-width:100%;max-height:520px;
  filter:drop-shadow(0 26px 44px rgba(11,14,20,.26))}
.approw.flip .apptxt{order:2}
.approw.flip .appshot{order:1}

.apptypes-head{margin-top:clamp(40px,6vw,72px)}
.apptypes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.atype{margin:0;min-width:0;text-align:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:22px 18px 20px;
  box-shadow:var(--shadow-sm)}
.atype img{display:block;width:100%;max-width:186px;height:auto;margin:0 auto 16px}
.atype figcaption b{display:block;font-family:var(--head);font-size:1rem;
  color:var(--ink);margin-bottom:6px}
.atype figcaption span{display:block;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.appsec-cta{margin-top:clamp(34px,5vw,54px);text-align:center}

@media(max-width:1040px){.apptypes{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .approw{grid-template-columns:1fr;gap:26px;padding:34px 0}
  /* text always reads before its phone once stacked, flipped or not */
  .approw.flip .apptxt{order:1}
  .approw.flip .appshot{order:2}
  .appshot img{max-height:440px}
}
@media(max-width:640px){
  .apptypes{grid-template-columns:repeat(2,1fr);gap:12px}
  .atype{padding:16px 12px 14px}
  .atype img{max-width:140px;margin-bottom:12px}
  .appshot img{max-height:380px}
}
@media(max-width:380px){.apptypes{grid-template-columns:1fr;max-width:250px;margin:0 auto}}