/* ============================================================
   WebToolBench — visitor stylesheet (v4, consolidated rewrite)

   Principles taken from the 2026 research:
     · Typography leads. One oversized statement, not ten competing ones.
     · Space is the main tool. Density is earned, never default.
     · Colour is restrained — neutral base, one accent that carries meaning.
     · Motion is a micro-interaction, never a performance.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* neutral ramp */
  --n0:#FFFFFF; --n1:#F7F9FA; --n2:#EEF2F3; --n3:#DCE4E6;
  --n4:#C2CDD1; --n5:#7C909B; --n6:#4A5B66; --n7:#1F2A31; --n8:#080D10;

  --ink:var(--n8); --ink-2:var(--n7); --ink-3:var(--n6); --ink-4:var(--n5);
  --paper:var(--n0); --paper-2:var(--n1); --paper-3:var(--n2);
  --line:var(--n3); --line-soft:var(--n2);

  /* Brand. #FC3468 and #F3680B are used for fills, buttons and icons where the
     3:1 UI-component threshold applies. Text on white uses the -ink variants,
     same hue, darkened until they clear 4.5:1. */
  --brand:#FC3468;          /* primary — fills, buttons, icons */
  --brand-strong:#B8123F;   /* primary for text on light: 6.57:1 */
  --brand-deep:#8E0A2E;
  --brand-bright:#FF6E92;
  --brand-tint:#FFEDF2;
  --brand-soft:#FFC9D8;
  --brand-2:#F3680B;        /* secondary — fills and accents */
  --brand-2-ink:#A34405;    /* secondary for text on light: 6.20:1 */
  --brand-2-tint:#FFF0E2;
  --spark:#12B877;          /* green markers */
  --spark-ink:#067A4E;      /* green for text on light: 5.38:1 */
  --spark-tint:#E3F7EE;
  --pass:#0E6B3E; --pass-tint:#E3F4E9;
  --warn:#8A5209; --warn-tint:#FBF0DE;
  --fail:#A81733; --fail-tint:#FBE9EC;

  --readout:#080D10; --readout-2:#101A20; --readout-text:#D4E3EA; --readout-dim:#74909E;

  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px;
  --s6:30px; --s7:42px; --s8:56px; --s9:72px; --s10:96px;

  --r1:10px; --r2:14px; --r3:20px; --r4:28px; --rp:999px;

  --sh1:0 1px 2px rgb(11 17 20/.05);
  --sh2:0 1px 2px rgb(11 17 20/.04), 0 8px 24px -8px rgb(11 17 20/.12);
  --sh3:0 2px 4px rgb(11 17 20/.04), 0 24px 48px -16px rgb(11 17 20/.22);
  --ease:cubic-bezier(.22,.9,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#EDF3F5; --ink-2:#C6D4DA; --ink-3:#95A9B3; --ink-4:#74899A;
    --paper:#0B1114; --paper-2:#10181D; --paper-3:#18232A;
    --line:#1F2C34; --line-soft:#16212700;
    /* On a dark surface the originals clear 4.5:1, so they are used directly. */
    --brand:#FF5C85;
    --brand-strong:#FF8AA8;
    --brand-deep:#FC3468;
    --brand-bright:#FF8AA8;
    --brand-tint:#2C0F19;
    --brand-soft:#4A1628;
    --brand-2:#FF9A4D;
    --brand-2-ink:#FFB275;
    --brand-2-tint:#2B1A0C;
    --spark:#2FD98F;
    --spark-ink:#5FE8AC;
    --spark-tint:#0C2A1E;
    --pass:#4FD08A; --pass-tint:#0F2A1D;
    --warn:#E0A64C; --warn-tint:#2C2213;
    --fail:#F0788C; --fail-tint:#2E161B;
    --readout:#05090B; --readout-2:#0E161B;
    --sh1:0 1px 2px rgb(0 0 0/.5);
    --sh2:0 1px 2px rgb(0 0 0/.4), 0 8px 24px -8px rgb(0 0 0/.6);
    --sh3:0 2px 4px rgb(0 0 0/.4), 0 24px 48px -16px rgb(0 0 0/.7);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--brand) 26%,transparent)}

.wrap{width:min(1220px,100% - var(--s5)*2);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - var(--s5)*2)}
.muted{color:var(--ink-3)}
.small{font-size:.88rem}
.mono{font-family:var(--mono);font-size:.9em;font-variant-ligatures:none}
.breakable{word-break:break-word;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.icon{display:block;flex:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:100;background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:var(--r1);font:600 .9rem var(--display)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.site-head__inner{display:flex;align-items:center;gap:var(--s6);min-height:74px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand__mark{display:block;line-height:0;flex:none;border-radius:9px;
  box-shadow:0 3px 12px -3px color-mix(in srgb,var(--brand) 55%,transparent);
  transition:transform .25s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-5deg) scale(1.05)}
.brand__name{font:700 1.14rem/1 var(--display);letter-spacing:-.035em}
.nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto;flex-wrap:wrap}
.nav a{
  padding:9px 15px;border-radius:var(--rp);
  font:500 .92rem/1 var(--display);letter-spacing:-.012em;
  color:var(--ink-3);text-decoration:none;transition:background .16s,color .16s;
}
.nav a:hover{background:var(--paper-3);color:var(--ink)}
.nav a.is-active{background:var(--brand-tint);color:var(--brand-strong);font-weight:600}
.nav__search{margin-left:var(--s2)}
.nav__search input{
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink);
  padding:10px 17px;border-radius:var(--rp);font:inherit;font-size:.88rem;width:180px;
  transition:width .22s var(--ease),border-color .16s,box-shadow .16s;
}
.nav__search input:focus{outline:none;width:225px;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-tint)}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;
  transition:transform .24s var(--ease),opacity .2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero: typography-led ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:var(--s10) 0 var(--s9);
  background:
    radial-gradient(ellipse 60% 50% at 8% -10%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 65%),
    radial-gradient(ellipse 50% 45% at 92% 5%, color-mix(in srgb,#5B6CFF 11%,transparent), transparent 65%),
    var(--paper);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 25%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 25%,transparent 72%);
  opacity:.6;
}
.hero .wrap{position:relative}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--brand-strong);background:var(--brand-tint);
  padding:9px 16px;border-radius:var(--rp);margin-bottom:var(--s5);
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{
  font:700 clamp(2.6rem,7vw,5rem)/0.98 var(--display);
  letter-spacing:-.055em;margin:0 0 var(--s5);max-width:15ch;
  text-wrap:balance;
}
.hero__sub{
  font-size:clamp(1.06rem,1.7vw,1.28rem);line-height:1.6;
  color:var(--ink-3);max-width:54ch;margin:0 0 var(--s6);
}
.hero__searchwrap{position:relative;max-width:620px}
.hero__search{
  position:relative;display:flex;align-items:center;gap:var(--s3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rp);
  padding:7px 7px 7px 22px;box-shadow:var(--sh2);
  transition:border-color .2s,box-shadow .2s;
}
.hero__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint),var(--sh2)}
.hero__search-icon{display:flex;color:var(--ink-4);flex:none}
.hero__search input{flex:1;border:0;background:none;padding:14px 0;font:inherit;font-size:1.02rem;color:var(--ink);min-width:0}
.hero__search input:focus{outline:none}
.hero__stats{display:flex;gap:var(--s7);margin-top:var(--s7);flex-wrap:wrap}
.hero__stat strong{
  display:block;font:700 2rem/1 var(--display);letter-spacing:-.04em;
  background:linear-gradient(145deg,var(--ink),color-mix(in srgb,var(--brand) 65%,var(--ink)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__stat span{font-size:.83rem;color:var(--ink-4);margin-top:var(--s1);display:block}

/* ---------- live search ---------- */
.livesearch{
  position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh3);overflow:hidden;max-height:min(60vh,440px);overflow-y:auto;
  animation:dropIn .22s var(--ease);
}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.livesearch__item{
  display:flex;flex-direction:column;gap:3px;padding:15px 22px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--line-soft);transition:background .12s;
}
.livesearch__item:last-child{border-bottom:0}
.livesearch__item:hover,.livesearch__item.is-cursor{background:var(--brand-tint)}
.livesearch__item strong{font:600 .98rem var(--display);letter-spacing:-.02em}
.livesearch__item span{font-size:.85rem;color:var(--ink-3)}
.livesearch__cat{font:500 .64rem/1 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--brand)}
.livesearch__empty{padding:26px;text-align:center;color:var(--ink-3);font-size:.92rem}

/* ---------- sections ---------- */
.block{padding:var(--s9) 0}
.block--tight{padding-bottom:var(--s6)}
.block + .block{border-top:1px solid var(--line-soft)}
.block__head{margin-bottom:var(--s6);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.block h2{
  font:600 clamp(1.6rem,3vw,2.1rem)/1.15 var(--display);
  letter-spacing:-.045em;margin:0 0 var(--s2);text-wrap:balance;
}
.block h2 a{color:inherit;text-decoration:none}
.block h2 a:hover{color:var(--brand)}
.block__head p{margin:0;color:var(--ink-3);font-size:1rem;max-width:52ch}
.count{
  font:500 .72rem/1 var(--mono);color:var(--ink-4);
  background:var(--paper-3);padding:5px 10px;border-radius:var(--rp);
  vertical-align:.35em;margin-left:var(--s2);
}
.more{font:600 .94rem var(--display);text-decoration:none;white-space:nowrap;color:var(--brand-strong)}
.more:hover{text-decoration:underline}

/* ---------- cards ---------- */
.card-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));align-items:stretch}
.card-grid--lg{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.card a{
  display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;
  padding:var(--s5) var(--s5) var(--s4);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r2);
  text-decoration:none;color:inherit;
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;
}
.card a::after{
  content:"";position:absolute;left:var(--s5);right:var(--s5);bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),transparent);
  opacity:0;transform:translateY(3px);transition:opacity .22s,transform .22s var(--ease);
}
.card a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--sh3)}
.card a:hover::after{opacity:1;transform:none}
.card__icon{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--s3);
  border-radius:12px;flex:none;
  background:linear-gradient(150deg,var(--brand),var(--brand-strong));
  color:#fff;border:0;
  box-shadow:0 4px 12px -5px color-mix(in srgb,var(--brand) 70%,transparent);
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s;
}
.card a:hover .card__icon{
  transform:scale(1.08) rotate(-5deg);
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 85%,transparent);
}
.card__eyebrow{font:500 .63rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--brand);margin-bottom:6px}
.card strong{font:600 1.04rem/1.3 var(--display);letter-spacing:-.028em;margin-bottom:5px;color:var(--ink)}
.card__desc{font-size:.88rem;color:var(--ink-3);line-height:1.5}
.card__foot{
  margin-top:auto;padding-top:var(--s3);
  font:500 .7rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);
}
.card__rank{
  position:absolute;top:var(--s4);right:var(--s5);
  font:600 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--ink-4);
  background:var(--paper-3);padding:5px 9px;border-radius:var(--rp);pointer-events:none;
  transition:background .2s,color .2s;
}
.card a:hover .card__rank{background:var(--brand-tint);color:var(--brand-strong)}
/* Uniform grid. The earlier bento span left the first card with a tall,
   half-empty body, which read as a padding bug rather than emphasis. */
.card-grid--feature{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
@media (prefers-reduced-motion:no-preference){
  .card,.catblock{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- category blocks ---------- */
.catblock{
  padding:var(--s6);margin-bottom:var(--s4);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r4);
}
.catblock__head{margin-bottom:var(--s5)}
.catblock__head h3{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font:600 1.4rem/1.25 var(--display);letter-spacing:-.038em;margin:0 0 var(--s2);
}
.catblock__head h3 a{color:inherit;text-decoration:none}
.catblock__head h3 a:hover{color:var(--brand)}
.catblock__icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--brand-tint);color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 14%,transparent);
}
.catblock__head p{margin:0;color:var(--ink-3);font-size:.96rem;max-width:56ch}

/* ---------- page chrome ---------- */
.crumbs{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;padding:var(--s5) 0 0;font:500 .84rem var(--display)}
.crumbs a{padding:6px 12px;border-radius:var(--rp);background:var(--paper-3);color:var(--ink-3);
  text-decoration:none;transition:background .16s,color .16s}
.crumbs a:hover{background:var(--brand-tint);color:var(--brand-strong)}
.crumbs > span[aria-hidden]{color:var(--ink-4);opacity:.5}
.crumbs span[aria-current]{padding:6px 12px;color:var(--ink-3)}

.page-head{padding:var(--s6) 0 var(--s5)}
.page-head h1{font:700 clamp(2rem,4.5vw,3rem)/1.06 var(--display);letter-spacing:-.05em;margin:0 0 var(--s3);text-wrap:balance}
.page-head__sub{color:var(--ink-3);margin:0;font-size:1.1rem;max-width:60ch}
.page-head__meta{margin:var(--s3) 0 0;font:500 .8rem var(--mono);color:var(--ink-4);letter-spacing:.03em}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8);align-items:start;padding-bottom:var(--s9)}
.layout__side{position:sticky;top:98px;display:flex;flex-direction:column;gap:var(--s4)}

.tool-head{padding:var(--s6) 0}
.tool-head__icon{
  display:grid;place-items:center;width:62px;height:62px;border-radius:19px;margin-bottom:var(--s5);
  background:linear-gradient(150deg,var(--brand),var(--brand-strong));color:#fff;
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--brand) 85%,transparent);
}
.tool-head h1{font:700 clamp(2rem,4.4vw,2.9rem)/1.06 var(--display);letter-spacing:-.05em;margin:0 0 var(--s3);text-wrap:balance}
.tool-head__tagline{color:var(--ink-3);font-size:1.14rem;margin:0;max-width:58ch;line-height:1.55}
.tool-head__meta{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);
  font:500 .85rem var(--mono);color:var(--ink-4)}
