/* Public landing-page section; colors remain owned by the shared DTC theme. */
.parent-guide { width: min(1160px, calc(100% - 44px)); margin: 0 auto; padding: 0 0 96px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.guide-copy, .guide-media { min-width: 0; }
.guide-copy h2 { margin: 0; font-family: var(--ui-title-font, inherit); font-size: clamp(32px, 3.5vw, 46px); line-height: 1.4; color: var(--ui-ink, var(--navy)); }
.guide-copy .eyebrow { letter-spacing: 0; }
.guide-intro { margin: 20px 0; color: var(--ui-muted, var(--muted)); font-size: 17px; line-height: 1.95; }
.guide-meta { font-size: 13px; font-weight: 750; color: var(--ui-success, var(--mint)); margin: 0 0 18px; }
.guide-youtube { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; color: var(--brand-blue, var(--navy)); font-weight: 800; text-underline-offset: 5px; border-radius: 6px; }
.guide-youtube small { flex-basis: 100%; color: var(--ui-muted, var(--muted)); font-weight: 400; font-size: 12px; }
.guide-youtube:hover { color: var(--ui-focus, var(--magenta)); }
.guide-youtube:active { opacity: .8; }
.guide-player { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border-radius: var(--ui-radius, 18px); overflow: hidden; background: var(--ui-ink, var(--navy)); border: 1px solid var(--ui-line, var(--line)); }
.guide-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(22px, 3vw, 40px); color: var(--ui-surface, var(--white)); isolation: isolate; }
.guide-cover[hidden], .guide-load[hidden] { display: none; }
.guide-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; opacity: .2; z-index: -1; }
.guide-cover-copy { border-inline-start: 3px solid var(--brand-green, var(--lime)); padding-inline-start: 16px; }
.guide-cover-copy > span { display: block; font-size: 12px; margin-bottom: 6px; }
.guide-cover-copy strong { display: block; font-size: clamp(23px, 2.8vw, 35px); line-height: 1.55; }
.guide-load { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 22px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--ui-control-radius, 12px); background: var(--ui-surface, var(--white)); color: var(--ui-ink, var(--navy)); font: inherit; font-weight: 800; cursor: pointer; transition: background-color 150ms ease; }
.guide-load:hover { background: var(--ui-tint, var(--mint-soft)); }
.guide-load:active { background: var(--brand-green, var(--lime)); }
.guide-load:focus-visible, .guide-youtube:focus-visible { outline: 3px solid var(--ui-focus, var(--magenta)); outline-offset: 4px; }
.guide-player iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-player iframe:focus-visible { outline: 3px solid var(--brand-green, var(--lime)); outline-offset: -4px; }
.guide-caption { min-height: 96px; padding-top: 14px; color: var(--ui-muted, var(--muted)); font-size: 12px; line-height: 1.8; }
.guide-caption p { margin: 0 0 5px; }
.guide-nojs { font-size: 13px; line-height: 1.8; }
@media (max-width: 920px) { .parent-guide { grid-template-columns: 1fr; gap: 28px; padding-bottom: 60px; } .guide-copy { max-width: 620px; } }
@media (max-width: 500px) { .parent-guide { width: calc(100% - 32px); } .guide-cover { padding: 18px; } .guide-cover-copy strong { font-size: 23px; } .guide-load { margin-top: 14px; } .guide-intro { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .guide-load { transition: none; } }
@media (forced-colors: active) { .guide-player, .guide-load { border-color: CanvasText; } .guide-cover img { display: none; } .guide-load:focus-visible, .guide-youtube:focus-visible, .guide-player iframe:focus-visible { outline-color: Highlight; } }