/* Test Candidates support hub.

   Brand values read from the live product and marketing site on 20 September
   2026 rather than approximated: navy #1B1C40 is the marketing masthead,
   #3DDC97 the accent, Circular the typeface (vendored here as it already is
   in the candidate app, the employer app and the splash).

   If the brand changes, this :root block and the font files are the whole of
   what needs changing. */

@font-face {
  font-family: 'Circular';
  src: url('../fonts/Circular-book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('../fonts/Circular-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('../fonts/Circular-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --tc-navy: #1B1C40;
  --tc-navy-soft: #2A2B57;
  --tc-ink: #12141A;
  --tc-body: #2D3748;
  --tc-muted: #5A6478;
  --tc-line: #D2D6DC;
  --tc-rule: #E8EAEF;
  --tc-green: #3DDC97;
  /* The green of the marketing site's 26x4 rule and of link underlines.
     Slightly deeper than the accent so 2px of it reads on white. It was
     hard-coded in six rules, which quietly broke this block's promise that
     a brand change is one file. */
  --tc-green-rule: #2ED18A;
  --tc-green-deep: #16845A;
  --tc-tint: #F5F7FA;

  --hub-max: 1120px;
  --hub-gutter: 20px;
  --hub-measure: 68ch;

  --font: 'Circular', 'Circular Std', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--tc-body);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tc-ink); margin: 0; font-weight: 500; letter-spacing: -0.03em; }
