/* ── Resources: guide landing pages and the Resources index ──
   Spec: marketing/guides/landing-pages-spec.md. Conversion pages: no load animation,
   no popups, one primary action. Prefix gl- (guide landing). Uses the site tokens in base.css.
   Button colour is --teal-dark so white text meets WCAG AA (4.5:1) on the cream page. */

.gl-page { padding-top: var(--h-nav); }
.gl-light { background: var(--bg-cream); }
.gl-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
@media (max-width: 720px) { .gl-wrap { padding: 0 20px; } }

.gl-page h1, .gl-page h2, .gl-page h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--text-dark); }
.gl-page p { color: var(--text-sub); line-height: 1.65; }
.gl-page a { color: var(--teal-dark); }
.gl-page :focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 3px; border-radius: 4px; }

.gl-eyebrow {
  display: inline-block; font-size: 14px; font-weight: 500;
  color: var(--teal-dark); margin-bottom: 14px;
}
.gl-section { padding: 72px 0; }
.gl-section--tight { padding: 48px 0; }
.gl-section--card { background: var(--card-light); }
@media (max-width: 720px) { .gl-section { padding: 48px 0; } .gl-section--tight { padding: 32px 0; } }
.gl-h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.2; margin-bottom: 14px; max-width: 760px; }
.gl-lede { font-size: 17px; max-width: 680px; margin-bottom: 8px; }
.gl-lede--full { max-width: none; }

/* ── Hero ── */
.gl-hero {
  padding: 56px 0 44px;
  background: radial-gradient(ellipse 70% 55% at 80% 0%, var(--teal-07) 0%, transparent 70%), var(--bg-cream);
}
.gl-hero__grid {
  display: grid; gap: 28px 56px; align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "copy form" "visual form";
}
.gl-hero__copy { grid-area: copy; }
.gl-hero__form { grid-area: form; }
.gl-hero__visual { grid-area: visual; }
.gl-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin-bottom: 18px; }
.gl-sub { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--text-sub); max-width: 600px; }
.gl-trust { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--text-sub); }
.gl-trust span { display: inline-flex; align-items: center; gap: 6px; }
.gl-trust span::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--teal-10) center / 8px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' fill='none' stroke='%23007a80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.gl-cover { position: relative; width: min(100%, 360px); margin: 8px auto 0; aspect-ratio: 860 / 1216; }
.gl-cover img { position: absolute; display: block; height: auto; border-radius: 6px; box-shadow: 0 18px 44px rgba(27,45,46,0.22), 0 2px 6px rgba(27,45,46,0.10); background: #fff; }
.gl-cover__back { width: 78%; right: -6%; top: 8%; transform: rotate(5deg); }
.gl-cover__front { width: 82%; left: 0; top: 0; transform: rotate(-3deg); }
.gl-cover figcaption { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font-size: 12.5px; color: var(--text-sub); }

@media (max-width: 919px) {
  .gl-hero { padding: 22px 0 32px; }
  .gl-hero__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "visual"; gap: 16px; }
  .gl-cover { width: min(78%, 300px); margin-bottom: 36px; }
  /* Keep the whole form on the first phone screen: lead sentence only, no trust list, compact card. */
  .gl-eyebrow { margin-bottom: 8px; font-size: 13px; }
  .gl-hero h1 { font-size: clamp(26px, 7.4vw, 31px); margin-bottom: 10px; }
  .gl-sub { font-size: 15.5px; line-height: 1.5; }
  .gl-sub__more, .gl-trust, .gl-form__sub { display: none; }
  .gl-hero .gl-form { padding: 16px 16px 14px; border-radius: 14px; }
  .gl-hero .gl-form__title { font-size: 19px; margin-bottom: 10px; }
  .gl-hero .gl-field { margin-bottom: 8px; }
  .gl-hero .gl-input { height: 48px; }
  .gl-hero .gl-choice { margin-bottom: 12px; }
  .gl-hero .gl-choice legend { font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; }
  .gl-hero .gl-pill span { min-height: 44px; font-size: 14px; }
  .gl-hero .gl-submit { height: 50px; }
}

