/* ============================================================================
   site/help.css: Help & Learn on the website. Loaded after landing.css, which supplies the tokens (--bg, --fg, --mut, --line, --accent) and the bar along the top.
   Made to be READ: a measure of about 70 characters, a generous line, the contents down one side and "on this page" down the other when there is room, and one
   column on anything narrower. No web fonts, no images but the pictures in the pages, nothing from anywhere else.
   ========================================================================= */
.helppage{--panel:#0e0f14;--panel2:#13151c;--hl:rgba(78,163,216,.16);--read:#e7e7ec}
.helppage .nav{background:rgba(5,5,7,.78)}
.helppage main{display:block}

/* ---- the search ---- */
.hbar{margin-top:56px;border-bottom:1px solid var(--line);background:var(--bg2)}
.hwrap{width:min(1240px,100% - 40px);margin-inline:auto}
.hbar .hwrap{padding:12px 0}
.hs{position:relative;display:none;max-width:760px}
.js .hs{display:block}
.hs__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hs__in{width:100%;height:46px;padding:0 18px 0 46px;border-radius:12px;border:1px solid var(--line);background:#0b0c10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8d97' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px 50%/20px;color:var(--fg);font:inherit;font-size:16px}
.hs__in::placeholder{color:var(--dim)}
.hs__in:focus{outline:none;border-color:var(--accent-hi);box-shadow:0 0 0 3px var(--hl)}
.hs__res{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:min(70vh,560px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.5);padding:6px}
.hs__res[hidden]{display:none}
.hs__hit{display:block;padding:10px 12px;border-radius:8px}
.hs__hit:hover,.hs__hit[aria-selected="true"]{background:var(--panel2)}
.hs__k{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent-hi)}
.hs__t{display:block;font-weight:600;color:var(--fg);margin:2px 0}
.hs__s{display:block;font-size:14px;color:var(--mut);line-height:1.45}
.hs__s mark{background:var(--hl);color:var(--fg);border-radius:3px;padding:0 2px}
.hs__none{padding:14px 12px;color:var(--mut)}
.hub__search .hs{margin:0 auto;max-width:680px}
.hub__search .hs__in{height:56px;font-size:18px;border-radius:16px;padding-left:54px;background-position:18px 50%;background-size:22px}
.hub__search .hs__res{text-align:left}

/* ---- the page: contents | the article | on this page ---- */
.hw{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr) minmax(190px,240px);gap:clamp(24px,3.5vw,56px);width:min(1380px,100% - 40px);margin:0 auto;padding:34px 0 80px;align-items:start}
.hw--wide{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}
.hw__main{min-width:0;max-width:760px}
.hw--wide .hw__main{max-width:980px}
.toc{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;padding-right:6px;font-size:14.5px;scrollbar-width:thin}
.toc__head{list-style:none;cursor:default;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.toc__head::-webkit-details-marker{display:none}
.toc__grp{border-top:1px solid var(--line);padding:6px 0}
.toc__grp>summary{cursor:pointer;list-style:none;padding:7px 0;font-weight:650;color:var(--fg);display:flex;justify-content:space-between}
.toc__grp>summary::-webkit-details-marker{display:none}
.toc__grp>summary::after{content:"+";color:var(--dim);font-weight:400}
.toc__grp[open]>summary::after{content:"−"}
.toc__area{margin:10px 0 2px;font-size:12px;color:var(--dim);letter-spacing:.02em}
.toc ul{list-style:none;margin:0;padding:0}
.toc li a{display:block;padding:5px 10px;margin-left:-10px;border-radius:8px;color:var(--mut);line-height:1.35}
.toc li a:hover{color:var(--fg);background:var(--panel2)}
.toc li a[aria-current="page"]{color:var(--fg);background:var(--hl);font-weight:600}
.toc__more{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.toc__more a{color:var(--accent-hi);font-weight:600}
.otp{position:sticky;top:78px;font-size:14px;max-height:calc(100vh - 96px);overflow:auto}
.otp p{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.otp ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.otp a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--mut);line-height:1.35}
.otp a:hover{color:var(--fg)}
.otp a.is-here{color:var(--fg);border-left-color:var(--accent-hi)}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--dim);margin:0 0 22px}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--fg)}