p { text-wrap: pretty; }
a {
  color: var(--tc-ink);
  text-decoration: underline;
  text-decoration-color: var(--tc-green-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:hover { text-decoration-color: var(--tc-green-deep); }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tc-green-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Layout ---------------------------------------------------------- */

.hub-pad {
  max-width: var(--hub-max);
  margin: 0 auto;
  padding-left: var(--hub-gutter);
  padding-right: var(--hub-gutter);
}

.hub-section { padding-block: 56px; }

.hub-skip {
  position: absolute; top: -100px; left: 16px;
  padding: 12px 20px; background: #fff;
  border: 2px solid var(--tc-ink); border-radius: 6px; z-index: 100;
}
.hub-skip:focus { top: 8px; }

/* ---- Masthead, matching the marketing site --------------------------- */

.hub-header { background: var(--tc-navy); color: #C7C7D0; }

.hub-header__bar { display: flex; align-items: center; gap: 32px; min-height: 76px; }

.hub-wordmark {
  display: block; color: #fff; white-space: nowrap;
  font-size: 19px; font-weight: 500; letter-spacing: -0.025em;
  line-height: 1; text-decoration: none; flex: 0 0 auto;
}

.hub-wordmark i {
  display: block; width: 36px; height: 3px;
  background: var(--tc-green); margin-top: 7px;
  border-radius: 2px; font-style: normal;
}

.hub-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 0.9375rem; }

.hub-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #C7C7D0; text-decoration: none; }
.hub-card, .hub-cards a, .hub-nav a:hover { color: #fff; }

/* The hub you are in. The green underline is the same accent the wordmark
   carries, so "where am I" and "whose site is this" use one language. */
.hub-nav a.is-current {
  color: #fff;
  position: relative;
}

.hub-nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--tc-green);
}

/* ---- Hero ------------------------------------------------------------ */

.hub-hero { background: var(--tc-navy); color: #fff; padding: 18px 0 64px; text-align: center; }

.hub-hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.06; letter-spacing: -0.035em;
  margin: 0 auto; max-width: 18ch;
}

.hub-hero__eyebrow {
  font: 500 0.75rem/1.5 var(--mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tc-green); margin: 0 0 16px;
}

.hub-hero__lede { margin: 18px auto 0; max-width: 54ch; font-size: 1.125rem; line-height: 1.6; color: #C7C7D0; }

.hub-hero__popular { margin: 22px 0 0; font-size: 0.9375rem; color: #9B9BAE; }
.hub-hero__popular a { color: #fff; margin: 0 4px; text-decoration: underline; text-decoration-color: var(--tc-green-rule); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hub-hero__popular a:hover { color: var(--tc-green); text-decoration-color: #fff; }

/* ---- Search ----------------------------------------------------------

   Matches the search on the marketing site (tc-test-search): a labelled
   52px field with a 6px radius and a 1px border, focus ring in the deep
   green, and a clear button on the right. Results drop below it as an
   overlay so they never push the page around. */

.hub-search { margin: 26px auto 0; max-width: 620px; text-align: left; }

.hub-search__label {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
  color: #fff;
  font-size: 0.9375rem;
}

.hub-search .pagefind-ui__form { position: relative; }

/* Pagefind draws a magnifying glass as an absolutely positioned pseudo
   element at left:16px, which lands exactly where our text starts and sits
   under the placeholder. The marketing search has no left icon, so remove
   it rather than indenting the text away from it. */
.hub-search .pagefind-ui__form::before { display: none !important; }

.hub-search .pagefind-ui__search-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 12px 52px 12px 16px;
  border: 1px solid #CBD2D7;
  border-radius: 6px;
  background: #fff;
  color: var(--tc-navy);
  font-family: var(--font);
  font-size: 1rem;
  appearance: none;
  outline: none;
  box-shadow: none;
}

.hub-search .pagefind-ui__search-input::placeholder { color: #59657B; }

.hub-search .pagefind-ui__search-input:focus,
.hub-search .pagefind-ui__search-input:focus-visible {
  border-color: #21855E;
  box-shadow: 0 0 0 1px #21855E;
  outline: none;
}

.hub-search .pagefind-ui__search-clear {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #59657B;
  font-size: 0;
  cursor: pointer;
  z-index: 2;
}

.hub-search .pagefind-ui__search-clear::after { content: "\00D7"; font-size: 26px; line-height: 1; }
.hub-search .pagefind-ui__search-clear:hover { color: var(--tc-navy); }

/* Results sit over the hero and take its colour, so the dropdown reads as
   part of the hero rather than a white card dropped on top of it. It keeps a
   solid background rather than being literally transparent because it can
   extend past the hero onto the white section below, where transparent white
   text would vanish. */
.hub-search .pagefind-ui__drawer {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 6px;
  background: var(--tc-navy);
  box-shadow: 0 20px 44px rgb(9 10 30 / 45%);
  text-align: left;
  padding: 8px 0;
}

.hub-search .pagefind-ui__results-area { margin: 0; }
.hub-search .pagefind-ui__results { margin: 0; padding: 0; list-style: none; }

/* Pagefind pads each result 24px/32px and offsets the inner block, using the
   same doubled-class trick as its filter panel, which is why plain overrides
   lost and the rows came out 117px tall. */
.hub-search .pagefind-ui__result {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.hub-search .pagefind-ui__result-inner { margin: 0 !important; gap: 0 !important; }
.hub-search .pagefind-ui__result-title { margin: 0; }

/* Pagefind colours the result link with the same doubled-class trick, so
   this needs !important too or the links come out dark grey on navy. */
.hub-search .pagefind-ui__result-title a,
.hub-search .pagefind-ui__result-link {
  display: block;
  padding: 10px 18px;
  color: #fff !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}

/* Six results is the cap; a "load more" button invites paging through a
   dropdown, which is not what a support search is for. */
.hub-search .pagefind-ui__button { display: none !important; }

.hub-search .pagefind-ui__result-title a:hover,
.hub-search .pagefind-ui__result-link:hover {
  background: var(--tc-navy-soft);
  text-decoration: underline;
  text-decoration-color: var(--tc-green-rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* A result needs its page title and nothing else. */
.hub-search .pagefind-ui__result-excerpt,
.hub-search .pagefind-ui__result-image,
.hub-search .pagefind-ui__result-nested { display: none !important; }

.hub-search .pagefind-ui__message {
  padding: 8px 18px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: #9B9BAE;
}

/* The count is only worth saying when there is nothing to show. */
.hub-search .pagefind-ui__drawer:has(.pagefind-ui__result) .pagefind-ui__message { display: none; }

.hub-search mark { background: transparent; color: var(--tc-green); font-weight: 500; }

/* The hub filter is applied by the page, not chosen by the reader, so the
   filter panel is noise. Hiding it does not disable the filter.

   !important is needed rather than lazy: Pagefind ships Svelte-scoped rules
   that repeat the scope class (.pagefind-ui__filter-panel.svelte-x.svelte-x),
   which deliberately outranks any reasonable selector we could write. */
.hub-search .pagefind-ui__filter-panel { display: none !important; }

/* ---- Section cards --------------------------------------------------- */

.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hub-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hub-card {
  display: flex; flex-direction: column;
  padding: 30px 28px; border-radius: 12px;
  background: var(--tc-navy); color: #fff; text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease;
}

.hub-card:hover { background: var(--tc-navy-soft); transform: translateY(-2px); }

.hub-card__icon { width: 42px; height: 42px; margin-bottom: 20px; color: var(--tc-green); }
.hub-card__icon svg { width: 100%; height: 100%; display: block; }

.hub-card h3 { color: #fff; font-size: 1.25rem; line-height: 1.25; margin: 0 0 10px; }
.hub-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: #C7C7D0; }

.hub-card__count {
  display: block; margin-top: 18px;
  font: 500 0.75rem/1.5 var(--mono);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--tc-green);
}



/* ---- The three inline answers on the candidate landing ---------------- */

.hub-upfront { background: var(--tc-tint); border-bottom: 1px solid var(--tc-rule); }

.hub-upfront__head { padding-block: 52px 0; }
.hub-upfront__head .hub-sub { margin-bottom: 0; }

.hub-upfront__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 26px 52px; }

.hub-upfront article { background: #fff; border: 1px solid var(--tc-line); border-radius: 12px; padding: 26px 24px; }

.hub-upfront h3 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 10px; }

.hub-upfront article::before {
  content: "";
  display: block;
  width: 26px;
  height: 4px;
  background: var(--tc-green-rule);
  border-radius: 2px;
  margin-bottom: 18px;
}

.hub-upfront p { margin: 0 0 14px; font-size: 1rem; }
.hub-upfront a { font-size: 0.9375rem; font-weight: 500; }

/* ---- Headings on light sections -------------------------------------- */

.hub-h2 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 6px; }
.hub-sub { margin: 0 0 28px; color: var(--tc-muted); font-size: 1.0625rem; }

.hub-eyebrow {
  font: 500 0.75rem/1.5 var(--mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tc-green-deep); margin: 0 0 10px;
}

/* ---- Article --------------------------------------------------------- */

.hub-article-head { background: var(--tc-tint); border-bottom: 1px solid var(--tc-rule); }
.hub-article-head .hub-pad { padding-top: 26px; padding-bottom: 38px; }

.hub-article-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; max-width: 22ch; margin: 12px 0 0; }

.hub-lede { font-size: 1.1875rem; line-height: 1.55; color: var(--tc-muted); max-width: 60ch; margin: 16px 0 0; }

/* ★ min-width: 0 is load-bearing. A grid item defaults to min-width: auto,
   so a wide child (a code block) grows the track and takes the page with
   it, and the block's own overflow-x: auto never gets the chance to
   scroll. Measured at 375: the webhook article was 523px wide. */
.hub-article { max-width: var(--hub-measure); min-width: 0; }

.hub-article h2 { font-size: 1.5rem; line-height: 1.3; margin: 46px 0 14px; }

.hub-article h3 { font-size: 1.1875rem; line-height: 1.35; margin: 30px 0 10px; }

.hub-article p, .hub-article li { font-size: 1.0625rem; line-height: 1.7; }

.hub-article ol, .hub-article ul { padding-left: 1.3em; }
.hub-article li { margin: 8px 0; }
.hub-article li::marker { color: var(--tc-green-deep); }
.hub-article strong { font-weight: 500; color: var(--tc-ink); }

.hub-article table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 1rem; }
.hub-article th, .hub-article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tc-rule); }
.hub-article th { font-weight: 500; color: var(--tc-ink); }

/* ⚠️ Long, unbreakable strings are the only thing on this site that can push a
   page wider than the phone. A URL in a table cell and a fenced code block both
   did, measured at 375: the integrations and contact articles were scrolling
   sideways to 434, 470 and 521px. The candidate half had neither, which is why
   it never showed up before the employer half was written. */
.hub-article th, .hub-article td { overflow-wrap: anywhere; }

/* Code. The API and webhook articles carry header lines and an HMAC
   expression, and both are longer than a phone is wide. The block scrolls
   itself rather than taking the page with it. */
.hub-article pre {
  margin: 24px 0;
  padding: 14px 16px;
  background: var(--tc-tint);
  border: 1px solid var(--tc-rule);
  border-radius: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hub-article pre code {
  display: block;
  white-space: pre;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tc-ink);
  background: none;
  padding: 0;
  border: 0;
}
.hub-article :not(pre) > code {
  font-size: 0.9375em;
  padding: 1px 5px;
  background: var(--tc-tint);
  border: 1px solid var(--tc-rule);
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.hub-breadcrumb { font-size: 0.875rem; color: var(--tc-muted); }

.hub-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hub-breadcrumb li::after { content: "\203A"; margin-left: 8px; color: var(--tc-line); }
.hub-breadcrumb li:last-child::after { content: ""; }
.hub-breadcrumb a { color: var(--tc-muted); text-decoration: none; }
.hub-breadcrumb a:hover { text-decoration: underline; text-decoration-color: var(--tc-green-rule); text-decoration-thickness: 2px; text-underline-offset: 4px; }


/* Screenshots read as artefacts, not decoration. */
.hub-shot { margin: 30px 0; }

.hub-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--tc-line); border-radius: 10px;
  box-shadow: 0 4px 16px rgb(9 10 30 / 7%);
}

.hub-shot figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--tc-muted); }

