/* The Help Center.
 *
 * site.css sets the type, the nav, the buttons and the footer; this adds the
 * help surfaces. Same rules as the rest of the site: monochrome chrome, cyan
 * only on focus, and photographs carrying the page. Every category has one
 * (help/categories.json), so a page opens on a picture rather than a heading,
 * and text on a card is its name and nothing more.
 *
 * The reference this was drawn from washes its search hero in purple. That is
 * not ours; our hero is a photograph under a black scrim.
 */

.help {
  padding-top: var(--nc-nav-height);
  min-height: 70vh;
}

.help-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--nc-space-xl) clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl))
    var(--nc-space-xxxxl);
}

.help-kicker {
  margin: 0 0 var(--nc-space-sm);
  font-size: var(--nc-type-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nc-color-text-secondary);
}

.help-kicker--light {
  color: var(--nc-color-text-primary);
  opacity: 0.85;
}

.help-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.help-icon--sm {
  width: 18px;
  height: 18px;
}

.help-icon--xs {
  width: 14px;
  height: 14px;
}

/* A round icon holder, used by every badge on the page. */
.help-cat__badge,
.help-band-photo__badge,
.help-quick__icon,
.help-aud__icon,
.help-row__icon,
.help-band__icon,
.help-answer__icon,
.help-still__icon,
.help-tile__icon,
.help-route__icon,
.help-head__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: var(--nc-radius-pill);
}

/* ------------------------------------------------------------------ hero */

.help-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--nc-color-border);
}

.help-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.help-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 45%, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.65)),
    linear-gradient(to bottom, rgb(0 0 0 / 0.35), var(--nc-color-background));
}

.help-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(64px, 13vh, 150px) clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl))
    clamp(72px, 12vh, 132px);
  text-align: center;
}

.help-hero__h {
  margin: 0 auto var(--nc-space-xl);
  max-width: 16ch;
  font-size: clamp(38px, 7vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- search */

.help-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nc-space-sm);
  margin: 0 auto;
  max-width: 640px;
  padding: var(--nc-space-xs) var(--nc-space-xs) var(--nc-space-xs) var(--nc-space-lg);
  border: 1px solid var(--nc-color-border-strong);
  border-radius: var(--nc-radius-pill);
  background: color-mix(in srgb, var(--nc-color-surface) 88%, transparent);
  backdrop-filter: blur(12px);
  text-align: left;
}

.help-search:focus-within {
  border-color: var(--nc-color-primary);
}

.help-search__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--nc-color-text-secondary);
}

.help-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--nc-color-text-primary);
  font: inherit;
  font-size: 17px;
}

.help-search__input::placeholder {
  color: var(--nc-color-text-secondary);
}

/* The field's border shows focus; the input itself does not need a ring too. */
.help-search__input:focus-visible {
  outline: none;
}

.help-search__input::-webkit-search-cancel-button {
  filter: invert(1);
}

.help-search--large {
  padding-left: var(--nc-space-xl);
}

.help-search--large .help-search__input {
  min-height: 56px;
  font-size: 19px;
}

.help-search__go {
  flex: none;
}

.help-results {
  max-width: 640px;
  margin: var(--nc-space-md) auto 0;
  padding: var(--nc-space-sm);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface);
  text-align: left;
}

/* Inside a content page the search sits on the page's own left edge. */
.help-wrap .help-search,
.help-wrap .help-results {
  margin-left: 0;
}

.help-side .help-search,
.help-side .help-results {
  max-width: none;
}

.help-results__more {
  display: block;
  padding: var(--nc-space-md) var(--nc-space-lg);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* A search result: the category's photograph, then the words. */
.help-hit {
  border-bottom: 1px solid var(--nc-color-border);
}

.help-hit:last-child {
  border-bottom: 0;
}

.help-hit__link {
  display: flex;
  align-items: center;
  gap: var(--nc-space-md);
  padding: var(--nc-space-md) var(--nc-space-sm);
  border-radius: var(--nc-radius-sm);
}

.help-hit__img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--nc-radius-md);
  object-fit: cover;
}

.help-hit__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.help-hit__title {
  font-weight: 600;
  line-height: 1.3;
}

.help-hit__link:hover .help-hit__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.help-hit__cat {
  font-size: var(--nc-type-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nc-color-text-secondary);
}

