/* ==========================================================================
   THE GRAN LIFE - gran-life.css
   Rebuilt August 18, 2026

   Brand colors and type follow the Master Brand Standard. Nothing here
   depends on JavaScript: the navigation, the accordion, and the mobile menu
   all work with JS disabled, which is the point. Most AI crawlers do not run
   JavaScript, so anything built in the browser is invisible to them.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Brand palette */
  --gl-navy:      #2C3E6B;
  --gl-blue:      #4A6FA5;
  --gl-gold:      #D6BC8A;
  --gl-pale:      #C9D9F4;
  --gl-periw:     #8BA7C9;
  --gl-coolgray:  #D1D8E4;
  --gl-charcoal:  #2A3340;
  --gl-offwhite:  #F6F7F9;
  --gl-white:     #FFFFFF;

  /* Derived */
  --gl-border:    #D1D8E4;
  --gl-navy-deep: #223154;
  --gl-gold-deep: #B99A62;
  /* Gold buttons carry navy labels, so the hover state LIGHTENS rather than
     darkens. Darkening to gold-deep dropped the label to 3.91:1, below AA
     for a 16px bold label. This lifts it to 6.46:1 and still reads clearly
     as a state change. gold-deep is retained for borders and rules. */
  --gl-gold-hover: #DEC9A1;

  /* Type */
  --gl-font-head:   'Nunito', system-ui, -apple-system, sans-serif;
  --gl-font-body:   'Lora', Georgia, 'Times New Roman', serif;
  --gl-font-script: 'Dancing Script', cursive;

  /* Structure */
  --gl-radius:    14px;
  --gl-radius-sm: 8px;
  --gl-shadow:    0 6px 18px rgba(44, 62, 107, .10);
  --gl-shadow-lg: 0 18px 44px rgba(44, 62, 107, .18);
  --gl-maxw:      1120px;
  --gl-narrow:    720px;
}

/* --- Reset -------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--gl-font-body);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--gl-charcoal);
  background: var(--gl-white);
  -webkit-font-smoothing: antialiased;
}

/* height:auto is REQUIRED here, not optional.
   Several images carry width and height attributes so the browser can
   reserve space before they load, which prevents layout shift. But an
   HTML height attribute is a presentational hint: if CSS sets a width and
   never releases the height, the browser applies BOTH, and the image
   stretches vertically. Removing height:auto silently distorts every image
   that has those attributes. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--gl-blue); }

/* Visible keyboard focus everywhere. Do not remove. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gl-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* --- Skip link ---------------------------------------------------------- */

.gl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gl-gold);
  color: var(--gl-navy);
  font-family: var(--gl-font-head);
  font-weight: 800;
  padding: .8rem 1.2rem;
  z-index: 200;
}
.gl-skip:focus { left: 0; }

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

.gl-container { max-width: var(--gl-maxw); margin: 0 auto; padding: 0 1.4rem; }
.gl-narrow    { max-width: var(--gl-narrow); margin-inline: auto; }
.gl-section   { padding: 4.2rem 0; }
.gl-section--tight { padding: 2.6rem 0; }
.gl-center    { text-align: center; }
.gl-mt-2      { margin-top: 2rem; }

.gl-section--tint { background: var(--gl-offwhite); }

.gl-section--navy {
  background: var(--gl-navy);
  color: var(--gl-pale);
}
.gl-section--navy h1,
.gl-section--navy h2,
.gl-section--navy h3 { color: var(--gl-white); }
.gl-section--navy .gl-eyebrow { color: var(--gl-gold); }
/* Body links inside dark sections. Scoped with :not() so it cannot reach
   buttons: `.gl-section--navy a` is 0,1,1 and beat `.gl-btn--gold` at 0,1,0,
   which painted gold text onto the gold Meet Alison button. 1.00:1 at rest,
   1.45:1 on hover as the background darkened. Keep the :not() list in sync
   with any new button class. */
.gl-section--navy a:not(.gl-btn):not(.gl-card__link) { color: var(--gl-gold); }

