/* ═══════════════════════════════════════════════════
   TOP10AI — Page-specific styles
   (shared across category / review / compare / finder
   / playground / about / methodology pages)
   ═══════════════════════════════════════════════════ */

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  position: absolute; left: 12px; top: 12px;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; z-index: 100;
}

/* ─────────────────── PAGE HERO ─────────────────── */
.page-hero {
  padding: clamp(48px,6vw,80px) 0 clamp(32px,4vw,56px);
  border-bottom: 1px solid var(--ink);
}
.ph-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.ph-inner .crumbs {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0.75;
}
.ph-inner .crumbs a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.page-hero h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(56px,8vw,120px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}
.page-hero h1 em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
}
.ph-lead {
  font-family: var(--ff-display);
  font-size: clamp(17px,1.8vw,21px);
  line-height: 1.45;
  max-width: 720px;
  opacity: 0.88;
  margin: 0 0 24px;
}
.ph-meta {
  display: flex; gap: 24px;
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ─────────────────── CATEGORY / RANK LIST ─────────────────── */
.rank-section {
  padding: clamp(48px,6vw,80px) 0;
}
.rank-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid; gap: 16px;
}
.rank-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border: 1px solid var(--ink);
  background: var(--paper);
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.rank-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--acc, var(--coral));
}
.rank-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.rank-num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.rank-body h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rank-badge {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--citrus);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 6px;
}
.rank-body p {
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 8px;
  max-width: 60ch;
}
.rank-meta {
  display: flex; gap: 16px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.rank-meta strong {
  color: var(--ink);
  font-weight: 600;
}
.rank-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.rank-visit {
  background: var(--ink);
  color: var(--citrus);
  padding: 12px 18px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.15s;
}
.rank-visit:hover { background: var(--coral); }
.rank-review {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
}
.rank-short {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
}
.rank-short:hover { background: var(--mint); color: var(--ink); }
@media (max-width: 720px) {
  .rank-card { grid-template-columns: 48px 1fr; padding: 16px; gap: 16px; }
  .rank-num { font-size: 40px; }
  .rank-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px dashed rgba(10,10,10,0.15);
    padding-top: 12px;
    margin-top: 4px;
    align-items: center;
  }
}

/* ─────────────────── FINAL CTA BAND (shared) ─────────────────── */
.final-cta-band {
  padding: clamp(56px,7vw,96px) var(--pad);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.fcb-inner {
  max-width: 800px;
  margin: 0 auto;
}
.fcb-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--citrus);
  display: inline-block;
  padding: 6px 14px;
  background: rgba(232,255,90,0.1);
  border-radius: 999px;
  margin-bottom: 20px;
}
.final-cta-band h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(40px,6vw,80px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--paper);
}
.final-cta-band h2 em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--citrus);
}
.fcb-buttons {
  display: inline-flex; gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─────────────────── COMPARE TABLE ─────────────────── */
.cmp-section { padding: clamp(32px,4vw,56px) 0 64px; }
.cmp-bar {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 var(--pad);
}
.cmp-filter {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.cmp-filter:hover { background: var(--paper-2); }
.cmp-filter.on { background: var(--ink); color: var(--citrus); }
.cmp-sort {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmp-sort select {
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  margin-left: 8px;
  text-transform: uppercase;
}
.cmp-table-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
  overflow-x: auto;
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  min-width: 800px;
  background: var(--paper);
}
.cmp-table th, .cmp-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  font-family: var(--ff-display);
  font-size: 14px;
  vertical-align: middle;
}
.cmp-table th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table tr:hover td { background: var(--paper-2); }
.cmp-brand { display: flex; gap: 12px; align-items: center; }
.cmp-brand-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--brand-color, var(--coral));
  color: var(--paper);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid var(--ink);
  flex-shrink: 0;
}
.cmp-cat {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.cmp-score {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
}
.cmp-bar-viz {
  width: 60px; height: 4px;
  background: var(--paper-2);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.cmp-bar-viz > div {
  position: absolute;
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
}
.cmp-add {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cmp-add.on { background: var(--mint); }
.cmp-visit {
  background: var(--ink);
  color: var(--citrus);
  padding: 8px 12px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.cmp-visit:hover { background: var(--coral); }

/* ─────────────────── QUIZ (finder page) ─────────────────── */
.quiz-section {
  padding: clamp(48px,7vw,96px) var(--pad);
  background: var(--ink);
  min-height: 70vh;
  display: grid;
  place-items: center;
}
.quiz-inner {
  max-width: 760px;
  width: 100%;
  background: rgba(245,241,232,0.05);
  border: 1px solid rgba(245,241,232,0.15);
  border-radius: 18px;
  padding: clamp(24px,4vw,40px);
  color: var(--paper);
}
.quiz-progress {
  display: flex; gap: 8px;
  margin-bottom: 32px;
}
.qp-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(245,241,232,0.15);
}
.qp-dot.done { background: var(--citrus); }
.qp-dot.active { background: var(--citrus); outline: 3px solid rgba(232,255,90,0.25); }
.quiz-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--citrus);
}
.quiz-q {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px,4vw,44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 28px;
}
.quiz-opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 580px) { .quiz-opts { grid-template-columns: 1fr; } }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(245,241,232,0.05);
  border: 1px solid rgba(245,241,232,0.2);
  color: var(--paper);
  font-family: var(--ff-display);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 10px;
}
.quiz-opt:hover {
  background: var(--citrus);
  color: var(--ink);
  border-color: var(--citrus);
  transform: translate(-2px,-2px);
}
.quiz-opt-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
}
.quiz-nav-btn {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper);
  opacity: 0.6;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  text-transform: uppercase;
}
.quiz-nav-btn:hover { opacity: 1; }
.quiz-nav-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.quiz-result {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 580px) { .quiz-result { grid-template-columns: 1fr; text-align: center; } }
.qr-hero {
  aspect-ratio: 1;
  background: var(--coral);
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245,241,232,0.2);
}
.qr-mark {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 96px;
  color: var(--paper);
  line-height: 1;
}
.qr-body h3 {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--citrus);
  margin: 0 0 6px;
  text-transform: uppercase;
  font-weight: 600;
}
.qr-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(36px,5vw,56px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}
.qr-name em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--citrus);
}
.qr-desc {
  font-size: 15px;
  opacity: 0.85;
  margin: 0 0 20px;
  line-height: 1.45;
}
.qr-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 580px) { .qr-ctas { justify-content: center; } }
.qr-restart {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper);
  opacity: 0.6;
  background: none;
  border: 1px solid rgba(245,241,232,0.25);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
}
.qr-restart:hover { opacity: 1; }

/* ─────────────────── PLAYGROUND ─────────────────── */
.pg-section { padding: clamp(32px,4vw,48px) 0 80px; }
.pg-section > div {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.pg-tabs {
  display: flex; gap: 0;
  margin-bottom: 24px;
  overflow-x: auto;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.pg-tab {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-right: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s;
}
.pg-tab:last-child { border-right: none; }
.pg-tab.on { background: var(--ink); color: var(--citrus); }
.pg-stage {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  min-height: 480px;
}
@media (max-width: 720px) { .pg-stage { grid-template-columns: 1fr; } }
.pg-left {
  padding: 32px;
  border-right: 1px solid var(--ink);
  background: var(--paper-2);
}
@media (max-width: 720px) { .pg-left { border-right: none; border-bottom: 1px solid var(--ink); } }
.pg-chrome {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(10,10,10,0.15);
  margin-bottom: 20px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--muted);
}
.pg-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink);
  opacity: 0.15;
}
.pg-dot:nth-child(2) { opacity: 0.25; }
.pg-dot:nth-child(3) { opacity: 0.35; margin-right: 8px; }
.pg-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.pg-desc {
  font-family: var(--ff-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 24px;
}
.pg-input-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.pg-input {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--ff-display);
  font-size: 15px;
  margin-bottom: 20px;
  min-height: 60px;
}
.pg-run {
  width: 100%;
  background: var(--ink);
  color: var(--citrus);
  padding: 16px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.pg-run:hover { background: var(--coral); color: var(--paper); }
.pg-right {
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.pg-output {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-radius: 12px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.pg-visual {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.pg-placeholder {
  color: var(--paper);
  opacity: 0.5;
  font-family: var(--ff-display);
  font-size: 15px;
}
.pg-foot {
  grid-column: 1 / -1;
  padding: 16px 32px;
  border-top: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper);
  flex-wrap: wrap;
  gap: 12px;
}
.pg-credit {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.pg-try {
  background: var(--citrus);
  color: var(--ink);
  padding: 10px 16px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
}
.pg-try:hover { background: var(--ink); color: var(--citrus); }

/* ─────────────────── ABOUT BODY ─────────────────── */
.about-body {
  padding: clamp(56px,7vw,96px) var(--pad);
  background: var(--paper);
}
.about-inner {
  max-width: 840px;
  margin: 0 auto;
  font-family: var(--ff-display);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
.about-lede {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(26px,3vw,38px);
  line-height: 1.25;
  margin: 0 0 40px;
  color: var(--ink);
}
.about-inner h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
}
.about-inner a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ─────────────────── METHODOLOGY ─────────────────── */
.method-body {
  padding: clamp(48px,6vw,80px) 0;
}
.method-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  gap: clamp(32px,4vw,56px);
}
.method-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px,4vw,56px);
  align-items: center;
}
@media (max-width: 720px) {
  .method-step { grid-template-columns: 1fr; }
}
.ms-num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(80px,10vw,140px);
  line-height: 0.85;
  padding: 24px 32px;
  letter-spacing: -0.03em;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  min-width: 140px;
}
.ms-body h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px,3.2vw,42px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.05;
}
.ms-body p {
  font-family: var(--ff-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ─────────────────── REVIEW PAGE ─────────────────── */
.review-hero { padding: clamp(32px,5vw,64px) 0 clamp(48px,6vw,80px); }
.rh-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.review-hero .crumbs {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.review-hero .crumbs a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.rh-badges {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rh-rank {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
}
.rh-pick {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  background: var(--citrus);
  color: var(--ink);
  border-radius: 999px;
}
.review-hero h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(64px,10vw,160px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}
.review-hero h1 em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--citrus);
}
.rh-tag {
  font-family: var(--ff-display);
  font-size: clamp(18px,2vw,24px);
  line-height: 1.35;
  opacity: 0.9;
  max-width: 640px;
  margin: 0 0 40px;
}
.rh-score-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px,5vw,64px);
  align-items: center;
  margin-bottom: 40px;
  padding: 32px 0;
  border-top: 1px solid rgba(255,253,246,0.25);
  border-bottom: 1px solid rgba(255,253,246,0.25);
}
@media (max-width: 580px) {
  .rh-score-block { grid-template-columns: 1fr; }
}
.rh-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rh-score-num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(80px,10vw,140px);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.rh-score-denom {
  font-family: var(--ff-mono);
  font-size: 20px;
  opacity: 0.65;
}
.rh-bars { display: grid; gap: 12px; min-width: 0; }
.rh-bar {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  gap: 16px;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.rh-bar > div {
  height: 6px;
  background: rgba(255,253,246,0.2);
  border-radius: 3px;
  overflow: hidden;
}
.rh-bar > div > div {
  height: 100%;
  background: var(--citrus);
  border-radius: 3px;
}
.rh-ctas {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.rh-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: 12px;
  opacity: 0.75;
}

.review-body {
  padding: clamp(48px,6vw,80px) 0;
  background: var(--paper);
}
.rb-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px,5vw,72px);
  align-items: start;
}
@media (max-width: 900px) { .rb-grid { grid-template-columns: 1fr; } }
.rb-toc {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}
@media (max-width: 900px) { .rb-toc { position: static; } }
.rb-toc-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.rb-toc a {
  font-family: var(--ff-display);
  font-size: 14px;
  padding: 6px 10px;
  color: var(--ink);
  border-left: 2px solid transparent;
  transition: background 0.15s;
}
.rb-toc a:hover { background: var(--paper); }
.rb-toc a.on {
  border-left-color: var(--coral);
  font-weight: 600;
  background: var(--paper);
}
.rb-toc-cta {
  margin-top: 12px !important;
  padding: 12px !important;
  background: var(--ink) !important;
  color: var(--citrus) !important;
  font-weight: 600 !important;
  text-align: center;
  border-left: none !important;
}

.rb-main { min-width: 0; }
.rb-section {
  padding: clamp(40px,5vw,64px) 0;
  border-bottom: 1px solid var(--ink);
}
.rb-section:first-child { padding-top: 0; }
.rb-section:last-child { border-bottom: none; padding-bottom: 0; }
.rb-section h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
}
.rb-section p {
  font-family: var(--ff-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 65ch;
}
.rb-lead {
  font-size: 21px !important;
  font-family: var(--ff-serif) !important;
  font-style: italic;
  line-height: 1.4 !important;
}
.rb-lead strong {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 700;
  background: var(--citrus);
  padding: 0 4px;
}
.rb-verdict-box {
  display: grid;
  gap: 12px;
  padding: 28px;
  background: var(--ink);
  color: var(--paper);
  margin-top: 32px;
}
.rb-verdict-box > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  font-family: var(--ff-display);
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245,241,232,0.15);
}
@media (max-width: 580px) {
  .rb-verdict-box > div { grid-template-columns: 1fr; gap: 4px; }
}
.rb-verdict-box > div:last-child { border-bottom: none; }
.rb-vb-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--citrus);
}

.rb-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .rb-pc { grid-template-columns: 1fr; } }
.rb-pc-col {
  padding: 28px;
  border: 1px solid var(--ink);
}
.rb-pc-pros { background: var(--mint); }
.rb-pc-cons { background: var(--paper-2); }
.rb-pc-head {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--ink);
}
.rb-pc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.rb-pc li {
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.45;
  padding-left: 22px;
  position: relative;
}
.rb-pc-pros li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--ink); }
.rb-pc-cons li::before { content: '—'; position: absolute; left: 0; font-weight: 700; color: var(--coral); }

.rb-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  border: 1px solid var(--ink);
  margin-top: 16px;
}
.rb-feat {
  padding: 28px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.rb-feat-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--coral);
}
.rb-feat h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 8px 0 10px;
}
.rb-feat p {
  font-family: var(--ff-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.rb-handson {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 720px) { .rb-handson { grid-template-columns: 1fr; } }
.rb-ho-timeline {
  background: var(--paper-2);
  padding: 28px;
  border: 1px solid var(--ink);
  display: grid;
  gap: 16px;
}
.rb-ho-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(10,10,10,0.2);
}
.rb-ho-step:last-child { border-bottom: none; padding-bottom: 0; }
.rb-ho-time {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
}
.rb-ho-step p {
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}
.rb-ho-verdict {
  background: var(--citrus);
  padding: 32px 28px;
  border: 1px solid var(--ink);
  align-self: start;
}
.rb-ho-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.rb-ho-verdict h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
}
.rb-ho-verdict p {
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.rb-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  margin-top: 16px;
  border: 1px solid var(--ink);
}
.rb-plan {
  padding: 28px 24px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.rb-plan:last-child { border-right: none; }
.rb-plan-hot { background: var(--ink); color: var(--paper); }
.rb-plan-hot::before {
  content: '★ BEST VALUE';
  position: absolute;
  top: -1px; right: -1px;
  background: var(--citrus);
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 1px solid var(--ink);
}
.rb-plan-tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.rb-plan-price {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 10px 0 18px;
}
.rb-plan-price span {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 13px;
  opacity: 0.6;
  letter-spacing: 0;
}
.rb-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.rb-plan li {
  font-family: var(--ff-display);
  font-size: 14px;
  line-height: 1.4;
  padding-left: 18px;
  position: relative;
}
.rb-plan li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
}
.rb-plan-hot li::before { color: var(--citrus); }
.rb-plan-note {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 0 !important;
  padding-top: 14px;
  border-top: 1px dashed currentColor;
}

