/*
Theme Name: SaaS.fit
Theme URI: https://saas.fit/
Description: Child theme of Kadence for saas.fit — independent B2B software reviews. Provides the sf_tool post type, the stack builder, comparison tables and the spend ledger.
Author: saas.fit
Template: kadence
Version: 0.1.0
Text Domain: saasfit
*/

/* ---------------------------------------------------------------
   1. Tokens — sampled from the brand logo
   --------------------------------------------------------------- */
:root{
  /* Brand — from the saas.fit brand sheet (design/logo_saasfit2.png) */
  --sf-blue:#2563EB;         /* brand: the mark, ".fit", primary actions */
  --sf-blue-d:#1D4ED8;       /* pressed */
  --sf-blue-soft:#DBEAFE;    /* tints, selected states, fit band track */
  --sf-navy:#0F172A;         /* wordmark, headings, dark bands */
  --sf-slate:#64748B;        /* the tagline grey */
  /* Neutrals, tuned to sit with the brand navy */
  --sf-ink:#0F172A;
  --sf-ink-2:#475569;
  --sf-ink-3:#94A3B8;
  --sf-line:#E2E8F0;
  --sf-line-2:#CBD5E1;
  --sf-bg:#FFFFFF;
  --sf-bg-2:#F8FAFC;
  --sf-bg-3:#F1F5F9;
  /* Semantic only — never used as brand colour. The brand sheet defines three
     colours; a UI still needs states, so these carry good/caveat and nothing else. */
  --sf-good:#059669;
  --sf-good-soft:#D1FAE5;
  --sf-amber:#D97706;        /* score star only */
  --sf-flag:#DC2626;         /* caveat verdicts only */
  --sf-flag-soft:#FEE2E2;
  --sf-r:12px;
  --sf-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -14px rgba(15,23,42,.2);
  --sf-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sf-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
body{font-family:var(--sf-font);color:var(--sf-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.sf-h{font-family:var(--sf-font);letter-spacing:-.025em;font-weight:700;color:var(--sf-navy)}
.sf-mono{font-family:var(--sf-mono);font-variant-numeric:tabular-nums}
.sf-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sf-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sf-blue);margin:0 0 10px}

/* header lockup */
.sf-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.sf-logo img,.sf-logo svg{width:34px;height:34px;display:block;border-radius:9px}
.sf-logo .sf-word{font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--sf-navy);line-height:1}
.sf-logo .sf-word i{font-style:normal;color:var(--sf-blue)}
.sf-logo .sf-logo-tag{display:block;font-size:9.5px;font-weight:500;color:var(--sf-slate);
  margin-top:2px;letter-spacing:0}
/* Lockup variants, per the brand sheet: monochrome uses the navy tile,
   reverse knocks the wordmark out to white for dark grounds. */
.sf-logo.sf-logo--mono .sf-mark-tile{fill:var(--sf-navy)}
.sf-logo.sf-logo--reverse .sf-mark-tile{fill:transparent}
.sf-logo.sf-logo--reverse .sf-mark-ribbon{fill:#fff;stroke:#fff}
.sf-logo.sf-logo--reverse .sf-word{color:#fff}
.sf-logo.sf-logo--reverse .sf-word i{color:#fff}
.sf-logo.sf-logo--reverse .sf-logo-tag{color:rgba(255,255,255,.62)}


/* buttons */
.sf-btn{display:inline-flex;align-items:center;gap:7px;background:var(--sf-blue);color:#fff;
  border:0;border-radius:8px;padding:11px 20px;font:600 14px/1.2 var(--sf-font);cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .15s}
.sf-btn:hover{background:var(--sf-blue-d);color:#fff}
.sf-btn--ghost{background:#fff;color:var(--sf-ink);border:1px solid var(--sf-line-2)}
.sf-btn--ghost:hover{background:var(--sf-bg-2);color:var(--sf-ink)}
.sf-btn--sm{padding:8px 14px;font-size:13px}
:where(.sf-btn,.sf-chip,.sf-brow):focus-visible{outline:2px solid var(--sf-blue);outline-offset:2px}

/* ---------------------------------------------------------------
   3. Fit band — the signature device
   --------------------------------------------------------------- */
.sf-band{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:96px}
.sf-band i{height:8px;border-radius:2px;background:var(--sf-bg-3);border:1px solid var(--sf-line-2)}
.sf-band i.on{background:var(--sf-blue);border-color:var(--sf-blue)}
.sf-band-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:96px;margin-top:3px;
  font-family:var(--sf-mono);font-size:8.5px;color:var(--sf-ink-3);text-align:center;letter-spacing:-.02em}
.sf-fit{display:flex;align-items:center;gap:9px}
.sf-fit-label{font-size:11.5px;color:var(--sf-ink-3);white-space:nowrap}

/* ---------------------------------------------------------------
   4. Score — only rendered when a tool has test data
   --------------------------------------------------------------- */
.sf-score{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;
  color:var(--sf-navy)}
.sf-score svg{color:var(--sf-amber);flex-shrink:0}
.sf-score small{font-weight:500;font-size:11.5px;color:var(--sf-ink-3)}
.sf-score--none{font-size:12px;font-weight:500;color:var(--sf-ink-3)}

/* ---------------------------------------------------------------
   5. Tool cards
   --------------------------------------------------------------- */
.sf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:16px}
.sf-card{background:var(--sf-bg);border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sf-shadow)}
.sf-card-top{display:flex;align-items:center;gap:10px}
.sf-card-logo{width:34px;height:34px;border-radius:8px;object-fit:contain;background:#fff;
  border:1px solid var(--sf-line);flex-shrink:0}
.sf-card-logo--mono{display:grid;place-items:center;background:var(--sf-blue-soft);
  border-color:var(--sf-blue-soft);color:var(--sf-blue-d);font-weight:800;font-size:15px}
.sf-t-name .sf-card-logo--mono{font-size:10px;border-radius:4px}
.sf-card-name{font-weight:700;font-size:15.5px;color:var(--sf-navy);line-height:1.2;display:block}
.sf-card-cat{font-size:11.5px;color:var(--sf-ink-3);display:block}
.sf-bestfor{font-size:12.5px;color:var(--sf-ink-2)}
.sf-bestfor b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sf-ink-3);font-weight:600;margin-bottom:1px}
.sf-price{font-family:var(--sf-mono);font-size:14px;color:var(--sf-navy);font-weight:500}
.sf-feats{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--sf-ink-2)}
.sf-feats li{display:flex;gap:6px;align-items:flex-start;padding:2px 0}
.sf-feats svg{color:var(--sf-good);flex-shrink:0;margin-top:3px}
.sf-card-actions{display:flex;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--sf-line)}
.sf-card-actions .sf-btn{flex:1;justify-content:center}
.sf-pill{align-self:flex-start;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px}
.sf-pill--good{background:var(--sf-good-soft);color:var(--sf-good)}
.sf-pill--caveat{background:var(--sf-flag-soft);color:var(--sf-flag)}
.sf-pill--hold{background:var(--sf-blue-soft);color:var(--sf-blue-d)}

