/* Bio Noir prose pages (about, guide) — shares the app's palette but tuned for reading */
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; } /* author display: rules otherwise defeat it */
:root {
  --bg:#0a0a0d; --panel:#131318; --gold:#d4af5a; --blue:#3d6cf5;
  --text:#eceae4; --dim:#9b9aa4; --faint:#55555f; --line:#26262e;
}
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.75;
  background-image:radial-gradient(ellipse 80% 40% at 50% -10%, rgba(61,108,245,.10), transparent);
}
.wrap { max-width:760px; margin:0 auto; padding:0 24px 80px; }
.topnav {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:760px; margin:0 auto; padding:26px 24px 0; font-size:13px;
}
.topnav .backlink { color:var(--dim); text-decoration:none; letter-spacing:.08em; }
.topnav .backlink:hover { color:var(--gold); }
.topnav .crumbs a { color:var(--dim); text-decoration:none; margin-left:14px; }
.topnav .crumbs a:hover, .topnav .crumbs a.here { color:var(--gold); }
.pagehead { text-align:center; padding:44px 0 8px; }
.pagehead .brand { font-family:'Playfair Display',serif; font-size:44px; font-weight:700; }
.pagehead .brand em { font-style:normal; color:var(--blue); }
.pagehead .brand a { color:inherit; text-decoration:none; }
.pagehead .sub { color:var(--faint); font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin-top:6px; }
h1 { font-family:'Playfair Display',serif; font-size:clamp(26px,5vw,34px); font-weight:700; margin:38px 0 14px; line-height:1.25; }
h2 { font-family:'Playfair Display',serif; font-size:22px; font-weight:500; margin:44px 0 12px; color:var(--gold); }
h3 { font-size:14.5px; font-weight:600; margin:26px 0 8px; letter-spacing:.02em; }
p { margin:0 0 14px; color:var(--dim); font-size:15px; }
p strong, li strong { color:var(--text); font-weight:600; }
a { color:var(--gold); }
ul, ol { margin:0 0 16px 22px; color:var(--dim); font-size:15px; }
li { margin-bottom:7px; }
.lead { font-size:17.5px; color:var(--text); }
.callout {
  border:1px solid rgba(212,175,90,.3); border-left:3px solid var(--gold); border-radius:10px;
  background:rgba(212,175,90,.05); padding:16px 20px; margin:22px 0;
}
.callout p:last-child { margin-bottom:0; }
.twocol { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0; }
@media (max-width:620px){ .twocol { grid-template-columns:1fr; } }
.procon { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.procon h3 { margin-top:0; }
.procon.pro h3 { color:#5fb37a; }
.procon.con h3 { color:var(--dim); }
.procon ul { margin-bottom:0; font-size:14px; }
/* service logo strip */
.svcstrip { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:20px 0 8px; }
.svcstrip img { width:44px; height:44px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.svcstrip .plus { color:var(--faint); font-size:18px; margin:0 2px; }
.imgnote { color:var(--faint); font-size:12px; margin-top:6px; }
/* the "many apps -> one search" illustration */
.funnel { margin:26px auto; display:block; max-width:100%; }
/* mock UI pieces used as illustrations in the guide */
.mock { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:18px 0 22px; }
.mockrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mchip {
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
  color:var(--dim); font-size:12px; padding:5px 13px; white-space:nowrap;
}
.mchip.on { color:var(--gold); border-color:var(--gold); background:rgba(212,175,90,.09); }
.mchip.dashed { border-style:dashed; }
.mocklabel { color:var(--faint); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; margin:14px 0 8px; }
.mocklabel:first-child { margin-top:0; }
.mockbadge {
  display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.14em;
  padding:3px 7px; border-radius:4px; margin-right:8px;
}
.mockbadge.new { background:linear-gradient(135deg,#d4af5a,#b8923f); color:#0a0a0d; }
.mockbadge.rent { background:rgba(10,10,13,.85); border:1px solid rgba(201,162,39,.7); color:#d9b64a; }
.mockbadge.gone { background:rgba(8,8,10,.86); border:1px solid rgba(236,234,228,.28); color:var(--text); }
kbd {
  background:#1a1a21; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px;
  padding:1px 7px; font-size:12px; font-family:'Inter',sans-serif; color:var(--text);
}
.faq details { border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary { cursor:pointer; color:var(--text); font-size:15px; font-weight:500; padding:10px 0; list-style-position:outside; }
.faq summary:hover { color:var(--gold); }
.faq p { padding:2px 0 12px 18px; }
footer { text-align:center; color:var(--faint); font-size:11.5px; line-height:1.9; padding:50px 24px 46px; }
footer a { color:#6d6d78; }
.pagelinks { margin-top:8px; }
.pagelinks a { color:var(--dim); text-decoration:none; margin:0 8px; }
.pagelinks a:hover { color:var(--gold); }