:root{--bg:#EEEEF1;--ink:#0E0F12;--ink2:#5E606A;--ink3:#74757E;--card:#FFFFFF;--line:rgba(14,15,18,0.08);--ember:linear-gradient(170deg,#F7D6B4 0%,#EF9C66 34%,#DD5FB8 68%,#E58BE2 100%);--mono:'Geist Mono',ui-monospace,Menlo,monospace;--r:28px;--shadow:0 40px 70px -46px rgba(24,26,40,.45),0 2px 8px -4px rgba(24,26,40,.08);--lift:0 54px 80px -40px rgba(24,26,40,.5),0 2px 8px -4px rgba(24,26,40,.08)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.popover,.pair,.conn{height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.light{display:block;font-weight:300;color:var(--ink3)}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:#3F4048}
/* ---- header ---- */
.top{position:sticky;top:0;z-index:40;background:rgba(238,238,241,.74);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid rgba(14,15,18,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-0.02em;text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.top nav{display:flex;align-items:center;gap:2px}
.top nav a{padding:7px 11px;border-radius:999px;font-size:14.5px;color:var(--ink2);text-decoration:none;transition:background .2s,color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink);background:rgba(14,15,18,.05)}
.top nav .cta{margin:0 0 0 10px;padding:0 15px;height:34px;font-size:14px;background:var(--ink);color:#fff}
.top nav .cta:hover{background:#000}
/* ---- type ---- */
h1{font-size:clamp(44px,5.3vw,70px);font-weight:600;letter-spacing:-0.05em;line-height:0.98;margin:24px 0 0;text-wrap:balance}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink2);margin:20px 0 0;max-width:520px;text-wrap:pretty}
.pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 12px;border-radius:17px;background:var(--card);font-family:var(--mono);font-size:13px;color:#3F4048;box-shadow:0 20px 40px -24px rgba(24,26,40,0.4)}
.pill i{width:8px;height:8px;border-radius:50%;background:#1A9A5C;box-shadow:0 0 0 3px rgba(26,154,92,0.18)}
.cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:15px;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}
.cta:hover{transform:translateY(-1px);background:#000}
.cta.ghost{background:var(--card);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.cta.ghost:hover{background:#fff;color:var(--ink)}
.cta.light{background:#fff;color:var(--ink)}
.cta.light:hover{background:#fff}
.cta.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cta.outline:hover{background:rgba(255,255,255,.08)}
.cta svg{width:18px;height:18px;flex:none}
.store{display:inline-flex;align-items:center;gap:11px;padding:9px 20px 9px 15px;border-radius:14px;background:var(--ink);color:#fff;text-decoration:none;line-height:1.1;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.store:hover{transform:translateY(-1px)}
.store svg{width:26px;height:26px;fill:#fff;flex:none}
.store small{display:block;font-size:11px;font-weight:400;opacity:.8}
.store b{display:block;font-size:19px;font-weight:500;letter-spacing:-0.02em;margin-top:1px}
.store.light{background:#fff;color:var(--ink)}
.store.light svg{fill:var(--ink)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:30px}
.actions .fine{font-family:var(--mono);font-size:12.5px;color:var(--ink3)}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:32px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:13px;color:#3F4048}
.trust li{display:inline-flex;align-items:center;gap:8px}
.trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember)}
/* ---- hero ---- */
.hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:24px 40px;padding:48px 0 16px}
.hero::before{content:"";position:absolute;z-index:-1;top:-320px;right:-300px;width:1000px;height:1000px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 118px,rgba(14,15,18,.06) 118px 119px);-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);pointer-events:none}
.stage{position:relative;height:660px}
.stage .glow{position:absolute;inset:-6% -14% -6%;border-radius:50%;background:radial-gradient(closest-side at 46% 52%,rgba(239,156,102,.95),rgba(221,95,184,.6) 34%,rgba(229,139,226,.26) 62%,transparent 100%);filter:blur(18px);pointer-events:none}
.stage .p1{position:absolute;top:0;right:5%;width:min(302px,52%)}
.stage .p2{position:absolute;left:-2%;bottom:0;width:min(430px,78%);z-index:2}
/* device frames: cqw = container width, so the bezel scales with the device */
.dev{container-type:inline-size}
.frame{position:relative;padding:3cqw;border-radius:17cqw;background:#0B0C0F;box-shadow:inset 0 0 0 .45cqw rgba(255,255,255,.17),inset 0 0 0 1.1cqw #15161A,0 70px 90px -50px rgba(24,26,40,.6),0 18px 36px -20px rgba(24,26,40,.4)}
.frame img{display:block;width:100%;height:auto;border-radius:14cqw;background:#000}
.frame::after{content:"";position:absolute;top:4.6cqw;left:50%;width:24cqw;height:6.2cqw;transform:translateX(-50%);border-radius:999px;background:#000}
.land .frame{padding:1.4cqw;border-radius:8cqw;box-shadow:inset 0 0 0 .22cqw rgba(255,255,255,.17),inset 0 0 0 .55cqw #15161A,0 50px 70px -40px rgba(24,26,40,.6),0 14px 30px -16px rgba(24,26,40,.4)}
.land .frame img{border-radius:6.5cqw}
.land .frame::after{top:50%;left:2.2cqw;width:2.9cqw;height:11cqw;transform:translateY(-50%)}
.pad .frame{padding:1.8cqw;border-radius:5cqw;box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.17),inset 0 0 0 .5cqw #15161A,0 70px 90px -50px rgba(0,0,0,.7)}
.pad .frame img{border-radius:3.3cqw}
.pad .frame::after{display:none}
/* ---- sections ---- */
.sec{padding:72px 0 0}
.sec>h2,.sec>.head h2{font-size:clamp(32px,4.6vw,48px);font-weight:600;letter-spacing:-0.045em;line-height:1.02;margin:0;text-wrap:balance}
.sec>.lede,.sec>.head .lede{font-size:17px;margin-top:14px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px}
.head .lede{margin:0;max-width:440px}
/* ---- bento ---- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(320px,auto);gap:16px;margin-top:28px}
.cell{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:26px 26px 0;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.cell:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.cell h3{margin:14px 0 0;font-size:25px;font-weight:600;letter-spacing:-0.03em;line-height:1.06;text-wrap:balance}
.cell p{margin:10px 0 0;font-size:15px;color:var(--ink2);text-wrap:pretty;max-width:46ch}
.cell .shot{display:block;position:relative;margin-top:auto;padding-top:22px}
.cell .shot img{display:block;width:100%;height:auto}
.cell.dark{background:#111217;color:#fff}
.cell.dark .tag{color:rgba(255,255,255,.62)}
.cell.dark .light{color:rgba(255,255,255,.5)}
.cell.dark p{color:rgba(255,255,255,.66)}
.cell.quiet{background:#E7E7EB}
.c-dock{grid-column:span 2;background:#15161D}
.c-dock p{max-width:52ch}
.c-dock .shot{margin:auto -26px 0;padding-top:16px}
.c-dock .shot img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}
.c-key .shot{margin-bottom:-8px}
.c-key .shot img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}
.c-near .shot{margin-bottom:-56px}
.c-hosts .shot{margin:auto -14px -6px}
.c-pad{grid-row:span 2;background:#121320}
.c-pad .shot{margin:0 -26px -40px -8px}
.c-pad .shot img{width:128%;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 14%);mask-image:linear-gradient(to right,transparent,#000 14%)}
.c-disp{background:#E7E5EB}
.c-disp .shot{margin-bottom:-10px}
.c-disp .shot img,.c-clip .shot img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%);mask-image:linear-gradient(to bottom,transparent,#000 18%)}
.c-clip{background:#EBE3EC}
.c-clip .shot{margin:auto 0 0}
/* ---- relay on the landing page ---- */
.relay-card{position:relative;display:grid;grid-template-columns:1.05fr 1fr;margin-top:28px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.relay-copy{padding:40px 36px 36px}
.relay-copy h2{font-size:clamp(30px,4vw,42px);font-weight:600;letter-spacing:-0.045em;line-height:1.04;margin:14px 0 0;text-wrap:balance}
.relay-copy p{font-size:16px;color:var(--ink2);margin:14px 0 0;max-width:460px;text-wrap:pretty}
.relay-copy .route-ill{display:block;width:100%;max-width:360px;height:auto;margin:22px 0 4px}
.relay-copy .actions{margin-top:18px}
.relay-mac{position:relative;min-height:470px;background:#121321 radial-gradient(70% 60% at 18% 105%,rgba(239,156,102,.7),rgba(221,95,184,.38) 45%,transparent 75%);overflow:hidden}
.relay-mac .popover{position:absolute;top:4px;right:1px;width:368px;max-width:none}
/* Mac menu bar strip */
.menubar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:26px;padding:0 12px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.08);font-size:12px;font-weight:500;color:#1D1D1F}
.menubar .apple{margin-right:auto;display:inline-flex;align-items:center;gap:14px;font-weight:600}
.menubar .apple svg{width:13px;height:16px;fill:#1D1D1F}
.menubar .apple span{font-weight:400}
.menubar svg{width:16px;height:16px;fill:#1D1D1F;flex:none}
.menubar .batt{width:23px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);position:relative;flex:none}
.menubar .batt::before{content:"";position:absolute;inset:2px 4px 2px 2px;border-radius:1px;background:#1D1D1F}
.menubar .batt::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;border-radius:0 1px 1px 0;background:rgba(0,0,0,.45)}
.menubar .active{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;border-radius:5px;background:rgba(0,0,0,.1);flex:none}
.menubar .antenna{width:15px;height:15px}
.menubar time{width:58px;text-align:right;white-space:nowrap}
/* route illustration: home → relay → you */
.route-ill .lbl{font-family:var(--mono);font-size:9px;fill:currentColor;opacity:.6}
.route-ill .ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.route{fill:none;stroke:currentColor;opacity:.3;stroke-width:1.5;stroke-dasharray:1.3 2.2;animation:ants 1.2s linear infinite}
@keyframes ants{to{stroke-dashoffset:-3.5}}
.comet{fill:none;stroke:url(#emberStroke);stroke-width:3;stroke-linecap:round;stroke-dasharray:14 100;stroke-dashoffset:114;animation:comet 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes comet{to{stroke-dashoffset:0}}
.pulse{fill:none;stroke:rgba(221,95,184,.55);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.9);opacity:0}}
/* ---- closing dark section ---- */
.final{position:relative;overflow:hidden;isolation:isolate;margin-top:80px;padding:56px 28px;border-radius:var(--r);background:#0E0F12;color:#fff;text-align:center}
.final::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:-70%;height:130%;filter:blur(12px);background:radial-gradient(50% 50% at 50% 50%,rgba(239,156,102,.55),rgba(221,95,184,.28) 45%,transparent 70%)}
.final h2{margin:0;font-size:clamp(36px,6vw,60px);font-weight:600;letter-spacing:-0.05em;line-height:1.0;text-wrap:balance}
.final h2 .light{color:rgba(255,255,255,.55)}
.final p{max-width:440px;margin:16px auto 0;color:rgba(255,255,255,.72);text-wrap:pretty}
.final .cta,.final .store{margin:22px 4px 0}
.final .sub{display:block;margin-top:22px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5)}
.final.big{padding:72px 24px 0}
.final.big::before{bottom:-30%;height:110%;left:-10%;right:-10%;background:radial-gradient(50% 50% at 50% 60%,rgba(239,156,102,.6),rgba(221,95,184,.32) 45%,transparent 72%)}
.final.big .pad{width:min(900px,100%);margin:52px auto -34%}
/* ---- footer ---- */
.foot{margin-top:40px;padding:36px 0 56px;font-size:14px;color:var(--ink3)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot nav a{color:var(--ink2);text-decoration:none}
.foot nav a:hover{color:var(--ink)}
.foot p{flex-basis:100%;margin:8px 0 0;font-size:13px}
/* ---- scroll reveal + load ---- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .bento .rv:nth-child(2),.js .grid .rv:nth-child(2),.js .steps .rv:nth-child(2){transition-delay:.08s}
.js .bento .rv:nth-child(3),.js .grid .rv:nth-child(3),.js .steps .rv:nth-child(3){transition-delay:.16s}
.js .bento .rv:nth-child(4),.js .grid .rv:nth-child(4){transition-delay:.24s}
.js .bento .rv:nth-child(5){transition-delay:.32s}
.js .bento .rv:nth-child(6){transition-delay:.4s}
.js .bento .rv:nth-child(7){transition-delay:.48s}
.hero-copy>*,.stage .p1,.stage .p2,.stage .popover{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js:not(.loaded) .hero-copy>*,.js:not(.loaded) .stage .p1,.js:not(.loaded) .stage .p2,.js:not(.loaded) .stage .popover{opacity:0;transform:translateY(18px)}
.hero-copy>:nth-child(2){transition-delay:.06s}.hero-copy>:nth-child(3){transition-delay:.12s}.hero-copy>:nth-child(4){transition-delay:.18s}.hero-copy>:nth-child(5){transition-delay:.24s}
.stage .p1,.stage .popover{transition-delay:.2s}.stage .p2{transition-delay:.36s}
/* ---- relay page: hero stage ---- */
.stage.mac{height:680px}
.stage.mac .menubar{top:0;border-radius:12px 12px 0 0}
.stage.mac .desk{position:absolute;inset:0 0 auto;height:600px;border-radius:14px;background:#121321 radial-gradient(70% 70% at 88% 12%,rgba(239,156,102,.55),rgba(221,95,184,.3) 42%,transparent 72%);overflow:hidden;box-shadow:0 40px 70px -40px rgba(24,26,40,.6)}
.stage.mac .popover{position:absolute;top:0;left:20px;width:330px;max-width:none}
.stage.mac .p2{left:auto;right:-2%;bottom:0;width:min(370px,64%)}
/* ---- relay page: feature grid ---- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.grid .cell{min-height:320px}
.c-pair .shot{margin-bottom:-36px}
.c-pair .shot img{width:88%;margin:0 auto;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.c-route{color:#fff}
.c-route .route-ill .lbl{opacity:.85}
.c-route .route-ill .route{opacity:.55}
.c-route .route-ill{display:block;width:100%;max-width:400px;height:auto;margin:auto auto 0;padding:16px 0 22px}
.c-off .shot img{width:80%;margin:0 auto}
.c-off .shot{padding-bottom:26px}
.c-priv .tags{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:26px 0}
.c-priv .tags span{padding:7px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-family:var(--mono);font-size:12.5px;color:#3F4048}
/* ---- relay page: how it works ---- */
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{padding:0 0 26px;overflow:hidden}
.ill{position:relative;height:210px;overflow:hidden;background:#121321 radial-gradient(70% 60% at 80% 110%,rgba(239,156,102,.5),rgba(221,95,184,.28) 45%,transparent 75%)}
.step .tag{display:block;margin:22px 24px 0}
.step h3{margin:6px 24px 0;font-size:21px;font-weight:600;letter-spacing:-0.03em;line-height:1.15}
.step p{margin:8px 24px 0;font-size:15px;color:var(--ink2);text-wrap:pretty}
.step p a{color:var(--ink)}
.ill .menubar{height:22px;font-size:10px;gap:9px;padding:0 10px}
.ill .menubar svg{width:13px;height:13px}
.ill .menubar .active{width:20px;height:17px}
.ill .menubar .batt{width:18px;height:9px}
.ill .menubar time{width:auto}
.ill .pair{position:absolute;top:26px;left:50%;width:210px;transform:translateX(-50%);border-radius:10px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6),0 0 0 .5px rgba(0,0,0,.2)}
.cam{position:absolute;top:18px;bottom:-24px;left:50%;width:160px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;padding-top:26px;border-radius:22px 22px 0 0;background:#0B0C0F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.cam::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:12px;transform:translateX(-50%);border-radius:999px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.cam .view{position:absolute;inset:26px 6px 0;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#2A2C3A,#15161C);overflow:hidden}
.qrbox{position:relative;z-index:1;margin-top:34px;padding:6px;background:#fff;border-radius:4px}
.qrbox img{display:block;width:62px;height:62px}
.qrbox .c{position:absolute;width:14px;height:14px;border:2.5px solid #FFD60A;border-radius:3px}
.qrbox .tl{top:-9px;left:-9px;border-right:0;border-bottom:0}
.qrbox .tr{top:-9px;right:-9px;border-left:0;border-bottom:0}
.qrbox .bl{bottom:-9px;left:-9px;border-right:0;border-top:0}
.qrbox .br{bottom:-9px;right:-9px;border-left:0;border-top:0}
.cam .open{position:relative;z-index:1;margin-top:18px;padding:5px 12px;border-radius:999px;background:#FFD60A;color:#1D1D1F;font-size:10.5px;font-weight:600;white-space:nowrap}
.ill .conn{position:absolute;top:34px;left:50%;width:82%;max-width:300px;transform:translateX(-50%);border-radius:14px;box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
/* ---- pricing ---- */
.price{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;margin-top:28px;padding:36px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.amount{display:flex;align-items:baseline;gap:4px;font-size:80px;font-weight:600;letter-spacing:-0.06em;line-height:1}
.amount .cur{font-size:36px;font-weight:300;color:var(--ink3);letter-spacing:-0.02em}
.amount .per{margin-left:6px;font-size:18px;font-weight:400;color:var(--ink2);letter-spacing:-0.02em}
.price p{margin:12px 0 0;color:var(--ink2);text-wrap:pretty}
.price .fine{margin-top:18px;font-size:13px;color:var(--ink3)}
.price .fine a{color:var(--ink2)}
.price .ctas{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.includes{list-style:none;margin:0;padding:0 0 0 32px;border-left:1px solid var(--line);font-size:15px;color:#2B2C33}
.includes li{display:flex;gap:10px;padding:7px 0}
.includes li::before{content:"✓";flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--ember);color:#fff;font-size:11px;font-weight:600}
.includes li a{color:var(--ink)}
/* ---- faq ---- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:20px}
.faq>div{padding:22px 0;border-top:1px solid rgba(14,15,18,.1)}
.faq h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-0.02em;line-height:1.3}
.faq p{margin:8px 0 0;font-size:15px;color:var(--ink2);text-wrap:pretty}
.faq a{color:var(--ink)}
.note{border-left:3px solid transparent;border-image:var(--ember) 1;padding:4px 0 4px 16px;color:var(--ink2)}
/* ---- document pages ---- */
.doc{max-width:760px;margin:0 auto;padding:24px 0 40px}
.doc h1{font-size:clamp(34px,6vw,52px);margin:16px 0 8px}
.doc .meta{color:var(--ink3);font-size:15px;margin:0 0 32px}
.doc h2{font-size:22px;letter-spacing:-0.02em;margin:40px 0 10px}
.doc h3{font-size:17px;margin:24px 0 6px}
.doc p,.doc li{font-size:17px;color:#2B2C33}
.doc li{margin:6px 0}
.doc code,.doc kbd{font-family:var(--mono);font-size:0.92em;background:#E4E4E8;border-radius:6px;padding:1px 6px}
.doc table{border-collapse:collapse;width:100%;font-size:16px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.doc th{color:var(--ink3);font-weight:500;font-size:14px}
.doc video{display:block;max-width:100%;max-height:80vh;margin:16px 0 0;border-radius:24px}
.doc .cta{margin-top:8px}
/* support: System Settings › General › Sharing */
.sys{position:relative;display:flex;height:25em;margin:20px 0 28px;overflow:hidden;border-radius:1em;background:#F5F5F7;box-shadow:0 30px 60px -30px rgba(24,26,40,.45),0 0 0 .5px rgba(0,0,0,.14);font-size:clamp(9px,2.7vw,13px);line-height:1.3;color:#1D1D1F}
.sys-side{position:relative;flex:none;width:12.5em;padding:2.8em .8em .8em;background:#E9E9EC;border-right:1px solid rgba(0,0,0,.08)}
.sys-side::before{content:"";position:absolute;top:.9em;left:1em;width:.9em;height:.9em;border-radius:50%;background:#FF5F57;box-shadow:1.4em 0 0 #FEBC2E,2.8em 0 0 #28C840}
.sys-search{display:flex;align-items:center;height:1.9em;margin-bottom:.7em;padding:0 .6em;border-radius:.5em;background:rgba(0,0,0,.06);color:#8E8E93;font-size:.95em}
.sys-item{display:flex;align-items:center;gap:.6em;height:2em;padding:0 .5em;border-radius:.5em}
.sys-item.on{background:#0A7AFF;color:#fff}
.sys-item i{width:1.35em;height:1.35em;border-radius:.4em;background:var(--c,#8E8E93)}
.sys-main{flex:1;min-width:0;padding:.9em 1.4em;overflow:hidden}
.sys-crumb{display:flex;align-items:center;gap:.6em;margin-bottom:.6em;color:#8E8E93}
.sys-crumb b{color:#1D1D1F;font-weight:600;font-size:1.15em}
.sys-group{margin:.9em 0 .35em;font-size:.85em;font-weight:500;color:#6E6E73}
.sys-list{background:#fff;border-radius:.7em;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.sys-row{display:flex;align-items:center;gap:.7em;height:2.5em;padding:0 .9em;border-bottom:1px solid rgba(0,0,0,.06)}
.sys-row:last-child{border-bottom:0}
.sys-row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-row .info{display:flex;align-items:center;justify-content:center;flex:none;width:1.3em;height:1.3em;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);font-family:Georgia,serif;font-style:italic;font-size:.9em;color:#6E6E73}
.sw{position:relative;display:inline-block;flex:none;width:2.2em;height:1.3em;border-radius:1em;background:rgba(120,120,128,.32)}
.sw::after{content:"";position:absolute;top:.1em;left:.1em;width:1.1em;height:1.1em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on{background:#0A7AFF}
.sw.on::after{transform:translateX(.9em)}
.sys .flip{animation:swon .25s ease 2.55s forwards}
.sys .flip::after{animation:swknob .25s ease 2.55s forwards}
@keyframes swon{to{background:#0A7AFF}}
@keyframes swknob{to{transform:translateX(.9em)}}
.sys .flip::before{content:"";position:absolute;inset:-.4em;border-radius:2em;box-shadow:0 0 0 2px rgba(10,122,255,.5);opacity:0;animation:click .6s ease-out 2.45s}
@keyframes click{0%{opacity:0;transform:scale(.8)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
.ptr{position:absolute;left:50%;top:50%;z-index:2;width:1.3em;height:1.6em;translate:-12em 8em;animation:ptr 1.7s cubic-bezier(.3,.7,.25,1) .9s forwards}
@keyframes ptr{to{translate:-.1em -.1em}}
.sys-cap{margin:0 0 8px;font-family:var(--mono);font-size:12px;color:var(--ink3)}
/* ---- responsive ---- */
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-pad{grid-row:span 2}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:36px}
  .stage{height:auto;padding-top:20px}
  .stage .glow{inset:6% -10% 4%;background:radial-gradient(closest-side at 32% 48%,rgba(239,156,102,.95),rgba(221,95,184,.6) 34%,rgba(229,139,226,.26) 62%,transparent 100%)}
  .stage .p1{position:relative;right:auto;width:min(270px,68%);margin:0 auto}
  .stage .p2{position:relative;left:auto;width:min(420px,96%);margin:-120px auto 0}
  .stage.mac{height:auto}
  .stage.mac .desk{position:relative;height:auto;min-height:450px}
  .stage.mac .popover{left:50%;margin-left:-184px}
  .stage.mac .p2{right:auto;width:min(420px,100%);margin:-120px auto 0}
  .relay-card{grid-template-columns:1fr}
  .relay-mac{min-height:420px}
  .relay-mac .popover{right:auto;left:50%;margin-left:-184px}
  .steps{grid-template-columns:1fr}
  .ill{height:220px}
  .final.big .pad{margin-bottom:-24%}
}
@media (max-width:640px){
  .top nav .cta{display:none}
  .top nav a{padding:7px 8px;font-size:14px}
  .hero{padding-top:28px}
  h1{margin-top:20px}
  .bento,.grid{grid-template-columns:1fr}
  .bento{grid-auto-rows:auto}
  .c-dock,.c-pad{grid-column:auto;grid-row:auto}
  .cell{min-height:300px}
  .c-pad .shot img{width:112%}
  .c-pad .shot{max-height:300px}
  .c-near .shot{margin-bottom:-40px}
  .relay-copy{padding:30px 24px 28px}
  .relay-mac{min-height:380px}
  .relay-mac .popover,.stage.mac .popover{width:330px;margin-left:-165px}
  .price{grid-template-columns:1fr;padding:26px 22px}
  .includes{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
  .amount{font-size:66px}
  .faq{grid-template-columns:1fr}
  .final{padding:48px 20px}
  .final.big{padding:56px 18px 0}
  .final.big .pad{margin:36px auto -18%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .hero-copy>*,.stage .p1,.stage .p2,.stage .popover{transition:none;opacity:1;transform:none}
  .cell,.cta,.store{transition:none}
  .cell:hover{transform:none}
  .sys .flip,.sys .flip::after{animation:none}
  .sys .flip{background:#0A7AFF}.sys .flip::after{transform:translateX(.9em)}
  .ptr,.sys .flip::before{display:none}
  .route,.comet,.pulse{animation:none}
  .comet{stroke-dashoffset:69}
}