/* ==========================================================================
   GUBI Help Center
   Hand-authored from gubi.css (scraped from https://gubi.com/en/dk).

   Token values below are transcribed verbatim from GUBI's production
   :root block. Departures from gubi.css are marked EXTENSION and are the
   only values in this file that do not exist on gubi.com.

   Palette note: GUBI's --color-gray-40 (#767676, 4.17:1 on --page-bg,
   4.02:1 on --grid-tile-color) and --invalid-color (#e95034, 3.40:1 on
   --page-bg) both failed WCAG AA 4.5:1 for normal text. --color-gray-40 is
   raised to #6e6e6e (4.68:1 / 4.51:1); --invalid-color now points at
   GUBI's own --discount-red (5.79:1). See README.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Metric-override fallback faces are ported from gubi.css: they let Arial
   stand in at almost exactly the right size while the webfont loads, which
   is what keeps GUBI's pages from reflowing on first paint.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: helveticaNueue;
  src: url(/hc/theming_assets/01M07XQRF3J3RBFTTN6908FVDG) format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: helveticaNueue;
  src: url(/hc/theming_assets/01M07XQRCSCYBWCTQ9RQMVCHJJ) format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: helveticaNueue;
  src: url(/hc/theming_assets/01M07XQREC7H3EEV3D4YXG7AXV) format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "helveticaNueue Fallback";
  src: local(Arial);
  ascent-override: 95.25%;
  descent-override: 21.35%;
  line-gap-override: 0%;
  size-adjust: 102.36%;
}

@font-face {
  font-family: kingsCaslonTypo;
  src: url(/hc/theming_assets/01M07XQRF515DW1A2WPHNF76FQ) format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "kingsCaslonTypo Fallback";
  src: local(Arial);
  ascent-override: 100.41%;
  descent-override: 29.15%;
  line-gap-override: 0%;
  size-adjust: 92.62%;
}

/* --------------------------------------------------------------------------
   2. Tokens — transcribed from gubi.css :root
   -------------------------------------------------------------------------- */

:root {
  /* Type stacks */
  --helvetica: "helveticaNueue", "helveticaNueue Fallback", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --kings-caslon-typo: "kingsCaslonTypo", "kingsCaslonTypo Fallback",
    "Kings Caslon Typo", "Times New Roman", Times, serif;

  /* Colour */
  --color-black: #171716;
  --color-gray-10: #f5f5f5;
  --color-gray-20: #edece9;
  --color-gray-30: #e4e3df;
  /* EXTENSION — gubi.css declares #767676 (4.17:1 on --page-bg, 4.02:1 on
     --grid-tile-color, both below WCAG AA). Raised to #6e6e6e: 4.68:1 and
     4.51:1. */
  --color-gray-40: #6e6e6e;
  --color-white: #fff;
  --color-red: #df1010;
  --core-dim-medium: #1717164d;
  --core-dim-light: #1717161a;
  --core-dim-dark: #17171699;
  --core-dim-white-light: #ffffff1a;

  --page-bg: var(--color-gray-10);
  --box-bg-color: #f9f8f4;
  --grid-tile-color: #f1f1f0;
  --grid-tile-hover-color: #e4e3df;
  --discount-red: #b82525;
  --primary-border-color: #17171666;
  --invalid-color: var(--discount-red);
  --critical-color: #ef0000;

  /* Form */
  --input-border-radius: 0.25rem;
  --input-border-color: #e3e1e6;
  --input-bg-color: field;
  --input-focus-border-color: #000;
  --input-invalid-border-color: var(--invalid-color);

  /* Chrome heights */
  --navbar-height: 3rem;
  --top-bar-height: 1.875rem;
  --top-bar-visual-height: calc(var(--top-bar-height) + 0.0625rem);
  --global-navbar-height: calc(
    var(--navbar-height) + var(--top-bar-visual-height)
  );

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 0.75rem;
  --spacing-l: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-2xl: 2.25rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 3.75rem;
  --spacing-5xl: 6rem;
  --spacing-6xl: 7.5rem;
  --spacing-7xl: 15rem;

  /* Type scale */
  --heading-xlarge-size: 3rem;
  --heading-large-size: 1.5rem;
  --heading-medium-size: 1.125rem;
  --heading-small-size: 0.75rem;
  --text-large-size: 1.25rem;
  --text-medium-size: 0.875rem;
  --text-small-size: 0.875rem;
  --text-xs-size: 0.75rem;
  --text-caption-size: 0.75rem;

  /* EXTENSION — not present in gubi.css.
     GUBI's largest body step is 14px/140%, which is tuned for product cards
     and navigation, not for 1,200-word support articles. These two values
     apply to article prose only; all chrome stays on GUBI's own scale. */
  --text-body-size: 1rem;
  --text-body-line-height: 165%;
  /* Reading measure for prose only. It is not the width of the article
     column any more — see section 11: the column is the container grid's
     left track, and --measure caps the text inside it so tables and figures
     can use the whole track. */
  --measure: 68ch;

  /* Motion */
  --animation-duration-instant: 0s;
  --animation-duration-quick: 0.2s;
  --animation-duration-standard: 0.6s;
  --animation-duration-slow: 1s;
  --animation-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --animation-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --animation-linear: cubic-bezier(0, 0, 1, 1);

  --max-width: 84rem;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--page-bg);
  color: var(--color-black);
  font-family: var(--helvetica);
  font-size: var(--text-small-size);
  font-weight: 400;
  line-height: 140%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--animation-duration-quick) var(--animation-ease-out);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-gray-40);
  }
}

:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

button {
  font: inherit;
  color: inherit;
}

