/* ============================================================================
   Standalone comparison site. Self-contained: no dependency on ancoai.com.
   Brand lives in the tokens below, so a rebrand is a handful of lines.
   ========================================================================== */
:root{
  --paper:#f4f2ee;
  --card:#ffffff;
  --ink:#14161a;
  --ink-2:#54595f;
  --ink-3:#878d94;
  --line:#e2ded7;

  --night:#12151b;
  --snow:#f6f7f9;
  --snow-2:#98a0ac;
  --hair-d:rgba(255,255,255,.12);

  --accent:#1c5cd6;          /* single brand colour, deliberately not Anco emerald */
  --accent-d:#1547a8;
  --accent-l:#6f9dfa;
  --accent-soft:rgba(28,92,214,.09);

  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',sans-serif;
  --radius:20px;
  --radius-s:14px;
  --maxw:1080px;
  --pad:clamp(1.1rem,5vw,3rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent-d)}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.025em;line-height:1.12}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:99px;cursor:pointer;
  padding:.9rem 1.5rem;font:600 .98rem var(--sans);text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-d)}

/* header + footer ---------------------------------------------------------- */
.top{border-bottom:1px solid var(--line);background:var(--card)}
.top__in{max-width:var(--maxw);margin:0 auto;padding:1rem var(--pad);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.top__brand{font:800 1.12rem var(--sans);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.top__by{margin-left:auto;font-size:.86rem;color:var(--ink-2)}
.top__by b{color:var(--ink)}
.foot{background:var(--night);color:var(--snow-2);margin-top:4rem;padding:2.6rem 0 2rem;font-size:.9rem;line-height:1.65}
.foot__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;gap:1.4rem}
.foot b{color:var(--snow)}
.foot a{color:var(--accent-l)}
.foot__base{border-top:1px solid var(--hair-d);padding-top:1.2rem;font-size:.84rem;color:var(--ink-3)}

/* hero --------------------------------------------------------------------- */
.hero{background:var(--night);color:var(--snow);padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,7vw,4.5rem)}
.hero__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:600 .72rem var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-l);margin:0 0 1rem}
.hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-l)}
.hero h1{font-size:clamp(2.1rem,6vw,3.6rem);font-weight:800;color:var(--snow)}
.hero h1 span{color:var(--accent-l)}
.hero p{color:var(--snow-2);font-size:clamp(1rem,2.2vw,1.14rem);max-width:60ch;margin:1.2rem 0 0}

/* sections ----------------------------------------------------------------- */
.sec{padding:clamp(2.4rem,6vw,4rem) 0}
.sec__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.sec__i{font:600 .74rem var(--sans);color:var(--ink-3);letter-spacing:.1em}
.sec__k{font:600 .74rem var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-d)}
.sec h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800}
.sec__lede{color:var(--ink-2);max-width:64ch;margin:.7rem 0 0}

/* faq ---------------------------------------------------------------------- */
.faq{display:grid;gap:.6rem;margin-top:1.8rem}
.faq__item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.faq__q{width:100%;text-align:left;background:none;border:0;padding:1.1rem 1.3rem;cursor:pointer;
  font:600 1.02rem var(--sans);color:var(--ink);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq__icon{color:var(--accent);font-weight:700;flex:0 0 auto;transition:transform .2s}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg)}
.faq__a{display:none;padding:0 1.3rem 1.2rem}
.faq__a p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.65}
.faq__q[aria-expanded="true"]+.faq__a{display:block}
.form-status{font-size:.9rem;color:var(--snow-2);margin:.7rem 0 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ============================================================ 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:4px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:1.8rem}
.sw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-d));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.35rem,3.4vw,2.1rem)/1.18 var(--sans);letter-spacing:-.02em;margin:.6rem 0 .4rem;color:var(--ink)}
.sw-hint{color:var(--ink-2);font-size:.95rem;margin:0 0 1.5rem;max-width:52ch}
.sw-opts{display:grid;gap:.6rem}
.sw-opt{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;padding:1rem 1.15rem;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-s);font:500 1rem/1.35 var(--sans);color:var(--ink);cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.sw-opt:hover{border-color:var(--accent);transform:translateX(3px)}
.sw-opt.is-sel{border-color:var(--accent);background:rgba(28,92,214,.09)}
.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(28,92,214,.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(--accent-d);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(28,92,214,.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(28,92,214,.1);border-color:rgba(28,92,214,.3);color:var(--accent-d)}
.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(--accent-d)}
.sw-cons li::before{content:"−";color:var(--ink-3)}
.sw-more{border:0;background:none;color:var(--accent-d);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(--accent-d);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(--accent-d);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)}

