/* 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". Both hexes are Liz's own, from
     WhatsApp 6 Aug: orange #F97316 and green #22C55E. --green-2 is her green exactly.
     --green and --green-deep are the same Tailwind scale either side of it, for hover
     and for white-text contrast. (An earlier version of this comment claimed no green
     was ever supplied; that was wrong, she sent it 6 Aug 12:47pm.) */
  --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}
/* Liz, 2 Sep: "a large pale blue section at the bottom under the final banner" on
   mobile. The document itself ends 1px after the footer, so that band is iOS Safari
   rubber band overscroll revealing the page background, which is --cream. The bounce
   is suppressed below, and the gradient is a belt and braces fallback for any browser
   that still bounces: it is fixed to the viewport, so the bottom half is footer navy
   and the top half stays light. Body paints over it during normal scrolling, so it is
   only ever visible in the overscroll area. */
html{scroll-behavior:smooth;background:linear-gradient(var(--cream) 0 50%,var(--navy) 50% 100%) fixed;overscroll-behavior-y:none}
@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".
   Tim, 20 Aug: the white-with-a-green-stroke treatment was too quiet next to the solid
   Register button — a training button is a training button, so every one of them now
   carries the same solid green rather than an outline. */
.btn-line.btn-reg{background:linear-gradient(135deg,var(--green-2),var(--green-deep));color:#fff;
  border:0;box-shadow:0 14px 30px -10px rgba(21,128,61,.5)}
.btn-line.btn-reg:hover{transform:translateY(-3px);background:linear-gradient(135deg,#3ade7c,var(--green-2));
  box-shadow:0 20px 40px -10px rgba(21,128,61,.62)}
.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)}
/* Liz, 10 Aug: "This needs to be the brighter green". The on-dark training button was a
   30% green wash, which reads muted next to the solid Register button. It now carries the
   same solid #22c55e gradient as .btn-reg, so both training buttons are the one green. */
.btn-ghost.btn-reg{background:linear-gradient(135deg,var(--green-2),var(--green-deep));color:#fff;
  border:1.5px solid rgba(74,222,128,.55);box-shadow:0 14px 30px -12px rgba(21,128,61,.55)}
.btn-ghost.btn-reg:hover{background:linear-gradient(135deg,#3ade7c,var(--green-2));border-color:rgba(134,239,172,.8)}

.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:52px;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}
/* Tim, 20 Aug: "make larger" — the store badges are the download, so they carry more
   weight now the Start today button beside them is gone. */
.stores img{height:66px;width:auto;border-radius:12px;transition:transform .25s;filter:drop-shadow(0 10px 22px rgba(11,14,20,.3))}
@media(max-width:520px){.stores img{height:56px}}
.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}
.hero-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hero-badge{position:absolute;z-index:3;background:#fff;border-radius:10px;
  border-left:4px solid var(--blue-deep);padding:11px 18px 11px 14px;box-shadow:0 10px 22px rgba(11,14,20,.16);
  display:flex;align-items:center;gap:11px}
.hb-2{border-left-color:var(--red-deep)}
.hero-badge .ic{width:34px;height:34px;flex:none;display:block}
.hero-badge .t{font-family:var(--head);font-weight:800;font-size:14px;color:var(--ink);line-height:1.15}
.hero-badge .s{font-size:11.5px;color:var(--ink-2);margin-top:1px}
/* 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)}
/* Liz, 6 Aug mockup: the key words in a section headline carry the action blue. */
.sec-head h2 .hl{font-style:normal;color:var(--action)}
.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 28px 32px;box-shadow:var(--shadow-sm);position:relative;text-align:center}
/* Liz, 10 Aug: "the numbers need to become blue and go at the front of the headline so top
   left" and "I like these numbers better but at the top left please and in the dark blue".
   Tim, 20 Aug: same position, but the bare numeral now sits inside a solid blue disc, and
   a hand drawn icon carries the idea above the heading. Overflow must stay visible or the
   disc gets clipped by the card's own radius. */
.pcard .num{position:absolute;top:18px;left:18px;z-index:2;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:1.3rem;color:#fff;line-height:1;margin:0;
  background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));
  box-shadow:0 10px 22px -8px rgba(31,71,120,.6)}
.pcard .picon{width:104px;height:104px;margin:14px auto 16px;display:block}
.pcard h3{font-size:1.2rem;margin:0;color:var(--ink)}
.pcard .dash{display:block;width:36px;height:4px;border-radius:3px;background:var(--action);
  margin:14px auto 16px}