hr,
.container-divider {
  border: 0;
  border-top: 0.0625rem solid var(--core-dim-light);
  margin: 0;
  height: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--spacing-3xl);
  }
}

.visibility-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-navigation {
  position: absolute;
  left: -9999px;
  z-index: 1000;
  padding: var(--spacing-m) var(--spacing-l);
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
}

.skip-navigation:focus {
  left: var(--spacing-l);
  top: var(--spacing-l);
}

/* --------------------------------------------------------------------------
   4. Typography — chrome
   GUBI's heading system verbatim: Kings Caslon 400, uppercase, lh 120%,
   flat across breakpoints.
   -------------------------------------------------------------------------- */

.h-xlarge,
.page-title {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-xlarge-size);
  font-weight: 400;
  font-style: normal;
  line-height: 120%;
  text-transform: uppercase;
}

.h-large,
.section-title {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-large-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.h-medium {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-medium-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.h-small,
.eyebrow {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-small-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

/* EXTENSION — gubi.css has no fluid type scale; its flat 48px is tuned for
   3-4 word marketing headlines. 14 of 52 article titles exceed 40 characters
   against a 659-character median body, so long page titles scale down while
   48px stays the ceiling. */
.page-title,
.article-title,
.error-page h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
}

.text-caption {
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  line-height: 140%;
}

.text-xs {
  font-size: var(--text-xs-size);
  line-height: 120%;
}

.muted {
  color: var(--color-gray-40);
}

.page-header {
  margin-block: var(--spacing-3xl) var(--spacing-2xl);
}

.page-header-description {
  margin: var(--spacing-m) 0 0;
  max-width: var(--measure);
  color: var(--color-gray-40);
}

/* --------------------------------------------------------------------------
   5. Buttons — square, min-width 9rem, per gubi.css
   -------------------------------------------------------------------------- */

.button,
button.button,
input[type="submit"],
.article-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 9rem;
  padding: 0.8125rem var(--spacing-xl);
  border: 0.0625rem solid var(--color-black);
  border-radius: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--helvetica);
  font-size: var(--text-medium-size);
  font-weight: 500;
  line-height: 140%;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition-property: background-color, border-color, color, opacity;
  transition-duration: var(--animation-duration-standard);
  transition-timing-function: var(--animation-ease-out);
}

@media (hover: hover) {
  .button:hover,
  button.button:hover,
  input[type="submit"]:hover {
    background: linear-gradient(
        0deg,
        var(--core-dim-white-light) 0%,
        var(--core-dim-white-light) 100%
      ),
      var(--color-black);
    color: var(--color-white);
  }
}

/* tertiary — outline on light ground */
.button-tertiary {
  background: transparent;
  color: var(--color-black);
  border: 0.0625rem solid var(--color-gray-40);
}

@media (hover: hover) {
  .button-tertiary:hover {
    background: var(--color-gray-20);
    color: var(--color-black);
  }
}

/* secondary — outline on imagery */
.button-secondary {
  background: transparent;
  color: var(--color-white);
  border: 0.0625rem solid var(--color-white);
}

@media (hover: hover) {
  .button-secondary:hover {
    background: var(--color-gray-20);
    color: var(--color-black);
  }
}

.button:disabled,
input[type="submit"]:disabled {
  background: var(--color-gray-30);
  color: var(--color-gray-40);
  border-color: var(--color-white);
  pointer-events: none;
}

.button-block {
  width: 100%;
}

/* underline link-button, per gubi.css [data-variant="underline"] */
.link-underline {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--spacing-xs));
  width: 0;
  height: 0.0625rem;
  background-color: currentColor;
  transition: width var(--animation-duration-standard) var(--animation-ease-out);
}

@media (hover: hover) {
  .link-underline:hover::after {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   6. Header — two-tier, exact token heights, hides on scroll down
   -------------------------------------------------------------------------- */

.gubi-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--page-bg);
  transition: transform 0.15s var(--animation-ease-out);
}

.gubi-header[data-hidden="true"] {
  transform: translateY(-100%);
}

.top-bar {
  height: var(--top-bar-height);
  border-bottom: 0.0625rem solid var(--core-dim-light);
  font-size: var(--text-xs-size);
  line-height: 120%;
}

.top-bar-inner,
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-l);
  height: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .top-bar-inner,
  .navbar-inner {
    padding-inline: var(--spacing-3xl);
  }
}

.top-bar a {
  font-family: var(--kings-caslon-typo);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.navbar {
  height: var(--navbar-height);
  border-bottom: 0.0625rem solid var(--primary-border-color);
}

.gubi-logo {
  display: block;
  width: 4.5rem;
  height: auto;
  fill: currentColor;
}

.navbar-logo-link {
  display: flex;
  align-items: center;
  color: var(--color-black);
  text-decoration: none;
}

.navbar-nav {
  display: none;
}

@media (min-width: 768px) {
  .navbar-nav {
    display: block;
  }
}

.navbar-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-list a,
.navbar-list button {
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-small-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* mobile menu */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--spacing-xs);
  background: none;
  border: 0;
  cursor: pointer;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}

/* Close glyph swap: script.js only ever writes aria-expanded (it already
   has to, for a11y), so the icon swap rides that same attribute instead of
   script.js touching the SVGs directly. */
.menu-toggle-icon-close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon-open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon-close {
  display: block;
}

.mobile-nav {
  display: none;
  border-bottom: 0.0625rem solid var(--primary-border-color);
  background: var(--page-bg);
  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2xl);
}

.mobile-nav[data-open="true"] {
  display: block;
}