/* No sticky sidebars anywhere. House rule, and a help article is exactly
   where a sticky table of contents is most tempting. */
.hub-toc { position: static; }

.hub-related {
  margin-top: 48px; padding: 28px;
  background: var(--tc-tint); border-radius: 12px; max-width: var(--hub-measure);
}

.hub-related h2 { font-size: 1.125rem; margin: 0 0 14px; }
.hub-related ul { list-style: none; margin: 0; padding: 0; }
.hub-related li { margin: 10px 0; }
.hub-related a { font-weight: 500; }
.hub-search .pagefind-ui__result-title a { text-decoration: none; }

/* ---- The topic index on a hub page ------------------------------------ */

.hub-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 36px;
}

.hub-index__topic { min-width: 0; }

.hub-index__topic h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tc-rule);
}

.hub-index__topic h3 a { text-decoration: none; }
.hub-index__topic h3 a:hover { text-decoration: underline; text-decoration-color: #2ED18A; }

.hub-index__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--tc-green-deep);
  flex: 0 0 auto;
}

.hub-index__icon svg { width: 22px; height: 22px; }

.hub-index__topic ul { list-style: none; margin: 0; padding: 0; }

.hub-index__topic li { margin: 0 0 9px; }

/* Navigation links: the topic index on a hub page and the article sidebar.
   One rule for both, so the two lists cannot drift apart. Quiet until you
   point at one, unlike a link inside prose, which is underlined always
   because there it has to be findable mid-sentence. */
