.guide-intro{max-width:920px;padding:56px 0 48px}.guide-intro h1{font-size:48px;line-height:1.12;margin:16px 0 24px;overflow-wrap:break-word}.guide-lead{font-size:20px;line-height:1.65;max-width:820px}.guide-meta{font-size:13px;line-height:1.6;color:var(--public-muted,#526974)}.guide-story{border-top:1px solid var(--public-line,#cfdee3);padding:40px 0 64px}.guide-story-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:32px}.guide-story h2{font-size:34px;line-height:1.2;margin:12px 0}.guide-story h2 a{text-decoration:none;color:inherit}.guide-story-heading p{line-height:1.7}.guide-story-links{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:24px}.guide-cover{display:block;max-width:960px;margin:auto;border:1px solid #cfdee3;border-radius:6px;overflow:hidden}.guide-cover img{display:block;width:100%;height:auto}.guide-quick-notes{border-top:1px solid #cfdee3;padding:36px 0}.guide-quick-notes h2{font-size:28px}.guide-quick-notes details{border-bottom:1px solid #cfdee3;padding:20px 0;scroll-margin-top:100px}.guide-quick-notes summary{font-weight:700;cursor:pointer}.guide-quick-notes details p{max-width:760px;line-height:1.7}.guide-breadcrumb{display:flex;flex-wrap:wrap;gap:12px;padding-top:40px;font-size:14px}.guide-reading-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:60px;border-top:1px solid #cfdee3;padding-top:40px}.guide-toc{position:sticky;top:100px;display:grid;gap:16px;font-size:14px;line-height:1.5}.guide-toc a{color:inherit;text-decoration:none}.guide-toc a:hover{text-decoration:underline}.guide-prose{max-width:840px;min-width:0}.guide-prose p{font-size:18px;line-height:1.8;margin:0 0 22px}.guide-prose section{padding:32px 0;scroll-margin-top:90px}.guide-prose h2{font-size:30px;line-height:1.25;margin:0 0 24px}.guide-prose .guide-note{font-size:16px;border-left:3px solid #1ba578;padding:4px 0 4px 20px}.guide-figure{margin:30px 0}.guide-figure img{display:block;width:100%;height:auto;border:1px solid #cfdee3;border-radius:6px}.guide-figure figcaption{font-size:13px;line-height:1.6;margin-top:10px;color:var(--public-muted,#526974)}.guide-figure figcaption span{display:block}.guide-film video{display:block;width:100%;aspect-ratio:16/9;border-radius:6px;background:#102f3b}.guide-film>p{font-size:16px;margin-top:16px}.guide-cta{border-top:1px solid #cfdee3;margin-top:60px;padding-top:48px}.guide-cta h2{font-size:34px;line-height:1.25;margin:16px 0 28px}
@media(max-width:900px){.guide-intro h1{font-size:40px}.guide-story-heading{grid-template-columns:1fr;gap:8px}.guide-reading-layout{grid-template-columns:1fr;gap:32px}.guide-toc{position:static;grid-template-columns:1fr 1fr}.guide-toc>p{grid-column:1/-1}.guide-prose{max-width:none}}
@media(max-width:600px){.guide-intro{padding:32px 0}.guide-intro h1{font-size:32px}.guide-lead{font-size:18px}.guide-story h2,.guide-cta h2{font-size:28px}.guide-toc{grid-template-columns:1fr;gap:12px}.guide-prose p{font-size:17px}.guide-prose h2{font-size:26px}.guide-prose section{padding:24px 0}.guide-breadcrumb{padding-top:28px}.guide-story{padding:28px 0 40px}.guide-story-links .button{white-space:normal;text-align:center}.guide-figure{margin:24px 0}}
.guide-material { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.guide-article > .guide-film { max-width: 840px; margin: 0 0 48px; scroll-margin-top: 100px; }
.guide-article > .guide-film h2 { font-size: 26px; margin: 0 0 18px; }
.guide-material-copy { min-width: 0; }
.guide-material-copy > p { line-height: 1.7; }
.guide-material-image { display: block; min-width: 0; }
.guide-material-image img { display: block; width: 100%; height: auto; border: 1px solid var(--public-line); border-radius: 6px; }
.guide-material-featured .guide-material-image { max-width: 362px; justify-self: center; }
.guide-material:not(.guide-material-featured) h2 { font-size: 28px; }
.guide-material-featured { border-top: 3px solid var(--public-green); }
.guide-material .button, .guide-cta .button { max-width: 100%; white-space: normal; text-align: center; }
.guide-steps { padding-left: 24px; font-size: 18px; line-height: 1.8; }
.guide-steps li { padding-left: 6px; margin-bottom: 22px; }
.guide-prose .story-picture { margin-block: 28px; }
.guide-prose > .guide-film:first-child { padding-top: 0; }
.guide-hub-v2 .guide-intro { padding-block: 40px 32px; }
.guide-hub-v2 h2 { font-size: 30px; line-height: 1.25; margin: 8px 0 16px; }
.guide-hub-v2 h3 { font-size: 23px; line-height: 1.3; margin: 0 0 12px; }
.guide-hub-v2 p { line-height: 1.65; }
.guide-hub-v2 .guide-material-featured { padding: 28px 0 36px; gap: 40px; }
.guide-film-preview { display: grid; place-items: center; position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; }
.guide-film-preview img { width: 100%; height: 100%; object-fit: contain; }
.guide-play { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #087d72; color: #fff; font-size: 26px; box-shadow: 0 2px 12px #0004; }
.guide-band { border-top: 1px solid var(--public-line); padding-block: 36px; }
.guide-band > header { margin-bottom: 20px; }
.guide-band > header p { max-width: 760px; margin-bottom: 0; }
.guide-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.guide-tip { border: 1px solid var(--public-line); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; align-items: start; min-width: 0; }
.guide-tip > a { margin-top: auto; padding-top: 16px; min-height: 44px; font-weight: 700; }
.guide-tip-proof { width: 100%; max-width: 358px; height: auto; display: block; margin-block: 8px; border-radius: 4px; }
.guide-start-link { margin: 0 0 20px; }
.guide-inline-tip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; border-bottom: 1px solid var(--public-line); padding: 4px 0 20px; }
.guide-inline-tip p { margin: 0; }
.guide-inline-tip h3 { font-size: 20px; margin-bottom: 4px; }
.guide-inline-tip > a { padding-block: 12px; }
.guide-payment-feature, .guide-parent-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px; }
.guide-payment-feature { padding-block: 28px; }
.guide-payment-feature h3 { font-size: 30px; }
.guide-payment-feature picture { display: block; min-width: 0; }
.guide-payment-feature img { display: block; width: 100%; height: auto; border: 1px solid var(--public-line); border-radius: 6px; }
.guide-benefits { padding-left: 20px; margin-block: 20px; line-height: 1.7; font-weight: 700; }
.guide-benefits li { margin-bottom: 8px; }
.guide-benefits li::marker { color: var(--public-green); }
.guide-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 20px; border-top: 1px solid var(--public-line); }
.guide-related a { text-decoration: none; color: inherit; font-size: 15px; line-height: 1.6; }
.guide-related a:hover strong { text-decoration: underline; }
.guide-related span { display: block; margin-top: 8px; color: var(--public-muted); }
.guide-parent-benefits { list-style: none; padding: 0; line-height: 1.65; }
.guide-parent-benefits li { margin-bottom: 16px; }
.guide-parent-benefits strong { display: block; }
.guide-mini { width: 100%; max-width: 430px; margin: 24px 0; }
.guide-mini img { display: block; width: 100%; height: auto; border: 1px solid var(--public-line); border-radius: 6px; }
.guide-mini figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--public-muted); }
.guide-mini figcaption span { display: block; }
.guide-mini-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.guide-parent-feature > .guide-mini { justify-self: center; max-width: 390px; margin: 0; }
.guide-hub-v2 .guide-quick-notes { padding-block: 28px; }
.guide-hub-v2 .guide-quick-notes details { padding-block: 16px; }
.guide-hub-v2 .guide-quick-notes summary { line-height: 1.6; }
.guide-hub-v2 .guide-cta { margin-top: 12px; padding-top: 28px; }
.guide-hub-v2 a:focus-visible { outline: 3px solid var(--public-green); outline-offset: 4px; }
.guide-gallery { width: 100%; min-width: 0; max-width: 680px; margin: 28px auto; }
.guide-hub-v2 .guide-gallery { margin-block: 0; }
.guide-gallery-previews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.guide-gallery-preview { position: relative; display: block; padding: 6px; border: 1px solid var(--public-line); border-radius: 6px; background: var(--public-screenshot); cursor: zoom-in; min-width: 0; }
.guide-gallery-preview:first-child { grid-column: 1 / -1; padding: 16px; }
.guide-gallery-expand { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--public-line); border-radius: 4px; background: var(--public-surface); color: var(--public-ink); font-size: 22px; line-height: 1; }
.guide-gallery .guide-gallery-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; border: 0; border-radius: 3px; }
.guide-gallery-preview:focus-visible { outline: 3px solid var(--public-green); outline-offset: 3px; }
.guide-gallery figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--public-muted); }
.guide-gallery figcaption span { display: block; }
.guide-gallery-dialog { width: min(1380px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--public-line); border-radius: 8px; background: var(--public-surface); color: var(--public-ink); }
.guide-gallery-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.guide-gallery-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.guide-gallery-toolbar > span { margin-right: auto; font-size: 14px; }
.guide-gallery-dialog button { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--public-line); border-radius: 4px; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
.guide-gallery-dialog button:disabled { opacity: .35; cursor: default; }
.guide-gallery-dialog button:focus-visible { outline: 3px solid var(--public-green); outline-offset: 2px; }
.guide-gallery-stage { overflow: auto; height: min(64dvh, 800px); background: var(--public-screenshot); border-radius: 4px; }
.guide-gallery .guide-gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
.guide-gallery .guide-gallery-stage.is-zoomed img { width: 1280px; max-width: none; height: 800px; }
.guide-gallery-navigation { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.guide-gallery .guide-gallery-navigation p { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) {
    .guide-hub.public-page-main, .guide-article.public-page-main { width: calc(100% - 32px); }
    .guide-material { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .guide-material-image { max-width: 390px; width: 100%; margin-inline: auto; }
    .guide-material h2 { overflow-wrap: break-word; }
    .guide-steps { font-size: 17px; }
    .guide-hub-v2 .guide-intro { padding-block: 32px 24px; }
    .guide-hub-v2 h2, .guide-payment-feature h3 { font-size: 26px; }
    .guide-hub-v2 .guide-material-featured { gap: 24px; padding-block: 24px; }
    .guide-tips, .guide-related, .guide-payment-feature, .guide-parent-feature, .guide-mini-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .guide-tip { padding: 20px; }
    .guide-payment-feature picture { max-width: 362px; justify-self: center; }
    .guide-band { padding-block: 28px; }
    .guide-hub-v2 .button { max-width: 100%; white-space: normal; text-align: center; }
    .guide-gallery-preview:first-child { padding: 12px; }
    .guide-gallery-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
    .guide-gallery-stage { height: auto; aspect-ratio: 16 / 10; }
    .guide-gallery-stage.is-zoomed { height: 52dvh; aspect-ratio: auto; }
    .guide-gallery-navigation { gap: 8px; }
}