@media (min-width: 768px) {
  .mobile-nav[data-open="true"] {
    display: none;
  }
}

.mobile-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav li {
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.mobile-nav a {
  display: block;
  padding: var(--spacing-m) 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-medium-size);
  text-transform: uppercase;
  text-decoration: none;
}

/* Compact search, revealed in the navbar once the page's own search field
   (§ 7 below) scrolls past view — script.js's initHeaderSearch() flips
   data-search on #gubi-header via IntersectionObserver. Collapsed by
   width/opacity/visibility rather than display, so the reveal can
   transition instead of jumping; visibility carries the asymmetric delay
   (0 on reveal, full duration on collapse) so the field is never
   focusable while invisible but also never vanishes mid-fade. min-width: 0
   lets the flex row shrink it instead of overflowing at narrow widths,
   since gubi.com's own equivalent (search-drawer-module in gubi.css) is a
   full-width overlay with no inline-compact analogue to size against.
   0.15s + --animation-ease-out matches the header's own transition above
   (and gubi.css's own un-tokenised "0.15s" transitions elsewhere), not a
   new value. */
.header-search {
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: 0;
  opacity: 0;
  visibility: hidden;
  transition: width 0.15s var(--animation-ease-out), opacity 0.15s var(--animation-ease-out),
    visibility 0s linear 0.15s;
}

.gubi-header[data-search="on"] .header-search {
  /* EXTENSION — no gubi.css value for an inline compact search width;
     gubi.com's own search affordance is a full-width drawer (see comment
     above), not an inline field. Sized to hold the placeholder text
     comfortably without crowding the nav links; min-width: 0 above lets it
     shrink further on narrow viewports instead of overflowing. */
  width: 12.5rem;
  opacity: 1;
  visibility: visible;
  /* Re-declared visible, not inherited from a lower-specificity rule: the
     collapsed state needs overflow: hidden to hide the width: 0 box's
     content, but .search-suggestions (§ 7) is positioned absolute with
     top: 100% against this element as its containing block, landing
     entirely below the padding box — hidden overflow here would clip the
     whole suggestions panel out of existence the moment it's revealed.
     Nothing else in the ancestor chain clips it: .navbar has no overflow,
     and .gubi-header (z-index: 999) sits well above the panel's
     z-index: 50. */
  overflow: visible;
  transition: width 0.15s var(--animation-ease-out), opacity 0.15s var(--animation-ease-out),
    visibility 0s;
}

.header-search form {
  margin: 0;
}

.header-search input[type="search"] {
  width: 100%;
  margin: 0;
  padding: var(--spacing-xs) calc(var(--spacing-l) + var(--spacing-s)) var(--spacing-xs) 0;
  border: 0;
  border-bottom: 0.0625rem solid var(--color-black);
  border-radius: 0;
  background: transparent;
  color: var(--color-black);
  font-family: var(--helvetica);
  font-size: var(--text-caption-size);
  line-height: 140%;
  -webkit-appearance: none;
  appearance: none;
}

.header-search input[type="search"]:hover {
  border-color: var(--color-gray-40);
}

.header-search input[type="search"]:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
}

.header-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.header-search-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: var(--color-gray-40);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Search
   Underline field with a floating label, per gubi.css's default text input.
   The label is our own markup; script.js wires its `for` to the id Zendesk
   generates on the search input.
   -------------------------------------------------------------------------- */

.gubi-search {
  position: relative;
  width: 100%;
  max-width: 34rem;
}

.gubi-search-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  font-family: var(--helvetica);
  font-size: var(--text-small-size);
  font-weight: 400;
  line-height: 140%;
  color: var(--color-black);
  cursor: text;
  transform: translateY(calc(var(--spacing-s) + 0.75rem));
  transition: all 0.15s;
  pointer-events: none;
}

/* Floated state: focused, or holding a value.
   The input selector must be typed. {{search}} also emits a hidden
   <input name="utf8">, and a hidden input has no placeholder, so a bare
   `input:not(:placeholder-shown)` inside :has() always matches it — which
   pinned the label to the floated state on every page carrying the field. */
.gubi-search:focus-within .gubi-search-label,
.gubi-search:has(input[type="search"]:not(:placeholder-shown)) .gubi-search-label {
  transform: translate(0);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  line-height: 140%;
  pointer-events: all;
}

.gubi-search form,
.gubi-search .search {
  margin: 0;
}

.gubi-search input[type="search"] {
  width: 100%;
  margin: 0;
  /* Right padding clears .gubi-search-icon below; left stays 0 since the
     floating label (both states, see the rule above) sits flush left and
     must not be pushed. */
  padding: calc(var(--spacing-s) + 0.75rem) calc(var(--spacing-l) + var(--spacing-s))
    var(--spacing-s) 0;
  border: 0;
  border-bottom: 0.0625rem solid var(--color-black);
  border-radius: 0;
  background: transparent;
  color: var(--color-black);
  font-family: var(--helvetica);
  font-size: var(--text-small-size);
  line-height: 140%;
  letter-spacing: 0.0125rem;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.gubi-search input[type="search"]::placeholder {
  color: transparent;
}

.gubi-search input[type="search"]:hover {
  border-color: var(--color-gray-40);
}

.gubi-search input[type="search"]:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
}

.gubi-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Magnifier glyph (finding 06). Both label states above (float and
   translateY-down) anchor the label at left: 0, so the glyph goes on the
   right, clear of the label in either state. Centred on the text row, not
   the whole input box: the input's padding is asymmetric (more on top, to
   make room for the unfloated label sitting over it), so a plain top: 50%
   lands above the actual text. At these token values: padding-top
   calc(--spacing-s + 0.75rem) = 20px, padding-bottom --spacing-s = 8px,
   text row (--text-small-size at 140%) = 19.6px — text-row centre sits
   29.8px from the top, box centre sits 23.8px from the top, a 6px / 0.375rem
   gap. top: calc(50% + 0.375rem) closes it. */
