/* extpage page (real mode, #/extension). Scoped to .xp; uses theme.css tokens so light and dark both work.
   .xp = desktop (inside .pg.webp), .xp.m = phone (inside .pg.app). */
.xp{max-width:1160px;margin:0 auto;padding:64px 40px 112px;color:var(--ink)}
.xp.m{padding:20px 16px 72px}

/* ---------- hero: copy beside the real popup on a photo stage ---------- */
.xp-hero{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:72px;align-items:center}
.xp.m .xp-hero{grid-template-columns:minmax(0,1fr);gap:36px}
.xp-eye{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink2)}
.xp-eye .mark{width:20px;height:20px}.xp-eye .mark:after{inset:6px}
.xp.m .xp-eye{margin-bottom:14px}
.xp-h1{font-size:56px;font-weight:700;line-height:1.25;letter-spacing:-.035em;max-width:520px;text-wrap:balance}
.xp.m .xp-h1{font-size:34px;letter-spacing:-.03em}
.xp-lede{margin-top:18px;font-size:18px;line-height:1.55;color:var(--muted);max-width:440px}
.xp.m .xp-lede{font-size:16.5px;margin-top:12px}
.xp-cta{margin-top:34px}
.xp.m .xp-cta{margin-top:26px}
.xp .xp-dl{height:54px;padding:0 24px;border-radius:14px}
.xp .xp-dl:hover{background:var(--ink2);transform:translateY(-1px)}
.xp .xp-dl:active{transform:scale(.98)}
.xp.m .xp-dl{width:100%}
.xp-zip{font-size:12.5px;font-weight:600;opacity:.6;margin-left:-2px}
.xp-free{margin-top:12px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.xp.m .xp-free{text-align:center}

/* connection state: one compact card */
.xp-state{margin-top:40px;display:flex;gap:14px;align-items:flex-start;max-width:460px;padding:16px 18px;border:1.5px solid var(--line);border-radius:18px;background:var(--card)}
.xp.m .xp-state{margin-top:28px;max-width:none}
.xp-state b{display:block;font-size:15px;line-height:1.35}
.xp-state span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--muted)}
.xp-state .xp-dot{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--faint)}
.xp-state.ok{border-color:color-mix(in srgb,var(--save) 42%,var(--line))}
.xp-state.ok .xp-dot{background:var(--save);animation:xp-pulse 2.4s ease-out infinite}
@keyframes xp-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--save) 45%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}

.xp-fig{margin:0}
.xp-stage{position:relative;height:580px;border-radius:28px;overflow:hidden;background:#0b0b0c;isolation:isolate}
:root[data-theme=dark] .xp-stage{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.xp.m .xp-stage{height:466px;border-radius:24px}
.xp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:18% 70%;z-index:-1}
.xp-stage:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.5))}
.xp-bar{position:absolute;top:16px;left:16px;right:16px;height:44px;display:flex;align-items:center;gap:14px;padding:0 8px 0 16px;border-radius:14px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.xp.m .xp-bar{top:12px;left:12px;right:12px;height:40px}
.xp-dots{display:flex;gap:6px}
.xp-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.34)}
.xp-url{flex:1;height:24px;border-radius:8px;background:rgba(255,255,255,.1)}
.xp-pin{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,212,59,.16);box-shadow:inset 0 0 0 1.5px var(--hl)}
.xp.m .xp-pin{width:30px;height:30px}
.xp-pin .mark{width:18px;height:18px}.xp-pin .mark:after{inset:5.5px}
.xp-pop{position:absolute;top:76px;right:24px;width:300px}
.xp.m .xp-pop{top:66px;right:16px;width:236px}
.xp-pop img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform .5s var(--ease)}
.xp-stage:hover .xp-pop img{transform:translateY(-4px)}
.xp-pop .d{display:none}
:root[data-theme=dark] .xp-pop .l{display:none}
:root[data-theme=dark] .xp-pop .d{display:block}
:root[data-theme=dark] .xp-pop img{filter:none}
.xp-fig figcaption{margin-top:12px;font-size:12.5px;line-height:1.4;color:var(--faint)}

