.home-v3 { --mint:#b4e9d3; --gutter:clamp(22px,5vw,96px); }
.home-v3 main { overflow:clip; padding-top:98px; }
.home-v3 h1,.home-v3 h2 { text-wrap:balance; }
.v3-hero { max-width:1700px; margin:auto; min-height:calc(100svh - 80px); padding:65px var(--gutter) 50px; display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:5%; }
.v3-intro { color:var(--muted); font-size:1rem; margin-bottom:26px; }
.v3-hero h1 { font-size:clamp(4.2rem,7.1vw,8.1rem); line-height:1.03; letter-spacing:-.04em; max-width:12ch; }
.v3-hero-description { max-width:540px; margin-top:30px; font-size:clamp(1rem,1.35vw,1.25rem); color:var(--muted); }
.v3-hero-actions { display:flex; align-items:center; gap:26px; margin-top:32px; flex-wrap:wrap; }
.v3-text-action { font-size:.875rem; font-weight:650; }
.v3-text-action span { margin-left:8px; }
.v3-availability { font-size:.75rem; color:var(--muted); margin-top:14px; }
.v3-hero-art { width:min(100%,390px); justify-self:center; }
.home-v3 .phone-proof { --proof-ink:#286b56; }
.v3-real-caption { color:var(--muted); font-size:.75rem; text-align:center; margin-top:15px; }
.v3-app-strip { padding:30px var(--gutter) 45px; max-width:1600px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:35px; }
.v3-app-strip p { font-size:.9rem; line-height:1.5; }
.v3-app-strip>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:clamp(16px,2.6vw,43px); }
.v3-app-strip a { padding:5px; border-radius:10px; }
.v3-differences { background:#0e1b2a; color:var(--paper); }
.v3-story { border-bottom:1px solid #ffffff1a; }
.v3-story-stage { max-width:1600px; margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:8%; align-items:center; padding:85px var(--gutter); min-height:900px; }
.v3-platform { display:flex; gap:12px; align-items:center; font-size:.9rem; margin-bottom:24px; }
.v3-platform img { width:30px; height:30px; }
.v3-differences .v3-platform img { filter:invert(1); }
.v3-story h2 { font-size:clamp(3.2rem,5.5vw,6.3rem); letter-spacing:-.045em; }
.v3-story-copy>p { font-size:clamp(1rem,1.3vw,1.2rem); max-width:430px; color:#b6c5d1; margin-top:25px; }
.v3-story-copy>p.v3-keeps { color:#b4e9d3; font-size:.875rem; margin-top:20px; }
.v3-story-copy .v2-link { margin-top:28px; color:#f3f7f5; }
.v3-story-visual { width:min(100%,400px); justify-self:center; }
.v3-story .phone-proof { --proof-ink:#b4e9d3; }
.v3-compare { position:relative; }
.v3-before { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; }
.v3-before .proof-handset { overflow:hidden; }
.v3-before video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; border-radius:30px; }
.v3-before video[data-ready] { opacity:1; }
.v3-story[data-demo-phase="idle"] .v3-compare video { opacity:0; }
.v3-compare-actions { display:flex; justify-content:center; gap:4px; margin:20px auto 0; background:#ffffff0a; padding:4px; width:max-content; max-width:100%; border-radius:30px; }
.v3-compare-actions button { font-size:.75rem; padding:9px 15px; border-radius:30px; color:#aabcc9; }
.v3-compare-actions button[aria-pressed="true"] { background:#b4e9d3; color:#0e1b2a; }
html:not(.v2-js) .v3-compare-actions { display:none; }
.v3-explanation,.v3-section-heading,.v3-family,.v3-questions { display:grid; grid-template-columns:1fr 1fr; gap:12%; padding:105px var(--gutter); max-width:1600px; margin:auto; }
.v3-explanation h2,.v3-section-heading h2,.v3-progress h2,.v3-family h2,.v3-questions h2 { font-size:clamp(2.8rem,4.2vw,4.9rem); }
.v3-explanation p,.v3-section-heading p,.v3-progress-copy>p,.v3-family p { max-width:480px; color:var(--muted); font-size:1.05rem; }
.v3-explanation p+p { margin-top:20px; }
.v3-explanation .v2-link { margin-top:28px; }
.v3-controls { padding:0 var(--gutter) 80px; max-width:1600px; margin:auto; }
.v3-section-heading { padding:50px 0; align-items:end; }
.v3-control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.v3-control { min-width:0; padding:25px 0 0; border-top:1px solid #bdcbc5; }
.v3-control-heading { display:flex; align-items:center; gap:12px; }
.v3-control-heading h3 { font-size:1.5rem; }
.v3-control-heading>span { margin-left:auto; }
.v3-control>p { margin-top:10px; color:var(--muted); font-size:.875rem; }
.v3-control-window { background:#f9f6ee; border:1px solid #d4d6cb; border-radius:16px; margin-top:22px; padding:15px; height:240px; display:flex; align-items:center; overflow:hidden; }
.v3-control-window img { width:100%; max-height:210px; object-fit:contain; }
.v3-control:hover .v3-control-heading h3 { text-decoration:underline; text-underline-offset:5px; }
.v3-purchase-note { margin-top:30px; font-size:.75rem; color:var(--muted); }
.v3-audiences { max-width:1600px; margin:auto; padding:35px var(--gutter) 85px; }
.v3-audience-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; margin-bottom:45px; }
.v3-audience-heading h2 { font-size:clamp(2.8rem,4.2vw,4.9rem); }
.v3-audience-heading>p { max-width:25ch; color:var(--muted); }
.v3-audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.v3-audience-choice { min-width:0; border-top:1px solid #bdcbc5; padding-top:26px; }
.v3-audience-art { height:260px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--paper); margin-bottom:25px; }
.v3-audience-art img { width:auto; height:100%; object-fit:contain; }
.home-audience-phone img { border:4px solid var(--ink); border-radius:18px; }
.home-audience-family img { border-radius:18px; }
.home-audience-browser img { width:100%; height:auto; border:1px solid #bdcbc5; border-top:14px solid #e0e9e3; border-radius:10px; }
.v3-audience-choice h3 { display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:clamp(1.65rem,2vw,2.2rem); }
.v3-audience-choice h3>span { font-family:var(--body); font-size:1.3rem; }
.v3-audience-choice>p { margin-top:12px; font-size:.875rem; color:var(--muted); }
.v3-audience-choice:hover h3 { text-decoration:underline; text-underline-offset:6px; }
@media(max-width:767px) {
 .v3-audiences { padding:10px var(--gutter) 55px; }
 .v3-audience-heading { display:block; margin-bottom:32px; }
 .v3-audience-heading h2 { font-size:clamp(2.3rem,9vw,3.5rem); }
 .v3-audience-heading>p { margin-top:24px; font-size:.9375rem; }
 .v3-audience-grid { grid-template-columns:1fr; gap:36px; }
 .v3-audience-art { height:250px; }
 .v3-audience-choice h3 { font-size:1.8rem; }
}
.v3-progress { display:grid; grid-template-columns:1fr 1.1fr; gap:10%; align-items:center; background:var(--paper); padding:85px var(--gutter); }
.v3-progress-art { max-width:460px; justify-self:center; position:relative; }
.v3-progress-art>img { width:100%; border-radius:40% 40% 32% 32%; }
.v3-prism-note { display:block; text-align:center; font:600 2rem Caveat,cursive; color:#395b51; margin-top:8px; }
.v3-progress-copy>p { margin-top:25px; }
.v3-trophies { max-width:480px; margin:28px 0; }
.v3-trophies img { border-radius:22px; }
.v3-trophies figcaption { margin-top:12px; font-size:.75rem; color:#696253; }
.v3-family { align-items:end; }
.v3-family>div>p { margin-bottom:25px; }
.v3-questions { border-top:1px solid #ccd8d2; padding-top:65px; }
.v3-questions .v2-questions { padding:0; }
.v3-ending { background:var(--paper); text-align:center; padding:95px 24px 105px; }
.v3-ending h2 { font-size:clamp(3.5rem,7vw,7.5rem); }
.v3-ending p { margin:25px auto 30px; }
.v3-ending>a:last-child { display:block; width:max-content; margin:20px auto 0; font-size:.875rem; text-decoration:underline; text-underline-offset:5px; }
@media(min-width:1600px) { .v3-progress { padding-left:max(var(--gutter),calc((100vw - 1450px)/2)); padding-right:max(var(--gutter),calc((100vw - 1450px)/2)); } }
@media(max-width:1023px) { .v3-hero { grid-template-columns:1.3fr 1fr; gap:3%; } .v3-hero h1 { font-size:7.4vw; } .v3-hero-art { width:min(100%,330px); } .v3-app-strip { align-items:start; } .v3-app-strip>div { max-width:430px; gap:20px; } .v3-control-grid { grid-template-columns:repeat(2,1fr); } .v3-story-stage { gap:4%; } .v3-story h2 { font-size:5.7vw; } }
@media(max-width:767px) {
 .home-v3 main { padding-top:80px; }
 .v3-hero { display:flex; flex-direction:column; min-height:0; padding:38px var(--gutter) 32px; gap:34px; align-items:stretch; }
 .v3-intro { margin-bottom:17px; font-size:.8125rem; }
 .v3-hero h1 { font-size:clamp(3.2rem,12.8vw,5.5rem); max-width:13ch; }
 .v3-hero-description { font-size:.9375rem; margin-top:21px; }
 .v3-desktop-break { display:none; }
 .v3-hero-actions { gap:18px; margin-top:24px; }
 .v3-hero-actions .v2-button { padding:14px 20px; font-size:.875rem; }
 .v3-text-action { font-size:.75rem; }
 .v3-hero-art { width:min(83%,330px); align-self:center; }
 .v3-hero-art .proof-ink { font-size:1.6rem; }
 .v3-app-strip { flex-direction:column; gap:22px; padding-top:22px; }
 .v3-app-strip>div { width:100%; max-width:none; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
 .v3-app-strip img { width:32px; height:32px; }
 .v3-story-stage { grid-template-columns:1fr; gap:30px; padding:50px var(--gutter); min-height:0; }
 .v3-story h2 { font-size:clamp(2rem,8.5vw,3.4rem); max-width:13ch; }
 .v3-platform { margin-bottom:15px; font-size:.75rem; gap:10px; }
 .v3-platform img { width:24px; height:24px; }
 .v3-story-copy>p { font-size:.875rem; margin-top:17px; max-width:350px; }
 .v3-story-copy>p.v3-keeps { font-size:.75rem; margin-top:12px; }
 .v3-story-copy .v2-link { margin-top:15px; font-size:.75rem; }
 .v3-story-visual { width:min(100%,315px); }
 .v3-story .proof-handset { box-shadow:0 0 0 1px #a9b7be,3px 3px 0 2px #526878; }
 .v3-compare-actions button { font-size:.6875rem; padding:8px 12px; min-height:38px; }
 .v3-story .proof-ink { font-size:clamp(1.1rem,4.8vw,1.4rem); }
 .v3-explanation,.v3-section-heading,.v3-family,.v3-questions { grid-template-columns:1fr; gap:30px; padding:60px var(--gutter); }
 .v3-explanation h2,.v3-section-heading h2,.v3-progress h2,.v3-family h2,.v3-questions h2 { font-size:clamp(2.3rem,9vw,3.5rem); }
 .v3-explanation p,.v3-section-heading p,.v3-progress-copy>p,.v3-family p { font-size:.9375rem; }
 .v3-controls { padding-bottom:55px; }
 .v3-section-heading { padding:10px 0 35px; }
 .v3-control-grid { grid-template-columns:1fr; gap:32px; }
 .v3-control-window { height:auto; min-height:145px; padding:18px; }
 .v3-control-window img { max-height:250px; }
 .v3-progress { grid-template-columns:1fr; gap:30px; padding:45px var(--gutter) 60px; }
 .v3-progress-art { max-width:300px; }
 .v3-progress-copy { max-width:480px; justify-self:center; }
 .v3-family h2 { font-size:9vw; }
 .v3-questions { gap:35px; }
 .v3-ending { padding:60px var(--gutter); }
 .v3-ending h2 { font-size:11vw; }
}
/* The page always stays in normal flow, including while browser bars resize. */
.v3-before,.v3-after { transition:opacity .28s ease,visibility .28s; }
.v3-demo-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; min-height:48px; }
.v3-demo-controls button { border:1px solid #6d918a; border-radius:24px; min-width:122px; min-height:44px; padding:10px 15px; color:#b4e9d3; font-size:.75rem; }
.v3-demo-controls button:hover { background:#b4e9d314; }
.v3-demo-controls p { font-size:.6875rem; line-height:1.5; color:#adbeca; }
html:not(.v2-js) .v3-demo-controls { display:none; }
@media(prefers-reduced-motion:reduce) { .v3-before,.v3-after { transition:none; } }