/* ============================================================
   Greenlight Help Center — redesign.css
   ------------------------------------------------------------
   Loaded AFTER the auto-injected style.css from document_head.hbs.
   Contains:
     1. @font-face for Greenlight Repro (Regular 400 + Medium 500)
     2. Design tokens (color, spacing, radius, typography)
     3. Global resets + body typography (scoped to .layout to win
        specificity over the legacy style.css)
     4. New chrome — .gl-nav, .gl-footer-slim
     5. Home page sections — .gl-hero, .gl-entry-card, .gl-popular,
        .gl-browse, .gl-help-strip
     6. Interior page overrides — breadcrumbs, article header,
        category/section lists, search results, request forms
   New class names are prefixed gl- to avoid colliding with legacy
   selectors from style.css.
   ============================================================ */

/* ============================================================
   1. FONTS
   ============================================================ */
@font-face {
  font-family: "Greenlight Repro";
  src: url("GreenlightReproApp-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Greenlight Repro";
  src: url("GreenlightReproApp-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Base */
  --c-white: #FFFFFF;

  /* Teal — primary brand ramp */
  --c-teal-50:   #99E4D7;
  --c-teal-100:  #DFF6F0;
  --c-teal-200:  #A5F3E1;
  --c-teal-300:  #6FE3CA;
  --c-teal-400:  #00D9B4;
  --c-teal-500:  #07C2A3;
  --c-teal-600:  #05AD92;
  --c-teal-700:  #09917A;
  --c-teal-800:  #067464;
  --c-teal-900:  #01514A;
  --c-teal-1000: #013C39;

  /* Violet (used by Family Hub entry-card accent) */
  --c-violet-50:  #9CA5FE;

  /* Yellow (outage banner + promoted-article star) */
  --c-yellow-100: #FFBA2A;

  /* Lime (promo banner) */
  --c-lime-300:  #D6E455;

  /* Lagoon (entry card cat-hub) */
  --c-lagoon-300:  #85D6F9;
  --c-lagoon-800:  #04719F;
  --c-lagoon-1000: #00364D;

  /* Dark violet (entry card cat-safety / cat-safe) */
  --c-darkviolet-100: #344099;
  --c-darkviolet-175: #212B4B;

  /* Citrus (entry card cat-shield) */
  --c-citrus-300: #FFC75F;
  --c-citrus-800: #724C2A;

  /* Warm neutrals */
  --c-warmneutral-100: #F8F7F3;
  --c-warmneutral-200: #F2F0EB;

  /* Black ramp */
  --c-black-10:  #E8E9EA;
  --c-black-50:  #8E9295;
  --c-black-75:  #555B61;
  --c-black-100: #1D252C;

  /* Semantic */
  --gl-bg-canvas:      var(--c-warmneutral-100);  /* matches v2 design — warm cream page bg */
  --gl-text-primary:   var(--c-black-100);
  --gl-text-secondary: var(--c-black-75);
  --gl-text-tertiary:  var(--c-black-50);
  --gl-text-on-brand:  var(--c-teal-1000);
  --gl-line:           var(--c-black-10);
  --gl-focus-ring:     #BBF174;                   /* greenlight.com SearchInput limegreen */

  /* Elevation — soft, layered. Matches the restrained shadow language
     used across greenlight.com surfaces. */
  --gl-elevation-2: 0 4px 12px rgba(29, 37, 44, 0.06), 0 1px 2px rgba(29, 37, 44, 0.04);

  /* Fonts */
  --gl-font-body: "Greenlight Repro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Radius — matches @greenlightme/tailwind-config tokens:
       button-shape = card-inside-card-shape = input-box-shape = 8px (spacing-sm)
       card-shape = 16px (spacing-md-web-tablet)
       Pills (999px) are reserved for chips/badges, not buttons. */
  --gl-radius-button:  8px;   /* primary/secondary CTAs */
  --gl-radius-input:   8px;   /* form inputs, search */
  --gl-radius-card:    16px;  /* surface cards (entry, help options) */
  --gl-radius-tile:    16px;  /* inner tiles */
  --gl-radius-slab:    32px;  /* hero slab + help strip */
  --gl-radius-pill:    999px; /* chips, eyebrows, badges only */
}

/* ============================================================
   3. GLOBAL RESETS + BODY TYPOGRAPHY
   Scoped to .layout (the wrapper div in header.hbs) so we win
   cascade against legacy style.css without using !important.
   ============================================================ */
html {
  scroll-behavior: smooth;
}
html, body {
  margin: 0;
  padding: 0;
}
.layout, .layout * {
  box-sizing: border-box;
}
body .layout {
  font-family: var(--gl-font-body);
  color: var(--gl-text-primary);
  background: var(--gl-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body .layout a {
  color: inherit;
  text-decoration: none;
}
body .layout button {
  font-family: inherit;
  cursor: pointer;
}

/* Focus-visible — matches greenlight.com's SearchInput pattern:
   2px limegreen outline with offset. Applied broadly so keyboard
   navigation has consistent feedback across every interactive surface. */
.layout a:focus-visible,
.layout button:focus-visible,
.layout input:focus-visible,
.layout textarea:focus-visible,
.layout select:focus-visible,
.layout [role="button"]:focus-visible {
  outline: 2px solid var(--gl-focus-ring);
  outline-offset: 4px;
  border-radius: var(--gl-radius-button);
}
.layout input:focus-visible,
.layout textarea:focus-visible,
.layout select:focus-visible {
  outline-offset: 2px;
}

/* ============================================================
   3a. PROMO BANNER (top-of-page SMS prompt, v2)
   ============================================================ */
.gl-promo-banner {
  background: var(--c-lime-300);
  color: var(--c-black-100);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 56px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 20px;
}
.gl-promo-banner a {
  color: #2C63D0;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin: 0 2px;
  white-space: nowrap;
}
.gl-promo-banner a:hover {
  color: #1F4BA6;
}
.gl-promo-banner__close {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 120ms;
}
.gl-promo-banner__close:hover {
  background: rgba(0, 0, 0, 0.08);
}
.gl-promo-banner__close svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   4. NEW CHROME — Top nav
   ============================================================ */
.gl-nav {
  background: var(--c-white);
  border-bottom: 1px solid var(--gl-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gl-nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.gl-nav__logo {
  height: 28px;
  display: flex;
  align-items: center;
}
.gl-nav__logo img {
  height: 100%;
  width: auto;
  display: block;
}
.gl-nav__divider {
  width: 1px;
  height: 20px;
  background: var(--gl-line);
}
.gl-nav__section {
  font-size: 14px;
  font-weight: 500;
  color: var(--gl-text-primary);
  letter-spacing: -0.005em;
}
.gl-nav__section .gl-nav__mark {
  color: var(--c-teal-600);
  font-weight: 500;
  margin-left: 6px;
}
.gl-nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center;
}
.gl-nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gl-text-primary);
}
.gl-nav__links a:hover {
  color: var(--c-teal-600);
}
/* .layout-scoped so we beat `body .layout a { color: inherit }`
   (specificity 0,1,2). Without this, "Try today" inherited the
   layout's dark text color and disappeared on its black background. */
.layout a.gl-nav__cta {
  margin-left: auto;
  background: var(--c-black-100);
  color: var(--c-white);
  padding: 12px 20px;
  border-radius: var(--gl-radius-button);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background 120ms;
}
.layout a.gl-nav__cta:hover {
  background: var(--c-teal-1000);
  color: var(--c-white);
}
.gl-nav__mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
}
.gl-nav__mobile-toggle img {
  width: 24px;
  height: 24px;
  display: block;
}

/* ============================================================
   5. HOME — HERO
   ============================================================ */
/* Full-bleed dark green hero — matches greenlight.com's hero pattern.
   header.hbs wraps every page in `<div class="container">` (max 1080px)
   which would normally trap the hero. The width:100vw + margin-left
   trick breaks the hero out of that container so it spans edge-to-edge,
   while inner content stays centered via .gl-hero's max-width.
   Subtle radial-from-upper-left layered over the solid teal-1000 base
   gives the hero depth without the harsh "blob" look. */
.gl-hero-wrap {
  background:
    radial-gradient(ellipse 40% 70% at 0% 0%, rgba(7, 116, 100, 0.55), transparent 65%),
    radial-gradient(ellipse 40% 70% at 100% 100%, rgba(7, 116, 100, 0.55), transparent 65%),
    var(--c-teal-1000);
  width: 100vw;
  position: relative;
  margin-left: calc(50% - 50vw);
}
.gl-hero {
  position: relative;
  /* No background here — the gradient lives on .gl-hero-wrap and shows
     through to keep the full-bleed effect. */
  color: var(--c-white);
  padding: 88px 48px 96px;
  overflow: hidden;
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}
/* Decorative gradient blobs removed in the full-bleed pass — they were
   sized/positioned for the rounded slab and read as an off-center smudge
   once the hero stretched edge-to-edge. Solid dark teal matches
   greenlight.com. */
/* .layout-scoped to win specificity over the global `.layout h1` color rule. */
.layout .gl-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--gl-font-body);
  font-weight: 400;
  /* DS display-1: 36px mobile → 48px tablet → 64px desktop-max */
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 18ch;
  color: var(--c-white);
}
.layout .gl-hero__title em {
  font-style: normal;
  color: var(--c-white);
}
.gl-hero__sub {
  position: relative;
  z-index: 1;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-teal-50);
  max-width: 52ch;
  margin: 0 auto 40px;
}

/* Hero search — wraps Zendesk's {{search}} helper.
   The {{search}} helper renders a <form class="search"> with input + submit.
   We restyle that form in-place via the .gl-hero__search wrapper. */
.gl-hero__search {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.gl-hero__search form,
.gl-hero__search .search {
  background: var(--c-white);
  border-radius: var(--gl-radius-input);
  padding: 6px 6px 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.gl-hero__search input[type="search"],
.gl-hero__search input[type="text"] {
  flex: 1;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--gl-text-primary);
  padding: 14px 4px;
  background: transparent;
  width: 100%;
}
.gl-hero__search input::placeholder {
  color: var(--gl-text-tertiary);
}
.gl-hero__search button[type="submit"] {
  background: var(--c-black-100);
  color: var(--c-white);
  border: 0;
  border-radius: var(--gl-radius-button);
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
  flex-shrink: 0;
}
.gl-hero__search button[type="submit"]:hover {
  background: var(--c-teal-1000);
}

.gl-hero__tags {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.gl-hero__tags-label {
  color: var(--c-teal-100);
  font-size: 13px;
  font-weight: 500;
  margin-right: 4px;
  align-self: center;
}
.gl-hero__tags a {
  color: var(--c-white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 7px 14px;
  border-radius: var(--gl-radius-pill);
  font-size: 13px;
  transition: background 120ms;
}
.gl-hero__tags a:hover {
  background: rgba(255,255,255,0.16);
}

/* ============================================================
   6. CONTAINER
   ============================================================ */
.gl-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ============================================================
   7. SECTION HEAD
   ============================================================ */
.gl-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}
.gl-section-head h2 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--gl-text-primary);
}
.gl-section-head__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--c-teal-700);
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* ============================================================
   8. HOME — ENTRY CARDS
   ============================================================ */
.gl-entry-section {
  padding: 80px 0 32px;
}
/* Flexbox (not grid) so a partial final row is centered. With 5 cards
   this gives 3 on top + 2 centered below; if Family Hub is re-added
   (6 cards) it falls back to a clean 3 + 3. flex-basis math: 3 cards
   per row share two 20px gaps → (100% - 40px) / 3. */
