.guide-page { --content: 1024px; }
.guide-width, .guide-layout { width: min(calc(100% - 32px), 1024px); margin-inline: auto; }
.guide-hero { padding: 32px 0 64px; background: #fff4e9; border-bottom: 1px solid #f3d7be; }
.breadcrumbs { color: var(--muted); font-size: 14px; margin-bottom: 40px; }
.guide-hero .eyebrow { color: #a63d00; }
.guide-hero h1 { max-width: 850px; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.55; margin: 0; }
.guide-lead { max-width: 770px; font-size: 20px; color: var(--charcoal); }
.guide-button { display: inline-block; background: var(--ink); color: white; padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding-block: 56px 80px; align-items: start; }
.guide-toc { position: sticky; top: 104px; padding-inline-end: 20px; border-inline-end: 2px solid var(--border); }
.guide-toc a { display: block; padding-block: 7px; font-size: 14px; text-decoration: none; color: var(--charcoal); }
.guide-toc a:hover { text-decoration: underline; }
.guide-body { min-width: 0; font-size: 18px; }
.guide-body section { scroll-margin-top: 100px; }
.guide-body section + section { margin-top: 52px; }
.guide-body h2 { font-size: 29px; line-height: 1.6; margin: 0 0 18px; }
.guide-body h3 { font-size: 21px; margin-bottom: 8px; }
.guide-body li { margin-block: 12px; }
.guide-body ol, .guide-body ul { padding-inline-start: 24px; }
.guide-body a { color: #9b3800; text-underline-offset: 4px; }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 17px; }
.guide-body caption { text-align: start; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.guide-body th, .guide-body td { text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.guide-body thead { background: var(--surface-soft); }
.guide-note { padding: 20px; border-inline-start: 4px solid var(--orange); background: #fff4e9; }
.example-card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.english-example { font-size: 24px; }
.example-card summary { cursor: pointer; font-weight: 700; padding-block: 12px; }
.example-card + .example-card { margin-top: 24px; }
.example-card details { border-top: 1px solid var(--border); }
.app-walkthrough { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; }
.app-walkthrough figure { margin: 0; }
.app-walkthrough img { display: block; width: 100%; height: auto; }
.app-walkthrough figcaption { color: var(--muted); font-size: 12px; margin-top: 12px; }
.guide-download { background: #fff4e9; padding: 28px; border-radius: 16px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; right: 16px; z-index: 20; padding: 12px; background: white; }
.skip-link:focus { top: 12px; }
@media (max-width: 800px) {
.guide-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 32px; }
.guide-toc { position: static; }
.guide-hero { padding-bottom: 40px; }
.guide-lead { font-size: 18px; }
.guide-body { font-size: 17px; }
}
@media (max-width: 520px) {
.guide-body h2 { font-size: 25px; }
.app-walkthrough { grid-template-columns: minmax(0, 1fr); }
.app-walkthrough figure { max-width: 230px; margin-inline: auto; }
.example-card, .guide-download { padding: 20px; }
.guide-download .store-links { flex-direction: column; align-items: center; }
}