/* ---------------------------------------------------------------
   6. Stack builder
   --------------------------------------------------------------- */
.sf-builder{background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-r);
  box-shadow:var(--sf-shadow);padding:18px;max-width:420px}
.sf-builder h2{font-size:16px;margin:0 0 2px}
.sf-builder .sf-bsub{font-size:12px;color:var(--sf-ink-3);margin:0 0 12px}
.sf-brow{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--sf-line);
  cursor:pointer;margin:0}
.sf-brow input{position:absolute;opacity:0;width:0;height:0}
.sf-boxi{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--sf-line-2);flex-shrink:0;
  display:grid;place-items:center;background:#fff;transition:.12s}
.sf-brow input:checked ~ .sf-boxi{background:var(--sf-blue);border-color:var(--sf-blue)}
.sf-boxi svg{opacity:0}
.sf-brow input:checked ~ .sf-boxi svg{opacity:1}
.sf-brow input:focus-visible ~ .sf-boxi{outline:2px solid var(--sf-blue);outline-offset:2px}
.sf-bstep{font-family:var(--sf-mono);font-size:10px;color:var(--sf-ink-3);text-transform:uppercase;
  letter-spacing:.07em;display:block}
.sf-bname{font-size:14px;font-weight:600;color:var(--sf-navy);display:block;line-height:1.3}
.sf-bmeta{flex:1;min-width:0}
.sf-bprice{font-family:var(--sf-mono);font-size:13px;color:var(--sf-ink-2)}
.sf-btotal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;
  padding-top:13px;border-top:1.5px solid var(--sf-navy)}
.sf-btotal .sf-lbl{font-size:12.5px;font-weight:600;color:var(--sf-ink-2)}
.sf-btotal .sf-amt{font-family:var(--sf-mono);font-size:26px;font-weight:500;color:var(--sf-navy);
  letter-spacing:-.02em}
.sf-btotal .sf-amt small{font-size:12px;color:var(--sf-ink-3)}
.sf-bnote{font-size:11.5px;color:var(--sf-ink-3);margin:9px 0 0;line-height:1.45}

/* ---------------------------------------------------------------
   7. Ledger — the spend account
   --------------------------------------------------------------- */
.sf-ledger{background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-r);
  box-shadow:var(--sf-shadow);overflow:hidden}
.sf-lrow{display:grid;grid-template-columns:1.4fr .7fr .8fr 1.3fr;gap:14px;align-items:center;
  padding:13px 20px;border-top:1px solid var(--sf-line)}
.sf-lhead{border-top:0;background:var(--sf-bg-3);font-family:var(--sf-mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--sf-ink-3);padding:10px 20px}
.sf-ltool{font-weight:600;color:var(--sf-navy)}
.sf-ltool span{display:block;font-weight:400;font-size:11.5px;color:var(--sf-ink-3)}
.sf-lnum{font-family:var(--sf-mono);font-size:13px;color:var(--sf-ink-2)}
.sf-lfoot{display:flex;gap:24px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--sf-line);
  background:var(--sf-bg-2);font-family:var(--sf-mono);font-size:12.5px;color:var(--sf-ink-2)}
.sf-lfoot b{color:var(--sf-navy);font-weight:500}
.sf-lfoot .sf-zero b{color:var(--sf-good)}

/* ---------------------------------------------------------------
   8. Comparison table
   --------------------------------------------------------------- */