.gl-entry-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.gl-entry-card {
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
}
.gl-entry-card {
  position: relative;
  background: var(--c-white);
  border-radius: var(--gl-radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  border: 1px solid var(--gl-line);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  color: var(--gl-text-primary);
}
.gl-entry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gl-elevation-2);
  border-color: transparent;
}
.gl-entry-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gl-entry-card__icon img {
  width: 30px;
  height: 30px;
}
.gl-entry-card h3 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  margin: 0;
}
.gl-entry-card p {
  font-size: 14px;
  line-height: 20px;
  color: var(--gl-text-secondary);
  margin: 0;
}
.gl-entry-card__link {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-teal-700);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gl-entry-card__link svg {
  transition: transform 200ms ease;
}
.gl-entry-card:hover .gl-entry-card__link svg {
  transform: translateX(3px);
}
/* Per-category color treatments — v2 inverts the icon circle (dark bg with
   colored icon) for stronger product recognition. Icons render their SVG fill
   via currentColor so each card's accent color flows through. */
.gl-entry-card__icon img,
.gl-entry-card__icon svg {
  width: 28px;
  height: 28px;
}

.gl-entry-card--debit  .gl-entry-card__icon { background: var(--c-teal-1000);       color: var(--c-teal-400); }
.gl-entry-card--debit  .gl-entry-card__link { color: var(--c-teal-800); }

.gl-entry-card--finance .gl-entry-card__icon { background: var(--c-teal-1000);      color: var(--c-teal-400); }
.gl-entry-card--finance .gl-entry-card__link { color: var(--c-teal-800); }

.gl-entry-card--hub    .gl-entry-card__icon { background: var(--c-lagoon-1000);     color: var(--c-lagoon-300); }
.gl-entry-card--hub    .gl-entry-card__link { color: var(--c-lagoon-800); }

.gl-entry-card--safe   .gl-entry-card__icon { background: var(--c-darkviolet-175);  color: var(--c-violet-50); }
.gl-entry-card--safe   .gl-entry-card__link { color: var(--c-darkviolet-100); }

.gl-entry-card--safety .gl-entry-card__icon { background: var(--c-darkviolet-175);  color: var(--c-violet-50); }
.gl-entry-card--safety .gl-entry-card__link { color: var(--c-darkviolet-100); }

.gl-entry-card--shield .gl-entry-card__icon { background: var(--c-citrus-800);      color: var(--c-citrus-300); }
.gl-entry-card--shield .gl-entry-card__link { color: var(--c-citrus-800); }

/* ============================================================
   9. HOME — POPULAR ARTICLES
   ============================================================ */
.gl-popular-section {
  padding: 80px 0 64px;
}
.gl-popular {
  max-width: 760px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: 28px;
  border: 1px solid var(--gl-line);
  padding: 40px 48px;
}
.gl-popular__head {
  text-align: center;
  margin-bottom: 32px;
}
.gl-popular__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--c-teal-700);
  text-transform: uppercase;
  background: var(--c-teal-100);
  padding: 6px 14px;
  border-radius: var(--gl-radius-pill);
  margin-bottom: 16px;
}
.gl-popular__head h2 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--gl-text-primary);
}
.gl-popular__head p {
  color: var(--gl-text-secondary);
  font-size: 15px;
  line-height: 22px;
  margin: 0;
}
.gl-popular__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  counter-reset: gl-popular-rank;
}
.gl-popular__list li {
  border-top: 1px solid var(--gl-line);
  counter-increment: gl-popular-rank;
}
.gl-popular__list li:last-child {
  border-bottom: 1px solid var(--gl-line);
}
.gl-popular__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  color: var(--gl-text-primary);
}
.gl-popular__row::before {
  content: counter(gl-popular-rank, decimal-leading-zero);
  font-family: var(--gl-font-body);
  font-weight: 400;
  font-size: 22px;
  color: var(--c-teal-600);
  width: 32px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
/* Hover state intentionally minimal — only the arrow circle changes
   (warmneutral-200 → teal-400). No row background shift, no padding jolt. */
.gl-popular__title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--gl-text-primary);
  line-height: 22px;
}
.gl-popular__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-warmneutral-200);
  color: var(--gl-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
.gl-popular__row:hover .gl-popular__arrow {
  background: var(--c-teal-400);
  color: var(--c-white);
}
.gl-popular__arrow svg {
  width: 14px;
  height: 14px;
}
.gl-popular__foot {
  text-align: center;
  margin-top: 28px;
}
.gl-popular__foot a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-teal-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gl-popular__foot a:hover {
  color: var(--c-teal-1000);
}

/* ============================================================
   10. HOME — STILL NEED HELP
   ============================================================ */
.gl-help-strip {
  margin: 0 16px 16px;
  background: var(--c-warmneutral-200);
  border-radius: 28px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.gl-help-strip__copy h2 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 16ch;
  color: var(--gl-text-primary);
}
.gl-help-strip__copy p {
  font-size: 16px;
  line-height: 24px;
  color: var(--gl-text-secondary);
  margin: 0;
  max-width: 44ch;
}
.gl-help-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gl-help-option {
  background: var(--c-white);
  border-radius: var(--gl-radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--gl-line);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  color: var(--gl-text-primary);
  min-height: 160px;
}
.gl-help-option:hover {
  border-color: var(--c-teal-400);
  transform: translateY(-2px);
  box-shadow: var(--gl-elevation-2);
}
.gl-help-option__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-teal-1000);
  color: var(--c-teal-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.gl-help-option__icon img,
.gl-help-option__icon svg {
  width: 22px;
  height: 22px;
}
.gl-help-option strong {
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  color: var(--gl-text-primary);
}
.gl-help-option small {
  font-size: 13px;
  line-height: 18px;
  color: var(--gl-text-tertiary);
  margin-top: 2px;
}
.gl-help-option__link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-teal-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 16px;
}
.gl-help-option__link svg {
  transition: transform 150ms ease;
}
.gl-help-option:hover .gl-help-option__link {
  color: var(--c-teal-1000);
}
.gl-help-option:hover .gl-help-option__link svg {
  transform: translateX(3px);
}

/* v2 "Other contact methods" — collapsible <details> styling.
   Click the summary to expand the additional contact rows underneath. */