.tool-head__rating{display:flex;align-items:center;gap:var(--s2)}
.stars{color:#DFA224;letter-spacing:1.5px}

/* ---------- forms ---------- */
.tool-box{
  position:relative;padding:var(--s8) var(--s6) var(--s6);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r4);
  box-shadow:var(--sh1);
}
.tool-box::before{
  content:"Enter details";position:absolute;top:var(--s5);left:var(--s6);
  font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.17em;color:var(--ink-4);
}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s5)}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field--wide{grid-column:1/-1}
.field__label{font:600 .86rem var(--display);color:var(--ink-2);letter-spacing:-.012em;display:flex;align-items:center;gap:5px}
.field__label em{color:var(--fail);font-style:normal}
.field__help{font-size:.82rem;color:var(--ink-4);line-height:1.5}
.field input,.field select,.field textarea,
.review-form input,.review-form select,.review-form textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r1);
  font:inherit;font-size:.97rem;background:var(--paper);color:var(--ink);
  transition:border-color .16s,box-shadow .16s;
}
.field textarea{min-height:104px;line-height:1.6;resize:vertical}
.field textarea.mono,textarea.mono{font-family:var(--mono);font-size:.88rem}
.field input:focus,.field select:focus,.field textarea:focus,
.review-form input:focus,.review-form textarea:focus,.review-form select:focus{
  border-color:var(--brand);outline:none;box-shadow:0 0 0 4px var(--brand-tint);
}
.radios{display:flex;gap:var(--s5);flex-wrap:wrap}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-size:.91rem;line-height:1.5;cursor:pointer}
.check input{margin:3px 0 0;flex:none;accent-color:var(--brand);width:17px;height:17px}
.check--standalone{grid-column:1/-1}
.optgroup{
  border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s5);margin:0 0 var(--s4);background:var(--paper);
}
.optgroup legend{font:600 .69rem/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--brand);padding:0 var(--s2)}
.optgroup__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:var(--s3)}
.tool-form__actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap;align-items:center}
.tool-form__runs{font:500 .78rem var(--mono);color:var(--ink-4);margin-left:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:14px 26px;border-radius:var(--rp);border:1px solid var(--line);
  background:var(--paper);color:var(--ink);
  font:600 .96rem/1 var(--display);letter-spacing:-.015em;
  cursor:pointer;text-decoration:none;
  transition:transform .16s var(--ease),background .16s,border-color .16s,box-shadow .16s;
}
.btn:hover{border-color:var(--ink-4);transform:translateY(-2px)}
.btn:active{transform:none}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.btn--primary{
  background:linear-gradient(145deg,var(--brand),var(--brand-strong));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 16px -5px color-mix(in srgb,var(--brand) 75%,transparent);
}
.btn--primary:hover{color:#fff;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--brand) 85%,transparent)}
.btn--ghost{background:transparent}
.btn--sm{padding:10px 18px;font-size:.87rem}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgb(255 255 255/.35);
  border-top-color:#fff;animation:spin .62s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- results: the instrument readout ---------- */
.results{
  margin:var(--s6) 0 0;background:var(--readout);color:var(--readout-text);
  border-radius:var(--r4);overflow:hidden;box-shadow:var(--sh3);position:relative;
  animation:resultIn .36s var(--ease);
}
@keyframes resultIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.results[hidden]{display:none}
.results::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand-bright),transparent);z-index:1}
.results__title{
  display:flex;align-items:center;gap:var(--s3);margin:0;
  padding:18px var(--s6);background:rgb(255 255 255/.04);
  border-bottom:1px solid rgb(255 255 255/.08);
  font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--brand-bright);
}
.results__title::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--brand-bright);box-shadow:0 0 9px var(--brand-bright)}
.results > *:not(.results__title){margin-inline:var(--s6)}
.results > *:last-child{margin-bottom:var(--s6)}
.results h3{font:600 1.04rem var(--display);margin:var(--s6) var(--s6) var(--s3);color:#fff}
.results .muted{color:var(--readout-dim)}
.results a{color:var(--brand-bright)}
.results__loading{
  font:500 .82rem var(--mono);color:var(--brand-bright);margin:0;padding:var(--s8) 0;
  text-align:center;letter-spacing:.14em;text-transform:uppercase;
}
.results__loading::after{content:"";display:inline-block;width:1.2em;text-align:left;
  animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.rec-type{font:600 .72rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--brand-bright);margin:var(--s5) var(--s6) var(--s2)}
.headline-result{
  font:600 clamp(1.5rem,3.5vw,2.1rem)/1.15 var(--mono);letter-spacing:-.03em;
  padding:var(--s5);background:var(--readout-2);border-radius:var(--r2);
  color:var(--brand-bright);border:1px solid rgb(47 224 196/.16);margin-bottom:var(--s5);
}
.results .table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:var(--s4)}
.results .table th,.results .table td{text-align:left;padding:11px 15px;border-bottom:1px solid rgb(255 255 255/.08);vertical-align:top}
.results .table thead th{font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--readout-dim);background:rgb(255 255 255/.03)}
.results .table tbody th{width:36%;font-weight:500;color:var(--readout-dim);font-family:var(--sans)}
.results .table tbody tr:last-child th,.results .table tbody tr:last-child td{border-bottom:0}

.verdict{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s5);border-radius:var(--r2);
  margin-bottom:var(--s5);border-left:4px solid;background:var(--readout-2)}
.verdict strong{font:600 1.18rem var(--display)}
.verdict span{font-size:.92rem;opacity:.82}
.verdict--good{border-color:#3FD98A;color:#6FE8AC}
.verdict--info{border-color:var(--brand-bright);color:var(--brand-bright)}
.verdict--warn{border-color:#E8B45C;color:#F0C87E}
.verdict--bad{border-color:#F0788C;color:#F79CAB}

.score{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);border-radius:var(--r2);
  margin-bottom:var(--s5);background:var(--readout-2);border:1px solid rgb(255 255 255/.07)}
.score__grade{font:700 3.2rem/1 var(--display);letter-spacing:-.055em}
.score__pct{font:500 1.02rem var(--mono)}
.score--good .score__grade,.score--good .score__pct{color:#6FE8AC}
.score--warn .score__grade,.score--warn .score__pct{color:#F0C87E}
.score--bad .score__grade,.score--bad .score__pct{color:#F79CAB}

.checks{list-style:none;margin:0 var(--s6) var(--s5);padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.check-row{background:var(--readout-2);border-radius:var(--r2);border-left:3px solid rgb(255 255 255/.14);padding:var(--s4) var(--s5)}
.check-row--pass{border-left-color:#3FD98A}
.check-row--warn{border-left-color:#E8B45C}
.check-row--fail{border-left-color:#F0788C}
.check-row__head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.check-row__head strong{font:600 1rem var(--display);color:#fff}
.check-row p{margin:0;font-size:.88rem;color:var(--readout-dim)}
.pill{font:600 .64rem/1 var(--mono);letter-spacing:.11em;padding:5px 11px;border-radius:var(--rp)}
.pill--pass{background:rgb(63 217 138/.16);color:#6FE8AC}
.pill--warn{background:rgb(232 180 92/.16);color:#F0C87E}
.pill--fail{background:rgb(240 120 140/.16);color:#F79CAB}
.notes{margin:var(--s3) 0 0;padding-left:var(--s5);font-size:.86rem;color:var(--readout-dim)}
.notes li{margin:5px 0}

.code-block{position:relative;margin-bottom:var(--s4);border-radius:var(--r2);overflow:hidden;
  background:var(--readout-2);border:1px solid rgb(255 255 255/.08)}
.code-block::before{content:"";display:block;height:36px;background:rgb(255 255 255/.03);
  border-bottom:1px solid rgb(255 255 255/.07)}
.code{background:transparent;color:var(--readout-text);padding:var(--s5);margin:0;
  overflow-x:auto;font:.84rem/1.75 var(--mono);white-space:pre;border:0}
.copy{position:absolute;top:9px;right:12px;background:rgb(255 255 255/.09);border:1px solid rgb(255 255 255/.16);
  color:var(--readout-text);font:600 .74rem var(--display);padding:6px 14px;border-radius:var(--rp);cursor:pointer;
  transition:background .16s}
.copy:hover{background:rgb(255 255 255/.18)}
.copy.is-done{background:rgb(63 217 138/.2);border-color:rgb(63 217 138/.4);color:#6FE8AC}
.copy--sm{position:static}
.mono-list{list-style:none;margin:0 var(--s6) var(--s4);padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.mono-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  background:var(--readout-2);border:1px solid rgb(255 255 255/.07);border-radius:var(--r1);padding:12px 17px}
.mono-list code{font:.89rem var(--mono);word-break:break-all}
.notes-box{background:rgb(232 180 92/.1);border:1px solid rgb(232 180 92/.22);border-radius:var(--r2);
  padding:var(--s4) var(--s5);font-size:.89rem;margin:var(--s5) var(--s6);color:#F0C87E}
.notes-box strong{display:block;margin-bottom:var(--s2);font-family:var(--display)}
.notes-box ul{margin:0;padding-left:var(--s5)}
.notes-box li{margin:6px 0}
.raw{margin:var(--s4) var(--s6)}
.raw summary{cursor:pointer;font:600 .88rem var(--display);color:var(--brand-bright);padding:var(--s2) 0}
.raw[open] summary{margin-bottom:var(--s3)}
.alert{padding:16px 22px;border-radius:var(--r2);font-size:.94rem;margin-bottom:var(--s4)}
.alert--error{background:var(--fail-tint);color:var(--fail)}
.alert--ok{background:var(--pass-tint);color:var(--pass)}
.results .alert--error{background:rgb(240 120 140/.14);color:#F79CAB;margin:var(--s6)}

/* ---------- promos ---------- */
.promo{display:flex;align-items:center;gap:var(--s5);justify-content:space-between;flex-wrap:wrap;
  padding:var(--s5);border-radius:var(--r2);margin:var(--s5) 0;border:1px solid}
.promo__text{display:flex;flex-direction:column;gap:3px}
.promo__text strong{font:600 1.04rem var(--display)}
.promo__text span{font-size:.9rem;opacity:.88}
.promo__cta{padding:11px 22px;border-radius:var(--rp);background:var(--ink);color:var(--paper);
  text-decoration:none;font:600 .9rem var(--display);white-space:nowrap}
.promo--info{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 28%,transparent);color:var(--brand-strong)}
.promo--success{background:var(--pass-tint);border-color:color-mix(in srgb,var(--pass) 28%,transparent);color:var(--pass)}
.promo--warn{background:var(--warn-tint);border-color:color-mix(in srgb,var(--warn) 28%,transparent);color:var(--warn)}
.promo--danger{background:var(--fail-tint);border-color:color-mix(in srgb,var(--fail) 28%,transparent);color:var(--fail)}
.results .promo{border-color:rgb(255 255 255/.14);background:var(--readout-2);color:var(--readout-text);margin:var(--s5) var(--s6)}
.results .promo__cta{background:var(--brand-bright);color:var(--readout)}

/* ---------- prose ---------- */
.prose{max-width:70ch;font-size:1.06rem;line-height:1.78;color:var(--ink-2)}
.prose--lede{margin:var(--s7) 0 0;font-size:1.18rem;max-width:66ch}
.prose--intro{margin:var(--s7) 0 0;font-size:1.12rem}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose h2{font:600 clamp(1.4rem,2.6vw,1.75rem)/1.2 var(--display);color:var(--ink);
  letter-spacing:-.042em;margin:var(--s8) 0 var(--s4);text-wrap:balance}
.prose h3{font:600 1.2rem/1.3 var(--display);color:var(--ink);letter-spacing:-.03em;margin:var(--s6) 0 var(--s3)}
.prose h4{font:600 1.04rem var(--display);color:var(--ink);margin:var(--s5) 0 var(--s2)}
.prose p{margin:0 0 var(--s5)}
.prose ul,.prose ol{margin:0 0 var(--s5);padding-left:var(--s5)}
.prose li{margin:var(--s2) 0}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--ink);font-weight:650}
.prose code{background:var(--paper-3);padding:3px 7px;border-radius:6px;font:.87em var(--mono);color:var(--ink)}
.prose pre{background:var(--readout);color:var(--readout-text);padding:var(--s5);border-radius:var(--r2);
  overflow-x:auto;margin:0 0 var(--s5)}
.prose pre code{background:none;padding:0;color:inherit;font-size:.84rem;line-height:1.75}
.prose blockquote{margin:0 0 var(--s5);padding:var(--s4) var(--s5);background:var(--paper-2);
  border-left:3px solid var(--brand);border-radius:0 var(--r2) var(--r2) 0;color:var(--ink-2)}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.prose thead th{font:600 .84rem var(--display);background:var(--paper-2);color:var(--ink-2)}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
.prose img{border-radius:var(--r2);margin:var(--s2) 0}
.prose a{
  color:var(--brand-strong);text-decoration:none;
  background:linear-gradient(var(--brand),var(--brand)) no-repeat 0 100%/100% 1.5px;
  padding-bottom:2px;transition:background-size .22s var(--ease),color .16s;
}
.prose a:hover{color:var(--brand);background-size:100% 2.5px}

.example{margin:var(--s7) 0 0;padding:var(--s6);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r4)}
.example h2{font:600 1.35rem var(--display);letter-spacing:-.04em;margin:0 0 var(--s4)}
.example .prose{max-width:none}

/* ---------- faq ---------- */
.faq,.reviews,.related{margin:var(--s8) 0 0}
.faq h2,.reviews h2,.related h2{font:600 clamp(1.4rem,2.6vw,1.75rem) var(--display);letter-spacing:-.042em;margin:0 0 var(--s5)}
.faq__item{border:1px solid var(--line);border-radius:var(--r2);margin-bottom:var(--s3);background:var(--paper);
  transition:border-color .2s,box-shadow .2s}
.faq__item:hover{border-color:color-mix(in srgb,var(--brand) 32%,var(--line))}
.faq__item[open]{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:var(--sh1)}
.faq__item summary{
  cursor:pointer;padding:var(--s5);list-style:none;
  font:600 1.04rem/1.4 var(--display);letter-spacing:-.024em;
  display:flex;justify-content:space-between;gap:var(--s5);transition:color .16s;
}
.faq__item summary:hover{color:var(--brand)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:18px;height:18px;margin-top:4px;color:var(--brand);
  background:linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 13px no-repeat;
  transition:transform .26s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(135deg)}
.faq__item .prose{padding:0 var(--s5) var(--s5);font-size:1.01rem}

/* ---------- reviews ---------- */
.reviews__summary{
  display:flex;align-items:center;gap:var(--s5);padding:var(--s5) var(--s6);
  background:linear-gradient(150deg,var(--brand-tint),var(--paper-2));
  border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:var(--r3);margin-bottom:var(--s5);
}
.reviews__score{
  font:700 2.6rem/1 var(--display);letter-spacing:-.05em;
  background:linear-gradient(145deg,var(--brand),var(--brand-strong));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.reviews__meta{display:flex;flex-direction:column;gap:3px}
.reviews__meta .stars{font-size:1.08rem}
.reviews__meta span{font-size:.87rem;color:var(--ink-3)}
.review-list{list-style:none;margin:0 0 var(--s5);padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.review{border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);background:var(--paper);
  transition:border-color .2s,box-shadow .2s}
.review:hover{border-color:color-mix(in srgb,var(--brand) 28%,var(--line));box-shadow:var(--sh1)}
.review__head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3);font-size:.88rem}
.review__avatar{
  width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brand),var(--brand-strong));color:#fff;
  font:700 1rem var(--display);
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--brand) 70%,transparent);
}
.review__who{display:flex;flex-direction:column;gap:1px}
.review__who strong{font:600 .98rem var(--display)}
.review__when{font:500 .78rem var(--mono);color:var(--ink-4)}
.review__rating{margin-left:auto}
.review p{margin:0;font-size:.97rem;color:var(--ink-2)}
.review__empty{padding:var(--s7) var(--s5);text-align:center;border:1px dashed var(--line);
  border-radius:var(--r3);color:var(--ink-3);font-size:.97rem;background:var(--paper-2)}
.review-form-wrap summary{cursor:pointer;font:600 .98rem var(--display);color:var(--brand-strong);padding:var(--s3) 0}
.review-form{border:1px solid var(--line);border-radius:var(--r3);padding:var(--s6);margin-top:var(--s3);background:var(--paper-2)}
.review-form .btn{margin-top:var(--s5)}

/* ---------- captcha ---------- */
.captcha{grid-column:1/-1;margin:var(--s5) 0 0;padding:var(--s5);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r2)}
.captcha__head{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s4)}
.captcha__icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;
  background:var(--brand-tint);color:var(--brand-strong)}
.captcha__head strong{display:block;font:600 1rem var(--display);letter-spacing:-.02em;color:var(--ink)}
.captcha__head span{display:block;font-size:.87rem;color:var(--ink-3);line-height:1.55;margin-top:3px}
.captcha__quiet{margin:var(--s3) 0 0;font-size:.77rem;color:var(--ink-4)}
@media(max-width:400px){.captcha .g-recaptcha{transform:scale(.85);transform-origin:0 0}}

/* ---------- sidebar ---------- */
.side-box{border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);background:var(--paper-2)}
.side-box h3{
  display:flex;align-items:center;gap:var(--s2);
  font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--ink-4);
  margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line);
}
.side-box--helpful{background:linear-gradient(160deg,var(--brand-tint),var(--paper-2));
  border-color:color-mix(in srgb,var(--brand) 20%,transparent)}
.side-box--helpful h3{border-bottom-color:color-mix(in srgb,var(--brand) 20%,transparent)}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{border-bottom:1px solid var(--line)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:11px 0;font-size:.94rem;text-decoration:none;color:var(--ink-2);
  transition:color .16s,padding-left .16s var(--ease)}
.side-list a:hover{color:var(--brand);padding-left:5px}
.side-list__meta{font:500 .68rem var(--mono);color:var(--ink-4);background:var(--paper-3);
  padding:3px 9px;border-radius:var(--rp);flex:none}
.side-box dl{margin:0;font-size:.9rem;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4)}
.side-box dt{color:var(--ink-4)}
.side-box dd{margin:0;font-weight:500}
.side-note{margin:0 0 var(--s3);font-size:.89rem;color:var(--ink-3)}
.side-form{display:flex;flex-direction:column;gap:var(--s2)}
.side-form input{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--rp);
  font:inherit;font-size:.92rem;background:var(--paper);color:var(--ink)}