/* --- Type --------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--gl-font-head);
  font-weight: 800;
  color: var(--gl-navy);
  line-height: 1.18;
  margin: 0 0 .7rem;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.22rem; }

p { margin: 0 0 1.1rem; }

.gl-eyebrow {
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gl-blue);
  margin: 0 0 .55rem;
}

.gl-lead { font-size: 1.16rem; }
.gl-section--navy .gl-lead { color: var(--gl-pale); }

.gl-script {
  font-family: var(--gl-font-script);
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1;
}

.gl-quote {
  font-family: var(--gl-font-body);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.7;
  margin: 0;
  padding: .4rem 0 .4rem 1.4rem;
  border-left: 4px solid var(--gl-gold);
}

.gl-fine {
  font-family: var(--gl-font-head);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--gl-blue);
}

/* --- Buttons ------------------------------------------------------------ */

.gl-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.4rem;
}
.gl-btnrow--center { justify-content: center; }

.gl-btn {
  display: inline-block;
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gl-btn:hover { transform: translateY(-2px); }

.gl-btn--primary { background: var(--gl-navy); color: var(--gl-white); }
.gl-btn--primary:hover { background: var(--gl-navy-deep); }

.gl-btn--gold,
.gl-btn--gold:link,
.gl-btn--gold:visited {
  background: var(--gl-gold);
  color: var(--gl-navy);
}
.gl-btn--gold:hover,
.gl-btn--gold:focus-visible {
  background: var(--gl-gold-hover);
  color: var(--gl-navy);
}

.gl-btn--primary,
.gl-btn--primary:link,
.gl-btn--primary:visited { color: var(--gl-white); }

.gl-btn--ghost {
  background: transparent;
  color: var(--gl-navy);
  border-color: var(--gl-navy);
}
/* Ghost buttons are navy-on-transparent, which is correct on light
   backgrounds and invisible on dark ones. This override previously named
   only .gl-section--navy, so a ghost button in the hero rendered navy text
   on the navy hero gradient: 1.19:1, effectively invisible. Every dark
   surface is now listed. If a new dark section class is ever added, it
   must be added here too. */
.gl-section--navy .gl-btn--ghost,
.gl-hero .gl-btn--ghost,
.gl-banner .gl-btn--ghost {
  color: var(--gl-white);
  border-color: var(--gl-pale);
}
.gl-section--navy .gl-btn--ghost:hover,
.gl-hero .gl-btn--ghost:hover,
.gl-banner .gl-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--gl-white);
}

/* ONE animated CTA sitewide: the header quiz button. Nothing else pulses. */
.gl-btn--pulse { animation: gl-pulse 2.4s ease-in-out infinite; }

@keyframes gl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 188, 138, .65); }
  55%      { box-shadow: 0 0 0 12px rgba(214, 188, 138, 0); }
}

/* --- Header ------------------------------------------------------------- */

.gl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gl-white);
  border-bottom: 1px solid var(--gl-border);
}

.gl-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
  max-width: var(--gl-maxw);
  margin: 0 auto;
  padding: .5rem 1.4rem;
}

.gl-logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex: none; }
.gl-logo img:first-child { width: 48px; height: 48px; flex: none; }
.gl-logo__mark { width: auto; height: 26px; }

/* Below 420px the badge alone carries the brand and the wordmark would
   squeeze the Menu button off the row. */
@media (max-width: 420px) {
  .gl-logo__mark { display: none; }
}

.gl-nav { margin-left: auto; }

