*{box-sizing:border-box}
.guide-page{margin:0;font:16px/1.65 var(--brand-ui-font);background:var(--brand-cream);color:var(--brand-ink)}
.guide-page a{color:var(--brand-teal);text-underline-offset:4px}
.guide-page a:focus-visible,.guide-page summary:focus-visible{outline:3px solid var(--brand-teal);outline-offset:5px}
.guide-page .skip-link{position:absolute;top:-100px;left:16px;z-index:2;padding:12px;background:white}
.guide-page .skip-link:focus{top:10px}
.guide-page .topbar{display:flex;align-items:center;justify-content:space-between}
.guide-page .topbar nav{display:flex;gap:24px;font-weight:700;font-size:.9rem}
.guide-shell{max-width:1200px;margin:0 auto;padding:0 32px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;padding:24px 0;font-size:.8rem;color:var(--brand-muted)}
.guide-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;padding:24px 0 64px}
.guide-page .eyebrow{font-size:.72rem;letter-spacing:.14em;font-weight:800;text-transform:uppercase;margin:0 0 12px}
.guide-page h1{font-size:clamp(2.15rem,4.3vw,3.6rem);line-height:1.08;letter-spacing:-.04em;margin:0 0 24px;text-wrap:balance}
.hero-intro{color:var(--brand-muted);font-size:1.125rem;line-height:1.65;margin:0 0 28px}
.guide-page .guide-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:14px 22px;background:var(--brand-coral);color:var(--brand-ink);border-radius:9px;box-shadow:0 4px 0 var(--brand-coral-dark);text-decoration:none;font-weight:800;line-height:1.4}
.guide-page .guide-button:hover{background:#ff755b}
.hero-detail{font-size:.8rem;color:var(--brand-muted);margin:16px 0 0}
.guide-figure{margin:0;padding:16px;background:#e9f2ef;border:1px solid #cbdad4;border-radius:24px;transform:rotate(1deg)}
.guide-figure img{display:block;width:100%;height:auto;border-radius:14px}
.guide-figure figcaption{font-size:.78rem;line-height:1.5;color:var(--brand-muted);padding:14px 6px 0}
.whiteboard-figure{background:#f2e1ba;border-color:#d4bc83;transform:rotate(-1deg)}
.slide-figure{background:#1d6f73;border-color:#1d6f73;transform:none}
.slide-figure figcaption{color:#fff}
.guide-content{max-width:900px;margin:auto;background:#fff;border:1px solid var(--brand-line);border-top:5px solid var(--brand-gold);border-radius:4px 4px 16px 16px;padding:clamp(24px,5vw,56px)}
.guide-content section+section,.guide-content .sample-block+section{margin-top:44px}
.guide-page h2{font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.25;letter-spacing:-.02em;margin:0 0 20px}
.guide-page h3{font-size:1.05rem;line-height:1.4;margin:0 0 8px}
.guide-content p{color:var(--brand-muted);margin:0 0 18px}
.steps{list-style:none;padding:0;counter-reset:step;margin:24px 0 0}
.steps>li{position:relative;counter-increment:step;padding-left:54px;margin:0 0 28px}
.steps>li:before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;background:#fff0d0;color:#182024;font-weight:800;border-radius:50%}
.sample-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:26px;background:#edf5f2;border:1px solid #cbdad4;border-radius:12px;margin-top:32px;align-items:center}
.sample-block p{font-size:.9rem}
.sample-block pre{margin:0;padding:18px;background:#fff;border-radius:8px;border:1px solid var(--brand-line);font-size:.82rem;line-height:1.8;overflow:auto;max-width:100%}
.text-link{font-weight:700}
.table-wrap{overflow-x:auto;margin:0 0 22px}
.guide-page table{border-collapse:collapse;width:100%;font-size:.9rem;text-align:left}
.guide-page th{color:var(--brand-ink);background:#edf5f2}
.guide-page th,.guide-page td{padding:13px 16px;border-bottom:1px solid var(--brand-line);vertical-align:top;min-width:120px}
.guide-page td{color:var(--brand-muted)}
.callout{padding:28px;border-left:4px solid var(--brand-teal);background:#fffaf0}
.callout p:last-child{margin-bottom:0}
.guide-page details{border-top:1px solid var(--brand-line);padding:16px 0}
.guide-page summary{font-weight:700;cursor:pointer}
.guide-page details p{margin:12px 0 0}
.guide-page .source-note{font-size:.8rem;line-height:1.6}
.tips{padding-left:20px;color:var(--brand-muted)}
.tips li{padding-left:5px;margin:0 0 16px}
.tips strong{color:var(--brand-ink)}
.guide-next{max-width:900px;margin:0 auto;padding:48px 0 64px}
.guide-next nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:28px}
.guide-next nav a{display:flex;justify-content:space-between;gap:16px;padding:20px;background:#fff;border:1px solid var(--brand-line);border-radius:10px;text-decoration:none;font-weight:700}
.guide-next nav a:hover{border-color:var(--brand-teal)}
@media(max-width:900px){.guide-hero{grid-template-columns:1fr;gap:36px;padding-bottom:40px}.guide-hero>div{max-width:650px}.guide-figure{max-width:640px;justify-self:center}.guide-page .brand{flex-basis:240px;width:240px}.guide-page .topbar nav{gap:16px}}
@media(max-width:600px){.guide-shell{padding:0 20px}.guide-page .topbar{height:auto;min-height:104px;flex-wrap:wrap;gap:0;padding:10px 20px 14px}.guide-page .brand{flex-basis:210px;width:210px;height:56px}.guide-page .topbar nav{width:100%;font-size:.82rem;gap:22px}.breadcrumbs{padding:18px 0}.guide-hero{padding-top:14px;gap:28px}.hero-intro{font-size:1rem}.guide-content{padding:24px 20px}.sample-block{grid-template-columns:1fr;padding:20px;gap:16px}.steps>li{padding-left:44px}.steps>li:before{width:30px;height:30px}.callout{padding:20px}.guide-next nav{grid-template-columns:1fr}.guide-page .guide-button{font-size:.95rem}.guide-figure{padding:10px;border-radius:18px}.guide-page th,.guide-page td{padding:10px 12px}}