/* AgentryBot download page v2 (mockup). Tokens follow brand.md and the approved brand pack. */
@font-face{font-family:Poppins;src:url(fonts/poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* brand */
  --teal:#0F4C5C; --teal-deep:#0A3945; --teal-light:#4E8D9C; --orange:#F2A541; --paper:#FAF8F4;
  /* derived from the brand hues */
  --night:#062A33; --white:#FFFFFF;
  --ink:#0A3945; --ink-2:#304B53; --ink-3:#4A6369;
  --line:#E2E9E8; --line-2:#D3DEDD; --wash:#F3F7F6; --ice:#E3EFF0;
  --orange-hi:#F6B75F; --orange-lo:#E4952C; --orange-wash:#FDF0DB;
  --on-dark:#FFFFFF; --on-dark-2:rgba(255,255,255,.8); --on-dark-3:rgba(255,255,255,.7);
  --disabled-bg:#EEF1F0; --disabled-ink:#56696E;
  /* type roles */
  --f:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --t-display:clamp(44px,6.1vw,88px); --t-h2:clamp(32px,3.4vw,48px); --t-h3:22px;
  --t-lead:clamp(17px,1.5vw,21px); --t-body:17px; --t-small:15px; --t-meta:14px; --t-micro:12.5px;
  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;
  --wrap:1200px; --gutter:48px; --ov:260px;
  --r-ctl:999px; --r-panel:16px; --r-window:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-panel:0 1px 2px rgba(10,57,69,.06),0 16px 40px -24px rgba(10,57,69,.28);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scrollbar-color:var(--teal-light) var(--paper);scroll-behavior:smooth;scroll-padding-top:24px}
body{font-family:var(--f);font-size:var(--t-body);line-height:1.6;color:var(--ink);background:var(--paper);caret-color:var(--orange)}
::selection{background:var(--orange);color:var(--teal-deep)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.24em}
a:hover{text-decoration-thickness:2px}
b,strong{font-weight:600}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--white)}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:10;background:var(--white);color:var(--teal-deep);font-weight:600;font-size:15px;padding:10px 18px;border-radius:var(--r-ctl);text-decoration:none}
.skip:focus{top:44px}
h1,h2,h3{font-weight:600;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.025em;color:var(--teal)}
p{text-wrap:pretty}

/* ---------------- icons ---------------- */
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}
.i-sm{width:18px;height:18px;stroke-width:1.9}

