/* The two "Before You Buy" pages (Website V2; rebuilt Oct 28 2026, task F2, second pass after AK's Oct 28 review).
   Oct 27 night (Krish call, task HOWTO-OBJECTIONS): /objections answers are one row each (objection left, supporting point right);
   /who-its-for untouched (the worst-reviews ledger stays exactly as it was).
   /objections (.st--ob): the approved hero (title + theme index card), the /library filter row copied exactly (All + themes, with counts),
   one theme at a time listed vertically. /who-its-for (.st--wf): not-for icon cards (one kind line each), lean worst-review cards (stars,
   year, one line said, one line changed), and one card per reader for who it is for (products to start with as official marks).
   Brand tokens only; Cabinet Grotesk + Manrope come from hai-brand.css. Normal scroll, no sticky bars. */
.st {
  --gold: #FFC61E; --gold-3: #FFE8A5; --violet: #341D99; --ink: #110A33; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478;
  --line: rgba(17,10,51,.12); --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --body: Manrope, "Manrope Fallback", Arial, sans-serif; --shell: 800px; --wide: 1080px; --gutter: clamp(16px, 4vw, 48px);
  --sm: 0 2px 8px rgba(17,10,51,.08); --md: 0 12px 32px -12px rgba(17,10,51,.22);
  --ease: cubic-bezier(.16, 1, .3, 1);
  margin: 0; overflow-x: clip; background: #fff; color: var(--ink); font-family: var(--body);
}
html { overflow-x: clip; }
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.st :where(ul, ol) { padding: 0; list-style: none; }
.st-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.st-shell--wide { max-width: var(--wide); }
.st-shell--lib { max-width: 1200px; padding: 0 clamp(20px, 4vw, 48px); }   /* same box as the /library page (.lib-wrap) */
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-ic { display: block; width: 20px; height: 20px; flex: none; }
.st main a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.st main p { text-wrap: pretty; }
.st .st-h2 { text-align: center; font: 700 clamp(28px, 1.2rem + 1.6vw, 36px)/1.12 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.st-sec-lede { max-width: 620px; margin: 12px auto 0; text-align: center; color: var(--slate); font: 500 16px/1.6 var(--body); text-wrap: pretty; }
.st-lede { max-width: 52ch; margin-top: 16px; font-size: clamp(17px, 1rem + .3vw, 19px); line-height: 1.6; color: var(--slate); }
.st-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 800 16px/1 var(--body); text-decoration: none; color: var(--ink); transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease); }
.st-btn--gold { background: var(--gold); }
.st-btn--line { border: 1.5px solid var(--ink); background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .st-btn--gold:hover { background: var(--gold-3); }
  .st-btn--line:hover { background: var(--gold-3); border-color: var(--gold-3); }
}
.st-btn:active { transform: scale(.96); }