.help-empty {
  padding: var(--nc-space-lg);
}

.help-empty__h {
  margin: 0 0 var(--nc-space-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.help-empty__p {
  margin: var(--nc-space-sm) 0;
  color: var(--nc-color-text-secondary);
}

.help-empty__p a,
.help-empty__list a {
  color: var(--nc-color-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.help-empty__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-sm);
  margin: var(--nc-space-md) 0;
}

.help-empty__list a {
  display: inline-block;
  padding: var(--nc-space-xs) var(--nc-space-md);
  border: 1px solid var(--nc-color-border-strong);
  border-radius: var(--nc-radius-pill);
  text-decoration: none;
}

/* -------------------------------------------------------------- sections */

.help-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--nc-space-xxxl) clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl)) 0;
}

.help-section__h {
  margin: 0 0 var(--nc-space-lg);
  font-size: var(--nc-type-heading-size);
  line-height: var(--nc-type-heading-line-height);
  letter-spacing: var(--nc-type-heading-letter-spacing);
  font-weight: 600;
}

/* Quick links sit on the hero's lower edge, as big icon tiles. */
.help-section--quick {
  position: relative;
  margin-top: calc(-1 * clamp(40px, 7vh, 64px));
  padding-top: 0;
}

.help-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nc-space-md);
}

.help-quick__link {
  display: grid;
  justify-items: center;
  gap: var(--nc-space-sm);
  padding: var(--nc-space-xl) var(--nc-space-sm) var(--nc-space-lg);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface);
  text-align: center;
  transition:
    border-color var(--nc-duration-fast) ease,
    transform var(--nc-duration-fast) ease;
}

.help-quick__link:hover {
  border-color: var(--nc-color-border-strong);
  transform: translateY(-2px);
}

.help-quick__icon {
  width: 56px;
  height: 56px;
  background: var(--nc-color-surface-raised);
}

.help-quick__icon .help-icon {
  width: 28px;
  height: 28px;
}

.help-quick__label {
  font-weight: 600;
  line-height: 1.25;
}

/* On a phone the tiles lie on their side: icon beside label, two across. */
@media (max-width: 720px) {
  .help-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nc-space-sm);
  }

  .help-quick li:last-child {
    grid-column: 1 / -1;
  }

  .help-quick__link {
    display: flex;
    align-items: center;
    gap: var(--nc-space-md);
    padding: var(--nc-space-md);
    text-align: left;
  }

  .help-quick__icon {
    width: 40px;
    height: 40px;
  }

  .help-quick__icon .help-icon {
    width: 22px;
    height: 22px;
  }
}

/* Audiences: three photographs. */
.help-auds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--nc-space-lg);
}

.help-aud {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--nc-radius-lg);
  aspect-ratio: 16 / 10;
  max-width: 100%;
  background: var(--nc-color-surface-raised);
}

.help-aud__img,
.help-cat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--nc-duration-slow) ease;
}

.help-aud:hover .help-aud__img,
.help-cat:hover .help-cat__img {
  transform: scale(1.04);
}

.help-aud__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: var(--nc-space-md);
  padding: var(--nc-space-xxl) var(--nc-space-lg) var(--nc-space-lg);
  background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.5) 60%, transparent);
}

.help-aud__icon {
  width: 40px;
  height: 40px;
  background: var(--nc-color-primary);
  color: var(--nc-color-on-primary);
}

.help-aud__title {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.help-aud__go {
  width: 22px;
  height: 22px;
}

/* Categories: a grid of photographs. */
.help-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--nc-space-lg);
}

.help-cats--gap {
  margin: var(--nc-space-xxl) 0;
}

.help-cat {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface-raised);
}

.help-cat__badge {
  position: absolute;
  top: var(--nc-space-md);
  left: var(--nc-space-md);
  width: 44px;
  height: 44px;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / 0.16);
}

.help-cat__body {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: var(--nc-space-xs);
  padding: var(--nc-space-xxxl) var(--nc-space-lg) var(--nc-space-lg);
  background: linear-gradient(to top, rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.55) 55%, transparent);
}

.help-cat__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.help-cat__count {
  justify-self: start;
  padding: 2px var(--nc-space-sm);
  border-radius: var(--nc-radius-pill);
  background: rgb(255 255 255 / 0.14);
  font-size: var(--nc-type-caption-size);
  font-weight: 600;
}