/* ---- the words ---- */
.ah h1{font-size:clamp(2.1rem,3.2vw + .8rem,3.2rem);letter-spacing:-.03em;line-height:1.08}
.ah .lede{margin:16px 0 0;max-width:none;text-align:left;font-size:clamp(1.1rem,.5vw + 1rem,1.3rem)}
.ah .eyebrow{margin-bottom:10px}
.prose{margin-top:34px;font-size:1.075rem;line-height:1.72;color:var(--read)}
.prose>*+*{margin-top:1.05em}
.prose h2{font-size:1.55rem;letter-spacing:-.02em;line-height:1.2;margin-top:2.1em;padding-top:.2em;scroll-margin-top:84px}
.prose p,.prose li{max-width:70ch}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.45em}
.prose a{color:var(--accent-hi);text-decoration:underline;text-decoration-color:rgba(78,163,216,.4);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
kbd{display:inline-block;min-width:1.6em;padding:.08em .5em;border:1px solid rgba(255,255,255,.2);border-bottom-width:2px;border-radius:6px;background:var(--panel2);font:600 .86em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--fg);text-align:center}
.steps{list-style:none;padding:0!important;counter-reset:s}
.steps li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px 14px 56px;border:1px solid var(--line);border-radius:12px;background:var(--panel);counter-increment:s;max-width:none!important}
.steps li+li{margin-top:10px}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--hl);color:var(--accent-hi);font-weight:700;font-size:14px;display:grid;place-items:center}
.steps__note{font-size:.93rem;color:var(--mut)}
.call{border:1px solid var(--line);border-left-width:4px;border-radius:12px;background:var(--panel);padding:14px 18px}
.call strong{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.call p{margin:0;max-width:none}
.call--tip{border-left-color:var(--teal)}.call--tip strong{color:var(--teal)}
.call--warn{border-left-color:var(--gold)}.call--warn strong{color:var(--gold)}
.call--example{border-left-color:var(--accent-hi)}.call--example strong{color:var(--accent-hi)}
.keys{width:100%;border-collapse:collapse;font-size:1rem}
.keys th,.keys td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.keys th{white-space:nowrap;font-weight:400;width:1%}
.fig{margin:1.6em 0}
.fig img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.fig figcaption{margin-top:8px;font-size:.92rem;color:var(--mut);line-height:1.5}
.terms dt{font-weight:650;margin-top:.9em}
.terms dd{margin:2px 0 0;color:var(--mut)}
.inapp{display:flex;gap:12px;align-items:baseline;padding:10px 14px;border:1px dashed rgba(255,255,255,.18);border-radius:10px;color:var(--mut);font-size:.98rem}
.inapp span{flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.go a{font-weight:600}

/* ---- keep going, before and after, try it ---- */
.more,.pn,.try{margin-top:56px}
.more h2{font-size:1.3rem;margin-bottom:14px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cards a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color .2s,transform .2s var(--ease)}
.cards a:hover{border-color:rgba(78,163,216,.55);transform:translateY(-2px)}
.cards__k{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent-hi)}
.cards__t{font-weight:650;font-size:1.05rem;line-height:1.3;color:var(--fg)}
.cards__s{font-size:.93rem;color:var(--mut);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cards--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cards--4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;font-weight:650;color:var(--fg)}
.pn a:hover{border-color:rgba(78,163,216,.55)}
.pn a span{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pn__next{text-align:right}
.try{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:26px 28px;border-radius:20px;border:1px solid var(--line);background:radial-gradient(120% 140% at 0% 0%,rgba(43,143,214,.22),transparent 60%),var(--panel)}
.try h2{font-size:1.35rem;margin:0}
.try p{margin:6px 0 0;color:var(--mut)}
.try__go{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.try .btn{height:44px;font-size:16px}
.try .link{font-size:15px}
.stamp{margin-top:34px;font-size:13px;color:var(--dim);max-width:70ch}

/* ---- the front page of Help ---- */
.hub__hero{position:relative;text-align:center;padding:clamp(110px,16vh,170px) 0 clamp(34px,6vh,60px);overflow-x:clip}
.hub__hero{z-index:2}
.hub__hero::before{content:"";position:absolute;left:50%;top:-20%;width:min(1000px,140vw);height:560px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,143,214,.28),rgba(45,212,191,.06) 55%,transparent 72%);pointer-events:none}
.hub__hero>.hwrap{position:relative}
.hub__hero h1{font-size:clamp(2.4rem,5.2vw + .6rem,4.6rem);max-width:15ch;margin:0 auto}
.hub__hero .lede{margin-top:20px}
.hub__search{margin-top:30px}
.hub__jobs{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;color:var(--dim);font-size:14px}
.hub__jobs a{padding:5px 12px;border:1px solid var(--line);border-radius:999px;color:var(--mut)}
.hub__jobs a:hover{color:var(--fg);border-color:rgba(78,163,216,.55)}
.hub__body{padding-bottom:90px}
.hub__body>section{margin-top:64px}
.hub__start{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:30px 34px;border-radius:22px;border:1px solid var(--line);background:radial-gradient(120% 160% at 100% 0%,rgba(45,212,191,.16),transparent 55%),radial-gradient(120% 160% at 0% 0%,rgba(43,143,214,.22),transparent 60%),var(--panel)}
.hub__start h2{font-size:1.8rem;margin:0 0 8px}
.hub__start p{margin:0;max-width:60ch;color:var(--mut)}
.hub__start .eyebrow{margin-bottom:8px}
.hub__h{font-size:clamp(1.6rem,2vw + 1rem,2.2rem);letter-spacing:-.03em}
.hub__sub{margin:8px 0 20px;color:var(--mut)}
.hub__body .hub__h+.cards{margin-top:20px}
.hub__grp{margin-top:26px}
.hub__grp h3{font-size:1.15rem;letter-spacing:-.01em;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hub__area{display:inline-block;vertical-align:top;width:min(100%,300px);margin:16px 24px 0 0}
.hub__area h4{font-size:13px;letter-spacing:.04em;color:var(--dim);font-weight:600;margin-bottom:6px}
.hub__area ul{list-style:none;margin:0;padding:0}
.hub__area a{display:block;padding:4px 0;color:var(--mut);line-height:1.35}
.hub__area a:hover{color:var(--accent-hi)}
.hub__more{margin-top:26px}
.hub__note{padding:24px 28px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.hub__note h2{font-size:1.25rem}
.hub__note p{margin:8px 0 0;color:var(--mut);max-width:70ch}
.hub__note a{color:var(--accent-hi);text-decoration:underline}

/* ---- every control ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.chips a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--mut)}
.chips a:hover{color:var(--fg);border-color:rgba(78,163,216,.55)}
.ctl h2{font-size:1.4rem;margin:2em 0 .6em;scroll-margin-top:84px}
.ctl__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.ctl__list a{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ctl__list a:hover{border-color:rgba(78,163,216,.55)}
.ctl__list span{font-size:.9rem;color:var(--mut);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- narrower windows: the contents fold to the top, "on this page" goes ---- */
@media (max-width:1180px){
  .hw{grid-template-columns:minmax(220px,260px) minmax(0,1fr)}
  .otp{display:none}
}
@media (max-width:860px){
  .hw,.hw--wide{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:20px}
  .toc{position:static;max-height:none;overflow:visible}
  .toc__all{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--panel)}
  .toc__all:not([open])>summary{margin:0}
  .toc__head{cursor:pointer;margin:0;display:flex;justify-content:space-between}
  .toc__head::after{content:"+";color:var(--dim)}
  .toc__all[open]>.toc__head::after{content:"−"}
  .pn{grid-template-columns:1fr}
  .pn__next{text-align:left}
  .try{padding:22px}
}
@media (max-width:520px){
  .steps li{padding:12px 14px 12px 50px}
  .steps li::before{left:12px;top:12px}
  .hub__start{padding:22px}
  .inapp{flex-direction:column;gap:2px}
}
/* The tiny "details" for the contents is open on a wide window (it is the sidebar there) and only a fold on a narrow one. */
@media (min-width:861px){.toc__head{pointer-events:none}}
@media (prefers-reduced-motion:reduce){.cards a{transition:none}.cards a:hover{transform:none}}
@media print{.nav,.hbar,.toc,.otp,.try,.pn,.more,.foot{display:none!important}.hw{display:block;padding:0}body{background:#fff;color:#000}.prose,.prose a{color:#000}.hw__main{max-width:none}}
/* a table of keys never makes the page wider than the window: it scrolls on its own */
.keys-wrap{overflow-x:auto;max-width:100%;border-radius:12px;-webkit-overflow-scrolling:touch}
.keys-wrap:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.keys th{white-space:normal}
@media (min-width:520px){.keys th{white-space:nowrap}}