/* ---------------- buttons ---------------- */
.btn{--h:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 24px;border:0;border-radius:var(--r-ctl);
  font:600 16px/1.2 var(--f);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background-color .18s var(--ease),color .18s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.btn .ic-swap{position:relative;display:grid;place-items:center;width:22px;height:22px;flex:none}
.btn .ic-swap > *{grid-area:1/1}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;opacity:0;transform:scale(.6)}
.btn .ok{opacity:0;transform:scale(.6)}
.btn .lbls{display:inline-grid;text-align:left}
.btn .lbls > *{grid-area:1/1}
.btn .lbl-s,.btn .lbl-d{visibility:hidden}
.btn.is-downloading,.btn[aria-busy="true"]{pointer-events:none}
.btn.is-downloading .ic-os,.btn.is-started .ic-os{opacity:0;transform:scale(.6)}
.btn.is-downloading .spin{opacity:1;transform:none;animation:spin .8s linear infinite}
.btn.is-started .ok{opacity:1;transform:none}
.btn .ic-os,.btn .spin,.btn .ok{transition:opacity .2s var(--ease),transform .3s var(--ease)}
.btn.is-downloading .lbl,.btn.is-started .lbl{visibility:hidden}
.btn.is-downloading .lbl-d,.btn.is-started .lbl-s{visibility:visible}
/* list buttons are full width: only the active label takes space, and the tag steps aside while downloading */
.btn-row .lbl-d,.btn-row .lbl-s{display:none}
.btn-row.is-downloading .lbl,.btn-row.is-started .lbl{display:none}
.btn-row.is-downloading .lbl-d,.btn-row.is-started .lbl-s{display:block}
.btn-row.is-downloading .tag,.btn-row.is-started .tag{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* primary CTA: orange, used once per viewport */
.btn-cta{--h:64px;padding:0 34px 0 30px;font-size:17px;gap:12px;background:var(--orange);color:var(--teal-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(2,22,28,.35),0 14px 32px -12px rgba(242,165,65,.55)}
.btn-cta .ic-os svg{width:22px;height:22px}
.btn-cta:hover,.btn-cta.is-hover{background:var(--orange-hi);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(2,22,28,.35),0 20px 40px -12px rgba(242,165,65,.7)}
.btn-cta:active,.btn-cta.is-active{background:var(--orange-lo);transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(10,57,69,.28),0 1px 1px rgba(2,22,28,.3)}
.btn-cta.is-started{background:var(--orange)}
/* teal: primary inside the download list */
.btn-teal{background:var(--teal);color:var(--white);box-shadow:0 1px 2px rgba(10,57,69,.3),0 10px 20px -12px rgba(10,57,69,.65)}
.btn-teal:hover,.btn-teal.is-hover{background:var(--teal-deep);transform:translateY(-1px);box-shadow:0 2px 4px rgba(10,57,69,.3),0 14px 26px -12px rgba(10,57,69,.7)}
.btn-teal:active,.btn-teal.is-active{background:#072C36;transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
/* outline: secondary */
.btn-line{background:var(--white);color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)}
.btn-line:hover,.btn-line.is-hover{background:#EAF2F3;box-shadow:inset 0 0 0 1.5px var(--teal-deep);color:var(--teal-deep)}
.btn-line:active,.btn-line.is-active{background:#D8E7E9;transform:translateY(1px)}
/* focus ring on every variant */
.btn:focus-visible,.btn.is-focus{outline:3px solid var(--teal);outline-offset:3px;border-radius:var(--r-ctl)}
.dark .btn:focus-visible,.dark .btn.is-focus{outline-color:var(--white)}
/* disabled / coming soon */
.btn[disabled],.btn[aria-disabled="true"]{background:var(--disabled-bg);color:var(--disabled-ink);box-shadow:inset 0 0 0 1px rgba(15,76,92,.12);cursor:not-allowed;transform:none}
.dark .btn[aria-disabled="true"]{background:rgba(255,255,255,.1);color:rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.dark .btn[aria-disabled="true"] .ic-os svg{opacity:.8}

.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-ctl);font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap;letter-spacing:0}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.tag-warm{background:var(--orange-wash);color:var(--teal-deep)}
.tag-you{background:var(--teal);color:var(--white)}

/* ---------------- mockup strip + header ---------------- */
.strip{background:var(--night);color:rgba(255,255,255,.8);font-size:var(--t-micro);line-height:1.4;text-align:center;padding:9px 16px}
.dark{color:var(--on-dark)}
.stage-band{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;
  background:
    radial-gradient(46% 30% at 47% 71%,rgba(96,160,175,.5) 0%,rgba(78,141,156,.2) 50%,rgba(78,141,156,0) 100%),
    radial-gradient(80% 44% at 50% 80%,rgba(15,76,92,.9) 0%,rgba(15,76,92,0) 100%),
    radial-gradient(100% 60% at 50% -10%,rgba(15,76,92,.85) 0%,rgba(15,76,92,0) 70%),
    var(--teal-deep)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.logo{display:block;border-radius:8px}
.logo img{height:34px;width:auto}
.nav-r{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;padding:3px;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.lang a{display:grid;place-items:center;min-width:38px;height:30px;padding:0 10px;border-radius:var(--r-ctl);font-size:13px;font-weight:500;line-height:1;color:rgba(255,255,255,.82);text-decoration:none}
.lang a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.lang a[aria-current]{background:rgba(255,255,255,.16);color:var(--white)}
.signin{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:var(--r-ctl);font-size:15px;font-weight:500;color:var(--white);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background-color .18s var(--ease)}
.signin:hover{background:rgba(255,255,255,.1)}

/* ---------------- hero ---------------- */
.hero{display:flow-root;text-align:center;padding-top:56px}
.hero h1{font-size:var(--t-display);line-height:1;letter-spacing:-.032em;font-weight:600}
.lead{max-width:34em;margin:26px auto 0;font-size:var(--t-lead);line-height:1.55;color:var(--on-dark-2);letter-spacing:.002em}
.cta{margin-top:40px;display:flex;flex-direction:column;align-items:center}
.cta-alt{display:none;flex-direction:column;align-items:center;gap:14px}
[data-os="windows"] .cta-win,[data-os="linux"] .cta-linux,[data-os="mac"] .cta-mac,[data-os="mobile"] .cta-mobile{display:flex}
.cta-meta{font-size:var(--t-meta);line-height:1.5;color:var(--on-dark-3);min-height:1.5em}
.cta-meta .after{display:none}
.has-started .cta-meta .before{display:none}
.has-started .cta-meta .after{display:inline}
.cta-meta a,.hero-links a{color:var(--white);font-weight:500}
.dl-retry{display:none}
.has-started .dl-retry{display:inline}
.cta-note{max-width:26em;font-size:var(--t-small);line-height:1.55;color:var(--on-dark-2)}
.link-ic{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--white)}
.hero-links{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 32px;font-size:var(--t-meta);color:var(--on-dark-3)}
.hero-links a{display:inline-flex;align-items:center;gap:7px}

/* stage: the real app window + the phone. The phone is drawn at a 1080px stage and scales with it (--u = 1 design px). */
.stage{position:relative;z-index:2;container-type:inline-size;width:min(1080px,calc((50vw - var(--gutter)) * 1.64));margin:72px auto calc(var(--ov) * -1);transform:translateX(-5.4%)}
.window{position:relative;border-radius:var(--r-window);overflow:hidden;background:#070707;aspect-ratio:1440/900;
  box-shadow:0 0 0 1px rgba(2,22,28,.5),0 2px 4px rgba(2,22,28,.3),0 30px 60px -24px rgba(2,30,38,.6),0 60px 90px -50px rgba(10,57,69,.55)}
.window img{width:100%;height:100%;object-fit:cover;object-position:left top}
.window::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.phone{--u:calc(100cqw / 1080);position:absolute;right:calc(-176 * var(--u));bottom:calc(-56 * var(--u));width:calc(264 * var(--u));height:calc(510 * var(--u));padding:calc(11 * var(--u));border-radius:calc(48 * var(--u));background:#0C1E24;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 calc(4 * var(--u)) #0C1E24,0 2px 4px rgba(2,22,28,.35),0 36px 72px -20px rgba(2,22,28,.7)}
.screen{position:relative;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;text-align:center}
.phone .screen{border-radius:calc(38 * var(--u));padding:calc(16 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u))}
.phone .island{width:calc(84 * var(--u));height:calc(24 * var(--u));border-radius:calc(14 * var(--u));margin-bottom:calc(6 * var(--u))}
.island{display:block;background:#0C1E24;flex:none}
.status{position:absolute;top:calc(18 * var(--u));left:calc(26 * var(--u));right:calc(24 * var(--u));display:flex;justify-content:space-between;align-items:center;font-size:calc(12 * var(--u));font-weight:600;color:var(--ink)}
.status svg{height:calc(11 * var(--u));width:auto;fill:var(--ink)}
.phone .app-ic{width:calc(52 * var(--u));height:calc(52 * var(--u));margin-top:calc(46 * var(--u));border-radius:calc(13 * var(--u));box-shadow:0 6px 14px -6px rgba(10,57,69,.45)}
.screen-t{margin-top:calc(18 * var(--u));font-size:calc(17 * var(--u));font-weight:600;line-height:1.25;letter-spacing:-.01em}
.screen-h{margin-top:calc(6 * var(--u));font-size:calc(12.5 * var(--u));line-height:1.45;color:var(--ink-3);max-width:15em}
.code{display:flex;gap:calc(5 * var(--u));margin-top:calc(26 * var(--u))}
.cbox{width:calc(27 * var(--u));height:calc(38 * var(--u));border-radius:calc(8 * var(--u));background:var(--white);box-shadow:inset 0 0 0 max(1px,calc(1.5 * var(--u))) #7F9296;display:grid;place-items:center;font-size:calc(17 * var(--u));font-weight:600;color:var(--ink)}
.cbox.gap{width:calc(6 * var(--u));box-shadow:none;background:none}
.fake-btn{margin-top:auto;width:100%;height:calc(46 * var(--u));border-radius:var(--r-ctl);background:var(--teal);color:var(--white);font-size:calc(15 * var(--u));font-weight:600;display:grid;place-items:center}
.shot-caption{position:absolute;left:0;right:0;top:calc(100% + 16px);font-size:13px;color:var(--ink-3);text-align:left}

@media (prefers-reduced-motion:no-preference){
  .window{animation:rise 1.1s var(--ease) .1s both}
  .phone{animation:rise-phone 1.1s var(--ease) .32s both}
}
@keyframes rise{from{opacity:.25;transform:translateY(36px) scale(.985);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes rise-phone{from{opacity:.2;transform:translateY(64px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------------- sections ---------------- */
.sec{padding:var(--s32) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30em);align-items:end;gap:var(--s10);margin-bottom:var(--s12)}
.sec-sub{font-size:18px;line-height:1.6;color:var(--ink-2)}

/* downloads list */
.systems{padding-top:calc(var(--ov) + 56px + var(--s24))}
.dl-panel{background:var(--white);border-radius:var(--r-panel);box-shadow:var(--shadow-panel);overflow:hidden}
.os{--row-bg:var(--white);display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,600px);column-gap:var(--s6);align-items:start;padding:var(--s8) var(--s8) 30px;border-top:1px solid var(--line)}
.os:first-child{border-top:0}
.os.is-you{--row-bg:var(--wash);background:var(--row-bg)}
.os-ic{width:56px;height:56px;border-radius:14px;background:var(--ice);color:var(--teal);display:grid;place-items:center}
.os-ic svg{width:26px;height:26px}
.os-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:30px;margin-top:2px}
.os h3{font-size:24px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.os:not(.is-you) .tag-you{display:none}
.os-req{margin-top:4px;font-size:var(--t-small);line-height:1.5;color:var(--ink-3)}
.os-act{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s3)}
.btn-row{width:100%;justify-content:space-between;padding:0 18px 0 20px}
.btn-row .l{display:inline-flex;align-items:center;gap:10px}
.btn-row .tag{height:24px;font-size:12px}
.os-note{margin-top:var(--s3);font-size:var(--t-meta);line-height:1.55;color:var(--ink-3)}
.os-note .dl-retry{color:var(--teal);font-weight:600;margin-left:6px}
.os.is-soon .os-ic{background:var(--disabled-bg);color:var(--disabled-ink)}
.os.is-soon .btn .soon{font-weight:500;font-size:14px}
.notify{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--teal)}
.verify{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s8);padding:18px var(--s8);background:#EEF4F3;border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--ink-2)}
.verify .v-main{display:flex;align-items:center;gap:10px}
.verify .v-main svg{color:var(--teal)}
.verify a{color:var(--teal);font-weight:600}
.verify .v-side{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}

/* SmartScreen */
.ss{background:var(--white)}
.ss-grid{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:var(--s16);align-items:center}
.ss-grid > *{min-width:0}
.ss-body{margin-top:var(--s6);font-size:18px;line-height:1.65;color:var(--ink-2);max-width:32em}
.ss-steps{list-style:none;margin-top:var(--s8);display:grid;gap:14px}
.ss-steps li{display:flex;align-items:center;gap:14px;font-size:18px;color:var(--ink)}
.n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--teal-deep);font-size:15px;font-weight:600;display:grid;place-items:center}
.ss-foot{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line);font-size:var(--t-small);line-height:1.6;color:var(--ink-3);max-width:34em}
.ss-foot a{color:var(--teal);font-weight:600}
.dlgs{position:relative;height:470px}
.dlg{position:absolute;width:420px;padding:26px 26px 22px;border-radius:8px;background:#0063B1;color:#FFFFFF;font-family:"Segoe UI",var(--f);
  box-shadow:0 2px 4px rgba(0,25,50,.2),0 34px 64px -28px rgba(0,30,60,.6)}
.dlg-1{left:0;top:0}
.dlg-2{right:0;bottom:0}
.dlg-t{font-size:22px;font-weight:400;line-height:1.25;letter-spacing:-.01em}
.dlg-b{margin-top:12px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.95)}
.dlg-more{display:inline-block;margin-top:14px;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.dlg-kv{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:13px;line-height:1.55}
.dlg-kv dt{opacity:.92}
.dlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.dlg-btns > span{font-size:13px;line-height:1;padding:9px 16px;border:1.5px solid rgba(255,255,255,.9);border-radius:3px;white-space:nowrap}
.hl{position:relative;outline:3px solid var(--orange-hi);outline-offset:5px;border-radius:3px}
.mark{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--orange-hi);color:var(--teal-deep);font:600 14px/30px var(--f);text-align:center;box-shadow:0 3px 8px rgba(0,20,40,.35)}
.hl .mark{top:50%;left:-48px;margin-top:-15px}

/* pairing */
.pair{background:var(--teal);color:var(--white);position:relative;isolation:isolate;overflow:clip}
.pair::before{content:"";position:absolute;z-index:-1;inset:auto -10% -40% 30%;height:90%;background:radial-gradient(closest-side,rgba(78,141,156,.4),rgba(78,141,156,0))}
.pair h2{color:var(--white)}
.pair .sec-sub{color:var(--on-dark-2)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}
.tile{position:relative;container-type:inline-size;aspect-ratio:4/3;border-radius:var(--r-panel);overflow:hidden;background:var(--teal-deep);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tile > *{--t:calc(100cqw / 378)}
.step-n{display:grid;place-items:center;width:36px;height:36px;margin-top:var(--s6);border-radius:50%;background:var(--white);color:var(--teal);font-size:16px;font-weight:600}
.step-t{margin-top:var(--s4);font-size:21px;line-height:1.3;letter-spacing:-.01em}
.step-p{margin-top:var(--s2);font-size:16px;line-height:1.6;color:var(--on-dark-2)}
.step-p b{color:var(--white)}
/* tile 1: crop of the real window */
.t-shot{position:absolute;left:calc(28 * var(--t));top:calc(28 * var(--t));width:calc(860 * var(--t));aspect-ratio:1440/900;border-radius:calc(10 * var(--t));overflow:hidden;background:#070707;box-shadow:0 20px 40px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.t-shot img{width:100%;height:100%}
/* tile 2: the pairing code in the brand's orange window */
.t-code{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:calc(14 * var(--t))}
.code-label{display:flex;align-items:center;gap:calc(10 * var(--t));font-size:max(11px,calc(13 * var(--t)));font-weight:500;color:var(--on-dark-2)}
.code-label .tag{height:calc(22 * var(--t));padding:0 calc(9 * var(--t));font-size:max(10px,calc(11.5 * var(--t)));background:rgba(255,255,255,.12);color:var(--white)}
.win-plate{padding:calc(10 * var(--t));border-radius:calc(22 * var(--t));background:var(--orange);box-shadow:0 18px 36px -16px rgba(0,0,0,.55)}
.win-plate span{display:block;padding:calc(14 * var(--t)) calc(26 * var(--t));border-radius:calc(13 * var(--t));background:var(--teal-deep);font-size:calc(34 * var(--t));font-weight:600;letter-spacing:.14em;line-height:1.1;color:var(--paper);white-space:nowrap}
.code-exp{display:flex;align-items:center;gap:calc(8 * var(--t));font-size:max(11px,calc(13 * var(--t)));color:var(--on-dark-2)}
.code-exp svg{width:calc(16 * var(--t));height:calc(16 * var(--t))}
/* tile 3: phone after pairing */
.t-phone{position:absolute;left:50%;top:calc(24 * var(--t));width:calc(224 * var(--t));height:calc(400 * var(--t));margin-left:calc(-112 * var(--t));padding:calc(9 * var(--t));border-radius:calc(40 * var(--t));background:#0C1E24;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 24px 44px -18px rgba(0,0,0,.6)}
.t-phone .screen{border-radius:calc(32 * var(--t));padding:calc(10 * var(--t)) calc(16 * var(--t))}
.t-phone .island{width:calc(70 * var(--t));height:calc(20 * var(--t));border-radius:calc(12 * var(--t))}
.paired-ok{width:calc(40 * var(--t));height:calc(40 * var(--t));margin-top:calc(18 * var(--t));border-radius:50%;background:var(--teal);color:var(--white);display:grid;place-items:center}
.paired-ok svg{width:calc(22 * var(--t));height:calc(22 * var(--t));stroke-width:2.6}
.paired-t{margin-top:calc(8 * var(--t));font-size:calc(15 * var(--t));font-weight:600;line-height:1.3}
.paired-s{margin-top:calc(12 * var(--t));align-self:stretch;text-align:left;font-size:calc(11.5 * var(--t));font-weight:500;line-height:1.3;color:var(--ink-3)}
.mates{align-self:stretch;margin-top:calc(6 * var(--t));display:grid;gap:calc(6 * var(--t))}
.mate{display:flex;align-items:center;gap:calc(10 * var(--t));padding:calc(6 * var(--t)) calc(10 * var(--t));border-radius:calc(12 * var(--t));background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:calc(13.5 * var(--t));font-weight:600;text-align:left}
.mate .av{width:calc(30 * var(--t));height:calc(30 * var(--t));flex:none}
.pair-notes{margin-top:var(--s12);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s10);font-size:var(--t-small);color:var(--on-dark-2)}
.pair-notes p{display:flex;align-items:flex-start;gap:10px}
.pair-notes i{flex:none;width:7px;height:7px;margin-top:.62em;border-radius:50%;background:var(--orange)}

/* footer */
.footer{background:var(--night);color:rgba(255,255,255,.72);padding:72px 0 40px;font-size:14px;line-height:1.6}
.footer a{color:rgba(255,255,255,.92)}
.foot-top{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s10);row-gap:6px;align-items:center;padding-bottom:var(--s8);border-bottom:1px solid rgba(255,255,255,.12)}
.foot-logo{height:32px;width:auto;grid-row:1/3}
.foot-tag{color:var(--white);font-weight:500;font-size:15px}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--s8);padding-top:var(--s6);flex-wrap:wrap}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:var(--s6)}
.foot-bottom nav a{text-decoration:none}
.foot-bottom nav a:hover{text-decoration:underline}
.foot-lang a[aria-current]{color:var(--white);font-weight:600}

/* review mode (?review=1): shows every [CONFIRM] note on the page */
.review [data-confirm]{background:rgba(242,165,65,.2);box-shadow:0 0 0 2px rgba(242,165,65,.55);border-radius:4px}
.review [data-confirm]::after{content:"CONFIRM: " attr(data-confirm);display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;background:var(--orange);color:var(--teal-deep);font:600 11px/1.6 var(--f);vertical-align:middle;white-space:nowrap}

/* ---------------- intermediate widths ---------------- */
@media (max-width:1100px){
  .os{grid-template-columns:56px minmax(0,1fr);row-gap:var(--s5)}
  .os-right{grid-column:1 / -1}
  .ss-grid{grid-template-columns:1fr;gap:var(--s12)}
  .dlgs{max-width:600px}
  .steps{gap:var(--s5)}
  .sec-head{grid-template-columns:1fr;gap:var(--s4)}
}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:var(--s10)}
  .steps li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:var(--s8);align-items:start}
  .steps .tile{grid-row:1 / span 3}
  .step-n{margin-top:var(--s2)}
}