/* ---------------------------------------------------------- contact band */

.help-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nc-space-lg);
  margin: var(--nc-space-xxxl) 0 0;
  padding: var(--nc-space-xl);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface);
}

.help-band__icon {
  width: 56px;
  height: 56px;
  background: var(--nc-color-primary);
  color: var(--nc-color-on-primary);
}

.help-band__text {
  flex: 1 1 240px;
}

.help-band__h {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.03em;
  font-weight: 700;
}

.help-band__p {
  margin: var(--nc-space-xs) 0 0;
  color: var(--nc-color-text-secondary);
}

.help-urgent-line {
  display: flex;
  align-items: flex-start;
  gap: var(--nc-space-sm);
  margin: var(--nc-space-lg) 0 var(--nc-space-xxxl);
  font-size: 15px;
  color: var(--nc-color-text-secondary);
}

.help-urgent-line .help-icon {
  margin-top: 3px;
  color: var(--nc-color-warning);
}

.help-urgent-line strong {
  color: var(--nc-color-text-primary);
}

/* ------------------------------------------------------------ photo band */

.help-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-xs) var(--nc-space-sm);
  font-size: 14px;
  color: var(--nc-color-text-secondary);
}

.help-crumbs li + li::before {
  content: '/';
  margin-right: var(--nc-space-sm);
  color: var(--nc-color-text-tertiary);
}

.help-crumbs a {
  text-decoration: underline;
  text-decoration-color: var(--nc-color-border-strong);
  text-underline-offset: 0.2em;
}

.help-crumbs a:hover,
.help-crumbs [aria-current] {
  color: var(--nc-color-text-primary);
}

.help-band-photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: var(--nc-space-lg) 0 var(--nc-space-xxl);
  min-height: clamp(240px, 34vw, 340px);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface-raised);
}

.help-band-photo--short {
  min-height: clamp(200px, 24vw, 260px);
}

.help-band-photo__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.help-band-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.92) 0%,
    rgb(0 0 0 / 0.6) 50%,
    rgb(0 0 0 / 0.25) 100%
  );
}

.help-band-photo__body {
  padding: var(--nc-space-xl) clamp(var(--nc-space-lg), 3vw, var(--nc-space-xxl));
  max-width: 820px;
}

.help-band-photo__badge {
  width: 52px;
  height: 52px;
  margin-bottom: var(--nc-space-md);
  background: var(--nc-color-primary);
  color: var(--nc-color-on-primary);
}

.help-band-photo__h {
  margin: 0;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.help-band-photo--short .help-band-photo__h {
  font-size: clamp(28px, 4vw, 44px);
}

.help-band-photo__lede {
  margin: var(--nc-space-sm) 0 0;
  max-width: 52ch;
  font-size: 18px;
  color: var(--nc-color-text-primary);
  opacity: 0.88;
}

.help-head {
  margin: var(--nc-space-xl) 0 var(--nc-space-xl);
}

.help-head--center {
  text-align: center;
}

.help-head__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--nc-space-md);
  background: var(--nc-color-surface-raised);
}

.help-head__icon .help-icon {
  width: 32px;
  height: 32px;
}

.help-head__h {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.help-head__h--editorial {
  font-size: clamp(38px, 6vw, 68px);
}

.help-head__lede {
  margin: var(--nc-space-md) 0 0;
  font-size: 19px;
  color: var(--nc-color-text-secondary);
}

.help-head--center + .help-search {
  margin-left: auto;
}

/* ------------------------------------------------------ lists and layout */

.help-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(var(--nc-space-xxl), 5vw, 80px);
  align-items: start;
}

@media (max-width: 900px) {
  .help-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* An article row: icon tile, title, one line of summary, an arrow. */
.help-rows {
  display: grid;
  gap: var(--nc-space-sm);
}

.help-row__link {
  display: flex;
  align-items: center;
  gap: var(--nc-space-lg);
  padding: var(--nc-space-lg);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-md);
  background: var(--nc-color-surface);
  transition: border-color var(--nc-duration-fast) ease;
}

.help-row__link:hover {
  border-color: var(--nc-color-border-strong);
}

.help-row__icon {
  width: 44px;
  height: 44px;
  background: var(--nc-color-surface-raised);
}