/* closing CTA: one per page, cream band (never dark on the dark footer) */
.st-close { padding: clamp(48px, 6vw, 72px) 0; background: var(--cream); text-align: center; }
.st-close h2 { font: 700 clamp(28px, 1.2rem + 1.6vw, 36px)/1.12 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.st-close__lede { max-width: 56ch; margin: 12px auto 0; font-size: 17px; line-height: 1.6; color: var(--ink); opacity: .82; }
.st-close__aside { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.st-close__aside a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ================= /objections ================= */
/* hero. AS-G (Oct 26pm anti-slop pass): the theme index card repeated the tab row right under it (themes twice in the first screen),
   so the hero is the centred title + one line on mist, and the /library-style tab row below is the one theme control at every width.
   H1 uses the same 44px token as /who-its-for, its sibling page. */
.ob-hero { padding: clamp(112px, 11vw, 136px) 0 clamp(24px, 3vw, 32px); background: var(--mist); text-align: center; }
.st .ob-hero h1 { margin-inline: auto; font: 700 clamp(32px, 1.2rem + 2vw, 44px)/1.08 var(--disp); letter-spacing: -.03em; text-wrap: balance; max-width: 22ch; }
.ob-hero .st-lede { margin-inline: auto; max-width: 60ch; font-size: 17px; }

/* filter row: a copy of the /library tabs (views/resources.ejs .lib-tabs / .lib-tab), same sizes and states */
.ob-tabs-bar { background: var(--mist); padding: 0 0 20px; scroll-margin-top: 96px; }
.ob-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; background: #fff; border: 1px solid #E6E8EF; border-radius: 999px; width: max-content; max-width: 100%; margin-inline: auto; }
.ob-tabs::-webkit-scrollbar { display: none; }
.ob-tab { box-sizing: border-box; touch-action: manipulation; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font: 700 15px/1 var(--body); color: var(--slate); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .25s var(--ease), color .25s; }
.ob-tab:hover { color: var(--ink); background: var(--mist); }
.st main .ob-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 999px; }
.ob-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.ob-tab small { font: 700 13px/1 var(--body); padding: 4px 7px; border-radius: 999px; background: rgba(17,10,51,.07); color: inherit; }
.ob-tab[aria-selected="true"] small { background: var(--gold); color: var(--ink); }

/* the list: one theme at a time (All = every theme), each objection a full-width row, question left, answer right */
.ob-panel { padding: 0 0 clamp(48px, 6vw, 72px); background: var(--mist); }
.ob-theme { padding-top: clamp(28px, 3vw, 40px); scroll-margin-top: 96px; }
.ob-theme[hidden] { display: none; }
/* W7 (Oct 26pm): theme heading centred like every section heading (icon tile + title on one line), the one-line promise under it,
   then Amar's video slot as a quiet pill (a live video shows its thumbnail in the pill). */
.ob-theme__head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 24px; text-align: center; }
/* AS-G: one H2 size on the page (36px, the same token as .st-h2 and the close band); the theme icon sits bare beside the title, no tile */
.st .ob-theme__head h2 { display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(28px, 1.2rem + 1.6vw, 36px)/1.12 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.st .ob-theme__ic { width: 30px; height: 30px; color: var(--ink); }
.ob-theme__head > p:not(.ob-video) { max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--slate); }
.ob-video { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 4px 16px 4px 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ob-video__play { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.ob-video__play .st-ic { width: 12px; height: 12px; margin-left: 2px; }
.st .ob-video__cap { font: 600 14px/1.35 var(--body); color: var(--slate); text-align: left; text-wrap: balance; }
.ob-video--live { position: relative; padding-left: 4px; }
.ob-video--live img { width: 64px; height: 36px; border-radius: 999px; object-fit: cover; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.ob-video--live .ob-video__play { position: absolute; left: 22px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; }
.ob-video--live .ob-video__cap { color: var(--ink); font-weight: 800; }
.ob-sub { display: flex; align-items: center; gap: 16px; margin: 28px 0 14px; font: 700 20px/1.25 var(--disp); letter-spacing: -.01em; }
.ob-sub::before, .ob-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ob-theme > .ob-sub:first-of-type { margin-top: 0; }
/* Oct 27 night (Krish call t=670..728 + AK; task HOWTO-OBJECTIONS): ONE row per objection, replacing the two-across cards.
   Left: the objection as a plain bold heading (Cabinet 20px, no underline since Oct 27 late), the answer in ink, one supporting line in slate.
   Right: the supporting point on mist (tick + proof line, then its link), with a video thumbnail on top when a row has one.
   Concentric: card 24 - inset 8 = point panel 16. Phones stack the point under the answer. */
.ob-list { display: flex; flex-direction: column; gap: 16px; }
.ob-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 8px 32px; align-items: stretch; padding: 8px; border-radius: 24px; background: #fff; border: 1px solid var(--line); scroll-margin-top: 96px; transition: border-color .3s var(--ease); }
.ob-row:target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-3); }
.ob-row__main { padding: 20px 0 20px 20px; }
/* Oct 27 late (KRISH-OCT27-FRAMES correction e): the "bold, bigger, underlined" ask was for /who-its-for, so the objection heading is
   plain bold at the normal heading size (Cabinet 700 20px, as the old cards), no underline. */
.st .ob-row__q { font: 700 20px/1.3 var(--disp); letter-spacing: -.01em; text-wrap: balance; }
.ob-row__q a { color: var(--ink); text-decoration: none; }
/* Oct 27 final QA: the answer is regular 16px (was 600 17px) so the 20px bold objection heading leads */
.st .ob-row__lead { margin-top: 8px; font: 400 16px/1.6 var(--body); color: var(--ink); }
.st .ob-row__more { margin-top: 6px; font: 400 16px/1.6 var(--body); color: var(--slate); }
.ob-row__point { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 20px; border-radius: 16px; background: var(--mist); }
.ob-row__video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--ink); }
.ob-row__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-row__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.ob-row__play .st-ic { width: 16px; height: 16px; margin-left: 2px; }
.st .ob-row__proof { display: flex; align-items: flex-start; gap: 10px; font: 600 15px/1.5 var(--body); color: var(--ink); }
.ob-row__tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.ob-row__tick .st-ic { width: 11px; height: 11px; }
.ob-row__link, .wf-card__fix a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink); font: 800 14px/1.2 var(--body); text-decoration: underline; text-decoration-color: rgba(17,10,51,.25); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ob-row__link { display: inline; margin-left: 30px; padding-block: 10px; line-height: 1.5; }   /* inline: a wrapped label keeps its arrow on the last word */
.ob-row__link .ob-row__go { display: inline-block; vertical-align: -2px; margin-left: 6px; }
.ob-row__go, .wf-card__go { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.ob-row__link:hover, .wf-card__fix a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .ob-row__link:hover .ob-row__go, .wf-card__fix a:hover .wf-card__go { transform: translateX(3px); } }

