/* pages.css — Love Blueprint public content pages.
   Shared by /types/*, /types, /methodology and /about.

   Same design system as index.html and report.css: same tokens, same fonts,
   same nav, same footer, same pill/table/disclaimer components. The only
   additions here are the things a content page needs and the landing page
   doesn't — breadcrumb, answer block, prose rhythm, FAQ list. */

:root{
  --cream:#FBF5EC; --paper:#FFFBF4; --ink:#2C2230; --prune:#6E3B5E; --prune-deep:#552C49;
  --coral:#E8815E; --lilac:#EFE4EE; --peach:#FBE8DE; --muted:#8A7E84; --hairline:#E7DBCC;
  --q-secure:#4E9E86; --q-anxious:#E6924E; --q-avoidant:#6C7FA6; --q-disorg:#8A6BA6;
  --font-display:'Fraunces',serif; --font-body:'Instrument Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:17.5px;line-height:1.68;
     -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.16;letter-spacing:-.01em;}
a{color:inherit;}
img,svg{max-width:100%;}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.narrow{max-width:760px;margin:0 auto;padding:0 28px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--prune);color:var(--cream);
     font-family:var(--font-body);font-weight:500;font-size:16px;padding:14px 26px;border-radius:30px;border:none;
     cursor:pointer;text-decoration:none;transition:background .18s,transform .18s;}
.btn:hover{background:var(--prune-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--prune);border:1.5px solid var(--prune);}
.btn-ghost:hover{background:var(--prune);color:var(--cream);}
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--prune);font-weight:600;}

/* ── nav (same as index.html, trimmed to what a content page needs) ─────── */
nav{position:sticky;top:0;z-index:20;background:rgba(251,245,236,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px;}
.brand{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--prune);display:flex;align-items:center;gap:9px;text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:24px;font-size:15px;color:var(--muted);}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--ink);}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumb{font-size:13.5px;color:var(--muted);padding:22px 0 0;}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--ink);text-decoration:underline;}
.crumb li+li:before{content:"›";margin-right:7px;color:var(--hairline);}

/* ── page header ────────────────────────────────────────────────────────── */
.phead{padding:20px 0 4px;}
.phead .art{width:min(190px,42vw);height:auto;display:block;margin:6px auto 6px;}
.phead h1{font-size:clamp(34px,6vw,54px);margin-bottom:10px;text-align:center;}
.phead .subtitle{font-size:16px;color:var(--prune);font-weight:500;margin-bottom:22px;text-align:center;}
.quad-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;
  background:var(--paper);border:1px solid var(--hairline);border-radius:99px;padding:6px 14px;color:#5C4E58;}
.quad-pill .qd{width:9px;height:9px;border-radius:50%;display:inline-block;}
.pill-row{display:flex;justify-content:center;margin-bottom:14px;}

/* the AI-Overview answer block: first thing under the H1, self-contained */
.answer{background:var(--paper);border:1px solid var(--hairline);border-left:4px solid var(--coral);
  border-radius:14px;padding:20px 22px;font-size:18px;line-height:1.6;margin:6px 0 22px;}
.answer strong{font-weight:600;}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:26px;}
.cta-row .note{font-size:14px;color:var(--muted);}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 22px;}
.stat{background:var(--paper);border:1px solid var(--hairline);border-radius:16px;padding:18px 18px 16px;}
.stat .k{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.stat b{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--prune);display:block;line-height:1.1;}
.stat .note{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:6px;}

.disclaimer{background:var(--lilac);border-radius:14px;padding:17px 19px;font-size:14.5px;line-height:1.55;color:#4A3B47;}
.support{background:var(--peach);border-radius:14px;padding:17px 19px;font-size:14.5px;line-height:1.55;color:#5A3A2C;margin-top:18px;}

/* ── body prose ─────────────────────────────────────────────────────────── */
main{flex:1;}
.body section{padding:38px 0;border-top:1px solid var(--hairline);}
.body section:first-of-type{border-top:none;padding-top:12px;}
.body h2{font-size:clamp(25px,4.2vw,33px);margin-bottom:16px;}
.body h3{font-size:20px;color:var(--prune);margin:24px 0 10px;}
.body p{margin-bottom:16px;}
.body p:last-child{margin-bottom:0;}
.lead{font-size:18.5px;}

ul.tight{list-style:none;margin:0 0 16px;padding-left:0;}
ul.tight li{position:relative;padding-left:18px;margin-bottom:8px;line-height:1.58;}
ul.tight li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--coral);}

ul.strengths{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:18px;}
ul.strengths li{display:flex;gap:13px;align-items:flex-start;line-height:1.6;}
ul.strengths svg{flex:none;margin-top:6px;}

.aside{background:var(--lilac);border-radius:16px;padding:20px 22px;margin-top:18px;font-size:15.5px;line-height:1.6;}
.aside p:last-child{margin-bottom:0;}

