/* Hallmark · macrostructure: Ecosystem Index (home) + Catalogue (vertical)
 * genre: modern-minimal · tone: technical · theme: custom (yellow/black/cream)
 * nav: N1b three-section · footer: Ft tabular index · enrichment: none
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * ------------------------------------------------------------------------
 * The audience is coaches, not developers, so "technical" is carried by
 * precision and real figures, not by terminal costume: mono is reserved for
 * data (counts, dates, prices) and never used for running prose.
 * ------------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  /* paper */
  --paper:#f4f2ee;
  --paper-2:#eceae4;
  --card:#ffffff;
  --ink:#14161a;
  --ink-2:#51565d;
  --ink-3:#848a93;
  --line:#e2ded7;
  --rule:#d6d1c8;

  --night:#12151b;
  --night-2:#1b1f27;
  --snow:#f6f7f9;
  --snow-2:#99a1ad;
  --hair-d:rgba(255,255,255,.13);

  /* Yellow is a FILL, never text on a light background: anything dark enough
     to pass 4.5:1 on cream reads brown. Ink carries type, yellow carries
     fills, rules and underlines. On the dark bands yellow IS text, 11.7:1. */
  --accent:#ffc700;
  --accent-hi:#ffd633;
  --ink-on-accent:#12151b;
  --accent-soft:rgba(255,199,0,.18);
  --accent-line:rgba(255,199,0,.55);

  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --space-xs:.5rem; --space-sm:.75rem; --space-md:1.25rem; --space-lg:2rem;
  --space-xl:3rem; --space-2xl:4.5rem; --space-3xl:7rem;
  --radius:18px; --radius-s:12px; --radius-xs:8px;
  --maxw:1140px; --pad:clamp(1.15rem,5vw,2.75rem);
  --ease-out:cubic-bezier(.22,.8,.3,1);
  --dur:.18s;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss01" 1}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-style:normal;
  letter-spacing:-.028em;line-height:1.08;font-weight:700;
  overflow-wrap:anywhere;min-width:0}
p{margin:0}
a{color:var(--ink);text-decoration-color:var(--accent);
  text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent-hi)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em}

/* buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;
  border-radius:99px;padding:.78rem 1.4rem;white-space:nowrap;
  font:600 .95rem/1 var(--sans);text-decoration:none;
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--solid{background:var(--accent);color:var(--ink-on-accent)}
.btn--solid:hover{background:var(--accent-hi)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--onDark{background:var(--accent);color:var(--ink-on-accent)}

/* nav N1b ---------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(244,242,238,.9);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:.7rem var(--pad);
  display:flex;align-items:center;gap:var(--space-md)}
.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.nav__brand img{width:26px;height:26px;border-radius:6px}
.nav__brand b{font:700 1.02rem/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.nav__links{display:flex;gap:1.3rem;margin-left:auto}
.nav__links a{font:500 .92rem var(--sans);text-decoration:none;color:var(--ink-2);white-space:nowrap}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__cta{flex:0 0 auto}
/* the technical register, carried by a real figure rather than a mono font */
.nav__data{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);
  white-space:nowrap;padding-left:1rem;border-left:1px solid var(--line)}
/* Between roughly 880 and 1060 everything still showed and the nav overflowed:
   the root has overflow-x:clip, so instead of a scrollbar the primary CTA was
   simply cut off the right edge and unclickable. The meta strip goes first,
   since the hero eyebrow already carries the same sentence. */
@media(max-width:1080px){
  .nav__data{display:none}
}
@media(max-width:860px){
  .nav__links,.nav__data{display:none}
  .nav__in{gap:.75rem}
  .nav__brand{margin-right:auto}
}

/* bands ------------------------------------------------------------------ */
.band{padding:var(--space-2xl) 0}
.band--dark{background:var(--night);color:var(--snow)}
.band--dark h1,.band--dark h2,.band--dark h3{color:var(--snow)}
.band--tint{background:var(--paper-2)}
.rail__head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:var(--space-md);padding-bottom:.7rem;border-bottom:1.5px solid var(--rule)}
.rail__head h2{font-size:clamp(1.3rem,3vw,1.7rem)}
.rail__head .mono{color:var(--ink-3);margin-left:auto}
.lede{color:var(--ink-2);max-width:62ch;font-size:1.04rem}
.band--dark .lede{color:var(--snow-2)}