.sf-tablewrap{overflow-x:auto;border:1px solid var(--sf-line);border-radius:var(--sf-r);background:#fff}
.sf-table{border-collapse:collapse;width:100%;min-width:720px;margin:0}
.sf-table th{font-family:var(--sf-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sf-ink-3);text-align:left;font-weight:400;padding:12px 16px;background:var(--sf-bg-3);
  border:0}
.sf-table td{padding:13px 16px;border-top:1px solid var(--sf-line);font-size:13.5px;
  vertical-align:middle;color:var(--sf-ink-2)}
.sf-table tbody tr:hover td{background:var(--sf-bg-2)}
.sf-table .sf-t-name{font-weight:600;color:var(--sf-navy);white-space:nowrap;display:flex;
  align-items:center;gap:8px}
.sf-table .sf-t-name img{width:20px;height:20px;object-fit:contain;border-radius:4px}
.sf-table td.sf-num{font-family:var(--sf-mono);font-size:13px;white-space:nowrap}
.sf-yes{color:var(--sf-good)}
.sf-no{color:var(--sf-ink-3)}
.sf-tag{font-family:var(--sf-mono);font-size:9.5px;color:var(--sf-good);background:var(--sf-good-soft);
  padding:2px 6px;border-radius:4px;white-space:nowrap}
.sf-tag--wait{color:var(--sf-ink-3);background:var(--sf-bg-3)}

/* ---------------------------------------------------------------
   9. Disclosure — always visible, never buried
   --------------------------------------------------------------- */
.sf-disclosure{background:var(--sf-bg-2);border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:18px 20px;font-size:13px;color:var(--sf-ink-2);line-height:1.55}
.sf-disclosure b{color:var(--sf-navy)}
.sf-disclosure a{color:var(--sf-blue-d)}
.sf-inline-disclosure{font-size:12px;color:var(--sf-ink-3);margin:6px 0 0}

/* 10. Kadence overrides */
.entry-hero .entry-header,.page-title{display:none}
.site-container,.content-container{background:var(--sf-bg)}
@media (max-width:760px){
  .sf-lrow{grid-template-columns:1fr auto;row-gap:8px}
  .sf-lrow .sf-lsince,.sf-lhead{display:none}
  .sf-fit{grid-column:1/-1}
}

/* ---------------------------------------------------------------
   11. Stack builder — the standalone page
   --------------------------------------------------------------- */
.sf-sb{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.sf-sb-steps{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.sf-sb-q{display:flex;gap:16px;align-items:flex-start}
.sf-sb-q>div{flex:1;min-width:0}
.sf-sb-n{width:28px;height:28px;border-radius:50%;background:var(--sf-blue);color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-family:var(--sf-mono);font-size:13px;margin-top:2px}
.sf-sb-q h2{font-size:18px;margin:0 0 3px}
.sf-sb-hint{margin:0 0 12px;font-size:13.5px;color:var(--sf-ink-2)}
.sf-sb-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:9px}
.sf-sb-opt{position:relative;display:block;cursor:pointer;margin:0}
.sf-sb-opt input{position:absolute;opacity:0;width:0;height:0}
.sf-sb-opt span{display:block;border:1.5px solid var(--sf-line-2);border-radius:10px;
  padding:11px 13px;background:#fff;transition:.12s}
.sf-sb-opt b{display:block;font-size:14px;font-weight:600;color:var(--sf-navy);line-height:1.3}
.sf-sb-opt i{display:block;font-style:normal;font-size:12px;color:var(--sf-ink-3);margin-top:2px}
.sf-sb-opt input:checked ~ span{border-color:var(--sf-blue);background:var(--sf-blue-soft)}
.sf-sb-opt input:focus-visible ~ span{outline:2px solid var(--sf-blue);outline-offset:2px}
.sf-sb-opt--pill span{padding:9px 15px;border-radius:99px;text-align:center}
.sf-sb-opts--budget{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

.sf-sb-result{background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-r);
  box-shadow:var(--sf-shadow);padding:20px;position:sticky;top:88px}
.sf-sb-result h2{font-size:17px;margin:0 0 14px}
.sf-sb-row{display:flex;gap:11px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--sf-line)}
.sf-sb-row:first-of-type{border-top:0;padding-top:0}
.sf-sb-slot{font-family:var(--sf-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--sf-ink-3);display:block}
.sf-sb-pick{font-size:14.5px;font-weight:600;color:var(--sf-navy);display:block;line-height:1.3}
.sf-sb-pick a{color:inherit;text-decoration:none}
.sf-sb-pick a:hover{color:var(--sf-blue-d)}
.sf-sb-why{font-size:12px;color:var(--sf-ink-2);margin:2px 0 0;line-height:1.4}
.sf-sb-meta{flex:1;min-width:0}
.sf-sb-cost{font-family:var(--sf-mono);font-size:13px;color:var(--sf-ink-2);white-space:nowrap}
.sf-sb-gap .sf-sb-pick{color:var(--sf-ink-3);font-weight:500}
.sf-sb-empty{font-size:13.5px;color:var(--sf-ink-2);padding:6px 0 2px;margin:0}
.sf-sb-alt{font-size:11.5px;color:var(--sf-ink-3);margin:4px 0 0}
.sf-sb-alt a{color:var(--sf-blue-d);text-decoration:none}
.sf-sb-cta{display:flex;gap:8px;margin-top:14px}
.sf-sb-cta .sf-btn{flex:1;justify-content:center}
@media (max-width:940px){
  .sf-sb{grid-template-columns:1fr;gap:28px}
  .sf-sb-result{position:static}
}

/* ---------------------------------------------------------------
   12. Stack builder promo band
   A compact strip, not a feature section: heading and CTA on one row,
   the three questions as a single inline line beneath. It sits after the
   comparison table, where the reader is most likely to feel overloaded,
   so it has to read in a glance rather than ask for another scroll.
   --------------------------------------------------------------- */
.sf-promo{background:var(--sf-bg-2);border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:22px 26px}
.sf-promo-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.sf-promo-head>div{min-width:0}
.sf-promo h2{font-size:21px;margin:0}
.sf-promo p{margin:5px 0 0;font-size:14px;color:var(--sf-ink-2);max-width:60ch}
.sf-promo .sf-btn{flex-shrink:0}
.sf-promo-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 0;
  padding:14px 0 0;border-top:1px solid var(--sf-line)}
.sf-promo-steps li{display:flex;align-items:baseline;gap:8px;font-size:13.5px;
  color:var(--sf-navy);font-weight:600}
.sf-promo-steps i{font-style:normal;font-weight:400;color:var(--sf-ink-3);font-size:12.5px}
.sf-promo-n{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:var(--sf-blue);
  color:#fff;font-family:var(--sf-mono);font-size:10.5px;font-weight:500;
  display:inline-grid;place-items:center;transform:translateY(2px)}
@media (max-width:720px){
  .sf-promo{padding:20px}
  .sf-promo-head{flex-direction:column;align-items:stretch;gap:16px}
  .sf-promo-head .sf-btn{justify-content:center}
  .sf-promo-steps{flex-direction:column;gap:9px}
}

/* ---------------------------------------------------------------
   13. Page chrome — header lockup row, hero, search, category grid,
   numbered steps, trust row, footer. These are saas.fit components
   used by the homepage pattern, so they live with the theme rather
   than in the page markup.
   --------------------------------------------------------------- */
.sf-header{border-bottom:1px solid var(--sf-line);background:#fff;position:sticky;top:0;z-index:30}
.sf-nav{display:flex;align-items:center;gap:24px;padding:13px 0}
.sf-nav .sf-logo{margin-right:auto;min-width:0}
.sf-nav a.n{text-decoration:none;color:var(--sf-ink-2);font-size:14px;font-weight:500}
.sf-nav a.n:hover{color:var(--sf-navy)}
.sf-nav a.n[aria-current]{color:var(--sf-navy);font-weight:600}
.sf-iconbtn{background:none;border:0;color:var(--sf-ink-2);cursor:pointer;padding:6px;
  border-radius:8px;display:grid;place-items:center}
.sf-iconbtn:hover{color:var(--sf-blue);background:var(--sf-bg-2)}
@media (max-width:980px){.sf-nav a.n{display:none}}

.sf-hero{background:linear-gradient(180deg,var(--sf-bg-2) 0%,#fff 100%);
  border-bottom:1px solid var(--sf-line);position:relative;overflow:hidden}
.sf-hero::after{content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;
  border-radius:50%;background:var(--sf-blue-soft);opacity:.5;pointer-events:none}
.sf-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:56px;align-items:center;padding:58px 0 62px}
.sf-hero h1{font-size:clamp(31px,4.8vw,52px);line-height:1.06;font-weight:800;margin:0 0 16px}
.sf-hero h1 i{font-style:normal;color:var(--sf-blue)}
.sf-hero .sf-sub{font-size:17px;color:var(--sf-ink-2);margin:0 0 24px;max-width:47ch}

.sf-search{display:flex;gap:8px;background:#fff;border:1px solid var(--sf-line-2);
  border-radius:10px;padding:6px 6px 6px 14px;align-items:center;max-width:560px;
  box-shadow:var(--sf-shadow)}
.sf-search>svg{color:var(--sf-ink-3);flex-shrink:0}
.sf-search input{flex:1;min-width:0;border:0;outline:0;background:none;
  font:400 14.5px/1.5 var(--sf-font);color:var(--sf-ink)}
.sf-search input::placeholder{color:var(--sf-ink-3)}

.sf-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;
  font-size:13px;color:var(--sf-ink-3)}
.sf-chip{border:1px solid var(--sf-line-2);border-radius:99px;padding:4px 12px;font-size:12.5px;
  color:var(--sf-ink-2);text-decoration:none;background:#fff}
.sf-chip:hover{border-color:var(--sf-blue);color:var(--sf-blue-d)}
.sf-chip.off{opacity:.6;pointer-events:none}

.sf-section{padding:52px 0}
.sf-section--tint{background:var(--sf-bg-2);border-top:1px solid var(--sf-line);
  border-bottom:1px solid var(--sf-line)}
.sf-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:22px;flex-wrap:wrap}
.sf-sechead h2{font-size:clamp(22px,3vw,27px);margin:0}
.sf-sechead p{margin:7px 0 0;color:var(--sf-ink-2);font-size:14.5px;max-width:58ch}
.sf-sechead a{color:var(--sf-blue-d);text-decoration:none;font-size:14px;font-weight:600;
  white-space:nowrap}

.sf-catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.sf-cat{background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-r);padding:20px;
  box-shadow:var(--sf-shadow);text-decoration:none;display:block}
