:root{color-scheme:light;--radius:14px;--radius-lg:22px;--gap-section:4.5rem;--gap-block:2.4rem;--wrap-wide:72rem;--wrap-read:44rem;--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--ink:#0f172a;--ink-soft:#475569;--ink-faint:#94a3b8;--line:#e2e8f0;--line-strong:#cbd5e1;--surface:#ffffff;--surface-alt:#f8fafc;--ok:#047857;--ok-tint:#ecfdf5;--warn:#b45309;--warn-tint:#fffbeb;--bad:#b91c1c;--bad-tint:#fef2f2;--shadow:0 1px 2px rgb(15 23 42/.04),0 8px 24px -12px rgb(15 23 42/.12);--shadow-lift:0 2px 4px rgb(15 23 42/.05),0 20px 40px -16px rgb(15 23 42/.2);--brand:#2563eb;--brand-dark:#1d4ed8;--brand-solid:#2563eb;--brand-tint:#eff5ff;--brand-ink:#1e3a8a;--brand-text:#1d4ed8;--link:#1d4ed8;--focus:#2563eb;}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--ink:#e8edf5;--ink-soft:#aab6c8;--ink-faint:#6b7a90;--line:#263145;--line-strong:#3a4760;--surface:#0d1220;--surface-alt:#151c2c;--ok:#34d399;--ok-tint:#0d2a20;--warn:#fbbf24;--warn-tint:#2a2113;--bad:#f87171;--bad-tint:#2b1618;--shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px -12px rgb(0 0 0/.6);--shadow-lift:0 2px 4px rgb(0 0 0/.35),0 20px 40px -16px rgb(0 0 0/.7);--brand:#2563eb;--brand-dark:#3b82f6;--brand-solid:#1d4ed8;--brand-tint:#152036;--brand-ink:#bfdbfe;--brand-text:#93c5fd;--link:#93c5fd;--focus:#93c5fd;}}
:root[data-theme=dark]{color-scheme:dark;--ink:#e8edf5;--ink-soft:#aab6c8;--ink-faint:#6b7a90;--line:#263145;--line-strong:#3a4760;--surface:#0d1220;--surface-alt:#151c2c;--ok:#34d399;--ok-tint:#0d2a20;--warn:#fbbf24;--warn-tint:#2a2113;--bad:#f87171;--bad-tint:#2b1618;--shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px -12px rgb(0 0 0/.6);--shadow-lift:0 2px 4px rgb(0 0 0/.35),0 20px 40px -16px rgb(0 0 0/.7);--brand:#2563eb;--brand-dark:#3b82f6;--brand-solid:#1d4ed8;--brand-tint:#152036;--brand-ink:#bfdbfe;--brand-text:#93c5fd;--link:#93c5fd;--focus:#93c5fd;}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em}
a:hover{color:var(--brand-dark)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--brand);color:#fff;padding:.6rem 1rem;border-radius:8px}
.skip:focus{left:.5rem;color:#fff}
.wrap{max-width:var(--wrap-wide);margin:0 auto;padding:0 1rem}
.read{max-width:var(--wrap-read);margin:0 auto;padding:0 1rem}
@media(min-width:40rem){.wrap,.read{padding:0 1.4rem}}
section{padding:var(--gap-section) 0}
section.tight{padding:calc(var(--gap-section)*.55) 0}
.band{background:var(--surface-alt)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{line-height:1.2;letter-spacing:-.021em;margin:0 0 .6rem}
h1{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800}
h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:750;margin-top:var(--gap-block)}
h3{font-size:1.14rem;font-weight:700;margin-top:1.8rem}
p{margin:0 0 1.1rem}
code{font-size:.9em;background:var(--surface-alt);border:1px solid var(--line);border-radius:5px;padding:.05em .3em}
.lede{font-size:1.14rem;color:var(--ink-soft);line-height:1.6}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-text);margin-bottom:.6rem}
.meta{font-size:.9rem;color:var(--ink-soft);margin:.2rem 0 0}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto;max-width:36rem}
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:.8rem;min-height:3.9rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.02em;font-size:1.02rem;margin-right:auto}
.brand img{width:32px;height:32px;border-radius:8px}
.brand:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:.3rem}
.nav>a,.nav summary{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:.45rem .7rem;border-radius:8px;cursor:pointer}
.nav>a:hover,.nav summary:hover{background:var(--surface-alt)}
.nav summary{list-style:none;display:flex;align-items:center;gap:.3rem}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"";width:.45rem;height:.45rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.dd{position:relative}
.dd-panel{position:absolute;right:0;top:calc(100% + .5rem);width:min(46rem,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:1.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.dd-panel strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:.3rem}
.dd-panel ul{list-style:none;margin:0;padding:0}
.dd-panel li a{display:block;padding:.28rem 0;font-size:.92rem;text-decoration:none;color:var(--ink);line-height:1.35}
.dd-panel li a:hover{color:var(--link)}
.dd-panel .all{grid-column:1/-1;border-top:1px solid var(--line);padding-top:.7rem;font-weight:650;font-size:.92rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-weight:650;padding:.85rem 1.4rem;border-radius:999px;background:var(--brand);color:#fff;border:1px solid transparent;box-shadow:var(--shadow);transition:transform .12s ease,background .12s ease;line-height:1.3;text-align:center}
.btn:hover{background:var(--brand-dark);color:#fff;transform:translateY(-1px)}
.btn.sm{padding:.5rem 1rem;font-size:.92rem}
.btn.ghost{background:transparent;color:var(--link);border-color:color-mix(in srgb,var(--brand) 40%,transparent);box-shadow:none}
.btn small{display:block;font-weight:400;opacity:.9;font-size:.78rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.icon-btn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.icon-btn svg{width:1.15rem;height:1.15rem}
.menu-btn{display:none}
.theme-btn .moon{display:none}
:root[data-theme=dark] .theme-btn .sun{display:none}
:root[data-theme=dark] .theme-btn .moon{display:block}
@media(max-width:55.99rem){
  .menu-btn{display:grid}
  .head-cta{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.6rem 1rem 1rem;max-height:calc(100vh - 4rem);overflow:auto;box-shadow:var(--shadow-lift)}
  .nav.open{display:flex}
  .dd-panel{position:static;width:auto;grid-template-columns:1fr;box-shadow:none;border:0;padding:.4rem .7rem}
  .nav .btn{margin-top:.5rem}
}
@media(min-width:56rem){.nav .btn{display:none}}
.hero{background:radial-gradient(60rem 30rem at 78% -10%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),var(--brand-tint);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;gap:2.5rem;align-items:center;padding-top:3.4rem;padding-bottom:3.4rem}
@media(min-width:56rem){.hero .wrap{grid-template-columns:1.1fr .9fr;gap:4rem}}
.hero h1{color:var(--brand-ink);font-size:clamp(2rem,5.5vw,3.1rem)}
.appicon{width:72px;height:72px;border-radius:18px;box-shadow:var(--shadow-lift);margin-bottom:1.2rem}
.hero-phone{width:min(270px,74vw);margin:0 auto;border:10px solid #10131c;border-radius:38px;box-shadow:var(--shadow-lift);overflow:hidden;background:#10131c}
.hero-phone img{width:100%;border-radius:26px}
.grid{display:grid;gap:1.1rem}
@media(min-width:40rem){.grid.two,.grid.three{grid-template-columns:repeat(2,1fr)}}
@media(min-width:56rem){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.card h3{margin-top:0;font-size:1.06rem}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0}
.card .icon{width:42px;height:42px;border-radius:11px;margin-bottom:.8rem;display:grid;place-items:center;font-size:1.25rem;background:var(--brand-tint)}
a.card{text-decoration:none;color:inherit;display:block;transition:transform .12s ease,box-shadow .12s ease}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
a.card h3{color:var(--link)}
.card .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-text);margin-bottom:.35rem}
.cat-block{margin-top:2.4rem}
.cat-block h3{font-size:1.25rem;margin:0 0 .25rem}
.cat-block>p{color:var(--ink-soft);margin:0 0 1rem}
.crumbs{font-size:.86rem;color:var(--ink-soft);margin:0 0 1rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.crumbs li+li::before{content:"›";margin-right:.3rem;color:var(--ink-faint)}
.crumbs a{color:var(--ink-soft)}
.layout{display:grid;gap:2.5rem;padding-top:2rem;padding-bottom:3rem}
.layout>article{min-width:0}
@media(min-width:64rem){.layout{grid-template-columns:minmax(0,1fr) 17rem;gap:3.5rem}}
.side{display:none}
@media(min-width:64rem){.side{display:block}.side-in{position:sticky;top:5rem;display:grid;gap:1.2rem}.toc-m{display:none}}
.toc{font-size:.9rem}
.toc strong{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:.5rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:.28rem 0 .28rem .8rem;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-soft);text-decoration:none;line-height:1.35}
.toc a:hover,.toc a.on{color:var(--link);border-left-color:var(--brand)}
.toc-m{border:1px solid var(--line);border-radius:var(--radius);padding:.2rem 1rem;margin:0 0 1.6rem;background:var(--surface-alt)}
.toc-m summary{cursor:pointer;font-weight:650;padding:.7rem 0}
.toc-m ol{border:0;margin-bottom:.7rem}
.toc-m a{padding-left:0;border:0}
.app-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;background:var(--surface-alt);text-align:center}
.app-card img{width:56px;height:56px;border-radius:14px;margin:0 auto .6rem}
.app-card strong{display:block;line-height:1.3}
.app-card p{font-size:.86rem;color:var(--ink-soft);margin:.4rem 0 .9rem;line-height:1.5}
.app-card .btn{width:100%;padding:.7rem 1rem;font-size:.92rem}
.answer{background:var(--brand-tint);border-left:4px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;padding:1.1rem 1.4rem 1.2rem;margin:1.4rem 0 1.8rem}
.answer>.label{display:block;font-size:.76rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-text);margin-bottom:.35rem}
.answer p:last-child{margin-bottom:0}
.prose h2{scroll-margin-top:5rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin:.3rem 0}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.4rem 0}
ol.steps>li{counter-increment:s;position:relative;padding:0 0 1.5rem 2.6rem;border-left:2px solid var(--line);margin:0 0 0 1rem}
ol.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps>li::before{content:counter(s);position:absolute;left:-1.05rem;top:-.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--brand);color:#fff;font-size:.88rem;font-weight:700;display:grid;place-items:center}
ol.steps>li>strong:first-child{display:block;margin-bottom:.15rem}
ol.steps figure{margin:.9rem 0 .2rem}
figure{margin:1.6rem 0}
figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:.55rem;line-height:1.5}
.shot img{border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);background:#10131c}
.shot.tv img{width:100%}
.shot.phone img{width:min(220px,62vw);border-radius:22px;border:6px solid #10131c}
.shots{display:grid;gap:1rem;align-items:start;margin:1.6rem 0}
.shots figure{margin:0}
@media(min-width:40rem){.shots{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.shots.pt{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}}
.note,.tip,.warn,.good{border-radius:var(--radius);padding:1rem 1.2rem 1rem 1.2rem;margin:1.5rem 0;font-size:.97rem;border:1px solid var(--line);border-left-width:4px}
.note p:last-child,.tip p:last-child,.warn p:last-child,.good p:last-child{margin-bottom:0}
.note{background:var(--surface-alt);border-left-color:var(--ink-faint)}
.tip{background:var(--ok-tint);border-color:transparent;border-left-color:var(--ok)}
.good{background:var(--ok-tint);border-color:transparent;border-left-color:var(--ok)}
.warn{background:var(--warn-tint);border-color:transparent;border-left-color:var(--warn)}
.tip strong,.good strong{color:var(--ok)}
.warn strong{color:var(--warn)}
h3.err{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1rem;font-weight:650;background:var(--bad-tint);border-left:4px solid var(--bad);padding:.6rem .9rem;border-radius:0 8px 8px 0}
.table-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:30rem}
th,td{text-align:left;padding:.75rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);font-weight:700;background:var(--surface-alt)}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-alt) 55%,transparent)}
.yes{color:var(--ok);font-weight:650}
.no{color:var(--bad);font-weight:650}
.partial{color:var(--warn);font-weight:650}
table.compat td:first-child{font-weight:650}
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:.1rem 1.2rem;margin-bottom:.7rem;background:var(--surface)}
.faq summary{cursor:pointer;font-weight:650;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-text);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details>p{margin:0 0 1rem;color:var(--ink-soft)}
.cta-card{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--brand-tint);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:1.8rem 0}
.cta-card img{width:52px;height:52px;border-radius:13px}
.cta-card div{flex:1 1 14rem}
.cta-card strong{display:block;line-height:1.3}
.cta-card span{font-size:.88rem;color:var(--ink-soft)}
.cta-box{border:1px solid var(--line);background:var(--surface-alt);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.8rem 0}
.cta-box h3{margin-top:0}
.cta-band{background:var(--brand-solid);color:#fff;border-radius:var(--radius-lg);padding:2.4rem 1.6rem;text-align:center;box-shadow:var(--shadow-lift)}
.cta-band h2,.cta-band p{color:#fff}
.cta-band h2{margin-top:0}
.cta-band p{opacity:.95;max-width:34rem;margin-inline:auto}
.cta-band .btn{background:#fff;color:var(--brand-solid);margin-top:1rem}
.cta-band .btn:hover{background:#fff;color:var(--brand-solid);opacity:.92}
.cta-inline{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;margin:1.6rem 0;background:var(--surface-alt)}
.cta-inline h3{margin-top:0}
a.cta{display:block;margin-top:1rem;background:var(--brand);color:#fff;text-decoration:none;font-weight:650;border-radius:var(--radius);padding:.9rem 1.2rem;text-align:center}
a.cta small{display:block;font-weight:400;opacity:.9;font-size:.8rem}
select,input[type=search]{width:100%;padding:.8rem 1rem;margin:.5rem 0;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius)}
.sticky-cta{position:fixed;left:.6rem;right:.6rem;bottom:.6rem;z-index:60;display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:.55rem .55rem .55rem .7rem}
.sticky-cta[hidden]{display:none}
.sticky-cta img{width:36px;height:36px;border-radius:9px}
.sticky-cta span{flex:1;font-size:.88rem;font-weight:650;line-height:1.25}
.sticky-cta .btn{padding:.55rem 1rem;font-size:.9rem}
.sticky-cta .x{background:none;border:0;color:var(--ink-soft);font-size:1.4rem;line-height:1;padding:.3rem .4rem;cursor:pointer}
@media(min-width:56rem){.sticky-cta{display:none}}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#10131c;box-shadow:var(--shadow-lift)}
.yt button{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.yt button:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.yt img{width:100%;height:100%;object-fit:cover}
.yt .play{position:absolute;left:50%;top:50%;width:72px;height:50px;margin:-25px 0 0 -36px;border-radius:14px;background:#e00;display:grid;place-items:center}
.yt .play::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pager{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:40rem){.pager{grid-template-columns:1fr 1fr}}
.pager a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem;text-decoration:none;line-height:1.4}
.pager small{display:block;color:var(--ink-soft);font-size:.8rem}
.pager .next{text-align:right}
.filter{max-width:30rem;margin:1.4rem auto 0}
.hub-empty{text-align:center;color:var(--ink-soft)}
.site-foot{border-top:1px solid var(--line);background:var(--surface-alt);padding:2.8rem 0 2rem;color:var(--ink-soft);font-size:.92rem}
.site-foot a{color:var(--ink-soft)}
.site-foot a:hover{color:var(--link)}
.foot-cols{display:grid;gap:1.6rem}
@media(min-width:40rem){.foot-cols{grid-template-columns:1fr 1fr}}
@media(min-width:64rem){.foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr .8fr}}
.foot-cols strong{color:var(--ink);font-size:.86rem}
.linklist{list-style:none;padding:0;margin:.5rem 0 0}
.linklist li{margin:.35rem 0;line-height:1.4}
.fine{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.84rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-head,.side,.sticky-cta,.site-foot,.cta-band,.cta-card{display:none}}