/* Fill Your Academy funnel: shared styles for all 3 pages.
   Light theme, white background, black and blue text. Nils tokens.
   Refine here, it applies everywhere. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --font-main:"Google Sans","DM Sans",sans-serif;
  --font-secondary:"DM Sans","Google Sans",sans-serif;
  --font-emphasis:"Instrument Sans","Google Sans",sans-serif;
  --blue:#046bd2;--blue-dark:#0358b0;--blue-rgb:4,107,210;
  --gray-bg:#f5f7fa;--text:#0a0a0a;--muted:rgba(10,10,10,.55);--line:rgba(10,10,10,.09);
  --aqua:#12b5e5;--tp-green:#00b67a;
}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{font-family:var(--font-main);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:#fff}
/* Short pages: the hero fills the screen and centres its content, so there is
   never a band of bare white under the badges. */
.stage.full{padding-top:0;padding-bottom:0}
h1,h2,h3,.btn,.card-q,.card-label,.who,.tp-score,.proof-label,.rule-num,.faq-h,.group-label{
  font-family:var(--font-emphasis)}
p,li,.prompt,.legal,.foot,.quote-t,.card-hint,.tp-count,.rule-body,.a,.cal-note{
  font-family:var(--font-secondary)}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}

/* ---------- stage ---------- */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:64px 0 56px;overflow:hidden}
.stage.full{min-height:100svh}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%, rgba(var(--blue-rgb),.16) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 88% 12%, rgba(18,181,229,.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 105%, rgba(var(--blue-rgb),.10) 0%, transparent 62%)}
/* Dot matrix over the mesh, on all 3 pages. The white layers stacked on top
   of the dots clear the middle where the copy sits and the bottom edge where
   the next section starts, so the texture only shows in the margins that were
   empty. No mask-composite needed, it is all one background stack. */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:no-repeat,no-repeat,repeat;
  background-position:0 0,0 0,center top;
  background-size:100% 100%,100% 100%,26px 26px;
  background-image:
    linear-gradient(to bottom,transparent 46%,#fff 96%),
    radial-gradient(ellipse 42% 33% at 50% 25%,#fff 10%,rgba(255,255,255,0) 72%),
    radial-gradient(rgba(var(--blue-rgb),.26) 1.6px,transparent 1.6px)}
/* page 1 centres its content vertically, so its clearing moves down with it */
.stage.full::after{
  background-image:
    linear-gradient(to bottom,transparent 62%,#fff 99%),
    radial-gradient(ellipse 46% 34% at 50% 46%,#fff 14%,rgba(255,255,255,0) 74%),
    radial-gradient(rgba(var(--blue-rgb),.26) 1.6px,transparent 1.6px)}
.stage > *{position:relative;z-index:1}

/* ---------- type ----------
   Sizes and weights matched to the reference funnel (automaus.org/opt-in),
   measured from its stylesheet. Breakpoint is 481px, same as theirs.
     attention line  16px -> 27px, weight 400, line-height 1.3
     headline        32px -> 59px, weight 900, line-height 1.1
     prompt line     16px -> 27px, weight 400, line-height 1.3
     button text     31px -> 49px, weight 700
   Note: Instrument Sans tops out at 700, so the headline uses 700 where the
   reference uses 900. That is a font limitation, not a spec mismatch. */
.attn{display:inline-flex;align-items:center;font-family:var(--font-emphasis);
  font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;color:var(--blue);background:rgba(var(--blue-rgb),.07);
  border:1px solid rgba(var(--blue-rgb),.2);border-radius:100px;padding:9px 20px;
  margin-bottom:22px}
h1{font-size:30px;font-weight:700;line-height:1.12;letter-spacing:-.022em;
  margin-bottom:22px;text-wrap:balance;max-width:1080px;color:var(--text)}
/* Whole headline is bold, so hue carries all the emphasis (gallery no. 11).
   .accent = blue gradient (island 1, the outcome)
   .em     = aqua          (island 2, the differentiator) */
/* background-clip:text clips to the span's own box, so the final glyph and any
   descender get shaved, badly at a negative letter-spacing. Pad the box out and
   pull the padding straight back with a negative margin, so nothing moves. */
h1 .accent{background:linear-gradient(100deg,#1e8cff 0%,var(--blue) 55%,#0b3f80 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.06em .1em .12em 0;margin:-.06em -.1em -.12em 0}
h1 .em{color:var(--aqua)}
.prompt{font-size:16px;font-weight:400;line-height:1.3;color:var(--text);
  margin-bottom:26px;max-width:720px}

/* ---------- button ---------- */
/* Button geometry matched to the reference: 20px padding, text 31px mobile
   and 49px desktop, weight 700. Pill radius and blue are ours. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.34em;
  padding:20px 34px;background:linear-gradient(160deg,#1e8cff 0%,var(--blue) 55%,var(--blue-dark) 100%);
  color:#fff;font-size:31px;font-weight:700;line-height:1.15;border-radius:10px;
  border:none;cursor:pointer;text-decoration:none;max-width:100%;
  transition:transform .15s,box-shadow .2s,filter .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 34px rgba(var(--blue-rgb),.3)}
.btn:hover{transform:translateY(-3px);filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 46px rgba(var(--blue-rgb),.38)}
.btn:focus-visible{outline:3px solid var(--blue-dark);outline-offset:3px}
.btn .arrow{width:.72em;height:.72em;border-radius:50%;background:rgba(255,255,255,.2);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .2s,background .2s}
.btn .arrow svg{width:.4em;height:.4em}
.btn:hover .arrow{background:rgba(255,255,255,.32);transform:translateX(3px)}
/* Reference carries a 15px/700 subtext inside the button block. Ours sits under it. */
.subnote{margin-top:14px;font-size:15px;color:var(--muted);font-weight:700}

/* ---------- trustpilot ---------- */
.tp{display:inline-flex;flex-direction:column;align-items:center;gap:9px;margin-top:30px}
.tp-stars{display:inline-flex;gap:3px}
.tp-stars i{width:30px;height:30px;background:var(--tp-green);display:inline-block;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.2l7.1-.6z'/></svg>") center/76% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.2l7.1-.6z'/></svg>") center/76% no-repeat}
.tp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.tp-score{font-size:15px;font-weight:700;color:var(--text)}
.tp-brand{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-emphasis);
  font-size:15px;font-weight:700;color:var(--text)}
.tp-brand svg{width:17px;height:17px;fill:var(--tp-green)}

/* ---------- trust badges: all visible, no rotation ---------- */
.badges{margin-top:28px;display:flex;justify-content:center;width:100%}
.badge-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:720px}
.badge{display:flex}
.badge-inner{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border:1px solid var(--line);border-radius:100px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.badge-txt{font-family:var(--font-emphasis);font-size:14.5px;font-weight:700;color:var(--text);
  letter-spacing:-.005em;white-space:nowrap}
.badge svg{width:18px;height:18px;flex-shrink:0}
.badge .tick{color:var(--blue)}
.mini-stars{display:inline-flex;gap:2px}
.mini-stars i{width:15px;height:15px;background:var(--tp-green);display:inline-block;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.2l7.1-.6z'/></svg>") center/78% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.2l7.1-.6z'/></svg>") center/78% no-repeat}
@media (max-width:480px){
  .badge-rail{flex-direction:column;align-items:center;gap:9px}
  .badge-txt{font-size:13.5px}
}

/* ---------- proof strip ---------- */
.proof{padding:8px 0 64px;background:#fff}
.proof-label{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);text-align:center;margin-bottom:26px}
.proof-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:44px}
.qc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);text-align:left}
.quote-t{font-size:17px;font-weight:500;line-height:1.55;color:var(--text);margin-bottom:16px}
.who{font-size:14px;font-weight:700;color:var(--blue)}
.who small{display:block;font-family:var(--font-secondary);font-weight:400;
  font-size:13px;color:var(--muted);margin-top:4px}
.recta{text-align:center}
@media (min-width:760px){ .proof-grid{grid-template-columns:repeat(3,1fr);gap:20px} }

/* ---------- card (calendar + checker) ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 24px;
  box-shadow:0 12px 44px rgba(var(--blue-rgb),.13),0 2px 8px rgba(0,0,0,.05);
  max-width:920px;margin:0 auto;text-align:left}
.card-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px;text-align:center}
.card-q{font-size:clamp(19px,2.4vw,24px);font-weight:700;line-height:1.28;
  letter-spacing:-.01em;text-align:center;margin-bottom:6px;color:var(--text)}
.card-hint{font-size:13.5px;color:var(--muted);text-align:center;margin-bottom:22px;font-weight:500}

/* ---------- calendar slot ---------- */
/* form_embed.js sets the iframe height itself, so only a floor is set here. */
.cal-slot{border-radius:14px;overflow:hidden;background:#fff;min-height:620px}
.cal-slot iframe{width:100%;min-height:620px;border:0;display:block}
.cal-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:10px;min-height:640px;padding:40px 24px;text-align:center;
  border:2px dashed rgba(var(--blue-rgb),.3);border-radius:14px;color:var(--muted)}
.cal-placeholder strong{color:var(--blue);font-family:var(--font-emphasis);font-size:16px}
.cal-placeholder span{font-size:14px;max-width:420px;line-height:1.55}
.cal-note{margin-top:24px;text-align:center;font-size:15px;color:var(--muted);line-height:1.6}
.cal-note a{color:var(--blue)}

/* ---------- rules + faq (page 3) ---------- */
.body-wrap{padding:24px 0 64px;background:#fff}
.rule{display:flex;gap:20px;margin-bottom:38px;text-align:left}
.rule-num{flex-shrink:0;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(160deg,rgba(var(--blue-rgb),.14),rgba(var(--blue-rgb),.05));
  color:var(--blue);display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700}
.rule h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.rule-body{font-size:16.5px;color:var(--muted);line-height:1.65}
.rule-body strong{color:var(--text)}
.faq-h{font-size:26px;font-weight:700;letter-spacing:-.015em;margin:8px 0 20px;text-align:left}
details{border-bottom:1px solid var(--line);text-align:left}
summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;
  font-family:var(--font-emphasis);font-size:16.5px;font-weight:600;letter-spacing:-.005em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.a{padding:0 0 18px;font-size:16px;color:var(--muted);line-height:1.65}
.a strong{color:var(--text)}
.group-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:26px 0 12px;text-align:left}


@media (max-width:480px){
  .tp{display:flex}
  /* long first-person labels wrap to 3 lines at the reference's 31px
     on a phone. 24px holds them to 2 and stops the button dominating. */
  .btn{font-size:24px;padding:18px 26px}
}

/* Desktop scale, matched to the reference breakpoint of 481px */
@media (min-width:481px){
  .attn{font-size:16px;margin-bottom:24px}
  h1{font-size:52px;line-height:1.08;margin-bottom:30px}
  .prompt{font-size:27px;margin-bottom:32px}
  .btn{font-size:49px;padding:20px 46px}
  .card{padding:36px 34px}
  .body-wrap{padding:40px 0 84px}
}


/* ================= QUALIFIER POPUP (page 1) =================
   3 steps then the calendar. Captures the lead BEFORE the calendar so a
   visitor who does not book is still reachable. Mirrors the reference
   funnel, which does the same thing for the same reason. */
.qz-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,16,40,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.qz-overlay.on{display:flex}
.qz{background:#fff;border-radius:24px;width:100%;max-width:560px;padding:22px 26px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);position:relative;max-height:92vh;overflow-y:auto}
/* Header: back, progress, close on one row. Both chips are the same size and
   share a baseline, so nothing reads as misaligned. Back keeps its space when
   hidden, otherwise the bar would change length between steps. */
.qz-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.qz-back,.qz-close{position:static;flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;
  background:#eef1f6;color:var(--text);font-size:17px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.qz-back:hover,.qz-close:hover{background:#e2e7ef;color:var(--blue)}
.qz-back.is-off{visibility:hidden;pointer-events:none}
.qz-bar{flex:1;height:4px;background:#e8edf3;border-radius:100px;overflow:hidden}
.qz-fill{height:100%;background:var(--blue);border-radius:100px;width:25%;
  transition:width .3s cubic-bezier(.4,0,.2,1)}

/* Steps slide the way you are travelling: forward from the right, back from
   the left. Fast enough to read as one motion rather than a page change. */
.qz-step{display:none}
.qz-step.on{display:block;animation:qzIn .2s cubic-bezier(.22,.61,.36,1) both}
.qz-step.on.rev{animation-name:qzInRev}
@keyframes qzIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes qzInRev{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .qz-step.on{animation:none}
  .qz-fill{transition:none}
}
.qz-q{font-family:var(--font-emphasis);font-size:clamp(20px,2.6vw,25px);font-weight:700;
  line-height:1.25;letter-spacing:-.015em;text-align:center;margin-bottom:6px;color:var(--text)}
.qz-hint{font-family:var(--font-secondary);font-size:13.5px;color:var(--muted);text-align:center;
  margin-bottom:20px;font-weight:500}
.qz-opts{display:flex;flex-direction:column;gap:10px}
.qz-opt{border:2px solid #e8edf3;border-radius:12px;padding:16px 18px;cursor:pointer;
  font-family:var(--font-secondary);font-size:15.5px;font-weight:600;color:var(--text);background:#fff;
  text-align:left;transition:border-color .15s,background .15s,transform .12s;width:100%}
.qz-opt:hover{border-color:var(--blue);background:rgba(var(--blue-rgb),.05);transform:translateY(-1px)}
/* confirms the tap landed, then the step advances itself */
.qz-opt.sel{border-color:var(--blue);background:rgba(var(--blue-rgb),.12);transform:translateY(-1px)}
.qz-opt small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
/* The 4 fields read as 1 + 3: the city sits on its own above a divider that
   says why we want the rest. Icons give each row a shape you recognise
   before you read the label, and the labels stopped shouting. */
.qz-field{margin-bottom:11px}
.qz-field label{display:block;font-family:var(--font-secondary);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:5px}
.qz-field input{width:100%;border:2px solid #e8edf3;border-radius:12px;padding:14px 16px 14px 46px;
  font-family:var(--font-secondary);font-size:16px;font-weight:500;color:var(--text);background:#fff;
  background-repeat:no-repeat;background-position:15px 50%;background-size:20px 20px;
  transition:border-color .15s,box-shadow .15s}
.qz-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--blue-rgb),.12)}
.qz-field input.bad{border-color:#d64545}
.qz-field input::placeholder{color:#aab3c2;font-weight:400}
.qz-hero input{font-size:17px;padding-top:16px;padding-bottom:16px;
  border-color:rgba(var(--blue-rgb),.28);background-color:rgba(var(--blue-rgb),.04)}
.qz-sep{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-family:var(--font-secondary);font-size:12.5px;font-weight:600;color:var(--muted)}
.qz-sep::before,.qz-sep::after{content:"";flex:1;height:1px;background:#e8edf3}
.i-pin input{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>")}
.i-user input{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.5'/><path d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/></svg>")}
.i-mail input{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2.5'/><path d='m3.6 6.9 8.4 5.9 8.4-5.9'/></svg>")}
.i-phone input{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.4 3.5h3.1l1.5 4-2 1.5a12.4 12.4 0 0 0 6 6l1.5-2 4 1.5v3.1a2 2 0 0 1-2.2 2A17.2 17.2 0 0 1 4.4 5.7a2 2 0 0 1 2-2.2Z'/></svg>")}
.qz-err{font-family:var(--font-secondary);font-size:13px;color:#d64545;margin-bottom:10px;display:none}
.qz-err.on{display:block}
.qz-sub{width:100%;margin-top:6px;border-radius:12px;font-size:19px;padding:17px 20px}
.qz-note{font-family:var(--font-secondary);font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}
.qz-out{text-align:center}
.qz-num{background:linear-gradient(160deg,rgba(var(--blue-rgb),.07),rgba(var(--blue-rgb),.03));
  border:1px solid rgba(var(--blue-rgb),.18);border-radius:16px;padding:20px 18px;margin:4px 0 18px}
.qz-num-big{font-family:var(--font-emphasis);font-size:clamp(38px,9vw,48px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--blue)}
.qz-num-sub{font-family:var(--font-emphasis);font-size:14.5px;font-weight:700;color:var(--text);margin-top:8px}
.qz-body{font-family:var(--font-secondary);font-size:14.5px;line-height:1.6;color:var(--muted);
  margin-bottom:12px;text-align:center}
.qz-tip{background:var(--gray-bg);border-radius:12px;padding:16px 18px;margin:6px 0 16px;
  font-family:var(--font-secondary);font-size:14px;line-height:1.6;color:var(--muted);text-align:center}
.qz-tip strong{display:block;font-family:var(--font-emphasis);color:var(--text);font-size:14.5px;margin-bottom:6px}
.qz-out p{font-family:var(--font-secondary);font-size:15.5px;color:var(--muted);line-height:1.6;margin-bottom:8px}


/* ================= BOOKING PAGE (page 2) =================
   Eyebrow, headline, calendar. Everything that argues for the call sits
   underneath it, so the thing they came to do is the first thing they see. */
.wrap.wide{max-width:1320px}
.wrap.mid{max-width:1120px}
.stage-book{padding:52px 0 48px;justify-content:flex-start}
.stage-book h1,.stage-book .prompt{margin-left:auto;margin-right:auto}
.stage-book .prompt{max-width:760px;margin-bottom:34px}
@media (min-width:481px){ .stage-book{padding:60px 0 56px} }

/* answers the question page 1's button asked. The city is deliberately not
   repeated here, the headline underneath already carries it. */
.attn-ok{color:#00875c;background:rgba(0,182,122,.09);border-color:rgba(0,182,122,.28)}
.attn-ok svg{width:15px;height:15px;margin-right:8px;flex-shrink:0}
.attn-ok span{white-space:nowrap}

.sec-h{font-size:clamp(23px,3.1vw,33px);font-weight:700;letter-spacing:-.02em;
  line-height:1.15;text-align:center;margin-bottom:8px;text-wrap:balance}
.sec-sub{font-family:var(--font-secondary);font-size:16px;color:var(--muted);
  text-align:center;margin-bottom:30px;line-height:1.55}

/* the booking gap, 3 across on a wide screen */
.gap-grid{display:grid;grid-template-columns:1fr;gap:18px;text-align:left}
@media (min-width:860px){ .gap-grid{grid-template-columns:repeat(3,1fr);gap:24px} }
.gap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.05)}
.gap-n{width:34px;height:34px;border-radius:50%;margin-bottom:15px;
  background:linear-gradient(160deg,rgba(var(--blue-rgb),.14),rgba(var(--blue-rgb),.05));
  color:var(--blue);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-emphasis);font-size:15px;font-weight:700}
.gap h3{font-size:17.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;color:var(--text)}
.gap p{font-family:var(--font-secondary);font-size:15.5px;line-height:1.6;color:var(--muted)}

/* who is on the call, a slim band rather than a card in a column */
.host-band{padding:30px 0 0}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;
  box-shadow:0 4px 20px rgba(0,0,0,.05)}
.host{display:flex;gap:14px;align-items:flex-start;max-width:620px;margin:0 auto;text-align:left}
.host-dot{flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(160deg,#1e8cff,var(--blue-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-emphasis);font-size:16px;font-weight:700;letter-spacing:-.02em}
.host strong{display:block;font-family:var(--font-emphasis);font-size:15.5px;font-weight:700;
  color:var(--text);margin-bottom:4px}
.host span{font-family:var(--font-secondary);font-size:14.5px;line-height:1.55;color:var(--muted)}

/* proof: screenshots, not retyped quotes. A quote in our own typeface is
   something we wrote. A screenshot is something they wrote. */
.proof-band{background:var(--gray-bg);border-top:1px solid var(--line);padding:52px 0 58px}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:30px}
@media (min-width:860px){ .stats{grid-template-columns:repeat(4,1fr);gap:18px} }
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 16px;
  text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.05);
  display:flex;flex-direction:column;justify-content:flex-start}
.stat-n{font-family:var(--font-emphasis);font-size:clamp(29px,4.6vw,37px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--blue)}
.stat-stars{display:flex;justify-content:center;gap:3px;height:37px;align-items:center}
.stat-stars i{width:27px;height:27px;background:var(--tp-green);display:inline-block;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.2l7.1-.6z'/></svg>") center/78% no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.2l7.1-.6z'/></svg>") center/78% no-repeat}
.stat-l strong{color:var(--text);font-weight:600}
.stat-l{font-family:var(--font-secondary);font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:10px}
.stat-w{font-family:var(--font-emphasis);font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(10,10,10,.38);margin-top:auto;padding-top:12px}

.proof-row{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:860px){ .proof-row{grid-template-columns:1fr 1fr;gap:22px} }
.shot-stack{display:flex;flex-direction:column;gap:18px}
@media (min-width:860px){ .shot-stack{gap:22px} }
.shot{padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.shot img{display:block;width:100%;height:auto}
.shot-cap{font-family:var(--font-secondary);font-size:13.5px;line-height:1.5;color:var(--muted);
  padding:13px 18px 15px;border-top:1px solid var(--line);text-align:left}
.shot-cap strong{color:var(--text);font-weight:600}



/* ---------- GHL reputation widget ---------- */
/* Under the screenshots: those are the depth, this is the volume. */
.reviews-head{text-align:center;margin:40px 0 18px}
.reviews-head h3{font-family:var(--font-emphasis);font-size:21px;font-weight:700;
  letter-spacing:-.015em;color:var(--text);margin-bottom:6px}
.reviews-head p{font-family:var(--font-secondary);font-size:14.5px;color:var(--muted)}
.reviews{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);padding:18px 14px;overflow:hidden}
.lc_reviews_widget{display:block;width:100%;min-width:100%;border:none}


/* ================= RULES PAGE (page 3) =================
   Structure, running order and voice follow the reference thank you page.
   Nils type, colour and dot matrix throughout. */
.warn{font-size:clamp(46px,9vw,72px);line-height:1;margin-bottom:14px}
.shout{font-family:var(--font-emphasis);font-size:clamp(28px,4.8vw,50px);font-weight:700;
  line-height:1.08;letter-spacing:-.022em;text-transform:uppercase;margin-bottom:16px;
  text-wrap:balance;max-width:1000px;margin-left:auto;margin-right:auto}
.shout-sub{font-family:var(--font-secondary);font-size:clamp(15px,1.9vw,21px);line-height:1.45;
  color:var(--muted);max-width:780px;margin:0 auto}

.rules{padding:8px 0 20px;background:#fff}
.rule-block{border-top:1px solid var(--line);padding:40px 0 34px}
.rule-block:first-child{border-top:none}
.rule-h{font-family:var(--font-emphasis);font-size:clamp(19px,2.6vw,27px);font-weight:700;
  line-height:1.2;letter-spacing:-.015em;text-transform:uppercase;text-align:center;
  margin-bottom:22px;text-wrap:balance}
.rule-h .tickbox{color:var(--tp-green);margin-right:8px}
.rule-h u{text-decoration-thickness:2px;text-underline-offset:3px}
.rule-lines{max-width:760px;margin:0 auto;text-align:center}
.rule-lines p{font-family:var(--font-secondary);font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.6;color:var(--muted);margin-bottom:16px}
.rule-lines p:last-child{margin-bottom:0}
.rule-lines strong{color:var(--text);font-weight:600}
.rule-lines .aside{font-size:15px;opacity:.85}

/* Rule 4: one card per question. Text answers now, a video slot per card
   whenever the recordings land. */
.qgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
@media (min-width:760px){ .qgrid{grid-template-columns:1fr 1fr;gap:18px} }
.q{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);text-align:left}
.q-e{font-size:26px;line-height:1;margin-bottom:10px;display:block}
.q h3{font-family:var(--font-emphasis);font-size:17px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--text);margin-bottom:9px}
.q p{font-family:var(--font-secondary);font-size:15px;line-height:1.6;color:var(--muted)}
.q p strong{color:var(--text);font-weight:600}

/* the reserved slot that closes the proof wall */
.reserved{background:linear-gradient(160deg,rgba(var(--blue-rgb),.07),rgba(var(--blue-rgb),.03));
  border:2px dashed rgba(var(--blue-rgb),.28);border-radius:18px;padding:34px 26px;text-align:center;
  margin-top:20px}
.reserved-e{font-size:32px;line-height:1;margin-bottom:12px}
.reserved h3{font-family:var(--font-emphasis);font-size:19px;font-weight:700;
  letter-spacing:-.012em;margin-bottom:8px;color:var(--text)}
.reserved p{font-family:var(--font-secondary);font-size:15.5px;line-height:1.6;color:var(--muted)}

/* ---------- client videos (page 3, Rule 5) ---------- */
/* Both files are 9:16 portrait, so the columns are deliberately narrow.
   Sized to fill their box at any width rather than letterboxing. */
.vids{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-bottom:38px}
.vid{width:100%;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.vid video{display:block;width:100%;height:auto;background:#0a0a0a}
.vid figcaption{padding:15px 17px 17px;font-family:var(--font-secondary);font-size:14px;
  line-height:1.5;color:var(--muted);text-align:left}
.vid figcaption strong{display:block;font-family:var(--font-emphasis);color:var(--text);
  font-size:15px;margin-bottom:5px}
.vid figcaption .res{display:block;margin-top:7px;font-family:var(--font-emphasis);
  font-size:12.5px;font-weight:700;color:var(--blue)}

/* A Trustpilot card runs edge to edge with no margin of its own, so the date
   in the top corner was being shaved by the card's own border radius. */
.shot.tp img{padding:16px 18px;background:#fff}

/* ---------- tap a screenshot to read it ---------- */
.shot img{cursor:zoom-in}
.shot img:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(4,16,40,.84);cursor:zoom-out;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:12px;
  background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45);cursor:default}
.lb-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:none;
  background:rgba(255,255,255,.94);color:var(--text);font-size:23px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lb-x:hover{background:#fff}
/* On a phone the viewport is narrower than the screenshot, so fitting the
   image to the screen would show it at the size it already was. Instead it
   opens at twice the viewport width and pans, which puts the review text back
   around 22px. Desktop has the room, so it just shows natural size. */
@media (max-width:859px){
  .lb{display:block;overflow:auto;padding:0;-webkit-overflow-scrolling:touch}
  .lb img{max-width:none;width:min(1100px,200vw);max-height:none;border-radius:0}
  .lb-x{position:fixed;top:12px;right:12px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
}

/* the screenshots are the one thing a phone cannot render at full size, so
   say they are tappable rather than hoping someone tries */
.tap-hint{font-family:var(--font-secondary);font-size:13px;color:var(--muted);
  text-align:center;margin-top:14px}
@media (min-width:860px){ .tap-hint{display:none} }