.gl-help-option-details {
  background: var(--c-white);
  border-radius: var(--gl-radius-card);
  border: 1px solid var(--gl-line);
  overflow: hidden;
  transition: border-color 150ms ease;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gl-help-option-details:hover {
  border-color: var(--c-teal-400);
}
.gl-help-option-details summary {
  list-style: none;
  cursor: pointer;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 160px;
}
.gl-help-option-details summary::-webkit-details-marker {
  display: none;
}
.gl-help-option-details[open] summary .gl-help-option__chev {
  transform: rotate(180deg);
}
.gl-help-option__chev {
  transition: transform 160ms ease;
}
.gl-help-option__expand {
  border-top: 1px solid var(--gl-line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--c-warmneutral-100);
}
.gl-help-option__method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--gl-text-primary);
  transition: background 120ms;
}
.gl-help-option__method:hover {
  background: var(--c-white);
}
.gl-help-option__method img,
.gl-help-option__method svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gl-text-secondary);
}
.gl-help-option__method span {
  display: flex;
  flex-direction: column;
}
.gl-help-option__method strong {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.gl-help-option__method small {
  font-size: 13px;
  color: var(--gl-text-tertiary);
  line-height: 18px;
}

/* ============================================================
   10a. ASK GREENLIGHT FAB (v2 — replaces the old Decagon launcher caption)
   Floating bottom-right pill + avatar. Click triggers window.duet.open()
   on the Decagon iframe. Hidden when settings.decagon_enabled is false.
   ============================================================ */
.gl-ask-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  /* One below Decagon's iframe (zIndex 99999999): while the chat is closed the
     iframe is hidden, so our FAB shows; when the chat opens, the iframe sits
     above our FAB so the chat renders over it. */
  z-index: 99999998;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--gl-font-body);
  /* Single cohesive shadow on the whole FAB (follows both the pill + circle
     silhouette) instead of per-child box-shadows, which stacked in the gap and
     gave the circular avatar a heavier rim — making the identical #00CAA7 fills
     read as two different shades. */
  filter: drop-shadow(0 6px 14px rgba(0, 50, 60, 0.18));
  transition: transform 160ms ease, filter 160ms ease;
}
/* The legacy theme (style.css ~10968) forces `background: #3bbfad !important`
   on EVERY <button>, flipping to #f4ba42 (gold) on :hover — which painted a
   teal box behind our FAB at rest and a gold/orange box on hover. Instead of
   fighting it with transparency, we pin the FAB button to our brand teal
   (#00CAA7) in EVERY state so it never turns gold; this also fills the 10px gap
   so the pill + avatar read as one continuous teal shape. The
   `html button.gl-ask-fab` specificity (0,1,2) + !important beats the global
   rule (0,1,1) in every state. */
html button.gl-ask-fab,
html button.gl-ask-fab:hover,
html button.gl-ask-fab:focus,
html button.gl-ask-fab:active {
  background: #00CAA7 !important;
}
.gl-ask-fab__pill {
  /* Exact teal of gl_avatar.png (sampled #00CAA7) so the pill matches the
     avatar disc precisely — the teal-400 token (#00D9B4) read brighter. */
  background: #00CAA7;
  color: var(--c-white);
  padding: 14px 22px;
  border-radius: var(--gl-radius-pill);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.gl-ask-fab__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00CAA7;
}
.gl-ask-fab__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Hover lifts the whole FAB as one unit and deepens the single shared shadow,
   so the pill + avatar stay visually matched (no per-child shadow to stack). */
.gl-ask-fab:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 20px rgba(0, 50, 60, 0.24));
}
@media (max-width: 640px) {
  .gl-ask-fab {
    bottom: 16px;
    right: 16px;
    gap: 8px;
  }
  .gl-ask-fab__pill {
    padding: 12px 18px;
    font-size: 14px;
  }
  .gl-ask-fab__avatar {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   11. ORIGINAL FOOTER — color reset
   The legacy footer is dark-bg with white text/links. Its emotion CSS
   only sets background + spacing and relies on the legacy style.css
   (loaded by Zendesk in production) for text color. In preview that
   stylesheet 404s, and even in production, the global body.layout
   color rule from redesign.css was bleeding the dark token (--c-black-100)
   into footer descendants — making links invisible on the dark bg.
   These rules force a white-on-dark footer regardless of cascade. */
/* These rules target the page-level marketing footer only (`<footer
   class="css-7gkhip">`), NOT the nested `<footer class="article-footer">`
   inside article pages (which holds the vote + share controls). The
   :not(.article-footer) guard keeps the article share/vote section
   from inheriting white-on-dark colors. */
.layout footer:not(.article-footer) {
  color: var(--c-white);
  /* Break out of the parent `.container` (max-width 1080px in header.hbs)
     and out of the footer's own `max-width: 93.75rem` emotion rule so the
     dark bg flows edge-to-edge. Inner content stays centered via the
     legacy emotion CSS inside the footer. */
  width: 100vw;
  max-width: 100vw;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Override the legacy emotion class that gives the dark inner wrapper a
   64px top-left/top-right border-radius. The footer is now a flush block. */
.layout footer:not(.article-footer) .css-1mf3kwx {
  border-radius: 0;
}
.layout footer:not(.article-footer) a {
  color: inherit;
  text-decoration: none;
}
.layout footer:not(.article-footer) a:hover {
  color: var(--c-teal-300);
}
.layout footer:not(.article-footer) .disclaimer-link {
  color: #F3F3F3;
}
.layout footer:not(.article-footer) .disclaimer-link:hover {
  color: #3BBFAD;
  text-decoration: underline;
}

/* ============================================================
   12. INTERIOR PAGE OVERRIDES
   Apply new visual language to existing template structure
   without rewriting it. Scoped to .layout to win cascade.
   ============================================================ */

/* Article/Category/Section breadcrumbs */
.layout .breadcrumbs {
  font-size: 13px;
  color: var(--gl-text-tertiary);
  margin: 24px 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.layout .breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.layout .breadcrumbs li + li::before {
  content: "›";
  color: var(--gl-text-tertiary);
  margin-right: 2px;
  font-size: 14px;
}
.layout .breadcrumbs a {
  color: var(--gl-text-secondary);
  transition: color 120ms;
}
.layout .breadcrumbs a:hover {
  color: var(--c-teal-700);
}

/* Article header */
.layout .article-header {
  margin: 24px 0 32px;
}
.layout .article__title,
.layout .article-header h1 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--gl-text-primary);
  margin: 0;
}

/* Article body — keep Zendesk's markup, but restyle */
.layout .article-body {
  font-family: var(--gl-font-body);
  font-size: 17px;
  line-height: 28px;
  color: var(--gl-text-primary);
  max-width: 720px;
}
.layout .article-body h2 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  margin: 40px 0 16px;
  color: var(--gl-text-primary);
}
.layout .article-body h3 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  margin: 32px 0 12px;
  color: var(--gl-text-primary);
}
.layout .article-body p {
  margin: 0 0 20px;
}
/* Neutralize stray WHITE inline backgrounds from pasted (Google Docs/Word)
   content. These were invisible on the old white page bg but show as per-line
   boxes against the warm cream canvas. Scoped to white-ish values only (hex,
   keyword, rgb/rgba) so any intentional colored highlight is preserved. The
   `i` flag makes the match case-insensitive (#FFF / #fff / WHITE). */
