@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{--bg:#020617;--bg2:#050b19;--panel:#071222;--cyan:#28c7e5;--cyan2:#28c7e5;--text:#f8fbff;--muted:#9ba8ba;--line:rgba(40,199,229,.16);--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2));background:linear-gradient(to bottom,rgba(2,6,23,.88),rgba(2,6,23,.34),transparent);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:0;font-size:19px;letter-spacing:.08em;font-weight:300;font-style:italic}.brand strong{color:var(--cyan);font-weight:500}.brand-pin{font-size:13px;color:var(--cyan);margin-right:5px;filter:drop-shadow(0 0 8px var(--cyan))}
.nav nav{display:flex;align-items:center;gap:30px;font-size:13px;color:#cbd5e1}.nav nav a:hover{color:white}.nav-cta{border:1px solid rgba(40,199,229,.35);border-radius:999px;padding:10px 16px;background:rgba(40,199,229,.08)}
.hero{min-height:1080px;position:relative;padding:160px 24px 90px;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,#0b2c4d 0,#061426 30%,#020617 68%)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(40,199,229,.22) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 68%);opacity:.25}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.25}.glow-a{width:460px;height:460px;background:#28c7e5;top:260px;left:-160px}.glow-b{width:520px;height:520px;background:#28c7e5;top:420px;right:-260px}
.hero-copy{text-align:center;position:relative;z-index:3;max-width:820px}.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--cyan2);font-weight:600;margin:0 0 22px}.hero h1,.section-heading h2,.siri-copy h2,.sharing h2,.closing h2{font-size:clamp(54px,7vw,96px);line-height:.96;letter-spacing:-.055em;font-weight:300;margin:0}.hero h1 em,.siri-copy h2 em,.closing h2 em{font-style:italic;color:var(--cyan);font-weight:300}.lede{font-size:clamp(17px,2vw,22px);color:#b7c3d4;line-height:1.6;margin:28px auto 0;max-width:560px}.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-size:14px;transition:.25s}.button.primary{background:var(--cyan);color:#02111a;font-weight:600;box-shadow:0 0 40px rgba(40,199,229,.2)}.button.primary:hover{transform:translateY(-2px);box-shadow:0 0 55px rgba(40,199,229,.32)}.button.ghost{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);color:#dbe5f2}.button.ghost span{margin-left:10px}
.hero-devices{height:590px;width:min(900px,96vw);position:relative;margin-top:58px;z-index:4;perspective:1400px}.phone{position:absolute;background:#05070b;border:8px solid #0a0d13;border-radius:52px;overflow:hidden;box-shadow:0 45px 100px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.14) inset}.phone img{width:100%;height:100%;object-fit:cover;display:block}.phone-island{position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%);width:82px;height:22px;background:#020305;border-radius:20px;opacity:.94}.phone-left{width:300px;height:650px;left:18%;top:15px;transform:rotateY(10deg) rotateZ(-6deg) scale(.86);opacity:.92}.phone-right{width:316px;height:686px;right:17%;top:-10px;transform:rotateY(-8deg) rotateZ(5deg) scale(.9);z-index:2}.connection-line{position:absolute;left:43%;right:43%;top:53%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan)}.connection-label{position:absolute;left:50%;top:48%;transform:translateX(-50%);font-size:9px;letter-spacing:.24em;color:#c8f8ff;white-space:nowrap}.connection-label span{color:var(--cyan);padding:0 5px}.scroll-cue{position:absolute;bottom:34px;font-size:9px;letter-spacing:.3em;color:#728299;z-index:4}.scroll-cue span{color:var(--cyan);margin-left:12px}
.story{padding:150px 24px;max-width:var(--max);margin:auto}.section-heading{max-width:900px;margin-bottom:70px}.section-heading h2{font-size:clamp(48px,6vw,78px)}.section-heading>p:last-child{max-width:640px;color:var(--muted);font-size:18px;line-height:1.7;margin-top:28px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.feature{position:relative;min-height:360px;padding:42px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,rgba(8,22,40,.9),rgba(3,10,23,.74));overflow:hidden}.feature:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--cyan);filter:blur(100px);opacity:.055;right:-80px;bottom:-80px}.feature-wide{grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr;min-height:470px;align-items:center}.feature-number{position:absolute;right:30px;top:28px;color:#38516c;font-size:12px;letter-spacing:.2em}.feature h3{font-size:clamp(30px,3.5vw,52px);line-height:1.05;letter-spacing:-.04em;font-weight:300;max-width:600px;margin:0 0 20px}.feature>p:last-child,.feature div>p:last-child{color:var(--muted);font-size:16px;line-height:1.7;max-width:540px}.mini-map{height:310px;border-radius:28px;background:radial-gradient(circle at 50% 50%,#123451,#07111f 56%,#030813);position:relative;overflow:hidden;border:1px solid rgba(40,199,229,.1)}.mini-map:before{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 48%,rgba(40,199,229,.14) 49%,rgba(40,199,229,.14) 51%,transparent 52%),linear-gradient(120deg,transparent 48%,rgba(255,255,255,.05) 49%,rgba(255,255,255,.05) 51%,transparent 52%);background-size:80px 80px}.radar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(40,199,229,.4);border-radius:50%}.r1{width:90px;height:90px}.r2{width:160px;height:160px}.r3{width:240px;height:240px}.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50% 50% 50% 8px;rotate:-45deg;background:var(--cyan);color:#02111a;display:grid;place-items:center;font-size:14px;box-shadow:0 0 35px rgba(40,199,229,.45)}.pin::first-letter{rotate:45deg}.mini-map span{position:absolute;bottom:22px;left:24px;font-size:9px;letter-spacing:.3em;color:#bceef6}
.siri-section{min-height:940px;position:relative;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:20px;padding:120px max(24px,calc((100vw - var(--max))/2));background:linear-gradient(180deg,#020617 0,#071c3d 48%,#dbeafe 115%);overflow:hidden}.siri-haze{position:absolute;width:700px;height:700px;background:#1677ff;border-radius:50%;filter:blur(150px);opacity:.23;right:-150px;top:80px}.siri-copy{z-index:3;max-width:560px}.siri-copy h2{font-size:clamp(50px,5.7vw,80px)}.siri-copy>p:nth-of-type(2){font-size:18px;color:#b8c6d9;line-height:1.7;max-width:500px}.voice-examples{display:grid;gap:10px;margin-top:32px}.voice-examples div{padding:17px 19px;border-radius:18px;border:1px solid rgba(40,199,229,.16);background:rgba(2,6,23,.35);font-size:13px;line-height:1.5;color:#e8f5ff;backdrop-filter:blur(10px)}.voice-examples span{display:block;font-size:8px;letter-spacing:.25em;color:var(--cyan2);margin-bottom:5px}
.hand-stage{position:relative;height:720px;z-index:2}.hand-reference{position:absolute;width:820px;max-width:none;left:-60px;top:0;filter:saturate(.7) hue-rotate(160deg) brightness(.78);opacity:.96}.siri-screen-wrap{position:absolute;left:207px;top:62px;width:319px;height:603px;overflow:hidden;clip-path:polygon(11% 0,100% 7%,83% 100%,0 89%);transform:rotate(2.8deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}.siri-screen{position:absolute;width:100%;height:126%;object-fit:cover;object-position:center 48%;top:-13%;left:0}
.everywhere{padding:150px 24px 110px;background:#eef7ff;color:#07101d;overflow:hidden}.centered{text-align:center;margin:0 auto 80px;max-width:900px}.centered .eyebrow{color:#28c7e5}.centered>p:last-child{margin:26px auto 0;color:#566678}.place-marquee{display:flex;gap:34px;white-space:nowrap;justify-content:center;font-size:clamp(26px,4vw,58px);letter-spacing:-.04em;font-weight:300;color:#10233a}.place-marquee i{color:#28c7e5;font-style:normal}
.sharing{padding:110px 24px 150px;background:#eef7ff}.sharing-card{max-width:var(--max);margin:auto;min-height:600px;border-radius:42px;background:#030a18;color:white;padding:70px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;position:relative;overflow:hidden;box-shadow:0 40px 100px rgba(2,6,23,.16)}.sharing-card:before{content:"";position:absolute;width:500px;height:500px;background:#28c7e5;border-radius:50%;filter:blur(160px);opacity:.15;right:-120px}.sharing-copy{position:relative;z-index:2}.sharing h2{font-size:clamp(44px,5vw,70px)}.sharing-copy>p:last-child{color:#aebbd0;line-height:1.7;max-width:600px;font-size:17px}.share-orbit{width:330px;height:330px;position:relative;margin:auto}.share-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px;border-radius:50%;background:var(--cyan);color:#03111c;display:grid;place-items:center;font-size:48px;font-style:italic;box-shadow:0 0 80px rgba(40,199,229,.32)}.orbit{position:absolute;border:1px solid rgba(40,199,229,.24);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.o1{width:210px;height:210px}.o2{width:320px;height:320px}.share-node{position:absolute;width:50px;height:50px;border-radius:50%;border:1px solid rgba(40,199,229,.3);background:#07182b;display:grid;place-items:center;color:var(--cyan2)}.n1{top:16px;left:140px}.n2{bottom:45px;left:15px}.n3{bottom:50px;right:18px}
.closing{min-height:780px;display:grid;place-items:center;text-align:center;padding:120px 24px;position:relative;overflow:hidden;background:#020617}.closing-glow{position:absolute;width:760px;height:480px;border-radius:50%;background:#28c7e5;filter:blur(190px);opacity:.17;bottom:-260px}.closing>div:last-child{position:relative;z-index:2}.closing h2{font-size:clamp(54px,7vw,92px)}.closing p:not(.eyebrow){color:#a9b7ca;font-size:18px;margin:28px 0 34px}.button.large{padding:17px 28px}.closing small{display:block;margin-top:15px;color:#53647b;font-size:10px}
footer{max-width:var(--max);margin:auto;padding:44px 24px 60px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#738299;font-size:11px}footer>p{letter-spacing:.12em}footer>div{justify-self:end;display:flex;gap:20px}footer a:hover{color:white}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav nav a:not(.nav-cta){display:none}.hero{min-height:1040px;padding-top:140px}.hero-devices{height:570px;margin-top:40px}.phone-left{left:7%;transform:rotateY(8deg) rotateZ(-5deg) scale(.72)}.phone-right{right:5%;transform:rotateY(-7deg) rotateZ(5deg) scale(.75)}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto;grid-template-columns:1fr;gap:30px}.siri-section{grid-template-columns:1fr;padding-top:100px;padding-bottom:0}.siri-copy{text-align:center;margin:auto}.voice-examples{text-align:left}.hand-stage{height:680px;width:100%;max-width:700px;margin:auto}.hand-reference{left:50%;transform:translateX(-50%)}.siri-screen-wrap{left:50%;margin-left:-203px}.sharing-card{grid-template-columns:1fr;padding:48px 34px}.share-orbit{margin-top:45px}footer{grid-template-columns:1fr;text-align:center;gap:20px}footer>div{justify-self:center}}
@media(max-width:620px){.nav{height:66px;padding:0 18px}.nav-cta{padding:9px 13px}.hero{min-height:970px;padding-left:18px;padding-right:18px}.hero h1{font-size:54px}.hero-actions{flex-direction:column;align-items:center}.hero-devices{height:500px;width:100vw}.phone{border-width:6px;border-radius:40px}.phone-left{width:245px;height:531px;left:-22px;top:20px;transform:rotateZ(-6deg) scale(.76)}.phone-right{width:250px;height:543px;right:-20px;top:0;transform:rotateZ(6deg) scale(.78)}.connection-label,.connection-line{display:none}.story{padding:100px 18px}.section-heading{margin-bottom:44px}.feature{padding:30px 24px;min-height:320px;border-radius:26px}.feature-wide{min-height:650px}.mini-map{height:250px}.siri-section{padding-left:18px;padding-right:18px;min-height:1120px}.siri-copy h2{font-size:52px}.hand-stage{height:570px;margin-top:20px;transform:scale(.78);transform-origin:top center}.everywhere{padding:100px 18px}.place-marquee{justify-content:flex-start;animation:marquee 18s linear infinite}.sharing{padding:70px 18px 110px}.sharing-card{padding:40px 24px;border-radius:30px}.share-orbit{transform:scale(.8)}.closing{min-height:700px}.closing h2{font-size:55px}footer>div{flex-wrap:wrap;justify-content:center}@keyframes marquee{to{transform:translateX(-55%)}}}

/* V2 MOBILE COMPOSITION */
.phone{border:5px solid #171b21;box-shadow:0 38px 95px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 2px rgba(255,255,255,.04)}
.phone:before,.phone:after{content:"";position:absolute;z-index:5;width:4px;background:linear-gradient(180deg,#9da3aa,#3c4249 45%,#a7adb3);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.phone-left:before{height:54px;left:-5px;top:116px}.phone-left:after{height:86px;left:-5px;top:184px}
.phone-right:before{height:84px;right:-5px;top:142px}.phone-right:after{height:48px;left:-5px;top:118px}
.siri-section{background:radial-gradient(circle at 75% 62%,rgba(28,188,224,.26),transparent 34%),linear-gradient(180deg,#020617 0%,#061a37 58%,#082b4b 100%)}
.hand-reference{filter:hue-rotate(155deg) saturate(.7) brightness(.48) contrast(1.15);mix-blend-mode:screen;opacity:.58}
.siri-screen-wrap{box-shadow:0 0 0 5px #11161d,0 0 0 6px rgba(255,255,255,.18),0 34px 80px rgba(0,0,0,.48);border-radius:34px;clip-path:none;background:#020617}
@media(max-width:620px){
.nav{height:58px;background:linear-gradient(to bottom,rgba(2,6,23,.96),rgba(2,6,23,.58),transparent)}
.brand{font-size:16px}.brand-pin{font-size:10px}.nav-cta{font-size:11px;padding:8px 12px}
.hero{height:100svh;min-height:760px;max-height:900px;padding:98px 16px 18px;justify-content:flex-start;background:radial-gradient(circle at 50% 64%,#0b6b83 0,#073550 24%,#04172d 48%,#020617 77%)}
.hero-copy{max-width:390px}.hero-copy .eyebrow{font-size:9px;letter-spacing:.29em;margin-bottom:12px}
.hero h1{font-size:43px;line-height:.92}.lede{font-size:14px;line-height:1.45;margin-top:14px;max-width:330px}
.hero-actions{margin-top:14px;gap:8px;flex-direction:row}.button{padding:10px 15px;font-size:11px}
.hero-devices{position:absolute;left:0;right:0;bottom:42px;margin:0;width:100%;height:47vh;min-height:350px;max-height:425px}
.phone{border-width:5px;border-radius:36px}.phone-island{top:7px;width:64px;height:17px}
.phone-left{width:224px;height:486px;left:-32px;top:34px;transform:rotateZ(-7deg) scale(.76);transform-origin:top left}
.phone-right{width:232px;height:504px;right:-28px;top:0;transform:rotateZ(6deg) scale(.79);transform-origin:top right}
.connection-label,.connection-line{display:none}.scroll-cue{bottom:12px;font-size:7px}
.siri-section{padding-top:80px;min-height:1040px;background:radial-gradient(circle at 50% 80%,rgba(35,211,238,.28),transparent 32%),linear-gradient(180deg,#020617 0,#071d3d 55%,#05243f 100%)}
.siri-copy h2{font-size:46px;line-height:.96}.siri-copy>p:nth-of-type(2){font-size:15px;line-height:1.55}
.voice-examples{margin-top:22px;gap:8px}.voice-examples div{padding:14px 16px;font-size:11px;border-radius:16px}
.hand-stage{height:440px;margin-top:25px;transform:none;width:100vw;left:50%;margin-left:-50vw;overflow:hidden}
.hand-reference{width:650px;left:50%;top:24px;transform:translateX(-47%);opacity:.42}
.siri-screen-wrap{width:218px;height:408px;left:50%;top:8px;margin-left:-92px;transform:rotate(5deg);border-radius:28px;overflow:hidden}
.siri-screen{width:100%;height:126%;top:-13%;object-fit:cover;object-position:center 47%}
}


/* V3 MOBILE POLISH — real branding, tighter devices, clean Siri stage */
.brand{height:42px;display:flex;align-items:center}
.brand-logo{display:block;width:154px;height:auto;object-fit:contain}
footer .brand{justify-self:start}
footer .brand-logo{width:170px}

/* iPhone hardware contours */
.phone{overflow:visible}
.phone img{border-radius:inherit;overflow:hidden}
.phone-left:before,.phone-left:after,.phone-right:before,.phone-right:after{width:6px;z-index:8;border-radius:4px 1px 1px 4px;background:linear-gradient(90deg,#20252c 0%,#aeb4bb 42%,#555c64 72%,#171b20 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.7)}
.phone-left:before{left:-9px;height:58px;top:120px}.phone-left:after{left:-9px;height:92px;top:190px}
.phone-right:before{right:-9px;left:auto;height:92px;top:146px;border-radius:1px 4px 4px 1px}.phone-right:after{left:-9px;height:54px;top:118px}

/* Siri is now one composited, perspective-correct transparent asset */
.hand-stage{display:flex;align-items:center;justify-content:center}
.hand-reference{position:relative;left:auto;top:auto;width:min(820px,62vw);max-width:none;filter:drop-shadow(0 34px 60px rgba(0,0,0,.42));opacity:1;mix-blend-mode:normal;transform:none}
.siri-screen-wrap{display:none!important}

/* remove unnecessary dead space at page end */
.closing{min-height:620px;padding:96px 24px 78px}
footer{padding-top:34px;padding-bottom:38px;margin-bottom:0}
body,html{min-height:100%;padding-bottom:0}

@media(max-width:900px){
  footer .brand{justify-self:center}
  .hand-reference{width:min(760px,100vw)}
}

@media(max-width:620px){
  .nav{padding-left:18px;padding-right:16px}
  .brand{height:34px}
  .brand-logo{width:142px}
  .hero-devices{height:48vh;min-height:360px;max-height:430px}
  /* overlap toward the center instead of leaving the cyan canyon */
  .phone-left{width:224px;height:486px;left:-20px;top:34px;transform:rotateZ(-6deg) scale(.78);transform-origin:top left;z-index:2}
  .phone-right{width:232px;height:504px;right:-15px;top:3px;transform:rotateZ(5deg) scale(.80);transform-origin:top right;z-index:3}
  .phone-left:before{left:-9px;top:112px;height:52px}.phone-left:after{left:-9px;top:172px;height:84px}
  .phone-right:before{right:-9px;top:138px;height:82px}.phone-right:after{left:-9px;top:108px;height:48px}
  .siri-section{min-height:auto;padding-bottom:28px}
  .hand-stage{height:500px;margin-top:10px;width:100vw;left:50%;margin-left:-50vw;overflow:hidden}
  .hand-reference{width:650px;max-width:none;transform:translateX(4px);filter:drop-shadow(0 28px 50px rgba(0,0,0,.45))}
  .closing{min-height:auto;padding:90px 20px 74px}
  footer{padding:30px 18px 34px;gap:16px}
  footer .brand-logo{width:158px}
}

/* V3.1 MOBILE HERO — larger phones, pulled 20px toward center */
@media(max-width:620px){
  .hero-devices{height:50vh;min-height:380px;max-height:455px}
  .phone-left{width:244px;height:529px;left:0;top:22px;transform:rotateZ(-6deg) scale(.82);transform-origin:top left;z-index:2}
  .phone-right{width:253px;height:550px;right:5px;top:-2px;transform:rotateZ(5deg) scale(.84);transform-origin:top right;z-index:3}
}


/* V3.2 — final Siri artwork + mobile hero/header refinement */
.nav{background:#000716;border-bottom:1px solid rgba(40,199,229,.055);backdrop-filter:blur(16px)}
.brand{overflow:hidden;border-radius:0;background:#000716}
.brand-logo{mix-blend-mode:normal}

.siri-showcase{display:block;min-height:auto;padding:56px 20px 64px;background:radial-gradient(circle at 50% 50%,rgba(17,114,160,.24),transparent 48%),#03162a;overflow:hidden}
.siri-showcase .siri-haze{display:none}
.siri-showcase-inner{width:100%;max-width:1040px;margin:0 auto;line-height:0;background:transparent}
.siri-final-art{display:block;width:min(100%,920px);height:auto;margin:0 auto;object-fit:contain;border-radius:34px;box-shadow:0 34px 90px rgba(0,0,0,.34)}

@media(max-width:620px){
  .nav{height:60px;background:#000716;padding-left:14px;padding-right:16px}
  .brand{height:44px;width:150px;margin-left:-4px;background:#000716}
  .brand-logo{width:150px;height:44px;object-fit:contain;object-position:left center}
  .hero{padding-top:78px}
  .hero-copy{max-width:330px}
  .hero-copy .eyebrow{font-size:8px;letter-spacing:.27em;margin-bottom:10px}
  .hero h1{font-size:33px;line-height:.96;letter-spacing:-.045em}
  .lede{font-size:12px;line-height:1.42;margin-top:10px;max-width:292px}
  .hero-actions{margin-top:10px}
  .siri-showcase{padding:34px 16px 40px;background:radial-gradient(circle at 50% 50%,rgba(17,114,160,.22),transparent 48%),#03162a}
  .siri-showcase-inner{width:100%;max-width:none}
  .siri-final-art{width:100%;max-width:560px;height:auto;border-radius:22px}
}

/* Card 01 — Arrival Reminder visual pass */
.feature-arrival{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  min-height:720px;
  padding:42px;
}
.feature-arrival .feature-copy{position:relative;z-index:2;max-width:720px}
.feature-arrival .feature-copy>p:last-child{max-width:610px}
.arrival-visual{
  position:relative;
  flex:1;
  min-height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:54px 7% 26px;
}
.arrival-visual:before{
  content:"";
  position:absolute;
  inset:18% 8% 2%;
  border-radius:42px;
  background:radial-gradient(circle at 50% 55%,rgba(40,199,229,.13),rgba(4,14,29,.05) 48%,transparent 74%);
}
.arrival-glow{position:absolute;width:52%;height:42%;border-radius:50%;background:rgba(40,199,229,.12);filter:blur(72px)}
.arrival-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:min(82%,760px);
  height:auto;
  border-radius:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.42),0 0 38px rgba(40,199,229,.08);
}
@media(max-width:620px){
  .feature-grid{justify-items:center}
  .feature{width:82vw;max-width:82vw;min-height:70vh;box-sizing:border-box}
  .feature-arrival{height:70vh;min-height:650px;max-height:760px;padding:30px 24px 22px}
  .feature-arrival .feature-copy h3{font-size:clamp(35px,10vw,46px);max-width:100%}
  .feature-arrival .feature-copy>p:last-child{font-size:16px;line-height:1.62}
  .arrival-visual{min-height:0;padding:38px 2% 12px;align-items:center}
  .arrival-visual img{width:94%;border-radius:18px}
  .arrival-visual:before{inset:16% -2% 0;border-radius:30px}
}

/* V3.4.1 — Card 01 image sizing cleanup */
.arrival-visual:before,
.arrival-glow{
  display:none !important;
}
.arrival-visual img{
  width:min(90%,840px);
  box-shadow:none;
}
@media(max-width:620px){
  .arrival-visual{padding-left:0;padding-right:0;}
  .arrival-visual img{
    width:90%;
    max-width:none;
    box-shadow:none;
  }
}

/* V3.4.2 — Card 01 full-width reminder artwork */
@media(max-width:620px){
  .feature-arrival .arrival-visual{
    width:calc(100% + 48px);
    margin-left:-24px;
    margin-right:-24px;
    padding-left:0;
    padding-right:0;
  }
  .feature-arrival .arrival-visual img{
    width:100%;
    max-width:none;
    height:auto;
    border-radius:18px;
  }
}

/* V3.5 — Card 02 Parking Return / Orb Guide */
.feature-parking{
  display:flex;
  flex-direction:column;
  padding-bottom:0;
}
.feature-parking .feature-copy{
  position:relative;
  z-index:3;
}
.parking-visual{
  position:relative;
  flex:1;
  min-height:360px;
  margin:28px -42px 0;
  overflow:hidden;
  border-radius:0 0 31px 31px;
  background:#020817;
}
.parking-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}
.parking-visual:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:30%;
  background:linear-gradient(to bottom,rgba(2,8,23,0),rgba(2,8,23,.50) 48%,#020817 100%);
  pointer-events:none;
}
@media(max-width:620px){
  .feature-parking{
    height:70vh;
    min-height:650px;
    max-height:760px;
    padding:30px 24px 0;
  }
  .feature-parking .feature-copy h3{
    font-size:clamp(33px,9.4vw,44px);
    max-width:100%;
    margin-bottom:16px;
  }
  .feature-parking .feature-copy>p:last-child{
    font-size:15px;
    line-height:1.55;
  }
  .feature-parking .parking-visual{
    min-height:0;
    margin:26px -24px 0;
    border-radius:0 0 25px 25px;
  }
  .feature-parking .parking-visual img{
    object-position:center 15%;
  }
  .feature-parking .parking-visual:after{
    height:28%;
    background:linear-gradient(to bottom,rgba(2,8,23,0),rgba(2,8,23,.42) 46%,#020817 100%);
  }
}

/* V3.5.1 — Card 02 refinement: compact copy + full top of Orb image */
.parking-visual:before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:0;
  height:84px;
  background:linear-gradient(to bottom,#071426 0%,rgba(7,20,38,.76) 24%,rgba(7,20,38,.28) 58%,rgba(7,20,38,0) 100%);
  pointer-events:none;
}
.parking-visual img{
  object-position:center top;
}
@media(max-width:620px){
  .feature-parking .feature-copy h3{
    font-size:30px;
    line-height:1.08;
    letter-spacing:-.035em;
    margin-bottom:13px;
    max-width:92%;
  }
  .feature-parking .feature-copy>p:last-child{
    font-size:14px;
    line-height:1.48;
    max-width:95%;
  }
  .feature-parking .parking-visual{
    margin-top:14px;
    flex:1 1 auto;
  }
  .feature-parking .parking-visual img{
    object-position:center top;
  }
  .feature-parking .parking-visual:before{
    height:62px;
    background:linear-gradient(to bottom,#071426 0%,rgba(7,20,38,.66) 24%,rgba(7,20,38,.20) 60%,rgba(7,20,38,0) 100%);
  }
}

/* V3.5.2 — Card 02 seamless copy-to-Orb transition */
@media(max-width:620px){
  .feature-parking .feature-copy{
    z-index:4;
    padding-bottom:0;
  }
  .feature-parking .feature-copy h3{
    font-size:29px;
    line-height:1.07;
    margin-bottom:11px;
  }
  .feature-parking .feature-copy>p:last-child{
    font-size:12.5px;
    line-height:1.42;
    max-width:94%;
    margin-bottom:0;
    position:relative;
    z-index:5;
  }
  .feature-parking .parking-visual{
    margin-top:-9px;
    flex:1 1 auto;
    overflow:hidden;
  }
  .feature-parking .parking-visual:before{
    z-index:3;
    top:0;
    height:112px;
    background:linear-gradient(to bottom,
      #071426 0%,
      rgba(7,20,38,.98) 12%,
      rgba(7,20,38,.88) 28%,
      rgba(7,20,38,.60) 48%,
      rgba(7,20,38,.30) 68%,
      rgba(7,20,38,.10) 84%,
      rgba(7,20,38,0) 100%);
  }
  .feature-parking .parking-visual img{
    object-position:center top;
    transform:translateY(-4px) scale(1.01);
    transform-origin:top center;
  }
}

/* V3.5.3 — Card 02 exact navy seamless transition */
@media(max-width:620px){
  .feature-parking{
    background:#061225;
  }
  .feature-parking .parking-visual{
    background:#061225;
  }
  .feature-parking .parking-visual:before{
    height:150px;
    background:linear-gradient(to bottom,
      #061225 0%,
      #061225 16%,
      rgba(6,18,37,.98) 28%,
      rgba(6,18,37,.90) 40%,
      rgba(6,18,37,.72) 54%,
      rgba(6,18,37,.48) 68%,
      rgba(6,18,37,.24) 82%,
      rgba(6,18,37,.08) 92%,
      rgba(6,18,37,0) 100%);
  }
}

/* V3.5.4 — Card 02 shorter exact-navy fade */
@media(max-width:620px){
  .feature-parking .parking-visual:before{
    height:92px;
    background:linear-gradient(to bottom,
      #061225 0%,
      #061225 10%,
      rgba(6,18,37,.94) 22%,
      rgba(6,18,37,.72) 40%,
      rgba(6,18,37,.44) 58%,
      rgba(6,18,37,.18) 76%,
      rgba(6,18,37,0) 100%);
  }
}

/* V3.6 — Cards 03 + 04 visual storytelling, matched to Card 02 */
.feature-place,.feature-custom{
  display:flex;
  flex-direction:column;
  padding-bottom:0;
  background:#061225;
}
.feature-place .feature-copy,.feature-custom .feature-copy{position:relative;z-index:4}
.place-visual,.custom-visual{
  position:relative;
  flex:1 1 auto;
  min-height:330px;
  margin:10px -42px 0;
  overflow:hidden;
  border-radius:0 0 31px 31px;
  background:#061225;
}
.place-visual img,.custom-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.place-visual img{object-position:center 20%}
.custom-visual img{object-position:center 15%}
.place-visual:before,.custom-visual:before{
  content:"";
  position:absolute;
  z-index:3;
  left:0;right:0;top:0;
  height:92px;
  background:linear-gradient(to bottom,#061225 0%,#061225 10%,rgba(6,18,37,.94) 22%,rgba(6,18,37,.72) 40%,rgba(6,18,37,.44) 58%,rgba(6,18,37,.18) 76%,rgba(6,18,37,0) 100%);
  pointer-events:none;
}
.place-visual:after,.custom-visual:after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  height:18%;
  background:linear-gradient(to bottom,rgba(6,18,37,0),rgba(6,18,37,.34) 48%,#061225 100%);
  pointer-events:none;
}
@media(max-width:620px){
  .feature-place,.feature-custom{
    height:70vh;
    min-height:650px;
    max-height:760px;
    padding:30px 24px 0;
  }
  .feature-place .feature-copy h3,.feature-custom .feature-copy h3{
    font-size:29px;
    line-height:1.07;
    letter-spacing:-.035em;
    margin-bottom:11px;
    max-width:94%;
  }
  .feature-place .feature-copy>p:last-child,.feature-custom .feature-copy>p:last-child{
    font-size:12.5px;
    line-height:1.42;
    max-width:94%;
    margin-bottom:0;
  }
  .feature-place .place-visual,.feature-custom .custom-visual{
    min-height:0;
    margin:-3px -24px 0;
    border-radius:0 0 25px 25px;
  }
  .feature-place .place-visual img{
    object-position:center top;
    transform:translateY(-2px) scale(1.01);
    transform-origin:top center;
  }
  .feature-custom .custom-visual img{
    object-position:center top;
    transform:scale(1.01);
    transform-origin:top center;
  }
  .feature-place .place-visual:before,.feature-custom .custom-visual:before{height:92px}
  .feature-place .place-visual:after,.feature-custom .custom-visual:after{height:15%}
}

/* V3.7 — Cards 03 + 04: more image, tighter copy, shorter fades */
@media(max-width:620px){
  .feature-place .feature-copy>p:last-child,
  .feature-custom .feature-copy>p:last-child{
    font-size:11.5px;
    line-height:1.38;
    max-width:95%;
  }
  .feature-place .place-visual,
  .feature-custom .custom-visual{
    margin-top:-10px;
  }
  .feature-place .place-visual:before,
  .feature-custom .custom-visual:before{
    height:58px;
    background:linear-gradient(to bottom,
      #061225 0%,
      rgba(6,18,37,.90) 18%,
      rgba(6,18,37,.58) 44%,
      rgba(6,18,37,.24) 70%,
      rgba(6,18,37,0) 100%);
  }
  .feature-place .place-visual:after,
  .feature-custom .custom-visual:after{
    height:9%;
    background:linear-gradient(to bottom,rgba(6,18,37,0),rgba(6,18,37,.18) 58%,#061225 100%);
  }
  .feature-place .place-visual img{
    object-position:center top;
    transform:translateY(-5px) scale(1.015);
  }
  .feature-custom .custom-visual img{
    object-position:center 7%;
    transform:translateY(-5px) scale(1.015);
  }
}

/* V3.8 HERO — updated Photoshop screens + iPhone 17 Pro hardware detailing */
.phone{
  border:4px solid #1b1d21;
  background:#050609;
  box-shadow:
    0 42px 100px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.34),
    0 0 0 2px rgba(77,82,88,.72),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone img{border-radius:calc(inherit - 4px)}
.phone-island{display:none}
/* Use slim machined side rails rather than oversized pill-like fake buttons. */
.phone-left:before,.phone-left:after,.phone-right:before,.phone-right:after{
  width:3px;
  background:linear-gradient(90deg,#34373b 0%,#d0d1d2 42%,#74777a 72%,#24262a 100%);
  border:0;
  border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 0 0 .5px rgba(255,255,255,.5);
}
.phone-left:before{left:-7px;top:111px;height:30px}
.phone-left:after{left:-7px;top:154px;height:72px}
.phone-right:before{right:-7px;left:auto;top:139px;height:74px}
.phone-right:after{left:-7px;top:108px;height:31px}
/* additional action/camera-control detail */
.phone-left{--rail-side:-7px}
.phone-right{--rail-side:-7px}
@media(max-width:620px){
  .phone-left:before{left:-7px;top:104px;height:27px}
  .phone-left:after{left:-7px;top:142px;height:66px}
  .phone-right:before{right:-7px;top:128px;height:68px}
  .phone-right:after{left:-7px;top:100px;height:28px}
}

/* V3.9 — Card 01 joins the image-forward card system + reference-matched hero hardware */
@media(max-width:620px){
  .feature-arrival{
    height:70vh;
    min-height:650px;
    max-height:760px;
    padding:30px 24px 0;
    background:#061225;
    overflow:hidden;
  }
  .feature-arrival .feature-copy{z-index:4}
  .feature-arrival .feature-copy h3{
    font-size:29px;
    line-height:1.07;
    letter-spacing:-.035em;
    margin-bottom:11px;
    max-width:94%;
  }
  .feature-arrival .feature-copy>p:last-child{
    font-size:11.5px;
    line-height:1.38;
    max-width:95%;
    margin-bottom:0;
  }
  .feature-arrival .arrival-visual{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    width:calc(100% + 48px);
    margin:-10px -24px 0;
    padding:0;
    overflow:hidden;
    border-radius:0 0 25px 25px;
    background:#061225;
    align-items:stretch;
  }
  .feature-arrival .arrival-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center top;
    transform:translateY(-5px) scale(1.015);
    transform-origin:top center;
    border-radius:0;
  }
  .feature-arrival .arrival-visual:before{
    content:"";
    display:block !important;
    position:absolute;
    z-index:3;
    left:0;right:0;top:0;
    height:58px;
    border-radius:0;
    background:linear-gradient(to bottom,#061225 0%,rgba(6,18,37,.90) 18%,rgba(6,18,37,.58) 44%,rgba(6,18,37,.24) 70%,rgba(6,18,37,0) 100%);
    pointer-events:none;
  }
  .feature-arrival .arrival-visual:after{
    content:"";
    position:absolute;
    z-index:3;
    left:0;right:0;bottom:0;
    height:9%;
    background:linear-gradient(to bottom,rgba(6,18,37,0),rgba(6,18,37,.18) 58%,#061225 100%);
    pointer-events:none;
  }
}

/* Hero phone rail: thin polished edge with controls nearly flush to the chassis. */
.phone{
  border:3px solid #15171a;
  box-shadow:0 42px 100px rgba(0,0,0,.68),0 0 0 1px rgba(238,241,244,.72),0 0 0 2px rgba(66,70,75,.88),inset 0 0 0 1px rgba(255,255,255,.10);
}
.phone-left:before,.phone-left:after,.phone-right:before,.phone-right:after{
  width:2px;
  background:linear-gradient(90deg,#55595e 0%,#e4e6e8 48%,#6e7378 100%);
  border-radius:1px;
  box-shadow:0 0 0 .5px rgba(10,11,13,.9),0 1px 1px rgba(0,0,0,.55);
}
.phone-left:before{left:-5px;top:111px;height:27px}
.phone-left:after{left:-5px;top:151px;height:67px}
.phone-right:before{right:-5px;left:auto;top:139px;height:69px}
.phone-right:after{left:-5px;top:108px;height:28px}
@media(max-width:620px){
  .phone-left:before{left:-5px;top:104px;height:24px}
  .phone-left:after{left:-5px;top:140px;height:61px}
  .phone-right:before{right:-5px;top:128px;height:63px}
  .phone-right:after{left:-5px;top:100px;height:25px}
}

/* V3.10 — lock card system, image framing, landscape digest + symmetrical hero hardware */
/* Retire legacy pseudo hardware so both hero phones use the exact same structure. */
.phone-left:before,.phone-left:after,.phone-right:before,.phone-right:after{display:none!important}
.phone .hw{position:absolute;z-index:10;display:block;width:2px;background:linear-gradient(90deg,#55595e 0%,#e4e6e8 48%,#6e7378 100%);box-shadow:0 0 0 .5px rgba(10,11,13,.9),0 1px 1px rgba(0,0,0,.55);pointer-events:none}
.phone .hw-left-top{left:-5px;top:104px;height:25px;border-radius:1px}
.phone .hw-left-vol{left:-5px;height:28px;border-radius:1px}
.phone .hw-vol-up{top:140px}
.phone .hw-vol-down{top:173px}
.phone .hw-right-side{right:-5px;top:128px;height:63px;border-radius:1px}

@media(max-width:620px){
  /* Lock the portrait feature-card geometry and add breathing room between cards. */
  .feature-grid{gap:30px}
  .feature{width:82vw;max-width:82vw;height:70vh;min-height:650px;max-height:760px;border-radius:26px}

  /* Card 01: pull the artwork upward and let the bottom fade gently instead of losing the story. */
  .feature-arrival .arrival-visual{margin-top:-28px}
  .feature-arrival .arrival-visual img{transform:translateY(-18px) scale(1.015);object-position:center top}
  .feature-arrival .arrival-visual:before{height:48px}
  .feature-arrival .arrival-visual:after{height:7%;background:linear-gradient(to bottom,rgba(6,18,37,0),rgba(6,18,37,.13) 55%,#061225 100%)}

  /* Card 04: lower the art slightly; raise the lower veil just enough to hide the baked-in headline. */
  .feature-custom .custom-visual{margin-top:-6px}
  .feature-custom .custom-visual img{object-position:center 7%;transform:translateY(9px) scale(1.015)}
  .feature-custom .custom-visual:after{height:27%;background:linear-gradient(to bottom,rgba(6,18,37,0) 0%,rgba(6,18,37,.08) 20%,rgba(6,18,37,.48) 58%,#061225 100%)}

  /* Same iPhone control layout on BOTH hero devices, with truly split volume controls. */
  .phone .hw-left-top{left:-5px;top:100px;height:23px}
  .phone .hw-vol-up{left:-5px;top:134px;height:25px}
  .phone .hw-vol-down{left:-5px;top:164px;height:25px}
  .phone .hw-right-side{right:-5px;top:124px;height:59px}
}

/* Landscape mobile: keep the locked card shape and present all four as one horizontal digest. */
@media(max-height:620px) and (orientation:landscape) and (max-width:950px){
  .story{padding-left:24px;padding-right:24px;overflow:hidden}
  .feature-grid{display:flex;grid-template-columns:none;justify-items:initial;gap:22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px 9vw 20px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .feature-grid::-webkit-scrollbar{display:none}
  .feature-grid .feature{flex:0 0 72vw;width:72vw;max-width:72vw;height:78vh;min-height:430px;max-height:560px;scroll-snap-align:center}
}

/* V3.11 — landscape 2x2 digest + hero/card image framing refinements */
@media(max-width:620px){
  /* Give the hero footer cue its own breathing room below the phones. */
  .hero{height:calc(100svh + 44px);max-height:944px;padding-bottom:36px}
  .scroll-cue{bottom:18px}

  /* Card 01: back off the previous upward pull; preserve more of the lower artwork with balanced fades. */
  .feature-arrival .arrival-visual{margin-top:-18px}
  .feature-arrival .arrival-visual img{transform:translateY(-7px) scale(1.012);object-position:center top}
  .feature-arrival .arrival-visual:before{
    height:54px;
    background:linear-gradient(to bottom,#061225 0%,rgba(6,18,37,.88) 20%,rgba(6,18,37,.48) 52%,rgba(6,18,37,.14) 78%,rgba(6,18,37,0) 100%);
  }
  .feature-arrival .arrival-visual:after{
    height:10%;
    background:linear-gradient(to bottom,rgba(6,18,37,0) 0%,rgba(6,18,37,.08) 46%,rgba(6,18,37,.42) 76%,#061225 100%);
  }

  /* Card 04: shorter, stronger lower veil — starts later but fully removes the baked-in white headline. */
  .feature-custom .custom-visual:after{
    height:19%;
    background:linear-gradient(to bottom,rgba(6,18,37,0) 0%,rgba(6,18,37,.12) 24%,rgba(6,18,37,.72) 62%,#061225 88%,#061225 100%);
  }
}

/* Landscape phones/tablets: two cards per row, retaining the locked portrait card silhouette. */
@media(max-height:620px) and (orientation:landscape) and (max-width:950px){
  .story{padding:68px 24px 78px;overflow:visible}
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 22px;
    overflow:visible;
    padding:0;
    scroll-snap-type:none;
    justify-items:center;
    align-items:start;
  }
  .feature-grid .feature{
    width:min(40vw,350px);
    max-width:350px;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:0.54;
    flex:none;
    scroll-snap-align:none;
    border-radius:24px;
  }
}

/* V3.12 — landscape: all four locked portrait cards in one visible row.
   Preserve the exact portrait card geometry/art framing; only scale the complete cards down. */
@media(max-height:620px) and (orientation:landscape) and (max-width:950px){
  .story{
    padding:58px 18px 72px;
    overflow:visible;
  }
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:0;
    overflow:visible;
    scroll-snap-type:none;
    justify-items:center;
    align-items:start;
  }
  .feature-grid .feature{
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:0.54;
    flex:none;
    scroll-snap-align:none;
    border-radius:clamp(14px,2vw,24px);
  }
}

/* V3.13 — mobile hero: keep the added breathing room below the phones, but pull the phone pair upward. */
@media(max-width:620px){
  .hero-devices{transform:translateY(-50px)}
}

/* V3.14 — landscape card internals: preserve portrait compositions at miniature scale.
   The cards remain the locked tall silhouettes; typography, padding, fades and artwork
   are reduced together so the complete portrait story fits inside each card. */
@media(max-height:620px) and (orientation:landscape) and (max-width:950px){
  .feature-grid .feature{
    padding:14px 12px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }
  .feature-grid .feature-number{
    top:13px !important;
    right:12px !important;
    font-size:7px !important;
    letter-spacing:.16em !important;
  }
  .feature-grid .feature .feature-copy{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:none !important;
    z-index:5 !important;
  }
  .feature-grid .feature .feature-copy .eyebrow{
    font-size:6.5px !important;
    line-height:1.25 !important;
    letter-spacing:.27em !important;
    margin:0 0 10px !important;
    padding-right:18px !important;
  }
  .feature-grid .feature .feature-copy h3{
    font-size:19px !important;
    line-height:1.04 !important;
    letter-spacing:-.038em !important;
    margin:0 0 8px !important;
    max-width:96% !important;
  }
  .feature-grid .feature .feature-copy>p:last-child{
    font-size:7.4px !important;
    line-height:1.42 !important;
    margin:0 !important;
    max-width:96% !important;
  }

  /* Artwork occupies the same lower portion of each portrait card as on mobile. */
  .feature-grid .feature-arrival .arrival-visual,
  .feature-grid .feature-parking .parking-visual,
  .feature-grid .feature-place .place-visual,
  .feature-grid .feature-custom .custom-visual{
    flex:1 1 auto !important;
    min-height:0 !important;
    width:calc(100% + 24px) !important;
    margin-left:-12px !important;
    margin-right:-12px !important;
    margin-bottom:0 !important;
    border-radius:0 0 14px 14px !important;
    overflow:hidden !important;
  }
  .feature-grid .feature-arrival .arrival-visual{margin-top:-4px !important}
  .feature-grid .feature-parking .parking-visual{margin-top:-2px !important}
  .feature-grid .feature-place .place-visual,
  .feature-grid .feature-custom .custom-visual{margin-top:-3px !important}

  .feature-grid .feature-arrival .arrival-visual:before,
  .feature-grid .feature-parking .parking-visual:before,
  .feature-grid .feature-place .place-visual:before,
  .feature-grid .feature-custom .custom-visual:before{
    height:34px !important;
  }
  .feature-grid .feature-arrival .arrival-visual:after{height:10% !important}
  .feature-grid .feature-parking .parking-visual:after{height:12% !important}
  .feature-grid .feature-place .place-visual:after{height:9% !important}
  .feature-grid .feature-custom .custom-visual:after{height:19% !important}

  .feature-grid .feature-arrival .arrival-visual img{
    transform:translateY(-4px) scale(1.012) !important;
    object-position:center top !important;
  }
  .feature-grid .feature-parking .parking-visual img{object-position:center top !important}
  .feature-grid .feature-place .place-visual img{
    transform:translateY(-4px) scale(1.015) !important;
    object-position:center top !important;
  }
  .feature-grid .feature-custom .custom-visual img{
    transform:translateY(4px) scale(1.015) !important;
    object-position:center 7% !important;
  }
}

/* V3.15 — hero vertical balance + compact landscape hero */
@media(max-width:620px) and (orientation:portrait){
  .hero-devices{transform:translateY(-80px)}
}
@media(max-height:620px) and (orientation:landscape) and (max-width:950px){
  .hero{min-height:100svh;height:100svh;max-height:none;padding:58px 18px 12px;overflow:hidden}
  .hero-copy{max-width:310px;transform:translateY(-8px)}
  .hero-copy .eyebrow{font-size:6px;letter-spacing:.25em;margin-bottom:5px}
  .hero h1{font-size:27px;line-height:.93;letter-spacing:-.045em}
  .lede{font-size:9px;line-height:1.35;margin-top:6px;max-width:240px}
  .hero-actions{margin-top:7px;gap:6px}
  .hero-actions .button{padding:6px 10px;font-size:8px}
  .hero-devices{bottom:-8px;height:72vh;min-height:260px;max-height:350px;transform:translateY(-34px)}
  .phone-left{width:196px;height:425px;left:13%;top:10px;transform:rotateZ(-5deg) scale(.68);transform-origin:top left}
  .phone-right{width:203px;height:441px;right:13%;top:-3px;transform:rotateZ(5deg) scale(.70);transform-origin:top right}
  .scroll-cue{bottom:7px;font-size:5.5px;letter-spacing:.27em}
}

/* V3.16 — restore the original cinematic landscape hero composition.
   Keep the copy centered, but scale it down and pull both phones upward so
   they tuck around the copy instead of becoming a separate lower block. */
@media (orientation:landscape) and (max-width:950px){
  .hero{
    min-height:100svh;
    height:100svh;
    max-height:none;
    padding:52px 18px 10px;
    justify-content:flex-start;
    overflow:hidden;
  }
  .hero-copy{
    max-width:420px;
    transform:none;
    z-index:6;
  }
  .hero-copy .eyebrow{
    font-size:6px;
    letter-spacing:.29em;
    margin-bottom:6px;
  }
  .hero h1{
    font-size:30px;
    line-height:.91;
    letter-spacing:-.05em;
  }
  .lede{
    font-size:9px;
    line-height:1.35;
    margin-top:7px;
    max-width:300px;
  }
  .hero-actions{
    margin-top:8px;
    gap:7px;
  }
  .hero-actions .button{
    padding:6px 11px;
    font-size:8px;
  }

  /* Old two-phone stage, only tighter and higher. */
  .hero-devices{
    position:absolute;
    left:50%;
    right:auto;
    bottom:-4px;
    width:min(760px,94vw);
    height:78vh;
    min-height:300px;
    max-height:455px;
    margin:0;
    transform:translateX(-50%) translateY(-58px);
    z-index:4;
  }
  .phone-left{
    width:244px;
    height:529px;
    left:8%;
    top:28px;
    transform:rotateZ(-6deg) scale(.69);
    transform-origin:top left;
    z-index:2;
  }
  .phone-right{
    width:253px;
    height:550px;
    right:8%;
    top:0;
    transform:rotateZ(5deg) scale(.71);
    transform-origin:top right;
    z-index:3;
  }
  .connection-label{
    display:block;
    top:55%;
    font-size:5.5px;
    letter-spacing:.22em;
  }
  .connection-line{
    display:block;
    top:61%;
  }
  .scroll-cue{
    bottom:6px;
    font-size:5.5px;
    letter-spacing:.28em;
    z-index:7;
  }
}

/* V3.17 — hero positioning fix + landscape card containment.
   Important: .reveal.visible was resetting the hero-device transform, so the
   prior "move phones up" passes were shrinking/rebalancing the stage without
   actually moving the visible phones. Override the revealed state directly. */
@media (max-width:620px) and (orientation:portrait){
  .hero-devices.reveal.visible{
    transform:translateY(-80px) !important;
  }
}

@media (orientation:landscape) and (max-width:950px){
  /* Keep the established full hero canvas; move the actual phones, not the background. */
  .hero{
    min-height:100svh;
    height:100svh;
    max-height:none;
    padding:52px 18px 10px;
  }
  .hero-devices.reveal.visible{
    transform:translateX(-50%) translateY(-108px) !important;
  }

  /* Four-card landscape digest: retain the same tall card silhouette and
     scale the COMPLETE portrait composition into it instead of allowing
     desktop/mobile rules to inflate the internals. */
  .story{
    padding:58px 18px 72px;
    overflow:visible;
  }
  .feature-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    justify-items:center !important;
    align-items:start !important;
  }
  .feature-grid .feature{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:.54 !important;
    padding:14px 12px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
    border-radius:clamp(14px,2vw,24px) !important;
  }
  .feature-grid .feature-number{top:13px !important;right:12px !important;font-size:7px !important;letter-spacing:.16em !important}
  .feature-grid .feature .feature-copy{flex:0 0 auto !important;width:100% !important;max-width:none !important;z-index:5 !important}
  .feature-grid .feature .feature-copy .eyebrow{font-size:6.5px !important;line-height:1.25 !important;letter-spacing:.27em !important;margin:0 0 10px !important;padding-right:18px !important}
  .feature-grid .feature .feature-copy h3{font-size:19px !important;line-height:1.04 !important;letter-spacing:-.038em !important;margin:0 0 8px !important;max-width:96% !important}
  .feature-grid .feature .feature-copy>p:last-child{font-size:7.4px !important;line-height:1.42 !important;margin:0 !important;max-width:96% !important}
  .feature-grid .feature-arrival .arrival-visual,
  .feature-grid .feature-parking .parking-visual,
  .feature-grid .feature-place .place-visual,
  .feature-grid .feature-custom .custom-visual{
    flex:1 1 auto !important;min-height:0 !important;width:calc(100% + 24px) !important;
    margin-left:-12px !important;margin-right:-12px !important;margin-bottom:0 !important;
    border-radius:0 0 14px 14px !important;overflow:hidden !important;
  }
  .feature-grid .feature-arrival .arrival-visual{margin-top:-4px !important}
  .feature-grid .feature-parking .parking-visual{margin-top:-2px !important}
  .feature-grid .feature-place .place-visual,.feature-grid .feature-custom .custom-visual{margin-top:-3px !important}
  .feature-grid .feature-arrival .arrival-visual:before,
  .feature-grid .feature-parking .parking-visual:before,
  .feature-grid .feature-place .place-visual:before,
  .feature-grid .feature-custom .custom-visual:before{height:34px !important}
  .feature-grid .feature-arrival .arrival-visual:after{height:10% !important}
  .feature-grid .feature-parking .parking-visual:after{height:12% !important}
  .feature-grid .feature-place .place-visual:after{height:9% !important}
  .feature-grid .feature-custom .custom-visual:after{height:19% !important}
  .feature-grid .feature-arrival .arrival-visual img{transform:translateY(-4px) scale(1.012) !important;object-position:center top !important}
  .feature-grid .feature-parking .parking-visual img{object-position:center top !important}
  .feature-grid .feature-place .place-visual img{transform:translateY(-4px) scale(1.015) !important;object-position:center top !important}
  .feature-grid .feature-custom .custom-visual img{transform:translateY(4px) scale(1.015) !important;object-position:center 7% !important}
}

/* V3.18 — final hero positioning correction.
   Portrait: return phones 20px from V3.17 and restore THOUGHT → PLACE below them.
   Landscape: header belongs to the hero canvas (absolute, not floating/fixed),
   and the two-phone stage comes down ~100px from the V3.17 position. */
@media (max-width:620px) and (orientation:portrait){
  .hero-devices.reveal.visible{
    transform:translateY(-60px) !important;
  }
  .hero-devices .connection-label{
    display:block !important;
    top:auto !important;
    bottom:38px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    z-index:8 !important;
    font-size:7px !important;
    letter-spacing:.25em !important;
    color:#c8f8ff !important;
  }
  .hero-devices .connection-line{
    display:block !important;
    top:auto !important;
    bottom:27px !important;
    left:41% !important;
    right:41% !important;
    z-index:7 !important;
  }
  .scroll-cue{bottom:7px !important}
}

@media (orientation:landscape) and (max-width:950px){
  .nav{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
  }
  .hero-devices.reveal.visible{
    transform:translateX(-50%) translateY(-8px) !important;
  }
}

/* V3.19 — final responsive hero pinch.
   Portrait: lower the phone pair 30px from V3.18 so THOUGHT → PLACE sits directly beneath.
   Landscape: scale the whole hero composition down, with copy reduced slightly more than phones. */
@media (max-width:620px) and (orientation:portrait){
  .hero-devices.reveal.visible{
    transform:translateY(-30px) !important;
  }
  .hero-devices .connection-label{
    bottom:34px !important;
  }
  .hero-devices .connection-line{
    bottom:23px !important;
  }
}

@media (orientation:landscape) and (max-width:950px){
  .hero{
    padding-top:48px !important;
  }
  .hero-copy{
    max-width:360px !important;
    transform:scale(.82) !important;
    transform-origin:top center !important;
  }
  .hero-copy .eyebrow{
    font-size:5.5px !important;
    margin-bottom:5px !important;
  }
  .hero h1{
    font-size:27px !important;
    line-height:.91 !important;
  }
  .lede{
    font-size:8px !important;
    line-height:1.3 !important;
    margin-top:6px !important;
    max-width:270px !important;
  }
  .hero-actions{
    margin-top:7px !important;
  }
  .hero-actions .button{
    padding:5px 10px !important;
    font-size:7.5px !important;
  }
  .hero-devices{
    width:min(700px,88vw) !important;
    height:70vh !important;
    min-height:270px !important;
    max-height:400px !important;
  }
  .hero-devices.reveal.visible{
    transform:translateX(-50%) translateY(4px) scale(.90) !important;
    transform-origin:bottom center !important;
  }
  .phone-left{
    left:9% !important;
  }
  .phone-right{
    right:9% !important;
  }
  .connection-label{
    top:54% !important;
  }
  .connection-line{
    top:60% !important;
  }
}

/* V3.20 — hero footer rhythm.
   Keep the phone placement from V3.19; pull the two closing hero cues into the
   visual composition so neither floats on the phones nor hugs the section edge. */
@media (max-width:620px) and (orientation:portrait){
  .hero-devices .connection-label{
    bottom:8px !important;
  }
  .hero-devices .connection-line{
    bottom:-4px !important;
    left:39% !important;
    right:39% !important;
  }
  .scroll-cue{
    bottom:32px !important;
  }
}

@media (orientation:landscape) and (max-width:950px){
  .connection-label{
    top:auto !important;
    bottom:54px !important;
  }
  .connection-line{
    top:auto !important;
    bottom:43px !important;
    left:42% !important;
    right:42% !important;
  }
  .scroll-cue{
    bottom:22px !important;
  }
}

/* V3.21 — landscape hero becomes a deliberate two-column composition.
   Left = all messaging/actions/cues. Right = the exact portrait phone pairing,
   scaled as a single group so the hardware, overlap and angles remain uniform. */
@media (orientation:landscape) and (max-width:950px){
  .hero{
    height:100svh !important;
    min-height:100svh !important;
    padding:54px 4vw 18px !important;
    display:block !important;
    overflow:hidden !important;
  }
  .hero-copy{
    position:absolute !important;
    left:6vw !important;
    top:50% !important;
    width:40vw !important;
    max-width:330px !important;
    text-align:left !important;
    transform:translateY(-54%) !important;
    transform-origin:left center !important;
    z-index:7 !important;
  }
  .hero-copy .eyebrow{font-size:6px !important;letter-spacing:.27em !important;margin:0 0 7px !important}
  .hero h1{font-size:31px !important;line-height:.92 !important;letter-spacing:-.05em !important}
  .lede{font-size:8.5px !important;line-height:1.4 !important;margin:10px 0 0 !important;max-width:290px !important}
  .hero-actions{justify-content:flex-start !important;margin-top:12px !important;gap:7px !important}
  .hero-actions .button{padding:6px 11px !important;font-size:8px !important}

  .hero-devices,
  .hero-devices.reveal.visible{
    position:absolute !important;
    left:52% !important;
    right:auto !important;
    top:70px !important;
    bottom:auto !important;
    width:47vw !important;
    height:calc(100svh - 88px) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
    z-index:5 !important;
  }
  /* Same portrait phone geometry, uniformly reduced to fit the right column. */
  .phone-left{
    width:244px !important;height:529px !important;
    left:1% !important;top:40px !important;
    transform:rotateZ(-6deg) scale(.64) !important;
    transform-origin:top left !important;z-index:2 !important;
  }
  .phone-right{
    width:253px !important;height:550px !important;
    right:1% !important;top:8px !important;
    transform:rotateZ(5deg) scale(.66) !important;
    transform-origin:top right !important;z-index:3 !important;
  }
  .hero-devices .connection-label,
  .hero-devices .connection-line{display:none !important}

  /* Both closing cues belong to the left copy column in landscape. */
  .hero-copy:after{
    content:'THOUGHT   →   PLACE';
    display:block;
    margin-top:18px;
    padding-bottom:9px;
    width:150px;
    border-bottom:1px solid rgba(40,199,229,.58);
    color:#c8f8ff;
    font-size:6px;
    letter-spacing:.24em;
    white-space:pre;
  }
  .scroll-cue{
    left:6vw !important;right:auto !important;
    bottom:22px !important;
    font-size:5.5px !important;
    letter-spacing:.27em !important;
    z-index:8 !important;
  }
}

/* V3.22 — simplify hero cues + tighten landscape split composition.
   Remove the intermediary THOUGHT/PLACE and YOUR WORLD, REMEMBERED cues entirely.
   Landscape now uses the same overlapping two-phone silhouette as portrait and
   pulls both columns toward the center for a single cohesive hero composition. */
.hero-devices .connection-label,
.hero-devices .connection-line,
.scroll-cue{display:none !important;}

@media (orientation:landscape) and (max-width:950px){
  .hero{
    padding:54px 3vw 16px !important;
  }
  .hero-copy{
    left:11vw !important;
    top:49% !important;
    width:37vw !important;
    max-width:315px !important;
    transform:translateY(-50%) !important;
  }
  .hero-copy:after{display:none !important;content:none !important;}

  .hero-devices,
  .hero-devices.reveal.visible{
    left:48% !important;
    top:62px !important;
    width:45vw !important;
    height:calc(100svh - 72px) !important;
    transform:none !important;
  }

  /* Portrait-style pair: same relative size, tilt and close overlap. */
  .phone-left{
    width:224px !important;
    height:486px !important;
    left:4% !important;
    right:auto !important;
    top:36px !important;
    transform:rotateZ(-7deg) scale(.78) !important;
    transform-origin:top left !important;
    z-index:2 !important;
  }
  .phone-right{
    width:232px !important;
    height:504px !important;
    left:auto !important;
    right:2% !important;
    top:0 !important;
    transform:rotateZ(6deg) scale(.81) !important;
    transform-origin:top right !important;
    z-index:3 !important;
  }
}

/* V3.23 — landscape hero: centered copy + fully visible floating phones.
   Keep portrait untouched. In landscape, lower the copy slightly, zoom the
   portrait-style phone pair out as a unit, and allow the phones to bleed
   gracefully past the hero into the following section. */
@media (orientation:landscape) and (max-width:950px){
  .hero{
    overflow:visible !important;
    z-index:3 !important;
  }
  .hero-copy{
    left:13vw !important;
    top:54% !important;
    width:35vw !important;
    max-width:315px !important;
    transform:translateY(-50%) !important;
  }
  .hero-devices,
  .hero-devices.reveal.visible{
    left:50% !important;
    top:66px !important;
    width:43vw !important;
    height:calc(100svh - 44px) !important;
    overflow:visible !important;
    transform:none !important;
    z-index:5 !important;
  }
  .phone-left{
    width:224px !important;
    height:486px !important;
    left:5% !important;
    right:auto !important;
    top:34px !important;
    transform:rotateZ(-7deg) scale(.68) !important;
    transform-origin:top left !important;
  }
  .phone-right{
    width:232px !important;
    height:504px !important;
    left:auto !important;
    right:4% !important;
    top:2px !important;
    transform:rotateZ(6deg) scale(.71) !important;
    transform-origin:top right !important;
  }
  .section-intro{
    position:relative !important;
    z-index:2 !important;
  }
}

/* V3.24 — continuous hero-to-features atmosphere + landscape re-balance.
   The hero and the complete feature-story area now live on one uninterrupted
   PingBlu navy/cyan field so floating devices can overlap the transition
   without exposing a hard section seam. */
.hero{
  background:
    radial-gradient(circle at 50% 64%,rgba(11,107,131,.96) 0,rgba(7,53,80,.96) 24%,rgba(4,23,45,.98) 48%,#020617 77%) !important;
}
.story{
  position:relative;
  isolation:isolate;
  background:transparent !important;
}
.story::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:-180px;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse 78% 34% at 50% 0%,rgba(8,75,99,.82) 0%,rgba(5,38,61,.72) 34%,rgba(2,16,34,.94) 68%,#020617 100%),
    linear-gradient(180deg,#041a31 0%,#031326 36%,#020617 100%);
  pointer-events:none;
}
.story::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-180px;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:radial-gradient(rgba(40,199,229,.13) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 44%);
  opacity:.18;
  pointer-events:none;
}

@media (orientation:landscape) and (max-width:950px){
  .hero{
    overflow:visible !important;
    min-height:100svh !important;
    height:100svh !important;
  }
  /* Lower the registered copy into the visual center instead of pinning it high. */
  .hero-copy{
    left:14vw !important;
    top:60% !important;
    width:34vw !important;
    max-width:310px !important;
    transform:translateY(-50%) !important;
  }
  /* Keep the pair close to the copy while preserving the complete floating hardware. */
  .hero-devices,
  .hero-devices.reveal.visible{
    left:49% !important;
    top:58px !important;
    width:42vw !important;
    height:calc(100svh - 38px) !important;
    overflow:visible !important;
  }
  .phone-left{
    left:4% !important;
    top:32px !important;
    transform:rotateZ(-7deg) scale(.65) !important;
  }
  .phone-right{
    right:3% !important;
    top:0 !important;
    transform:rotateZ(6deg) scale(.68) !important;
  }
  .story{
    padding-top:120px !important;
  }
  .story::before,.story::after{top:-220px;}
}


/* V3.25 — ONE continuous background layer + geometry cleanup.
   Hero and feature story remain independent layout layers, while .memory-stage
   owns the single uninterrupted PingBlu atmosphere behind both. */
.memory-stage{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse 82% 31% at 47% 17%,rgba(10,102,128,.88) 0%,rgba(7,54,81,.78) 29%,rgba(4,24,47,.92) 55%,rgba(2,6,23,.99) 82%),
    linear-gradient(180deg,#041a31 0%,#031326 48%,#020617 100%);
}
.memory-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(40,199,229,.13) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.55) 31%,transparent 62%);
  opacity:.18;
}
.memory-stage>.hero,.memory-stage>.story{position:relative;z-index:1;background:transparent!important}
.story::before,.story::after{display:none!important;content:none!important}

/* Portrait keeps its established composition; only remove the duplicated hero fill. */
@media (orientation:portrait) and (max-width:620px){
  .memory-stage{
    background:
      radial-gradient(circle at 50% 20%,#0b6b83 0,#073550 18%,#04172d 39%,#020617 68%),
      linear-gradient(180deg,#041a31,#020617);
  }
}

/* Landscape: same hardware silhouette as portrait, scaled as whole phones.
   Shorten the hero's layout footprint so the devices can visually overlap the
   story instead of creating a large blank spacer. */
@media (orientation:landscape) and (max-width:950px){
  .memory-stage{overflow:hidden!important}
  .hero{
    height:510px!important;
    min-height:510px!important;
    max-height:none!important;
    padding:54px 3vw 0!important;
    overflow:visible!important;
  }
  .hero-copy{
    position:absolute!important;
    left:15.5vw!important;
    top:54%!important;
    width:34vw!important;
    max-width:310px!important;
    transform:translateY(-50%)!important;
    text-align:left!important;
  }
  .hero-copy .lede{margin-left:0!important;margin-right:0!important}
  .hero-actions{justify-content:flex-start!important}

  .hero-devices,.hero-devices.reveal.visible{
    position:absolute!important;
    left:49%!important;
    top:54px!important;
    width:39vw!important;
    height:500px!important;
    margin:0!important;
    overflow:visible!important;
    transform:none!important;
    perspective:none!important;
  }
  .phone{
    border-radius:36px!important;
    border-width:3px!important;
  }
  .phone img{border-radius:33px!important}
  .phone-left{
    width:224px!important;height:486px!important;
    left:4%!important;right:auto!important;top:34px!important;
    transform:rotateZ(-7deg) scale(.69)!important;
    transform-origin:top left!important;z-index:2!important;
  }
  .phone-right{
    width:232px!important;height:504px!important;
    left:auto!important;right:2%!important;top:2px!important;
    transform:rotateZ(6deg) scale(.72)!important;
    transform-origin:top right!important;z-index:3!important;
  }
  /* Preserve the same slim hardware/button construction on both devices. */
  .phone .hw-left-top{left:-5px!important;top:104px!important;height:25px!important}
  .phone .hw-vol-up{left:-5px!important;top:140px!important;height:28px!important}
  .phone .hw-vol-down{left:-5px!important;top:173px!important;height:28px!important}
  .phone .hw-right-side{right:-5px!important;top:128px!important;height:63px!important}

  /* Pull the content flow back up. The phones may visually float into this area,
     but they no longer reserve a giant empty hero block. */
  .story{
    padding-top:78px!important;
    margin-top:0!important;
  }
  .story .section-heading{position:relative;z-index:2}
}

/* V3.26 — seamless memory stage + landscape composition/card restoration.
   One parent owns the atmosphere; hero/story stay transparent content layers. */
.hero::before{display:none!important;content:none!important;}
.memory-stage::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:radial-gradient(rgba(40,199,229,.13) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.58) 38%,transparent 76%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.58) 38%,transparent 76%)!important;
  opacity:.18!important;
}

/* Standard mobile: remove the false transition gap. The story begins naturally
   beneath the floating phone composition on the SAME background layer. */
@media (orientation:portrait) and (max-width:620px){
  .story{padding-top:58px!important;}
  .story .section-heading{margin-top:0!important;}
}

@media (orientation:landscape) and (max-width:950px){
  /* Drop the complete phone pair enough that both top rails are visible. */
  .hero-devices,.hero-devices.reveal.visible{
    top:86px!important;
  }

  /* Feature intro becomes a centered header for the four-card row. */
  .story{
    padding:72px 24px 66px!important;
  }
  .story .section-heading{
    width:min(760px,82vw)!important;
    max-width:760px!important;
    margin:0 auto 48px!important;
    padding:0 18px!important;
    text-align:center!important;
  }
  .story .section-heading .eyebrow{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .story .section-heading h2{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .story .section-heading>p:last-child{
    margin:18px auto 0!important;
    max-width:650px!important;
  }

  /* Card 01 must use the same image-forward treatment as the locked portrait
     standard: artwork fills the card width and is cropped/faded, not inset. */
  .feature-grid .feature-arrival .arrival-visual{
    position:relative!important;
    width:calc(100% + 24px)!important;
    margin-left:-12px!important;
    margin-right:-12px!important;
    padding:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  .feature-grid .feature-arrival .arrival-visual img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center top!important;
    border-radius:0!important;
    transform:translateY(-4px) scale(1.012)!important;
    transform-origin:top center!important;
  }
}

/* V3.27 — lock the memory stage as ONE visual canvas.
   Hero glows were still section-scoped, which created the visible portrait seam. */
.memory-stage{
  background:
    radial-gradient(ellipse 72% 26% at 18% 18%,rgba(14,165,233,.30) 0%,rgba(14,165,233,.12) 38%,transparent 70%),
    radial-gradient(ellipse 68% 28% at 84% 31%,rgba(34,211,238,.22) 0%,rgba(11,107,131,.12) 42%,transparent 72%),
    radial-gradient(ellipse 95% 34% at 50% 58%,rgba(8,91,116,.24) 0%,rgba(5,43,66,.12) 48%,transparent 78%),
    linear-gradient(180deg,#041a31 0%,#05243a 32%,#07364b 58%,#05283b 76%,#020617 100%)!important;
}
.hero-glow{display:none!important;}
.memory-stage>.hero,.memory-stage>.story{
  background:none!important;
  background-color:transparent!important;
}

/* Standard mobile: tighter feature intro and no artificial transition spacer. */
@media (orientation:portrait) and (max-width:620px){
  .story{padding-top:30px!important;}
  .story .section-heading{
    margin:0 auto 40px!important;
    padding:0 16px!important;
    text-align:center!important;
    max-width:520px!important;
  }
  .story .section-heading .eyebrow{font-size:9px!important;margin-bottom:14px!important;}
  .story .section-heading h2{font-size:clamp(38px,10vw,48px)!important;line-height:1.00!important;}
  .story .section-heading>p:last-child{font-size:14px!important;line-height:1.55!important;margin:18px auto 0!important;max-width:500px!important;}
}

@media (orientation:landscape) and (max-width:950px){
  /* Reveal should only fade. Do not let the generic reveal transform cause a second jump. */
  .hero-copy.reveal,
  .hero-copy.reveal.visible{
    transform:translateY(-50%)!important;
    transition:opacity .75s ease!important;
  }

  /* Smaller, higher feature header — still centered as the card-group title. */
  .story{padding-top:42px!important;}
  .story .section-heading{
    width:min(650px,70vw)!important;
    max-width:650px!important;
    margin:0 auto 32px!important;
    padding:0 12px!important;
  }
  .story .section-heading .eyebrow{font-size:8px!important;letter-spacing:.30em!important;margin-bottom:12px!important;}
  .story .section-heading h2{font-size:clamp(30px,4vw,42px)!important;line-height:.98!important;letter-spacing:-.045em!important;}
  .story .section-heading>p:last-child{font-size:12px!important;line-height:1.5!important;margin:14px auto 0!important;max-width:560px!important;}
}


/* V3.28 — final hero/feature lock before Siri.
   1) The entire memory stage paints from ONE base canvas; only soft radial light
      fields sit on top, so there is no section/color-stop boundary to expose.
   2) Hero copy owns its entrance animation instead of the generic reveal class,
      eliminating the post-reveal position snap.
   3) The feature intro is smaller and sits higher in both orientations. */
.memory-stage{
  background:#031326!important;
}
.memory-stage::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:
    radial-gradient(ellipse 105% 25% at 50% 12%,rgba(13,112,139,.58) 0%,rgba(8,72,99,.30) 42%,rgba(3,19,38,0) 76%),
    radial-gradient(ellipse 88% 28% at 12% 39%,rgba(14,165,233,.15) 0%,rgba(3,19,38,0) 72%),
    radial-gradient(ellipse 92% 30% at 88% 60%,rgba(34,211,238,.10) 0%,rgba(3,19,38,0) 74%),
    radial-gradient(rgba(40,199,229,.12) 1px,transparent 1px)!important;
  background-size:auto,auto,auto,34px 34px!important;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat!important;
}
.memory-stage>.hero,.memory-stage>.story{
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.hero::before,.hero::after,.story::before,.story::after,.hero-glow{
  display:none!important;
  content:none!important;
}

/* A single fade, with no generic reveal transform to fight the final layout. */
.hero-copy-enter{
  opacity:0;
  animation:heroCopyEnter .78s cubic-bezier(.2,.72,.2,1) .08s forwards;
}
@keyframes heroCopyEnter{to{opacity:1}}

@media (orientation:portrait) and (max-width:620px){
  .story{padding-top:10px!important;}
  .story .section-heading{
    margin:0 auto 30px!important;
    padding:0 22px!important;
    max-width:430px!important;
  }
  .story .section-heading .eyebrow{
    font-size:8px!important;
    letter-spacing:.28em!important;
    margin-bottom:10px!important;
  }
  .story .section-heading h2{
    font-size:clamp(32px,8.7vw,41px)!important;
    line-height:.98!important;
  }
  .story .section-heading>p:last-child{
    font-size:13px!important;
    line-height:1.48!important;
    margin:14px auto 0!important;
    max-width:390px!important;
  }
}

@media (orientation:landscape) and (max-width:950px){
  .hero-copy-enter{
    transform:translateY(-50%)!important;
  }
  .story{
    padding-top:12px!important;
    padding-bottom:58px!important;
  }
  .story .section-heading{
    width:min(560px,64vw)!important;
    max-width:560px!important;
    margin:0 auto 24px!important;
    padding:0 12px!important;
  }
  .story .section-heading .eyebrow{
    font-size:7px!important;
    letter-spacing:.29em!important;
    margin-bottom:8px!important;
  }
  .story .section-heading h2{
    font-size:clamp(25px,3.15vw,34px)!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
  }
  .story .section-heading>p:last-child{
    font-size:10.5px!important;
    line-height:1.45!important;
    margin:10px auto 0!important;
    max-width:500px!important;
  }
}

/* V3.29 — Siri rebuilt as a true split composition.
   The Siri + places area now shares one reverse atmospheric canvas that begins
   in the same navy family as the hero and gradually lifts toward the white
   sharing section. The hand/phone is a transparent floating asset. */
.siri-stage{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 72% 34% at 82% 18%,rgba(34,211,238,.18) 0%,rgba(3,19,38,0) 72%),
    radial-gradient(ellipse 90% 38% at 12% 48%,rgba(14,165,233,.11) 0%,rgba(3,19,38,0) 74%),
    radial-gradient(rgba(40,199,229,.10) 1px,transparent 1px),
    linear-gradient(180deg,#031326 0%,#05213a 42%,#31566f 69%,#b8cfdd 88%,#eef7ff 100%);
  background-size:auto,auto,34px 34px,auto;
}
.siri-stage::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:260px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(238,247,255,0),#eef7ff 88%);
  z-index:0;
}
.siri-rebuilt{
  position:relative!important;
  z-index:1;
  max-width:1240px;
  min-height:760px!important;
  margin:0 auto;
  padding:105px 24px 50px!important;
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr)!important;
  gap:24px!important;
  align-items:center!important;
  background:transparent!important;
  overflow:visible!important;
}
.siri-rebuilt .siri-copy{max-width:520px;position:relative;z-index:3}
.siri-rebuilt .siri-copy h2{font-size:clamp(48px,5vw,72px);line-height:.96;letter-spacing:-.055em}
.siri-rebuilt .siri-copy>p:nth-of-type(2){max-width:470px;margin-top:24px;font-size:16px;line-height:1.65;color:#b9c8d9}
.siri-rebuilt .voice-examples{max-width:510px;margin-top:30px;gap:9px}
.siri-rebuilt .voice-examples div{padding:15px 17px;border-radius:16px;background:rgba(2,10,25,.32);border-color:rgba(40,199,229,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.siri-rebuilt .voice-examples span{margin-bottom:5px}
.siri-hand-stage{position:relative;height:620px;min-width:0;z-index:2}
.siri-hand-glow{position:absolute;width:470px;height:470px;border-radius:50%;right:1%;top:10%;background:rgba(25,179,226,.18);filter:blur(110px)}
.siri-hand-float{position:absolute;width:min(780px,65vw);max-width:none;height:auto;right:-100px;bottom:-16px;filter:drop-shadow(0 42px 60px rgba(0,0,0,.28));transform:rotate(-1deg)}
.siri-stage .everywhere{position:relative;z-index:1;background:transparent!important;color:#f7fbff;padding:95px 24px 118px}
.siri-stage .everywhere .centered{margin-bottom:64px}
.siri-stage .everywhere .centered .eyebrow{color:#9cefff}
.siri-stage .everywhere .centered h2{color:#f8fbff;text-shadow:0 2px 24px rgba(3,19,38,.22)}
.siri-stage .everywhere .centered>p:last-child{color:#d5e2ea}
.siri-stage .place-marquee{color:#e9f3f8;text-shadow:0 1px 18px rgba(3,19,38,.14)}
.siri-stage .place-marquee i{color:#62ddf2}
.sharing{position:relative;background:#eef7ff!important}

@media(max-width:900px){
  .siri-rebuilt{grid-template-columns:1fr!important;min-height:auto!important;padding:88px 22px 0!important;gap:12px!important}
  .siri-rebuilt .siri-copy{text-align:center;margin:0 auto;max-width:620px}
  .siri-rebuilt .siri-copy>p:nth-of-type(2){margin-left:auto;margin-right:auto}
  .siri-rebuilt .voice-examples{text-align:left;margin-left:auto;margin-right:auto}
  .siri-hand-stage{height:540px;width:100%;max-width:720px;margin:0 auto}
  .siri-hand-float{width:720px;right:50%;transform:translateX(50%) rotate(-1deg);bottom:-25px}
}
@media(max-width:620px){
  .siri-stage{background-size:auto,auto,28px 28px,auto}
  .siri-rebuilt{padding:74px 18px 0!important}
  .siri-rebuilt .siri-copy h2{font-size:45px!important}
  .siri-rebuilt .siri-copy>p:nth-of-type(2){font-size:14px;line-height:1.55;max-width:390px}
  .siri-rebuilt .voice-examples{margin-top:24px;gap:8px}
  .siri-rebuilt .voice-examples div{font-size:12px;padding:13px 14px}
  .siri-hand-stage{height:390px;margin-top:4px}
  .siri-hand-float{width:530px;bottom:-18px}
  .siri-hand-glow{width:330px;height:330px;right:50%;transform:translateX(50%);top:8%}
  .siri-stage .everywhere{padding:72px 18px 90px}
  .siri-stage .everywhere .centered{margin-bottom:52px}
}
@media(orientation:landscape) and (max-width:950px){
  .siri-rebuilt{grid-template-columns:minmax(0,.88fr) minmax(390px,1.12fr)!important;padding:76px 30px 24px!important;min-height:610px!important;gap:8px!important}
  .siri-rebuilt .siri-copy{text-align:left;margin:0;max-width:430px}
  .siri-rebuilt .siri-copy h2{font-size:40px!important}
  .siri-rebuilt .siri-copy>p:nth-of-type(2){font-size:12px;line-height:1.5;margin:17px 0 0}
  .siri-rebuilt .voice-examples{margin-top:20px;gap:7px}
  .siri-rebuilt .voice-examples div{padding:10px 12px;font-size:10.5px;border-radius:13px}
  .siri-rebuilt .voice-examples span{font-size:6.5px}
  .siri-hand-stage{height:500px;margin:0;max-width:none}
  .siri-hand-float{width:650px;right:-92px;bottom:-28px;transform:rotate(-1deg)}
  .siri-stage .everywhere{padding-top:65px}
}
\n\n/* V3.30 — Siri story lock: original premium hand/phone artwork + live example copy.\n   The section starts on the exact same #031326 canvas as the feature stage, so\n   there is no top gradient boundary. Light is layered independently and the\n   only true color transition happens toward Sharing at the bottom. */\n.siri-stage{\n  position:relative!important;\n  overflow:hidden!important;\n  background:#031326!important;\n  background-image:none!important;\n}\n.siri-stage::before{\n  content:"";\n  position:absolute;inset:0;z-index:0;pointer-events:none;\n  background:\n    radial-gradient(ellipse 92% 28% at 86% 18%,rgba(34,211,238,.15) 0%,rgba(3,19,38,0) 72%),\n    radial-gradient(ellipse 92% 30% at 12% 47%,rgba(14,165,233,.11) 0%,rgba(3,19,38,0) 74%),\n    radial-gradient(rgba(40,199,229,.12) 1px,transparent 1px);\n  background-size:auto,auto,34px 34px;\n  background-repeat:no-repeat,no-repeat,repeat;\n}\n.siri-stage::after{\n  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:520px!important;z-index:0!important;pointer-events:none!important;\n  background:linear-gradient(180deg,rgba(3,19,38,0) 0%,rgba(43,82,109,.54) 38%,rgba(184,207,221,.88) 76%,#eef7ff 100%)!important;\n}\n.siri-rebuilt{position:relative!important;z-index:1!important;background:transparent!important;}\n.siri-rebuilt .voice-examples{grid-template-columns:1fr 1fr;max-width:540px!important;gap:9px!important;}\n.siri-rebuilt .voice-examples div{min-height:86px;display:flex;flex-direction:column;justify-content:center;}\n.siri-hand-stage{height:690px!important;overflow:visible!important;}\n.siri-hand-float{\n  width:min(820px,66vw)!important;right:-108px!important;bottom:-58px!important;\n  transform:rotate(-1deg)!important;filter:drop-shadow(0 42px 60px rgba(0,0,0,.30))!important;\n}\n.siri-hand-glow{right:-2%!important;top:12%!important;width:500px!important;height:500px!important;}\n.siri-stage .everywhere{position:relative!important;z-index:1!important;background:transparent!important;}\n@media(max-width:900px){\n  .siri-rebuilt .voice-examples{grid-template-columns:1fr 1fr;max-width:600px!important;}\n  .siri-hand-stage{height:610px!important;}\n  .siri-hand-float{width:720px!important;right:50%!important;bottom:-42px!important;transform:translateX(50%) rotate(-1deg)!important;}\n}\n@media(max-width:620px){\n  .siri-stage::before{background-size:auto,auto,28px 28px;}\n  .siri-rebuilt .voice-examples{grid-template-columns:1fr!important;}\n  .siri-rebuilt .voice-examples div{min-height:0!important;}\n  .siri-hand-stage{height:475px!important;margin-top:12px!important;}\n  .siri-hand-float{width:545px!important;bottom:-36px!important;}\n}\n@media(orientation:landscape) and (max-width:950px){\n  .siri-rebuilt .voice-examples{grid-template-columns:1fr 1fr!important;gap:7px!important;}\n  .siri-rebuilt .voice-examples div{min-height:65px!important;}\n  .siri-hand-stage{height:520px!important;}\n  .siri-hand-float{width:650px!important;right:-95px!important;bottom:-44px!important;transform:rotate(-1deg)!important;}\n}\n
/* V3.30.1 — final hero polish.
   Let the hero phone shadows escape the shared memory-stage box instead of
   being clipped into a horizontal edge. Landscape only: lower the complete
   two-phone composition by 80px; all sizing/geometry stays unchanged. */
.memory-stage{
  overflow:visible!important;
}
@media (orientation:landscape) and (max-width:950px){
  .memory-stage{overflow:visible!important;}
  .hero-devices,.hero-devices.reveal.visible{
    top:134px!important;
  }
}


/* V3.30.2 — portrait shadow bleed + canonical PingBlu cyan lock.
   The hero is transparent and may paint beyond its layout box; the story copy
   sits above that shadow so the transition reads as one continuous composition. */
.memory-stage{overflow:visible!important;}
.memory-stage>.hero{overflow:visible!important;z-index:1!important;}
.memory-stage>.story{position:relative!important;z-index:6!important;background:transparent!important;}
.story .section-heading{position:relative!important;z-index:7!important;}
.hero-devices,.hero-devices.reveal.visible{overflow:visible!important;}

/* One canonical PingBlu accent everywhere; opacity may vary, hue does not. */
:root{--cyan:#28c7e5;--cyan2:#28c7e5;--line:rgba(40,199,229,.16);}

@media (orientation:portrait) and (max-width:620px){
  .memory-stage{overflow:visible!important;}
  .memory-stage>.hero{overflow:visible!important;}
  .hero-devices,.hero-devices.reveal.visible{overflow:visible!important;}
  .memory-stage>.story{z-index:6!important;}
  .story .section-heading{z-index:7!important;}
}

/* V3.30.3 — landscape micro-positioning only.
   From V3.30.2: phones rise 20px (net +60px vs original), left copy drops 25px. */
@media (orientation:landscape) and (max-width:950px){
  .hero-devices,.hero-devices.reveal.visible{
    top:114px!important;
  }
  .hero-copy,.hero-copy-enter{
    transform:translateY(calc(-50% + 25px))!important;
  }
}

/* V3.31 — Siri original-art restoration.
   Use the untouched original PingBlu Siri artwork as the visual source. The
   live copy remains independent; the artwork is clipped only to remove the
   baked-in upper-left copy while preserving the original hand, fingers,
   iPhone shell and PingBlu screen exactly as designed. */
.siri-hand-stage{overflow:visible!important;isolation:isolate;}
.siri-hand-float{
  content:url('/assets/siri-pingblu-final.png')!important;
  width:min(900px,72vw)!important;
  right:-118px!important;
  bottom:-92px!important;
  transform:rotate(0deg)!important;
  clip-path:polygon(39% 0,100% 0,100% 100%,0 100%,0 67%,20% 55%,32% 42%,39% 32%)!important;
  filter:drop-shadow(0 42px 64px rgba(0,0,0,.30))!important;
}
@media(max-width:900px){
  .siri-hand-float{
    width:760px!important;
    right:50%!important;
    bottom:-78px!important;
    transform:translateX(50%)!important;
  }
}
@media(max-width:620px){
  .siri-hand-stage{height:535px!important;margin-top:8px!important;}
  .siri-hand-float{
    width:620px!important;
    bottom:-86px!important;
    clip-path:polygon(39% 0,100% 0,100% 100%,0 100%,0 67%,20% 55%,32% 42%,39% 32%)!important;
  }
}
@media(orientation:landscape) and (max-width:950px){
  .siri-hand-stage{height:520px!important;}
  .siri-hand-float{
    width:700px!important;
    right:-112px!important;
    bottom:-70px!important;
    transform:none!important;
  }
}

/* V3.31.1 — Siri hand/phone silhouette + transparent edge fades.
   Use the isolated RGBA hand/phone asset (not the rectangular original art),
   remove the polygon crop that was shaving the thumb, and let the artwork
   dissolve to true transparency at the bottom. */
.siri-hand-float{
  content:url('/assets/siri-hand-phone-approved-master.png')!important;
  clip-path:none!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.92) 84%,rgba(0,0,0,.58) 91%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.92) 84%,rgba(0,0,0,.58) 91%,transparent 100%)!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}

/* Portrait: preserve the complete thumb/fingers and soften only the lower exit. */
@media(max-width:620px){
  .siri-hand-stage{overflow:visible!important;}
  .siri-hand-float{
    width:620px!important;
    bottom:-58px!important;
    clip-path:none!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.94) 82%,rgba(0,0,0,.62) 90%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.94) 82%,rgba(0,0,0,.62) 90%,transparent 100%)!important;
  }
}

/* Horizontal: show the complete top of the iPhone. The visual dissolves in
   from the copy side and also fades to zero at the bottom. */
@media(orientation:landscape) and (max-width:950px){
  .siri-hand-stage{overflow:visible!important;height:535px!important;}
  .siri-hand-float{
    width:660px!important;
    right:-82px!important;
    top:-54px!important;
    bottom:auto!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.24) 7%,rgba(0,0,0,.78) 17%,#000 28%,#000 100%),
      linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.88) 86%,rgba(0,0,0,.48) 93%,transparent 100%)!important;
    mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.24) 7%,rgba(0,0,0,.78) 17%,#000 28%,#000 100%),
      linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.88) 86%,rgba(0,0,0,.48) 93%,transparent 100%)!important;
    -webkit-mask-composite:source-in!important;
    mask-composite:intersect!important;
  }
}

/* V3.31.2 — Siri source cutout cleanup.
   Repairs the actual PNG silhouette: no baked-in left-copy/background,
   no thumb notch, and no transparent holes through the phone-screen text.
   Existing positioning and fade behavior are intentionally unchanged. */

/* V3.31.3: rebuilt Siri foreground mask from original full-resolution artwork; no geometric polygon crop crosses the hand or phone. */


/* V3.32 — ONE WEBSITE CANVAS + cinematic flow
   The page itself owns the atmosphere. Sections no longer paint their own
   large background blocks, so content can move/overlap without exposing seams. */
.site-canvas{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#031326;
}
.site-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 15% at 50% 8%,rgba(18,125,154,.50),transparent 72%),
    radial-gradient(ellipse 75% 13% at 78% 57%,rgba(40,199,229,.15),transparent 72%),
    radial-gradient(ellipse 88% 13% at 18% 64%,rgba(22,117,170,.12),transparent 75%),
    radial-gradient(rgba(40,199,229,.105) 1px,transparent 1px),
    linear-gradient(180deg,
      #031326 0%,
      #031326 57%,
      #082743 64%,
      #315b76 68%,
      #a9c6d7 72%,
      #eef7ff 76%,
      #eef7ff 84%,
      #cbddea 87%,
      #13283d 93%,
      #020617 100%);
  background-size:auto,auto,auto,34px 34px,auto;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;
}
.site-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,6,23,.10),transparent 18%,transparent 82%,rgba(2,6,23,.10));
}
.site-canvas > *{position:relative;z-index:1;}

/* All large content stages are transparent. The white Sharing transition is
   still present, but it now comes from the single site canvas above. */
.memory-stage,
.memory-stage::before,
.siri-stage,
.siri-stage::before,
.siri-stage::after,
.siri-section,
.everywhere,
.sharing,
.closing{
  background:transparent!important;
}
.memory-stage::before,.siri-stage::before,.siri-stage::after{content:none!important;display:none!important;}
.memory-stage{isolation:auto!important;}
.siri-stage{overflow:visible!important;}

/* Keep light-zone typography readable while it floats over the global white transition. */
.everywhere{color:#07101d!important;}
.siri-stage .everywhere .centered h2{color:#07101d!important;text-shadow:none!important;}
.siri-stage .everywhere .centered>p:last-child{color:#526579!important;}
.siri-stage .everywhere .centered .eyebrow{color:#28c7e5!important;}
.siri-stage .place-marquee{color:#10233a!important;text-shadow:none!important;}
.siri-stage .place-marquee i{color:#28c7e5!important;}

/* Siri: approved master art, with copy always above the visual. */
.siri-rebuilt{overflow:visible!important;}
.siri-rebuilt .siri-copy{z-index:5!important;}
.siri-hand-stage{z-index:2!important;overflow:visible!important;}
.siri-hand-float{
  content:url('/assets/siri-hand-phone-approved-master.png')!important;
  clip-path:none!important;
}

/* Premium reveal language: quiet depth, small travel, no bounce. */
.reveal{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.992);
  filter:blur(5px);
  transition:
    opacity .95s cubic-bezier(.22,.61,.36,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .9s ease;
  will-change:opacity,transform,filter;
}
.reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);}
.feature-grid .feature:nth-child(2){transition-delay:.07s;}
.feature-grid .feature:nth-child(3){transition-delay:.11s;}
.feature-grid .feature:nth-child(4){transition-delay:.15s;}
.siri-hand-stage.reveal{transform:translate3d(18px,26px,0) scale(.988);}
.siri-hand-stage.reveal.visible{transform:translate3d(0,0,0) scale(1);}
.sharing-card.reveal{transform:translate3d(0,28px,0) scale(.985);}
.sharing-card.reveal.visible{transform:translate3d(0,0,0) scale(1);}

/* Portrait Siri: pull the visual upward so the phone begins underneath command
   cards 03/04. The following copy also rises, staying clear of the whitening zone. */
@media (orientation:portrait) and (max-width:620px){
  .site-canvas::before{background-size:auto,auto,auto,28px 28px,auto;}
  .siri-rebuilt{padding-bottom:0!important;}
  .siri-hand-stage{
    height:470px!important;
    margin-top:-118px!important;
    pointer-events:none;
  }
  .siri-hand-float{
    width:575px!important;
    right:50%!important;
    top:0!important;
    bottom:auto!important;
    transform:translateX(50%)!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.9) 87%,rgba(0,0,0,.48) 94%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.9) 87%,rgba(0,0,0,.48) 94%,transparent 100%)!important;
  }
  .siri-stage .everywhere{
    margin-top:-54px!important;
    padding-top:54px!important;
  }
}

/* Horizontal Siri: retain the approved composition but make it more intimate—
   smaller phone, copy inward from the left, visual inward from the right. */
@media (orientation:landscape) and (max-width:950px){
  .siri-rebuilt{
    grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr)!important;
    max-width:1040px!important;
    padding-left:54px!important;
    padding-right:54px!important;
    column-gap:0!important;
  }
  .siri-rebuilt .siri-copy{
    max-width:400px!important;
    transform:translateX(24px)!important;
  }
  .siri-hand-stage{height:500px!important;transform:translateX(-18px)!important;}
  .siri-hand-float{
    width:590px!important;
    right:-30px!important;
    top:-26px!important;
    bottom:auto!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.visible{transition:none!important;transform:none!important;filter:none!important;opacity:1!important;}
}

/* V3.32.1 — composition tightening + Siri glass commands.
   Keep the single global canvas/white transition; only rebalance content. */
.siri-rebuilt .voice-examples div{
  background:linear-gradient(135deg,rgba(4,19,38,.24),rgba(3,13,29,.13))!important;
  border:1px solid rgba(40,199,229,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 34px rgba(0,5,18,.10)!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
}
.siri-rebuilt .voice-examples div,.siri-rebuilt .voice-examples div *{color:#f4fbff;}
.siri-rebuilt .voice-examples span{color:#28c7e5!important;}

/* Portrait: close the navy gap before Siri, then let the light-zone story sit
   lower in the white field instead of bunching against the phone. */
@media (orientation:portrait) and (max-width:620px){
  .siri-rebuilt{padding-top:18px!important;}
  .siri-stage .everywhere{
    margin-top:-20px!important;
    padding:112px 18px 72px!important;
  }
  .siri-stage .everywhere .centered{
    margin-bottom:58px!important;
    transform:translateY(38px);
  }
  .siri-stage .place-marquee{transform:translateY(30px);}
  .sharing{padding-top:118px!important;}

  .closing{min-height:520px!important;padding:42px 24px 54px!important;align-items:start!important;}
  .closing>div:last-child{margin-top:18px!important;max-width:640px;}
  .closing .eyebrow{font-size:9px!important;margin-bottom:16px!important;}
  .closing h2{font-size:clamp(38px,10vw,48px)!important;line-height:1.01!important;letter-spacing:-.045em!important;}
  .closing p:not(.eyebrow){font-size:15px!important;line-height:1.5!important;margin:20px auto 22px!important;max-width:360px;}
  .closing .button.large{padding:14px 24px!important;font-size:14px!important;}
  .closing small{margin-top:12px!important;}
}

/* Landscape: this story still sits over the dark portion of the global canvas,
   so use the dark-stage typography rather than portrait's dark-on-white copy. */
@media (orientation:landscape) and (max-width:950px){
  .siri-stage .everywhere{color:#f7fbff!important;}
  .siri-stage .everywhere .centered h2{color:#f8fbff!important;text-shadow:0 2px 24px rgba(3,19,38,.22)!important;}
  .siri-stage .everywhere .centered>p:last-child{color:#d5e2ea!important;}
  .siri-stage .everywhere .centered .eyebrow{color:#28c7e5!important;}
  .siri-stage .place-marquee{color:#e9f3f8!important;text-shadow:0 1px 18px rgba(3,19,38,.14)!important;}
  .siri-stage .place-marquee i{color:#28c7e5!important;}
}

/* V3.32.2 — mobile flow, true Siri glass, and anchor landing polish */
#features{scroll-margin-top:92px;}

/* True glass: keep the live Siri copy crisp while letting the approved phone
   artwork remain clearly visible underneath each command. */
.siri-rebuilt .voice-examples div{
  background:linear-gradient(135deg,rgba(3,16,34,.105),rgba(2,10,25,.055))!important;
  border:1px solid rgba(40,199,229,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(0,4,16,.075)!important;
  -webkit-backdrop-filter:blur(7px) saturate(118%)!important;
  backdrop-filter:blur(7px) saturate(118%)!important;
}
.siri-rebuilt .voice-examples div{color:#f8fcff!important;}
.siri-rebuilt .voice-examples span{color:#28c7e5!important;}

@media (orientation:portrait) and (max-width:620px){
  /* Use the light transition as composition space rather than spacer space. */
  .siri-hand-stage{height:410px!important;}
  .siri-stage .everywhere{
    margin-top:-38px!important;
    padding:48px 18px 30px!important;
  }
  .siri-stage .everywhere .centered{
    margin-bottom:34px!important;
    transform:none!important;
  }
  .siri-stage .everywhere .centered .eyebrow{
    color:#173552!important;
    text-shadow:none!important;
  }
  .siri-stage .place-marquee{
    transform:none!important;
    margin-bottom:0!important;
  }
  .siri-stage .place-marquee i{color:#1b7690!important;}
  .sharing{padding-top:42px!important;}
}

/* On light portions of the canvas cyan micro-copy loses contrast; use PingBlu
   navy there while retaining cyan as the dark-stage accent elsewhere. */
@media (orientation:portrait) and (max-width:620px){
  .everywhere .eyebrow{color:#173552!important;}
}

/* V3.32.3 — white-transition composition placement + restored Siri glass */
/* Restore the richer PingBlu glass surface on all four live Siri commands.
   The surface is translucent, but has enough reflected cyan/navy texture to
   read as glass even where the phone is not directly behind the card. */
.siri-rebuilt .voice-examples div{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(120% 150% at 8% 0%,rgba(40,199,229,.14) 0%,rgba(40,199,229,.035) 38%,transparent 64%),
    linear-gradient(112deg,rgba(9,35,59,.38) 0%,rgba(3,16,34,.25) 48%,rgba(4,25,46,.32) 100%)!important;
  border:1px solid rgba(82,217,241,.28)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(40,199,229,.045),
    0 12px 34px rgba(0,5,18,.11)!important;
  -webkit-backdrop-filter:blur(16px) saturate(138%)!important;
  backdrop-filter:blur(16px) saturate(138%)!important;
}
.siri-rebuilt .voice-examples div::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 26%,transparent 72%,rgba(40,199,229,.035));
  opacity:.9;
}
.siri-rebuilt .voice-examples div > *{position:relative;z-index:1;}

@media (orientation:portrait) and (max-width:620px){
  /* Move the entire light-zone story + Sharing composition down as one unit.
     This intentionally uses the open white transition above it and carries the
     bottom of the Sharing card to the user's marked target instead of adding a
     spacer between the story and the card. */
  .siri-stage .everywhere{
    margin-top:102px!important; /* previous -38px + 140px */
  }
  .sharing{
    padding-top:42px!important;
  }
}

/* V3.32.4 — soft-opacity Siri glass
   Softer, barely-there fogged glass: the phone/art stays visible through the
   commands, while a low-opacity cool veil keeps the live copy readable. */
.siri-rebuilt .voice-examples div{
  background:rgba(7,24,43,.16)!important;
  border:1px solid rgba(188,235,247,.16)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 26px rgba(0,5,18,.055)!important;
  -webkit-backdrop-filter:blur(9px) saturate(108%) brightness(1.035)!important;
  backdrop-filter:blur(9px) saturate(108%) brightness(1.035)!important;
}
.siri-rebuilt .voice-examples div::after{
  background:linear-gradient(115deg,rgba(255,255,255,.038),transparent 42%,rgba(121,220,241,.018))!important;
  opacity:.55!important;
}

/* V3.32.5 — hazy grey Siri command glass
   Deliberately more substantial than the prior clear-glass treatment: a cool
   grey fog at ~85% opacity, softened by blur, while keeping PingBlu cyan labels
   and crisp white command copy above the surface. */
.siri-rebuilt .voice-examples div{
  background:rgba(69,82,94,.85)!important;
  border:1px solid rgba(220,232,238,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 28px rgba(0,5,18,.08)!important;
  -webkit-backdrop-filter:blur(18px) saturate(72%)!important;
  backdrop-filter:blur(18px) saturate(72%)!important;
}
.siri-rebuilt .voice-examples div::after{
  background:linear-gradient(118deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 44%,rgba(255,255,255,.035))!important;
  opacity:.72!important;
}
.siri-rebuilt .voice-examples div{color:#fff!important;}
.siri-rebuilt .voice-examples span{color:#28c7e5!important;}

/* V3.32.6 — liquid-glass Siri command bubbles
   Clear center + refractive milky perimeter. Keeps the phone/art visible while
   giving each command the dimensional molded-glass edge requested. */
.siri-rebuilt .voice-examples div{
  isolation:isolate!important;
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(112deg,rgba(238,249,255,.105) 0%,rgba(153,198,215,.045) 34%,rgba(9,28,47,.075) 66%,rgba(218,244,252,.09) 100%)!important;
  border:1px solid rgba(222,247,255,.36)!important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 1px 0 0 rgba(214,244,252,.18),
    inset 0 -1.5px 0 rgba(78,142,166,.22),
    0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(0,8,22,.08)!important;
  -webkit-backdrop-filter:blur(11px) saturate(112%) brightness(1.04)!important;
  backdrop-filter:blur(11px) saturate(112%) brightness(1.04)!important;
}
.siri-rebuilt .voice-examples div::before{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:0!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 10px 18px -18px rgba(255,255,255,.82),
    inset 0 -12px 20px -19px rgba(40,199,229,.30)!important;
}
.siri-rebuilt .voice-examples div::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(75% 34% at 18% 0%,rgba(255,255,255,.25),transparent 72%),
    radial-gradient(54% 30% at 88% 100%,rgba(40,199,229,.10),transparent 76%),
    linear-gradient(118deg,rgba(255,255,255,.075),transparent 27%,transparent 73%,rgba(209,245,255,.07))!important;
  opacity:.82!important;
}
.siri-rebuilt .voice-examples div{color:#fff!important;}
.siri-rebuilt .voice-examples div > *{position:relative!important;z-index:2!important;}
.siri-rebuilt .voice-examples span{color:#28c7e5!important;}

/* V3.32.7 — obscured Apple-like Siri glass + restored places marquee
   The glass now diffuses/obscures the phone beneath the copy instead of letting
   recognizable screen details compete with the command text. */
.siri-rebuilt .voice-examples div{
  background:
    radial-gradient(120% 120% at 12% 0%,rgba(226,244,249,.22) 0%,rgba(138,174,188,.10) 36%,transparent 62%),
    linear-gradient(118deg,rgba(48,72,88,.90) 0%,rgba(35,59,76,.88) 48%,rgba(42,68,84,.91) 100%)!important;
  border:1px solid rgba(231,248,252,.42)!important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.46),
    inset 1px 0 0 rgba(225,244,249,.18),
    inset 0 -1.5px 0 rgba(13,42,59,.28),
    0 10px 28px rgba(0,7,20,.12)!important;
  -webkit-backdrop-filter:blur(34px) saturate(72%) brightness(1.02)!important;
  backdrop-filter:blur(34px) saturate(72%) brightness(1.02)!important;
}
.siri-rebuilt .voice-examples div::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 12px 20px -19px rgba(255,255,255,.90),
    inset 0 -14px 22px -20px rgba(24,87,108,.34)!important;
}
.siri-rebuilt .voice-examples div::after{
  background:
    radial-gradient(76% 34% at 18% 0%,rgba(255,255,255,.24),transparent 72%),
    linear-gradient(118deg,rgba(255,255,255,.07),transparent 28%,transparent 72%,rgba(218,245,250,.06))!important;
  opacity:.78!important;
}

@media (orientation:portrait) and (max-width:620px){
  /* Restore the moving HOME • CAMPUS • WORK • ... strip.  Earlier composition
     overrides pinned transform:none!important, which prevented the keyframes
     from owning transform. */
  .siri-stage .place-marquee{
    transform:none;
    animation:marquee 18s linear infinite!important;
    will-change:transform;
  }
}


/* V3.32.9 — real sharing story + independent marquee track + closing hierarchy */
.place-marquee{
  display:block!important;
  overflow:hidden!important;
  width:100%!important;
  transform:none!important;
  animation:none!important;
}
.place-marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:pingbluPlacesMarquee 22s linear infinite!important;
}
.place-marquee-set{
  display:flex;
  align-items:center;
  flex:none;
  gap:34px;
  padding-right:34px;
  white-space:nowrap;
}
.place-marquee-set i{font-style:normal;color:#1b7690;}
@keyframes pingbluPlacesMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.share-preview{
  position:relative;
  z-index:2;
  width:min(100%,390px);
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(40,199,229,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 45px rgba(40,199,229,.08);
}
.share-preview img{
  display:block;
  width:100%;
  height:auto;
}
.closing h2 em{
  display:inline-block;
  font-size:.58em!important;
  line-height:1.08!important;
  margin-top:.16em;
  max-width:850px;
}

@media(max-width:900px){
  .share-preview{margin-top:42px;width:min(100%,430px)}
}
@media(orientation:portrait) and (max-width:620px){
  .siri-stage .place-marquee{transform:none!important;animation:none!important;}
  .place-marquee-track{animation:pingbluPlacesMarquee 18s linear infinite!important;}
  .place-marquee-set{gap:28px;padding-right:28px;}
  .share-preview{margin-top:34px;border-radius:22px;}
  .closing h2 em{font-size:.55em!important;line-height:1.1!important;margin-top:.22em;}
}
@media(prefers-reduced-motion:reduce){
  .place-marquee-track{animation-duration:55s!important;}
}

/* V3.33.0 — Sharing full-bleed story + portrait memory contrast + cyan marquee dots */
.sharing-card{
  align-items:stretch!important;
}
.share-preview{
  align-self:stretch;
  width:calc(100% + 70px)!important;
  max-width:none!important;
  height:calc(100% + 140px);
  margin:-70px -70px -70px 0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.share-preview::before,
.share-preview::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  height:24%;
  pointer-events:none;
}
.share-preview::before{
  top:0;
  background:linear-gradient(to bottom,#030a18 0%,rgba(3,10,24,.82) 28%,rgba(3,10,24,0) 100%);
}
.share-preview::after{
  bottom:0;
  background:linear-gradient(to top,#030a18 0%,rgba(3,10,24,.78) 30%,rgba(3,10,24,0) 100%);
}
.share-preview img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
}
.sharing-copy>p:last-child strong{color:#f4fbff;font-weight:600;}

@media(orientation:portrait) and (max-width:620px){
  .siri-stage .everywhere .centered h2{
    color:#fff!important;
    text-shadow:0 2px 24px rgba(3,19,38,.24)!important;
  }
  .place-marquee-set i,
  .siri-stage .place-marquee i{
    color:#28c7e5!important;
  }
  .sharing-card{
    padding:40px 24px 0!important;
    min-height:600px!important;
  }
  .share-preview{
    width:calc(100% + 48px)!important;
    height:clamp(520px,118vw,760px)!important;
    margin:34px -24px 0!important;
    border-radius:0 0 30px 30px!important;
  }
  .share-preview::before{height:18%;}
  .share-preview::after{height:18%;}
  .share-preview img{object-position:center top!important;}
  .sharing h2{
    font-size:clamp(39px,10.5vw,54px)!important;
    line-height:1.03!important;
    letter-spacing:-.045em!important;
  }
}

/* V3.33.1 — compact sharing card, complete share preview, accent gesture */
.sharing-copy>p:last-child strong{
  color:#28c7e5!important;
  font-style:italic!important;
  font-weight:400!important;
}

@media(orientation:portrait) and (max-width:620px){
  .sharing-card{
    width:calc(100% - 26px)!important;
    max-width:360px!important;
    min-height:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:32px 22px 0!important;
    border-radius:28px!important;
  }
  .sharing h2{
    font-size:clamp(30px,8.25vw,38px)!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
  }
  .sharing-copy .eyebrow{
    margin-bottom:18px!important;
  }
  .sharing-copy>p:last-child{
    font-size:15px!important;
    line-height:1.5!important;
    margin-top:20px!important;
  }
  .share-preview{
    width:calc(100% + 44px)!important;
    height:auto!important;
    aspect-ratio:1320 / 2145!important;
    margin:18px -22px 0!important;
    border-radius:0 0 28px 28px!important;
    background:#030a18!important;
  }
  .share-preview img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
  .share-preview::before{
    height:12%!important;
    background:linear-gradient(to bottom,#030a18 0%,rgba(3,10,24,.58) 34%,rgba(3,10,24,0) 100%)!important;
  }
  .share-preview::after{
    height:12%!important;
    background:linear-gradient(to top,#030a18 0%,rgba(3,10,24,.54) 34%,rgba(3,10,24,0) 100%)!important;
  }
}

/* V3.33.3 — quieter sharing headline hierarchy */
@media(orientation:portrait) and (max-width:620px){
  .sharing h2{
    font-size:clamp(25px,6.8vw,32px)!important;
    line-height:1.08!important;
    letter-spacing:-.032em!important;
  }
}

/* V3.33.4 — landscape sharing split composition */
@media (orientation:landscape) and (max-width:950px){
  .sharing{
    padding:72px 24px 92px!important;
  }
  .sharing-card{
    width:min(88vw,760px)!important;
    max-width:760px!important;
    min-height:470px!important;
    height:470px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:48px 0 48px 48px!important;
    grid-template-columns:46% 54%!important;
    align-items:center!important;
    border-radius:34px!important;
    overflow:hidden!important;
  }
  .sharing-copy{
    z-index:5!important;
    align-self:center!important;
    padding-right:8px!important;
  }
  .sharing-copy .eyebrow{
    margin-bottom:18px!important;
  }
  .sharing h2{
    font-size:clamp(27px,3.5vw,38px)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
    margin-bottom:18px!important;
  }
  .sharing-copy>p:last-child{
    font-size:14px!important;
    line-height:1.5!important;
    max-width:310px!important;
    margin:0!important;
  }
  .share-preview{
    position:absolute!important;
    z-index:2!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:56%!important;
    height:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:#030a18!important;
    overflow:hidden!important;
  }
  .share-preview img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:right center!important;
  }
  .share-preview::before{
    display:block!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:48%!important;
    height:100%!important;
    background:linear-gradient(90deg,#030a18 0%,rgba(3,10,24,.92) 18%,rgba(3,10,24,.58) 52%,rgba(3,10,24,0) 100%)!important;
  }
  .share-preview::after{
    display:none!important;
  }
}

/* V3.33.6 — structural landscape sharing composition fix */
@media (orientation:landscape) and (max-width:950px){
  .sharing{
    padding:64px 24px 82px!important;
  }
  .sharing-card{
    display:block!important;
    width:min(72vw,620px)!important;
    max-width:620px!important;
    min-height:0!important;
    height:390px!important;
    padding:0!important;
    border-radius:30px!important;
    overflow:hidden!important;
    position:relative!important;
    background:#030a18!important;
  }
  .sharing-card::before{
    display:none!important;
  }
  .sharing-copy{
    position:absolute!important;
    z-index:6!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:54%!important;
    padding:42px 12px 38px 38px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    background:linear-gradient(90deg,#030a18 0%,#030a18 58%,rgba(3,10,24,.94) 72%,rgba(3,10,24,.64) 86%,rgba(3,10,24,0) 100%)!important;
  }
  .sharing-copy .eyebrow{margin:0 0 14px!important;}
  .sharing h2{
    font-size:clamp(24px,3vw,31px)!important;
    line-height:1.05!important;
    letter-spacing:-.033em!important;
    margin:0 0 17px!important;
  }
  .sharing-copy>p:last-child{
    font-size:12.5px!important;
    line-height:1.48!important;
    max-width:270px!important;
    margin:0!important;
  }
  .share-preview{
    position:absolute!important;
    z-index:2!important;
    inset:0 0 0 auto!important;
    width:58%!important;
    height:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#030a18!important;
  }
  .share-preview img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:right center!important;
  }
  .share-preview::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:3!important;
    inset:0 auto 0 0!important;
    width:38%!important;
    height:100%!important;
    background:linear-gradient(90deg,#030a18 0%,rgba(3,10,24,.96) 18%,rgba(3,10,24,.72) 48%,rgba(3,10,24,.32) 74%,rgba(3,10,24,0) 100%)!important;
    pointer-events:none!important;
  }
  .share-preview::after{display:none!important;}
}

/* ================================================================
   V3.35.0 — LOCKED ARTBOARD RESPONSIVE ARCHITECTURE
   Source of truth: V3.33.6 approved horizontal composition.
   Mobile <=620px is intentionally untouched.
   Above 620px, sections keep one composition and only the outer frame changes.
   The global .site-canvas background remains untouched.
   ================================================================ */
@media (min-width:621px){
  :root{--pb-artboard:950px;--pb-gutter:24px;}

  /* Prevent any child from creating the old right-side page overflow. */
  html,body{max-width:100%;overflow-x:hidden;}
  .site-canvas{width:100%;overflow:hidden;}

  /* One centered horizontal frame. More monitor width = breathing room. */
  .hero,
  .story,
  .siri-rebuilt,
  .everywhere,
  .sharing,
  .closing{
    box-sizing:border-box;
    width:min(var(--pb-artboard),calc(100vw - (var(--pb-gutter) * 2)))!important;
    max-width:var(--pb-artboard)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* HERO — keep copy and BOTH phones in one composition. */
  .hero{
    min-height:610px!important;height:610px!important;
    padding:76px 30px 18px!important;
    overflow:visible!important;
    justify-content:flex-start!important;
  }
  .hero-copy,.hero-copy-enter{
    position:absolute!important;left:54px!important;top:50%!important;
    width:310px!important;max-width:310px!important;
    text-align:left!important;z-index:7!important;
    transform:translateY(-42%)!important;
  }
  .hero-copy .eyebrow{font-size:7px!important;letter-spacing:.28em!important;margin-bottom:8px!important;}
  .hero h1{font-size:39px!important;line-height:.94!important;letter-spacing:-.05em!important;}
  .hero .lede{font-size:10.5px!important;line-height:1.45!important;max-width:275px!important;margin-top:10px!important;}
  .hero-actions{justify-content:flex-start!important;margin-top:12px!important;gap:8px!important;}
  .hero-actions .button{padding:7px 12px!important;font-size:8.5px!important;}
  .hero-devices,.hero-devices.reveal.visible{
    position:absolute!important;left:auto!important;right:24px!important;top:76px!important;bottom:auto!important;
    width:545px!important;height:500px!important;min-height:0!important;max-height:none!important;
    margin:0!important;transform:none!important;overflow:visible!important;z-index:4!important;
  }
  .phone-left{width:244px!important;height:529px!important;left:38px!important;right:auto!important;top:38px!important;transform:rotateZ(-6deg) scale(.72)!important;transform-origin:top left!important;}
  .phone-right{width:253px!important;height:550px!important;right:34px!important;left:auto!important;top:8px!important;transform:rotateZ(5deg) scale(.74)!important;transform-origin:top right!important;}
  .connection-label{display:block!important;top:58%!important;font-size:5.5px!important;letter-spacing:.22em!important;}
  .connection-line{display:block!important;top:64%!important;}
  .scroll-cue{bottom:12px!important;font-size:6px!important;letter-spacing:.28em!important;}

  /* FEATURE STORY — the heading and the 4-card strip are fixed designed objects. */
  .story{padding:74px 18px 92px!important;overflow:visible!important;}
  .story .section-heading{width:560px!important;max-width:560px!important;margin:0 auto 44px!important;text-align:center!important;}
  .story .section-heading .eyebrow{font-size:7px!important;}
  .story .section-heading h2{font-size:38px!important;line-height:.98!important;letter-spacing:-.045em!important;}
  .story .section-heading>p:last-child{font-size:11.5px!important;line-height:1.55!important;max-width:520px!important;margin:16px auto 0!important;}
  .feature-grid{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;width:100%!important;max-width:914px!important;margin:0 auto!important;
    overflow:visible!important;padding:0!important;
  }
  .feature-grid .feature{
    width:auto!important;max-width:none!important;min-width:0!important;
    height:430px!important;min-height:430px!important;max-height:430px!important;
    border-radius:22px!important;padding:22px 16px 0!important;
    overflow:hidden!important;scroll-snap-align:none!important;
  }
  .feature-grid .feature-number{font-size:8px!important;top:17px!important;right:16px!important;}
  .feature-grid .feature .feature-copy{position:relative!important;z-index:6!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;}
  .feature-grid .feature .feature-copy .eyebrow{font-size:5.5px!important;letter-spacing:.21em!important;margin:0 0 9px!important;}
  .feature-grid .feature .feature-copy h3{font-size:20px!important;line-height:1.02!important;letter-spacing:-.035em!important;margin:0!important;max-width:180px!important;}
  .feature-grid .feature .feature-copy>p:last-child{font-size:8.8px!important;line-height:1.43!important;margin:10px 0 0!important;max-width:178px!important;}
  .feature-grid .arrival-visual,.feature-grid .parking-visual,.feature-grid .place-visual,.feature-grid .custom-visual{
    position:absolute!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:54%!important;margin:0!important;overflow:hidden!important;
  }
  .feature-grid .arrival-visual img,.feature-grid .parking-visual img,.feature-grid .place-visual img,.feature-grid .custom-visual img{
    width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;
  }
  .feature-grid .arrival-visual img{object-fit:contain!important;object-position:center bottom!important;transform:scale(.94)!important;}
  .feature-grid .parking-visual img{object-position:center 38%!important;transform:none!important;}
  .feature-grid .place-visual img{object-position:center 30%!important;transform:none!important;}
  .feature-grid .custom-visual img{object-position:center 22%!important;transform:none!important;}
  .feature-grid .arrival-visual:before,.feature-grid .parking-visual:before,.feature-grid .place-visual:before,.feature-grid .custom-visual:before{
    content:""!important;display:block!important;position:absolute!important;z-index:4!important;left:0!important;right:0!important;top:0!important;height:62px!important;
    background:linear-gradient(to bottom,#061225 0%,rgba(6,18,37,.88) 28%,rgba(6,18,37,.38) 68%,transparent 100%)!important;pointer-events:none!important;
  }
  .feature-grid .arrival-visual:after,.feature-grid .parking-visual:after,.feature-grid .place-visual:after,.feature-grid .custom-visual:after{pointer-events:none!important;}

  /* SIRI — copy/bubbles and hand-phone remain one locked split composition. */
  .siri-rebuilt{
    display:grid!important;grid-template-columns:400px 1fr!important;column-gap:0!important;
    min-height:590px!important;padding:72px 38px 22px 54px!important;overflow:visible!important;
  }
  .siri-rebuilt .siri-copy{width:370px!important;max-width:370px!important;text-align:left!important;margin:0!important;transform:none!important;z-index:6!important;}
  .siri-rebuilt .siri-copy h2{font-size:39px!important;line-height:.96!important;}
  .siri-rebuilt .siri-copy>p:nth-of-type(2){font-size:11.5px!important;line-height:1.52!important;margin-top:16px!important;max-width:350px!important;}
  .siri-rebuilt .voice-examples{grid-template-columns:1fr 1fr!important;width:350px!important;max-width:350px!important;gap:7px!important;margin-top:20px!important;}
  .siri-rebuilt .voice-examples div{min-height:66px!important;padding:10px 11px!important;font-size:9px!important;line-height:1.35!important;border-radius:13px!important;}
  .siri-rebuilt .voice-examples span{font-size:6px!important;margin-bottom:4px!important;}
  .siri-hand-stage{position:relative!important;width:470px!important;height:500px!important;margin:0!important;transform:none!important;overflow:visible!important;}
  .siri-hand-float{width:590px!important;right:-38px!important;left:auto!important;top:-24px!important;bottom:auto!important;transform:none!important;}

  /* WHEREVER + MARQUEE — fixed typography; track itself is truly endless. */
  .everywhere{padding:72px 18px 88px!important;}
  .everywhere .section-heading{max-width:600px!important;margin:0 auto 52px!important;}
  .everywhere .section-heading h2{font-size:42px!important;}
  .everywhere .section-heading>p:last-child{font-size:12px!important;}
  .place-marquee{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;overflow:hidden!important;}
  .place-marquee-track{display:flex!important;width:max-content!important;animation:pingbluPlacesMarqueeLocked 34s linear infinite!important;}
  .place-marquee-set{flex:none!important;gap:34px!important;padding-right:34px!important;}
  @keyframes pingbluPlacesMarqueeLocked{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}

  /* SHARING — exact horizontal card object, never turns into a desktop banner. */
  .sharing{padding:70px 24px 92px!important;}
  .sharing-card{
    display:block!important;position:relative!important;width:620px!important;max-width:620px!important;
    min-height:0!important;height:390px!important;margin:0 auto!important;padding:0!important;
    border-radius:30px!important;overflow:hidden!important;background:#030a18!important;
  }
  .sharing-card::before{display:none!important;}
  .sharing-copy{position:absolute!important;z-index:6!important;left:0!important;top:0!important;bottom:0!important;width:54%!important;padding:42px 12px 38px 38px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:linear-gradient(90deg,#030a18 0%,#030a18 58%,rgba(3,10,24,.94) 72%,rgba(3,10,24,.64) 86%,rgba(3,10,24,0) 100%)!important;}
  .sharing-copy .eyebrow{margin:0 0 14px!important;font-size:7px!important;}
  .sharing h2{font-size:28px!important;line-height:1.05!important;letter-spacing:-.033em!important;margin:0 0 17px!important;}
  .sharing-copy>p:last-child{font-size:12.5px!important;line-height:1.48!important;max-width:270px!important;margin:0!important;}
  .share-preview{position:absolute!important;z-index:2!important;inset:0 0 0 auto!important;width:58%!important;height:100%!important;margin:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#030a18!important;}
  .share-preview img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;}
  .share-preview::before{content:""!important;display:block!important;position:absolute!important;z-index:3!important;inset:0 auto 0 0!important;width:38%!important;height:100%!important;background:linear-gradient(90deg,#030a18 0%,rgba(3,10,24,.96) 18%,rgba(3,10,24,.72) 48%,rgba(3,10,24,.32) 74%,rgba(3,10,24,0) 100%)!important;pointer-events:none!important;}
  .share-preview::after{display:none!important;}

  /* Closing typography is capped too; wide screens do not inflate it. */
  .closing{min-height:600px!important;padding:72px 24px!important;}
  .closing h2{font-size:58px!important;line-height:.98!important;}
  .closing p:not(.eyebrow){font-size:15px!important;}
}

/* Narrow horizontal/tablet window: preserve the SAME art direction by scaling
   dimensions proportionally through one frame ratio, rather than reflowing. */
@media (min-width:621px) and (max-width:760px){
  :root{--pb-gutter:14px;}
  .hero{height:540px!important;min-height:540px!important;}
  .hero-copy,.hero-copy-enter{left:28px!important;width:255px!important;max-width:255px!important;}
  .hero h1{font-size:32px!important;}.hero .lede{font-size:9px!important;max-width:225px!important;}
  .hero-devices,.hero-devices.reveal.visible{right:-18px!important;transform:scale(.84)!important;transform-origin:top right!important;}
  .story{padding-left:8px!important;padding-right:8px!important;}
  .feature-grid{gap:7px!important;}
  .feature-grid .feature{height:380px!important;min-height:380px!important;max-height:380px!important;padding:18px 10px 0!important;border-radius:18px!important;}
  .feature-grid .feature-number{right:10px!important;top:13px!important;}
  .feature-grid .feature .feature-copy .eyebrow{font-size:4.5px!important;letter-spacing:.16em!important;}
  .feature-grid .feature .feature-copy h3{font-size:16px!important;max-width:135px!important;}
  .feature-grid .feature .feature-copy>p:last-child{font-size:7.3px!important;line-height:1.4!important;max-width:132px!important;}
  .feature-grid .arrival-visual,.feature-grid .parking-visual,.feature-grid .place-visual,.feature-grid .custom-visual{height:55%!important;}
  .siri-rebuilt{grid-template-columns:310px 1fr!important;padding-left:28px!important;padding-right:20px!important;}
  .siri-rebuilt .siri-copy{width:300px!important;max-width:300px!important;}
  .siri-rebuilt .siri-copy h2{font-size:34px!important;}
  .siri-rebuilt .voice-examples{width:292px!important;max-width:292px!important;}
  .siri-hand-stage{width:370px!important;transform:scale(.88)!important;transform-origin:top left!important;}
  .sharing-card{transform:scale(.92);transform-origin:center center;margin-top:-16px!important;margin-bottom:-16px!important;}
}

/* ================================================================
   V3.35.1 — LOCKED COMPOSITION CORRECTION
   Screenshots 0468–0474: keep all four feature cards equal, prevent legacy
   span/reflow rules, protect copy from artwork, tighten hero phone cluster,
   and increase marquee contrast. Mobile <=620 remains untouched.
   ================================================================ */
@media (min-width:621px){
  /* HERO: phones are one tighter cluster, safely to the right of copy. */
  .hero-copy,.hero-copy-enter{left:48px!important;width:280px!important;max-width:280px!important;}
  .hero-devices,.hero-devices.reveal.visible{right:0!important;width:535px!important;}
  .phone-left{left:78px!important;top:38px!important;transform:rotateZ(-6deg) scale(.72)!important;}
  .phone-right{right:4px!important;top:8px!important;transform:rotateZ(5deg) scale(.74)!important;}

  /* FEATURES: explicitly kill every earlier special-card/span layout. */
  .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-flow:row!important;align-items:stretch!important;}
  .feature-grid>.feature,
  .feature-grid>.feature:nth-child(1),.feature-grid>.feature:nth-child(2),
  .feature-grid>.feature:nth-child(3),.feature-grid>.feature:nth-child(4){
    grid-column:auto!important;grid-row:auto!important;grid-area:auto!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    height:410px!important;min-height:410px!important;max-height:410px!important;
    transform:none!important;margin:0!important;padding:20px 15px 0!important;
  }
  .feature-grid .feature .feature-copy{height:43%!important;min-height:0!important;position:relative!important;z-index:8!important;overflow:visible!important;}
  .feature-grid .feature .feature-copy h3{font-size:18px!important;line-height:1.01!important;max-width:170px!important;}
  .feature-grid .feature .feature-copy>p:last-child{font-size:8px!important;line-height:1.38!important;margin-top:8px!important;max-width:170px!important;}
  .feature-grid .arrival-visual,.feature-grid .parking-visual,.feature-grid .place-visual,.feature-grid .custom-visual{
    top:auto!important;bottom:0!important;height:54%!important;z-index:2!important;
  }
  /* A taller opaque-to-clear veil means imagery can never eat the copy. */
  .feature-grid .arrival-visual:before,.feature-grid .parking-visual:before,.feature-grid .place-visual:before,.feature-grid .custom-visual:before{
    top:-42px!important;height:118px!important;
    background:linear-gradient(to bottom,#061225 0%,#061225 30%,rgba(6,18,37,.96) 48%,rgba(6,18,37,.72) 68%,rgba(6,18,37,.30) 84%,transparent 100%)!important;
  }

  /* MARQUEE: readable over the bright transition, while keeping cyan identity. */
  .siri-stage .place-marquee,.place-marquee{color:#071a31!important;text-shadow:0 1px 0 rgba(255,255,255,.18)!important;}
  .place-marquee-set span{color:#071a31!important;font-weight:650!important;opacity:.88!important;}
  .place-marquee-set i,.siri-stage .place-marquee i{color:#007f9c!important;opacity:1!important;}
}

@media (min-width:621px) and (max-width:760px){
  .hero-copy,.hero-copy-enter{left:24px!important;width:230px!important;max-width:230px!important;}
  .hero-devices,.hero-devices.reveal.visible{right:-4px!important;transform:scale(.82)!important;transform-origin:top right!important;}
  .phone-left{left:78px!important;}.phone-right{right:4px!important;}
  .feature-grid>.feature,.feature-grid>.feature:nth-child(1),.feature-grid>.feature:nth-child(2),.feature-grid>.feature:nth-child(3),.feature-grid>.feature:nth-child(4){height:370px!important;min-height:370px!important;max-height:370px!important;padding:17px 9px 0!important;}
  .feature-grid .feature .feature-copy h3{font-size:14.5px!important;max-width:128px!important;}
  .feature-grid .feature .feature-copy>p:last-child{font-size:6.8px!important;max-width:128px!important;}
}

/* ================================================================
   V3.35.2 — SINGLE-RATIO MATHEMATICAL LOCK
   One 950px horizontal master composition. From 621–999px the master
   composition is uniformly zoomed as ONE object. At >=1000px it is 1:1.
   No independent card/phone breakpoint geometry. Mobile <=620 untouched.
   ================================================================ */
@media (min-width:621px){
  :root{--pb-lock-scale:1;}

  /* HERO: fixed master geometry. The entire hero scales uniformly below 1000. */
  .hero{
    width:950px!important;max-width:950px!important;
    height:590px!important;min-height:590px!important;
    padding:76px 30px 18px!important;
    zoom:var(--pb-lock-scale);
  }
  .hero-copy,.hero-copy-enter{
    left:48px!important;top:50%!important;width:280px!important;max-width:280px!important;
    transform:translateY(-42%)!important;
  }
  .hero-devices,.hero-devices.reveal.visible{
    right:12px!important;top:68px!important;width:520px!important;height:500px!important;
    transform:none!important;zoom:1!important;
  }
  /* Pull the left phone decisively toward its partner; both now behave as one cluster. */
  .phone-left{left:126px!important;top:38px!important;transform:rotateZ(-6deg) scale(.72)!important;}
  .phone-right{right:0!important;top:8px!important;transform:rotateZ(5deg) scale(.74)!important;}

  /* FEATURES: exact master card dimensions. Never derive height from viewport/card width. */
  .story{width:950px!important;max-width:950px!important;padding:68px 18px 82px!important;zoom:var(--pb-lock-scale);}
  .story .section-heading{margin-bottom:36px!important;}
  .feature-grid{
    display:grid!important;grid-template-columns:repeat(4,219.5px)!important;
    gap:12px!important;width:914px!important;max-width:914px!important;
    justify-content:center!important;align-items:start!important;margin:0 auto!important;
  }
  .feature-grid>.feature,
  .feature-grid>.feature:nth-child(1),.feature-grid>.feature:nth-child(2),
  .feature-grid>.feature:nth-child(3),.feature-grid>.feature:nth-child(4){
    width:219.5px!important;min-width:219.5px!important;max-width:219.5px!important;
    height:350px!important;min-height:350px!important;max-height:350px!important;
    padding:18px 14px 0!important;border-radius:21px!important;
    grid-column:auto!important;grid-row:auto!important;grid-area:auto!important;
  }
  .feature-grid .feature .feature-copy{height:42%!important;min-height:0!important;overflow:visible!important;}
  .feature-grid .feature .feature-copy .eyebrow{font-size:5.4px!important;margin-bottom:7px!important;}
  .feature-grid .feature .feature-copy h3{font-size:17px!important;line-height:1.01!important;max-width:172px!important;}
  .feature-grid .feature .feature-copy>p:last-child{font-size:7.5px!important;line-height:1.34!important;margin-top:7px!important;max-width:176px!important;}
  .feature-grid .arrival-visual,.feature-grid .parking-visual,.feature-grid .place-visual,.feature-grid .custom-visual{
    position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:58%!important;margin:0!important;z-index:2!important;overflow:hidden!important;
  }
  /* Strong protected copy zone, then a compact fade into the image. */
  .feature-grid .arrival-visual:before,.feature-grid .parking-visual:before,.feature-grid .place-visual:before,.feature-grid .custom-visual:before{
    top:-34px!important;height:88px!important;
    background:linear-gradient(to bottom,#061225 0%,#061225 34%,rgba(6,18,37,.94) 55%,rgba(6,18,37,.58) 75%,transparent 100%)!important;
  }

  /* Cancel the old narrow-window overrides: there is now only ONE geometry. */
  .feature-grid .feature-number{top:15px!important;right:14px!important;font-size:7px!important;}
}

/* Scale is computed once from viewport width: available width / 950 master width. */
@media (min-width:621px) and (max-width:999px){
  .hero,.story{margin-left:auto!important;margin-right:auto!important;}
}

/* ================================================================
   V3.35.3 — SECTION-BY-SECTION MASTER MATCH
   Keep the approved horizontal geometry literal. One 950px coordinate
   system above 620px; only the whole section scales below 1000px.
   ================================================================ */
@media (min-width:621px){
  /* HERO: bring both halves toward center and protect phone tops. */
  .hero{
    width:950px!important;max-width:950px!important;height:590px!important;min-height:590px!important;
    padding:76px 30px 18px!important;overflow:visible!important;zoom:var(--pb-lock-scale)!important;
  }
  .hero-copy,.hero-copy-enter{
    left:92px!important;top:50%!important;width:270px!important;max-width:270px!important;
    transform:translateY(-40%)!important;
  }
  .hero-devices,.hero-devices.reveal,.hero-devices.reveal.visible{
    left:auto!important;right:54px!important;top:94px!important;width:500px!important;height:470px!important;
    transform:none!important;zoom:1!important;overflow:visible!important;
  }
  .phone-left{left:116px!important;top:18px!important;transform:rotateZ(-6deg) scale(.70)!important;transform-origin:top left!important;}
  .phone-right{right:0!important;top:0!important;transform:rotateZ(5deg) scale(.72)!important;transform-origin:top right!important;}

  /* FEATURES: card shape and internal geometry are frozen together. */
  .story{width:950px!important;max-width:950px!important;zoom:var(--pb-lock-scale)!important;}
  .feature-grid{grid-template-columns:repeat(4,219.5px)!important;width:914px!important;max-width:914px!important;gap:12px!important;}
  .feature-grid>.feature,.feature-grid>.feature:nth-child(1),.feature-grid>.feature:nth-child(2),.feature-grid>.feature:nth-child(3),.feature-grid>.feature:nth-child(4){
    width:219.5px!important;min-width:219.5px!important;max-width:219.5px!important;
    height:350px!important;min-height:350px!important;max-height:350px!important;
    padding:17px 14px 0!important;
  }
  .feature-grid .feature .feature-copy{height:44%!important;max-height:154px!important;overflow:hidden!important;}
  .feature-grid .feature .feature-copy h3{font-size:15.5px!important;line-height:1.02!important;max-width:168px!important;}
  .feature-grid .feature .feature-copy>p:last-child{font-size:6.8px!important;line-height:1.34!important;margin-top:7px!important;max-width:174px!important;}
  .feature-grid .arrival-visual,.feature-grid .parking-visual,.feature-grid .place-visual,.feature-grid .custom-visual{
    height:54%!important;bottom:0!important;top:auto!important;
  }
  .feature-grid .arrival-visual:before,.feature-grid .parking-visual:before,.feature-grid .place-visual:before,.feature-grid .custom-visual:before{
    top:-30px!important;height:76px!important;background:linear-gradient(to bottom,#061225 0%,#061225 30%,rgba(6,18,37,.96) 48%,rgba(6,18,37,.68) 68%,rgba(6,18,37,.22) 88%,transparent 100%)!important;
  }

  /* SIRI: never collapse into a stacked section above 620px. */
  .siri-rebuilt{
    box-sizing:border-box!important;width:950px!important;max-width:950px!important;height:590px!important;min-height:590px!important;
    margin-left:auto!important;margin-right:auto!important;padding:72px 42px 20px 72px!important;
    display:grid!important;grid-template-columns:365px 1fr!important;grid-template-rows:1fr!important;column-gap:16px!important;
    align-items:center!important;overflow:visible!important;zoom:var(--pb-lock-scale)!important;
  }
  .siri-rebuilt .siri-copy{grid-column:1!important;grid-row:1!important;width:350px!important;max-width:350px!important;align-self:center!important;}
  .siri-rebuilt .voice-examples{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important;width:344px!important;max-width:344px!important;gap:7px!important;}
  .siri-rebuilt .voice-examples div{min-height:64px!important;padding:10px 11px!important;}
  .siri-hand-stage{grid-column:2!important;grid-row:1!important;width:455px!important;height:500px!important;align-self:center!important;margin:0!important;transform:none!important;}
  .siri-hand-float{width:575px!important;right:-30px!important;left:auto!important;top:-18px!important;bottom:auto!important;transform:none!important;}

  /* WHEREVER stays centered and scales as a unit with the same master. */
  .everywhere{box-sizing:border-box!important;width:950px!important;max-width:950px!important;margin-left:auto!important;margin-right:auto!important;zoom:var(--pb-lock-scale)!important;}

  /* SHARING: fixed 620x390 object centered inside the 950 master, never hangs off-page. */
  .sharing{
    box-sizing:border-box!important;width:950px!important;max-width:950px!important;margin-left:auto!important;margin-right:auto!important;
    padding:70px 0 92px!important;overflow:visible!important;zoom:var(--pb-lock-scale)!important;
  }
  .sharing-card,.sharing-card.reveal,.sharing-card.reveal.visible{
    position:relative!important;left:auto!important;right:auto!important;transform:none!important;
    width:620px!important;min-width:620px!important;max-width:620px!important;height:390px!important;min-height:390px!important;max-height:390px!important;
    margin:0 auto!important;
  }
}

/* ================================================================
   V3.35.4 — HERO POSITION LOCK ONLY
   No feature/Siri/sharing changes in this pass.
   Move the approved hero halves inward and down without changing
   their geometry, phone size, rotation, or typography.
   ================================================================ */
@media (min-width:621px){
  .hero-copy,.hero-copy-enter{
    left:126px!important;
    top:56%!important;
    width:270px!important;
    max-width:270px!important;
    transform:translateY(-40%)!important;
  }
  .hero-devices,.hero-devices.reveal,.hero-devices.reveal.visible{
    left:auto!important;
    right:96px!important;
    top:132px!important;
    width:500px!important;
    height:470px!important;
    transform:none!important;
    zoom:1!important;
    overflow:visible!important;
  }
  .phone-left{
    left:116px!important;
    top:18px!important;
    transform:rotateZ(-6deg) scale(.70)!important;
    transform-origin:top left!important;
  }
  .phone-right{
    right:0!important;
    top:0!important;
    transform:rotateZ(5deg) scale(.72)!important;
    transform-origin:top right!important;
  }
}

/* ================================================================
   V3.35.5 — HERO GEOMETRY POLISH ONLY
   621px+ locked master: preserve the composition and only tune the
   approved hero's vertical placement, copy scale, and phone silhouette.
   ================================================================ */
@media (min-width:621px){
  .hero-copy,.hero-copy-enter{
    top:60%!important;
    transform:translateY(-40%)!important;
    width:292px!important;
    max-width:292px!important;
  }
  .hero-copy .eyebrow{
    font-size:7.6px!important;
  }
  .hero-copy h1{
    font-size:38px!important;
    line-height:.96!important;
  }
  .hero-copy .lede{
    font-size:12.5px!important;
    line-height:1.48!important;
    max-width:286px!important;
  }
  .hero-copy .button{
    font-size:10.5px!important;
    padding:10px 15px!important;
  }
  .hero-devices,.hero-devices.reveal,.hero-devices.reveal.visible{
    top:154px!important;
  }
  .phone{
    border-radius:47px!important;
    border-width:5px!important;
  }
  .phone img{
    border-radius:42px!important;
  }
  .phone-island{
    border-radius:18px!important;
  }
}

/* ================================================================
   V3.35.6 — FEATURE CARD MASTER MATCH ONLY
   Hero is frozen. Above 620px the four feature cards are literal fixed
   poster compositions: fixed shell, protected copy zone, fixed artwork
   crop, and fixed fade. The browser may scale the whole story master,
   but it may not independently resize text/artwork inside a card.
   ================================================================ */
@media (min-width:621px){
  .story .section-heading{margin-bottom:34px!important;}
  .feature-grid{
    grid-template-columns:repeat(4,205px)!important;
    width:856px!important;max-width:856px!important;
    gap:12px!important;
    justify-content:center!important;
  }
  .feature-grid>.feature,
  .feature-grid>.feature:nth-child(1),.feature-grid>.feature:nth-child(2),
  .feature-grid>.feature:nth-child(3),.feature-grid>.feature:nth-child(4){
    box-sizing:border-box!important;
    width:205px!important;min-width:205px!important;max-width:205px!important;
    height:312px!important;min-height:312px!important;max-height:312px!important;
    padding:15px 12px 0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
  .feature-grid .feature-number{top:13px!important;right:12px!important;font-size:6.4px!important;z-index:9!important;}
  .feature-grid .feature .feature-copy{
    position:relative!important;z-index:8!important;
    box-sizing:border-box!important;
    width:100%!important;height:112px!important;min-height:112px!important;max-height:112px!important;
    overflow:hidden!important;
  }
  .feature-grid .feature .feature-copy .eyebrow{
    font-size:5.1px!important;line-height:1.15!important;letter-spacing:.22em!important;
    margin:0 0 7px!important;padding-right:18px!important;
  }
  .feature-grid .feature .feature-copy h3{
    font-size:14.2px!important;line-height:1.02!important;letter-spacing:-.035em!important;
    margin:0 0 7px!important;max-width:164px!important;
  }
  .feature-grid .feature .feature-copy>p:last-child{
    font-size:6.35px!important;line-height:1.31!important;margin:0!important;max-width:166px!important;
  }

  /* Every image starts at the same fixed y-coordinate. */
  .feature-grid .feature-arrival .arrival-visual,
  .feature-grid .feature-parking .parking-visual,
  .feature-grid .feature-place .place-visual,
  .feature-grid .feature-custom .custom-visual{
    position:absolute!important;left:0!important;right:0!important;top:112px!important;bottom:0!important;
    width:100%!important;height:auto!important;margin:0!important;
    border-radius:0 0 20px 20px!important;overflow:hidden!important;z-index:2!important;
  }

  /* A real dark buffer protects the copy before the artwork becomes visible. */
  .feature-grid .feature-arrival .arrival-visual:before,
  .feature-grid .feature-parking .parking-visual:before,
  .feature-grid .feature-place .place-visual:before,
  .feature-grid .feature-custom .custom-visual:before{
    content:""!important;position:absolute!important;z-index:7!important;
    left:0!important;right:0!important;top:0!important;height:74px!important;
    background:linear-gradient(to bottom,#061225 0%,#061225 34%,rgba(6,18,37,.97) 50%,rgba(6,18,37,.82) 67%,rgba(6,18,37,.42) 84%,transparent 100%)!important;
    pointer-events:none!important;
  }
  .feature-grid .feature-arrival .arrival-visual:after,
  .feature-grid .feature-parking .parking-visual:after,
  .feature-grid .feature-place .place-visual:after,
  .feature-grid .feature-custom .custom-visual:after{
    pointer-events:none!important;
  }

  /* Literal artwork crops for the approved horizontal card look. */
  .feature-grid .feature-arrival .arrival-visual img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 8%!important;
    transform:none!important;
  }
  .feature-grid .feature-parking .parking-visual img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 18%!important;
    transform:none!important;
  }
  .feature-grid .feature-place .place-visual img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 12%!important;
    transform:none!important;
  }
  .feature-grid .feature-custom .custom-visual img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 16%!important;
    transform:none!important;
  }
}

/* ================================================================
   V3.35.7 — FEATURE ARTWORK LIFT ONLY
   Hero and feature shell/type geometry are frozen.
   Raise the artwork + fade, preserve Card 01's full left/right image,
   and expose more of the approved imagery inside the fixed card crop.
   ================================================================ */
@media (min-width:621px){
  /* Raise the artwork field without changing the card shell or copy. */
  .feature-grid .feature-arrival .arrival-visual,
  .feature-grid .feature-parking .parking-visual,
  .feature-grid .feature-place .place-visual,
  .feature-grid .feature-custom .custom-visual{
    top:88px!important;
  }

  /* Lift and soften the navy-to-art transition so imagery begins sooner. */
  .feature-grid .feature-arrival .arrival-visual:before,
  .feature-grid .feature-parking .parking-visual:before,
  .feature-grid .feature-place .place-visual:before,
  .feature-grid .feature-custom .custom-visual:before{
    height:66px!important;
    background:linear-gradient(to bottom,#061225 0%,rgba(6,18,37,.99) 24%,rgba(6,18,37,.91) 43%,rgba(6,18,37,.66) 62%,rgba(6,18,37,.28) 82%,transparent 100%)!important;
  }

  /* Card 01: preserve the complete left-to-right composition. The source
     is scaled by width only and allowed to crop vertically at the card edge. */
  .feature-grid .feature-arrival .arrival-visual img{
    position:absolute!important;
    left:0!important;top:38px!important;
    width:100%!important;height:auto!important;
    max-width:none!important;max-height:none!important;
    object-fit:fill!important;object-position:top center!important;
    transform:none!important;
  }

  /* Cards 02–04: keep the intentional card crop but reveal more artwork. */
  .feature-grid .feature-parking .parking-visual img{
    object-position:center 10%!important;
  }
  .feature-grid .feature-place .place-visual img{
    object-position:center 4%!important;
  }
  .feature-grid .feature-custom .custom-visual img{
    object-position:center 7%!important;
  }
}

/* ================================================================
   V3.35.8 — FEATURE SILHOUETTE RESTORE ONLY
   Preserve the solved 4-across mathematical scaling. Restore the taller
   approved horizontal card silhouette and spend the added height on art.
   ================================================================ */
@media (min-width:621px){
  .feature-grid>.feature,
  .feature-grid>.feature:nth-child(1),.feature-grid>.feature:nth-child(2),
  .feature-grid>.feature:nth-child(3),.feature-grid>.feature:nth-child(4){
    height:336px!important;min-height:336px!important;max-height:336px!important;
  }

  /* Bring the art/fade upward while leaving the approved copy geometry alone. */
  .feature-grid .feature-arrival .arrival-visual,
  .feature-grid .feature-parking .parking-visual,
  .feature-grid .feature-place .place-visual,
  .feature-grid .feature-custom .custom-visual{
    top:78px!important;
  }

  .feature-grid .feature-arrival .arrival-visual:before,
  .feature-grid .feature-parking .parking-visual:before,
  .feature-grid .feature-place .place-visual:before,
  .feature-grid .feature-custom .custom-visual:before{
    height:62px!important;
    background:linear-gradient(to bottom,#061225 0%,rgba(6,18,37,.99) 20%,rgba(6,18,37,.90) 40%,rgba(6,18,37,.60) 61%,rgba(6,18,37,.24) 82%,transparent 100%)!important;
  }

  /* Card 01 is a complete screenshot composition: fit by width, never distort
     or side-crop it, and lift it so both reminder panels read in the card. */
  .feature-grid .feature-arrival .arrival-visual img{
    left:0!important;right:auto!important;top:18px!important;
    width:100%!important;height:auto!important;
    object-fit:contain!important;object-position:top center!important;
  }

  /* Use the restored vertical room to reveal more of the approved artwork. */
  .feature-grid .feature-parking .parking-visual img{object-position:center 5%!important;}
  .feature-grid .feature-place .place-visual img{object-position:center 0%!important;}
  .feature-grid .feature-custom .custom-visual img{object-position:center 2%!important;}
}

/* ================================================================
   V3.35.9 — FEATURE BOTTOM FADE LOCK ONLY
   Preserve approved V3.35.8 geometry/artwork. Add the same subtle
   bottom navy fade to all four cards so source-image text/details cannot
   peek through the lower crop (especially Card 04).
   ================================================================ */
@media (min-width:621px){
  .feature-grid .feature-arrival .arrival-visual:after,
  .feature-grid .feature-parking .parking-visual:after,
  .feature-grid .feature-place .place-visual:after,
  .feature-grid .feature-custom .custom-visual:after{
    content:""!important;
    position:absolute!important;
    z-index:8!important;
    left:0!important;right:0!important;bottom:0!important;
    height:31px!important;
    background:linear-gradient(to bottom,transparent 0%,rgba(6,18,37,.16) 34%,rgba(6,18,37,.58) 72%,rgba(6,18,37,.92) 100%)!important;
    pointer-events:none!important;
  }
}

/* ================================================================
   V3.36.0 — FEATURE BOTTOM FADE: CARD-LEVEL LOCK
   The prior fade lived on each artwork wrapper and could be lost as older
   responsive artwork rules switched across viewport bands. Anchor the fade
   to the fixed card shell itself so it survives every >620px master scale.
   ================================================================ */
@media (min-width:621px){
  /* Retire wrapper-level bottom overlays; the shell now owns this effect. */
  .feature-grid .feature-arrival .arrival-visual:after,
  .feature-grid .feature-parking .parking-visual:after,
  .feature-grid .feature-place .place-visual:after,
  .feature-grid .feature-custom .custom-visual:after{
    content:none!important;
  }

  .feature-grid>.feature:after,
  .feature-grid>.feature:nth-child(1):after,
  .feature-grid>.feature:nth-child(2):after,
  .feature-grid>.feature:nth-child(3):after,
  .feature-grid>.feature:nth-child(4):after{
    content:""!important;
    position:absolute!important;
    z-index:30!important;
    left:0!important;right:0!important;bottom:0!important;
    width:auto!important;height:34px!important;
    border-radius:0 0 20px 20px!important;
    background:linear-gradient(to bottom,
      rgba(6,18,37,0) 0%,
      rgba(6,18,37,.10) 26%,
      rgba(6,18,37,.38) 58%,
      rgba(6,18,37,.76) 82%,
      #061225 100%)!important;
    filter:none!important;
    opacity:1!important;
    pointer-events:none!important;
  }
}

/* ================================================================
   V3.36.1 — SIRI MASTER MATCH ONLY
   Hero + Features are frozen. Above 620px Siri is one literal 950px
   horizontal composition: portrait-approved glass commands on the left,
   approved hand/phone art on the right. The whole section inherits the
   single mathematical master scale; nothing inside reflows independently.
   ================================================================ */
@media (min-width:621px){
  .siri-rebuilt{
    box-sizing:border-box!important;
    width:950px!important;max-width:950px!important;
    height:590px!important;min-height:590px!important;
    margin:0 auto!important;
    padding:62px 54px 20px 76px!important;
    display:grid!important;
    grid-template-columns:390px 430px!important;
    grid-template-rows:1fr!important;
    column-gap:0!important;
    align-items:center!important;
    overflow:visible!important;
    zoom:var(--pb-lock-scale)!important;
  }

  /* Left story: preserve the portrait copy/bubble language, only reposition it. */
  .siri-rebuilt .siri-copy,
  .siri-rebuilt .siri-copy.reveal,
  .siri-rebuilt .siri-copy.reveal.visible{
    grid-column:1!important;grid-row:1!important;
    width:365px!important;max-width:365px!important;
    margin:0!important;
    align-self:center!important;
    text-align:left!important;
    transform:translateX(18px)!important;
  }
  .siri-rebuilt .siri-copy .eyebrow{
    font-size:8px!important;letter-spacing:.30em!important;margin:0 0 14px!important;
  }
  .siri-rebuilt .siri-copy h2{
    font-size:39px!important;line-height:.96!important;letter-spacing:-.052em!important;
  }
  .siri-rebuilt .siri-copy>p:nth-of-type(2){
    width:350px!important;max-width:350px!important;
    margin:17px 0 0!important;
    font-size:11.5px!important;line-height:1.5!important;
  }

  /* Same four portrait glass commands, arranged as the original horizontal story.
     A tiny alternating offset gives the requested stagger without changing shape. */
  .siri-rebuilt .voice-examples{
    display:grid!important;
    grid-template-columns:166px 166px!important;
    grid-template-rows:auto auto!important;
    width:346px!important;max-width:346px!important;
    gap:8px 9px!important;
    margin:20px 0 0!important;
    text-align:left!important;
  }
  .siri-rebuilt .voice-examples div{
    box-sizing:border-box!important;
    width:166px!important;min-width:166px!important;max-width:166px!important;
    min-height:58px!important;height:auto!important;
    padding:10px 12px!important;
    border-radius:14px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;
    background:linear-gradient(135deg,rgba(190,222,239,.28),rgba(111,161,191,.17))!important;
    border:1px solid rgba(210,241,252,.42)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 28px rgba(0,5,18,.12)!important;
    -webkit-backdrop-filter:blur(15px) saturate(120%)!important;
    backdrop-filter:blur(15px) saturate(120%)!important;
    font-size:9.2px!important;line-height:1.28!important;color:#f7fbff!important;
  }
  .siri-rebuilt .voice-examples div:nth-child(2),
  .siri-rebuilt .voice-examples div:nth-child(4){transform:translateX(7px)!important;}
  .siri-rebuilt .voice-examples span{
    display:block!important;font-size:5.8px!important;line-height:1!important;
    letter-spacing:.22em!important;color:#9cefff!important;margin:0 0 5px!important;
  }

  /* Right visual: one fixed approved object, tucked toward center just like the
     original horizontal composition. No tablet/desktop recentering or stacking. */
  .siri-hand-stage,
  .siri-hand-stage.reveal,
  .siri-hand-stage.reveal.visible{
    grid-column:2!important;grid-row:1!important;
    position:relative!important;
    width:430px!important;max-width:430px!important;
    height:500px!important;
    margin:0!important;
    align-self:center!important;
    transform:translateX(-8px)!important;
    overflow:visible!important;
    pointer-events:none!important;
  }
  .siri-hand-float{
    width:590px!important;max-width:none!important;height:auto!important;
    left:auto!important;right:-66px!important;top:-8px!important;bottom:auto!important;
    transform:none!important;
    clip-path:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
    filter:drop-shadow(0 38px 54px rgba(0,0,0,.28))!important;
  }
  .siri-hand-glow{
    width:390px!important;height:390px!important;
    right:-10px!important;top:52px!important;transform:none!important;
    opacity:.75!important;
  }
}

/* ================================================================
   V3.36.2 — SIRI STAGGERED PORTRAIT-BUBBLE MASTER
   Hero + Features remain frozen. This fully replaces the >620 Siri
   composition from 3.36.1: four portrait-style glass commands are now
   independent fixed objects (not a 2x2 grid), staggered toward the phone.
   ================================================================ */
@media (min-width:621px){
  .siri-rebuilt{
    width:950px!important;max-width:950px!important;
    height:590px!important;min-height:590px!important;
    margin:0 auto!important;
    padding:0!important;
    display:block!important;
    position:relative!important;
    overflow:visible!important;
    zoom:var(--pb-lock-scale)!important;
  }

  .siri-rebuilt .siri-copy,
  .siri-rebuilt .siri-copy.reveal,
  .siri-rebuilt .siri-copy.reveal.visible{
    position:absolute!important;
    left:88px!important;top:108px!important;
    width:390px!important;max-width:390px!important;
    margin:0!important;
    text-align:left!important;
    transform:none!important;
    z-index:8!important;
  }
  .siri-rebuilt .siri-copy .eyebrow{
    font-size:8px!important;letter-spacing:.30em!important;margin:0 0 13px!important;
  }
  .siri-rebuilt .siri-copy h2{
    font-size:40px!important;line-height:.96!important;letter-spacing:-.052em!important;
    margin:0!important;
  }
  .siri-rebuilt .siri-copy>p:nth-of-type(2){
    width:360px!important;max-width:360px!important;
    margin:16px 0 0!important;font-size:11.5px!important;line-height:1.5!important;
  }

  /* Portrait bubbles, lifted out of grid flow and staged independently. */
  .siri-rebuilt .voice-examples{
    display:block!important;
    position:relative!important;
    width:390px!important;max-width:390px!important;
    height:190px!important;
    margin:18px 0 0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .siri-rebuilt .voice-examples div{
    position:absolute!important;
    box-sizing:border-box!important;
    width:190px!important;min-width:190px!important;max-width:190px!important;
    height:64px!important;min-height:64px!important;
    padding:10px 13px!important;
    margin:0!important;
    border-radius:15px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;
    font-size:9.2px!important;line-height:1.28!important;color:#fff!important;
    background:
      radial-gradient(120% 120% at 12% 0%,rgba(226,244,249,.22) 0%,rgba(138,174,188,.10) 36%,transparent 62%),
      linear-gradient(118deg,rgba(48,72,88,.90) 0%,rgba(35,59,76,.88) 48%,rgba(42,68,84,.91) 100%)!important;
    border:1px solid rgba(231,248,252,.42)!important;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.46),inset 1px 0 0 rgba(225,244,249,.18),inset 0 -1.5px 0 rgba(13,42,59,.28),0 10px 28px rgba(0,7,20,.12)!important;
    -webkit-backdrop-filter:blur(34px) saturate(72%) brightness(1.02)!important;
    backdrop-filter:blur(34px) saturate(72%) brightness(1.02)!important;
    transform:none!important;
  }
  .siri-rebuilt .voice-examples div:nth-child(1){left:0!important;top:0!important;}
  .siri-rebuilt .voice-examples div:nth-child(2){left:198px!important;top:24px!important;}
  .siri-rebuilt .voice-examples div:nth-child(3){left:14px!important;top:74px!important;}
  .siri-rebuilt .voice-examples div:nth-child(4){left:212px!important;top:100px!important;}
  .siri-rebuilt .voice-examples span{
    display:block!important;font-size:5.8px!important;line-height:1!important;
    letter-spacing:.22em!important;color:#9cefff!important;margin:0 0 5px!important;
  }

  /* Approved phone/hand is one fixed object, pulled into the staggered bubbles. */
  .siri-hand-stage,
  .siri-hand-stage.reveal,
  .siri-hand-stage.reveal.visible{
    position:absolute!important;
    left:452px!important;top:42px!important;
    width:470px!important;max-width:470px!important;height:520px!important;
    margin:0!important;transform:none!important;
    overflow:visible!important;pointer-events:none!important;z-index:5!important;
  }
  .siri-hand-float{
    position:absolute!important;
    width:610px!important;max-width:none!important;height:auto!important;
    left:0!important;right:auto!important;top:-6px!important;bottom:auto!important;
    transform:none!important;clip-path:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
    filter:drop-shadow(0 38px 54px rgba(0,0,0,.28))!important;
  }
  .siri-hand-glow{
    width:400px!important;height:400px!important;
    left:70px!important;right:auto!important;top:64px!important;
    transform:none!important;opacity:.72!important;
  }
}

/* ================================================================
   V3.36.3 — SIRI ORIGINAL HORIZONTAL COLUMN MASTER
   Hero + Features remain frozen. Restores the approved horizontal Siri
   composition: four portrait glass commands in one uniform vertical column,
   copy above, approved hand/phone on the right, with soft left and bottom fades.
   ================================================================ */
@media (min-width:621px){
  .siri-rebuilt{
    width:950px!important;max-width:950px!important;
    height:590px!important;min-height:590px!important;
    margin:0 auto!important;padding:0!important;
    display:block!important;position:relative!important;
    overflow:visible!important;zoom:var(--pb-lock-scale)!important;
  }

  .siri-rebuilt .siri-copy,
  .siri-rebuilt .siri-copy.reveal,
  .siri-rebuilt .siri-copy.reveal.visible{
    position:absolute!important;
    left:92px!important;top:78px!important;
    width:330px!important;max-width:330px!important;
    margin:0!important;text-align:left!important;
    transform:none!important;z-index:9!important;
  }
  .siri-rebuilt .siri-copy .eyebrow{
    font-size:8px!important;letter-spacing:.30em!important;margin:0 0 12px!important;
  }
  .siri-rebuilt .siri-copy h2{
    font-size:39px!important;line-height:.96!important;letter-spacing:-.052em!important;
    margin:0!important;
  }
  .siri-rebuilt .siri-copy>p:nth-of-type(2){
    width:315px!important;max-width:315px!important;
    margin:14px 0 0!important;font-size:11px!important;line-height:1.46!important;
  }

  /* Four commands: one clean, uniform portrait-style column. */
  .siri-rebuilt .voice-examples{
    display:flex!important;flex-direction:column!important;
    position:relative!important;
    width:292px!important;max-width:292px!important;height:auto!important;
    margin:17px 0 0!important;padding:0!important;
    gap:7px!important;overflow:visible!important;
  }
  .siri-rebuilt .voice-examples div,
  .siri-rebuilt .voice-examples div:nth-child(1),
  .siri-rebuilt .voice-examples div:nth-child(2),
  .siri-rebuilt .voice-examples div:nth-child(3),
  .siri-rebuilt .voice-examples div:nth-child(4){
    position:relative!important;left:auto!important;top:auto!important;
    box-sizing:border-box!important;
    width:292px!important;min-width:292px!important;max-width:292px!important;
    height:56px!important;min-height:56px!important;
    padding:8px 12px!important;margin:0!important;
    border-radius:14px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;
    font-size:8.8px!important;line-height:1.22!important;color:#fff!important;
    background:
      radial-gradient(120% 120% at 12% 0%,rgba(226,244,249,.22) 0%,rgba(138,174,188,.10) 36%,transparent 62%),
      linear-gradient(118deg,rgba(48,72,88,.90) 0%,rgba(35,59,76,.88) 48%,rgba(42,68,84,.91) 100%)!important;
    border:1px solid rgba(231,248,252,.42)!important;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.46),inset 1px 0 0 rgba(225,244,249,.18),inset 0 -1.5px 0 rgba(13,42,59,.28),0 10px 28px rgba(0,7,20,.12)!important;
    -webkit-backdrop-filter:blur(34px) saturate(72%) brightness(1.02)!important;
    backdrop-filter:blur(34px) saturate(72%) brightness(1.02)!important;
    transform:none!important;
  }
  .siri-rebuilt .voice-examples span{
    display:block!important;font-size:5.6px!important;line-height:1!important;
    letter-spacing:.22em!important;color:#9cefff!important;margin:0 0 4px!important;
  }

  /* Approved hand/phone: right side, pulled left until its hand just meets the
     bottom command. The asset itself fades in from the copy side and fades out
     at the bottom so the next section inherits the canvas cleanly. */
  .siri-hand-stage,
  .siri-hand-stage.reveal,
  .siri-hand-stage.reveal.visible{
    position:absolute!important;
    left:386px!important;top:35px!important;
    width:540px!important;max-width:540px!important;height:545px!important;
    margin:0!important;transform:none!important;
    overflow:visible!important;pointer-events:none!important;z-index:5!important;
  }
  .siri-hand-float{
    position:absolute!important;
    width:625px!important;max-width:none!important;height:auto!important;
    left:0!important;right:auto!important;top:0!important;bottom:auto!important;
    transform:none!important;clip-path:none!important;
    filter:drop-shadow(0 38px 54px rgba(0,0,0,.25))!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 100%),linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)!important;
    -webkit-mask-composite:source-in!important;
    mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 100%),linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)!important;
    mask-composite:intersect!important;
  }
  .siri-hand-glow{
    width:430px!important;height:430px!important;
    left:62px!important;right:auto!important;top:68px!important;
    transform:none!important;opacity:.64!important;
  }
}

/* V3.36.4 — Marquee color lock only
   Keep this transition copy bright on the navy/cyan canvas at every viewport. */
.siri-stage .everywhere .centered h2,
.everywhere .section-heading h2,
.everywhere .centered h2 {
  color:#ffffff !important;
  text-shadow:0 2px 24px rgba(3,19,38,.22) !important;
}
.siri-stage .place-marquee,
.place-marquee,
.place-marquee-set span {
  color:#ffffff !important;
  opacity:1 !important;
}
.place-marquee-set i,
.siri-stage .place-marquee i {
  color:#28c7e5 !important;
  opacity:1 !important;
}

/* V3.36.5 — Closing transition + whitespace trim only
   Keep Sharing on white, then hand off quickly to navy inside the closing section.
   No other approved section geometry is changed. */
@media (min-width:621px){
  .sharing{
    padding-bottom:34px!important;
  }
  .closing{
    min-height:455px!important;
    padding:42px 24px 34px!important;
    background:linear-gradient(180deg,
      #eef7ff 0%,
      #eef7ff 7%,
      #d9e7ef 13%,
      #8aa6b7 20%,
      #36536a 27%,
      #122b40 34%,
      #061426 40%,
      #020617 47%,
      #020617 100%)!important;
  }
  .closing>div:last-child{
    margin-top:24px!important;
  }
}

/* V3.36.6 — MASTER CANVAS closing fade
   Move the approved white→navy handoff off the 950px closing block and onto
   the full-width continuous site canvas. No content geometry changes. */
@media (min-width:621px){
  .site-canvas::before{
    background:
      radial-gradient(ellipse 80% 15% at 50% 8%,rgba(18,125,154,.50),transparent 72%),
      radial-gradient(ellipse 75% 13% at 78% 57%,rgba(40,199,229,.15),transparent 72%),
      radial-gradient(ellipse 88% 13% at 18% 64%,rgba(22,117,170,.12),transparent 75%),
      radial-gradient(rgba(40,199,229,.105) 1px,transparent 1px),
      linear-gradient(180deg,
        #031326 0%,
        #031326 57%,
        #082743 64%,
        #315b76 68%,
        #a9c6d7 72%,
        #eef7ff 76%,
        #eef7ff 85.2%,
        #d9e7ef 86.3%,
        #8aa6b7 87.8%,
        #36536a 89.3%,
        #122b40 90.8%,
        #061426 92.0%,
        #020617 93.2%,
        #020617 100%)!important;
    background-size:auto,auto,auto,34px 34px,auto!important;
    background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat!important;
  }
  .closing{
    background:transparent!important;
  }
}

/* V3.36.7 — Marquee typography polish only
   Smaller, thinner, shadow-free white place names; cyan bullets remain unchanged. */
.place-marquee{
  font-size:clamp(18px,2.15vw,31px)!important;
  letter-spacing:.015em!important;
  font-weight:300!important;
  text-shadow:none!important;
}
.place-marquee-set span,
.siri-stage .place-marquee,
.siri-stage .place-marquee span{
  font-weight:300!important;
  text-shadow:none!important;
}
.place-marquee-set i,
.siri-stage .place-marquee i{
  color:#28c7e5!important;
  text-shadow:none!important;
}

/* V3.36.8 — final footer / hero-device polish + portrait marquee contrast */
footer a{color:#ffffff!important;}
footer>p{color:#28c7e5!important;}
footer>div span{color:#28c7e5!important;}

/* Restore the Dynamic Island already present in the hero-phone markup. */
.phone-island{
  display:block!important;
  top:9px!important;
  left:50%!important;
  width:72px!important;
  height:19px!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:#020305!important;
  opacity:.98!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025)!important;
  pointer-events:none!important;
}

/* Move the decorative side-button rails just outside the phone frame. */
.phone-left:before,.phone-left:after{left:-9px!important;}
.phone-right:before,.phone-right:after{right:-9px!important;}

/* Portrait/mobile-only: white canvas needs navy marquee type; cyan dots remain. */
@media (max-width:620px){
  .siri-stage .place-marquee,
  .place-marquee,
  .place-marquee-set span,
  .siri-stage .place-marquee span{
    color:#10233a!important;
    text-shadow:none!important;
  }
  .place-marquee-set i,
  .siri-stage .place-marquee i{
    color:#28c7e5!important;
  }
  .phone-island{
    top:7px!important;
    width:60px!important;
    height:16px!important;
  }
}