/* Liz, 10 Aug: "the text made larger in these boxes" */
.pcard p{margin:0;color:var(--ink-2);font-size:1.06rem}
@media(max-width:520px){.pcard .picon{width:86px;height:86px}}
@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)}
/* Tim, 20 Aug: the emoji tile above the heading is gone. The hand drawn icon now sits to
   the LEFT of the heading, on the same line, so the card leads with a picture and a
   promise together instead of a stack. */
.gcard .chead{display:flex;align-items:center;gap:15px;margin-bottom:12px}
/* the line art is navy, which disappears against a navy card wherever it runs outside
   its own pale blob — so on dark it sits on a light plate instead */
.gcard .ic{width:60px;height:60px;flex:none;display:block;margin:0;
  background:#eaf1fb;border-radius:16px;padding:3px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.gcard h3{font-size:1.2rem;margin:0;min-width:0}
.gcard p{margin:0;color:rgba(255,255,255,.74);font-size:.98rem}
/* Liz, 21 Aug asks 5 and 10: on the stacked cards the icon sat a full 30px down from the
   card top and the heading was flush against it, measured at 0px, with the body copy
   flush against the heading too. The icon lifts and the text below it gets room.
   Scoped to a DIRECT child so the .chead cards, where the icon sits inline beside the
   heading on one row, keep their vertical centring. */
.gcard > .ic{margin:-8px 0 14px}
.gcard > h3{margin-bottom:8px}
@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)}
/* .b used to be a coloured tile holding a numeral or an emoji. It is now the hand drawn
   icon slot, sitting left of the heading. .b.count keeps the old tile look for the places
   that really are showing a quantity (20 tutorials, 4 interviews) rather than an idea. */
.icard .b{flex:none;width:56px;height:56px;display:block}
.icard .b.count{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.count{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}}

/* Liz, 6 Aug: her own mockup for the method section — a numbered rail down the left,
   five short cards, and a three stat strip under the photo instead of the floating pill. */
.sec-head.sec-head-wide{max-width:920px}
.incl.incl-method{align-items:start}
.incl-list.rail{list-style:none;margin:0;padding:0 0 0 48px;position:relative}
.incl-list.rail::before{content:"";position:absolute;left:15px;top:30px;bottom:30px;
  border-left:2px dashed rgba(46,99,163,.34);z-index:0}
.incl-list.rail .icard{position:relative;z-index:1}
.icard .sn{position:absolute;left:-48px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:1rem;color:#fff;line-height:1;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  box-shadow:0 8px 18px -8px rgba(31,71,120,.6)}
.statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 12px;box-shadow:var(--shadow-sm)}
.stat3{text-align:center;padding:0 6px;min-width:0}
.stat3 + .stat3{border-left:1px solid var(--line)}
.stat3 b{display:block;font-family:var(--head);font-weight:800;font-size:1.5rem;
  color:var(--action-deep);line-height:1.1}
.stat3 i{display:block;font-style:normal;font-family:var(--head);font-weight:700;
  font-size:.95rem;color:var(--ink);margin-top:2px}
.stat3 span{display:block;font-size:.78rem;color:var(--ink-2);margin-top:5px;line-height:1.35}
@media(max-width:520px){
  .incl-list.rail{padding-left:40px}
  .incl-list.rail::before{left:13px}
  .icard .sn{left:-40px;width:28px;height:28px;font-size:.85rem}
  .statstrip{padding:16px 8px;gap:6px}
  .stat3 b{font-size:1.25rem}
  .stat3 i{font-size:.85rem}
  .stat3 span{font-size:.7rem}
}

/* ---------- 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}
/* Liz, 10 Aug: "put a small one of me down near my name Liz Dunoon" */
.founder .who-row{display:flex;align-items:center;gap:14px}
.founder .who-row img{width:58px;height:58px;flex:0 0 58px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:var(--shadow-sm)}
@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)}
/* The Australia, New Zealand and UK tiles carry a name plus a place, which the old
   Vimeo card styled as .wvid-name. Those cards are self hosted video now, so the
   two line treatment moves here. */
.svid-name:has(b){display:flex;flex-direction:column;gap:2px;text-align:left}
.svid-name b{font-weight:700;font-size:.86rem}
.svid-name small{font-weight:500;font-size:.72rem;opacity:.86}
.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}
}

