.guide-page { width: min(780px, 100%); margin: 0 auto; padding: 64px 24px 36px; line-height: 1.75; }
.guide-open { font-size: 13px; text-underline-offset: 4px; white-space: nowrap; }
.guide-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.guide-page h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.12; letter-spacing: -.04em; margin: 16px 0 24px; }
.guide-lead { font-size: 19px; color: #b9bdc8; max-width: 650px; }
.guide-cta { display: inline-flex; gap: 24px; align-items: center; margin-top: 28px; padding: 12px 20px; border-radius: 8px; color: #151619; background: var(--accent); font-weight: 650; text-decoration: none; }
.guide-caption { margin-top: 10px; font-size: 12px; color: var(--muted); }
.guide-page section { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 48px; }
.guide-page h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 24px; }
.guide-page h3 { font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
.guide-page section p { color: #b9bdc8; font-size: 16px; }
.guide-figure { margin: 30px 0 38px; }
.guide-figure img { display: block; max-width: 100%; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.guide-figure figcaption { color: #b9bdc8; font-size: 14px; line-height: 1.65; margin-top: 13px; }
.guide-figure figcaption strong { color: #e6e8ef; }
.guide-phone img { max-width: 390px; }
.guide-figure a { display: block; width: fit-content; max-width: 100%; }
.guide-page p a, .guide-footer a { text-underline-offset: 4px; }
.guide-steps { padding-left: 25px; }
.guide-steps li { padding-left: 8px; margin: 26px 0; }
.guide-steps li::marker { color: var(--accent); font-weight: 650; }
.guide-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.guide-faq h3 { margin-top: 26px; }
.guide-footer { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.guide-footer p { width: 100%; font-size: 12px; color: var(--muted); }
.guide-byline { margin-top: 18px; font-size: 13px; color: var(--muted); }
.design-intro { margin-top: 26px; color: #b9bdc8; }
.design-contents { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: 14px; text-underline-offset: 4px; }
.design-guide section > p + p { margin-top: 18px; }
.design-guide h2 { scroll-margin-top: 24px; }
.design-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0; }
.design-examples figure { margin: 0; }
.design-examples a { display: block; }
.design-examples img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.design-examples figcaption { font-size: 14px; line-height: 1.65; color: #b9bdc8; margin-top: 12px; }
.design-examples figcaption strong { color: #e6e8ef; }
.design-guide .example-video-title { margin-top: 10px; color: #e6e8ef; font-size: 15px; line-height: 1.4; font-weight: 600; }
@media (max-width: 600px) { .design-examples { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .guide-page { padding-top: 36px; } .guide-lead { font-size: 17px; } .guide-checks { grid-template-columns: 1fr; gap: 22px; } .guide-page h2 { font-size: 23px; } .guide-open { font-size: 12px; } }
@media (max-width: 430px) { .guide-open { display: none; } }