.guide-hero, .guide-hub-hero { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.guide-hero { padding: 76px 0 84px; }
.guide-hub-hero { padding: 110px 0 120px; }
.guide-breadcrumbs { margin-bottom: 70px; display: flex; gap: 10px; color: #77766e; font-size: 12px; font-weight: 700; }
.guide-breadcrumbs a { color: inherit; }
.guide-hero h1, .guide-hub-hero h1 { max-width: 980px; margin: 0; font-family: var(--serif); font-size: clamp(58px, 7.2vw, 108px); font-weight: 500; letter-spacing: -.052em; line-height: .93; }
.guide-intro, .guide-hub-hero > p:last-child { max-width: 720px; margin: 34px 0 0; color: #55554f; font-size: 20px; line-height: 1.65; }
.guide-meta { margin-top: 36px; padding-top: 15px; display: flex; gap: 28px; border-top: 1px solid var(--line); color: #77766e; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide-layout { padding: 100px max(24px, calc((100vw - 1120px)/2)) 120px; display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 330px); gap: 70px; background: #fffdf7; border-top: 1px solid var(--line); }
.guide-content { min-width: 0; }
.guide-section + .guide-section { margin-top: 84px; padding-top: 74px; border-top: 1px solid var(--line); }
.guide-section h2 { margin: 0 0 27px; font-family: var(--serif); font-size: clamp(38px, 4.5vw, 62px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.guide-section p { margin: 0 0 20px; color: #44443f; font-size: 18px; line-height: 1.75; }
.guide-section code { padding: 2px 5px; border-radius: 3px; background: #eeece4; color: #272823; font: .86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.guide-steps, .guide-points { margin: 30px 0 0; padding: 0; list-style: none; }
.guide-steps { counter-reset: guide-step; }
.guide-steps li, .guide-points li { padding: 22px 0; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.7fr); gap: 28px; border-top: 1px solid var(--line); }
.guide-steps li { counter-increment: guide-step; }
.guide-steps strong::before { content: counter(guide-step, decimal-leading-zero) " "; color: #8b8a82; }
.guide-steps strong, .guide-points strong { font-size: 14px; line-height: 1.5; }
.guide-steps span, .guide-points span { color: #5d5c56; font-size: 15px; line-height: 1.65; }
.guide-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.guide-table-wrap table { width: 100%; border-collapse: collapse; min-width: 650px; }
.guide-table-wrap th, .guide-table-wrap td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; line-height: 1.5; }
.guide-table-wrap th { background: #22231f; color: white; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.guide-table-wrap tr:last-child td { border-bottom: 0; }
.guide-sources ul { padding-left: 20px; }
.guide-sources li { margin: 10px 0; }
.guide-sources a { color: #2426a8; }
.guide-aside { align-self: start; position: sticky; top: 30px; }
.guide-tool-card { padding: 27px; background: #1e201e; color: white; border-radius: 7px; box-shadow: 7px 7px 0 var(--acid); }
.guide-tool-card > span { color: #b7b7af; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-tool-card h2 { margin: 50px 0 16px; font-family: var(--serif); font-size: 38px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.guide-tool-card p { color: #b7b7af; font-size: 13px; line-height: 1.55; }
.guide-tool-card .button { margin-top: 22px; background: white; color: #1e201e; }
.guide-related { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.guide-related > strong { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.guide-related a { padding: 13px 0; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); color: #353630; font-size: 13px; text-decoration: none; }
.guide-hub-list { padding: 95px max(24px, calc((100vw - 1120px)/2)) 120px; background: #1e201e; color: white; }
.guide-hub-heading { margin-bottom: 52px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: end; }
.guide-hub-heading h2 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(48px, 6vw, 82px); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.guide-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-card { min-height: 330px; padding: 27px; display: flex; flex-direction: column; border: 1px solid #4a4c47; border-radius: 7px; color: white; text-decoration: none; }
.guide-card:hover { border-color: var(--acid); box-shadow: 6px 6px 0 var(--acid); }
.guide-card > span { color: #aaa9a1; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-card h2 { margin: auto 0 18px; font-family: var(--serif); font-size: clamp(34px, 4vw, 55px); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.guide-card p { margin: 0 0 22px; color: #aaa9a1; font-size: 14px; line-height: 1.55; }
.guide-card strong { color: var(--acid); font-size: 12px; }

@media (max-width: 780px) {
    .guide-hero, .guide-hub-hero { width: calc(100% - 30px); }
    .guide-hero { padding: 58px 5px 70px; }
    .guide-hub-hero { padding: 75px 5px 85px; }
    .guide-breadcrumbs { margin-bottom: 50px; }
    .guide-hero h1, .guide-hub-hero h1 { font-size: clamp(52px, 15vw, 75px); }
    .guide-intro, .guide-hub-hero > p:last-child { font-size: 17px; }
    .guide-meta { flex-direction: column; gap: 8px; }
    .guide-layout { padding-top: 70px; padding-bottom: 90px; grid-template-columns: 1fr; gap: 70px; }
    .guide-section + .guide-section { margin-top: 65px; padding-top: 58px; }
    .guide-section p { font-size: 17px; }
    .guide-steps li, .guide-points li { grid-template-columns: 1fr; gap: 8px; }
    .guide-aside { position: static; }
    .guide-hub-heading, .guide-card-grid { grid-template-columns: 1fr; }
    .guide-hub-heading { gap: 18px; }
    .guide-card { min-height: 280px; }
}