[hidden]{display:none!important}
:root{
  --ink:#2F3439; --slate:#5F666B; --hair:#DFE3E6; --win:#F5F6F7; --haze:#EDF2F5; --card:#FFFFFF;
  --bay:#22394A; --bay-ink:#F0F2F3; --bay-dim:#B3BAC0;
  --logo-cup:#22394A; --logo-accent:#C0362C;
  --orange:#C0362C; --orange-h:#A92E25; --orange-p:#902720;
  --glass:rgba(250,251,252,.86); --pillshadow:0 8px 24px rgba(30,35,40,.16),0 1px 3px rgba(30,35,40,.12),inset 0 0 0 .5px rgba(30,35,40,.08),inset 0 1px 0 rgba(255,255,255,.85);
  --fill2:rgba(47,52,57,.09); --rec:#E5484D; --ok:#3F7268; --finish:#2F3439; --finish-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(30,35,40,.06),0 18px 40px rgba(30,35,40,.10),0 0 0 1px rgba(30,35,40,.05);
  --navbg:rgba(245,246,247,.86);
  --mb-bg:rgba(246,246,248,.55); --mb-ink:#1D1D1F;
  /* app windows */
  --w-bg:#FFFFFF; --w-side:#F2F3F5; --w-bar:#ECEDEF; --w-text:#1D1D1F; --w-dim:#6E6E73; --w-line:rgba(0,0,0,.10); --w-bubble:#E9E9EB; --w-field:#FFFFFF; --w-docbg:#F0F2F5; --w-sel:rgba(0,0,0,.07);
  --gm-bg:#F7F7FA; --gm-sel:#FFD6D0; --gm-compose:#FFD6D0; --gm-head:#FEF2F0; --gm-send:#DD2F29; --gm-search:#E9EEF6; --gm-tx:#1F1F1F; --gm-dim:#5E5E5E;
  --nt-side:#ECEBEA; --nt-sel:#F2B33D; --nt-row:#DADADA; --nt-tx:#1D1D1F; --nt-dim:#7A7A7E;
  --no-side:#F8F8F7; --no-main:#FFFFFF; --no-tx:#37352F; --no-dim:rgba(55,53,47,.6); --no-sel:rgba(55,53,47,.08); --no-tag:#FADEC9; --no-tagtx:#8A4A1A;
  --sl-main:#FFFFFF;
  --h1:rgba(34,57,74,.25); --h2:rgba(34,57,74,.48); --h3:rgba(34,57,74,.72); --h4:#22394A;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ink:#F0F2F3; --slate:#B3BAC0; --hair:rgba(240,242,243,.12); --win:#24292D; --haze:#1C2D3A; --card:#2F3439;
  --bay:#1A2F3E; --orange:#D4473C; --orange-h:#E0574B; --orange-p:#B83A30; --logo-cup:#EDF2F5; --logo-accent:#E0574B;
  --glass:rgba(36,41,45,.84); --pillshadow:0 8px 24px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(240,242,243,.14),inset 0 1px 0 rgba(240,242,243,.08);
  --fill2:rgba(240,242,243,.11); --rec:#FF6369; --ok:#6FB3A4; --finish:#F0F2F3; --finish-ink:#24292D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.35),0 0 0 1px rgba(240,242,243,.08);
  --navbg:rgba(36,41,45,.86); --mb-bg:rgba(30,30,32,.55); --mb-ink:#F2F2F4;
  --w-bg:#1E1F22; --w-side:#26272A; --w-bar:#2A2B2E; --w-text:#ECECEE; --w-dim:#9A9AA0; --w-line:rgba(255,255,255,.10); --w-bubble:#3A3A3C; --w-field:#26272A; --w-docbg:#17181A; --w-sel:rgba(255,255,255,.08);
  --gm-bg:#1B1B1E; --gm-sel:#36201D; --gm-compose:#602A25; --gm-head:#36201D; --gm-send:#ED4B40; --gm-search:#2D2F33; --gm-tx:#E3E3E3; --gm-dim:#A0A0A0;
  --nt-side:#2A2A2C; --nt-sel:#C8952F; --nt-row:#3A3A3C; --nt-tx:#ECECEE; --nt-dim:#98989D;
  --no-side:#202020; --no-main:#191919; --no-tx:rgba(255,255,255,.86); --no-dim:rgba(255,255,255,.5); --no-sel:rgba(255,255,255,.08); --no-tag:#5A3620; --no-tagtx:#F6C9A6;
  --sl-main:#1A1D21; --h1:rgba(240,242,243,.2); --h2:rgba(240,242,243,.4); --h3:rgba(240,242,243,.65); --h4:#F0F2F3; color-scheme:dark }}
:root[data-theme="dark"]{
  --ink:#F0F2F3; --slate:#B3BAC0; --hair:rgba(240,242,243,.12); --win:#24292D; --haze:#1C2D3A; --card:#2F3439;
  --bay:#1A2F3E; --orange:#D4473C; --orange-h:#E0574B; --orange-p:#B83A30; --logo-cup:#EDF2F5; --logo-accent:#E0574B;
  --glass:rgba(36,41,45,.84); --pillshadow:0 8px 24px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(240,242,243,.14),inset 0 1px 0 rgba(240,242,243,.08);
  --fill2:rgba(240,242,243,.11); --rec:#FF6369; --ok:#6FB3A4; --finish:#F0F2F3; --finish-ink:#24292D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.35),0 0 0 1px rgba(240,242,243,.08);
  --navbg:rgba(36,41,45,.86); --mb-bg:rgba(30,30,32,.55); --mb-ink:#F2F2F4;
  --w-bg:#1E1F22; --w-side:#26272A; --w-bar:#2A2B2E; --w-text:#ECECEE; --w-dim:#9A9AA0; --w-line:rgba(255,255,255,.10); --w-bubble:#3A3A3C; --w-field:#26272A; --w-docbg:#17181A; --w-sel:rgba(255,255,255,.08);
  --gm-bg:#1B1B1E; --gm-sel:#36201D; --gm-compose:#602A25; --gm-head:#36201D; --gm-send:#ED4B40; --gm-search:#2D2F33; --gm-tx:#E3E3E3; --gm-dim:#A0A0A0;
  --nt-side:#2A2A2C; --nt-sel:#C8952F; --nt-row:#3A3A3C; --nt-tx:#ECECEE; --nt-dim:#98989D;
  --no-side:#202020; --no-main:#191919; --no-tx:rgba(255,255,255,.86); --no-dim:rgba(255,255,255,.5); --no-sel:rgba(255,255,255,.08); --no-tag:#5A3620; --no-tagtx:#F6C9A6;
  --sl-main:#1A1D21; --h1:rgba(240,242,243,.2); --h2:rgba(240,242,243,.4); --h3:rgba(240,242,243,.65); --h4:#F0F2F3; color-scheme:dark }


*{box-sizing:border-box}
body{background:var(--win);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;line-height:1.45}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navbg)}
a{color:inherit}
.mono{font-family:var(--mono)}
.wrap{max-width:1200px;margin:0 auto}
.band{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.section{padding-block:clamp(80px,9vw,136px)}
h1,h2{text-wrap:balance;margin:0}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navbg);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--hair)}
.top nav{height:64px;display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
/* the lockup (logo board 10.1): the cup's flat top on the cap height, the cup ending on the baseline, the saucer below it like the tail of the p.
   Mark 0.844em tall, 0.134em below the baseline, 0.3em from the word. 22px in the top bar (Patrick, Nov 5: a bit bigger than the board's 19px), 16px in the footer. */
.brand{display:inline-block;white-space:nowrap;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro",system-ui,sans-serif;font-size:22px;font-weight:650;letter-spacing:-.015em;line-height:1;margin-right:auto}
.brand svg{display:inline-block;height:.844em;width:.994em;vertical-align:-.134em;margin-right:.3em}
.fgrid .brand{font-size:16px}
.navlinks{display:flex;gap:clamp(14px,2.4vw,32px);font-size:14px;font-weight:500}
.navlinks a{color:var(--slate);text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.top .navbuy{display:none}
.top.scrolled .navbuy{display:inline-flex}
@media (max-width:600px){ .top.scrolled .navlinks{display:none} }

/* buttons */
.buy,.dl{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:56px;padding:0 28px;border-radius:16px;font:inherit;font-size:18px;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s,box-shadow .12s,transform .08s,border-color .12s}
.buy{background:var(--orange);color:#fff;border:0;box-shadow:0 1px 2px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.2)}
.buy .mono{font-weight:600;letter-spacing:-.03em}
.buy:hover{background:var(--orange-h);box-shadow:0 6px 16px rgba(144,39,32,.28),0 1px 2px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.18)}
.buy:active{background:var(--orange-p);transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.22)}
.buy.sm{height:34px;padding:0 14px;border-radius:10px;font-size:14px}
.dl{background:transparent;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.dl:hover{border-color:color-mix(in srgb,var(--ink) 45%,transparent);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.dl:active{transform:translateY(1px)}
.dl svg{flex:none}
.ctarow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}


/* footer */
footer.site{border-top:1px solid var(--hair);padding-block:56px 44px}
.fgrid{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between}
.fcols{display:flex;flex-wrap:wrap;gap:28px 56px}
.fcol{display:flex;flex-direction:column;gap:10px;font-size:14px;min-width:110px}
.fcol h3{margin:0 0 2px;font-size:13px;font-weight:600}
.fcol a{color:var(--slate);text-decoration:none}.fcol a:hover{color:var(--ink)}
.fbot{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:14px;color:var(--slate)}



/* Docs pages: one sidebar of pages on the left, the article in a readable column, "On this page" on the right. */
.docs .top .navbuy{display:inline-flex}
@media (max-width:640px){ .docs .top .navlinks{display:none} }

.doc{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:clamp(32px,4.4vw,64px);padding-block:clamp(40px,5vw,72px) clamp(72px,8vw,120px);align-items:start}

/* left: pages */
.side{position:sticky;top:96px;margin-left:-10px;height:calc(100vh - 96px - 32px);max-height:440px;display:flex;flex-direction:column;gap:2px}
.side .grp{display:flex;flex-direction:column;gap:2px}
.side .grp.legal{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair)}
.side .grp.legal a{font-size:14px}
.side a{display:block;padding:6px 10px;border-radius:8px;font-size:15px;color:var(--slate);text-decoration:none;transition:background-color .12s,color .12s}
.side a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.side a[aria-current="page"]{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pages-btn{display:none}

/* middle: article */
.art{min-width:0;max-width:68ch}
.eyebrow{font-family:var(--mono);font-size:12px;color:var(--slate);margin:0 0 14px}
.art h1{font-size:clamp(38px,4.2vw,56px);line-height:1.02;font-weight:700;letter-spacing:-.035em;margin:0}
.art .intro{margin:18px 0 0;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--slate)}
.art .intro ~ .intro{font-size:17px;line-height:1.62;color:var(--ink);margin-top:16px}
.art h2{font-size:clamp(22px,1.9vw,26px);line-height:1.2;font-weight:650;letter-spacing:-.02em;margin:52px 0 0;padding-top:30px;border-top:1px solid var(--hair);scroll-margin-top:92px}
.art h2:first-of-type{margin-top:44px}
.art h3{font-size:18px;font-weight:650;letter-spacing:-.01em;margin:32px 0 0}
.art p,.art li{font-size:17px;line-height:1.62}
.art p{margin:16px 0 0}
.art ul,.art ol{margin:14px 0 0;padding-left:1.35em}
.art li{margin:8px 0 0;padding-left:.2em}
.art li::marker{color:var(--slate)}
.art ol li::marker{font-family:var(--mono);font-size:14px}
.art a{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:3px;text-decoration-thickness:1px}
.art a:hover{text-decoration-color:var(--ink)}
.art strong{font-weight:650}
.art code{font-family:var(--mono);font-size:.86em;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:5px;padding:1px 4px;overflow-wrap:anywhere}
.art .updated{margin-top:44px;font-family:var(--mono);font-size:12.5px;color:var(--slate)}
.art .qline{margin-top:24px}
.art .qline > strong:first-child{display:block;margin-bottom:2px}

/* tables sit on a card, like the compare table */
.tbl{margin:22px 0 0;overflow-x:auto;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--hair)}
.tbl table{width:100%;border-collapse:collapse;min-width:520px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.5}
.tbl th{font-size:13px;font-weight:600;color:var(--slate)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:550}
.tbl.narrow table{min-width:0}

/* download button on the Download page */
.dlcta{margin:28px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dlcta .dl{background:var(--ink);color:var(--win);border-color:transparent;text-decoration:none}
.dlcta .dl:hover{background:color-mix(in srgb,var(--ink) 88%,var(--win))}
.dlcta .req{font-family:var(--mono);font-size:12.5px;color:var(--slate);margin:0}

/* FAQ */
.faq + h2{border-top:0;padding-top:14px}
.faq{margin-top:10px}
.faq details{border-bottom:1px solid var(--hair);scroll-margin-top:92px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 0;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:1.8px solid var(--slate);border-bottom:1.8px solid var(--slate);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq .ans{padding:0 36px 20px 0}
.faq .ans p:first-child{margin-top:0}

/* cookie banner */
.cookie{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:16px;z-index:70;width:min(380px,calc(100% - 32px));background:var(--card);color:var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:18px 18px 16px}
.cookie p{margin:0;font-size:14.5px;line-height:1.5;color:var(--slate)}
.cookie .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.cookie button{height:40px;border-radius:11px;border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.cookie button:hover{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.cookie .x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--slate)}
.linkbtn{all:unset;cursor:pointer;color:var(--slate);font-size:14px}
.linkbtn:hover{color:var(--ink)}
.linkbtn:focus-visible{outline:3px solid color-mix(in srgb,var(--orange) 55%,transparent);outline-offset:2px;border-radius:4px}

/* long pages: a collapsed "On this page" menu above the text */
.jump{display:block;max-width:440px;margin:28px 0 0;border:1px solid var(--hair);border-radius:12px;background:var(--card)}
.jump summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:10px}
.jump summary::-webkit-details-marker{display:none}
.jump summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.6px solid var(--slate);border-bottom:1.6px solid var(--slate);transform:rotate(45deg) translate(-2px,-2px)}
.jump[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.jump nav{padding:0 8px 10px;display:flex;flex-direction:column}
.jump a{padding:7px 8px;border-radius:7px;font-size:15px;color:var(--slate);text-decoration:none}
.jump a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}

/* tablet portrait and phone: the page list folds into a bar under the top bar */
@media (max-width:860px){
  .doc{display:block;padding-top:0}
  .side{position:static;margin-left:0;height:auto;max-height:none;display:none;padding:8px 0 18px;border-bottom:1px solid var(--hair);margin-bottom:8px}
  .side .grp.legal{margin-top:12px}
  .side.open{display:flex}
  .pages-btn{all:unset;box-sizing:border-box;position:sticky;top:64px;z-index:15;display:flex;align-items:center;gap:10px;width:100%;height:50px;cursor:pointer;background:var(--navbg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hair);font-size:15px;color:var(--slate)}
  .pages-btn b{color:var(--ink);font-weight:600}
  .pages-btn::after{content:"";margin-left:auto;margin-right:4px;width:7px;height:7px;border-right:1.6px solid var(--slate);border-bottom:1.6px solid var(--slate);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
  .pages-btn[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
  .pages-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--orange) 55%,transparent);outline-offset:-3px}
  .side .grp a{font-size:16px;padding:9px 10px}
  .art{padding-top:32px;max-width:none}
  .art h2,.faq details{scroll-margin-top:136px}
}
@media (max-width:600px){
  .art p,.art li{font-size:16.5px}
  .faq .ans{padding-right:0}
  .cookie .acts button{height:44px}
}