@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap");
:root { font-family:"DM Sans",system-ui,sans-serif; color:#193d3b; background:#fffdfa; color-scheme:light; --teal:#3e6f6b; --sage:#78938a; --muted:#526c66; --border:#d5e3dd; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:var(--teal); text-underline-offset:4px; }
a:focus-visible,button:focus-visible { outline:3px solid var(--teal); outline-offset:5px; }
header,main,footer { width:min(1040px,calc(100% - 48px)); margin-inline:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:104px; }
.brand { display:inline-flex; align-items:center; min-height:44px; }
.brand img { display:block; width:224px; max-width:100%; height:auto; }
.back { display:inline-flex; gap:12px; align-items:center; min-height:44px; text-decoration:none; font-size:.9rem; }
.skip { position:absolute; top:-80px; left:20px; padding:12px; background:white; z-index:2; }
.skip:focus { top:12px; }
.intro { text-align:center; margin:36px auto 40px; }
.eyebrow { margin:0 0 12px; color:var(--teal); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; }
h1,h2 { font-family:"DM Serif Display",Georgia,serif; font-weight:400; }
h1 { margin:0; font-size:clamp(2.6rem,5.3vw,4.3rem); line-height:1.06; letter-spacing:-.025em; }
.intro > p:last-child { margin:20px 0 0; color:var(--muted); line-height:1.6; }
.platforms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:840px; margin:auto; }
.platform { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 28px 30px; background:white; border:1px solid var(--border); border-radius:24px; }
.platform-art { width:174px; height:174px; object-fit:contain; margin:0 0 22px; }
.platform h2 { font-size:1.65rem; margin:0 0 12px; }
.platform > p:not(.eyebrow) { color:var(--muted); font-size:.93rem; line-height:1.55; margin:0 0 24px; }
.platform [data-store] { width:100%; margin-top:auto; }
.store-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; width:100%; padding:12px 16px; border:1px solid transparent; border-radius:999px; background:var(--teal); color:white; font:600 .9rem/1.4 "DM Sans",system-ui,sans-serif; text-decoration:none; }
.store-button:disabled { background:#eef4f0; border-color:var(--border); color:var(--muted); cursor:default; }
a.store-button:hover { background:#315b57; }
.desktop { max-width:840px; margin:36px auto 0; padding:28px 0; border-block:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.desktop h2 { font-size:1.6rem; margin:0 0 8px; }
.desktop p { color:var(--muted); margin:0; font-size:.9rem; line-height:1.6; }
.desktop-actions { text-align:center; }
.desktop-button { min-height:48px; padding:12px 22px; display:inline-flex; justify-content:center; align-items:center; gap:14px; border:1px solid #b7cec3; border-radius:999px; text-decoration:none; font-weight:600; font-size:.9rem; }
.desktop-button:hover { background:#e8f1ed; }
.desktop-actions p { display:flex; justify-content:center; align-items:center; margin-top:6px; gap:6px; }
.desktop-actions p a { display:inline-flex; min-height:44px; align-items:center; font-size:.8rem; }
.account-note { color:var(--muted); text-align:center; margin:22px 0 36px; font-size:.83rem; line-height:1.6; }
footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding:20px 0 28px; border-top:1px solid var(--border); color:var(--muted); font-size:.8rem; }
footer p { margin:0; align-self:center; }
footer nav { display:flex; gap:22px; }
footer a { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:600px) { header,main,footer { width:calc(100% - 32px); } header { min-height:88px; gap:12px; } .brand img { width:164px; } .back { font-size:.8rem; gap:6px; } .intro { margin:24px 0 30px; } .platforms { grid-template-columns:1fr; gap:16px; } .platform { padding:22px; } .platform-art { width:144px; height:144px; margin-bottom:18px; } .desktop { flex-direction:column; text-align:center; gap:20px; margin-top:28px; } .desktop-actions { width:100%; } .desktop-button { width:100%; } footer { justify-content:center; text-align:center; } }

/* Keep the family in the upper corners beside the headline. Reuse the outer
   portions of one transparent scene without stretching the figures. */
body { position:relative; isolation:isolate; min-height:100vh; }
.download-scene { --scene-color:#CBDDD4; --scene-width:min(100vw,1050px); position:absolute; z-index:-1; top:70px; left:0; width:100%; height:calc(var(--scene-width) / 3); pointer-events:none; }
.download-scene::before,.download-scene::after { content:""; position:absolute; top:0; width:calc(var(--scene-width) * .26); height:100%; background:var(--scene-color); -webkit-mask:url("/download/family-surf-scene.webp") left center / var(--scene-width) auto no-repeat; mask:url("/download/family-surf-scene.webp") left center / var(--scene-width) auto no-repeat; }
.download-scene::before { left:0; }
.download-scene::after { right:0; -webkit-mask-position:right center; mask-position:right center; }
@media(max-width:1050px) { .download-scene { top:auto; bottom:22px; height:auto; aspect-ratio:3 / 1; } .download-scene::before { width:100%; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .download-scene::after { display:none; } footer { padding-bottom:clamp(70px,14vw,150px); } }