.gubi-search-icon {
  position: absolute;
  top: calc(50% + 0.375rem);
  right: 0;
  transform: translateY(-50%);
  color: var(--color-gray-40);
  pointer-events: none;
}

/* Instant-suggestion panel */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-white);
  border: 0.0625rem solid var(--core-dim-light);
  border-top: 0;
  max-height: 24rem;
  overflow-y: auto;
}

.search-suggestions:empty,
.search-suggestions[hidden] {
  display: none;
}

.search-suggestions li + li {
  border-top: 0.0625rem solid var(--core-dim-light);
}

.search-suggestions a,
.search-suggestions li[data-index] {
  display: block;
  padding: var(--spacing-m) var(--spacing-l);
  text-decoration: none;
  cursor: pointer;
}

.search-suggestions a:hover,
.search-suggestions a:focus,
.search-suggestions li[data-index]:hover,
.search-suggestions [aria-selected="true"] {
  background: var(--grid-tile-color);
  color: var(--color-black);
  outline: none;
}

.search-suggestion-title {
  display: block;
  font-size: var(--text-small-size);
  line-height: 140%;
}

.search-suggestion-meta {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  color: var(--color-gray-40);
}

.search-suggestions-all a {
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Home — hero + tiles
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
  min-height: 22rem;
  padding: var(--spacing-4xl) var(--spacing-xl);
  background-color: var(--color-gray-20);
  background-size: cover;
  background-position: center;
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    min-height: 28rem;
  }
}

/* Light text + scrim is opt-in via the hero_text_light setting rather than
   inferred from the presence of an image: the shipped default hero is a flat
   --color-gray-20 field, on which white text would be unreadable. Turn it on
   after uploading a dark photograph. */
.hero[data-text-light="true"] {
  color: var(--color-white);
}

.hero[data-text-light="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--core-dim-medium);
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
  width: 100%;
  max-width: 40rem;
}

.hero-title {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-xlarge-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.hero-subtitle {
  margin: 0;
  font-size: var(--text-large-size);
  font-weight: 500;
  line-height: 140%;
}

.hero[data-text-light="true"] .gubi-search-label {
  color: var(--color-white);
}

.hero[data-text-light="true"] .gubi-search input[type="search"] {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.home-section {
  margin-block: var(--spacing-5xl);
}

/* Tile grid — GUBI's declared tile tokens */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.0625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--spacing-s);
  min-height: 14rem;
  padding: var(--spacing-xl);
  background-color: var(--grid-tile-color);
  color: var(--color-black);
  text-decoration: none;
  transition: background-color var(--animation-duration-standard)
    var(--animation-ease-out);
}

@media (min-width: 768px) {
  .tile {
    min-height: 11rem;
  }
}

@media (hover: hover) {
  .tile:hover {
    background-color: var(--grid-tile-hover-color);
    color: var(--color-black);
  }
}

.tile-title {
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-large-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.tile-description {
  font-size: var(--text-small-size);
  line-height: 140%;
  color: var(--color-gray-40);
}

.tile-count {
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  color: var(--color-gray-40);
}

/* --------------------------------------------------------------------------
   9. Lists — sections, articles, promoted
   -------------------------------------------------------------------------- */

/* Category page: each section's heading + list stacked in flow. --spacing-3xl
   matches the separation used between other stacked main-content blocks
   (.article-footer, .article-relatives) rather than the larger --spacing-5xl
   reserved for home-page hero-level sections. */
.category-section {
  margin-block: var(--spacing-3xl);
}

/* This is the only .section-title that wraps a link — the base `a` rule
   (underline, hover to --color-gray-40) would otherwise underline the whole
   uppercase serif heading. Cancelled the same way .tile and
   .article-list-item do for their own heading-like link text. Scoped to
   .category-section so the other four plain-text .section-title uses are
   unaffected. No separate hover rule needed: color isn't overridden here, so
   the base a:hover → --color-gray-40 affordance still applies. */
.category-section .section-title a {
  text-decoration: none;
}

.article-list,
.section-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0.0625rem solid var(--core-dim-light);
}

.article-list-item,
.section-list-item {
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.article-list-item a,
.section-list-item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-l);
  padding: var(--spacing-l) 0;
  text-decoration: none;
}

.article-list-item a:hover,
.section-list-item a:hover {
  color: var(--color-gray-40);
}

.article-list-title {
  font-size: var(--text-large-size);
  font-weight: 500;
  line-height: 140%;
}

.article-list-excerpt {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--text-small-size);
  font-weight: 400;
  line-height: 140%;
  color: var(--color-gray-40);
}

.list-chevron {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  align-self: center;
}

.icon-star,
.icon-lock {
  flex: none;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. Breadcrumbs / sub-nav
   -------------------------------------------------------------------------- */

/* Baseline, not flex-end: the search field is ~22px taller than the
   breadcrumbs (its floating label needs headroom above the input's text
   row), so aligning the boxes' bottom edges leaves the two text rows on
   visibly different lines. Baseline puts the breadcrumb text and the
   search input's text on one line and lets the underline hang below. */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-l);
  padding-block: var(--spacing-xl);
}