.gl-nav__list {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gl-nav__list a {
  font-family: var(--gl-font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--gl-charcoal);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.gl-nav__list a:hover { color: var(--gl-navy); border-bottom-color: var(--gl-gold); }
.gl-nav__list a[aria-current="page"] { color: var(--gl-navy); border-bottom-color: var(--gl-gold); }

.gl-nav__cta a { padding: .55rem 1.15rem; }

/* CSS-only mobile menu. The checkbox is the state, no JavaScript needed. */
.gl-navtoggle { position: absolute; opacity: 0; pointer-events: none; }

.gl-burger {
  display: none;
  margin-left: auto;
  cursor: pointer;
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: .9rem;
  color: var(--gl-navy);
  border: 2px solid var(--gl-navy);
  border-radius: 999px;
  padding: .5rem 1rem;
}

@media (max-width: 900px) {
  .gl-burger { display: inline-block; }
  .gl-nav {
    display: none;
    width: 100%;
    order: 3;
    margin-left: 0;
    padding-bottom: 1rem;
  }
  .gl-navtoggle:checked ~ .gl-nav { display: block; }
  .gl-header__inner { flex-wrap: wrap; }
  .gl-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .gl-nav__list li { border-top: 1px solid var(--gl-border); }
  .gl-nav__list a { display: block; padding: .85rem .2rem; border-bottom: none; }
  .gl-nav__cta { padding-top: .9rem; }
  .gl-nav__cta a { display: inline-block; }
}

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

.gl-hero {
  background: linear-gradient(160deg, var(--gl-navy) 0%, var(--gl-navy-deep) 100%);
  color: var(--gl-pale);
}
.gl-hero h1 { color: var(--gl-white); }
.gl-hero .gl-eyebrow { color: var(--gl-gold); }
.gl-hero .gl-lead { color: var(--gl-pale); }

.gl-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2.8rem;
  align-items: center;
}

.gl-hero__art {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(201, 217, 244, .22);
  border-radius: var(--gl-radius);
  padding: 2.2rem 1.4rem;
  text-align: center;
}

/* --- Banner (interior page headers) ------------------------------------- */

.gl-banner {
  background: var(--gl-navy);
  color: var(--gl-pale);
  padding: 2.8rem 0 3rem;
}
.gl-banner h1 { color: var(--gl-white); }
.gl-banner .gl-eyebrow { color: var(--gl-gold); }
.gl-banner .gl-lead { color: var(--gl-pale); max-width: 46rem; }

.gl-crumb {
  font-family: var(--gl-font-head);
  font-size: .86rem;
  margin-bottom: .9rem;
  color: var(--gl-periw);
}
.gl-crumb a { color: var(--gl-pale); }

/* --- Cards -------------------------------------------------------------- */

.gl-grid { display: grid; gap: 1.4rem; }
.gl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gl-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* A card has a white background wherever it sits, so it must reset the text
   colour rather than inherit it. Inside .gl-section--navy the inherited
   colour is Pale Blue, which on white measures 1.43:1 and is unreadable.
   The same applies to the join card and any other white surface dropped
   into a dark section. */
.gl-card {
  color: var(--gl-charcoal);
  background: var(--gl-white);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  padding: 1.6rem;
  box-shadow: var(--gl-shadow);
}
.gl-card p:last-child { margin-bottom: 0; }
.gl-card h3, .gl-card h4 { color: var(--gl-navy); }
.gl-card .gl-eyebrow { color: var(--gl-blue); }
.gl-card a { color: var(--gl-blue); }

.gl-card__tag {
  display: inline-block;
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-blue);
  background: var(--gl-offwhite);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: .8rem;
}

.gl-card__link {
  font-family: var(--gl-font-head);
  font-weight: 800;
  text-decoration: none;
}
.gl-card__link:hover { text-decoration: underline; }

.gl-ribbon {
  display: inline-block;
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gl-gold);
  color: var(--gl-navy);
  border-radius: 999px;
  padding: .35rem .95rem;
}
.gl-ribbon--soft { background: var(--gl-pale); color: var(--gl-navy); }

.gl-badge {
  display: inline-block;
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-blue);
}

/* --- Split (book / masterclass blocks) ---------------------------------- */

.gl-split {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 2.6rem;
  align-items: center;
}
.gl-split--flip { grid-template-columns: 1.2fr .8fr; }

.gl-book__cover {
  width: 100%;
  height: auto;
  max-width: 300px;
  margin-inline: auto;
  border-radius: var(--gl-radius-sm);
  box-shadow: var(--gl-shadow-lg);
}

.gl-media {
  width: 100%;
  height: auto;
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow-lg);
}

/* --- Welcome video ------------------------------------------------------ */

.gl-video__frame {
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--gl-radius);
  overflow: hidden;
  box-shadow: var(--gl-shadow-lg);
  background: var(--gl-navy);
  aspect-ratio: 16 / 9;
}

.gl-video__frame video { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder shown until the real file is dropped in. Delete when live. */
.gl-video__ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--gl-pale);
  background: radial-gradient(circle at 50% 40%, #3B5488 0%, var(--gl-navy) 72%);
}
.gl-video__play {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--gl-gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}
.gl-video__ph strong {
  font-family: var(--gl-font-head);
  font-size: 1.12rem;
  color: var(--gl-white);
}
.gl-video__ph span {
  font-family: var(--gl-font-head);
  font-size: .84rem;
  color: var(--gl-periw);
  max-width: 32rem;
}

