/* Help and utility group: /docs, /docs/product/<slug>, /status, /legal and the 404.
   Loaded after every shared layer (tokens, components, site, pages, product), so
   it only refines them. Every colour is a token. Plan numbers never live here;
   they come from accounts.PLANS through the routes and templates. Classes are
   prefixed hu- so they cannot collide with the shared patterns. */

/* ============================================================ shared */
/* A quiet row of next-step links under a hero or a heading. */
.hu-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); font-size: var(--text-sm); color: var(--text-subtle); }
.hu-links .s-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-weight: var(--font-medium); }
.hu-links .s-link svg { flex: none; }
/* Mono counts that sit beside a section heading. */
.hu-count { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--text-subtle); }
/* A row of link cards: icon, title and one line, arrow. */
.hu-routes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.hu-routes a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-height: 4.5rem;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg); color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default); }
.hu-routes a:hover { border-color: var(--accent); transform: translateY(-1px); }
.hu-routes a > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hu-routes b { color: var(--text-strong); font-weight: var(--font-semibold); }
.hu-routes small { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.4; }
.hu-routes a > svg:last-child { color: var(--accent-text); transition: transform var(--duration-fast) var(--ease-default); }
.hu-routes a:hover > svg:last-child { transform: translateX(3px); }
.sx--alt .hu-routes a { background: var(--bg); }
@media (max-width: 479px) { .hu-routes a { grid-template-columns: 2.75rem minmax(0, 1fr); padding-right: var(--space-4); } .hu-routes a > svg:last-child { display: none; } }

/* ================================================================ /docs */
/* Hero: the page name on the left, the four most asked answers on the right. */
.hu-hero .phero__grid { align-items: start; }
.hu-hero .phero__inner { padding-top: var(--space-4); }
@media (min-width: 1024px) { .hu-hero .phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.hu-answers { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-2) var(--space-3); min-width: 0; }
.hu-answers__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); }
.hu-answers__title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--cut-text); }
.hu-answers__head span { font-size: var(--text-xs); color: var(--text-subtle); }
.hu-answers ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.hu-answers li + li { border-top: var(--border-w) solid var(--border-subtle); }
.hu-answers a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-lg); color: var(--text); transition: background var(--duration-instant) var(--ease-default); }
.hu-answers a:hover { background: var(--surface-hover); }
.hu-answers a b { font-weight: var(--font-semibold); color: var(--text-strong); }
.hu-answers a span { grid-column: 1; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.hu-answers a em { grid-column: 1; font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.04em; color: var(--text-subtle); }
.hu-answers a svg { grid-column: 2; grid-row: 1 / span 3; color: var(--accent-text); transition: transform var(--duration-fast) var(--ease-default); }
.hu-answers a:hover svg { transform: translateX(3px); }

/* The guides: two by two, each card lists its steps so you can see what is inside. */
.hu-guides { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .hu-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hu-guide { gap: var(--space-4); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.hu-guide__top { display: flex; align-items: center; gap: var(--space-3); }
.hu-guide h3 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.hu-guide > p { margin-top: calc(-1 * var(--space-2)); }
.hu-guide__steps { list-style: none; padding: 0; counter-reset: hs; display: flex; flex-direction: column; border-top: var(--border-w) solid var(--border); }
.hu-guide__steps li { counter-increment: hs; display: flex; gap: var(--space-3); align-items: baseline; padding-block: 0.55rem;
  border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.hu-guide__steps li::before { content: counter(hs, decimal-leading-zero); flex: none; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.hu-guide .card2__go { padding-top: var(--space-1); }

/* ======================================================= /docs/product/<slug> */
.hu-doc-hero .phero__inner { max-width: 46rem; }
.hu-doc-hero .crumbs { margin-bottom: calc(-1 * var(--space-2)); }
.hu-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.hu-meta li { display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.75rem; border-radius: var(--radius-full);
  border: var(--border-w) solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: 0.03em; }
.hu-meta svg { color: var(--accent-text); }

.hu-doc { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .hu-doc { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-12); } }
@media (min-width: 1280px) { .hu-doc { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-16); } }
.hu-doc__main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }

/* Numbered steps, each with where to find it in the product. */
.hu-steps { list-style: none; padding: 0; counter-reset: st; display: flex; flex-direction: column; gap: var(--space-4); }
.hu-steps > li { counter-increment: st; position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5); background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.hu-steps > li::before { content: counter(st); grid-row: 1 / span 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent); font-family: var(--font-mono); font-weight: var(--font-semibold); }
.hu-steps > li > * { grid-column: 2; }
.hu-steps h2 { font-size: var(--text-xl); letter-spacing: -0.015em; align-self: center; min-height: 2.75rem; display: flex; align-items: center; }
.hu-steps p { color: var(--text-muted); line-height: 1.65; }
.hu-steps > li:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hu-where { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; margin-top: var(--space-2); padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md); line-height: 1.5; background: var(--bg-subtle); border: var(--border-w) solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.02em; color: var(--text-muted); }
.hu-where b { flex: none; font-weight: var(--font-medium); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
@media (max-width: 479px) {
  .hu-steps > li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-4); }
  .hu-steps > li::before { width: 2.25rem; height: 2.25rem; }
  .hu-steps h2 { min-height: 2.25rem; font-size: var(--text-lg); }
  .hu-steps > li > p, .hu-steps > li > .hu-where { grid-column: 1 / -1; }
}