/* .gubi-search is width:100% for the hero, where it owns the row. In the
   sub-nav it shares the row with the breadcrumbs, so it has to be able to
   give way — at 100% it claims the full width and wraps to its own line.
   Sized rather than greedy (0 1, not 1 1): the field is a utility that
   belongs on the container's right edge under SUPPORT / CONTACT, matching
   the header's own left-logo / right-nav rhythm, not a runway stretched
   across the gap between it and the breadcrumbs. */
.sub-nav .gubi-search {
  flex: 0 1 22rem;
  width: auto;
  min-width: 0;
}

.breadcrumbs {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  line-height: 140%;
  text-transform: uppercase;
  color: var(--color-gray-40);
}

.breadcrumbs li {
  display: inline;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline: var(--spacing-xs);
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Pad the hit area to 24px without moving the text. inline-block is
   required — inline elements ignore block padding for hit-testing. Covers
   breadcrumbs, top-bar links (section 6) and the footer link-column /
   legal anchors (section 14) — all sit on the same 12–14px chrome scale. */
.breadcrumbs a,
.top-bar a,
.footer-link-group a,
.footer-legal a {
  display: inline-block;
  padding-block: 0.3125rem; /* 14px + 10px = 24px */
}

/* --------------------------------------------------------------------------
   11. Article page
   -------------------------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-3xl);
  padding-bottom: var(--spacing-5xl);
}

/* Two things about this breakpoint.
   The track is reserved on every article, not only the ones that generate a
   table of contents: 51 of 53 articles carry fewer than 3 headings, and if
   the track appeared only on the other 2, those two pages would sit on a
   different grid from the rest of the help centre.
   And it is 1200px, not the theme's usual 1024px, because the rail costs a
   flat 316px (16rem + the 3.75rem gutter) whatever the viewport. At 1024 that
   leaves a 612px body column, which is narrower than the single-column
   article it replaces — the rail would be taking space from the content it
   exists to navigate. 1200px is the width at which the body column clears
   788px and the four-column contact tables still breathe. Below it the
   article runs full-width and the contents list is dropped, which is already
   what happens on tablet today. */
@media (min-width: 1200px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--spacing-4xl);
  }
}

/* EXTENSION — gubi.css has no article template to copy. The article page
   is laid out on the container's own grid rather than as a measure-sized
   island floated inside it: breadcrumbs, title, body and table of contents
   sit on the same left and right edges as the header's logo and nav, so the
   page reads as one grid instead of two stacked ones. The reading measure
   moves inside the body column — prose is capped at --measure, tables and
   figures take the whole column — because these articles are as often
   four-column contact tables as they are paragraphs, and one width cannot
   serve both. (Two earlier passes got this wrong in opposite directions:
   one left-aligned a 68ch column against the container and left a 767px
   dead band; the other centred the whole block, which aligned it to
   nothing. The fix is not where the measure sits, it is that the measure
   was doing the column's job.) */

/* The headline needs room to land. --spacing-xl alone leaves the search
   underline sitting on top of a 44px title. */
.container-article .sub-nav {
  padding-bottom: var(--spacing-2xl);
}

.article-main {
  min-width: 0;
  width: 100%;
}

.article-header {
  margin-bottom: var(--spacing-2xl);
}

.article-title {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  /* font-size set by the clamp rule in section 4 — .article-title is in
     its selector list and would otherwise be overridden back to the flat
     var(--heading-xlarge-size) by this rule's equal specificity. */
  font-weight: 400;
  line-height: 120%;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-s);
  margin-top: var(--spacing-l);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  color: var(--color-gray-40);
}

.article-meta a {
  text-decoration: none;
}

/* {{subscribe}} emits unthemed stock markup (a pale grey rgb(239,239,239)
   chip with no class) — style it from outside. Also used on section_page.hbs
   via .section-subscribe, same unstyled chip in the same header context. */
.article-subscribe button,
.section-subscribe button {
  min-width: 0;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: 0.0625rem solid var(--color-gray-40);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
}

/* Table of contents */
.article-toc {
  display: none;
}

@media (min-width: 1200px) {
  .article-layout[data-has-toc="true"] .article-toc {
    display: block;
    position: sticky;
    top: calc(var(--global-navbar-height) + var(--spacing-xl));
    align-self: start;
    max-height: calc(100vh - var(--global-navbar-height) - var(--spacing-2xl));
    overflow-y: auto;
  }
}