/* --- Accordion (native details/summary, no JavaScript) ------------------ */

.gl-acc {
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  background: var(--gl-white);
  margin-bottom: .8rem;
  overflow: hidden;
}

.gl-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  font-family: var(--gl-font-head);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--gl-navy);
  background: var(--gl-white);
}
.gl-acc > summary::-webkit-details-marker { display: none; }
.gl-acc > summary:hover { background: var(--gl-offwhite); }

.gl-acc > summary::before {
  content: "";
  flex: none;
  margin-top: .45rem;
  width: .55rem; height: .55rem;
  border-right: 2.5px solid var(--gl-gold);
  border-bottom: 2.5px solid var(--gl-gold);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.gl-acc[open] > summary::before { transform: rotate(45deg); }
.gl-acc[open] > summary { background: var(--gl-offwhite); }

.gl-acc__body {
  padding: 1.2rem 1.3rem 1.4rem;
  border-top: 1px solid var(--gl-border);
}
.gl-acc__body > p:first-child { font-size: 1.08rem; }
.gl-acc__body p:last-child, .gl-acc__body ul:last-child { margin-bottom: 0; }

.gl-acc__domains {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.gl-acc__domains li {
  padding-left: 1rem;
  border-left: 3px solid var(--gl-pale);
}
.gl-acc__domains strong { font-family: var(--gl-font-head); color: var(--gl-navy); }

/* Transcript uses the same mechanics, quieter styling */
.gl-transcript { max-width: 900px; margin: 1.4rem auto 0; }
.gl-transcript > summary { font-size: .96rem; font-weight: 700; }

/* --- Forms -------------------------------------------------------------- */

.gl-form {
  color: var(--gl-charcoal);
  background: var(--gl-white);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  padding: 1.7rem;
  box-shadow: var(--gl-shadow);
  max-width: 560px;
}
.gl-form--wide { max-width: 100%; }
.gl-section--navy .gl-form { color: var(--gl-charcoal); }
.gl-section--navy .gl-form a { color: var(--gl-blue); }

.gl-field { margin-bottom: 1rem; }

.gl-field label {
  display: block;
  font-family: var(--gl-font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--gl-navy);
  margin-bottom: .35rem;
}

.gl-field input,
.gl-field select,
.gl-field textarea {
  width: 100%;
  font-family: var(--gl-font-body);
  font-size: 1rem;
  color: var(--gl-charcoal);
  background: var(--gl-white);
  border: 1.5px solid var(--gl-coolgray);
  border-radius: var(--gl-radius-sm);
  padding: .75rem .9rem;
}
.gl-field input:focus,
.gl-field select:focus,
.gl-field textarea:focus { border-color: var(--gl-blue); }

.gl-field textarea { min-height: 130px; resize: vertical; }

.gl-field__hint {
  font-family: var(--gl-font-head);
  font-size: .82rem;
  color: var(--gl-blue);
  margin-top: .3rem;
}

/* Consent checkbox. Never pre-check these. */
.gl-consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1rem;
  padding: .9rem;
  background: var(--gl-offwhite);
  border-radius: var(--gl-radius-sm);
}
.gl-consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .25rem;
}
.gl-consent label {
  font-family: var(--gl-font-head);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--gl-charcoal);
  font-weight: 400;
}

.gl-form .gl-btn { width: 100%; }

.gl-form__note {
  font-family: var(--gl-font-head);
  font-size: .8rem;
  color: var(--gl-blue);
  margin: .9rem 0 0;
  text-align: center;
}

/* Inline newsletter form, single row on desktop */
.gl-inline {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  gap: .7rem;
  align-items: end;
  max-width: 760px;
  margin-inline: auto;
}
.gl-inline .gl-field { margin-bottom: 0; }
.gl-inline .gl-btn { width: auto; }

/* --- Community join card ------------------------------------------------ */