/* ================= /who-its-for ================= */
.wf-h1 { text-align: center; font: 700 clamp(32px, 1.2rem + 2vw, 44px)/1.08 var(--disp); letter-spacing: -.03em; text-wrap: balance; }
/* First frame (AK, Oct 28): heading + all six cards fit in the first screen at 1280x720, 1440x900 and 1512x982 */
.wf-not { padding: clamp(120px, 10.5vw, 148px) 0 clamp(40px, 4vw, 56px); background: var(--mist); }
.wf-not .st-sec-lede { margin-top: 8px; }
/* Oct 27 (AK: "the old UI was much better"): the not-for section is back to its card UI, a 3x2 grid of white cards (cream icon tile with the small
   gold cross, the who in bold Cabinet, the reason in slate). Same text hierarchy as the lean list, so the cleaner line formatting AK liked stays. */
.wf-not__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.wf-nf { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sm); }
.wf-nf__art { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--cream); }
.wf-nf__ic { width: 28px; height: 28px; }
.wf-nf__x { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; }
.wf-nf__x .st-ic { width: 11px; height: 11px; }
.wf-nf__body { min-width: 0; }
/* Oct 27 late (KRISH-OCT27-FRAMES correction e, t=704-728): Krish wants these six titles bold, bigger and underlined for emphasis.
   Cabinet 700 at 22px (was 18px) with a gold brand underline, offset clear of the descenders. */
.st .wf-nf__t { font: 700 clamp(20px, 1rem + .4vw, 22px)/1.3 var(--disp); letter-spacing: -.015em; text-wrap: balance; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-skip-ink: auto; }
.wf-nf__why { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--slate); }

.wf-nf { scroll-margin-top: 112px; transition: border-color .3s var(--ease); }
.wf-nf:target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-3); }

/* W7 (Oct 26pm): the worst reviews as ONE ledger, not six loose cards. Each row reads left to right: rating and year, what they said
   (Cabinet, the loudest thing in the row), what changed since (with its link), and what the review ties to: a not-for reason above
   (same icon and gold cross as its card, links back up to it) or a gap closed. Hairlines between rows, no inner boxes. */
