@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ── Tokens ──────────────────────────────────────────────────────────────
   A cool off-white page with white cards, a deep ink that is never pure
   black, and one electric-blue accent for the action (buttons, links, focus,
   selection). The product demos carry the rest of the colour, as macOS draws
   it. Dark sections are deep navy (--night), never black. --blue, --blue-hi
   and --blue-lo are legacy names the pages' inline CSS still reads: the
   accent, its hover background, and link text. The --sh-* tokens stay 1px
   hairline rings. */
:root{
  color-scheme:light;
  --white:#FFFFFF;        /* cards, panels, inputs, the nav */
  --plate:#F6F7F9;        /* the page */
  --wash:#EDF0F5;         /* stage behind drawn product UI, hover surface */
  --ink:#11141B;          /* headings, dark text buttons */
  --ink-2:#3E4450;        /* body copy, about 9:1 on the page */
  --muted:#646B7A;        /* captions, 4.8:1 on the page, 5.2:1 on white */
  --line:#E2E6ED;         /* hairlines, outline buttons */
  --line-hi:#C9D0DB;      /* a hairline under the pointer */
  --hair:rgba(17,20,27,.08);
  --night:#0C1222;        /* the dark sections: deep navy */
  --raised:#161D31;       /* a surface on --night */
  --on-black:#A7B0C2;     /* secondary text on --night */
  --on-black-2:#D8DDE7;   /* body text on --night */
  --line-dark:rgba(255,255,255,.10);
  --accent:#1E5BFF;       /* white text on it: 5.3:1 */
  --accent-hover:#1749D6;
  --accent-soft:#EAF0FF;  /* tinted chips and tags */
  --accent-ink:#1747C8;   /* text on --accent-soft */
  --accent-night:#7DA2FF; /* accent text on --night, 7.5:1 (--accent is 3.6:1 there) */
  --rec:#FF3B30;          /* macOS red: recording, struck filler words */
  --ok:#1F9D55;           /* success text and ticks */
  --warn:#C2410C;         /* amber tag text, on --warn-soft */
  --warn-soft:#FFF1E6;
  --win:#0078D4;          /* the Windows logo */
  --xmas-pine:#0E4D35;    /* the Christmas offer: pine green, white text 9.9:1 */
  --xmas-red:#D62839;     /* its tag, white text 5:1 */
  --xmas-red-soft:#FCECEE;
  --xmas-red-ink:#A3172A; /* text on --xmas-red-soft, 6.8:1 */
  --xmas-gold:#F2C14E;    /* the snowflake */
  --blue:var(--accent);
  --blue-hi:var(--accent-hover);
  --blue-lo:var(--accent-hover);
  --r-card:12px;
  --sh-control:0 0 0 1px var(--line);
  --sh-ink:none;
  --sh-card:0 0 0 1px var(--line);
  --sh-soft:0 1px 2px rgba(17,20,27,.04),0 8px 24px -12px rgba(17,20,27,.10); /* sparingly: product stages */
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}

body{
  font-family:var(--font);background:var(--plate);color:var(--ink);
  letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
code,pre,samp{font-family:var(--mono)}

/* The kit that draws the Mac app must keep the Mac's own font. */
.mk,.mk-win{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:normal;overflow-wrap:normal}

/* Headlines are one colour. .tone stays as a no-op for pages that carry it. */
.tone{color:inherit}

.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-tile{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--wash);color:var(--ink)}

/* Platform logos (symbols #os-apple and #os-windows): information, not
   decoration. Apple in the text colour, Windows in its own blue; both white
   on a filled accent button or band. 14px in a line of text, 16px in a
   button. The Apple glyph's leaf makes it sit high, so it drops 1px. */
.os{display:inline-block;width:14px;height:14px;flex:none;fill:currentColor;vertical-align:-2px}
.os-apple{position:relative;top:1px}
.os-win{fill:var(--win)}
.btn .os,.btn-alt .os,.btn-primary .os{width:16px;height:16px}
.btn .os-win,.btn-primary .os-win{fill:currentColor}
.btn-alt .os-win,.btn.btn-alt .os-win,.ghost .os-win{fill:var(--win)}

/* ── Type ── */
.h1{font-size:clamp(38px,4.2vw + 12px,72px);line-height:1;letter-spacing:-.045em;font-weight:450;max-width:100%;overflow-wrap:break-word;text-wrap:balance}
.h2{font-size:clamp(32px,2.4vw + 14px,48px);line-height:1.05;letter-spacing:-.04em;font-weight:450;max-width:100%;overflow-wrap:break-word;text-wrap:balance}
.h3{font-size:clamp(20px,.5vw + 17px,24px);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.sub{font-size:clamp(17px,.3vw + 15px,20px);line-height:1.45;letter-spacing:-.01em;color:var(--ink-2)}
/* Running copy on the docs, blog and legal pages is body text: --ink-2,
   9:1 on the page. Their own CSS set it in --muted, which is for captions
   (5:1). Captions, stamps and table notes keep --muted. */
.docs-body p:not(.mk-win *):not(.ctl-meta):not(.stamp),.docs-body li:not(.mk-win *),.docs-body dd:not(.mk-win *),
.prose p,.prose li,.doc p,.doc li,.headline p,.post-card p,article .faq details p,article .cta p,.tail{color:var(--ink-2)}
.body{font-size:16px;line-height:1.6;color:var(--ink-2)}
.small{font-size:13px;line-height:1.5;font-weight:500;color:var(--muted)}
.fine{font-size:13px;line-height:1.5;color:var(--muted)}
.label{font-family:var(--mono);font-size:12px;line-height:1.3;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
@media(max-width:520px){.h1,.h2{text-wrap:wrap}}
/* No one-word last lines ("policy." alone under a paragraph); ignored where unsupported. */
p,li,dd,figcaption{text-wrap:pretty}
/* A sale's two texts: the expiry script flips [hidden]; no page rule may override it. */
[data-sale][hidden],[data-list][hidden]{display:none!important}

/* ── Keycaps: Geist, not mono, so a key never reads as code. ── */
kbd{
  font-family:var(--font);font-size:12px;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:5px;
  background:var(--white);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 0 var(--line);
  vertical-align:-3px;white-space:nowrap;
}
kbd+kbd{margin-left:3px}

/* ── Buttons: 44px pills, no shadow. The primary action is the accent with
   white text; the secondary is white with a hairline and ink text. ── */
.btn,.btn-primary,.btn-alt,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:999px;border:0;
  font-family:var(--font);font-size:15px;font-weight:500;line-height:1;letter-spacing:0;
  text-decoration:none;white-space:nowrap;max-width:100%;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn,.btn-primary{background:var(--accent);color:#fff;box-shadow:none}
.btn:hover,.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-alt,.ghost,.btn.ghost,.btn.btn-alt{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-alt:hover,.ghost:hover,.btn.ghost:hover,.btn.btn-alt:hover{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
.btn-lg{height:48px;padding:0 26px;font-size:16px}
.btn[disabled],.btn-primary[disabled]{background:var(--wash);color:var(--muted);box-shadow:none;cursor:not-allowed}
.btn[disabled]:hover,.btn-primary[disabled]:hover{background:var(--wash);color:var(--muted)}
.btn .ic,.btn svg,.btn-alt svg{width:18px;height:18px;flex:none}

/* ── Cards and chips: hairline boxes ── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;padding:24px}
.card h3,.hub-card-h{font-size:17px;line-height:1.3;letter-spacing:-.015em;font-weight:500}
.chip{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;
  font-size:12px;font-weight:500;background:var(--wash);color:var(--ink-2);white-space:nowrap;
  text-transform:none;letter-spacing:normal;
}

/* ── Nav: a flat 64px bar with a hairline, white enough to stay white over
   the navy and accent bands it scrolls across ── */
.nav{
  position:sticky;top:0;z-index:50;padding:0;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:var(--white)}}

/* ── The Christmas offer bar: a slim festive strip above the nav on the pages
   that sell (home, /download, /windows). It carries [data-sale], so each
   page's expiry script hides it once the sale is over. ── */
.xmas-bar{background:var(--xmas-pine);color:#fff;font-size:14px;line-height:1.35}
.xmas-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;min-height:42px;padding-top:8px;padding-bottom:8px;text-align:center}
.xmas-flake{width:16px;height:16px;flex:none;color:var(--xmas-gold);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xmas-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--xmas-red);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.xmas-msg b{font-weight:600}
.xmas-bar a.xmas-cta{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55)}
.xmas-bar a.xmas-cta:hover{text-decoration-color:#fff}
@media(max-width:640px){.xmas-wide{display:none}.xmas-bar{font-size:13px}.xmas-in{gap:6px 8px}}
.nav-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  background:none;box-shadow:none;padding:0;border-radius:0;
  color:var(--ink);font-size:15px;font-weight:500;letter-spacing:-.01em;
}
.brand img{width:24px;height:24px;border-radius:6px}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:8px;background:none;box-shadow:none;padding:0;border-radius:0}
.nav-links a{
  color:var(--ink-2);font-size:14px;font-weight:400;
  padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:1;
  transition:color .15s ease,background-color .15s ease;
}
.nav-links a:hover{color:var(--ink);background:var(--wash)}
.nav-links a[aria-current],.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-dl{
  display:inline-flex;align-items:center;background:none;box-shadow:none;
  color:var(--ink-2);font-size:14px;font-weight:400;padding:6px 10px;border-radius:6px;
  transition:color .15s ease,background-color .15s ease;
}
.nav-dl:hover{color:var(--ink);background:var(--wash)}
.nav-pill{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:500;box-shadow:none;
  transition:background-color .15s ease;
}
.nav-pill:hover{background:var(--accent-hover);color:#fff}
@media(max-width:760px){.nav-links{display:none}}
@media(max-width:400px){.nav-dl{display:none}}

h1,h2,h3,h4,section,[id]{scroll-margin-top:80px}
h2 span[aria-hidden="true"]:empty,
h3 span[aria-hidden="true"]:empty,
.group-label span[aria-hidden="true"]:empty{
  font-size:0;line-height:0;width:0;height:0;overflow:hidden;
}

/* ── Sections ── */
.sec,.cta-band{padding:clamp(72px,9vw,128px) 0}
.sec--tight{padding-top:0}
/* A page header already ends in air: the first section under it doesn't add
   a full section's worth more (it left ~200px of nothing on legal and blog). */
.hero + .sec:not(.sec--tight){padding-top:clamp(32px,4vw,56px)}

/* ── Dark and accent bands: re-point the tokens and everything inside
   adapts. .on-black is the deep navy (--night), never black. .on-accent is
   a solid accent band: white text only, a white primary button with ink
   text and a white-outline secondary. Inside either, copy links go white. ── */
.on-black{
  background:var(--night);color:#fff;
  --line:var(--line-dark);--wash:rgba(255,255,255,.06);
  --ink-2:var(--on-black-2);--muted:var(--on-black);
  --link:#fff;--link-line:rgba(255,255,255,.4);
}
.on-accent{
  background:var(--accent);color:#fff;
  --line:rgba(255,255,255,.28);--wash:rgba(255,255,255,.12);
  --ink-2:#fff;--muted:#fff;
  --link:#fff;--link-line:rgba(255,255,255,.55);
}
.on-black h1,.on-black h2,.on-black h3,.on-black h4,.on-black .h1,.on-black .h2,.on-black .h3,
.on-accent h1,.on-accent h2,.on-accent h3,.on-accent h4,.on-accent .h1,.on-accent .h2,.on-accent .h3{color:#fff}
.on-black .label{color:var(--accent-night)}
.on-accent .label{color:#fff}
.on-black .btn,.on-black .btn-primary,.on-accent .btn,.on-accent .btn-primary{background:var(--white);color:var(--ink)}
.on-black .btn:hover,.on-black .btn-primary:hover,.on-accent .btn:hover,.on-accent .btn-primary:hover{background:var(--accent-soft);color:var(--ink)}
.on-black .btn-alt,.on-black .ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.on-black .btn-alt:hover,.on-black .ghost:hover{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.on-accent .btn-alt,.on-accent .ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.on-accent .btn-alt:hover,.on-accent .ghost:hover{background:var(--accent-hover);color:#fff;box-shadow:inset 0 0 0 1px #fff}
.on-black .btn .os-win,.on-accent .btn .os-win{fill:var(--win)}
.on-accent .btn-alt .os-win,.on-accent .os-win{fill:currentColor}
.on-black kbd,.on-accent kbd{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.on-black :focus-visible,.on-accent :focus-visible{outline-color:#fff}

/* ── Links in copy: the accent, a 1px underline at 40% that fills on hover.
   (.acts holds link lists on /thanks and /redeem but the buttons on /404.) ── */
p a,.body a,.sub a,.fine a,.small a,.plan-fine a,.faq a,.note a,.ws-compare-note a,.hero-other a,
.link,.doc a,.prose a,.tail a,.related a,.sources a,.crumb a,.hub-jump a:hover,
.stamp a,.key-note a,.acts a:not(.btn),.g-back a,.win-guide a,.btn-quiet,.linkbtn{
  color:var(--link,var(--accent));text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--link-line,rgba(30,91,255,.4));
}
p a:hover,.body a:hover,.sub a:hover,.fine a:hover,.small a:hover,.plan-fine a:hover,.faq a:hover,.note a:hover,.ws-compare-note a:hover,.hero-other a:hover,
.link:hover,.doc a:hover,.prose a:hover,.tail a:hover,.related a:hover,.sources a:hover,.crumb a:hover,
.stamp a:hover,.key-note a:hover,.acts a:not(.btn):hover,.g-back a:hover,.win-guide a:hover,.btn-quiet:hover,.linkbtn:hover{
  text-decoration-color:currentColor;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn-primary,.btn-alt,.ghost,.nav-links a,.nav-pill,.nav-dl,.roff-copy,.faq-plus,
  .hub-card,.hub-card-h a::after,.g-next-card,.g-next-card b::after,.dnp,.post-card{transition:none}
}

/* ── page-shell overrides ──────────────────────────────────────────────────
   Linked after each page's inline <style>, so equal-specificity rules here
   recolour buttons, nav, cards and bands on every other page without
   touching their markup. Selectors stay; only values change. */

html,body{overflow-x:clip;max-width:100%}
.wrap,.nav-in,.hero,.cta,.lead-block,.panel,.sec{min-width:0}
.wrap{overflow-wrap:break-word}
.sub,.body,.meta,.fine,.lede,.stamp{overflow-wrap:break-word;max-width:100%}
.cta > *{min-width:0}
.plate,.cta-band.plate{background:var(--plate)}
.nav{z-index:50}

.ws-compare-note,#privacy .note,p.fine.note,.price-note{font-size:13px;line-height:1.55;color:var(--muted)}
.price-note{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.price-note b{color:var(--ink)}

.ws-compare-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch}

.win-dl,.docs-body a.win-dl{
  background:var(--accent);color:#fff;box-shadow:none;
  border:0;border-radius:999px;font-weight:500;text-decoration:none;
}
.win-dl:hover,.docs-body a.win-dl:hover{background:var(--accent-hover);color:#fff;text-decoration:none}
.ver{
  display:inline-flex;align-items:center;
  background:var(--white);color:var(--muted);
  font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
}

code{background:var(--wash);border-radius:4px}
.prose code,.docs-body code,.wn-body code,.parse code,.acts code,.pid code,
.results code,.g-step code{background:var(--wash);font-family:var(--mono)}
.callout code,.card code,.req code{background:var(--wash)}
.mk code,.mk-win code,.g-win code{background:transparent;border-radius:0;font-family:inherit}

/* The app-icon tile, in the icon's own charcoal. */
.tile{
  background:linear-gradient(158deg,#3A3A3F 0%,#232327 42%,#141417 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--sh-soft);
}
.scene{background:var(--wash);border-radius:var(--r-card);box-shadow:none}
.pc-bar{background:var(--wash)}
.pc-win{border:1px solid var(--line);box-shadow:var(--sh-soft);border-radius:10px}
.g-card{box-shadow:var(--sh-soft)}

.card:has(> .ic-tile),.req{
  display:flex;flex-direction:column;align-items:flex-start;
}
.req,.hub-card,.post-card,.panel,.licence,.callout,.g-tip,.g-next-card,
div.note,.cta:has(.btns){
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;
}
.req{padding:28px}
.hub-card{padding:24px;transition:none}
.hub-card:hover,.hub-card:focus-within{border-color:var(--line-hi)}
.hub-card-h a::after{color:var(--accent)}
.post-card{padding:28px 30px;transition:background .15s ease}
.post-card:hover{background:var(--wash);transform:none}
.post-card:hover h2{color:var(--ink)}
.panel{padding:34px 32px 32px}
.callout{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  text-align:left;padding:16px 20px;max-width:min(540px,100%);box-sizing:border-box;
}
.cta:has(.btns){padding:34px 32px}
div.note{padding:22px 24px}

.card > .ic-tile,.hub-card > .ic-tile,.req > .ic-tile{margin-bottom:14px}
.lead-block > .ic-tile{display:grid;margin:0 auto 16px}
.req .ic-tile svg,.req .ic,.card .ic-tile svg,.card .ic-tile .ic,
.hub-card .ic,.callout .ic,.lead-block .ic{
  width:20px;height:20px;margin:0;flex:none;
}

.brew{max-width:100%}
.brew-row{background:var(--white);box-shadow:inset 0 0 0 1px var(--line);border:0;max-width:100%;min-width:0;overflow-x:auto}
.brew-row code{background:transparent}
.keybox,.safe,.chips span{background:var(--wash);border-color:var(--line)}
/* details.lost is /redeem's lost-key card; the 404 page's .lost is its whole
   wrapper and stays unboxed. */
details.lost,.tier-wrap{background:var(--white);border:1px solid var(--line);box-shadow:none;border-radius:var(--r-card)}

.licence .key,.plan-chip,.pro,.alpha{
  background:var(--wash);color:var(--ink-2);
}
/* "Latest" is a state, so it takes the tint. */
.wn-now{background:var(--accent-soft);color:var(--accent-ink)}
.tag-sync{border-color:var(--line);color:var(--ink-2)}
.acts .n,.g-step .n{
  background:var(--accent-soft);color:var(--accent-ink);
}
.step .n{color:var(--accent)}

.faq summary::after{color:var(--ink)}
.faq summary:hover{color:var(--ink)}
details.wn-item summary:hover .wn-v{color:var(--ink)}

.roff{
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;
  padding:16px 20px;
}
.roff-code{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;
  border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.04em;background:var(--wash);color:var(--ink);
  box-shadow:none;white-space:nowrap;
}
.roff-copy{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);border:0;
  border-radius:999px;font-family:inherit;font-weight:500;font-size:13px;
  height:32px;padding:0 14px;line-height:1;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.roff-copy:hover{background:var(--wash);color:var(--ink)}
.roff-status{color:var(--muted)}

.dnp{
  background:var(--white);border:1px solid var(--line);box-shadow:none;border-radius:var(--r-card);
  color:inherit;
}
.dnp:hover{border-color:var(--line-hi);transform:none}
.dnp b{color:var(--ink)}

.docs-switch{background:var(--wash);border-radius:10px}
.docs-switch a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--line);background:var(--white);border-radius:7px}
/* Four docs pages now: two by two in the 236 px rail, so no label breaks mid-word. */
.docs-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.docs-switch a{white-space:nowrap;font-size:12.5px;line-height:1.3}

@media(min-width:1000px){
  .toc-rail{top:80px;max-height:calc(100vh - 80px)}
}
.docs-body h2,.docs-body h3,.docs-body section,.docs-body [id],.ctl{scroll-margin-top:80px}

.field input:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:2px;
  border-color:var(--accent);box-shadow:none;
}

.g-next-card:hover{transform:none;border-color:var(--line-hi)}
.g-next-card b::after{color:var(--accent)}

@media(max-width:760px){
  .plat .btn,.plat .btn-alt{width:100%}
}
@media(max-width:520px){
  .btn,.btn-alt,.ghost,#windows .btn{height:44px;padding:0 20px;font-size:15px}
  .panel{padding:26px 20px 24px}
  .hero .btns,.cta-band .btns,.final .btns{flex-direction:column;align-items:stretch;width:100%}
  .hero .btns > a,.hero .btn,.hero .btn-alt,
  .cta-band .btns > a,.cta-band .btn,.cta-band .btn-alt,
  .final .btns > a,.final .btn,.final .btn-alt,
  .cta > .btn,.cta > .btn-alt,.plan .btn{width:100%}
  .ws-compare,.ws-compare-scroll{min-width:0;max-width:100%}
  .ws-compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .film-launch{max-width:calc(100% - 24px)}
}
@media(max-width:400px){
  .nav-in{gap:8px}
  .brand{font-size:14px}
  .brand img{width:22px;height:22px;border-radius:6px}
  .nav-pill{padding:0 12px}
  .btns{width:100%}
}