/* Long-form guide layout: extends home.css + sleek.css */
.guide .h-hero h1{font-size:clamp(34px,4.4vw,56px)}
.g-byline{display:flex;align-items:center;gap:12px;margin-top:24px}
.g-byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 20%}
.g-byline div{display:flex;flex-direction:column;font-size:14px;color:var(--muted)}.g-byline b{color:var(--ink);font-size:15px}
.g-glance{gap:6px}
.g-glance .s-visual-top b{font-size:16px}
.g-glance-list{margin:0;display:grid}
.g-glance-list div{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.g-glance-list dt{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.g-glance-list dd{margin:0;font-size:14px;color:var(--muted);line-height:1.45}

/* two-column article layout with sticky contents */
.g-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding-block:72px 40px}
.g-toc{position:sticky;top:96px;align-self:start}
.g-toc .h-mono{margin:0 0 12px}
.g-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.g-toc a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:14.5px}
.g-toc a:hover{color:var(--navy);border-left-color:var(--yellow)}
.g-body{max-width:820px;min-width:0}
.g-sec{scroll-margin-top:96px;margin-bottom:64px}
.g-sec>h2{font-size:clamp(26px,2.8vw,34px)!important;margin-bottom:16px!important}
.g-sec>p{font-size:17px;line-height:1.75;color:#33475b;margin:0 0 20px}
.g-sec p a,.g-steps a,.s-note a{color:var(--navy);font-weight:700}
.g-why{margin-top:8px}
.g-why .h-card,.g-sec .h-grid3 .h-card{padding:24px}
.g-sec .h-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-table thead th{white-space:nowrap}
.g-table tbody th{white-space:normal;font-size:16px;min-width:180px}
.g-table td b{font-size:20px}

/* steps timeline */
.g-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;position:relative}
.g-steps li{display:grid;grid-template-columns:40px 1fr;gap:20px;padding-bottom:28px;position:relative}
.g-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--line)}
.g-steps .s-num{margin:0}
.g-steps h3{font-size:19px;margin:6px 0 6px}
.g-steps p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}

/* checklists */
.g-list{margin:8px 0 0}
.g-list li{font-weight:400;color:#33475b;line-height:1.6}
.g-list li b{color:var(--ink)}
.g-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g-checklist div{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.g-checklist .code{width:auto;min-width:56px;padding:7px 8px;flex:none}
.g-checklist p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}.g-checklist b{color:var(--ink)}

/* in-article CTA */
.g-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:var(--r);padding:28px 32px;margin:8px 0 64px}
.g-cta .h-mono{color:var(--yellow);margin:0 0 8px}
.g-cta h3{color:#fff!important;font-size:22px;margin:0 0 6px}
.g-cta p{margin:0;color:rgba(255,255,255,.8);font-size:15px}
.g-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.g-cta .h-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.g-cta .h-btn-ghost:hover{background:#fff;color:var(--navy)}

/* author */
.g-author{display:flex;gap:18px;align-items:flex-start;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--mist)}
.g-author img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none}
.g-author p{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.6}.g-author a{color:var(--navy);font-weight:700}

@media (max-width:1024px){
 .g-layout{grid-template-columns:1fr;gap:24px;padding-block:48px 24px}
 .g-toc{position:static;background:var(--mist);border-radius:14px;padding:18px 20px}
 .g-toc ol{columns:2;column-gap:24px;border:0}.g-toc a{padding:5px 0;border:0;margin:0}
 .g-sec .h-grid3{grid-template-columns:1fr}
}
@media (max-width:760px){
 .g-glance-list div{grid-template-columns:92px 1fr}.g-glance-list dt{font-size:22px}
 .g-toc ol{columns:1}
 .g-sec{margin-bottom:48px}.g-sec>p{font-size:16px}
 .g-checklist{grid-template-columns:1fr}
 .g-cta{padding:24px}.g-cta-actions{width:100%}.g-cta .h-btn{width:100%;justify-content:center}
 .g-steps li{grid-template-columns:36px 1fr;gap:14px}.g-steps li:not(:last-child)::before{left:17px}
}

/* images */
.g-body .g-fig{max-width:600px;margin:4px 0 28px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.g-body .g-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.g-body .g-fig-lead{max-width:none;margin:0 0 48px}
.g-body .g-step-img{display:block;width:100%;max-width:380px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-top:14px}
.g-byline span+span{margin-top:2px}
.g-upd{font-size:inherit!important;color:var(--navy)!important}
.g-sec>.h-kicker{margin:0 0 8px;color:var(--red);font-size:12px}
.g-why .h-card>.code{align-self:flex-start;margin-bottom:14px}
.g-body .g-why .h-card p a{color:var(--navy);font-weight:700}
.g-sec>h3{font-size:20px;margin:28px 0 12px}