/* ===== guide.css: the field-guide pattern for flat pages (FAQ first, 2026-10-16) =====
   Loaded only by pages that use it, after main.css, whose tokens it depends on.
   Hero carries the instrument, the body carries a sticky index plus context blocks. */

/* ---------- hero with instrument ---------- */
.guide-hero{padding:72px 0 64px}
.guide-hero .page-hero-sub{margin-bottom:30px}
.guide-hero .hero-note{color:rgba(239,233,221,.5)}
@media (max-width:980px){.guide-hero{padding:56px 0 48px}}

/* ---------- RLU result band ---------- */
.rlu-band{background:var(--abyss);color:var(--bone);border-top:1px solid rgba(201,169,97,.25);border-bottom:2px solid var(--gold);padding:34px 0 36px}
.rlu-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:52px}
.rlu-legend{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:rgba(239,233,221,.55)}
.rlu-scale{position:relative;height:124px;margin:0 8px}
.rlu-track{position:absolute;left:0;right:0;top:50px;height:6px;border-radius:3px;overflow:hidden;background:rgba(239,233,221,.12)}
.rlu-seg{position:absolute;top:0;bottom:0;left:var(--a);width:var(--w)}
.rlu-seg.pass{background:linear-gradient(90deg,var(--pass),rgba(47,217,139,.5))}
.rlu-seg.caution{background:linear-gradient(90deg,rgba(201,169,97,.65),var(--gold))}
.rlu-seg.fail{background:linear-gradient(90deg,#C9735A,#E8896B)}
.rlu-tick{position:absolute;left:var(--x);top:66px;transform:translateX(-50%);text-align:center;font-family:var(--mono);line-height:1.2}
.rlu-tick::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:10px;background:rgba(239,233,221,.4)}
.rlu-tick b{display:block;font-size:.95rem;font-weight:600;color:var(--bone)}
.rlu-tick small{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,233,221,.55);margin-top:4px;white-space:nowrap}
.rlu-tick.zero{transform:none;text-align:left}
.rlu-tick.zero::before{left:0}
.rlu-tick.target b{color:var(--gold-light)}
.rlu-tick.target::before{background:var(--gold);width:2px}
.rlu-pin{position:absolute;left:var(--x);top:0;transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;white-space:nowrap;padding:6px 10px;border-radius:3px;border:1px solid;line-height:1.3}
.rlu-pin::after{content:"";position:absolute;left:50%;bottom:-20px;width:1px;height:20px;background:currentColor;opacity:.7}
.rlu-pin b{font-size:.92rem;font-weight:600;margin-right:6px}
.rlu-pin.pass{color:var(--pass-soft);border-color:rgba(47,217,139,.45);background:rgba(47,217,139,.08);transform:translateX(-30%)}
.rlu-pin.pass::after{left:30%}
.rlu-pin.fail{color:#E8896B;border-color:rgba(232,137,107,.45);background:rgba(232,137,107,.08)}
.rlu-cap{font-size:.9rem;color:rgba(239,233,221,.7);max-width:64em;margin-top:18px}
@media (max-width:640px){
  .rlu-head{margin-bottom:44px}
  .rlu-tick small{display:none}
  .rlu-pin{font-size:.6rem;padding:4px 7px}
  .rlu-cap{font-size:.85rem}
}

/* ---------- two-column body: sticky rail + answers ---------- */
.guide-section{padding:64px 0 72px}
.guide-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
.guide-rail{position:sticky;top:164px}
@media (max-width:1280px){.guide-rail{top:132px}}
/* the rail scrolls on its own when it is taller than the screen (17 questions on a 768 to 900px-tall laptop) */
@media (min-width:981px){
  .guide-rail{max-height:calc(100vh - 180px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,169,97,.6) transparent;padding-right:8px}
  .rail-meter{position:sticky;top:0;z-index:1}
}
@media (min-width:981px) and (max-width:1280px){.guide-rail{max-height:calc(100vh - 148px)}}

/* rail meter: the reading falls as the questions are read */
.rail-meter{background:#04101f;border:1px solid rgba(201,169,97,.4);border-radius:10px;padding:16px 18px 14px;color:var(--bone);margin-bottom:22px;box-shadow:0 18px 40px -24px rgba(6,21,39,.6)}
.rail-meter-head{display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(201,169,97,.25);padding-bottom:8px;margin-bottom:10px}
.rail-meter-read{font-family:var(--mono);font-size:2.3rem;font-weight:600;line-height:1;color:var(--gold-light);font-variant-numeric:tabular-nums;transition:color .4s}
.rail-meter-read small{font-size:.8rem;color:rgba(239,233,221,.55);margin-left:5px}
.rail-meter-track{height:3px;background:rgba(239,233,221,.12);border-radius:2px;margin:12px 0 10px;overflow:hidden}
.rail-meter-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.rail-meter-status{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,221,.55)}
.rail-meter.pass .rail-meter-read{color:var(--pass);text-shadow:0 0 18px rgba(47,217,139,.45)}
.rail-meter.pass .rail-meter-track span{background:var(--pass)}
.rail-meter.pass .rail-meter-status{color:var(--pass-soft)}
.rail-meter-foot{font-size:.62rem;color:rgba(239,233,221,.45);margin-top:10px;line-height:1.5}

/* question index */
.guide-index{display:block}
.idx-group{display:flex;gap:10px;align-items:baseline;font-family:var(--body);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;text-decoration:none;margin:18px 0 8px}
.idx-group:first-child{margin-top:0}
.idx-group b{font-family:var(--mono);color:var(--ink-soft);font-weight:500}
.idx-list{list-style:none;margin:0;padding:0}
.idx-list a{display:block;font-size:.84rem;color:var(--ink-soft);text-decoration:none;padding:6px 0 6px 14px;border-left:2px solid #E2D9C6;line-height:1.35;transition:color .15s,border-color .15s}
.idx-list a:hover{color:var(--navy)}
.idx-list a[aria-current="true"]{color:var(--navy);border-color:var(--gold);font-weight:500}
.idx-toggle{margin-top:20px;background:none;border:1px solid var(--gold);border-radius:3px;color:var(--navy);font-family:var(--body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:10px 14px;cursor:pointer;width:100%;transition:background .15s}
.idx-toggle:hover{background:rgba(201,169,97,.18)}

/* question groups */
.guide-group{padding:0 0 36px;scroll-margin-top:170px}
.guide-body .prose [id]{scroll-margin-top:170px}
.guide-group+.guide-group{border-top:1px solid #E2D9C6;padding-top:44px}
.group-head{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:baseline;margin-bottom:22px}
.group-num{font-family:var(--mono);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:600;color:var(--gold);line-height:1;grid-row:1/3;align-self:start}
.group-head .eyebrow{font-size:.78rem}
.group-sub{color:var(--ink-soft);margin:0;max-width:40em;font-size:.98rem}

/* accordion as cards (overrides the base .faq-item rules in main.css) */
.guide-body .faq-item{background:var(--bone-lift);border:1px solid #E2D9C6;border-radius:8px;padding:2px 22px;margin:0 0 10px;transition:border-color .2s,box-shadow .2s;scroll-margin-top:170px}
.guide-body .faq-item[open]{border-color:var(--gold);box-shadow:0 16px 36px -24px rgba(10,31,61,.4)}
.guide-body .faq-item summary{align-items:baseline;gap:16px;padding:18px 0;font-size:1.06rem}
.guide-body .faq-item summary h2{font-size:inherit;font-weight:inherit;line-height:1.3;margin:0;flex:1}
.guide-body .faq-item summary:hover h2{color:#12304f}
.q-num{font-family:var(--mono);font-size:.72rem;color:var(--gold);font-weight:500;letter-spacing:.06em;flex:0 0 34px}
.guide-body .faq-item[open] summary{border-bottom:1px solid rgba(201,169,97,.4)}
.guide-body .faq-item .faq-answer{padding:16px 0 20px 50px}
.guide-body .faq-answer p:last-child{margin-bottom:0}

/* context blocks between questions */
.ctx{margin:22px 0 30px;border-radius:10px}
.ctx-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ctx-head .eyebrow{font-size:.68rem}
.ctx-head p{font-size:.88rem;color:var(--ink-soft);margin:0;max-width:40em}
/* the re-test loop, navy */
.ctx-loop{background:var(--navy);color:var(--bone);padding:26px 26px 24px}
.ctx-loop .ctx-head p{color:rgba(239,233,221,.7)}
.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(201,169,97,.25);border:1px solid rgba(201,169,97,.25)}
.loop-step{background:var(--navy);padding:18px 16px}
.loop-step b{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--gold);display:block;margin-bottom:8px}
.loop-step h3{font-size:1rem;color:#fff;margin-bottom:6px}
.loop-step p{font-size:.84rem;color:rgba(239,233,221,.72);margin:0;line-height:1.55}
/* the Founder's Deal ladder */
.ctx-ladder{background:var(--bone-lift);border:1px solid #E2D9C6;padding:26px 26px 22px}
.ladder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tier{border:1px solid #E2D9C6;border-radius:6px;padding:20px 16px 18px;background:var(--bone);position:relative}
.tier b{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:10px}
.tier h3{font-size:1.02rem;margin-bottom:6px}
.tier p{font-size:.84rem;color:var(--ink-soft);margin:0;line-height:1.5}
.tier.flag{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.tier.flag h3{color:#fff}
.tier.flag p{color:rgba(239,233,221,.75)}
.tier.flag::before{content:"Flagship";position:absolute;top:-10px;right:12px;background:var(--gold);color:var(--abyss);font-family:var(--body);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:2px}
.ladder-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px;font-size:.86rem;color:var(--ink-soft)}
.ladder-foot .spots{font-family:var(--mono);color:var(--navy);font-weight:600;letter-spacing:.02em}
.ladder-foot a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold)}
/* the five-question scorecard */
.ctx-score{background:var(--bone-lift);border:1px solid #E2D9C6;padding:26px 26px 22px}
.score{width:100%;border-collapse:collapse;font-size:.9rem}
.score th{font-family:var(--body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-align:left;padding:0 10px 10px;border-bottom:1px solid #E2D9C6;font-weight:600}
.score th:not(:first-child),.score td:not(:first-child){text-align:center;width:9em}
.score td{padding:12px 10px;border-bottom:1px solid #E2D9C6;color:var(--navy);vertical-align:middle}
.score tr:last-child td{border-bottom:0}
.score .yes{font-family:var(--mono);color:#1E8A57;font-weight:600;letter-spacing:.06em}
.score .blank{display:inline-block;width:18px;height:18px;border:1.5px solid #CFC4AB;border-radius:3px;vertical-align:middle}
.score-foot{font-size:.86rem;color:var(--ink-soft);margin:14px 0 0}
/* service-area chips */
.ctx-areas{padding:4px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-family:var(--body);font-size:.8rem;font-weight:500;color:var(--navy);text-decoration:none;border:1px solid #D7CDB8;border-radius:999px;padding:7px 14px;background:var(--bone-lift);transition:border-color .15s,background .15s}
.chips a:hover{border-color:var(--gold);background:rgba(201,169,97,.14)}
.guide-more{margin-top:30px;color:var(--ink-soft)}
.guide-more a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .guide-layout{display:block}
  .guide-rail{position:sticky;top:76px;z-index:40;background:var(--bone);margin:0 -24px 22px;padding:22px 24px 10px;border-bottom:1px solid #E2D9C6;display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .guide-rail::-webkit-scrollbar{display:none}
  .rail-meter,.idx-list{display:none}
  .guide-index{display:flex;gap:8px;align-items:center;flex:0 0 auto}
  .idx-group{margin:0;padding:8px 14px;border:1px solid #D7CDB8;border-radius:999px;background:var(--bone-lift);white-space:nowrap;letter-spacing:.14em;font-size:.62rem}
  .idx-group b{display:none}
  .idx-toggle{margin:0;width:auto;white-space:nowrap;padding:8px 14px;font-size:.62rem;border-radius:999px;flex:0 0 auto}
  .guide-group,.guide-body .faq-item,.guide-body .prose [id]{scroll-margin-top:164px}
  .guide-section{padding:48px 0 56px}
}
@media (max-width:860px){
  .loop-grid,.ladder-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .guide-rail{top:70px}
  .guide-group,.guide-body .faq-item,.guide-body .prose [id]{scroll-margin-top:140px}
  .guide-body .faq-item{padding:2px 16px}
  .guide-body .faq-item summary{gap:12px;font-size:1rem}
  .q-num{flex-basis:28px}
  .guide-body .faq-item .faq-answer{padding-left:0}
  .ctx-loop,.ctx-ladder,.ctx-score{padding:20px 18px 18px}
  .ladder-grid{grid-template-columns:1fr}
  .score th:not(:first-child),.score td:not(:first-child){width:4.2em}
  .score th{font-size:.56rem;letter-spacing:.12em}
  .score th,.score td{padding-left:6px;padding-right:6px}
}
@media (max-width:520px){
  .loop-grid{grid-template-columns:1fr}
}

/* ---------- buyer's guide (questions page): why-it-matters line, red flag vs our answer, vendor worksheet ---------- */
.guide-body .faq-answer .qa-why{border-left:3px solid var(--gold);padding:2px 0 2px 14px;color:var(--navy)}
.qa-verdict{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.qa-verdict .qa-flag,.qa-verdict .qa-ours{margin:0;padding:14px 16px;border-radius:6px;font-size:.92rem;line-height:1.55}
.qa-verdict strong{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.qa-verdict .qa-flag{background:#FBF0EA;border:1px solid rgba(201,115,90,.4);color:var(--ink-soft)}
.qa-verdict .qa-flag strong{color:#A4513A}
.qa-verdict .qa-ours{background:var(--navy);border:1px solid var(--navy);color:rgba(239,233,221,.88)}
.qa-verdict .qa-ours strong{color:var(--gold-light)}
.worksheet{scroll-margin-top:82px}
.worksheet .score th:not(:first-child),.worksheet .score td:not(:first-child){width:6.5em}
.worksheet .score td:first-child{position:relative;padding-left:44px}
.worksheet .score .q-num{position:absolute;left:10px;top:14px}
.worksheet .score a{color:var(--navy);text-decoration:none}
.worksheet .score a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
@media (max-width:640px){
  .qa-verdict{grid-template-columns:1fr}
  .worksheet .ctx-score{padding:18px 12px 14px}
  .worksheet .score{font-size:.84rem}
  .worksheet .score th:not(:first-child),.worksheet .score td:not(:first-child){width:2.4em;padding-left:2px;padding-right:2px}
  .worksheet .score .v-long{display:none}
  .worksheet .score td:first-child{padding-left:30px}
  .worksheet .score .q-num{left:4px}
}

/* ---------- about: owner card in the hero, facts strip, reasons grid without the empty cell ---------- */
.owner-card .meter-head{margin-bottom:22px}
.owner-id{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.owner-mono{flex:0 0 58px;height:58px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font-family:var(--disp);font-style:italic;font-size:1.35rem;color:var(--gold-light)}
.owner-name{font-family:var(--disp);font-size:1.5rem;color:#fff;line-height:1.1;margin:0}
.owner-role{font-family:var(--body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,221,.6);margin:6px 0 0}
.owner-facts{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid rgba(201,169,97,.2)}
.owner-facts li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid rgba(201,169,97,.2);color:rgba(239,233,221,.86);font-size:.95rem}
.owner-facts li::before{content:"";position:absolute;left:3px;top:50%;width:12px;height:6px;border-left:2px solid var(--pass);border-bottom:2px solid var(--pass);transform:translateY(-75%) rotate(-45deg)}
.owner-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:rgba(239,233,221,.62)}
.owner-foot a{color:var(--gold-light);text-decoration:none;font-weight:600}
.owner-link{display:inline-block;margin-top:16px;font-size:.84rem;color:var(--gold-light);text-decoration:underline;text-decoration-color:rgba(201,169,97,.5)}
.fact-strip{background:var(--abyss);border-top:1px solid rgba(201,169,97,.25);border-bottom:2px solid var(--gold);padding:30px 0 32px}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:4px 22px;border-left:1px solid rgba(201,169,97,.25)}
.fact:first-child{border-left:0;padding-left:0}
.fact b{display:block;font-family:var(--mono);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:600;color:var(--gold-light);line-height:1;font-variant-numeric:tabular-nums}
.fact b small{font-size:.32em;letter-spacing:.14em;color:rgba(239,233,221,.6);margin-left:6px}
.fact p{font-size:.86rem;color:rgba(239,233,221,.74);margin:10px 0 0;line-height:1.5}
@media (min-width:981px){.std-grid>.std:nth-last-child(2):nth-child(3n+2){grid-column:span 2}}
@media (max-width:860px){.fact-grid{grid-template-columns:1fr 1fr;row-gap:24px}.fact:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:640px){.fact{padding:2px 0 2px 16px}.fact:nth-child(odd){padding-left:0}.owner-name{font-size:1.3rem}}

/* ---------- contact: "after you hit send" card in the hero, area chips under the map ---------- */
.reply-card .meter-head{margin-bottom:8px}
.reply-steps{list-style:none;margin:0 0 18px;padding:0}
.reply-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid rgba(201,169,97,.2)}
.reply-steps b{font-family:var(--mono);font-size:.74rem;color:var(--gold);letter-spacing:.06em;padding-top:3px}
.reply-steps p{font-size:.86rem;color:rgba(239,233,221,.68);margin:0;line-height:1.5}
.reply-steps .rs-title{font-family:var(--disp);font-size:1.08rem;font-weight:600;color:#fff;margin:0 0 4px;line-height:1.25}
.reply-steps li:last-child .rs-title{color:var(--pass-soft)}
.reply-call{display:inline-block;font-family:var(--mono);font-size:.84rem;font-weight:600;color:var(--gold-light);text-decoration:none;border:1px solid rgba(201,169,97,.5);border-radius:999px;padding:9px 16px;transition:background .15s}
.reply-call:hover{background:rgba(201,169,97,.16)}
.map-areas{margin-top:12px}