.wf-rv { padding: clamp(48px, 5vw, 72px) 0; }   /* AS-G: 88 -> 72px max, AK: no oversized gaps */
.wf-ledger { margin-top: clamp(28px, 3vw, 40px); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sm); overflow: hidden; }
.wf-ledger__head, .wf-row { display: grid; grid-template-columns: 164px minmax(0, .9fr) minmax(0, 1.2fr) 204px; column-gap: 28px; align-items: center; padding-inline: 28px; }
.wf-ledger__head { padding-block: 12px; background: var(--mist); border-bottom: 1px solid var(--line); font: 800 13px/1.3 var(--body); color: var(--slate); }
.wf-row { padding-block: 16px; scroll-margin-top: 112px; }
.wf-row + .wf-row { border-top: 1px solid var(--line); }
.wf-row:target { background: var(--cream); }
.wf-row__rate { display: flex; align-items: center; gap: 10px; }
.wf-stars { display: block; flex: none; width: 100px; height: 20px; }
.wf-row__year { padding: 2px 10px; border-radius: 999px; background: var(--mist); font: 800 13px/20px var(--body); font-variant-numeric: tabular-nums; }
.st .wf-row__said { font: 700 18px/1.35 var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.st .wf-row__fix p { font: 400 15px/1.55 var(--body); color: var(--ink); }
.wf-row__fix a { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink); font: 800 14px/1.2 var(--body); text-decoration: underline; text-decoration-color: rgba(17,10,51,.25); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.wf-row__fix a:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .wf-row__fix a:hover .wf-card__go { transform: translateX(3px); } }
/* AS-G: one chip style for the column (audit: cream and lavender chips in one column). Lavender, ink text; a cross for "not for" (links
   back up to that row, gold-300 on hover) or a tick for "Gap closed". */
.wf-tie { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; white-space: nowrap; min-height: 36px; padding: 4px 14px 4px 12px; border-radius: 999px; background: var(--lav); font: 800 14px/1.25 var(--body); color: var(--ink); text-decoration: none; }
.wf-tie--not { transition: background-color .15s var(--ease); }
@media (hover: hover) and (pointer: fine) { .wf-tie--not:hover { background: var(--gold-3); } }
.st .wf-tie__ic { width: 12px; height: 12px; }

/* W7 (Oct 26pm): who it is for as ONE fit table (who you are / team size / start with), rows aligned on shared columns so the
   product chips line up and a reader finds their row at a glance. Replaces eight separate cards with ragged chip rows. */
