/* ── ONE surface for the whole page ─────────────────────────────────────────────
   The live site has no gradients at all: `body{background:var(--ground)}` and every section
   sits on that one colour. That is why it blends - there is nothing to blend, because there
   are no edges. This page had a tinted hero, then a tinted numbers band, then more tinted
   bands, and I was papering over the joins with fades. The joins were the problem. The
   artwork floats on the single background instead. 16 Oct 2026. */
/* The sales page — the logged-out front door, and after the paywall goes up the only page a
   search engine can see. It reuses app.css's tokens so it looks like the product it sells.

   It is dark in both themes, like the hero and the sidebar, so every colour here is a fixed
   light-on-dark value rather than a theme token. A token that flips would turn this text
   near-black on near-black for anyone whose system is in light mode. 16 Oct 2026. */
:root{color-scheme:dark}
body.sales{background:#0d100e;color:#f2f5f1;font:17px/1.6 var(--body);margin:0}
body.sales h1,body.sales h2,body.sales h3{font-family:var(--display);text-wrap:balance}

/* top bar */
.sbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;position:relative;z-index:3}
/* The mark, not just the words. The public pages were carrying a text wordmark while the app
   itself had the real thing - a disc with a rim, a highlight and the bolt, which is where the
   depth comes from. 16 Oct 2026. */