.rb-vs-table {
  border: 1px solid var(--ink);
  margin-top: 16px;
  overflow-x: auto;
}
.rb-vs-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 0.6fr 0.8fr;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--ff-display);
  font-size: 14px;
  align-items: center;
  min-width: 600px;
}
.rb-vs-row:last-child { border-bottom: none; }
.rb-vs-head {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rb-vs-row a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.rb-faq {
  border-bottom: 1px solid var(--ink);
  padding: 18px 0;
}
.rb-faq summary {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 19px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.rb-faq summary::-webkit-details-marker { display: none; }
.rb-faq summary::after {
  content: '+';
  font-family: var(--ff-serif);
  font-size: 28px;
  line-height: 0.6;
  color: var(--coral);
}
.rb-faq[open] summary::after { content: '−'; }
.rb-faq p {
  margin-top: 12px;
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.rb-final-cta {
  margin-top: 48px;
  padding: clamp(32px,4vw,56px);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  border-bottom: none !important;
}
@media (max-width: 720px) { .rb-final-cta { grid-template-columns: 1fr; } }
.rb-fc-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--citrus);
}
.rb-final-cta h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(32px,4vw,52px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 8px 0 12px;
  color: var(--paper);
}
.rb-final-cta h2 em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--citrus);
}
.rb-final-cta p {
  font-family: var(--ff-display);
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════
   REDESIGN EXTENSIONS — templates not in the original bundle
   ═══════════════════════════════════════════════════════ */

/* Generic page (about, privacy, contact, etc.) */
.pg-hero { background: var(--paper-2); padding: clamp(80px, 12vw, 160px) var(--pad) clamp(48px, 6vw, 80px); border-bottom: var(--border); }
.pg-hero-inner { max-width: 960px; margin: 0 auto; }
.pg-hero .crumbs { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 20px; }
.pg-hero .crumbs a { color: inherit; }
.pg-hero h1 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(42px, 8vw, 96px); letter-spacing: -0.02em; line-height: 0.95; margin: 0; }
.pg-hero h1 em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; }
.pg-hero .ph-lead { font-family: var(--ff-serif); font-style: italic; font-size: clamp(22px, 3vw, 32px); margin-top: 24px; color: var(--ink); max-width: 720px; }
.pg-content { padding: clamp(48px, 8vw, 96px) var(--pad); }
.pg-content-inner { max-width: 780px; margin: 0 auto; font-family: var(--ff-display); font-size: 18px; line-height: 1.7; color: var(--ink); }
.pg-content-inner h2 { font-family: var(--ff-display); font-weight: 700; font-size: 32px; letter-spacing: -0.015em; margin: 48px 0 16px; }
.pg-content-inner h3 { font-family: var(--ff-display); font-weight: 600; font-size: 22px; margin: 36px 0 12px; }
.pg-content-inner p { margin: 0 0 18px; }
.pg-content-inner a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.pg-content-inner ul, .pg-content-inner ol { margin: 0 0 20px; padding-left: 24px; }
.pg-content-inner li { margin-bottom: 8px; }
.pg-content-inner blockquote { border-left: 4px solid var(--cobalt); padding: 8px 0 8px 20px; font-family: var(--ff-serif); font-size: 24px; font-style: italic; margin: 32px 0; color: var(--ink); }
.pg-content-inner img { max-width: 100%; height: auto; border-radius: var(--rad-sm); margin: 24px 0; }

/* Blog archive */
.bl-page-hero { background: var(--paper); padding: clamp(80px, 12vw, 160px) var(--pad) clamp(40px, 5vw, 64px); border-bottom: var(--border); }
.bl-hero-inner { max-width: 1200px; margin: 0 auto; }
.bl-page-hero h1 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(48px, 10vw, 120px); line-height: 0.92; letter-spacing: -0.02em; margin: 0; }
.bl-page-hero h1 em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; color: var(--cobalt); }
.bl-hero-lead { font-family: var(--ff-serif); font-style: italic; font-size: clamp(22px, 3vw, 30px); margin-top: 24px; max-width: 720px; }
.bl-featured { padding: clamp(32px, 5vw, 56px) var(--pad) 0; }
.bl-hero-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; max-width: 1200px; margin: 0 auto; border: var(--border); border-radius: var(--rad); overflow: hidden; text-decoration: none; color: inherit; background: var(--paper); transition: transform 150ms ease, box-shadow 150ms ease; }
.bl-hero-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); }
.bl-hero-img { background-size: cover; background-position: center; min-height: 360px; }
.bl-hero-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.bl-hero-eyebrow { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--cobalt); margin-bottom: 12px; }
.bl-hero-body h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 16px; }
.bl-hero-body p { font-family: var(--ff-serif); font-size: 20px; font-style: italic; color: var(--muted); margin: 0 0 18px; }
.bl-hero-meta { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.bl-grid-section { padding: clamp(40px, 6vw, 80px) var(--pad); }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1400px; margin: 0 auto; }
.bl-card { display: flex; flex-direction: column; border: var(--border); border-radius: var(--rad); overflow: hidden; text-decoration: none; color: inherit; background: var(--paper); transition: transform 150ms ease, box-shadow 150ms ease; }
.bl-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard-sm); }
.bl-card-img { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: var(--border); }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card-placeholder { width: 100%; height: 100%; }
.bl-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--acc, var(--cobalt)); }
.bl-card-date { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.bl-card-body h3 { font-family: var(--ff-display); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.bl-card-body p { font-family: var(--ff-serif); font-style: italic; font-size: 15px; color: var(--muted); margin: 0; line-height: 1.45; }
.bl-card-read { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--acc, var(--cobalt)); margin-top: 6px; font-weight: 600; }
@media (max-width: 720px) { .bl-hero-card { grid-template-columns: 1fr; } .bl-hero-img { min-height: 220px; } }

/* Blog single article */
.blog-article { background: var(--paper); }
.ba-hero { background: var(--paper); padding: clamp(64px, 10vw, 128px) var(--pad) clamp(32px, 4vw, 56px); border-bottom: var(--border); }
.ba-hero-inner { max-width: 820px; margin: 0 auto; }
.ba-hero .crumbs { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 24px; }
.ba-hero .crumbs a { color: inherit; }
.ba-hero h1 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.ba-dek { font-family: var(--ff-serif); font-style: italic; font-size: clamp(20px, 2.6vw, 26px); color: var(--muted); margin-top: 20px; line-height: 1.4; }
.ba-meta { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin-top: 24px; display: flex; gap: 12px; }
.ba-cover { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.ba-cover img { width: 100%; height: auto; border: var(--border); border-radius: var(--rad); display: block; margin-top: -20px; }
.ba-grid { max-width: 1080px; margin: 48px auto 0; padding: 0 var(--pad); display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.ba-grid:has(.ba-body:only-child) { grid-template-columns: 1fr; }
.ba-body:only-child { max-width: 760px; margin: 0 auto; }
.ba-toc { position: sticky; top: 100px; align-self: start; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ba-toc-title { display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--cobalt); margin-bottom: 14px; }
.ba-toc a { display: block; font-family: var(--ff-display); font-size: 14px; padding: 6px 0; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; transition: all 120ms ease; line-height: 1.35; }
.ba-toc a:hover { color: var(--ink); border-left-color: var(--cobalt); }
.ba-body { font-family: var(--ff-display); font-size: 19px; line-height: 1.75; color: var(--ink); max-width: 760px; }
.ba-body h2 { font-family: var(--ff-display); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; margin: 56px 0 16px; scroll-margin-top: 100px; }
.ba-body h3 { font-family: var(--ff-display); font-weight: 600; font-size: 24px; line-height: 1.2; margin: 40px 0 12px; }
.ba-body p { margin: 0 0 22px; }
.ba-body a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.ba-body ul, .ba-body ol { margin: 0 0 22px; padding-left: 28px; }
.ba-body li { margin-bottom: 10px; }
.ba-body img { max-width: 100%; height: auto; border-radius: var(--rad-sm); margin: 32px 0; }
.ba-body blockquote { border-left: 4px solid var(--cobalt); padding: 12px 0 12px 24px; font-family: var(--ff-serif); font-size: 26px; font-style: italic; color: var(--ink); margin: 40px 0; line-height: 1.4; }
.ba-body code { font-family: var(--ff-mono); font-size: 15px; background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }
.ba-body pre { background: var(--ink); color: var(--paper); font-family: var(--ff-mono); font-size: 14px; padding: 20px; border-radius: var(--rad-sm); overflow-x: auto; margin: 32px 0; }
.ba-cta { max-width: 1080px; margin: 80px auto 48px; padding: clamp(40px, 6vw, 72px) var(--pad); background: var(--ink); color: var(--paper); border-radius: var(--rad); text-align: center; }
.ba-cta h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); margin: 0 0 24px; letter-spacing: -0.015em; }
.ba-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ba-cta .btn-ghost { border-color: var(--paper); color: var(--paper); }
.ba-related { max-width: 1200px; margin: 64px auto; padding: 0 var(--pad); }
.ba-related h3 { font-family: var(--ff-display); font-weight: 700; font-size: 32px; letter-spacing: -0.015em; margin: 0 0 32px; }
.ba-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.bac-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; border: var(--border); border-radius: var(--rad); overflow: hidden; background: var(--paper); transition: transform 150ms ease, box-shadow 150ms ease; }
.bac-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard-sm); }
.bac-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-bottom: var(--border); }
.bac-placeholder { background: var(--paper-2); }
.bac-card h4 { font-family: var(--ff-display); font-weight: 600; font-size: 16px; line-height: 1.3; margin: 0 20px; letter-spacing: -0.01em; }
.bac-date { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin: 0 20px 18px; letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .ba-grid { grid-template-columns: 1fr; gap: 32px; }
  .ba-toc { position: static; }
}

