/* ============================================================
   GLC Retailer Licensing — site chrome & home page

   Implements docs/design_handoff_retailer_portal (high-fidelity):
     · header: 53px utility strip rgba(0,0,0,.4) over #1E4A19,
       then a 63px white nav bar with a two-line wordmark
     · footer: white, green links — full (Home) and slim variants
     · home sections per Home.dc.html
   Tokens live in site.css :root. Static only — no motion.
   ============================================================ */

/* ── Shared shell — 1140px, 24px gutters ────────── */
.glc-shell {
  width: min(1140px, calc(100% - 48px));
  margin-inline: auto;
}

/* ── Header ─────────────────────────────────────── */
.site-header { position: relative; z-index: 100; }

/* Utility strip */
.glc-utility { background: #7f2f02; }
.glc-utility-inner {
  background: transparent;
  min-height: 53px;
  display: flex;
  align-items: center;
}
.glc-utility-inner .glc-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 6px 0;
}
/* The header no longer renders .glc-utility-note — main dropped the "Official
   retailer licensing portal…" span — so this rule is unused, but the 991px
   media query below still hides it. Left in place at the 13px prose floor
   rather than half-removed. */
.glc-utility-note { font-size: 13px; color: rgba(255, 255, 255, .85); }
/* margin-left:auto from main: with the note span gone there is nothing left to
   push the links right, and justify-content on the parent no longer does it. */