/* ---------- region rows (US ticker + Australia and New Zealand grid) ---------- */
.region-head{margin:34px 0 18px;text-align:center}
.region-head h3{font-family:var(--head);font-weight:800;letter-spacing:.02em;
  font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--blue);margin:0}
.region-head p{margin:8px auto 0;max-width:52ch;color:var(--ink-soft,#5a6472);font-size:.95rem}

/* Matches .svgrid exactly, so the AU/NZ and UK walls read at the same size as
   the US one. The old 1042px cap existed because the posters were 500px wide;
   they are now 750x1000, so a 4 wide row no longer upscales them. */
.rgrid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.wvid{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;margin:0;border:0;
  border-radius:var(--r);overflow:hidden;cursor:pointer;background:#0d1b2a;
  transition:transform .25s ease,box-shadow .25s ease}
.wvid:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.wvid:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wvid img{width:100%;height:100%;object-fit:cover;display:block}
.wvid::after{content:'';position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(9,20,33,0) 0%,rgba(9,20,33,.82) 100%)}
.wvid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 4px 16px rgba(9,20,33,.35);transition:transform .25s ease}
.wvid-play::before{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--blue)}
.wvid:hover .wvid-play{transform:translate(-50%,-50%) scale(1.08)}
.wvid-name{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;color:#fff;text-align:left;
  display:flex;flex-direction:column;gap:2px;line-height:1.25}
.wvid-name b{font-weight:700;font-size:.86rem}
.wvid-name small{font-weight:500;font-size:.72rem;opacity:.86}

.wframe{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:#000}
.wframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* .wvid sets display:block, which beats the user agent [hidden] rule, so the
   See more batching needs this or a hidden card still takes a grid cell. */
.wvid[hidden]{display:none}

@media(max-width:1040px){.rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wvid-play{width:40px;height:40px}
  .wvid-name b{font-size:.78rem}
  .wvid-name small{font-size:.67rem}
}
@media(prefers-reduced-motion:reduce){.wvid:hover{transform:none}.wvid:hover .wvid-play{transform:translate(-50%,-50%)}}

/* ---------- 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".
   Tim, 20 Aug: replaced with the gold seal he sent. Built as SVG rather than dropping in
   his PNG so it arrives already cut out — the source image is a badge on a white square,
   and on this navy card that white would read as an ugly box behind the badge. */
.guar-seal{width:152px;height:152px;margin:0 auto 22px;display:block;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.42))}
.guar-seal svg{width:100%;height:100%;display:block}
.gseal-ring{font-family:var(--head);font-weight:800;font-size:12.5px;fill:#0b0e14;letter-spacing:1.5px}
.gseal-days{font-family:var(--head);font-weight:800;font-size:31px;letter-spacing:.5px;text-anchor:middle}
.gseal-30{font-family:var(--head);font-weight:800;font-size:26px;letter-spacing:.5px;text-anchor:middle}
@media (max-width:520px){.guar-seal{width:124px;height:124px}}
.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:62px;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)}
/* Tim, 20 Aug: the monthly US$9.95 card goes orange — orange is already the buy colour
   on this site, so the entry price now looks like the thing you act on. */
.price-card.warm{background:linear-gradient(135deg,var(--orange-2),var(--orange-deep));
  border-color:transparent;box-shadow:0 18px 40px -14px rgba(234,88,12,.55)}
.price-card.warm .pc-tag{color:rgba(255,255,255,.9)}
.price-card.warm .pc-amt{color:#fff}
.price-card.warm .pc-note{color:rgba(255,255,255,.92)}

/* ---------- 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}
/* Liz, 21 Aug ask 13: centre the reviews hero heading and buttons, which also takes height
   out of the top of the page so the reviews themselves arrive sooner on the scroll.
   A modifier rather than a change to .phero, so every other inner page hero is untouched. */
.phero.phero-mid{padding:126px 0 44px}
.phero.phero-mid .phero-in{max-width:820px;margin-inline:auto;text-align:center}
.phero.phero-mid .crumb{justify-content:center}
.phero.phero-mid p{margin-inline:auto}
.phero.phero-mid .hero-cta{justify-content:center;margin-top:26px}
@media(max-width:640px){.phero{padding:118px 0 46px}.phero.phero-mid{padding:104px 0 34px}}

/* ---------- 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 .chead{display:flex;align-items:center;gap:15px;margin-bottom:12px}
.lcard .ic{width:58px;height:58px;flex:none;display:block;margin:0}
.lcard h3{font-size:1.14rem;margin:0;color:var(--ink);min-width:0}
.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:44px}
  .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}
/* Two phones sharing one slot (the Levels row, A to E beside F to L). A modifier rather
   than a change to .appshot, so the four single phone rows keep their exact sizing. The
   cap is lower than the single phone cap because two of them share the same column. */
.appshot.pair{gap:clamp(8px,1.4vw,20px);align-items:center}
.appshot.pair img{max-height:440px}
.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}
  .appshot.pair img{max-height:400px}
}
@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}
  .appshot.pair img{max-height:300px}
}
@media(max-width:380px){.apptypes{grid-template-columns:1fr;max-width:250px;margin:0 auto}}

