/* Scoped to the lower homepage and player dialog. Do not edit the locked hero. */
.hp-details { --hpd-ink:#18251f; --hpd-muted:#58665e; --hpd-paper:#fafbf7; --hpd-lime:#c8f04a; color:var(--hpd-ink); background:var(--hpd-paper); font:400 16px/1.6 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-align:left; }
.hp-details *, .hp-player-dialog * { box-sizing:border-box; }
.hp-details h2, .hp-details h3, .hp-details p, .hp-details ol, .hp-details ul, .hp-details dl, .hp-details dd { margin:0; }
.hp-details h2, .hp-details h3 { font-family:inherit; font-style:normal; text-transform:none; }
.hp-details h2 { font-size:clamp(34px,4.1vw,62px); line-height:1.05; letter-spacing:-.055em; font-weight:750; }
.hp-details h2 em { font-style:normal; color:#607c36; }
.hp-details h3 { font-size:22px; line-height:1.25; font-weight:700; letter-spacing:-.035em; }
.hp-details button, .hp-details a { -webkit-tap-highlight-color:transparent; }
.hp-details button { font:inherit; cursor:pointer; border:0; }
.hp-details a { color:inherit; }
.hp-details :is(a,button,summary):focus-visible, .hp-player-dialog :is(a,button,select):focus-visible { outline:3px solid #45641d; outline-offset:5px; }
.hpd-wrap { width:min(1240px,100% - 96px); margin-inline:auto; }
.hpd-section { padding:92px 0; }
.hpd-bridge { min-height:68px; padding:18px max(48px,calc((100% - 1240px)/2)); display:flex; justify-content:space-between; align-items:center; gap:24px; background:#edf3de; border-bottom:1px solid #dfe7cf; color:#45553b; }
.hpd-bridge > span { font-size:11px; letter-spacing:.18em; font-weight:700; }
.hpd-bridge a { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.hpd-bridge a span { font-size:22px; }
.hp-details .hpd-kicker { color:#546a43; font-size:11px; font-weight:750; letter-spacing:.17em; line-height:1.5; margin-bottom:20px; }
.hpd-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:44px; }
.hpd-heading > p { color:var(--hpd-muted); max-width:320px; font-size:16px; line-height:1.7; padding-bottom:4px; }
.hp-details .hpd-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:0; }
.hpd-step { min-width:0; background:#fff; border:1px solid #e2e8dc; border-radius:21px; overflow:hidden; }
.hpd-photo { position:relative; aspect-ratio:1.43; overflow:hidden; background:#25372c; }
.hpd-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 42%,#07110d88); pointer-events:none; }
.hpd-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s ease; }
.hpd-step:hover .hpd-photo img { transform:scale(1.04); }
.hpd-number { position:absolute; top:18px; left:18px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#263222; font-size:13px; font-weight:750; }
.hpd-photo-tag { position:absolute; z-index:1; bottom:20px; left:22px; right:16px; color:white; font-size:13px; font-weight:600; }
.hpd-step-copy { padding:27px 25px 30px; }
.hpd-step-copy p { margin-top:12px; font-size:14px; line-height:1.7; color:var(--hpd-muted); }
.hp-details .hpd-sound { position:absolute; z-index:1; left:20px; bottom:18px; display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 15px; background:#fff; color:#1e2d26; border-radius:30px; font-size:13px; font-weight:600; }
.hpd-sound > span:first-child { font-size:10px; }
.hpd-wave { display:flex; align-items:center; height:20px; gap:3px; margin-left:8px; }
.hpd-wave i { display:block; width:3px; height:7px; border-radius:2px; background:#526e2a; }
.hpd-wave i:nth-child(2) { height:16px; }
.hpd-wave i:nth-child(3) { height:11px; }
.hpd-wave i:nth-child(4) { height:6px; }
.hpd-sound:hover .hpd-wave i { animation:hpd-wave .6s ease-in-out infinite alternate; }
.hpd-sound:hover .hpd-wave i:nth-child(2n) { animation-delay:.2s; }
@keyframes hpd-wave { to { transform:scaleY(.45); } }
.hpd-how-foot { margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.hpd-how-foot > span { max-width:660px; color:#58665e; font-size:12px; }
.hp-details .hpd-text-link { display:inline-flex; gap:14px; align-items:center; min-height:44px; background:transparent; color:#243b20; text-decoration:none; font-size:14px; font-weight:700; padding:0; flex-shrink:0; }
.hpd-text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.hpd-parents { background:#edf1e9; }
.hpd-parent-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:70px; align-items:center; }
.hpd-parent-art { position:relative; align-self:stretch; min-height:560px; overflow:hidden; border-radius:24px; background:#34433a; }
.hpd-parent-art img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:42% center; }
.hpd-parent-art::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 30%,#0b191acc); }
.hpd-art-copy { position:absolute; z-index:1; left:34px; right:20px; bottom:36px; color:white; }
.hpd-art-copy > span { font-size:10px; font-weight:600; letter-spacing:.17em; }
.hpd-art-copy p { margin-top:14px; font-size:clamp(25px,2.8vw,39px); line-height:1.12; letter-spacing:-.045em; font-weight:650; }
.hpd-parent-copy h2 { font-size:clamp(32px,3.65vw,53px); }
.hp-details .hpd-lead { color:var(--hpd-muted); margin-top:20px; max-width:470px; }
.hpd-benefits { margin-top:32px !important; display:grid; grid-template-columns:1fr 1fr; gap:28px 26px; }
.hpd-benefits dt { font-size:14px; font-weight:750; margin-bottom:7px; line-height:1.5; }
.hpd-benefits dt::before { content:''; display:block; width:20px; height:3px; background:#769a3b; border-radius:5px; margin-bottom:13px; }
.hpd-benefits dd { color:var(--hpd-muted); font-size:13px; line-height:1.65; }
.hpd-actions { margin-top:32px; display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.hp-details .hpd-btn { display:inline-flex; justify-content:center; align-items:center; gap:22px; min-height:54px; border-radius:999px; padding:14px 24px; font-size:14px; line-height:1.5; font-weight:700; text-decoration:none; transition:transform .18s,box-shadow .18s; }
.hpd-btn:hover { transform:translateY(-2px); box-shadow:0 7px 20px #18251f14; }
.hp-details .hpd-btn--ink { background:#1c3027; color:white; }
.hp-details .hpd-btn--lime { background:var(--hpd-lime); color:#1b2713; }
.hpd-btn span { font-size:20px; line-height:1; }
.hpd-pricing { background:#fafbf7; }
.hpd-plans { display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; }
.hpd-plan { border-radius:24px; padding:38px; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.hpd-plan--free { border:1px solid #dce4d5; background:white; }
.hpd-plan--family { color:white; background:radial-gradient(ellipse at top right,#3e523144,transparent 60%),#1c3027; border:1px solid #1c3027; }
.hpd-plan-label { display:block; font-size:10px; font-weight:700; letter-spacing:.16em; line-height:1.6; }
.hpd-plan--free .hpd-plan-label { color:#64725e; margin-bottom:16px; }
.hpd-plan h3 { font-size:28px; }
.hpd-family-top { display:flex; align-items:center; flex-wrap:wrap; gap:18px; justify-content:space-between; width:100%; margin-bottom:16px; }
.hpd-family-top .hpd-plan-label { color:#d4e2cd; }
.hpd-coming { padding:5px 10px; border:1px solid #739159; color:#dcf3aa; font-size:9px; letter-spacing:.1em; font-weight:700; border-radius:20px; white-space:nowrap; }
.hp-details .hpd-price { display:flex; align-items:baseline; gap:8px; font-size:76px; line-height:1.05; letter-spacing:-.07em; font-weight:650; margin-top:26px; }
.hpd-price > span { font-size:16px; letter-spacing:-.02em; font-weight:600; }
.hpd-price strong { font-weight:650; }
.hpd-price small { font-size:15px; font-weight:400; letter-spacing:0; margin-left:4px; }
.hpd-plan-caption { margin-top:11px !important; font-size:13px; color:#66705f; line-height:1.6; }
.hpd-plan--family .hpd-plan-caption { color:#c5d3c0; }
.hpd-billing { display:inline-flex; gap:4px; padding:4px; border:1px solid #64765d; border-radius:30px; margin-top:24px; }
.hp-details .hpd-billing button { padding:8px 13px; border-radius:24px; background:transparent; color:#e5eddf; font-size:12px; font-weight:600; min-height:38px; }
.hp-details .hpd-billing button[aria-pressed="true"] { background:#e5eddc; color:#263723; }
.hpd-billing button span { font-size:10px; margin-left:7px; opacity:.85; }
.hpd-plan ul { padding:0; list-style:none; width:100%; margin:28px 0 32px; font-size:14px; line-height:1.55; }
.hpd-plan li { display:flex; gap:12px; margin-top:12px; }
.hpd-plan li::before { content:'✓'; color:#557432; font-weight:700; }
.hpd-plan--family li::before { color:#c8f04a; }
.hpd-plan .hpd-btn { width:100%; margin-top:auto; }
.hpd-plan-note { text-align:center; width:100%; font-size:11px; line-height:1.65; margin-top:14px !important; color:#687363; }
.hpd-plan--family .hpd-plan-note { color:#c5d3c0; }
.hpd-price-disclosure { margin-top:22px !important; font-size:12px; color:#5e6b58; text-align:center; }
.hpd-price-disclosure a { text-underline-offset:3px; }
.hpd-faq { padding-top:16px; }
.hpd-faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.hpd-faq h2 { font-size:clamp(30px,3.1vw,45px); }
.hpd-faq-grid > div > p:last-child { margin-top:18px; font-size:14px; color:var(--hpd-muted); }
.hpd-questions details { border-bottom:1px solid #dae2d4; }
.hpd-questions details:first-child { border-top:1px solid #dae2d4; }
.hpd-questions summary { min-height:72px; padding:22px 0; display:flex; gap:20px; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; font-size:15px; font-weight:650; line-height:1.5; }
.hpd-questions summary::-webkit-details-marker { display:none; }
.hpd-questions summary span { font-size:25px; font-weight:400; transition:transform .2s; }
.hpd-questions details[open] summary span { transform:rotate(45deg); }
.hpd-questions details p { padding:0 32px 24px 0; color:var(--hpd-muted); font-size:14px; line-height:1.75; }
.hpd-finale { background:#d0ed85; padding:62px 0; }
.hpd-finale > .hpd-wrap { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.hpd-finale h2 { font-size:clamp(34px,4vw,56px); }
.hpd-finale .hpd-kicker { color:#405b22; }
.hpd-finale .hpd-btn { flex-shrink:0; }
.hpd-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* The actual player UI is absent from the public view, available on demand. */
.hp-player-dialog { inset:0; margin:auto; width:min(1120px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:28px; border:1px solid #d4dec9; border-radius:24px; background:#f6f9f1; color:#18251f; overflow:auto; font:400 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.hp-player-dialog:not([open]) { display:none; }
.hp-player-dialog::backdrop { background:#06120dbb; backdrop-filter:blur(6px); }
.hpd-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.hpd-dialog-head p { font-size:10px; letter-spacing:.14em; font-weight:700; color:#566e42; margin:0 0 10px; }
.hpd-dialog-head h2 { font:700 clamp(22px,3vw,34px)/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.035em; margin:0; }
.hp-player-dialog .hpd-dialog-close { width:44px; min-width:44px; height:44px; padding:0; border:1px solid #ccd7c1; border-radius:50%; background:white; color:#1c3027; font:400 28px/1 sans-serif; cursor:pointer; }
.hp-player-dialog .hp-lobby { padding:0; display:grid; grid-template-columns:280px 1fr; gap:24px; }
.hp-player-dialog .player-panel { width:auto; min-width:0; padding:20px; background:#eaf0df; border:1px solid #d0dcc3; border-radius:16px; color:#1c3027; }
.hp-player-dialog .player-panel h2, .hp-player-dialog .section-heading h2 { color:#1c3027; font:700 15px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.hp-player-dialog .player-progress__score strong { color:#1c3027; }
.hp-player-dialog .player-progress__score span, .hp-player-dialog .player-progress__caption, .hp-player-dialog .notice, .hp-player-dialog .offer, .hp-player-dialog label { color:#45563c; }
.hp-player-dialog .offer { border-color:#c9d5bb; }
.hp-player-dialog .offer p, .hp-player-dialog .offer a { color:#344e21; }
.hp-player-dialog select { background:white; color:#25351f; border:1px solid #bbcbb0; width:100%; font:inherit; }
.hp-player-dialog .hint-setting { margin-top:24px; }
.hp-player-dialog .levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hp-player-dialog .level { width:100%; min-height:118px; }
.hp-player-dialog .level-dock { min-width:0; }
.hp-player-dialog .level-dock .section-heading { margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.hp-player-dialog .level-dock .section-heading > span { color:#536446; font-size:10px; }
@media(min-width:1450px) { .hpd-wrap { width:min(1320px,100% - 128px); } .hpd-section { padding-block:106px; } }
@media(max-width:1000px) { .hpd-wrap { width:calc(100% - 56px); } .hpd-section { padding:64px 0; } .hpd-parent-grid { gap:36px; } .hpd-parent-art { min-height:520px; } .hpd-plan { padding:28px; } .hpd-billing button span { display:none; } .hpd-faq-grid { gap:40px; } .hpd-step-copy { padding:22px 18px; } .hp-details h3 { font-size:20px; } .hpd-heading > p { max-width:250px; font-size:14px; } }
@media(max-width:760px) { .hpd-wrap { width:calc(100% - 36px); } .hpd-bridge { padding:16px 20px; min-height:60px; } .hpd-bridge > span { font-size:8px; letter-spacing:.1em; } .hpd-bridge a { font-size:11px; gap:10px; } .hpd-section { padding:54px 0; } .hpd-heading { display:block; margin-bottom:28px; } .hpd-heading > p { max-width:100%; margin-top:20px; } .hp-details .hpd-kicker { font-size:9px; margin-bottom:15px; } .hp-details .hpd-steps { grid-template-columns:1fr; gap:18px; } .hpd-photo { aspect-ratio:1.7; } .hpd-step-copy { padding:24px; } .hpd-step-copy p { max-width:430px; } .hp-details h3 { font-size:23px; } .hpd-how-foot { align-items:flex-start; flex-direction:column; gap:12px; } .hpd-parent-grid { grid-template-columns:1fr; gap:32px; } .hpd-parent-art { min-height:0; aspect-ratio:1.1; } .hpd-art-copy { left:28px; bottom:28px; } .hpd-art-copy p { font-size:34px; } .hpd-benefits { gap:25px 20px; } .hpd-benefits dt { font-size:13px; } .hpd-benefits dd { font-size:12px; } .hpd-parent-copy h2 { font-size:39px; } .hpd-plans { grid-template-columns:1fr; gap:20px; } .hpd-plan { padding:28px; } .hpd-plan .hpd-price { font-size:70px; } .hpd-billing button span { display:inline; font-size:9px; } .hpd-faq-grid { grid-template-columns:1fr; gap:24px; } .hpd-faq h2 { font-size:36px; } .hpd-finale { padding:46px 0; } .hpd-finale > .hpd-wrap { flex-direction:column; align-items:flex-start; gap:28px; } .hp-player-dialog { padding:20px; max-height:calc(100dvh - 24px); } .hp-player-dialog .hp-lobby { grid-template-columns:1fr; } .hp-player-dialog .levels { grid-template-columns:repeat(3,minmax(0,1fr)); } .hp-player-dialog .level { min-height:105px; } }
@media(prefers-reduced-motion:reduce) { .hp-details *, .hp-details *::before, .hp-details *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }