/* Additions only. The original ocean, hero, shell, and daylight band remain. */
.native-window { color:#17303c; background:#fbfcfc; border:1px solid #cbdadd; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -32px rgba(0,15,24,.5); }
.native-title { display:flex; align-items:center; gap:16px; background:#e9eeee; color:#435a63; padding:13px 18px; font-size:.78rem; border-bottom:1px solid #d7e0e1; }
.window-dots { display:flex; gap:6px; flex:none; }
.window-dots i { width:9px; height:9px; border-radius:50%; background:#a0b3b7; }
.window-dots i:first-child { background:#df8d87; }
.window-dots i:nth-child(2) { background:#d5b66a; }
.window-dots i:last-child { background:#83b49b; }
.stage-body { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:34px; align-items:center; padding-bottom:24px; }
.stage .app { padding:0; gap:0; border-radius:14px; background:#fbfcfc; border-color:#cbdadd; color:#17303c; min-height:320px; overflow:hidden; box-shadow:0 24px 40px -30px #00111b; }
.native-app-content { padding:23px; display:grid; gap:22px; }
.app .app-head { padding-bottom:12px; border-bottom:1px solid #dce5e6; }
.app .app-sub,.app .track-artist { color:#59717b; }
.app .msg { color:#17303c; background:#e6eded; padding:12px 17px; }
.app .msg.out { color:#fff; background:#0e7c86; }
.app .msg b { color:#41636c; }
.app .compose { border-color:#becfd2; color:#607a83; background:#fff; }
.app .compose.has { color:#17303c; border-color:#458c89; }
.app .play-state { color:#216759; border-color:#bcced0; }
.app .progress { background:#dce7e5; }
.app .progress i { background:#0e7c86; }
.app .cover { background:linear-gradient(150deg,#0c5560,#072433); position:relative; }
.app .cover:after { content:''; position:absolute; inset:12px; border:1px solid #8febdf; border-radius:50%; }
.app .mail.open { background:#e8f0f0; border-color:#ccdddf; }
.app .mail-body { color:#57727a; }
.app .appearance { background:#e7efef; }
.app .appearance span { color:#4b6871; }
.app .appearance .on { background:#0c5560; color:#fff; }
.app .thread.looked .last { background:#d1eae4; }
.ways-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; align-items:center; }
.ways-copy h2 { font-size:clamp(2.3rem,4vw,3.6rem); line-height:1.05; }
.ways-copy>p { max-width:36ch; color:var(--text-soft); margin-top:24px; }
.ways-tabs { margin-top:36px; display:grid; }
.ways-tabs button { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 0; font:500 1rem var(--font); color:var(--text-soft); border:0; border-bottom:1px solid var(--hair); background:transparent; cursor:pointer; text-align:left; }
.ways-tabs button[aria-pressed=true] { color:var(--lagoon); }
.ways-tabs button:hover { color:var(--text); }
.keys { display:flex; gap:4px; flex:none; }
.keys kbd { font:500 .75rem var(--font); background:#0b303e; border:1px solid #527783; border-bottom-width:3px; color:#d2e6e9; padding:3px 7px; border-radius:5px; min-width:25px; text-align:center; }
.ways-visual { padding:25px 0; }
.mini-octa { background:#092734; border:1px solid #ffffff26; color:#edf5f5; border-radius:18px; margin:0 22px 24px; padding:16px; display:flex; align-items:center; gap:12px; box-shadow:0 20px 40px -22px #00101c; font-size:.88rem; }
.mini-octa img { border-radius:7px; flex:none; }
.mini-status { color:var(--champagne); font-size:.76rem; margin-left:auto; white-space:nowrap; }
.native-mail { padding:24px; }
.mail-to { font-size:.9rem; color:#57727a; padding-bottom:13px; border-bottom:1px solid #dce5e6; }
.mail-to b { color:#17303c; font-weight:500; margin-left:16px; }
.mail-subject { font-size:.9rem; padding:14px 0; border-bottom:1px solid #dce5e6; }
.native-mail>p { min-height:120px; padding-top:25px; font-size:1.05rem; line-height:1.7; }
.draft-foot { font-size:.76rem; color:#58767f; border-top:1px solid #dce5e6; padding-top:14px; }
.visual-caption { font-size:.92rem; color:var(--text-soft); text-align:center; margin:24px auto 0; max-width:42ch; }
.visual-note { font-size:.75rem; color:var(--text-faint); text-align:center; margin-top:8px; }
.consent-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:center; }
.consent-layout .yes h2 { font-size:clamp(2.6rem,4.7vw,4.1rem); }
.consent-layout .yes p { font-size:1.08rem; }
.consent-visual { padding:22px 0; }
.consent-window { background:#fff; box-shadow:none; }
.consent-thread { display:flex; flex-direction:column; gap:20px; padding:32px 24px 45px; min-height:248px; }
.incoming-bubble { background:#edf1f2; color:#3a535e; border-radius:17px 17px 17px 4px; padding:12px 17px; align-self:flex-start; font-size:.92rem; }
.draft-message { background:#f7fafa; color:#254d58; border:1px solid #bacfd2; border-radius:12px; padding:13px 16px; align-self:stretch; font-size:.96rem; }
.draft-message.sent { align-self:flex-end; background:#0e7c86; color:white; border-color:#0e7c86; border-radius:17px 17px 4px 17px; }
.draft-label { font-size:.76rem; color:#54737c; margin-top:-10px; }
.consent-prompt { position:relative; margin:-24px 20px 0; padding:19px; border-radius:16px; color:#edf5f5; background:#092734; box-shadow:0 18px 35px -18px rgba(0,0,0,.35); }
.consent-prompt>div:first-child { display:flex; gap:12px; align-items:center; font-size:.94rem; }
.consent-prompt img { border-radius:7px; }
.consent-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:17px; }
.consent-actions button { border:1px solid #617781; color:#edf5f5; background:#173d4a; border-radius:30px; padding:8px 23px; min-height:44px; font:500 .88rem var(--font); cursor:pointer; }
.consent-actions button:last-child { background:var(--champagne); color:#332e20; border-color:var(--champagne); }
.consent-actions button:disabled { opacity:.6; cursor:default; }
.consent-result { text-align:center; color:#54737c; font-size:.78rem; margin-top:20px; min-height:24px; }
.consent-reset { display:block; margin:8px auto 0; background:transparent; color:#0c5560; border:0; text-decoration:underline; text-underline-offset:4px; font:500 .8rem var(--font); cursor:pointer; min-height:44px; }
.consent-reset[hidden] { display:none; }
@media(max-width:900px) { .ways-layout,.consent-layout { grid-template-columns:1fr; gap:35px; } .ways-tabs { max-width:560px; } .ways-visual,.consent-visual { max-width:640px; width:100%; margin:auto; } .stage-body { grid-template-columns:1fr; } .stage .app { min-height:300px; } }
@media(max-width:480px) { .mini-octa { margin:0 0 18px; padding:12px; font-size:.8rem; } .mini-status { display:none; } .keys kbd { padding:3px 5px; } .consent-prompt { margin:-24px 10px 0; padding:16px; } .consent-thread { padding:25px 18px 42px; } .native-mail { padding:18px; } .native-app-content { padding:18px; } }
/* A quieter product presentation: one large app scene, the plan underneath. */
.stage-body { display:flex; flex-direction:column-reverse; gap:35px; padding:30px clamp(18px,4vw,54px); }
.stage .app { width:100%; max-width:820px; min-height:330px; }
.stage .native-app-content { padding:30px 36px; min-height:280px; }
.stage .app-head { font-size:.95rem; }
.stage .compose { margin-top:35px; }
.stage .thread { min-height:110px; }
.stage .plan { width:100%; }
.stage .plan-steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.stage .plan-steps li { padding:12px 0; border:0; border-top:1px solid var(--hair); border-radius:0; background:none; }
.stage .plan-steps .what { font-size:.86rem; }
.stage .plan-steps .route { font-size:.76rem; }
.stage .plan-title { margin-bottom:8px; }
.stage .plan-steps li.active { border-color:var(--lagoon); }
.stage .stage-bar { padding-top:32px; }
.water-toggle { color:var(--text-soft); font:500 .78rem var(--font); border:0; background:none; padding:12px 4px; cursor:pointer; }
.ambient-paused .school,.ambient-paused .f,.ambient-paused .waterline,.ambient-paused .anglerfish,.ambient-paused .anglerfish * { animation-play-state:paused!important; }
@media(max-width:650px) { .stage .plan-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .stage .native-app-content { padding:22px; } }

/* Fine details keep native resolution; only the soft water is downsampled. */
body { position:relative; }
.cursor-bubbles { position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0; }
.cursor-bubble { position:absolute; border:1px solid rgba(187,244,236,.5); border-radius:50%; background:radial-gradient(circle at 30% 25%,rgba(232,255,251,.65) 0 6%,transparent 19%); opacity:0; animation:cursor-bubble-rise 2.6s cubic-bezier(.35,.1,.65,.9) forwards; }
@keyframes cursor-bubble-rise {
  0% { transform:translate3d(0,0,0); opacity:0; }
  12% { opacity:.65; }
  55% { transform:translate3d(var(--bubble-drift),-65px,0); opacity:.5; }
  100% { transform:translate3d(0,-160px,0); opacity:0; }
}
.ambient-paused .cursor-bubble { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .cursor-bubbles { display:none; } }
/* Product hero: a single coherent Mac scene, with the shell as a brand detail. */
.hero .wrap { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,65px); }
.product-hero-visual { min-width:0; padding-top:16px; }
.hero-product { width:100%; background:#0b3441; border:1px solid #b8e6e12e; border-radius:19px; overflow:hidden; box-shadow:0 34px 70px -30px rgba(0,0,0,.5); }
.hero-desktop-head { display:flex; align-items:center; gap:18px; color:#c9dfe3; font-size:.76rem; padding:11px 15px; background:#0a2b37; border-bottom:1px solid #ffffff13; }
.hero-desktop-head>span:first-child { font-weight:600; }
.hero-menu-right { margin-left:auto; color:#a6c6ce; }
.hero-scene { position:relative; min-height:445px; padding:85px 22px 24px; }
.hero-shell-mark { position:absolute; right:-38px; top:12px; width:160px; opacity:.18; pointer-events:none; }
.hero-shell-mark img { width:100%; height:auto; }
.hero-octa { position:absolute; z-index:3; top:18px; left:14px; right:14px; width:auto; margin:0; }
.hero-octa .bar { background:#0a2531; backdrop-filter:none; -webkit-backdrop-filter:none; min-height:46px; font-size:.78rem; width:220px; }
.hero-octa .bar[data-wide] { width:min(100%,460px); }
.hero-octa .bar-heard { font-size:.76rem; }
.hero-octa .bar-btn { font-size:.75rem; padding:5px 10px; }
.hero-octa .bar-line { white-space:normal; }
.hero-octa .bar-lead { color:#4299ff; }
.hero-messages { position:relative; z-index:1; margin-right:12px; box-shadow:0 20px 38px -22px rgba(0,0,0,.6); }
.hero-messages .native-title { padding:10px 14px; font-size:.74rem; }
.hero-messages .window-dots i { width:7px; height:7px; }
.hero-person { display:flex; gap:10px; align-items:center; padding:14px 18px; border-bottom:1px solid #e7eeee; color:#283e48; font-size:.83rem; }
.person-avatar { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:#dfe9ed; color:#516b76; font-size:.84rem; }
.hero-person>div>span { display:block; font-size:.76rem; color:#71878f; margin-top:1px; }
.hero-conversation-body { padding:19px 18px 9px; min-height:104px; display:flex; flex-direction:column; gap:12px; }
.hero-received { align-self:flex-start; background:#e8eded; color:#3c5660; padding:8px 12px; border-radius:13px 13px 13px 4px; font-size:.78rem; }
.hero-outgoing { align-self:flex-end; background:#1a6ad0; color:#fff; padding:8px 12px; border-radius:13px 13px 4px 13px; font-size:.78rem; }
.hero-outgoing[hidden],.hero-delivered[hidden] { display:none; }
.hero-delivered { align-self:flex-end; font-size:.75rem; color:#71858f; margin-top:-8px; }
.hero-compose { display:flex; justify-content:space-between; align-items:center; gap:8px; border:1px solid #cfdbdf; color:#8c9ba2; margin:4px 14px 14px; padding:8px 12px; border-radius:18px; font-size:.75rem; min-height:36px; }
.hero-compose .has-draft { color:#23404e; }
.hero-send-indicator { background:#1a6ad0; color:#fff; border-radius:50%; width:19px; height:19px; display:grid; place-items:center; font-size:.83rem; flex:none; }
.hero-spotify { position:relative; z-index:2; margin:12px 0 0 70px; background:#101f29; border:1px solid #415763; border-radius:12px; padding:12px; display:flex; align-items:center; gap:11px; box-shadow:0 15px 35px -20px #000c18; }
.hero-album { background:#174851; width:38px; height:38px; border-radius:5px; overflow:hidden; flex:none; }
.hero-album img { width:34px; height:34px; object-fit:contain; margin:2px; }
.hero-spotify b { display:block; font-size:.75rem; font-weight:500; color:#eef6f5; }
.hero-spotify>div>span { display:block; font-size:.76rem; color:#9bb8c0; margin-top:2px; }
.hero-playback { margin-left:auto; font-size:.76rem; color:#c4dae0; }
.hero-playback.is-paused { color:var(--lagoon); }
.hero-request { display:flex; align-items:center; justify-content:center; gap:11px; margin:23px 0 0; font-size:.78rem; color:#c9e0e3; line-height:1.5; }
.hero-key { display:grid; place-items:center; border:1px solid #799aa4; border-radius:8px; width:34px; height:35px; background:#0d303e; flex:none; font-size:1.05rem; }
.hero-scene-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid #ffffff13; color:#a8c8d0; font-size:.76rem; background:#0a2b37; }
.hero-scene-foot button { background:none; border:0; padding:6px 0; font:500 .8rem var(--font); color:#d6e7e9; min-height:32px; cursor:pointer; flex:none; }
.hero-example-label { text-align:center; font-size:.75rem; color:#a8c8d0; margin-top:17px; }
@media(max-width:900px) { .hero .wrap { grid-template-columns:1fr; gap:40px; } .hero .hero-copy { order:0; } .product-hero-visual { order:1; width:min(100%,620px); margin:auto; } .hero .hero-copy { max-width:660px; } .hero .lede { max-width:45ch; } }
@media(max-width:480px) { .hero-scene { min-height:430px; padding:100px 12px 20px; } .hero-spotify { margin-left:25px; } .hero-messages { margin-right:0; } .hero-octa .bar { padding:10px; font-size:.76rem; gap:7px; } .hero-octa .bar-heard { font-size:.75rem; } .hero-octa .bar-trail { gap:4px; } .hero-octa .bar-btn { padding:5px 7px; } .hero-scene-foot { font-size:.75rem; padding:11px 12px; } .hero-menu-right { display:none; } }

/* A spacious, product-first hero. */
.hero { padding:145px 0 80px; min-height:auto; }
.hero .wrap { grid-template-columns:1fr; gap:48px; }
.hero .hero-copy { text-align:center; justify-items:center; max-width:800px; margin:auto; gap:24px; }
.hero h1 { font-size:clamp(3.2rem,6.5vw,6rem); line-height:1.03; }
.hero .lede { max-width:52ch; font-size:clamp(1.05rem,1.4vw,1.2rem); }
.hero-actions { justify-content:center; margin-top:4px; }
.product-hero-visual { width:min(100%,940px); margin:auto; padding-top:0; }
.hero-scene { min-height:470px; padding:95px 80px 30px; background:radial-gradient(ellipse at 50% 0%,#205763,#0b3441 75%); }
.hero-octa { top:24px; }
.hero-octa .bar { font-size:.85rem; }
.hero-messages { max-width:590px; margin:0 auto; }
.hero-person { padding:18px 22px; }
.hero-conversation-body { min-height:115px; padding:22px; }
.hero-received,.hero-outgoing { font-size:.88rem; }
.hero-spotify { max-width:370px; margin:18px auto 0; }
.hero-request { font-size:.86rem; margin-top:26px; }
.hero-example-label { color:#afcbd0; }
.watch .section-sub { max-width:49ch; }
.routes { gap:30px; }
.routes li { font-size:.88rem; }
@media(max-width:600px) { .hero { padding-top:120px; } .hero .wrap { gap:35px; } .hero-scene { min-height:440px; padding:100px 14px 22px; } .hero-spotify { margin-left:25px; } .hero-request { font-size:.78rem; } .hero .hero-copy { gap:20px; } }

/* Centered layout: each section's heading and copy sit centered on top, its
   visual underneath. Lists of steps and answers stay left-aligned inside. */
.section-head, .section-sub { margin-inline: auto; text-align: center; }
.watch .picks { justify-content: center; }
.routes li { text-align: center; }

.ways-layout, .consent-layout { grid-template-columns: 1fr; gap: 56px; }
.ways-copy, .yes { text-align: center; margin-inline: auto; }
.ways-copy { max-width: 640px; }
.ways-copy > p { margin-inline: auto; }
.ways-tabs { max-width: 560px; margin-inline: auto; }
.ways-visual, .consent-visual { width: 100%; max-width: 760px; margin-inline: auto; }
.trust .yes { margin-inline: auto; }
.trust .yes p { margin-inline: auto; }
.yes-list { justify-content: center; }

.honest { grid-template-columns: 1fr; gap: 48px; }
.honest-copy { text-align: center; }
.honest h2, .honest p { margin-inline: auto; }
.honest .results { width: 100%; max-width: 820px; margin-inline: auto; }

.privacy-map .map-more { text-align: center; }

.everyone { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 48px; }
.everyone h2, .everyone p { margin-inline: auto; }
.everyone .specs { width: 100%; max-width: 520px; text-align: left; }

.faq-list { margin-inline: auto; }