/* ============================================================================
   V2 — Tim, 20 Aug 2026
   ========================================================================= */

/* ---------- hand drawn icons ----------
   One shared sprite, inlined per page. Sizing lives on the element that holds the
   <use>, so the same symbol serves a 34px hero badge and a 104px card icon. */
.hicon{display:block;flex:none}
.hicon svg,svg.hicon{width:100%;height:100%;display:block}

/* the empathy / training numbered cards carry the icon centred above the heading */
.pcard .picon svg{width:100%;height:100%}

/* ---------- the empathy photo ----------
   Tim, 20 Aug: a real classroom photo beside the three cards, so the section shows the
   feeling it is describing before it explains it. */
.empathy-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);
  align-items:center;margin-bottom:44px}
.empathy-photo{position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);border:6px solid #fff}
/* height:auto is load bearing — the img carries width/height attributes, and without it
   the height attribute wins as a presentational hint and aspect-ratio never applies,
   which stretched this to 1200px tall. */
.empathy-photo img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;display:block}
.empathy-photo figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  color:#fff;font-family:var(--head);font-weight:600;font-size:.88rem;line-height:1.35;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.empathy-photo::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;z-index:1;
  pointer-events:none;background:linear-gradient(to top,rgba(11,14,20,.78),transparent)}
.empathy-split .sec-head{margin:0;text-align:left;max-width:none}
@media(max-width:880px){
  .empathy-split{grid-template-columns:1fr;gap:28px}
  .empathy-split .empathy-photo{order:-1;max-width:520px;margin:0 auto}
}

/* ---------- region tickers ----------
   Tim, 20 Aug: every region scrolls, and neighbouring rows travel in opposite
   directions so the wall reads as motion rather than one long conveyor.
   US right to left, Australia and New Zealand left to right, UK right to left.
   The reverse row starts already translated, so it scrolls back to zero instead of
   snapping from an empty gap on the first frame. */
.ticker.rev .ticker-track{animation-name:tickscroll-rev;transform:translateX(-50%)}
@keyframes tickscroll-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ticker .wvid{width:212px;flex:none;margin-right:14px;aspect-ratio:3/4;border-radius:var(--r-sm)}
.ticker .wvid-name b{font-size:.8rem}
.ticker .wvid-name small{font-size:.68rem}
.ticker .wvid-play{width:40px;height:40px}
.ticker .wframe{width:212px;flex:none;margin-right:14px;border-radius:var(--r-sm)}
@media(max-width:720px){
  .ticker .wvid,.ticker .wframe{width:158px;margin-right:10px}
  .ticker .wvid-play{width:34px;height:34px}
}
/* a region with only a handful of clips still has to fill the loop, so its track is
   duplicated in the markup exactly like the US one */
.region-note{margin:6px auto 0;max-width:56ch;text-align:center;font-size:.86rem;
  color:var(--ink-2);opacity:.85}
/* The UK row is wired and scrolling, but no UK footage has been supplied yet. Rather
   than relabel an Australian or American family as British, the slots stay visibly
   empty until Liz sends the clips — drop a .wvid in place of each one. */
.wvid.slot{background:rgba(46,99,163,.06);border:2px dashed rgba(46,99,163,.35);
  display:grid;place-items:center;cursor:default;text-align:center;padding:14px}
.wvid.slot::after{display:none}
.wvid.slot:hover{transform:none;box-shadow:none}
.wvid.slot span{position:static;color:var(--blue);font-family:var(--head);font-weight:600;
  font-size:.8rem;line-height:1.4;opacity:.85}