/* footer ----------------------------------------------------------------- */
.foot{background:var(--night);color:var(--snow-2);padding:var(--space-xl) 0 var(--space-lg);
  font-size:.9rem;line-height:1.6}
.foot a{color:var(--snow);text-decoration-color:var(--accent)}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(2,minmax(0,1fr));
  gap:var(--space-lg);align-items:start}
.foot__grid h4{font:600 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--snow-2);margin-bottom:.7rem}
.foot__grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot__base{border-top:1px solid var(--hair-d);margin-top:var(--space-lg);
  padding-top:var(--space-md);display:flex;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-3)}
.foot__base .mono{color:var(--ink-3)}
@media(max-width:700px){.foot__grid{grid-template-columns:1fr;gap:var(--space-md)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================ software match
   Coaching software quiz + comparison directory (/personal-trainer-software/) */
.sw{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sw-quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,4vw,3rem);box-shadow:0 24px 60px -40px rgba(0,0,0,.45)}
.sw-bar{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin-bottom:1.9rem}
.sw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hi));border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.sw-step{display:none}
.sw-step.is-on{display:block;animation:swIn .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes swIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sw-count{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sw-q{font:700 clamp(1.4rem,3.4vw,2.05rem)/1.15 var(--sans);letter-spacing:-.022em;margin:.5rem 0 .45rem;
  color:var(--ink);max-width:26ch;text-wrap:balance}
.sw-hint{color:var(--ink-2);font-size:.97rem;line-height:1.55;margin:0 0 1.6rem;max-width:56ch}
.sw-opts{display:grid;gap:.6rem}
.sw-opts--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.sw-opt{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;padding:1.05rem 1.1rem;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-s);
  font:500 1.02rem/1.3 var(--sans);color:var(--ink);cursor:pointer;min-width:0;
  transition:border-color .18s,background .18s,box-shadow .18s}
.sw-opt span{flex:1;min-width:0;overflow-wrap:anywhere}
.sw-opt kbd{flex:0 0 auto;font:600 .72rem/1 var(--mono);color:var(--ink-3);background:var(--card);
  border:1px solid var(--line);border-radius:5px;padding:.25rem .4rem;opacity:0;transition:opacity .18s}
.sw-opts:hover .sw-opt kbd,.sw-opt:focus-visible kbd{opacity:1}
.sw-opt:hover{border-color:var(--ink-3);background:var(--card)}
.sw-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sw-opt.is-sel{border-color:var(--accent);background:rgba(255,199,0,.1);
  box-shadow:0 0 0 3px var(--accent-soft)}
.sw-opt.is-sel:hover{border-color:var(--accent);background:rgba(255,199,0,.14)}
.sw-opt.is-sel kbd{opacity:0}
.sw-opt i{flex:0 0 20px;height:20px;border:1.5px solid var(--line);border-radius:50%;position:relative;transition:border-color .18s}
.sw-opt.is-sel i{border-color:var(--accent);background:var(--accent)}
.sw-opt.is-sel i::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}
.sw-multi .sw-opt i{border-radius:6px}
.sw-multi .sw-opt.is-sel i::after{inset:0;background:none;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.sw-nav{display:flex;gap:.7rem;align-items:center;margin-top:1.6rem;flex-wrap:wrap}
.sw-back{background:none;border:0;color:var(--ink-2);font:500 .92rem var(--sans);cursor:pointer;padding:.5rem 0;text-decoration:underline;text-underline-offset:4px}
.sw-back:hover{color:var(--ink)}
.sw-note{background:rgba(255,199,0,.08);border-left:2px solid var(--accent);padding:.85rem 1.05rem;border-radius:0 10px 10px 0;font-size:.92rem;color:var(--ink-2);margin:0 0 1.4rem}

/* result */
.sw-res{display:none}
.sw-res.is-on{display:block}
.sw-recap{font-size:.93rem;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:.95rem 1.15rem;margin-bottom:1.6rem}
.sw-recap b{color:var(--ink);font-weight:600}
.sw-verdict{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:.5rem;display:block}
.sw-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.2rem,3vw,2rem);margin-bottom:1rem}
.sw-card--hero{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,199,0,.13)}
.sw-head{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap}
.sw-logo{flex:0 0 auto;width:112px;height:44px;object-fit:contain;object-position:left center}
.sw-noLogo{font:700 1.15rem var(--sans);color:var(--ink)}
.sw-name{font:700 1.5rem/1.15 var(--sans);letter-spacing:-.02em;margin:0;color:var(--ink)}
.sw-tag{color:var(--ink-2);font-size:.93rem;margin:.3rem 0 0;max-width:60ch}
.sw-price{margin-left:auto;text-align:right}
.sw-price b{display:block;font:700 1.6rem/1 var(--sans);color:var(--ink);letter-spacing:-.02em}
.sw-price span{font-size:.8rem;color:var(--ink-3)}
.sw-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.sw-fact{background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:.4rem .85rem;font:500 .82rem var(--sans);color:var(--ink-2)}
.sw-fact b{color:var(--ink);font-weight:600}
.sw-fact--good{background:rgba(255,199,0,.1);border-color:rgba(255,199,0,.3);color:var(--ink)}
.sw-why{border-left:2px solid var(--accent);padding-left:1rem;margin:1.2rem 0;color:var(--ink-2);font-size:.97rem;line-height:1.6}
.sw-why b{color:var(--ink)}
.sw-pc{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.3rem 0}
.sw-pc h4{font:600 .74rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
.sw-pc ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.sw-pc li{font-size:.92rem;color:var(--ink-2);padding-left:1.3rem;position:relative;line-height:1.45}
.sw-pc li::before{position:absolute;left:0;top:0;font-weight:700}
.sw-pros li::before{content:"+";color:var(--ink)}
.sw-cons li::before{content:"−";color:var(--ink-3)}
.sw-more{border:0;background:none;color:var(--ink);font:600 .92rem var(--sans);cursor:pointer;padding:.5rem 0;text-decoration:underline;text-underline-offset:4px}
.sw-feat{display:none;margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1.2rem}
.sw-feat.is-on{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sw-feat h5{font:600 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 .55rem}
.sw-feat ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.sw-feat li{font-size:.87rem;color:var(--ink-2);line-height:1.4;padding-left:.9rem;position:relative}
.sw-feat li::before{content:"·";position:absolute;left:0;color:var(--accent);font-weight:700}
.sw-acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.sw-plain{color:var(--ink-3);font-size:.85rem;text-decoration:underline;text-underline-offset:3px;align-self:center}
.sw-disc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem 1.2rem;font-size:.88rem;color:var(--ink-2);line-height:1.55;margin:1.4rem 0}
.sw-disc b{color:var(--ink)}
.sw-out{background:var(--night);color:var(--snow);border-radius:var(--radius);padding:clamp(1.4rem,4vw,2.4rem);margin-top:1.4rem}
.sw-out h3{font:700 clamp(1.2rem,2.6vw,1.7rem)/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 .8rem;color:var(--snow)}
.sw-out p{color:var(--snow-2);font-size:.98rem;line-height:1.65;margin:0 0 .9rem;max-width:62ch}
.sw-out strong{color:var(--accent-l)}
.sw-form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.sw-form input{flex:1 1 190px;background:rgba(255,255,255,.06);border:1px solid var(--hair-d);border-radius:12px;padding:.85rem 1rem;color:var(--snow);font:400 .97rem var(--sans)}
.sw-form input::placeholder{color:var(--snow-2)}
.sw-form input:focus{outline:0;border-color:var(--accent-l)}

/* directory */
.sw-cat{margin-top:3rem}
.sw-cat h3{font:700 clamp(1.2rem,2.6vw,1.6rem)/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 .3rem;color:var(--ink)}
.sw-cat p{color:var(--ink-2);font-size:.95rem;margin:0 0 1.4rem;max-width:64ch}
.sw-rows{display:grid;gap:.9rem}
.sw-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:1.15rem 1.3rem;display:grid;grid-template-columns:130px 1fr auto;gap:1.2rem;align-items:center}
.sw-row__logo{width:118px;height:38px;object-fit:contain;object-position:left center}
.sw-row__n{font:700 1.06rem var(--sans);color:var(--ink);margin:0}
.sw-row__t{font-size:.88rem;color:var(--ink-2);margin:.2rem 0 0;max-width:58ch}
.sw-row__p{text-align:right;white-space:nowrap}
.sw-row__p b{display:block;font:700 1.15rem var(--sans);color:var(--ink)}
.sw-row__p span{font-size:.78rem;color:var(--ink-3)}
.sw-poa{font:600 .8rem var(--sans);color:var(--ink-3)}
@media(max-width:820px){
  .sw-pc{grid-template-columns:1fr;gap:1rem}
  .sw-row{grid-template-columns:1fr;gap:.7rem}
  .sw-row__logo{width:100px;height:32px}
  .sw-row__p{text-align:left}
  .sw-price{margin-left:0;text-align:left;width:100%}
  .sw-head{gap:.7rem}
}
/* white-on-transparent vendor marks need a dark chip to be visible on the cream card */
.sw-logo--dark,.sw-row__logo--dark{background:var(--night);border-radius:8px;padding:7px 10px;box-sizing:border-box}
/* no logo available: a monogram reads as a deliberate placeholder, and avoids
   repeating the product name that already sits next to it */