/* Review extensions (beyond bundle's capcut template) */
.rb-wp-body { font-family: var(--ff-display); font-size: 17px; line-height: 1.7; color: var(--ink); }
.rb-wp-body p { margin: 0 0 18px; }
.rb-wp-body a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.rb-wp-body h2, .rb-wp-body h3 { font-family: var(--ff-display); font-weight: 700; margin: 32px 0 14px; letter-spacing: -0.015em; }
.rb-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.rb-pros, .rb-cons { padding: 24px; border: var(--border); border-radius: var(--rad-sm); }
.rb-pros { background: var(--mint); }
.rb-cons { background: var(--paper-2); }
.rb-pros h4, .rb-cons h4 { font-family: var(--ff-display); font-weight: 700; font-size: 16px; margin: 0 0 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.rb-pros ul, .rb-cons ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.rb-pros li, .rb-cons li { margin-bottom: 8px; }
.rb-feat-list { margin: 20px 0; padding-left: 24px; font-size: 16px; line-height: 1.7; }
.rb-feat-list li { margin-bottom: 10px; }
.rb-placeholder { color: var(--muted); font-style: italic; }
.rb-pricing-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 28px; border: var(--border); border-radius: var(--rad); background: var(--paper-2); border-top: 6px solid var(--acc, var(--cobalt)); margin: 20px 0; }
.rbp-eyebrow { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.rbp-big { font-family: var(--ff-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; }
.rb-alt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.rb-alt-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: var(--border); border-radius: var(--rad-sm); text-decoration: none; color: inherit; background: var(--paper); border-top: 5px solid var(--acc, var(--cobalt)); transition: transform 150ms ease; }
.rb-alt-card:hover { transform: translate(-2px, -2px); }
.rba-head { display: flex; justify-content: space-between; align-items: center; }
.rba-initial { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--acc, var(--cobalt)); color: var(--ink); font-family: var(--ff-display); font-weight: 700; }
.rba-score { font-family: var(--ff-mono); font-weight: 700; font-size: 18px; color: var(--ink); }
.rb-alt-card strong { font-family: var(--ff-display); font-size: 18px; letter-spacing: -0.01em; }
.rb-alt-card p { font-family: var(--ff-serif); font-style: italic; font-size: 14px; color: var(--muted); margin: 0; line-height: 1.4; }
.rb-faq { border: var(--border); border-radius: var(--rad-sm); padding: 16px 20px; margin: 10px 0; background: var(--paper); }
.rb-faq summary { font-family: var(--ff-display); font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.rb-faq summary::-webkit-details-marker { display: none; }
.rb-faq[open] summary { margin-bottom: 10px; }
.rb-faq p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
@media (max-width: 700px) { .rb-pc { grid-template-columns: 1fr; } .rb-pricing-box { grid-template-columns: 1fr; text-align: center; } }

/* Calculator / prompt gen fallback UI */
.calc-ui, .pg-gen { display: flex; flex-direction: column; gap: 20px; padding: 32px; border: var(--border); border-radius: var(--rad); background: var(--paper-2); }
.calc-row { display: flex; gap: 16px; align-items: center; }
.calc-row label { font-family: var(--ff-display); font-weight: 600; font-size: 14px; min-width: 100px; }
.calc-row select, .pg-opts select, .pg-gen textarea { font-family: var(--ff-display); font-size: 16px; padding: 10px 14px; border: var(--border); border-radius: var(--rad-sm); background: var(--paper); }
.pg-gen label { font-family: var(--ff-display); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; }
.pg-gen textarea { resize: vertical; padding: 14px; font-size: 17px; line-height: 1.4; width: 100%; box-sizing: border-box; }
.pg-opts { display: flex; gap: 16px; flex-wrap: wrap; }
.pg-opts label { display: flex; align-items: center; gap: 10px; text-transform: none; font-weight: 500; font-size: 13px; }
.pg-out { background: var(--ink); color: var(--paper); padding: 24px; border-radius: var(--rad-sm); font-family: var(--ff-mono); font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 0; }
.calc-table { width: 100%; border-collapse: collapse; font-family: var(--ff-display); font-size: 15px; }
.calc-table th, .calc-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.calc-table th { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; background: var(--paper); position: sticky; top: 0; }
.calc-table a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════
   FREE TOOLS HUB — cards linking to the real WP utilities
   ═══════════════════════════════════════════════════════ */
.ft-section { padding: clamp(40px, 6vw, 80px) var(--pad); background: var(--paper); }
.ft-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.ft-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: var(--border);
  border-radius: var(--rad);
  text-decoration: none;
  min-height: 260px;
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ft-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hard);
}
.ft-card-hero {
  grid-column: span 6;
  min-height: 220px;
  padding: clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.ft-card-hero .ft-card-title { font-size: clamp(32px, 4vw, 52px); max-width: 720px; }
.ft-card-hero .ft-card-tag { font-size: clamp(18px, 2vw, 24px); max-width: 720px; }

.ft-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ft-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-family: var(--ff-display);
  font-weight: 700;
}
.ft-card[style*="#E8FF5A"] .ft-card-icon,
.ft-card[style*="#B8F5D6"] .ft-card-icon {
  background: rgba(0, 0, 0, 0.1);
}
.ft-card-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  opacity: 0.9;
}
.ft-card-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.ft-card-tag {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
  flex: 1;
}
.ft-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid currentColor;
  padding-top: 16px;
  opacity: 0.9;
}
.ft-card-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ft-card-cta {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 960px) {
  .ft-grid { grid-template-columns: repeat(2, 1fr); }
  .ft-card { grid-column: span 1; }
  .ft-card-hero { grid-column: span 2; grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .ft-grid { grid-template-columns: 1fr; }
  .ft-card, .ft-card-hero { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — hamburger header, drawer, bottom nav, responsive tweaks
   Mobile breakpoint: <860px (below this the desktop nav collapses).
   Bottom nav shows <720px only, so tablets get the full top nav.
   ═══════════════════════════════════════════════════════════════════ */

/* Hamburger button (hidden on desktop) */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border: var(--border);
  background: var(--paper);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.hamburger:hover { background: var(--paper-2); }
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* Drawer scrim (dims page behind drawer) */
.t10-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 1200;
}
.t10-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Drawer panel — slides from right */
.t10-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--paper);
  border-left: var(--border);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.25, 0.8, 0.3, 1);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(10, 10, 10, 0.12);
}
.t10-drawer.is-open { transform: translateX(0); }
.t10-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: var(--border);
  flex-shrink: 0;
}
.t10-drawer-close {
  width: 40px;
  height: 40px;
  border: var(--border);
  background: var(--paper);
  border-radius: 50%;
  font-size: 24px;
  line-height: 0;
  cursor: pointer;
  color: var(--ink);
}
.t10-drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.t10-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.t10-drawer-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.t10-drawer-section a {
  font-family: var(--ff-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 120ms ease, padding-left 120ms ease;
}
.t10-drawer-section a:hover,
.t10-drawer-section a:focus { color: var(--cobalt); padding-left: 4px; }
.t10-drawer-section a[data-accent]::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acc, currentColor);
  flex-shrink: 0;
}
.t10-drawer-section a[data-accent="#FF5A3C"]::before { background: #FF5A3C; }
.t10-drawer-section a[data-accent="#2F4CFF"]::before { background: #2F4CFF; }
.t10-drawer-section a[data-accent="#E8FF5A"]::before { background: #E8FF5A; }
.t10-drawer-section a[data-accent="#B8F5D6"]::before { background: #B8F5D6; }
.t10-drawer-cta {
  display: block;
  margin-top: auto;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
body.t10-drawer-locked { overflow: hidden; }

/* Bottom nav — persistent thumb-zone bar on mobile */
.t10-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  z-index: 1100;
  padding: 6px env(safe-area-inset-right) env(safe-area-inset-bottom, 6px) env(safe-area-inset-left);
  box-shadow: 0 -2px 12px rgba(10, 10, 10, 0.06);
}
.t10-bottom-nav {
  display: none;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.t10-bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 2px;
  border-radius: 10px;
  transition: color 120ms ease, background 120ms ease;
}
.t10-bn-item:hover,
.t10-bn-item:focus { color: var(--ink); }
.t10-bn-item.is-current {
  color: var(--cobalt);
  background: rgba(47, 76, 255, 0.08);
}
.t10-bn-icon {
  font-size: 20px;
  line-height: 1;
}
.t10-bn-label {
  letter-spacing: 0.02em;
}

/* Below 860px: collapse the top nav into a hamburger */
@media (max-width: 860px) {
  .site-header { padding: 14px 20px; }
  .site-header .nav { display: none; }
  .site-header .header-right .btn-pill { display: none; }
  .hamburger { display: inline-flex; }

  /* Tone down headline sizes */
  .hero-h1 { font-size: clamp(40px, 9vw, 72px); }

  /* Homepage hero: single column, widget below text */
  .hero-split { grid-template-columns: 1fr; gap: 24px; }
  .hero-right { order: 2; }
  .hero-trust { gap: 18px; flex-wrap: wrap; }
  .hero-trust .trust-item { flex: 1 1 45%; }

  /* Use-case bento: 2 columns → 1-2 flow */
  .usecase-grid { grid-template-columns: repeat(6, 1fr); }
  .usecase-grid .uc { grid-column: span 6; }

  /* Category cards vertical */
  .categories-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Review page: collapse TOC under content */
  .rb-grid { grid-template-columns: 1fr; gap: 24px; }
  .rb-toc {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .rb-toc-title { display: none; }
  .rb-toc a {
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
  }

  /* Blog article: TOC under hero horizontally */
  .ba-grid { grid-template-columns: 1fr; gap: 20px; }
  .ba-toc {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--line);
  }
  .ba-toc-title { display: none; }
  .ba-toc a {
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
  }

  /* Compare page filter/sort goes vertical */
  .cmp-bar { flex-direction: column; align-items: stretch; gap: 10px; }

  /* Ranked cards collapse */
  .rank-card {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 18px;
  }
  .rank-card .rank-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
  }
  .rank-card .rank-actions > * { flex: 1 1 auto; text-align: center; }

  /* Blog grid: 1 col */
  .bl-grid { grid-template-columns: 1fr; }
  .bl-hero-card { grid-template-columns: 1fr; }
  .bl-hero-img { min-height: 200px; }

  /* Free tools: 1 column */
  .ft-grid { grid-template-columns: 1fr; }
  .ft-card, .ft-card-hero { grid-column: span 1; min-height: 200px; }
  .ft-card-hero { padding: 28px; }

  /* Page hero + article hero reduce padding */
  .page-hero, .ba-hero, .pg-hero, .bl-page-hero {
    padding: 56px 20px 32px;
  }

  /* Review hero simpler */
  .review-hero { padding: 48px 20px 32px; }
  .rh-inner h1 { font-size: clamp(40px, 10vw, 64px); }
  .rh-score-block { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rh-ctas { flex-direction: column; align-items: stretch; }
  .rh-ctas .btn-primary, .rh-ctas .btn-ghost { width: 100%; text-align: center; }

  /* Homepage sections: generally reduce padding */
  .sec-head h2 { font-size: clamp(32px, 7vw, 56px); }

  /* Sticky compare bar on top of bottom nav */
  .sticky-compare { bottom: 80px; }
}

/* Below 720px: add the bottom nav + push footer up to avoid overlap */
@media (max-width: 720px) {
  .t10-bottom-nav { display: grid; }
  body { padding-bottom: 64px; }
  .site-footer { padding-bottom: 40px; }
  /* Sticky compare bar moves above the bottom nav */
  .sticky-compare { bottom: 80px; }
}

/* Touch target sizing on all interactive elements */
@media (max-width: 860px) {
  .btn-primary, .btn-ghost, .btn-pill { min-height: 44px; }
  .rank-visit, .rank-review, .rank-short { min-height: 40px; padding: 10px 14px; }
}

/* Below 440px: very small phones */
@media (max-width: 440px) {
  :root { --pad: 16px; }
  .t10-bn-label { font-size: 10px; }
  .hero-trust .trust-item { flex: 1 1 100%; }
  .final-cta h2 { font-size: clamp(28px, 8vw, 44px); }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .t10-drawer, .t10-scrim, .marquee-track { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGOS IN RANKED LIST (category pages) + COMPARE PAGE SIDE-BY-SIDE
   ═══════════════════════════════════════════════════════════════════ */

/* Category rank card: insert logo between rank number and body */
.rank-card { grid-template-columns: auto auto 1fr auto; }
.rank-logo {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.rank-logo img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.rank-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
}
@media (max-width: 860px) {
  .rank-card { grid-template-columns: auto 1fr; }
  .rank-card .rank-logo { width: 64px; height: 64px; border-radius: 14px; grid-row: 1; grid-column: 1; box-shadow: 0 1px 3px rgba(10,10,10,0.08); }
  .rank-card .rank-logo img { padding: 6px; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; }
  .rank-card .rank-num { grid-row: 1; grid-column: 1; position: absolute; margin: -12px 0 0 -12px; z-index: 2; }
}

/* COMPARE TABLE — logo in brand cell (replaces initial circle when logo exists) */
.cmp-brand-logo {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.cmp-brand-logo img {
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  display: block;
}

/* COMPARE — "✓ Added" state — now much more visible */
.cmp-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: 0.01em;
}
.cmp-add:hover { background: var(--ink); color: var(--paper); }
.cmp-add .cmp-add-plus { font-weight: 700; font-size: 16px; line-height: 1; }
.cmp-add .cmp-add-check { font-weight: 700; font-size: 14px; line-height: 1; }
.cmp-add.is-added {
  background: var(--ink);
  color: var(--citrus);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--citrus);
}
.cmp-add.is-added:hover {
  background: var(--citrus);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.cmp-row-added { background: rgba(232, 255, 90, 0.18); }
.cmp-row-added:hover { background: rgba(232, 255, 90, 0.28); }

/* COMPARE — side-by-side panel */
#cmp-sbs-wrap {
  max-width: 1400px;
  margin: 0 auto 48px;
  padding: clamp(32px, 4vw, 48px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--rad);
  border: var(--border);
}
.cmp-sbs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 24px;
  margin-bottom: 28px;
}
.cmp-sbs-eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--citrus);
}
.cmp-sbs-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  flex: 1;
}
.cmp-sbs-title em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--citrus);
}
.cmp-sbs-clear {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(245, 241, 232, 0.3);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cmp-sbs-clear:hover { border-color: var(--paper); background: rgba(245, 241, 232, 0.1); }

.cmp-sbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.cmp-sbs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--rad-sm);
  border-top: 6px solid var(--acc, var(--cobalt));
  transition: transform 180ms ease;
}
.cmp-sbs-card:hover { transform: translateY(-2px); }
.cmp-sbs-flag {
  position: absolute;
  top: -10px;
  left: 16px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--citrus);
  color: var(--ink);
  border-radius: 999px;
  border: 1.5px solid var(--ink);
}
.cmp-sbs-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cmp-sbs-logo,
.cmp-sbs-initial {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.cmp-sbs-logo img { max-width: 82%; max-height: 82%; object-fit: contain; }
.cmp-sbs-initial {
  background: var(--acc, var(--cobalt));
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  border: none;
}
.cmp-sbs-name {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.15;
}
.cmp-sbs-cat {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 3px;
}
.cmp-sbs-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cmp-sbs-score-num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cmp-sbs-score-num span {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
  letter-spacing: 0.02em;
}
.cmp-sbs-score-bar {
  flex: 1;
  height: 8px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
}
.cmp-sbs-score-bar div { height: 100%; background: var(--acc); transition: width 300ms ease; }
.cmp-sbs-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  row-gap: 10px;
  column-gap: 12px;
  font-size: 13px;
}
.cmp-sbs-stats dt {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  align-self: center;
}
.cmp-sbs-stats dd {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.cmp-sbs-badge {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--citrus);
  border-radius: 999px;
}
.cmp-sbs-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.cmp-sbs-visit {
  display: block;
  text-align: center;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 120ms ease;
}
.cmp-sbs-visit:hover { transform: scale(1.02); }
.cmp-sbs-review {
  display: block;
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cmp-sbs-remove {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 120ms ease;
  text-transform: uppercase;
}
.cmp-sbs-remove:hover { color: var(--coral); border-color: var(--coral); }

.cmp-sbs-hint {
  margin-top: 22px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(245, 241, 232, 0.75);
  text-align: center;
}

@media (max-width: 680px) {
  .cmp-sbs-grid { grid-template-columns: 1fr; }
  .cmp-sbs-title { font-size: 28px; }
  #cmp-sbs-wrap { padding: 24px 20px; margin-bottom: 32px; }
  .cmp-sbs-stats { grid-template-columns: 1fr; row-gap: 2px; }
  .cmp-sbs-stats dt { margin-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH — comprehensive fixes for <860px, <720px, <440px
   Keeps desktop untouched; solves overflow, cramped cards, clipped
   buttons, sticky-bar collisions, and readability across all pages.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Global safety — prevent any single-page horizontal scroll leak.
   Individual stray children (stickers, marquees) are the usual culprits. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  /* Make sure interactive children never force overflow */
  .hero-right, .tw-hero { overflow: visible; }
  /* Contain stickers that float off the right edge on small screens */
  .sticker, .sticker-1, .sticker-2, .sticker-3 {
    max-width: calc(100vw - 24px);
  }
  /* Hide the most egregiously-positioned homepage sticker on small phones */
}
@media (max-width: 440px) {
  .sticker-1 { display: none; }
}

/* 2. Use-case bento — class name is .uc-tile, not .uc (the original rule
   at line ~1834 was a no-op). Fix properly here. */
@media (max-width: 860px) {
  .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .uc-tile-span-4, .uc-tile-span-3, .uc-tile-span-full { grid-column: span 2; min-height: 180px; }
  .uc-tile-span-2, .uc-tile-span-1, .uc-tile-span-6 { grid-column: span 1; }
  .uc-tile { min-height: 140px; padding: 18px; }
  .uc-label { font-size: 11px; }
  .uc-pick-name { font-size: 13px; padding: 4px 10px; }
}
@media (max-width: 440px) {
  .usecase-grid { grid-template-columns: 1fr; }
  .uc-tile-span-4, .uc-tile-span-3, .uc-tile-span-2,
  .uc-tile-span-1, .uc-tile-span-6, .uc-tile-span-full { grid-column: span 1; min-height: 120px; }
  .uc-tile { min-height: 120px; padding: 20px; }
}

/* 3. Homepage category cards (.cat-card + .cat-row): the 4-col grid
   (rank, brand, price, visit) overflows narrow cards. Stack vertically. */
@media (max-width: 860px) {
  .cat-card { padding: 0; }
  .cat-list { padding: 4px 0; }
  .cat-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "rank brand"
      "rank meta"
      "actions actions";
    gap: 4px 12px;
    padding: 16px 18px;
    align-items: start;
  }
  .cat-row > .cat-rank { grid-area: rank; font-size: 28px; align-self: start; padding-top: 2px; }
  .cat-row > div:nth-child(2) { grid-area: brand; min-width: 0; }
  .cat-row > .cat-price { grid-area: meta; font-size: 12px; }
  .cat-row > .cat-visit {
    grid-area: actions;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    min-height: 40px;
    box-sizing: border-box;
  }
  .cat-brand-name { font-size: 16px; line-height: 1.25; }
  .cat-brand-name span {
    display: inline-block;
    margin-left: 0 !important;
    margin-top: 4px;
    font-size: 9px !important;
  }
  .cat-brand-desc { font-size: 13px; line-height: 1.4; }
  .cat-head { padding: 22px 20px 16px; }
  .cat-title { font-size: 26px; }
  .cat-foot { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .cat-foot > * { flex: 1 1 auto; text-align: center; }
}

/* 4. Homepage "hero-trust" stats strip: 2x2 grid on mobile looks cleaner */
@media (max-width: 860px) {
  .hero-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hero-trust .trust-item { flex: unset; }
}

/* 5. Tweaks hero (the "I want to create X right now") answer list:
   the finish-quiz link was clipping. Let it wrap and stay inside card. */
@media (max-width: 860px) {
  .tw-hero, .tw-hero * { max-width: 100%; box-sizing: border-box; }
  .tw-cta, .tw-finish, .tw-hero a { word-break: break-word; }
  .sticker { font-size: 10px; padding: 6px 10px; }
}

/* 6. Marquee — ensure seamless loop parent clipping; double-guard */
.marquee, .strip-marquee, .trust-marquee { overflow: hidden; max-width: 100%; }
@media (max-width: 860px) {
  .marquee-track span, .strip-marquee span { white-space: nowrap; }
}

/* 7. Rank cards on category pages — visit/shortlist buttons were 40px high
   but often clipped if card padding was weird. Force proper sizing. */
@media (max-width: 860px) {
  .rank-card {
    position: relative;
    padding: 20px 18px;
    gap: 14px;
  }
  .rank-card .rank-num {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
    font-size: 28px;
    z-index: 2;
  }
  .rank-card .rank-logo {
    grid-column: 1;
    grid-row: 1;
    margin-left: 28px;
    width: 48px;
    height: 48px;
  }
  .rank-card .rank-body { grid-column: 2; grid-row: 1; min-width: 0; }
  .rank-card h3, .rank-card .rank-name { font-size: 19px; line-height: 1.2; }
  .rank-card .rank-desc { font-size: 14px; line-height: 1.45; }
  .rank-card .rank-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rank-card .rank-visit,
  .rank-card .rank-review,
  .rank-card .rank-short {
    flex: 1 1 140px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .rank-card .rank-short { flex: 1 1 100%; }
}

/* 8. Review page — scorecard, sticky-TOC pills, CTAs */
@media (max-width: 860px) {
  .rh-inner { padding: 0 4px; }
  .rh-inner h1 { font-size: clamp(36px, 9vw, 58px); line-height: 1.05; }
  .rh-lede { font-size: 17px; line-height: 1.5; }
  .rh-meta { gap: 14px; font-size: 13px; }
  .rh-score-num { font-size: 64px; }
  .rh-pros-cons { grid-template-columns: 1fr; gap: 16px; }
  .rh-scorebars { grid-template-columns: 1fr; }
  .rb-section h2 { font-size: 26px; line-height: 1.15; }
  .rb-section p, .rb-section li { font-size: 16px; line-height: 1.6; }
  .rb-toc {
    flex-direction: row;
    border: none;
    background: transparent;
    margin: 0 -20px 12px;
    padding: 10px 20px 12px;
    scrollbar-width: none;
  }
  .rb-toc::-webkit-scrollbar { display: none; }
  .rb-toc a { font-size: 13px; padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto; border-left: none; }
}

/* 9. Compare page — the main compare table collapses cleanly, but the
   search/filter strip and "pick more tools" table need mobile love. */
@media (max-width: 860px) {
  .cmp-hero h1 { font-size: clamp(34px, 9vw, 56px); line-height: 1.05; }
  .cmp-hero .cmp-lede { font-size: 16px; line-height: 1.55; }
  .cmp-bar { padding: 12px; gap: 8px; }
  .cmp-bar input, .cmp-bar select { font-size: 15px; min-height: 44px; }
  /* Convert the "all tools" picker table (6 cols: name, cat, score, price, add, visit)
     to a vertical card layout on mobile. */
  .cmp-table-wrap { padding: 0 20px; overflow: visible; border: none; background: transparent; }
  .cmp-table { display: block; border: none; min-width: 0 !important; width: 100%; }
  .cmp-table thead { display: none; }
  .cmp-table tbody { display: block; }
  .cmp-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   score"
      "cat    price"
      "visit  add";
    column-gap: 12px;
    row-gap: 8px;
    padding: 16px 16px;
    margin-bottom: 10px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    align-items: center;
  }
  .cmp-table tr:hover { background: var(--paper-2); }
  .cmp-table td { padding: 0 !important; border: none !important; background: transparent !important; }
  .cmp-table td:nth-child(1) { grid-area: name; font-size: 15px; min-width: 0; }
  .cmp-table td:nth-child(2) { grid-area: cat; font-size: 12px; color: var(--muted); font-family: var(--ff-mono); letter-spacing: 0.04em; }
  .cmp-table td:nth-child(3) { grid-area: score; font-size: 20px; font-weight: 700; text-align: right; }
  .cmp-table td:nth-child(4) { grid-area: price; font-size: 12px; text-align: right; font-family: var(--ff-mono); color: var(--muted); white-space: nowrap; }
  .cmp-table td:nth-child(5) { grid-area: add; align-self: center; justify-self: end; }
  .cmp-table td:nth-child(6) { grid-area: visit; align-self: center; }
  .cmp-table .cmp-add { padding: 8px 12px; font-size: 12px; min-height: 36px; white-space: nowrap; }
  .cmp-table .cmp-brand { flex-direction: row; align-items: center; gap: 10px; }
  .cmp-table .cmp-brand-logo,
  .cmp-table .cmp-brand-initial { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
  .cmp-row-added { background: rgba(232, 255, 90, 0.18); }
}

/* 10. Free tools hub — use-case cards, and the finder quiz hero card */
@media (max-width: 860px) {
  .ft-grid { gap: 14px; padding: 0 20px; }
  .ft-card, .ft-card-hero {
    padding: 24px;
    min-height: 180px;
    box-sizing: border-box;
  }
  .ft-card-hero { padding: 28px 24px; }
  .ft-card h3 { font-size: 22px; line-height: 1.2; }
  .ft-card p { font-size: 14px; line-height: 1.5; }
  .ft-hero h1 { font-size: clamp(36px, 10vw, 56px); line-height: 1.05; }
}

/* 11. AI Tool Finder quiz — question cards, options, progress dots */
@media (max-width: 860px) {
  .finder-hero h1, .quiz-hero h1 { font-size: clamp(36px, 10vw, 56px); line-height: 1.05; }
  .quiz-progress, .finder-progress { justify-content: center; }
  .quiz-card, .finder-card { padding: 28px 22px; }
  .quiz-opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .quiz-opt, .finder-opt {
    padding: 18px 20px;
    min-height: 56px;
    font-size: 16px;
    text-align: left;
  }
  .quiz-nav { flex-direction: column-reverse; gap: 10px; }
  .quiz-nav button { width: 100%; min-height: 48px; }
}

/* 12. Calculator — injected WP calculator often has its own table layout */
@media (max-width: 860px) {
  .pg-hero h1 { font-size: clamp(32px, 8.5vw, 52px); line-height: 1.05; }
  .pg-stage, .calc-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .pg-left, .pg-right { padding: 20px; }
  .calc-tool-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
  .calc-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .calc-controls input, .calc-controls select, .calc-controls button {
    width: 100%; min-height: 44px;
  }
}

/* 13. Blog archive + single post */
@media (max-width: 860px) {
  .ba-grid { grid-template-columns: minmax(0, 1fr); }
  .ba-body { min-width: 0; }
  .ba-body h1 { font-size: clamp(30px, 8vw, 46px); line-height: 1.08; }
  .ba-body h2 { font-size: 24px; line-height: 1.2; margin-top: 32px; }
  .ba-body h3 { font-size: 19px; line-height: 1.25; }
  .ba-body p, .ba-body li { font-size: 16px; line-height: 1.65; }
  .ba-body img { max-width: 100%; height: auto; border-radius: 12px; }
  .ba-body pre { font-size: 13px; overflow-x: auto; }
  .ba-body blockquote { padding-left: 16px; font-size: 17px; }
  .ba-toc {
    max-width: 100%;
    margin: 0 -20px 12px;
    padding: 10px 20px;
    scrollbar-width: none;
  }
  .ba-toc::-webkit-scrollbar { display: none; }
  .ba-toc a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; }
  /* Blog archive grid */
  .bl-grid { padding: 0 20px; gap: 18px; }
  .bl-card h3 { font-size: 19px; line-height: 1.25; }
  .bl-card p { font-size: 14px; line-height: 1.5; }
  .bl-hero-card { padding: 0; }
  .bl-hero-img { min-height: 220px; }
  .bl-hero-body { padding: 24px; }
  .bl-hero-body h2 { font-size: clamp(24px, 6.5vw, 34px); line-height: 1.15; }
}

/* 14. Hero headlines — ensure nothing overflows horizontally */
@media (max-width: 860px) {
  .hero-h1, .page-hero h1, .pg-hero h1, .ba-hero h1, .cmp-hero h1, .ft-hero h1 {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* 15. Body text readability — min 16px everywhere, generous line-height */
@media (max-width: 860px) {
  body { font-size: 16px; line-height: 1.55; }
  p { line-height: 1.6; }
  .hero-lede, .pg-hero-lede, .page-hero-lede, .cmp-hero .cmp-lede {
    font-size: 16px; line-height: 1.55;
  }
}

/* 16. Section padding — breathe but stay snappy */
@media (max-width: 860px) {
  section { padding-left: 0; padding-right: 0; }
  .sec-head { padding: 0 20px; }
  .usecase-grid, .categories-grid, .bl-grid, .ft-grid, .rank-list {
    padding-left: 20px;
    padding-right: 20px;
  }
  .review-hero, .page-hero, .ba-hero, .pg-hero, .cmp-hero, .ft-hero, .finder-hero, .quiz-hero {
    padding-left: 20px; padding-right: 20px;
  }
}

/* 17. Sticky compare bar + bottom nav stacking — the bar is a fixed,
   centered pill; it must sit above the 64px bottom nav with a 12px gap. */
@media (max-width: 720px) {
  .sticky-compare {
    bottom: 80px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: calc(100vw - 24px);
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    animation: none;
  }
  .sticky-compare .sc-items { flex-shrink: 1; overflow: hidden; }
  .sticky-compare .sc-cta {
    flex-shrink: 0;
    padding: 10px 16px !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Push the body's bottom padding up to clear BOTH the bottom nav (64px)
     AND the sticky-compare bar (~50px) when both are present. */
  body { padding-bottom: 72px; }
  body:has(#sticky-compare:not([hidden])) { padding-bottom: 140px; }
}

/* 18. Bottom nav polish — ensure it uses full width on tiny phones */
@media (max-width: 440px) {
  .t10-bn-item { font-size: 10px; }
  .t10-bn-icon { font-size: 18px; }
  .t10-bottom-nav { padding: 4px 2px env(safe-area-inset-bottom, 4px); }
}

/* 19. Logo-mark in header must not shrink — fixed 28px circle */
@media (max-width: 860px) {
  .site-header { padding: 12px 16px; }
  .logo-mark { width: 28px; height: 28px; flex-shrink: 0; }
  .logo-word { font-size: 18px; }
  .logo { gap: 8px; }
}

/* 20. Tap targets everywhere — 44px minimum for any button or link pill */
@media (max-width: 860px) {
  .btn-primary, .btn-ghost, .btn-pill,
  .t10-drawer-close, .t10-drawer-section a,
  .quiz-opt, .finder-opt,
  .cat-visit, .rank-visit, .rank-short, .rank-review,
  .cmp-add, .sc-cta, .hamburger {
    min-height: 44px;
  }
  .btn-pill, .btn-primary, .btn-ghost {
    padding-left: 20px;
    padding-right: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 21. Drawer polish — ensure body scroll lock works via overflow:hidden on
   html as well (Safari iOS quirk) */
body.t10-drawer-locked { overflow: hidden; position: relative; }
html:has(body.t10-drawer-locked) { overflow: hidden; }

/* 22. Calculator (WP-injected) fixes — the "Try it →" link had same color
   as its background making it invisible. Force contrast. */
.pc-card-link {
  color: var(--paper) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center;
  text-decoration: none !important;
  min-height: 36px;
  box-sizing: border-box;
}
/* 23. Blog body content tables: scroll horizontally in a wrapper */
@media (max-width: 860px) {
  .ba-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    margin: 20px -20px;
    padding: 0 20px;
    font-size: 14px;
  }
  .ba-body table::-webkit-scrollbar { height: 6px; }
  .ba-body table th, .ba-body table td {
    padding: 10px 14px;
    vertical-align: top;
  }
  .ba-body iframe, .ba-body video { max-width: 100%; height: auto; }
  .ba-body .wp-block-embed { margin: 20px 0; max-width: 100%; }
}

@media (max-width: 860px) {
  .pc-card { padding: 16px !important; }
  .pc-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #pc-filters, .pc-filters { flex-wrap: wrap; gap: 8px !important; padding: 0 4px; }
  #pc-filters button, .pc-filters button { font-size: 13px !important; padding: 8px 14px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   REVIEW BODY — richer typography + clean content, matches site feel
   ═══════════════════════════════════════════════════════════════════ */
.rb-wp-body {
  font-family: var(--ff-display);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 680px;
}
.rb-wp-body p {
  margin: 0 0 20px;
}
.rb-wp-body p:first-child {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 28px;
}
.rb-wp-body a {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.rb-wp-body a:hover {
  color: var(--cobalt-d);
}
.rb-wp-body h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 44px 0 16px;
  color: var(--ink);
  scroll-margin-top: 100px;
}
.rb-wp-body h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--cobalt);
  margin-bottom: 16px;
  border-radius: 2px;
}
.rb-wp-body h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
  color: var(--ink);
}
.rb-wp-body h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 18px;
  margin: 24px 0 10px;
  letter-spacing: -0.005em;
  text-transform: none;
}
.rb-wp-body ul, .rb-wp-body ol {
  margin: 0 0 24px;
  padding-left: 26px;
}
.rb-wp-body li {
  margin-bottom: 10px;
  line-height: 1.6;
}
.rb-wp-body ul li::marker {
  color: var(--cobalt);
}
.rb-wp-body blockquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  border-left: 4px solid var(--cobalt);
  padding: 4px 0 4px 24px;
  margin: 36px 0;
  color: var(--ink);
}
.rb-wp-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rad-sm);
  border: 1.5px solid var(--line);
  margin: 28px 0;
  display: block;
}
.rb-wp-body strong, .rb-wp-body b {
  font-weight: 700;
  color: var(--ink);
}
.rb-wp-body code {
  font-family: var(--ff-mono);
  font-size: 14px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.rb-wp-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 36px 0;
}
.rb-wp-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.rb-wp-body th {
  text-align: left;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  background: var(--paper-2);
  border-bottom: 2px solid var(--line);
}
.rb-wp-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

@media (max-width: 860px) {
  .rb-wp-body { font-size: 17px; }
  .rb-wp-body p:first-child { font-size: 19px; }
  .rb-wp-body h2 { font-size: 24px; margin-top: 36px; }
  .rb-wp-body h3 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYGROUND SECTION — "Watch each tool actually work"
   The bundle's defaults are low-contrast + empty-feeling. Fix contrast,
   strengthen typography, make the output visual look substantial.
   ═══════════════════════════════════════════════════════════════════ */
.pg-stage {
  min-height: 420px;
  box-shadow: 8px 8px 0 var(--paper-2);
  background: #111;
}
.pg-left {
  background: var(--ink);
  color: var(--paper);
  gap: 20px;
}
.pg-left .pg-title {
  color: var(--paper);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
}
.pg-left .pg-desc {
  opacity: 0.85;
  font-size: 15px;
  color: var(--paper);
  line-height: 1.55;
}
.pg-left .pg-chrome {
  color: var(--paper);
  opacity: 0.55;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
  font-size: 12px;
}
.pg-left .pg-dot { opacity: 0.35; }
.pg-left .pg-input {
  background: rgba(245, 241, 232, 0.1);
  color: var(--paper);
  border: 1px solid rgba(245, 241, 232, 0.2);
  font-size: 14px;
  padding: 14px 18px;
  border-radius: 10px;
}
.pg-left .pg-input-label {
  color: rgba(245, 241, 232, 0.55);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.pg-left .pg-run {
  background: var(--citrus);
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 3px 3px 0 var(--paper);
}
.pg-left .pg-run:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--paper);
}

/* Right output panel — higher contrast + punchier visual */
.pg-output,
.pg-right {
  background: var(--ink-2);
  border-left: 1px solid rgba(245, 241, 232, 0.1);
}
.pg-output-placeholder {
  color: rgba(245, 241, 232, 0.55);
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 40px 24px;
}
.pg-output-placeholder strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--citrus);
  margin-top: 8px;
}
.pg-output .pg-visual {
  color: var(--ink) !important;
  font-family: var(--ff-display);
  font-weight: 700;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  position: relative;
}
.pg-output .pg-visual::before {
  content: 'OUTPUT';
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink);
  opacity: 0.55;
}
.pg-output .pg-visual > div { color: var(--ink); }
.pg-output .pg-visual span { color: var(--ink); }

