/* CL-#788 house.css — shared token block + ten components, extracted from
   /linkedin-rss-feed/ (Jim/Fable reference page, 2026-09-10).
   Every converted page links this and keeps only page-specific rules inline. */

:root{
  --green:#00ef00;
  --green-deep:#08751a;
  --green-soft:#eaffea;
  --dark:#17191c;
  --dark2:#202328;
  --paper:#fbfaf7;
  --cream:#f0ece4;
  --ink:#17191b;
  --muted:#697076;
  --line:#d6dad3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}

/* 1. Sticky nav */
.nav{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 5vw;background:rgba(251,250,247,.95);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px)
}
.logo{font-size:20px;font-weight:950;letter-spacing:-.04em}
.logo span{color:var(--green-deep)}
.links{display:flex;gap:22px;font-size:12px;font-weight:800}
.links a{text-decoration:none}

/* 2. Dark hero */
.hero{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:30px;padding:72px 6vw 60px;background:var(--dark);color:white;border-bottom:4px solid var(--green)
}
.kicker{font:900 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.hero h1{font-size:clamp(42px,6vw,78px);line-height:.98;letter-spacing:-.045em;margin:13px 0 20px;max-width:900px}
.hero p{font-size:19px;line-height:1.55;color:#d0d4d6;max-width:720px;margin:0}
.hero strong{color:white}
.answer{
  align-self:end;background:var(--green);color:#081008;padding:24px;border:1px solid #00c900;
  box-shadow:10px 10px 0 #0f1113
}
.answer small{display:block;font:900 10px ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase}
.answer b{display:block;font-size:30px;line-height:1.05;margin:8px 0}
.answer p{color:#0d240f;font-size:13px;line-height:1.45}

/* 4. Section kicker + h2 (shared across every alternating-ground section) */
.section-kicker{font:900 10px ui-monospace,monospace;letter-spacing:.16em;color:var(--green-deep);text-transform:uppercase}
h2{font-size:38px;line-height:1.05;letter-spacing:-.03em;margin:8px 0 25px}

/* 3. Alternating grounds — generic section paddings, ground colors set per section */
.ground-proof{padding:58px 6vw;background:#eceeea}
.ground-paper{padding:64px 6vw;background:var(--paper)}
.ground-dark{padding:64px 6vw;background:var(--dark);color:white}
.ground-dark .section-kicker{color:var(--green)}
.ground-cream{padding:58px 6vw;background:var(--cream)}

/* 5. Cards — square corners, no border-radius anywhere */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proof-card{background:#fff;border:1px solid var(--line);padding:22px;min-height:210px;position:relative}
.proof-card .n{position:absolute;top:0;right:0;background:var(--dark);color:var(--green);padding:7px 10px;font:900 11px ui-monospace,monospace}
.proof-card h3{font-size:18px;margin:18px 0 10px}
.proof-card p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}

.step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{border:1px solid #34393e;background:#1d2024;padding:20px}
.step .num{color:var(--green);font:950 24px ui-monospace,monospace}
.step h3{margin:10px 0 8px;font-size:17px}
.step p{margin:0;color:#b8bec2;font-size:13px;line-height:1.55}

/* 6. Evidence chip */
.code{margin-top:14px;background:#141714;color:#a5f8aa;padding:11px;font:700 11px ui-monospace,monospace;overflow:auto}

/* 7. Rail card — parallel options, no sequence numbering */
.lede{font-size:18px;color:#5c6368;max-width:760px;line-height:1.55;margin-bottom:28px}
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.route{display:grid;grid-template-columns:8px 1fr;background:white;border:1px solid var(--line);min-height:150px}
.route .rail{background:var(--green)}
.route .content{padding:20px 22px}
.route h3{margin:0 0 8px;font-size:19px}
.route p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.route b{color:var(--green-deep)}

/* 8. CTA band */
.cta{padding:58px 6vw;background:var(--cream);display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px}
.cta h2{margin:0 0 8px}
.cta p{margin:0;color:#62696e}
.btn{display:inline-block;text-decoration:none;background:var(--green);color:#071007;padding:14px 18px;font-weight:950;border:1px solid #00c900;box-shadow:5px 5px 0 var(--dark)}

/* 9. Sources strip — #5c6368 is already corrected for contrast; never --muted here */
.sources{padding:20px 6vw 34px;background:#eceeea;color:#5c6368;font-size:11px;line-height:1.6}
.sources b{color:#303438}

/* 10. Footer */
footer{display:flex;justify-content:space-between;gap:20px;padding:22px 6vw;background:#111316;color:#a9b0b5;font-size:11px}
footer strong{color:white}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:48px}
  .proof-grid,.step-list{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .links{display:none}
}