.help-row__text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.help-row__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.help-row__summary {
  overflow: hidden;
  color: var(--nc-color-text-secondary);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.help-row__go {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--nc-color-text-secondary);
}

.help-rows--compact .help-row__link {
  padding: var(--nc-space-md);
  gap: var(--nc-space-md);
}

.help-rows--compact .help-row__icon {
  width: 36px;
  height: 36px;
}

.help-rows--compact .help-row__icon .help-icon {
  width: 18px;
  height: 18px;
}

.help-side {
  display: grid;
  gap: var(--nc-space-md);
  position: sticky;
  top: calc(var(--nc-nav-height) + var(--nc-space-lg));
}

@media (max-width: 900px) {
  .help-side {
    position: static;
    padding-top: var(--nc-space-xl);
    border-top: 1px solid var(--nc-color-border);
  }
}

.help-side__h {
  margin: var(--nc-space-lg) 0 0;
  font-size: var(--nc-type-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--nc-color-text-secondary);
}

.help-side__list {
  display: grid;
  gap: var(--nc-space-xs);
  font-size: 15px;
}

.help-side__link {
  display: flex;
  align-items: center;
  gap: var(--nc-space-sm);
  padding: var(--nc-space-xs) 0;
  color: var(--nc-color-text-secondary);
}

.help-side__link:hover {
  color: var(--nc-color-text-primary);
}

.help-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--nc-space-xxl) clamp(var(--nc-space-xl), 4vw, var(--nc-space-xxxl));
  margin-top: var(--nc-space-xxl);
}

.help-group__h {
  margin: 0 0 var(--nc-space-md);
  font-size: 18px;
  font-weight: 700;
}

.help-group__h a {
  display: flex;
  align-items: center;
  gap: var(--nc-space-md);
}

.help-group__img {
  width: 48px;
  height: 48px;
  border-radius: var(--nc-radius-md);
  object-fit: cover;
}

/* --------------------------------------------------------------- article */

.help-article {
  min-width: 0;
  max-width: 720px;
}

.help-article__meta {
  margin: 0 0 var(--nc-space-lg);
  font-size: 14px;
  color: var(--nc-color-text-secondary);
}

.help-answer {
  display: flex;
  gap: var(--nc-space-lg);
  align-items: flex-start;
  margin: 0 0 var(--nc-space-xl);
  padding: var(--nc-space-lg) var(--nc-space-xl);
  border: 1px solid var(--nc-color-border-strong);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface);
}

.help-answer__icon {
  width: 44px;
  height: 44px;
  background: var(--nc-color-primary);
  color: var(--nc-color-on-primary);
}

.help-answer__label {
  margin: 0 0 var(--nc-space-xs);
  font-size: var(--nc-type-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nc-color-text-secondary);
}

.help-answer__text {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}

.help-outline {
  margin: 0 0 var(--nc-space-xl);
}

.help-outline__h {
  margin: 0 0 var(--nc-space-sm);
  font-size: var(--nc-type-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nc-color-text-secondary);
}

/* The outline as a row of chips, not another list to read. */
.help-outline ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-sm);
}

.help-outline a {
  display: inline-block;
  padding: var(--nc-space-xs) var(--nc-space-md);
  border: 1px solid var(--nc-color-border-strong);
  border-radius: var(--nc-radius-pill);
  font-size: 14px;
}

.help-outline a:hover {
  border-color: var(--nc-color-primary);
}

.help-prose {
  font-size: 17px;
  line-height: 1.65;
}

.help-prose h2 {
  margin: var(--nc-space-xxl) 0 var(--nc-space-md);
  padding-top: var(--nc-space-lg);
  border-top: 1px solid var(--nc-color-border);
  font-size: var(--nc-type-heading-size);
  line-height: var(--nc-type-heading-line-height);
  letter-spacing: var(--nc-type-heading-letter-spacing);
  font-weight: 600;
}

.help-prose h3 {
  margin: var(--nc-space-xl) 0 var(--nc-space-sm);
  font-size: 19px;
  font-weight: 600;
}

.help-prose p {
  margin: 0 0 var(--nc-space-lg);
}

/* Numbered steps are cards with a big number: the part of an article
 * somebody follows with the app open beside it. */