.sf-cat:hover{border-color:var(--sf-blue)}
.sf-cat .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:13px}
.sf-cat h3{font-size:16.5px;margin:0 0 4px}
.sf-cat>p{margin:0 0 12px;font-size:13.5px;color:var(--sf-ink-2)}
.sf-cat .cnt{font-family:var(--sf-mono);font-size:12px;color:var(--sf-blue-d);font-weight:500}
.sf-cat .cnt.soon{color:var(--sf-ink-3)}
.ic-a{background:var(--sf-blue-soft);color:var(--sf-blue)}
.ic-b{background:var(--sf-good-soft);color:var(--sf-good)}
.ic-c{background:#FEF3C7;color:var(--sf-amber)}

.sf-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.sf-steps li{display:flex;gap:13px;align-items:flex-start}
.sf-sn{width:26px;height:26px;border-radius:50%;background:var(--sf-blue);color:#fff;
  flex-shrink:0;display:grid;place-items:center;font-family:var(--sf-mono);font-size:12.5px;
  margin-top:1px}
.sf-steps h3{font-size:16px;margin:0 0 5px}
.sf-steps p{margin:0;font-size:13.5px;color:var(--sf-ink-2)}

.sf-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;
  margin-top:22px}
.sf-trust div{font-size:13px;color:var(--sf-ink-2)}
.sf-trust b{display:block;color:var(--sf-navy);font-size:13.5px;margin:8px 0 3px}
.sf-trust svg{color:var(--sf-blue)}

.sf-footer{background:var(--sf-navy);color:#94A3B8;padding:28px 0;font-size:13px}
.sf-footer a{color:#fff;text-decoration:none}
.sf-footer a:hover{text-decoration:underline}
.sf-footrow{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}

/* --- responsive --- */
@media (max-width:980px){
  .sf-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding:42px 0 46px}
  .sf-builder{max-width:none}
}
@media (max-width:640px){
  .sf-section{padding:40px 0}
  /* The lockup, a search affordance and a CTA do not fit a 360px bar together.
     The tagline and the icon button go; the hero has its own search field. */
  .sf-logo .sf-logo-tag{display:none}
  .sf-nav .sf-iconbtn{display:none}
  .sf-nav{gap:12px}
  .sf-btn{padding:10px 15px;font-size:13.5px}
  /* A side-by-side input and button leaves the placeholder unreadable. */
  .sf-search{flex-wrap:wrap;padding:10px 12px;gap:10px}
  .sf-search input{flex:1 1 100%;font-size:15px}
  .sf-search .sf-btn{flex:1 1 100%;justify-content:center}
  .sf-search>svg{display:none}
}

/* --- mobile navigation ------------------------------------------------ */
.sf-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-right:-8px;
  color:var(--sf-navy);border-radius:8px}
.sf-burger:hover{background:var(--sf-bg-2)}
.sf-burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease, opacity .12s ease}
.sf-burger span + span{margin-top:5px}
.sf-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sf-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sf-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.sf-burger span{transition:none}}

.sf-drawer{display:none;border-top:1px solid var(--sf-line);background:#fff}
.sf-drawer nav{display:flex;flex-direction:column;padding:6px 0 14px}
.sf-drawer a{padding:12px 0;text-decoration:none;color:var(--sf-navy);font-size:15.5px;
  font-weight:600;border-bottom:1px solid var(--sf-line)}
.sf-drawer a:last-child{border-bottom:0}
.sf-drawer a[aria-current]{color:var(--sf-blue)}

@media (max-width:980px){
  .sf-burger{display:block}
  .sf-drawer{display:block}
  .sf-drawer[hidden]{display:none}
}

/* ---------------------------------------------------------------
   14. Review page
   Two columns on desktop: the verdict panel sits beside the prose so
   the score, the price and the CTA stay in view while reading.
   --------------------------------------------------------------- */
.sf-review{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;
  align-items:start;grid-template-areas:"body verdict" "extra verdict"}
.sf-review-body{grid-area:body;min-width:0}
.sf-review-panel{grid-area:verdict;position:sticky;top:96px}
.sf-review > .sf-results,.sf-review > .sf-breakdown,.sf-review > .sf-faq,
.sf-review > .sf-related,.sf-review > .sf-disclosure{grid-area:extra}
.sf-review > .sf-breakdown{margin-top:36px}
.sf-review > .sf-related{margin-top:44px}
.sf-review > .sf-disclosure{margin-top:28px}

.sf-review-body h2{font-size:23px;margin:34px 0 10px}
.sf-review-body h3{font-size:18px;margin:26px 0 8px}
.sf-review-body p{margin:0 0 14px}
.sf-review-body ul{margin:0 0 16px;padding-left:20px}
.sf-review-body li{margin:5px 0}

/* verdict panel */
.sf-verdict{background:#fff;border:1px solid var(--sf-line-2);border-radius:var(--sf-r);
  padding:20px;box-shadow:var(--sf-shadow)}
.sf-verdict-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid var(--sf-line);margin-bottom:14px}
.sf-verdict-top>div{min-width:0;flex:1}
.sf-verdict-name{display:block;font-family:var(--sf-font);font-weight:700;font-size:17px;
  color:var(--sf-navy);line-height:1.2}
.sf-verdict-cat{display:block;font-size:11.5px;color:var(--sf-ink-3)}
.sf-verdict-score{flex-shrink:0}
.sf-verdict .sf-pill{margin:0 0 10px}
.sf-verdict-call{margin:0 0 14px;font-size:13.5px;color:var(--sf-ink-2)}
.sf-verdict-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 16px;
  font-size:13px;align-items:baseline}
