@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   FindAndClose — Help Centre
   Loaded AFTER styles.css. Every colour, size, radius, shadow and easing here
   is a var() into the design system; nothing in this file redeclares a token.
   The only custom properties declared below are *local* layout/theming props
   (--cat-fg, --cat-bg, --cat-ink, --shot-x…), scoped to help-centre components.
   They are new names, not overrides of design-system tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── header ──────────────────────────────────────────────────────────────
   The site nav is position:fixed and transparent until app.js adds .is-stuck.
   The help centre does not load app.js, and its hero is dark, so a transparent
   ink-coloured nav would be invisible. It is opaque and sticky here instead. */
.nav--help{
  position:sticky;top:0;right:auto;bottom:auto;left:auto;
  background:#fff;border-bottom-color:var(--line);
}
.nav--help .nav__inner{gap:16px}
.nav--help__l{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.hbrand__tag{
  align-self:center;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--brand-25);color:var(--brand-700);
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--brand-100);
  white-space:nowrap;
}
.hlang{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--ff);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:var(--tr-sm);min-height:34px;
  transition:border-color var(--t),background-color var(--t);
}
.hlang:hover{border-color:var(--brand-200);background:var(--brand-25)}
.hlang select{
  border:0;background:transparent;color:inherit;font:inherit;
  padding:0;margin:0;cursor:pointer;
}
.hlang select:focus-visible{box-shadow:none;outline:2px solid var(--brand);outline-offset:2px}

/* ── dark hero band ──────────────────────────────────────────────────── */
.hhero{
  /* NOT overflow:hidden — the search results panel is absolutely positioned
     inside this band and has to hang below it. The decorative layers are
     clipped by their own wrapper instead. z-index keeps the open panel above
     the section that follows. */
  position:relative;isolation:isolate;z-index:2;
  background:linear-gradient(158deg,var(--ink-deep) 0%,var(--ink) 46%,#152a63 100%);
  padding:72px 0 76px;text-align:center;
}
.hhero--slim{padding:40px 0 44px}
.hhero__bg{
  position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;
}
.hhero__glow{
  position:absolute;inset:-40% -10% auto;height:170%;pointer-events:none;
  background:
    radial-gradient(46% 42% at 22% 34%,rgba(99,91,255,.42),transparent 70%),
    radial-gradient(38% 38% at 78% 22%,rgba(0,163,224,.24),transparent 72%),
    radial-gradient(40% 40% at 60% 88%,rgba(11,180,166,.16),transparent 74%);
}
.hhero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 78%);
}
.hhero .eyebrow{color:var(--lilac);justify-content:center}
.hhero h1{
  margin:14px 0 0;font-family:var(--ff-d);font-weight:700;
  font-size:var(--fs-3xl);line-height:1.08;letter-spacing:var(--tr-xl);
  color:#fff;text-wrap:balance;
}
.hhero--slim h1{font-size:var(--fs-2xl)}
.hhero__sub{
  margin:14px auto 0;max-width:56ch;
  font-size:var(--fs-lg);line-height:1.6;color:#C4D2E4;text-wrap:pretty;
}
.hhero__meta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  font-size:var(--fs-xs);color:#9FB2C9;
}
.hhero__meta span{display:inline-flex;align-items:center;gap:7px}
.hhero__meta .ico{color:var(--mint)}

/* ── search ──────────────────────────────────────────────────────────── */
.hsearch{position:relative;max-width:680px;margin:30px auto 0;text-align:left;z-index:5}
.hhero--slim .hsearch{margin-top:20px;max-width:600px}
.hsearch__f{position:relative;display:flex;align-items:center}
.hsearch__f>.ico{
  position:absolute;left:18px;color:var(--slate-400);pointer-events:none;
}
.hsearch input{
  width:100%;min-height:58px;padding:16px 108px 16px 50px;
  border:1px solid transparent;border-radius:var(--r-md);
  background:#fff;color:var(--ink);
  font-family:var(--ff);font-size:var(--fs-lg);letter-spacing:var(--tr-md);
  box-shadow:var(--sh-lg);
  transition:box-shadow var(--t),border-color var(--t);
}
.hhero--slim .hsearch input{min-height:46px;padding:11px 98px 11px 46px;font-size:var(--fs-md)}
.hhero--slim .hsearch__f>.ico{left:16px}
/* type="search" paints its own clear button in WebKit, which sat next to ours */
.hsearch input::-webkit-search-cancel-button,
.hsearch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.hsearch input::placeholder{color:var(--slate-300)}
.hsearch input:hover{border-color:var(--brand-200)}
.hsearch input:focus-visible{
  outline:2px solid transparent;
  box-shadow:var(--sh-lg),0 0 0 3px rgba(99,91,255,.45);
  border-color:var(--brand);
}
.hsearch__x{
  position:absolute;right:56px;display:none;
  width:30px;height:30px;align-items:center;justify-content:center;
  border-radius:var(--r-pill);color:var(--slate-400);background:transparent;
  transition:background-color var(--t),color var(--t);
}
.hsearch__x:hover{background:var(--line-soft);color:var(--ink)}
.hsearch.is-filled .hsearch__x{display:flex}
.hsearch__kbd{
  position:absolute;right:16px;display:inline-flex;align-items:center;gap:2px;
  padding:3px 7px;border-radius:var(--r-sm);
  background:var(--bg-subdued);color:var(--slate-400);
  font-family:var(--ff-m);font-size:var(--fs-3xs);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;
}
.hsearch.is-filled .hsearch__kbd{display:none}

.hsearch__panel{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border-radius:var(--r-md);
  box-shadow:var(--sh-xl),var(--ring);
  padding:6px;
}
.hsearch__panel[hidden]{display:none}
.hsearch__status{
  padding:10px 14px 8px;font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--slate-400);
}
.hsearch__opt{
  display:block;padding:11px 14px;border-radius:var(--r);
  border:0;background:transparent;text-align:left;width:100%;cursor:pointer;
  text-decoration:none;
}
.hsearch__opt[aria-selected="true"],
.hsearch__opt:hover{background:var(--brand-25)}
.hsearch__opt b{
  display:block;font-size:var(--fs-md);font-weight:600;
  letter-spacing:var(--tr-sm);color:var(--ink);line-height:1.35;
}
.hsearch__opt em{
  display:block;margin-top:3px;font-style:normal;
  font-size:var(--fs-xs);line-height:1.55;color:var(--slate-500);
}
.hsearch__opt i{
  display:inline-block;margin-top:6px;font-style:normal;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--slate-400);
}
.hsearch mark{background:var(--brand-50);color:var(--brand-700);border-radius:2px;padding:0 1px}
.hsearch__empty{padding:22px 16px 24px}
.hsearch__empty p{margin:0;font-size:var(--fs-md);color:var(--ink);line-height:1.55}
.hsearch__empty p+p{margin-top:8px;font-size:var(--fs-sm);color:var(--slate-500)}
.hsearch__empty ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.hsearch__empty a{
  display:inline-flex;padding:7px 12px;border-radius:var(--r-pill);
  background:var(--bg-subdued);color:var(--slate);
  font-size:var(--fs-xs);font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line);
}
.hsearch__empty a:hover{background:var(--brand-25);color:var(--brand-700)}
.hsearch__noscript{
  margin:14px auto 0;max-width:680px;padding:10px 14px;border-radius:var(--r);
  background:rgba(255,255,255,.10);color:#C4D2E4;font-size:var(--fs-xs);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

/* ── featured articles ───────────────────────────────────────────────── */
.hsec{padding-block:calc(var(--gap-md) / 2)}
.hsec--tight{padding-block:calc(var(--gap-sm) / 2)}
.hsec--subdued{background:var(--bg-subdued);border-block:1px solid var(--line-soft)}
.hsec__head{max-width:760px;margin-bottom:28px}
.hsec__head h2{
  margin:10px 0 0;font-family:var(--ff-d);font-weight:700;
  font-size:var(--fs-2xl);line-height:1.14;letter-spacing:var(--tr-xl);
  color:var(--ink);text-wrap:balance;
}
.hsec__head p{margin:12px 0 0;font-size:var(--fs-lg);line-height:1.6;color:var(--slate);max-width:62ch;text-wrap:pretty}

.hfeat{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 32px;list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line-soft);
}
.hfeat li{border-bottom:1px solid var(--line-soft)}
.hfeat a{
  display:flex;align-items:center;gap:14px;
  padding:18px 8px 18px 2px;min-height:44px;
  font-size:var(--fs-md);font-weight:500;letter-spacing:var(--tr-sm);
  color:var(--ink);line-height:1.45;
  transition:color var(--t),padding-left var(--t);
}
.hfeat a:hover{color:var(--brand-600);padding-left:8px}
.hfeat .ico{margin-left:auto;color:var(--slate-300);transition:transform var(--t),color var(--t)}
.hfeat a:hover .ico{color:var(--brand-600);transform:translateX(3px)}