/* ---------- sections ---------- */
.xp-sec{margin-top:128px}
.xp.m .xp-sec{margin-top:76px}
.xp-h2{font-size:34px;font-weight:700;line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
.xp.m .xp-h2{font-size:25px}
.xp-h3{margin-top:48px;font-size:19px;font-weight:600;line-height:1.3}
.xp-small{margin-top:12px;padding:0 4px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.xp-h3+.xp-small{margin-top:4px;padding:0}

/* install steps: each card leads with a small drawing of that step */
.xp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.xp.m .xp-steps{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
.xp-step{padding:12px 12px 24px;border:1.5px solid var(--line);border-radius:22px;background:var(--card)}
.xp-art{height:184px;border-radius:14px;background:var(--soft);display:grid;place-items:center;padding:18px}
.xp.m .xp-art{height:168px}
.xp-st{display:flex;align-items:center;gap:10px;margin:20px 10px 0}
.xp-st b{font-size:17px;line-height:1.3}
.xp-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--hl);color:var(--on-hl);font-size:13px;font-weight:700;line-height:1.25}
.xp-step p{margin:8px 10px 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.xp-note{margin-top:18px;display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--hl-soft);color:var(--ink2);font-size:14px;line-height:1.5}
.xp-note .ic{margin-top:2px}

.xs-win{width:100%;max-width:260px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 8px 24px rgba(14,15,18,.08);font-size:11px;line-height:1.3;color:var(--ink2)}
.xs-win i{display:block;height:6px;border-radius:4px;background:var(--line)}
.xs-win i+i{margin-top:5px}
.xs-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.xs-top b{font-size:12.5px;color:var(--ink)}
.xs-dev{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
.xs-tog{position:relative;width:26px;height:15px;border-radius:99px;background:var(--hl);flex:none}
.xs-tog:after{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.xs-acts{display:flex;gap:6px;margin-top:12px}
.xs-btn{padding:4px 8px;border:1px solid var(--line);border-radius:7px;font-size:10.5px;color:var(--muted);white-space:nowrap}
.xs-btn.on{border-color:var(--ink);color:var(--ink);font-weight:600;box-shadow:0 0 0 3px var(--hl-soft)}
.xs-dir{display:flex;align-items:center;gap:6px;margin-top:12px;padding:7px 8px;border-radius:8px;background:var(--soft);color:var(--ink);font-weight:600}
.xs-dir .ic{width:13px;height:13px}
.xs-file{margin-left:auto;padding:2px 6px;border:1px solid var(--line);border-radius:5px;background:var(--card);font-size:10px;font-weight:400;color:var(--muted)}
.xs-tabs{display:flex;gap:5px}
.xs-sk{margin-top:12px}
.xs-sk i:first-child{height:8px;background:var(--ink2);opacity:.18}
.xs-menu>div{display:flex;align-items:center;gap:8px;margin-top:9px}
.xs-menu span{width:22px;height:22px;border-radius:6px;background:var(--soft);flex:none}
.xs-menu em{flex:1}
.xs-toast{display:flex;align-items:center;gap:6px;width:fit-content;margin:10px 0 0 auto;padding:5px 9px 5px 6px;border-radius:9px;background:var(--inv);color:var(--on-inv);font-size:10.5px;font-weight:600}
.xs-toast .mark{width:14px;height:14px}.xs-toast .mark:after{inset:4px}
.xs-ok{width:6px;height:6px;border-radius:50%;background:#3DD68C}
.xs-cmp>div{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px}
.xs-cmp>div+div{margin-top:4px}
.xs-cmp .best{background:var(--hl-soft)}
.xs-cmp i{flex:none}
.xs-pill{margin-left:auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--soft);flex:none}
.xs-cmp .best .xs-pill{background:var(--hl);color:var(--on-hl)}
.xs-pill .ic{width:11px;height:11px;stroke-width:3}

/* captures in this browser */
.xp-hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.xp-counts{display:flex;gap:8px}
.xp-counts span{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:600;line-height:1.25;color:var(--ink2);white-space:nowrap}
.xc-list{margin-top:24px;padding:6px;border:1.5px solid var(--line);border-radius:20px;background:var(--card)}
.xp-h3+.xp-small+.xc-list{margin-top:16px}
.xc-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;color:inherit;text-decoration:none}
.xc-row+.xc-row{margin-top:2px}
a.xc-row{transition:background-color .2s}
a.xc-row:hover{background:var(--soft)}
a.xc-row:hover .xc-go{transform:translateX(3px);color:var(--ink)}
.xc-th{flex:none;width:52px;height:52px}
.xc-th>*{display:block;border-radius:12px}
.xc-app{display:grid;place-items:center;border-radius:12px;font-size:15px;font-weight:700;line-height:1.25;color:#fff}
.xc-app.ue{background:#000;color:var(--ue)}.xc-app.dd{background:var(--dd)}.xc-app.sk{background:var(--skip)}
:root[data-theme=dark] .xc-app.ue{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.xc-tx{flex:1;min-width:0}
.xc-tx b{display:block;font-size:15.5px;line-height:1.35}
.xc-tx>span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}
.xc-tx .ab{display:inline-grid;width:16px;height:16px;margin-right:6px;border-radius:5px;font-size:7.5px;vertical-align:-3px}
.xc-go{color:var(--faint);transition:transform .25s var(--ease),color .2s}

/* what it keeps: 2x2, the "never" card inverted */
.xp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.xp.m .xp-facts{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
.xp-fact{padding:26px 26px 28px;border:1.5px solid var(--line);border-radius:22px;background:var(--card)}
.xp.m .xp-fact{padding:22px}
.xp-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink)}
.xp-fact b{display:block;margin-top:18px;font-size:17px;line-height:1.3}
.xp-fact p{margin-top:6px;max-width:46ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
.xp-fact.inv{background:var(--inv);border-color:var(--inv);color:var(--on-inv)}
.xp-fact.inv p{color:rgba(255,255,255,.7)}
.xp-fact.inv .xp-ic{background:var(--hl);color:var(--on-hl)}
:root[data-theme=dark] .xp-fact.inv{background:var(--hl-soft);border-color:color-mix(in srgb,var(--hl) 22%,transparent)}

@media (prefers-reduced-motion:reduce){.xp-state.ok .xp-dot{animation:none}.xp-pop img,.xc-go{transition:none}}