/* Footer row with affiliate credit */
.pg-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: #0a0a0a;
  border-top: 1px solid rgba(245, 241, 232, 0.1);
}
.pg-credit {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(245, 241, 232, 0.5);
  text-transform: uppercase;
}
.pg-try {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--citrus);
  text-decoration: none;
  padding: 8px 18px;
  border: 1.5px solid var(--citrus);
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
.pg-try:hover {
  background: var(--citrus);
  color: var(--ink);
}

/* Tabs at top look cheap on dark bg — upgrade */
.pg-tabs {
  padding: 0 var(--pad) 20px;
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
}
.pg-tabs .pg-tab {
  background: transparent;
  border: 1.5px solid rgba(245, 241, 232, 0.25);
  color: rgba(245, 241, 232, 0.7);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 150ms ease;
}
.pg-tabs .pg-tab:hover {
  color: var(--paper);
  border-color: var(--paper);
}
.pg-tabs .pg-tab.on {
  background: var(--citrus);
  color: var(--ink);
  border-color: var(--citrus);
}

@media (max-width: 720px) {
  .pg-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    box-shadow: 4px 4px 0 var(--paper-2);
  }
  .pg-left {
    border-right: none;
    border-bottom: 1px solid rgba(245, 241, 232, 0.15);
    padding: 24px;
  }
  .pg-output { min-height: 220px; }
  .pg-footer { flex-direction: column; gap: 10px; padding: 16px 20px; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN — /admin/brands/ reference page (team-only, not indexed)
   ═══════════════════════════════════════════════════════════════════ */
.ab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 32px;
}
.ab-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ab-stat strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--citrus);
  line-height: 1;
}
.ab-stat span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.65);
}

.ab-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ab-cat h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.ab-cat-count {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
}
.ab-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--border);
  border-radius: var(--rad-sm);
  overflow: hidden;
  background: var(--paper);
  font-family: var(--ff-display);
  font-size: 14px;
}
.ab-table thead {
  background: var(--ink);
  color: var(--paper);
}
.ab-table th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 12px 14px;
}
.ab-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ab-table tbody tr:last-child td { border-bottom: none; }
.ab-table tbody tr:hover { background: var(--paper-2); }
.ab-row.needs-attention { background: rgba(255, 90, 60, 0.08); }