/* Previous and next guide. */
.hu-pager { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.hu-pager a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); min-height: 4.5rem; justify-content: center;
  border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-strong);
  font-weight: var(--font-semibold); transition: border-color var(--duration-fast) var(--ease-default); }
.hu-pager a:hover { border-color: var(--accent); }
.hu-pager a span { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-normal); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.hu-pager__next { text-align: right; align-items: flex-end; }

/* The side column: the steps on this page, and where to go next. */
.hu-aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (min-width: 1024px) { .hu-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); } }
.hu-aside__box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl); background: var(--surface); }
.hu-aside__box h2 { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-subtle); }
.hu-aside__box p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.hu-aside__box .s-btn { align-self: stretch; }
.hu-onpage { list-style: none; padding: 0; counter-reset: op; display: flex; flex-direction: column; }
.hu-onpage a { counter-increment: op; display: flex; align-items: center; gap: var(--space-3); min-height: 2.5rem; font-size: var(--text-sm); color: var(--text-muted);
  border-left: 2px solid var(--border); padding-left: var(--space-3); }
.hu-onpage a::before { content: counter(op); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.hu-onpage a:hover { color: var(--text-strong); border-left-color: var(--accent); }
.hu-others { list-style: none; padding: 0; display: flex; flex-direction: column; }
.hu-others a { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text); }
.hu-others a svg { flex: none; color: var(--accent-text); }
.hu-others a:hover { color: var(--accent-text); }
.hu-others li + li a { border-top: var(--border-w) solid var(--border-subtle); }
@media (max-width: 1023px) { .hu-aside .hu-aside__box--onpage { display: none; } }

/* ============================================================== /status */
.hu-status-hero .phero__grid { align-items: start; }
@media (min-width: 1024px) { .hu-status-hero .phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hu-status-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.hu-signal { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.85rem 0.35rem 0.6rem; border-radius: var(--radius-full);
  background: var(--success-subtle); color: var(--success); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.hu-signal::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.hu-signal--warn { background: var(--warning-subtle); color: var(--warning); }

.hu-svc { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; min-width: 0; }
.hu-svc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-w) solid var(--border); background: var(--surface-subtle); }
.hu-svc__head h2 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.hu-svc__head time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.hu-svc ul { list-style: none; padding: var(--space-1) 0; }
.hu-svc li { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); min-height: 3.75rem; padding: var(--space-3) var(--space-5); }
.hu-svc li + li { border-top: var(--border-w) solid var(--border-subtle); }
.hu-svc li > i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--success); }
.hu-svc li.is-warn > i { background: var(--warning); }
.hu-svc li.is-off > i { background: var(--text-subtle); }
.hu-svc li > span { display: flex; flex-direction: column; min-width: 0; }
.hu-svc li b { font-weight: var(--font-semibold); color: var(--text-strong); }
.hu-svc li small { font-size: var(--text-xs); color: var(--text-subtle); line-height: 1.4; }
.hu-svc li > em { font-style: normal; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--success); text-align: right; }
.hu-svc li.is-warn > em { color: var(--warning); }
.hu-svc li.is-off > em { color: var(--text-muted); }
.hu-svc__foot { padding: var(--space-3) var(--space-5) var(--space-4); border-top: var(--border-w) solid var(--border); font-size: var(--text-xs); color: var(--text-subtle); line-height: 1.5; }
@media (max-width: 419px) { .hu-svc li { padding-inline: var(--space-4); gap: var(--space-1) var(--space-3); } }

/* "One video seems stuck": the video page as it looks while it works. */
.hu-jobmock { width: 100%; max-width: 30rem; justify-self: center; }
.hu-jobmock__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.hu-jobmock__title { font-family: var(--font-display); font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--text-strong); letter-spacing: -0.01em; }
.hu-jobmock__eta { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-w) solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.hu-stuck .numlist { gap: var(--space-5); }

/* =============================================================== /legal */
.hu-legal-hero .phero__inner { max-width: 50rem; }
.hu-version { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.hu-sum { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.hu-sum .card2 { padding: var(--space-5) var(--space-6) var(--space-6); }
.hu-sum h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
.hu-sum p { font-size: var(--text-sm); line-height: 1.55; }
.hu-sum__note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-subtle); }
.hu-legal .toc { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
/* Desktop contents: all three documents and their 24 sections have to be
   findable in the sticky column. Sections are numbered like the headings they
   jump to, sit in tighter rows for a mouse, and a soft shadow at the top or
   bottom edge shows when the list scrolls (short laptop screens). */
@media (min-width: 1024px) {
  .hu-legal .toc { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
    background:
      linear-gradient(var(--bg) 30%, transparent) top / 100% 2.5rem no-repeat local,
      linear-gradient(transparent, var(--bg) 70%) bottom / 100% 2.5rem no-repeat local,
      radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--text) 16%, transparent), transparent) top / 100% 0.75rem no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--text) 16%, transparent), transparent) bottom / 100% 0.75rem no-repeat scroll; }
  .hu-legal .toc ol ol { counter-reset: tsec; }
  .hu-legal .toc ol ol a { gap: var(--space-2); align-items: baseline; }
  .hu-legal .toc ol ol a::before { counter-increment: tsec; content: counter(tsec) "."; flex: none; min-width: 1.5rem; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
}
@media (min-width: 1280px) { .hu-legal .doclayout { grid-template-columns: 17.5rem minmax(0, 42.5rem); } }
@media (min-width: 1024px) and (pointer: fine) {
  .hu-legal .toc__title { margin-bottom: var(--space-2); }
  .hu-legal .toc > ol > li > a { min-height: 2.25rem; }
  .hu-legal .toc ol ol a { min-height: 1.5rem; padding-block: 0.2rem; line-height: 1.3; }
}
.hu-top { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin-top: var(--space-6); font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.hu-top svg { transform: rotate(-90deg); }
.prose2 .hu-top { margin-top: var(--space-6); }
@media (min-width: 1024px) { .hu-top { display: none; } }

/* ================================================================== 404 */
.hu-nf .phero__grid { align-items: center; }
.hu-nf h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.hu-nf__path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.hu-nf__path code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); background: var(--cut-subtle); color: var(--cut-text); }
.hu-nf .nfsearch { max-width: 36rem; }

/* The miss, drawn as an edit: a timeline with one piece cut out where the page should be. */
.hu-miss { width: 100%; max-width: 32rem; }
.hu-miss__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-6); }
.hu-miss__ruler { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.hu-miss__ruler b { font-weight: var(--font-medium); color: var(--cut-text); }
.hu-miss__track { position: relative; display: flex; gap: 3px; height: 3rem; }
.hu-miss__track span { flex: var(--g, 1) 1 0; border-radius: var(--radius-sm); background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-border); }
.hu-miss__track--b { height: 1.5rem; }
.hu-miss__track--b span { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.hu-miss__track .hu-miss__gap { display: grid; place-items: center; background: var(--cut-subtle); box-shadow: none; border: 2px dashed var(--cut);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--cut-text); }
.hu-miss__track--b .hu-miss__gap { border-width: 1.5px; }
.hu-miss__head { position: absolute; top: -0.5rem; bottom: -2.25rem; left: var(--at, 50%); width: 2px; background: var(--accent); z-index: 1; pointer-events: none; }
.hu-miss__head::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 8px solid var(--accent); border-bottom: 0; }
.hu-miss__note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.hu-miss__note i { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 3px; border: 1.5px dashed var(--cut); background: var(--cut-subtle); }
@media (max-width: 1023px) { .hu-nf .phero__art { display: none; } }
.hu-nf-cards .card2 { padding: var(--space-5) var(--space-6) var(--space-6); }
/* Four destinations: one row on laptops, two by two on tablets, never 3 + 1. */
@media (min-width: 600px) { .hu-nf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hu-nf-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hu-miss__track:not(.hu-miss__track--b) .hu-miss__gap { justify-items: start; padding-left: 0.6rem; }
@media (max-width: 599px) {
  .hu-nf-cards { gap: var(--space-3); }
  .hu-nf-cards .card2 { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 0.15rem var(--space-4); padding: var(--space-4); }
  .hu-nf-cards .card2__icon { grid-row: 1 / span 2; }
  .hu-nf-cards .card2 h3 { font-size: var(--text-lg); }
  .hu-nf-cards .card2 p { font-size: var(--text-sm); line-height: 1.45; }
  .hu-nf-cards .card2__go { display: none; }
}

/* ============================================================ tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .hu-answers ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2); }
  .hu-answers li + li { border-top: 0; }
  .hu-answers li:nth-child(n+3) { border-top: var(--border-w) solid var(--border-subtle); }
  .hu-answers a { height: 100%; align-items: start; }
  .hu-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Keep a short inline link on one line inside the narrow side boxes. */
.hu-aside__box p .s-link { white-space: nowrap; }