.article-toc-title {
  margin: 0 0 var(--spacing-m);
  padding-bottom: var(--spacing-s);
  border-bottom: 0.0625rem solid var(--core-dim-light);
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-small-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.article-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc li {
  margin-bottom: var(--spacing-s);
}

/* The list has to carry the body's own heading levels. On this page the six
   region names repeat verbatim under Contract and under Wholesale, so a flat
   list gives twelve entries where half are indistinguishable from the other
   half. Indenting the h3s makes each one legible as "Europe, under
   Wholesale" without changing a word. */
.article-toc .toc-h2 + .toc-h3 {
  margin-top: calc(var(--spacing-s) * -1);
}

.article-toc .toc-h2 {
  margin-top: var(--spacing-l);
}

.article-toc li:first-child.toc-h2 {
  margin-top: 0;
}

.article-toc .toc-h3 {
  padding-left: var(--spacing-m);
}

.article-toc .toc-h2 > a {
  color: var(--color-black);
}

.article-toc a {
  font-size: var(--text-small-size);
  line-height: 140%;
  text-decoration: none;
  color: var(--color-gray-40);
}

.article-toc a:hover,
.article-toc a[aria-current="true"] {
  color: var(--color-black);
}

/* ---- Article prose --------------------------------------------------------
   The one adapted surface. Kings Caslon is kept for headings so the article
   still reads as GUBI, but sentence case and a scale that never drops below
   body size, because a support article is read, not glanced at.
   -------------------------------------------------------------------------- */

.article-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

.article-body > *:first-child {
  margin-top: 0;
}

/* The measure lives here, one level below the column. Everything the editor
   emits is capped at reading width by default; the elements that are read as
   a picture rather than a line of text opt out and use the whole column.
   Guide's WYSIWYG emits these as direct children of the body, so the child
   combinator is enough — and an unknown wrapper falling back to the measure
   is the safe direction to fail in. */
.article-body > * {
  max-width: var(--measure);
}

.article-body > :is(table, figure, img, pre) {
  max-width: none;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body table,
.article-body pre {
  margin-block: 0 var(--spacing-l);
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  font-family: var(--kings-caslon-typo);
  font-weight: 400;
  text-transform: none;
  line-height: 130%;
  margin-block: var(--spacing-2xl) var(--spacing-m);
}

.article-body h1,
.article-body h2 {
  font-size: 1.75rem;
}

/* h2 is the only structural break in a long article and 28px of the same
   face at the same weight as the 21px h3 under it is not enough separation —
   on the sales-contact directory the two h2s (Contract, Wholesale) carry the
   whole document and sit 2,000px apart. The rule does the work the type
   size cannot, and because it runs the full column it also gives prose-only
   articles the right-hand edge that tables give this one. */
.article-body > h2 {
  max-width: none;
  margin-top: var(--spacing-4xl);
  padding-top: var(--spacing-l);
  border-top: 0.0625rem solid var(--core-dim-light);
}

.article-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.article-body h3 {
  font-size: 1.3125rem;
}

.article-body h4,
.article-body h5,
.article-body h6 {
  font-size: 1.0625rem;
}

.article-body a {
  text-decoration: underline;
}

.article-body ul,
.article-body ol {
  padding-left: 1.25rem;
}

.article-body li {
  margin-bottom: var(--spacing-s);
}

.article-body img {
  display: block;
  height: auto;
  margin-block: var(--spacing-xl);
}

.article-body blockquote {
  margin-inline: 0;
  padding-left: var(--spacing-l);
  border-left: 0.0625rem solid var(--color-black);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-large-size);
  line-height: 150%;
}

.article-body code,
.article-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--color-gray-20);
}

.article-body code {
  padding: 0.125em 0.375em;
}

.article-body pre {
  padding: var(--spacing-l);
  overflow-x: auto;
}

.article-body pre code {
  padding: 0;
  background: none;
}

/* display:block + overflow-x is the small-screen escape hatch: four columns
   of market / contact / email / phone cannot fit 390px, so the table becomes
   its own scroller rather than forcing the page to scroll. */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

/* Below the breakpoint a four-column contact table cannot stay a table: at
   390px each column gets under 90px, every cell wraps to five lines, and the
   phone column falls off the right into a scroll container with no visible
   affordance. Each row becomes a block instead — market, then name and
   title, then email, then phone — which is the order you read a directory
   entry in anyway. The first cell becomes the entry's label, in the same
   caslon caption the rest of the theme uses for eyebrows, so the header row
   can go to screen readers only. Guarded to the four-column shape: a
   two-column table still fits at 390px and keeps its header. */
@media (max-width: 767px) {
  .article-body table:has(th:nth-child(4)) {
    display: block;
    overflow-x: visible;
    border-top: 0.0625rem solid var(--core-dim-light);
  }

  .article-body table:has(th:nth-child(4)) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .article-body table:has(th:nth-child(4)) tbody,
  .article-body table:has(th:nth-child(4)) tr,
  .article-body table:has(th:nth-child(4)) td {
    display: block;
  }

  .article-body table:has(th:nth-child(4)) tr {
    padding-block: var(--spacing-l);
    border-bottom: 0.0625rem solid var(--core-dim-light);
  }

  .article-body table:has(th:nth-child(4)) td {
    padding: 0;
    border: 0;
  }

  .article-body table:has(th:nth-child(4)) td:first-child {
    margin-bottom: var(--spacing-xs);
    font-family: var(--kings-caslon-typo);
    font-size: var(--text-caption-size);
    text-transform: uppercase;
    color: var(--color-gray-40);
  }
}

/* Above the breakpoint the column is wide enough for all four columns, and
   this page carries a dozen of these tables in a row. With auto layout each
   table sizes to its own longest cell, so twelve consecutive tables land
   their EMAIL column in twelve different places and the directory reads as
   twelve unrelated grids rather than one list. Fixed layout gives them one
   rhythm. */
@media (min-width: 768px) {
  .article-body table {
    display: table;
    table-layout: fixed;
    overflow-x: visible;
  }

  /* An email address and a phone number have a known maximum width; a market
     list and a name and job title do not. So the two predictable columns get
     the width their longest value needs (measured on this article: 155px for
     aj@ameenaliving.com, 144px for +49 151 502 626 76, plus the 24px cell
     padding) and the two elastic ones split whatever is left — which keeps
     every table on the same column positions without starving the columns
     that actually need the room as the viewport grows. Guarded to tables
     that have a fourth column, so a two-column table elsewhere in the help
     centre keeps its own proportions. */
  .article-body table:has(th:nth-child(4)) th:nth-child(3) {
    width: 11.5rem;
  }

  .article-body table:has(th:nth-child(4)) th:nth-child(4) {
    width: 10.5rem;
  }

  .article-body td,
  .article-body th {
    overflow-wrap: anywhere;
  }
}