.help-prose ol,
.help-steps {
  display: grid;
  gap: var(--nc-space-sm);
  margin: 0 0 var(--nc-space-lg);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.help-prose ol > li,
.help-steps > li {
  position: relative;
  min-height: 56px;
  padding: var(--nc-space-md) var(--nc-space-lg) var(--nc-space-md) 68px;
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-md);
  background: var(--nc-color-surface);
  counter-increment: step;
}

.help-prose ol > li::before,
.help-steps > li::before {
  content: counter(step);
  position: absolute;
  left: var(--nc-space-md);
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-color-primary);
  color: var(--nc-color-on-primary);
  font-weight: 700;
  font-size: 16px;
}

.help-prose ul {
  display: grid;
  gap: var(--nc-space-sm);
  margin: 0 0 var(--nc-space-lg);
  padding-left: 1.4em;
  list-style: disc;
}

.help-prose ul > li::marker {
  color: var(--nc-color-text-secondary);
}

.help-prose a,
.help-still a:not(.btn),
.help-route a,
.help-callout a,
.help-note a,
.help-why a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.help-prose strong,
.help-steps strong {
  font-weight: 600;
  color: var(--nc-color-text-primary);
}

.help-callout {
  margin: 0 0 var(--nc-space-lg);
  padding: var(--nc-space-md) var(--nc-space-lg);
  border: 1px solid var(--nc-color-border-strong);
  border-radius: var(--nc-radius-md);
}

.help-callout p {
  margin: 0;
}

.help-callout--urgent {
  border-color: var(--nc-color-warning);
  background: color-mix(in srgb, var(--nc-color-warning) 8%, transparent);
}

.help-callout--urgent strong {
  color: var(--nc-color-warning);
}

.help-callout--icon {
  display: flex;
  gap: var(--nc-space-md);
  align-items: flex-start;
}

.help-callout--icon > .help-icon {
  color: var(--nc-color-warning);
}

.help-still {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nc-space-lg);
  margin: var(--nc-space-xxxl) 0 0;
  padding: var(--nc-space-xl);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface);
}

.help-still__icon {
  width: 52px;
  height: 52px;
  background: var(--nc-color-surface-raised);
}

.help-still__text {
  flex: 1 1 220px;
}

.help-still__h {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.help-still__text p {
  margin: var(--nc-space-xs) 0 0;
  font-size: 15px;
  color: var(--nc-color-text-secondary);
}

.help-related {
  margin-top: var(--nc-space-xxl);
}

.help-related__h {
  margin: 0 0 var(--nc-space-md);
  font-size: 18px;
  font-weight: 600;
}

.help-rels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--nc-space-md);
}

.help-rel {
  display: block;
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-md);
  background: var(--nc-color-surface);
}

.help-rel:hover {
  border-color: var(--nc-color-border-strong);
}

.help-rel__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.help-rel__body {
  display: grid;
  gap: var(--nc-space-xs);
  padding: var(--nc-space-md);
}

.help-rel__cat {
  display: flex;
  align-items: center;
  gap: var(--nc-space-xs);
  font-size: var(--nc-type-caption-size);
  color: var(--nc-color-text-secondary);
}

.help-rel__title {
  font-weight: 600;
  line-height: 1.3;
}

/* --------------------------------------------------------------- contact */

.help-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--nc-space-md);
  margin: var(--nc-space-xl) 0 var(--nc-space-xxl);
}

.help-tile {
  display: grid;
  align-content: start;
  gap: var(--nc-space-sm);
  height: 100%;
  padding: var(--nc-space-lg);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-color-surface);
  transition: border-color var(--nc-duration-fast) ease;
}

.help-tile:hover {
  border-color: var(--nc-color-border-strong);
}

.help-tile__icon {
  width: 52px;
  height: 52px;
  background: var(--nc-color-surface-raised);
}

.help-tile__title {
  font-size: 18px;
  font-weight: 700;
}

.help-tile__text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--nc-color-text-secondary);
}

.help-tile__action {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-space-xs);
  margin-top: var(--nc-space-xs);
  font-size: 14px;
  font-weight: 600;
}

.help-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--nc-space-lg);
  margin-bottom: var(--nc-space-lg);
}

.help-route {
  padding: var(--nc-space-xl);
  border: 1px solid var(--nc-color-border);
  border-radius: var(--nc-radius-lg);
  scroll-margin-top: calc(var(--nc-nav-height) + var(--nc-space-lg));
}

