/* What every page shares: colours, type, the top bar, the footer, buttons and the Store badge */
:root{
  --bg:#0a0b0f;--bg2:#0e1016;--stroke:rgba(255,255,255,.10);--stroke2:rgba(255,255,255,.16);
  --text:#f3f4f7;--text2:rgba(255,255,255,.72);--text3:rgba(255,255,255,.46);
  --acc:#2F6BFF;--acc2:#4C8DFF;--cyan:#4CC2FF;--orange:#FF8A1F;--good:#6cc58c;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
html{scroll-behavior:smooth}
/* a part opened by its address (#pricing, #rights) stops under the top bar, not behind it */
header[id],section[id],h2[id],h3[id]{scroll-margin-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--ui);overflow-x:hidden}
a{color:var(--acc2);text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* the top bar */
nav.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);background:rgba(10,11,15,.72);border-bottom:1px solid rgba(255,255,255,.06)}
nav.top .wrap{display:flex;align-items:center;height:64px;gap:28px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font:600 17px var(--display);flex-shrink:0;white-space:nowrap}
.brand img{width:34px;height:34px;filter:drop-shadow(0 4px 14px rgba(47,107,255,.35))}
.brand small{display:block;font:400 11.5px var(--ui);color:var(--text3);margin-top:-3px}
.links{display:flex;gap:24px;margin-left:auto;font-size:14.5px}
/* the top bar's links: what does not fit in one line (a longer language, a narrower window) is left out from the end */
nav.top .links{flex:1 1 auto;min-width:0;justify-content:flex-end;flex-wrap:wrap;height:24px;overflow:hidden;row-gap:0}
.links a{color:var(--text2)} .links a:hover{color:var(--text)}

/* buttons; Microsoft's own badge, used as it is: it links to the app's page in the Store */
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:12px;font:600 15px var(--ui);color:#fff;border:1px solid var(--stroke2);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.acc{background:var(--acc);border-color:var(--acc);box-shadow:0 8px 30px rgba(47,107,255,.45)}
.store{display:inline-block;line-height:0;border-radius:6px;transition:transform .15s,box-shadow .15s}
.store img{height:56px;width:auto}
.store:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.store.small{flex-shrink:0} .store.small img{height:40px}
.fine{font-size:13.5px;color:var(--text3)} .fine b{color:var(--text2);font-weight:600}

/* the footer */
footer.bottom{border-top:1px solid rgba(255,255,255,.06);padding:34px 0 50px;font-size:13.5px;color:var(--text3)}
footer.bottom .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
footer.bottom .brand{font-size:14px;gap:10px}
footer.bottom .brand img{width:22px;height:22px}
footer.bottom .links{margin-left:auto;flex-wrap:wrap;gap:6px 22px}

/* the language: a globe with its code in the top bar, the list under it */
details.lang{position:relative}
details.lang summary{list-style:none;display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--stroke2);background:rgba(255,255,255,.05);color:var(--text2);font:600 13px var(--ui);cursor:pointer;user-select:none}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary:hover,details.lang[open] summary{color:var(--text);background:rgba(255,255,255,.09)}
details.lang summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
/* a combo box's chevron: down, up while the list is open */
details.lang summary::after{content:"";width:6px;height:6px;margin:-3px 1px 0 2px;border-right:1.5px solid var(--text3);border-bottom:1.5px solid var(--text3);transform:rotate(45deg);transition:transform .15s}
details.lang[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
details.lang .menu{position:absolute;right:0;top:calc(100% + 6px);width:230px;padding:6px;border-radius:12px;background:#171a22;border:1px solid var(--stroke2);box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60}
details.lang .menu a{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;color:var(--text2);font-size:14px}
details.lang .menu a:hover{background:rgba(255,255,255,.07);color:var(--text)}
details.lang .menu a[aria-current]{color:var(--text);background:rgba(76,141,255,.14)}
details.lang .menu a[aria-current]::after{content:"✓";color:var(--acc2);font-weight:700}

/* ☰ at the far right, only while links are left out of the bar (nav.js; under 980 always): a bare icon, lighter when
   pointed at or open (its box only for the finger; its lines on the bar's edge), those links in a list under it */
details.navmore{position:relative;display:none;margin:0 -7px 0 -12px}
details.navmore summary{list-style:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--text2);cursor:pointer;user-select:none}
details.navmore summary::-webkit-details-marker{display:none}
details.navmore summary:hover,details.navmore[open] summary{color:var(--text)}
details.navmore summary:focus-visible{outline:2px solid var(--acc2);outline-offset:0}
details.navmore summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
details.navmore .menu{position:absolute;right:0;top:calc(100% + 6px);width:220px;padding:6px;border-radius:12px;background:#171a22;border:1px solid var(--stroke2);box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60}
details.navmore .menu a{display:block;padding:8px 10px;border-radius:7px;color:var(--text2);font-size:14.5px}
details.navmore .menu a:hover{background:rgba(255,255,255,.07);color:var(--text)}
details.navmore .menu a[hidden]{display:none}
nav.top.cramped details.navmore{display:block}

/* the page in the reader's language, offered under the top bar */
.offer{background:rgba(47,107,255,.12);border-bottom:1px solid rgba(76,141,255,.25);font-size:14.5px}
.offer .wrap{display:flex;align-items:center;gap:14px;min-height:48px;padding-top:6px;padding-bottom:6px}
.offer a.go{margin-left:auto;padding:6px 14px;border-radius:8px;background:var(--acc);color:#fff;font-weight:600;white-space:nowrap}
.offer .x{border:0;background:none;color:var(--text3);font-size:16px;cursor:pointer;padding:0 4px}
.offer .x:hover{color:var(--text)}

@media (max-width:980px){nav.top .links{display:none}details.lang{margin-left:auto}details.navmore{display:block}}
/* a phone: the Store's badge only in the page (Microsoft's badge is never squeezed, and a Windows app is not installed from a phone) */
@media (max-width:600px){.wrap{padding:0 16px}nav.top .store.small{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ?static: everything at rest, for pictures of a page */
.static *{animation:none!important;transition:none!important}
.static .reveal{opacity:1;transform:none}

/* the Store badge before the app is in the Store: dimmed, not a link, "Coming soon" over it */
.store.soon{position:relative;cursor:default}
.store.soon:hover{transform:none;box-shadow:none}
.store.soon img{opacity:.3;filter:grayscale(1)}
.store.soon .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:8px;background:rgba(23,26,34,.94);border:1px solid var(--stroke2);box-shadow:0 6px 20px rgba(0,0,0,.4);font:700 12.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text);white-space:nowrap}