.side-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}

.helpful__q{margin:0 0 var(--s4);font:600 .98rem var(--display);color:var(--ink)}
.helpful__btns{display:flex;gap:var(--s2)}
.helpful__btn{flex:1;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r1);
  background:var(--paper);color:var(--ink-2);font:600 .9rem var(--display);cursor:pointer;
  transition:border-color .16s,background .16s,color .16s,transform .14s var(--ease)}
.helpful__btn:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-tint);transform:translateY(-2px)}
.helpful__btn[disabled]{opacity:.5;cursor:default;transform:none}
.helpful__thanks{margin:0;font-size:.9rem;color:var(--brand-strong);font-weight:500}
.helpful__tally{margin:var(--s3) 0 0;font-size:.82rem;color:var(--ink-4)}
.helpful__tally strong{color:var(--ink-2);font-family:var(--mono)}
.share{display:flex;gap:var(--s2);flex-wrap:wrap}
.share__btn{flex:1;min-width:112px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r1);
  background:var(--paper);font:600 .88rem var(--display);color:var(--ink-2);cursor:pointer;
  transition:border-color .16s,color .16s}
.share__btn:hover{border-color:var(--brand);color:var(--brand-strong)}
.share__btn.is-done{border-color:var(--pass);color:var(--pass);background:var(--pass-tint)}

/* ---------- ads ---------- */
.ad{margin:var(--s6) auto;text-align:center;max-width:100%;overflow:hidden}
.ad__label{display:block;font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-4);margin-bottom:var(--s2)}
.ad--sidebar{margin:0}

/* ---------- footer ---------- */
.site-foot{margin-top:var(--s10);padding:var(--s9) 0 0;font-size:.94rem}
.site-foot__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s7)}
.site-foot strong{display:block;color:#fff;margin-bottom:var(--s4);
  font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em}
.site-foot__col:first-child strong{font:700 1.05rem var(--display);letter-spacing:-.03em;text-transform:none}
.site-foot p{margin:0;line-height:1.7;max-width:38ch}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:var(--s2) 0}
.site-foot a{color:#8DA3B0;text-decoration:none;display:inline-block;
  transition:color .16s,transform .16s var(--ease)}
.site-foot a:hover{color:#fff;transform:translateX(4px)}
.site-foot__legal{border-top:1px solid rgb(255 255 255/.09);padding:var(--s5) var(--s5);font-size:.86rem}
.site-foot__legal p{margin:0;max-width:none}

/* ---------- page transition ---------- */
.pageprogress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:100;opacity:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-bright));
  box-shadow:0 0 12px color-mix(in srgb,var(--brand) 70%,transparent);
  transition:width .3s var(--ease),opacity .3s}
#main{transition:opacity .16s var(--ease),transform .16s var(--ease)}
#main.is-leaving{opacity:0;transform:translateY(-5px)}
#main.is-entering{opacity:0;transform:translateY(10px)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr) 290px;gap:var(--s6)}
}
@media(max-width:980px){
  .layout{grid-template-columns:1fr;gap:0}
  .layout__side{position:static;margin-top:var(--s7)}
  .site-foot__inner{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .hero{padding:var(--s9) 0 var(--s8)}
}
@media(max-width:760px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:var(--s1);padding:var(--s4) 0 var(--s5)}
  .nav.is-open{display:flex}
  .nav a{padding:13px 16px}
  .nav__search{margin:var(--s2) 0 0}
  .nav__search input,.nav__search input:focus{width:100%}
  .hero{padding:var(--s8) 0 var(--s7)}
  .hero h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  .hero__stats{gap:var(--s5)}
  .hero__search{padding:6px 6px 6px 18px;flex-wrap:wrap}
  .hero__search input{font-size:.98rem}
  .block{padding:var(--s7) 0}
  .card-grid,.card-grid--lg,.card-grid--feature{grid-template-columns:1fr}
  .fields,.optgroup__grid{grid-template-columns:1fr}
  .tool-box{padding:var(--s7) var(--s5) var(--s5);border-radius:var(--r3)}
  .tool-box::before{left:var(--s5);top:var(--s4)}
  .results{border-radius:var(--r3)}
  .results__title{padding:15px var(--s5)}
  .results > *:not(.results__title){margin-inline:var(--s5)}
  .results .table{font-size:.83rem}
  .results .table th,.results .table td{padding:9px 11px}
  .checks,.mono-list,.notes-box,.raw,.results .promo,.results .alert--error{margin-inline:var(--s5)}
  .example{padding:var(--s5);border-radius:var(--r3)}
  .prose{font-size:1.02rem}
  .tool-form__actions .btn,.review-form .btn,.faqband__cta .btn{width:100%}
  .tool-form__actions{flex-direction:column;align-items:stretch}
  .tool-form__runs{margin:var(--s2) 0 0;text-align:center}
  .site-foot__inner{grid-template-columns:1fr;gap:var(--s6)}
  .score{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .reviews__summary{padding:var(--s4)}
}
@media(pointer:coarse){
  .nav a,.side-list a,.faq__item summary{min-height:46px}
  .btn,.helpful__btn,.share__btn,.copy{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  #main,#main.is-leaving,#main.is-entering{opacity:1;transform:none}
}
@media print{
  .site-head,.site-foot,.layout__side,.ad,.tool-form__actions,.promo,.review-form-wrap{display:none!important}
  .results{background:#fff;color:#000;box-shadow:none;border:1px solid #ccc}
  .code{background:#f5f5f5;color:#000}
}


/* ---- v4.1: density and contrast corrections from screenshot review ---- */
.catblock .card a{background:var(--paper)}
.block__head{margin-bottom:var(--s5)}
.hero{padding:var(--s10) 0 var(--s9)}
.hero h1{margin-bottom:var(--s4)}
.hero__stats{margin-top:var(--s6);gap:var(--s6)}

/* section headings get an accent bar so scanning has anchors */
.block__head h2{position:relative;padding-left:var(--s4)}
.block__head h2::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 20%,transparent));
}

/* prose column was floating in space on wide screens */
.prose--lede{max-width:64ch}
.block > .prose{max-width:68ch}

/* stronger separation between the page and the surrounding canvas */
body{background:var(--paper-2)}
.site-head{background:color-mix(in srgb,var(--paper-2) 82%,transparent)}
main{background:var(--paper)}
.hero{background:
  radial-gradient(ellipse 60% 50% at 8% -10%, color-mix(in srgb,var(--brand) 14%,transparent), transparent 65%),
  radial-gradient(ellipse 50% 45% at 92% 5%, color-mix(in srgb,#5B6CFF 10%,transparent), transparent 65%),
  var(--paper-2);
  border-bottom:1px solid var(--line);
}

/* tool page: give the form panel more presence against the page */
.tool-box{background:var(--paper-2);border-color:var(--n4)}
@media (prefers-color-scheme:dark){.tool-box{border-color:var(--line)}}

/* ============================================================
   v5 — hero, mega menu, sidebar homepage, two-column FAQ
   ============================================================ */

/* ---------- header ---------- */
.site-head__inner{gap:var(--s5)}
.nav{gap:2px}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:var(--rp);
  font:500 .93rem/1 var(--display);letter-spacing:-.012em;color:var(--ink-3);
  text-decoration:none;background:none;border:0;cursor:pointer;transition:background .16s,color .16s;
}
.nav__link:hover{background:var(--paper-3);color:var(--ink)}
.nav__link.is-active{background:var(--brand-tint);color:var(--brand-strong);font-weight:600}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px;transition:transform .22s var(--ease)}
.nav__item{position:relative}
.nav__item.is-open .caret{transform:rotate(180deg)}
.megamenu{
  position:absolute;top:calc(100% + 14px);left:-20px;z-index:60;
  display:none;grid-template-columns:1.3fr 1fr;gap:var(--s6);
  width:min(640px,92vw);padding:var(--s5);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh3);
}
.nav__item.is-open .megamenu{display:grid;animation:dropIn .2s var(--ease)}
.megamenu__label{display:block;font:500 .64rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-4);margin-bottom:var(--s3)}
.megamenu__cats a{display:flex;align-items:center;gap:var(--s3);padding:9px 10px;border-radius:var(--r1);
  text-decoration:none;color:var(--ink-2);transition:background .14s}
.megamenu__cats a:hover{background:var(--brand-tint)}
.megamenu__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,var(--brand),var(--brand-strong));color:#fff}
.megamenu__cats strong{display:block;font:600 .9rem var(--display)}
.megamenu__cats small{display:block;font:500 .72rem var(--mono);color:var(--ink-4)}
.megamenu__pop{border-left:1px solid var(--line);padding-left:var(--s5)}
.megamenu__pop a{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:.88rem;
  color:var(--ink-3);text-decoration:none;transition:color .14s,transform .14s var(--ease)}
.megamenu__pop a:hover{color:var(--brand);transform:translateX(3px)}
.megamenu__all{font:600 .85rem var(--display)!important;color:var(--brand-strong)!important;margin-top:var(--s3);
  padding-top:var(--s3)!important;border-top:1px solid var(--line)}
.nav__search{display:flex;align-items:center;gap:8px;margin-left:var(--s3);padding:0 14px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rp);color:var(--ink-4)}
.nav__search input{border:0;background:none;padding:10px 0;font:inherit;font-size:.87rem;color:var(--ink);width:150px}
.nav__search input:focus{outline:none}
.nav__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--s10) 0 var(--s9);
  background:var(--paper-2);border-bottom:1px solid var(--line);text-align:center}
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 42% at 22% 0%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 68%),
    radial-gradient(ellipse 40% 38% at 78% 8%, color-mix(in srgb,var(--brand-2) 16%,transparent), transparent 68%);
  animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-2%) scale(1)}to{transform:translateX(2%) scale(1.06)}}
.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--brand-strong);background:var(--paper);padding:10px 18px;border-radius:var(--rp);
  margin-bottom:var(--s5);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
  box-shadow:var(--sh1);
}
.kicker__dot{width:7px;height:7px;border-radius:50%;background:var(--spark);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--spark) 25%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.86)}}
.hero h1{font:700 clamp(2.4rem,6.6vw,4.6rem)/1 var(--display);letter-spacing:-.055em;
  margin:0 0 var(--s5);max-width:none;width:100%;text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__lead{font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.6;color:var(--ink-3);
  max-width:56ch;margin:0 0 var(--s6)}
.hero__searchwrap{position:relative;width:min(620px,100%);margin:0 auto}
.megasearch{display:flex;align-items:center;gap:var(--s3);text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rp);
  padding:7px 7px 7px 22px;box-shadow:var(--sh2);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.megasearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint),var(--sh3);transform:translateY(-1px)}
.megasearch__icon{display:flex;color:var(--ink-4);flex:none}
.megasearch input{flex:1;border:0;background:none;padding:15px 0;font:inherit;font-size:1.02rem;color:var(--ink);min-width:0}
.megasearch input:focus{outline:none}

