/* ================================================================
   The tool card
   ================================================================
   One card, drawn the same way on the category pages, the "Best AI for…"
   pages and the audience pages. It answers three questions in three fixed
   places — free to start, month to month, billed yearly — so a reader
   learns the shape once and afterwards only reads what changed.

   Every rule is scoped under .tool or .card-list. Eight of the names the
   design uses (.price, .verdict, .btn, .logo, .actions, .fit, .tool-name,
   .tool-logo) already mean something else in this stylesheet, and an
   unscoped .btn here would repaint every button on the site.

   Two of the design's names are not used in the markup at all. The card also
   renders inside the home page's finder, where ".yes" is a rounded pill and
   ".btn" carries !important on its colours — so the dot is .is-free/.is-paid
   and the buttons are .tbtn. Scoping cannot win against !important, and
   !important of our own would only move the fight somewhere else; a name
   nothing else claims ends it.
   ================================================================ */
.card-list{
  --card-bg:#131126; --card-bg2:#191632; --card-line:#272141; --card-line2:#332B52;
  --card-text:#F2F3FA; --card-muted:#9A9FB8; --card-dim:#7E829C;
  --card-violet:#886BFF; --card-violet2:#C4B5FD; --card-free:#35D39A; --card-paid:#F2B45A;
  --card-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* The design is drawn at the page size of its own document. Inheriting the
     site's 16px moves every unstated size in the card by a point. */
  font-size:15px;line-height:1.55;color:var(--card-text);
}

