/* Best AI Tools List: "Ask the Group Chat" (Gen Z redesign, Oct 16 2026).
   A light messaging app. Questions arrive as gray bubbles, the site answers in deep message blue with link previews
   that carry the receipts: price, green flags, red flags, the source. Color is law: blue = the site's answers and
   actions, green = a green flag, red = a red flag, yellow = the one moving highlight. Geist for reading, Bricolage
   Grotesque for big friendly headlines. Rounded everything. Layered over engine/catalog_static/catalog.css. */

@font-face { font-family: "Geist"; src: url("/static/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;            /* grouped background, like an app's settings screen */
  --bg-3: #ececf0;
  --ink: #111114;
  --ink-2: #3c3c43;
  --ink-3: #6b6b72;           /* 5.2:1 on white, 4.8:1 on bg-2 */
  --line: #e4e4e9;
  --bubble: #e9e9eb;          /* incoming */
  --blue: #0066e0;            /* the site's answers and actions: white text 5.1:1 */
  --blue-2: #0052b4;
  --blue-tint: #e8f1fd;
  --green: #1d7a35; --green-bg: #e3f4e7;   /* 5.0:1 */
  --red: #c11f1f;   --red-bg: #fde8e7;     /* 5.1:1 */
  --hl: #ffe27a;              /* the one moving highlight */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
  --typed: "Geist", ui-sans-serif, system-ui, sans-serif;
  --r-bubble: 22px; --r-card: 18px; --r-input: 14px;
  --shadow: 0 1px 2px rgba(17, 17, 20, 0.06), 0 8px 24px rgba(17, 17, 20, 0.07);
  --shadow-lift: 0 2px 4px rgba(17, 17, 20, 0.06), 0 14px 32px rgba(17, 17, 20, 0.11);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

html { scrollbar-color: #c7c7cc var(--bg); }
body { background: var(--bg); color: var(--ink); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--blue-2); }
::selection { background: var(--hl); color: var(--ink); }
input, select, textarea { caret-color: var(--blue); accent-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
.typed { font-family: var(--font); font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.section-h { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); margin-bottom: 16px; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.small { font-size: 0.9375rem; } .muted { color: var(--ink-3); }
.note { color: var(--ink-2); max-width: 68ch; }

/* ---------- app bar ---------- */
.masthead { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); }
.mast-row { min-height: 64px; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.bmark { width: 30px; height: 30px; display: block; }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.logo-word b { color: var(--blue); font-weight: 800; }
.mast-search { background: var(--bg-2); border-radius: 999px; border: 1px solid transparent; transition: border-color 180ms var(--ease), background-color 180ms var(--ease); }
.mast-search:focus-within { background: #fff; border-color: var(--blue); }
.mast-search input { border: 0; background: none; height: 42px; padding: 0 16px; font-size: 1rem; }
.mast-search input:focus { outline: none; }
.mast-search button { border: 0; background: none; color: var(--ink-3); border-radius: 999px; }
.mast-search button:hover { color: var(--blue); }
.mast-nav a { color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; border-radius: 999px; }
.mast-nav a:hover { background: var(--bg-2); color: var(--ink); }
.mast-nav a[aria-current="page"] { background: var(--blue-tint); color: var(--blue-2); }
.mast-line { display: none; }
@media (max-width: 760px) { .mast-nav ul.open { background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .mast-nav ul.open a { min-height: 48px; } }
.crumbs { padding-top: 16px; font-size: 0.9375rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none; transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-2); color: #fff; }
.btn-quiet { background: var(--bg-2); color: var(--ink); }
.btn-quiet:hover { background: var(--bg-3); }
.btn-text { background: none; border: 0; color: var(--blue); font-weight: 650; min-height: 44px; }

/* ---------- home: ask + the thread ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; padding-top: 48px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; max-width: 12ch; }
.sub { margin-top: 18px; font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.composer { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 8px; padding: 8px; background: var(--bg-2); border-radius: 28px; border: 1px solid var(--line); transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); background: #fff; }
.composer input[name="q"] { border: 0; background: none; height: 48px; padding: 0 14px; font-size: 1.125rem; width: 100%; }
.composer input[name="q"]:focus { outline: none; }
.composer input[name="q"]::placeholder, .mast-search input::placeholder, .order-compact input::placeholder { color: var(--ink-3); opacity: 1; }
.send { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; display: grid; place-items: center; transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.send:hover { background: var(--blue-2); }
.send:active { transform: scale(0.94); }
.send .i { width: 22px; height: 22px; stroke-width: 2.4; transform: rotate(-90deg); }
.composer-solo { max-width: 46rem; margin-top: 4px; }
.reply { max-width: 46rem; margin-top: 18px; }
.reply:empty { display: none; }
.sent { font-size: 0.75rem; color: var(--ink-3); padding-right: 8px; }
.quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 2px; }
.quick label { position: relative; }
.quick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quick span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all 160ms var(--ease); }
.quick input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.quick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.quick-asks { margin-top: 16px; color: var(--ink-3); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.quick-asks a { color: var(--ink-2); background: var(--bg-2); padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 550; }
.quick-asks a:hover { background: var(--blue-tint); color: var(--blue-2); }

@media (min-width: 1024px) { .hero-ask { position: sticky; top: 96px; } }
.thread { background: var(--bg-2); border-radius: 28px; padding: 18px 18px 22px; }
.thread-h { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-size: 1rem; letter-spacing: 0; padding: 4px 6px 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.thread-h .bmark { width: 36px; height: 36px; }
.thread-h span:last-child { display: grid; line-height: 1.25; }
.thread-h small { color: var(--ink-3); font-weight: 450; font-size: 0.875rem; }
.msgs { display: grid; gap: 10px; }
.msg { display: grid; gap: 4px; max-width: 88%; }
.msg-in { justify-self: start; }
.msg-out { justify-self: end; justify-items: end; max-width: 94%; }
.who { font-size: 0.8125rem; color: var(--ink-3); padding-left: 14px; }
.who a { color: var(--ink-3); text-decoration: none; font-weight: 600; }
.who a:hover { color: var(--blue); }
.bubble { padding: 10px 15px; border-radius: var(--r-bubble); font-size: 1rem; line-height: 1.4; width: fit-content; }
.msg-in .bubble { background: var(--bubble); color: var(--ink); border-bottom-left-radius: 6px; }
.msg-out .bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.previews { display: grid; gap: 8px; width: 100%; }
.reply-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 0.9375rem; text-decoration: none; padding: 4px 6px; }
.reply-link .i { width: 16px; height: 16px; }
.msgs .msg { opacity: 0; transform: translateY(8px); animation: pop 420ms var(--ease) forwards; }
.msgs .msg:nth-child(1) { animation-delay: 80ms; } .msgs .msg:nth-child(2) { animation-delay: 380ms; } .msgs .msg:nth-child(3) { animation-delay: 680ms; }
.msgs .msg:nth-child(4) { animation-delay: 980ms; } .msgs .msg:nth-child(5) { animation-delay: 1280ms; } .msgs .msg:nth-child(6) { animation-delay: 1580ms; }
@keyframes pop { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msgs .msg { opacity: 1; transform: none; animation: none; } }

/* link preview card: the tool, with its receipts */
.preview { display: grid; gap: 8px; padding: 12px 14px 12px; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; text-align: left; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.preview:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); color: var(--ink); }
.pv-top { display: flex; align-items: center; gap: 10px; }
.pv-id { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.pv-id b { font-weight: 700; font-size: 1.0625rem; }
.pv-dom { color: var(--ink-3); font-size: 0.8125rem; font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-what { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* price pill + flags */
.price-pill { display: inline-flex; align-items: baseline; gap: 2px; padding: 5px 12px; border-radius: 999px; background: var(--bg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-pill b { font-weight: 750; font-size: 1.0625rem; }
.price-pill .per { color: var(--ink-3); font-size: 0.875rem; }
html[data-billing="a"] .price-pill .per::after { content: " yearly"; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 650; line-height: 1.25; }
.flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.flag-green { color: var(--green); background: var(--green-bg); }
.flag-red { color: var(--red); background: var(--red-bg); }

/* ---------- home sections ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.sec-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; }
.sec-head p { color: var(--ink-3); max-width: 52ch; }
.chats, main > .wrap { padding-bottom: 56px; }
.chat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.chat-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; background: var(--bg-2); border-radius: var(--r-card); color: var(--ink); text-decoration: none; transition: background-color 180ms var(--ease); }
.chat-row:hover { background: var(--blue-tint); color: var(--ink); }
.chat-row:hover .cr-meta .count { background: #fff; }
.stack { display: flex; }
.stack .tlogo { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 2px var(--bg-2); }
.stack .tlogo + .tlogo { margin-left: -12px; }
.chat-row:hover .stack .tlogo { box-shadow: 0 0 0 2px var(--blue-tint); }
.cr-body { display: grid; min-width: 0; line-height: 1.3; }
.cr-body b { font-weight: 700; }
.cr-body span { color: var(--ink-3); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-meta { display: grid; justify-items: end; line-height: 1.2; }
.cr-meta .count { min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--bg-3); color: var(--ink); font-weight: 700; font-size: 0.8125rem; display: grid; place-items: center; }
.cr-meta small { color: var(--ink-3); font-size: 0.75rem; margin-top: 2px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-weight: 600; }
.pill-list a:has(.duo) { padding-left: 8px; }
.pill-list a:hover { background: var(--blue-tint); color: var(--blue-2); }
.pill-list small { color: var(--ink-3); font-weight: 500; }
.duo { display: flex; }
.duo .tlogo { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 2px var(--bg-2); }
.duo .tlogo + .tlogo { margin-left: -8px; }
.promise-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { background: var(--bg-2); border-radius: 22px; padding: 22px; }
.card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.card p { color: var(--ink-2); }

/* ---------- tool logos ---------- */
.tlogo { display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 20, 0.08); object-fit: contain; padding: 4px; vertical-align: middle; }
.tlogo-dark { background: #1c1c1e; }
.tlogo-none { display: inline-grid; place-items: center; padding: 0; background: var(--bg-3); color: var(--ink-2); font-family: var(--display); font-weight: 800; font-size: 1.125rem; line-height: 1; box-shadow: none; }
.tlogo.logo-lg { width: 84px; height: 84px; border-radius: 22px; padding: 8px; box-shadow: var(--shadow); }
.tlogo-none.logo-lg { font-size: 2.25rem; }

/* ---------- list pages ---------- */
.list-head { padding-top: 28px; padding-bottom: 24px; display: grid; gap: 16px; }
.list-head h1, .tool-head h1, .prose h1, .notfound h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; max-width: 20ch; }
.facts { color: var(--ink-3); font-size: 1rem; font-variant-numeric: tabular-nums; }
.narrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.narrow-label { font-family: var(--font); font-size: 0.9375rem; font-weight: 650; color: var(--ink-3); letter-spacing: 0; }
.narrow ul { display: flex; flex-wrap: wrap; gap: 6px; }
.narrow a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.narrow a:hover { background: var(--blue-tint); color: var(--blue-2); }
.n { color: var(--ink-3); font-size: 0.8125rem; font-weight: 550; font-variant-numeric: tabular-nums; }

/* price scale, quiet */
.scale { padding: 24px 22px 10px; margin-bottom: 28px; background: var(--bg-2); border-radius: 22px; }
.scale-track { height: 58px; }
.scale-track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #d1d1d6; border-radius: 2px; }
.scale-tick { border-left: 1px dashed #c7c7cc; }
.scale-tick span { font-weight: 650; font-size: 0.8125rem; color: var(--ink-3); bottom: -24px; }
.scale-tick:first-child span { transform: none; }
.scale-tick:last-of-type span { transform: translateX(-100%); }
.scale-mark { top: 14px; bottom: 2px; width: 3px; border-radius: 3px; background: #8e8e93; opacity: 0.55; }
.scale-mark:hover, .scale-mark.on { opacity: 1; background: #e0b400; width: 5px; margin-left: -2px; z-index: 2; }
.scale-mark .scale-label { background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 600; padding: 5px 10px; border-radius: 10px; }
.scale-cap { margin-top: 32px; color: var(--ink-3); font-size: 0.9375rem; }
.scale-cap b { color: var(--ink); }

/* filters: a settings sheet with toggles */
.listing { padding-bottom: 56px; }
.rail { background: var(--bg-2); border-radius: 22px; padding: 6px 16px 10px; }
.rail-head h2 { font-size: 1.375rem; }
.fgroup { padding: 12px 0; border-top: 1px solid var(--line); }
.fgroup:first-of-type { border-top: 0; }
.fgroup legend { font-family: var(--font); font-weight: 700; font-size: 0.9375rem; padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.fgroup legend + * { clear: both; }
.fopt { font-size: 0.9375rem; min-height: 38px; border-radius: 10px; }
.fopt input { appearance: none; width: 42px; height: 26px; margin: 0; flex: none; border-radius: 999px; background: #d1d1d6; position: relative; cursor: pointer; transition: background-color 180ms var(--ease); order: 3; }
.fopt input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 200ms var(--ease); }
.fopt input:checked { background: var(--blue); }
.fopt input:checked::after { transform: translateX(16px); }
.fopt .n { order: 2; margin-right: 6px; }
.toolbar { padding-bottom: 12px; gap: 10px 12px; }
.toolbar .count b { font-size: 1.25rem; font-weight: 750; }
.toolbar-actions { flex-wrap: wrap; }
.billing-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.billing-switch button { border: 0; background: none; min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 650; font-size: 0.875rem; color: var(--ink-3); }
.billing-switch button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17, 17, 20, 0.12); }
.tbtn, .tselect select { min-height: 42px; border: 0; background-color: var(--bg-2); border-radius: 999px; color: var(--ink); font-weight: 650; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.tselect select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; }
.tbadge { background: var(--blue); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 0.75rem; }
.active-chips:not(:empty) { padding-top: 10px; }
.active-chips button, .empty-actions button { border: 0; background: var(--blue-tint); color: var(--blue-2); border-radius: 999px; font-weight: 650; }
.active-chips .clear-all { background: none; color: var(--ink-3); text-decoration: underline; }
.empty, .error-box { padding: 28px; border-radius: 22px; background: var(--bg-2); margin-top: 16px; display: grid; gap: 8px; }
.empty h3 { font-size: 1.375rem; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice { margin-top: 12px; padding: 12px 16px; background: var(--bubble); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; width: fit-content; max-width: 70ch; }
.typing { display: inline-flex; gap: 5px; padding: 14px 18px; background: var(--bubble); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; margin-top: 16px; }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: #8e8e93; animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: 0.6; } }
.show-more { margin-top: 16px; }

/* entries: link previews in a thread */
.entries { display: grid; gap: 10px; padding-top: 12px; }
.entry { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 16px 18px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); align-items: start; transition: box-shadow 200ms var(--ease); }
.entry:hover { box-shadow: var(--shadow-lift); }
.entry.hl { box-shadow: 0 0 0 3px var(--hl), var(--shadow-lift); }
.entry-text { display: grid; gap: 8px; min-width: 0; }
.entry-name { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.en-id { display: grid; line-height: 1.2; min-width: 0; }
.entry-name a { color: var(--ink); text-decoration: none; }
.entry-name a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.entry-name a:hover { color: var(--blue); }
.entry-what { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; max-width: 64ch; }
.entry-meta { font-size: 0.8125rem; color: var(--ink-3); position: relative; z-index: 1; }
.entry-meta a { color: var(--ink-3); }
.sponsored { font-weight: 650; color: var(--ink-2); }
.entry-access { display: grid; justify-items: end; gap: 6px; text-align: right; position: relative; z-index: 1; }
.free-line { font-size: 0.8125rem; color: var(--ink-3); }
.go { color: var(--blue); font-weight: 650; font-size: 0.9375rem; text-decoration: none; gap: 6px; min-height: 36px; padding: 0 2px; }
.go:hover { text-decoration: underline; }
.go-lg { width: 100%; justify-content: center; min-height: 52px; background: var(--blue); color: #fff; border-radius: 999px; font-size: 1.0625rem; text-decoration: none; }
.go-lg:hover { background: var(--blue-2); color: #fff; text-decoration: none; }
.status { font-size: 0.875rem; color: var(--red); }
.status-shut-down .entry-name a { text-decoration: line-through; }

/* ---------- tool page ---------- */
.tool { padding-bottom: 48px; }
.tool-head { padding-top: 28px; padding-bottom: 28px; display: grid; gap: 14px; }
.tool-title { display: flex; align-items: center; gap: 18px; }
.tool-head .flags .flag { font-size: 0.875rem; padding: 6px 13px 6px 11px; }
.tool-for { color: var(--ink-2); }
.tool-for b { color: var(--ink); margin-right: 6px; }
.tool-sec { margin-bottom: 44px; }
.access-card { display: grid; gap: 14px; padding: 20px; background: var(--bg-2); border-radius: 24px; }
.access { display: grid; gap: 0; }
.access > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.access > div:first-child { border-top: 0; }
.access dt { color: var(--ink-3); font-size: 0.875rem; font-weight: 600; }
.access dd { font-size: 0.9375rem; overflow-wrap: break-word; }
.disclose { font-size: 0.875rem; color: var(--ink-3); text-align: center; }
.tool-next { display: grid; gap: 2px; padding: 14px 16px; background: var(--bg-2); border-radius: 22px; }
.tool-next .sub-h { font-family: var(--font); font-size: 0.9375rem; color: var(--ink-3); letter-spacing: 0; margin: 2px 0 6px; }
.tool-next a { padding: 8px 0; font-weight: 600; text-decoration: none; }
.tool-next a:hover { text-decoration: underline; }
.typed-block { font-size: 1.0625rem; background: var(--bg-2); border-radius: 18px; padding: 16px 18px; max-width: 70ch; }
.features { display: flex; flex-wrap: wrap; gap: 8px; }
.features li { padding: 8px 14px; border-radius: 999px; background: var(--bg-2); font-size: 0.9375rem; font-weight: 550; }
.plans, .side { background: #fff; border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; font-size: 0.9375rem; border: 0; }
.plans thead th, .side thead th { background: var(--bg-2); color: var(--ink-3); text-align: left; font-weight: 650; padding: 12px 14px; font-size: 0.8125rem; }
.side thead th a { color: var(--ink); font-weight: 700; font-size: 1rem; }
.plans th, .plans td, .side th, .side td { padding: 12px 14px; vertical-align: top; text-align: left; }
.plans tbody tr + tr, .side tbody tr + tr { border-top: 1px solid var(--line); }
.plans tbody th, .side tbody th { font-weight: 700; }
.tool .plans td:nth-child(4) { white-space: nowrap; }
.plans .num { text-align: right; white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; }
.plans tr.is-free { background: var(--green-bg); }
.plans td.is-empty { color: var(--ink-3); font-weight: 450; }
.side tbody th { width: 150px; color: var(--ink-3); }
.side td { min-width: 220px; }
.side thead th .tlogo { width: 28px; height: 28px; border-radius: 8px; margin-right: 8px; }

/* before you pay: a settings style list */
.buyer { background: #fff; border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.buyer-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 18px; padding: 11px 18px; align-items: baseline; }
.buyer-row + .buyer-row { border-top: 1px solid var(--line); }
.buyer-row dt { font-weight: 600; color: var(--ink-3); font-size: 0.9375rem; }
.buyer-v { font-weight: 600; font-size: 0.9375rem; }
.buyer-src { margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); }
.buyer-src summary { cursor: pointer; color: var(--blue); font-weight: 650; width: fit-content; list-style: none; }
.buyer-src summary::-webkit-details-marker { display: none; }
.buyer-src q { display: block; margin: 8px 0 6px; padding: 10px 14px; background: var(--bubble); border-radius: 18px; border-bottom-left-radius: 6px; width: fit-content; max-width: 62ch; }

/* getting started: a checklist */
.steps { counter-reset: st; display: grid; gap: 8px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; background: var(--bg-2); border-radius: 16px; font-size: 1rem; }
.steps li::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 750; font-size: 0.875rem; display: grid; place-items: center; }
.sub-h { font-size: 1.375rem; margin: 22px 0 10px; }
.tips { display: grid; gap: 8px; }
.tips li { padding: 10px 15px; background: var(--bubble); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; width: fit-content; max-width: 66ch; }

/* video tutorials */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.video { margin: 0; display: grid; gap: 8px; }
.yt, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; background: #1c1c1e center / cover no-repeat; padding: 0; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255, 255, 255, 0.94); border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 200ms var(--ease); }
.yt-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--blue); }
.yt:hover .yt-play { transform: scale(1.08); }
.video figcaption { display: grid; gap: 2px; font-size: 0.9375rem; line-height: 1.35; }
.video figcaption span { color: var(--ink-3); font-size: 0.875rem; }

/* questions people ask: the chat */
.faq { padding-bottom: 56px; }
.faq-list { display: grid; gap: 14px; max-width: 760px; }
.faq-item { display: grid; gap: 6px; }
.faq-item summary { list-style: none; cursor: pointer; justify-self: start; max-width: 86%; padding: 10px 16px; background: var(--bubble); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; font-weight: 600; transition: background-color 160ms var(--ease); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: #dedee2; }
.faq-item summary::after { content: none; }
.faq-item p { justify-self: end; max-width: 86%; padding: 10px 16px; background: var(--blue); color: #fff; border-radius: var(--r-bubble); border-bottom-right-radius: 6px; line-height: 1.45; }
.faq-item p a, .faq-item .faq-src { color: #fff; font-weight: 650; text-decoration: underline; }
.side .faq-src { color: var(--blue); }
.spec-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font-weight: 650; color: var(--ink-3); }
.src-list { margin: 10px 0 12px; display: grid; gap: 4px; }
.src-list a { font-size: 0.875rem; overflow-wrap: anywhere; }
.tool-peers { margin-top: 12px; }
.crosslinks { margin-top: 14px; font-weight: 600; }
.after-list { padding-bottom: 32px; display: grid; gap: 8px; }

/* compare */
.compare h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.compare .vs { font-family: var(--font); font-weight: 700; font-size: max(1rem, 0.4em); color: var(--ink-2); background: var(--bubble); padding: 4px 12px; border-radius: 999px; align-self: center; letter-spacing: 0; }
.diffs { display: grid; gap: 8px; max-width: 72ch; }
.diffs li { max-width: 68ch; }
.diffs li { padding: 10px 16px; background: var(--blue); color: #fff; border-radius: var(--r-bubble); border-bottom-right-radius: 6px; width: fit-content; }
.diffs li b { font-weight: 750; }
.compare-plans { margin-top: 40px; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.compare .note { max-width: 70ch; margin-top: 28px; padding-bottom: 32px; }

/* graveyard, index lists */
.grave { margin-bottom: 40px; }
.grave-list li { display: grid; grid-template-columns: minmax(160px, 1.1fr) minmax(0, 2.2fr) minmax(120px, 0.8fr) 7.5rem; gap: 8px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.g-name { font-weight: 700; color: var(--ink); }
.g-what { color: var(--ink-2); }
.g-hub { color: var(--ink-3); font-size: 0.9375rem; }
.index-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.index-list a { color: var(--ink); font-weight: 650; text-decoration: none; }
.index-list a:hover { color: var(--blue); }
.index-list span { color: var(--ink-3); }

/* docs and guides */
.doc { padding-top: 28px; padding-bottom: 64px; }
.prose { max-width: 72rem; }
.prose > :not(table) { max-width: 40rem; }
.compare > p, .compare .wrap > p, .tool-head p, .lede, .note { max-width: 40rem; }
.prose h1 { margin-bottom: 22px; }
.prose h2 { font-size: 1.75rem; margin: 36px 0 12px; }
.prose p, .prose ul, .prose ol { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose q { background: var(--bg-2); padding: 1px 6px; border-radius: 6px; }
.prose table { table-layout: auto; width: 100%; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); font-size: 0.9375rem; }
.prose table th { background: var(--bg-2); color: var(--ink-3); font-weight: 650; text-align: left; padding: 10px 12px; font-size: 0.8125rem; }
.prose table th { white-space: nowrap; }
.prose table td { overflow-wrap: break-word; }
.prose table td:first-child { white-space: nowrap; }
.prose table td { padding: 10px 12px; border-top: 1px solid var(--line); overflow-wrap: break-word; vertical-align: top; }
.notfound { padding-top: 48px; padding-bottom: 72px; display: grid; gap: 16px; }
.order-compact { background: var(--bg-2); border-radius: 28px; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; max-width: 720px; }
.of-field { display: grid; gap: 4px; padding: 4px 10px; }
.of-label { font-size: 0.8125rem; font-weight: 650; color: var(--ink-3); }
.order-compact input { border: 0; background: none; height: 40px; font-size: 1.0625rem; }
.order-compact input:focus { outline: none; }
.order-compact:focus-within { box-shadow: 0 0 0 4px var(--blue-tint); }
.side-search { background: var(--bg-2); border-radius: 22px; padding: 18px; }

/* footer */
.colophon { background: var(--bg-2); padding: 48px 0 28px; margin-top: 32px; }
.colophon a { color: var(--ink-2); text-decoration: none; }
.colophon a:hover { color: var(--blue); text-decoration: underline; }
.colophon .logo { color: var(--ink); }
.colo-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.colo-brand p { margin-top: 12px; max-width: 34ch; color: var(--ink-3); }
.colo-h { font-family: var(--font); font-size: 0.9375rem; color: var(--ink-3); letter-spacing: 0; margin-bottom: 10px; }
.colo-hubs { columns: 2; column-gap: 20px; }
.colophon li { padding: 4px 0; font-size: 0.9375rem; }
.colo-note { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-3); }

/* sheet + sticky bar on phones */
@media (max-width: 1023px) {
  .rail { background: #fff; border-radius: 24px 24px 0 0; padding: 0 18px; box-shadow: 0 -12px 40px rgba(17, 17, 20, 0.18); }
  .rail-head { background: #fff; padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
  .rail-close { border: 0; background: var(--bg-2); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
  .rail-foot { background: #fff; padding: 12px 0 16px; border-top: 1px solid var(--line); gap: 12px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
  .tool-grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
}
@media (min-width: 1024px) { .tbtn.only-narrow { display: none; } }
.sticky-cta { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.sticky-cta .go { background: var(--blue); color: #fff; min-height: 50px; padding: 0 18px; border-radius: 999px; justify-content: center; }
@media (max-width: 760px) {
  .mast-row { padding: 10px var(--gut); }
  .hero h1 { font-size: 2.6rem; }
  .thread { margin: 0 -8px; border-radius: 24px; padding: 14px 12px 18px; }
  .msg, .msg-out { max-width: 100%; }
  .entry { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .toolbar { align-items: flex-start; }
  .toolbar-actions { width: 100%; }
  .tselect { margin-left: auto; }
  .narrow .n { margin-left: -4px; }
  .entry-access { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; }
  .buyer-row, .spec-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .promise-cols { grid-template-columns: minmax(0, 1fr); }
  .colo-grid { grid-template-columns: minmax(0, 1fr); }
  .grave-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .chat-list { grid-template-columns: minmax(0, 1fr); }
  .tlogo.logo-lg { width: 64px; height: 64px; border-radius: 18px; }
  .faq-item summary, .faq-item p { max-width: 94%; }
  .side tbody th { width: 96px; }
  .order-compact { grid-template-columns: minmax(0, 1fr); }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose table { box-shadow: none; border-radius: 0; overflow: visible; font-size: 0.9375rem; }
  .prose thead th { white-space: normal; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tr { background: var(--bg-2); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
  .prose table td, .prose table td:first-child { border: 0; padding: 2px 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .prose table td:first-child { font-weight: 700; }
}

/* what it does: overview + features, each with a use case */
.explain-ov { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 40rem; margin-bottom: 18px; }
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.feat { display: grid; gap: 8px; align-content: start; padding: 18px; background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow); }
.feat h3 { font-family: var(--font); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.feat-body > p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.feat .use { display: grid; gap: 2px; padding: 10px 14px; background: var(--bubble); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; color: var(--ink); }
.use-label { font-size: 0.75rem; font-weight: 700; color: var(--ink-3); }
.feat-src { font-size: 0.8125rem; color: var(--ink-3); text-decoration: none; overflow-wrap: anywhere; }
.feat-src:hover { color: var(--blue); text-decoration: underline; }
.feat-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--blue-tint); color: var(--blue-2); font-weight: 650; font-size: 0.9375rem; }
.feat-more > summary::-webkit-details-marker { display: none; }
.feat-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease); }
.feat-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.feat-more > summary:hover { background: #d9e8fc; }
.feat-more .fm-close, .feat-more[open] .fm-open { display: none; }
.feat-more[open] .fm-close { display: inline; }
.feat-more[open] > summary { margin-bottom: 16px; }
.feat { padding: 0; gap: 0; overflow: hidden; }
.feat-body { display: grid; gap: 8px; align-content: start; padding: 18px; }
.feat-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: var(--bg-2); border-bottom: 1px solid var(--line); }

/* long unbroken strings (API URLs, source links, tool names) never widen a column */
.tool-grid > *, .tool-main, .tool-aside, .results-col, .entry-text, .feat, .preview { min-width: 0; }
.steps li, .tips li, .src-list a, .faq-item p, .faq-item summary, .buyer-v, .buyer-src q, .spec-list dd, .feat-src, .typed-block, .access dd, .lede, .tool-for, .video figcaption { overflow-wrap: anywhere; }
.tool-title { min-width: 0; }
.tool-title h1 { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 760px) {
  .tool-head h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
  .tool-title { gap: 12px; }
}
.tool-main a, .tool-aside a, .prose a { overflow-wrap: anywhere; }
/* features with no product screenshot get a quiet icon panel the same shape, so the grid stays even */
.feat-ico { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.feat-ico span { width: 64px; height: 64px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.feat-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* visit buttons: a long label wraps inside the pill, never past its edges */
.go-lg, .sticky-cta .go { height: auto; min-height: 52px; padding: 12px 22px; text-align: center; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.go-lg .i, .sticky-cta .go .i { flex: none; }

/* community upvotes: an action, so it speaks in the action blue once pressed */
.upvote { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px 0 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 750; font-size: 1rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
.upvote svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.upvote:hover { border-color: var(--blue); color: var(--blue); }
.upvote[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.upvote[aria-pressed="true"] svg { fill: currentColor; }
.uv-sm.is-empty .uv-n:empty { display: none; }
.upvote.is-empty { padding: 0 13px; }
.upvote:not(.uv-sm) .uv-n:empty::after { content: "Upvote"; font-weight: 650; }
.upvote:not(.uv-sm).is-empty { padding: 0 16px 0 13px; }
.uv-pop { animation: uvpop 380ms var(--ease); }
@keyframes uvpop { 40% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .uv-pop { animation: none; } }
.uv-sm { min-height: 36px; min-width: 40px; padding: 0 12px 0 10px; font-size: 0.875rem; border-width: 1px; }
.uv-sm svg { width: 15px; height: 15px; }
.uv-sm.is-empty { padding: 0 11px; }
.ea-top { display: flex; align-items: center; gap: 8px; }
.tool-vote { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tool-vote p { max-width: 46ch; }
.uv-mini { margin-left: 8px; color: var(--ink-3); font-weight: 650; font-variant-numeric: tabular-nums; }
.uv-mini::before { content: "▲ "; font-size: 0.7em; vertical-align: 1px; }