.ab-logo-cell { width: 60px; }
.ab-logo-cell img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  display: block;
}
.ab-logo-fallback {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.ab-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.ab-name:hover { color: var(--cobalt); }
.ab-slug {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.ab-score {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  width: 60px;
  text-align: center;
}
.ab-affurl {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--cobalt);
  word-break: break-all;
  text-decoration: none;
  display: block;
  line-height: 1.4;
}
.ab-affurl:hover { text-decoration: underline; }
.ab-vendor {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}
.ab-status { text-align: center; width: 80px; }
.ab-ok {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 4px 10px;
  background: var(--mint);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ab-warn {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 4px 10px;
  background: var(--coral);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ab-badge {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  background: var(--citrus);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 600;
}
.ab-pricing {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--muted);
}
.ab-missing {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--coral);
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .ab-table { font-size: 13px; }
  .ab-table th, .ab-table td { padding: 10px 8px; }
  .ab-table th:nth-child(6), .ab-table td:nth-child(6),
  .ab-table th:nth-child(7), .ab-table td:nth-child(7) { display: none; }
  .ab-logo-cell img, .ab-logo-fallback { width: 36px; height: 36px; }
  .ab-stat strong { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REVIEW BODY PATTERNS — skill tiers + user testimonials
   Auto-generated from repeating WP content by _review-patterns.js
   ═══════════════════════════════════════════════════════════════════ */

/* ── Skill tiers (Beginner / Intermediate / Advanced) ── */
.rb-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 32px;
}
.rb-tier {
  position: relative;
  padding: 24px 22px 22px;
  border: var(--border);
  border-radius: var(--rad-sm);
  background: var(--tier-color, var(--paper-2));
  color: var(--tier-fg, var(--ink));
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}
.rb-tier-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  opacity: 0.7;
}
.rb-tier-label {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.rb-tier p {
  font-family: var(--ff-display);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  font-style: normal;
  color: inherit;
}
.rb-tier p:first-child { font-size: 15px; margin: 0; }
@media (max-width: 860px) {
  .rb-tiers { grid-template-columns: 1fr; gap: 10px; margin: 20px 0 28px; }
  .rb-tier { min-height: auto; padding: 18px 20px; }
}

/* ── User testimonials grid ── */
.rb-testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.rb-testi {
  margin: 0;
  padding: 22px;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--rad-sm);
  border-top: 4px solid var(--cobalt);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rb-testi-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
}
.rb-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--citrus);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  border: 1.5px solid var(--ink);
}
.rb-testi-name {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.rb-testi-role {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px;
}
.rb-testi-score {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--cobalt);
  letter-spacing: -0.01em;
  padding: 4px 10px;
  background: var(--paper-2);
  border-radius: 999px;
  border: 1px solid var(--line);
  line-height: 1;
}
.rb-testi blockquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
}
.rb-testi blockquote::before {
  content: '"';
  display: block;
  font-family: var(--ff-serif);
  font-size: 40px;
  line-height: 0.3;
  color: var(--cobalt);
  margin-bottom: 12px;
  opacity: 0.6;
}
.rb-testi-date {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
@media (max-width: 860px) {
  .rb-testi-grid { grid-template-columns: 1fr; }
  .rb-testi { padding: 18px; }
  .rb-testi blockquote { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REVIEW BODY — feature-grid cards (support channels, contact methods)
   Auto-generated from img+h3+p triplets by _review-patterns.js
   ═══════════════════════════════════════════════════════════════════ */
.rb-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 24px 0 32px;
}
.rb-feat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--rad-sm);
  border-top: 4px solid var(--acc, var(--cobalt));
  min-height: 160px;
  transition: transform 150ms ease;
}
.rb-feat-card:hover { transform: translateY(-2px); }
.rb-feat-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin: 0 0 4px;
  border: none;
  border-radius: 0;
}
.rb-feat-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
}
.rb-feat-title::before { display: none; }
.rb-feat-desc {
  font-family: var(--ff-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  font-style: normal;
}
@media (max-width: 860px) {
  .rb-feat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rb-feat-card { min-height: auto; padding: 16px 14px; }
  .rb-feat-title { font-size: 15px; }
  .rb-feat-desc { font-size: 13px; }
}
@media (max-width: 440px) {
  .rb-feat-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE PLAYGROUND PITCH CARD — replaces the embedded demo
   ═══════════════════════════════════════════════════════════════════ */
.pg-pitch {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 32px auto 0;
  padding: clamp(36px, 5vw, 64px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--rad);
  border: 2px solid var(--paper);
  box-shadow: 8px 8px 0 var(--citrus);
  text-decoration: none;
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.pg-pitch:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--citrus);
}
.pg-pitch-main { display: flex; flex-direction: column; gap: 14px; }
.pg-pitch-eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--citrus);
  font-weight: 700;
}
.pg-pitch-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--paper);
}
.pg-pitch-desc {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px);
  color: rgba(245, 241, 232, 0.82);
  margin: 0;
  line-height: 1.45;
  max-width: 540px;
}
.pg-pitch-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pg-pitch-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--acc);
  color: var(--fg, var(--paper));
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 52px);
  border-radius: 14px;
  border: 2px solid var(--paper);
  transition: transform 150ms ease;
}
.pg-pitch-tile em {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
}
.pg-pitch:hover .pg-pitch-tile { transform: rotate(-2deg); }
.pg-pitch:hover .pg-pitch-tile:nth-child(2n) { transform: rotate(2deg); }
.pg-pitch-cta {
  position: absolute;
  bottom: 24px;
  left: clamp(36px, 5vw, 64px);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--citrus);
  letter-spacing: 0.01em;
  padding: 10px 18px;
  border: 1.5px solid var(--citrus);
  border-radius: 999px;
}
.pg-pitch:hover .pg-pitch-cta { background: var(--citrus); color: var(--ink); }
@media (max-width: 860px) {
  .pg-pitch {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px 80px;
    box-shadow: 4px 4px 0 var(--citrus);
  }
  .pg-pitch:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--citrus); }
  .pg-pitch-cta { left: 24px; bottom: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH — PASS 2 (2026-04-21)
   Site owner feedback: mobile "still needs enhancements".
   All gated with @media (max-width: 860px) or narrower. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* P2-1. Finder/quiz — the .quiz-body had 32px side padding which on a
   328px inner card crushed options to 214px wide. Tighten on mobile. */
@media (max-width: 720px) {
  .quiz-inner { padding: 16px; }
  .quiz-body { padding: 18px 18px 24px; }
  .quiz-head { padding: 18px 18px 12px; }
  .quiz-opts, .finder-opts { gap: 10px; }
  .quiz-opt, .finder-opt {
    min-height: 56px;
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .quiz-progress, .finder-progress { gap: 6px; }
  .quiz-progress > *, .finder-progress > * { min-width: 8px; min-height: 8px; }
}
@media (max-width: 440px) {
  .quiz-inner { padding: 12px; }
  .quiz-body { padding: 14px 14px 20px; }
  .quiz-head { padding: 14px 14px 10px; }
  .quiz-opt, .finder-opt { padding: 14px 16px; font-size: 15px; }
}

/* P2-2. Sticky compare bar — the close (×) button was 28×28, below
   the 44px tap target. Also harden bottom offset when bottom-nav present. */
@media (max-width: 860px) {
  .sc-close,
  .sticky-compare .sc-close,
  .sticky-compare [aria-label*="Clear" i],
  .sticky-compare [aria-label*="close" i] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    flex-shrink: 0;
  }
  .sc-item { flex-shrink: 0; }
}

/* P2-3. Compare side-by-side panel — .cmp-sbs-remove was 35px tall,
   dashed pill, below 44px. Bump it up and give proper breathing room. */
@media (max-width: 860px) {
  .cmp-sbs-remove {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  /* card body gets a tad tighter padding on narrow phones */
  .cmp-sbs-card { padding: 22px 18px; }
  .cmp-sbs-card-head { gap: 12px; }
}
@media (max-width: 440px) {
  #cmp-sbs-wrap { padding: 20px 16px !important; }
  .cmp-sbs-card { padding: 18px 16px; }
}

/* P2-4. Calculator (WP-injected) — native inputs/selects/buttons came in
   at 36–38px height. Override to ensure 44px min tap target everywhere
   inside the .pc-* (price calculator) scope, without recoloring. */
@media (max-width: 860px) {
  .pc-card input,
  .pc-card select,
  .pc-card textarea,
  .pc-controls input,
  .pc-controls select,
  main input[type="text"],
  main input[type="number"],
  main input[type="email"],
  main select {
    min-height: 44px;
    font-size: 16px; /* prevent iOS auto-zoom on focus */
    box-sizing: border-box;
    padding: 10px 12px;
  }
  .pc-tab,
  .pc-chip,
  .pc-card button,
  .pc-card .pc-add,
  .pc-card-link {
    min-height: 44px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .pc-tabs { flex-wrap: wrap; gap: 6px; }
  .pc-chips { flex-wrap: wrap; gap: 6px; }
}

/* P2-5. Review hero — CTAs were good, but on 360px the "Visit X" primary
   can wrap awkwardly. Ensure both rh-ctas kids stack cleanly full-width
   with proper min-height (already 44px from .btn-primary). Redundant-safe. */
@media (max-width: 440px) {
  .rh-ctas { gap: 10px; }
  .rh-ctas .btn-primary, .rh-ctas .btn-ghost {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
  }
  .rh-score-num { font-size: 56px; }
}

/* P2-6. Review pricing box CTA — at very narrow widths the affiliate
   button could clip. Force full width and proper tap target. */
@media (max-width: 700px) {
  .rb-pricing-box { padding: 22px 18px; gap: 14px; }
  .rb-pricing-box .btn-primary,
  .rb-pricing-box a.btn-primary {
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    text-align: center;
    justify-content: center;
    white-space: normal;
    word-break: break-word;
  }
}

/* P2-7. Homepage pg-pitch — at 360px, ensure tiles don't shrink below
   tappable size, title clamp produces a readable minimum, CTA pill has
   breathing room from tile grid bottom edge. */
@media (max-width: 440px) {
  .pg-pitch {
    padding: 24px 20px 76px;
    gap: 20px;
  }
  .pg-pitch-title { font-size: clamp(26px, 7.2vw, 34px); }
  .pg-pitch-desc { font-size: 16px; }
  .pg-pitch-tiles { gap: 10px; }
  .pg-pitch-tile {
    font-size: clamp(30px, 9vw, 42px);
    border-radius: 12px;
  }
  .pg-pitch-tile em { font-size: 10px; }
  .pg-pitch-cta {
    left: 20px;
    bottom: 20px;
    font-size: 13px;
    padding: 10px 16px;
  }
}

/* P2-8. Marquee — reinforce clip on mobile. Animation itself is defined
   in styles.css; here we only double-guard the overflow + seamless loop
   (parent clips any transform jump) and prevent track from creating
   horizontal scroll at root. */
@media (max-width: 860px) {
  .marquee, .strip-marquee, .trust-marquee {
    overflow: hidden !important;
    max-width: 100vw;
    position: relative;
  }
  .marquee-track { will-change: transform; }
}

/* P2-9. Body tap-target safety net — any anchor-button on mobile should
   hit 44px minimum even when it's not in our explicit list. */
@media (max-width: 860px) {
  .bn-btn, .bn-tab,
  button, a.btn, a.pill, a.link-pill,
  .t10-bn-item {
    touch-action: manipulation;
  }
  .t10-bn-item { min-height: 56px; min-width: 44px; }
}

/* P2-10. rb-feat-grid — on 360px viewport the "2-column" layout can get
   cramped. At ≤420px already falls to 1 col via existing rule; bridge
   the gap so support-channel cards with long titles breathe properly. */
@media (max-width: 520px) {
  .rb-feat-grid { grid-template-columns: 1fr; }
  .rb-feat-card { min-height: auto; padding: 18px 18px; }
}

/* P2-11. Hamburger drawer tap-target on very small devices — the close
   button was 40×44, widen slightly for easier reach. */
@media (max-width: 440px) {
  .t10-drawer-close { min-width: 44px; width: 44px; }
  .t10-drawer { width: min(86vw, 340px); }
}

/* P2-12. Compare page — tighten table card row padding on very narrow
   phones and let the 2-col grid collapse cleanly. */
@media (max-width: 440px) {
  .cmp-table tr {
    padding: 14px 12px;
    row-gap: 6px;
  }
  .cmp-table td:nth-child(3) { font-size: 18px; }
  .cmp-table .cmp-add {
    padding: 8px 10px;
    font-size: 11px;
    min-height: 40px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   QUIZ OPTIONS — fix invisible labels on cream finder cards
   The quiz-body (finder page + homepage widget) has a cream background but
   .quiz-opt was styled with paper text → cream-on-cream. Force ink text
   and give buttons enough border contrast so they read clearly.
   ═══════════════════════════════════════════════════════════════════ */
.quiz-body .quiz-opt,
.quiz-section .quiz-opt,
.finder .quiz-opt {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 600;
  min-height: 56px;
  padding: 14px 18px;
}
.quiz-body .quiz-opt:hover,
.quiz-section .quiz-opt:hover,
.finder .quiz-opt:hover {
  background: var(--citrus);
  color: var(--ink);
  border-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.quiz-body .quiz-opt-emoji,
.quiz-section .quiz-opt-emoji,
.finder .quiz-opt-emoji {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY COMPARE — smart dismiss + clear buttons
   ═══════════════════════════════════════════════════════════════════ */
.sticky-compare {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.28);
  z-index: 1050;
  max-width: calc(100vw - 32px);
  animation: sc-slide-up 220ms cubic-bezier(0.25, 0.8, 0.3, 1);
}
@keyframes sc-slide-up {
  from { transform: translateX(-50%) translateY(16px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.sc-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--citrus);
  font-weight: 700;
}
.sc-items {
  display: inline-flex;
  gap: 4px;
}
.sc-item {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-color, var(--paper));
  color: var(--ink);
  border-radius: 50%;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  border: 1.5px solid var(--paper);
}
.sc-item-plus {
  background: var(--paper);
  color: var(--ink);
}
.sc-count {
  font-family: var(--ff-mono);
  font-size: 12px;
  opacity: 0.75;
  margin-right: 4px;
}
.sc-cta {
  background: var(--citrus);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: transform 120ms ease;
}
.sc-cta:hover { transform: scale(1.05); }
.sc-close,
.sc-dismiss {
  background: transparent;
  border: 1.5px solid rgba(245, 241, 232, 0.45);
  color: var(--paper);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.sc-close:hover,
.sc-dismiss:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.sc-dismiss {
  /* Lower-affordance than × since it's a reversible action */
  opacity: 0.75;
  border-color: rgba(245, 241, 232, 0.28);
  font-size: 14px;
}
.sc-dismiss:hover { opacity: 1; }

@media (max-width: 720px) {
  .sticky-compare {
    bottom: 80px; /* above the bottom nav */
    padding: 8px 8px 8px 12px;
    gap: 8px;
    font-size: 12px;
  }
  .sc-label { display: none; } /* save space on narrow */
  .sc-cta { padding: 8px 12px; font-size: 12px; }
  .sc-item { width: 24px; height: 24px; font-size: 11px; }
  .sc-close, .sc-dismiss { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO SIZES — standardized across every surface
   Every brand logo across the site comes through these CSS vars so they
   look consistent on category cards, compare tables, review hero,
   playground cards, and the side-by-side panel.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --logo-tile-sm: 48px;   /* compact tiles: compare table row */
  --logo-tile-md: 64px;   /* default: category cards, free-tools */
  --logo-tile-lg: 80px;   /* larger: review hero, playground */
  --logo-tile-xl: 104px;  /* hero-level displays */
  --logo-radius: 12px;
  --logo-pad: 6%;         /* tighter inner padding so the logo fills the tile */
  --logo-bg: var(--paper);
  --logo-border: 2px solid var(--ink);
}

/* Shared rules — any logo tile on the site adopts these defaults unless
   overridden locally. Keep individual tile styles consistent. */
.rank-logo,
.cmp-brand-logo,
.cmp-sbs-logo,
.pl-logo {
  background: var(--logo-bg);
  border: var(--logo-border);
  border-radius: var(--logo-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: var(--logo-pad);
  box-sizing: border-box;
}
.rank-logo img,
.cmp-brand-logo img,
.cmp-sbs-logo img,
.pl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Category rank card — medium tile */
.rank-logo { width: var(--logo-tile-md); height: var(--logo-tile-md); }

/* Compare table row — small tile */
.cmp-brand-logo { width: var(--logo-tile-sm); height: var(--logo-tile-sm); }

/* Compare side-by-side card — medium tile */
.cmp-sbs-logo { width: var(--logo-tile-md); height: var(--logo-tile-md); }

/* Playground tool logo — small tile inline */
.pl-logo { width: 32px; height: 32px; border-radius: 8px; }
.pl-logo img { max-width: 80%; max-height: 80%; }

@media (max-width: 860px) {
  :root {
    --logo-tile-sm: 36px;
    --logo-tile-md: 48px;
    --logo-tile-lg: 60px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYGROUND PAGE — rebuilt card layout
   ═══════════════════════════════════════════════════════════════════ */
.pl-section {
  padding: clamp(32px, 5vw, 64px) var(--pad);
  background: var(--paper);
}
.pl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.pl-card {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  border: var(--border);
  border-radius: var(--rad);
  overflow: hidden;
  border-top: 6px solid var(--acc);
  box-shadow: 6px 6px 0 var(--paper-2);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.pl-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--paper-2);
}

.pl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  gap: 16px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}
.pl-cat {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--acc);
  font-weight: 700;
  text-transform: uppercase;
}
.pl-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pl-tool-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.pl-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 260px;
}
.pl-input {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid rgba(245, 241, 232, 0.12);
}
.pl-input-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(245, 241, 232, 0.55);
  text-transform: uppercase;
}
.pl-input-text {
  font-family: var(--ff-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper);
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid rgba(245, 241, 232, 0.14);
  padding: 12px 14px;
  border-radius: 10px;
  flex: 1;
}
.pl-run {
  background: var(--citrus);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 13px 20px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  align-self: stretch;
  box-shadow: 3px 3px 0 var(--paper);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pl-run:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--paper);
}

.pl-output {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.pl-output-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(245, 241, 232, 0.55);
  text-transform: uppercase;
}
.pl-output-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 232, 0.4);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 16px;
  text-align: center;
  padding: 24px;
}
.pl-output-placeholder strong {
  color: var(--citrus);
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: normal;
}
.pl-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: var(--rad-sm);
  animation: plFadeIn 240ms ease;
}
@keyframes plFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.pl-visual-big {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}
.pl-visual-meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.8;
  text-align: center;
  line-height: 1.4;
}

.pl-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(245, 241, 232, 0.1);
}
.pl-credit {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(245, 241, 232, 0.5);
  text-transform: uppercase;
}
.pl-try {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--citrus);
  text-decoration: none;
  padding: 8px 16px;
  border: 1.5px solid var(--citrus);
  border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