.sf-verdict-facts dt{color:var(--sf-ink-3);font-size:12px}
.sf-verdict-facts dd{margin:0;color:var(--sf-navy);font-weight:600;text-align:right}
.sf-verdict-facts dd.sf-fit{flex-direction:column;align-items:flex-end;gap:4px}
.sf-verdict-cta{width:100%;justify-content:center}
.sf-verdict-note{margin:8px 0 0;font-size:11px;color:var(--sf-ink-3);line-height:1.45}
.sf-verdict-paid{display:flex;align-items:flex-start;gap:6px;margin:14px 0 0;padding-top:13px;
  border-top:1px solid var(--sf-line);font-size:12px;color:var(--sf-good);line-height:1.45}
.sf-verdict-paid svg{flex-shrink:0;margin-top:2px}

/* measured results */
.sf-results{margin-top:32px;background:var(--sf-bg-2);border:1px solid var(--sf-line);
  border-radius:var(--sf-r);padding:20px 22px}
.sf-results h2{font-size:17px;margin:0 0 14px}
.sf-results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px}
.sf-results-grid b{display:block;font-family:var(--sf-mono);font-size:24px;font-weight:500;
  color:var(--sf-navy);letter-spacing:-.02em}
.sf-results-grid span{display:block;font-size:12px;color:var(--sf-ink-3);margin-top:2px}
.sf-results-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--sf-line);
  font-size:12px;color:var(--sf-ink-3)}

/* score breakdown */
.sf-breakdown h2{font-size:19px;margin:0 0 12px}
.sf-breakdown-none{margin:0;font-size:14px;color:var(--sf-ink-2);background:var(--sf-bg-2);
  border-left:3px solid var(--sf-line-2);padding:12px 15px;border-radius:0 8px 8px 0}
.sf-breakdown-table{width:100%;border-collapse:collapse;table-layout:auto}
.sf-breakdown-table td:first-of-type{width:100%}
.sf-breakdown-table th{text-align:left;font-weight:600;font-size:13.5px;color:var(--sf-navy);
  padding:9px 0;border-bottom:1px solid var(--sf-line);white-space:nowrap}
.sf-breakdown-table th span{font-weight:400;color:var(--sf-ink-3);font-size:11.5px;margin-left:6px}
.sf-breakdown-table td{padding:9px 0 9px 16px;border-bottom:1px solid var(--sf-line);
  vertical-align:middle}
.sf-breakdown-table td.sf-num{font-family:var(--sf-mono);font-size:13px;color:var(--sf-ink-2);
  text-align:right;width:44px;padding-left:10px}
.sf-breakdown-table tfoot th,.sf-breakdown-table tfoot td{border-bottom:0;padding-top:12px}
.sf-breakdown-table tfoot .sf-num{color:var(--sf-navy);font-size:15px}
.sf-meter{display:block;height:7px;border-radius:4px;background:var(--sf-bg-3);overflow:hidden}
.sf-meter i{display:block;height:100%;background:var(--sf-blue);border-radius:4px}
.sf-breakdown-note{margin:12px 0 0;font-size:12px;color:var(--sf-ink-3)}

/* related */
.sf-related h2{font-size:19px;margin:0 0 12px}
.sf-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sf-related-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;
  border:1px solid var(--sf-line);border-radius:10px;text-decoration:none}
.sf-related-item:hover{border-color:var(--sf-blue)}
.sf-related-item b{display:block;font-size:14px;color:var(--sf-navy);line-height:1.25}
.sf-related-item i{display:block;font-style:normal;font-size:11.5px;color:var(--sf-ink-3)}

@media (max-width:900px){
  .sf-review{grid-template-columns:minmax(0,1fr);gap:26px;
    grid-template-areas:"verdict" "body" "extra"}
  /* Full width would stretch each label/value pair to opposite edges of a
     tablet, which reads as two unrelated columns rather than a fact list. */
  .sf-review-panel{position:static;max-width:520px}
  .sf-tabs{top:0}
}

/* breadcrumbs (Rank Math renders these; this styles them) */
.sf-crumbs{font-size:12.5px;color:var(--sf-ink-3);padding:18px 0 0}
.sf-crumbs a{color:var(--sf-ink-2);text-decoration:none}
.sf-crumbs a:hover{color:var(--sf-blue-d)}
.sf-crumbs span{margin:0 7px;color:var(--sf-line-2)}
.sf-title{margin:10px 0 6px;font-size:clamp(27px,3.6vw,38px);line-height:1.12}
.sf-title-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--sf-ink-3);
  margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--sf-line)}
.sf-title-meta b{color:var(--sf-ink-2);font-weight:500}

/* ---------------------------------------------------------------
   15. Review: section tabs, verdict boxes, quick facts, FAQ
   --------------------------------------------------------------- */