.article-body th,
.article-body td {
  padding: var(--spacing-s) var(--spacing-m);
  border-bottom: 0.0625rem solid var(--core-dim-light);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  font-family: var(--kings-caslon-typo);
  font-weight: 400;
  font-size: var(--text-caption-size);
  text-transform: uppercase;
}

.article-body hr {
  margin-block: var(--spacing-2xl);
}

/* Anchor offset so TOC jumps clear the sticky header */
.article-body :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: calc(var(--global-navbar-height) + var(--spacing-xl));
}

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

.article-footer {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-xl);
  border-top: 0.0625rem solid var(--core-dim-light);
}

.article-votes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-l);
  padding-block: var(--spacing-xl);
}

.article-votes-question {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-medium-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.article-votes-controls {
  display: flex;
  gap: var(--spacing-s);
}

.article-vote {
  min-width: 5rem;
  padding: var(--spacing-s) var(--spacing-l);
  background: transparent;
  color: var(--color-black);
  border: 0.0625rem solid var(--color-gray-40);
}

@media (hover: hover) {
  .article-vote:hover {
    background: var(--color-gray-20);
    color: var(--color-black);
  }
}

.article-vote.button-primary {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.article-votes-count {
  color: var(--color-gray-40);
  font-size: var(--text-xs-size);
}

.article-attachments {
  margin-top: var(--spacing-2xl);
}

.attachments {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  padding-block: var(--spacing-s);
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.meta-data {
  color: var(--color-gray-40);
  font-size: var(--text-xs-size);
}

.article-relatives {
  margin-top: var(--spacing-3xl);
}

.article-relatives h3,
.recent-articles h3,
.related-articles h3 {
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-small-size);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 120%;
  margin: 0 0 var(--spacing-m);
}

.article-relatives ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0.0625rem solid var(--core-dim-light);
}

.article-relatives li {
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.article-relatives a {
  display: block;
  padding: var(--spacing-m) 0;
  text-decoration: none;
}

/* Still-need-help callout */
.contact-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-l);
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: var(--box-bg-color);
}

.contact-callout-title {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-large-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.contact-callout p {
  margin: var(--spacing-xs) 0 0;
  color: var(--color-gray-40);
}

/* Comments */
.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  padding-block: var(--spacing-xl);
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.comment-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   12. Forms — GUBI's boxed "checkout" field variant
   -------------------------------------------------------------------------- */

.form {
  max-width: 40rem;
  padding-bottom: var(--spacing-5xl);
}

.form-field {
  margin-bottom: var(--spacing-xl);
}

.form-field > label,
.form-field > .form-field-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-family: var(--helvetica);
  font-size: var(--text-small-size);
  font-weight: 500;
  line-height: 140%;
}

.form-field-description {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--text-xs-size);
  line-height: 140%;
  color: var(--color-gray-40);
  white-space: pre-wrap;
}

.form-field-required {
  color: var(--invalid-color);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.6875rem;
  border: 0.0625rem solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--helvetica);
  font-size: var(--text-small-size);
  line-height: 140%;
  transition: border-color 0.2s;
}

textarea {
  min-height: 10rem;
  resize: vertical;
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23171716' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6875rem center;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-gray-40);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--input-invalid-border-color);
}

.form-field-error {
  margin-top: var(--spacing-xs);
  font-size: var(--text-xs-size);
  line-height: 140%;
  color: var(--invalid-color);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
}

.checkbox-field input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  flex: none;
  accent-color: var(--color-black);
}

.checkbox-field label {
  margin: 0;
  font-weight: 400;
}

.form-field select[multiple] {
  min-height: 9rem;
  background-image: none;
  padding-right: 0.6875rem;
}

.attachments-field input[type="file"] {
  display: block;
  width: 100%;
  padding: var(--spacing-l);
  border: 0.0625rem dashed var(--input-border-color);
  border-radius: var(--input-border-radius);
  background: var(--color-white);
  font-size: var(--text-small-size);
}

.form-actions {
  display: flex;
  gap: var(--spacing-l);
  margin-top: var(--spacing-2xl);
}

.form-errors {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-l);
  border: 0.0625rem solid var(--invalid-color);
  border-radius: var(--input-border-radius);
  color: var(--invalid-color);
  font-size: var(--text-small-size);
}

/* Request list / request page */
.request-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small-size);
}

.request-table th,
.request-table td {
  padding: var(--spacing-m) var(--spacing-s);
  border-bottom: 0.0625rem solid var(--core-dim-light);
  text-align: left;
}

.request-table th {
  font-family: var(--kings-caslon-typo);
  font-weight: 400;
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  white-space: nowrap;
}

.request-table-wrapper {
  overflow-x: auto;
}

.status-label {
  display: inline-block;
  padding: 0.125rem var(--spacing-s);
  border: 0.0625rem solid var(--core-dim-medium);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  line-height: 140%;
}

.status-label-solved,
.status-label-closed {
  border-color: var(--color-gray-40);
  color: var(--color-gray-40);
}

.status-label-open,
.status-label-pending-moderation {
  border-color: var(--discount-red);
  color: var(--discount-red);
}

/* --------------------------------------------------------------------------
   13. Search results
   -------------------------------------------------------------------------- */

.search-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-2xl);
  padding-bottom: var(--spacing-5xl);
}

@media (min-width: 1024px) {
  .search-results-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--spacing-4xl);
  }
}

.search-results-sidebar h3 {
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-small-size);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-s);
}

.search-results-sidebar ul {
  margin: 0 0 var(--spacing-xl);
  padding: 0;
  list-style: none;
}

.search-results-sidebar a {
  display: block;
  padding-block: var(--spacing-xs);
  font-size: var(--text-small-size);
  text-decoration: none;
  color: var(--color-gray-40);
}

