/* Guide content components, scoped to the guide sections of the strategy page. */
.guide-main .costs{border-top:1px solid var(--border)}
.guide-main .cost{display:grid;grid-template-columns:1fr;gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--border)}
@media(min-width:680px){.guide-main .cost{grid-template-columns:136px minmax(0,1fr);align-items:start}}
.guide-main .cost-w{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);padding-top:3px}
.guide-main .cost-w b{display:block;color:var(--r700);font-size:18px;letter-spacing:-.01em;font-weight:500}
.guide-main .cost h4{margin:0;font-size:15px}
.guide-main .cost p{margin:4px 0 0;color:var(--fg-2)}
.guide-main .blk{border:1px solid var(--border);border-radius:4px;background:var(--surface);padding:18px 20px;margin:0 0 12px}
.guide-main .blk-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.guide-main .blk-h h4{margin:0;font-size:15px}
.guide-main .chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid var(--n300);color:var(--fg-muted);white-space:nowrap}
.guide-main .chip.now{border-color:var(--o500);color:var(--o700)}
.guide-main .chip.owed{border-color:var(--y700);color:var(--y700)}
.guide-main .blk .lead{margin:0 0 10px;font-size:14px;color:var(--fg-2)}
.guide-main ul.tight{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.guide-main ul.tight li{color:var(--fg-2);font-size:14px}
.guide-main ul.tight li strong{color:var(--fg)}
.guide-main .starts{counter-reset:s}
.guide-main .start{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--n300);border-radius:4px;background:var(--surface);margin:0 0 10px}
.guide-main .start::before{counter-increment:s;content:counter(s);font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--o500);line-height:1;padding-top:2px}
.guide-main .start h4{margin:0;font-size:15px}
.guide-main .start p{margin:4px 0 0;font-size:14px;color:var(--fg-2)}
.guide-main .qlist{margin:0 0 18px;padding-left:20px}
.guide-main .qlist li{font-size:15px;margin:0 0 5px}
.guide-main .qlist a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--n300)}
.guide-main .qlist a:hover{color:var(--o700);border-bottom-color:var(--o500)}
.guide-main .snip{background:var(--n50);border:1px solid var(--border);border-radius:4px;padding:9px 12px;margin:8px 0 12px;overflow-x:auto}
.guide-main .snip code{font-family:var(--mono);font-size:12.5px;color:var(--fg);white-space:pre}
.guide-main h5.sub{font-family:var(--font-display);font-size:14px;margin:18px 0 6px;color:var(--fg)}
.guide-main .qa{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.guide-main .qa p{margin:0 0 5px;font-size:12.5px;color:var(--fg-2)}
.guide-main .qa p:last-child{margin-bottom:0}
.guide-main .qa-a,.guide-main .qa-u{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
.guide-main .qa-a{color:var(--g700)}
.guide-main .qa-u{color:var(--y700)}
.guide-main .flowq{margin:14px 0 0}
.guide-main .fq{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:0 0 18px 0;position:relative}
.guide-main .fq::after{content:"";position:absolute;left:13px;top:26px;bottom:2px;width:1px;background:var(--n300)}
.guide-main .fq.last::after{display:none}
.guide-main .fq-n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--o500);color:var(--o700);font-family:var(--mono);font-size:12px;background:var(--surface);position:relative;z-index:1}
.guide-main .fq b{font-size:13.5px}
.guide-main .fq p{margin:3px 0 0;font-size:14px;color:var(--fg-2)}
.guide-main .itc{display:grid;gap:10px;margin:16px 0 6px}
@media(min-width:760px){.guide-main .itc{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.guide-main .itc-c{border:1px solid var(--n300);border-radius:4px;background:var(--surface);padding:14px 16px}
.guide-main .itc-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--o700);margin-bottom:6px}
.guide-main .itc-c b{display:block;font-size:13.5px;line-height:1.35}
.guide-main .itc-c .itc-q{margin:5px 0 0;font-size:13px;color:var(--fg-muted)}
.guide-main .ref-disclosure{margin:24px 0 0;border-top:1px solid var(--border);padding-top:12px}
.guide-main .ref-disclosure>summary{cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);padding:6px 0}
.guide-main .ref-disclosure>summary:hover{color:var(--o700)}
.guide-main .ref-disclosure[open]>summary{margin-bottom:14px}
.guide-main ul.tight,.guide-main ol.tight{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.guide-main ul.tight li,.guide-main ol.tight li{color:var(--fg-2);font-size:14px}
.guide-main ul.tight li strong,.guide-main ul.tight li b,.guide-main ol.tight li strong,.guide-main ol.tight li b{color:var(--fg)}
.guide-main .chk{border-top:1px solid var(--border);margin:14px 0 0}
.guide-main .chk-i{display:grid;grid-template-columns:1fr;gap:4px 20px;padding:15px 0;border-bottom:1px solid var(--border)}
@media(min-width:680px){.guide-main .chk-i{grid-template-columns:152px minmax(0,1fr);align-items:start}}
.guide-main .chk-w{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);padding-top:3px}
.guide-main .chk-i h4{margin:0;font-size:15px}
.guide-main .chk-i p{margin:4px 0 0;color:var(--fg-2);font-size:14px}
.guide-main .chk-v{margin-top:8px;padding-left:11px;border-left:2px solid var(--o500);font-size:12.5px;color:var(--fg-2)}
.guide-main .chk-v b{color:var(--fg)}
.guide-main .groups{display:grid;gap:10px;margin:20px 0 22px}
@media(min-width:760px){.guide-main .groups{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Section 18 and 19 components inside the shared Architecture / Strategy shell. */
.guide-hero .body-text{margin-top:12px;margin-bottom:0}
.guide-hero .scope-box{align-items:baseline;flex-wrap:wrap}
.guide-main .section-num{width:auto;min-width:42px;padding:0 7px}
.guide-main [id]{scroll-margin-top:24px}
.strategy-index summary{cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);padding:8px}
.strategy-index summary:hover{color:var(--fg-primary)}
.strategy-index a.on{background:var(--g-50);border-left-color:var(--o-500);color:var(--fg-primary)}
.guide-main .blk,.guide-main .start,.guide-main .itc-c{border-color:var(--border-default);border-radius:var(--r-card);padding:20px}
.guide-main .blk{margin-bottom:16px}
.guide-main .blk-h{gap:8px 12px;margin-bottom:12px}
.guide-main .blk h4,.guide-main .start h4{font-size:15px;font-weight:600}
.guide-main .blk .lead,.guide-main .tight li,.guide-main .start p,.guide-main .chk-i p,.guide-main .fq p{font-size:13px;line-height:1.65}
.guide-main .chip{border-radius:6px;letter-spacing:.05em;font-size:10px;white-space:normal;overflow-wrap:anywhere}
.guide-main .chip.now{background:var(--g-50);color:var(--g-700);border-color:var(--g-500)}
.guide-main .chip.owed{background:var(--y-50);color:var(--y-700);border-color:var(--y-500)}
.guide-main .snip{border-radius:8px;padding:12px 16px}
.guide-main .snip code{overflow-wrap:normal}
.guide-main .start::before{display:flex;align-items:center;justify-content:center;background:var(--n-900);color:var(--n-0);border-radius:7px;width:28px;height:28px;padding:0;font:12px var(--font-mono)}
.guide-main .starts{position:relative}
.guide-main .start{position:relative;margin-bottom:14px}
.guide-main .start:not(:last-child)::after{content:"";position:absolute;left:33px;bottom:-15px;width:2px;height:14px;background:var(--o-500)}
.guide-main .costs,.guide-main .chk{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;overflow:hidden;margin:20px 0}
.guide-main .cost,.guide-main .chk-i{padding:18px 20px;border-bottom-color:var(--n-100)}
.guide-main .cost:last-child,.guide-main .chk-i:last-child{border-bottom:0}
.guide-main .groups{gap:16px}
.guide-main .groups .blk{margin:0}
.guide-main .itc{gap:16px}
.guide-main .itc-c{border-top:3px solid var(--o-500)}
.guide-main .flowq{padding:20px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;margin:20px 0}
.guide-main .fq.last{padding-bottom:0}
.guide-main .qa{background:var(--n-50);border:1px solid var(--border-default);border-radius:8px;padding:12px 16px}
.guide-main .qlist{display:grid;gap:10px;list-style:none;padding:0}
.guide-main .qlist li{margin:0;font-size:13px}
.guide-main .qlist a{display:block;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;padding:12px 16px}
.guide-main .qlist a:hover{border-color:var(--o-500)}
@media(max-width:1100px){.guide-main .groups{grid-template-columns:1fr}}
@media(max-width:1000px){.strategy-index{display:none}}
@media(max-width:640px){.guide-hero{padding:20px}.guide-hero .display{font-size:26px}.guide-main .blk,.guide-main .start,.guide-main .itc-c{padding:16px}.guide-main .start:not(:last-child)::after{left:29px}.guide-main .itc{grid-template-columns:1fr}}

/* Section 3 parts: heading, what it is, in ConnectIQ, optional implementation details. */
.guide-main .part{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--border-default);scroll-margin-top:24px}
.guide-main .part:first-of-type{margin-top:24px}
.guide-main .part>h3{margin:0 0 8px;font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guide-main .part>p{max-width:72ch;margin:0 0 10px}
.guide-main .part>p b:first-child{color:var(--fg-primary)}
.guide-main .part .ref-disclosure{margin-top:14px;border-top:0;padding-top:0}
.guide-main .part .ref-disclosure>summary{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border-default);border-radius:var(--r-pill);background:var(--n-0)}
.guide-main .part .ref-disclosure[open]>summary{margin-bottom:14px}
.guide-main h4.sub{font-size:13.5px;font-weight:600;margin:20px 0 6px}