/* OutletIQ, shared styles for the comparison and solution pages.
   Extends styles.css. Same palette, same type, zero gradients. */

/* breadcrumb */
.crumb{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#8c847c}
.crumb a{color:#b8b2ab}
.crumb a:hover{color:var(--gold-bright)}
.crumb .sep{color:#57534e;padding:0 .45rem}

/* page hero (dark, narrower than the home hero) */
.phero{background:var(--ink);color:#faf9f7;position:relative;overflow:hidden;border-bottom:1px solid #000;padding:0}
.phero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(202,138,4,.10) 1px, transparent 0);background-size:34px 34px;opacity:.5;pointer-events:none}
.phero-in{max-width:var(--maxw);margin:0 auto;padding:40px 24px 70px;position:relative}
.phero h1{color:#fefdfb;max-width:20ch;margin-top:1.1rem;font-size:clamp(2.05rem,4.4vw,3.25rem)}
.phero .eyebrow{margin-top:1.6rem}
.phero .lead{color:#c9c3bc;max-width:62ch;margin-top:1.3rem;font-size:1.18rem}

/* answer-first block, built to be liftable by an answer engine */
.answer{background:var(--stone-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.answer .wrap{padding-top:44px;padding-bottom:44px}
.answer .def{border-left:4px solid var(--gold);padding-left:22px;max-width:70ch}
.answer .def p{font-size:1.14rem;color:var(--ink-2)}
.answer .def p+p{margin-top:.9rem;font-size:1rem;color:var(--muted)}

/* prose */
.prose{max-width:70ch}
.prose h3{margin-top:2.2rem;margin-bottom:.7rem}
.prose p{color:var(--muted);margin-top:.9rem}
.prose p:first-child{margin-top:0}
.prose ul{margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.prose li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;color:var(--muted);font-size:.99rem}
.prose li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:.62rem}
.prose b{color:var(--ink-2);font-weight:600}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* comparison table */
.tscroll{overflow-x:auto;margin-top:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
table.cmp{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem}
table.cmp th,table.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-600);background:var(--stone-50)}
table.cmp tbody th{font-weight:600;color:var(--ink-2);width:26%}
table.cmp td{color:var(--muted)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none}
table.cmp .own{background:rgba(202,138,4,.05);color:var(--ink-2)}
.tnote{font-size:.86rem;color:var(--stone-600);margin-top:.9rem}
.tnote a{color:var(--gold)}

/* source list */
.sources{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.2rem;max-width:70ch}
.sources h4{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-600);font-weight:600}
.sources ul{margin:.8rem 0 0;padding:0;display:grid;gap:.45rem}
.sources li{list-style:none;font-size:.86rem;color:var(--stone-600)}
.sources a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

/* related pages */
.rel{background:var(--stone-50);border-top:1px solid var(--line)}
.rel .rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.rel .rcard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:border-color .15s ease,transform .15s ease}
.rel .rcard:hover{border-color:var(--stone-300);transform:translateY(-2px)}
.rel .rcard h3{font-size:1.08rem}
.rel .rcard p{color:var(--muted);font-size:.94rem;margin-top:.45rem}
.rel .rcard .go{display:inline-block;margin-top:.9rem;font-size:.88rem;font-weight:600;color:var(--gold)}

/* proof line */
.proof{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.2rem;padding:.5rem .95rem .5rem .7rem;
  border:1px solid rgba(245,245,244,.14);border-radius:999px;background:rgba(245,245,244,.04);font-size:.88rem;color:#d6d3d1}
.proof .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(21,128,61,.22)}
.proof b{color:#f0ede9;font-weight:600}

@media(max-width:900px){
  .rel .rgrid{grid-template-columns:1fr}
  .phero-in{padding:30px 24px 56px}
}