/* Cronta public website: loaded after /style.css on the marketing pages only (scripts/build-site.mjs writes the <link>).
   Every colour, size and radius comes from the tokens in style.css :root; the site adds no tokens of its own.
   The header, hero and footer are always on --chrome; the brand accent here is always Marigold (no business colour). */
.site { background: var(--bg); color: var(--ink); }
.site-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--chrome); color: var(--on-chrome); }
.site-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
/* The brand link: the outlined lockup (public/logo-dark.svg = docs/brand/final/lockup-dark.svg), never the name retyped (D4).
   A 44px target. Only when the app runs under another name (APP_NAME) does site.js show that name as text instead. */
.site-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-chrome); font-weight: 700; letter-spacing: var(--ls-display); font-size: var(--fs-lg); text-decoration: none; }
.site-lockup { display: block; flex: none; width: auto; height: 32px; }
.site-nav nav { display: flex; align-items: center; gap: 1.1rem; }
.site-nav nav a { color: var(--on-chrome); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.site-nav nav a:hover { text-decoration: underline; }
.site-nav nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
html:has(body.site) { scroll-padding-top: 80px; }
.site .btn.site-cta-sm { min-height: 44px; height: 44px; padding: 0 1rem; background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
.site-hero { background: var(--chrome); color: var(--on-chrome); padding: 4.5rem 0 5rem; }
.site-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.site-eyebrow { color: var(--accent-on-chrome); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0; margin: 0 0 1rem; }
.site-hero h1 { color: var(--on-chrome); font-size: var(--fs-d1); line-height: var(--lh-none); letter-spacing: var(--ls-display); margin: 0 0 1.2rem; font-weight: 800; }
.site-hero h1 span { color: var(--accent-on-chrome); }
.site-lead { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--on-chrome-2); max-width: 34em; margin: 0 0 1.8rem; }
.site-hero-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-hero-cta .muted { color: var(--on-chrome-2); }
.site .btn.site-cta { min-height: 54px; height: 54px; padding: 0 1.6rem; font-size: var(--fs-md); background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
/* Signed in: a bar slides in under the menu, over the page (nothing below it moves) */
.site-signed-in { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: .55rem 1rem; text-align: center; color: var(--on-chrome-2);
  background: var(--chrome); border-top: 1px solid var(--chrome-line); animation: slide-down .2s ease-out; }
@keyframes slide-down { from { transform: translateY(-100%); opacity: 0; } }
.site-signed-in:not(.hidden) { display: flex; align-items: center; justify-content: center; gap: .75rem; padding-right: 3rem; }
.site-note-close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: var(--r-2); background: transparent; color: var(--on-chrome-2); font-size: var(--fs-sm); }
.site-note-close:hover { background: rgba(255,255,255,.1); color: var(--on-chrome); }
@media (prefers-reduced-motion: reduce) { .site-signed-in { animation: none; } }
/* "Start free" becomes "Dashboard" in the same space; "Sign in" keeps its space when it goes */
.site .btn.site-cta-sm#nav-start { min-width: 7.5rem; justify-content: center; }
.site-nav-gone { visibility: hidden; }
.site-signed-in a { color: var(--accent-on-chrome); }
.site-hero-art { position: relative; height: 380px; }
.mock-device { position: absolute; inset: 0 70px 30px 0; background: var(--k-surface); border: 1px solid var(--k-key-2); border-radius: var(--r-4); padding: 1.2rem;
  display: grid; grid-template-rows: auto auto 1fr auto; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.mock-store { font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--on-chrome); }
.mock-time { font-size: var(--fs-d2); font-weight: 700; letter-spacing: var(--ls-display); color: var(--on-chrome); }
.mock-qr { justify-self: start; align-self: center; width: 150px; height: 150px; background: #fff; border-radius: var(--r-3); padding: 14px; }
.mock-qr div { width: 100%; height: 100%; background:
  linear-gradient(90deg, #111 12%, transparent 12% 30%, #111 30% 42%, transparent 42% 58%, #111 58% 70%, transparent 70% 88%, #111 88%) 0 0/100% 20%,
  linear-gradient(#111 12%, transparent 12% 30%, #111 30% 42%, transparent 42% 58%, #111 58% 70%, transparent 70% 88%, #111 88%) 0 0/20% 100%; opacity: .9; }
.mock-bar { height: 5px; border-radius: 3px; background: var(--k-key-2); overflow: hidden; }
.mock-bar i { display: block; width: 60%; height: 100%; background: var(--accent-fill); }
.mock-phone { position: absolute; right: 0; bottom: 0; width: 170px; height: 300px; background: var(--surface); color: var(--ink); border-radius: 26px; border: 6px solid var(--k-key);
  padding: 1.2rem .9rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.mock-hi { font-weight: 700; }
.mock-badge { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; padding: .2rem .55rem; border-radius: var(--r-pill); background: var(--good-soft); color: var(--good); }
.mock-btn { margin-top: auto; text-align: center; padding: .7rem; border-radius: var(--r-2); background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: var(--fs-sm); }
.mock-btn.ghost { margin-top: 0; background: var(--fill); color: var(--ink); }
.site-section { padding: 4.5rem 0; }
.site-section.alt { background: var(--surface); }
.site-section h2 { font-size: var(--fs-d2); letter-spacing: var(--ls-head); margin: 0 0 2rem; }
.site-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: s; }
.site-steps li { counter-increment: s; display: flex; flex-direction: column; gap: .4rem; }
.site-steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-2); background: var(--chrome); color: var(--accent-on-chrome); font-weight: 700; margin-bottom: .4rem; }
.site-steps b { font-size: var(--fs-md); }
.site-steps span { color: var(--muted); line-height: var(--lh-body); }
.site-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; }
.site-features h3 { font-size: var(--fs-md); margin: 0 0 .35rem; }
.site-features h3::before { content: ''; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--accent-fill); margin-bottom: .7rem; }
.site-features p { margin: 0; color: var(--muted); line-height: var(--lh-body); }
.site-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 1.4rem; }
.site-price { border: 1px solid var(--line); border-radius: var(--r-3); padding: 1.6rem; background: var(--surface); display: flex; flex-direction: column; gap: .3rem; }
.site-price.featured { border: 2px solid var(--ink); }
.site-price h3 { margin: 0; font-size: var(--fs-md); }
.site-amount { font-size: var(--fs-d2); font-weight: 800; letter-spacing: var(--ls-display); margin: .2rem 0; }
/* No price from Stripe yet: words instead of an amount, at a size that wraps cleanly */
.site-amount:has(.site-price-tbd) { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0; line-height: var(--lh-snug); margin: .6rem 0 .5rem; }
.site-amount small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.site-price .btn { margin-top: auto; align-self: flex-start; }
.site-price .muted { margin: 0 0 1.2rem; line-height: var(--lh-body); }
/* Four plans (docs/design/2026-11-plans-pricing.md §4.4): a row from 1024px, 2×2 from 640px, stacked below */
.site-plan-toggle { margin: 0 0 1.2rem; }
.site-save { font-size: var(--fs-xs); font-weight: 700; color: var(--notice-ink); background: var(--amber-soft); border-radius: var(--r-pill); padding: .05rem .45rem; margin-left: .25rem; }
.site-prices.site-prices-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.site-prices-4 .site-price { padding: 1.3rem; }
.site-prices-4 .site-amount { font-size: var(--fs-xl); }
.site-prices-4 .site-amount:has(.site-price-tbd) { font-size: var(--fs-lg); }
.site-prices-4 .site-price h3 { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.site-popular { font-size: var(--fs-xs); font-weight: 700; color: var(--notice-ink); background: var(--amber-soft); border-radius: var(--r-pill); padding: .1rem .5rem; }
.site-ticks { margin: 0 0 1.2rem; padding-left: 1.1rem; font-size: var(--fs-sm); line-height: var(--lh-body); }
.site-ticks li + li { margin-top: .25rem; }
.site-price-note { margin: 1rem 0 .5rem; }
@media (max-width: 1023px) { .site-prices.site-prices-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .site-prices.site-prices-4 { grid-template-columns: 1fr; } }
/* Compare plans: the table scrolls sideways on its own (never the page), plan names and feature names stay in view */
/* position: relative keeps the cells' hidden screen-reader text inside the scroller (it widened the page on phones) */
.site-compare-scroll { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.site-compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.site-compare th, .site-compare td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.site-compare thead th { position: sticky; top: 0; background: var(--surface); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--ink); z-index: 1; }
.site-compare tbody th[scope="row"] { text-align: left; font-weight: 500; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--ink); position: sticky; left: 0; background: var(--surface); min-width: 12rem; }
.site-compare-group th { text-align: left; background: var(--ph-bar-bg); font-weight: 700; }
.site-compare thead th:first-child { left: 0; z-index: 2; }
.site-compare tbody th[scope="row"], .site-compare thead th:first-child { box-shadow: 1px 0 0 var(--line); }
.site-compare-group th > span { position: sticky; left: .8rem; }
.site-compare-hint { display: none; margin: 0 0 .5rem; }
@media (max-width: 640px) {
  .site-compare-hint { display: block; }
  .site-compare { min-width: 34rem; }
  .site-compare th, .site-compare td { padding: .55rem .6rem; }
  .site-compare tbody th[scope="row"] { min-width: 8.5rem; max-width: 10rem; }
}
.site-faq details { max-width: 760px; }
.site-faq details { border-top: 1px solid var(--line); padding: 1rem 0; }
.site-faq summary { font-weight: 700; cursor: pointer; font-size: var(--fs-md); padding: .5rem 0; }
.site-faq p { color: var(--muted); line-height: var(--lh-loose); margin: .6rem 0 0; }
.site-footer { background: var(--chrome); color: var(--on-chrome-2); padding: 1.6rem 0; font-size: var(--fs-sm); }
.site-footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 1.2rem; }
.site-footer a { color: var(--on-chrome); }
.legal-doc { max-width: 760px; padding: 2.5rem 0 4rem; line-height: var(--lh-loose); }
.legal-doc h1 { font-size: var(--fs-xl); margin: 0 0 .2rem; }
.legal-doc h2 { font-size: var(--fs-md); margin: 2rem 0 .4rem; }
.legal-doc li { margin-bottom: .45rem; }
/* Content pages (features, industries, pricing, tools; built by scripts/build-site.mjs) */
.site-hero.site-hero-page { padding: 2.2rem 0 3.4rem; }
.site-hero-page h1 { font-size: var(--fs-d2); max-width: 18em; }
.site-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.6rem; padding: 0; font-size: var(--fs-sm); color: var(--on-chrome-2); }
.site-crumbs li + li::before { content: '›'; margin-right: .35rem; color: var(--on-chrome-3); }
.site-crumbs a { color: var(--on-chrome); }
.site-features a { color: inherit; }
.site-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 2rem; max-width: 900px; }
.site-checks li { position: relative; padding-left: 1.9rem; line-height: var(--lh-body); }
.site-checks li::before { content: ''; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--ph-icon-ring); }
.site-checks li::after { content: ''; position: absolute; left: .38rem; top: .38rem; width: .3rem; height: .55rem; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.site-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.site-link-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); }
.site-link-card b::after { content: ' →'; }
.site-link-card span { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.site-link-card:hover { border-color: var(--ink); }
.site-section.alt .site-link-card { background: var(--bg); }
.site-legal-note { max-width: 760px; margin: 1.6rem 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.site-support p { max-width: 760px; line-height: var(--lh-loose); margin: 0; }
.site-cta-band { background: var(--chrome); color: var(--on-chrome-2); padding: 3.5rem 0; text-align: center; }
.site-cta-band h2 { color: var(--on-chrome); font-size: var(--fs-d2); margin: 0 0 .6rem; }
.site-cta-band p { margin: 0 0 1.6rem; }
.site-404 { min-height: 60vh; }
.site-404 h1 { font-size: var(--fs-d2); }
.site-404 .site-lead { color: var(--muted); }
.site-404 .site-eyebrow { color: var(--muted); }
.site-hero.site-hero-short { padding: 2.2rem 0 2.6rem; }
.site-hero-short h1 { font-size: var(--fs-d2); margin-bottom: .6rem; }
.site-hero-short .site-lead { margin: 0; font-size: var(--fs-base); }
.site-404 .site-links { margin: 0 0 1.6rem; }
.site-footer { padding: 3rem 0 1.6rem; }
.site-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer-cols nav { flex-direction: column; gap: 0; }
.site-footer-cols nav a { display: flex; align-items: center; min-height: 44px; }
.site-footer-cols a { text-decoration-color: rgba(255,255,255,.35); }
.site-footer-about p { margin: .8rem 0 0; max-width: 22em; line-height: var(--lh-body); }
.site-footer-h { margin: 0 0 .3rem; color: var(--on-chrome); font-weight: 700; }
.site-footer-copy { margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--chrome-line); }
/* Overtime calculator */
.otc { display: grid; gap: 1.4rem; padding: 1.4rem; }
.otc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.otc legend { font-weight: 700; font-size: var(--fs-md); padding: 0; }
.otc label { margin-top: .8rem; }
.otc select, .otc input { width: 100%; }
.otc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; }
.otc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.otc-week label { text-align: center; }
.otc-week input { text-align: center; }
.otc-out { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.otc-out dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 0; }
.otc-out dt { font-size: var(--fs-sm); color: var(--muted); }
.otc-out dd { margin: .2rem 0 0; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.otc-out .otc-note { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.otc-out .otc-summary { margin: 0 0 1rem; font-weight: 600; }
.otc-hint { margin: .4rem 0 0; }
/* Time card calculator: the overtime calculator's card, one row per day (start, end, break, hours) */
.tcc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tcc-actions .tcc-msg { margin: 0; }
.tcc-week { display: grid; gap: .4rem; margin-top: .4rem; }
.tcc-day { display: grid; grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)) 4.5rem; gap: 0 .8rem; align-items: end; }
.tcc .tcc-day label { margin: .6rem 0 .35rem; }
.tcc-name { align-self: center; padding-top: 1.6rem; font-weight: 600; }
.tcc-total { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcc-err { grid-column: 2 / -1; margin: .3rem 0 0; color: var(--bad); font-size: var(--fs-sm); }
.tcc-err:empty { display: none; }
@media (max-width: 860px) {
  .site-checks { grid-template-columns: 1fr; }
  .site-footer-cols { grid-template-columns: 1fr 1fr; }
  .site-footer-about { grid-column: 1 / -1; }
  .otc-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .site-hero { padding: 3rem 0 3.5rem; }
  .site-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .site-hero-art { height: 300px; max-width: 420px; }
  .site-steps, .site-features { grid-template-columns: 1fr; }
  .site-prices { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-nav nav a:not(.btn):not(#nav-signin) { display: none; }
  .otc-out dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcc-day { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }
  .tcc-name { grid-column: 1 / 3; padding-top: 0; }
  .tcc-total { grid-column: 3; grid-row: 1; }
  .tcc-err { grid-column: 1 / -1; }
  .tcc .tcc-day input { padding: 0 .5rem; }
}


/* ---- Changelog (/changelog, docs/design/2026-11-whats-new.md §4) */
.cl .cl-release { max-width: 760px; }
.cl .cl-release + .cl-release { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.cl .cl-head h2 { margin: 0 0 .4rem; }
.cl .cl-head h2 a { color: inherit; text-decoration: none; }
.cl .cl-meta { margin: 0 0 .75rem; color: var(--muted); font-size: var(--fs-sm); }
.cl h3 { margin: 2rem 0 .5rem; font-size: var(--fs-md); }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-entry { padding: 1rem 0; border-top: 1px solid var(--line); }
.cl-entry p { margin: .35rem 0 0; line-height: var(--lh-body); }
.cl-entry .cl-where { color: var(--muted); font-size: var(--fs-sm); }
.cl-anchor { color: var(--muted); text-decoration: none; opacity: .6; }
.cl-anchor:hover, .cl-anchor:focus-visible { opacity: 1; }

/* ---- Help centre (/help, docs/design/2026-11-help-and-search.md §2.4): server-rendered, read at 68 characters a line */
.help-hero .site-lead { margin-bottom: 1.4rem; }
.help-search { max-width: 40rem; }
.help-search label { display: block; margin: 0 0 .4rem; color: var(--on-chrome-2); font-size: var(--fs-sm); font-weight: 600; }
.help-search-row { display: flex; gap: .5rem; }
.help-search-row input { flex: 1; min-width: 0; min-height: 48px; font-size: var(--fs-md); }
.help-search-row button { flex: none; min-height: 48px; }
.help-section { padding: 3rem 0 4rem; }
.help-wrap { max-width: 68ch; }
.help-h2 { font-size: var(--fs-lg); margin: 2.5rem 0 .8rem; }
.help-wrap > :first-child .help-h2:first-child, .help-wrap > .help-h2:first-child { margin-top: 0; }
#help-browse > .help-h2:first-child { margin-top: 0; }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.help-list li:last-child { border-bottom: 1px solid var(--line); }
.help-list a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; min-height: 24px; }
.help-list span { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
ol.help-start { counter-reset: hs; }
ol.help-start li { counter-increment: hs; padding-left: 2.2rem; position: relative; }
ol.help-start li::before { content: counter(hs); position: absolute; left: 0; top: .85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-sm); font-weight: 700; }
.help-cats .help-n { margin-top: auto; padding-top: .35rem; font-size: var(--fs-xs); }
.help-count { margin: 0 0 .6rem; color: var(--muted); font-size: var(--fs-sm); }
.help-none p { margin: 0 0 .5rem; line-height: var(--lh-body); }
.help-contact { margin: 2.5rem 0 0; color: var(--muted); }
.help-body { font-size: var(--fs-md); line-height: var(--lh-loose); } /* the type scale has no 17px: 18px, the closest */
.help-body p { margin: 0 0 1rem; }
.help-answer { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.help-steps { margin: 0 0 1.2rem; padding-inline-start: 1.4rem; }
.help-steps li { margin: 0 0 .55rem; padding-inline-start: .2rem; }
.help-note, .help-tip { margin: 0 0 1.2rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--surface); border-inline-start: 3px solid var(--line); }
.help-tip { border-inline-start-color: var(--accent); }
.help-note b, .help-tip b { display: block; font-size: var(--fs-sm); }
.help-note p, .help-tip p { margin: .2rem 0 0; }
.help-open { margin: 1.6rem 0 1.2rem; }
.help-updated { color: var(--muted); font-size: var(--fs-sm); }
.help-tags { margin: -.4rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.help-region { color: var(--on-chrome-2); font-size: var(--fs-sm); font-weight: 600; }
.help-related { margin-top: 2.5rem; }
.help-useful { margin: 1.4rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.help-useful p { margin: 0; font-weight: 600; }
@media (max-width: 600px) {
  .help-search-row { flex-direction: column; }
  .help-section { padding: 2rem 0 3rem; }
}
.site-help-band { padding: 0 0 3rem; }
.site-help-band p { margin: 0; color: var(--muted); }
.site .btn.help-go { min-height: 48px; height: 48px; padding: 0 1.2rem; background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }