/* ============================================================
   /give/<tier> pages: The Uplift Circle, Everyday Heroes, The Anchors,
   The Bridge, Legacy Partners, and the interest panel.
   Figma (More Better master copy, 2026-09-24): 2646:7121, 2722:6802,
   2722:9339, 2738:5094, 2738:4695, panel 2785:8111 / 2788:9455.
   Behaviour ported from MBP's hosted mock-ups (spinehope-uplift-circle,
   spinehope-everyday-heroes). Loaded after theme.css; theme.css is not
   edited, so the overrides below win on specificity or order.
   ============================================================ */

.gt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Hand-drawn ring, local to these pages: the sitewide #sh-wavy filter
   lives in the footer partial another builder is replacing. */
.gt-ring { position: relative; isolation: isolate; }
.gt-ring::after {
  content: ""; position: absolute; inset: -2.5px; border-radius: inherit;
  border: 5px solid var(--gt-ring, var(--neutral-200, #F1EDE5));
  pointer-events: none; filter: url(#gt-wavy-card); z-index: -1;
}
.gt-badge { position: relative; isolation: isolate; }
.gt-badge::after {
  content: ""; position: absolute; inset: -2.5px; border-radius: 4.5px;
  border: 5px solid var(--gt-ring, var(--grass, #A7C434));
  pointer-events: none; filter: url(#gt-wavy-badge); z-index: -1;
}
.gt-badge--sunny { --gt-ring: var(--sunny, #FFD100); background: var(--sunny, #FFD100); }

/* Rough edges matched to the frames (2026-09-24 polish). A ring is placed
   from the padding box, so on a bordered element it must reach past the
   border to show; #gt-rough / #gt-rough-sm are finer and stronger than the
   gt-wavy-* filters, which the Faces cards keep. */
/* 6px outside the border: the frame's card is 568 wide over a 570 box. */
.gt-card.gt-ring::after { filter: url(#gt-rough); inset: -6px; border-width: 7px; border-radius: 30px; }
.gt-badge::after { filter: url(#gt-rough-sm); inset: -3px; border-width: 6px; }
/* The badge ring repeats the badge fill; without this it inherited the
   parent card's --gt-ring and drew a pale frame round the badge. */
.gt-badge.d-badge--grass { --gt-ring: var(--grass, #A7C434); }
/* The hero card's rough edge is its own magnolia fill (frame), not a
   neutral band. */
.gt-card.gt-ring { --gt-ring: var(--magnolia, #FDF9F1); }
/* The strip is a smooth rounded panel in every frame: no rough ring. */
.gt-strip.gt-ring::after { display: none; }
/* The outline is the 3px border itself, roughened, not a second band. */
.gt-call.gt-ring::after, .gt-faq.gt-ring::after { filter: url(#gt-rough-sm); inset: -4px; border-width: 4px; border-radius: 13px; }

.gt-arrow { width: 20px; height: 20px; flex: none; }
.gt-arrow--sm { width: 16px; height: 16px; }

/* ---------- Hero (hero-section: 144 top / 40 bottom / 112 sides) ---------- */
.gt-hero.d-hero {
  flex-direction: row; align-items: center; gap: 144px;
  padding: 144px 112px 40px;
  overflow: visible; position: relative;
}
.gt-hero.d-hero::after {
  content: ""; position: absolute; inset: 0 0 -5px; border-radius: 0 0 37px 37px;
  border: 10px solid var(--carbon, #28201C); border-top: 0; border-left: 0; border-right: 0;
  pointer-events: none; filter: url(#gt-rough);
}
.gt-hero > * { width: auto; }
.gt-hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.gt-hero .d-crumb { gap: 8px; }
.gt-hero-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: 64px; line-height: 1.1; letter-spacing: -.75px;
  color: var(--sunny, #FFD100); margin: 0;
}
.gt-hero-lede {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 28px; line-height: 1.25; color: var(--sunny-100, #FCF3CC); margin: 0;
  /* No lone last word, without re-breaking the lines the frame draws. */
  text-wrap: pretty;
}
.gt-hero-details { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gt-hero-details li { font-size: 18px; line-height: 1.6; color: var(--sunny-50, #FBF7E7); }
.gt-hero-copy--narrow .gt-hero-lede { max-width: 491px; }
.gt-hero-copy--narrow .gt-hero-details { max-width: 518px; }
/* Uplift Circle (2646:7187): the lede breaks after "surgical missions". */
.gt-hero-copy--mid .gt-hero-lede { max-width: 540px; }

/* The giving card ("Uplift Circle Card" in every frame). */
.gt-card {
  flex: 0 0 auto; width: 570px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 64px 44px;
  background: var(--magnolia, #FDF9F1);
  border: 3px solid var(--neutral-200, #F1EDE5);
  border-radius: 24px;
  box-shadow: 0 32px 32px rgba(10,13,18,.14), 0 5px 2.5px rgba(10,13,18,.04);
  --gt-ring: var(--neutral-200, #F1EDE5);
}
.gt-card .d-badge { flex: none; }
.gt-card-commit {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 40px; line-height: 1.15; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0; text-align: center; max-width: 476px;
}
.gt-card-commit--wrap { max-width: 402px; }
.gt-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gt-chips .amt-btn, .gt-chips .amt-static {
  width: 110px; min-width: 110px; height: 110px; padding: 12px;
  border-radius: 16px;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  transition: background .15s ease, border-color .15s ease;
}
.gt-chips .amt-static { width: auto; padding: 12px 32px; cursor: default; }
/* Carbon ring with a 2px offset: Grass 600 is too faint on the magnolia card. */
.gt-chips .amt-btn:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.amt-btn.gt-other {
  width: auto; min-width: 0; height: auto; box-shadow: none; border-radius: 4px;
  background: none; border: 0; padding: 2px 4px; cursor: pointer; line-height: 1.6;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  color: var(--neutral-600, #5C534D); text-decoration: underline; text-underline-offset: 3px;
}
.amt-btn.gt-other.active { background: none; color: var(--carbon, #28201C); }
.amt-btn.gt-other:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; border-radius: 4px; }
.gt-card .custom-amt { max-width: 476px; }

/* Primary card button: carbon, 1px neutral-700 border, Fredoka Medium 20. */
.gt-card-btn, .d-tier-card .give-submit.gt-card-btn {
  width: 476px; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 9999px;
  background: var(--carbon, #28201C);
  border: 1px solid var(--neutral-700, #3D342F);
  color: var(--magnolia, #FDF9F1);
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 20px; line-height: 1.6;
  cursor: pointer;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  transition: background .15s ease;
}
.gt-card-btn:hover { background: var(--neutral-700, #3D342F); }
.gt-card-btn[disabled] { opacity: .7; cursor: default; }
.gt-card-btn:focus-visible, .gt-card-btn2:focus-visible {
  outline: 2px solid var(--carbon, #28201C); outline-offset: 2px;
}
/* Secondary card button (Legacy: "Give from an IRA (QCD)"). */
.gt-card-btn2 {
  width: 100%; max-width: 476px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px;
  background: #fff; border: 1px solid var(--neutral-200, #F1EDE5); color: var(--carbon, #28201C);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
}
.gt-card-btn2:hover { background: var(--magnolia, #FDF9F1); }
.gt-card-fine { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 355px; max-width: 100%; margin: 0; }
.gt-card-fine p { font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); text-align: center; margin: 0; }

/* ---------- What your gift supports (information-section: 80 / 64) ---------- */
.gt-support.d-sec { padding: 80px 64px; gap: 32px; }
.gt-support-head { display: flex; gap: 160px; align-items: flex-end; width: 100%; }
.gt-support-l { flex: 0 0 auto; width: min-content; display: flex; flex-direction: column; gap: 16px; }
.gt-support-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: 64px; line-height: 1.1; letter-spacing: -.75px;
  color: var(--carbon, #28201C); margin: 0; white-space: nowrap;
}
.gt-support-lede {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 28px; line-height: 1.25; color: var(--carbon, #28201C); opacity: .7; margin: 0;
}
.gt-support-lede--wide { width: 741px; }
.gt-support-note { flex: 1 1 0; min-width: 0; font-size: 18px; line-height: 1.6; color: var(--neutral-700, #3D342F); margin: 0; }
/* The heading sits inside the pinned block, so it stays on screen with the
   strip while the strip travels (the strip alone left most of a desktop
   viewport blank). The pin overhangs the section by 64px; the heading does not. */
.gt-pin .gt-support-head { width: calc(100% - 64px); margin-bottom: 32px; }
/* give-tier.js sizes the pin from the block's rounded height. The heading is
   a whole number of pixels plus 0.4 (64px x 1.1), so 0.6px tops the block up
   to a whole pixel and the pin gives it back: everything under the strip
   stays exactly where it was. */
@media (min-width: 1101px) {
  .gt-pin { margin-bottom: -.6px; }
  .gt-pin .gt-support-head { margin-bottom: 32.6px; }
}

/* The strip runs off the right edge of the page, as drawn. */
.gt-pin { position: relative; width: calc(100% + 64px); }
.gt-pin-sticky { position: sticky; top: 120px; }
.gt-strip {
  background: var(--sunny-50, #FBF7E7);
  border: 1px solid var(--sunny-50, #FBF7E7);
  border-radius: 16px 0 0 16px;
  padding: 32px;
  --gt-ring: var(--sunny-50, #FBF7E7);
}
.gt-strip-viewport { overflow: hidden; }
.gt-track { display: flex; align-items: stretch; gap: 80px; width: max-content; will-change: transform; }
.gt-seg {
  flex: 0 0 755px; width: 755px;
  display: flex; gap: 24px; align-items: center; padding: 14px;
  border-radius: 24px; background: transparent;
  transition: background .25s ease;
}
.gt-seg:hover, .gt-seg:focus-within { background: var(--sunny-100, #FCF3CC); }
.gt-seg-photo { flex: 0 0 400px; width: 400px; height: 264px; border-radius: 12px; overflow: hidden; margin: 0; }
.gt-seg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-seg-info { flex: 0 0 293px; width: 293px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gt-seg-amount {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: 48px; line-height: 1.12; letter-spacing: -.5px;
  color: #28201C; margin: 0;
}
/* The longest amount on the site (six figures) is 12px wider than the 293px
   text column at the 48px display size: one step down keeps it inside. */
.gt-seg-amount--long { font-size: 44px; }
.gt-seg-body { font-size: 16px; line-height: 1.6; color: #28201C; opacity: .8; margin: 0; }
.gt-seg-cta.btn { min-height: 0; padding: 8px 20px; font-size: 16px; line-height: 1.6; gap: 8px; }
.gt-seg-cta.btn:focus-visible { box-shadow: 0 0 0 2px var(--sunny-50, #FBF7E7), 0 0 0 4px var(--carbon, #28201C); }
/* Short desktop windows: shrink the photos so the pinned heading and strip
   both fit under the nav. */
@media (min-width: 1101px) and (max-height: 763px) {
  .gt-seg-photo { height: clamp(180px, calc(100vh - 500px), 264px); }
}
.gt-divider { flex: 0 0 6px; width: 6px; align-self: stretch; position: relative; }
.gt-divider img {
  position: absolute; top: 50%; left: 50%;
  width: 292px; height: 6px; max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ---------- Why / benefits (impact-section: 40 / 64, card 48) ---------- */
.gt-why-sec.d-sec { padding: 40px 64px; }
.gt-why-sec .d-why { padding: 48px; gap: 24px; border-radius: 16px; }
.gt-why-sec .d-why-head {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: 48px; line-height: 1.12; letter-spacing: -.5px; color: #28201C;
}
.gt-why-sec .d-steps { gap: 16px; }
.gt-why-sec .d-step { gap: 10px; }
.gt-why-sec .d-step-body { max-width: 296px; }
/* impact-container is 1344 + 2 x 48 wide, so it overhangs the 64px section
   padding and sits 35px from the page edges; step text is 240 wide. */
@media (min-width: 1101px) {
  .gt-why-sec.d-sec { padding-left: 35px; padding-right: 35px; }
  .gt-why-sec .d-step-title, .gt-why-sec .d-step-body { max-width: 240px; }
  /* Figma sets these 240 wide; its Work Sans measures ~2% wider than Chrome's,
     so 236 reproduces the drawn line breaks (Beneficiary / Designations). */
  .gt-why-sec .d-step-title { max-width: 236px; text-wrap: wrap; }
  .gt-why--uplift .d-step:first-child .d-step-body { max-width: 169px; }
  .gt-why--uplift .d-step:last-child .d-step-body { max-width: 296px; }
}
/* Illustrations at their drawn size inside the 142px slot, as in Figma. */
.gt-why-sec .d-why .d-step-art img { width: auto; height: auto; max-width: 142px; max-height: 142px; }
/* Legacy Partners draws its icons under the text. */
.gt-why--icons-below .d-step-art { order: 3; }

/* ---------- Questions before you give (Information Section: 80) ---------- */
.gt-info.d-sec { padding: 80px; }
.gt-info .d-info { gap: 80px; }
.gt-info .d-info-col { flex: 0 0 400px; width: 400px; gap: 32px; }
.gt-info-head { display: flex; flex-direction: column; gap: 16px; color: var(--carbon, #28201C); }
.gt-info-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: 44px; line-height: 1.1; color: var(--carbon, #28201C); margin: 0;
  text-wrap: wrap;
}
.gt-info-intro { color: var(--carbon, #28201C); font-size: 18px; line-height: 1.6; opacity: .7; margin: 0; }

/* Book-a-call card: FAQ column and interest panel share it. */
.gt-call {
  background: #fff; border: 3px solid var(--neutral-200, #F1EDE5); border-radius: 12px;
  padding: 40px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  box-shadow: 0 1px 1.5px rgba(10,13,18,.1), 0 1px 1px rgba(10,13,18,.1);
  --gt-ring: var(--neutral-200, #F1EDE5);
}
.gt-call-avatar { width: 107px; height: 107px; border-radius: 50%; overflow: hidden; flex: none; }
.gt-call-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.gt-call-txt { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gt-call-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: 24px; line-height: 1.25; letter-spacing: -.5px; color: var(--carbon, #28201C); margin: 0;
}
.gt-call-body { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; margin: 0; }
.gt-call-btns { display: flex; gap: 20px; width: 100%; margin-top: 8px; }
.gt-call-btns .btn { flex: 1 1 0; min-width: 0; min-height: 0; padding: 8px 20px; font-size: 16px; line-height: 1.6; gap: 8px; }
.gt-call-btns .btn-dark { background: var(--carbon, #28201C); border-color: var(--neutral-700, #3D342F); color: var(--magnolia, #FDF9F1); }
.gt-call-btns .btn-dark:hover { background: var(--neutral-700, #3D342F); }

/* FAQ accordion: one open at a time (mock: max-height .3s). */
.gt-faqs { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gt-faq {
  background: #fff; border: 3px solid #fff; border-radius: 12px;
  box-shadow: 0 1px 1.5px rgba(10,13,18,.1), 0 1px 1px rgba(10,13,18,.1);
  transition: border-color .2s ease;
  --gt-ring: #fff;
}
/* Closed rows keep the ring in white, so their edge reads hand-drawn too. */
.gt-faq.gt-ring::after { transition: border-color .2s ease; }
.gt-faq.open { border-color: var(--neutral-200, #F1EDE5); --gt-ring: var(--neutral-200, #F1EDE5); }
.gt-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 21px 16px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.6;
  color: var(--carbon, #28201C); border-radius: 12px;
}
.gt-faq-q:hover { background: var(--magnolia, #FDF9F1); }
.gt-faq-q:focus-visible { outline: 2px solid var(--grass-600, #859B2B); outline-offset: 2px; }
.gt-faq-icon {
  flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--sunny, #FFD100);
  display: flex; align-items: center; justify-content: center;
}
.gt-faq-icon img { width: 20px; height: 20px; display: block; }
.gt-faq-icon .gt-minus { display: none; }
.gt-faq.open .gt-faq-icon .gt-minus { display: block; }
.gt-faq.open .gt-faq-icon .gt-plus { display: none; }
.gt-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.gt-faq-a > div { padding: 0 16px 21px; }
.gt-faq-a p { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); opacity: .7; margin: 0; }
.gt-faq-a a { text-decoration: underline; }
.gt-faq.open .gt-faq-q { padding-top: 40px; padding-bottom: 8px; }
.gt-faq.open .gt-faq-a > div { padding-bottom: 40px; }
.gt-faq-q { transition: padding .3s ease, background .15s ease; }
.gt-faq-a > div { transition: padding .3s ease; }

/* ---------- The faces of SpineHope (donation-testimonials: 96 / 80) ---------- */
.gt-faces.d-sec { flex-direction: row; align-items: center; gap: 56px; padding: 96px 80px; }
.gt-faces > * { width: auto; }
.gt-faces-head { flex: 0 0 497px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.gt-faces-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: 48px; line-height: 1.12; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0; max-width: 388px; text-wrap: wrap;
}
.gt-faces-head .d-btn-dark { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; }
.gt-faces-viewport {
  flex: 1 1 auto; min-width: 0; height: 430px; overflow: hidden;
  display: flex; align-items: center;
  margin: -46px -80px -46px 0; /* the carousel runs to the page edge; the 46px
     above and below hold the hover shadow without growing the 530px section */
}
.gt-faces-track { display: flex; gap: 20px; align-items: center; width: max-content; will-change: transform; }
.gt-face {
  position: relative; flex: 0 0 296px; width: 296px; height: 338px;
  border-radius: 16px; background: var(--neutral-200, #F1EDE5);
  color: inherit; display: block;
  transition: background .32s cubic-bezier(.22,1,.36,1);
}
.gt-face-ring {
  position: absolute; inset: -2px; border-radius: 18px;
  border: 4px solid var(--neutral-200, #F1EDE5); pointer-events: none; filter: url(#gt-wavy-card);
  transition: inset .38s cubic-bezier(.22,1,.36,1), border-color .32s cubic-bezier(.22,1,.36,1), border-width .32s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1);
}
.gt-face-inner { display: flex; flex-direction: column; gap: 12px; padding: 12px; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.gt-face-photo {
  flex: 1 1 0; min-height: 0; position: relative; border-radius: 8px; overflow: hidden;
  border: 3px solid transparent; transition: border-color .32s cubic-bezier(.22,1,.36,1);
}
.gt-face-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 5px;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.gt-face-row { display: flex; align-items: center; justify-content: center; text-align: center; flex: none; }
.gt-face-text { display: flex; flex-direction: column; gap: 4px; }
.gt-face-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--neutral-900, #171211); }
.gt-face-place { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: #28201C; }
.gt-face-arrow {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 9999px;
  background: var(--magnolia, #FDF9F1); border: 1px solid var(--neutral-200, #F1EDE5);
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
  opacity: 0; transform: scale(.7) translateX(4px);
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1);
}
.gt-face.is-hover { background: linear-gradient(to bottom, var(--grass-400, #BDD267), var(--grass-600, #859B2B)); }
.gt-face.is-hover .gt-face-ring {
  inset: -2.5px; border-width: 5px; border-color: var(--grass-400, #BDD267);
  box-shadow: 0 84px 50px rgba(48,43,30,.05), 0 37px 37px rgba(48,43,30,.09), 0 9px 20px rgba(48,43,30,.1);
}
.gt-face.is-hover .gt-face-photo { border-color: var(--grass-500, #A7C434); }
.gt-face.is-hover .gt-face-photo img { transform: scale(1.03); }
.gt-face.is-hover .gt-face-row { justify-content: space-between; text-align: left; }
.gt-face.is-hover .gt-face-arrow { display: flex; opacity: 1; transform: scale(1) translateX(0); }
.gt-face:focus-visible { outline: 3px solid var(--carbon, #28201C); outline-offset: 4px; }

/* ---------- Explore ways to give (Cross Link Section: 96 / 44) ---------- */
.gt-givex.d-sec { padding: 96px 44px; gap: 64px; }
.gt-givex .d-givex-title { font-size: 44px; margin: 0 0 12px; }
.gt-givex .d-gcard {
  border: 5px solid var(--neutral-200, #F1EDE5); padding: 19px 11px; background: var(--neutral-200, #F1EDE5);
  position: relative; isolation: isolate;
}
.gt-givex .d-gcard--sunny { background: var(--sunny, #FFD100); border-color: var(--sunny, #FFD100); }
.gt-givex .d-gcard::after {
  content: ""; position: absolute; inset: -5px; border-radius: 10px;
  border: 5px solid var(--neutral-200, #F1EDE5); pointer-events: none; filter: url(#gt-wavy-card); z-index: -1;
}
.gt-givex .d-gcard--sunny::after { border-color: var(--sunny, #FFD100); }
.gt-givex .d-gcard-info h3 { color: var(--carbon, #28201C); }
.gt-givex .d-gcard--sunny .d-gcard-info p { color: var(--carbon, #28201C); }
/* Ring past the 5px border, through the finer filter (frame: rough card edges). */
.gt-givex .d-gcard::after { filter: url(#gt-rough); inset: -9px; border-width: 8px; border-radius: 17px; }
.gt-givex .d-gcard-cta { box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4); }
/* Cross Link Section: 185px photo band, 1.6 line height on the pill. */
.gt-givex .d-gcard-cta { line-height: 1.6; padding: 8px 18px; max-width: 100%; }
@media (min-width: 1101px) { .gt-givex .d-gcard-img { aspect-ratio: auto; height: 185px; } }
/* Four cards share the row here, so on screens wider than the 1512 artboard
   the 185px photo band turned into a letterbox and cut heads at the crown.
   Cap the row at its 1512 width and crop from the top of the photo. */
.gt-givex .d-givex-head, .gt-givex .d-gcards { max-width: 1424px; }
.gt-givex .d-gcard-img img { object-position: 50% 12%; }
.gt-givex .d-gcard-img img[src*="card-anchors"] { object-position: 40% 12% !important; }
.gt-givex .d-gcard:focus-visible { outline: 3px solid var(--carbon, #28201C); outline-offset: 4px; }

/* ---------- Interest panel (Modal 2790:12420 / 2790:12504) ---------- */
body.gt-panel-open { overflow: hidden; }
.gt-panel[hidden], .gt-panel [hidden] { display: none !important; }
.gt-panel {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; justify-content: flex-end; align-items: stretch;
  padding: 16px;
  background: linear-gradient(to bottom, rgba(40,32,28,.2), rgba(40,32,28,.8));
  opacity: 0; transition: opacity .3s ease;
}
.gt-panel.is-open { opacity: 1; }
.gt-panel-box {
  position: relative; width: 560px; max-width: 100%; height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--neutral-300, #E5E1D8); border-radius: 24px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  font-family: 'Work Sans', system-ui, sans-serif; color: var(--carbon, #28201C);
  transform: translateX(calc(100% + 32px));
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.gt-panel.is-open .gt-panel-box { transform: translateX(0); }
.gt-panel-head { display: flex; align-items: center; justify-content: space-between; }
.gt-panel-close {
  width: 48px; height: 48px; border-radius: 9999px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gt-panel-close:hover { background: var(--magnolia, #FDF9F1); }
.gt-panel-close img { width: 20px; height: 20px; }
.gt-panel-title-block { display: flex; flex-direction: column; gap: 12px; }
.gt-panel-title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; color: #28201C; margin: 0; }
.gt-panel-sub { color: var(--carbon, #28201C); font-size: 16px; line-height: 1.6; opacity: .7; margin: 0; }
.gt-panel-form { display: flex; flex-direction: column; gap: 24px; }
.gt-fields { display: flex; flex-direction: column; gap: 16px; }
.gt-field { display: flex; flex-direction: column; gap: 4px; }
.gt-field > span { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--carbon, #28201C); }
.gt-field input, .gt-field textarea {
  width: 100%; background: #fff;
  border: 1px solid var(--neutral-400, #D0C4B8); border-radius: 9999px;
  padding: 16px 20px;
  font-family: 'Work Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.6;
  color: var(--carbon, #28201C);
}
.gt-field textarea { border-radius: 12px; height: 120px; resize: vertical; }
.gt-field input::placeholder, .gt-field textarea::placeholder { color: var(--neutral-600, #5C534D); }
.gt-field input:focus-visible, .gt-field textarea:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 1px; }
.gt-panel-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 9999px; cursor: pointer;
  background: var(--sunny, #FFD100); border: 1px solid var(--sunny-600, #D1A400); color: var(--carbon, #28201C);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
}
.gt-panel-submit:hover { background: var(--sunny-600, #D1A400); }
.gt-panel-submit[disabled] { opacity: .7; cursor: default; }
.gt-panel-submit:focus-visible, .gt-panel-close:focus-visible, .gt-panel-done:focus-visible {
  outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--grass-600, #859B2B);
}
.gt-panel-error { font-size: 14px; line-height: 1.5; color: var(--error-text, #B42318); margin: 0; }
.gt-panel-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.gt-panel-rule { display: block; width: 100%; height: 2px; }
.gt-panel .gt-call { border-radius: 24px; border-color: var(--magnolia, #FDF9F1); gap: 20px; --gt-ring: var(--magnolia, #FDF9F1); }
.gt-panel .gt-call-profile { display: flex; gap: 20px; align-items: flex-start; width: 100%; }
.gt-panel .gt-call-title { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.6; letter-spacing: 0; }
.gt-panel .gt-call-body { font-size: 16px; }
.gt-panel .gt-call-btns { margin-top: 0; }

.gt-panel-done-wrap { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.gt-panel-check {
  width: 80px; height: 80px; border-radius: 9999px; background: var(--sunny, #FFD100);
  display: flex; align-items: center; justify-content: center;
}
.gt-panel-check img { width: 36px; height: 36px; }
.gt-panel-done-text { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.gt-panel-done-text p { color: var(--carbon, #28201C); font-size: 16px; line-height: 1.6; opacity: .7; margin: 0; }
.gt-panel-done {
  width: 166px; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px; border-radius: 9999px; cursor: pointer;
  background: #fff; border: 1px solid var(--neutral-200, #F1EDE5); color: var(--carbon, #28201C);
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
}
.gt-panel-done:hover { background: var(--magnolia, #FDF9F1); }

@media (prefers-reduced-motion: reduce) {
  .gt-panel, .gt-panel-box, .gt-faq-a, .gt-faq-q, .gt-face, .gt-face * { transition: none !important; }
  /* No pinned sideways travel: the strip is a plain horizontal scroller at
     every width, so later cards and their CTAs stay reachable. */
  .gt-pin { height: auto !important; }
  .gt-pin-sticky { position: static; }
  .gt-strip-viewport { overflow-x: auto; scrollbar-width: thin; }
  .gt-track { transform: none !important; will-change: auto; }
}

/* ---------- Narrower desktops: scale the fixed 1512 spacings ---------- */
@media (max-width: 1400px) {
  .gt-hero.d-hero { gap: 64px; padding-left: 64px; padding-right: 64px; }
  .gt-support-head { gap: 64px; }
}

/* ---------- Tablet (existing 1100 breakpoint) ---------- */
@media (max-width: 1100px) {
  .gt-hero.d-hero { flex-direction: column; align-items: stretch; gap: 40px; padding: 168px 40px 48px; }
  .gt-card { width: 100%; align-self: center; max-width: 570px; }
  .gt-hero-copy--narrow .gt-hero-lede, .gt-hero-copy--narrow .gt-hero-details, .gt-hero-copy--mid .gt-hero-lede { max-width: none; }
  .gt-support.d-sec { padding: 72px 40px; }
  .gt-support-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .gt-support-l, .gt-support-lede--wide { width: auto; }
  .gt-support-title { white-space: normal; font-size: clamp(34px, 5.4vw, 56px); }
  .gt-support-lede { font-size: clamp(20px, 2.6vw, 26px); }
  .gt-pin { width: 100%; height: auto !important; }
  .gt-pin .gt-support-head { width: 100%; }
  .gt-pin-sticky { position: static; }
  .gt-strip { border-radius: 16px; padding: 20px; }
  .gt-strip-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .gt-track { transform: none !important; gap: 32px; }
  .gt-seg { scroll-snap-align: start; }
  .gt-why-sec.d-sec { padding: 32px 40px; }
  .gt-info.d-sec { padding: 72px 40px; }
  .gt-info .d-info-col { flex: none; width: 100%; }
  .gt-faces.d-sec { flex-direction: column; align-items: stretch; gap: 32px; padding: 72px 40px; }
  .gt-faces-head { flex: none; }
  .gt-faces-viewport { margin: 0 -40px; width: auto; }
  .gt-givex.d-sec { padding: 72px 40px; }
}

/* ---------- Phones (existing 720 / 640 breakpoints) ---------- */
@media (max-width: 720px) {
  .gt-seg { flex: 0 0 calc(100vw - 88px); width: calc(100vw - 88px); flex-direction: column; align-items: stretch; gap: 16px; }
  .gt-seg-photo { flex: none; width: 100%; height: auto; aspect-ratio: 400 / 264; }
  .gt-seg-info { flex: none; width: 100%; }
  .gt-seg-amount { font-size: 36px; white-space: normal; }
  .gt-divider { display: none; }
}
@media (max-width: 640px) {
  .gt-hero.d-hero { padding: 132px 20px 40px; }
  .gt-hero.d-hero::after { border-radius: 0 0 29px 29px; }
  .gt-hero-title { font-size: 40px; }
  .gt-hero-lede { font-size: 21px; }
  .gt-hero-details li { font-size: 16px; }
  .gt-card { padding: 40px 20px; }
  .gt-card-commit { font-size: 28px; }
  .gt-chips { gap: 8px; }
  .gt-chips .amt-btn { width: 68px; min-width: 68px; height: 68px; font-size: 21px; padding: 6px; }
  .gt-chips .amt-static { height: 80px; font-size: 22px; padding: 8px 20px; }
  .gt-card-btn { font-size: 16px; padding: 12px 16px; }
  .gt-support.d-sec, .gt-info.d-sec, .gt-givex.d-sec { padding: 56px 20px; }
  .gt-why-sec.d-sec { padding: 24px 20px; }
  .gt-why-sec .d-why { padding: 28px 20px; }
  .gt-why-sec .d-why-head { font-size: 32px; }
  .gt-strip { padding: 12px; }
  .gt-seg { flex-basis: calc(100vw - 64px); width: calc(100vw - 64px); padding: 10px; }
  .gt-info-title { font-size: 34px; }
  .gt-faq-q { font-size: 16px; }
  .gt-faq.open .gt-faq-q { padding-top: 24px; }
  .gt-faq.open .gt-faq-a > div { padding-bottom: 24px; }
  .gt-call-btns { flex-direction: column; gap: 12px; }
  .gt-call-btns .btn { flex: none; width: 100%; }
  .gt-faces.d-sec { padding: 56px 20px; }
  .gt-faces-title { font-size: 32px; }
  .gt-faces-viewport { margin: 0 -20px; height: 380px; }
  .gt-face { flex-basis: 248px; width: 248px; height: 320px; }
  .gt-givex .d-givex-title { font-size: 32px; }
  .gt-panel { padding: 8px; }
  .gt-panel-box { padding: 24px 20px; border-radius: 20px; }
  .gt-panel .gt-call-profile { flex-direction: column; }
}

/* ---------- Phones: Figma mobile frames (3941:16447 Uplift, 3953:39244
   Heroes, 3953:39953 Anchors, 3953:40616 Bridge, 3953:41265 Legacy) ----------
   Hero: smooth 32px corners, title H3, lede H7, the giving card, then the
   two benefit lines under the card. Card: smooth 24px corners with a 3px
   Neutral 200 border, 2x2 amount chips 58 tall, full-width button.
   Supports: H3 / H7 / body, cards about 80% of the screen so the next one
   shows. Benefits and "Explore ways to give" are one-row scrollers. */
@media (max-width: 720px) {
  .gt-hero.d-hero { padding: 160px 24px 40px; gap: 12px; border-radius: 0 0 32px 32px; overflow: clip; }
  .gt-hero.d-hero::after { display: none; }
  .gt-hero-copy { display: contents; }
  .gt-hero-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .gt-hero-lede { font-size: 22px; line-height: 1.3; text-wrap: pretty; }
  .gt-hero-details { order: 3; gap: 4px; }
  .gt-hero-details li { font-size: 14px; }

  .gt-card { order: 2; width: 100%; max-width: none; margin: 16px 0; padding: 28px 20px; gap: 16px;
    box-shadow: 0 32px 64px -12px rgba(10,13,18,.14), 0 5px 5px -2.5px rgba(10,13,18,.04); }
  .gt-card.gt-ring::after { display: none; }
  .gt-card .d-badge { white-space: nowrap; margin-inline: -8px; font-size: min(14px, 3.73vw); }
  .gt-card-commit { font-size: clamp(22px, 6.9vw, 28px); line-height: 1.25; letter-spacing: 0; max-width: none; text-wrap: balance; }
  .gt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .gt-chips .amt-btn {
    width: auto; min-width: 0; height: 58px; padding: 8px; border-radius: 12px;
    border-width: 2px; border-color: var(--neutral-200, #F1EDE5);
    font-family: 'Work Sans', system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.6;
    box-shadow: 0 1px 3px rgba(10,13,18,.1), 0 1px 2px -1px rgba(10,13,18,.1);
  }
  .gt-chips .amt-btn.active { border-color: var(--grass, #A7C434); }
  .gt-chips .amt-static {
    grid-column: 1 / -1; width: 100%; min-width: 0; height: 58px; padding: 8px 12px;
    border-radius: 12px; font-size: 28px;
  }
  .gt-card-btn, .d-tier-card .give-submit.gt-card-btn { width: 100%; font-size: 16px; padding: 12px 16px; white-space: nowrap; }
  .gt-card-btn2 { max-width: none; min-height: 44px; white-space: nowrap; }
  .gt-card-fine { width: 100%; }

  .gt-support.d-sec { padding: 56px 24px; }
  .gt-pin { width: calc(100% + 24px); }
  .gt-pin .gt-support-head { width: calc(100% - 24px); gap: 12px; margin-bottom: 28px; }
  .gt-support-l { gap: 12px; }
  .gt-support-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; text-wrap: wrap; }
  .gt-support-lede { font-size: 22px; line-height: 1.3; opacity: 1; }
  .gt-support-note { font-size: 16px; color: var(--neutral-600, #5C534D); }
  .gt-strip { padding: 16px 0 16px 16px; border-radius: 24px 0 0 24px; }
  .gt-strip-viewport { overflow: visible; scroll-snap-type: none; }
  .gt-track {
    width: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-right: 16px; scroll-padding-left: 0;
  }
  .gt-seg {
    flex: 0 0 80vw; width: 80vw; padding: 16px; gap: 0; border-radius: 24px;
    background: var(--magnolia, #FDF9F1); border: 5px solid var(--magnolia, #FDF9F1);
    scroll-snap-align: start;
  }
  .gt-seg:hover, .gt-seg:focus-within { background: var(--magnolia, #FDF9F1); }
  .gt-seg-photo { aspect-ratio: auto; height: 160px; }
  .gt-seg-info { padding: 20px 12px 12px; gap: 8px; }
  .gt-seg-amount { font-size: 28px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
  .gt-seg-cta.btn { width: 100%; white-space: nowrap; }
  .gt-support .sc-dots { width: calc(100% - 24px); }

  .gt-why-sec.d-sec { padding: 40px 20px 56px; }
  .gt-why-sec .d-why { padding: 32px 24px; gap: 36px; border-radius: 16px; overflow: hidden; }
  .gt-why-sec .d-why-head { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; color: var(--grass-900, #2D3113); }
  .gt-why-sec .d-steps {
    flex-wrap: nowrap; align-items: stretch; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    width: auto; align-self: stretch; min-width: 0;
    margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
  }
  .gt-why-sec .d-step {
    flex: 0 0 236px; background: #fff; border-radius: 16px; padding: 16px; gap: 12px;
    scroll-snap-align: start;
  }
  .gt-why-sec .d-step-title { font-size: 18px; }
  .gt-why-sec .d-step-body { max-width: none; }
  /* In a card the illustration leads, on every tier page. */
  .gt-why--icons-below .d-step-art { order: 0; }
  .gt-why-sec .d-why .sc-dots { margin-top: -16px; }

  .gt-info.d-sec { padding: 56px 24px; }
  .gt-info .d-info { gap: 24px; }
  .gt-info .d-info-col { gap: 24px; }
  .gt-info-head { gap: 12px; }
  /* No lone last word: balance where pretty is not supported. */
  .gt-info-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; text-wrap: balance; text-wrap: pretty; }
  .gt-info-intro { font-size: 16px; color: var(--neutral-600, #5C534D); opacity: 1; }
  .gt-call { gap: 20px; border-radius: 24px; }
  .gt-call.gt-ring::after { border-radius: 25px; }
  .gt-call-btns { flex-direction: row; gap: 12px; margin-top: 0; }
  .gt-call-btns .btn { flex: 1 1 0; width: auto; white-space: nowrap; padding: 8px 12px; min-height: 42px; }
  .gt-faqs { gap: 12px; }
  .gt-faq-q { font-size: 20px; min-height: 80px; padding: 8px 16px; }
  .gt-faq.open .gt-faq-q { padding-top: 37px; padding-bottom: 8px; }
  .gt-faq.open .gt-faq-a > div { padding-bottom: 37px; }
  .gt-panel .gt-call-btns .btn { padding: 8px 10px; }

  .gt-faces.d-sec { padding: 56px 24px; }
  .gt-faces-title { font-size: 36px; line-height: 1.2; }
  .gt-faces-viewport { margin: 0 -24px; }

  .gt-givex.d-sec { padding: 56px 24px 72px; gap: 24px; }
  .gt-givex .d-givex-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .gt-givex .d-givex-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 8px; }
  .gt-givex .d-givex-sub { font-size: 16px; }
  .gt-givex .d-btn-lg { width: 100%; justify-content: center; }
  .gt-givex .d-gcards {
    flex-wrap: nowrap; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    width: auto; max-width: none; align-self: stretch;
    margin: -12px -24px; padding: 12px 24px; scroll-padding-inline: 24px;
  }
  .gt-givex .d-gcard { flex: 0 0 275px; scroll-snap-align: start; min-height: 0; }
  .gt-givex .d-gcard-info h3 { font-size: 28px; }
  .gt-givex .d-gcard-info p { font-size: 16px; }
  .gt-givex .d-gcard-cta { white-space: nowrap; }
}
@media (max-width: 350px) {
  /* The narrowest phones: keep the button labels on one line. */
  .gt-card-btn, .d-tier-card .give-submit.gt-card-btn { font-size: 16px; padding: 12px; }
  .gt-card-btn2 { font-size: 15px; padding: 8px 10px; }
  .gt-chips .amt-static { font-size: 24px; }
  .gt-seg-cta.btn { padding: 8px 10px; }
}