.sw-mono{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  font:700 1.15rem var(--sans);color:var(--ink-3)}
/* products Dave has actually used and published a review of: the one thing this
   page has that a scraped comparison site cannot copy */
.sw-seen{display:inline-block;vertical-align:middle;margin-left:.5rem;background:var(--accent-soft);
  color:var(--ink);border-radius:99px;padding:.25rem .6rem;font:600 .68rem var(--sans);
  letter-spacing:.05em;text-transform:uppercase}
.sw-review{display:inline-flex;align-items:center;gap:.45rem;align-self:center;
  border:1.5px solid var(--line);border-radius:99px;padding:.85rem 1.25rem;
  font:600 .93rem var(--sans);color:var(--ink);text-decoration:none;transition:border-color .15s}
.sw-review:hover{border-color:var(--accent)}
.sw-review::before{content:"▶";color:#e03131;font-size:.8em}
.sw-review em{font-style:normal;color:var(--ink-3);font-weight:500}

/* ============================================================ cost calculator
   The page's strongest asset: what each platform really costs at your size. */
.hero--tight{padding:clamp(2.4rem,6vw,4rem) 0 clamp(2rem,5vw,3rem)}
.hero__alt{font-size:.95rem;margin-top:1rem}
.hero__alt a{color:var(--accent-l)}
.top__nav{font:500 .93rem var(--sans);color:var(--ink-2);text-decoration:none;margin-left:1.1rem}
.top__nav:hover{color:var(--ink)}


/* panel as step 1 of the quiz */


/* the cycle pills carry longer labels now, so let them wrap rather than push the grid */


/* feature pills: one tap to want it, two to insist on it */


/* one question at a time: a slider and a pill grid each need their own screen */
.sw-range{margin:1.5rem 0 .5rem;max-width:34rem}
.sw-scale{display:flex;justify-content:space-between;margin-top:.5rem;
  font:500 .78rem/1 var(--mono);color:var(--ink-3)}
.sw-range b{display:block;font:800 clamp(1.5rem,4vw,2.1rem) var(--sans);color:var(--ink);
  letter-spacing:-.02em;margin-bottom:.9rem}
.sw-range input[type=range]{width:100%;max-width:100%;margin:0}


/* The accent on a light background is a fill or a rule, never text: a yellow
   dark enough to be readable type on cream is brown, which is the colour we
   just removed. These carry it as a highlight instead. */
.sw-range b,.c-slide label b{color:var(--ink);
  box-shadow:inset 0 -.42em 0 var(--accent-soft);padding:0 .12em}
.sec__k,.sw-verdict,.c-step span{color:var(--ink)}
.sw-pros li::before{color:var(--ink);font-weight:800}


/* ============================================================ home + vertical
   Ecosystem Index rails and the Catalogue index. */
.home-top{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}
.home-kicker{color:var(--accent);margin-bottom:var(--space-md)}
.home-h1{font-size:clamp(2.3rem,6.2vw,4.3rem);font-weight:800;letter-spacing:-.04em;
  margin-bottom:var(--space-md);max-width:16ch}
.home-acts{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:var(--space-lg)}
.btn--onDarkGhost{color:var(--snow);box-shadow:inset 0 0 0 1.5px var(--hair-d)}
.btn--onDarkGhost:hover{box-shadow:inset 0 0 0 1.5px var(--snow-2)}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:.8rem}
.vcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:1.15rem 1.2rem 1.1rem;text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.vcard h3{font-size:1.12rem;margin:.45rem 0 .3rem}
.vcard p{color:var(--ink-2);font-size:.9rem;line-height:1.5}
.vcard__n{color:var(--ink-3);text-transform:uppercase;letter-spacing:.09em;font-size:.64rem}
.vcard--live{border-left:3px solid var(--accent)}
.vcard--live:hover{border-color:var(--ink);transform:translateY(-2px)}
.vcard--live:hover .vcard__go{text-decoration-color:var(--accent)}
.vcard__go{display:inline-block;margin-top:.7rem;font-weight:600;font-size:.88rem;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:4px;text-decoration-thickness:2px;transition:text-decoration-color var(--dur)}
.vcard--soon{opacity:.62;background:transparent;border-style:dashed}
.vcard--soon h3{font-weight:600}

.chkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--space-md)}
.chk h3{font-size:1rem;margin-bottom:.4rem;padding-top:.9rem;border-top:2px solid var(--accent)}
.chk p{color:var(--ink-2);font-size:.92rem}

.rvrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-md)}
.rv{display:flex;align-items:center;justify-content:center;width:132px;height:48px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xs);padding:8px 12px}
.rv img{max-width:100%;max-height:100%;object-fit:contain}
.rv:hover{border-color:var(--ink)}

.vtop__h,.sl-top__h{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.035em;
  margin:.6rem 0 var(--space-md)}
.vtop__note{color:var(--snow-2)}
.band--dark .mono a{color:var(--snow)}
.sl-band{padding-top:var(--space-lg)}

.prose{max-width:68ch}
.prose h2{font-size:1.25rem;margin:var(--space-lg) 0 .5rem;padding-top:.8rem;
  border-top:1.5px solid var(--rule)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose p{color:var(--ink-2);margin-bottom:.8rem}
.prose .mono{color:var(--ink)}
@media(max-width:600px){.rv{width:calc(50% - .3rem)}}
.rv--dark{background:var(--night);border-color:var(--night)}
/* The native range thumb/track inherit the browser's own accent, which on this
   build was shipping Chrome blue into a yellow-and-black page. */
input[type=range]{accent-color:var(--accent);height:1.6rem}
/* the highlight should hug the words, not the column */
.sw-range b,.c-slide label b{display:inline-block}
/* Mobile nav: the wordmark plus a four-word CTA does not fit 375px, and the CTA
   is the one thing that must never be clipped. Below 560 the brand collapses to
   its mark and the CTA to one word. */
@media(max-width:560px){
  .nav__brand b{display:none}
  .nav__cta{padding:.6rem 1rem;font-size:.88rem}
  .nav__cta .nav__cta-long{display:none}
}
/* The forced break is a desktop line-length decision; on a phone it creates a
   ragged three-line wrap. */
@media(max-width:700px){
  /* The forced break is a desktop decision. On a phone the line wraps on its
     own, and a greedy wrap left "business." alone on the last line, which on
     the largest type on the page reads as a mistake. `balance` evens the
     lines out; browsers without it just wrap greedily, as before. */
  .home-h1 br{display:none}
  .home-h1{text-wrap:balance}
}

/* ===================================================== hero motion
   A long list shortening itself. The rows are the catalogue, the yellow ones
   are what survives the filter: the product, drawn rather than described.
   Deliberately NOT a video - a stock clip on a page about honest pricing is
   both generic and a 2MB tax on first paint.
   The delay follows row order, so the collapse reads as one sweep down the
   list rather than random twinkling, and the filtered state is held for ~8s
   so the "many became few" picture is what you actually see most of the time. */
.home-top{position:relative;overflow:hidden;isolation:isolate}
.home-top > .wrap{position:relative;z-index:1}
.hm{position:absolute;inset:0;z-index:0;pointer-events:none;
  /* fades out well before it reaches the copy, so contrast is never in question */
  -webkit-mask-image:linear-gradient(100deg,transparent 0 40%,#000 74%,#000 100%);
          mask-image:linear-gradient(100deg,transparent 0 40%,#000 74%,#000 100%)}
.hm__b{position:absolute;right:-4%;top:var(--t);height:6px;width:var(--w);
  border-radius:3px;background:#2a303b;opacity:.5;transform-origin:right center;
  animation:hmSift 12s var(--ease-out) infinite;animation-delay:var(--d)}
.hm__b--keep{background:var(--accent);opacity:.14;animation-name:hmKeep}
@keyframes hmSift{
  0%,6%    {opacity:.5;  transform:scaleX(1)}
  16%,84%  {opacity:.06; transform:scaleX(.2)}
  94%,100% {opacity:.5;  transform:scaleX(1)}
}
@keyframes hmKeep{
  0%,6%    {opacity:.14; transform:scaleX(1)}
  16%,84%  {opacity:.4;  transform:scaleX(1.05)}
  94%,100% {opacity:.14; transform:scaleX(1)}
}
@media(max-width:1280px){
  /* the copy column is a fixed width, so on a narrower window it eats more of
     the viewport: start the rows further right or they run into the headline */
  .hm{-webkit-mask-image:linear-gradient(100deg,transparent 0 60%,#000 86%,#000 100%);
              mask-image:linear-gradient(100deg,transparent 0 60%,#000 86%,#000 100%)}
}
@media(max-width:900px){
  /* a phone hero has no clear space beside the copy, and a texture squeezed
     into the headroom above the eyebrow is noise rather than design, so the
     type carries the hero on its own below this width */
  .hm{display:none}
}
@media (prefers-reduced-motion: reduce){
  /* the picture still reads, it simply stops moving */
  .hm__b{animation:none;opacity:.1;transform:scaleX(.2);transform-origin:right center}
  .hm__b--keep{opacity:.34;transform:none}
}

/* ===================================================== also considered
   The honest half of a recommendation: what lost, and the arithmetic. */
.sw-beaten{margin:var(--space-md) 0;padding:1.25rem 1.4rem;border:1px solid var(--line);
  border-radius:14px;background:var(--paper-2)}
.sw-beaten h3{font:700 1.05rem/1.2 var(--display);letter-spacing:-.02em;margin:0 0 .35rem}
.sw-beaten__i{font-size:.88rem;color:var(--ink-2);margin:0 0 .9rem;max-width:62ch}
.sw-beaten ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sw-beaten li{font-size:.92rem;color:var(--ink-2);line-height:1.5;
  padding-left:1rem;border-left:2px solid var(--line)}
.sw-beaten li b{color:var(--ink)}
.sw-beaten__s{display:inline-block;font:600 .78rem/1 var(--mono);color:var(--ink);
  background:var(--accent-soft);padding:.26rem .5rem;border-radius:5px;white-space:nowrap}
/* the verdict on what they already pay for, which is why most of them came */
.sw-now{margin:0 0 var(--space-md);padding:1.1rem 1.3rem;border-radius:14px;
  font-size:.95rem;line-height:1.55;border:1px solid var(--line)}
.sw-now b{display:block;margin-bottom:.2rem;color:var(--ink)}
.sw-now--go{background:var(--accent-soft);border-color:transparent}
.sw-now--stay{background:var(--paper-2);color:var(--ink-2)}
@media(max-width:560px){
  .sw-beaten{padding:1rem 1.1rem}
  .sw-beaten__s{margin-top:.3rem}
}

/* ===================================================== four angles
   One winner hid the catalogue. Four honest reads of the same answers. */
.sw-angles{margin:0 0 var(--space-md)}
.sw-angles h3{font:700 1.15rem/1.2 var(--display);letter-spacing:-.02em;margin:0 0 .2rem}
.sw-angles__i{font-size:.9rem;color:var(--ink-2);margin:0 0 .9rem;max-width:58ch}
.sw-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.sw-tile{display:flex;flex-direction:column;gap:.45rem;padding:1rem .95rem;background:#fff;
  border:1px solid var(--line);border-radius:14px;min-width:0}
.sw-tile--fit{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sw-tile__k{font:600 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3)}
.sw-tile--fit .sw-tile__k{color:var(--ink)}
.sw-tile__l{height:30px;display:flex;align-items:center}
.sw-tlogo{max-height:26px;max-width:100%;width:auto;object-fit:contain}
.sw-tlogo--dark{padding:3px 5px;background:var(--ink);border-radius:5px;box-sizing:content-box}
.sw-tmono{font:700 1.1rem/1 var(--display);color:var(--ink-3)}
.sw-tile h4{font:700 1rem/1.2 var(--display);letter-spacing:-.02em;margin:0;
  overflow-wrap:anywhere;min-width:0}
.sw-tile__p{margin:0;font-size:.85rem;color:var(--ink-2)}
.sw-tile__p b{font-size:1.15rem;color:var(--ink);font-family:var(--display)}
.sw-tile__n{margin:0;font-size:.82rem;line-height:1.45;color:var(--ink-2);flex:1}
.sw-tile__a{margin-top:.2rem;font:600 .84rem/1 var(--sans);color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:2px;align-self:flex-start}
.sw-tile__a:hover{background:var(--accent-soft)}
@media(max-width:900px){ .sw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .sw-tiles{grid-template-columns:minmax(0,1fr)} }

/* what the platform will not touch: the only question that is not about software */
.sw-left{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0}
.sw-lp{font:500 .88rem/1 var(--sans);color:var(--paper);background:transparent;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:.6rem .85rem;cursor:pointer;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.sw-lp:hover{border-color:var(--accent)}
.sw-lp[data-on]{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent);font-weight:600}
.sw-leftout{margin:.6rem 0 0;font-size:.95rem;line-height:1.6}
.sw-leftout b{color:var(--accent-hi)}
/* a dead end that explains itself beats a shrug */
.sw-block{list-style:none;margin:.6rem 0 1rem;padding:0;display:grid;gap:.4rem}
.sw-block li{font-size:.92rem;line-height:1.5;color:var(--ink-2);padding-left:.9rem;
  border-left:2px solid var(--accent)}
.sw-block b{color:var(--ink)}

/* The page header is useful on arrival and pure cost once the quiz is running:
   at 900px tall it was pushing a seven-option question below the fold. */
.sl-top{transition:padding .45s var(--ease-out)}
.sl-top .lede,.sl-top .mono{transition:opacity .3s var(--ease-out),max-height .45s var(--ease-out)}
.sl-top.is-small{padding-top:1.5rem;padding-bottom:1.5rem}
.sl-top.is-small .lede,.sl-top.is-small .mono{opacity:0;max-height:0;overflow:hidden;margin:0}
.sl-top.is-small .sl-top__h{font-size:clamp(1.3rem,3vw,1.7rem);margin:0}
@media (prefers-reduced-motion:reduce){
  .sl-top,.sl-top .lede,.sl-top .mono{transition:none}
}
/* a capped multi-select needs to say where you are, or the fourth tap reads as broken */
.sw-cap{margin-left:.7rem;padding:.2rem .5rem;border-radius:5px;background:var(--paper-2);
  color:var(--ink-2);letter-spacing:.04em;text-transform:none;font-weight:500}
.sw-cap.is-full{background:var(--accent-soft);color:var(--ink)}
/* A tap at the cap cannot do anything, so it says so rather than feeling dead. */
@keyframes swNope{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sw-opt--nope{animation:swNope .22s var(--ease-out)}
@keyframes swFlash{0%{background:var(--accent);color:var(--ink-on-accent)}100%{}}
.sw-cap--flash{animation:swFlash .5s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .sw-opt--nope,.sw-cap--flash{animation:none}
}
@media(max-width:560px){
  /* on a phone the counter and the cap note collided mid-sentence */
  .sw-count{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;line-height:1.3}
  .sw-cap{margin-left:0}
}