.help-route__h {
  display: flex;
  align-items: center;
  gap: var(--nc-space-sm);
  margin: 0 0 var(--nc-space-md);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.help-route__head {
  display: flex;
  gap: var(--nc-space-lg);
  align-items: center;
  margin-bottom: var(--nc-space-md);
}

.help-route__head .help-route__h {
  margin: 0;
}

.help-route__icon {
  width: 56px;
  height: 56px;
  background: var(--nc-color-primary);
  color: var(--nc-color-on-primary);
}

.help-route--form {
  background: var(--nc-color-surface);
}

.help-note {
  margin: var(--nc-space-xs) 0 0;
  font-size: 15px;
  color: var(--nc-color-text-secondary);
}

.help-why {
  margin: 0 0 var(--nc-space-lg);
  font-size: 15px;
  color: var(--nc-color-text-secondary);
}

.help-why summary {
  cursor: pointer;
  color: var(--nc-color-text-primary);
  font-weight: 600;
}

.help-why p {
  margin: var(--nc-space-sm) 0 0;
}

.help-form {
  display: grid;
  gap: var(--nc-space-lg);
}

.help-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--nc-space-lg);
}

.help-field {
  display: grid;
  align-content: start;
  gap: var(--nc-space-sm);
}

.help-field label {
  font-size: 15px;
  font-weight: 600;
}

.help-field__opt {
  font-weight: 400;
  color: var(--nc-color-text-secondary);
}

.help-field__hint {
  margin: 0;
  font-size: var(--nc-type-caption-size);
  color: var(--nc-color-text-secondary);
}

.help-field__hint--warn {
  display: flex;
  align-items: center;
  gap: var(--nc-space-xs);
  color: var(--nc-color-text-primary);
}

.help-form input[type='text'],
.help-form input[type='email'],
.help-form select,
.help-form textarea {
  width: 100%;
  min-height: var(--nc-min-touch-target, 48px);
  padding: var(--nc-space-md) var(--nc-space-lg);
  border-radius: var(--nc-radius-md);
  border: 1px solid var(--nc-color-border-strong);
  background: var(--nc-color-background);
  color: var(--nc-color-text-primary);
  font: inherit;
  font-size: 16px;
}

.help-form textarea {
  resize: vertical;
}

.help-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nc-color-text-secondary) 50%),
    linear-gradient(135deg, var(--nc-color-text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.help-form input:focus,
.help-form select:focus,
.help-form textarea:focus {
  border-color: var(--nc-color-primary);
}

.help-form [aria-invalid='true'] {
  border-color: var(--nc-color-danger);
}

.help-form__error {
  margin: 0;
  padding: var(--nc-space-md) var(--nc-space-lg);
  border: 1px solid var(--nc-color-danger);
  border-radius: var(--nc-radius-md);
}

.help-form .btn {
  justify-self: start;
}

.help-form button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Off-screen rather than display:none, which some scripts check for. */
.help-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 520px) {
  /* Topics two across, square, so eleven photographs are a grid and not a
     scroll the length of the city. */
  .help-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nc-space-sm);
  }

  .help-cat {
    aspect-ratio: 1;
    border-radius: var(--nc-radius-md);
  }

  .help-cat__badge {
    top: var(--nc-space-sm);
    left: var(--nc-space-sm);
    width: 36px;
    height: 36px;
  }

  .help-cat__badge .help-icon {
    width: 18px;
    height: 18px;
  }

  .help-cat__body {
    padding: var(--nc-space-xxl) var(--nc-space-sm) var(--nc-space-sm);
  }

  .help-cat__title {
    font-size: 15px;
  }

  .help-aud {
    aspect-ratio: 2 / 1;
  }

  .help-search__go {
    padding-left: var(--nc-space-lg);
    padding-right: var(--nc-space-lg);
  }

  .help-route,
  .help-still,
  .help-band,
  .help-answer {
    padding: var(--nc-space-lg);
  }

  .help-answer {
    flex-direction: column;
    gap: var(--nc-space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-aud__img,
  .help-cat__img,
  .help-quick__link {
    transition: none;
  }

  .help-aud:hover .help-aud__img,
  .help-cat:hover .help-cat__img,
  .help-quick__link:hover {
    transform: none;
  }
}