/* ============================================================
   one — the homepage. The "one." minimal style (white, black, the
   system face) with the playful placements: floating chips, tilted
   cards, coloured pills and tiles as hints of colour. Loaded after
   styles.css on index.html only; everything is scoped to body.home.
   Placeholders (.ph) mark where a designed asset goes, naming its brief.
   ============================================================ */

body.home{
  --paper:#f5f5f7;
  --dim:#86868b;
  /* One accent: neon orange. Bright and flat for marks, icons, ticks and
     big headline words; a deeper shade of it for small text, so that still
     reads at AA on white and on the soft tint. */
  --neon:#ff4f12;
  --neon-glow:rgba(255,79,18,.35);
  --good:#c93e09;
  --good-soft:#fff0e8;
  --good-dark:#ff7a3d;
  --green-2:#ff4f12;
  --green-3:#ff7a3d;
  --grad:linear-gradient(var(--neon),var(--neon));
  --grad-deep:linear-gradient(var(--good),var(--good));
  /* Headline gradient: deep orange into the neon, every stop at 3:1 or
     better on white for large text. */
  --grad-text:linear-gradient(90deg,#e8400c 0%,#ff4f12 55%,#ff6a1f 100%);
  /* Cards: one flat, warm tint, no border, a soft shadow. */
  --glass:#f5f5f7;
  --glass-shadow:0 10px 30px rgba(0,0,0,.06),0 1px 2px rgba(29,29,31,.04);
  --r-card:28px;
  --shadow:0 18px 50px rgba(29,29,31,.08);
  --shadow-sm:0 8px 24px rgba(29,29,31,.08),0 1px 2px rgba(29,29,31,.05);
  background:#fff;
}

/* ---------- Type ---------- */
body.home h2{font-weight:700;font-size:clamp(32px,5vw,50px);letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
body.home h3{font-weight:700;letter-spacing:-.025em}
/* The second clause of a two-tone headline: the emphasis, in the orange
   gradient (one emphasis colour per title, so nothing else in it is orange). */
.dim{
  padding-right:.08em;margin-right:-.08em;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .dim{background:none;color:var(--good);-webkit-text-fill-color:currentColor}
}
/* The orange clause on a line of its own. */
.dim-line{display:block;width:fit-content}
@media (forced-colors:active){.dim{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
[data-tone="light"]{background:var(--paper)}
[data-tone="white"]{background:#fff}
body.home .section{padding:clamp(72px,10vw,120px) 0}
/* Phones: less air between sections, so the page is shorter to scroll. */
@media (max-width:600px){body.home .section{padding:56px 0}}

/* ---------- Components ---------- */
/* Icon tile: the hint of colour. */
.tile{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:0 0 52px}
.tile svg{width:24px;height:24px}
.tile-green{background:var(--grad)}
.tile-ink{background:var(--ink)}
.tile-sm{width:28px;height:28px;border-radius:50%;flex-basis:28px}
.tile-sm svg{width:14px;height:14px}

/* Notification chip: white, soft shadow, a round coloured icon. */
.chip{
  display:inline-flex;align-items:center;gap:12px;
  height:50px;padding:0 22px 0 9px;border-radius:999px;
  background:#fff;color:var(--ink);border:1px solid rgba(0,0,0,.05);
  box-shadow:var(--shadow-sm);
  font-size:13.5px;line-height:1.15;white-space:nowrap;
}
.chip-text{display:flex;flex-direction:column;gap:2px;text-align:left}
.chip b{font-weight:600;letter-spacing:-.01em}
.chip small{font-size:12px;color:var(--ink-2);font-weight:500}
.chip-stars{color:#f5c518;letter-spacing:1px}

/* Tag pill. */
.pill{
  display:inline-flex;align-items:center;height:44px;padding:0 19px;border-radius:999px;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s var(--ease);
}
.pill:hover{text-decoration:none;transform:translateY(-2px)}
.pill{background:var(--paper);color:var(--ink)}
.pill:hover{background:#ececf0}
.pill.is-on{background:var(--ink);color:#fff;transform:scale(1.06)}
.pill.is-off{opacity:.35}

/* The round field with the black arrow inside its right end: the free
   page ask, as a link wherever the form is not. */
.gfield{
  display:flex;align-items:center;gap:8px;height:60px;padding:5px 5px 5px 22px;
  border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.gfield:hover{text-decoration:none;border-color:var(--ink)}
.gfield-text{flex:1;min-width:0;font-size:16px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfield-go{
  flex:0 0 50px;width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;
  background:var(--grad);color:#fff;cursor:pointer;transition:transform .2s var(--ease);
}
.gfield-go svg{width:22px;height:22px}
.gfield:hover .gfield-go{transform:translateX(2px)}

/* The placeholder: where a designed asset goes. Dashed, labelled with its
   brief. Delete the element when the asset lands. */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:16px;border:1.5px dashed rgba(29,29,31,.26);border-radius:20px;
  background:rgba(29,29,31,.025);color:var(--ink-2);text-align:center;
  font-size:12.5px;line-height:1.4;
}
.ph-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--good)}

/* Dot, the full stop as a character: the face on a chip wherever it is us
   replying, the sign-off above the closing ask, and beside the wordmark in
   the footer. Its eyes are cut out, so it takes the colour behind it. */
.tile-dot{background:transparent}
.tile-dot .dot{width:28px;height:28px;display:block}
.ce-dot{width:72px;height:72px;margin:0 auto 22px}
.ce-dot .dot{width:100%;height:100%;display:block}
.ft-dot{width:40px;height:40px;flex:0 0 40px}

/* ---------- Motion ---------- */
/* One animation per chip: it floats in once and stays put. The rotation
   a chip carries rides along as --r, since an animated transform replaces
   the base one. */
@keyframes hIn{from{opacity:0;transform:translateY(16px) scale(.96) rotate(var(--r,0deg))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg))}}
@keyframes hPop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes hDots{0%,100%{opacity:.25}40%{opacity:1}}
/* Four seconds a site, one fading in as the last fades out. Every frame
   starts hidden: a screenshot waiting its turn holds the first keyframe,
   and if that were visible the last one in the stack would cover the rest. */
@keyframes hCycle4{0%{opacity:0}3%,25%{opacity:1}28%,100%{opacity:0}}
@keyframes hCycle5{0%{opacity:0}3%,20%{opacity:1}23%,100%{opacity:0}}

/* ---------- Hero ----------
   The "one." block, centred and quiet, then the frame with three chips
   floating round it and the mascot peeking over its edge. */
.hh{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(44px,7vw,80px) 0 0;
  background:linear-gradient(180deg,#fbfbfd 0%,#ffffff 62%);
}
.hh h1{font-size:clamp(76px,17vw,168px);letter-spacing:-.055em;line-height:.9;font-weight:600}
.hh .hero-by{margin:12px 0 0;font-size:12px;font-weight:600;color:var(--ink-3)}
.hh .hero-by span{text-transform:uppercase;letter-spacing:.2em;margin-right:-.2em}
.hh .sub{
  margin:22px auto 0;max-width:30ch;text-wrap:balance;
  font-size:clamp(20px,3.4vw,28px);line-height:1.28;font-weight:500;letter-spacing:-.02em;color:var(--ink);
}
.hh .hero-form{max-width:460px;margin:26px auto 0}
.hh .mini-step{margin-top:0}
.hh .mini-row{
  gap:8px;height:60px;padding:5px 5px 5px 22px;border-radius:999px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.hh .mini-row:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.1)}
.hh .mini-row input{border:0;border-radius:0;padding:0;background:transparent;font-size:16px;height:100%}
.hh .mini-row input:focus{box-shadow:none}
.hh .mini-row input.err{box-shadow:inset 0 -2px 0 #d93025}
.hh .mini-go{flex:0 0 50px;width:50px;height:50px;background:var(--grad)}
.hh .mini-go:hover{box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.hh .mini-step label{text-align:center}


/* The scene. */
.hh-scene{position:relative;width:min(900px,100%);margin:clamp(48px,7vw,76px) auto 0;padding:0 22px}
.hh-frame{
  position:relative;transform:rotate(-1.5deg);transform-origin:50% 100%;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom:0;box-shadow:0 -2px 60px rgba(0,0,0,.09);overflow:hidden;
}
.hh-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:#fbfbfd;border-bottom:1px solid var(--line-soft)}
.hh-bar > i{width:10px;height:10px;border-radius:50%;background:#e3e3e8}
.hh-url{margin-left:10px;flex:1;max-width:360px;height:24px;border-radius:12px;background:#fff;border:1px solid var(--line-soft);font-size:11.5px;color:#86868b;display:flex;align-items:center;padding:0 12px;font-style:normal}
.hh-build{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;
}
.hh-build i{font-style:normal;animation:hDots 1.2s linear infinite}
.hh-build i:nth-child(3){animation-delay:.2s}.hh-build i:nth-child(4){animation-delay:.4s}
.hh-screen{position:relative;aspect-ratio:2/1;background:var(--paper);overflow:hidden}
.hh-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.hh-cycle > img{animation:hCycle4 16s linear infinite both}
.hh-cycle > img:nth-child(2){animation-delay:4s}
.hh-cycle > img:nth-child(3){animation-delay:8s}
.hh-cycle > img:nth-child(4){animation-delay:12s}
/* The phone: five sites, four seconds each, light and dark in turn. */
.hh-cycle-5 > img{animation:hCycle5 20s linear infinite both}
.hh-cycle-5 > img:nth-child(2){animation-delay:4s}
.hh-cycle-5 > img:nth-child(3){animation-delay:8s}
.hh-cycle-5 > img:nth-child(4){animation-delay:12s}
.hh-cycle-5 > img:nth-child(5){animation-delay:16s}
.hh-phone-wrap{display:none}
/* Three chips on dotted leaders, floating; the mascot over the edge. */
.hh-chip{position:absolute;z-index:4;opacity:0;animation:hIn .7s cubic-bezier(.2,.7,.2,1) both}
.hh-chip::after{content:"";position:absolute;left:50%;top:100%;width:0;height:36px;border-left:1.5px dashed rgba(29,29,31,.3)}
.hh-chip-1{left:0;top:-8px;animation-delay:.5s}
.hh-chip-2{right:-6px;top:26%;animation-delay:.8s}
.hh-chip-3{left:8%;top:62%;animation-delay:1.1s}
.hh-chip-3::after{top:auto;bottom:100%}


@media (max-width:600px){
  .hh{padding-top:44px}
  .hh .hero-form{margin-top:22px}
  .hh .mini-row{height:56px}
  .hh .mini-go{width:46px;height:46px;flex-basis:46px}
  /* On a phone the frame is a phone. */
  .hh-scene{padding:0;margin-top:48px;min-height:380px;overflow:visible}
  .hh-frame{display:none}
  .hh-phone-wrap{
    display:block;width:min(260px,66vw);margin:0 auto -41%;aspect-ratio:556/1134;position:relative;
    background:url("assets/iphone-frame.webp") center/100% 100% no-repeat;
    filter:drop-shadow(0 26px 40px rgba(0,0,0,.22));
  }
  .hh-phone-wrap .hh-screen{
    position:absolute;left:5.2%;top:2.2%;right:5.2%;bottom:2.2%;aspect-ratio:auto;
    border-radius:14%/6.45%;background:#000;
  }
  .hh-phone-wrap .hh-screen img{object-fit:contain;padding-top:13%;box-sizing:border-box}
  .hh-chip{height:40px;font-size:12px;padding-right:12px}
  .hh-chip small{font-size:10.5px}
  /* Inside the screen edge, never cut off by it. */
  .hh-chip-1{left:12px;top:30px}
  .hh-chip-2{right:12px;top:auto;bottom:5%}
  .hh-chip-3{display:none}
}

/* ---------- Outcomes carousel ---------- */
.oc{position:relative;overflow:hidden}
/* Sideways only. A horizontal scroller can't let anything spill out of it
   vertically, so overflow-y would compute to auto and the tilted cards would
   make the rail scroll up and down too, catching the page's own scroll. It is
   hidden instead, with room above and below for the tilt and the shadows, and
   vertical swipes pass straight through to the page. */
.oc .rail{
  padding-top:clamp(34px,5vw,52px);padding-bottom:44px;gap:22px;align-items:stretch;
  overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
}
.oc-card{
  flex:0 0 min(370px,82vw);scroll-snap-align:center;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:28px 28px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .4s var(--ease);
}
.oc-card:nth-child(1){transform:rotate(-2deg)}
.oc-card:nth-child(2){transform:rotate(1deg)}
.oc-card:nth-child(3){transform:rotate(-1deg)}
.oc-card:nth-child(4){transform:rotate(2deg)}
.oc-card:hover{transform:rotate(0)}
.oc-card > .tile{background:var(--grad);color:#fff}
.oc-card h3{margin:18px 0 8px;font-size:25px;letter-spacing:-.03em}
.oc-card > p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.oc-chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding-top:26px;position:relative;z-index:2}
.oc-chips .chip{max-width:100%}
.oc-chips .chip:nth-child(1){--r:-2deg;transform:rotate(-2deg);margin-left:4px}
.oc-chips .chip:nth-child(2){--r:1.5deg;transform:rotate(1.5deg);margin-left:30px}
.oc-chips .chip:nth-child(3){--r:-1deg;transform:rotate(-1deg);margin-left:14px}
/* One card at a time. home.js marks the rail .oc-anim (so without script,
   or with reduced motion, the chips simply show), then gives each card
   .chips-in only once that card is actually in view in the rail and the
   rail is on screen. Cards arriving together go in turn, --wait apart. */
.oc-anim .oc-chips .chip{opacity:0}
.oc-anim .oc-card.chips-in .oc-chips .chip{animation:hIn .7s cubic-bezier(.2,.7,.2,1) both}
.oc-anim .oc-card.chips-in .oc-chips .chip:nth-child(1){animation-delay:calc(var(--wait,0s) + .15s)}
.oc-anim .oc-card.chips-in .oc-chips .chip:nth-child(2){animation-delay:calc(var(--wait,0s) + .33s)}
.oc-anim .oc-card.chips-in .oc-chips .chip:nth-child(3){animation-delay:calc(var(--wait,0s) + .51s)}
.oc-nav{margin-top:6px;justify-content:flex-end;padding:0 max(22px,calc((100vw - var(--wrap))/2))}
.oc .rail-btn{width:48px;height:48px;font-size:20px}
@media (max-width:600px){
  .oc-card{flex-basis:min(320px,84vw);padding:24px 22px 26px}
  .oc-card h3{font-size:23px}
  /* Smaller offsets on a phone, so the longest chip keeps its padding
     inside the card. */
  .oc-chips .chip:nth-child(1){margin-left:0}
  .oc-chips .chip:nth-child(2){margin-left:16px}
  .oc-chips .chip:nth-child(3){margin-left:6px}
  .chip{padding-right:18px;gap:10px}
}

/* ---------- How it works ---------- */
.hw-steps{margin-top:clamp(40px,6vw,72px);display:flex;flex-direction:column;gap:clamp(48px,8vw,100px)}
.hw-step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.hw-step:nth-child(even) .hw-text{order:2;text-align:right}
.hw-text h3{margin:0;font-size:clamp(23px,2.6vw,28px)}
.hw-text p{margin:12px 0 0;font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:var(--ink-2);max-width:30ch}
.hw-step:nth-child(even) .hw-text p{margin-left:auto}
/* The tilted UI cards. */
.ui{
  background:#fff;color:var(--ink);border-radius:22px;padding:18px;border:1px solid var(--line-soft);
  box-shadow:var(--shadow);transform:rotate(3deg);transition:transform .5s var(--ease);
}
.hw-step:nth-child(even) .ui{transform:rotate(-3deg)}
.ui:hover{transform:rotate(0)}
.ui-bar{display:flex;align-items:center;gap:6px;margin:-18px -18px 16px;padding:12px 14px;background:#fbfbfd;border-radius:22px 22px 0 0;border-bottom:1px solid var(--line-soft)}
.ui-bar i{width:10px;height:10px;border-radius:50%;background:#e3e3e8}
.ui-title{margin:0 0 12px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ui-input{
  display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:16px;
}
.ui-input svg{width:18px;height:18px;color:var(--ink-3)}
/* An illustration, not a field: grey words and a still, grey cursor tight
   against them, so nobody tries to type in it. */
.ui-input{color:var(--ink-3);border-color:var(--line-soft);background:var(--paper);cursor:default;user-select:none}
.ui-input .type-caret{height:1.05em;width:2px;margin:0 0 0 1px;background:#c7c7cc;animation:none}
.ui-typed{white-space:nowrap}
.ui-typed .type-caret{vertical-align:-.12em}
.ui-sources{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ui-src{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:var(--paper);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.ui-src::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}
.ui-mail{display:flex;gap:14px;align-items:flex-start}
.ui-mail-icon{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center}
.ui-mail-icon svg{width:22px;height:22px}
.ui-mail b{display:block;font-size:16px;letter-spacing:-.02em}
.ui-mail span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.ui-mail-body{display:flex;gap:16px;align-items:flex-end;margin-top:16px}
.ui-mini-phone{
  flex:0 0 112px;width:112px;aspect-ratio:556/1134;position:relative;
  background:url("assets/iphone-frame.webp") center/100% 100% no-repeat;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));margin-bottom:-60px;
}
.ui-mini-phone .hh-screen{position:absolute;left:5.2%;top:2.2%;right:5.2%;bottom:2.2%;aspect-ratio:auto;border-radius:14%/6.45%;background:#fcfcfa}
.ui-mini-phone .hh-screen img{object-fit:contain;padding-top:12%;box-sizing:border-box}
.ui-choices{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.ui-choice{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:600}
.ui-choice-yes{background:var(--good-soft);color:var(--good)}
.ui-choice-no{background:#f1f1f4;color:var(--ink-2);font-weight:500}
.ui-live{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ui-live i{width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.ui-chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:16px 0 16px}
.ui-chips .chip:nth-child(1){transform:rotate(-1.5deg)}
.ui-chips .chip:nth-child(2){transform:rotate(1deg);margin-left:22px}
.ui-note{margin:0;font-size:13px;color:var(--ink-3)}
.hw-more{margin-top:clamp(36px,5vw,56px);text-align:center;font-size:15px}
.hw-more a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){
  .hw-step,.hw-step:nth-child(even){grid-template-columns:1fr;gap:26px}
  .hw-step:nth-child(even) .hw-text{order:0;text-align:left}
  .hw-step:nth-child(even) .hw-text p{margin-left:0}
  .ui,.hw-step:nth-child(even) .ui{transform:rotate(2deg);margin:0 6px}
  .ui-mini-phone{flex-basis:92px;width:92px;margin-bottom:-44px}
}

/* ---------- Any business ---------- */
.ab-card{
  position:relative;overflow:hidden;background:#fff;border-radius:var(--r-card);max-width:820px;margin:0 auto;
  padding:clamp(28px,5vw,56px);box-shadow:var(--shadow);border:1px solid var(--line-soft);
}
.ab-card h2{max-width:16ch}
.ab-card .lede{margin:14px 0 0;max-width:40ch;text-align:left}
.ab-search{
  position:relative;display:flex;align-items:center;gap:12px;height:60px;margin:clamp(26px,4vw,40px) 0 0;
  padding:0 22px;max-width:620px;border-radius:999px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.ab-search:focus-within{border-color:var(--ink)}
.ab-search svg{width:21px;height:21px;color:var(--ink-2);flex:0 0 auto}
.ab-search input{
  flex:1;min-width:0;border:0;background:transparent;font-family:var(--font);font-size:21px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);padding:0;
}
.ab-search input:focus{outline:none}
.ab-search input::placeholder{color:var(--ink-3);font-weight:600}
.ab-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:100%}
.ab-field input{width:100%;height:100%}
/* The typing demo writes into the placeholder, which has no caret of its
   own, so a drawn one follows the text: home.js measures the words in a
   hidden copy set in the same type and moves the caret to their end. Shown
   only while the demo runs; once someone taps in, the real caret takes over. */
.ab-measure{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;pointer-events:none;font:inherit;font-family:var(--font);font-size:21px;font-weight:600;letter-spacing:-.02em}
.ab-search .type-caret{position:absolute;left:0;top:50%;margin:0;width:2px;height:1.15em;background:var(--good);transform:translate(var(--cx,0px),-50%);display:none}
.ab-search.is-typing .type-caret{display:block}
.ab-search.is-typing input::placeholder{color:var(--ink)}
.ab-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:2}
@media (max-width:760px){
  .ab-pills{max-width:none}
}

/* ---------- Promise + five-year ---------- */
.pr .pr-tag{text-align:center;margin-bottom:12px}
.pr-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,40px)}
.pr-item{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:#fff;border:1px solid var(--line-soft);border-radius:22px;padding:20px;
  box-shadow:0 10px 30px rgba(29,29,31,.05);
}
.pr-item .tile{width:42px;height:42px;flex:0 0 42px;border-radius:12px;margin-bottom:8px}
.pr-item .tile svg{width:20px;height:20px}
.pr-item b{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.pr-item > span:not(.tile){font-size:14px;line-height:1.4;color:var(--ink-2)}
@media (max-width:860px){.pr-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:380px){.pr-item{padding:16px}.pr-item b{font-size:15px}}
.pr-card{background:#fff;border-radius:var(--r-card);border:1px solid var(--line-soft);padding:clamp(24px,3.5vw,36px);box-shadow:0 12px 40px rgba(0,0,0,.05)}
.pr-card h3{margin:0;font-size:clamp(22px,2.8vw,30px);letter-spacing:-.03em;text-wrap:balance}
.pr-tag{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--good)}
.rows{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rows li{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 14px;border-radius:999px;
  font-size:14.5px;line-height:1.3;font-weight:500;
}
.rows li i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.rows-good li{background:var(--good-soft);color:#9a3412}
.rows-good li i{background:var(--good);color:#fff}
.rows-bad li{background:var(--paper);color:var(--ink-2)}
.rows-bad li i{background:#d1d1d6;color:#fff}
.fy-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.fy-cols h4{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fy-cols .rows{margin-top:8px}
.fy-sum{margin:22px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.fy-sum strong{color:var(--ink)}
.fy-sum a{display:inline-block;margin-top:8px;font-weight:600;color:var(--good);text-decoration:underline;text-underline-offset:3px}
body.home .cmp-dialog .pr-card{border:0;box-shadow:none;padding:clamp(20px,3vw,30px) clamp(24px,4vw,36px)}
body.home .cmp-dialog .fy-sum a{display:none}
@media (max-width:520px){.fy-cols{grid-template-columns:1fr}.rows li{font-size:14px;padding:8px 12px}}

/* ---------- Plans ---------- */
body.home .plans{margin-top:clamp(36px,5vw,56px)}
body.home .plan{border-radius:var(--r-card);padding:34px 28px 30px;border-color:var(--line-soft)}
body.home .plan.featured{border-color:var(--ink);box-shadow:0 20px 50px rgba(29,29,31,.09);padding-top:34px}
body.home .plan:hover{box-shadow:0 24px 60px rgba(29,29,31,.1)}
body.home .plan .badge{
  position:static;transform:none;display:inline-flex;margin:0 0 12px;
  font-size:12px;font-weight:700;letter-spacing:.02em;padding:7px 13px;
}
body.home .badge-green{background:var(--grad-deep)}
body.home .price{font-size:54px;font-weight:700;letter-spacing:-.045em;margin-top:12px}
body.home .plan .btn{height:auto;min-height:var(--btn-h,48px);font-weight:600}
body.home .plan-note{min-height:0}
/* The toggle: ink pill, white knob. */
body.home .bill-toggle{background:var(--ink);border-color:var(--ink);padding:4px}
body.home .bill-opt{color:#b8b8c2}
body.home .bill-opt.is-on{color:var(--ink)}
body.home .bill-save{background:var(--good);color:#fff}
body.home .bill-opt.is-on .bill-save{background:var(--good-soft);color:var(--good)}
/* The Boost stays in the accent: everything in it is free with an annual plan. */
body.home .boost{border-radius:var(--r-card);max-width:none;display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(16px,3vw,36px);align-items:start;padding:clamp(26px,4vw,40px)}
body.home .boost h3{font-size:clamp(22px,2.8vw,28px);letter-spacing:-.03em;margin-bottom:8px}
body.home .boost .ticks{margin:0}
@media (max-width:760px){body.home .boost{grid-template-columns:1fr}}
body.home .boost-line{display:block;max-width:960px;margin:22px auto 0;padding:18px 26px;border-radius:22px;text-align:center}
body.home .boost-line p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
body.home .boost-line strong{color:var(--good);font-weight:700}
.plan-cmp{margin-top:6px}
.plan-cmp a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

/* Starter, the one plan sold: a wide card, the price on the left and the
   ticks on the right. */
body.home .plan-wide{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,48px);align-items:start;max-width:960px;margin:clamp(32px,5vw,48px) auto 0;padding:clamp(28px,4vw,40px)}
body.home .plan-wide .btn{max-width:320px}
body.home .plan-wide-ticks{margin:6px 0 0;padding-top:0}
body.home .plan-wide-ticks li{font-size:16px;margin-bottom:14px}
@media (max-width:760px){body.home .plan-wide{grid-template-columns:1fr;gap:10px}body.home .plan-wide .btn{max-width:none}}

/* The upgrades: Business under the plan, Max at the foot. */
.up-card{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:clamp(28px,4vw,48px);
}
.up-tag{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.up-text h2{font-size:clamp(30px,4.2vw,42px)}
.up-text .lede{margin:12px 0 0;text-align:left;max-width:36ch}
.up-text .price{margin-top:18px;font-size:44px}
.up-text .btn{margin-top:16px}
.up-text .max-pick{margin:16px 0 0;max-width:320px}
.up-text .plan-up{margin-top:14px}
.up-side .ticks{margin:0}
.up-side .ticks li{font-size:15.5px}
.up-chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0}
.up-chips .chip:nth-child(2){margin-left:34px}
.up-chips .chip:nth-child(3){margin-left:14px}
@media (max-width:600px){.up-chips .chip:nth-child(2){margin-left:18px}.up-chips .chip:nth-child(3){margin-left:6px}}
.up-chips .chip:nth-child(1){transform:rotate(-2deg)}
.up-chips .chip:nth-child(2){transform:rotate(1.5deg)}
.up-chips .chip:nth-child(3){transform:rotate(-1deg)}
@media (max-width:760px){.up-card{grid-template-columns:1fr;gap:22px}}

/* ---------- Reviews ---------- */
body.home .quote{border-radius:var(--r-card);box-shadow:0 10px 30px rgba(29,29,31,.05);border:1px solid var(--line-soft)}
body.home .stars{color:#f5c518;font-size:16px}
body.home .quote blockquote{font-size:17px;line-height:1.5}
body.home .avatar{width:44px;height:44px;flex-basis:44px;border-radius:14px;font-weight:600}
body.home .av1,body.home .av3,body.home .av5{background:var(--ink)}body.home .av2,body.home .av4{background:var(--grad)}
body.home .rail-btn{width:48px;height:48px;font-size:20px}
body.home .rail-more a{text-decoration:underline;text-underline-offset:4px}

/* ---------- FAQ ---------- */
body.home .faq{max-width:760px;display:flex;flex-direction:column;gap:10px}
body.home .faq details{border:1px solid var(--line-soft);border-radius:20px;background:#fff;padding:0 22px;transition:box-shadow .3s var(--ease)}
body.home .faq details:first-child{border-top:1px solid var(--line-soft)}
body.home .faq details[open]{box-shadow:0 14px 40px rgba(29,29,31,.06)}
body.home .faq summary{padding:20px 52px 20px 0;font-size:17.5px;font-weight:600}
body.home .faq summary::after{
  width:32px;height:32px;right:0;top:50%;border:1px solid var(--line);border-radius:50%;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
body.home .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
body.home .faq summary:hover{color:var(--ink)}
body.home .faq summary:hover::after{background-color:var(--paper)}
body.home .ans{margin:0 -22px;padding:4px 22px 20px;background:none;border-radius:0 0 20px 20px}
body.home .faq .ask{margin-top:18px;text-align:center}

/* ---------- Closing ask ---------- */
.ce{position:relative;overflow:hidden;text-align:center}
.ce .gfield{max-width:480px;margin:30px auto 0;text-align:left}
.ce-chips{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:34px auto 0}
.ce-chips .chip{opacity:0}
.ce-chips .chip:nth-child(1){--r:-3deg;transform:rotate(-3deg)}
.ce-chips .chip:nth-child(2){--r:2deg;transform:rotate(2deg)}
.ce-chips .chip:nth-child(3){--r:-1.5deg;transform:rotate(-1.5deg)}
.ce-chips.in .chip{animation:hIn .7s cubic-bezier(.2,.7,.2,1) both}
.ce-chips.in .chip:nth-child(1){animation-delay:.5s}
.ce-chips.in .chip:nth-child(2){animation-delay:.68s}
.ce-chips.in .chip:nth-child(3){animation-delay:.86s}

/* ---------- Footer ---------- */
body.home .foot{border-top:0;padding-top:clamp(48px,7vw,72px)}
.ft-top{display:flex;align-items:center;gap:12px}
.ft-top .foot-logo{line-height:1}
.ft-top .foot-by{margin:0}
.ft-tag{margin:22px 0 0;max-width:34ch;font-size:clamp(17px,2vw,19px);line-height:1.4;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.ft-field{max-width:480px;margin:20px 0 0;height:56px;padding:5px 5px 5px 20px}
.ft-field .gfield-go{width:46px;height:46px;flex-basis:46px}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:clamp(36px,5vw,56px) 0 0}
.ft-col h4{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ft-col a,.ft-col .linkish-foot{display:block;font-size:16px;color:var(--ink);padding:7px 0;line-height:1.3;text-align:left}
.ft-col a:hover,.ft-col .linkish-foot:hover{text-decoration:none;color:var(--ink-2)}
.ft-rule{border:0;border-top:1px solid var(--line-soft);margin:clamp(32px,5vw,48px) 0 20px}
body.home .foot-legal{font-size:12.5px;max-width:80ch}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:22px;font-size:13.5px;color:var(--ink-2)}
.ft-bottom .foot-copy{margin:0;font-size:13.5px;color:var(--ink-2)}
.ft-made{margin:4px 0 0;font-size:13.5px}
.ft-status{display:inline-flex;align-items:center;gap:8px}
.ft-status{font-weight:500;color:var(--ink)}
/* A status light: a steady accent dot with a soft ring pulsing out from it. */
.ft-status i{position:relative;width:9px;height:9px;border-radius:50%;background:#ff4f12;flex:0 0 9px}
.ft-status i::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#ff4f12;
  animation:statusPulse 2s ease-out infinite;
}
@keyframes statusPulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.ft-status i::after{animation:none;opacity:0}.ft-status i{box-shadow:0 0 0 3px var(--good-soft)}}
@media (max-width:760px){.ft-cols{grid-template-columns:1fr 1fr;gap:22px}}
@media (max-width:420px){.ft-cols{grid-template-columns:1fr}}

/* ---------- Reduced motion: everything still, first frame shown ---------- */
@media (prefers-reduced-motion:reduce){
  .hh-chip,.oc-chips .chip,.oc-anim .oc-chips .chip,.oc-anim .oc-card.chips-in .oc-chips .chip,.ce-chips .chip,.ce-chips.in .chip{animation:none;opacity:1}
  .hh-cycle > img,.hh-cycle-5 > img{animation:none;opacity:0}
  .hh-cycle > img:first-child,.hh-cycle-5 > img:first-child{opacity:1}
  .hh-build i{animation:none}
  .hh-frame,.oc-card,.oc-card:hover,.ui,.hw-step:nth-child(even) .ui{transform:none}
  .pill:hover{transform:none;transition:none}
}

/* The example sites in the phones: screenshots made to the phone's shape
   (assets/examples/phone/), so they fill the screen under the notch. */
.hh-screen img.hh-ex{object-fit:cover;object-position:top;padding-top:11%;box-sizing:border-box}

/* A way in at the end of every section, so nobody has to scroll back up
   to the hero to start. Same button, different words. */
.sec-cta{margin-top:34px;display:flex;flex-direction:column;align-items:center}
.sec-cta .btn{min-width:min(280px,100%);gap:6px}
.sec-cta-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.micro + .sec-cta,.hw-more + .sec-cta,.rail-more + .sec-cta{margin-top:20px}

/* ============================================================
   The membership homepage (mh-): the clubs offer, in the site's own
   design. The hero follows the academy's layout: who's behind it, what's
   open now, a two-line promise with the offer in grey, one big button.
   ============================================================ */
.mh{padding:clamp(40px,7vw,72px) 0 0;text-align:center}
.mh-proof{display:flex;flex-direction:column;align-items:center;gap:12px}
.mh-faces{display:flex;gap:6px}
.mh-faces span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--neon);box-shadow:0 4px 14px rgba(0,0,0,.16)}
.mh-faces svg{width:20px;height:20px}
.mh-proof-t{margin:0;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.55}
.mh-proof-t b{color:var(--ink);font-weight:700}
.mh-now{display:inline-flex;align-items:center;gap:9px;margin:26px 0 0;font-size:15px;color:var(--ink-2)}
.mh-now i{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.mh h1{margin:16px auto 0;max-width:14ch;font-size:clamp(44px,8.4vw,88px);line-height:1.02;letter-spacing:-.045em;font-weight:700;text-wrap:balance}
@media (min-width:900px){.mh h1{max-width:none;font-size:clamp(56px,5.6vw,76px)}}
.mh h1 .mh-off{display:block;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mh .sub{max-width:600px;margin:22px auto 0;font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--ink-2)}
.mh-cta{max-width:430px;margin:30px auto 0}
.mh-cta .btn{width:100%;min-height:var(--btn-h-xl,56px);font-size:17px;justify-content:center}
.mh-note{margin:12px 0 0;font-size:14px;color:var(--ink-3)}
.mh-in{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
/* /trades: the free calculator as its own line under the main button. */
.mh-free{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0 0;padding:13px 18px;border-radius:999px;background:var(--good-soft);color:var(--good);font-size:16px;font-weight:600;text-decoration:none}
.mh-free b{font-weight:800}.mh-free span{font-size:20px;line-height:1}
.mh-in a{color:var(--ink);font-weight:600}
.mh .hh-scene{margin-top:clamp(44px,6vw,68px)}
.mh .hh-screen > img{animation:none}

/* The academy's numbers, on black. */
.mh-results{border-radius:var(--radius-lg);background:var(--ink);color:#fff;padding:36px 22px;text-align:center}
.mh-results-tag{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--good-dark);text-wrap:balance}
.mh-results-row{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 12px;margin:28px 0 24px}
@media (min-width:760px){.mh-results-row{grid-template-columns:repeat(4,1fr)}.mh-results{padding:52px 40px}}
.mh-results-n{margin:0;font-size:clamp(40px,6vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1}
.mh-results-t{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.7)}
.mh-results-foot{margin:0 auto;max-width:620px;font-size:14px;color:rgba(255,255,255,.55)}

/* Empty spaces, in money. */
.mh-calc{max-width:760px;margin:clamp(28px,4vw,40px) auto 0;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:30px 22px}
@media (min-width:700px){.mh-calc{padding:44px}}
.mh-calc-in{display:grid;gap:16px;text-align:left}
@media (min-width:600px){.mh-calc-in{grid-template-columns:1fr 1fr}}
.mh-field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.mh-field input,.mh-field select{width:100%;min-height:var(--field-h,48px);padding:0 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.mh-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.mh-field input:focus,.mh-field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.1)}
.mh-money{position:relative}
.mh-money span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-2)}
.mh-money input{padding-left:32px}
.mh-calc-out{margin-top:28px;padding-top:28px;border-top:1px solid var(--line-soft);text-align:center}
.mh-calc-big{margin:0;font-size:clamp(42px,7vw,62px);font-weight:700;letter-spacing:-.04em;line-height:1}
.mh-calc-sub{margin:10px 0 0;color:var(--ink-2)}
.mh-calc-cover{display:inline-block;margin:22px 0 0;padding:12px 18px;border-radius:999px;background:var(--good-soft);color:var(--good);font-weight:600}

/* The offer: the price card's two roads from month four. */
.mh-included{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:12px 16px;border-radius:14px;background:var(--good-soft);color:var(--good);font-weight:700;font-size:15px}
.mh-included svg{width:20px;height:20px;flex:0 0 20px}
.mh-choice{display:grid;gap:14px;margin-top:18px}
@media (min-width:700px){.mh-choice{grid-template-columns:1fr 1fr}}
.mh-choice article{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px 22px}
.mh-choice .mh-opt{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mh-choice h3{margin:0 0 8px;font-size:19px}
.mh-choice p{margin:0;color:var(--ink-2);font-size:15.5px}
.mh-month4{margin:clamp(30px,4vw,44px) 0 0;text-align:center;font-size:19px;font-weight:600}
.mh-full{margin:14px 0 0;text-align:center;color:var(--ink-2)}
.mh-full b{color:var(--ink)}
.mh-promise{display:flex;gap:12px;align-items:flex-start;max-width:600px;margin:28px auto 0;padding:18px 20px;border-radius:var(--radius);background:#fff;border:1px solid var(--line-soft);text-align:left;font-size:16px}
.mh-promise svg{flex:0 0 24px;width:24px;height:24px;color:var(--good)}

/* What it would cost separately. */
.mh-compare{max-width:760px;margin:clamp(28px,4vw,40px) auto 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);background:#fff}
.mh-compare div{display:flex;justify-content:space-between;gap:16px;padding:17px 22px;font-size:16px;text-align:left}
.mh-compare div+div{border-top:1px solid var(--line-soft)}
.mh-compare span:last-child{color:var(--ink-2);text-align:right;white-space:nowrap}
.mh-compare .us{background:var(--ink);color:#fff;font-weight:700;border-top:0}
.mh-compare .us span:last-child{color:var(--good-dark)}
@media (max-width:480px){.mh-compare div{flex-direction:column;gap:2px}.mh-compare span:last-child{text-align:left;white-space:normal}}

/* Since 2017. */
.mh-moments{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.mh-moments span{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line-soft);font-size:15px;font-weight:600}

/* Book a demo. */
.mh-demo{display:grid;gap:40px;align-items:start;text-align:left}
@media (min-width:900px){.mh-demo{grid-template-columns:.9fr 1.1fr;gap:56px}}
.mh-demo h2{text-align:left}
.mh-demo .lede{margin-left:0;text-align:left}
.mh-form{display:grid;gap:16px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:28px 22px}
@media (min-width:600px){.mh-form{padding:36px;grid-template-columns:1fr 1fr}.mh-form .wide{grid-column:1/-1}}
.mh-form .btn{width:100%;justify-content:center;min-height:var(--btn-h-xl,56px)}
.mh-form .note{margin:0;font-size:15px}
.mh-form .note.bad{color:#c4311c}
.mh-done{text-align:center;padding:32px 12px}
.mh-done .tile{margin:0 auto 14px}
.mh-done p{color:var(--ink-2)}
.mh-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Hero: the reviews line, and what takes the risk away. */
.mh-stars{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:2px 0 0;font-size:14.5px;color:var(--ink-2)}
.mh-star-row{display:inline-flex;gap:2px}
.mh-star-row svg{width:17px;height:17px;fill:#f5b301}
.mh-risk{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:640px;margin:26px auto 0;padding:0}
.mh-risk li{display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:600;color:var(--ink)}
.mh-risk svg{width:18px;height:18px;flex:0 0 18px;color:var(--good)}
/* In the hero's copy column, the three promises read as one list. */
.mh-copy .mh-risk{flex-direction:column;align-items:flex-start;gap:10px}
.mh .mh-cta{margin-top:26px}
@media (max-width:600px){.mh-risk{flex-direction:column;align-items:flex-start;gap:10px;width:fit-content}.mh .hh-phone-wrap{margin-bottom:0}.mh .hh-scene{min-height:0}}

/* The calculator, as two sliders. */
.mh-spaces{padding-top:clamp(64px,8vw,96px)}
.mh-slide{text-align:left}
.mh-slide + .mh-slide{margin-top:26px}
.mh-slide-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.mh-slide-top label{font-size:15px;font-weight:600;color:var(--ink-2)}
.mh-slide-top output{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mh-range{--p:20%;-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:pointer}
.mh-range:focus{outline:none}
.mh-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--good) var(--p),#e3e3e8 var(--p))}
.mh-range::-moz-range-track{height:8px;border-radius:999px;background:#e3e3e8}
.mh-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--good)}
.mh-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06)}
.mh-range::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.06)}
.mh-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(194,65,12,.3),0 2px 8px rgba(0,0,0,.22)}
.mh-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(194,65,12,.3),0 2px 8px rgba(0,0,0,.22)}
.mh-spaces .sec-cta{margin-top:30px}

/* ---------- Neon orange, everywhere on this page ----------
   The wordmark dot and the free-word gradient live in styles.css in green;
   on the homepage they take the neon orange. */
body.home .wm-dot{background:none;color:var(--neon);-webkit-text-fill-color:var(--neon)}
body.home .g-free{background:none;color:var(--neon);-webkit-text-fill-color:var(--neon)}
/* Phones: the headline sized to sit on two lines, never leaving "back." alone. */
@media (max-width:600px){.mh h1{max-width:none;font-size:clamp(32px,calc((100vw - 44px) / 9.3),44px)}}
/* The plan's lead features in bold ink, with the accent kept to the ticks. */
body.home .plan-wide-ticks li.tick-hero{color:var(--ink)}
#understand .dim-line,#one .dim-line,#results .dim-line{margin-inline:auto}

/* Neon marks: the non-text accents in the bright shade, with a soft glow
   on the solid pieces so they read as lit. */
body.home .tile-green{box-shadow:0 6px 18px rgba(0,0,0,.16)}
body.home .badge-green{box-shadow:0 4px 14px rgba(0,0,0,.16)}
body.home .ticks li::before{border-color:var(--neon)}
body.home .mh-risk svg,body.home .mh-promise svg,body.home .mh-included svg{color:var(--neon)}
body.home .ui-live i,body.home .mh-now i{background:var(--neon);box-shadow:0 0 0 4px var(--good-soft)}
body.home .ab-search .type-caret{background:var(--neon)}
body.home .rows-good li i{background:var(--neon)}
body.home .mh-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--neon) var(--p),#e3e3e8 var(--p))}
body.home .mh-range::-moz-range-progress{background:var(--neon)}
body.home .mh-results-tag{text-shadow:none}

/* Cards in the flat warm tint. */
body.home .oc-card,body.home .ui,body.home .ab-card,body.home .pr-item,body.home .up-card,
body.home .mh-calc,body.home .mh-choice article,body.home .mh-promise,body.home .mh-compare,
body.home .mh-form,body.home .plan,body.home .faq details,body.home .mh-moments span{
  background:var(--glass);border:0;box-shadow:var(--glass-shadow);
  /* Grey text a step darker on the warm tint, so it still reads at AA. */
  --ink-2:#55555a;--ink-3:#6e6e73;
}
body.home .plan.featured{box-shadow:var(--glass-shadow),0 0 0 1.5px rgba(255,79,18,.35)}
body.home .ui-bar{background:rgba(255,255,255,.55);border-bottom-color:rgba(255,79,18,.12)}
body.home .mh-compare > *{border-color:rgba(255,79,18,.12)}
body.home .faq details:first-child{border-top:0}
body.home .faq details[open]{box-shadow:var(--glass-shadow),0 14px 40px rgba(0,0,0,0.06)}

/* ---------- Free growth plan ---------- */
.mh-kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--good)}
.mh-plan-lede{margin:14px auto 0;max-width:34ch}
.mh-plan-go{width:100%;justify-content:center;min-height:var(--btn-h-xl,56px);margin-top:26px}
.mh-plan-form{display:grid;gap:16px;text-align:left}
@media (min-width:600px){.mh-plan-form{grid-template-columns:1fr 1fr}.mh-plan-form .wide,.mh-plan-form .mh-plan-step{grid-column:1/-1}}
.mh-plan-step{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.mh-plan-form .btn{width:100%;justify-content:center;min-height:var(--btn-h-xl,56px)}
.mh-plan-form .note{margin:0;font-size:15px}
.mh-plan-form .note:empty{display:none}
.mh-plan-form .note.bad{color:#c4311c}
.mh-plan-back{justify-self:center;background:none;border:0;padding:6px;font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);cursor:pointer}
.mh-plan-back:hover{color:var(--ink)}

.mh-dialog-lede{margin:12px 0 0;font-size:17px;color:#55555a}
.mh-plan-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 0}
.mh-plan-stats div{padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,79,18,.12);text-align:center}
.mh-plan-stats b{display:block;font-size:clamp(18px,3.6vw,22px);letter-spacing:-.02em}
.mh-plan-stats span{display:block;margin-top:2px;font-size:12.5px;color:#55555a}
.mh-plan-steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:step;display:grid;gap:12px}
.mh-plan-steps li{position:relative;padding-left:38px;font-size:15.5px;line-height:1.45;color:#55555a;counter-increment:step}
.mh-plan-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--neon);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.16)}
.mh-plan-steps b{color:var(--ink)}
.mh-plan-rec{margin:22px 0 0;padding:16px 18px;border-radius:18px;background:var(--good-soft)}
.mh-plan-rec p{margin:0;font-size:15px;color:#55555a}
.mh-plan-rec .mh-plan-rec-t{margin-bottom:6px;font-size:16.5px;color:var(--ink)}
.mh-plan-rec .ticks{margin:10px 0 0}
.mh-plan-rec .ticks li{font-size:15px}
.mh-save{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;background:var(--good);color:#fff;font-size:12px;font-weight:700;vertical-align:2px}
.mh-dialog-cta{display:grid;gap:10px;margin:20px 0 0}
@media (min-width:520px){.mh-dialog-cta{grid-template-columns:1fr 1fr}}
.mh-dialog-cta .btn{width:100%;justify-content:center;min-height:var(--btn-h-xl,56px)}
.mh-dialog-small{margin:14px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
.mh-calc-pre{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ink-2)}
.mh-calc-out .mh-calc-big{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}
.mh-calc-out .mh-calc-sub{margin-top:8px;font-size:19px;font-weight:600;color:var(--ink)}
.mh-calc-full{margin:14px 0 0;font-size:14px;color:var(--ink-3)}
#plan .dim-line{margin-inline:auto}

/* ---------- Free check pages (/check, /your-plan) ---------- */
.mh-page{padding:clamp(36px,7vw,72px) 0 clamp(56px,8vw,96px);background:#fff;text-align:left}
.mh-page-wrap{max-width:680px}
.mh-page-h{margin:0;font-size:clamp(32px,6vw,50px);font-weight:700;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.mh-page-h .dim{display:inline}
.mh-page-sub{margin:14px 0 0;font-size:18px;line-height:1.5;color:#55555a}
.mh-numbers{margin:26px 0 0;padding:20px 20px 16px;border-radius:24px;background:var(--glass);box-shadow:var(--glass-shadow)}
.mh-numbers-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.mh-numbers-row b{display:block;font-size:clamp(24px,5vw,32px);letter-spacing:-.03em}
.mh-numbers-row span{display:block;font-size:13px;color:#55555a}
.mh-numbers-line{margin:16px 0 0;font-size:16.5px;line-height:1.5;text-align:center;color:var(--ink)}
.mh-numbers-line b{color:var(--good)}
.mh-numbers-edit{display:block;margin:10px 0 0;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none}
.mh-numbers-edit:hover{color:var(--ink)}
.page-check .mh-plan-form.mh-calc{max-width:none;margin:16px 0 0;padding:26px 22px}
@media (min-width:600px){.page-check .mh-plan-form.mh-calc{padding:32px}}
.mh-plan-small{margin:0;text-align:center;font-size:13.5px;color:var(--ink-3)}
.page-plan .mh-plan-steps.mh-calc{max-width:none;margin:20px 0 0;padding:24px 22px}
.mh-calc-left{margin:0 0 18px;font-size:18px;color:var(--ink)}
.mh-calc-left b{color:var(--good)}
.mh-page-foot{padding:22px 0 30px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-3)}
.mh-page-foot p{margin:0}
.mh-page-foot a{color:inherit}
.mh-page-foot .wrap{max-width:680px}
/* The value beside each slider: tap it and type, for an exact number. */
.mh-num{display:inline-flex;align-items:baseline;gap:1px;flex:0 0 auto;padding:2px 10px 2px 8px;border-radius:12px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,79,18,.18);cursor:text}
.mh-num:focus-within{box-shadow:inset 0 0 0 2px var(--neon)}
.mh-num-pre{font-size:22px;font-weight:700;color:var(--ink)}
.mh-num input{width:4ch;min-width:2ch;border:0;padding:0;background:none;font:inherit;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.mh-num input::-webkit-outer-spin-button,.mh-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mh-num input:focus{outline:none}
.mh-slide-top{align-items:center}
/* The promises, stacked under the plan. */
.mh-promises{max-width:760px;margin:30px auto 0}
.mh-promises-t{margin:0 0 12px;text-align:center;font-size:17px;font-weight:700;color:var(--ink)}
.mh-promise-list{display:grid;gap:12px}
@media (min-width:760px){.mh-promise-list{grid-template-columns:repeat(3,1fr)}}
.mh-promise-list div{padding:20px 20px 18px;border-radius:var(--radius);background:var(--glass);box-shadow:var(--glass-shadow);text-align:left}
.mh-promise-list b{display:block;margin-bottom:6px;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)}
.mh-promise-list b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--neon);box-shadow:none;vertical-align:1px}
.mh-promise-list span{display:block;font-size:15px;line-height:1.45;color:#55555a}
.mh-compare .sum{font-weight:700;background:rgba(255,79,18,.06)}
.mh-compare .sum span:last-child{color:var(--ink);white-space:normal}
/* Design pass: the plan's list in one weight, promises as wide as the
   options above them, and a little air before a button's arrow. */
body.home .plan-wide-ticks li,body.home .plan-wide-ticks li.tick-hero{color:var(--ink);font-weight:500}
.mh-promises{max-width:none}
body.home .btn > span[aria-hidden="true"]{margin-left:.35em}
body.home .plan-wide .btn{justify-content:center}
/* Hero trust: one quiet pill, stars and where they come from. */
.mh-trust{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px 8px 12px;border-radius:999px;background:var(--glass);font-size:14.5px;color:var(--ink-2)}
.mh-trust b{color:var(--ink);font-weight:700}
.mh-trust .mh-star-row{display:inline-flex;gap:2px}
.mh-trust .mh-star-row svg{width:15px;height:15px}
@media (max-width:420px){.mh-trust{font-size:13px;gap:8px;padding:7px 12px 7px 10px}.mh-trust .mh-star-row svg{width:13px;height:13px}}
/* The main button: the orange, as a gradient, lit. Deep enough at both
   ends for white text. */
body.home .btn-primary{background:linear-gradient(135deg,#c93e09 0%,#ef4a10 100%);color:#fff}
body.home .btn-primary:hover{background:linear-gradient(135deg,#b63807 0%,#de440e 100%)}
body.home .btn-primary:focus-visible{outline:3px solid rgba(255,79,18,.45);outline-offset:3px}
@media (max-width:420px){.mh-trust-long{display:none}}
/* Just the stars. */
.mh-trust-stars{padding:0;background:none}
.mh-trust-stars .mh-star-row{gap:4px}
.mh-trust-stars .mh-star-row svg{width:22px;height:22px}
/* The (i) beside a tick, and the note it opens. */
.mh-info{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;padding:0;border:0;border-radius:50%;background:var(--good-soft);color:var(--good);font:italic 700 12px/1 Georgia,serif;cursor:pointer;vertical-align:2px}
.mh-info:hover,.mh-info[aria-expanded="true"]{background:var(--good);color:#fff}
.mh-info:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.mh-info-note{max-width:440px;margin:12px auto 0;padding:12px 16px;border-radius:14px;background:var(--glass);box-shadow:var(--glass-shadow);font-size:14.5px;line-height:1.45;color:#55555a;text-align:left}
/* Room under the hero mock-up: the tilted frame and the phone sit fully
   on white, with the same air below them as above, and the chips lose
   the dashed leaders that hung into the next section. */
.mh{padding-bottom:clamp(48px,6vw,80px)}
.mh .hh-scene{margin-top:clamp(40px,5vw,56px)}
.mh .hh-chip::after{display:none}
@media (max-width:600px){.mh{padding-bottom:48px}.mh .hh-scene{margin-top:40px}}

/* Trades and salons, pointed to their own One under the members list. */
.ab-more{margin:20px 0 0;max-width:52ch;font-size:15px;line-height:1.5;color:var(--ink-2);text-align:left;position:relative;z-index:2}
.ab-more a{color:var(--good);font-weight:600}

/* ---------- Everything included ---------- */
.ev{margin:0 auto clamp(64px,9vw,104px)}
.ev .lede{margin:14px auto 0;max-width:40ch}
.ev-grid{columns:3 280px;column-gap:16px;margin-top:clamp(28px,4vw,40px);text-align:left}
.ev-card{display:inline-block;width:100%;break-inside:avoid;margin:0 0 16px;padding:24px 24px 16px;border-radius:var(--radius-lg)}
.ev-card h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.ev-card .ticks{margin-top:14px}
.ev-card .ticks li{margin:0 0 11px;font-size:15px;line-height:1.4;color:var(--ink)}
.ev-card .ticks li b{font-weight:600}
.ev-card .ticks li.tick-hero{color:var(--ink)}
.ev-card .ticks li.tick-hero b{color:var(--good)}
.ev-card .ticks li span{display:block;margin-top:2px;font-weight:400;font-size:14px;color:var(--ink-3)}
.ev-cta{margin-top:clamp(28px,4vw,36px)}
.ev-then{margin-top:0}
body.home .ev-card{background:var(--glass);border:0;box-shadow:var(--glass-shadow);--ink-2:#55555a;--ink-3:#6e6e73}
@media (max-width:560px){.mh-compare span:last-child{white-space:normal}}
.ev-link{display:block;margin-top:14px;text-align:center;font-size:15px;font-weight:600;color:var(--good)}
.ev-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- The three struggles, then One's fix for each ---------- */
.pr-strip.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.pr-strip.three{grid-template-columns:1fr}}
.fx-lede{margin:16px auto 0;max-width:46ch}
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,40px)}
@media (max-width:860px){.fx-grid{grid-template-columns:1fr}}
.fx-card{padding:26px 24px;border-radius:var(--radius-lg);text-align:left}
.fx-tag{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--good)}
.fx-card h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.fx-card p:last-child{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.fx-steps-h{margin:clamp(44px,6vw,64px) 0 0;text-align:center;font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em}
.fx-steps{list-style:none;margin:22px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px}
@media (max-width:860px){.fx-steps{grid-template-columns:1fr;max-width:560px}}
.fx-steps li{display:flex;gap:14px;align-items:flex-start;text-align:left}
.fx-n{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#c93e09,#ff4f12);box-shadow:0 6px 16px var(--neon-glow,rgba(255,79,18,.3))}
.fx-steps b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.fx-steps li span:not(.fx-n){display:block;margin-top:4px;font-size:15px;line-height:1.45;color:var(--ink-2)}
body.home .fx-card{background:var(--glass);border:0;box-shadow:var(--glass-shadow);--ink-2:#55555a;--ink-3:#6e6e73}

/* ---------- Solid cards ----------
   The content cards in the deep orange with white type; every other panel
   in plain white, so no pale orange is left. White on #c93e09 is 4.9:1. */
body.home .oc-card,body.home .ui,body.home .ab-card,body.home .up-card,
body.home .mh-calc,body.home .mh-choice article,body.home .mh-promise,body.home .mh-compare,
body.home .mh-form,body.home .plan,body.home .faq details,body.home .mh-moments span{background:#fff}
body.home .mh-compare .sum{background:#f5f5f7}
body.home .pr-item,body.home .fx-card,body.home .ev-card{
  background:#c93e09;box-shadow:0 18px 40px -22px rgba(0,0,0,0.18);
  --ink:#fff;--ink-2:rgba(255,255,255,.88);--ink-3:rgba(255,255,255,.78);color:#fff;
}
body.home .pr-item b,body.home .fx-card h3,body.home .ev-card h3{color:#fff}
body.home .pr-item .tile{background:#fff;color:#c93e09;box-shadow:none}
body.home .fx-tag{color:#ffd9c7}
body.home .ev-card .ticks li,body.home .ev-card .ticks li.tick-hero,body.home .ev-card .ticks li.tick-hero b{color:#fff}
body.home .ev-card .ticks li::before,body.home .ev-card .ticks li.tick-hero::before{border-color:#fff}
body.home .mh-calc-cover{background:none;color:#c93e09;padding:0 6px;font-weight:700}
body.home .mh-info-note{background:#f5f5f7}

/* ---------- Hero proof: the founder ---------- */
.mh-founder{display:inline-flex;align-items:center;gap:10px;margin:0;padding:5px 14px 5px 5px;border-radius:999px;background:#f5f5f7;font-size:14px;line-height:1.3;color:#55555a;text-align:left}
.mh-founder img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px}
.mh-founder b{color:var(--ink);font-weight:600}
.mh-in a[data-chat-open]{color:var(--good);font-weight:600}

/* ---------- Inside the app: a dark band in the app's own theme ---------- */
.ap{background:#08080a;color:#f5f5f2}
.ap h2,.ap .lede{color:#f5f5f2}.ap .lede{opacity:.75}.ap .pr-tag{color:#ff7a3d}
.ap .dim{color:#ff7a3d}
#app .dim-line{margin-inline:auto}
.ap-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:clamp(32px,5vw,48px);max-width:960px}
@media (max-width:860px){.ap-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:4px 16px 12px;margin-inline:-16px;max-width:none;-webkit-overflow-scrolling:touch}.ap-fig{flex:0 0 74%;scroll-snap-align:center}}
.ap-fig{margin:0;text-align:center}
.ap-fig figcaption{margin-top:16px;font-size:14.5px;line-height:1.45;color:rgba(245,245,242,.7)}
.ap-fig figcaption b{display:block;color:#f5f5f2;font-size:15.5px}
.ap-phone{margin:0 auto;width:100%;max-width:270px;aspect-ratio:9/18.5;border-radius:38px;padding:9px;background:#1d1d1f;box-shadow:0 30px 60px -30px rgba(0,0,0,0.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.ap-scr{height:100%;border-radius:30px;background:#08080a;padding:14px 13px;overflow:hidden;text-align:left;font-size:12px;line-height:1.35;color:#f5f5f2}
.ap-scr p{margin:0}
.ap-top{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;color:rgba(245,245,242,.6);margin-bottom:12px!important}
.ap-h{font-size:19px;font-weight:700;letter-spacing:-.02em}
.ap-sub{font-size:11.5px;color:rgba(245,245,242,.6);margin-top:2px!important}
.ap-k{margin:14px 0 6px!important;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,242,.55)}
.ap-card{background:#111114;border:1px solid rgba(245,245,242,.1);border-radius:14px;padding:4px 11px;margin-top:8px}
.ap-li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0}
.ap-li+.ap-li{border-top:1px solid rgba(245,245,242,.08)}
.ap-pill{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#c93e09;color:#fff;font-size:11px;display:grid;place-items:center}
.ap-ok{color:#22c55e;font-weight:600}
.ap-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap-stats div{background:#111114;border:1px solid rgba(245,245,242,.1);border-radius:14px;padding:10px 11px}
.ap-stats b{display:block;font-size:22px;letter-spacing:-.02em}
.ap-stats span{font-size:10.5px;color:rgba(245,245,242,.6)}
.ap-qr{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 11px;border-radius:14px;background:#f5f5f2;color:#08080a;font-weight:700;font-size:12px}
.ap-qrcode{width:30px;height:30px;flex:0 0 30px;border-radius:4px;background:
  linear-gradient(90deg,#08080a 0 33%,transparent 33% 66%,#08080a 66%) 0 0/10px 10px,
  linear-gradient(#08080a 0 33%,transparent 33% 66%,#08080a 66%) 0 0/10px 10px;opacity:.9}
.ap-in{display:inline-flex;align-items:center;gap:4px;color:#22c55e;font-weight:600;font-size:11px}
.ap-in svg{width:12px;height:12px}
.ap-btn{padding:3px 9px;border-radius:999px;background:#f5f5f2;color:#08080a;font-size:11px}
.ap-tag{font-style:normal;margin-left:4px;padding:1px 6px;border-radius:999px;background:rgba(255,122,61,.18);color:#ff9d74;font-size:9.5px;font-weight:700}
.ap-cta{margin-top:12px!important;padding:10px;border-radius:999px;background:#f5f5f2;color:#08080a;text-align:center;font-weight:700;font-size:12.5px}
.ap-note{background:rgba(245,245,242,.12);border-radius:16px;padding:9px 11px;margin:4px 0 16px}
.ap-note p:first-child{display:flex;justify-content:space-between;font-size:9.5px;color:rgba(245,245,242,.6);margin-bottom:3px!important}
.ap-note b{letter-spacing:.06em}
.ap-next{padding:11px 12px}.ap-next .ap-k{margin:0 0 4px!important}
.ap-big{font-size:16px;font-weight:700}
.ap-chat{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ap-chat p{max-width:85%;padding:8px 11px;border-radius:16px;font-size:11.5px}
.ap-them{align-self:flex-start;background:#111114;border:1px solid rgba(245,245,242,.1)}
.ap-me{align-self:flex-end;background:#f5f5f2;color:#08080a}
.ap-micro{color:rgba(245,245,242,.5)!important;margin-top:18px}

/* ---------- The founder ---------- */
.fd{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,4vw,40px);align-items:center;max-width:860px;margin:clamp(32px,5vw,52px) auto clamp(32px,5vw,48px);text-align:left}
.fd-img{width:200px;height:200px;border-radius:28px;object-fit:cover;background:#08080a;box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.fd-q{margin:0;font-size:clamp(18px,2.2vw,21px);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fd-who{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.fd-who b{color:var(--ink)}
.fd-btn{margin-top:18px}
@media (max-width:640px){.fd{grid-template-columns:1fr;text-align:center;justify-items:center}.fd-img{width:132px;height:132px;border-radius:24px}}

/* The result page's recommendation: neutral, like every other panel now. */
.mh-plan-rec{background:#f5f5f7!important}

/* ---------- Alternating bands ----------
   White and near-black sections in turn, with a clean edge between them, so
   every section reads as a fresh start rather than one long white page. Cards follow their band: dark cards on dark,
   soft grey on white. Orange stays for marks, ticks and the buttons. */
body.home{--band:#08080a}
body.home .band-dark{color:#f5f5f2;background:var(--band)!important}
body.home .band-dark h2,body.home .band-dark > .wrap > h3,body.home .band-dark .fx-steps-h{color:#f5f5f2}
body.home .band-dark .lede,body.home .band-dark .micro,body.home .band-dark .mh-kicker{color:rgba(245,245,242,.72)}
body.home .band-dark .pr-tag{color:#ff7a3d}
/* cards on dark */
body.home .band-dark .pr-item,body.home .band-dark .ev-card{background:#151518;border:1px solid rgba(255,255,255,.09);box-shadow:none;
  --ink:#f5f5f2;--ink-2:rgba(245,245,242,.74);--ink-3:rgba(245,245,242,.6);color:#f5f5f2}
body.home .band-dark .pr-item .tile{background:linear-gradient(135deg,#c93e09,#ff4f12);color:#fff}
body.home .band-dark .ev-card .ticks li,body.home .band-dark .ev-card .ticks li.tick-hero{color:#f5f5f2}
body.home .band-dark .ev-card .ticks li.tick-hero b{color:#ff7a3d}
body.home .band-dark .ev-card .ticks li span{color:rgba(245,245,242,.6)}
body.home .band-dark .ev-card .ticks li::before,body.home .band-dark .ev-card .ticks li.tick-hero::before{border-color:#ff4f12}
/* the cost table on dark */
body.home .band-dark .mh-compare{background:#151518;border-color:rgba(255,255,255,.1)}
body.home .band-dark .mh-compare > *{border-color:rgba(255,255,255,.08)!important}
body.home .band-dark .mh-compare span:last-child{color:rgba(245,245,242,.7)}
body.home .band-dark .mh-compare .sum{background:rgba(255,255,255,.06)}
body.home .band-dark .mh-compare .sum span:last-child{color:#f5f5f2}
body.home .band-dark .mh-compare .us{background:#f5f5f2;color:#08080a}
body.home .band-dark .mh-compare .us span:last-child{color:#c93e09}
/* cards on white: soft grey, dark type, orange only on the small tag */
body.home .fx-card{background:#f5f5f7;box-shadow:none;--ink:#1d1d1f;--ink-2:#55555a;--ink-3:#6e6e73;color:#1d1d1f}
body.home .fx-card h3{color:#1d1d1f}
body.home .fx-tag{color:#c93e09}
/* Faded orange, no border or glow, like the offer notes. */
body.home #faq details{background:rgba(255,79,18,.07);border:0;box-shadow:none}
body.home #faq details[open]{background:rgba(255,79,18,.1);box-shadow:none}
body.home #faq summary::after{border-color:rgba(232,64,12,.35)}
body.home #results .fd{margin-top:clamp(28px,4vw,40px)}

/* ---------- Hero, take two ----------
   Room to breathe on the design scale (8, 16, 24, 32, 48, 64), a stronger
   orange sweep, and the app drawn live beside the copy instead of a
   screenshot that loads late. Two columns from 1024px. */
body.home{--grad-text:linear-gradient(90deg,#b8320a 0%,#f0450f 48%,#ff6a1f 100%)}
.mh{padding:clamp(48px,8vw,96px) 0 clamp(64px,8vw,112px)}
.mh h1{margin-top:32px}
.mh .sub{margin-top:24px}
.mh-risk{margin-top:32px}
.mh .mh-cta{margin-top:32px}
.mh-in{margin-top:16px}
.claim-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:15.5px;font-weight:600;color:var(--good);text-decoration:none}
.claim-link:hover{text-decoration:underline}
.mh-cta .claim-link{display:flex;justify-content:center}
.sec-cta .claim-link,.ev-cta + .claim-link{display:block;margin-top:14px}
body.home .band-dark .claim-link{color:#ff7a3d}
.mh-visual{display:flex;flex-direction:column;align-items:center;margin-top:40px}
/* Under the phone: the three promises and the academy's numbers. */
.mh-after{width:100%;max-width:440px;margin-top:28px;text-align:center}
.mh .mh-after .mh-risk{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0;padding:4px 20px;border-radius:22px;
  background:linear-gradient(135deg,#e8400c 0%,#ff5a1f 100%);box-shadow:0 18px 40px -18px rgba(0,0,0,0.18);text-align:left}
.mh .mh-after .mh-risk li{display:flex;align-items:center;gap:10px;padding:14px 0;font-size:15.5px;color:#fff}
.mh .mh-after .mh-risk li + li{border-top:1px solid rgba(255,255,255,.22)}
body.home .mh .mh-after .mh-risk svg{color:#fff}
.mh .mh-after .mh-risk .mh-info{margin-left:auto;flex:0 0 22px;width:22px;height:22px;vertical-align:0;background:rgba(255,255,255,.22);color:#fff}
/* Only a real mouse gets the hover look: on a phone it would stick after a tap. */
.mh .mh-after .mh-risk .mh-info:hover{background:rgba(255,255,255,.22);color:#fff}
@media (hover:hover){.mh .mh-after .mh-risk .mh-info:hover{background:#fff;color:#e8400c}}
.mh .mh-after .mh-risk .mh-info[aria-expanded="true"]{background:#fff;color:#e8400c}
body.home .mh .mh-after .mh-info-note{margin:14px auto 0;padding:18px 22px;border:1.5px solid rgba(232,64,12,.45);border-radius:22px;
  background:rgba(255,79,18,.06);box-shadow:none;font-size:15px;line-height:1.5;color:#55555a}
.mh .mh-after .mh-info-note b{display:block;margin-bottom:4px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:#e8400c}
.mh-after .mh-proofline{margin-top:22px}
.mh-phone{width:min(300px,74vw)}
.mh-phone[hidden]{display:none}
/* Above the hero phone: which side of the app it shows. */
.mh-role{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-bottom:22px;padding:4px;border-radius:999px;background:var(--bg-2,#f2f2ef);border:1px solid rgba(0,0,0,.08);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mh-role-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#111;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.mh-role[data-on="coaches"] .mh-role-thumb,.mh-role[data-on="trader"] .mh-role-thumb{transform:translateX(100%)}
.mh-role button{position:relative;z-index:1;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 15px/1 inherit;font-family:inherit;cursor:pointer;transition:color .3s}
.mh-role button[aria-pressed="true"]{color:#fff}
@media (prefers-reduced-motion:reduce){.mh-role-thumb{transition:none}}
.mh-ask{max-width:340px;margin:20px auto 0;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.mh-ask a{color:var(--ink);font-weight:600}
@media (min-width:1024px){
  .mh-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:64px;text-align:left}
  .mh-proof{align-items:flex-start}
  .mh h1{margin-left:0;max-width:13ch;font-size:clamp(56px,5.2vw,74px)}
  .mh .sub{margin-left:0}
  .mh-risk{justify-content:flex-start;margin-left:0}
  .mh-cta{margin-left:0}
  .mh-info-note{margin-left:0}
  .mh-visual{margin-top:0}
  .mh-phone{width:340px}
  /* The phone column is taller with the promises under it, so both columns
     start at the top rather than the copy floating down to its middle. */
  .mh-grid{align-items:start}
  .mh-copy{padding-top:48px}
}

/* The ads offer, where "Claim £150 a month for ads" lands */
.mh-claim{display:flex;align-items:flex-start;gap:10px;max-width:520px;margin:20px auto 0;padding:14px 18px;border-radius:16px;background:#f5f5f7;font-size:15.5px;line-height:1.45;color:#55555a;text-align:left}
.mh-claim b{color:var(--ink);font-weight:600}
.mh-claim svg{flex:0 0 20px;width:20px;height:20px;margin-top:1px;color:var(--neon)}

/* ---------- The app, card by card ----------
   The same drawn app as the hero, one screen per card, in a row you swipe
   on any screen size. */
body.home .ap-row{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  max-width:none;margin-top:clamp(32px,5vw,48px);padding:6px max(16px,calc((100vw - 1100px) / 2)) 18px;scrollbar-width:none}
body.home .ap-row::-webkit-scrollbar{display:none}
body.home .ap-fig{flex:0 0 min(74vw,260px);scroll-snap-align:center}
body.home .ap-hp{width:100%}
body.home .ap-fig figcaption{margin-top:18px}
/* On a phone the first and last cards can reach the middle too, rather
   than sitting against the screen's edge. */
@media (max-width:860px){body.home .ap-row{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc((100vw - min(74vw,260px)) / 2);padding-right:calc((100vw - min(74vw,260px)) / 2)}}

/* ---------- Conversion pass ---------- */
.mh-proofline{margin:24px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.mh-proofline b{color:var(--ink);font-weight:700}
@media (max-width:600px){.mh-proofline span{display:block}}
.fx-dream{display:block;margin-bottom:8px;color:var(--ink);font-weight:700}
@media (min-width:861px){.fx-steps4{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.ev-bonus{list-style:none;display:grid;gap:12px;max-width:860px;margin:28px auto 8px;padding:0;text-align:left}
@media (min-width:640px){.ev-bonus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.ev-bonus{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}}
.ev-bonus li{padding:18px 20px;border-radius:20px;background:rgba(255,79,18,.1);border:1px solid rgba(255,79,18,.35);color:#f5f5f2}
.ev-bonus b{display:block;font-size:16.5px;letter-spacing:-.01em;color:#ff7a3d}
.ev-bonus span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:rgba(245,245,242,.78)}

/* The trust pill doubles as the way to chat with Kane */
.mh-founder-chat{text-decoration:none;padding:6px 18px 6px 6px;border-radius:24px}
.mh-founder-chat img{width:40px;height:40px;flex-basis:40px}
.mh-founder-chat > span{display:flex;flex-direction:column;gap:2px}
.mh-founder-chat em{font-style:normal;font-weight:600;color:var(--good)}
.mh-founder-chat:hover em{text-decoration:underline}
.mh-founder-chat > span > *{white-space:nowrap}
@media (max-width:359px){.mh-founder-chat{font-size:12.5px;padding-right:12px}.mh-founder-chat img{width:34px;height:34px;flex-basis:34px}}
/* The orange gradient phrase always starts its own line: it looked wrong
   wrapping mid-line. Shrink-wrapped so the gradient spans the words, and
   centred wherever its heading is centred. */
.dim{display:block;width:fit-content}
.center .dim,.mh .dim{margin-inline:auto}
.mh-page-h .dim{display:block}

/* ---------- Offer pass ----------
   How it works opens its section now the "One system" cards are gone. */
.fx-steps-h.fx-steps-top{margin-top:0;font-size:clamp(30px,4.4vw,44px);letter-spacing:-.035em}
/* Under the results: a way into the calculator for anyone who stops here. */
.mh-teaser{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:760px;margin:18px auto 0;padding:20px 22px 20px 24px;
  border:1.5px solid rgba(232,64,12,.45);border-radius:22px;background:rgba(255,79,18,.06);color:var(--ink);text-align:left;text-decoration:none;transition:background .2s var(--ease)}
.mh-teaser:hover{background:rgba(255,79,18,.1)}
.mh-teaser b{display:block;margin-bottom:2px;font-size:17px;letter-spacing:-.01em;color:#e8400c}
.mh-teaser span{font-size:15px;line-height:1.45;color:#55555a}
.mh-teaser i{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:22px;font-weight:600;line-height:1;color:#fff;
  background:linear-gradient(135deg,#e8400c 0%,#ff5a1f 100%);padding-bottom:3px}
/* The price, then what it would cost separately, then the full list on request. */
#everything .ev-then{margin:clamp(48px,7vw,72px) 0 0;font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.08;color:#f5f5f2}
.ev-more{margin-top:clamp(28px,4vw,36px)}
.ev-more summary{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1.5px solid rgba(245,245,242,.28);border-radius:999px;
  font-size:16px;font-weight:600;color:#f5f5f2;cursor:pointer;list-style:none;transition:border-color .2s var(--ease),background .2s var(--ease)}
.ev-more summary::-webkit-details-marker{display:none}
.ev-more summary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.ev-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
@media (hover:hover){.ev-more summary:hover{border-color:rgba(245,245,242,.6);background:rgba(245,245,242,.06)}}
.ev-more .ev-grid{margin-top:clamp(24px,4vw,32px)}

/* "Made for your club" under the app screens, and the preview ask's link. */
.ap-fit{margin-top:clamp(56px,8vw,88px)}
.ap-fit .lede{margin:14px auto 0;max-width:46ch}
.ap-try{margin-top:clamp(28px,4vw,40px)}
/* Thinking of switching? (#switch): the six checks, then what coaches and
   parents see, in two cards side by side. */
.sw-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;columns:auto;max-width:880px;margin-inline:auto}
.sw-two .ev-card{margin:0}
.sw-cta{margin-top:clamp(12px,2vw,20px)}
.sw-cta p{margin:12px auto 0;max-width:44ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
.sw-cta p a{color:var(--good);font-weight:600}
.ap-try p{margin:12px auto 0;max-width:40ch;font-size:15px;line-height:1.45;color:rgba(245,245,242,.72)}

/* ---------- One against booking software ----------
   Under the price: the no-cut line, then two ways to compare, as tabs. */
.ev-fees{max-width:46ch;margin:14px auto 0;font-size:16px;line-height:1.5;color:rgba(245,245,242,.78)}
.ev-fees b{color:#f5f5f2}
.ev-tabs{display:inline-flex;gap:4px;margin:22px auto 0;padding:4px;border-radius:999px;background:rgba(255,255,255,.1);max-width:100%}
.ev-tabs button{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:none;color:rgba(245,245,242,.78);font:600 15px/1.2 inherit;font-family:inherit;cursor:pointer}
.ev-tabs button[aria-selected="true"]{background:#f5f5f2;color:#111}
.vs{max-width:860px;margin:clamp(24px,4vw,32px) auto 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--glass,#fff);box-shadow:var(--glass-shadow);text-align:left;color:#1d1d1f;--ink:#1d1d1f;--ink-2:#55555a}
.vs-head,.vs-row{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:18px;padding:16px 22px;font-size:15.5px;line-height:1.45}
.vs-head{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.vs-head span:last-child{color:var(--accent,#e8400c)}
.vs-row{border-top:1px solid rgba(255,79,18,.12)}
.vs-row b{font-weight:700}
.vs-row > span:nth-child(2){color:var(--ink-2)}
.vs-row > span:last-child{font-weight:600}
.vs-both{margin:0;padding:14px 22px;border-top:1px solid rgba(255,79,18,.12);background:rgba(255,79,18,.06);font-size:15px;line-height:1.5;color:var(--ink-2)}
.vs-pay{background:#1d1d1f;color:#fff}
.vs-pay > span:nth-child(2){color:rgba(255,255,255,.7)}
.vs-pay > span:last-child{color:var(--good-dark,#22c55e)}
@media (max-width:640px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:1fr;gap:6px}
  .vs-row > span::before{content:attr(data-vs) ": ";font-weight:700}
  .vs-row > span:nth-child(2)::before{color:#1d1d1f}
  .vs-pay > span:nth-child(2)::before{color:#fff}
}

/* ---------- Shadows by section ----------
   Light black shadows on the white sections; on the black bands the same
   things glow orange. */
body.home .band-dark{--glass-shadow:0 10px 30px rgba(255,79,18,.08),0 1px 2px rgba(29,29,31,.04)}
.band-dark .hp-phone{box-shadow:0 60px 120px -50px rgba(255,79,18,.35),0 30px 60px -30px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.08)}
.band-dark .hp-scan{box-shadow:0 0 26px 6px rgba(255,79,18,.55)}
.band-dark .ap-phone{box-shadow:0 30px 60px -30px rgba(255,79,18,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
body.home .band-dark .pr-item,body.home .band-dark .fx-card,body.home .band-dark .ev-card{box-shadow:0 18px 40px -22px rgba(201,62,9,.65)}
.band-dark .chip-ico.g,.band-dark .mh-plan-steps li::before{box-shadow:0 4px 12px var(--neon-glow)}
.band-dark .mh-faces span,body.home .band-dark .badge-green{box-shadow:0 4px 14px var(--neon-glow)}
body.home .band-dark .tile-green{box-shadow:0 6px 18px var(--neon-glow)}
.band-dark .hh .mini-go:hover{box-shadow:0 6px 18px rgba(194,65,12,.3)}
.band-dark .eyebrow b,body.home .band-dark .ui-live i,body.home .band-dark .mh-now i{box-shadow:0 0 0 4px var(--good-soft),0 0 10px var(--neon-glow)}
.band-dark .mh-promise-list b::before{box-shadow:0 0 8px var(--neon-glow)}
body.home .band-dark .faq details[open]{box-shadow:var(--glass-shadow),0 14px 40px rgba(255,79,18,.08)}
body.home .band-dark .mh-results-tag{text-shadow:0 0 14px rgba(255,79,18,.45)}

/* The calculator's optional details (free-check.js): kept as a lead if
   given, never required to see the number on /look-round. */
.mh-calc-tease{margin:6px 0 0;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.mh-opt{margin:20px 0 0;text-align:left}
.mh-opt-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.mh-opt-h span{padding:2px 8px;border-radius:999px;background:var(--good-soft);color:var(--good);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mh-opt-row{display:grid;gap:10px}
@media (min-width:600px){.mh-opt-row{grid-template-columns:1fr 1fr}}
.mh-opt input{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;font-size:16px;color:#1d1d1f}
.mh-opt input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.1)}
.mh-opt-note{margin:8px 0 0;font-size:13.5px;color:var(--ink-3)}
.mh-opt-bad{margin:6px 0 0;font-size:14px;color:#ff7a5c}
.mh-opt-bad:empty{display:none}
.mh-opt .mh-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ The homepage, calmer (body.page-index) ============
   Bold and minimal: orange for buttons and small accents only, the second
   line of each heading in grey, light cards instead of orange slabs, and
   more room between things. Only the homepage has page-index, so /trades
   and the other pages on home.css keep their look. */
.page-index .section{padding:clamp(80px,11vw,136px) 0}
.page-index .section h2 .dim,.page-index .ev-then .dim{background:none;color:#86868b;-webkit-text-fill-color:currentColor}
.page-index .band-dark h2 .dim,.page-index .band-dark .ev-then .dim,.page-index .ap .dim{color:rgba(245,245,242,.5)}
.page-index .section .lede{margin-top:18px}
.page-index .band-dark .pr-item,.page-index .band-dark .ev-card{box-shadow:none}

/* Hero: the price, the ads and the promise sit under the button as a plain
   list, with our academy's numbers under them. */
.page-index .mh .mh-after{max-width:none;margin-top:30px;text-align:left}
.page-index .mh .mh-after .mh-risk{width:fit-content;max-width:100%;margin:0 auto;padding:0;gap:4px;border-radius:0;background:none;box-shadow:none}
.page-index .mh .mh-after .mh-risk li{padding:5px 0;font-size:16px;font-weight:500;color:var(--ink)}
.page-index .mh .mh-after .mh-risk li b{font-weight:700}
.page-index .mh .mh-after .mh-risk li + li{border-top:0}
body.home.page-index .mh .mh-after .mh-risk svg{color:var(--good)}
.page-index .mh .mh-after .mh-risk .mh-info{margin-left:8px;background:var(--good-soft);color:var(--good)}
@media (hover:hover){.page-index .mh .mh-after .mh-risk .mh-info:hover{background:var(--good);color:#fff}}
.page-index .mh .mh-after .mh-risk .mh-info[aria-expanded="true"]{background:var(--good);color:#fff}
body.home.page-index .mh .mh-after .mh-info-note{max-width:440px;border:0;background:#f5f5f7}
.page-index .mh .mh-after .mh-info-note b{color:var(--ink)}
.page-index .mh-after .mh-proofline{margin-top:18px;text-align:center}
@media (min-width:1000px){
  .page-index .mh .mh-after .mh-risk{margin:0}
  .page-index .mh-after .mh-proofline,.page-index .mh .mh-after .mh-info-note{text-align:left;margin-left:0}
}
.page-index .mh-ask{margin-top:24px}

/* How parents find a club: room between each picture and its words. */
.page-index .gf-cards{gap:44px 24px;margin-top:52px}
.page-index .gf-kind{margin-top:22px}
.page-index .gf-note{margin-top:40px}

/* Thinking of switching? The six checks as a quiet list, then two light cards. */
.sw-list{display:grid;gap:0 48px;max-width:900px;margin:48px auto 0;text-align:left}
@media (min-width:760px){.sw-list{grid-template-columns:1fr 1fr}}
.sw-list .pr-item{display:grid;grid-template-columns:40px 1fr;column-gap:16px;row-gap:4px;align-items:start;padding:22px 0;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:none;box-shadow:none;color:var(--ink);--ink:#1d1d1f;--ink-2:#55555a}
body.home.page-index .sw-list .pr-item{background:none;box-shadow:none;color:var(--ink)}
body.home.page-index .sw-list .pr-item b{color:var(--ink)}
.sw-list .pr-item .tile{grid-row:1 / 3;width:40px;height:40px;flex:none;margin:0;border-radius:12px}
body.home.page-index .sw-list .pr-item .tile{background:#fff0e8;color:#c93e09}
body.home.page-index #switch .ev-card{background:#f5f5f7;box-shadow:none;--ink:#1d1d1f;--ink-2:#55555a;color:#1d1d1f}
body.home.page-index #switch .ev-card h3,body.home.page-index #switch .ev-card .ticks li,body.home.page-index #switch .ev-card .ticks li b{color:#1d1d1f}
body.home.page-index #switch .ev-card .ticks li span{color:#55555a}
body.home.page-index #switch .ev-card .ticks li::before{border-color:var(--good)}
.page-index .sw-two{margin-top:48px}
.page-index #switch .invite{margin-top:40px}

/* Pricing: the four extras as quiet rows, not four orange boxes. */
.page-index .ev-bonus li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.page-index .ev-bonus li b{color:#f5f5f2}

/* Questions: the ones that decide it, then the rest behind a button. */
body.home.page-index .faq{gap:12px}
.faq-more{align-self:center;margin-top:12px;padding:13px 24px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;cursor:pointer}
.faq-more:hover{border-color:var(--ink)}
.faq-rest{display:flex;flex-direction:column;gap:12px}
.faq-rest[hidden]{display:none}

/* Second look: colours set outright where shared rules set them to white,
   the price kept orange, neutral boxes so the one invite stands out, and the
   phone spacing (a shared rule wins at 600px and under). */
body.home.page-index .section{padding:clamp(80px,11vw,136px) 0}
@media (max-width:600px){body.home.page-index .section{padding:76px 0}}
body.home.page-index .band-dark .pr-item{box-shadow:none}
body.home.page-index .sw-list .pr-item{--ink:#1d1d1f;--ink-2:#55555a;color:#1d1d1f}
body.home.page-index .sw-list .pr-item > span:not(.tile){color:#55555a;font-size:15px;line-height:1.45}
body.home.page-index .sw-list .pr-item b{font-size:16.5px}
.page-index #compare h2 .dim{color:#ff7a3d}
body.home.page-index #faq details{background:#f5f5f7}
body.home.page-index #faq details[open]{background:#f0f0f2}
body.home.page-index .mh-teaser{background:#f5f5f7;border-color:transparent}
.page-index .mh .mh-after .mh-risk li{font-size:15.5px}

/* Pass two: two white sections in a row share the gap instead of doubling
   it; the step numbers lose their glow; the steps get room to breathe. */
body.home.page-index #one,body.home.page-index #switch{padding-top:clamp(16px,3vw,40px)}
.page-index .fx-n{box-shadow:none}
.page-index .fx-steps{row-gap:26px}
.page-index #one .sec-cta{margin-top:44px}
.page-index .mh-teaser{margin-top:28px}