:root{--navy:#002855;--navy80:#335377;--navy40:#99aac0;--navy10:#e6eaf0;--grey:#646464;--bg2:#f5f6f7;--white:#fff;--radius:18px;--shadow:0 12px 40px rgba(0,40,85,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,sans-serif;color:#1d2433;background:#fff;line-height:1.55}
img,video{max-width:100%;display:block}
a{color:var(--navy)}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}.narrow{max-width:760px}.center{text-align:center}
.muted{color:var(--grey)}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:3px solid var(--navy)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--navy)}
.nav-credits{font-size:.85rem;background:var(--navy10);color:var(--navy);padding:4px 12px;border-radius:999px;font-weight:600}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff!important;border:2px solid var(--navy);border-radius:999px;padding:11px 22px;font:600 .98rem Poppins,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--navy80);border-color:var(--navy80);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sm{padding:7px 16px;font-size:.88rem}.btn-lg{padding:15px 30px;font-size:1.05rem}.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--navy)!important}.btn-ghost:hover{background:var(--navy10);border-color:var(--navy)}
.btn-white{background:#fff;color:var(--navy)!important;border-color:#fff}.btn-white:hover{background:var(--navy10);border-color:var(--navy10)}
.btn-google{background:#fff;color:#1d2433!important;border-color:#c1c1c1}.btn-google:hover{background:var(--bg2);border-color:#a2a2a2}
.link{background:none;border:0;color:var(--navy);font:500 .9rem Poppins;cursor:pointer;text-decoration:underline}
/* hero */
.hero{background:radial-gradient(1200px 500px at 85% 10%,#e6eaf0 0,rgba(230,234,240,0) 60%),linear-gradient(180deg,#fff,#f5f6f7);padding:64px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy80);background:var(--navy10);padding:6px 14px;border-radius:999px}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.08;color:var(--navy);margin:18px 0 16px;font-weight:800;letter-spacing:-.02em}
.lead{font-size:1.12rem;color:var(--grey);max-width:560px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 22px}
.hero-points{display:flex;gap:22px;flex-wrap:wrap;list-style:none;padding:0;margin:0;color:var(--grey);font-size:.92rem}
.hero-points li::before{content:"✓";color:var(--navy);font-weight:700;margin-right:6px}
.hero-media{position:relative;justify-self:center}
.hero-badge{position:absolute;left:-36px;bottom:60px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:12px 18px;display:flex;flex-direction:column}
.hero-badge strong{font-size:1.5rem;color:var(--navy);line-height:1.1}.hero-badge span{font-size:.82rem;color:var(--grey)}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:40px}.hero-badge{left:-10px}}
/* sections */
.section{padding:80px 0}.section-tint{background:var(--bg2)}
.section-title{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--navy);text-align:center;margin:0 0 10px;font-weight:700}
.section-sub{text-align:center;color:var(--grey);margin:0 auto 40px;max-width:620px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.step{background:#fff;border:1px solid var(--navy10);border-radius:var(--radius);padding:28px;box-shadow:0 4px 18px rgba(0,40,85,.05)}
.step-num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700}
.step h3{color:var(--navy);margin:14px 0 6px}.step p{margin:0;color:var(--grey)}
.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.example{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
.example video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#eee}
.example figcaption{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.95);border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline}
.example figcaption strong{color:var(--navy);font-size:1.3rem}.example figcaption span{color:var(--grey);font-size:.85rem}
.examples-credit{text-align:center;color:var(--grey);font-size:.82rem;margin-top:22px}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.who-card{border:1px solid var(--navy10);border-left:4px solid var(--navy);border-radius:14px;padding:22px}
.who-card h3{margin:0 0 6px;color:var(--navy);font-size:1.05rem}.who-card p{margin:0;color:var(--grey);font-size:.95rem}
@media(max-width:880px){.steps,.examples,.who{grid-template-columns:1fr}.examples{max-width:360px;margin:0 auto}}
/* pricing */
.pricing{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:28px;justify-content:center}
.price-card{background:#fff;border-radius:22px;padding:32px;border:2px solid var(--navy10);box-shadow:0 6px 24px rgba(0,40,85,.06);display:flex;flex-direction:column}
.price-card.featured{border-color:var(--navy);box-shadow:var(--shadow)}
.price-tag{align-self:flex-start;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:var(--navy);color:#fff;padding:4px 12px;border-radius:999px}
.tag-grey{background:var(--grey)}
.price-card h3{margin:16px 0 4px;color:var(--navy);font-size:1.4rem}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}.amt{font-size:2.8rem;font-weight:800;color:var(--navy)}.per{color:var(--grey)}
.price-card ul{padding:0;list-style:none;margin:0 0 24px;flex:1}.price-card li{padding:6px 0;color:#333}.price-card li::before{content:"✓";color:var(--navy);font-weight:700;margin-right:8px}
@media(max-width:760px){.pricing{grid-template-columns:1fr}}
/* panels */
.panel{background:#fff;border:1px solid var(--navy10);border-radius:22px;padding:32px;box-shadow:var(--shadow);margin-top:30px}
.panel h3{color:var(--navy);margin:22px 0 12px}.panel h3:first-child{margin-top:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.9rem}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 200px}.row.center{justify-content:center;margin-top:18px}.row.center>*{flex:0 0 auto}
input[type=email],input[type=text],select{font:inherit;padding:12px 14px;border:1.5px solid #c1c1c1;border-radius:12px;min-width:0}
input:focus,select:focus{outline:3px solid var(--navy40);border-color:var(--navy)}
.or{display:flex;align-items:center;gap:12px;color:var(--grey);margin:16px 0;font-size:.85rem}.or::before,.or::after{content:"";flex:1;height:1px;background:#e1e1e1}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.preset{cursor:pointer;border:2px solid var(--navy10);border-radius:16px;padding:8px;display:flex;flex-direction:column;transition:border-color .15s}
.preset input{position:absolute;opacity:0}
.preset-img{border-radius:10px;overflow:hidden;aspect-ratio:4/5;background:#eee}.preset-img img{width:100%;height:100%;object-fit:cover}
.preset-name{font-weight:600;color:var(--navy);margin:8px 4px 0}.preset-desc{font-size:.78rem;color:var(--grey);margin:0 4px 4px}
.preset:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px var(--navy40)}
.preset:has(input:focus-visible){outline:3px solid var(--navy40)}
.drops{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.drop{position:relative;aspect-ratio:3/4;border:2px dashed var(--navy40);border-radius:16px;display:grid;place-items:center;cursor:pointer;overflow:hidden;background:var(--bg2);text-align:center;color:var(--grey)}
.drop.drag{border-color:var(--navy);background:var(--navy10)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f2f2f2}
.drop strong{color:var(--navy)}
.drop.has-img .drop-label{position:absolute;bottom:8px;left:8px;background:rgba(255,255,255,.92);padding:2px 10px;border-radius:8px;font-size:.8rem}.drop.has-img small,.drop.has-img br{display:none}
.hint{font-size:.85rem;color:var(--grey)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:22px 0;font-size:.92rem;background:var(--navy10);padding:14px;border-radius:12px}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--navy)}
.form-msg{min-height:1.4em;margin:12px 0 0;font-size:.92rem;color:var(--navy)}.form-msg.err{color:#b02a37}
.pay-options{display:grid;gap:12px;margin:18px 0 22px}
.pay-opt{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--navy10);border-radius:14px;padding:16px;cursor:pointer}
.pay-opt:has(input[name=plan]:checked){border-color:var(--navy)}
.pay-opt input[name=plan]{margin-top:6px;accent-color:var(--navy)}
.pay-opt select{display:block;margin:10px 0 6px}
.inline{display:flex;gap:8px;align-items:center;font-size:.88rem;color:var(--grey)}
.spinner{width:46px;height:46px;border:4px solid var(--navy10);border-top-color:var(--navy);border-radius:50%;margin:10px auto 18px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result{width:min(340px,100%);margin:0 auto;border-radius:16px;background:#000;aspect-ratio:9/16}
@media(max-width:600px){.presets{grid-template-columns:1fr 1fr 1fr;gap:8px}.preset-desc{display:none}.panel{padding:22px}}
/* strips */
.consent-strip{background:var(--navy10);padding:26px 0;text-align:center}.consent-strip p{margin:0;color:var(--navy)}
.final-cta{background:var(--navy);color:#fff;padding:80px 0}.final-cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 8px}.final-cta p{color:#c9d3e0;margin:0 0 28px}
.footer{padding:28px 0;border-top:1px solid #eee}.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.footer img{height:30px;width:auto}.footer p{margin:0;color:var(--grey);font-size:.85rem}
[hidden]{display:none!important}

.opt{font-weight:400;font-size:.85rem;color:var(--grey)}
.toggle{display:flex;gap:10px;align-items:center;cursor:pointer}.toggle input{width:18px;height:18px;accent-color:var(--navy)}
.wm-box{margin-top:14px;padding:16px;border:1.5px solid var(--navy10);border-radius:14px;background:#fbfcfd}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.seg label{border:1.5px solid var(--navy10);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.9rem}
.seg label:has(input:checked){border-color:var(--navy);background:var(--navy10);color:var(--navy);font-weight:600}.seg input{accent-color:var(--navy)}
.wm-row input[type=text]{width:100%}
.wm-logo-drop{position:relative;display:grid;place-items:center;height:110px;border:2px dashed var(--navy40);border-radius:12px;cursor:pointer;text-align:center;color:var(--grey);font-size:.9rem;background:repeating-conic-gradient(#f0f0f0 0 25%,#fff 0 50%) 0 0/16px 16px}
.wm-logo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.wm-logo-drop img{max-height:80px;max-width:80%;object-fit:contain}
.drop{aspect-ratio:auto;height:300px}
.examples{max-width:940px;margin:0 auto}
@media(max-width:600px){.drop{height:220px}}
.toggle:has(#labels-on){margin-top:16px}.labels-hint{margin:4px 0 0 28px}

/* 3-tier pricing (Oct 2026) */
.pricing-3{grid-template-columns:repeat(3,minmax(0,320px));gap:24px}.pricing-3 .price-card{padding:28px}
@media(max-width:1020px){.pricing-3{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.save-tag{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--navy);color:#fff;padding:2px 9px;border-radius:999px;vertical-align:middle}
.auto-row{margin:2px 4px 0}

/* How it works, visual steps (Oct 2026) */
.steps-visual .step{display:flex;flex-direction:column;padding:20px 22px 26px}
.step-visual{position:relative;height:300px;border-radius:16px;background:#f1f2ef;overflow:hidden;margin-bottom:18px;display:grid;place-items:center}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;height:100%;padding:12px}
.tile{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,40,85,.08)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.pill{position:absolute;top:8px;left:8px;font-size:.72rem;font-weight:600;color:#fff;background:rgba(40,40,40,.55);padding:3px 10px;border-radius:999px;backdrop-filter:blur(2px)}
.pair-blur .tile img{filter:blur(3px) saturate(.85);transform:scale(1.06)}
.pair-blur::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35)}
.morph-mock{position:absolute;inset:auto;z-index:1;background:rgba(255,255,255,.94);border-radius:16px;padding:18px 26px 16px;text-align:center;box-shadow:0 10px 30px rgba(0,40,85,.18);color:var(--navy)}
.morph-mock .spinner{width:34px;height:34px;border-width:3px;margin:0 auto 10px}
.morph-mock strong{font-size:.95rem}
@media(max-width:880px){.steps-visual{max-width:420px;margin-left:auto;margin-right:auto}.step-visual{height:320px}}

/* Realistic smartphone (shared by hero + How it works). Size with --w (outer width). */
/* Shared phone mockup: slim modern iPhone (body ~0.48 w:h, ~2.5% bezel, thin black frame, small notch, home bar) */
.device{--w:300px;--bz:calc(var(--w) * .026);--fr:calc(var(--w) * .011 + 1px);--r:calc(var(--w) * .135);
  position:relative;box-sizing:border-box;width:var(--w);aspect-ratio:.48;flex:none;display:flex;padding:var(--bz);
  border-radius:var(--r);background:#0a0a0b;border:var(--fr) solid #1c1c1f;
  box-shadow:0 0 0 1px #4a4c52,inset 0 0 0 1px #2e2f33,
    0 calc(var(--w) * .09) calc(var(--w) * .2) rgba(0,30,70,.22),0 calc(var(--w) * .02) calc(var(--w) * .045) rgba(0,0,0,.2)}
/* subtle side buttons: volume up/down (left), power (right) */
.device::before,.device::after{content:"";position:absolute;width:calc(var(--w) * .008 + 1px);background:#2a2b2f;border-radius:2px}
.device::before{left:calc(var(--fr) * -1 - var(--w) * .008 - 2px);top:20%;height:calc(var(--w) * .12);box-shadow:0 calc(var(--w) * .16) 0 #2a2b2f}
.device::after{right:calc(var(--fr) * -1 - var(--w) * .008 - 2px);top:27%;height:calc(var(--w) * .2)}
.device-screen{position:relative;flex:1;min-height:0;border-radius:calc(var(--r) - var(--bz) - var(--fr));overflow:hidden;background:rgb(237,237,232);isolation:isolate}
/* 9:16 clip inside a ~9:19.5 screen: contain on a matching backdrop so heads, feet and the stats card all stay visible */
.device-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.device-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(120deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 30%)}
.device-notch{position:absolute;z-index:3;top:0;left:50%;transform:translateX(-50%);width:calc(var(--w) * .34);height:calc(var(--w) * .052);
  background:#0a0a0b;border-radius:0 0 calc(var(--w) * .035) calc(var(--w) * .035)}
.device-notch::before{content:"";position:absolute;left:50%;top:38%;transform:translateX(-50%);width:28%;height:calc(var(--w) * .01 + 1px);border-radius:9px;background:#26272b}
.device-notch::after{content:"";position:absolute;top:30%;left:68%;width:calc(var(--w) * .022 + 1px);aspect-ratio:1;border-radius:50%;background:#1d2433}
.device-home{position:absolute;z-index:3;left:50%;bottom:calc(var(--w) * .024);transform:translateX(-50%);width:34%;height:calc(var(--w) * .011 + 1px);border-radius:9px;background:rgba(20,20,22,.55)}
.device-hero{--w:clamp(250px,24vw,340px)}
@media(max-width:880px){.device-hero{--w:min(300px,68vw)}}
.step-visual .device-how{--w:124px}
@media(max-width:880px){.step-visual .device-how{--w:138px}}

/* Style cards: example clips + per-style tint (Oct 2026) */
.preset-img{position:relative;display:block}
.preset-img video{display:block;width:100%;height:100%;object-fit:cover}
.preset-img::after{content:"";position:absolute;inset:0;pointer-events:none}
.tint-clinical video{filter:saturate(.88) brightness(1.03)}.tint-clinical::after{background:rgba(120,170,220,.10)}
.tint-fun video{filter:saturate(1.25) contrast(1.06)}.tint-fun::after{background:rgba(255,120,170,.10)}
.tint-highlight video{filter:contrast(1.05)}.tint-highlight::after{background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 45%,rgba(0,0,0,.42) 100%)}

/* Style cards: show the whole person (9:16 media, contain, tinted letterbox) */
.preset-img{aspect-ratio:9/16}
.preset-img video{object-fit:contain}
.tint-clinical{background:#e9eef2}.tint-fun{background:#f6e9ee}.tint-highlight{background:#d9d9d6}

/* Format selector (Oct 2026) */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.format{position:relative;cursor:pointer;border:2px solid var(--navy10);border-radius:16px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:border-color .15s}
.format input{position:absolute;opacity:0}
.format:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px var(--navy40)}
.format:has(input:focus-visible){outline:3px solid var(--navy40)}
.fmt-shape{display:block;border:2.5px solid var(--navy);border-radius:6px;background:var(--navy10);margin:4px 0 10px;height:46px}
.fmt-916{width:26px}.fmt-11{width:46px}.fmt-169{width:82px;height:46px}
.fmt-name{font-weight:600;color:var(--navy);font-size:.95rem}.fmt-desc{font-size:.76rem;color:var(--grey)}
@media(max-width:600px){.formats{gap:8px}.format{padding:12px 6px 10px}.fmt-169{width:62px;height:35px;margin-top:10px;margin-bottom:15px}.fmt-11{width:40px;height:40px;margin-top:7px;margin-bottom:13px}.fmt-916{height:46px}.fmt-desc{font-size:.7rem}}
/* Result at true aspect */
.result[data-aspect="1:1"]{width:min(460px,100%)}
.result[data-aspect="16:9"]{width:min(640px,100%)}
.result-format{text-align:center;margin:8px 0 0}
/* style cards on phones: bigger media, compact one-line names, equal heights */
@media(max-width:600px){
  .presets{grid-template-columns:repeat(3,minmax(0,1fr))}
  .preset{padding:4px;border-radius:12px;min-width:0}
  .preset-img{border-radius:8px}
  .preset-name{font-size:.78rem;line-height:1.2;margin:6px 2px 2px;text-align:center;flex:1;display:flex;align-items:center;justify-content:center}
  .fmt-desc{font-size:.72rem}
}
/* ---- multi-page (home / create / checkout) ---- */
a.nav-credits{text-decoration:none}a.nav-credits:hover{background:var(--navy40);color:#fff}
@media(max-width:760px){.nav-links a.nav-credits:not([hidden]){display:inline-block}.nav-links{gap:10px}}
.page-top{padding-top:44px;min-height:60vh}
.page-top h1.section-title{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.paid-banner,.note-banner{margin:22px auto 0;padding:14px 18px;border-radius:14px;font-size:.95rem;line-height:1.45}
.paid-banner{background:#e8f6ee;border:1px solid #9fd8b4;color:#0d5a2c}
.note-banner{background:#fff;border:1px solid var(--navy10);color:var(--navy)}
.promo-note{margin:-6px 0 16px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a{color:var(--navy);text-decoration:none;font-size:.88rem;font-weight:500}
.footer-logo{display:inline-flex}
.past-section{padding-top:40px}
.past-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:22px}
.past-item{background:#fff;border:1px solid var(--navy10);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.past-media{display:flex;align-items:center;justify-content:center;width:100%;max-height:300px;border:0;padding:0;border-radius:10px;overflow:hidden;background:rgb(237,237,232);cursor:pointer}
.past-media video{width:100%;height:100%;object-fit:contain;display:block}
.past-ph{font-size:2rem;color:var(--grey)}
.past-info{display:flex;flex-direction:column;gap:4px;font-size:.88rem;padding:0 4px 4px}
.past-info strong{color:var(--navy);font-weight:600}.past-info .btn{align-self:flex-start;margin-top:6px}
.past-status{font-size:.78rem;font-weight:600;color:var(--grey)}
.past-status.st-delivered{color:#0d7a3a}.past-status.st-failed{color:#b3261e}.past-status.st-awaiting_payment{color:#9a6700}
@media(max-width:600px){.past-list{grid-template-columns:1fr 1fr;gap:10px}.page-top{padding-top:28px}}
@media(max-width:600px){
  .nav-inner{gap:10px}.nav-logo img{height:34px;width:auto}
  .nav-links{gap:8px}.nav-links .btn-sm,.nav-links .nav-credits{white-space:nowrap}
  .nav-links .nav-credits{padding:4px 9px;font-size:.76rem}.nav-links .btn-sm{padding:8px 12px;font-size:.8rem}
}

/* How it works, step 3: share icons around the phone (stage scales; coordinates match the 312x300 SVG viewBox) */
.share-stage{position:relative;width:min(100%,312px);aspect-ratio:312/300;container-type:inline-size;display:grid;place-items:center}
.share-stage .device-how{--w:36cqw}
.share-arrows{position:absolute;inset:0;width:100%;height:100%;color:#8794a6;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:.85;pointer-events:none}
.share-ic{position:absolute;width:12.2cqw;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--navy,#002855);
  box-shadow:0 0 0 1px rgba(0,40,85,.08),0 4px 12px rgba(0,40,85,.10)}
.share-ic svg{width:52%;height:52%}