.wf-for { padding: clamp(48px, 5vw, 72px) 0; background: var(--mist); scroll-margin-top: 72px; }
.wf-table { margin-top: clamp(28px, 3vw, 40px); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sm); overflow: hidden; }
.wf-table__head, .wf-fit { display: grid; grid-template-columns: 24px minmax(0, 1fr) 160px minmax(0, 1fr); column-gap: 20px; align-items: center; padding-inline: 28px; }
.wf-table__head { padding-block: 12px; background: var(--mist); border-bottom: 1px solid var(--line); font: 800 13px/1.3 var(--body); color: var(--slate); }
.wf-table__head > span:first-child { grid-column: 1 / 3; }
.wf-for__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.wf-fit { padding-block: 12px; }
.wf-fit + .wf-fit { border-top: 1px solid var(--line); }
/* AS-G: bare row icons (no gold-300 tiles), so the product chips are the only filled shapes in the row */
.st .wf-fit__ic { width: 24px; height: 24px; color: var(--ink); }
.wf-fit { min-height: 60px; }
.st .wf-fit__t { font: 700 18px/1.25 var(--disp); letter-spacing: -.01em; text-wrap: balance; }
.st .wf-fit__size { font: 600 15px/1.4 var(--body); color: var(--slate); font-variant-numeric: tabular-nums; }
.wf-fit__prods { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-fit__prods a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 14px/1.2 var(--body); text-decoration: none; transition: background-color .15s var(--ease); }
@media (hover: hover) and (pointer: fine) { .wf-fit__prods a:hover { background: var(--gold-3); } }
.wf-fit__mark { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.wf-fit__mark--ic { display: grid; place-items: center; background: var(--violet); color: var(--cream); }
.wf-fit__mark--ic .st-ic { width: 14px; height: 14px; }
.wf-for__note { max-width: 56ch; margin: 24px auto 0; text-align: center; font-size: 15px; line-height: 1.55; color: var(--slate); }
.wf-for__note a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ================= responsive ================= */
@media (max-width: 1080px) {
  /* ledger: rating over its tie on the left, what they said over what changed on the right */
  .wf-ledger__head { display: none; }
  .wf-row { grid-template-columns: 196px minmax(0, 1fr); grid-template-areas: "rate said" "tie fix"; row-gap: 10px; column-gap: 28px; align-items: start; }
  .wf-row__rate { grid-area: rate; flex-direction: row; align-items: center; gap: 10px; }
  .wf-row__said { grid-area: said; }
  .wf-row__fix { grid-area: fix; }
  .wf-row__tie { grid-area: tie; }
}
@media (max-width: 960px) {
  .wf-not__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* fit table: title and team size stacked, products under them */
  .wf-table__head { display: none; }
  .wf-fit { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "ic t" "ic sz" ". pr"; row-gap: 4px; column-gap: 14px; padding: 14px 20px; }
  .wf-fit__ic { grid-area: ic; align-self: start; }
  .wf-fit__t { grid-area: t; }
  .wf-fit__size { grid-area: sz; }
  .st .wf-fit__size { font-size: 14px; }
  .wf-fit__prods { grid-area: pr; margin-top: 8px; }
}
@media (max-width: 767px) {
  .ob-tabs { border-radius: 18px; }
  .ob-tabs-bar { padding: 0 0 20px; }
  .ob-tab { min-height: 44px; padding: 0 16px; }
  .ob-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ob-row__main { padding: 16px 12px 12px; }
  .ob-row__point { padding: 16px; }
  .ob-row__link { padding-block: 12px; }
}
@media (max-width: 640px) {
  .st-btn { width: 100%; }
  .wf-not__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .st .ob-theme__head h2 { gap: 10px; }
  .st .ob-theme__ic { width: 26px; height: 26px; }
  .ob-video { border-radius: 20px; padding-block: 6px; }
  .wf-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rate" "said" "fix" "tie"; row-gap: 8px; padding: 18px 20px; }
  .wf-row__tie { margin-top: 2px; }
}
@media (max-width: 400px) {
  .wf-nf { padding: 14px; }
  .st .wf-nf__t { font-size: 19px; text-underline-offset: 5px; }
  .wf-nf__art { width: 44px; height: 44px; border-radius: 14px; }
  .wf-nf__ic { width: 22px; height: 22px; }
  .wf-fit { padding-inline: 16px; column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-btn, .ob-tab, .ob-row, .ob-row__go, .wf-card__go, .wf-fit__prods a, .wf-nf, .wf-tie--not { transition: none; }
}


/* AK Nov 7 (Amar): the scored fit table. Who you are on the left (spanning its rows), then deals and vertical, a fit score out of 10
   with a small bar, and the products to start with. Stacks on phones. */
.wf-sc__head, .wf-sc__grp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 3.6fr); column-gap: 20px; padding-inline: 24px; }
.wf-sc__head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 128px minmax(0, 1.6fr); padding-block: 12px; background: var(--mist); border-bottom: 1px solid var(--line); font: 800 13px/1.3 var(--body); color: var(--slate); }
.wf-sc__grp { padding-block: 6px; }
.wf-sc__grp + .wf-sc__grp { border-top: 1px solid var(--line); }
.wf-sc__who { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; }
.st .wf-sc__who .wf-fit__t { font-size: 17px; }
.wf-sc__row { display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1.6fr); column-gap: 20px; align-items: center; padding-block: 10px; }
.wf-sc__row + .wf-sc__row { border-top: 1px dashed var(--line); }
.st .wf-sc__seg { font: 600 15px/1.4 var(--body); color: var(--ink); }
.wf-sc__score { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.wf-sc__score b { font: 800 22px/1 var(--disp); color: var(--ink); }
.wf-sc__score b small { font-size: 13px; color: var(--slate); font-weight: 700; }
.wf-sc__score span { font: 700 13px/1.2 var(--body); color: var(--slate); }
.wf-sc__score i { grid-column: 1 / -1; position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--lav); overflow: hidden; }
.wf-sc__score i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 10%); border-radius: 3px; background: var(--gold); }
.wf-table--fit .wf-fit__prods a { min-height: 32px; font-size: 13px; padding: 3px 12px 3px 4px; }
@media (max-width: 900px) {
  .wf-sc__head { display: none; }
  .wf-sc__grp { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  .wf-sc__who { padding-bottom: 4px; }
  .wf-sc__row { grid-template-columns: minmax(0, 1fr) 112px; row-gap: 8px; }
  .wf-sc__row .wf-fit__prods { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
  .wf-table--fit { margin-top: 24px; }
  .wf-sc__head, .wf-sc__grp { grid-template-columns: minmax(0, .95fr) minmax(0, 3.9fr); column-gap: 16px; padding-inline: 20px; }
  .wf-sc__head { grid-template-columns: minmax(0, .95fr) minmax(0, .9fr) 104px minmax(0, 2.6fr); }
  .wf-sc__row { grid-template-columns: minmax(0, .9fr) 104px minmax(0, 2.6fr); column-gap: 16px; padding-block: 7px; }
  .wf-sc__grp { padding-block: 2px; }
  .wf-sc__who { padding-block: 9px; }
  .wf-table--fit .wf-fit__prods { gap: 6px; }
  .wf-table--fit .wf-fit__prods a { min-height: 30px; gap: 6px; padding: 2px 10px 2px 3px; }
}

/* AK Nov 7 (Amar round 2): more room for who you are and deals and vertical, less for start with; lead products in a darker chip
   (violet, white text) first, the rest in the light lavender chip, with a key above the table. */
@media (min-width: 901px) {
  .wf-sc__head, .wf-sc__grp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 3.35fr); column-gap: 28px; padding-inline: 28px; }
  .wf-sc__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) 96px minmax(0, 1.95fr); column-gap: 28px; }
  .wf-sc__row { grid-template-columns: minmax(0, 1.15fr) 96px minmax(0, 1.95fr); column-gap: 28px; }
  .wf-sc__who { padding-right: 8px; }
}
.wf-table--fit .wf-fit__prods li.is-lead a { background: var(--violet); color: #fff; }
.wf-table--fit .wf-fit__prods li.is-lead .wf-fit__mark--ic { background: var(--gold); color: var(--ink); }
.wf-table--fit .wf-fit__prods li.is-lead .wf-fit__mark:not(.wf-fit__mark--ic) { box-shadow: 0 0 0 2px var(--gold); }
@media (hover: hover) and (pointer: fine) { .wf-table--fit .wf-fit__prods li.is-lead a:hover { background: var(--ink); } }
.wf-sc__key { display: flex; justify-content: flex-end; gap: 20px; margin: 20px 0 -12px; font: 700 13px/1.2 var(--body); color: var(--slate); }
.wf-sc__key span { display: inline-flex; align-items: center; gap: 8px; }
.wf-sc__key i { width: 14px; height: 14px; border-radius: 999px; background: var(--lav); }
.wf-sc__key .is-lead i { background: var(--violet); }
@media (max-width: 900px) { .wf-sc__key { justify-content: flex-start; margin-bottom: -16px; } }