/* ============================================================
   site.css — the design system for every generated page
   ============================================================
   A FILE, not a <style> block. The CSP in _headers allows styles by
   'self' plus a hash generated from index.html only, so an inline
   <style> would be dropped and the page would render unstyled with a
   200.

   This is the whole design, shared. Page types add nothing of their own
   beyond the few blocks at the bottom, so a card on a comparison page
   and a card on a product page cannot drift apart. Pages that use it
   pass baseCss:false to head() and load this instead of landing.css —
   loading both was tried and left heroes drawing on the old dark
   background with near-invisible text, because landing.css sets
   properties this design never mentions.

   Scoped under body.s-page throughout so it cannot reach a page type
   that has not been migrated yet.
   ============================================================ */

.s-page{
  /* Dark, and violet, the same palette the home page uses. These pages were
     drawn light around a dark card, so a reader crossing from the home page
     to a tool page crossed between two sites. Twelve tokens carry nearly all
     of it; the literals below that assumed a white ground were repainted with
     them rather than left to fight the tokens. */
  --bg:#0A0912;
  --card:#131126;
  --text:#F2F3FA;
  --muted:#9A9FB8;
  --line:#272141;
  /* Two violets, because one cannot do both jobs on a dark ground. As text,
     #7C5CFF reads 4.25 against the card and 3.94 against a violet wash —
     under AA either way — so links and accents use the lighter one. As a
     button fill under white text it has to go the other way: white on
     #7C5CFF is 4.35, on #6D4AFF it is 5.15. */
  --brand:#886BFF;
  --brand-soft:#1E1638;
  --dark:#6D4AFF;
  --green:#34D399;
  --green-soft:rgba(52,211,153,.12);
  --amber:#F2B45A;
  --amber-soft:rgba(242,180,90,.12);
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%}
body.s-page{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:16px;
  line-height:1.55;
}
.s-page a{color:inherit;text-decoration:none}
.s-page .skip{position:absolute;left:-9999px}
.s-page .skip:focus{left:8px;top:8px;z-index:30;background:#131126;padding:8px 12px;border-radius:10px}
.s-page .container{width:min(1160px,calc(100% - 40px));margin:auto}

/* ---------- masthead ---------- */
.s-page header.s-top{
  position:sticky;top:0;z-index:20;
  background:rgba(10,9,18,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(39,33,65,.9);
}
.s-page .nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.s-page .brand{font-weight:800;letter-spacing:-.03em;font-size:20px}
.s-page .brand span{color:var(--brand)}
.s-page .brand .brand-rest{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-style:normal}
.s-page .navlinks{display:flex;gap:22px;color:#9A9FB8;font-size:14px}
.s-page .navlinks a:hover{color:var(--brand)}

/* ---------- hero ---------- */
.s-page .hero{padding:68px 0 34px}
.s-page .breadcrumbs{font-size:13px;color:#7E829C;margin-bottom:20px}
.s-page .breadcrumbs a:hover{color:var(--brand)}
/* overflow-wrap, because a product name is one unbreakable token. At 42px on
   a 320px screen "AdCreative.ai" is wider than the column, and a word that
   cannot fit does not wrap — it hangs out of its box and takes the page with
   it. This only does anything when a word would otherwise overflow. */
.s-page h1{font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-.055em;margin:14px 0 18px;max-width:900px;overflow-wrap:break-word}
.s-page .lede{font-size:20px;color:#9A9FB8;max-width:780px;margin:0 0 24px}
.s-page .meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.s-page .meta.plain{gap:16px;color:var(--muted);font-size:13px}
/* One column. The second one held the summary panel, which is gone from the
   category pages; a tool page still has one, so the grid keeps two columns
   there. Without this the hero card sat in the left 60% with nothing beside
   it. */
.s-page .hero-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:16px}
/* Stated by the page rather than inferred with :has(), so a browser without
   it still gets two columns where there are two things. */
.s-page .hero-grid.with-panel{grid-template-columns:1.2fr .8fr}

/* The eyebrow is an uppercase chip on product pages and a sentence chip
   above the headline on comparisons. Same component, one modifier. */
.s-page .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-soft);color:var(--brand);
  border:1px solid rgba(95,227,208,.28);border-radius:999px;
  padding:6px 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.s-page .eyebrow.sentence{text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;padding:7px 11px}

/* ---------- shared atoms ---------- */
.s-page .panel,.s-page .hero-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.s-page .hero-card{padding:32px}
.s-page .pill{
  display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;
  font-size:12px;font-weight:800;background:#100E20;color:#C8CCDE;
}
.s-page .pill.green{background:var(--green-soft);color:var(--green)}
.s-page .pill.teal{background:var(--brand-soft);color:var(--brand)}
.s-page .pill.amber{background:var(--amber-soft);color:var(--amber)}
.s-page .badge{
  background:var(--green-soft);color:var(--green);border:1px solid rgba(52,211,153,.30);
  border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
}
.s-page .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.s-page .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;border:1px solid var(--dark);
  background:var(--dark);color:white;font-size:14px;font-weight:800;cursor:pointer;
  font-family:inherit;
}
.s-page .btn.secondary{background:#131126;color:var(--text);border-color:var(--line)}
.s-page .section{padding:42px 0}
.s-page .section h2{font-size:38px;letter-spacing:-.045em;margin:0 0 10px}
.s-page .section .intro{color:var(--muted);max-width:780px;margin:0 0 24px}
/* Three one-property overrides that used to be style="" attributes on the
   generated pages. style-src allows inline <style> blocks by hash, but a
   hash never covers a style ATTRIBUTE — that needs 'unsafe-hashes', which
   would also re-open every other attribute on the site. So the browser was
   dropping all 2,586 of them and the pages rendered with the wrong spacing.
   As classes they are covered by 'self' like everything else here. */
.s-page .panel.pad-lg{padding:24px}
.s-page .intro.flush{margin-bottom:0}
.s-page .intro.spaced{margin-top:24px}
.s-page .notice{
  margin-top:16px;padding:14px 16px;border-radius:14px;background:#100E20;
  border:1px solid var(--line);font-size:13px;color:var(--muted);
}
.s-page .notice a{color:var(--brand);font-weight:700}

/* ---------- product-page hero logo tile ---------- */
.s-page .hero-card .logo{
  /* Both of these were inverted by the repaint and are stated rather than
     mapped. The tile is dark with a white letter, as it always was; the
     on-light variant is the exception the tile exists for — a wordmark drawn
     in dark ink on nothing needs a light square behind it or it disappears. */
  width:58px;height:58px;border-radius:16px;background:#1E1B33;
  color:white;display:grid;place-items:center;font-size:25px;font-weight:850;
  margin-bottom:18px;overflow:hidden;
}
.s-page .hero-card .logo img{width:34px;height:34px;object-fit:contain;display:block}
.s-page .hero-card .logo.on-light{background:#F2F3FA} /* light on purpose: backs a dark wordmark */

/* ---------- logo tiles ----------
   A white-on-transparent mark needs a dark tile or it renders as nothing.
   These names come from TILE_BG in index.html; preflight checks that every
   name it can emit is defined in a stylesheet the pages actually load. */
.s-page .tool-logo{width:34px;height:34px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#131126}
.s-page .tool-logo-full{object-fit:cover}
.s-page .tool-mono{display:grid;place-items:center;font-weight:800;font-size:13px;background:#100E20;color:#C8CCDE}
.s-page .lg-plate{background:#EDEEF6;border-radius:6px;padding:2px} /* light on purpose: backs a dark-ink mark */
.s-page .lg-bg-black{background:#000;border-color:rgba(255,255,255,.22)}
.s-page .lg-bg-syn{background:#7C5CFF;border-color:rgba(255,255,255,.22)}

/* ---------- verdict / summary panels ---------- */
.s-page .summary{padding:28px}
.s-page .summary h3{font-size:23px;letter-spacing:-.035em;margin:0 0 15px}
.s-page .score{display:flex;align-items:flex-end;gap:6px;margin-bottom:16px}
.s-page .score strong{font-size:42px;line-height:1;letter-spacing:-.05em}
.s-page .score span{font-size:13px;color:var(--muted);padding-bottom:4px}
.s-page .summary-row{
  display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-top:1px solid var(--line);font-size:14px;
}
.s-page .summary-row b{font-weight:800;white-space:nowrap}
.s-page .summary-row span{color:var(--muted);text-align:right}

.s-page .verdict{padding:30px}
.s-page .verdict-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.s-page .ai-title{font-size:34px;letter-spacing:-.04em;margin:18px 0 5px}
.s-page .ai-sub{color:var(--muted);margin:0 0 20px}
.s-page .checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0}
.s-page .check{
  background:#100E20;border:1px solid var(--line);border-radius:14px;
  padding:12px 13px;font-size:14px;font-weight:650;
}
.s-page .price{font-size:14px;color:#9A9FB8;margin-top:4px}
.s-page .price strong{color:var(--text)}
.s-page .side-note{padding:28px}
.s-page .side-note h3{font-size:22px;letter-spacing:-.03em;margin:16px 0 8px}
.s-page .side-note p{color:#9A9FB8;margin:0 0 18px}
.s-page .mini-list{display:grid;gap:10px}
.s-page .mini-item{padding:13px 14px;background:#100E20;border:1px solid var(--line);border-radius:14px}
.s-page .mini-item b{display:block;font-size:14px}
.s-page .mini-item span{font-size:13px;color:var(--muted)}

/* ---------- tables ---------- */
.s-page .table-wrap{overflow:auto;border-radius:20px;border:1px solid var(--line);background:#131126}
.s-page table{width:100%;border-collapse:collapse;min-width:760px}
.s-page caption{text-align:left;padding:14px 18px;color:var(--muted);font-size:13px}
.s-page th,.s-page td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.s-page th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:#100E20}
.s-page td{font-size:14px}
.s-page tr:last-child td{border-bottom:none}
.s-page td ul{margin:0;padding-left:18px}
.s-page td li{margin-bottom:6px}
.s-page .winner{font-weight:800}

/* ---------- card grids ---------- */
.s-page .use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s-page .use-card{padding:20px}
.s-page .icon{
  width:38px;height:38px;border-radius:11px;background:#100E20;
  display:grid;place-items:center;margin-bottom:13px;font-size:19px;
}
.s-page .use-card h3{font-size:18px;margin:0 0 5px}
.s-page .use-card p{font-size:14px;color:var(--muted);margin:0 0 12px}
.s-page .fit,.s-page .pick{font-size:12px;font-weight:800;color:var(--green)}
.s-page .fit.mid,.s-page .pick.mid{color:var(--brand)}
.s-page .fit.low,.s-page .pick.low{color:var(--amber)}

.s-page .split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.s-page .info-card,.s-page .compare-card{padding:26px}
.s-page .info-card h3,.s-page .compare-card h3{font-size:26px;letter-spacing:-.035em;margin:12px 0 6px}
.s-page .compare-card .tag{font-size:13px;font-weight:800;color:var(--brand);margin-bottom:16px;display:block}
.s-page .reason{padding:14px 0;border-top:1px solid var(--line)}
.s-page .reason:first-of-type{border-top:none}
.s-page .reason b{display:block;font-size:14px;margin-bottom:3px}
.s-page .reason span{font-size:13px;color:var(--muted)}

/* ---------- pricing ---------- */
.s-page .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.s-page .price-card{padding:26px}
.s-page .price-card .logo{font-weight:850;font-size:22px;margin-bottom:14px;letter-spacing:-.03em}
.s-page .price-card .logo a{color:var(--brand)}
.s-page .plan{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.s-page .plan:first-of-type{border-top:none}
.s-page .plan b{font-size:15px}
.s-page .plan small{display:block;color:var(--muted);margin-top:3px}
.s-page .plan strong{white-space:nowrap}
/* Except when there is no room for it. "$125/mo · $100/mo yearly" is 235px
   of unbreakable text, which is most of a 320px phone and all of what is left
   beside a label — nowrap is there to stop "$25/mo" splitting from its unit,
   and it takes the whole string with it.

   The string has no space inside a price, so the only break opportunities are
   around the middle dot and before "yearly". Measured at 320, 360, 390 and
   414: it breaks between prices every time, never inside one. */
@media(max-width:414px){
  .s-page .plan strong{white-space:normal}
  .s-page .summary-row b{white-space:normal}
}

/* ---------- lists ---------- */
/* The alternatives list on a tool page still uses this card. Those 142 pages
   are outside the audience/use-case redesign, and deleting these rules with
   the old markup left them unstyled. */
.s-page .alt-card{padding:20px;display:flex;flex-direction:column}
.s-page .alt-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
/* The cost pill and the bookmark travel together at the head's right edge, so
   adding the second one moved neither the name nor the pill. The button is
   display:none until account.js confirms the feature is configured, and a
   flex row with one hidden child collapses to exactly what was there before. */
.s-page .alt-tail{display:flex;align-items:center;gap:8px;flex:none}
.s-page .alt-card h3{margin:0;font-size:18px}
.s-page .alt-card p{font-size:13px;color:var(--muted);margin:8px 0 14px}
.s-page .alt-link{font-size:13px;font-weight:800;margin-top:auto;color:var(--brand)}

/* ---------- company cards on the audience and use-case pages ---------- */
.s-page .alt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.s-page .tool-card{
  position:relative;overflow:hidden;border-radius:24px;padding:22px;
  display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(17,24,39,.05);
  transition:transform .18s ease,box-shadow .18s ease;
}
.s-page .tool-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(17,24,39,.09)}
/* The wash sits behind the content, so it cannot swallow the icon or the
   chips the way a positioned child would. */
.s-page .tool-card::before{
  content:"";position:absolute;z-index:0;width:150px;height:150px;right:-52px;top:-58px;
  border-radius:50%;background:var(--accent-soft);opacity:.78;
}
.s-page .tool-card > *{position:relative;z-index:1}
.s-page .card-top{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.s-page .tool-icon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:23px;
  background:var(--accent-soft);border:1px solid var(--accent-border);flex:0 0 auto;
}
.s-page .tool-icon .icon{width:100%;height:100%;margin:0;background:transparent;border-radius:0}
.s-page .tool-icon .tool-logo{width:30px;height:30px}
.s-page .top-copy{min-width:0}
.s-page .tool-card h3{margin:0 0 8px;font-size:21px;letter-spacing:-.035em}
.s-page .tool-card h3 a{color:inherit;text-decoration:none}
.s-page .tool-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.s-page .chips{display:flex;gap:7px;flex-wrap:wrap}
.s-page .chip{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}
.s-page .fit-chip{background:var(--accent-soft);color:var(--accent-text)}
.s-page .free-chip{background:rgba(52,211,153,.13);color:#34D399}
.s-page .aff-chip{background:rgba(242,180,90,.14);color:#F2B45A}
.s-page .best-bubble{
  display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;
  padding:8px 11px;border-radius:999px;background:#100E20;margin:0 0 14px;
}
.s-page .best-bubble span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:#7E829C}
.s-page .best-bubble strong{font-size:13px}
.s-page .tool-card .description{font-size:14px;line-height:1.55;color:#9A9FB8;margin:0 0 16px}
.s-page .mini-bubbles{display:grid;gap:9px}
.s-page .bubble{border-radius:16px;padding:12px 13px}
.s-page .bubble span{display:block;font-size:11px;font-weight:800;margin-bottom:4px}
.s-page .bubble b{display:block;font-size:12.5px;line-height:1.45;font-weight:650}
.s-page .bubble.free{background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.13)}
.s-page .bubble.free span{color:#34D399}
.s-page .bubble.why{background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.14)}
.s-page .bubble.why span{color:#C4B5FD}
.s-page .bubble.plans{background:rgba(242,180,90,.14);border:1px solid rgba(242,180,90,.30)}
.s-page .bubble.plans span{color:#F2B45A}
/* The ladder is several plan strings, each a sentence, so they need to breathe
   more than the one-line bubbles above them. */
.s-page .bubble.plans b{font-weight:600;line-height:1.6}
.s-page .tool-maker{margin:0 0 8px;font-size:13px;color:var(--muted)}
/* The two buttons replace the "see pricing" link on a category page, and take
   its place at the bottom so a row of cards still ends on one line. */
.s-page .card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.s-page .card-actions .btn{font-size:13px;padding:9px 14px}
/* Both the button row and the link below it want the bottom of the card. Two
   auto margins would split the slack between them and leave the pair floating
   in the middle, so the row takes it and the link sits under the row. */
.s-page .card-actions + .learn{margin-top:0;padding-top:14px}
/* margin-top:auto pins this to the bottom, which is what keeps a row of cards
   of unequal text length ending on the same line. */
.s-page .learn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:15px;border-top:1px solid #100E20;
  color:#C8CCDE;text-decoration:none;font-size:13px;font-weight:800;
}
.s-page .learn span{font-size:18px}
.s-page .tool-card.violet{--accent-soft:rgba(124,92,255,.14);--accent-border:rgba(124,92,255,.28);--accent-text:#C4B5FD}
.s-page .tool-card.blue{--accent-soft:rgba(124,92,255,.14);--accent-border:rgba(124,92,255,.14);--accent-text:#A897FF}
.s-page .tool-card.teal{--accent-soft:rgba(52,211,153,.13);--accent-border:rgba(95,227,208,.13);--accent-text:#7C5CFF}
.s-page .tool-card.orange{--accent-soft:rgba(242,180,90,.14);--accent-border:rgba(242,180,90,.20);--accent-text:#FB7185}
.s-page .tool-card.pink{--accent-soft:rgba(196,181,253,.14);--accent-border:rgba(196,181,253,.34);--accent-text:#C4B5FD}
.s-page .tool-card.lime{--accent-soft:rgba(139,211,90,.13);--accent-border:rgba(163,217,107,.28);--accent-text:#A3D96B}
@media(max-width:960px){.s-page .alt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.s-page .alt-grid{grid-template-columns:1fr}}
.s-page .company-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.s-page .company-cell{background:#131126;border:1px solid var(--line);border-radius:14px;padding:15px}
.s-page .company-cell span{
  display:block;color:#7E829C;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;font-weight:800;margin-bottom:4px;
}
.s-page .company-cell b{font-size:14px}
.s-page .deep-list{background:#131126;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.s-page .deep-row{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:18px 20px;border-top:1px solid var(--line)}
.s-page .deep-row.quad{grid-template-columns:180px 1fr 1fr 120px;gap:12px;align-items:start}
.s-page .deep-row:first-child{border-top:none}
.s-page .deep-row b,.s-page .deep-row h4{font-size:14px;margin:0}
.s-page .deep-row b a{color:var(--brand)}
.s-page .deep-row p{margin:0;color:var(--muted);font-size:14px}

/* ---------- chooser ---------- */
.s-page .decision{padding:28px}
.s-page .decision h2{font-size:30px;letter-spacing:-.04em;margin:14px 0 6px}
.s-page .decision-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.s-page .choice{
  border:1px solid var(--line);background:#131126;padding:11px 14px;border-radius:12px;
  cursor:pointer;font-weight:700;color:#C8CCDE;font-family:inherit;font-size:14px;
}
.s-page .choice:hover{border-color:#7E829C;background:#100E20}
.s-page .choice[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.s-page .result{
  margin-top:18px;padding:18px;border-radius:16px;background:#100E20;
  border:1px solid var(--line);display:none;
}
.s-page .result.on{display:block}
.s-page .result-label{
  font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:800;
}
.s-page .result-title{font-size:28px;font-weight:850;letter-spacing:-.03em;margin-top:3px}
.s-page .result-copy{color:var(--muted);margin-top:4px}
.s-page .result-tally{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- faq ---------- */
.s-page .faq details{
  background:#131126;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:10px;
}
.s-page .faq summary{cursor:pointer;font-weight:800}
.s-page .faq p{margin:10px 0 0;color:var(--muted)}

/* ---------- closers ---------- */
.s-page .footer-note{
  /* This one was already inverted against its page: a dark panel on a light
     ground. Flipping every colour flipped it into a white slab on a dark
     ground, so it is stated rather than mapped — a raised surface, the same
     as every other panel here. */
  background:#131126;color:#9A9FB8;border:1px solid #272141;border-radius:22px;padding:28px;
  margin-bottom:24px;font-size:14px;
}
.s-page .footer-note b{color:#F2F3FA}
.s-page .footer-note a{color:#C4B5FD;text-decoration:underline}
.s-page footer.s-foot{
  border-top:1px solid var(--line);padding:28px 0 42px;
  color:var(--muted);font-size:13px;background:var(--bg);
}
.s-page footer.s-foot a{color:var(--brand)}

@media(max-width:900px){
  /* .with-panel has to be named here, not just .hero-grid. It is two classes
     to one, so it outranks the collapse whatever the breakpoint says and
     whatever order the file is in — which is how a 198px panel sat off the
     right edge of a 390px phone, 171px past the viewport, on all 142 tool
     pages. A media query cannot out-argue specificity; it can only match it. */
  /* minmax(0,1fr), not 1fr. A 1fr track will not shrink below the
     min-content width of what is in it, so on a 320px screen the card grew
     to 332 and took the page sideways with it — the track was wider than
     the container holding it. The zero minimum lets the track be as narrow
     as it is given and the content wrap inside, which is the same idiom the
     category grid on the home page uses. */
  .s-page .hero-grid,.s-page .hero-grid.with-panel,
  .s-page .split,.s-page .pricing-grid{grid-template-columns:minmax(0,1fr)}
  .s-page .use-grid,.s-page .alt-grid{grid-template-columns:1fr 1fr}
  .s-page .company-grid{grid-template-columns:1fr 1fr}
  .s-page .deep-row,.s-page .deep-row.quad{grid-template-columns:1fr}
}
@media(max-width:620px){
  .s-page .container{width:min(100% - 24px,1160px)}
  .s-page .navlinks{display:none}
  .s-page .hero{padding-top:42px}
  .s-page h1{font-size:46px}
  .s-page .section h2{font-size:32px}
  .s-page .use-grid,.s-page .alt-grid,.s-page .company-grid,.s-page .checks{grid-template-columns:1fr}
}

/* Narrower than a 620px phone. This has to sit after the block above, which
   sets h1 to 46px — a media query adds no specificity, so the later one wins
   and an earlier override does nothing.

   At 46px on a 320px screen "AdCreative.ai" does not fit on a line, and a
   word that cannot fit gets broken: "AdCreative." over "ai". break-word up
   in the base rule is the backstop for a name longer than any size helps;
   this is the part that keeps ordinary names whole. */
@media(max-width:414px){
  .s-page h1{font-size:clamp(30px,9vw,42px)}
}


/* ---------- comparison pages: hero statements, answer bubbles, 9 categories ---------- */
/* One accent per company, used for its hero statement and every answer it
   gives in the table, so a reader can follow one side down the page by
   colour. Six accents, hashed off the product name, so a tool keeps the same
   colour on every comparison it appears in. */
/* Six accents, and they have to be six.

   They are handed out per pair, hashed off the product name, and the whole
   point is that the two sides of a comparison do not look alike. Two of
   these had stopped doing that job: pink carried violet's exact ink, so 70
   comparisons had no visible split at all, and teal carried #7C5CFF — the
   FILL violet — which reads 4.25 as text and failed AA on 396 of them.

   Both were invisible from the seven pages the contrast sweep measured,
   because none of those pages drew either one. */
.s-page .ac-violet{--ac-bg:rgba(124,92,255,.14);--ac-line:rgba(124,92,255,.30);--ac-ink:#C4B5FD}
.s-page .ac-orange{--ac-bg:rgba(242,180,90,.14);--ac-line:rgba(242,180,90,.28);--ac-ink:#F2B45A}
.s-page .ac-blue{--ac-bg:rgba(124,92,255,.14);--ac-line:rgba(124,92,255,.28);--ac-ink:#A897FF}
.s-page .ac-teal{--ac-bg:rgba(95,227,208,.13);--ac-line:rgba(95,227,208,.30);--ac-ink:#5FE3D0}
.s-page .ac-pink{--ac-bg:rgba(244,154,193,.13);--ac-line:rgba(244,154,193,.30);--ac-ink:#F49AC1}
.s-page .ac-lime{--ac-bg:rgba(139,211,90,.13);--ac-line:rgba(163,217,107,.28);--ac-ink:#A3D96B}

.s-page .hero-says{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.s-page .says{
  display:inline-flex;align-items:center;padding:10px 13px;border-radius:14px;
  font-size:15px;font-weight:700;line-height:1.4;max-width:100%;
  background:var(--ac-bg);border:1px solid var(--ac-line);color:var(--ac-ink);
}
.s-page .ans{
  display:inline-block;padding:9px 11px;border-radius:12px;font-weight:650;line-height:1.4;
  background:var(--ac-bg);border:1px solid var(--ac-line);color:var(--ac-ink);
}
.s-page .ans ul{margin:0;padding-left:16px}

.s-page .verdict-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.s-page .verdict-pair .hero-card{padding:24px;display:flex;flex-direction:column}
.s-page .verdict-pair .hero-card h3{font-size:26px;letter-spacing:-.04em;margin:10px 0 6px}
.s-page .verdict-pair .hero-card p{color:var(--muted);margin:0 0 14px}
.s-page .verdict-pair .checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.s-page .verdict-pair .check{
  background:#100E20;border:1px solid var(--line);border-radius:999px;
  padding:7px 10px;font-size:12px;font-weight:700;
}

/* ---------- how we know ----------
   The line under the comparison table says how much the pick is worth, and it
   is the one sentence on the page that can contradict the green pill beside
   it, so it is set as a statement rather than as a caption. A lead that rests
   on price is not a warning, it is a different kind of answer, so it reads in
   the site's amber rather than in its green. */
.s-page .cev-grade{
  margin:18px 0 0;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:#100E20;
  font-size:14px;line-height:1.6;color:var(--text);
}
.s-page .cev-grade.strong{border-left:3px solid var(--green)}
.s-page .cev-grade.clear{border-left:3px solid var(--brand)}
.s-page .cev-grade.thin{border-left:3px solid var(--amber);color:var(--muted)}
.s-page .cev-grade.tie{border-left:3px solid var(--line);color:var(--muted)}

/* The source column carries whole sentences, so this table is read rather
   than scanned and its rows are allowed to be tall. */
.s-page table.cev{min-width:680px}
.s-page table.cev td:last-child{color:var(--muted);font-size:13px;line-height:1.55}
.s-page table.cev td:last-child a{color:var(--brand);font-weight:700}
.s-page .cev-none{
  margin:0;padding:16px 18px;border-radius:16px;
  border:1px solid var(--line);background:#131126;color:var(--muted);font-size:14px;line-height:1.6;
}
.s-page .cev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.s-page .cev-card{padding:20px;border-radius:20px}
.s-page .cev-card h3{font-size:16px;letter-spacing:-.02em;margin:0 0 10px}
.s-page .cev-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.s-page .cev-card p:last-child{margin-bottom:0}
.s-page .cev-card b{color:var(--text)}
/* A vendor's own pricing page, and the site's own methodology, are the two
   things in this block a reader is meant to click. */
.s-page .cev-card a{color:var(--brand);font-weight:700;overflow-wrap:anywhere}

.s-page .cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.s-page .cat-card{padding:20px;border-radius:20px}
.s-page .cat-num{font-size:11px;letter-spacing:.08em;color:#7E829C;font-weight:800}
.s-page .cat-card h3{font-size:18px;line-height:1.2;letter-spacing:-.025em;margin:8px 0 7px}
/* The descriptions run to two or three lines depending on the category, and a
   floor keeps the fit rows on one line across a row of cards. */
.s-page .cat-card p{font-size:13px;color:#9A9FB8;margin:0 0 16px;min-height:62px}
.s-page .fit-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.s-page .tool-fit{background:#100E20;border:1px solid #100E20;border-radius:14px;padding:11px}
.s-page .tool-fit .tool-name{font-size:12px;font-weight:850;margin-bottom:7px;word-break:break-word}
.s-page .fit{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:10.5px;font-weight:850}
.s-page .fit.best{color:#34D399;background:rgba(52,211,153,.13)}
.s-page .fit.good{color:#A897FF;background:rgba(124,92,255,.14)}
.s-page .fit.limited{color:#F2B45A;background:rgba(242,180,90,.14)}
.s-page .fit.weak{color:#9A9FB8;background:#100E20}
.s-page .fit.bad{color:#FB7185;background:rgba(251,113,133,.14)}
.s-page .cat-winner{
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12px;color:#9A9FB8;
}
.s-page .cat-winner strong{color:var(--text)}

@media(max-width:960px){
  .s-page .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-page .cev-grid{grid-template-columns:1fr}
  .s-page .verdict-pair{grid-template-columns:1fr}
}
@media(max-width:640px){
  .s-page .cat-grid{grid-template-columns:1fr}
  .s-page .cat-card p{min-height:0}
}


/* ================================================================
   The quick answer at the top of a comparison.
   ================================================================
   A comparison runs to 12,700px on a 390px screen. The two questions
   somebody opens one to settle — which of these is for me, and what does
   it cost — sit 650px and 7,400px down that. This block puts both at the
   top behind a pair of tabs and changes nothing below it: every section
   the page had is still there, in the same order, for a reader who
   scrolls and for a crawler that does not tab.

   It is a summary rather than a second copy. The overview panel is the
   two hero sentences the page already carried; the pricing panel is one
   figure per side, where the full ladder is still at #pricing.

   No script anywhere in it. The tabs are two radios and their labels, so
   they work with JavaScript off — and an inline script carrying this
   pair's names would hash differently on each of 1,278 pages, which is
   1,278 entries in a Content-Security-Policy header.

   A lime bar used to float at the foot of this page saying "Compare these
   tools", which is the button that brings a reader here from the home
   page. Arriving on the comparison and finding the same button again reads
   as the press having failed. It is gone from here; the home page keeps
   it, because there it goes somewhere.
   ================================================================ */
.s-page .hero-sub{
  margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--muted);max-width:52ch;
}
/* The one link out of a comparison: back to the box that picks for you. */
.s-page .hero-fit{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 20px;
  padding:9px 15px;border-radius:100px;text-decoration:none;
  font-size:13.5px;font-weight:700;
  background:rgba(198,242,78,.10);border:1px solid rgba(198,242,78,.30);color:#C6F24E;
}
.s-page .hero-fit:hover{background:rgba(198,242,78,.18);border-color:#C6F24E}

.s-page .cxq{margin:0 0 22px}
/* Off screen rather than display:none, so the tabs keep their turn in the
   tab order and a keyboard can still reach them. */
.s-page .cxq-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.s-page .cxq-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 18px;padding:4px;
  background:#131126;border:1px solid var(--line);border-radius:14px;
}
.s-page .cxq-t{
  display:flex;align-items:center;justify-content:center;min-height:42px;
  border-radius:11px;font-size:14.5px;font-weight:700;color:var(--muted);cursor:pointer;
}
.s-page .cxq-panel{display:none}
.s-page .cxq-h{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
.s-page .cxq-lede{margin:0 0 14px;font-size:14px;color:var(--muted)}

/* The panel a tab opens, and the tab that opened it. */
.s-page #cxq-o:checked ~ .cxq-panel-o,
.s-page #cxq-p:checked ~ .cxq-panel-p{display:block}
.s-page #cxq-o:checked ~ .cxq-tabs .cxq-t[for="cxq-o"],
.s-page #cxq-p:checked ~ .cxq-tabs .cxq-t[for="cxq-p"]{
  background:#2A1E52;color:#C4B5FD;
}
.s-page .cxq-r:focus-visible ~ .cxq-tabs .cxq-t[for="cxq-o"],
.s-page .cxq-r:focus-visible ~ .cxq-tabs .cxq-t[for="cxq-p"]{outline:2px solid #886BFF;outline-offset:2px}

.s-page .cxq-card{
  padding:16px 17px 17px;border-radius:16px;margin:0 0 12px;
  background:var(--card);border:1px solid var(--line);
}
.s-page .cxq-card:last-child{margin-bottom:0}
.s-page .cxq-card-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
.s-page .cxq-card-t b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ac-ink)}
.s-page .cxq-free,.s-page .cxq-paid{
  flex:none;padding:6px 11px;border-radius:100px;font-size:12.5px;font-weight:700;
}
.s-page .cxq-free{background:rgba(198,242,78,.12);color:#C6F24E}
.s-page .cxq-paid{background:rgba(242,180,90,.12);color:var(--amber)}
.s-page .cxq-from{display:block;margin-top:13px;font-size:13px;color:var(--muted)}
.s-page .cxq-fig{margin:2px 0 0;display:flex;align-items:baseline;gap:9px}
.s-page .cxq-fig strong{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.s-page .cxq-fig span{font-size:14px;color:var(--muted)}
.s-page .cxq-fig.none{font-size:15px;font-weight:650;color:var(--muted);display:block}
.s-page .cxq-go{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding:11px 13px;border-radius:11px;text-decoration:none;
  font-size:14px;font-weight:700;
  background:var(--ac-bg);border:1px solid var(--ac-line);color:var(--ac-ink);
}
.s-page .cxq-go:hover{border-color:var(--ac-ink)}

/* ---- and where each of them applies -----------------------------------
   Below, not above, the rules they have to beat: a media query adds no
   specificity, so an identical selector written earlier never wins. */
@media(min-width:621px){
  /* The tabs are a phone answer to a phone problem. On a wide screen the
     overview sentences sit where they always did and the pricing panel
     stands down, because the full ladder is a scroll away at #pricing. */
  .s-page .cxq-tabs{display:none}
  .s-page .cxq-panel-o{display:block}
  .s-page #cxq-p:checked ~ .cxq-panel-p{display:none}
}
@media(max-width:620px){
  .s-page .cxq-h{font-size:21px}
  .s-page .cxq-fig strong{font-size:30px}
}