/* ═══════════════════════════════════════════════════════════════════════
   WI COLR homepage — additions on top of style.css. 2026-09-08.
   Everything here is prefixed .c- so it cannot collide with the system.
   Reads the chapter tokens (--bg --ink --mut --dim --line-soft) so it
   flips correctly inside .band chapters. Space, not borders.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── hero ──────────────────────────────────────────────────────────────── */
.c-hero{position:relative;isolation:isolate;overflow:hidden;
  padding:var(--space-10) 0 0}
.c-hero .hb-video{z-index:-3}
.c-hero-scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.86) 45%,var(--wi-black) 78%)}
.c-hero-copy{position:relative;text-align:center;padding-bottom:var(--space-8)}
.c-hero-copy .eyebrow{color:rgba(244,242,237,.7)}
.c-hero-copy h1{font-size:clamp(46px,7.6vw,118px);max-width:none;margin:0 auto}
.c-hero-sub{margin:var(--space-5) auto 0;max-width:40ch;
  font-size:clamp(17px,1.5vw,22px);color:rgba(244,242,237,.86);line-height:1.45}
.c-hero-actions{display:flex;align-items:center;justify-content:center;
  gap:var(--space-6);margin-top:var(--space-6);flex-wrap:wrap}
.c-hero-actions .hb-cta{margin-bottom:0}
.c-hero-fine{margin-top:var(--space-4);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(244,242,237,.55)}
/* 1924px capture is a 2x retina shot; 962px shows the window at its real size. */
.c-hero-shot{position:relative;margin:0 auto;max-width:min(962px,92vw);padding:0}
.c-hero-shot img{display:block;width:100%;border-radius:var(--r-shot) var(--r-shot) 0 0;
  box-shadow:0 -1px 0 rgba(244,242,237,.12)}

/* ── big simple words ──────────────────────────────────────────────────── */
.c-words{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-7);
  margin-top:var(--space-4)}
.c-words li{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(34px,5.4vw,86px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.c-words li:nth-child(even){color:var(--wi-accent)}

/* ── compare player ────────────────────────────────────────────────────── */
.c-cmp{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);
  gap:var(--space-8);align-items:start;margin-top:var(--space-4)}
.c-cmp-ctl{position:sticky;top:96px}
.c-play{width:clamp(96px,10vw,140px);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--ink);background:transparent;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--dur),color var(--dur),transform var(--dur)}
.c-play:hover{background:var(--ink)}
.c-play:hover .c-play-ico{border-left-color:var(--bg)}
.c-play:hover.is-playing .c-play-ico{background:var(--bg)}
.c-play:focus-visible{outline:2px solid var(--wi-accent);outline-offset:4px}
.c-play-ico{display:block;width:0;height:0;margin-left:10%;
  border-left:clamp(26px,2.6vw,36px) solid var(--ink);
  border-top:clamp(16px,1.6vw,22px) solid transparent;
  border-bottom:clamp(16px,1.6vw,22px) solid transparent}