.dark .wvid.slot{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.26)}
.dark .wvid.slot span{color:rgba(255,255,255,.7)}
.dark .region-head h3{color:#fff}
.dark .region-head p,.dark .region-note{color:rgba(255,255,255,.72)}

/* ---------- country selector (reviews page) ---------- */
.cpick{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 34px}
.cpick button{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);
  font-weight:600;font-size:15px;padding:12px 22px;border-radius:100px;cursor:pointer;
  background:#fff;color:var(--ink-2);border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .22s,border-color .22s,color .22s,background .22s}
.cpick button .flag{font-size:19px;line-height:1}
.cpick button:hover{transform:translateY(-2px);border-color:rgba(31,119,208,.45);color:var(--ink)}
.cpick button[aria-selected="true"]{background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));
  color:#fff;border-color:transparent;box-shadow:0 14px 30px -12px rgba(31,71,120,.6)}
.cpick button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.dark .cpick button{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.2);box-shadow:none;backdrop-filter:blur(8px)}
.dark .cpick button:hover{background:rgba(255,255,255,.16);color:#fff}
.dark .cpick button[aria-selected="true"]{background:#fff;color:var(--navy);border-color:transparent}
.cpanel[hidden]{display:none}
@media(max-width:520px){.cpick button{font-size:14px;padding:11px 16px;width:auto}}

/* ---------- training buttons on the dark CTA band ----------
   .ctaband .btn-line paints itself translucent white; a training button inside one must
   stay solid green, so it is re-asserted after that rule. */
.ctaband .btn-line.btn-reg{background:linear-gradient(135deg,var(--green-2),var(--green-deep));
  color:#fff;border-color:transparent;box-shadow:0 14px 30px -10px rgba(21,128,61,.5)}
.ctaband .btn-line.btn-reg:hover{background:linear-gradient(135deg,#3ade7c,var(--green-2));
  border-color:transparent}

/* Liz, 21 Aug ask 11, second half: the pale blue Dyslexia Daily band on the About page ran
   96px of empty space above its heading and 150px below its button, for a section holding
   three short elements. The 54px dead margin under the button is removed and both sides come
   in to 64px. A modifier, so every other pale band on the site keeps its own rhythm. */
.sec.empathy.sec-tight{padding:64px 0}
.sec.empathy.sec-tight .sec-head{margin-bottom:0}
@media(max-width:640px){.sec.empathy.sec-tight{padding:44px 0}}

/* Liz, 21 Aug ask 15: the pricing hero ran a single 760px column with the whole right hand
   side empty, which is what her screenshot points at. Her two coffee cups fill it, drawn from
   the same i-coffee symbol the value section already uses rather than from her attached
   screenshot, which had a white card baked in behind them that the pale blue hero would have
   rendered as a white box. Scoped to this one hero. */
.phero-cups .phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(24px,4vw,64px);align-items:center}
.phero-cups .phero-in{max-width:none}
.phero-cups-art{display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,1.2vw,16px)}
.phero-cups-art svg{flex:none;width:clamp(96px,10.5vw,164px);height:clamp(96px,10.5vw,164px)}
@media(max-width:900px){
  .phero-cups .phero-grid{grid-template-columns:minmax(0,1fr)}
  .phero-cups .phero-in{max-width:760px}
  .phero-cups-art{justify-content:flex-start;margin-top:28px}
  .phero-cups-art svg{width:88px;height:88px}
}

/* Liz, 21 Aug ask 16: the two cups beside the comparison table sat at 62px, small enough to
   read as an afterthought next to a full width table. */
.coffee.coffee-lg{line-height:0;display:flex;align-items:center;gap:clamp(4px,1vw,14px)}
.coffee.coffee-lg .hicon{flex:none;width:clamp(84px,7.5vw,116px);height:clamp(84px,7.5vw,116px)}

/* Liz, 21 Aug ask 6: "put this image below here on the right" on the program hero, with the
   alphabet to novels graphic she supplied. Same two column shape as .phero-cups. Her file is a
   JPEG with a hard white background and this hero is a blue to cream gradient, so the white was
   flood filled from the corners to alpha rather than keyed globally, which would have taken the
   book pages and the cream ATOMIC HABITS spine with it. */
.phero-art .phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(24px,4vw,56px);align-items:center}
.phero-art .phero-in{max-width:none}
.phero-art-fig{line-height:0}
.phero-art-fig img{display:block;width:clamp(240px,32vw,430px);height:auto}
@media(max-width:900px){
  .phero-art .phero-grid{grid-template-columns:minmax(0,1fr)}
  .phero-art .phero-in{max-width:760px}
  .phero-art-fig{margin-top:26px}
  .phero-art-fig img{width:min(100%,380px)}
}

/* ---------- comparison table (Liz, 8 Sep) ----------
   Was a flat PNG of her Canva table, which went soft and stretched on a phone.
   Rebuilt as real markup so it stays sharp at any width, reads to a screen reader
   and picks up the brand palette instead of the old orange. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.value-stack{display:block}
.value-copy{max-width:760px;margin:0 auto 40px;text-align:center}
.value-copy .coffee{justify-content:center;margin:18px 0 6px}
.value-copy p{margin-top:10px}

.cmp{--cmp-yes:#16a34a;--cmp-no:#d90710;position:relative}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r) var(--r) 0 0}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  font-size:15px;line-height:1.35;box-shadow:var(--shadow);
  border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.cmp-table th,.cmp-table td{padding:14px 12px;text-align:center;vertical-align:middle;
  border-bottom:1px solid rgba(46,99,163,.14)}
.cmp-table thead th{background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;
  font-size:16px;letter-spacing:-.01em;padding:20px 12px;border-bottom:0}
.cmp-table thead th small{display:block;font-weight:500;font-size:12px;opacity:.78;margin-top:4px}
.cmp-table thead th.cmp-lead{text-align:left;font-size:19px;width:38%}
.cmp-table thead th.cmp-us{background:var(--blue);line-height:1.1}
.cmp-us-1{display:block;font-size:15px}
.cmp-us-2{display:block;font-size:22px;color:var(--yellow)}
.cmp-table tbody th{text-align:left;font-weight:600;color:var(--blue-deep);font-size:14.5px}
.cmp-table tbody tr:nth-child(even) th,.cmp-table tbody tr:nth-child(even) td{background:rgba(46,99,163,.035)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table td.cmp-hi{background:var(--blue-soft);box-shadow:inset 1px 0 0 rgba(46,99,163,.18),inset -1px 0 0 rgba(46,99,163,.18)}
.cmp-table tbody tr:nth-child(even) td.cmp-hi{background:#dde8f8}
.cmp-val{font-weight:600;color:var(--ink-2)}
.cmp-hi .cmp-val{color:var(--blue-deep);font-weight:800;font-size:17px}
.cmp-price{display:block;color:var(--blue-deep);font-size:13.5px}
.cmp-price b{font-size:16px}
.cmp-or{display:block;font-size:12px;color:var(--ink-2);margin:1px 0}
.cmp-y,.cmp-n{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center}
.cmp-y svg,.cmp-n svg{width:100%;height:100%;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cmp-y svg{stroke:var(--cmp-yes)}
.cmp-n svg{stroke:var(--cmp-no)}
.cmp-q{font-weight:800;color:var(--ink-2);font-size:19px;opacity:.7}
.cmp-band{margin:0;background:var(--yellow);color:var(--ink);font-family:var(--head);font-weight:700;
  font-size:clamp(1rem,2.2vw,1.35rem);text-align:center;padding:16px 18px;
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow)}

@media(max-width:760px){
  .cmp-table{font-size:12.5px}
  .cmp-table th,.cmp-table td{padding:10px 5px}
  .cmp-table thead th{font-size:12.5px;padding:13px 5px}
  .cmp-table thead th.cmp-lead{font-size:13.5px;width:37%;padding-left:10px}
  .cmp-us-1{font-size:11.5px}
  .cmp-us-2{font-size:15px}
  .cmp-table tbody th{font-size:12px;padding-left:10px}
  .cmp-hi .cmp-val{font-size:13.5px}
  .cmp-val{font-size:12px}
  .cmp-price{font-size:11px}
  .cmp-price b{font-size:12.5px}
  .cmp-or{font-size:10px}
  .cmp-y,.cmp-n{width:19px;height:19px}
  .cmp-q{font-size:15px}
  .value-copy{margin-bottom:28px}
}
.cmp-c1{width:38%}.cmp-c2{width:22%}.cmp-c3{width:20%}.cmp-c4{width:20%}
@media(max-width:760px){.cmp-c1{width:34%}.cmp-c2{width:24%}.cmp-c3{width:21%}.cmp-c4{width:21%}}