.layout .article-body [style*="#fff" i],
.layout .article-body [style*="#ffffff" i],
.layout .article-body [style*="background:white" i],
.layout .article-body [style*="background: white" i],
.layout .article-body [style*="background-color:white" i],
.layout .article-body [style*="background-color: white" i],
.layout .article-body [style*="rgb(255, 255, 255)" i],
.layout .article-body [style*="rgb(255,255,255)" i],
.layout .article-body [style*="rgba(255, 255, 255" i],
.layout .article-body [style*="rgba(255,255,255" i] {
  background-color: transparent !important;
}
.layout .article-body a {
  color: var(--c-teal-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.layout .article-body a:hover {
  color: var(--c-teal-1000);
}
.layout .article-body ul,
.layout .article-body ol {
  padding-left: 24px;
  margin: 0 0 20px;
}
.layout .article-body li {
  margin-bottom: 8px;
}
.layout .article-body blockquote {
  border-left: 3px solid var(--c-teal-400);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  color: var(--gl-text-secondary);
  font-style: normal;
}

/* Article footer — vote on left, share on right, dividers above/below
   to match the production layout (no card background, just a flat row
   separated by 1px lines). */
.layout .article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--gl-line);
  border-bottom: 1px solid var(--gl-line);
  margin: 40px 0 0;
  padding: 24px 0;
}
.layout .article-vote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.layout .article-vote-question {
  font-size: 15px;
  font-weight: 500;
  color: var(--gl-text-primary);
}
.layout .article-vote-controls {
  display: flex;
  gap: 8px;
}
.layout .article-vote-controls__item {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-warmneutral-200);
  color: var(--gl-text-secondary);
  transition: background 120ms, color 120ms;
  cursor: pointer;
  border: 0;
}
.layout .article-vote-controls__item:hover {
  background: var(--c-teal-100);
  color: var(--c-teal-800);
}
.layout .article-vote-controls__item--voted {
  background: var(--c-teal-400);
  color: var(--c-white);
}
.layout .article-vote-count {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--gl-text-tertiary);
}

/* Share icons — Zendesk's {{share}} helper emits <ul class="share">
   with <a class="share-facebook|share-twitter|share-linkedin"> children
   whose icons come from the legacy style.css Font Awesome ligatures
   (already loaded). Restyle the gray circles to brand teal. */
.layout .article-share {
  margin-left: auto;
}
.layout .share {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.layout .share li {
  display: inline-block;
}
.layout .share a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-warmneutral-200);
  color: var(--gl-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  border: 0;
  transition: background 120ms, color 120ms;
}
.layout .share a:hover {
  background: var(--c-teal-400);
  color: var(--c-white);
}
.layout .share a::before {
  text-indent: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
}
/* Font Awesome 4 ligatures — duplicated from the legacy style.css so the
   icons render in preview (where style.css 404s). Identical rules already
   exist in style.css for production, but adding them here is harmless. */
.layout .share-facebook::before  { content: "\f09a"; }
.layout .share-twitter::before   { content: "\f099"; }
.layout .share-linkedin::before  { content: "\f0e1"; }

/* Category / Section listing */
.layout .category-list,
.layout .section-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.layout .category-list__item,
.layout .section-list__item,
.layout .category-list .column {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 24px;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
  list-style: none;
}
.layout .category-list__item:hover,
.layout .section-list__item:hover,
.layout .category-list .column:hover {
  border-color: var(--c-teal-400);
  transform: translateY(-2px);
  box-shadow: var(--gl-elevation-2);
}
.layout .category-list__link,
.layout .section-list__link {
  color: var(--gl-text-primary);
}
.layout .category-list h2,
.layout .section-list h2,
.layout .category-list h3,
.layout .section-list h3 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  margin: 0 0 8px;
  color: var(--gl-text-primary);
}

/* Promoted articles sidebar */
.layout .promoted-articles {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 24px;
  margin-top: 24px;
}
.layout .promoted-articles__title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-teal-700);
  margin: 0 0 16px;
}
.layout .promoted-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.layout .promoted-articles-item {
  border-top: 1px solid var(--gl-line);
  padding: 14px 0;
}
.layout .promoted-articles-item:first-child {
  border-top: 0;
}
.layout .promoted-articles-item__title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 20px;
}
.layout .promoted-articles-item__title a {
  color: var(--gl-text-primary);
}
.layout .promoted-articles-item__title a:hover {
  color: var(--c-teal-700);
}
.layout .promoted-articles-item__excerpt {
  font-size: 13px;
  color: var(--gl-text-tertiary);
  margin: 0;
  line-height: 18px;
}

/* Search results page */
.layout .search-results {
  margin: 24px 0;
}
.layout .search-results__item {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color 120ms;
}
.layout .search-results__item:hover {
  border-color: var(--c-teal-400);
}
.layout .search-results__title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 6px;
}
.layout .search-results__title a {
  color: var(--gl-text-primary);
}
.layout .search-results__title a:hover {
  color: var(--c-teal-700);
}
.layout .search-results__description {
  font-size: 14px;
  line-height: 20px;
  color: var(--gl-text-secondary);
  margin: 0;
}

/* Request / form pages */
.layout .request-list,
.layout .requests-table {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  overflow: hidden;
}
.layout .form input[type="text"],
.layout .form input[type="email"],
.layout .form input[type="tel"],
.layout .form input[type="url"],
.layout .form textarea,
.layout .form select {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-input);
  background: var(--c-white);
  color: var(--gl-text-primary);
  transition: border-color 120ms, box-shadow 120ms;
}
.layout .form input:focus,
.layout .form textarea:focus,
.layout .form select:focus {
  outline: none;
  border-color: var(--c-teal-400);
  box-shadow: 0 0 0 3px var(--c-teal-100);
}
.layout .form label {
  font-weight: 500;
  font-size: 14px;
  color: var(--gl-text-primary);
  display: block;
  margin-bottom: 6px;
}

/* Buttons — global. Matches the website's CtaWidget StandardWidget:
   8px border-radius (button-shape), 48px tall (h-12), 16/12 padding,
   dark-teal bg with white text (bg-primary / text-on-primary-surface-dark). */
.layout .btn,
.layout button.btn,
.layout input[type="submit"],
.layout input[type="button"] {
  background: var(--c-teal-1000);
  color: var(--c-white);
  border: 0;
  border-radius: var(--gl-radius-button);
  height: 48px;
  padding: 0 20px;
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.layout .btn:hover,
.layout button.btn:hover,
.layout input[type="submit"]:hover,
.layout input[type="button"]:hover {
  background: var(--c-teal-900);
  color: var(--c-white);
}
.layout .btn--secondary {
  background: var(--c-teal-100);
  color: var(--c-teal-1000);
  border: 0;
}
.layout .btn--secondary:hover {
  background: var(--c-teal-200);
  color: var(--c-teal-1000);
}
.layout .btn--expandedWidth {
  padding: 0 32px;
  font-size: 16px;
}

/* Status banner (preserved from header.hbs logic) */
.layout #banner-container {
  background: var(--c-teal-1000);
  color: var(--c-white);
  padding: 12px 16px;
  text-align: center;
  position: relative;
}
.layout .banner-text {
  font-size: 14px;
}
.layout .banner-phone-link {
  color: var(--c-teal-300);
  font-weight: 500;
}
.layout .banner-close-button {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-teal-300);
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.layout .hc-outage-banner {
  background: var(--c-yellow-100);
  color: var(--c-black-100);
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

/* Page container for interior pages */
.layout .container {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Compact hero — reused by search_results.hbs (which still renders
   .hero-unit--with-cover-image). Replace the legacy cover-image style
   with the same dark-teal slab we use on the home hero. */
.layout .hero-unit {
  background: var(--c-teal-1000) !important;
  background-image: none !important;
  border-radius: var(--gl-radius-slab);
  margin: 16px;
  padding: 56px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.layout .hero-unit__content {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.layout .hero-unit .search-box,
.layout .hero-unit .search-box--with-button {
  margin: 0 auto;
}
.layout .hero-unit form.search,
.layout .hero-unit .search input[type="search"],
.layout .hero-unit .search input[type="text"] {
  color: var(--gl-text-primary);
}
.layout .hero-unit form.search,
.layout .hero-unit .search {
  background: var(--c-white);
  border-radius: var(--gl-radius-input);
  padding: 6px 6px 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.layout .hero-unit input[type="search"],
.layout .hero-unit input[type="text"] {
  flex: 1;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 16px;
  padding: 12px 4px;
  background: transparent;
}
.layout .hero-unit button[type="submit"],
.layout .hero-unit input[type="submit"] {
  background: var(--c-black-100);
  color: var(--c-white);
  border-radius: var(--gl-radius-button);
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  border: 0;
  flex-shrink: 0;
}
.layout .hero-unit button[type="submit"]:hover,
.layout .hero-unit input[type="submit"]:hover {
  background: var(--c-teal-1000);
}

/* Page header (category/section/request pages) */
.layout .page-header {
  margin: 32px 0 24px;
}
.layout .page-header h1 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--gl-text-primary);
  margin: 0 0 8px;
}
.layout .page-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--gl-text-secondary);
  margin: 0;
  max-width: 64ch;
}
.layout .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.layout .section-title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--gl-text-primary);
}

/* Search box on inner pages (category/section header). */
.layout .breadcrumbs-wrapper {
  margin-bottom: 8px;
}
.layout .search-box--small {
  margin: 16px 0;
}
.layout .search-box--small form.search,
.layout .search-box--small .search {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-input);
  padding: 4px 4px 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.layout .search-box--small input[type="search"],
.layout .search-box--small input[type="text"],
.layout .search-box--small #query {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  /* Override legacy style.css `.search-box #query { height: 75px }` which makes
     the field unnecessarily tall inside the compact header search box. */
  height: auto;
  padding: 8px 4px;
  flex: 1;
}
.layout .search-box--small button[type="submit"],
.layout .search-box--small input[type="submit"] {
  background: var(--c-black-100);
  color: var(--c-white);
  border-radius: var(--gl-radius-button);
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  border: 0;
}
.layout .search-box--small button[type="submit"]:hover,
.layout .search-box--small input[type="submit"]:hover {
  background: var(--c-teal-1000);
}

/* Zendesk's {{search}} helper injects a magnifier icon into the search control.
   The redesign renders a text "Search" button (matching greenlight.com), so the
   injected icon overlaps the label — hide it. We hide ANY icon element inside the
   search-box / hero-search wrappers (the icon can render as <svg>, <img>, or <i>
   depending on the templating API version, and may be a sibling of the form
   rather than a child). These wrappers contain nothing but the search form, so
   the knowledge-base/community result icons on search_results.hbs — which live in
   .search-results-subheading, outside any search-box — are unaffected. */
.layout .search-box svg,
.layout .search-box img,
.layout .search-box i,
.layout .search-box .search-icon,
.gl-hero__search svg,
.gl-hero__search img,
.gl-hero__search i,
.gl-hero__search .search-icon {
  display: none !important;
}
/* The legacy style.css paints the magnifier as a background-image on
   `.search-box:after` (position:absolute; right:16px), which overlaps the teal
   "Search" submit button. Kill that pseudo-element here. */