.counters{list-style:none;display:flex;gap:var(--s7);margin:var(--s7) 0 0;padding:0;flex-wrap:wrap;justify-content:center}
.counter__n{display:block;font:700 clamp(1.7rem,3vw,2.3rem)/1 var(--display);letter-spacing:-.045em;
  background:linear-gradient(140deg,var(--ink),var(--brand));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.counter__l{display:block;font:500 .78rem var(--mono);color:var(--ink-4);margin-top:6px;letter-spacing:.04em}

.trustrow{list-style:none;display:flex;gap:var(--s5);margin:var(--s6) 0 0;padding:0;flex-wrap:wrap;justify-content:center}
.trustrow li{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink-3)}
.trustrow .icon{color:var(--spark)}

.lede{padding:var(--s8) 0 0;text-align:center}
.lede .prose{margin-inline:auto;max-width:64ch}

/* ---------- home layout with sidebar ---------- */
.layout--home{padding-top:var(--s8)}
.sect{margin-bottom:var(--s8)}
.sect__head{margin-bottom:var(--s5)}
.sect__head--center{text-align:center;max-width:60ch;margin-inline:auto;margin-bottom:var(--s7)}
.sect__kicker{display:block;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.17em;
  color:var(--brand);margin-bottom:var(--s3)}
.sect h2{font:600 clamp(1.5rem,2.8vw,2rem)/1.15 var(--display);letter-spacing:-.045em;margin:0 0 var(--s2);text-wrap:balance}
.sect h2 a{color:inherit;text-decoration:none}
.sect h2 a:hover{color:var(--brand)}
.sect__head p{margin:0;color:var(--ink-3);max-width:56ch}

.catsect{padding:var(--s6);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r4);
  scroll-margin-top:100px}
.catsect__head{display:flex;gap:var(--s4);align-items:flex-start;margin-bottom:var(--s5)}
.catsect__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;
  background:linear-gradient(150deg,var(--brand),var(--brand-strong));color:#fff;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--brand) 80%,transparent)}
.catsect__head h2{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:1.35rem;margin-bottom:5px}
.catsect__head p{margin:0;color:var(--ink-3);font-size:.94rem}
.catsect .card a{background:var(--paper)}
.chip{display:inline-flex;align-items:center;gap:5px;font:500 .68rem/1 var(--mono);letter-spacing:.06em;
  padding:5px 10px;border-radius:var(--rp);background:var(--paper-3);color:var(--ink-4)}
.chip--count{background:var(--brand-tint);color:var(--brand-strong)}

.card__go{margin-top:auto;padding-top:var(--s3);display:inline-flex;align-items:center;gap:6px;
  font:600 .74rem/1 var(--display);color:var(--brand);opacity:0;transform:translateX(-4px);
  transition:opacity .2s,transform .2s var(--ease)}
.card a:hover .card__go{opacity:1;transform:none}
.card__foot{display:inline-flex;align-items:center;gap:6px}

/* ---------- sidebar boxes ---------- */
.side-box--nav .side-list a{gap:10px}
.side-list__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none;
  background:var(--brand-tint);color:var(--brand);transition:background .16s,color .16s}
.side-list a:hover .side-list__ico{background:var(--brand);color:#fff}
.side-list--cats a{justify-content:flex-start}
.side-list--cats .side-list__meta{margin-left:auto}
.side-box--accent{background:linear-gradient(165deg,var(--brand-tint),var(--paper-2));
  border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.side-box--pitch{background:var(--paper-2)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:26px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;
  background:var(--spark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---------- FAQ band, two columns ---------- */
.faqband{padding:var(--s9) 0;background:var(--paper-2);border-top:1px solid var(--line)}
.faq2{display:flex;flex-direction:column;gap:var(--s3);max-width:1000px;margin-inline:auto}
.faq2__item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);
  transition:border-color .2s,box-shadow .2s}
.faq2__item:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.faq2__item[open]{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--sh1)}
.faq2__item summary{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s5);
  cursor:pointer;padding:var(--s5) var(--s6);list-style:none;
  font:600 1.04rem/1.4 var(--display);letter-spacing:-.024em;transition:color .16s;
}
.faq2__item summary::-webkit-details-marker{display:none}
.faq2__item summary:hover{color:var(--brand)}
.faq2__item summary::after{content:"";width:20px;height:20px;color:var(--brand);
  background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;
  transition:transform .26s var(--ease)}
.faq2__item[open] summary::after{transform:rotate(135deg)}
.faq2__a{padding:0 var(--s6) var(--s5);font-size:1rem;max-width:none}
@media(min-width:900px){
  .faq2__item[open] summary{padding-bottom:var(--s3)}
  .faq2__item summary{grid-template-columns:minmax(0,.42fr) auto}
  .faq2__item[open]{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);align-items:start}
  .faq2__item[open] summary{grid-column:1;grid-template-columns:1fr auto;padding:var(--s5) var(--s5) var(--s5) var(--s6)}
  .faq2__a{grid-column:2;padding:var(--s5) var(--s6) var(--s5) 0;border-left:1px solid var(--line)}
  .faq2__a > *{padding-left:var(--s5)}
}

.closing{padding:var(--s9) 0;border-top:1px solid var(--line)}
.closing .prose{margin-inline:auto}

/* ---------- footer ---------- */
.site-foot__top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s6);padding:var(--s9) 0 var(--s7)}
.site-foot__brand .brand__mark{display:inline-block;margin-bottom:var(--s4)}
.site-foot__brand strong{display:block;color:#fff;font:700 1.14rem var(--display);letter-spacing:-.03em;margin-bottom:var(--s3);text-transform:none}
.site-foot__brand p{margin:0 0 var(--s4);max-width:34ch;line-height:1.7}
.site-foot__ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.site-foot__ticks li{display:inline-flex;align-items:center;gap:6px;font:500 .78rem var(--mono);color:#8DA3B0}
.site-foot__ticks li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:var(--spark);opacity:.9}
.site-foot__legalrow{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.site-foot__built{opacity:.6}

/* ---------- record-type chips on tool forms ---------- */
.typechips{display:flex;gap:7px;flex-wrap:wrap;grid-column:1/-1;margin-top:var(--s2)}
.typechip{padding:8px 15px;border:1px solid var(--line);border-radius:var(--rp);background:var(--paper);
  font:600 .8rem/1 var(--mono);color:var(--ink-3);cursor:pointer;transition:all .16s}
.typechip:hover{border-color:var(--brand);color:var(--brand-strong)}
.typechip.is-on{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 3px 10px -3px color-mix(in srgb,var(--brand) 70%,transparent)}

@media(max-width:980px){
  .layout--home{grid-template-columns:1fr}
  .site-foot__top{grid-template-columns:1fr 1fr}
  .megamenu{position:static;width:100%;display:none;grid-template-columns:1fr;box-shadow:none;margin:var(--s3) 0}
  .megamenu__pop{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--s4)}
}
@media(max-width:760px){
  .hero{padding:var(--s8) 0 var(--s7)}
  .counters{gap:var(--s5)}
  .trustrow{gap:var(--s4);font-size:.82rem}
  .catsect{padding:var(--s5) var(--s4)}
  .catsect__head{gap:var(--s3)}
  .catsect__icon{width:40px;height:40px}
  .faqband{padding:var(--s8) 0}
  .faq2__item summary{padding:var(--s4) var(--s5);font-size:.98rem}
  .faq2__a{padding:0 var(--s5) var(--s4)}
  .site-foot__top{grid-template-columns:1fr;gap:var(--s5)}
  .nav__search{margin:var(--s2) 0 0;width:100%}
  .nav__search input{width:100%}
  .nav__link{width:100%;justify-content:flex-start}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   v5.1 — hero, cards, FAQ split, tool pages, footer, responsive
   ============================================================ */

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,116px) 0 clamp(48px,7vw,88px)}
.hero__inner{max-width:1040px;margin-inline:auto;width:100%}
.hero h1{margin-bottom:var(--s4)}
.hero__lead{margin-bottom:var(--s7)}
.counters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--s3);margin:var(--s7) auto 0;max-width:640px;
}
.counter{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4) var(--s3);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.counter:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--sh2)}
.counter__n{font-size:clamp(1.5rem,3vw,2rem)}
.counter__l{font-size:.72rem}

/* search pill — the mobile fix lives here */
.megasearch{width:100%}
.megasearch input{min-width:0}
.megasearch .btn{flex:none;white-space:nowrap}

/* ---------- homepage cards ---------- */
.card a{padding:0;overflow:hidden}
.card__body{display:flex;flex-direction:column;height:100%;padding:var(--s5) var(--s5) var(--s4)}
.card__top{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s3)}
.card__icon{margin-bottom:0}
.card__titles{display:flex;flex-direction:column;min-width:0;flex:1}
.card strong{font-size:1.02rem;line-height:1.3;margin-bottom:3px}
.card__desc{font-size:.88rem;line-height:1.55;color:var(--ink-3);flex:1}
.card__meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-soft);
}
.card__uses{display:inline-flex;align-items:center;gap:6px;font:500 .7rem/1 var(--mono);color:var(--ink-4)}
.card__uses .icon{color:var(--spark)}
.card__go{margin:0;padding:0;opacity:1;transform:none;font:600 .75rem/1 var(--display);
  color:var(--brand);display:inline-flex;align-items:center;gap:5px;transition:gap .18s var(--ease)}
.card a:hover .card__go{gap:9px}
.card a::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--brand) 9%,transparent),transparent 60%);
  transition:opacity .28s;
}
.card a:hover::before{opacity:1}

/* ---------- FAQ band: description left, accordion right ---------- */
.faqband{padding:clamp(56px,8vw,96px) 0;background:var(--paper-2);border-top:1px solid var(--line)}
.faqband__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.faqband__intro{position:sticky;top:100px}
.faqband__intro h2{font:600 clamp(1.6rem,3vw,2.2rem)/1.15 var(--display);letter-spacing:-.045em;margin:0 0 var(--s4);text-wrap:balance}
.faqband__lead{font-size:1.06rem;line-height:1.7;color:var(--ink-3);margin:0 0 var(--s6)}
.ticks--lg li{padding-left:30px;margin-bottom:var(--s4);font-size:.95rem;color:var(--ink-3)}
.ticks--lg li strong{color:var(--ink);font-weight:650}
.ticks--lg li::before{top:.2em;width:19px;height:19px}
.faqband__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.faqband__list{display:flex;flex-direction:column;gap:var(--s3)}
.faq2__item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.faq2__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5);font:600 1.02rem/1.4 var(--display);letter-spacing:-.022em;grid-template-columns:none}
.faq2__item[open]{display:block;grid-template-columns:none;border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--sh1)}
.faq2__item[open] summary{padding-bottom:var(--s3);grid-column:auto}
.faq2__a{grid-column:auto;padding:0 var(--s5) var(--s5);border-left:0;font-size:.99rem}
.faq2__a > *{padding-left:0}

/* ---------- tool pages ---------- */
.tool-hero{
  padding:var(--s7) 0 var(--s6);position:relative;
}
.tool-hero__row{display:flex;align-items:flex-start;gap:var(--s5)}
.tool-head__icon{margin-bottom:0}
.toolmeta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.toolmeta__pill{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--rp);
  background:var(--paper-2);border:1px solid var(--line);
  font:500 .78rem/1 var(--mono);color:var(--ink-3);
}
.toolmeta__pill .icon{color:var(--spark)}
.toolmeta__pill--rate{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 25%,transparent);color:var(--brand-strong)}
.toolmeta__share{margin-left:auto}

.tool-box{
  position:relative;padding:0;overflow:hidden;
  background:var(--paper);border:1px solid var(--n4);border-radius:var(--r4);box-shadow:var(--sh2);
}
@media (prefers-color-scheme:dark){.tool-box{border-color:var(--line)}}
.tool-box::before{content:none}
.tool-box__head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s6);background:var(--paper-2);border-bottom:1px solid var(--line);
  font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-4);
}
.tool-box__head .icon{color:var(--brand)}
.tool-form{padding:var(--s6)}
.tool-box__note{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s4) var(--s6);background:var(--brand-tint);
  border-top:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  font-size:.87rem;color:var(--brand-strong);
}
.tool-box__note .icon{flex:none;margin-top:2px}

.typechips{margin-top:0}
.typechip{padding:9px 16px;font-size:.78rem}

/* content sections on tool pages get anchors */
.prose h2{scroll-margin-top:100px}
.prose--intro{margin-top:var(--s7)}