.c-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.1rem,3vw,1.9rem);box-shadow:0 24px 60px -44px rgba(0,0,0,.4)}
.c-controls{display:grid;gap:1.2rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.c-slide label{display:block;font:600 .95rem var(--sans);color:var(--ink-2);margin-bottom:.6rem}
.c-slide label b{color:var(--accent-d);font-size:1.25rem;margin-left:.3rem}
.c-slide input[type=range]{width:100%;accent-color:var(--accent);height:26px}
.c-toggles,.c-curs{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.c-lbl{font:600 .74rem var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-right:.2rem}
.c-tog,.c-cur{background:var(--paper);border:1.5px solid var(--line);border-radius:99px;cursor:pointer;
  padding:.5rem 1rem;font:600 .88rem var(--sans);color:var(--ink-2);transition:all .15s}
.c-tog:hover,.c-cur:hover{border-color:var(--accent)}
.c-tog.is-on,.c-cur.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.c-curs{margin-left:auto}
.c-note{font-size:.9rem;color:var(--ink-2);margin:1.1rem 0 .8rem}

.c-rows{display:grid;gap:.4rem}
.c-row{display:grid;grid-template-columns:26px 96px 1fr auto;gap:.9rem;align-items:center;
  padding:.85rem .9rem;border-radius:var(--radius-s);background:var(--paper);border:1px solid transparent}
.c-row:first-child{background:var(--accent-soft);border-color:rgba(28,92,214,.28)}
.c-rank{font:700 .88rem var(--sans);color:var(--ink-3);text-align:center}
.c-row:first-child .c-rank{color:var(--accent-d)}
.c-logo{width:96px;height:30px;object-fit:contain;object-position:left center}
.c-logo--dark{background:var(--night);border-radius:6px;padding:5px 8px}
.c-mono{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;font:700 1rem var(--sans);color:var(--ink-3)}
.c-name{font:700 1rem var(--sans);color:var(--ink);margin:0}
.c-seen{font:600 .68rem var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-d);
  background:var(--card);border:1px solid rgba(28,92,214,.3);border-radius:99px;padding:.15rem .5rem;
  margin-left:.4rem;text-decoration:none;vertical-align:middle}
.c-seen:hover{background:var(--accent);color:#fff}
.c-tier{font-size:.83rem;color:var(--ink-3);margin:.15rem 0 0;line-height:1.45}
.c-price{text-align:right;white-space:nowrap}
.c-price b{display:block;font:700 1.28rem var(--sans);color:var(--ink);letter-spacing:-.02em}
.c-price span{font-size:.76rem;color:var(--ink-3)}
.c-best{color:var(--accent-d);font-weight:600}
.c-diff{color:var(--ink-3)}

.c-hidden{margin-top:1.3rem;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.c-hidden__h{width:100%;font:600 .74rem var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .2rem}
.c-chip{background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem;
  font:500 .82rem var(--sans);color:var(--ink-2)}
.c-chip em{font-style:normal;color:var(--ink-3);font-size:.92em}

.c-small{margin-top:2rem;display:grid;gap:1rem;max-width:70ch}
.c-small p{font-size:.92rem;color:var(--ink-2);line-height:1.65;margin:0}
.c-small b{color:var(--ink)}
.c-cta{margin-top:2.6rem;background:var(--night);color:var(--snow);border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.4rem)}
.c-cta h2{color:var(--snow);font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:.6rem}
.c-cta p{color:var(--snow-2);margin:0 0 1.2rem;max-width:56ch}
@media(max-width:760px){
  .c-row{grid-template-columns:22px 1fr;gap:.5rem .7rem}
  .c-logo,.c-mono{grid-column:2;width:80px;height:26px}
  .c-mid{grid-column:2}
  .c-price{grid-column:2;text-align:left}
  .c-curs{margin-left:0}
}
/* panel as step 1 of the quiz */
.c-step{font:600 .74rem var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.c-step span{color:var(--accent-d)}
.c-go{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.c-go__hint{font-size:.88rem;color:var(--ink-3)}
.c-panel.is-done{opacity:.62}
.c-panel.is-done .c-go{display:none}
.c-tog span{font-weight:700}
.c-panel.is-done{opacity:1;background:var(--paper);box-shadow:none;padding-top:1rem;padding-bottom:1rem}
.c-panel.is-done .c-controls,.c-panel.is-done .c-note,.c-panel.is-done .c-rows{display:none}
.c-panel.is-done .c-step{margin:0;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink-2)}
.c-panel.is-done .c-step span{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;margin-right:.4rem}
.c-edit{background:none;border:0;color:var(--accent-d);font:600 .9rem var(--sans);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0 .3rem}
/* the cycle pills carry longer labels now, so let them wrap rather than push the grid */
.c-controls{min-width:0}
.c-toggles{min-width:0}
.c-tog{max-width:100%;text-align:left;white-space:normal;line-height:1.25}
.c-slide{min-width:0}
.c-slide input[type=range]{max-width:100%;margin:0}