.c-play.is-playing .c-play-ico{width:clamp(22px,2.2vw,30px);height:clamp(26px,2.6vw,36px);
  margin-left:0;border:0;background:var(--ink);
  -webkit-mask:linear-gradient(90deg,#000 38%,transparent 38% 62%,#000 62%);
  mask:linear-gradient(90deg,#000 38%,transparent 38% 62%,#000 62%)}
.c-side{display:inline-flex;margin-top:var(--space-5);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
.c-side button{appearance:none;border:0;background:transparent;color:var(--mut);
  font:inherit;font-weight:700;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;padding:14px 26px;cursor:pointer;min-width:120px;
  transition:background var(--dur),color var(--dur)}
.c-side button+button{border-left:1px solid var(--line)}
.c-side button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.c-side button:focus-visible{outline:2px solid var(--wi-accent);outline-offset:-3px}
.c-cmp-note{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--dim)}

.c-cmp-list{list-style:none;counter-reset:none;border-top:1px solid var(--line-soft)}
.c-cmp-list li{border-bottom:1px solid var(--line-soft)}
.c-cmp-list button{appearance:none;background:transparent;border:0;color:inherit;
  font:inherit;text-align:left;width:100%;cursor:pointer;
  display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--space-4);align-items:baseline;padding:var(--space-5) 0 var(--space-5) var(--space-4);
  border-left:3px solid transparent;transition:border-color var(--dur),color var(--dur)}
.c-cmp-list button:hover .c-cmp-name{color:var(--wi-accent)}
.c-cmp-list button:focus-visible{outline:2px solid var(--wi-accent);outline-offset:-2px}
.c-cmp-list li.is-active button{border-left-color:var(--wi-accent)}
.c-cmp-name{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(22px,2.4vw,34px);line-height:1;letter-spacing:.01em;color:var(--ink);
  transition:color var(--dur)}
.c-cmp-preset{font-family:var(--font-mono);font-size:13px;color:var(--mut);letter-spacing:.02em}
.c-cmp-desc{font-size:var(--text-sm);color:var(--dim)}
.c-cmp-list li.is-missing button{cursor:default;opacity:.45}
.c-cmp-list li.is-missing .c-cmp-desc::after{content:" · audio coming"}

/* ── what do you want to do ────────────────────────────────────────────── */
.c-do{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-7) var(--space-8);margin-top:var(--space-4)}
.c-do h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,54px);line-height:1;letter-spacing:.005em}
.c-do p{margin-top:var(--space-2);color:var(--mut);font-size:var(--text-lg)}
.c-do span{display:inline-block;margin-top:var(--space-3);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wi-accent)}
.c-do span::before{content:"→ ";}

/* ── the six engines ───────────────────────────────────────────────────── */
.c-eng{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--space-9);border-top:1px solid var(--line-soft)}
.c-eng li{display:grid;grid-template-columns:56px 150px 1fr;gap:var(--space-4);
  align-items:baseline;padding:var(--space-5) 0;border-bottom:1px solid var(--line-soft)}
.c-eng h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:.01em}
.c-eng p{color:var(--mut);font-size:var(--text-body);margin:0}
.c-eng-note{margin-top:var(--space-6);color:var(--dim);font-size:var(--text-sm)}

/* ── the range ─────────────────────────────────────────────────────────── */
.c-range{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  margin:var(--space-6) 0 var(--space-6);position:relative;padding-top:var(--space-5)}
.c-range::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--line-soft),var(--wi-accent) 60%,var(--ink))}
.c-range li{font-family:var(--font-display);text-transform:uppercase;line-height:1;
  letter-spacing:.01em;position:relative;color:var(--ink)}
.c-range li::before{content:"";position:absolute;top:calc(-1 * var(--space-5) - 5px);
  left:0;width:12px;height:12px;border-radius:50%;background:var(--bg);
  border:2px solid var(--ink)}
.c-range li:nth-child(1){font-size:clamp(22px,2.6vw,38px);color:var(--dim)}
.c-range li:nth-child(2){font-size:clamp(28px,3.6vw,52px)}
.c-range li:nth-child(3){font-size:clamp(34px,4.6vw,68px);color:var(--wi-accent)}
.c-range li:nth-child(4){font-size:clamp(40px,5.8vw,86px)}
.c-range li:nth-child(4)::before{background:var(--ink)}

/* ── presets ───────────────────────────────────────────────────────────── */
.c-presets{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);
  margin-top:calc(-1 * var(--space-3));margin-bottom:var(--space-6)}
.c-presets li{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(20px,2.2vw,32px);line-height:1.1;letter-spacing:.01em;color:var(--mut)}
.c-presets li:nth-child(3n+1){color:var(--ink)}
.c-match{font-size:var(--text-lg);color:var(--mut);max-width:var(--text-width)}
.c-match b{color:var(--ink)}
.c-shot{margin:var(--space-8) auto 0;max-width:min(962px,92vw);padding:0}
.c-shot img{display:block;width:100%;border-radius:var(--r-shot)}