.glc-utility-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
/* Renamed from .glc-utility-phone — it points at Contact Us now, not a number. */
.glc-utility-contact {
  font-size: 12px; font-weight: 700; color: #fff;
  text-decoration: none; white-space: nowrap;
}
.glc-utility-contact:hover { color: #fff; text-decoration: underline; }
.glc-signedin-as { font-size: 13px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.glc-signedin-as b { color: #fff; }

/* Main bar */
.glc-mainbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.glc-mainbar .glc-shell {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  flex-wrap: wrap;
}

/* Brand — official mark + two-line wordmark */
.glc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  padding: 10px 0;
}
.glc-brand img { height: 40px; width: auto; display: block; }
/* Header logo — matches galottery.com: 130×90 mark in a ~63px bar,
   overhanging the banner below (footer keeps its own smaller size). */
.glc-mainbar .glc-brand { padding: 6px 0; }
.glc-mainbar .glc-brand img {
  height: 90px;
  margin-bottom: -34px;   /* lets the logo hang over the hero below */
  position: relative;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
}
@media (max-width: 991px) {
  .glc-mainbar .glc-brand img { height: 64px; margin-bottom: -18px; }
}
.glc-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.glc-brand-top { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.glc-brand-sub { font-size: 10px; font-weight: 700; color: var(--primary); letter-spacing: .16em; }

/* Primary navigation */
.glc-nav {
  display: flex;
  gap: 24px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.glc-nav > li { display: flex; }
.glc-nav > li > a,
.glc-nav > li > .glc-navlink {
  display: flex;
  align-items: center;
  min-height: 63px;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 3px solid transparent;
  padding-top: 3px;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
}
.glc-nav > li > a:hover,
.glc-nav > li > .glc-navlink:hover { color: var(--primary); }
.glc-nav > li > a.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Bootstrap's .navbar-expand-lg forces the collapse wrapper to display:flex with
   !important, so it becomes the flex container for the nav, the Admin menu and
   the user chip — and it had no gap of its own, which is why ADMIN and the
   avatar sat flush against each other. */
@media (min-width: 992px) {
  .glc-mainbar .navbar-collapse { gap: 8px 22px; align-items: center; }
}

/* Signed-in identity chip — now the account menu trigger */
.glc-userchip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
}
.glc-userchip:hover { color: var(--primary-dark); background: var(--bg-light); border-color: var(--hairline); }
.glc-userchip[aria-expanded="true"] { background: var(--bg-light); border-color: var(--border); }
.glc-userchip-caret { font-size: 9px; opacity: .55; }
.glc-userwrap .dropdown-item { font-size: 13px; }
.glc-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

/* Staff entry point keeps its own accent */
.glc-mainbar .nav-admin-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 8px 14px;
  margin: 0;
  text-decoration: none;
}
.glc-mainbar .nav-admin-link:hover { background: var(--warn-bg) !important; }

/* ── Buttons (chrome + home) ────────────────────── */
.glc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.glc-btn-solid       { background: var(--primary); border-color: var(--primary); color: #fff !important; }
.glc-btn-solid:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.glc-btn-blue        { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff !important; }
.glc-btn-blue:hover  { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.glc-btn-ghost       { background: #fff; border-color: var(--border); color: var(--text) !important; }
.glc-btn-ghost:hover { background: var(--bg-light); }
/* On green bands */
.glc-btn-white       { background: #fff; border-color: #fff; color: var(--primary-dark) !important; }
.glc-btn-white:hover { background: var(--primary-pale); border-color: var(--primary-pale); }
.glc-btn-ghostwhite       { background: transparent; border-color: rgba(255,255,255,.7); color: #fff !important; }
.glc-btn-ghostwhite:hover { background: rgba(255,255,255,.12); }
/* Compact (utility strip) */
.glc-btn-xs { font-size: 11px; padding: 7px 14px; }

/* The nav bar lays its children out with flex on .glc-shell, so the collapse
   wrapper has to get out of the way — but only above the navbar-expand-lg
   breakpoint. Below it Bootstrap needs .collapse{display:none} to work, which
   an unconditional display:contents silently defeated. */
@media (min-width: 992px) {
  .glc-mainbar .navbar-collapse { display: contents; }
}

/* Mobile toggle */
.glc-navtoggle {
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  padding: 5px 10px;
}
@media (max-width: 991.98px) {
  .glc-mainbar .glc-shell { padding-block: 0 8px; }
  .glc-mainbar .navbar-collapse { width: 100%; }
  .glc-nav { flex-direction: column; gap: 0; }
  .glc-nav > li > a,
  .glc-nav > li > .glc-navlink {
    min-height: 44px;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
    padding-top: 0;
  }
  .glc-nav > li > a.active { border-bottom: 1px solid var(--hairline); }
  .glc-header-cta { margin: 10px 0 4px; }
  .glc-utility-note { display: none; }
}

/* ── Footer ─────────────────────────────────────── */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  color: var(--text);
  margin-top: 0;
  padding: 0;
}
/* Full variant (Home) */
.glc-footer-main {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding: 44px 0 36px;
}
.glc-footer-brandcol { flex: 1 1 280px; min-width: 250px; }
.glc-footer-brandcol .glc-brand { padding: 0; margin-bottom: 14px; }
.glc-footer-brandcol .glc-brand img { height: 34px; }
.glc-footer-about {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34ch;
}
.glc-footer-col { flex: 1 1 140px; min-width: 130px; }
.glc-footer-col-wide { flex: 1 1 200px; min-width: 190px; }
.glc-footer h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 12px;
}
.glc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.glc-footer li { margin: 0; }
.glc-footer a { color: var(--primary); font-size: 13.5px; text-decoration: none; }
.glc-footer a:hover { color: var(--primary-dark); text-decoration: underline; }
.glc-footer address {
  font-size: 13.5px;
  line-height: 1.7;
  font-style: normal;
  color: var(--text-muted);
  margin: 0;
}
.glc-footer address a { font-weight: 600; }
.glc-footer-bottom {
  border-top: 1px solid var(--hairline);
  padding: 14px 0;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
}
.glc-footer-bottom a { font-size: 13px; }
.glc-footer-bottom .glc-footer-legal { display: flex; gap: 16px; }

/* Demo-site operator attribution. Muted like the rest of the bottom row — it is
   a disclosure, not a call to action — but the strong and the mailto still read
   as themselves. */
.glc-footer-operator { color: var(--text-muted); }
.glc-footer-operator strong { color: var(--text); font-weight: 700; }
.glc-footer-operator a { color: var(--primary); text-decoration: none; }
.glc-footer-operator a:hover { text-decoration: underline; }
/* Slim variant (all app screens) */
.glc-footer-slim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.glc-footer-slim a { color: var(--primary); text-decoration: none; }
.glc-footer-slim a:hover { text-decoration: underline; }
.glc-footer-slim .glc-footer-legal { display: flex; gap: 16px; }

/* ── Home page (gh-) ────────────────────────────── */
/* Hero */
/* Back on the shared token — the stops moved into --hero-gradient so the home
   hero and every other band stay in step. */
.gh-hero { background: var(--hero-burst), var(--hero-gradient); }
.gh-hero .glc-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding: 52px 0 60px;
  align-items: flex-start;
}
.gh-hero-copy { flex: 1 1 460px; min-width: 280px; }
.gh-eyebrow {
  display: inline-block;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
}
.gh-hero h1 {
  margin: 18px 0 14px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
  text-wrap: pretty;
}
/* Full white. At 92% this measured 4.05 against the lightest stop — the body
   copy in the hero, and the longest thing anyone reads on the page. */
.gh-hero-sub {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  max-width: 52ch;
}
.gh-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gh-cta-row .glc-btn { padding: 13px 24px; }
.gh-ticks { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 26px; }
.gh-ticks span { font-size: 13px; color: #fff; }
.gh-ticks b { color: #fff; }

/* Hero right column: photo slot + overlapping fee card */
.gh-hero-side { flex: 1 1 340px; max-width: 440px; min-width: 280px; }
/* Holds the Georgia Lottery storefront illustration. White panel rather than a
   duotone photo well: the artwork is line art on white, so darkening it would
   only muddy it. The fee card below still overlaps by its -52px margin, which
   is why the image sits high in the box (object-position) — the lower strip is
   covered anyway. */
/* The fee card holds the right of the hero on its own. The heading sits on a
   tinted band so the card has a structure without needing a picture to give it
   one, and the amounts carry the weight. */
.gh-feecard {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
  overflow: hidden;
}
.gh-feecard-head {
  background: var(--bg-light);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 22px 14px;
}
.gh-feecard-body { padding: 4px 22px 20px; }
.gh-feecard-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.gh-feecard-note { font-size: 13px; color: var(--text-muted); margin: 4px 0 6px; }
.gh-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e8e6e6;
}
.gh-fee-row:last-of-type { border-bottom: none; padding-bottom: 14px; }
.gh-fee-name { font-size: 14px; font-weight: 700; }
.gh-fee-desc { font-size: 13px; color: var(--text-muted); }
.gh-fee-amount { font-size: 24px; font-weight: 800; }

/* Non-refundable warning (semantic red — allowed) */
.gh-warn {
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warn-text);
}

/* Sections */
.gh-section { padding: 64px 0; background: #fff; }
.gh-section-alt {
  background: var(--bg-light);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.gh-section-tight { padding: 56px 0; }
.gh-rule { width: 32px; height: 4px; background: var(--primary); margin-bottom: 14px; }
.gh-section h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; }
.gh-section-sub { margin: 0 0 26px; font-size: 14px; color: var(--text-muted); max-width: 64ch; }

/* Checklist */
.gh-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 48px; }
.gh-check {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.gh-check-ic {
  width: 22px; height: 22px;
  border-radius: 3px;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}
.gh-check b { font-size: 14px; }
.gh-check-desc { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* Five parts */
.gh-parts { background: #fff; border: 1px solid var(--border); border-radius: 3px; }
.gh-part {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 22px;
}
.gh-part + .gh-part { border-top: 1px solid var(--hairline); }
.gh-part-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gh-part-body { flex: 1 1 300px; }
.gh-part-body b { font-size: 14.5px; }
.gh-part-desc { font-size: 13.5px; color: var(--text-muted); }
.gh-part-tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Business types (native <details>) */
.gh-types {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-light);
}
.gh-types summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.gh-types-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 18px; }
.gh-chip {
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 10px;
}

/* Announcements — an editorial list, not three boxes.
   Three bordered cards stacked in a column gave each notice its own frame and
   its own repeated "August 2026", so the section read as three of something
   rather than one list of three. Hairline separators do the same job with none
   of the weight, and the titles carry the scanning.
   (Deliberately no coloured left border: that is a card pattern worth avoiding.) */
.gh-annc-grid { display: flex; flex-wrap: wrap; gap: 40px; }
.gh-annc-main { flex: 1 1 520px; min-width: 280px; }
.gh-annc-list {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 22px;
}
.gh-contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.gh-annc-card { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.gh-annc-card:last-child { border-bottom: none; }
/* Uppercase meta label, so a date repeated down the column recedes instead of
   competing with the headline above it. */
.gh-annc-date {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.gh-annc-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 6px 0 6px; }
.gh-annc-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.gh-annc-card p:last-child { margin-bottom: 0; }
.gh-annc-card p b { color: var(--text); }
.gh-annc-more { font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.gh-annc-side { flex: 1 1 300px; max-width: 380px; min-width: 280px; }
.gh-contact-card { padding: 22px 22px 20px; margin-top: 38px; }
.gh-contact-card h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.gh-contact-cta { font-size: 19px; font-weight: 800; color: var(--primary); text-decoration: none; }
.gh-contact-line { font-size: 13px; margin-top: 2px; }
.gh-contact-hours { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.gh-contact-div { border-top: 1px solid var(--hairline); margin: 14px 0; }
.gh-contact-h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.gh-contact-addr { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.gh-contact-links { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.gh-contact-links a { font-weight: 700; color: var(--primary); text-decoration: none; }

/* CTA band */
/* A full-bleed band like the heroes, so it takes the band token rather than the
   brand colour — on var(--primary) it was the one green stripe left after the
   rest of the page turned. Buttons, nodes and badges keep var(--primary); they
   are components, not bands. */
.gh-cta { background: var(--hero-burst), var(--hero-gradient); padding: 52px 0; text-align: center; }
.gh-cta-inner { width: min(720px, calc(100% - 48px)); margin-inline: auto; }
.gh-cta h2 { margin: 0 0 10px; font-size: 26px; font-weight: 800; color: #fff; }
.gh-cta p {
  margin: 0 auto 24px;
  font-size: 14.5px;
  line-height: 1.6;
  /* full white: 92% measured 4.31 on the band, under the 4.5 AA needs */
  color: #fff;
  max-width: 52ch;
}
.gh-cta .gh-cta-row { justify-content: center; }

/* ── Application status detail (st-) ────────────────── */
.st-shell { padding-block: 32px 64px; max-width: 900px; }

.st-crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.st-crumbs a { color: var(--primary); font-weight: 600; text-decoration: none; }
.st-crumbs span[aria-hidden] { margin: 0 6px; }

.st-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.st-head h1 { margin: 0; font-size: 24px; font-weight: 800; }
.st-head-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* Decision + call-to-action panels */
.st-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 26px; background: #fff;
}
.st-panel h2 { font-size: 17px; font-weight: 800; margin: 0 0 10px; }
.st-panel p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.st-panel p:last-child { margin-bottom: 0; }
/* Denial is stated plainly, not shouted: a red wash on the worst news a user
   can get here reads as an error rather than a decision. */
.st-panel-denied   { border-left: 4px solid var(--accent); }
.st-panel-denied .st-panel-fee { color: var(--warn-text); font-weight: 600; }
.st-panel-approved { border-left: 4px solid var(--primary); background: var(--primary-pale); }
.st-panel-pay      { border-left: 4px solid var(--brand-blue); }

/* Sections */
.st-section {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px; background: #fff;
}
.st-section-h {
  font-size: 14px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px;
}
.st-muted { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; margin: 0 0 14px; }
.st-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-cols .st-section { margin-bottom: 0; }
@media (max-width: 767.98px) { .st-cols { grid-template-columns: 1fr; } }

/* Timeline — same node language as the wizard step nav, vertical at all widths */
.st-timeline { list-style: none; margin: 0; padding: 0; }
.st-tl-item { display: grid; grid-template-columns: 22px 1fr; gap: 14px; position: relative; padding-bottom: 20px; }
.st-tl-item:last-child { padding-bottom: 0; }
/* Connector runs between nodes, not past the last one */
.st-tl-item:not(:last-child)::before {
  content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px;
  width: 2px; background: var(--hairline);
}
.st-tl-node {
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; z-index: 1;
}
.st-tl-item.done    .st-tl-node { background: var(--primary-pale); color: var(--primary-dark); }
.st-tl-item.current .st-tl-node { background: var(--primary); color: #fff; }
.st-tl-item.upcoming .st-tl-node { background: #fff; border: 1px solid var(--border); }
.st-tl-title { font-size: 14px; font-weight: 700; }
.st-tl-item.upcoming .st-tl-title { color: var(--text-muted); font-weight: 600; }
.st-tl-detail { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-top: 2px; }
.st-tl-note { font-size: 13px; color: var(--text-muted); margin: 16px 0 0; }

.st-help { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin: 24px 0 0; }
.st-help a { color: var(--primary); font-weight: 600; }

/* ── Page hero — wizard/app screens (pre-handoff band, kept
     until those screens are rebuilt in storyboard order) ──── */
.glc-page-hero {
  background: var(--hero-burst), var(--hero-gradient);
  color: #fff;
  padding: 34px 0 22px;
}
.glc-page-hero h1 {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 4px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
.glc-page-hero-sub {
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  /* Full white: 92% measured 4.31 against the lightest stop, under the 4.5 AA
     needs at this size. Same fade-for-hierarchy trap as the other band sub-lines. */
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
@media (max-width: 767.98px) {
  .glc-page-hero { padding: 22px 0 16px; }
  .glc-page-hero h1 { font-size: 22px; }
}