.pl-try:hover {
  background: var(--citrus);
  color: var(--ink);
}

@media (max-width: 860px) {
  .pl-grid { grid-template-columns: 1fr; gap: 16px; }
  .pl-card-body { grid-template-columns: 1fr; }
  .pl-input { border-right: none; border-bottom: 1px solid rgba(245, 241, 232, 0.12); }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPARE TABLE — logo cell breathing room (override earlier rules)
   ═══════════════════════════════════════════════════════════════════ */
.cmp-table td:first-child,
.cmp-table th:first-child {
  padding-left: 22px;
}
.cmp-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cmp-brand-logo {
  /* Override the earlier fixed 44px rule near line 2000 — use unified vars. */
  width: var(--logo-tile-sm) !important;
  height: var(--logo-tile-sm) !important;
  border: var(--logo-border);
  border-radius: var(--logo-radius);
  padding: 6%;
  background: var(--paper);
}
.cmp-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* Initial-letter fallback (no logo) should also match sizing */
.cmp-brand-mark {
  width: var(--logo-tile-sm);
  height: var(--logo-tile-sm);
  border-radius: var(--logo-radius);
}

@media (max-width: 860px) {
  .cmp-table td:first-child,
  .cmp-table th:first-child { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   INITIAL-LETTER CIRCLES — replace logo images everywhere
   Uniform look across category cards, compare table, side-by-side,
   and playground. Never broken (no image 404s).
   ═══════════════════════════════════════════════════════════════════ */

/* Category rank card — brand-colored square with big initial */
.rank-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  flex-shrink: 0;
  padding: 0;
  overflow: visible;
}
.rank-logo-initial {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
}
@media (max-width: 860px) {
  .rank-logo { width: 52px; height: 52px; border-radius: 12px; }
  .rank-logo-initial { font-size: 22px; }
}

/* Compare table initial circle */
.cmp-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--brand-color, var(--coral));
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}

/* Compare side-by-side card initial */
.cmp-sbs-initial {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 26px;
  flex-shrink: 0;
}

