/* ============================================================
   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;
  z-index: 99999998;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--gl-font-body);
}
.gl-ask-fab__pill {
  background: var(--c-teal-400);
  color: var(--c-white);
  padding: 14px 22px;
  border-radius: var(--gl-radius-pill);
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 50, 60, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  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;
  box-shadow: 0 8px 24px rgba(0, 50, 60, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.gl-ask-fab__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gl-ask-fab:hover .gl-ask-fab__pill {
  background: var(--c-teal-500);
  transform: translateY(-1px);
}
.gl-ask-fab:hover .gl-ask-fab__avatar {
  transform: translateY(-1px) scale(1.04);
}
@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;
}
.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"] {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  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);
}

/* 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 .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 sidebar — Related articles + in-page search box. */
.layout .article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 48px;
}
.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;
}
.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;
  }
}