/* ---------- footer ---------- */
.site-foot{position:relative;overflow:hidden;margin-top:clamp(56px,8vw,96px)}
.site-foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 15% 0%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%),
             radial-gradient(ellipse 40% 50% at 85% 10%,color-mix(in srgb,var(--brand-2) 12%,transparent),transparent 70%);
}
.site-foot .wrap{position:relative}
.site-foot__top{grid-template-columns:1.5fr repeat(4,1fr);padding:clamp(48px,7vw,80px) 0 var(--s7)}
.site-foot__brand p{color:#8DA3B0}
.site-foot__ticks li{background:rgb(255 255 255/.05);padding:6px 12px;border-radius:var(--rp);
  border:1px solid rgb(255 255 255/.08)}
.site-foot__ticks li::before{width:11px;height:11px}
.site-foot__col strong{color:#fff;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
  margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid rgb(255 255 255/.1);display:block}
.site-foot__col a{font-size:.9rem}
.site-foot__legal{border-top:1px solid rgb(255 255 255/.09);position:relative}
.site-foot__legalrow{align-items:center}

/* ---------- responsive corrections ---------- */
@media(max-width:1080px){
  .faqband__grid{grid-template-columns:1fr;gap:var(--s7)}
  .faqband__intro{position:static}
  .faqband__cta{margin-top:var(--s5)}
}
@media(max-width:980px){
  .site-foot__top{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
@media(max-width:680px){
  /* the search pill becomes a stacked card so the button never squeezes the input */
  .megasearch{flex-wrap:wrap;border-radius:var(--r3);padding:var(--s3);gap:var(--s3)}
  .megasearch__icon{margin-left:var(--s2)}
  .megasearch input{flex:1 1 auto;width:auto;padding:10px 0;font-size:16px} /* 16px stops iOS zooming */
  .megasearch .btn{flex:1 0 100%;width:100%;justify-content:center}
  .counters{grid-template-columns:1fr 1fr;gap:var(--s2);max-width:none}
  .counter{padding:var(--s3)}
  .trustrow{flex-direction:column;align-items:center;gap:var(--s3)}
  .tool-hero__row{flex-direction:column;gap:var(--s4)}
  .toolmeta__share{margin-left:0;width:100%}
  .tool-box__head,.tool-box__note{padding-inline:var(--s5)}
  .tool-form{padding:var(--s5)}
  .card__top{gap:var(--s3)}
  .card__body{padding:var(--s4)}
  .site-foot__top{grid-template-columns:1fr;gap:var(--s5)}
  .site-foot__legalrow{flex-direction:column;text-align:center;gap:var(--s2)}
  .faq2__item summary{padding:var(--s4);font-size:.96rem;gap:var(--s3)}
  .faq2__a{padding:0 var(--s4) var(--s4)}
  .megamenu{width:100%}
}
/* stop iOS zooming on focus for every text control */
@media(max-width:680px){
  input,select,textarea{font-size:16px!important}
  .field__help,.field__label{font-size:.82rem!important}
}

/* ============================================================
   v6 — audit fixes, hero, tool pages, result sections
   ============================================================ */

/* ---- fixes for classes that were used but never styled ---- */
.layout__main{min-width:0}          /* without this, wide <pre> blows out the grid */
.layout__side{min-width:0}
.btn__label{display:inline-block;transition:opacity .15s}
.card--feature .card__body{padding-top:var(--s5)}
.nav__trigger{font:inherit;font-family:var(--display);font-weight:500;font-size:.93rem}
.side-list--meta a{gap:var(--s3)}
.side-list--meta .side-list__meta{margin-left:auto}
.table--calc tbody th{width:52%}
.table--calc tbody td{font-weight:600}

/* ---- hero, wider and more deliberate ---- */
.hero__inner{text-align:center}
.hero h1{margin-inline:auto}
.hero__lead{margin-inline:auto}
.hero__accent{
  display:block;width:64px;height:4px;border-radius:4px;margin:0 auto var(--s5);
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.hero__searchwrap{width:min(680px,100%)}
.megasearch{padding:8px 8px 8px 24px;border-width:1.5px}
.megasearch input{padding:16px 0;font-size:1.06rem}
.megasearch .btn{padding:14px 30px}
.hero__hint{margin:var(--s4) 0 0;font:500 .8rem var(--mono);color:var(--ink-4)}
.hero__hint b{color:var(--brand-strong);font-weight:600}

/* ---- tool page hero: rating on the lookup line ---- */
.tool-hero__row{align-items:flex-start}
.toolrate{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--rp);
  background:linear-gradient(140deg,var(--brand-tint),var(--paper));
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  font:500 .82rem/1 var(--display);color:var(--brand-strong);white-space:nowrap;
}
.toolrate__stars{color:#F0A81E;letter-spacing:1px;font-size:.92rem}
.toolrate__n{font-family:var(--mono);font-weight:600}
.toolrate__c{color:var(--ink-4);font-family:var(--mono);font-size:.76rem}
.toolrate--empty{background:var(--paper-2);border-color:var(--line);color:var(--ink-4)}

/* ---- tool search / input panel ---- */
.tool-box{border-width:1.5px}
.tool-box__head{
  justify-content:space-between;background:linear-gradient(180deg,var(--paper-2),var(--paper));
}
.tool-box__head-r{display:inline-flex;align-items:center;gap:var(--s3);text-transform:none;letter-spacing:0}
.tool-box__badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--rp);
  background:var(--brand-tint);color:var(--brand-strong);
  font:600 .68rem/1 var(--mono);letter-spacing:.08em;
}
/* the primary input on a tool form reads as the main event */
.tool-form .field--wide:first-child input[type=text]{
  padding:16px 18px;font-size:1.05rem;border-width:1.5px;border-radius:var(--r2);
}
.tool-form .field--wide:first-child .field__label{font-size:.9rem}
.tool-form__actions .btn--primary{padding:15px 32px;font-size:1rem}

/* ---- results: card-based sections ---- */
.results{border:1px solid rgb(255 255 255/.07)}
.results__title{
  justify-content:space-between;
  background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.02));
}
.results__title-r{display:inline-flex;align-items:center;gap:var(--s3);letter-spacing:0;text-transform:none}
.rescard{
  background:var(--readout-2);border:1px solid rgb(255 255 255/.07);
  border-radius:var(--r2);padding:var(--s5);margin-bottom:var(--s4);
}
.rescard__head{
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid rgb(255 255 255/.08);
}
.rescard__head strong{font:600 .95rem var(--display);color:#fff}
.rescard__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:rgb(47 224 196/.14);color:var(--brand-bright)}
.results .table{margin-bottom:0}
.results .table tbody tr{transition:background .12s}
.results .table tbody tr:hover{background:rgb(255 255 255/.03)}
.rec-type{
  display:inline-flex;align-items:center;gap:8px;margin:var(--s5) var(--s6) var(--s3);
  padding:6px 13px;border-radius:var(--rp);
  background:rgb(47 224 196/.12);border:1px solid rgb(47 224 196/.2);
}
.headline-result{
  background:linear-gradient(150deg,rgb(47 224 196/.12),var(--readout-2));
  border:1px solid rgb(47 224 196/.22);
  display:flex;align-items:center;gap:var(--s4);
}
.headline-result::before{
  content:"";width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(150deg,var(--brand-bright),var(--brand));
  opacity:.9;
}
.score{background:linear-gradient(150deg,rgb(255 255 255/.05),var(--readout-2))}
.score__grade{font-size:3.4rem}
.check-row{transition:transform .18s var(--ease),background .18s}
.check-row:hover{transform:translateX(3px);background:rgb(255 255 255/.03)}
.copy{border-radius:var(--rp)}
.results .table thead th:first-child{border-top-left-radius:var(--r1)}
.results .table thead th:last-child{border-top-right-radius:var(--r1)}

/* ---- category / related cards on tool pages ---- */
.related .card a{background:var(--paper)}

@media(max-width:680px){
  .toolrate{width:100%;justify-content:center}
  .tool-box__head{flex-wrap:wrap;gap:var(--s2)}
  .rescard{padding:var(--s4)}
  .headline-result{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .headline-result::before{width:32px;height:32px}
  .hero h1{font-size:clamp(1.9rem,8.5vw,2.7rem)}
}

/* ============================================================
   v7 — light result panel, share, copy, rating, star picker
   ============================================================ */

/* the hidden attribute must beat component display rules */
[hidden]{display:none!important}

/* ---------- RESULTS: light surface, card sections ---------- */
.results{
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--brand-soft);border-radius:var(--r4);
  box-shadow:var(--sh2);margin-top:var(--s6);
}
@media (prefers-color-scheme:dark){.results{border-color:var(--line);background:var(--paper-2)}}
.results::before{display:none}
.results__title{
  background:linear-gradient(135deg,var(--brand-tint),var(--paper));
  border-bottom:1px solid var(--line);color:var(--brand-strong);
  font:600 .74rem/1 var(--mono);letter-spacing:.15em;padding:18px var(--s6);
}
.results__title::before{background:var(--spark);box-shadow:0 0 0 4px color-mix(in srgb,var(--spark) 22%,transparent)}
.results__title-r{color:var(--ink-4);font-weight:500}
.results h3{color:var(--ink)}
.results .muted{color:var(--ink-3)}
.results a{color:var(--brand-strong)}
.results__loading{color:var(--brand-strong)}

.rescard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);
  padding:0;margin-bottom:var(--s4);overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.rescard:hover{border-color:color-mix(in srgb,var(--brand) 32%,var(--line));box-shadow:var(--sh1)}
.rescard__head{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:14px var(--s5);margin:0;gap:var(--s3);
}
.rescard__head strong{color:var(--ink);font:600 .96rem var(--display)}
.rescard__ico{background:var(--brand-tint);color:var(--brand);width:30px;height:30px;border-radius:9px}
.rescard .table{margin:0}
.rescard .table th,.rescard .table td{padding:12px var(--s5);border-bottom:1px solid var(--line-soft)}
.rescard .table thead th{background:var(--paper-2);color:var(--ink-4);border-bottom:1px solid var(--line)}
.rescard .table tbody th{color:var(--ink-3);font-family:var(--sans)}
.rescard .table tbody tr:hover{background:var(--brand-tint)}
.rescard .table tbody tr:last-child td,.rescard .table tbody tr:last-child th{border-bottom:0}

