/* Disposable hero design exploration. Uses native Landing fonts and palette roles. */

#landing-hero{--h-orange:var(--ui-accent-fill);--h-panel:var(--ui-panel);width:min(calc(100% - 96px),1240px);margin:0 auto;display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);align-items:center;gap:30px;min-height:790px;padding:30px 0 42px;font-family:inherit}
#landing-hero *{box-sizing:border-box}#landing-hero button{font-family:inherit;-webkit-tap-highlight-color:transparent}
#landing-hero button:focus-visible,#landing-hero .h-phone:focus-visible{outline:2px solid var(--ui-accent-ink)!important;outline-offset:5px}
#landing-hero .h-copy{position:relative;z-index:2;padding-bottom:38px}
#landing-hero .h-eyebrow{display:flex;align-items:center;gap:9px;color:var(--ui-muted-strong);font-size:10px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;margin:0 0 31px}
#landing-hero .h-eyebrow>span{height:6px;width:6px;background:var(--h-orange);border-radius:100%;box-shadow:0 0 15px color-mix(in srgb,var(--h-orange) 45%,transparent);flex:none}
#landing-hero h1{font-size:clamp(45px,4.5vw,67px);line-height:1.015;letter-spacing:-.052em;margin:0 0 29px;font-weight:750;color:var(--ui-text)}
#landing-hero h1 em{font-style:normal;color:var(--ui-accent-ink);display:inline-block;margin-top:8px}
#landing-hero .h-lead{font-size:15px;line-height:1.75;max-width:455px;color:var(--ui-muted-strong);margin:0 0 28px}
#landing-hero .h-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#landing-hero .h-actions :is(button,a){min-height:50px;padding:0 18px;border-radius:14px;border:0;font-size:12px;font-weight:750;display:flex;align-items:center;gap:22px;cursor:pointer;transition:transform .25s,background .25s}
#landing-hero .h-actions :is(button,a):hover{transform:translateY(-2px)}
#landing-hero .h-primary{background:var(--h-orange);color:#201204}
#landing-hero .h-secondary{background:var(--ui-panel-top);color:var(--ui-text)}
#landing-hero .h-actions :is(button,a)>span{font-size:18px;font-weight:450}
#landing-hero .h-how{display:inline-flex;gap:9px;margin-top:15px;font-size:10px;color:var(--ui-muted-strong);text-decoration:none}#landing-hero .h-how:hover{color:var(--ui-accent-ink)}
#landing-hero .h-free{font-size:10px;line-height:1.6;color:var(--ui-muted);margin:16px 0 29px}
#landing-hero .h-trust{display:flex;gap:25px;padding-top:22px;border-top:1px solid var(--ui-line);max-width:465px;color:var(--ui-muted-strong);font-size:11px;line-height:1.4}
#landing-hero .h-trust>span{display:flex;gap:9px;align-items:flex-start}
#landing-hero .h-trust i{font-style:normal;font-size:9px;color:var(--ui-accent-ink);padding-top:2px}
#landing-hero .h-visual{min-width:0;position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;isolation:isolate}
#landing-hero .h-stage{position:relative;height:650px;perspective:1200px;isolation:isolate}
#landing-hero .h-halo{position:absolute;width:690px;height:660px;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--h-orange) 9%,transparent),transparent 63%);pointer-events:none;z-index:-3}
#landing-hero .h-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--ui-line-strong) 30%,transparent);border-radius:50%;pointer-events:none;z-index:-2}
#landing-hero .h-orbit-one{width:540px;height:540px;left:50%;top:46%;transform:translate(-50%,-50%) rotateX(36deg)}
#landing-hero .h-orbit-two{width:680px;height:410px;left:50%;top:53%;transform:translate(-50%,-50%) rotateZ(-24deg);opacity:.45}
#landing-hero .h-phone-float{position:absolute;left:50%;top:10px;width:288px;height:624px;transform:translateX(-50%);z-index:3;perspective:1000px}
#landing-hero .h-phone{--rx:0deg;--ry:0deg;--rz:0deg;position:relative;width:100%;height:100%;border-radius:43px;padding:9px;background:linear-gradient(110deg,#77756f 0%,#1b1c1d 2%,#6e6f6c 3%,#111314 5%,#1b1d1e 94%,#5e6160 98%,#0d0f10 100%);box-shadow:0 36px 70px #0006,0 4px 12px #0005,inset 0 0 0 1px #ababab66;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1);cursor:grab;touch-action:pan-y}
#landing-hero .h-phone.is-dragging{cursor:grabbing;transition:none}
#landing-hero .h-phone-back{position:absolute;inset:2px;background:#202224;border-radius:43px;transform:translateZ(-10px);box-shadow:inset 0 0 0 1px #aaa4}
#landing-hero .h-screen{height:100%;width:100%;position:relative;border-radius:34px;overflow:hidden;background:#060603;transform:translateZ(1px);isolation:isolate}
#landing-hero .h-screen-img{width:100%;height:100%;display:block;object-fit:contain;user-select:none;pointer-events:none;transition:opacity .18s ease}
#landing-hero .h-screen-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#fff0 22%,#ffffff08 48%,#fff0 65%);mix-blend-mode:screen}
#landing-hero .h-key{position:absolute;width:3px;background:linear-gradient(90deg,#777,#171717);border-radius:3px;left:-2px;transform:translateZ(-3px)}
#landing-hero .h-key-one{height:22px;top:105px}#landing-hero .h-key-two{height:51px;top:142px}#landing-hero .h-key-three{height:69px;top:161px;left:auto;right:-2px}
#landing-hero .h-live-badge{position:absolute;left:50%;top:-13px;transform:translateX(-50%);font-size:10px;line-height:1.4;font-weight:650;display:flex;gap:9px;align-items:center;border-radius:14px;padding:11px 15px;white-space:nowrap;background:var(--ui-panel-top);box-shadow:0 9px 35px #0002;z-index:4}
#landing-hero .h-badge-sub{display:block;font-size:8px;font-weight:450;color:var(--ui-muted);margin-top:2px}
#landing-hero .h-dot{display:inline-block;width:5px;height:5px;background:var(--ui-accent-ink);border-radius:50%;flex-shrink:0}
#landing-hero .h-player{position:relative;z-index:5;width:min(100%,510px);margin:12px auto 0;padding:0 18px}
#landing-hero .h-player-top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;color:var(--ui-muted-strong);margin-bottom:12px}
#landing-hero .h-player-top>span{display:flex;align-items:center;gap:7px}
#landing-hero .h-play{display:flex;align-items:center;gap:7px;padding:6px 9px;background:transparent;border:0;color:var(--ui-text);font-size:10px;cursor:pointer;border-radius:8px;min-height:30px}
#landing-hero .h-play:hover{background:var(--ui-hover);color:var(--ui-accent-ink)}
#landing-hero .h-step-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
#landing-hero .h-step-tabs button{position:relative;border:0;border-top:2px solid var(--ui-line);background:transparent;color:var(--ui-muted);padding:11px 3px 8px;font-size:10px;font-weight:650;cursor:pointer;text-align:left;white-space:nowrap;transition:color .25s,border-color .25s}
#landing-hero .h-step-tabs i{font-style:normal;font-weight:400;margin-right:6px;opacity:.7;font-size:9px}
#landing-hero .h-step-tabs button[aria-selected=true]{color:var(--ui-accent-ink);border-color:var(--ui-accent-fill)}
#landing-hero .h-player-bottom{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-top:6px;min-height:40px}
#landing-hero .h-scene-caption{font-size:9px;line-height:1.5;color:var(--ui-muted);margin:0;max-width:260px}
#landing-hero .h-rotate{border:0;background:transparent;color:var(--ui-muted-strong);font-size:9px;display:flex;gap:6px;align-items:center;padding:3px;cursor:ew-resize;touch-action:none;white-space:nowrap}
#landing-hero .h-rotate>span{font-size:16px;color:var(--ui-accent-ink)}
#landing-hero .h-float,#landing-hero .h-side-journey,#landing-hero .h-word,#landing-hero .h-stack,#landing-hero .h-stage-caption{display:none}
/* A: quiet product close-up. */
html[data-hero-variant=A] #landing-hero .h-phone-float{width:300px;height:650px;top:0}
html[data-hero-variant=A] #landing-hero .h-stage{height:665px}
html[data-hero-variant=A] #landing-hero .h-live-badge{left:78%;top:58px}
html[data-hero-variant=A] #landing-hero .h-stage-caption{display:block;position:absolute;left:1%;top:466px;font-size:12px;line-height:1.6;color:var(--ui-muted);z-index:4}
html[data-hero-variant=A] #landing-hero .h-stage-caption b{font-weight:550;color:var(--ui-text)}
/* B: a speech and its feedback emerge from the handset. */
html[data-hero-variant=B] #landing-hero .h-phone-float{left:54%;top:10px}
html[data-hero-variant=B] #landing-hero .h-phone{--rz:-6deg}
html[data-hero-variant=B] #landing-hero .h-stage{height:670px}
html[data-hero-variant=B] #landing-hero .h-live-badge{left:48%;top:-5px}
html[data-hero-variant=B] #landing-hero .h-float{display:block;position:absolute;z-index:5;padding:19px 21px;border-radius:21px;color:var(--ui-text);background:linear-gradient(140deg,var(--ui-panel-top),var(--ui-panel));box-shadow:0 20px 60px #0003}
html[data-hero-variant=B] #landing-hero .h-voice{width:218px;left:-12px;top:143px;transform:rotate(-5deg)}
html[data-hero-variant=B] #landing-hero .h-result{width:222px;right:-7px;top:348px;transform:rotate(4deg)}
#landing-hero .h-float-label{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--ui-muted);display:block;margin-bottom:12px}
#landing-hero .h-float strong{font-size:15px;letter-spacing:-.02em;line-height:1.35;font-weight:650}
#landing-hero .h-float-note{font-size:8px;line-height:1.5;color:var(--ui-muted);display:block;margin-top:10px}
#landing-hero .h-wave{height:48px;display:flex;align-items:center;gap:3px;margin-top:10px}
#landing-hero .h-wave i{width:4px;flex:1;height:var(--bar);border-radius:3px;background:var(--ui-accent-fill);opacity:.8}
#landing-hero .h-score{font-size:46px;line-height:1;letter-spacing:-.055em;font-weight:750;color:var(--ui-accent-ink);margin:3px 0 13px}
#landing-hero .h-score>span{font-size:15px;color:var(--ui-muted);font-weight:450;letter-spacing:0;margin-left:6px}
#landing-hero .h-result strong{font-size:11px}
#landing-hero .h-result p{font-size:10px;line-height:1.55;margin:9px 0 0;color:var(--ui-muted-strong)}
#landing-hero .h-meter{height:4px;border-radius:4px;background:var(--ui-line);margin-top:9px;overflow:hidden}
#landing-hero .h-meter i{display:block;width:100%;height:100%;background:var(--ui-accent-fill)}
/* C: layered screens and a visible route. */
html[data-hero-variant=C] #landing-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
html[data-hero-variant=C] #landing-hero .h-phone-float{left:65%;top:21px;width:276px;height:598px}
html[data-hero-variant=C] #landing-hero .h-phone{--rz:3deg}
html[data-hero-variant=C] #landing-hero .h-stage{height:645px}
html[data-hero-variant=C] #landing-hero .h-live-badge{top:0;left:67%}
html[data-hero-variant=C] #landing-hero .h-word{display:block;position:absolute;left:-2%;top:37px;font-size:102px;font-weight:800;letter-spacing:-.07em;color:color-mix(in srgb,var(--ui-text) 4%,transparent);z-index:-1}
html[data-hero-variant=C] #landing-hero .h-stack{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
#landing-hero .h-ghost{position:absolute;width:170px;height:342px;padding:5px;border:0;border-radius:24px;background:var(--ui-panel-top);box-shadow:0 12px 45px #0004;overflow:hidden;pointer-events:auto;cursor:pointer;transition:transform .35s,opacity .35s}
#landing-hero .h-ghost img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;opacity:.7}
#landing-hero .h-ghost span{position:absolute;bottom:14px;left:11px;right:11px;background:#090909da;color:#eee;border-radius:9px;padding:7px 10px;text-align:left;font-size:9px}
#landing-hero .h-ghost-one{left:165px;top:101px;transform:rotate(-15deg);opacity:.64}
#landing-hero .h-ghost-two{left:190px;top:200px;transform:rotate(-9deg);opacity:.8}
#landing-hero .h-ghost:hover{opacity:1;transform:rotate(-4deg) translateY(-8px)}
html[data-hero-variant=C] #landing-hero .h-side-journey{display:grid;position:absolute;left:-1%;top:170px;gap:27px;z-index:4}
#landing-hero .h-side-journey button{position:relative;background:transparent;border:0;display:flex;align-items:center;gap:9px;text-align:left;color:var(--ui-muted);font-size:11px;font-weight:550;cursor:pointer;padding:0}
#landing-hero .h-side-journey i{background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font-style:normal;font-size:9px;flex:none}
#landing-hero .h-side-journey small{display:block;font-size:8px;font-weight:400;color:var(--ui-muted);margin-top:3px}
#landing-hero .h-side-journey button.is-current{color:var(--ui-text)}
#landing-hero .h-side-journey button.is-current i{background:var(--ui-accent-fill);color:#201204;border-color:var(--ui-accent-fill)}
#landing-hero .h-route-line{position:absolute;width:1px;top:13px;bottom:15px;left:14px;background:var(--ui-line);z-index:-1}
html[data-hero-variant=C] #landing-hero .h-player{margin-left:auto;margin-right:0;width:90%}
.h-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:13px;background:var(--ui-panel-top);color:var(--ui-text);font-size:12px;box-shadow:0 10px 35px #0003;display:none;z-index:20}.h-toast.is-visible{display:block}
@media(max-width:1100px) and (min-width:761px){
 #landing-hero{width:calc(100% - 56px);gap:12px;grid-template-columns:1fr 1fr}
 #landing-hero h1{font-size:50px}#landing-hero .h-stage{transform:scale(.86);transform-origin:center bottom;margin-top:-80px}
 #landing-hero .h-player{padding-inline:2px}#landing-hero .h-lead{font-size:14px}
 html[data-hero-variant=B] #landing-hero .h-voice{left:-40px;width:185px}html[data-hero-variant=B] #landing-hero .h-result{right:-38px;width:190px}
 html[data-hero-variant=A] #landing-hero .h-stage-caption{left:-15px;font-size:10px}
 html[data-hero-variant=C] #landing-hero .h-phone-float{left:70%}html[data-hero-variant=C] #landing-hero .h-side-journey{left:-55px;font-size:10px}
}
@media(max-width:760px){
 #landing-hero,#landing-hero:is(*),html[data-hero-variant=C] #landing-hero{width:calc(100% - 36px);display:flex;flex-direction:column;gap:27px;padding:20px 0 32px;min-height:0}
 #landing-hero .h-copy{padding:0;width:100%;text-align:left}
 #landing-hero .h-eyebrow{font-size:8px;letter-spacing:.035em;gap:6px;margin:0 0 22px}
 #landing-hero h1{font-size:43px;line-height:1.02;margin-bottom:22px;letter-spacing:-.05em}
 #landing-hero h1>em{margin-top:5px}
 #landing-hero .h-lead{font-size:13px;line-height:1.65;max-width:none;margin-bottom:21px}
 #landing-hero .h-actions{gap:7px;flex-wrap:nowrap}
 #landing-hero .h-actions :is(button,a){min-height:47px;padding:0 13px;font-size:10px;gap:12px;white-space:nowrap;border-radius:13px}
 #landing-hero .h-actions :is(button,a)>span{font-size:16px}
 #landing-hero .h-free{font-size:9px;margin:12px 0 19px}
 #landing-hero .h-trust{padding-top:15px;font-size:9px;gap:18px;max-width:none}
 #landing-hero .h-trust>span{gap:6px}
 #landing-hero .h-visual{width:100%;min-width:0;align-self:auto}
 #landing-hero .h-stage{width:100%;height:605px!important;transform:none;margin:0}
 #landing-hero .h-phone-float,html[data-hero-variant=A] #landing-hero .h-phone-float,html[data-hero-variant=B] #landing-hero .h-phone-float,html[data-hero-variant=C] #landing-hero .h-phone-float{width:258px;height:559px;left:50%;top:24px}
 #landing-hero .h-phone{border-radius:37px;padding:8px;box-shadow:0 23px 45px #0005,0 3px 7px #0004}
 #landing-hero .h-screen{border-radius:29px}
 #landing-hero .h-live-badge,html[data-hero-variant=A] #landing-hero .h-live-badge,html[data-hero-variant=B] #landing-hero .h-live-badge,html[data-hero-variant=C] #landing-hero .h-live-badge{left:50%;top:0;font-size:9px;padding:8px 13px}
 #landing-hero .h-badge-sub{font-size:7px}
 #landing-hero .h-orbit-one{width:350px;height:420px}
 #landing-hero .h-orbit-two{width:420px;height:310px}
 #landing-hero .h-halo{width:440px;height:560px}
 #landing-hero .h-player,html[data-hero-variant=C] #landing-hero .h-player{width:100%;margin:4px 0 0;padding:0}
 #landing-hero .h-player-top{font-size:9px}
 #landing-hero .h-step-tabs button{font-size:9px;padding-top:9px}
 #landing-hero .h-step-tabs i{font-size:8px;margin-right:4px}
 #landing-hero .h-scene-caption{font-size:8px;max-width:210px}
 #landing-hero .h-rotate{font-size:8px}
 html[data-hero-variant=A] #landing-hero .h-stage-caption{display:none}
 html[data-hero-variant=B] #landing-hero .h-stage{height:658px!important}
 html[data-hero-variant=B] #landing-hero .h-voice{width:153px;left:-2px;top:320px;padding:12px;transform:rotate(-5deg)}
 html[data-hero-variant=B] #landing-hero .h-result{width:158px;right:-1px;top:431px;padding:13px;transform:rotate(4deg)}
 #landing-hero .h-float strong{font-size:11px}#landing-hero .h-float-label{font-size:7px;margin-bottom:7px}#landing-hero .h-float-note{font-size:6px;margin-top:7px}
 #landing-hero .h-wave{height:29px;margin-top:4px;gap:2px}#landing-hero .h-wave i{height:calc(var(--bar)*.6)}
 #landing-hero .h-score{font-size:34px;margin-bottom:8px}#landing-hero .h-score>span{font-size:11px}
 #landing-hero .h-result strong{font-size:8px}#landing-hero .h-result p{font-size:8px;margin-top:6px}#landing-hero .h-meter{height:3px;margin-top:6px}
 html[data-hero-variant=C] #landing-hero .h-stage{height:692px!important}
 html[data-hero-variant=C] #landing-hero .h-phone-float{left:56%;top:100px;width:250px;height:542px}
 html[data-hero-variant=C] #landing-hero .h-live-badge{left:56%;top:76px}
 html[data-hero-variant=C] #landing-hero .h-side-journey{top:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 #landing-hero .h-side-journey button{display:flex;flex-direction:column;gap:6px;text-align:center;font-size:8px;line-height:1.25}
 #landing-hero .h-side-journey small{display:none}#landing-hero .h-side-journey i{width:26px;height:26px;font-size:8px}
 #landing-hero .h-route-line{left:12%;right:12%;top:13px;bottom:auto;width:auto;height:1px}
 #landing-hero .h-ghost-one{width:146px;height:298px;top:155px;left:-7px;transform:rotate(-11deg)}
 #landing-hero .h-ghost-two{width:140px;height:280px;top:303px;left:7px;transform:rotate(-7deg)}
 html[data-hero-variant=C] #landing-hero .h-word{font-size:67px;left:-9px;top:100px}
}
@media(prefers-reduced-motion:reduce){#landing-hero *,#landing-hero *::before,#landing-hero *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* C stays intact; only the native handset and removal of the lower controls change. */
html[data-hero-variant=C] #landing-hero .h-phone-float{--h-native-scale:1.104;width:276px;height:579.6px}
html[data-hero-variant=C] #landing-hero .h-phone{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;border-radius:calc(41px * var(--h-native-scale));corner-shape:round;overflow:visible}
#landing-hero .h-native-hardware{transform:scale(var(--h-native-scale));transform-origin:top left;display:block;corner-shape:round}
#landing-hero .h-native-hardware>.h-screen{position:relative;display:block;min-width:0;min-height:0;box-sizing:border-box;isolation:isolate;corner-shape:round}
#landing-hero .h-native-hardware .h-screen-img{object-fit:contain;border-radius:0}
#landing-hero .h-side-journey button{border-radius:8px}
#landing-hero .h-side-journey button:focus-visible{outline:2px solid var(--ui-accent-ink)!important;outline-offset:6px}
@media(max-width:1100px) and (min-width:761px){html[data-hero-variant=C] #landing-hero .h-phone-float{--h-native-scale:1.104}}
@media(max-width:760px){
 html[data-hero-variant=C] #landing-hero .h-phone-float{--h-native-scale:1;width:250px;height:525px}
 html[data-hero-variant=C] #landing-hero .h-phone{border-radius:41px;padding:0}
 html[data-hero-variant=C] #landing-hero .h-stage{height:650px!important}
}

/* Exact native iPhone component from accepted interface-polish.css; desktop hardware is reused at mobile preview sizes. */

  #landing-hero .h-native-hardware{
    --iphone-shell:linear-gradient(112deg,rgba(var(--ui-panel-top-tone-87),1) 0%,rgba(var(--ui-muted-tone-150),1) 4%,#b9afa2 10%,rgba(var(--ui-muted-tone-151),1) 46%,#c5bbae 83%,rgba(var(--ui-muted-tone-152),1) 96%,rgba(var(--ui-panel-top-tone-88),1));
    --iphone-shadow:0 24px 55px rgba(0,0,0,.28),0 5px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(var(--ui-text-tone-02),0.62),inset 0 -1px 0 rgba(0,0,0,.28);
    position:relative!important;width:250px!important;height:525px!important;min-width:250px!important;box-sizing:border-box!important;
    padding:7px!important;border:0!important;border-radius:41px!important;background:var(--iphone-shell)!important;box-shadow:var(--iphone-shadow)!important;overflow:visible!important;
  }
  #landing-hero .h-native-hardware>.h-screen{
    width:100%!important;height:100%!important;border:0!important;border-radius:34px!important;overflow:hidden!important;background:var(--surface)!important;box-shadow:inset 0 0 0 1px rgba(var(--ui-text-tone-02),0.035),inset 0 8px 18px rgba(0,0,0,.18)!important;
  }
  #landing-hero .h-native-hardware>.product-phone-speaker{
    display:block!important;position:absolute!important;z-index:12!important;top:11px!important;left:50%!important;width:76px!important;height:22px!important;transform:translateX(-50%)!important;border:0!important;border-radius:13px!important;background:rgba(var(--ui-bg-tone-21),1)!important;box-shadow:0 1px 2px rgba(0,0,0,.72)!important;
  }
  #landing-hero .h-native-hardware>.product-phone-speaker::after{content:none!important}
  #landing-hero .h-native-hardware>.product-phone-home{
    content:""!important;display:block!important;position:absolute!important;z-index:14!important;bottom:7px!important;left:50%!important;width:86px!important;height:4px!important;transform:translateX(-50%)!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(var(--ui-panel-top-tone-02),0.7),rgba(var(--ui-text-tone-02),0.35))!important;opacity:.9!important;pointer-events:none!important;
  }
  #landing-hero .h-native-hardware>.product-phone-key{display:block!important;position:absolute!important;z-index:3!important;width:3px!important;border-radius:3px!important;background:linear-gradient(90deg,rgba(var(--ui-muted-tone-153),1),#c9c0b5)!important;pointer-events:none!important}
  #landing-hero .h-native-hardware>.product-phone-key-action{left:-3px!important;top:74px!important;height:20px!important}
  #landing-hero .h-native-hardware>.product-phone-key-volume{left:-3px!important;top:106px!important;height:64px!important}
  #landing-hero .h-native-hardware>.product-phone-key-power{right:-3px!important;top:118px!important;height:74px!important}
  #landing-hero .h-native-hardware{padding:7px!important}