.layout .search-box::after,
.layout .search-box::before,
.layout .search-box .search::after,
.layout .search-box .search::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* Section/category card lists (already styled above for .category-list, .section-list;
   here we cover the .box--section wrapper used by category_page/section_page). */
.layout .box--section {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 24px;
  margin-bottom: 16px;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.layout .box--section:hover {
  border-color: var(--c-teal-300);
  transform: translateY(-2px);
  box-shadow: var(--gl-elevation-2);
}
.layout .section__title,
.layout .box--section h3 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 12px;
  color: var(--gl-text-primary);
}
.layout .section__title a,
.layout .box--section h3 a {
  color: var(--gl-text-primary);
}
.layout .section__title a:hover,
.layout .box--section h3 a:hover {
  color: var(--c-teal-700);
}
.layout .article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.layout .article-list-item {
  padding: 10px 0;
  border-top: 1px solid var(--gl-line);
}
.layout .article-list-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.layout .article-list-item__link {
  color: var(--gl-text-primary);
  font-size: 15px;
  line-height: 22px;
}
.layout .article-list-item__link:hover {
  color: var(--c-teal-700);
}
.layout .article-list-item--is-promoted .article-list-item__link::before {
  content: "★ ";
  color: var(--c-yellow-100);
  margin-right: 4px;
}

/* Search results — uses .search-result (singular), not .search-results__item */
.layout .search-results-count {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--gl-text-primary);
  margin: 24px 0 16px;
}
.layout .search-results-subheading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.layout .search-results-subheading__icon {
  width: 22px;
  height: 22px;
}
.layout .search-results-subheading__title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-teal-700);
  margin: 0;
}
.layout .search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.layout .search-result {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color 120ms;
  list-style: none;
}
.layout .search-result:hover {
  border-color: var(--c-teal-400);
}
.layout .search-result__title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  margin: 0 0 6px;
}
.layout .search-result__title a,
.layout .search-result-link {
  color: var(--gl-text-primary);
}
.layout .search-result__title a:hover,
.layout .search-result-link:hover {
  color: var(--c-teal-700);
}
.layout .search-result__description {
  font-size: 14px;
  line-height: 20px;
  color: var(--gl-text-secondary);
  margin: 0 0 6px;
}
.layout .search-result__meta {
  font-size: 12px;
  color: var(--gl-text-tertiary);
}
.layout .search-result-meta-time,
.layout .search-result-meta-count {
  margin-left: 12px;
}

/* Request / ticket pages */
.layout .request-id {
  font-size: 13px;
  color: var(--gl-text-tertiary);
  margin: 8px 0 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.layout .request__subject {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1.2;
  margin: 0 0 24px;
  color: var(--gl-text-primary);
}
.layout .comments__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.layout .comment {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.layout .comment__inner {
  display: flex;
  gap: 16px;
}
.layout .comment__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.layout .entry-info__avatar .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}
.layout .entry-info__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layout .author {
  font-weight: 500;
  font-size: 14px;
  color: var(--gl-text-primary);
}
.layout .meta,
.layout .comment .meta {
  font-size: 12px;
  color: var(--gl-text-tertiary);
}
.layout .comment__body {
  font-size: 15px;
  line-height: 23px;
  color: var(--gl-text-primary);
}
.layout .avatar--agent::after {
  content: "";
  position: absolute;
  /* visual decoration; keep simple */
}
.layout .attachment-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layout .attachment-list__item {
  font-size: 14px;
  color: var(--gl-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.layout .attachment-list__icon {
  color: var(--gl-text-tertiary);
}

/* Pagination */
.layout .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 32px 0;
  list-style: none;
  padding: 0;
}
.layout .pagination a,
.layout .pagination__page,
.layout .pagination__page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gl-text-primary);
  background: transparent;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.layout .pagination a:hover,
.layout .pagination__page:hover {
  background: var(--c-warmneutral-100);
  border-color: var(--gl-line);
}
.layout .pagination__current-page,
.layout .pagination a.is-current {
  background: var(--c-black-100);
  color: var(--c-white);
}

/* Generic row/column legacy grid — keep flow but tighten spacing.
   Article + community + request pages all rely on .column--sm-N for
   a 12-col layout (8/4 split is the dominant article body + sidebar
   pattern). The legacy style.css doesn't load in preview, so we
   redefine the widths we need. */
.layout .row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.layout .row.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.layout .row > .column {
  float: none;
  min-width: 0;
}
.layout .column {
  flex: 1 1 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .layout .column--sm-8 { flex: 0 0 calc(66.6667% - 16px); max-width: calc(66.6667% - 16px); }
  .layout .column--sm-6 { flex: 0 0 calc(50%      - 16px); max-width: calc(50%      - 16px); }
  .layout .column--sm-4 { flex: 0 0 calc(33.3333% - 16px); max-width: calc(33.3333% - 16px); }
  .layout .column--sm-12,
  .layout .column--xs-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Article page — body + related-articles sidebar side by side. */
.layout .row.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (min-width: 768px) {
  .layout .row.article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  .layout .row.article-layout > .column {
    flex: unset;
    max-width: none;
    width: auto;
  }
  /* Pin explicitly rather than rely on DOM-order auto-placement — the
     article body must always render in the wide first track and the
     related-articles sidebar in the narrow second track. */
  .layout .row.article-layout > .column:not(.article-sidebar) {
    grid-column: 1;
    grid-row: 1;
  }
  .layout .row.article-layout > .article-sidebar {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
}

/* Article page sidebar — Related articles + in-page search box. */
.layout .article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .layout .article-sidebar {
    position: sticky;
    top: 24px;
  }
}
.layout .related-articles {
  background: transparent;
  padding: 0;
}
.layout .related-articles-title,
.layout .related-articles__title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-teal-700);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gl-line);
}
.layout .related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.layout .related-articles li {
  margin: 0;
}
.layout .related-articles a {
  color: var(--c-teal-800);
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
}
.layout .related-articles a:hover {
  color: var(--c-teal-1000);
  text-decoration: underline;
}