.sf-tabs{display:flex;gap:22px;overflow-x:auto;border-bottom:1px solid var(--sf-line);
  margin-bottom:26px;position:sticky;top:62px;background:var(--sf-bg);z-index:10;
  scrollbar-width:none;padding-right:26px;
  /* the last tab is clipped when the row scrolls; fade it so that reads as
     "there is more" rather than as a broken layout */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
.sf-tabs::-webkit-scrollbar{display:none}
.sf-tabs a{padding:12px 0;font-size:13.5px;font-weight:600;color:var(--sf-ink-3);
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.sf-tabs a:hover{color:var(--sf-navy)}
.sf-tabs a[aria-current]{color:var(--sf-blue);border-bottom-color:var(--sf-blue)}

/* verdict / not ideal for */
.sf-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  margin:0 0 30px}
.sf-box{border-radius:var(--sf-r);padding:18px 20px;border:1px solid}
.sf-box h3{display:flex;align-items:center;gap:8px;font-size:15.5px;margin:0 0 8px}
.sf-box p{margin:0;font-size:13.5px;line-height:1.55}
.sf-box ul{margin:0;padding-left:18px;font-size:13.5px}
.sf-box li{margin:5px 0}
.sf-box--for{background:var(--sf-good-soft);border-color:#A7F3D0}
.sf-box--for h3{color:var(--sf-good)}
.sf-box--for p{color:#065F46}
.sf-box--against{background:var(--sf-flag-soft);border-color:#FECACA}
.sf-box--against h3{color:var(--sf-flag)}
.sf-box--against ul{color:#991B1B}

/* quick facts */
.sf-facts{background:#fff;border:1px solid var(--sf-line-2);border-radius:var(--sf-r);
  padding:18px 20px;margin-top:16px;box-shadow:var(--sf-shadow)}
.sf-facts h2{font-size:15px;margin:0 0 12px}
.sf-facts dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;font-size:13px}
.sf-facts dt{padding:8px 0;color:var(--sf-ink-2);border-top:1px solid var(--sf-line)}
.sf-facts dd{padding:8px 0;margin:0;text-align:right;color:var(--sf-navy);font-weight:600;
  border-top:1px solid var(--sf-line);display:flex;justify-content:flex-end;align-items:center}
.sf-facts dl>dt:first-of-type,.sf-facts dl>dt:first-of-type+dd{border-top:0}
.sf-facts-yes{color:var(--sf-good)}
.sf-facts-no{color:var(--sf-ink-3)}
.sf-facts-addon{font-size:11px;font-weight:600;color:var(--sf-amber);background:#FEF3C7;
  padding:2px 8px;border-radius:99px}

/* FAQ */
.sf-faq{margin-top:36px}
.sf-faq h2{font-size:19px;margin:0 0 12px}
.sf-faq details{border-bottom:1px solid var(--sf-line)}
.sf-faq summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;font-weight:600;
  font-size:14.5px;color:var(--sf-navy);position:relative}
.sf-faq summary::-webkit-details-marker{display:none}
.sf-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--sf-ink-3);border-bottom:2px solid var(--sf-ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.sf-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sf-faq summary:focus-visible{outline:2px solid var(--sf-blue);outline-offset:2px}
.sf-faq details p{margin:0 0 16px;font-size:14px;color:var(--sf-ink-2);max-width:70ch}
@media (prefers-reduced-motion:reduce){.sf-faq summary::after{transition:none}}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap}

/* ---------------------------------------------------------------
   16. Stack builder result: the workflow as a pipeline
   The recommendation is rendered as the sequence it describes, so the
   reader learns the order at the same time as the tools.
   --------------------------------------------------------------- */
.sf-sb{grid-template-columns:minmax(0,1fr);gap:34px}
.sf-sb-result{position:static;padding:22px 24px}
.sf-sb-result-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1.5px solid var(--sf-navy)}
.sf-sb-result-head h2{margin:0;font-size:19px}
.sf-sb-result-head .sf-amt{font-family:var(--sf-mono);font-size:26px;font-weight:500;
  color:var(--sf-navy);letter-spacing:-.02em}
.sf-sb-result-head .sf-amt small{font-size:12px;color:var(--sf-ink-3)}

.sf-pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none}
.sf-pipe::-webkit-scrollbar{display:none}
.sf-pipe-card{flex:1 1 0;min-width:168px;border:1px solid var(--sf-line);border-radius:10px;
  padding:14px 15px;display:flex;flex-direction:column;gap:5px;background:#fff}
.sf-pipe-arrow{flex:0 0 26px;display:grid;place-items:center;color:var(--sf-line-2);font-size:16px}
.sf-pipe-step{font-family:var(--sf-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sf-ink-3)}
.sf-pipe-card b{font-size:15.5px;color:var(--sf-navy);line-height:1.2}
.sf-pipe-badge{align-self:flex-start;font-size:10.5px;font-weight:600;color:var(--sf-good);
  background:var(--sf-good-soft);padding:2px 8px;border-radius:99px}
.sf-pipe-card p{margin:2px 0 0;font-size:12px;color:var(--sf-ink-2);line-height:1.45;flex:1}
.sf-pipe-price{font-family:var(--sf-mono);font-size:15px;color:var(--sf-navy);font-weight:500}
.sf-pipe-price small{font-size:11px;color:var(--sf-ink-3)}
.sf-pipe-card a{font-size:12.5px;font-weight:600;color:var(--sf-blue-d);text-decoration:none}
.sf-pipe-card a:hover{text-decoration:underline}
.sf-pipe-card--gap{border-style:dashed;border-color:var(--sf-line-2);background:var(--sf-bg-2)}
.sf-pipe-card--gap b{color:var(--sf-ink-3);font-weight:600;font-size:14px}
.sf-pipe-card--gap p{color:var(--sf-ink-3)}

/* alternative shapes and the compare list */
.sf-sb-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.sf-alts h3,.sf-compare-alts h3{font-size:16px;margin:0 0 10px}
.sf-alts ul,.sf-compare-alts ul{list-style:none;margin:0;padding:0}
.sf-alts li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border:1px solid var(--sf-line);border-radius:10px;margin-bottom:8px;
  background:#fff}
.sf-alts li b{display:block;font-size:14px;color:var(--sf-navy)}
.sf-alts li i{display:block;font-style:normal;font-size:12px;color:var(--sf-ink-3);margin-top:1px}
.sf-alts-price{font-family:var(--sf-mono);font-size:15px;color:var(--sf-navy);white-space:nowrap}
.sf-alts-price small{font-size:11px;color:var(--sf-ink-3)}
.sf-compare-alts li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--sf-line);font-size:14px}
.sf-compare-alts li:last-child{border-bottom:0}
.sf-compare-alts a{color:var(--sf-blue-d);text-decoration:none;font-weight:600}
.sf-compare-alts a:hover{text-decoration:underline}
.sf-compare-alts span{font-size:12px;color:var(--sf-ink-3);white-space:nowrap}

@media (max-width:860px){
  .sf-pipe{flex-direction:column;gap:8px}
  .sf-pipe-arrow{flex:0 0 auto;transform:rotate(90deg);height:18px}
  .sf-pipe-card{min-width:0}
}
.sf-alts-note{margin:10px 0 0;font-size:12.5px;color:var(--sf-ink-3);line-height:1.5;
  border-left:2px solid var(--sf-line-2);padding-left:12px}

/* ---------------------------------------------------------------
   17. Category hub — "best <category> software"
   --------------------------------------------------------------- */
.sf-hubstatus{background:var(--sf-bg-2);border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:20px 22px;margin:0 0 32px}
.sf-hubstatus-lead{margin:0;font-size:15px;color:var(--sf-ink-2);line-height:1.55;max-width:70ch}
.sf-hubstatus-lead b{color:var(--sf-navy)}
.sf-hubstatus-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:16px 0 0;
  padding:14px 0 0;border-top:1px solid var(--sf-line);font-family:var(--sf-mono);font-size:12.5px;
  color:var(--sf-ink-2)}
.sf-hubstatus-facts b{color:var(--sf-navy);font-weight:500}

.sf-picks{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:16px;counter-reset:pick}
.sf-pick{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--sf-line);
  border-radius:var(--sf-r);padding:20px;box-shadow:var(--sf-shadow)}
.sf-pick-rank{flex:0 0 34px;height:34px;border-radius:50%;background:var(--sf-navy);color:#fff;
  display:grid;place-items:center;font-family:var(--sf-mono);font-size:14px;margin-top:2px}