/* ---------------- phones ---------------- */
@media (max-width:760px){
  :root{--gutter:20px;--ov:120px}
  .sec{padding:var(--s20) 0}
  .strip{padding:8px 16px;font-size:12px}
  .nav{height:68px}
  .logo img{height:28px}
  .nav-r{gap:8px}
  .lang a{min-width:34px;height:28px;padding:0 8px;font-size:12px}
  .signin{height:36px;padding:0 14px;font-size:14px}
  .hero{padding-top:32px}
  .hero h1{letter-spacing:-.028em;line-height:1.02}
  .lead{margin-top:18px}
  .cta{margin-top:30px}
  .cta-alt{align-self:stretch}
  .cta .btn-cta{width:100%;--h:58px;font-size:16px}
  .hero-links{gap:10px 22px;margin-top:22px}
  .stage{width:auto;margin:48px 64px calc(var(--ov) * -1) 0;transform:none}
  .window{aspect-ratio:4/3;border-radius:10px}
  .window img{width:205%;height:auto;max-width:none;object-fit:initial}
  .phone{--u:.52px;right:-58px;bottom:-40px}
  .phone .status{display:none}
  .steps li{display:block}
  .step-n{margin-top:var(--s6)}
  .shot-caption{top:calc(100% + 12px);font-size:12.5px;right:-40px}
  .systems{padding-top:calc(var(--ov) + 40px + var(--s16))}
  .sec-head{margin-bottom:var(--s8)}
  .sec-sub{font-size:16.5px}
  .os{grid-template-columns:48px minmax(0,1fr);column-gap:var(--s4);padding:var(--s6) var(--s5)}
  .os-ic{width:48px;height:48px;border-radius:12px}
  .os-ic svg{width:22px;height:22px}
  .os h3{font-size:21px}
  .os-act{grid-template-columns:1fr;gap:10px}
  .verify{flex-direction:column;align-items:flex-start;padding:18px var(--s5)}
  .ss-body,.ss-steps li{font-size:16.5px}
  .dlgs{height:auto;display:grid;gap:var(--s8)}
  .dlg{position:relative;width:auto;inset:auto;padding:20px 20px 18px}
  .dlg-t{font-size:19px}
  .dlg-btns > span{font-size:12px;padding:8px 12px}
  .dlg-more.hl .mark{left:auto;right:-46px}
  .steps{grid-template-columns:1fr;gap:var(--s12)}
  .pair-notes{flex-direction:column}
  .footer{padding:56px 0 36px}
  .foot-top{grid-template-columns:1fr}
  .foot-logo{grid-row:auto;margin-bottom:var(--s3)}
  .foot-bottom{flex-direction:column;gap:var(--s4)}
}

@media (max-width:480px){
  .os-act{row-gap:var(--s4)}
  .btn-row .tag{position:absolute;top:-12px;right:14px;height:22px;font-size:11.5px;box-shadow:0 0 0 3px var(--row-bg)}
}
@media (max-width:400px){
  .dlg-btns{flex-wrap:wrap}
  .dlg-btns > span{white-space:normal;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn *{transition-duration:.01s!important}
  .btn:hover,.btn:active,.btn.is-hover,.btn.is-active{transform:none}
  .btn.is-downloading .spin{animation:pulse 1.2s ease-in-out infinite;border-right-color:currentColor;border-style:dotted}
  .window,.phone{animation:fade .4s ease-out both}
}
@keyframes pulse{50%{opacity:.35}}
@keyframes fade{from{opacity:.4}to{opacity:1}}