/* Playground card — initial chip next to tool name */
.pl-initial {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYGROUND — rich output mockups
   ═══════════════════════════════════════════════════════════════════ */
.pl-output.is-done {
  background: var(--paper);
  color: var(--ink);
  padding: 14px;
  border-radius: 0;
}
.pl-output-eyebrow-done {
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.pl-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: plPop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes plPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.pl-mock-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 2px 0;
}

/* Video mockup */
.pl-video-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--ink);
}
.pl-video-stage {
  aspect-ratio: 9 / 16;
  max-height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b1810;
  font-family: var(--ff-display);
  font-weight: 700;
}
.pl-video-subject {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pl-video-subject em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  display: inline-block;
  margin-top: 6px;
}
.pl-video-captions {
  position: absolute;
  bottom: 16%;
  left: 10%;
  right: 10%;
  background: rgba(0, 0, 0, 0.75);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  text-shadow: none;
}
.pl-video-captions strong { color: var(--citrus); }
.pl-video-play {
  position: absolute;
  width: 44px;
  height: 44px;
  background: rgba(10, 10, 10, 0.55);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  backdrop-filter: blur(4px);
}
.pl-video-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.pl-video-progress {
  height: 3px;
  background: rgba(245, 241, 232, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.pl-video-progress > div {
  height: 100%;
  background: var(--citrus);
  transition: width 240ms ease;
}
.pl-video-dur { opacity: 0.65; }

/* Image before/after mockup */
.pl-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--ink);
}
.pl-ba-cell {
  position: relative;
  aspect-ratio: 1;
}
.pl-ba-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(10, 10, 10, 0.75);
  color: var(--paper);
  padding: 2px 8px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  border-radius: 4px;
  font-weight: 700;
}
.pl-ba-scene {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-ba-scene-bg {
  background: linear-gradient(135deg, #d9e3f0, #f5e6d3);
}
.pl-ba-scene-checker {
  background:
    linear-gradient(45deg, #e8e4d9 25%, transparent 25%),
    linear-gradient(-45deg, #e8e4d9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e4d9 75%),
    linear-gradient(-45deg, transparent 75%, #e8e4d9 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: var(--paper);
}
.pl-ba-subject {
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at 35% 35%, #ff8a5b, #d94f2c);
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(10, 10, 10, 0.25);
}

/* Logo grid mockup */
.pl-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 6px;
  background: var(--paper);
}
.pl-logo-variant {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  overflow: hidden;
}
.pl-logo-variant span {
  display: block;
  white-space: nowrap;
}

/* Site / browser mockup */
.pl-site-browser {
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.pl-site-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.pl-site-dots { display: inline-flex; gap: 4px; }
.pl-site-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.pl-site-url {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted);
}
.pl-site-page {
  background: var(--paper);
  color: var(--ink);
  min-height: 180px;
}
.pl-site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.pl-site-logo {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.pl-site-navlinks {
  font-family: var(--ff-display);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  word-spacing: 4px;
}
.pl-site-hero {
  padding: 18px 14px 16px;
  text-align: center;
  background: linear-gradient(160deg, #d4efe2 0%, #f4efe6 100%);
}
.pl-site-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pl-site-h1 em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: #2f4cff;
}
.pl-site-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 10px;
}
.pl-site-sections {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 10px 14px;
  background: var(--paper);
}
.pl-site-sec {
  height: 24px;
  background: var(--paper-2);
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY COMPARE BAR — smart mode, restored
   ═══════════════════════════════════════════════════════════════════ */
.sticky-compare {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--citrus);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.35);
  z-index: 1050;
  max-width: calc(100vw - 24px);
  animation: sc-enter 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes sc-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(32px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.sticky-compare.is-pop { animation: sc-pop 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes sc-pop {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  30%  { transform: translateX(-50%) translateY(-4px) scale(1.04); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}
.sticky-compare .sc-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--citrus);
  font-weight: 700;
  padding-left: 2px;
}
.sticky-compare .sc-items {
  display: inline-flex;
  gap: 4px;
}
.sticky-compare .sc-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-color, var(--paper));
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  border: 1.5px solid var(--paper);
}
.sticky-compare .sc-item-plus {
  background: var(--paper);
  color: var(--ink);
}
.sticky-compare .sc-cta {
  background: var(--citrus);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}
.sticky-compare .sc-cta:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(232, 255, 90, 0.4);
}
.sticky-compare .sc-close {
  background: transparent;
  border: 1.5px solid rgba(245, 241, 232, 0.35);
  color: var(--paper);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.sticky-compare .sc-close:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

@media (max-width: 720px) {
  .sticky-compare {
    bottom: 78px; /* above the bottom nav */
    padding: 8px 10px;
    gap: 10px;
  }
  .sticky-compare .sc-label { display: none; }
  .sticky-compare .sc-item { width: 24px; height: 24px; font-size: 11px; }
  .sticky-compare .sc-cta { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 440px) {
  .sticky-compare .sc-items { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   "✓ ADDED" state — bump visibility even more
   ═══════════════════════════════════════════════════════════════════ */
.cmp-add.is-added {
  background: var(--citrus) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 12px rgba(232, 255, 90, 0.5) !important;
  font-weight: 700;
}
.cmp-add.is-added:hover {
  background: var(--coral) !important;
  color: var(--paper) !important;
  box-shadow: 0 0 0 3px var(--ink) !important;
}
.cmp-add.is-added:hover .cmp-add-check { display: none; }
.cmp-add.is-added:hover::after { content: '× Remove'; font-weight: 700; }
.cmp-row-added { background: rgba(232, 255, 90, 0.28) !important; }

/* Rank card shortlist button also picks up a strong state when added */
.rank-short.is-added {
  background: var(--citrus);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 10px rgba(232, 255, 90, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   RANK CARD — normalized column widths so rows line up regardless of
   whether rank is 1 or 23 (single vs double-digit column width issue)
   ═══════════════════════════════════════════════════════════════════ */
.rank-card {
  grid-template-columns: 58px 64px 1fr auto !important;
  gap: 20px;
  align-items: center;
}
.rank-num {
  text-align: right;
  font-size: clamp(42px, 4.5vw, 60px);
  min-width: 0;
  color: var(--ink);
  opacity: 0.85;
}
@media (max-width: 860px) {
  .rank-card {
    grid-template-columns: 44px 48px 1fr !important;
    gap: 14px;
    padding: 18px 18px 16px;
  }
  .rank-num { font-size: 32px; }
  .rank-card .rank-logo { grid-row: auto; grid-column: auto; position: static; margin: 0; width: 68px; height: 68px; border-radius: 14px; }
  .rank-card .rank-body { grid-column: 1 / -1; }
  .rank-card .rank-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(10, 10, 10, 0.08);
    margin-top: 4px;
  }
  .rank-card .rank-actions > * { flex: 1 1 auto; min-width: 0; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGOS ON COMPARE SURFACES — bigger tiles, brand color backdrop so
   logo always reads cleanly even on transparent/PNG logos with weird
   aspect ratios. Kept OFF category + playground (initials stay there).
   ═══════════════════════════════════════════════════════════════════ */
.cmp-brand-logo {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  border: 2px solid var(--ink) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px !important;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Inline style provides the brand color; fall back if missing. */
  background: var(--paper);
}
.cmp-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}

.cmp-sbs-logo {
  width: 68px !important;
  height: 68px !important;
  border-radius: 14px !important;
  border: 2px solid var(--ink) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px !important;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--paper);
}
.cmp-sbs-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}

@media (max-width: 860px) {
  .cmp-brand-logo { width: 44px !important; height: 44px !important; padding: 5px !important; }
  .cmp-sbs-logo { width: 56px !important; height: 56px !important; padding: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYGROUND "GENERATING…" HYPE — loading state between Run click
   and mockup reveal. Shows a progress bar, status messages, and the
   tool's brand color as an accent.
   ═══════════════════════════════════════════════════════════════════ */
.pl-generating {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 24px;
  color: var(--paper);
}
.pl-generating-status {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--citrus);
  text-transform: uppercase;
  font-weight: 700;
  animation: plStatusBlink 600ms steps(2, end) infinite;
}
@keyframes plStatusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pl-generating-bar {
  width: 100%;
  max-width: 220px;
  height: 6px;
  background: rgba(245, 241, 232, 0.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.pl-generating-bar > div {
  position: absolute;
  inset: 0;
  background: var(--citrus);
  border-radius: 999px;
  animation: plFill 2200ms cubic-bezier(0.3, 0.1, 0.2, 1) forwards;
  transform-origin: left center;
}
@keyframes plFill {
  0% { transform: scaleX(0); }
  40% { transform: scaleX(0.42); }
  80% { transform: scaleX(0.86); }
  100% { transform: scaleX(1); }
}
.pl-generating-substatus {
  font-family: var(--ff-display);
  font-size: 13px;
  color: rgba(245, 241, 232, 0.6);
  text-align: center;
  line-height: 1.45;
  max-width: 220px;
}
.pl-generating-dots {
  display: inline-flex;
  gap: 6px;
}
.pl-generating-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--citrus);
  animation: plDot 900ms ease-in-out infinite;
}
.pl-generating-dots span:nth-child(2) { animation-delay: 150ms; }
.pl-generating-dots span:nth-child(3) { animation-delay: 300ms; }
@keyframes plDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO TILE CONTRAST FIX — always cream backdrop so logos of any color
   (especially blue ones like PicWish, Picsart) read cleanly. Brand
   color moves to a thin left-side accent stripe so identity is kept.
   ═══════════════════════════════════════════════════════════════════ */
.cmp-brand-logo,
.cmp-sbs-logo {
  background: var(--paper) !important;
  position: relative;
  overflow: hidden;
}
.cmp-brand-logo::before,
.cmp-sbs-logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-color, var(--cobalt));
  z-index: 1;
}
.cmp-brand-logo img,
.cmp-sbs-logo img {
  /* Give the image room for the accent stripe + remove drop-shadow on dark logos */
  position: relative;
  z-index: 2;
  filter: none !important;
  margin-left: 4px;
}
.cmp-sbs-logo::before { width: 5px; }

/* ═══════════════════════════════════════════════════════════════════
   BIGGER LOGOS — bumped sizes + tighter padding so the logo actually fills
   ═══════════════════════════════════════════════════════════════════ */
.cmp-brand-logo {
  width: 68px !important;
  height: 68px !important;
  padding: 4px !important;
  border-radius: 14px !important;
}
.cmp-sbs-logo {
  width: 96px !important;
  height: 96px !important;
  padding: 5px !important;
  border-radius: 16px !important;
}
.cmp-brand-logo img,
.cmp-sbs-logo img {
  margin-left: 5px;   /* clear of the 4–5px accent stripe */
}
.cmp-brand-logo::before { width: 5px; }
.cmp-sbs-logo::before   { width: 6px; }

/* The compare table first-cell needs a bit more width now for the larger tile */
.cmp-table td:first-child,
.cmp-table th:first-child {
  padding-left: 20px !important;
  padding-right: 10px;
}

@media (max-width: 860px) {
  .cmp-brand-logo { width: 56px !important; height: 56px !important; padding: 4px !important; }
  .cmp-sbs-logo   { width: 72px !important; height: 72px !important; padding: 4px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   REVIEW HERO — brand logo tile floating top-right of the hero
   Cream backdrop, ink border, consistent with compare surfaces.
   ═══════════════════════════════════════════════════════════════════ */
.rh-inner { position: relative; }
.rh-logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 128px;
  height: 128px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 0 var(--ink);
  box-sizing: border-box;
}
.rh-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 860px) {
  .rh-logo {
    position: static;
    width: 88px;
    height: 88px;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--ink);
    margin-bottom: 20px;
  }
  .rh-inner h1 { margin-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FINDER RESULT — brand logo tile in the match card
   Cream tile with the tool's real logo, same treatment as compare +
   review hero. Falls back to .qr-mark (initial) if no logo.
   ═══════════════════════════════════════════════════════════════════ */
.qr-logo {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.qr-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 720px) {
  .qr-logo { padding: 14px; border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH — FINAL PASS
   Consolidated fixes from the mobile UX audit. All rules are gated
   at 860px / 720px / 520px / 440px so desktop is untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Smooth scroll & safe defaults --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Kill any chance of horizontal page overflow on mobile. */
@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, iframe { max-width: 100%; }
}

/* --- Tap targets: blanket 44px minimum on all interactive elements --- */
@media (max-width: 860px) {
  .cat-compare-btn,
  .cmp-filter,
  .cmp-visit,
  .cmp-add,
  .rank-visit,
  .rank-review,
  .rank-short,
  .cat-all,
  .rh-ctas a,
  .rb-toc a,
  .ba-toc a,
  .foot-grid a,
  .t10-drawer-section a,
  .t10-drawer-close,
  .t10-drawer-cta,
  .hamburger,
  .btn-primary,
  .btn-ghost,
  .btn-pill,
  .sc-cta,
  .sc-close {
    min-height: 44px;
  }
  .cat-compare-btn, .cmp-filter, .cmp-visit, .cmp-add {
    padding-top: 11px;
    padding-bottom: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cat-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }
  /* Any plain <a> inside an interactive region still gets comfortable height */
  .rank-actions a, .rank-actions button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Form inputs: 16px font (iOS no-zoom) + 44px min-height --- */
@media (max-width: 860px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
}

/* --- Review page: fix rb-toc horizontal overflow (was 398px at 390 vw) --- */
@media (max-width: 860px) {
  .rb-toc {
    margin-left: 0;
    margin-right: 0;
    padding-left: 4px;
    padding-right: 4px;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Scroll-snap for the TOC pills so they feel premium */
  .rb-toc { scroll-snap-type: x proximity; }
  .rb-toc a { scroll-snap-align: start; }
  /* Review hero: logo tile sized + inline above h1 on mobile */
  .rh-logo, .rh-logo-tile {
    width: clamp(72px, 22vw, 96px);
    height: clamp(72px, 22vw, 96px);
    position: static !important;
    margin-bottom: 16px;
  }
  .rh-inner { display: flex; flex-direction: column; align-items: flex-start; }
  /* Tier + testi + feature cards collapse cleanly */
  .rb-tiers { grid-template-columns: 1fr !important; gap: 14px; }
  .rb-testi-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .rb-feat-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .rb-pricing-box { grid-template-columns: 1fr; }
}

/* --- Blog posts: wrap wide tables in a horizontal scroll container --- */
@media (max-width: 860px) {
  .ba-article table,
  .bl-body table,
  article table,
  .post-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
  }
  .ba-article img,
  .bl-body img { max-width: 100%; height: auto; border-radius: 10px; }
  .ba-article pre,
  .bl-body pre,
  article pre { overflow-x: auto; max-width: 100%; }
  .ba-article h1, .bl-body h1, article h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.12; word-break: break-word; }
  .ba-article h2, .bl-body h2, article h2 { font-size: clamp(24px, 6vw, 32px); line-height: 1.18; }
  .ba-article h3, .bl-body h3, article h3 { font-size: clamp(20px, 5vw, 26px); line-height: 1.2; }
  .ba-article p, .bl-body p, article p { font-size: 16px; line-height: 1.65; }
}

/* --- Hero h1 clamp at very small widths (prevent overflow at 360) --- */
@media (max-width: 440px) {
  .hero-h1 { font-size: clamp(36px, 10vw, 48px); line-height: 1.05; }
  .rh-inner h1 { font-size: clamp(32px, 9vw, 48px); line-height: 1.06; }
  .page-hero h1, .pg-hero h1, .ba-hero h1, .cmp-hero h1, .ft-hero h1 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.08; }
  .sec-head h2 { font-size: clamp(26px, 7vw, 38px); }
}

/* --- Drawer animation polish: softer curve, tiny settle --- */
@media (max-width: 860px) {
  .t10-drawer {
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .t10-scrim { transition: opacity 300ms ease; }
  /* Drawer items get an elegant staggered fade-in */
  .t10-drawer .t10-drawer-section { opacity: 0; transform: translateY(6px); transition: opacity 260ms ease 0ms, transform 260ms ease 0ms; }
  .t10-drawer.is-open .t10-drawer-section { opacity: 1; transform: none; }
  .t10-drawer.is-open .t10-drawer-section:nth-child(1) { transition-delay: 120ms; }
  .t10-drawer.is-open .t10-drawer-section:nth-child(2) { transition-delay: 170ms; }
  .t10-drawer.is-open .t10-drawer-section:nth-child(3) { transition-delay: 210ms; }
  .t10-drawer.is-open .t10-drawer-section:nth-child(4) { transition-delay: 250ms; }
  .t10-drawer.is-open .t10-drawer-cta { transition: opacity 300ms ease 300ms, transform 300ms ease 300ms; }
  .t10-drawer .t10-drawer-cta { opacity: 0; transform: translateY(6px); }
  .t10-drawer.is-open .t10-drawer-cta { opacity: 1; transform: none; }
  /* Make drawer links comfortable to tap */
  .t10-drawer-section a { padding: 12px 0; min-height: 48px; }
}

/* --- Active-state feedback on taps (subtle scale/opacity) --- */
@media (max-width: 860px) {
  .btn-primary:active, .btn-ghost:active, .btn-pill:active,
  .cmp-filter:active, .cmp-visit:active, .cmp-add:active,
  .cat-compare-btn:active, .rank-visit:active, .rank-review:active,
  .rank-short:active, .sc-cta:active,
  .t10-drawer-section a:active, .t10-drawer-cta:active,
  .hamburger:active, .t10-bn-item:active {
    transform: scale(0.97);
    transition: transform 90ms ease-out;
  }
}

/* --- Homepage hero lede + quiz CTA breathing room --- */
@media (max-width: 520px) {
  .hero-lede { font-size: 16px; line-height: 1.55; }
  .hero-trust { gap: 12px; }
  .quiz-card { padding: 18px; }
  .quiz-opts { grid-template-columns: 1fr !important; }
  .quiz-opts > * { min-height: 56px; font-size: 15px; }
  .quiz-progress { justify-content: center; }
}

/* --- Compare page hero stack + side-by-side cards --- */
@media (max-width: 860px) {
  .cmp-sbs-grid, .cmp-sidebyside, .cmp-sbs {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .cmp-sbs-card, .cmp-card { width: 100%; max-width: 100%; }
  .cmp-hero { padding: 48px 20px 28px; }
  .cmp-hero h1 { margin-top: 4px; }
}

/* --- Bottom-nav current-state: stronger visual --- */
@media (max-width: 720px) {
  .t10-bottom-nav { height: 64px; }
  .t10-bn-item {
    min-height: 56px;
    min-width: 44px;
    -webkit-tap-highlight-color: rgba(47, 76, 255, 0.08);
  }
  .t10-bn-item.is-current {
    color: var(--cobalt);
    background: rgba(47, 76, 255, 0.10);
    font-weight: 700;
  }
  .t10-bn-item.is-current .t10-bn-icon { transform: scale(1.08); }
  .t10-bn-icon { transition: transform 140ms ease; }
  /* Body padding already handled above, but reinforce for safe-area */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Marquee: ensure no horizontal page scroll regardless of track width --- */
@media (max-width: 860px) {
  .marquee, .marquee-outer { overflow: hidden; max-width: 100%; }
}

/* --- Category pages: rank card polish at 360px --- */
@media (max-width: 440px) {
  .rank-card { padding: 14px; gap: 10px; }
  .rank-card .rank-actions { gap: 6px; }
  .rank-card .rank-actions > * { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .rank-num { font-size: 28px; }
  .rank-brand { font-size: 18px; }
  .rank-tag { font-size: 14px; line-height: 1.4; }
}

/* --- Finder quiz: larger, warmer option buttons --- */
@media (max-width: 520px) {
  .quiz-option, .fnd-option, .qz-opt {
    min-height: 60px;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 14px;
  }
  .quiz-dots, .qz-dots { gap: 8px; }
  .quiz-dot, .qz-dot { width: 10px; height: 10px; }
}

/* --- Sticky compare bar: clean premium look on mobile --- */
@media (max-width: 720px) {
  .sticky-compare {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
    width: auto;
    padding: 10px 12px;
    border-radius: 18px;
    border-width: 2px;
    box-shadow: 0 12px 32px rgba(10,10,10,0.35);
  }
  .sticky-compare .sc-cta {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    min-height: 44px;
  }
  .sticky-compare .sc-close { width: 40px; height: 40px; font-size: 22px; }
  /* Entrance: slide up from below */
  @keyframes sc-enter-mobile {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .sticky-compare { animation: sc-enter-mobile 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-compare { animation: none !important; }
}

/* --- iPad portrait (768px): keep desktop layout but soften type --- */
@media (max-width: 860px) and (min-width: 720px) {
  .hero-h1 { font-size: clamp(56px, 8vw, 80px); }
  .rh-inner h1 { font-size: clamp(48px, 7vw, 64px); }
}

/* --- Last-resort: any element with inline width > viewport resets --- */
@media (max-width: 860px) {
  .rb-toc, .ba-toc { max-width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — premium patterns (glow-coded inspired)
   Homepage stops feeling like an endless vertical stack by switching the
   use-case bento + category cards to horizontal snap-scroll carousels
   on narrow screens. Cards are sized to feel like first-class "shelves".
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* ─── Use-case bento → horizontal snap-scroll carousel ─── */
  .usecase-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 82% !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad);
    padding: 4px var(--pad) 18px;
    margin: 0 calc(-1 * var(--pad));
    scrollbar-width: none;
  }
  .usecase-grid::-webkit-scrollbar { display: none; }
  .usecase-grid .uc-tile,
  .usecase-grid > * {
    scroll-snap-align: start;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px !important;
    width: 100% !important;
  }
  /* Give the section a "swipe →" affordance */
  .usecase::after {
    content: '← SWIPE →';
    display: block;
    text-align: center;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--muted);
    padding: 4px 0 20px;
  }

  /* ─── Category hubs → horizontal carousel too ─── */
  .categories-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 78% !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad);
    padding: 4px var(--pad) 18px;
    margin: 0 calc(-1 * var(--pad));
    scrollbar-width: none;
  }
  .categories-grid::-webkit-scrollbar { display: none; }
  .categories-grid > * {
    scroll-snap-align: start;
    min-height: 320px;
  }

  /* ─── Ranked list → keep vertical stack but make each card compact ─── */
  .rank-card {
    padding: 14px 14px 16px !important;
    gap: 12px !important;
  }
  .rank-num { font-size: 28px !important; }
  .rank-body h3 { font-size: 18px; margin: 0 0 4px; }
  .rank-body p { font-size: 13px; line-height: 1.4; margin: 0; }

  /* ─── Articles grid → horizontal carousel ─── */
  .article-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 82% !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad);
    padding: 4px var(--pad) 18px;
    margin: 0 calc(-1 * var(--pad));
    scrollbar-width: none;
  }
  .article-grid::-webkit-scrollbar { display: none; }
  .article-grid > * {
    scroll-snap-align: start;
  }

  /* ─── Section header: big editorial number + tighter heading ─── */
  .sec-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 40px var(--pad) 20px;
  }
  .sec-num {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--cobalt);
    font-weight: 700;
    padding-top: 4px;
  }
  .sec-head h2 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .sec-head h2 em {
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--cobalt);
  }

  /* ─── Free-tools grid: compact 1-col but with snappy visuals ─── */
  #ft-mount .ft-grid,
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ft-card,
  .ft-card-hero {
    min-height: 160px !important;
    padding: 22px 20px !important;
    grid-column: span 1 !important;
  }
  .ft-card-title {
    font-size: 22px !important;
    line-height: 1.1;
  }
  .ft-card-tag {
    font-size: 14px !important;
    line-height: 1.4;
  }
  .ft-card-foot { font-size: 12px; }

  /* ─── Editorial "eyebrow / number / heading" rhythm on hero ─── */
  .hero-strap {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--cobalt);
    padding: 0 var(--pad);
  }
  .hero-h1 {
    font-size: clamp(36px, 10vw, 56px) !important;
    line-height: 0.95;
    letter-spacing: -0.025em;
    padding: 12px var(--pad) 0;
  }
  .hero-lead {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.45;
    padding: 14px var(--pad) 0;
  }
  .hero-buttons {
    padding: 20px var(--pad) 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero-buttons > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-trust {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    padding: 24px var(--pad) 0;
  }
  .hero-trust .trust-item strong {
    font-size: 24px !important;
    display: block;
  }
  .hero-trust .trust-item span {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ─── Marquee — bigger on mobile so it reads like a proper banner ─── */
  .marquee { padding: 14px 0 !important; }
  .marquee-track {
    animation-duration: 26s !important;
    font-size: 15px !important;
  }

  /* ─── Compact final CTA band ─── */
  .final-cta, .final-cta-band {
    padding: 56px var(--pad) 72px !important;
  }
  .final-cta h2, .final-cta-band h2 {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1 !important;
  }
}

/* Extra-small phones: the carousels should feel card-width matches viewport */
@media (max-width: 420px) {
  .usecase-grid { grid-auto-columns: 85% !important; }
  .categories-grid { grid-auto-columns: 82% !important; }
  .article-grid { grid-auto-columns: 85% !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE v3 — PREMIUM REBUILD (April 2026)
   ═════════════════════════════════════════════════════════════════════════
   Goal: make the 390-wide experience feel like a native app, not a squished
   desktop. Studied glow-coded.com and borrowed: calm vertical rhythm,
   micro-mono eyebrows, clean 1px hairline bars (no shadows), scroll-fade
   edges on shelves, tight card-snap, and a flat-but-crisp tab bar with
   an animated active pill + dot indicator.

   Every rule here is gated under @media (max-width: 860|720|520|440).
   Desktop is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

  /* ── BOTTOM NAV ───────────────────────────────────────────────────────
     Native feel: paper cream surface, 1px ink hairline top (no blurry
     shadow), per-tab "pill" that scales in under the icon when active,
     6px cobalt indicator dot underneath the label. Tapping scales the
     whole tab 96% for haptic feel. Safe-area inset honored. */
  .t10-bottom-nav {
    height: auto !important;
    min-height: 64px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--paper) !important;
    border-top: 1px solid var(--ink) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(1.2);
            backdrop-filter: saturate(1.2);
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .t10-bn-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px 4px !important;
    min-height: 58px;
    background: transparent !important;
    color: var(--ink-2) !important;
    border: 0 !important;
    border-radius: 14px;
    isolation: isolate;
    transition: transform 180ms cubic-bezier(.2,.9,.3,1.1),
                color 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .t10-bn-item.is-press { transform: scale(.94); }

  /* No pill background — keep icon + label in plain ink on current tab.
     The only active indicator is the cobalt dot below the label. */
  .t10-bn-pill { display: none !important; }

  .t10-bn-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: currentColor;
    transition: color 180ms ease;
  }
  .t10-bn-icon svg { display: block; }
  .t10-bn-item.is-current .t10-bn-icon { color: var(--ink); }
  .t10-bn-item.is-current { color: var(--ink) !important; }

  .t10-bn-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    color: var(--ink-2);
    transition: color 180ms ease, transform 220ms ease;
  }
  .t10-bn-item.is-current .t10-bn-label {
    color: var(--ink);
    transform: translateY(1px);
  }

  /* The active-route indicator: a small cobalt dot BELOW the label. */
  .t10-bn-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--cobalt);
    transform: translate(-50%, 4px) scale(0);
    opacity: 0;
    transition: transform 260ms cubic-bezier(.2,.9,.3,1.3), opacity 220ms ease;
  }
  .t10-bn-item.is-current::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  /* ── HAMBURGER (mobile button) ────────────────────────────────────────
     Cleaner geometry: circular ink ring, centered stack, press-scale. */
  .hamburger {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1.25px solid var(--ink) !important;
    background: var(--paper) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0 !important;
    transition: transform 160ms cubic-bezier(.2,.9,.3,1.1),
                background-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger:active { transform: scale(.93); background: var(--paper-2) !important; }
  .hamburger span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--ink);
    border-radius: 1px;
    transition: transform 220ms cubic-bezier(.2,.9,.3,1.1), opacity 180ms ease;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ── HEADER MOBILE TRIM ───────────────────────────────────────────────
     Slightly tighter, hairline bottom not 2px, subtle stick. */
  .site-header {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--ink) !important;
    background: color-mix(in srgb, var(--paper) 92%, transparent) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
            backdrop-filter: saturate(1.2) blur(8px);
  }

  /* ── DRAWER ───────────────────────────────────────────────────────────
     Premium easing, deeper shadow, tighter radius on left edge,
     scrim gets a blur so the content behind recedes. */
  .t10-scrim {
    background: rgba(10, 10, 10, 0.42) !important;
    -webkit-backdrop-filter: blur(6px) saturate(.92);
            backdrop-filter: blur(6px) saturate(.92);
    transition: opacity 320ms cubic-bezier(.2,.9,.3,1) !important;
  }
  .t10-drawer {
    width: min(86vw, 360px) !important;
    background: var(--paper) !important;
    border-left: 1px solid var(--ink) !important;
    box-shadow: -24px 0 60px -24px rgba(10,10,10,.35),
                -8px 0 24px -12px rgba(10,10,10,.18) !important;
    border-radius: 0 !important;
    transition: transform 360ms cubic-bezier(.22,.9,.28,1.02) !important;
  }
  .t10-drawer-head {
    border-bottom: 1px solid var(--ink) !important;
    padding: 14px 16px !important;
  }
  .t10-drawer-close {
    width: 40px; height: 40px;
    border-radius: 999px !important;
    border: 1.25px solid var(--ink) !important;
    background: var(--paper) !important;
    font-size: 22px;
    line-height: 1;
    transition: transform 160ms cubic-bezier(.2,.9,.3,1.1), background-color 200ms ease;
  }
  .t10-drawer-close:active { transform: scale(.93); background: var(--paper-2) !important; }
  .t10-drawer-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    color: var(--ink-2);
    opacity: .6;
  }
  .t10-drawer-section a {
    padding: 11px 0 !important;
    font-size: 16.5px !important;
    letter-spacing: -0.01em !important;
  }

  /* ── SECTION RHYTHM & EYEBROWS ────────────────────────────────────────
     Glow-coded's "01 / 19 POSTS" eyebrow + calm section gap. Use for
     any .section-eyebrow element we wire into templates, and auto-apply
     softly via shelf headers. */
  .section-eyebrow,
  .shelf-head .shelf-num,
  .mobile-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    opacity: .72;
  }

  /* Card shelves — scroll-fade edges for depth, tight snap */
  .usecase-grid,
  .categories-grid,
  .article-grid,
  .bento-grid[data-scroll="x"] {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .usecase-grid > *,
  .categories-grid > *,
  .article-grid > * { scroll-snap-align: start; }

  /* ── STICKY COMPARE interplay with bottom nav ─────────────────────────
     Currently rides above the bottom nav via bottom:80px. Raise it 4px
     and give it the same hairline + flat aesthetic to match. */
  .sticky-compare {
    bottom: 76px !important;
    border: 1px solid var(--ink) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px -12px rgba(10,10,10,.35), 0 2px 6px -2px rgba(10,10,10,.15) !important;
  }

  /* ── TYPE SCALE TUNE ──────────────────────────────────────────────────
     Bring mobile H1/H2 closer to glow-coded's confident display rhythm.
     Use .mobile-tune class for opt-in, AND set baseline for `.page-hero h1`. */
  .page-hero h1,
  .hero h1,
  h1.display {
    font-size: clamp(40px, 11.2vw, 52px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.018em !important;
  }
  .page-hero .subhead,
  .hero .subhead {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  /* Breadcrumb softer */
  .breadcrumb,
  .crumbs {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    opacity: .7;
  }

  /* Give bottom sticky elements safe padding at very bottom of body */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body:has(#sticky-compare) { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 520px) {
  /* Tighten bottom nav even more on narrow phones */
  .t10-bn-label { font-size: 9px !important; letter-spacing: 0.09em; }
  .t10-bn-pill  { width: 48px; height: 30px; }
  .t10-bn-icon  { width: 20px; height: 20px; }
  .t10-bn-icon svg { width: 20px; height: 20px; }

  /* Hero type scales down gracefully */
  .page-hero h1,
  .hero h1,
  h1.display { font-size: clamp(36px, 10.2vw, 46px) !important; }
}

@media (max-width: 440px) {
  .t10-bn-pill  { width: 44px; height: 28px; border-radius: 14px; }
  .t10-bn-item  { padding: 5px 2px 3px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .t10-bn-item, .t10-bn-pill, .t10-bn-icon, .t10-bn-item::after,
  .hamburger, .hamburger span, .t10-drawer, .t10-scrim,
  .t10-drawer-close { transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE — compare table row + homepage categories DENSITY fix
   Problems being fixed:
     1. Compare-table cards had name text wrapping one-word-per-line
        because the score bar column squeezed the name column to 130px.
     2. Homepage "Four categories" section stacked 4 big cards × 3 tools
        each = 12+ rows of vertical scroll.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* ─── Compare table row: full-width stacked card ─── */
  .cmp-table tr {
    display: block !important;
    padding: 14px !important;
    gap: 0 !important;
  }
  .cmp-table .cmp-brand {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 8px;
  }
  .cmp-table .cmp-brand-logo,
  .cmp-table .cmp-brand-mark {
    width: 44px !important;
    height: 44px !important;
    grid-row: 1;
    grid-column: 1;
  }
  .cmp-table .cmp-brand > div:not(.cmp-brand-logo):not(.cmp-brand-mark) {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
  }
  .cmp-table .cmp-brand > div > a {
    display: block;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cmp-table .cmp-brand > div > div {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
    margin-top: 2px;
    /* allow 2 lines then ellipsis, no word-break */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Score → sits as a compact chip next to name (grid col 3) */
  .cmp-table td:nth-child(3) {
    grid-area: unset !important;
    position: absolute;
    top: 12px;
    right: 14px;
  }
  .cmp-table tr { position: relative !important; }
  .cmp-score {
    font-size: 20px !important;
    gap: 6px !important;
  }
  .cmp-bar-viz { width: 40px !important; }

  /* Category chip + pricing row */
  .cmp-table td:nth-child(2) {
    grid-area: unset !important;
    display: inline-block;
    margin-right: 10px;
  }
  .cmp-table td:nth-child(4) {
    grid-area: unset !important;
    display: inline-block;
  }
  .cmp-cat {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    background: var(--paper-2);
    border-radius: 999px;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* Action row — + Add + Visit side by side, full-width */
  .cmp-table td:nth-child(5),
  .cmp-table td:nth-child(6) {
    grid-area: unset !important;
    display: inline-block;
    margin-top: 10px;
  }
  .cmp-table td:nth-child(5) { margin-right: 8px; }
  .cmp-table .cmp-add,
  .cmp-table .cmp-visit {
    padding: 10px 16px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
  }

  /* ─── Homepage categories section: tabbed picker ─── */
  /* The 4 category cards (Video/Image/Logo/Website) each listing 3 tools
     = a 12-row stack on mobile. Compact into a horizontal pill row
     of 4 tabs + one active card showing below — via CSS scroll-snap so
     no JS needed; each card acts as a "slide" and taps flow through. */
  .categories-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .categories-grid > * {
    width: 100% !important;
    min-height: 0 !important;
    scroll-snap-align: unset !important;
  }
  /* Collapse each category card — smaller hero + condensed top 3 list */
  .cat-card {
    margin-bottom: 14px;
    border-radius: 16px;
    overflow: hidden;
  }
  .cat-head {
    padding: 16px 18px !important;
  }
  .cat-title {
    font-size: 22px !important;
    line-height: 1.1;
    margin: 2px 0 !important;
  }
  .cat-badge {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    padding: 2px 8px !important;
  }
  .cat-count {
    font-size: 11px !important;
  }
  /* Top-3 list inside each cat-card: use a 3-row compact layout */
  .cat-row {
    display: grid !important;
    grid-template-columns: 20px 1fr auto !important;
    gap: 10px !important;
    padding: 10px 18px !important;
    align-items: center !important;
    border-top: 1px solid rgba(10, 10, 10, 0.08);
  }
  .cat-row .cr-num {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--muted);
    grid-column: 1;
  }
  .cat-row .cr-name {
    font-size: 15px;
    font-weight: 600;
    grid-column: 2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cat-row .cr-score {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 14px;
    grid-column: 3;
  }
  /* "Visit" / "Editor's pick" chip hidden on mobile — too cramped */
  .cat-row .cr-pick,
  .cat-row .cr-visit {
    display: none !important;
  }
  .cat-card .cat-foot {
    padding: 10px 18px 14px !important;
  }
  .cat-card .cat-foot a {
    font-size: 13px !important;
  }
}

/* Extra-narrow phones: loosen further */
@media (max-width: 380px) {
  .cmp-table td:nth-child(3) { top: 10px; right: 10px; }
  .cmp-score { font-size: 18px !important; }
  .cmp-bar-viz { display: none !important; }  /* score number only, no bar */
  .cmp-table .cmp-brand > div > a { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sort as segmented chips — replaces the old <select>
   ═══════════════════════════════════════════════════════════════════ */
.cmp-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.cmp-sort-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmp-sort-chips {
  display: inline-flex;
  padding: 4px;
  background: rgba(10,10,10,0.05);
  border-radius: 999px;
  gap: 2px;
}
.cmp-sort-chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  min-height: 34px;
  white-space: nowrap;
}
.cmp-sort-chip:hover { color: var(--ink); }
.cmp-sort-chip:active { transform: scale(0.97); }
.cmp-sort-chip.on {
  background: var(--ink);
  color: var(--citrus);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(10,10,10,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage compare — "See all" CTA below the 8-row preview table
   ═══════════════════════════════════════════════════════════════════ */
.cmp-home-foot {
  display: flex;
  justify-content: center;
  padding: 22px 0 4px;
}
.cmp-home-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--citrus);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(10,10,10,0.12);
}
.cmp-home-all:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,10,10,0.18); }
@media (max-width: 760px) {
  .cmp-home-foot { padding: 18px 14px 8px; }
  .cmp-home-all { padding: 14px 24px; font-size: 11px; width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Sticky shortlist bar — logo chips instead of letter initials
   ═══════════════════════════════════════════════════════════════════ */
.sticky-compare .sc-item-logo {
  background: var(--paper) !important;
  border: 2px solid var(--paper) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: inline-grid !important;
  place-items: center !important;
}
.sticky-compare .sc-item-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}
.sticky-compare .sc-items { gap: -6px; display: inline-flex; }
.sticky-compare .sc-item + .sc-item { margin-left: -8px; }

@media (max-width: 760px) {
  .sticky-compare {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .sticky-compare .sc-label {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }
  .sticky-compare .sc-cta {
    font-size: 12px !important;
    padding: 9px 16px !important;
    flex: 1 1 auto;
    text-align: center;
    max-width: 60%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Quick finder footer link — clean pill instead of raw underlined <a>
   ═══════════════════════════════════════════════════════════════════ */
.qf-foot { text-align: center !important; padding: 8px 0 0 !important; }
.qf-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--citrus);
  text-decoration: none;
  border: 1px solid rgba(232, 255, 90, 0.35);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.qf-foot-link:hover {
  background: var(--citrus);
  color: var(--ink);
  border-color: var(--citrus);
  transform: translateY(-1px);
}
.qf-foot-link span {
  font-weight: 700;
  transition: transform 0.15s;
}
.qf-foot-link:hover span { transform: translateX(2px); }

/* ═══════════════════════════════════════════════════════════════════
   Homepage category cards — logo tile + cleaner row layout
   ═══════════════════════════════════════════════════════════════════ */
.cat-card .cat-count { display: none !important; }

.cat-row {
  display: grid !important;
  grid-template-columns: 22px 56px minmax(0, 1fr) auto auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 14px 20px !important;
}
.cat-logo {
  width: 56px; height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(10,10,10,0.08);
  flex-shrink: 0;
}
.cat-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}
.cat-logo-fallback {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  padding: 0;
}
.cat-row-body { min-width: 0; }
.cat-brand-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.cat-brand-name a { color: inherit; text-decoration: none; }
.cat-brand-name a:hover { text-decoration: underline; }
.cat-brand-badge {
  font-family: var(--ff-mono);
  font-size: 9px;
  background: var(--citrus);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.cat-brand-desc {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: rgba(10,10,10,0.58) !important;
  margin-top: 3px;
  letter-spacing: 0.015em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.cat-price {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: rgba(10,10,10,0.58) !important;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Rows sit on a cream background regardless of the parent card's fg attr —
   force readable ink-muted text even on data-fg="paper" cards. */

@media (max-width: 760px) {
  .cat-row {
    grid-template-columns: 60px 1fr auto !important;
    grid-template-areas:
      "logo body  visit"
      "logo price visit" !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    padding: 16px 16px !important;
    align-items: center !important;
    position: relative;
  }
  /* Hide rank numbers on mobile — vertical position already conveys ranking.
     Keeps rows cleaner and lets the logo+name+desc breathe. */
  .cat-row .cat-rank { display: none !important; }
  .cat-logo {
    grid-area: logo !important;
    align-self: center !important;
    width: 60px !important; height: 60px !important;
    border-radius: 12px !important;
  }
  .cat-logo img { padding: 6px !important; }
  .cat-row-body {
    grid-area: body !important;
    align-self: end !important;
    display: flex; flex-direction: column; gap: 2px;
  }
  .cat-brand-name { font-size: 14px !important; }
  .cat-brand-desc {
    font-size: 11.5px !important;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(10,10,10,0.6) !important;
    line-height: 1.35;
  }
  .cat-price {
    grid-area: price !important;
    align-self: start !important;
    font-size: 11px !important;
    color: rgba(10,10,10,0.58) !important;
    margin-top: 0 !important;
  }
  .cat-visit {
    grid-area: visit !important;
    align-self: center !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: var(--ink) !important;
    color: var(--citrus) !important;
    text-decoration: none !important;
    white-space: nowrap;
    letter-spacing: 0.04em;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Language switcher — sits in header-right before the Find-my-tool pill
   ═══════════════════════════════════════════════════════════════════ */
.t10-lang {
  position: relative;
  display: inline-block;
}
.t10-lang-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.t10-lang-toggle::-webkit-details-marker { display: none; }
.t10-lang-toggle:hover { background: var(--ink); color: var(--paper); }
.t10-lang[open] .t10-lang-toggle { background: var(--ink); color: var(--paper); }
.t10-lang-flag { letter-spacing: 0.05em; }
.t10-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(10,10,10,0.18);
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.t10-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: 13px;
  transition: background 0.12s;
}
.t10-lang-item:hover { background: rgba(10,10,10,0.06); }
.t10-lang-item-current { background: var(--citrus); }
.t10-lang-item-current:hover { background: var(--citrus); }
.t10-lang-code {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  min-width: 22px;
}
.t10-lang-item-current .t10-lang-code { color: var(--ink); }
.t10-lang-name {
  font-weight: 500;
  font-size: 13px;
}
html[dir="rtl"] .t10-lang-menu { right: auto; left: 0; }

@media (max-width: 760px) {
  .t10-lang-toggle { padding: 7px 10px; font-size: 10px; }
  .t10-lang-menu {
    min-width: 200px;
    grid-template-columns: 1fr;
    right: -12px;
  }
  .t10-lang-item { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Live-WP cleanup: hide old plugin UI that's not part of the redesign
   ═══════════════════════════════════════════════════════════════════ */
/* Cookie consent banner (hu-wrapper etc.) */
.hu-wrapper,
.hu-info,
#hu-cookies-info,
[class*="cookie-notice"],
[class*="cookie-consent"],
.cn-set-cookie,
.cookie-notice-revoke-container,
.hu-trigger-button,
.openModalcookie,
.cli-bar-container,
.cli-modal,
#cookie-notice,
.hu-container,
.huWrap {
  display: none !important;
  visibility: hidden !important;
}

/* Hello-Elementor / WP theme remnants that leak through on overlaid pages */
body.t10-overlay-active .elementor-location-header,
body.t10-overlay-active .elementor-location-footer,
body.t10-overlay-active > header:not([id="site-header"]),
body.t10-overlay-active > footer:not([id="site-footer"]),
body.t10-overlay-active .page-header,
body.t10-overlay-active .site-header:not(#site-header),
body.t10-overlay-active .site-footer:not(#site-footer),
body.t10-overlay-active .all-articles-cta {
  display: none !important;
}

/* Any stray WP-injected margin-top on body (admin bar on logged-in etc.) */
html.t10-overlay-active, body.t10-overlay-active {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Force: hide WP theme's header/footer wrappers completely on overlaid pages */
body.t10-overlay-active header[class*="site"]:not(#site-header),
body.t10-overlay-active .header.elementor-section,
body.t10-overlay-active .elementor-location-header,
body.t10-overlay-active header[data-elementor-type="header"],
body.t10-overlay-active .ast-primary-header-bar,
body.t10-overlay-active .ast-below-header,
body.t10-overlay-active nav[class*="hello-"]:not(.nav),
body.t10-overlay-active > div[class*="elementor"] > header,
body.t10-overlay-active .hu-wrapper,
body.t10-overlay-active .elementor-kit-* {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Kill any border-bottom on elements above main */
body.t10-overlay-active main#main { border-top: 0 !important; }
body.t10-overlay-active main#main ~ * { border: 0 !important; }
/* Strong: no element before main should add to height */
body.t10-overlay-active #site-header ~ * { border-top: 0 !important; }
/* Belt and suspenders: hide any WP admin bar */
body.t10-overlay-active #wpadminbar { display: none !important; }
html.t10-overlay-active { margin-top: 0 !important; }

/* Kill stray border/shadow on the site-header that hello-elementor injects */
body.t10-overlay-active .site-header,
body.t10-overlay-active header#site-header,
body.t10-overlay-active header.site-header {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: var(--paper) !important;
  padding: 18px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.t10-overlay-active .site-header::after,
body.t10-overlay-active .site-header::before {
  display: none !important;
}
/* Any elementor injected header wrappers */
body.t10-overlay-active .elementor-section-wrap > section[data-element_type="container"]:first-of-type,
body.t10-overlay-active div.elementor-location-header {
  display: none !important;
}