.sf-pick:first-child .sf-pick-rank{background:var(--sf-blue)}
.sf-pick-main{flex:1;min-width:0}
.sf-pick-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sf-pick-head>div{flex:1;min-width:0}
.sf-pick h3{font-size:18px;margin:0;line-height:1.2}
.sf-pick h3 a{color:var(--sf-navy);text-decoration:none}
.sf-pick h3 a:hover{color:var(--sf-blue-d)}
.sf-pick-best{font-size:12.5px;color:var(--sf-ink-3)}
.sf-pick-score{flex-shrink:0}
.sf-pick-call{margin:0 0 12px;font-size:14px;color:var(--sf-ink-2)}
.sf-pick-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 14px;padding:12px 0;
  border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line)}
.sf-pick-facts div{display:flex;flex-direction:column;gap:2px}
.sf-pick-facts dt{font-size:11px;color:var(--sf-ink-3)}
.sf-pick-facts dd{margin:0;font-family:var(--sf-mono);font-size:13.5px;color:var(--sf-navy)}
.sf-pick-actions{display:flex;gap:8px;flex-wrap:wrap}

.sf-untested{margin:0 0 36px}
.sf-untested h2{font-size:19px;margin:0 0 6px}
.sf-untested>p{margin:0 0 14px;font-size:14px;color:var(--sf-ink-2);max-width:66ch}
.sf-untested ul{list-style:none;margin:0;padding:0;border:1px solid var(--sf-line);
  border-radius:var(--sf-r);overflow:hidden}
.sf-untested li{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#fff;
  border-top:1px solid var(--sf-line)}
.sf-untested li:first-child{border-top:0}
.sf-untested-name{flex:1;min-width:0}
.sf-untested-name a{display:block;font-weight:600;font-size:14.5px;color:var(--sf-navy);
  text-decoration:none}
.sf-untested-name a:hover{color:var(--sf-blue-d)}
.sf-untested-name i{display:block;font-style:normal;font-size:12px;color:var(--sf-ink-3)}
.sf-untested-status{font-family:var(--sf-mono);font-size:11px;color:var(--sf-ink-3);
  background:var(--sf-bg-3);padding:4px 10px;border-radius:99px;white-space:nowrap}
.sf-hub-empty{background:var(--sf-bg-2);border-left:3px solid var(--sf-line-2);padding:14px 16px;
  font-size:14px;color:var(--sf-ink-2);border-radius:0 8px 8px 0}

@media (max-width:620px){
  .sf-pick{flex-direction:column;gap:12px;padding:18px}
  /* In a column the flex-basis becomes the height, so the badge has to be
     sized explicitly or it collapses to an ellipse. */
  .sf-pick-rank{flex:0 0 auto;width:34px;height:34px;margin-top:0}
  .sf-pick-actions .sf-btn{flex:1;justify-content:center}
}

/* ---------------------------------------------------------------
   18. Hub: use cases and the cluster guide grid
   --------------------------------------------------------------- */
.sf-usecases{margin:0 0 40px}
.sf-usecases h2{font-size:23px;margin:0 0 6px}
.sf-usecases-lead{margin:0 0 16px;font-size:14.5px;color:var(--sf-ink-2);max-width:66ch}
.sf-usecases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px}
.sf-usecase{display:block;background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:18px 19px;text-decoration:none;box-shadow:var(--sf-shadow)}
.sf-usecase:hover{border-color:var(--sf-blue)}
.sf-usecase h3{font-size:16px;margin:0 0 5px}
.sf-usecase p{margin:0 0 12px;font-size:13px;color:var(--sf-ink-2);line-height:1.45}
.sf-usecase-count{font-family:var(--sf-mono);font-size:12px;color:var(--sf-ink-3);display:block;
  padding-top:11px;border-top:1px solid var(--sf-line)}
.sf-usecase-count b{color:var(--sf-blue-d);font-weight:500}
.sf-usecase-count i{font-style:normal}

.sf-guides{margin:0 0 40px}
.sf-guides-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:14px}
.sf-guides-head h2{font-size:23px;margin:0}
.sf-guides-head a{font-size:14px;font-weight:600;color:var(--sf-blue-d);text-decoration:none;
  white-space:nowrap}
.sf-guides-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.sf-guide{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--sf-line);
  border-radius:var(--sf-r);padding:18px 19px;text-decoration:none;box-shadow:var(--sf-shadow)}
.sf-guide:hover{border-color:var(--sf-blue)}
.sf-guide h3{font-size:15.5px;margin:0;line-height:1.3;color:var(--sf-navy)}
.sf-guide p{margin:0;font-size:13px;color:var(--sf-ink-2);line-height:1.45;flex:1}
.sf-guide span{font-size:13px;font-weight:600;color:var(--sf-blue-d)}

/* feature ticks in the comparison table */
.sf-table td.sf-feat{text-align:center;white-space:nowrap}
.sf-table td.sf-feat .sf-yes{color:var(--sf-good);font-size:15px}
.sf-table td.sf-feat .sf-no{color:var(--sf-line-2);font-size:15px}
.sf-table td.sf-feat .sf-facts-addon{font-size:10px;padding:2px 6px}

/* ---------------------------------------------------------------
   19. Alternatives page
   The incumbent is framed first and fairly — the page is only worth
   reading because we earn nothing from the tool being replaced.
   --------------------------------------------------------------- */
.sf-alt-incumbent{background:var(--sf-bg-2);border:1px solid var(--sf-line);
  border-radius:var(--sf-r);padding:22px 24px;margin:0 0 32px}
.sf-alt-incumbent-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.sf-alt-incumbent-head>div{flex:1;min-width:0}
.sf-alt-incumbent h2{font-size:19px;margin:0 0 4px}
.sf-alt-note{margin:0;font-size:13px;color:var(--sf-ink-3);line-height:1.5;max-width:68ch}
.sf-alt-keep{margin:0 0 4px;font-size:14.5px;color:var(--sf-ink-2);line-height:1.6;max-width:70ch}
.sf-alt-incumbent .sf-facts{margin-top:16px;box-shadow:none;border-color:var(--sf-line)}