.hub-index__topic li a,
.hub-aside a {
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  color: var(--tc-body);
}

.hub-index__topic li a:hover,
.hub-aside a:hover {
  color: var(--tc-ink);
  text-decoration: underline;
  text-decoration-color: #2ED18A;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---- Article cards, with a thumbnail ---------------------------------- */

.hub-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hub-cards > li { margin: 0; }

.hub-cards a {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.hub-cards a:hover {
  border-color: var(--tc-navy);
  box-shadow: 0 6px 18px rgb(9 10 30 / 8%);
}

.hub-cards a:hover .hub-cards__title { color: var(--tc-green-deep); }

.hub-cards__thumb {
  flex: 0 0 116px;
  width: 116px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--tc-tint);
  border: 1px solid var(--tc-rule);
  display: grid;
  place-items: center;
}

.hub-cards__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
}

/* Articles with no screenshot get a brand tile rather than an empty box, so
   a list of them still reads as a designed set. */
.hub-cards__thumb--tile { background: var(--tc-navy); border-color: var(--tc-navy); }
.hub-cards__thumb--tile svg { width: 30px; height: 30px; color: var(--tc-green); }

.hub-cards__body { display: block; min-width: 0; }

.hub-cards__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tc-ink);
}

.hub-cards__sum {
  display: block;
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tc-muted);
}

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

/* Centred, like the hub heroes, so every hero on the site reads the same
   way rather than the landing pages being centred and the rest ranged left. */
.hub-hero--article { text-align: center; padding-block: 34px 56px; }

.hub-hero--article .hub-breadcrumb ol { justify-content: center; }

/* The breadcrumb is the path; it needs room before the title rather than
   sitting on top of it. */
.hub-hero--article .hub-breadcrumb { margin-bottom: 30px; }

.hub-hero--article h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 auto;
}

.hub-hero--article .hub-hero__lede {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: 1.125rem;
}

.hub-hero__meta { margin: 22px 0 0; font-size: 0.875rem; color: #9B9BAE; }

.hub-hero__eyebrow-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  margin-right: 8px;
}

.hub-hero__eyebrow-icon svg { width: 20px; height: 20px; }

.hub-hero--article .hub-hero__eyebrow { display: flex; align-items: center; margin: 0; }