.gl-join {
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  overflow: hidden;
  background: var(--gl-white);
  box-shadow: var(--gl-shadow);
}
.gl-join__top {
  background: var(--gl-navy);
  color: var(--gl-pale);
  padding: 1.6rem 1.4rem;
  text-align: center;
}
.gl-join__top h3 { color: var(--gl-white); margin-bottom: .3rem; }
.gl-join__meta {
  font-family: var(--gl-font-head);
  font-size: .85rem;
  color: var(--gl-periw);
  margin: 0;
}
.gl-join__body { padding: 1.5rem 1.4rem; text-align: center; color: var(--gl-charcoal); }

/* --- As Seen On strip --------------------------------------------------- */

.gl-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  padding: 0;
  margin: 1.6rem 0 0;
  list-style: none;
}
.gl-logos li {
  min-width: 150px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  text-align: center;
}

/* Empty slot styling, used only while a logo is still missing. */
.gl-logos li:not(:has(img)) {
  height: 92px;
  border: 2px dashed var(--gl-coolgray);
  border-radius: var(--gl-radius-sm);
  font-family: var(--gl-font-head);
  font-size: .78rem;
  color: var(--gl-periw);
}

/* Broadcast marks come in both orientations. A single max-height would
   shrink a tall logo like FOX 4 to a third the optical weight of a wide
   one, so cap both dimensions and let each logo use whichever it hits
   first. */
.gl-logos img {
  max-height: 76px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gl-logos a { display: block; line-height: 0; }
.gl-logos a:focus-visible { outline-offset: 4px; }

/* --- Mascots ------------------------------------------------------------ */

.gl-mascots { max-width: 640px; height: auto; margin: 0 auto; }

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

.gl-footer {
  background: var(--gl-charcoal);
  color: var(--gl-coolgray);
  padding: 3rem 0 2rem;
  font-size: .95rem;
}
.gl-footer h4 {
  color: var(--gl-white);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.gl-footer a { color: var(--gl-pale); text-decoration: none; }
.gl-footer a:hover { text-decoration: underline; }

.gl-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
}
.gl-footer__list { list-style: none; margin: 0; padding: 0; }
.gl-footer__list li { margin-bottom: .5rem; }

.gl-social { display: flex; flex-wrap: wrap; gap: .9rem; }
.gl-social a {
  font-family: var(--gl-font-head);
  font-weight: 700;
  font-size: .9rem;
}

.gl-footer__base {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(209, 216, 228, .22);
  font-size: .82rem;
  color: var(--gl-periw);
}
.gl-footer__base p { margin: 0 0 .4rem; }

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

@media (max-width: 900px) {
  .gl-hero__grid,
  .gl-split,
  .gl-split--flip { grid-template-columns: 1fr; gap: 1.8rem; }
  .gl-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .gl-footer__grid { grid-template-columns: 1fr 1fr; }
  .gl-inline { grid-template-columns: 1fr; }
  .gl-inline .gl-btn { width: 100%; }
}

@media (max-width: 620px) {
  .gl-section { padding: 3rem 0; }
  .gl-grid--2, .gl-grid--3 { grid-template-columns: 1fr; }
  .gl-footer__grid { grid-template-columns: 1fr; }
  .gl-btnrow .gl-btn { width: 100%; text-align: center; }
  .gl-video__frame { border-radius: 0; margin-inline: -1.4rem; }
  .gl-form { padding: 1.3rem; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .gl-header, .gl-footer, .gl-btnrow { display: none; }
  .gl-acc__body { display: block !important; }
}

/* --- Freshness signal ---------------------------------------------------
   Visible "Last updated" line. Quiet enough not to compete with the content,
   present enough that a reader and an answer engine both register it.
   The date is generated from a content hash, so it only moves when the page
   actually changes. See update_freshness.py.
   ---------------------------------------------------------------------- */

.gl-updated {
  font-family: var(--gl-font-head);
  font-size: .82rem;
  color: var(--gl-periw);
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--gl-border);
  display: inline-block;
}

/* --- Byline ------------------------------------------------------------
   Visible author attribution on the content pages. The Person schema
   already names Alison, but answer engines and E-E-A-T assessment both
   weight attribution that a reader can see, not only markup. On pages
   making developmental claims, who wrote it is part of the claim.
   ---------------------------------------------------------------------- */

.gl-byline {
  font-family: var(--gl-font-head);
  font-size: .88rem;
  color: var(--gl-blue);
  margin: 0 0 1.2rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--gl-border);
}
.gl-byline a { color: var(--gl-navy); font-weight: 700; }