/* ============================================================
   Little Bean · Direction 2 (Framer) — comparison pages
   Builds on base.css + pages.css. Powers compare.html (hub)
   and the per-competitor head-to-head pages.
   ============================================================ */

/* ---- Hero: trim the display scale so long competitor names never
   crowd the lede (and never overlap in print / screenshot capture) ---- */
.page-hero .page-h { font-size: clamp(40px, 6.2vw, 80px); line-height: 1.0; }
.page-hero .page-lede { margin-top: 22px; }

/* ---- Intro / lede block under the hero ---- */
.cmp-intro { max-width: 60ch; margin: 22px auto 0; font-size: 17px; line-height: 1.6; color: var(--lb-mute); text-align: center; }
.cmp-intro b { color: var(--lb-ink); font-weight: 600; }

/* ---- Comparison table ---- */
.ctable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--lb-r-xl); }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 15.5px; }
.ctable.master { min-width: 880px; }

.ctable th, .ctable td { padding: 16px 18px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--lb-line); }
.ctable thead th { position: sticky; top: 0; }

/* Feature (first) column */
.ctable .feat { text-align: left; font-weight: 500; color: var(--lb-ink); width: 30%; white-space: normal; }
.ctable .feat .sub { display: block; font-family: var(--lb-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--lb-mute); margin-top: 3px; font-weight: 400; }

/* Column headers */
.ctable thead th { background: var(--lb-cream); font-family: var(--lb-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-mute); font-weight: 500; padding-top: 22px; padding-bottom: 22px; }
.ctable thead th.us { color: var(--lb-moss-900); }
.ctable thead .col-name { display: block; font-family: var(--lb-font-display); font-synthesis: none; font-weight: 400; font-size: 22px; letter-spacing: -0.01em; text-transform: none; color: var(--lb-moss-900); margin-bottom: 2px; }
.ctable thead th.us .col-name { color: var(--lb-moss-900); }
.ctable thead .col-tag { font-family: var(--lb-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lb-terra-700); }

/* Highlighted Little Bean column */
.ctable .us { background: color-mix(in srgb, var(--lb-moss-100) 55%, var(--lb-paper)); }
.ctable thead th.us { background: color-mix(in srgb, var(--lb-moss-100) 70%, var(--lb-cream)); border-top: 3px solid var(--lb-terra-500); border-top-left-radius: var(--lb-r-md); border-top-right-radius: var(--lb-r-md); }
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable tbody tr:last-child .us { border-bottom-left-radius: var(--lb-r-md); border-bottom-right-radius: var(--lb-r-md); }

/* Yes / No / Partial marks */
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.mark svg { width: 17px; height: 17px; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mark.yes { background: var(--lb-moss-700); color: #fff; }
.mark.no { background: transparent; color: var(--lb-line-2); border: 1.5px solid var(--lb-line-2); }
.mark.part { background: var(--lb-terra-100); color: var(--lb-terra-700); }
.us .mark.yes { background: var(--lb-moss-900); }

.cell-note { display: block; font-family: var(--lb-font-mono); font-size: 11px; letter-spacing: 0.01em; color: var(--lb-mute); margin-top: 7px; line-height: 1.35; }
.cell-price { font-family: var(--lb-font-mono); font-size: 13px; line-height: 1.45; color: var(--lb-ink); }
.us .cell-price { color: var(--lb-moss-900); font-weight: 500; }

.ctable-foot { text-align: center; margin-top: 18px; font-family: var(--lb-font-mono); font-size: 11.5px; line-height: 1.6; color: var(--lb-mute); letter-spacing: 0.01em; }
.ctable-foot a { color: var(--lb-moss-700); border-bottom: 1px solid var(--lb-line-2); }

/* ---- Competitor cards (hub) ---- */
.cmp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cmp-card { display: flex; flex-direction: column; border: 1px solid var(--lb-line); border-radius: var(--lb-r-xl); background: var(--lb-paper); padding: 28px 28px 26px; transition: transform .25s var(--lb-ease), box-shadow .25s var(--lb-ease), border-color .25s var(--lb-ease); }
.cmp-card:hover { transform: translateY(-4px); box-shadow: var(--lb-shadow-3); border-color: var(--lb-line-2); }
.cmp-card .vs { font-family: var(--lb-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lb-terra-700); }
.cmp-card .cn { font-family: var(--lb-font-display); font-synthesis: none; font-weight: 400; font-size: 28px; line-height: 1.04; letter-spacing: -0.01em; color: var(--lb-moss-900); margin: 8px 0 0; }
.cmp-card .cx { font-size: 14.5px; line-height: 1.6; color: var(--lb-mute); margin: 12px 0 20px; }
.cmp-card .go { margin-top: auto; font-family: var(--lb-font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--lb-moss-700); display: inline-flex; align-items: center; gap: 8px; }
.cmp-card:hover .go { color: var(--lb-moss-900); }
.cmp-card.muted { background: color-mix(in srgb, var(--lb-cream) 60%, var(--lb-paper)); }
.cmp-card.muted .cn { color: var(--lb-ink); }

/* ---- "Where they're strong" fairness block ---- */
.fair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fair-col { border-radius: var(--lb-r-xl); padding: 30px 30px 28px; border: 1px solid var(--lb-line); }
.fair-col.them { background: var(--lb-paper); }
.fair-col.us { background: color-mix(in srgb, var(--lb-moss-100) 50%, var(--lb-paper)); border-color: color-mix(in srgb, var(--lb-moss-300) 60%, var(--lb-line)); }
.fair-col h3 { font-family: var(--lb-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lb-terra-700); margin: 0 0 18px; font-weight: 500; }
.fair-col.us h3 { color: var(--lb-moss-700); }
.fair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fair-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--lb-ink); }
.fair-list li svg { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fair-col.them .fair-list li svg { color: var(--lb-terra-500); }
.fair-col.us .fair-list li svg { color: var(--lb-moss-700); }
.fair-list li b { font-weight: 600; color: var(--lb-moss-900); }

/* ---- Verdict line ---- */
.verdict { max-width: 64ch; margin: 0 auto; text-align: center; font-size: 19px; line-height: 1.6; color: var(--lb-ink); }
.verdict em { font-family: var(--lb-font-display); font-style: italic; color: var(--lb-terra-500); }

/* ---- Section spacing helper ---- */
.section { padding: 72px 0; }
.section.tight { padding: 40px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head .eyebrow { color: var(--lb-terra-700); margin-bottom: 14px; }

/* ---- noindex reviewer flag ---- */
.noindex-flag { background: var(--lb-ink); color: var(--lb-cream); font-family: var(--lb-font-mono); font-size: 11px; letter-spacing: 0.04em; text-align: center; padding: 7px 16px; }

@media (max-width: 860px) {
  .cmp-cards { grid-template-columns: 1fr 1fr; }
  .fair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cmp-cards { grid-template-columns: 1fr; }
}