/* compare.css — shared layout for /compare/*.
   Lifted out of compare/supabase.html, which carried this inline along with a
   hand-rolled header and footer. There are five of these pages now; the fifth
   time you paste a stylesheet is the point where it should have been a file.
   The header/footer rules are NOT here — these pages use the real site chrome
   (#site-header / #site-footer + site.js) like every other page. */

.cmp { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.cmp-hero { text-align: center; padding: 56px 20px 8px; }
.cmp-hero h1 { font-size: clamp(30px, 5.2vw, 48px); line-height: 1.06; letter-spacing: -.02em; }
.cmp-hero .vs { color: var(--accent); }
.cmp-hero p { color: var(--txt2); font-size: 17px; max-width: 640px; margin: 16px auto 0; }
.cmp-note { font-size: 12.5px; color: var(--txt3); margin-top: 12px; }
.cmp h2 { font-size: clamp(22px, 3.2vw, 30px); letter-spacing: -.02em; margin: 52px 0 6px; }
.cmp .lead { color: var(--txt2); font-size: 15px; margin: 0 0 20px; }

/* quick answer */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .qa { grid-template-columns: 1fr; } }
.qa .card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; }
.qa .card.c { border-color: rgba(190, 242, 100, .35); }
.qa h3 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.qa ul { list-style: none; padding: 0; margin: 0; }
.qa li { position: relative; padding: 6px 0 6px 24px; font-size: 14px; color: var(--txt2); line-height: 1.4; }
.qa li::before { content: "›"; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }

/* COMPARISON MARKS. This table was built from ✅ ❌ ⚠ 🔜 — another vendor's
   coloured artwork, at another vendor's weight, in a table whose entire job is
   to look credible standing next to the thing it compares against. Emoji are
   the single loudest "assembled, not designed" tell, and they render
   differently on every OS, so the page can't even be trusted to look the same
   twice. These are typographic marks in our own palette: ✓ and ✕ are dingbats,
   not emoji, and ✓ is already the site's convention (.tier li, .flist li). */
.mk { font-weight: 700; font-style: normal; }
.mk.y { color: var(--accent2); }
.mk.n { color: var(--txt3); }
.mk.p { color: var(--accent4); }

/* feature table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
table.cmp-tbl { width: 100%; border-collapse: collapse; min-width: 520px; }
table.cmp-tbl th, table.cmp-tbl td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
table.cmp-tbl thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--txt3); background: var(--surface2); }
table.cmp-tbl th:first-child { width: 44%; color: var(--txt2); font-weight: 500; }
table.cmp-tbl td { color: var(--txt); font-family: 'DM Mono', monospace; }
table.cmp-tbl tr:last-child td { border-bottom: none; }
.col-cresco { color: var(--accent) !important; }

/* workflow side-by-side */
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; } }
.flow .side { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.flow .side.c { border-color: rgba(190, 242, 100, .35); }
.flow h3 { font-size: 15px; margin: 0 0 4px; }
.flow .tag { font-size: 12px; color: var(--txt3); margin: 0 0 16px; }
.flow ol { margin: 0; padding-left: 20px; }
.flow li { font-size: 14px; color: var(--txt2); line-height: 1.5; margin: 0 0 9px; }
.flow code { background: var(--surface3, #222226); color: var(--accent); padding: 2px 7px; border-radius: var(--r-xs); font-size: 13px; }

.cmp img.shot-img { width: 100%; border: 1px solid var(--border); border-radius: var(--r); margin: 14px 0; display: block; }

.concl { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; margin-top: 22px; }
.concl p { color: var(--txt2); font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.concl p:last-child { margin-bottom: 0; }

.cta { text-align: center; padding: 44px 20px 20px; }
.cta .cmd { display: inline-block; background: var(--surface3, #222226); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 18px; font-family: 'DM Mono', monospace; color: var(--accent); font-size: 15px; margin: 14px 0; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* "other comparisons" rail — the reason these pages exist as a SET rather than
   five orphans. Every page links to the other four, so a crawler that finds one
   finds all of them, and a reader who picked the wrong one can leave sideways
   instead of bouncing. */
.cmp-more { border-top: 1px solid var(--border); margin-top: 56px; padding-top: 28px; }
.cmp-more h2 { font-size: 18px; margin: 0 0 14px; }
.cmp-more .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.cmp-more a { display: block; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 13px 15px; text-decoration: none; color: var(--txt); font-size: 14px; font-weight: 600; transition: border-color .15s; }
.cmp-more a:hover { border-color: rgba(190, 242, 100, .35); }
.cmp-more a span { display: block; color: var(--txt3); font-size: 12.5px; font-weight: 400; margin-top: 3px; }

/* index page at /compare */
.cmp-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 28px; }
.cmp-index a { display: block; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 22px; text-decoration: none; transition: border-color .15s; }
.cmp-index a:hover { border-color: rgba(190, 242, 100, .35); }
.cmp-index h3 { font-size: 17px; margin: 0 0 8px; color: var(--txt); }
.cmp-index p { font-size: 14px; color: var(--txt2); line-height: 1.55; margin: 0; }
.cmp-index .verdict { display: block; margin-top: 12px; font-size: 12.5px; color: var(--accent); font-family: 'DM Mono', monospace; }