.results .table th,.results .table td{border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.results .table thead th{background:var(--paper-2);color:var(--ink-4)}
.results .table tbody th{color:var(--ink-3)}
.results .table tbody tr:hover{background:var(--paper-2)}

.headline-result{
  background:linear-gradient(135deg,var(--brand-tint),var(--paper));
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  color:var(--brand-strong);
}
.headline-result::before{background:linear-gradient(150deg,var(--brand),var(--brand-strong))}
.verdict{background:var(--paper-2);border:1px solid var(--line);border-left-width:4px}
.verdict--good{background:var(--pass-tint);border-color:var(--pass);color:var(--pass)}
.verdict--info{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-strong)}
.verdict--warn{background:var(--warn-tint);border-color:var(--warn);color:var(--warn)}
.verdict--bad{background:var(--fail-tint);border-color:var(--fail);color:var(--fail)}
.score{background:var(--paper-2);border:1px solid var(--line)}
.score--good{background:var(--pass-tint)}.score--good .score__grade,.score--good .score__pct{color:var(--pass)}
.score--warn{background:var(--warn-tint)}.score--warn .score__grade,.score--warn .score__pct{color:var(--warn)}
.score--bad{background:var(--fail-tint)}.score--bad .score__grade,.score--bad .score__pct{color:var(--fail)}
.check-row{background:var(--paper);border:1px solid var(--line);border-left-width:3px}
.check-row:hover{background:var(--paper-2)}
.check-row__head strong{color:var(--ink)}
.check-row p{color:var(--ink-3)}
.pill--pass{background:var(--pass-tint);color:var(--pass)}
.pill--warn{background:var(--warn-tint);color:var(--warn)}
.pill--fail{background:var(--fail-tint);color:var(--fail)}
.notes{color:var(--ink-3)}
.notes-box{background:var(--warn-tint);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);color:var(--warn)}
.rec-type{background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);color:var(--brand-strong)}
.mono-list li{background:var(--paper-2);border:1px solid var(--line)}
.mono-list code{color:var(--ink)}
.raw summary{color:var(--brand-strong)}
.results .alert--error{background:var(--fail-tint);color:var(--fail)}
.results .promo{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 26%,transparent);color:var(--brand-strong)}
.results .promo__cta{background:var(--brand);color:#fff}
/* code stays dark — it is machine output and reads better that way */
.code-block{background:var(--readout-2);border:1px solid var(--n7)}
.copy{background:rgb(255 255 255/.1);border-color:rgb(255 255 255/.18);color:#E6EEF2}

/* ---------- inline copy control ---------- */
.valcell{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.valcell--block{display:flex;padding:3px 0}
.minicopy{
  display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);
  color:var(--ink-4);cursor:pointer;opacity:0;
  transition:opacity .16s,color .16s,border-color .16s,background .16s,transform .12s var(--ease);
}
tr:hover .minicopy,li:hover .minicopy,.valcell:hover .minicopy,.minicopy:focus-visible{opacity:1}
.minicopy:hover{color:var(--brand-strong);border-color:var(--brand);background:var(--brand-tint);transform:translateY(-1px)}
.minicopy.is-done{color:var(--pass);border-color:var(--pass);background:var(--pass-tint);opacity:1}
@media(pointer:coarse){.minicopy{opacity:1}}

/* ---------- share ---------- */
.sharerow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sharebtn{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:11px;background:var(--paper);
  color:var(--ink-3);cursor:pointer;text-decoration:none;
  transition:transform .16s var(--ease),color .16s,border-color .16s,background .16s,box-shadow .16s;
}
.sharebtn:hover{transform:translateY(-2px);color:#fff;border-color:transparent;box-shadow:var(--sh2)}
.sharebtn--x:hover{background:#0F1419}
.sharebtn--facebook:hover{background:#1877F2}
.sharebtn--linkedin:hover{background:#0A66C2}
.sharebtn--whatsapp:hover{background:#25D366}
.sharebtn--telegram:hover{background:#229ED9}
.sharebtn--reddit:hover{background:#FF4500}
.sharebtn--email:hover{background:var(--ink-2)}
.sharebtn--copy:hover,.sharebtn--native:hover{background:var(--brand)}
.sharebtn.is-done{background:var(--pass);border-color:var(--pass);color:#fff}
.sharerow--result .sharebtn{width:34px;height:34px;border-radius:10px}

.resultshare{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s4);padding:var(--s4) var(--s5);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r2);
}
.resultshare__label{
  display:inline-flex;align-items:center;gap:9px;
  font:600 .84rem var(--display);color:var(--ink-2);
}
.resultshare__label .icon{color:var(--brand)}

/* ---------- rating blocks ---------- */
.toolrate{
  display:inline-flex;align-items:center;gap:var(--s3);padding:8px 16px 8px 10px;
  border-radius:var(--rp);text-decoration:none;
  background:linear-gradient(135deg,var(--brand-tint),var(--paper));
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  transition:transform .16s var(--ease),box-shadow .16s;
}
.toolrate:hover{transform:translateY(-1px);box-shadow:var(--sh1)}
.toolrate__score{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:11px;
  background:linear-gradient(150deg,var(--brand),var(--brand-strong));color:#fff;
  font:700 1.05rem/1 var(--display);letter-spacing:-.03em;
}
.toolrate__col{display:flex;flex-direction:column;gap:2px;line-height:1}
.toolrate__stars{color:#F0A81E;font-size:.9rem;letter-spacing:1.5px}
.toolrate__c{font:500 .74rem var(--mono);color:var(--ink-4)}
.toolrate--empty{background:var(--paper-2);border-color:var(--line);color:var(--ink-3);
  padding:10px 18px;font:600 .84rem var(--display);gap:8px}
.ministars{color:#F0A81E;letter-spacing:1px}

.reviews__summary{gap:var(--s5)}
.reviews__score{font-size:3rem}

/* ---------- star picker ---------- */
.starpick{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.starpick__b{
  background:none;border:0;padding:2px 3px;cursor:pointer;line-height:1;
  font-size:1.9rem;color:var(--n4);transition:color .12s,transform .12s var(--ease);
}
.starpick__b:hover{transform:scale(1.14)}
.starpick__b.is-on{color:#F0A81E}
.starpick__label{margin-left:var(--s3);font:500 .84rem var(--display);color:var(--ink-3)}

/* ---------- helpful → review ---------- */
.helpful__next{margin-top:var(--s3);animation:dropIn .25s var(--ease)}
.helpful__next p{margin:0 0 var(--s3);font-size:.88rem;color:var(--ink-2);line-height:1.55}
.helpful__next .btn{width:100%}

/* ---------- review form feedback ---------- */
.review-form__msg{padding:13px 18px;border-radius:var(--r1);font-size:.9rem;margin-bottom:var(--s4)}
.review-form__msg.is-ok{background:var(--pass-tint);color:var(--pass)}
.review-form__msg.is-err{background:var(--fail-tint);color:var(--fail)}
.review-form-wrap summary{display:inline-flex;align-items:center;gap:9px}
.review-form-wrap summary .icon{color:var(--brand)}

@media(max-width:680px){
  .resultshare{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .sharebtn{width:42px;height:42px}
  .toolrate{width:100%;justify-content:flex-start}
  .rescard__head,.rescard .table th,.rescard .table td{padding-inline:var(--s4)}
}

/* ============================================================
   v8 — hero refinement, share overflow, scoped htaccess options
   ============================================================ */

.hero__chips{
  list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:center;margin:var(--s5) 0 0;padding:0;
}
.hero__chips > li:first-child span{font:500 .78rem var(--mono);color:var(--ink-4);letter-spacing:.04em}
.hero__chips a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--rp);
  background:var(--paper);border:1px solid var(--line);
  font:500 .82rem/1 var(--display);color:var(--ink-3);text-decoration:none;
  transition:transform .16s var(--ease),border-color .16s,color .16s,box-shadow .16s;
}
.hero__chips a:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand-strong);box-shadow:var(--sh1)}
.hero__chips .icon{color:var(--brand);opacity:.85}

.trustrow{gap:var(--s5)}
.trustrow li{
  display:flex;align-items:flex-start;gap:var(--s3);text-align:left;
  padding:var(--s4) var(--s5);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r2);flex:1 1 220px;max-width:290px;
}
.trustrow__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;
  background:var(--brand-tint);color:var(--brand)}
.trustrow li > span:last-child{display:flex;flex-direction:column;gap:2px;font-size:.82rem;color:var(--ink-4);line-height:1.45}
.trustrow li strong{font:600 .9rem var(--display);color:var(--ink)}

/* ---- share overflow ---- */
.sharemore{position:relative;display:inline-block}
.sharemore summary{list-style:none;cursor:pointer}
.sharemore summary::-webkit-details-marker{display:none}
.sharemore__panel{
  position:absolute;bottom:calc(100% + 10px);right:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,38px);gap:7px;padding:var(--s3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh3);
  animation:dropIn .18s var(--ease);
}
.sharebtn:hover{background:var(--brandc,var(--brand))}
.sharebtn--copy:hover,.sharebtn--native:hover,.sharebtn--more:hover{background:var(--brand);color:#fff;border-color:transparent}

/* ---- scoped htaccess options ---- */
.check--scoped{padding:var(--s3) var(--s4);border:1px dashed var(--line);border-radius:var(--r1);
  background:var(--paper-2);grid-column:1/-1}
.scopenote{display:block;margin-top:5px;font-size:.79rem;color:var(--warn);line-height:1.5}
.scopenote code{background:var(--warn-tint);color:var(--warn);padding:1px 5px;border-radius:4px}
.check.is-blocked{opacity:.42;cursor:not-allowed}
.check.is-blocked input{cursor:not-allowed}
.scope-note{grid-column:1/-1;margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r1);
  background:var(--brand-tint);color:var(--brand-strong);font-size:.84rem}

/* ---- promo in the sidebar ---- */
.side-box .promo,.layout__side .promo{margin:0}
.layout__side > .promo{
  padding:var(--s5);border-radius:var(--r3);
  flex-direction:column;align-items:flex-start;gap:var(--s3);
}
.layout__side > .promo .promo__cta{width:100%;text-align:center}

/* ---- SEO tool result components ---- */
.densbar{display:block;height:7px;border-radius:4px;background:var(--paper-3);overflow:hidden;min-width:70px}
.densbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--brand-bright))}
.hops{list-style:none;margin:0 0 var(--s4);padding:0;counter-reset:hop}
.hop{display:flex;gap:var(--s4);padding:var(--s4) var(--s5);background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r2);margin-bottom:var(--s2)}
.hop--pass{border-left-color:var(--pass)}
.hop--warn{border-left-color:var(--warn)}
.hop--fail{border-left-color:var(--fail)}
.hop__n{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
  background:var(--paper-3);color:var(--ink-3);font:600 .8rem var(--mono)}
.hop__body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.hop__url{font-size:.88rem}
.hop__meta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;color:var(--ink-4)}
.serp{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s5);margin-bottom:var(--s4);max-width:620px}
.serp__url{font:400 .82rem/1.4 var(--sans);color:var(--ink-3);margin-bottom:5px;word-break:break-all}
.serp__title{font:400 1.28rem/1.3 var(--sans);color:#1a0dab;margin-bottom:5px}
.serp__desc{font:400 .88rem/1.58 var(--sans);color:var(--ink-3)}
@media (prefers-color-scheme:dark){.serp__title{color:#8ab4f8}}
.serp__title.is-over,.serp__desc.is-over{position:relative}
.serp__title.is-over::after,.serp__desc.is-over::after{
  content:"truncated";margin-left:8px;font:500 .62rem var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--warn);background:var(--warn-tint);padding:3px 8px;border-radius:var(--rp);
  vertical-align:middle;
}

/* ============================================================
   v9 — brand palette application, new hero, static pages, mobile
   ============================================================ */

/* ---- text-on-light uses the accessible variants ---- */
.prose a{color:var(--brand-strong)}
.prose a:hover{color:var(--brand-deep)}
.more,.megamenu__all,.raw summary,.review-form-wrap summary{color:var(--brand-strong)}
.sect__kicker,.card__eyebrow,.livesearch__cat{color:var(--brand-strong)}
.kicker{color:var(--brand-strong)}
.side-list a:hover,.catsect__head h2 a:hover,.sect h2 a:hover{color:var(--brand-strong)}
.hero__chips a:hover{color:var(--brand-strong)}
.results a{color:var(--brand-strong)}
.toolrate{color:var(--brand-strong)}
.ticks li::before,.trustrow .icon,.site-foot__ticks li::before{background:var(--spark);color:var(--spark)}
.trustrow__ico{background:var(--spark-tint);color:var(--spark-ink)}
.card a::after{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.hero__accent{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.counter__n{background:linear-gradient(140deg,var(--ink),var(--brand-strong));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pill--pass,.check-row--pass{--tone:var(--spark-ink)}
.densbar i{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 4px 16px -5px color-mix(in srgb,var(--brand) 65%,transparent)}
.btn--primary:hover{box-shadow:0 10px 26px -8px color-mix(in srgb,var(--brand) 75%,transparent)}
.card__icon,.catsect__icon,.tool-head__icon,.megamenu__ico,.review__avatar,.toolrate__score,.side-foot__avatar{
  background:linear-gradient(140deg,var(--brand),var(--brand-2))}
.brand__mark{box-shadow:0 3px 12px -3px color-mix(in srgb,var(--brand) 50%,transparent)}
.hero{background:
  radial-gradient(ellipse 55% 48% at 12% -8%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 66%),
  radial-gradient(ellipse 48% 42% at 88% 4%, color-mix(in srgb,var(--brand-2) 14%,transparent), transparent 66%),
  var(--paper-2)}
.hero__glow{background:
  radial-gradient(ellipse 44% 40% at 20% 0%, color-mix(in srgb,var(--brand) 20%,transparent), transparent 66%),
  radial-gradient(ellipse 40% 36% at 80% 8%, color-mix(in srgb,var(--brand-2) 18%,transparent), transparent 66%)}
.site-foot::before{background:
  radial-gradient(ellipse 50% 60% at 15% 0%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),
  radial-gradient(ellipse 40% 50% at 85% 10%,color-mix(in srgb,var(--brand-2) 14%,transparent),transparent 70%)}

/* ---- HERO, rebuilt ---- */
.hero{padding:clamp(52px,8vw,104px) 0 clamp(44px,6vw,80px);text-align:left}
.hero__inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);align-items:center;max-width:1180px;
}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero h1{margin:0 0 var(--s4);text-align:left;max-width:none}
.hero__accent{margin:0 0 var(--s5)}
.hero__lead{margin:0 0 var(--s6);text-align:left}
.hero__searchwrap{width:100%;max-width:none}
.hero__chips{justify-content:flex-start;margin-top:var(--s4)}
.trustrow{justify-content:flex-start;margin-top:var(--s6)}

/* right-hand panel: live stats board */
.heroboard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r4);
  box-shadow:var(--sh3);overflow:hidden;
}
.heroboard__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:14px var(--s5);background:var(--paper-2);border-bottom:1px solid var(--line);
  font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-4);
}
.heroboard__live{display:inline-flex;align-items:center;gap:7px;color:var(--spark-ink)}
.heroboard__live i{width:7px;height:7px;border-radius:50%;background:var(--spark);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--spark) 24%,transparent);animation:pulse 2.4s ease-in-out infinite}
.heroboard__grid{display:grid;grid-template-columns:1fr 1fr}
.heroboard__cell{padding:var(--s5);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.heroboard__cell:nth-child(2n){border-right:0}
.heroboard__cell:nth-last-child(-n+2){border-bottom:0}
.heroboard__n{display:block;font:700 1.85rem/1 var(--display);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--ink),var(--brand-strong));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.heroboard__l{display:block;font:500 .72rem var(--mono);color:var(--ink-4);margin-top:6px;letter-spacing:.05em}
.heroboard__foot{padding:var(--s4) var(--s5);background:var(--paper-2);border-top:1px solid var(--line)}
.heroboard__recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.heroboard__recent a{display:flex;align-items:center;gap:10px;font-size:.86rem;
  color:var(--ink-2);text-decoration:none;transition:color .15s,transform .15s var(--ease)}
.heroboard__recent a:hover{color:var(--brand-strong);transform:translateX(3px)}
.heroboard__recent .icon{color:var(--brand);flex:none}
.heroboard__recent span{margin-left:auto;font:500 .7rem var(--mono);color:var(--ink-4)}

@media(max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:var(--s7)}
  .heroboard{max-width:520px}
}

/* ---- static pages: readable card ---- */
.page-wrap{padding-bottom:var(--s9)}
.pagecard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r4);
  padding:clamp(24px,4vw,56px);box-shadow:var(--sh1);margin-top:var(--s5);
}
.pagecard .prose{max-width:72ch;margin-inline:auto}
.pagecard .prose h2{padding-top:var(--s5);border-top:1px solid var(--line-soft);margin-top:var(--s7)}
.pagecard .prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.pagecard .prose ul,.pagecard .prose ol{padding-left:var(--s5)}
.pagecard .prose table{display:block;overflow-x:auto;white-space:nowrap}
.pagecard .prose code{word-break:break-word}
.page-head--doc{padding-bottom:var(--s4)}
.page-toc{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s5);margin:0 0 var(--s6);
}
.page-toc strong{display:block;font:500 .68rem/1 var(--mono);text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-4);margin-bottom:var(--s3)}
.page-toc ol{margin:0;padding-left:var(--s5);columns:2;column-gap:var(--s6)}
.page-toc li{margin:5px 0;font-size:.9rem;break-inside:avoid}
.page-toc a{color:var(--ink-2);text-decoration:none}
.page-toc a:hover{color:var(--brand-strong)}
@media(max-width:680px){.page-toc ol{columns:1}}

/* ---- mobile padding corrections ---- */
@media(max-width:680px){
  .wrap{width:calc(100% - 32px)}
  .pagecard{padding:var(--s5) var(--s4);border-radius:var(--r3)}
  .pagecard .prose{max-width:none}
  .prose{font-size:1rem;line-height:1.72}
  .prose h2{font-size:1.32rem}
  .prose h3{font-size:1.1rem}
  .prose pre{padding:var(--s4) var(--s3);font-size:.78rem;border-radius:var(--r1)}
  .prose table{font-size:.85rem}
  .prose blockquote{padding:var(--s3) var(--s4)}
  .page-head h1,.tool-head h1{font-size:clamp(1.7rem,7.5vw,2.1rem)}
  .hero__inner{gap:var(--s6)}
  .heroboard__cell{padding:var(--s4)}
  .heroboard__n{font-size:1.5rem}
  .results > *:not(.results__title){margin-inline:var(--s4)}
  .rescard{margin-inline:0}
  .checks,.mono-list,.notes-box,.raw,.results .promo,.results .alert--error{margin-inline:var(--s4)}
  .code{font-size:.76rem;padding:var(--s4) var(--s3)}
  .table,.results .table{font-size:.8rem}
  .results .table th,.results .table td{padding:8px 10px}
  .side-box{padding:var(--s4)}
  .faqband__grid{gap:var(--s6)}
  .review{padding:var(--s4)}
  .reviews__summary{flex-direction:column;align-items:flex-start;text-align:left}
  .toolmeta{gap:var(--s2)}
  .toolmeta__pill{font-size:.72rem;padding:7px 12px}
}
@media(max-width:400px){
  .wrap{width:calc(100% - 24px)}
  .heroboard__grid{grid-template-columns:1fr}
  .heroboard__cell{border-right:0}
  .heroboard__cell:nth-last-child(2){border-bottom:1px solid var(--line)}
  .counters{grid-template-columns:1fr}
  .hero__chips{gap:6px}
  .hero__chips a{padding:7px 12px;font-size:.78rem}
}
/* nothing may exceed the viewport */
html,body{overflow-x:hidden;max-width:100%}
pre,code,table,.mono,.breakable{max-width:100%}
img,svg,iframe,video{max-width:100%;height:auto}

/* ============================================================
   v10 — green accents for emphasis, vertical rhythm, header/footer
   ============================================================ */