.card-list .led{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.card-list .led.is-free{background:var(--card-free);
  box-shadow:0 0 0 3px rgba(53,211,154,.14),0 0 10px rgba(53,211,154,.55)}
.card-list .led.is-paid{background:var(--card-paid);box-shadow:0 0 0 3px rgba(242,180,90,.14)}

/* ---- the fit meter ---- */
.card-list .bars{display:inline-flex;gap:3px;vertical-align:middle}
.card-list .bars i{width:14px;height:4px;border-radius:2px;background:var(--card-line2)}
.card-list .bars.f3 i,
.card-list .bars.f2 i:nth-child(-n+2),
.card-list .bars.f1 i:first-child{background:var(--card-violet)}

/* ---- the card ---- */
.card-list .tool{background:linear-gradient(180deg,var(--card-bg2),var(--card-bg));
  border:1px solid var(--card-line);border-radius:16px;padding:22px 24px 18px;
  margin-bottom:14px;color:var(--card-text)}
.card-list .tool-head{display:flex;align-items:center;gap:14px}
.card-list .tool .logo{position:relative;width:44px;height:44px;flex:none;border-radius:11px;
  background:#1E1B33;display:grid;place-items:center;overflow:hidden}
/* background:none here used to overrule the plate a mark had been given, so a
   white-on-transparent logo landed on the white tile and showed nothing. The
   plate is the whole point now that the tile is dark, so it is left alone. */
.card-list .tool .logo .tool-logo{position:absolute;inset:6px;width:32px;height:32px;
  object-fit:contain;border-radius:0;padding:0}
.card-list .tool .logo .lg-plate{background:#EDEEF6;border-radius:6px;padding:2px} /* light on purpose: backs a dark-ink mark */
.card-list .tool .logo .lg-bg-black{background:#000}
.card-list .tool .logo .lg-bg-syn{background:#7C5CFF}
.card-list .tool .logo .tool-logo-full{inset:0;width:100%;height:100%}
.card-list .tool .logo .tool-mono{position:static;inset:auto;width:auto;height:auto;
  display:grid;place-items:center;font-weight:700;color:#111827;font-size:17px}
.card-list .tool-id{min-width:0;flex:1}
.card-list .tool-name{margin:0;font-size:19px;line-height:1.2;font-weight:650;
  letter-spacing:-.01em;color:var(--card-text)}
.card-list .tool-name a{text-decoration:none;color:inherit}
.card-list .tool-name a:hover{text-decoration:underline;
  text-decoration-color:var(--card-line2);text-underline-offset:4px}
.card-list .maker{margin:3px 0 0;font-size:13px;color:var(--card-dim);
  display:flex;flex-wrap:wrap;gap:2px 9px}
.card-list .maker span+span::before{content:"";display:inline-block;width:3px;height:3px;
  border-radius:50%;background:var(--card-dim);vertical-align:middle;margin:-2px 9px 0 0}
.card-list .tool .save-btn{flex:none;align-self:flex-start;color:var(--card-muted);
  background:none;border:1px solid var(--card-line2);border-radius:9px}

/* ---- verdict ---- */
.card-list .verdict{margin:18px 0 0;padding:0;font-size:17px;line-height:1.5;max-width:70ch;
  color:var(--card-text)}
.card-list .verdict .fit{display:inline-flex;align-items:center;gap:9px;font-weight:650;
  color:var(--card-violet2);margin-right:4px;background:none;padding:0;border:0;
  font-size:inherit;border-radius:0;letter-spacing:inherit;text-transform:none}

/* ---- the pricing readout ---- */
.card-list .price{margin:20px 0 0;display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--card-line);border-radius:12px;overflow:hidden;
  background-color:#080D1A;
  background-image:linear-gradient(rgba(124,92,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(124,92,255,.05) 1px,transparent 1px);
  background-size:16px 16px;padding:0;color:var(--card-text);
  font-size:15px;line-height:1.55;border-color:var(--card-line)}
.card-list .cell{padding:14px 16px 15px;border-left:1px solid var(--card-line);min-width:0;
  color:var(--card-text)}
.card-list .cell:first-child{border-left:0}
.card-list .cell dt{font-size:12.5px;color:var(--card-muted);margin-bottom:6px;font-weight:400}
.card-list .cell dd{margin:0}
.card-list .cell .amt{font:600 24px/1.1 var(--card-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px;color:var(--card-text)}
.card-list .cell .amt small{font-size:13px;font-weight:500;color:var(--card-muted);
  letter-spacing:0;margin-left:-6px}
.card-list .cell .amt.none{color:var(--card-dim)}
.card-list .cell.free .amt{color:var(--card-free)}
.card-list .cell.nofree .amt{color:var(--card-paid)}
.card-list .cell .note{margin-top:6px;font-size:13px;line-height:1.45;color:var(--card-muted)}
.card-list .save{display:inline-block;font:600 11.5px/1 var(--card-mono);color:var(--card-free);
  border:1px solid rgba(53,211,154,.35);border-radius:5px;padding:3px 6px;margin-left:2px}

/* ---- watch out ---- */
.card-list .watch{display:flex;gap:10px;margin:16px 0 0;font-size:14px;
  color:var(--card-muted);max-width:78ch}
.card-list .watch svg{flex:none;margin-top:3px;color:var(--card-paid)}
.card-list .watch b{color:var(--card-text);font-weight:600}

/* ---- all plans ---- */
.card-list .plans{margin-top:14px;border-top:1px dashed var(--card-line);
  background:none;border-left:0;border-right:0;border-bottom:0;padding:0;border-radius:0}
.card-list .plans summary{cursor:pointer;list-style:none;padding:12px 0 2px;font-size:13.5px;
  color:var(--card-violet2);display:inline-flex;align-items:center;gap:8px;background:none}
.card-list .plans summary::-webkit-details-marker{display:none}
.card-list .plans summary::before{content:"";width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
.card-list .plans[open] summary::before{transform:rotate(45deg)}
.card-list .tbl{overflow-x:auto}
.card-list .plans table{width:100%;min-width:480px;border-collapse:collapse;
  margin:10px 0 4px;font-size:13.5px}
.card-list .plans th,.card-list .plans td{text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--card-line);vertical-align:top;color:var(--card-muted);
  background:none;letter-spacing:normal;font-size:13.5px;text-transform:none}
.card-list .plans th{font-weight:500;color:var(--card-dim);font-size:12.5px;background:none}
.card-list .plans td:first-child{color:var(--card-text);font-weight:550;white-space:nowrap}
.card-list .plans td.num{font-family:var(--card-mono);font-variant-numeric:tabular-nums;
  color:var(--card-text);white-space:normal}

/* ---- actions ---- */
.card-list .actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.card-list .actions .tbtn{display:inline-flex;align-items:center;gap:7px;height:36px;
  padding:0 14px;border-radius:9px;font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid var(--card-line2);color:var(--card-text);background:none;
  justify-content:normal;letter-spacing:normal;text-transform:none}
/* White on --card-violet is 3.75 now that the token is the lighter text one.
   A fill under white text goes the other way. */
.card-list .actions .tbtn.primary{background:#6D4AFF;border-color:#6D4AFF;
  color:#fff}
.card-list .actions .tbtn.primary:hover{background:#6B49FF}
.card-list .actions .tbtn:not(.primary):hover{border-color:var(--card-muted)}
.card-list .aff-note{font-size:12.5px;color:var(--card-paid)}
.card-list .checked{margin-left:auto;font-size:12.5px;color:var(--card-dim)}

@media (max-width:720px){
  .card-list .tool{padding:18px 16px 14px}
  .card-list .verdict{font-size:16px}
  .card-list .price{grid-template-columns:1fr}
  .card-list .cell{border-left:0;border-top:1px solid var(--card-line);display:grid;
    grid-template-columns:1fr auto;column-gap:12px;align-items:center}
  .card-list .cell:first-child{border-top:0}
  .card-list .cell dt{margin:0}
  .card-list .cell .amt{grid-column:2;grid-row:1;justify-content:flex-end;font-size:20px}
  .card-list .cell .note{grid-column:1 / -1}
  .card-list .checked{margin-left:0;width:100%}
  .card-list .plans table,
  .card-list .plans td{font-size:13px}
  .card-list .plans td:first-child{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .card-list .plans summary::before{transition:none}
}