/* ── Form ── */
.gl-form {
  background: #fff; border: 1px solid var(--border-light); border-radius: 16px; padding: 26px 26px 22px;
  box-shadow: 0 12px 36px rgba(27,45,46,0.10);
}
.gl-form__title { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--text-dark); margin-bottom: 4px; }
.gl-form__sub { font-size: 14.5px; color: var(--text-sub); margin-bottom: 18px; line-height: 1.5; }
.gl-field { display: block; margin-bottom: 16px; }
.gl-field__label { display: block; font-size: 14px; font-weight: 500; color: var(--text-dark); margin-bottom: 6px; }
.gl-input {
  width: 100%; height: 52px; padding: 0 16px; font-family: var(--font-body); font-size: 16px; color: var(--text-dark);
  background: #fff; border: 1.5px solid rgba(27,45,46,0.30); border-radius: 10px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gl-input::placeholder { color: #7b8d8e; }
.gl-input:focus { border-color: var(--teal-dark); box-shadow: 0 0 0 3px var(--teal-25); }
.gl-input[aria-invalid="true"] { border-color: #b3261e; }

.gl-choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.gl-choice legend { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--text-dark); padding: 0; margin-bottom: 10px; }
.gl-choice__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gl-pill { position: relative; display: block; }
.gl-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gl-pill span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; text-align: center;
  font-size: 14.5px; font-weight: 500; line-height: 1.25; color: var(--text-dark);
  background: #fff; border: 1.5px solid rgba(27,45,46,0.30); border-radius: 10px; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.gl-pill:hover span { border-color: var(--teal-dark); }
.gl-pill input:checked + span { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.gl-pill input:focus-visible + span { outline: 2px solid var(--teal-dark); outline-offset: 3px; }
.gl-choice[data-invalid="true"] .gl-pill span { border-color: #b3261e; }

.gl-error { min-height: 0; margin: 6px 0 0; font-size: 13.5px; font-weight: 500; color: #b3261e; line-height: 1.4; }
.gl-error:empty { display: none; }
.gl-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; cursor: pointer;
  background: var(--teal-dark); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 16.5px; border-radius: 10px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.gl-submit:hover { background: #006469; box-shadow: 0 6px 18px rgba(0,122,128,0.30); }
.gl-submit:disabled { opacity: 0.7; cursor: progress; }
/* Two equal buttons (spec: "The front door"): same size, shape, fill and type; standard first. Side by side on desktop, stacked on a phone. */
.gl-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gl-action[hidden] { display: none; }
.gl-action__note { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-sub); }
@media (min-width: 560px) { .gl-actions:has(.gl-action:nth-child(2):not([hidden])) { grid-template-columns: 1fr 1fr; align-items: start; } }
.gl-form__fine { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-sub); }
.gl-form__fine strong { color: var(--text-dark); font-weight: 500; }
.gl-form__formerror { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fdeceb; color: #8a1c15; font-size: 14px; line-height: 1.5; }
.gl-form__formerror:empty { display: none; }

.gl-done { background: #fff; border: 1px solid var(--border-light); border-top: 4px solid var(--teal-dark); border-radius: 16px; padding: 26px; box-shadow: 0 12px 36px rgba(27,45,46,0.10); }
.gl-done:focus { outline: none; }
.gl-done__title { font-family: var(--font-display); font-size: 24px; color: var(--text-dark); margin-bottom: 8px; }
.gl-done p { font-size: 15.5px; margin-bottom: 8px; }
.gl-done__email { font-weight: 600; color: var(--text-dark); word-break: break-all; }
.gl-wait { margin-top: 14px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.gl-wait summary { cursor: pointer; font-weight: 500; color: var(--teal-dark); font-size: 15px; }
.gl-wait ol, .gl-wait ul { margin: 10px 0 0 20px; color: var(--text-sub); font-size: 14.5px; line-height: 1.6; }
.gl-wait li { margin-bottom: 4px; }

/* ── Sources band ── */
.gl-band { padding: 18px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); background: #fff; }
.gl-band p { text-align: center; font-size: 13.5px; color: var(--text-sub); }
.gl-band strong { color: var(--text-dark); font-weight: 500; }
.gl-band__label { font-weight: 500; color: var(--text-dark); margin-bottom: 10px; }
.gl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gl-chips li { font-size: 13px; color: var(--text-dark); border: 1px solid var(--border-light); border-radius: 999px; padding: 5px 13px; background: #fff; }
.gl-band__note { margin-top: 12px; font-size: 12px; }

/* ── Cards ── */
.gl-cards { display: grid; gap: 18px; margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .gl-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gl-cards, .gl-cards--4, .gl-cards--2 { grid-template-columns: 1fr; } }
.gl-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--r-card); padding: 22px 22px 20px; }
.gl-card h3 { font-size: 18px; line-height: 1.3; margin-bottom: 10px; }
.gl-card p { font-size: 15px; margin-bottom: 10px; }
.gl-card p:last-child { margin-bottom: 0; }
.gl-quote { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--text-dark) !important; margin-bottom: 12px !important; }
.gl-card__fix { font-size: 14.5px !important; padding-top: 12px; border-top: 1px solid var(--border-light); }
.gl-card__fix strong { color: var(--teal-dark); font-weight: 500; }
.gl-src { font-size: 12.5px !important; color: #5f7677 !important; margin-top: 8px; }

/* ── Inside ── */
.gl-inside { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 28px; align-items: start; }
@media (max-width: 900px) { .gl-inside { grid-template-columns: 1fr; gap: 28px; } }
.gl-chapters { list-style: none; margin: 0; padding: 0; counter-reset: ch; columns: 1; }
.gl-chapters li { counter-increment: ch; position: relative; padding: 9px 0 9px 40px; border-bottom: 1px solid var(--border-light); font-size: 15px; line-height: 1.45; color: var(--text-dark); break-inside: avoid; }
.gl-chapters li::before { content: counter(ch, decimal-leading-zero); position: absolute; left: 0; top: 9px; font-weight: 600; font-size: 13px; color: var(--teal-dark); }
.gl-chapters span { display: block; font-size: 13.5px; color: var(--text-sub); margin-top: 1px; }
.gl-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gl-thumb { margin: 0; }
.gl-thumb img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border-light); box-shadow: 0 8px 22px rgba(27,45,46,0.12); background: #fff; }
.gl-thumb__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; transition: transform 0.2s; }
.gl-thumb__btn:hover, .gl-thumb__btn:focus-visible { transform: translateY(-5px); }
.gl-thumb__btn img { transition: box-shadow 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.55s cubic-bezier(0.4,0,0.2,1); }
.gl-thumb__btn:hover img, .gl-thumb__btn:focus-visible img { box-shadow: 0 16px 34px rgba(27,45,46,0.22); }
/* Lightbox for the example pages */
.gl-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.gl-lightbox::backdrop { background: rgba(10,20,21,0.86); }
.gl-lightbox__inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 56px; box-sizing: border-box; pointer-events: none; }
.gl-lightbox__img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); pointer-events: auto; }
/* Fade and a small rise on open, a fade on close (the close is driven by JS so the animation can finish). */
.gl-lightbox { opacity: 0; transition: opacity 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete; }
.gl-lightbox[open] { opacity: 1; }
.gl-lightbox::backdrop { opacity: 0; transition: opacity 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete; }
.gl-lightbox[open]::backdrop { opacity: 1; }
.gl-lightbox__img, .gl-lightbox__cap { transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); transform: scale(0.96) translateY(10px); }
.gl-lightbox[open] .gl-lightbox__img, .gl-lightbox[open] .gl-lightbox__cap { transform: none; }
@starting-style {
  .gl-lightbox[open] { opacity: 0; }
  .gl-lightbox[open]::backdrop { opacity: 0; }
  .gl-lightbox[open] .gl-lightbox__img, .gl-lightbox[open] .gl-lightbox__cap { transform: scale(0.96) translateY(10px); }
}
.gl-lightbox.is-closing, .gl-lightbox.is-closing::backdrop { opacity: 0; }
.gl-lightbox.is-closing .gl-lightbox__img { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .gl-lightbox, .gl-lightbox::backdrop, .gl-lightbox__img, .gl-lightbox__cap { transition: none; transform: none; } }
.gl-lightbox__cap { margin: 12px 0 0; max-width: 640px; text-align: center; font-size: 14px; line-height: 1.45; color: #e9eeee; }
.gl-lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; pointer-events: auto; }
.gl-lightbox__btn:hover { background: rgba(255,255,255,0.28); }
.gl-lightbox__close { top: 14px; right: 14px; }
.gl-lightbox__prev { left: 8px; top: 50%; margin-top: -24px; }
.gl-lightbox__next { right: 8px; top: 50%; margin-top: -24px; }
@media (max-width: 520px) { .gl-lightbox__inner { padding: 64px 12px 20px; } .gl-lightbox__prev { top: auto; bottom: 14px; left: 14px; margin: 0; } .gl-lightbox__next { top: auto; bottom: 14px; right: 14px; margin: 0; } }
.gl-thumb figcaption { font-size: 12.5px; line-height: 1.4; color: var(--text-sub); margin-top: 8px; }
@media (max-width: 520px) { .gl-thumbs { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .gl-thumb figcaption { font-size: 11.5px; } }
.gl-toolkit { margin-top: 18px; padding: 14px 16px; background: var(--teal-06); border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.55; color: var(--text-dark); }
.gl-toolkit strong { font-weight: 600; }

/* Hover/focus a chapter: the box under the thumbnails swaps from the toolkit note to what that chapter teaches (js/guide-inside.js). Instant swap, same box, no overlay. */
.gl-inside__side { position: sticky; top: calc(var(--h-nav) + 16px); }
.gl-swap { margin-top: 18px; }
.gl-swap > * { margin: 0; }
.gl-detail { display: none; padding: 14px 16px; background: var(--teal-06); border-left: 3px solid var(--teal-dark); border-radius: var(--r-sm); }
.gl-swap[data-active="true"] .gl-toolkit { display: none; }
.gl-swap[data-active="true"] .gl-detail { display: block; }
.gl-detail p { margin: 0; }
.gl-detail__num { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dark) !important; }
.gl-detail__title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--text-dark) !important; margin: 2px 0 6px !important; }
.gl-detail__body { font-size: 14.5px; line-height: 1.55; color: var(--text-dark) !important; }
@media (min-width: 901px) {
  .gl-chapters li { cursor: default; padding-left: 52px; padding-right: 12px; margin-left: -12px; border-radius: 8px; transition: background-color 0.15s; }
  .gl-chapters li::before { left: 12px; }
  .gl-chapters li:hover, .gl-chapters li.is-active { background: var(--teal-06); }
}
@media (max-width: 900px) { .gl-inside__side { position: static; } .gl-detail { display: none; } }
@media (prefers-reduced-motion: reduce) { .gl-chapters li { transition: none; } }