.sword{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.sword .arcmark{width:42px;height:42px;margin:0;flex:0 0 auto;overflow:visible}
.swords{display:block;line-height:1}
.sword b{display:block;font:700 20px var(--display);letter-spacing:.04em;color:#f2f5f1}
.sword small{display:block;font:600 10px var(--mono);letter-spacing:.26em;color:#8b948e;margin-top:1px}
.sword:hover .arcmark,.sword:focus-visible .arcmark{filter:drop-shadow(0 0 14px rgba(245,197,24,.45))}
@media (max-width:560px){ .sword .arcmark{width:34px;height:34px} .sword b{font-size:17px} }
.sbar nav{display:flex;gap:10px}
/* `background:none` and the font reset matter: the Log in control is a <button>, not a link,
   because it opens the panel rather than going anywhere. A native button brings its own pale
   background and system font, which made white label text on a white pill. 16 Oct 2026. */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:999px;text-decoration:none;font:600 15px var(--body);
  background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  border:1px solid rgba(255,255,255,.2);color:#f2f5f1;
  transition:transform var(--t-ui) var(--spring-ui),background .15s,border-color .15s}
.sbtn:hover,.sbtn:focus-visible{transform:translateY(-1px);border-color:#6cc27a;background:rgba(47,138,60,.18)}
.sbtn.gold{background:#f5c518;color:#15181a;border-color:#f5c518;font-weight:700}
.sbtn.gold:hover,.sbtn.gold:focus-visible{background:#f5d45a;border-color:#f5d45a}
.sbtn.big{padding:15px 28px;font-size:17px}

/* hero */
/* The hero used to stop dead at a hard rule and the next band started. It read as two
   separate slabs rather than one page. Now the dark of the hero carries on down behind
   everything and each band sits on it, so the eye runs from the headline to the price without
   a seam. The wires fade out rather than being cut off. 16 Oct 2026. */
/* isolation:isolate keeps the z-index:-1 artwork inside the hero's own stacking context.
   Without it the wires and the mark fall behind the page background and vanish. */
.shero{position:relative;isolation:isolate;padding:30px 28px 70px}
.shero .hero-wires{-webkit-mask-image:radial-gradient(130% 100% at 70% 35%,#000 35%,transparent 80%);
  mask-image:radial-gradient(130% 100% at 70% 35%,#000 35%,transparent 80%)}
.shero .hero-wires{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.shero-art{position:absolute;right:3%;top:46%;width:min(28vw,380px);aspect-ratio:1;
  transform:translateY(-50%);z-index:-1;pointer-events:none;opacity:.9}
.shero-in{position:relative;z-index:2;max-width:820px}
.shero h1{font-size:clamp(34px,6vw,70px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 0;
  text-transform:uppercase}
.shero h1 .hl{color:#f5c518}
.shero-sub{max-width:58ch;margin:20px 0 0;font-size:clamp(16.5px,1.8vw,19px);color:#ccd4ce}
.shero-sub b{color:#f2f5f1}
.shero-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.shero-note{color:#aab3ad;font-size:14.5px}

/* the four numbers */
.facts{position:relative}
.facts ul{list-style:none;margin:0 auto;padding:22px 28px;max-width:1080px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.facts li{display:grid;gap:2px}
.facts b{font:700 clamp(26px,3.4vw,40px)/1 var(--display);color:#f5c518;
  font-variant-numeric:tabular-nums}
.facts span{color:#aab3ad;font-size:14px}

/* bands */
.band{max-width:1080px;margin:0 auto;padding:60px 28px}
.band.tight{padding-top:20px}
.band.plain{max-width:none}
.band.plain>*{max-width:1080px;margin-left:auto;margin-right:auto}
.band h2{font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;letter-spacing:-.012em;margin:0 0 10px}
.band .lead{color:#ccd4ce;max-width:60ch;margin:0 0 24px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:26px}
.scard{padding:22px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#1d2320}
.scard h3{margin:0 0 8px;font-size:21px;text-transform:uppercase;letter-spacing:.01em;color:#f5c518}
.scard p{margin:0 0 9px;color:#ccd4ce;font-size:16px}
.scard .meta{margin:0;color:#8b948e;font-size:14.5px}
.scard b{color:#f2f5f1}


/* price */
.price{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;margin-top:24px}
.pbox{padding:28px;border-radius:18px;border:1px solid #2f8a3c;
  background:linear-gradient(180deg,rgba(47,138,60,.2),rgba(13,16,14,.4))}
.pnum{display:block;font:700 clamp(50px,7vw,78px)/1 var(--display);color:#f5c518}
.pfor{display:block;color:#ccd4ce;margin-top:2px;font-size:17px}
.plist{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:10px}
.plist li{position:relative;padding-left:26px;color:#ccd4ce;font-size:16px}
.plist li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:2px;
  background:#6cc27a;border-radius:1px}
.plist b{color:#f2f5f1}
.pnote{margin:12px 0 0;color:#8b948e;font-size:14px}
.pside{padding:28px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#1d2320}
.pside h3{margin:0 0 12px;font-size:19px;text-transform:uppercase;color:#f2f5f1}
.pside p{margin:0 0 12px;color:#ccd4ce;font-size:16px}
.pside b{color:#f2f5f1}
.pside .fine{color:#8b948e;font-size:14.5px;margin:0}
.pside a{color:#f5c518}

.honest{display:grid;gap:14px;max-width:760px;margin-top:20px}
.honest p{margin:0;color:#ccd4ce}
.honest b{color:#f2f5f1}

.faq{display:grid;gap:10px;max-width:760px;margin-top:20px}
.faq details{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#1d2320;
  padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px}
.faq summary::marker{color:#6cc27a}
.faq p{margin:10px 0 0;color:#ccd4ce;font-size:16px}

.last{position:relative;text-align:center;padding:76px 28px 84px}

.last h2{font-size:clamp(30px,5vw,54px);text-transform:uppercase;margin:0 0 22px;letter-spacing:-.016em}
.last p{margin:18px 0 0;color:#aab3ad}
.last a:not(.sbtn){color:#f5c518}

body.sales .site-foot{max-width:1080px;margin:0 auto;padding:26px 28px 40px;
  border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#8b948e;font-size:13.5px}
body.sales .site-foot .legal{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 20px;margin:0 0 10px;padding:0}
body.sales .site-foot .legal a{color:#aab3ad;text-decoration:none;border-bottom:1px solid transparent}
body.sales .site-foot .legal a:hover{color:#f2f5f1;border-bottom-color:rgba(255,255,255,.3)}
body.sales .site-foot .copy{margin:0}

@media (max-width:860px){
  .facts ul{grid-template-columns:repeat(2,1fr)}
  .price{grid-template-columns:1fr}
  .shero-art{opacity:.4;right:-10%;width:min(60vw,320px)}
}
@media (max-width:560px){
  .sbar{padding:14px 16px}
  .shero{padding:22px 16px 48px}
  .band{padding:44px 16px}
  .facts ul{padding:20px 16px;gap:14px}
  .pbox,.pside{padding:20px}
  .last{padding:48px 16px 56px}
  body.sales .site-foot{padding:24px 16px 36px}
}
@media (prefers-reduced-motion: reduce){ .sbtn{transition:none} }

/* ── the mark's rim ──────────────────────────────────────────────────────────────
   `.arcmark .rim` is a 10-unit black stroke at 35%. It was drawn to give the disc a defined
   edge at icon size against a pale background. On this page the background is near-black and
   the mark is ~380px, so it reads as a heavy black band round the logo and defines nothing -
   the disc's own gradient already darkens to #17531f at its edge. Off on both marks here.
   16 Oct 2026. */
body.sales .arcmark .rim{display:none}

/* the numbers are the argument, so they get the tabular figures that stop them jittering
   as they climb */
.facts b{font-variant-numeric:tabular-nums}

/* the cards answer the reader rather than performing at them */
.scard{transition:border-color .25s ease,transform .45s var(--spring-ui)}
.scard:hover{border-color:rgba(245,197,24,.4);transform:translateY(-3px)}

@media (prefers-reduced-motion: reduce){
  .scard{transition:none}
  .scard:hover{transform:none}
}

/* ── the hero: the words, then the film ────────────────────────────────────────
   17 Oct 2026. The phone screenshot that sat beside the headline is gone: his call - "it just
   ruins the hero" - and he was right, a still of one notes page was doing a weak version of the
   job the advert now does properly. So the hero is two things in order: what this is (the words,
   the exams it covers, the button), then the thing itself, playing. Nothing sits beside the
   headline competing with it. What used to be a separate "What it looks like" gallery is this
   film; four static phone shots said less than a minute of the real site being used. */
.shero{overflow-x:clip;padding-bottom:20px}
.shero-in{max-width:1180px;margin:0 auto}
.shero-words{max-width:880px;min-width:0}
.shero h1{font-size:clamp(34px,5.6vw,72px)}
.shero-sub{max-width:58ch}

/* the exams by name, as the advert names them */
.exams-lbl{margin:22px 0 0;font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#aab3ad}
.exams{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:12px 0 0;padding:0}
.exams li{font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.05em;
  padding:9px 15px 10px;border-radius:999px;color:#f2f5f1;
  border:1.5px solid rgba(245,197,24,.6);background:rgba(245,197,24,.08)}

/* the film: a lit screen on the page's one surface, lifted by its shadow rather than boxed in */
.film{position:relative;max-width:1180px;margin:46px auto 0}
.film .screen{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b0e0c;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 140px -30px rgba(47,138,60,.42),
             0 0 0 6px rgba(255,255,255,.025)}
.film video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0b0e0c}
.film .play{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  background:#0b0e0c;cursor:pointer;display:block}
.film .play img{display:block;width:100%;height:100%;object-fit:cover}
.film .play .pp-phone{display:none}
.film .play::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.film .pbtn{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:14px;padding:16px 28px 16px 20px;border-radius:999px;
  background:#f5c518;color:#15181a;font:800 clamp(17px,1.7vw,22px)/1 var(--display);
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 18px 50px -10px rgba(245,197,24,.55),0 0 0 8px rgba(245,197,24,.14);
  transition:transform .5s var(--spring-ui),box-shadow .3s}
.film .pbtn small{font:600 13px var(--mono);letter-spacing:0;opacity:.7;text-transform:none}
.film .play:hover .pbtn,.film .play:focus-visible .pbtn{transform:translate(-50%,-50%) scale(1.05);
  box-shadow:0 22px 60px -10px rgba(245,197,24,.7),0 0 0 12px rgba(245,197,24,.18)}
.film .play:focus-visible{outline:3px solid #f5c518;outline-offset:-3px}
.film.playing .play{display:none}

/* chapters: the storyboard, so a reader can go straight to the part they care about */
.chapters{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.chapters button{display:inline-flex;align-items:baseline;gap:8px;cursor:pointer;
  font:600 14.5px/1 var(--body);color:#ccd4ce;background:#141916;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 14px;
  transition:border-color .15s,color .15s,background .15s}
.chapters .t{font:500 12px/1 var(--mono);color:#8b948e}
.chapters button:hover,.chapters button:focus-visible{border-color:#6cc27a;color:#f2f5f1}
.chapters button[aria-current="true"]{background:#f5c518;border-color:#f5c518;color:#15181a}
.chapters button[aria-current="true"] .t{color:#15181a;opacity:.7}
.film figcaption{margin:16px 0 0;color:#aab3ad;font-size:15px;max-width:70ch}
.film .script{margin-top:10px;color:#aab3ad;font-size:15px;max-width:70ch}
.film .script summary{cursor:pointer;color:#ccd4ce;font-weight:600}
.film .script summary::marker{color:#6cc27a}
.film .script p{margin:8px 0 0}

/* on a phone: the tall cut of the advert, which fills the screen the way it was made to */
@media (max-width:700px){
  .film{margin-top:34px}
  .film .screen{aspect-ratio:9/16;max-width:440px;margin:0 auto;border-radius:20px}
  .film .play .pp-land{display:none}
  .film .play .pp-phone{display:block}
  .chapters{flex-wrap:nowrap;overflow-x:auto;margin:16px -16px 0;padding:0 16px 4px;
    scrollbar-width:none}
  .chapters::-webkit-scrollbar{display:none}
  .chapters button{white-space:nowrap}
}
@media (prefers-reduced-motion: reduce){
  .film .pbtn{transition:none}
}

/* ── the log in panel is an overlay ─────────────────────────────────────────────
   Its stage was an ordinary block at the foot of the page, 560px tall, so it left a 560px
   hole above the footer whether the panel was open or not - and the panel only landed in the
   right place because the stage was not positioned and its contents fell back to the top of
   the document. Fixed to the viewport, it is what it was meant to be: in front of the page,
   the veil covering the whole screen, the cable still running out of the button pressed.
   17 Oct 2026. */
body.sales .lstage{position:fixed;inset:0;height:auto;z-index:60;pointer-events:none}

/* each half of the headline balances on its own lines, so no word is ever left alone */
.shero h1 .l1,.shero h1 .hl{display:block;text-wrap:balance}
/* the bar sits on the page, not on a strip of its own, so the mark runs up to the edge */
body.sales .sbar{background:transparent;box-shadow:none;border:0}

/* ── the log in panel, live ─────────────────────────────────────────────────────
   The current chasing round the panel's edge, and a steady gold edge for anyone with reduced
   motion on, so the panel still reads as live without anything moving. 17 Oct 2026. */
#lrun .bglow{fill:none;stroke:#f5c518;stroke-width:9;stroke-linecap:round;opacity:.45;filter:blur(4px)}
#lrun .bedge{fill:none;stroke:#f5c518;stroke-width:2;opacity:.95}
#lrun .bcore{fill:none;stroke:#fffbe0;stroke-width:2.6;stroke-linecap:round}
body.sales .lbox.in{box-shadow:0 0 0 1px rgba(245,197,24,.45),0 0 34px -4px rgba(245,197,24,.35),0 30px 80px -20px rgba(0,0,0,.9)}


/* ── power on ───────────────────────────────────────────────────────────────────
   17 Oct 2026, his ask: the page should not just be there, it should come on from the top to
   the bottom. A line of current sweeps down the screen and each part switches on as it passes,
   with the flicker of a striplight catching; when it reaches the corner mark the bolt strikes.
   About two and a half seconds, once, on arrival (slowed 17 Oct: "too fast") - then nothing moves until the reader does something.
   Only ever under html.powering, which the head script sets only when motion is allowed and
   takes off again after 6s whatever happens, so a failure can never leave the page blank. */
html.powering :is(.sbar .sword,.sbar nav,.shero .hero-wires,.shero .pills,.shero h1 .l1,
  .shero h1 .hl,.shero-sub,.exams-lbl,.exams,.shero-go,.shero-note,.ticks,.film .film-h,.film .screen,.film .chapters,.film figcaption,
  .film .script,.facts):not(.on){opacity:0}
html.powering .on{animation:poweron 1.05s cubic-bezier(.25,.6,.25,1) both}
html.powering .hero-wires.on{animation:wireson 2s ease both}
@keyframes poweron{
  0%{opacity:0;transform:translateY(10px);filter:brightness(2.4)}
  10%{opacity:.75}
  17%{opacity:.25}
  28%{opacity:.95;filter:brightness(1.6)}
  100%{opacity:1;transform:none;filter:none}}
@keyframes wireson{from{opacity:0}to{opacity:1}}
.sweep{position:fixed;left:0;right:0;top:0;height:2px;z-index:80;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff6c2 18%,#f5c518 50%,#fff6c2 82%,transparent);
  box-shadow:0 0 16px 3px rgba(245,197,24,.6),0 0 70px 12px rgba(245,197,24,.22)}
.sweepsparks{position:fixed;inset:0;width:100%;height:100%;z-index:81;pointer-events:none;overflow:visible}


/* ── what you get, as a list ────────────────────────────────────────────────────
   17 Oct 2026. Six big cards repeated what the film now shows. It stays as text, short, because
   before someone pays the page has to say in words what they are buying - and search engines
   and anyone who never presses play only get the words. */
.get{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 34px;max-width:1080px}
.get li{position:relative;padding:14px 0 14px 26px;border-top:1px solid rgba(255,255,255,.08);color:#ccd4ce;font-size:16px;line-height:1.55}
.get li::before{content:"";position:absolute;left:0;top:23px;width:13px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#c07a45 0 33%,#4a8ad8 33% 66%,#2f8a3c 66%)}
.get b{display:block;color:#f2f5f1;font:700 18px/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px}
@media (max-width:760px){ .get{grid-template-columns:1fr} }

/* ── the film says what it is ───────────────────────────────────────────────────
   A heading above it, and a silent loop playing in the frame while it is on screen. */
.film-h{margin:0 0 16px;font:800 clamp(24px,3vw,34px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.01em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.film-h span{font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:none;color:#aab3ad}
.film .teaser{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.film .teaser.live{opacity:1}
@media (max-width:700px){ .film-h{text-align:left} }
@media (prefers-reduced-motion: reduce){ .film .teaser{display:none} }

/* ── one column ─────────────────────────────────────────────────────────────────
   The hero ran on a 1180px column and the bands on 1080px less their padding, so the headline,
   "What you actually get" and "What this isn't" each started at a different left edge. Every
   section now shares the bands' content column. 17 Oct 2026. */
.shero-in,.film{max-width:1024px}
.band.plain>*{max-width:1024px}

/* the scroll rise (see the script "the rest of the page rises in as you scroll") */
.rv{opacity:0;transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .95s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ── the headline: two lines, on every screen ───────────────────────────────────
   17 Oct 2026: on a wide screen it read as two lines, on a phone four, with a gap down the
   right. It is two lines everywhere now - "The exam gives you the book." / "It never tells you
   where in it." - and the type is sized to the column, so the longer line runs edge to edge.
   13.1em is that line's measured width in Barlow Semi Condensed 700 at this tracking; both
   lines share the size so they read as one headline. The column is the hero's content width:
   1024px at most, less the side padding (28px a side, 16px on a phone). */
.shero h1{font-size:calc(min(1024px, 100vw - 56px) / 13.1);white-space:nowrap;line-height:1.04}
.shero h1 .l1,.shero h1 .hl{display:block}
@media (max-width:560px){ .shero h1{font-size:calc((100vw - 32px) / 13.1)} }
/* the words' column is the full hero column (the paragraph keeps its own measure), and each
   line is held on one line: the earlier "balance" rule set wrapping back on, which beat nowrap */
.shero-words{max-width:none}
.shero h1 .l1,.shero h1 .hl{text-wrap:nowrap;white-space:nowrap}

/* ── the calm load-in (reduced motion) ──────────────────────────────────────────
   Same order, top to bottom; each part only fades in. No sweep, no flicker, no movement. */
@keyframes fadeon{from{opacity:0}to{opacity:1}}
html.powering.calm .on,html.powering.calm .hero-wires.on{animation:fadeon 1s ease both}
.rv.rv-calm{transform:none;transition:opacity .9s ease var(--d,0s)}

/* ── 20 Oct 2026: breaking the page up (after blackcabunite.co.uk) ─────────────────────────
   The film sits in its own band, narrower than the copy, with room above and below; its
   heading becomes a label. Then thin strips, then chaptered bands, the price band on a
   slightly lifted ground so the page alternates. */
.film{max-width:820px;margin:84px auto 70px}
.film-h{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#aab3ad;
  text-align:center;margin:0 0 18px}
.examstrip{border-top:1px solid rgba(245,197,24,.18);border-bottom:1px solid rgba(255,255,255,.06)}
.examstrip-in{max-width:1080px;margin:0 auto;padding:18px 28px;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 22px}
.examstrip .exams-lbl{margin:0;white-space:nowrap}
.examstrip .exams{margin:0}
.chap{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:600 13px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:#f5c518}
.chap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(245,197,24,.45),rgba(245,197,24,0))}
.band.alt{position:relative;isolation:isolate}
.band.alt::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:rgba(255,255,255,.025);border-block:1px solid rgba(255,255,255,.05)}
@media (max-width:700px){
  .film{margin:46px auto 40px}
  .examstrip-in{padding:16px}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hero: Get access + Watch it in action, then a hairline and the six exams ticked */
.shero-note{display:block;margin:14px 0 0}
.sbtn.watch svg{color:#f5c518}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.1);max-width:1024px}
.ticks li{display:flex;align-items:center;gap:8px;color:#ccd4ce;font-size:14.5px;font-weight:600}
.ticks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  background:#f5c518 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%2315181a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
#look{scroll-margin-top:80px}

/* the note sits centred under the gold button; the button row lines up on the buttons' tops */
.shero-go{align-items:flex-start}
.buy{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.buy .shero-note{display:block;margin:0;font-size:14px}
/* one heading per band: the small gold label with its line is the heading now */
.band h2.chap{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f5c518;margin:0 0 26px}

/* 20 Oct 2026: "make the question tabs a bit smaller" */
.faq{gap:8px;max-width:640px}
.faq details{padding:11px 16px;border-radius:10px}
.faq summary{font-size:15px}
.faq p{font-size:15px;margin-top:8px}

/* 20 Oct 2026, after blackcabunite.co.uk: the opening screen is one full screen on its own,
   whatever the window size; the film starts below the fold. The bar above is 75px (64px on a phone). */
.shero{padding-top:0}
.shero-in{min-height:calc(100svh - 75px);display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.film{margin-top:40px}
@media (max-width:700px){ .shero-in{min-height:calc(100svh - 64px);padding-block:8px 16px} }

/* 20 Oct 2026: "get rid of the boxes" -- the questions are plain lines; tap one and the answer
   drops down under it. No background, no border, just a hairline between questions. */
.faq{gap:0}
.faq details{border:0;border-radius:0;background:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.faq details:first-child{border-top:1px solid rgba(255,255,255,.08)}
.faq summary{list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:#f5c518;font:600 18px/1 var(--mono);width:14px;flex:none}
.faq details[open] summary::before{content:"\2212"}
.faq p{padding-left:24px}

/* 20 Oct 2026: a type scale, after feedback ("look into H1, H2, H3"). The headline (~78px) went
   straight down to a 19px paragraph that read as small print. Now four clear steps:
   headline ~78 · lead 24 · body 17 · small 14. */
.shero-sub{font-size:clamp(19px,2.1vw,24px);line-height:1.45;max-width:44ch;color:#dfe5e0;margin-top:24px}
@media (max-width:560px){ .shero-sub{font-size:18px} }

/* Student reviews, from Trustpilot (24 Oct 2026). Three across on a computer, one and a peek on a phone; swipe or arrows. */
.rv-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:20px}
.rv-head .chap{margin:0}
.rv-score{display:flex;align-items:center;gap:10px;color:#aab3ad;font-size:15px;text-decoration:none}
.rv-score b{color:#f2f5f1;font-size:19px}
.tpstars{display:inline-flex;gap:3px}.tpstars i{width:22px;height:22px;background:#00b67a;display:grid;place-items:center}
.tpstars i:before{content:"\2605";color:#fff;font-size:15px;font-style:normal;line-height:1}
.tpstars.sm i{width:18px;height:18px}.tpstars.sm i:before{font-size:12px}
.tpstars i.off{background:#dcdce6}
.rv-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;background:#1d2320;border:1px solid #343c37;border-radius:14px;
  padding:20px 20px 16px;display:flex;flex-direction:column;gap:10px;min-height:240px}
@media (max-width:860px){.rv-card{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:560px){.rv-card{flex-basis:86%}}
.rv-card h3{font:700 20px/1.2 var(--display);margin:2px 0 0;color:#f2f5f1}
.rv-card p{margin:0;color:#ccd4ce;font-size:16px}
.rv-who{margin-top:auto;display:flex;justify-content:space-between;gap:8px;font-size:14px;color:#aab3ad;border-top:1px solid #343c37;padding-top:10px}
.rv-who b{color:#f2f5f1}
.rv-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.rv-nav.rv-fits .rv-dots,.rv-nav.rv-fits .rv-btns{visibility:hidden}
.rv-btns{display:flex;gap:8px}
.rv-btns button{width:44px;height:44px;border-radius:999px;border:1px solid #343c37;background:#1d2320;color:#f2f5f1;font-size:20px;cursor:pointer}
.rv-btns button:hover,.rv-btns button:focus-visible{border-color:#f5c518}
.rv-dots{display:flex;gap:6px}.rv-dots span{width:8px;height:8px;border-radius:99px;background:#343c37}.rv-dots span.on{background:#f5c518;width:22px}
.rv-all{color:#f5c518;font-weight:700;text-decoration:none}
.rv-note{color:#8b948e;font-size:13px;margin:14px 0 0}
/* a phone has room for the arrows and the Trustpilot link, not a dot per review as well: at 12 reviews the row pushed the page 11 px sideways (2 Nov 2026) */
@media (max-width:520px){.rv-dots{display:none}}