/* ── free vs full ──────────────────────────────────────────────────────── */
.c-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-9);max-width:960px;margin-top:var(--space-4)}
.c-tier h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,3vw,42px);line-height:1;letter-spacing:.01em;
  padding-bottom:var(--space-4);border-bottom:2px solid var(--ink)}
.c-tier.is-full h3{border-color:var(--wi-accent)}
.c-tier ul{list-style:none;margin:var(--space-4) 0 var(--space-6)}
.c-tier li{padding:var(--space-3) 0;font-size:var(--text-lg);color:var(--mut);
  border-bottom:1px solid var(--line-soft)}
.c-tier li::before{content:"— ";color:var(--wi-accent)}
.c-both{margin-top:var(--space-7);color:var(--dim);font-size:var(--text-sm)}

/* ── price ─────────────────────────────────────────────────────────────── */
.c-price{font-size:clamp(22px,2.4vw,32px);color:var(--mut);margin:calc(-1 * var(--space-2)) 0 var(--space-3)}
.c-price b{font-family:var(--font-display);font-weight:400;font-size:2.2em;
  letter-spacing:.005em;color:var(--ink);margin-right:.2em;vertical-align:-.06em}
.c-plans{color:var(--dim);font-size:var(--text-sm);margin-bottom:var(--space-6)}
.c-fine{margin-top:var(--space-4);color:var(--dim);font-size:var(--text-sm)}

/* ── built / more link ─────────────────────────────────────────────────── */
.c-more{display:inline-block;font-weight:700;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:2px solid var(--wi-accent);padding-bottom:3px;
  margin-top:calc(-1 * var(--space-3))}
.c-more:hover{text-decoration:none;color:var(--wi-accent)}

/* ── use it on anything ────────────────────────────────────────────────── */
#anything{padding:var(--space-8) 0}
.c-any{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-7);
  margin-top:var(--space-2)}
.c-any li{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(30px,4.8vw,76px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.c-any li:nth-child(odd){color:var(--mut)}

/* ── final ─────────────────────────────────────────────────────────────── */
.c-final{background:var(--wi-accent);--ink:#fff;--bg:var(--wi-accent);
  --mut:rgba(255,255,255,.8);--dim:rgba(255,255,255,.7);color:#fff;
  text-align:center;padding:var(--space-11) 0}
.c-final h2{font-size:clamp(44px,8vw,132px);max-width:none;margin:0 auto var(--space-7)}
.c-final .hb-cta{margin-bottom:0}
.c-final .c-fine{color:rgba(255,255,255,.75);margin-top:var(--space-5)}

/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:1023px){
  .c-do{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-eng{grid-template-columns:1fr}
}
@media(max-width:760px){
  .c-hero{padding-top:var(--space-8)}
  .c-cmp{grid-template-columns:1fr;gap:var(--space-6)}
  .c-cmp-ctl{position:static;display:grid;grid-template-columns:auto 1fr;
    align-items:center;gap:var(--space-4)}
  .c-cmp-ctl .c-side{margin-top:0}
  .c-cmp-ctl .c-cmp-note{grid-column:1/-1;margin-top:0}
  .c-cmp-list button{grid-template-columns:1fr;gap:4px;padding:var(--space-4) 0 var(--space-4) var(--space-3)}
  .c-do{grid-template-columns:1fr;gap:var(--space-6)}
  .c-eng li{grid-template-columns:56px 1fr;gap:var(--space-1) var(--space-4)}
  .c-eng li h3{grid-column:2}.c-eng li p{grid-column:2}
  .c-eng li .mi-wrap{grid-row:1/3;align-self:start}
  .c-tiers{grid-template-columns:1fr;gap:var(--space-7)}
  .c-range li{font-size:clamp(16px,4.6vw,24px)!important}
  .c-range li:nth-child(4){font-size:clamp(20px,6vw,30px)!important}
}

/* ── centred sections · 2026-09-08 ──────────────────────────────────────
   Only these four centre: Too clean?, Pick a colour, Free, Price.
   Everything else keeps the editorial left alignment. */
#problem .wrap,#do .wrap,#free .wrap,#price .wrap{text-align:center}
#problem .slabel,#do .slabel,#free .slabel,#price .slabel{display:block}
#problem h2.statement,#do h2.statement,#free h2.statement,#price h2.statement,
#problem .lede,#free .lede,#free .c-both,#price .c-price,#price .c-plans,#price .c-fine{margin-inline:auto}
#problem .c-words{justify-content:center}
#do .c-do li{text-align:center}
#free .c-tiers{margin-inline:auto}
#free .c-tier h3{text-align:center}
#free .c-tier li::before{content:""}

/* ── range demo ────────────────────────────────────────────────────────── */
.c-rng{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6) var(--space-8);
  align-items:center;margin-top:var(--space-4)}
.c-rng .c-range{margin:0;padding-top:var(--space-5)}
.c-rng .c-cmp-note{grid-column:1/-1;margin-top:0}
.c-range li button{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--mut);letter-spacing:inherit;text-transform:inherit;line-height:inherit;
  transition:color var(--dur)}