/* ---- header and footer follow the brand ---- */
.site-head{border-bottom-color:var(--line)}
.nav a.is-active{background:var(--brand-tint);color:var(--brand-strong)}
.nav__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.site-foot__ticks li{border-color:color-mix(in srgb,var(--spark) 30%,transparent)}
.site-foot a:hover{color:#fff}
.site-foot__col strong{border-bottom-color:rgb(255 255 255/.12)}

/* ---- green markers carry emphasis; pink stays structural ----
   Pink was appearing on every accent at once, which flattened the hierarchy.
   Green now marks confirmations and positives, pink marks brand and actions. */
.ticks li::before,.site-foot__ticks li::before{background:var(--spark)}
.trustrow__ico{background:var(--spark-tint);color:var(--spark-ink)}
.trustrow li{border-color:color-mix(in srgb,var(--spark) 22%,var(--line))}
.kicker{border-color:color-mix(in srgb,var(--spark) 32%,transparent);color:var(--spark-ink);background:var(--spark-tint)}
.kicker__dot{background:var(--spark);box-shadow:0 0 0 3px color-mix(in srgb,var(--spark) 25%,transparent)}
.heroboard__live{color:var(--spark-ink)}
.tool-box__note{background:var(--spark-tint);color:var(--spark-ink);
  border-top-color:color-mix(in srgb,var(--spark) 22%,transparent)}
.tool-box__note .icon{color:var(--spark)}
.toolmeta__pill .icon{color:var(--spark)}
.tool-box__badge{background:var(--spark-tint);color:var(--spark-ink)}
.card__uses .icon{color:var(--spark)}
.results__title{color:var(--spark-ink);background:linear-gradient(135deg,var(--spark-tint),var(--paper));
  border-bottom-color:color-mix(in srgb,var(--spark) 20%,transparent)}
.results__title::before{background:var(--spark);box-shadow:0 0 0 4px color-mix(in srgb,var(--spark) 22%,transparent)}
.chip--count{background:var(--spark-tint);color:var(--spark-ink)}
.pill--pass{background:var(--spark-tint);color:var(--spark-ink)}
.verdict--good{background:var(--spark-tint);border-color:var(--spark);color:var(--spark-ink)}
.check-row--pass{border-left-color:var(--spark)}
.score--good{background:var(--spark-tint)}
.score--good .score__grade,.score--good .score__pct{color:var(--spark-ink)}
.minicopy.is-done,.copy.is-done,.sharebtn.is-done{background:var(--spark-tint);border-color:var(--spark);color:var(--spark-ink)}
.helpful__btn:first-child:hover{border-color:var(--spark);color:var(--spark-ink);background:var(--spark-tint)}
.side-box--accent{background:linear-gradient(165deg,var(--spark-tint),var(--paper-2));
  border-color:color-mix(in srgb,var(--spark) 22%,transparent)}
.side-box--helpful{background:linear-gradient(160deg,var(--spark-tint),var(--paper-2));
  border-color:color-mix(in srgb,var(--spark) 22%,transparent)}
.side-box--helpful h3{border-bottom-color:color-mix(in srgb,var(--spark) 22%,transparent)}
.densbar i{background:linear-gradient(90deg,var(--spark),var(--brand-2))}
.hero__accent{background:linear-gradient(90deg,var(--brand),var(--spark))}
.review-form__msg.is-ok{background:var(--spark-tint);color:var(--spark-ink)}
.alert--ok{background:var(--spark-tint);color:var(--spark-ink)}

/* ---- vertical rhythm: headings need air above, not below ----
   Paragraphs were running straight into the next heading, which is what made
   blocks like "…addresses most of the gap." / "What it checks" read as one
   collapsed lump. */
.prose h2{margin-top:2.6em;margin-bottom:.7em}
.prose h3{margin-top:2em;margin-bottom:.55em}
.prose h4{margin-top:1.7em;margin-bottom:.45em}
.prose > h2:first-child,.prose > h3:first-child,.prose > h4:first-child{margin-top:0}
.prose p + h2,.prose ul + h2,.prose ol + h2,.prose pre + h2,
.prose table + h2,.prose blockquote + h2{margin-top:2.8em}
.prose p + h3,.prose ul + h3,.prose ol + h3,.prose pre + h3,
.prose table + h3,.prose blockquote + h3{margin-top:2.2em}
.prose h2 + p,.prose h3 + p,.prose h4 + p,
.prose h2 + ul,.prose h3 + ul,.prose h2 + ol,.prose h3 + ol{margin-top:0}
.prose p{margin-bottom:1.3em}
.prose ul,.prose ol{margin-bottom:1.4em}
.prose li{margin:.5em 0}
.prose li > p{margin-bottom:.6em}
.prose pre,.prose table,.prose blockquote{margin-top:1.5em;margin-bottom:1.6em}
.prose hr{margin:3em 0}

/* the same rhythm inside result panels and the editor preview */
.results h3{margin-top:2em}
.example .prose h2,.example .prose h3{margin-top:2.2em}
.faq2__a p + p{margin-top:1em}

/* section separation */
.sect + .sect{margin-top:var(--s8)}
.catsect + .catsect{margin-top:var(--s4)}
.prose section + section{margin-top:var(--s8)}
.meterline{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto;gap:var(--s3);
  align-items:center;margin-bottom:10px;font-size:.86rem}
.meterline__track{height:8px;border-radius:5px;background:var(--paper-3);overflow:hidden}
.meterline__track i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--spark),var(--brand-2))}
@media(max-width:600px){.meterline{grid-template-columns:1fr auto;gap:var(--s2)}
  .meterline__track{grid-column:1/-1}}

/* ============================================================
   v11 — footer surface, tool page rhythm
   ============================================================ */

/* ---- footer: brand-tinted deep surface, not flat black ---- */

@media (prefers-color-scheme:dark){
  
}
.site-foot::before{
  background:
    radial-gradient(ellipse 55% 70% at 12% 0%, color-mix(in srgb,var(--brand) 22%,transparent), transparent 68%),
    radial-gradient(ellipse 45% 55% at 88% 8%, color-mix(in srgb,var(--brand-2) 18%,transparent), transparent 68%);
  opacity:.55;
}
.site-foot a{color:#B9A9B4}
.site-foot a:hover{color:#fff}
.site-foot p{color:#A897A4}
.site-foot__brand strong{color:#fff}
.site-foot__col strong{color:#fff;border-bottom-color:rgb(255 255 255/.12)}
.site-foot__ticks li{
  background:rgb(255 255 255/.06);color:#CFC1CB;
  border-color:color-mix(in srgb,var(--spark) 26%,transparent);
}
.site-foot__legal{border-top-color:rgb(255 255 255/.09);background:rgb(0 0 0/.22)}
.site-foot__built{opacity:.62}

/* the dark readout keeps its own surface, but warmed to match */
.code-block{background:#141017;border-color:rgb(255 255 255/.09)}
.code{color:#DCD2D8}

/* ---- tool page: real separation between stacked sections ---- */
.layout__main > * + *{margin-top:var(--s8)}
.tool-head{padding-bottom:0}
.tool-box{margin-top:var(--s6)}
.results{margin-top:var(--s7)}
.resultshare{margin-top:var(--s5)}
.prose--intro{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--line-soft)}
.example{margin-top:var(--s8)}
.faq,.reviews,.related{margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--line)}
.faq > h2,.reviews > h2,.related > h2{margin-top:0;margin-bottom:var(--s5)}
.layout__main > .prose > h2:first-child{margin-top:0}
.layout__main .prose{margin-top:var(--s7)}
.layout__main .prose + .prose{margin-top:var(--s8)}

/* body copy under the tool gets breathing room from the form */
.tool-body{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--line-soft)}

/* sidebar boxes stack with consistent gaps */
.layout__side > * + *{margin-top:var(--s4)}

@media(max-width:980px){
  .layout__main > * + *{margin-top:var(--s7)}
  .faq,.reviews,.related{margin-top:var(--s8);padding-top:var(--s6)}
}
@media(max-width:680px){
  .layout__main > * + *{margin-top:var(--s6)}
  .prose--intro,.tool-body{margin-top:var(--s6);padding-top:var(--s5)}
  .faq,.reviews,.related{margin-top:var(--s7);padding-top:var(--s5)}
  .site-foot__legal{text-align:center}
}

/* ============================================================
   v12 — sticky sidebar, footer surface, sidebar promo card
   ============================================================ */

/* ---- sidebar sticks and scrolls in steps with the page ----
   The column is often taller than the viewport, which makes plain sticky
   look broken: it pins the top and the rest never comes into view. Pinning
   the bottom edge instead lets the column scroll through, then hold. */


/* ---- footer: clearly not black ---- */

@media (prefers-color-scheme:dark){
  
}
.site-foot::before{
  background:
    radial-gradient(ellipse 55% 70% at 12% 0%, color-mix(in srgb,var(--brand) 26%,transparent), transparent 66%),
    radial-gradient(ellipse 45% 55% at 88% 6%, color-mix(in srgb,var(--brand-2) 22%,transparent), transparent 66%);
  opacity:.7;
}
.site-foot a{color:#C7B6C2}
.site-foot a:hover{color:#fff}
.site-foot p{color:#B4A3B0}
.site-foot__legal{background:rgb(0 0 0/.16);border-top-color:rgb(255 255 255/.1)}
.site-foot__ticks li{background:rgb(255 255 255/.08);color:#DACCD6}

/* ---- promo in the sidebar reads as a card, matching the other boxes ---- */
.layout__side .promo{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);
  margin:0;padding:var(--s5);border-radius:var(--r3);
  border-width:1px;text-align:left;
}
.layout__side .promo::before{
  content:"Sponsored";
  font:500 .62rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-4);margin-bottom:2px;
}
.layout__side .promo__text{gap:6px}
.layout__side .promo__text strong{font-size:1rem;line-height:1.35}
.layout__side .promo__text span{font-size:.87rem;line-height:1.5}
.layout__side .promo__cta{
  width:100%;text-align:center;padding:12px 18px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 14px -5px color-mix(in srgb,var(--brand) 65%,transparent);
  transition:transform .16s var(--ease),box-shadow .16s;
}
.layout__side .promo__cta:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 75%,transparent)}

/* ============================================================
   v13 — one footer rule, one sidebar rule. No more layering.
   ============================================================ */

/* ---- FOOTER: light surface that belongs to the site ----
   Three attempts at a "warm dark" all read as black on real screens.
   A light footer matching the page removes the problem entirely. */
.site-foot{
  background:var(--paper-2);
  color:var(--ink-2);
  border-top:1px solid var(--line);
}
.site-foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 80% at 10% 0%, color-mix(in srgb,var(--brand) 12%,transparent), transparent 62%),
    radial-gradient(ellipse 45% 70% at 90% 4%, color-mix(in srgb,var(--brand-2) 10%,transparent), transparent 62%);
  opacity:1;
}
.site-foot__brand strong{color:var(--ink)}
.site-foot__brand p{color:var(--ink-3)}
.site-foot p{color:var(--ink-3)}
.site-foot a{color:var(--ink-3)}
.site-foot a:hover{color:var(--brand-strong)}
.site-foot__col strong{
  color:var(--ink);border-bottom:1px solid var(--line);
}
.site-foot__ticks li{
  background:var(--spark-tint);color:var(--spark-ink);
  border:1px solid color-mix(in srgb,var(--spark) 28%,transparent);
}
.site-foot__ticks li::before{background:var(--spark)}
.site-foot__legal{
  background:var(--paper-3);border-top:1px solid var(--line);color:var(--ink-3);
}
.site-foot__built{opacity:.75}

/* ---- SIDEBAR: the simple sticky that worked before ---- */
@media (min-width:981px){
  /* Plain sticky, as it was in v11. No max-height and no internal
     scrollbar — a second scrollbar inside the page is the thing that
     made this feel broken. Tall columns simply scroll with the page
     and then hold once the top reaches the offset. */
  .layout__side{
    position:sticky;
    top:96px;
    align-self:start;
  }
}
@media (max-width:980px){
  .layout__side{position:static}
}

/* ============================================================
   Promotion boxes — visible, self-contained cards
   ============================================================ */
.pbox{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  padding:var(--s5);border-radius:var(--r3);
  border:1.5px solid var(--line);background:var(--paper);
  box-shadow:var(--sh1);
}
.pbox__tag{
  font:600 .6rem/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-4);
}
.pbox__title{font:600 1.06rem/1.35 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pbox__text{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-3)}
.pbox__cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:13px 22px;margin-top:var(--s1);
  border-radius:var(--rp);text-decoration:none;
  font:600 .92rem/1 var(--display);letter-spacing:-.01em;color:#fff;
  transition:transform .16s var(--ease),box-shadow .16s,filter .16s;
}
.pbox__cta:hover{transform:translateY(-2px);filter:brightness(1.05);color:#fff}

.pbox--brand{
  background:linear-gradient(160deg,var(--brand-tint),var(--paper));
  border-color:color-mix(in srgb,var(--brand) 40%,transparent);
}
.pbox--brand .pbox__tag{color:var(--brand-strong)}
.pbox--brand .pbox__cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 4px 16px -5px color-mix(in srgb,var(--brand) 70%,transparent)}

.pbox--success{
  background:linear-gradient(160deg,var(--spark-tint),var(--paper));
  border-color:color-mix(in srgb,var(--spark) 42%,transparent);
}
.pbox--success .pbox__tag{color:var(--spark-ink)}
.pbox--success .pbox__cta{background:linear-gradient(135deg,var(--spark),var(--spark-ink));
  box-shadow:0 4px 16px -5px color-mix(in srgb,var(--spark) 70%,transparent)}

.pbox--warn{
  background:linear-gradient(160deg,var(--brand-2-tint),var(--paper));
  border-color:color-mix(in srgb,var(--brand-2) 42%,transparent);
}
.pbox--warn .pbox__tag{color:var(--brand-2-ink)}
.pbox--warn .pbox__cta{background:linear-gradient(135deg,var(--brand-2),var(--brand));
  box-shadow:0 4px 16px -5px color-mix(in srgb,var(--brand-2) 70%,transparent)}

.pbox--plain{background:var(--paper-2)}
.pbox--plain .pbox__cta{background:var(--ink);color:var(--paper)}

/* under a result the box sits wide, so let the button size to content */
.layout__main > .pbox,.results + .pbox{margin-top:var(--s5)}
@media(min-width:681px){
  .layout__main > .pbox{flex-direction:row;align-items:center;gap:var(--s5);flex-wrap:wrap}
  .layout__main > .pbox .pbox__tag{position:absolute;opacity:0;pointer-events:none}
  .layout__main > .pbox .pbox__title{flex:1 1 260px}
  .layout__main > .pbox .pbox__text{flex:2 1 320px}
  .layout__main > .pbox .pbox__cta{width:auto;margin:0;white-space:nowrap}
}

