/* Shared styles for Make My MVP comparison pages (JS-free) */
:root{
  --ink:#0A0A0B; --ink-soft:#16161A; --ink-card:#1C1C22;
  --ink-2:#5A574F; --body:#2A2823;
  --paper:#F6F4EF; --paper-2:#EFEDE6; --card:#FFFFFF;
  --accent:#FF5A1F; --accent-press:#E84A12; --accent-soft:#FFE7DC;
  --green:#1FA463; --red:#C0392B;
  --line:rgba(10,10,11,.10); --line-d:rgba(255,255,255,.12);
  --txt-light:#F6F4EF; --txt-light-2:rgba(246,244,239,.62);
  --maxw:980px; --r:16px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.display{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-0.015em;line-height:1.04}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
strong{font-weight:600;color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px;padding:15px 26px;border-radius:var(--r-pill);min-height:52px;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(255,90,31,.28)}
.btn-primary:hover{background:var(--accent-press);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(10,10,11,.04);transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line-d)}
.btn-light:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(246,244,239,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.02em}
.brand svg{display:block;flex:none}
.nav .btn{min-height:42px;padding:10px 18px;font-size:14.5px}
.nav .crumb{font-size:14px;color:var(--ink-2);font-weight:500}
.nav .crumb:hover{color:var(--accent);text-decoration:none}
@media(max-width:560px){.nav .crumb{display:none}}

/* hero */
.chero{padding:64px 0 48px;text-align:center;position:relative;overflow:hidden}
.chero .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.matchup{display:inline-flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap;justify-content:center}
.vchip{display:inline-flex;align-items:center;font-weight:700;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);padding:11px 20px;border-radius:var(--r-pill);box-shadow:0 1px 2px rgba(10,10,11,.04)}
.vchip.alt{background:var(--ink);color:#fff;border-color:var(--ink)}
.vs{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--ink-2)}
.chero h1{font-size:clamp(30px,5.2vw,50px);color:var(--ink);margin-bottom:18px}
.chero h1 .hl{color:var(--accent);font-style:italic;font-weight:400}
.chero .sub{font-size:clamp(16px,2.2vw,20px);color:var(--ink-2);max-width:680px;margin:0 auto 28px}
.chero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.chero .microtrust{margin-top:20px;font-size:13.5px;color:var(--ink-2);display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.chero .microtrust .i{display:flex;align-items:center;gap:6px}

/* generic section */
section.block{padding:clamp(40px,6vw,68px) 0}
section.block.alt{background:var(--paper-2)}
.sec-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h2.sec{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(24px,3.6vw,36px);letter-spacing:-0.01em;color:var(--ink);margin-bottom:18px;line-height:1.1}
h3.sub{font-family:'Inter';font-size:19px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin:26px 0 8px}
.block p{margin-bottom:14px;max-width:760px}
.block ul{margin:0 0 16px 22px;max-width:760px}
.block li{margin-bottom:9px}

/* verdict / TLDR card */
.verdict{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:28px 30px;margin-top:8px;box-shadow:0 12px 30px rgba(10,10,11,.05)}
.verdict h2{font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--ink);margin-bottom:12px}
.verdict p{margin-bottom:12px}
.verdict p:last-child{margin-bottom:0}