.c-range li button:hover{color:var(--ink)}
.c-range li button[aria-pressed="true"]{color:var(--wi-accent)}
.c-range li button:focus-visible{outline:2px solid var(--wi-accent);outline-offset:4px}
.c-range li:nth-child(n){color:var(--mut)}
.c-range li:has(button[aria-pressed="true"])::before{background:var(--wi-accent);border-color:var(--wi-accent)}
.c-rng.is-missing .c-play{opacity:.4;cursor:default}
@media(max-width:760px){
  .c-rng{grid-template-columns:1fr;justify-items:start}
}

/* ── presets + "how we made it" side by side ───────────────────────────── */
.c-pre{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-9);align-items:start}
.c-pre-r{padding-top:var(--space-2)}
.c-side-h{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:.01em;margin-bottom:var(--space-5);max-width:16ch}
.c-pre-r .lede{margin-bottom:var(--space-5)}
.c-pre-r .c-more{margin-top:0}
@media(max-width:900px){.c-pre{grid-template-columns:1fr;gap:var(--space-7)}}

/* ── footer newsletter on phones ───────────────────────────────────────────
   style.css stacks .siform into a column below 760px, but the input keeps
   flex-basis:260px — which in a column is its HEIGHT. Keep the footer form
   a single row: input grows, round send button beside it. */
@media(max-width:760px){
  footer .siform{flex-direction:row;flex-wrap:nowrap;align-items:center}
  footer .siform input[type=email]{flex:1 1 auto;height:44px}
  footer .fsend{flex:0 0 44px}
}

/* ── full-screen hero, header floats in on scroll ───────────────────────────
   Header stays sticky (it must, to float later) but starts transparent and
   overlays the hero; the hero pulls up under it. colr.js adds .is-scrolled
   once you move, which brings the bar's background back. */
body.c-home>header{background:transparent;border-bottom-color:transparent;
  transition:background-color .25s ease,border-color .25s ease}
body.c-home>header.is-scrolled{background:var(--bg);border-bottom-color:var(--line-soft)}
body.c-home .c-hero{margin-top:-64px;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(64px + var(--space-8))}
@media(max-width:760px){
  body.c-home .c-hero{padding-top:calc(64px + var(--space-6))}
}
/* Phone menu open at the top of the page: give the bar its background back
   so the dropdown does not hang off a see-through header. */
body.c-home>header:has(.menu[open]){background:var(--bg);border-bottom-color:var(--line-soft)}