/* ---- promotion box: explicit rules so nothing earlier can flatten it ---- */
.layout__side .pbox,
.layout__main .pbox{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:22px;
  margin:0;
  border-radius:var(--r3);
  border:1.5px solid var(--line);
  background:var(--paper);
  box-shadow:var(--sh1);
  text-align:left;
}
.layout__side .pbox__tag,
.layout__main .pbox__tag{
  display:block;
  font:600 .6rem/1 var(--mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-4);
  margin:0;
}
.layout__side .pbox__title,
.layout__main .pbox__title{
  display:block;
  font:600 1.05rem/1.35 var(--display);
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}
.layout__side .pbox__text,
.layout__main .pbox__text{
  display:block;
  margin:0;
  font-size:.9rem;
  line-height:1.55;
  color:var(--ink-3);
}
.layout__side .pbox__cta,
.layout__main .pbox__cta{
  display:block;
  width:100%;
  text-align:center;
  padding:13px 22px;
  margin:4px 0 0;
  border-radius:var(--rp);
  text-decoration:none;
  font:600 .92rem/1 var(--display);
  color:#fff;
}

/* wide layout under a result: one row instead of a stacked card */
@media (min-width:681px){
  .layout__main > .pbox{
    flex-direction:row;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    padding:22px 26px;
  }
  .layout__main > .pbox .pbox__tag{
    order:-1;
    flex:0 0 100%;
  }
  .layout__main > .pbox .pbox__title{flex:1 1 240px}
  .layout__main > .pbox .pbox__text{flex:2 1 300px}
  .layout__main > .pbox .pbox__cta{
    width:auto;
    margin:0;
    white-space:nowrap;
    flex:0 0 auto;
  }
}
.promoslot{display:flex;flex-direction:column;gap:var(--s4)}
.promoslot:empty{display:none}
/* uploaded logo sits beside the wordmark */
.brand__img{display:block;height:34px;width:auto;max-width:190px;object-fit:contain}
.site-foot .brand__img{height:32px}
@media(max-width:680px){.brand__img{height:30px;max-width:150px}}

/* ---- brand lockup: an uploaded logo replaces the wordmark entirely ---- */
.brand{gap:11px}
.brand__mark--img{display:flex;align-items:center;line-height:0}
.brand__mark--img .brand__img,
.brand__mark--img picture{display:block;line-height:0}

/* Height is fixed to the header rhythm; width follows the aspect ratio up to
   a ceiling, so a wide logo cannot push the navigation off the row. */
.brand__img{
  display:block;
  height:38px;
  width:auto;
  max-width:230px;
  object-fit:contain;
  object-position:left center;
}
.site-foot .brand__img{height:36px;max-width:210px}

@media(max-width:980px){
  .brand__img{height:34px;max-width:190px}
}
@media(max-width:680px){
  .brand__img{height:30px;max-width:150px}
  .site-foot .brand__img{height:32px}
}
@media(max-width:400px){
  .brand__img{height:28px;max-width:128px}
}
/* logo height on mobile comes from Settings → Logo & images */
@media(max-width:680px){
  .brand__img{height:var(--logo-h-mobile,30px)!important;max-width:min(150px,42vw)!important}
}

/* ---- footer credit ---- */
.site-foot__built{
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex-wrap:wrap;font-size:.9rem;color:var(--ink-3);opacity:1;
}
.site-foot__built .heart{
  display:inline-flex;color:var(--brand);
  animation:heartbeat 2.4s ease-in-out infinite;transform-origin:center;
}
.site-foot__built a{
  color:var(--brand-strong);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb,var(--brand) 40%,transparent);
  transition:color .15s,border-color .15s;
}
.site-foot__built a:hover{color:var(--brand);border-bottom-color:var(--brand)}
@keyframes heartbeat{
  0%,28%,100%{transform:scale(1)}
  14%{transform:scale(1.22)}
  21%{transform:scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.site-foot__built .heart{animation:none}}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- hero trust cards: sized to their content on small screens ---- */
.trustrow{
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch;
}
.trustrow li{
  display:flex;align-items:center;gap:10px;
  flex:0 1 auto;min-width:0;
  padding:11px 15px;
}
.trustrow li > span:last-child{
  display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.3;
}
.trustrow li strong{font-size:.88rem;white-space:nowrap}
.trustrow__ico{flex:none;width:30px;height:30px}

@media(max-width:680px){
  /* The cards were stretching to a fixed grid width while holding two short
     lines, so most of each card was empty. They now hug their text. */
  .trustrow{gap:8px}
  .trustrow li{padding:9px 12px;gap:8px;border-radius:var(--r2)}
  .trustrow li strong{font-size:.82rem}
  .trustrow li > span:last-child{font-size:.72rem}
  .trustrow__ico{width:26px;height:26px}
  .trustrow__ico svg{width:13px;height:13px}
}
@media(max-width:400px){
  .trustrow{flex-direction:column;align-items:stretch}
  .trustrow li{width:100%}
  .trustrow li strong{white-space:normal}
}

/* ---- category page body copy ---- */
.cat-body{margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--line)}
.cat-body table{width:100%;border-collapse:collapse;margin:var(--s5) 0}
.cat-body th{text-align:left;font:600 .82rem var(--display);color:var(--ink-3);
  padding:10px 12px;border-bottom:2px solid var(--line)}
.cat-body td{padding:11px 12px;border-bottom:1px solid var(--line-soft);font-size:.94rem;vertical-align:top}
.cat-body tr:last-child td{border-bottom:0}
.cat-body td a{font-weight:600}
.cat-faq{margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--line)}
.cat-faq > h2{margin-top:0;margin-bottom:var(--s5)}
@media(max-width:680px){
  .cat-body table{display:block;overflow-x:auto;white-space:nowrap}
  .cat-body{margin-top:var(--s7);padding-top:var(--s5)}
}

/* ============================================================
   v23 — vertical rhythm: consistent gaps between and within sections
   ============================================================ */

/* One scale, used everywhere, so sections cannot drift apart by accident.
   Between major sections is deliberately larger than any gap inside one —
   that contrast is what makes a page read as distinct blocks rather than
   one continuous column of text. */
:root{
  --gap-section: clamp(56px, 7vw, 88px);   /* between major sections */
  --gap-block:   clamp(28px, 3.5vw, 40px); /* between blocks inside a section */
  --gap-tight:   clamp(16px, 2vw, 22px);   /* between closely related items */
}

/* ---- between major sections ---- */
.layout__main > * + *,
.cat-body,
.cat-faq,
.tool-body,
.prose--intro,
.example,
.faq,
.reviews,
.related{
  margin-top:var(--gap-section);
}
.cat-body,
.cat-faq,
.tool-body,
.prose--intro,
.faq,
.reviews,
.related{
  padding-top:var(--gap-block);
}
.sect + .sect,
.catsect + .catsect{margin-top:var(--gap-section)}

/* a section's own heading should not inherit the gap meant to precede it */
.cat-body > h2:first-child,
.cat-faq > h2:first-child,
.tool-body > h2:first-child,
.prose > h2:first-child,
.prose > h3:first-child,
.prose > p:first-child{margin-top:0}

/* ---- inside a section ---- */
.prose h2{margin-top:var(--gap-block);margin-bottom:.55em}
.prose h3{margin-top:calc(var(--gap-block) * .72);margin-bottom:.42em}
.prose h4{margin-top:calc(var(--gap-block) * .55);margin-bottom:.35em}
.prose p{margin:0 0 1.15em}
.prose > p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.35em}
.prose li{margin:.42em 0}
.prose li > p{margin-bottom:.5em}
.prose li:last-child{margin-bottom:0}
.prose pre,.prose blockquote{margin:var(--gap-tight) 0 var(--gap-block)}
.prose table{margin:var(--gap-tight) 0 var(--gap-block)}
.prose hr{margin:var(--gap-section) 0;border:0;border-top:1px solid var(--line)}

/* a heading straight after a block needs more air than after a paragraph */
.prose table + h2,.prose pre + h2,.prose blockquote + h2,
.prose ul + h2,.prose ol + h2{margin-top:calc(var(--gap-block) * 1.15)}

/* ---- FAQ blocks ---- */
.faq__list,.faq2__list{display:flex;flex-direction:column;gap:var(--s2)}
.faq__item{padding:var(--s4) 0;border-bottom:1px solid var(--line-soft)}
.faq__item:last-child{border-bottom:0}
.faq__item summary{padding:var(--s2) 0;line-height:1.45}
.faq__a{padding-top:var(--s3)}
.faq__a > p{margin:0 0 .9em}
.faq__a > p:last-child{margin-bottom:0}

/* ---- category page grid ---- */
.catsect__head{margin-bottom:var(--gap-tight)}
.cat-grid,.sect__grid{gap:var(--s4)}

@media(max-width:680px){
  :root{
    --gap-section:44px;
    --gap-block:24px;
    --gap-tight:14px;
  }
  .prose p{margin-bottom:1.05em}
  .faq__item{padding:var(--s3) 0}
}

/* ---- expanded on-page report ---- */
.rescard__note{margin:0;padding:var(--s3) var(--s5) var(--s4);font-size:.86rem;
  line-height:1.55;color:var(--ink-3);border-top:1px solid var(--line-soft)}
.kwhead{margin:var(--s4) var(--s5) 0;font:600 .74rem var(--mono);text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-4)}
.kwtable td{vertical-align:middle}
.spots{display:flex;flex-wrap:wrap;gap:4px}
.spot{display:inline-block;padding:3px 7px;border-radius:5px;font:500 .68rem var(--mono);
  background:var(--paper-3);color:var(--ink-4);opacity:.55}
.spot--on{background:var(--spark-tint);color:var(--spark-ink);opacity:1;font-weight:600}
.readbar{height:9px;margin:var(--s4) var(--s5);border-radius:5px;overflow:hidden;
  background:linear-gradient(90deg,#E5484D22,#F3680B22,#12B87722)}
.readbar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--spark))}
.outline{list-style:none;margin:0;padding:var(--s4) var(--s5);display:flex;
  flex-direction:column;gap:7px;font-size:.9rem}
.outline li{display:flex;align-items:baseline;gap:9px;color:var(--ink-2);line-height:1.45}
.outline__tag{flex:none;font:600 .66rem var(--mono);padding:2px 6px;border-radius:4px;
  background:var(--brand-tint);color:var(--brand-strong)}
.outline__l2{padding-left:var(--s4)}
.outline__l3{padding-left:calc(var(--s4) * 2)}
.outline__l4,.outline__l5,.outline__l6{padding-left:calc(var(--s4) * 3)}
.outline__l1 .outline__tag{background:var(--spark-tint);color:var(--spark-ink)}
@media(max-width:600px){
  .spots{gap:3px}
  .spot{padding:2px 5px;font-size:.62rem}
  .outline__l3,.outline__l4,.outline__l5,.outline__l6{padding-left:var(--s4)}
}

/* ---- page metadata card ---- */
.metafield{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft)}
.metafield__top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:8px}
.metafield__label{font:600 .84rem var(--display);color:var(--ink)}
.metafield__stats{font-size:.76rem;color:var(--ink-4);margin-left:auto}
.metafield__val{margin:0 0 10px;font-size:.95rem;line-height:1.5;color:var(--ink-2);
  padding:10px 13px;background:var(--paper-2);border-radius:var(--r1);word-break:break-word}
.metafield__empty{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.5}
.metabar{height:6px;border-radius:4px;background:var(--paper-3);overflow:hidden}
.metabar i{display:block;height:100%;border-radius:4px;background:var(--spark)}
.metabar i.over{background:var(--brand-2)}
.schemalist{display:flex;flex-wrap:wrap;gap:6px;padding:var(--s4) var(--s5)}
@media(max-width:600px){
  .metafield__stats{margin-left:0;width:100%}
  .metafield{padding:var(--s4)}
}

/* ============================================================
   v24 — category page rhythm
   ============================================================ */

/* The intro sat almost flush against the card grid, so the page read as one
   run-on block. The grid now gets a full section gap above it. */
.page-head + .card-grid,
.prose--intro + .card-grid{
  margin-top:var(--gap-section);
}
.prose--intro{
  margin-top:var(--gap-block);
  padding-top:0;
  border-top:0;                  /* the H1 above is already a divider */
  max-width:68ch;
}
.prose--intro > p{margin-bottom:0}
.prose--intro > p + p{margin-top:.9em}
.card-grid{gap:var(--s4)}
.card-grid + .cat-body{margin-top:var(--gap-section)}

/* ---- FAQ: the boxes were cramped against their own text ---- */
.faq__list{
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}
.faq__item{
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r3);
  background:var(--paper);
  overflow:hidden;
  transition:border-color .16s, box-shadow .16s;
}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item[open]{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--line));
  box-shadow:var(--sh1);
}
.faq__item summary{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  padding:var(--s5);
  margin:0;
  cursor:pointer;
  font:600 1rem/1.5 var(--display);
  color:var(--ink);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";
  flex:none;
  width:11px;height:11px;
  margin-left:auto;
  margin-top:.42em;
  border-right:2px solid var(--ink-4);
  border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg);
  transition:transform .2s var(--ease), border-color .16s;
}
.faq__item[open] summary::after{
  transform:rotate(-135deg);
  border-color:var(--brand);
}
.faq__item summary:hover{color:var(--brand-strong)}
.faq__a{
  padding:0 var(--s5) var(--s5);
  margin-top:calc(var(--s2) * -1);
  font-size:.95rem;
  line-height:1.68;
  color:var(--ink-2);
  max-width:72ch;
}
.faq__a > p{margin:0 0 .95em}
.faq__a > p:last-child{margin-bottom:0}
.faq__a ul,.faq__a ol{margin:.6em 0 .95em;padding-left:1.3em}
.faq__a li{margin:.35em 0}

@media(max-width:680px){
  .page-head + .card-grid,
  .prose--intro + .card-grid{margin-top:var(--gap-block)}
  .faq__item summary{padding:var(--s4);font-size:.94rem;gap:var(--s2)}
  .faq__a{padding:0 var(--s4) var(--s4);font-size:.91rem}
  .faq__list{gap:10px}
}