/* Notification / promo box */
.layout .notification,
.layout .notification--success,
.layout .notification--informative {
  background: var(--c-teal-100);
  color: var(--c-teal-1000);
  border: 1px solid var(--c-teal-300);
  border-radius: var(--gl-radius-tile);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0;
}
.layout .notification--error {
  background: #FFEEEB;
  color: #781C16;
  border-color: #F4C4BF;
}

/* Submit-ticket footer (legacy CTA used on some pages) */
.layout .submit-ticket-footer {
  background: var(--c-warmneutral-200);
  border-radius: var(--gl-radius-card);
  padding: 40px 32px;
  margin: 48px 0;
  text-align: center;
}
.layout .submit-ticket-footer__title {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  margin: 0 0 16px;
}

/* Legacy heading utility classes (.h1–.h5 used across many templates) */
.layout .h1,
.layout h1 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--gl-text-primary);
}
.layout .h2 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--gl-text-primary);
}
.layout .h3 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--gl-text-primary);
}
.layout .h4 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--gl-text-primary);
}
.layout .h5 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--gl-text-primary);
}

/* Requests page nav tabs */
.layout .my-activities-header {
  margin: 32px 0 24px;
}
.layout .my-activities-menu {
  border-bottom: 1px solid var(--gl-line);
  margin-bottom: 24px;
}
.layout .my-activities-menu__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.layout .my-activities-menu__items li a {
  display: inline-block;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gl-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.layout .my-activities-menu__items li a:hover,
.layout .my-activities-menu__items li.is-current a,
.layout .my-activities-menu__items li.active a {
  color: var(--gl-text-primary);
  border-bottom-color: var(--c-teal-400);
}

/* New request form page */
.layout .new-request h1 {
  font-family: var(--gl-font-body);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--gl-text-primary);
  margin: 24px 0 12px;
}
/* Zendesk wraps the request form's submit button in a plain <footer>, which
   otherwise gets caught by the full-bleed marketing-footer rule above
   (width:100vw + negative margin) and shoved to the left edge. Keep it flowing
   in-column so the Submit button lines up with the fields. */
.layout .new-request footer,
.layout #new_request footer {
  width: auto;
  max-width: none;
  position: static;
  margin-left: 0;
  margin-right: 0;
  color: inherit;
  text-align: left;
}
.layout .follow-up-hint {
  background: var(--c-teal-100);
  border: 1px solid var(--c-teal-300);
  color: var(--c-teal-1000);
  border-radius: var(--gl-radius-tile);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 24px;
}

/* Community pages — sub-nav, topic/post lists */
.layout .sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.layout .topic-list,
.layout .post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.layout .topic,
.layout .post {
  background: var(--c-white);
  border: 1px solid var(--gl-line);
  border-radius: var(--gl-radius-tile);
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color 120ms;
}
.layout .topic:hover,
.layout .post:hover {
  border-color: var(--c-teal-400);
}

/* Article footer (vote + share area) */
.layout .article-footer {
  margin-top: 32px;
  padding-top: 24px;
}
.layout .article-share {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.layout .article-more-questions {
  margin: 32px 0;
  padding: 24px;
  background: var(--c-warmneutral-100);
  border-radius: var(--gl-radius-tile);
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  /* 2 cards per row — one 20px gap to share */
  .gl-entry-card {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
  .gl-help-strip {
    grid-template-columns: 1fr;
    padding: 40px 28px;
  }
  .gl-nav__links {
    gap: 16px;
  }
}
@media (max-width: 720px) {
  .gl-nav__inner {
    padding: 14px 20px;
  }
  .gl-nav__section,
  .gl-nav__links a:not(.gl-nav__cta) {
    display: none;
  }
  .gl-nav__mobile-toggle {
    display: inline-flex;
  }
  .gl-nav__links {
    margin-left: 0;
  }
  .gl-hero {
    padding: 56px 24px 72px;
  }
  .gl-hero__title {
    font-size: clamp(36px, 9vw, 48px);
  }
  .gl-popular {
    padding: 28px 20px;
  }
  .gl-hero__search form,
  .gl-hero__search .search {
    flex-wrap: wrap;
    padding: 12px;
  }
  .gl-hero__search input[type="search"],
  .gl-hero__search input[type="text"] {
    padding: 8px 4px;
    width: 100%;
  }
  .gl-hero__search button[type="submit"] {
    width: 100%;
    padding: 14px;
  }
  .gl-entry-section {
    padding: 48px 0 24px;
  }
  .gl-popular-section {
    padding: 48px 0 48px;
  }
}
@media (max-width: 720px) {
  /* Footer stacks vertically on narrow viewports — the long "Do Not Sell..."
     link was breaking the inline flex layout. Center-align everything for a
     consistent rhythm. */
  .gl-footer-slim {
    padding: 40px 20px 48px;
  }
  .gl-footer-slim__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .gl-footer-slim__links {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .gl-footer-slim__links a {
    white-space: normal;
  }
  .gl-footer-slim__copy {
    margin: 0;
    text-align: center;
  }
}

@media (max-width: 540px) {
  /* When cards collapse to a single column the gap is now vertical —
     20/16px reads cramped between full-width stacked cards. */
  .gl-entry-grid {
    gap: 16px;
  }
  .gl-entry-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .gl-help-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gl-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .layout .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Hero is full-bleed — no horizontal padding override needed */
  /* Explicit top margin so the warm bg shows clearly between the popular
     wrap (white) and help-strip (warmneutral-200). */
  .gl-help-strip {
    margin: 16px 12px;
    padding: 32px 20px;
  }
  /* Tighter section heads at narrow viewports — "What do you need help with?"
     was wrapping to three lines at 28px. */
  .gl-section-head {
    margin-bottom: 24px;
  }
  .gl-section-head h2 {
    font-size: 24px;
    line-height: 30px;
  }
  .gl-popular__head h2 {
    font-size: 26px;
    line-height: 32px;
  }
  .gl-help-strip__copy h2 {
    font-size: 28px;
    line-height: 34px;
  }
}