/* ── tables (real <table>, machine-extractable) ─────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 18px;
  border:1px solid var(--hairline);border-radius:16px;background:var(--paper);}
table.compat{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;}
table.compat th,table.compat td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.5;}
table.compat thead th{font-family:var(--font-body);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--cream);}
table.compat tbody tr:last-child th,table.compat tbody tr:last-child td{border-bottom:none;}
table.compat th[scope=row]{font-weight:600;white-space:nowrap;}
table.compat a{color:var(--prune);}
.ce{font-size:16px;}
.verdict{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  border-radius:99px;padding:2px 9px;margin-right:6px;white-space:nowrap;}
.v-green{background:#E1F0EA;color:#2F6B58;}
.v-amber{background:#FBEEDF;color:#96601F;}
.v-harder{background:#F9E3DC;color:#A2452C;}

/* ── value stack / premium block ────────────────────────────────────────── */
.stack{background:var(--paper);border:1px solid var(--hairline);border-radius:18px;padding:24px 24px 22px;}
.stack h3{margin-top:0;}
.price{font-family:var(--font-display);font-size:28px;color:var(--prune);font-weight:600;}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:18px;}
.faq .q{font-family:var(--font-display);font-size:19.5px;font-weight:600;margin-bottom:6px;}
.faq .a{margin:0;}

/* ── type grid (hub + "explore the other types") ────────────────────────── */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.type{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--hairline);
  border-radius:16px;padding:14px 16px;text-decoration:none;transition:transform .16s,border-color .16s;}
.type:hover{transform:translateY(-2px);border-color:var(--prune);}
.type .nm{font-family:var(--font-display);font-weight:600;font-size:17px;display:block;}
.type .tg{font-size:13px;color:var(--muted);display:block;margin-top:2px;}
.type .qd{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;}

/* ── compatibility pages ────────────────────────────────────────────────── */
.pair-art{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 8px;}
.pair-art .art-sm{width:min(120px,26vw);height:auto;display:block;}
.pair-art .pair-x{font-family:var(--font-display);font-size:26px;color:var(--muted);font-weight:500;}
.note-honest{font-size:14px;color:var(--muted);line-height:1.55;margin-top:10px;}

/* per-row fit flags in the glance table */
.fl{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 9px;white-space:nowrap;}
.fl-ok{background:#E1F0EA;color:#2F6B58;}
.fl-watch{background:#FBEEDF;color:#96601F;}
.fl-clash{background:#F9E3DC;color:#A2452C;}

/* the 12×12 hub matrix */
.mx-legend{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:14px;color:var(--muted);margin:4px 0 14px;}
.mx-legend .verdict{margin-right:2px;}
table.matrix{border-collapse:collapse;width:100%;min-width:640px;font-size:14px;}
table.matrix th,table.matrix td{border:1px solid var(--hairline);text-align:center;}
table.matrix thead th{font-family:var(--font-body);padding:9px 6px;background:var(--cream);color:var(--muted);font-weight:600;}
table.matrix thead th:first-child{text-align:left;}
table.matrix th[scope=row]{text-align:left;white-space:nowrap;padding:8px 12px;font-weight:600;background:var(--paper);}
table.matrix th[scope=row] a{color:var(--prune);text-decoration:none;}
table.matrix th[scope=row] a:hover{text-decoration:underline;}
td.mx{padding:0;}
td.mx a{display:block;padding:9px 4px;text-decoration:none;font-size:16px;transition:filter .14s,transform .14s;}
td.mx a:hover{filter:brightness(.94);transform:scale(1.12);}
td.mx-green{background:#E1F0EA;}
td.mx-amber{background:#FBEEDF;}
td.mx-harder{background:#F9E3DC;}

/* the easiest / hardest pair lists */
ul.pairlist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 20px;margin:6px 0 0;}
ul.pairlist li{line-height:1.5;padding:3px 0;}
ul.pairlist a{color:var(--prune);text-decoration:none;}
ul.pairlist a:hover{text-decoration:underline;}

/* ── closing CTA band ───────────────────────────────────────────────────── */
.band{background:var(--lilac);padding:52px 0;text-align:center;margin-top:12px;}
.band h2{font-size:clamp(26px,4.4vw,36px);margin-bottom:10px;}
.band p{color:#5C4E58;margin-bottom:20px;}

.byline{font-size:13.5px;color:var(--muted);padding:26px 0 34px;border-top:1px solid var(--hairline);}
.byline a{color:var(--prune);}

/* placeholders the founder must replace before launch — same convention as legal.css */
.ph{background:#FFE9A8;border-bottom:2px solid #D9A93A;padding:1px 5px;border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;font-weight:600;color:#5C4508;}
.notice-todo{background:#FFF4CE;border:1px solid #E8CE6B;color:#6B5310;border-radius:14px;
  padding:16px 18px;font-size:14.5px;line-height:1.55;margin-bottom:22px;}
.notice-todo ul{margin:9px 0 0 20px;}
.notice-todo li{margin-bottom:4px;}

/* ── footer (same markup as index.html) ─────────────────────────────────── */
footer{background:var(--ink);color:#B7ADB2;padding:52px 0 34px;font-size:14px;margin-top:auto;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px;}
footer h4{font-family:var(--font-body);color:var(--cream);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;font-weight:600;}
footer a{display:block;padding:5px 0;color:#B7ADB2;text-decoration:none;}
footer a:hover{color:#fff;}
footer .brand{color:var(--cream);}
footer .disclaimer{background:none;padding:0;color:#8A8090;font-size:13.5px;margin-top:12px;border-radius:0;}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #3E3244;padding-top:20px;color:#8A8090;font-size:13px;}

@media(max-width:820px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  body{font-size:16.5px;}
  .wrap,.narrow{padding-left:18px;padding-right:18px;}
  .nav-links{gap:14px;font-size:14px;}
  .nav-links .hide-sm{display:none;}
  .stats{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:22px;}
  footer a{padding:7px 0;}
}