/* comparison table (3 columns, MMM highlighted) */
.ctable-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 12px 30px rgba(10,10,11,.05);background:var(--card);margin-top:8px}
.ctable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.ctable{width:100%;border-collapse:collapse;min-width:680px}
.ctable th,.ctable td{padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.ctable thead th.mmm{color:#fff}
.ctable thead th .b{font-family:'Inter';font-size:15px;font-weight:700;text-transform:none;letter-spacing:-0.01em;display:block;margin-bottom:2px}
.ctable .col-mmm{background:var(--ink);position:relative}
.ctable thead th.mmm{background:var(--ink)}
.ctable tbody td.col-mmm{color:var(--txt-light)}
.ctable .rowlabel{font-weight:600;color:var(--ink);width:24%;background:var(--paper-2)}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable .mmm-badge{position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.ctable .ok{color:var(--green);font-weight:600}
.ctable .no{color:var(--red);font-weight:600}
.ctable td.col-mmm .ok{color:#7FE3AD}

/* factor grid */
.factors{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.factor{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:0 8px 22px rgba(10,10,11,.04)}
.factor .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.factor h3{font-family:'Inter';font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin-bottom:8px}
.factor p{font-size:14.5px;margin-bottom:0}
@media(max-width:720px){.factors{grid-template-columns:1fr}}

/* winner cards */
.winners{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:8px}
.wcard{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--card)}
.wcard.pick{border-color:var(--accent);box-shadow:0 12px 30px rgba(255,90,31,.12)}
.wcard h3{font-family:'Fraunces',serif;font-weight:500;font-size:19px;color:var(--ink);margin-bottom:8px}
.wcard p{font-size:14px;color:var(--ink-2);margin-bottom:0}
.wcard .pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:12px}
@media(max-width:760px){.winners{grid-template-columns:1fr}}

/* pivot + final CTA (dark) */
.pivot,.final{background:var(--ink);color:var(--txt-light);position:relative;overflow:hidden}
.pivot{padding:clamp(48px,7vw,80px) 0}
.final{padding:clamp(56px,8vw,96px) 0;text-align:center}
.pivot .sec-eyebrow,.final .sec-eyebrow{color:var(--accent)}
.pivot h2,.final h2{color:#fff}
.pivot p,.final p{color:var(--txt-light-2)}
.glow{position:absolute;width:620px;height:420px;background:radial-gradient(circle,rgba(255,90,31,.18),transparent 62%);filter:blur(20px);top:-140px;left:50%;transform:translateX(-50%);pointer-events:none}
.pivot-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;z-index:1}
.pivot ul{list-style:none;margin:18px 0 0;max-width:none}
.pivot li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;color:var(--txt-light)}
.pivot li .tk{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,90,31,.16);display:flex;align-items:center;justify-content:center;margin-top:2px}
.pcard{background:linear-gradient(165deg,#1d1d24,#131318);border:1px solid var(--line-d);border-radius:var(--r-lg);padding:34px;text-align:center}
.pcard .price{font-family:'Fraunces',serif;font-size:54px;font-weight:500;color:#fff;line-height:1}
.pcard .price .c{font-size:.5em;vertical-align:top}
.pcard .meta{font-size:14px;color:var(--txt-light-2);margin:8px 0 20px}
.pcard .meta .up{color:#7FE3AD;font-weight:600}
.pcard .btn{width:100%}
@media(max-width:760px){.pivot-grid{grid-template-columns:1fr;gap:32px}}
.final-inner{position:relative;z-index:1;max-width:680px;margin:0 auto}
.final h2{font-size:clamp(26px,4vw,42px);margin-bottom:16px}
.final h2 .hl{color:var(--accent);font-style:italic;font-weight:400}
.final p{font-size:18px;margin-bottom:30px}
.final .note{font-size:13px;color:var(--txt-light-2);margin-top:16px}

/* FAQ (JS-free via details) */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 2px;font-size:16.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'JetBrains Mono',monospace;color:var(--accent);font-size:20px;flex:none;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 22px;color:var(--ink-2);font-size:15px;max-width:none}

/* related links */
.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.related a{font-size:13.5px;color:var(--ink);background:var(--card);border:1px solid var(--line);padding:8px 14px;border-radius:var(--r-pill)}
.related a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* footer */
.cfooter{background:#070708;color:var(--txt-light-2);padding:48px 0 40px}
.cfooter .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.cfooter .brand{color:#fff}
.cfooter a{color:rgba(246,244,239,.78)}
.cfooter a:hover{color:#fff}
.cfooter .links a{margin-left:18px;font-size:14px}

/* sticky mobile CTA */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(10,10,11,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-d);padding:11px 16px calc(11px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:12px}
.dock .pl{color:#fff;line-height:1.15}
.dock .pl .a{font-family:'Fraunces',serif;font-size:18px;font-weight:600}
.dock .pl .b{display:block;font-size:11px;color:var(--txt-light-2)}
.dock .btn{flex:1;min-height:46px;padding:12px 16px;font-size:14.5px}
body{padding-bottom:0}
@media(max-width:760px){.dock{display:flex}body{padding-bottom:74px}}

/* ── quick-pick decision callout ── */
.quickpick{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 12px 30px rgba(10,10,11,.05);margin-top:8px}
.quickpick .qp-head{background:var(--ink);color:#fff;padding:13px 22px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.qp-row{display:grid;grid-template-columns:1fr 1.4fr;border-bottom:1px solid var(--line)}
.qp-row:last-child{border-bottom:none}
.qp-row .qp-if{padding:15px 22px;font-weight:600;color:var(--ink);background:var(--paper-2)}
.qp-row .qp-then{padding:15px 22px;color:var(--body);font-size:14.5px}
.qp-row.qp-win .qp-if{background:var(--accent-soft)}
.qp-row.qp-win .qp-then{color:var(--ink)}
.qp-row .qp-then strong{color:var(--accent)}
@media(max-width:600px){.qp-row{grid-template-columns:1fr}.qp-row .qp-if{border-bottom:1px solid var(--line)}}

/* ── spec boxes ── */
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.specbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:0 8px 22px rgba(10,10,11,.04)}
.specbox.win{border-color:var(--accent);box-shadow:0 12px 30px rgba(255,90,31,.12)}
.specbox h3{font-family:'Fraunces',serif;font-weight:500;font-size:20px;color:var(--ink);margin-bottom:3px;line-height:1.1}
.specbox .role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.specbox dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0}
.specbox dt{font-weight:600;color:var(--ink-2);font-size:12.5px}
.specbox dd{font-size:13.5px;color:var(--body);margin:0}
@media(max-width:720px){.specgrid{grid-template-columns:1fr}}

/* ── capability matrix (tools as rows) ── */
.matrix-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 12px 30px rgba(10,10,11,.05);background:var(--card);margin-top:8px}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.matrix{width:100%;border-collapse:collapse;min-width:720px}
.matrix th,.matrix td{padding:12px 13px;text-align:center;font-size:13px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.matrix th:first-child,.matrix td:first-child{text-align:left;border-left:none}
.matrix thead th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);font-weight:500;vertical-align:bottom}
.matrix tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.matrix tbody tr:last-child td{border-bottom:none}
.matrix .yes{color:var(--green);font-weight:700}
.matrix .nope{color:var(--ink-2)}
.matrix tr.win td{background:var(--accent-soft)}
.matrix tr.win td:first-child{color:var(--ink)}

/* ── who should NOT buy ── */
.notfit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.notfit .nf{background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r);padding:22px 24px}
.notfit .nf h3{font-family:'Inter';font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px}
.notfit .nf p{font-size:14px;color:var(--ink-2);margin-bottom:0}
.notfit .nf .x{color:var(--red);font-weight:700;margin-right:7px}
@media(max-width:720px){.notfit{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}