/* Preview-only 3D extrusion. The approved C layout and native 41/34px radii stay. */
#landing-hero .h-phone-float{perspective:1150px;perspective-origin:50% 45%}
html[data-hero-variant=C] #landing-hero .h-phone{transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-15deg + var(--ry))) rotateZ(var(--rz));transform-style:preserve-3d}
#landing-hero .h-device-3d{position:absolute;top:0;left:0;width:250px;height:525px;transform:scale(var(--h-native-scale));transform-origin:top left;transform-style:preserve-3d;--h-rim:#b2aaa0;--h-edge-dark:#706a63;--h-edge-light:#e2d9cc;--h-rear:#a79f94;--h-glint:rgba(255,249,237,.72)}
#landing-hero .h-depth-layer{position:absolute;inset:0;border-radius:41px;background:linear-gradient(108deg,var(--h-edge-light) 0%,var(--h-edge-dark) 10%,var(--h-rim) 22%,var(--h-edge-dark) 66%,var(--h-edge-light) 96%,var(--h-rim));transform:translateZ(var(--z));backface-visibility:hidden;pointer-events:none;box-shadow:inset 0 0 0 .6px #ffffff18}
#landing-hero .h-device-back{position:absolute;inset:0;border-radius:41px;transform:translateZ(-18px) rotateY(180deg);background:linear-gradient(130deg,var(--h-rear),var(--h-edge-dark));backface-visibility:hidden;pointer-events:none;box-shadow:inset 0 0 0 1px var(--h-edge-light)}
#landing-hero .h-device-back::after{content:'';position:absolute;inset:8px;border-radius:34px;background:linear-gradient(130deg,#ffffff0a,#00000018);box-shadow:inset 0 0 0 1px #ffffff12}
#landing-hero .h-native-hardware{position:absolute!important;inset:0;transform:translateZ(8px);transform-origin:center;backface-visibility:hidden;--iphone-shell:linear-gradient(112deg,#ded8ce 0%,#a09a91 4%,#b9afa2 10%,#8f8981 46%,#c5bbae 83%,#a8a198 96%,#dbd5cb 100%);--iphone-shadow:0 28px 64px #0004,0 8px 20px #0003,inset 0 0 0 .8px #f5ede355,inset 0 -1px 1px #0006}
#landing-hero .h-native-hardware::after{content:'';position:absolute;inset:0;border-radius:41px;pointer-events:none;box-shadow:inset 1px 0 1px var(--h-glint),inset -1px 0 1px #0008,inset 0 1px 1px #fff5;z-index:20}
#landing-hero .h-native-hardware>.product-phone-key{transform:translateZ(-5px);box-shadow:0 0 0 .5px #0007,inset 1px 0 #ffffff45}
#landing-hero .h-native-hardware>.product-phone-key-action::after{content:'';position:absolute;inset:5px 1px;border-radius:1px;background:#0007}
#landing-hero .h-native-hardware>.product-phone-key-power::before{content:'';position:absolute;inset:5px 1px;border-radius:1px;background:#ffffff22}
#landing-hero .h-phone-float::after{content:'';position:absolute;width:84%;height:23px;left:7%;bottom:-25px;background:#0005;filter:blur(16px);border-radius:50%;transform:rotate(-3deg);pointer-events:none;z-index:-1}
/* Dark finish for the two dark themes; light palettes retain the natural titanium. */
html[data-theme=dark] #landing-hero .h-device-3d,
html[data-theme=graphite] #landing-hero .h-device-3d,
html[data-theme=blue] #landing-hero .h-device-3d{--h-rim:#34383d;--h-edge-dark:#101215;--h-edge-light:#6d7379;--h-rear:#202327;--h-glint:rgba(197,207,221,.46)}
html[data-theme=dark] #landing-hero .h-native-hardware,
html[data-theme=graphite] #landing-hero .h-native-hardware,
html[data-theme=blue] #landing-hero .h-native-hardware{--iphone-shell:linear-gradient(112deg,#676e76 0%,#25292e 3%,#14171b 10%,#30353b 42%,#111316 70%,#3d444c 94%,#7a828b 100%);--iphone-shadow:0 32px 65px #0008,0 8px 20px #0007,inset 0 0 0 .7px #aeb8c640,inset 0 -1px 1px #000}
@media(max-width:760px){html[data-hero-variant=C] #landing-hero .h-phone{transform:rotateX(calc(3deg + var(--rx))) rotateY(calc(-12deg + var(--ry))) rotateZ(var(--rz))}}
@media(prefers-reduced-motion:reduce){html[data-hero-variant=C] #landing-hero .h-phone{transition:none}}

/* Side controls sit in the chassis' Y/Z side plane, not on the front glass. */
#landing-hero .h-side-key{--key-length:34px;--key-depth:13px;--key-yaw:-90deg;--key-x:-.9px;--key-rise:1.15px;position:absolute;left:var(--key-x);top:var(--key-top);width:var(--key-depth);height:var(--key-length);margin-left:calc(var(--key-depth) / -2);transform:translateZ(-5px) rotateY(var(--key-yaw));transform-style:preserve-3d;pointer-events:none;backface-visibility:hidden}
#landing-hero .h-side-key.is-right{--key-x:250.9px;--key-yaw:90deg}
#landing-hero .h-key-seat{position:absolute;inset:-1px;border-radius:5px;background:linear-gradient(90deg,#000b,var(--h-edge-dark) 60%,#000b);box-shadow:0 0 0 .45px #000b,inset 0 0 1px #000;transform:translateZ(.05px);backface-visibility:hidden}
#landing-hero .h-key-extrusion{position:absolute;inset:0;border-radius:4px;background:var(--h-edge-dark);transform:translateZ(var(--key-z));backface-visibility:hidden}
#landing-hero .h-key-cap{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,var(--h-edge-dark),var(--h-rim) 28%,var(--h-rim) 68%,var(--h-edge-light));box-shadow:inset .55px 0 .4px #ffffff30,inset -.6px 0 .5px #0007,inset 0 .6px .5px #ffffff42,inset 0 -.6px .5px #0009;transform:translateZ(var(--key-rise));backface-visibility:hidden}
#landing-hero .h-key-action{--key-top:106px;--key-length:24px}
#landing-hero .h-key-volume-up{--key-top:153px;--key-length:34px}
#landing-hero .h-key-volume-down{--key-top:202px;--key-length:34px}
#landing-hero .h-key-power{--key-top:165px;--key-length:64px}
#landing-hero .h-key-camera{--key-top:316px;--key-length:56px;--key-depth:14px;--key-rise:.3px}
#landing-hero .h-key-camera .h-key-cap{background:linear-gradient(90deg,#111215,var(--h-edge-dark) 38%,#25282c 80%,#0e0f11);box-shadow:inset 0 0 0 .55px #ffffff32,inset 0 1px 1px #0008;border-radius:4px}
#landing-hero .h-key-camera .h-key-extrusion{display:none}
/* The whole handset is one pointer target. Never start native image/link drag. */
#landing-hero .h-phone,#landing-hero .h-phone *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
#landing-hero .h-phone *{pointer-events:none}
#landing-hero .h-visual img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
#landing-hero .h-ghost{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}

#landing-hero .h-actions a{text-decoration:none;font-family:inherit}

/* Local comparison: one handset and a clearer route. */
html[data-hero-variant=C] #landing-hero .h-stack{display:none}
@media(min-width:1101px){
 html[data-hero-variant=C] #landing-hero .h-side-journey{left:6%;top:172px;gap:31px}
 #landing-hero .h-side-journey button{font-size:13px;gap:11px;line-height:1.35}
 #landing-hero .h-side-journey i{width:34px;height:34px;font-size:10px}
 #landing-hero .h-side-journey small{font-size:9px;margin-top:4px}
 #landing-hero .h-route-line{left:16.5px;top:17px;bottom:17px}
}
@media(min-width:761px) and (max-width:1100px){
 html[data-hero-variant=C] #landing-hero .h-side-journey{left:-17px;gap:29px}
 #landing-hero .h-side-journey button{font-size:11.5px;gap:10px}
 #landing-hero .h-side-journey i{width:31px;height:31px;font-size:9px}
 #landing-hero .h-side-journey small{font-size:8px}
 #landing-hero .h-route-line{left:15px;top:15px;bottom:15px}
}
@media(max-width:760px){
 html[data-hero-variant=C] #landing-hero .h-phone-float{left:50%}
 html[data-hero-variant=C] #landing-hero .h-live-badge{left:50%}
 #landing-hero .h-side-journey button{font-size:9px;line-height:1.35;gap:7px}
 #landing-hero .h-side-journey i{width:29px;height:29px;font-size:9px}
 #landing-hero .h-route-line{top:14px}
}

/* Physical camera cutout stays black in every palette. */
#landing-hero .h-native-hardware>.product-phone-speaker{background:#050506!important}