.search-results-sidebar a.current,
.search-results-sidebar a:hover {
  color: var(--color-black);
}

.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0.0625rem solid var(--core-dim-light);
}

.search-result-item {
  padding-block: var(--spacing-xl);
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.search-result-link {
  font-size: var(--text-large-size);
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.search-result-description {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--text-small-size);
  line-height: 140%;
  color: var(--color-gray-40);
}

.search-result-description em {
  font-style: normal;
  background: var(--color-gray-30);
}

.search-result-meta {
  margin-top: var(--spacing-xs);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  color: var(--color-gray-40);
}

.search-result-votes {
  color: var(--color-gray-40);
  font-size: var(--text-xs-size);
}

/* Pagination */
.pagination {
  margin-block: var(--spacing-2xl);
}

.pagination ul,
ul.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small-size);
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 2rem;
  padding: var(--spacing-xs) var(--spacing-s);
  text-align: center;
  text-decoration: none;
  border: 0.0625rem solid transparent;
}

.pagination .pagination-current,
.pagination [aria-current="page"] {
  border-color: var(--color-black);
}

/* --------------------------------------------------------------------------
   14. Footer — GUBI's 12-column grid
   -------------------------------------------------------------------------- */

.gubi-footer {
  margin-top: var(--spacing-5xl);
  padding: var(--spacing-xl);
  border-top: 0.0625rem solid var(--core-dim-medium);
  font-family: var(--helvetica);
  font-size: var(--text-xs-size);
  font-weight: 400;
  line-height: 120%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
}

@media (min-width: 1024px) {
  .gubi-footer {
    border-top: 0;
    /* gubi.com uses 9.75rem here, where pages are long. Halved for a help
       center article, which runs far shorter. */
    gap: 4.875rem;
    padding-inline: var(--spacing-3xl);
    max-width: var(--max-width);
    margin-inline: auto;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-2xl);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2xl);
}

@media (min-width: 640px) {
  .footer-links {
    grid-column: 1 / 9;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer-link-title {
  margin: 0 0 var(--spacing-m);
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}

.footer-link-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link-group li {
  margin-bottom: var(--spacing-s);
}

.footer-link-group a {
  text-decoration: none;
}

.footer-link-group a:hover {
  text-decoration: underline;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

@media (min-width: 640px) {
  .footer-contact {
    grid-column: 9 / -1;
  }
}

.footer-contact-title {
  margin: 0;
  font-family: var(--kings-caslon-typo);
  font-size: var(--heading-medium-size);
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .footer-bottom {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.footer-logo {
  width: 100%;
  max-width: 21rem;
  height: auto;
  fill: currentColor;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  color: var(--color-gray-40);
}

@media (min-width: 1024px) {
  .footer-legal {
    text-align: right;
  }
}

.footer-language-selector select {
  width: auto;
  padding-block: var(--spacing-xs);
  font-size: var(--text-xs-size);
}

/* --------------------------------------------------------------------------
   15. Error / empty states
   -------------------------------------------------------------------------- */

.error-page,
.empty-state {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--spacing-5xl);
  text-align: center;
}

.error-page h1 {
  margin: 0 0 var(--spacing-l);
  font-family: var(--kings-caslon-typo);
  /* font-size set by the clamp rule in section 4 — .error-page h1 is in
     its selector list and would otherwise be overridden back to the flat
     var(--heading-xlarge-size) by this rule's equal specificity. */
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
}

.empty-state p,
.error-page p {
  color: var(--color-gray-40);
  margin-bottom: var(--spacing-2xl);
}

/* --------------------------------------------------------------------------
   16. Community / profile — inherit tokens, no bespoke layout.
   Out of scope per the design brief; these rules exist so the pages render
   coherently rather than unstyled if Community is switched on.
   -------------------------------------------------------------------------- */

.community-layout,
.profile-layout {
  padding-bottom: var(--spacing-5xl);
}

.post-list,
.topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0.0625rem solid var(--core-dim-light);
}

.post-list li,
.topic-list li {
  border-bottom: 0.0625rem solid var(--core-dim-light);
}

.post-list a,
.topic-list a {
  display: block;
  padding-block: var(--spacing-l);
  text-decoration: none;
}

.stat-list {
  margin: 0 0 var(--spacing-2xl);
  padding: 0;
  list-style: none;
  border-top: 0.0625rem solid var(--core-dim-light);
  max-width: 28rem;
}

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-l);
  padding-block: var(--spacing-m);
  border-bottom: 0.0625rem solid var(--core-dim-light);
  font-size: var(--text-small-size);
}

.stat-row > span:first-child {
  font-family: var(--kings-caslon-typo);
  font-size: var(--text-caption-size);
  text-transform: uppercase;
  color: var(--color-gray-40);
}

.post-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gubi-header {
    transition: none;
  }

  /* Snap the compact search open/closed instead of fading/sliding it;
     the universal transition-duration override above already neutralises
     the timing, this just matches the explicit .gubi-header rule above it
     for the same component. Both selectors are listed: the base
     .header-search rule is (0,1,0), but the reveal state's own
     .gubi-header[data-search="on"] .header-search rule is (0,3,0) and
     would otherwise win over a plain .header-search override while the
     search is showing — the one state where snapping actually matters. */
  .header-search,
  .gubi-header[data-search="on"] .header-search {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */

@media print {
  .gubi-header,
  .gubi-footer,
  .article-toc,
  .sub-nav,
  .article-votes,
  .contact-callout {
    display: none !important;
  }

  .article-main {
    max-width: none;
  }

  body {
    background: #fff;
  }
}