/* ── For / not for ── */
.gl-forgrid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
@media (max-width: 760px) { .gl-forgrid { grid-template-columns: 1fr; } }
.gl-for { background: #fff; border: 1px solid var(--border-light); border-radius: var(--r-card); padding: 22px; }
.gl-for h3 { font-size: 18px; margin-bottom: 12px; }
.gl-for ul { margin: 0; padding: 0; list-style: none; }
.gl-for li { position: relative; padding: 0 0 10px 24px; font-size: 15px; line-height: 1.55; color: var(--text-sub); }
.gl-for--yes li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--teal-dark); border-bottom: 2px solid var(--teal-dark); transform: rotate(-45deg); }
.gl-for--no li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 12px; height: 2px; background: #8a9a9b; }

/* ── Author, will-not-do ── */
.gl-author { display: flex; gap: 22px; align-items: flex-start; max-width: 760px; }
.gl-author__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--teal-10); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; }
.gl-author__name { font-weight: 600; color: var(--text-dark); font-size: 16px; }
.gl-author__role { font-size: 14px; color: var(--text-sub); margin-bottom: 8px; }
.gl-author blockquote { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.45; color: var(--text-dark); }
@media (max-width: 520px) { .gl-author { flex-direction: column; gap: 12px; } }
.gl-will-not { list-style: none; margin: 18px 0 0; padding: 0; max-width: 760px; }
.gl-will-not li { padding: 12px 0 12px 0; border-bottom: 1px solid var(--border-light); font-size: 16px; line-height: 1.55; color: var(--text-dark); }
.gl-will-not li:last-child { border-bottom: 0; }