.hub-breadcrumb--dark { color: #9B9BAE; }
.hub-breadcrumb--dark a { color: #C7C7D0; text-decoration: none; }
.hub-breadcrumb--dark a:hover { color: #fff; }
.hub-breadcrumb--dark li::after { color: #4A4B68; }

/* ---- Two-column article layout ---------------------------------------- */

.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}

.hub-aside { display: flex; flex-direction: column; gap: 26px; padding-top: 4px; }

.hub-aside h2 {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tc-muted);
  margin: 0 0 12px;
  font-family: var(--mono);
}

.hub-aside__block { padding-top: 0; }

.hub-aside__block::before,
.hub-toc::before {
  content: "";
  display: block;
  width: 26px;
  height: 4px;
  background: var(--tc-green-rule);
  border-radius: 2px;
  margin-bottom: 16px;
}

.hub-aside ul, .hub-aside ol { list-style: none; margin: 0; padding: 0; }
.hub-aside li { margin: 0 0 10px; }


.hub-aside__block--quiet { background: var(--tc-tint); border-radius: 10px; padding: 20px; }
.hub-aside__block--quiet::before { display: none; }

.hub-aside__block--quiet p { margin: 0 0 10px; font-size: 0.9375rem; color: var(--tc-muted); }
.hub-aside__block--quiet p:last-child { margin-bottom: 0; }

/* The contents list. Not sticky: house rule, and a help article is exactly
   where a sticky table of contents is most tempting. */
/* Not sticky: house rule, and a help article is exactly where a sticky
   table of contents is most tempting. */
.hub-toc { position: static; }
.hub-toc ol { counter-reset: toc; }
.hub-toc li { margin: 0 0 10px; }

/* ---- Contact --------------------------------------------------------- */

.hub-contact {
  border: 1px solid var(--tc-line); border-radius: 12px; background: #fff;
  padding: 30px 28px; margin-top: 48px; max-width: var(--hub-measure);
  border-top: 3px solid var(--tc-green);
}

.hub-contact h2 { font-size: 1.25rem; margin: 0 0 8px; }
.hub-contact p { margin: 0 0 18px; font-size: 1rem; }

.hub-field { display: block; margin: 0 0 16px; }

.hub-field span { display: block; font-size: 0.875rem; font-weight: 500; color: var(--tc-ink); margin-bottom: 6px; }

.hub-field input, .hub-field textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--tc-line); border-radius: 6px; background: #fff;
  font-family: var(--font); font-size: 1rem; color: var(--tc-ink);
}

.hub-field textarea { min-height: 128px; resize: vertical; }
.hub-field--prefilled input { background: var(--tc-tint); color: var(--tc-muted); }

.hub-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid var(--tc-navy); border-radius: 6px;
  background: var(--tc-navy); color: #fff;
  font-family: var(--font); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
}

.hub-btn:hover { background: var(--tc-navy-soft); }
.hub-btn--ghost { background: #fff; color: var(--tc-ink); border-color: var(--tc-line); }
.hub-btn--ghost:hover { background: var(--tc-tint); border-color: var(--tc-navy); }

.hub-empty {
  border: 1px dashed var(--tc-line); border-radius: 12px;
  padding: 28px; color: var(--tc-muted); background: var(--tc-tint);
}

/* ---- Footer ---------------------------------------------------------- */

.hub-footer {
  background: var(--tc-navy); color: #9B9BAE;
  margin-top: 64px; padding: 44px 0 36px; font-size: 0.9375rem;
}

.hub-footer a { color: #C7C7D0; text-decoration: none; }

/* .hub-footer a outranks .hub-wordmark, so the wordmark came out grey. The
   marketing site carries the same rule for the same reason. */
.hub-footer .hub-wordmark { color: #fff; }
.hub-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--tc-green-rule); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.hub-footer__row { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.hub-footer__row nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-left: auto; }

.hub-footer__legal { margin: 26px 0 0; font-size: 0.8125rem; color: #7B7B90; }

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 1040px) {
  /* minmax(0, 1fr), not 1fr: see the note on .hub-article. */
  .hub-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    }

@media (max-width: 1000px) {
  .hub-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 30px; }
}

@media (max-width: 900px) {
  .hub-cards { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-upfront__head { padding-block: 36px 0; }
  .hub-upfront__grid { grid-template-columns: 1fr; gap: 20px; padding-block: 20px 36px; }
}

@media (max-width: 760px) {
  .hub-grid, .hub-grid--two, .hub-index { grid-template-columns: 1fr; }

  .hub-section { padding-block: 40px; }
  .hub-hero { padding-block: 12px 46px; }

  .hub-header__bar { flex-wrap: wrap; gap: 12px 22px; padding-block: 14px; min-height: 0; }

  .hub-nav { margin-left: 0; gap: 18px; font-size: 0.875rem; }
  .hub-cards__thumb { flex-basis: 84px; width: 84px; height: 64px; }
  .hub-hero--article { padding-block: 18px 34px; }
  .hub-footer__row nav { margin-left: 0; }
  .hub-search .pagefind-ui__search-input { min-height: 54px; font-size: 1rem; }
}