/* NagMeLater compare pages — /compare/nagmelater-vs-*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500..700;1,9..144,400..600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --paper:#FAF5EA; --paper-deep:#F2EADB; --ink:#122A1E; --ink-soft:#3a5248;
  --ink-faint:#6b7f76; --green:#0B5C44; --green-hot:#1FAF6A; --green-glow:#25D366;
  --amber:#E8A33D; --line:#D9E4DE; --red:#B0424E; --wrap:1160px;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:'Hanken Grotesk',system-ui,sans-serif; background:var(--paper); color:var(--ink); line-height:1.65; }
a { color:inherit; text-decoration:none; }
strong { font-weight:700; }
em { color:var(--green-hot); font-style:normal; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 20px; }
section { padding:64px 0; }
.sec-title { font-family:'Fraunces',Georgia,serif; font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1.5rem; }

/* Nav */
nav { position:sticky; top:0; z-index:100; background:rgba(250,245,234,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; gap:1rem; height:60px; }
.logo { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:.4rem; }
.dot { width:10px; height:10px; background:var(--green-glow); border-radius:50%; }
.nav-links { display:flex; align-items:center; gap:1.5rem; margin-left:auto; font-size:.9rem; font-weight:500; }
.nav-links a { color:var(--ink-soft); transition:color .15s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { background:var(--green); color:#fff!important; padding:.45rem 1rem; border-radius:8px; font-weight:600; }
.nav-cta:hover { background:#0a4e3a!important; }

/* Breadcrumb */
.breadcrumb { padding:12px 0; font-size:.85rem; color:var(--ink-faint); border-bottom:1px solid var(--line); }
.breadcrumb a { color:var(--ink-faint); }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb span { margin:0 .35rem; }

/* Hero */
.hero { padding:56px 0 48px; }
.hero h1 { font-family:'Fraunces',serif; font-size:clamp(2rem,4.5vw,3rem); line-height:1.15; max-width:700px; margin-bottom:1rem; }
.hero p { font-size:1.1rem; color:var(--ink-soft); max-width:580px; margin-bottom:1.5rem; }
.hero-btns { display:flex; gap:.75rem; flex-wrap:wrap; }
.btn-primary { background:var(--green); color:#fff; padding:.75rem 1.5rem; border-radius:10px; font-weight:600; font-size:1rem; display:inline-flex; align-items:center; gap:.5rem; transition:background .15s; }
.btn-primary:hover { background:#0a4e3a; }
.btn-secondary { border:1.5px solid var(--line); padding:.75rem 1.5rem; border-radius:10px; font-weight:600; font-size:1rem; display:inline-flex; align-items:center; gap:.5rem; }

/* Score cards */
.score-header { display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:center; margin-bottom:2rem; }
.score-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.5rem; text-align:center; }
.score-card.nml { border-color:var(--green-hot); }
.score-product { font-size:.85rem; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.score-value { font-family:'Fraunces',serif; font-size:2.5rem; font-weight:700; line-height:1; margin-bottom:.25rem; color:var(--ink); }
.score-card.nml .score-value { color:var(--green); }
.score-label { font-size:.85rem; color:var(--ink-soft); }
.vs-badge { background:var(--paper-deep); border:1px solid var(--line); border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink-soft); font-size:.85rem; flex-shrink:0; justify-self:center; }

/* Category scores */
.cat-scores { display:flex; flex-direction:column; gap:1rem; }
.cat-score-row { display:grid; grid-template-columns:1fr 80px 80px; gap:.5rem; align-items:center; font-size:.9rem; }
.cat-name { font-weight:600; color:var(--ink); }
.bar-wrap { display:flex; align-items:center; gap:.4rem; }
.bar { height:8px; border-radius:4px; background:var(--line); flex:1; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; }
.bar-fill.nml { background:var(--green-hot); }
.bar-fill.alt { background:#94a3b8; }
.bar-num { font-size:.8rem; font-weight:700; width:16px; text-align:right; }

/* Verdict */
.verdict { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.verdict-side { background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.5rem; }
.verdict-side.nml { border-color:var(--green-hot); }
.verdict-side h3 { font-size:1rem; font-weight:700; margin-bottom:.8rem; }
.verdict-side ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; font-size:.93rem; }
.verdict-side ul li { padding-left:1.4em; position:relative; }
.verdict-side.nml ul li::before { content:"✓"; position:absolute; left:0; color:var(--green-hot); font-weight:700; }
.verdict-side:not(.nml) ul li::before { content:"→"; position:absolute; left:0; color:var(--ink-faint); }

/* Specs table */
.vs-table-wrap { overflow-x:auto; border-radius:16px; border:1px solid var(--line); }
.vs-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.vs-table th,.vs-table td { padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
.vs-table th { background:var(--paper-deep); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.vs-table tr:last-child td { border-bottom:none; }
.vs-table td:first-child { font-weight:600; }
.win { color:var(--green); font-weight:600; }
.loss { color:var(--red); }

/* Decision guide */
.decision-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.decision-box { background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.5rem; }
.decision-box.nml { border-color:var(--green); background:rgba(31,175,106,.04); }
.decision-box h3 { font-size:1rem; font-weight:700; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.decision-box ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; line-height:1.5; }
.decision-box ul li { padding-left:1.4em; position:relative; color:var(--ink-soft); }
.decision-box.nml ul li::before { content:"✓"; position:absolute; left:0; color:var(--green-hot); font-weight:700; }
.decision-box:not(.nml) ul li::before { content:"◆"; position:absolute; left:0; color:var(--amber); font-size:.75em; top:.15em; }

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:.6rem; }
details { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1rem 1.2rem; }
details[open] { border-color:var(--green); }
summary { font-weight:600; cursor:pointer; list-style:none; font-size:.95rem; }
summary::-webkit-details-marker { display:none; }
summary::after { content:" ↓"; font-size:.85em; color:var(--ink-faint); }
details[open] summary::after { content:" ↑"; }
details p { margin-top:.75rem; font-size:.93rem; color:var(--ink-soft); line-height:1.65; }

/* Pills */
.pills { display:flex; flex-direction:column; gap:.6rem; }
.pill { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; font-size:.9rem; color:var(--ink-soft); }
.pill::before { content:"💬 "; }

/* Final CTA */
.final { background:var(--green); color:#fff; padding:72px 0; text-align:center; }
.final h2 { font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); margin-bottom:.75rem; }
.final p { font-size:1.05rem; opacity:.85; margin-bottom:2rem; max-width:520px; margin-left:auto; margin-right:auto; }
.btn-white { background:#fff; color:var(--green); padding:.8rem 1.8rem; border-radius:10px; font-weight:700; font-size:1rem; display:inline-flex; align-items:center; gap:.5rem; }

/* Cross-link to alternatives */
.related-link { background:var(--paper-deep); border:1px solid var(--line); border-radius:16px; padding:1rem 1.5rem; font-size:.9rem; color:var(--ink-soft); display:flex; align-items:center; gap:.5rem; }
.related-link a { color:var(--green); font-weight:600; text-decoration:underline; }

/* Hub page */
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.hub-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.5rem; display:flex; align-items:flex-start; gap:1rem; transition:border-color .15s,box-shadow .15s; }
.hub-card:hover { border-color:var(--green); box-shadow:0 2px 12px rgba(11,92,68,.08); }
.hub-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0; color:#fff; }
.hub-card-body h3 { font-size:.95rem; font-weight:700; margin-bottom:.3rem; }
.hub-card-body p { font-size:.82rem; color:var(--ink-faint); line-height:1.5; }
.cat-label { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:2rem 0 .75rem; }

/* Responsive */
@media(max-width:640px){
  .score-header { grid-template-columns:1fr 32px 1fr; gap:.75rem; }
  .score-value { font-size:1.8rem; }
  .verdict,.decision-cols { grid-template-columns:1fr; }
  .cat-score-row { grid-template-columns:1fr 80px; }
  .cat-score-row .bar-wrap:last-child { display:none; }
  .vs-table th:nth-child(3),.vs-table td:nth-child(3) { display:none; }
}