/* Long-form guide layout. Builds on /seo/assets/seo.css tokens. */
.guide-hero{padding:170px 0 80px;border-bottom:1px solid var(--line)}
.guide-hero h1{font-size:clamp(40px,5.2vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:400;max-width:980px}
.guide-hero h1 em{font-family:"DM Serif Display",serif;font-style:italic;font-weight:400}
.guide-standfirst{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#cfcfcf;max-width:720px;margin-top:34px}
.guide-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a}
.crumbs{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin-bottom:34px}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:#fff}
.guide-layout{display:grid;grid-template-columns:240px minmax(0,720px);gap:90px;padding:80px 0 40px}
.toc{position:sticky;top:110px;align-self:start;font-size:14px;line-height:1.5}
.toc p{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;margin-bottom:16px}
.toc ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:block;padding:11px 0;color:#bdbdbd;text-decoration:none}
.toc a:hover{color:#fff}
.prose{font-size:18px;line-height:1.72;color:#dcdcdc}
.prose>*+*{margin-top:22px}
.prose h2{font-size:clamp(28px,2.6vw,38px);line-height:1.12;letter-spacing:-.035em;color:#fff;font-weight:400;margin:84px 0 0;scroll-margin-top:110px;max-width:none}
.prose h2:first-child{margin-top:0}
.prose h2 em{font-family:"DM Serif Display",serif;font-style:italic}
.prose h3{font-size:21px;line-height:1.3;letter-spacing:-.02em;color:#fff;font-weight:500;margin-top:44px}
.prose a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6a6a6a}
.prose a:hover{text-decoration-color:#fff}
.prose strong{color:#fff;font-weight:500}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:10px}
.answer{border:1px solid var(--line);padding:30px 32px;border-radius:2px}
.answer p:first-child{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;margin-bottom:14px}
.answer p+p{margin-top:0}
.answer ol{margin-top:16px}
.step{border-top:1px solid var(--line);padding-top:30px;margin-top:56px}
.step .number{display:block;font-size:12px;letter-spacing:.14em;color:#8a8a8a;margin-bottom:10px}
.step h3{margin-top:0}
.note{border-left:1px solid #fff;padding:4px 0 4px 22px;color:#cfcfcf}
.note strong{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;font-weight:500;margin-bottom:6px}
.dont{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.dont div{border-bottom:1px solid var(--line);padding:18px 0}
.dont b{color:#fff;font-weight:500}
.guide-figure{margin-top:36px}
.guide-figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:2px}
.guide-figure figcaption{font-size:13px;color:#9a9a9a;margin-top:12px;line-height:1.6}
.prose .metrics{margin:36px 0 0}
.guide-list{border-top:1px solid var(--line);margin-top:50px}
.guide-card{display:grid;grid-template-columns:120px 1fr auto;gap:30px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.guide-card:hover h2{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.guide-card h2{font-size:clamp(24px,2.3vw,34px);margin:0;max-width:none}
.guide-card p{color:#a8a8a8;margin-top:10px;font-size:16px;max-width:640px}
.guide-card span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a}
@media (max-width:980px){
 .guide-layout{grid-template-columns:1fr;gap:40px;padding-top:50px}
 .toc{position:static}
 .guide-card{grid-template-columns:1fr;gap:8px}
}
@media (max-width:600px){
 .guide-hero{padding:130px 0 56px}
 .prose{font-size:17px}
 .answer{padding:22px 20px}
 .prose .metrics{grid-template-columns:1fr 1fr}
}
.step p+p{margin-top:14px}
.step h3{margin-bottom:6px}
.prose .metrics{grid-template-columns:1fr 1fr;margin:34px 0 44px}
.prose .metric:nth-child(odd){padding-left:0;border-left:0}
.prose .metric:nth-child(n+3){border-top:1px solid var(--line)}
@media (max-width:600px){.prose .metrics{grid-template-columns:1fr}.prose .metric{padding-left:0;border-left:0}.prose .metric+.metric{border-top:1px solid var(--line)}}