/* ── category cards ──────────────────────────────────────────────────── */
.hcats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:24px;
  list-style:none;margin:0;padding:0;
}
.hcat{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-card);
  transition:transform var(--t-card),box-shadow var(--t-card);
}
.hcat:hover{transform:translateY(var(--lift));box-shadow:var(--sh-card-hover)}
/* The card's whole surface is the link (a stretched ::after on the h3 anchor),
   so the focus ring belongs on the card, not on the few words of the title. */
.hcat:focus-within{box-shadow:var(--sh-card-hover),0 0 0 3px rgba(99,91,255,.45)}
.hcat h3 a:focus-visible{box-shadow:none;outline:none}
/* The shared illustrations bake in their own #F5F5FF panel and 20px radius on
   a transparent ground, so the card needs no background of its own behind them. */
.hcat__art{display:block;padding:16px 16px 0}
.hcat__art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.hcat__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.hcat__badge{
  align-self:flex-start;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--cat-bg,var(--brand-25));color:var(--cat-fg,var(--brand-700));
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;
}
.hcat h3{margin:12px 0 0;font-size:var(--fs-xl);letter-spacing:var(--tr-lg);line-height:1.24;color:var(--ink)}
.hcat h3 a{color:inherit}
.hcat h3 a::after{content:"";position:absolute;inset:0}
.hcat{position:relative}
.hcat p{margin:9px 0 0;font-size:var(--fs-md);line-height:1.6;color:var(--slate);text-wrap:pretty}
.hcat__n{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:var(--fs-xs);font-weight:600;color:var(--slate-400);
  display:flex;align-items:center;gap:8px;
}
.hcat__n .ico{margin-left:auto;color:var(--brand-600);transition:transform var(--t)}
.hcat:hover .hcat__n .ico{transform:translateX(3px)}

/* per-category theming. Every fg/bg pair below was measured against WCAG AA
   for small text (see tools note in the report); none is a design-system token. */