.sf-alt-why{margin:0 0 32px}
.sf-alt-why h2{font-size:21px;margin:0 0 10px}
.sf-alt-why ul{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sf-alt-why li{background:var(--sf-flag-soft);border:1px solid #FECACA;border-radius:10px;
  padding:12px 15px;font-size:13.5px;color:#991B1B;line-height:1.45}
.sf-alt-why-note{margin:12px 0 0;font-size:12.5px;color:var(--sf-ink-3)}

.sf-alt-picks{margin:0 0 32px}
.sf-alt-picks h2{font-size:23px;margin:0 0 14px}
.sf-alt-stay{background:#fff;border:1px solid var(--sf-line-2);border-radius:var(--sf-r);
  padding:20px 22px;margin:0 0 32px}
.sf-alt-stay h2{font-size:18px;margin:0 0 7px}
.sf-alt-stay p{margin:0;font-size:14px;color:var(--sf-ink-2);line-height:1.6;max-width:72ch}
@media (max-width:620px){
  .sf-alt-incumbent,.sf-alt-stay{padding:18px}
}

/* alternatives: the "what matters most" sorter */
.sf-altfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;
  padding:14px 16px;background:var(--sf-bg-2);border:1px solid var(--sf-line);border-radius:10px}
.sf-altfilter-label{font-size:13.5px;font-weight:600;color:var(--sf-navy)}
.sf-altfilter-chips{display:flex;flex-wrap:wrap;gap:7px}
.sf-altfilter .sf-chip{cursor:pointer;font:inherit;font-size:12.5px;padding:6px 13px}
.sf-altfilter .sf-chip[aria-pressed="true"]{background:var(--sf-blue);border-color:var(--sf-blue);
  color:#fff}
.sf-pick-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--sf-blue-d);
  background:var(--sf-blue-soft);padding:2px 9px;border-radius:99px;margin-top:4px}
.sf-pick-badge[hidden]{display:none}

/* ---------------------------------------------------------------
   20. Method page
   --------------------------------------------------------------- */
.sf-method-lead{font-size:18px;line-height:1.6;color:var(--sf-ink-2);max-width:62ch;margin:0 0 30px}
.sf-steps--method{gap:20px;margin:0 0 36px}
.sf-weights{width:100%;border-collapse:collapse;margin:0 0 10px}
.sf-weights th{text-align:left;font-size:13px;font-weight:600;color:var(--sf-navy);
  padding:11px 14px 11px 0;border-bottom:1px solid var(--sf-line);vertical-align:top}
.sf-weights thead th{font-family:var(--sf-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sf-ink-3);font-weight:400;border-bottom-color:var(--sf-line-2)}
.sf-weights td{padding:11px 14px 11px 0;border-bottom:1px solid var(--sf-line);font-size:13.5px;
  color:var(--sf-ink-2);vertical-align:top}
.sf-weights td.sf-num{font-family:var(--sf-mono);color:var(--sf-navy);white-space:nowrap;width:70px}
.sf-weights-note{margin:0 0 32px;font-size:12.5px;color:var(--sf-ink-3);max-width:70ch}
.sf-worked{background:var(--sf-bg-2);border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:20px 22px;margin:0 0 32px;font-family:var(--sf-mono);font-size:13px;color:var(--sf-ink-2);
  line-height:1.9;overflow-x:auto}
.sf-worked b{color:var(--sf-navy);font-weight:500}
.sf-states{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  margin:0 0 34px;list-style:none;padding:0}
.sf-states li{background:#fff;border:1px solid var(--sf-line);border-radius:10px;padding:15px 16px}
.sf-states b{display:block;font-size:13.5px;color:var(--sf-navy);margin-bottom:3px}
.sf-states span{font-size:12.5px;color:var(--sf-ink-2);line-height:1.45}
.sf-never{list-style:none;margin:0 0 34px;padding:0}
.sf-never li{display:flex;gap:10px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--sf-line);font-size:14.5px;color:var(--sf-ink-2)}
.sf-never li:last-child{border-bottom:0}
.sf-never svg{color:var(--sf-flag);flex-shrink:0;margin-top:3px}
.sf-never b{color:var(--sf-navy)}

/* criteria cards, worked example, verification cadence */
.sf-criteria{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin:0 0 12px}
.sf-criterion{background:#fff;border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:18px 19px;box-shadow:var(--sf-shadow)}
.sf-criterion-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px}
.sf-criterion-ic{width:36px;height:36px;border-radius:10px;background:var(--sf-blue-soft);
  color:var(--sf-blue);display:grid;place-items:center}
.sf-criterion-weight{font-family:var(--sf-mono);font-size:12.5px;font-weight:500;
  color:var(--sf-blue-d);background:var(--sf-blue-soft);padding:3px 10px;border-radius:99px}
.sf-criterion h3{font-size:15.5px;margin:0 0 5px}
.sf-criterion p{margin:0;font-size:13px;color:var(--sf-ink-2);line-height:1.5}

.sf-example{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:34px;align-items:center;
  background:var(--sf-bg-2);border:1px solid var(--sf-line);border-radius:var(--sf-r);
  padding:24px 26px;margin:0 0 14px}
.sf-example-bars{display:grid;gap:12px}
.sf-example-row{display:grid;grid-template-columns:140px 1fr 38px;gap:14px;align-items:center;
  font-size:13.5px;color:var(--sf-ink-2)}
.sf-example-row b{font-family:var(--sf-mono);font-size:13px;color:var(--sf-navy);text-align:right;
  font-weight:500}
.sf-example-ring{text-align:center}
.sf-example-ring svg{width:132px;height:132px}
.sf-ring-num{font-family:var(--sf-font);font-size:34px;font-weight:800;fill:var(--sf-navy)}
.sf-ring-sub{font-family:var(--sf-mono);font-size:12px;fill:var(--sf-ink-3)}
.sf-example-caption{display:block;margin-top:6px;font-size:12px;color:var(--sf-ink-3)}

.sf-cadence{border:1px solid var(--sf-line);border-radius:var(--sf-r);overflow:hidden;
  margin:0 0 34px;background:#fff}
.sf-cadence-row{display:grid;grid-template-columns:150px 160px 1fr;gap:16px;align-items:baseline;
  padding:14px 18px;border-top:1px solid var(--sf-line)}
.sf-cadence-row:first-child{border-top:0}
.sf-cadence-row b{font-size:14px;color:var(--sf-navy)}
.sf-cadence-when{font-family:var(--sf-mono);font-size:12.5px;color:var(--sf-blue-d)}
.sf-cadence-why{font-size:13px;color:var(--sf-ink-2);line-height:1.5}

.sf-report{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--sf-navy);border-radius:var(--sf-r);padding:22px 26px;margin:0 0 34px}
.sf-report p{margin:0;color:#CBD5E1;font-size:14.5px;max-width:56ch;line-height:1.55}
.sf-report b{color:#fff;display:block;font-size:16px;margin-bottom:3px}

@media (max-width:760px){
  .sf-example{grid-template-columns:minmax(0,1fr);gap:22px}
  .sf-example-row{grid-template-columns:110px 1fr 34px;gap:10px;font-size:12.5px}
  .sf-cadence-row{grid-template-columns:1fr;gap:4px}
}