/* ── FAQ ── */
.gl-faq { max-width: 820px; margin: 24px auto 0; }
.gl-section--center .gl-h2 { margin-left: auto; margin-right: auto; text-align: center; }
.gl-faq details { border-bottom: 1px solid var(--border-light); }
.gl-faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 500; font-size: 16.5px; line-height: 1.4; color: var(--text-dark); }
.gl-faq summary::-webkit-details-marker { display: none; }
.gl-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--teal-dark); border-bottom: 2px solid var(--teal-dark); transform: rotate(45deg); transition: transform 0.2s; }
.gl-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.gl-faq summary:hover { color: var(--teal-dark); }
.gl-faq .gl-faq__a { padding: 0 0 18px; font-size: 15.5px; line-height: 1.65; max-width: 700px; }

/* ── Dark half: "Why this guide" down to the form ──
   The page turns dark as this half scrolls in: js/guide-scroll-theme.js adds body.dark (as on the homepage) and
   the body background and these colours ease over 0.55s. The light half above sits in .gl-light so it stays cream. */
.gl-dark * { transition: color 0.55s cubic-bezier(0.4,0,0.2,1), background-color 0.55s cubic-bezier(0.4,0,0.2,1), border-color 0.55s cubic-bezier(0.4,0,0.2,1); }
body.dark .gl-dark { color: var(--text-light); }
body.dark .gl-dark .gl-section--card { background: rgba(255,255,255,0.04); border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); }
body.dark .gl-dark h1, body.dark .gl-dark h2, body.dark .gl-dark h3, body.dark .gl-page .gl-dark h2, body.dark .gl-page .gl-dark h3 { color: var(--text-light); }
body.dark .gl-page .gl-dark p { color: var(--text-light-sub); }
body.dark .gl-page .gl-dark a { color: #8fdde0; }
body.dark .gl-dark :focus-visible { outline-color: #8fdde0; }
body.dark .gl-dark .gl-card, body.dark .gl-dark .gl-for { background: var(--card-dark); border-color: var(--border-dark); }
body.dark .gl-dark .gl-for li { color: var(--text-light-sub); }
body.dark .gl-dark .gl-for--yes li::before { border-color: #8fdde0; }
body.dark .gl-dark .gl-for--no li::before { background: rgba(237,237,240,0.4); }
body.dark .gl-dark .gl-author__photo { background: rgba(143,221,224,0.14); color: #8fdde0; }
body.dark .gl-dark .gl-author__name, body.dark .gl-dark .gl-author blockquote, body.dark .gl-dark .gl-will-not li { color: var(--text-light); }
body.dark .gl-dark .gl-author__role { color: var(--text-light-sub); }
body.dark .gl-dark .gl-will-not li { border-bottom-color: var(--border-dark); }
body.dark .gl-dark .gl-faq details { border-bottom-color: var(--border-dark); }
body.dark .gl-dark .gl-faq summary { color: var(--text-light); }
body.dark .gl-dark .gl-faq summary:hover { color: #8fdde0; }
body.dark .gl-dark .gl-faq summary::after { border-color: #8fdde0; }
.gl-dark .gl-thumb__btn { transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1); }
.gl-dark .gl-thumb__btn img { transition: box-shadow 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.55s cubic-bezier(0.4,0,0.2,1); }
body.dark .gl-dark .gl-thumb__btn:hover img, body.dark .gl-dark .gl-thumb__btn:focus-visible img { box-shadow: 0 16px 34px rgba(0,0,0,0.55); }
@media (prefers-reduced-motion: reduce) { .gl-dark .gl-thumb__btn, .gl-dark .gl-thumb__btn img, .gl-thumb__btn, .gl-thumb__btn img { transition: none; } .gl-thumb__btn:hover, .gl-thumb__btn:focus-visible { transform: none; } }
/* "What is inside" sits in the dark half too, so its chapter list, thumbnails and note boxes need dark colours. */
body.dark .gl-dark .gl-chapters li { color: var(--text-light); border-bottom-color: var(--border-dark); }
body.dark .gl-dark .gl-chapters li::before { color: #8fdde0; }
body.dark .gl-dark .gl-chapters span { color: var(--text-light-sub); }
body.dark .gl-dark .gl-chapters li:hover, body.dark .gl-dark .gl-chapters li.is-active { background: rgba(143,221,224,0.1); }
body.dark .gl-dark .gl-thumb img { border-color: var(--border-dark); box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
body.dark .gl-dark .gl-thumb figcaption { color: var(--text-light-sub); }
body.dark .gl-dark .gl-toolkit, body.dark .gl-dark .gl-detail { background: rgba(143,221,224,0.1); }
body.dark .gl-page .gl-dark .gl-toolkit { color: var(--text-light); }
body.dark .gl-dark .gl-detail { border-left-color: #8fdde0; }
body.dark .gl-dark .gl-detail__num { color: #8fdde0 !important; }
body.dark .gl-dark .gl-detail__title, body.dark .gl-dark .gl-detail__body { color: var(--text-light) !important; }

/* The light half scrolls away while the page turns dark, so its blocks must turn dark with the rest instead of
   staying cream and white beside it. The request forms stay white cards on purpose (they are inputs). */
.gl-light, .gl-hero, .gl-band, .gl-band *, .gl-hero__copy *, .gl-light .gl-card, .gl-light .gl-card * { transition: color 0.55s cubic-bezier(0.4,0,0.2,1), background-color 0.55s cubic-bezier(0.4,0,0.2,1), border-color 0.55s cubic-bezier(0.4,0,0.2,1); }
body.dark .gl-light, body.dark .gl-hero { background: transparent; }
body.dark .gl-page .gl-hero__copy h1, body.dark .gl-page .gl-light h2 { color: var(--text-light); }
body.dark .gl-page .gl-hero__copy p, body.dark .gl-page .gl-light > .gl-section p, body.dark .gl-page .gl-band p, body.dark .gl-cover figcaption { color: var(--text-light-sub); }
body.dark .gl-page .gl-eyebrow, body.dark .gl-page .gl-light .gl-card__fix strong { color: #8fdde0; }
body.dark .gl-band { background: rgba(255,255,255,0.04); border-color: var(--border-dark); }
body.dark .gl-page .gl-band__label { color: var(--text-light); }
body.dark .gl-chips li { background: transparent; border-color: var(--border-dark); color: var(--text-light); }
body.dark .gl-light .gl-card { background: var(--card-dark); border-color: var(--border-dark); }
body.dark .gl-page .gl-light .gl-quote { color: var(--text-light) !important; }
body.dark .gl-page .gl-light .gl-card__fix { border-top-color: var(--border-dark); }
body.dark .gl-page .gl-light .gl-src { color: var(--text-light-sub) !important; }

.gl-dark + .gl-final { background: #142223; border-top: 1px solid var(--border-dark); }

/* ── Second form band ── */
.gl-final { background: var(--bg-dark); padding: 64px 0; }
.gl-final__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; }
@media (max-width: 900px) { .gl-final__grid { grid-template-columns: 1fr; gap: 28px; } }
.gl-final__grid > div:first-child h2 { color: var(--text-light); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; margin-bottom: 14px; }
.gl-final__grid > div:first-child p { color: var(--text-light-sub); font-size: 16.5px; max-width: 520px; }
.gl-final__grid > div:first-child a { color: #8fdde0; }

/* ── Cross link ── */
.gl-cross {
  display: flex; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--border-light); border-radius: var(--r-card);
  padding: 18px 22px; max-width: 820px; margin: 0 auto;
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s, border-color 0.25s, background-color 0.55s cubic-bezier(0.4,0,0.2,1);
}
.gl-cross img { flex: none; width: 72px; height: auto; border-radius: 4px; border: 1px solid var(--border-light); transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1); }
.gl-page .gl-cross__label { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); transition: color 0.55s cubic-bezier(0.4,0,0.2,1); }
.gl-page .gl-cross__title { font-family: var(--font-display); font-size: 19px; color: var(--text-dark); margin: 2px 0 4px; transition: color 0.2s; }
.gl-page .gl-cross p { font-size: 14.5px; margin: 0; }
.gl-cross:hover, .gl-cross:focus-visible { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 14px 32px rgba(27,45,46,0.14); }
.gl-cross:hover img, .gl-cross:focus-visible img { transform: rotate(-3deg) scale(1.06); }
.gl-page .gl-cross:hover .gl-cross__title, .gl-page .gl-cross:focus-visible .gl-cross__title { color: var(--teal-dark); }
.gl-cross:active { transform: translateY(-1px); }
body.dark .gl-cross { background: var(--card-dark); border-color: var(--border-dark); }
body.dark .gl-cross img { border-color: var(--border-dark); }
body.dark .gl-page .gl-cross__label { color: #8fdde0; }
body.dark .gl-page .gl-cross__title { color: var(--text-light); }
body.dark .gl-page .gl-cross p { color: var(--text-light-sub); }
body.dark .gl-cross:hover, body.dark .gl-cross:focus-visible { background: rgba(255,255,255,0.11); border-color: #8fdde0; box-shadow: 0 14px 32px rgba(0,0,0,0.38); }
body.dark .gl-page .gl-cross:hover .gl-cross__title, body.dark .gl-page .gl-cross:focus-visible .gl-cross__title { color: #8fdde0; }
@media (max-width: 520px) { .gl-cross { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .gl-dark *, .gl-cross, .gl-cross img { transition: none; }
  .gl-cross:hover, .gl-cross:focus-visible, .gl-cross:active { transform: none; }
  .gl-cross:hover img, .gl-cross:focus-visible img { transform: none; }
}

/* ── Sticky mobile bar ── */
.gl-sticky { display: none; }
/* The first-visit cookie banner owns the bottom of the screen: keep the bar out of its way (and out of the tab order). */
body:has(#cookie-banner.is-visible) .gl-sticky { visibility: hidden; transform: translateY(110%) !important; }
@media (max-width: 919px) {
  .gl-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; gap: 10px; align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border-light);
    box-shadow: 0 -6px 20px rgba(27,45,46,0.10); transform: translateY(110%); transition: transform 0.25s;
  }
  .gl-sticky[data-show="true"] { transform: translateY(0); }
  .gl-sticky a { flex: 1; display: flex; align-items: center; justify-content: center; height: 46px; background: var(--teal-dark); color: #fff !important; font-weight: 600; font-size: 16px; border-radius: 10px; text-decoration: none; }
  .gl-sticky button { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-sub); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; }
  .gl-page { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .gl-sticky, .gl-input, .gl-submit, .gl-faq summary::after { transition: none; } }

/* ── Resources index ── */
.gl-index-hero { padding: 64px 0 24px; }
.gl-index-hero h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.12; margin-bottom: 14px; }
.gl-guidecard { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border: 1px solid var(--border-light); border-radius: var(--r-card); padding: 22px; }
.gl-guidecard img { width: 100%; height: auto; border-radius: 5px; box-shadow: 0 10px 26px rgba(27,45,46,0.16); }
.gl-guidecard h2 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.gl-guidecard p { font-size: 15px; margin-bottom: 14px; }
.gl-guidecard .gl-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; background: var(--teal-dark); color: #fff !important; border-radius: 10px; font-weight: 600; font-size: 15.5px; text-decoration: none; }
.gl-guidecard .gl-btn:hover { background: #006469; }
@media (max-width: 560px) { .gl-guidecard { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; } .gl-guidecard h2 { font-size: 18px; } }
.gl-blogline { margin-top: 28px; font-size: 15.5px; }