[data-cat="getting-started"]  {--cat-fg:#4032C8;--cat-bg:#EEEEFF;--cat-ink:#635BFF}
[data-cat="free-trial"]       {--cat-fg:#006F3A;--cat-bg:#E4F7ED;--cat-ink:#00B261}
[data-cat="billing"]          {--cat-fg:#B03B00;--cat-bg:#FFF0E7;--cat-ink:#FF6118}
[data-cat="using-the-app"]    {--cat-fg:#00699E;--cat-bg:#E6F4FC;--cat-ink:#00A3E0}
[data-cat="data"]             {--cat-fg:#0A7A72;--cat-bg:#E3F6F4;--cat-ink:#0BB4A6}
[data-cat="api"]              {--cat-fg:#0A2540;--cat-bg:#EDF2F8;--cat-ink:#425466}
[data-cat="problems"]         {--cat-fg:#8A5A00;--cat-bg:#FDF3E1;--cat-ink:#F9B900}
[data-cat="legal"]            {--cat-fg:#9C1C7E;--cat-bg:#FCEBF7;--cat-ink:#F44BCC}

/* ── "not finding what you are looking for" band ─────────────────────── */
.hcta{
  background:linear-gradient(158deg,var(--ink-deep),var(--ink) 60%,#152a63);
  padding-block:calc(var(--gap-md) / 2);text-align:center;
}
.hcta h2{
  margin:0;font-family:var(--ff-d);font-weight:700;
  font-size:var(--fs-2xl);line-height:1.16;letter-spacing:var(--tr-xl);color:#fff;
  text-wrap:balance;
}
.hcta p{margin:12px auto 0;max-width:52ch;font-size:var(--fs-lg);line-height:1.6;color:#C4D2E4;text-wrap:pretty}
.hcta__btns{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hcta__note{margin-top:20px;font-size:var(--fs-xs);color:#9FB2C9}
.hcta__note code{font-family:var(--ff-m);font-size:var(--fs-2xs);color:var(--mint)}

/* ── category page ───────────────────────────────────────────────────── */
.hcrumb{margin:0 0 18px;font-size:var(--fs-sm);color:var(--slate-500)}
.hcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.hcrumb li{display:inline-flex;align-items:center;gap:8px}
.hcrumb li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line);flex:none}
.hcrumb a{color:var(--slate-500);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.hcrumb a:hover{color:var(--brand-600);text-decoration-color:currentColor}
.hcrumb [aria-current]{color:var(--ink);font-weight:500}

.hlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hlist li{}
.hlist a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;
  padding:18px 20px;min-height:44px;border-radius:var(--r-md);
  background:#fff;box-shadow:var(--sh-card);
  transition:transform var(--t-card),box-shadow var(--t-card);
}
.hlist a:hover{transform:translateY(var(--lift));box-shadow:var(--sh-card-hover)}
.hlist__t{min-width:0}
.hlist b{display:block;font-size:var(--fs-lg);font-weight:600;letter-spacing:var(--tr-lg);color:var(--ink);line-height:1.32}
.hlist__t span{display:block;margin-top:6px;font-size:var(--fs-md);line-height:1.6;color:var(--slate);max-width:70ch;text-wrap:pretty}
.hlist .ico{margin-top:4px;flex:none;color:var(--slate-300);transition:transform var(--t),color var(--t)}
.hlist-groups{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.hcat__group{
  margin:0 0 16px;font-family:var(--ff-d);font-size:var(--fs-xl);font-weight:700;
  letter-spacing:var(--tr-lg);color:var(--ink);
  display:flex;align-items:center;gap:10px;
}
.hcat__group::before{
  content:"";width:10px;height:10px;border-radius:3px;flex:none;
  background:var(--cat-ink,var(--brand));
}
.hlist a:hover .ico{color:var(--brand-600);transform:translateX(3px)}

.hcatnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.hcatnav a{
  display:inline-flex;align-items:center;min-height:34px;padding:7px 14px;
  border-radius:var(--r-pill);background:#fff;color:var(--slate);
  font-size:var(--fs-sm);font-weight:500;box-shadow:inset 0 0 0 1px var(--line);
  transition:color var(--t),background-color var(--t),box-shadow var(--t);
}
.hcatnav a:hover{color:var(--brand-700);background:var(--brand-25);box-shadow:inset 0 0 0 1px var(--brand-100)}
.hcatnav a[aria-current="page"]{
  background:var(--cat-bg,var(--brand-25));color:var(--cat-fg,var(--brand-700));
  box-shadow:inset 0 0 0 1px currentColor;
}

/* ── article page ────────────────────────────────────────────────────── */
/* The article comes FIRST in the DOM — a screen reader should not have to walk
   a sidebar to reach the thing it came for — and is placed into the right-hand
   column by grid. Below 1000px the grid collapses and DOM order (article, then
   sidebar) is exactly the order we want. */
.hwrap{
  display:grid;grid-template-columns:264px minmax(0,1fr);gap:56px;
  align-items:start;padding-block:calc(var(--gap-md) / 2);
}
.hwrap>.hart{grid-column:2;grid-row:1}
.hwrap>.hside{grid-column:1;grid-row:1}
.hside{position:sticky;top:92px;display:grid;gap:26px}
.hback{
  display:flex;align-items:center;gap:10px;min-height:44px;
  padding:11px 14px;border-radius:var(--r-md);
  background:var(--cat-bg,var(--bg-subdued));color:var(--cat-fg,var(--ink));
  font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--tr-sm);
  transition:transform var(--t),filter var(--t);
}
.hback:hover{filter:brightness(.96);transform:translateX(-2px)}
.hback .ico{flex:none;transform:rotate(180deg)}
.hside h2{
  margin:0 0 12px;font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--slate-400);
}
.hside ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hside ul a{
  display:block;padding:9px 12px;min-height:44px;border-radius:var(--r);
  font-size:var(--fs-sm);line-height:1.45;color:var(--slate);
  transition:color var(--t),background-color var(--t);
  display:flex;align-items:center;
}
.hside ul a:hover{color:var(--brand-700);background:var(--brand-25)}
.hside__all{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0 12px;
  font-size:var(--fs-xs);font-weight:600;color:var(--brand-600);
}
.hside__all:hover{color:var(--brand-700)}

.hart{min-width:0;max-width:78ch}
.hart h1{
  margin:0;font-family:var(--ff-d);font-weight:700;
  font-size:var(--fs-2xl);line-height:1.14;letter-spacing:var(--tr-xl);
  color:var(--ink);text-wrap:balance;
}
.hart__lede{
  margin:16px 0 0;font-size:var(--fs-lg);line-height:1.62;color:var(--slate);
  max-width:64ch;text-wrap:pretty;
}
.hart__rule{margin:30px 0 0;border:0;border-top:1px solid var(--line-soft)}

/* prose */
.hprose{margin-top:30px}
.hprose>*:first-child{margin-top:0}
.hprose p{margin:18px 0 0;font-size:var(--fs-lg);line-height:1.72;color:var(--slate);max-width:70ch;text-wrap:pretty}
.hprose h2{
  margin:44px 0 0;font-family:var(--ff-d);font-weight:700;
  font-size:var(--fs-xl);line-height:1.28;letter-spacing:var(--tr-lg);color:var(--ink);
  scroll-margin-top:96px;
}
.hprose h3{
  margin:32px 0 0;font-size:var(--fs-lg);font-weight:600;
  letter-spacing:var(--tr-md);color:var(--ink);scroll-margin-top:96px;
}
.hprose h2+p,.hprose h3+p{margin-top:10px}
.hprose strong{color:var(--ink);font-weight:600}
.hprose a{color:var(--brand-600);text-decoration:underline;text-decoration-color:var(--brand-100);text-underline-offset:3px}
.hprose a:hover{color:var(--brand-700);text-decoration-color:currentColor}
.hprose ul,.hprose ol{margin:16px 0 0;padding-left:22px;max-width:70ch}
.hprose li{margin-top:9px;font-size:var(--fs-lg);line-height:1.66;color:var(--slate)}
.hprose li::marker{color:var(--slate-300)}
.hprose li>strong:first-child{color:var(--ink)}
.hprose code{
  font-family:var(--ff-m);font-size:.86em;
  background:var(--bg-subdued);color:var(--ink);
  padding:.14em .38em;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  overflow-wrap:break-word;
}
.hprose pre{
  margin:20px 0 0;padding:18px 20px;border-radius:var(--r-md);overflow-x:auto;
  background:linear-gradient(155deg,var(--ink) 0%,#0D2C4C 100%);
  box-shadow:var(--sh-md);
}
.hprose pre:focus-visible{box-shadow:var(--sh-md),0 0 0 3px rgba(99,91,255,.55)}
.hprose pre code{
  background:none;box-shadow:none;padding:0;color:#D6E2F0;
  font-size:var(--fs-2xs);line-height:1.65;white-space:pre;
}
.hprose pre .s{color:var(--mint)}
.hprose pre .k{color:var(--lilac)}
/* 5.4:1 on the lightest end of the pre gradient; #7A93AE was 4.46 and failed */
.hprose pre .c{color:#8AA3BC}

.hprose blockquote{
  margin:22px 0 0;padding:16px 20px;border-radius:var(--r-md);
  background:var(--bg-subdued);box-shadow:var(--ring-inset);
}
.hprose blockquote p{margin:0;font-size:var(--fs-md);color:var(--slate)}

/* callout */
.note{
  margin:24px 0 0;padding:16px 20px;border-radius:var(--r-md);
  background:var(--brand-25);box-shadow:inset 0 0 0 1px var(--brand-100);
}
.note>*:first-child{margin-top:0}
.note p{font-size:var(--fs-md);color:var(--slate);max-width:none}
.note__t{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--brand-700);
}
.note__t .ico{color:currentColor}
.note--warn{background:#FDF3E1;box-shadow:inset 0 0 0 1px #F3E2C0}
.note--warn .note__t{color:#8A5A00}
.note--ok{background:#E4F7ED;box-shadow:inset 0 0 0 1px #BFE9D3}
.note--ok .note__t{color:var(--green-deep)}

/* table */
.htable{margin:22px 0 0;overflow-x:auto;border-radius:var(--r-md);box-shadow:var(--sh-card)}
.htable:focus-visible{box-shadow:var(--sh-card),0 0 0 3px rgba(99,91,255,.35)}
.htable table{border-collapse:collapse;width:100%;background:#fff;min-width:520px}
.htable th,.htable td{
  padding:11px 16px;text-align:left;font-size:var(--fs-sm);line-height:1.5;
  border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.htable th{
  background:var(--bg-subdued);color:var(--ink);font-weight:600;
  letter-spacing:var(--tr-sm);white-space:nowrap;
}
.htable td{color:var(--slate)}
.htable tbody tr:last-child td{border-bottom:0}
.htable code{white-space:nowrap}

/* the 64-column chip grid */
.hcols{
  display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0;padding:0;list-style:none;
}
.hcols li{
  font-family:var(--ff-m);font-size:var(--fs-2xs);color:var(--slate);
  padding:5px 9px;border-radius:var(--r-sm);
  background:var(--bg-subdued);box-shadow:inset 0 0 0 1px var(--line-soft);
}
.hcols li b{color:var(--brand-700);font-weight:600}

/* numbered steps (the flagship walkthrough) */
.hstep{margin-top:44px;counter-increment:hstep}
.hstep:first-child{margin-top:24px}
.hsteps{counter-reset:hstep}
.hstep>h2{
  display:flex;gap:14px;align-items:flex-start;margin-top:0;
  scroll-margin-top:96px;
}
.hstep>h2::before{
  content:counter(hstep);flex:none;
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;
  font-family:var(--ff);font-size:var(--fs-sm);font-weight:700;letter-spacing:0;
  box-shadow:0 2px 6px rgba(99,91,255,.35);
}
.hstep>*+*{margin-left:46px}
@media (max-width:640px){.hstep>*+*{margin-left:0}}

/* table of contents */
.htoc{
  margin:28px 0 0;padding:18px 22px;border-radius:var(--r-md);
  background:var(--bg-subdued);box-shadow:var(--ring-inset);
}
.htoc h2{
  margin:0 0 10px;font-family:var(--ff);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--slate-400);
}
.htoc ol{margin:0;padding-left:20px;max-width:none}
.htoc li{margin-top:5px;font-size:var(--fs-sm);line-height:1.5}
.htoc a{color:var(--slate);text-decoration:none}
.htoc a:hover{color:var(--brand-700);text-decoration:underline}

/* screenshot figure with CSS callouts */
.hshot{margin:22px 0 0}
.hshot__frame{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-subdued);box-shadow:var(--sh-md),var(--ring);
}
.hshot img{display:block;width:100%;height:auto}
.hshot figcaption{
  margin-top:10px;font-size:var(--fs-xs);line-height:1.55;color:var(--slate-400);
  max-width:70ch;
}
.hshot__missing{
  display:grid;place-items:center;gap:8px;padding:44px 24px;text-align:center;
  font-size:var(--fs-sm);color:var(--slate-500);
}
.callout{
  /* --x/--y/--w/--h are set inline per callout in the article markup; the
     fallbacks keep the box valid if one is ever omitted. */
  position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,18%);height:var(--h,9%);
  border:2px solid var(--brand);border-radius:var(--r-sm);
  box-shadow:0 0 0 9999px rgba(10,37,64,.06);
  pointer-events:none;
}
.callout::after{
  content:attr(data-n);position:absolute;top:-11px;left:-11px;
  display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;
  font-family:var(--ff);font-size:var(--fs-3xs);font-weight:700;letter-spacing:0;
  box-shadow:0 2px 5px rgba(10,37,64,.30);
}
.callout--warn{border-color:var(--orange)}
.callout--warn::after{background:var(--orange)}
.hshot__key{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.hshot__key li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:var(--fs-sm);line-height:1.55;color:var(--slate);
}
.hshot__key b{
  flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;
  border-radius:var(--r-pill);background:var(--brand);color:#fff;
  font-size:var(--fs-3xs);font-weight:700;
}

/* article footer */
.hfootline{
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-xs);color:var(--slate-400);
}
.hfootline .ico{color:var(--slate-300)}

.hhelpful{
  margin:26px 0 0;padding:22px 24px;border-radius:var(--r-md);text-align:center;
  background:var(--bg-subdued);box-shadow:var(--ring-inset);
}
.hhelpful h2{
  margin:0;font-family:var(--ff);font-size:var(--fs-md);font-weight:600;
  letter-spacing:var(--tr-sm);color:var(--ink);
}
.hhelpful__btns{margin-top:14px;display:flex;gap:10px;justify-content:center}
.hhelpful__b{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 18px;
  border-radius:var(--r-pill);background:#fff;color:var(--slate);
  font-family:var(--ff);font-size:var(--fs-sm);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-xs);cursor:pointer;
  transition:color var(--t),box-shadow var(--t),transform var(--t);
}
.hhelpful__b:hover{color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-200),var(--sh-sm);transform:translateY(var(--lift-btn))}
.hhelpful__b[aria-pressed="true"]{color:var(--brand-700);box-shadow:inset 0 0 0 2px var(--brand)}
.hhelpful__b .ico{color:currentColor}
.hhelpful__ack{margin:14px 0 0;font-size:var(--fs-sm);color:var(--slate-500)}

.hrelated{margin:34px 0 0}
.hrelated h2{
  margin:0 0 14px;font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--slate-400);
}
.hprevnext{
  margin:34px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.hprevnext a{
  display:block;padding:16px 18px;border-radius:var(--r-md);
  background:#fff;box-shadow:var(--sh-card);min-height:44px;
  transition:transform var(--t-card),box-shadow var(--t-card);
}
.hprevnext a:hover{transform:translateY(var(--lift));box-shadow:var(--sh-card-hover)}
.hprevnext span{
  display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--slate-400);
}
.hprevnext b{display:block;margin-top:5px;font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.4}
.hprevnext a:last-child{text-align:right}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hwrap{grid-template-columns:minmax(0,1fr);gap:0}
  /* the sidebar moves BELOW the article, it does not disappear */
  .hwrap>.hart,.hwrap>.hside{grid-column:1;grid-row:auto}
  .hside{position:static;margin-top:44px;padding-top:30px;border-top:1px solid var(--line-soft)}
  .hart{max-width:none}
}
@media (max-width:760px){
  .hfeat{grid-template-columns:minmax(0,1fr);gap:0}
  .hhero{padding:52px 0 56px}
  .hprevnext{grid-template-columns:minmax(0,1fr)}
  .hprevnext a:last-child{text-align:left}
}
@media (max-width:900px){
  /* styles.css hides .nav__actions at this width for the marketing nav; the
     help header has no burger menu of its own, so bring them back, smaller. */
  .nav--help .nav__actions{display:flex}
  .hbrand__tag{display:none}
}
@media (max-width:520px){
  /* The mark alone is the logo below this width; .brand keeps its aria-label. */
  .nav--help .brand__word{display:none}
  .nav--help .btn--outline .ico{display:none}
  .nav--help .nav__inner{gap:10px}
  .hlang span{display:none}
  .hsearch__kbd{display:none}
  .hsearch input{padding-right:52px}
  .hsearch__x{right:12px}
  .hcta__btns .btn{width:100%;justify-content:center}
}

/* ── coarse pointers: 44px minimum ─────────────────────────────────────
   Every discrete control gets 44px. Links inside running prose (.hprose a,
   .hcta p a) are deliberately excluded: WCAG 2.5.8 exempts a link whose target
   is inline in a sentence, and padding them to 44px would blow the leading
   apart in every paragraph. */
@media (pointer:coarse){
  .hfeat a,.hlist a,.hside ul a,.hback,.hcatnav a,.hsearch__opt,
  .hhelpful__b,.hlang,.hsearch__x,.htoc a,.hsearch__empty a,
  .hside__all,.hcrumb a,.hcrumb li,.nav--help .brand,.foot__brand .brand,
  .foot__cols a,.foot__bar a,.hprevnext a{min-height:44px}
  .hsearch__x{width:44px;height:44px}
  .htoc a,.hside__all,.foot__cols a,.foot__bar a,.hcrumb a{display:inline-flex;align-items:center}
  .nav--help .brand,.foot__brand .brand{align-items:center}
  .hlang{padding-block:0}
  .hlang select{min-height:44px}
  .nav--help .btn--sm{min-height:44px;padding-block:10px}
  .hcta__btns .btn{min-height:48px}
}

/* ── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hcat:hover,.hlist a:hover,.hprevnext a:hover,.hhelpful__b:hover{transform:none}
  .hfeat a:hover{padding-left:2px}
  .hfeat a:hover .ico,.hlist a:hover .ico,.hcat:hover .hcat__n .ico{transform:none}
  .hback:hover{transform:none}
  .hsearch__panel,.hcat,.hlist a{transition:none}
}

/* ── print ───────────────────────────────────────────────────────────── */
@media print{
  .nav--help,.hhero,.hside,.hhelpful,.hcta,.hprevnext,.skip-link{display:none!important}
  .hwrap{display:block}
  .hart{max-width:none}
}

/* ── category page groups (category.html holds all eight) ─────────────── */
.hcatgroup+.hcatgroup{margin-top:44px}
.hcatgroup__blurb{
  margin:0 0 16px;font-size:var(--fs-md);line-height:1.6;color:var(--slate-500);max-width:66ch;
}
#hcat-page .hsec__head .hcat__badge{margin-bottom:10px}
#hcat-page h1{
  margin:0;font-family:var(--ff-d);font-weight:700;
  font-size:var(--fs-2xl);line-height:1.14;letter-spacing:var(--tr-xl);
  color:var(--ink);text-wrap:balance;
}
#hcat-page .hsec__head p{margin:12px 0 0;font-size:var(--fs-lg);line-height:1.6;color:var(--slate);max-width:62ch}

/* ── list markers ─────────────────────────────────────────────────────────
   styles.css resets `ul,ol{list-style:none}` globally, which is right for the
   navigation lists it was written for and wrong for running prose: every
   numbered step and every bullet in all 41 articles rendered as an unmarked
   indent. Markers are restored inside .hprose only, and only on the lists that
   are actually prose — the column chips and the screenshot key are deliberate
   exceptions and keep their own markers. */
.hprose ul:not(.hcols):not(.hshot__key){list-style:disc}
.hprose ol:not(.hshot__key){list-style:decimal}
.hprose ol ol{list-style:lower-alpha}
.htoc ol{list-style:decimal}
.hprose li::marker{color:var(--slate-300);font-variant-numeric:tabular-nums}
.note li::marker{color:var(--brand-200)}