/* ============ /home3 - getyourstake.com skin ============
   Tokens read live off getyourstake.com:
   dark #171B26 · ink #212737 · mint #54FF99 · lavender #ABC2FF · purple #CA7CFA
   Display: Anton 400, UPPERCASE, ~1.0 leading, +0.01em tracking
   Body: Poppins · buttons mint, 8px radius, Poppins 14-15/500 */

html:has(body.gys) { overflow-x: clip; }

/* ---- Page transitions ----
   Opacity only, deliberately: a transform/filter on the body would make it the
   containing block for the fixed nav and break the header. */
@media (prefers-reduced-motion: no-preference) {
  .gys { animation: gysPageIn 0.34s ease-out; }
  .gys.gys-leaving { opacity: 0; transition: opacity 0.19s ease-in; }
}

@keyframes gysPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* accessible keyboard focus ring — mint, only for keyboard nav (not mouse clicks) */
.gys a:focus-visible,
.gys button:focus-visible,
.gys input:focus-visible,
.gys textarea:focus-visible,
.gys select:focus-visible,
.gys [tabindex]:focus-visible {
  outline: 2px solid var(--gys-mint);
  outline-offset: 2px;
  border-radius: 4px;
}

.gys {
  /* clip, not hidden: `hidden` turns the body into a scroll container, which
     silently breaks every `position: sticky` descendant. `clip` hides the same
     horizontal overflow without creating one. */
  overflow-x: clip;
  --gys-dark: #171B26;
  --gys-ink: #212737;
  --gys-mint: #54FF99;
  --gys-lav: #ABC2FF;
  --gys-purple: #CA7CFA;
  /* page gutters follow the OpenAI reference: fixed side padding per
     breakpoint, content fills the rest */
  --gys-pagepad: 24px;
  font-family: "Poppins", sans-serif;
  color: var(--gys-ink);
  background: var(--gys-dark);
}

@media (min-width: 768px)  { .gys { --gys-pagepad: 40px; } }
@media (min-width: 1280px) { .gys { --gys-pagepad: 80px; } }
@media (min-width: 1760px) { .gys { --gys-pagepad: 104px; } }

.gys .gys-display,
.gys .gys-h1,
.gys .gys-h2,
.gys .gys-stat-value,
.gys .gys-cta-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ---- Buttons ---- */
.gys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gys-mint);
  color: var(--gys-ink);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  border-radius: 12px;
  padding: 13px 22px;
  transition: opacity 0.15s ease;
}

.gys-btn:hover { opacity: 0.85; }

.gys-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gys-mint);
  color: var(--gys-ink);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  border-radius: 12px;
  padding: 14px 26px;
  transition: opacity 0.15s ease;
}

.gys-btn-dark:hover { opacity: 0.85; }

/* ---- Nav ---- */
.gys-nav .nav-logo svg path { fill: #FFFFFF; }

.gys-nav .gys-btn {
  background: transparent;
  border: 1.25px solid #FFFFFF;
  color: #FFFFFF;
  padding: 11px 20px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gys-nav .gys-btn:hover {
  background: #FFFFFF;
  color: var(--gys-dark);
  opacity: 1;
}

.gys-nav {
  /* overlay the splash: fixed + transparent at the top of the page, solid
     dark once scrolled (script.js toggles .nav-scrolled past 10px) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  /* sits close to the top edge now that the page gutters are tighter */
  padding: 16px var(--gys-pagepad);
  gap: 12px;
  /* reveal is fast (first upward scroll brings it straight back);
     .nav-hidden below keeps the leisurely 0.32s exit for hiding */
  transition: transform 0.18s ease-out, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* hiding keeps today's slower glide; the fast 0.18s above only governs the
   return (the transition in effect AFTER a class change is the one that runs) */
.gys-nav.nav-hidden {
  transition: transform 0.32s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* transparent by default (the header overlays the green splash); no legacy
   .nav-scrolled surface may paint it — only .nav-solid below does */
.gys .nav,
.gys .nav.nav-scrolled,
.gys .nav-overlay.nav-scrolled,
.gys-nav,
.gys-nav.nav-scrolled {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* ---- solid header state ----
   script.js/script5.js add .nav-solid whenever the page's hero/splash is NOT
   under the header: past the hero's bottom edge (IntersectionObserver
   sentinel), or from load on every page without a hero (search, listing,
   favorites, recs). Over ANY hero the header stays transparent — the subpage
   heroes are dark ink, and the default nav state (light logo, white links)
   reads on them. Ink ground + light logo + white links here so the header
   always reads, whatever band or page is behind it.
   !important on purpose: this state outranks the chameleon's and the app
   pages' per-band nav recolors (which carry higher specificity). The mobile
   menu sheet's own !important rules live LATER in this file at equal or
   higher specificity, so the open sheet still wins over these. */
.gys-nav.nav-solid {
  background: rgba(23, 27, 38, 0.94) !important; /* --gys-dark */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 30px rgba(7, 9, 17, 0.22) !important;
}

.gys-nav.nav-solid .nav-link,
.gys-nav.nav-solid .nav-dd-trigger,
.gys-nav.nav-solid .nav-burger { color: #FFFFFF !important; }
.gys-nav.nav-solid .nav-link:hover,
.gys-nav.nav-solid .nav-dd-trigger:hover { color: var(--gys-mint) !important; }

.gys-nav.nav-solid .gys-btn {
  background: transparent;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
.gys-nav.nav-solid .gys-btn:hover {
  background: #FFFFFF !important;
  color: var(--gys-dark) !important;
}

/* real asset swap, not a recolor: the white+mint lockup on the ink ground */
.gys-nav.nav-solid .nav-logo img { opacity: 1 !important; }
.gys-nav.nav-solid .nav-logo .nav-logo-dark,
.gys-nav.nav-solid .nav-logo .nav-logo-ink { opacity: 0 !important; }

/* ---- band-aware solid header ----
   Where the chameleon is live (.cham-on) it already publishes the hex of the
   band under the nav on body[data-cham-navbg] (script.js / script5.js /
   about.html's inline clone — same contract). Over the two light band colors
   the solid surface flips to white with the ink lockup; every other band
   (dark, mint) keeps the ink bar above, and pages without band data never get
   .cham-on, so they stay ink exactly as before. The 1px inset hairline rides
   the box-shadow (not border) so the bar still reads as a surface over a
   white band without shifting layout. :not([data-menu="open"]) keeps the
   mobile sheet's ink header + white logo in charge while the sheet is up —
   these selectors would otherwise outgun the sheet's own !important rules. */
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]),
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 1px 0 rgba(23, 27, 38, 0.08), 0 10px 30px rgba(7, 9, 17, 0.08) !important;
}

.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-link,
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-dd-trigger,
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-burger,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-link,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-dd-trigger,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-burger { color: var(--gys-ink) !important; }
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-link:hover,
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-dd-trigger:hover,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-link:hover,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-dd-trigger:hover { color: #0B5A2E !important; }

.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .gys-btn,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .gys-btn {
  border-color: var(--gys-ink) !important;
  color: var(--gys-ink) !important;
}
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .gys-btn:hover,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .gys-btn:hover {
  background: var(--gys-ink) !important;
  color: var(--gys-mint) !important;
}

/* the same asset swap the transparent-over-light chameleon state uses (the
   dark wordmark), so crossing transparent -> solid over a light band never
   changes the logo at all */
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-logo img,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-logo img { opacity: 0 !important; }
.gys.cham-on[data-cham-navbg="#FFFFFF"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-logo .nav-logo-dark,
.gys.cham-on[data-cham-navbg="#F6F5F1"] .gys-nav.nav-solid:not([data-menu="open"]) .nav-logo .nav-logo-dark { opacity: 1 !important; }

/* while solid on a chameleon page the surface can swap white <-> ink as the
   band under it changes; that swap is quick (0.2s), and the logo/link flips
   ride the same clock so no wrong-logo frame. Hiding keeps its slower glide. */
.gys.cham-on .gys-nav.nav-solid {
  transition: transform 0.18s ease-out, background-color 0.2s ease, box-shadow 0.2s ease;
}
.gys.cham-on .gys-nav.nav-solid.nav-hidden {
  transition: transform 0.32s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.gys.cham-on .gys-nav.nav-solid .nav-logo img { transition: opacity 0.2s ease; }
.gys.cham-on .gys-nav.nav-solid .nav-link,
.gys.cham-on .gys-nav.nav-solid .nav-dd-trigger,
.gys.cham-on .gys-nav.nav-solid .nav-burger { transition: color 0.2s ease; }
.gys.cham-on .gys-nav.nav-solid .gys-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gys.cham-on .gys-nav.nav-solid,
  .gys.cham-on .gys-nav.nav-solid.nav-hidden,
  .gys.cham-on .gys-nav.nav-solid .nav-logo img,
  .gys.cham-on .gys-nav.nav-solid .nav-link,
  .gys.cham-on .gys-nav.nav-solid .nav-dd-trigger,
  .gys.cham-on .gys-nav.nav-solid .nav-burger,
  .gys.cham-on .gys-nav.nav-solid .gys-btn { transition: none; }
}

/* generous rhythm between the three nav actions */
.gys-nav .nav-actions { gap: 32px; }

/* The mobile sheet pairs Login with a Find a home CTA. On desktop that wrapper
   dissolves so Login sits in the flex row exactly as before, and the duplicate
   Find a home button steps aside for the existing nav link. */
.gys-nav .nav-cta { display: contents; }
.gys-nav .nav-cta-find { display: none; }

.gys-nav .nav-dd-login .nav-dd-trigger { gap: 6px; }

/* the search page separates its two headers with a hairline; the nav
   background itself stays transparent */
.gys-search .gys-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* the search app frame runs on a compact 24px gutter so the logo, filter
     bar, and side rail share one grid */
  padding-left: 24px;
  padding-right: 24px;
}

/* ---- Nav text links (Earn Cash Back / Search homes) ---- */
/* plain header links, no button box; underline marks the current page */
.gys-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 11px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.gys-nav .nav-link:hover { color: var(--gys-mint); }

.gys-nav .nav-link.active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

/* ---- Nav dropdown (Earn Cash Back) ---- */
.gys-nav .nav-dd { position: relative; }

.gys-nav .nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  /* caret hugs the label */
  gap: 5px;
  cursor: pointer;
}

/* submenu numbering only exists on the mobile burger rail — the desktop
   popover hides the spans (re-enabled in the ≤1023px block) */
.gys-nav .nav-dd-num { display: none; }

.gys-nav .nav-dd-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #242A3A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 20;
}

.gys-nav .nav-dd:hover .nav-dd-menu,
.gys-nav .nav-dd:focus-within .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gys-nav .nav-dd-menu a {
  padding: 11px 14px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.gys-nav .nav-dd-menu a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

@media (max-width: 640px) {
  /* no padding override here — the nav reads var(--gys-pagepad) at every
     width so the logo and the hero headline always share one left edge */
  .gys-nav .gys-btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .gys-nav .nav-logo svg { width: 120px; height: auto; }
}

/* ---- Hero (exact values from "Home3 Hero - Typographic Pass") ---- */
.gys-hero {
  position: relative;
  overflow: hidden;
  background: var(--gys-dark);
  /* splash fills exactly one screen (with a floor), and the content group —
     headline, sub, CTAs, terms — is one flex child centered vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  max-height: 100vh;
  /* small-viewport units where supported, so mobile browser chrome showing or
     hiding never moves the hero's bottom edge (and the cropped renter with it) */
  height: 100svh;
  max-height: 100svh;
  min-height: 640px;
}

/* renter + halo (V2 frame): 700px wide at right -20, base pinned to the
   bottom of the hero so it always rides the div's bottom-right corner */
.gys-renter {
  position: absolute;
  /* 728px cap holds ≥~1078px, then the vw terms take over — the art and its
     off-canvas bleed both shrink continuously, no extra breakpoints */
  right: max(-150px, -13.9vw);
  bottom: 0;
  width: min(728px, 67.5vw);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ---- Renter halo: concentric rings drawn in CSS, breathing slowly ----
   The rings live behind the cut-out renter so they can animate. They only
   render when the circle-free art is present (.gys-renter-wrap.has-clean);
   with the legacy PNG the halo is already baked in, so we stay hidden. */
.gys-renter-wrap {
  position: absolute;
  /* same fluid schedule as .gys-renter above: locked 728 until ~1078,
     viewport-proportional below */
  right: max(-150px, -13.9vw);
  bottom: 0;
  width: min(728px, 67.5vw);
  pointer-events: none;
  user-select: none;
}

.gys-renter-wrap .gys-renter { position: relative; right: auto; bottom: auto; width: 100%; display: block; }

.gys-halo {
  position: absolute;
  /* centred on the renter's key hand, roughly 46% across / 42% up */
  left: 46%;
  bottom: 18%;
  width: 0;
  height: 0;
  display: none;
}

.gys-renter-wrap.has-clean .gys-halo { display: block; }

.gys-halo span {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform, opacity;
  animation: haloBreathe 7s ease-in-out infinite;
}

/* outermost → innermost: deep teal fading up to a warm cream core */
.gys-halo span:nth-child(1) { width: 760px; height: 760px; background: #1B2B30; animation-delay: 0s;    }
.gys-halo span:nth-child(2) { width: 600px; height: 600px; background: #22454A; animation-delay: 0.45s; }
.gys-halo span:nth-child(3) { width: 452px; height: 452px; background: #3D6257; animation-delay: 0.9s;  }
.gys-halo span:nth-child(4) { width: 310px; height: 310px; background: #7E9C82; animation-delay: 1.35s; }
.gys-halo span:nth-child(5) { width: 176px; height: 176px; background: #F3EEE1; animation-delay: 1.8s;  }

@keyframes haloBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 1;    }
  50%      { transform: translate(-50%, -50%) scale(1.035); opacity: 0.94; }
}

@media (prefers-reduced-motion: reduce) {
  .gys-halo span { animation: none; }
}

.gys-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* symmetric vertical padding — flex centering on .gys-hero does the
     positioning, this is just breathing room at short viewports */
  padding: 40px var(--gys-pagepad);
  max-width: 1280px;
}

.gys-eyebrow-hero {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 18px;
  color: var(--gys-mint);
}

.gys-h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 22px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* optically-justified slab: 176 over 162 shares both edges. Full size locks in
   at 1200px and above; below that both lines track viewport width, and the
   floors (80/70) keep the slab impactful down to 428 (~80vw wide there) */
.gys-l1 {
  font-size: clamp(80px, 14.7vw, 176px);
  line-height: 0.955;
  color: var(--gys-mint);
}

.gys-l2 {
  display: flex;
  font-size: clamp(70px, 13.5vw, 162px);
  line-height: 0.926;
  /* the line may never wrap or stack — the cycle slot absorbs word swaps */
  white-space: nowrap;
  color: #FFFFFF;
}

/* cycling word - tighter cell than before (0.926em), so the fade is now a
   thin 4% sliver at the cell edges: invisible at rest, still softens the roll */
.gys-cycle {
  display: block;
  height: 0.926em;
  /* fixed slot the width of "SPENDING": sized in em so it scales with the
     clamp automatically — every swap lands in the same reserved cell */
  min-width: 3.8em;
  overflow: hidden;
}

.gys-cycle-track {
  display: flex;
  flex-direction: column;
  animation: heroCycle 15.8s cubic-bezier(0.86, 0, 0.14, 1) infinite;
}

.gys-cycle-track > span {
  display: block;
  height: 0.926em;
  line-height: 0.926em;
  white-space: nowrap;
}

.gys-sub {
  margin-top: 30px;
  width: min(485px, 100%);
  /* scales in lockstep with the headline: 22px locks at the same 1200px point,
     16px readability floor from ~875px down */
  font-size: clamp(16px, 1.83vw, 22px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.gys-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
}

.gys-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gys-mint);
  color: var(--gys-ink);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 12px;
  padding: 14px 28px;
  transition: opacity 0.15s ease;
}

.gys-cta-primary:hover { opacity: 0.85; }

.gys-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.25px solid var(--gys-mint);
  color: var(--gys-mint);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  border-radius: 12px;
  padding: 12px 26px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gys-btn-ghost:hover {
  background: var(--gys-mint);
  color: var(--gys-ink);
}

.gys-fine {
  margin-top: 22px;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.45);
}

.gys-fine a {
  color: inherit;
  text-decoration: none;
}

.gys-fine a:hover { text-decoration: underline; }

/* entering M: the snap — the sub widens to a one-liner (the nav collapses to
   the burger at this same width, see the mobile-nav block) */
@media (max-width: 1023px) {
  .gys-sub { width: min(560px, 100%); }
}

/* mobile recomposition of the illustration: near-full-bleed, bottom-cropped
   by the hero's overflow so it sits in the lower third */
@media (max-width: 640px) {
  .gys-renter,
  .gys-renter-wrap { width: 98vw; right: -13vw; bottom: -60px; }
}

/* XS: new composition — the content block anchors ~28% from the top instead
   of centering, leaving the lower third to the cropped renter */
@media (max-width: 599px) {
  .gys-hero { justify-content: flex-start; }
  .gys-hero-inner {
    padding-top: 28vh;
    padding-top: 28svh;
  }
}

/* ---- Find an apartment (search hero) ---- */
.gys-find-hero {
  position: relative;
  /* no overflow clipping here — the open city menu must never be cut off
     (the map bg is inset:0 absolute, so nothing else can bleed anyway) */
  display: flex;
  flex-direction: column;
  /* left-justified, matching the home splash exactly */
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  background: var(--gys-dark);
  padding: 40px var(--gys-pagepad);
  /* full-viewport splash, same treatment as the home hero */
  height: 100vh;
  min-height: 640px;
}

/* faded street-map backdrop: sits behind the headline, never competes with it */
.gys-mapbg {
  position: absolute;
  inset: 0;
  /* successive fades: 0.5 → 0.25 → 0.2 → 0.16 → 0.2 (+25%, still readable behind headline) */
  opacity: 0.2;
  pointer-events: none;
}

.gys-find-hero > *:not(.gys-mapbg) { position: relative; z-index: 1; }

/* the dropdown must sit above its later siblings (e.g. the trust line):
   each hero child is its own stacking context, so the menu's z-index
   can't win from inside — lift the whole select instead */
.gys-find-hero > .city-select { z-index: 2; }

.gys-find-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* type scale mirrors the home splash slab: mint lead line at 176-cap,
   white lines at 162-cap, same leading */
.gys-find-title > span {
  font-size: clamp(52px, 11.25vw, 162px);
  line-height: 0.926em;
}

.gys-find-title > span:first-child {
  font-size: clamp(56px, 12.2vw, 176px);
  line-height: 0.9545em;
}

.gys-find-title .gys-hl {
  font-style: normal;
  color: var(--gys-mint);
}

/* spacing rhythm from the home splash: CTA row +38, fine print +22 */
.gys .gysF-cityselect { margin-top: 38px; }
.gys-find-trust { margin-top: 22px; }

.gys-find-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(680px, 100%);
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 8px 8px 20px;
  margin-top: 44px;
}

.gys-find-search svg { flex-shrink: 0; }

.gys-find-search input {
  flex: 1 1 0px;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: #212737;
}

.gys-find-search input::placeholder { color: #9A9BA0; }

.gys-find-search button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: var(--gys-mint);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.gys-find-search button:hover { opacity: 0.85; }

.gys-find-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 640px) {
  .gys-find-hero { padding: 72px 24px 90px; }
}

/* ---- Best deals this week (from "Best Deals - Card Redesign") ---- */
.gys-deals {
  /* swapped with .gys-stats per request; cards stay #242A3A like the bento's */
  background: var(--gys-dark);
  padding: 96px var(--gys-pagepad) 120px;
}

.gys-deals-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto 32px;
}

.gys-deals-head-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gys-deals-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.06;
  color: #FFFFFF;
}

.gys-deals-sub {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.6);
}

.gys-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.25px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 12px;
  padding: 11px 18px;
  margin-bottom: 4px;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.gys-btn-outline:hover {
  border-color: var(--gys-mint);
  color: var(--gys-mint);
}

.gys-deal-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}

.gys-deal-card {
  display: flex;
  flex-direction: column;
  background: #242A3A;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease;
}

.gys-deal-card:hover { transform: translateY(-3px); }

/* mint deal ribbon caps every card */
.gys-deal-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  /* mint as accent, not a slab: faint mint wash on the card surface,
     mint star + text carry the color */
  background: rgba(84, 255, 153, 0.07);
  border-bottom: 1px solid rgba(84, 255, 153, 0.25);
  padding: 11px 18px;
}

.gys-deal-ribbon svg { flex-shrink: 0; }
.gys-deal-ribbon svg path { fill: var(--gys-mint); }

.gys-deal-ribbon span {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--gys-mint);
}

.gys-deal-photo {
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
}

.gys-deal-body {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  flex-grow: 1;
}

.gys-deal-price {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  color: #FFFFFF;
}

.gys-deal-name {
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 6px;
}

.gys-deal-specs {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

.gys-deal-loc {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .gys-deals { padding: 72px 40px 80px; }
  .gys-deal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gys-deals-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .gys-deal-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Stats band (mint) ---- */
.gys-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* 40% taller than the base 520px band */
  min-height: 728px;
  /* swapped with .gys-deals per request */
  background: var(--gys-mint);
  padding: 80px 40px;
}

.gys-stat-value {
  font-size: clamp(56px, 12vw, 176px);
  line-height: 1;
  color: var(--gys-dark);
}

.gys-stat-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gys-dark);
}

/* ---- What is Stake (white) ---- */
.gys-what {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  background: var(--gys-dark);
  padding: 120px var(--gys-pagepad);
}

.gys-eyebrow {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(33, 39, 55, 0.55);
}

.gys-h2 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.06;
  color: #FFFFFF;
  text-align: center;
}

.gys-body {
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 620px;
}

/* ---- Bento on lavender ---- */
.gys .gys-bento .bento-section {
  width: 100%;
  max-width: 100%;
}

.gys-bento {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--gys-dark);
  padding: 120px 0 40px;
}

.gys-bento-title { margin-bottom: 24px; }

.gys .bento-section {
  background: transparent;
  border-top: none;
  padding-top: 32px;
}

.gys .bento-card { min-width: 0; }
.gys .bento-title { font-family: "Poppins", sans-serif; font-weight: 600; }
.gys .bento-body { font-family: "Poppins", sans-serif; }
.gys .bento-btn { font-family: "Poppins", sans-serif; border-radius: 12px; }

/* dark cards: one step lighter than the section ground (#171B26), matching
   the membership + "Never Points" card surface */
.gys .bento-card {
  background-color: #242A3A;
  border: none;
  box-shadow: none;
}
.gys .bento-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.gys .bento-title { color: #FFFFFF; }
.gys .bento-body { color: rgba(255, 255, 255, 0.6); }
.gys .bento-btn {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  color: #FFFFFF;
}
.gys .bento-btn:hover { background-color: rgba(255, 255, 255, 0.08); }

/* ---- Cold hard cash (white) ---- */
.gys .cash-back {
  background: var(--gys-ink);
  border-top: none;
  /* 35% taller than the base 120px-padded height */
  padding-top: 236px;
  padding-bottom: 236px;
  padding-left: var(--gys-pagepad);
  padding-right: var(--gys-pagepad);
}

.gys .cash-back .card-row { max-width: 1240px; }

.gys .cash-back .card {
  background: #242A3A;
  border-color: rgba(255, 255, 255, 0.18);
}

.gys .cash-back .card-title { color: #FFFFFF; }
.gys .cash-back .card-body { color: rgba(255, 255, 255, 0.6); }

/* unified card-grid metrics for "Never Points" + bento, per OpenAI ref:
   identical page gutters, 24px gap, 12px radius, rows span full width */
.gys .cash-back .card-row,
.gys .bento-grid { max-width: none; }
.gys .card-row,
.gys .bento-grid,
.gys .bento-row { gap: 24px; }
.gys .cash-back .card,
.gys .bento-card { border-radius: 12px; }
.gys .bento-section {
  padding-left: var(--gys-pagepad);
  padding-right: var(--gys-pagepad);
}

.gys .cash-back .section-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 64px;
  line-height: 68px;
  color: #FFFFFF;
}

/* ---- Sticky variant of "Never points": heading pinned, cards stream past ---- */
.gys .gys-stick {
  background: var(--gys-dark);
  padding: 120px var(--gys-pagepad);
}

.gys .gys-stick-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  /* items must STRETCH to the row height — a start-aligned item collapses to
     its content and leaves the sticky child no distance to travel */
  align-items: stretch;
}

/* the column is the full-height track; the inner block is what pins */
.gys .gys-stick-pin {
  position: sticky;
  /* clears the fixed nav */
  top: 132px;
}

.gys .gys-stick-text .section-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 64px;
  line-height: 68px;
  color: #FFFFFF;
  text-align: left;
}

.gys .gys-stick-sub {
  margin-top: 22px;
  max-width: 30ch;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.6);
}

.gys .gys-stick-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* same card treatment as the row version above it */
.gys .gys-stick .card {
  background: #242A3A;
  border: none;
  border-radius: 12px;
  /* tall enough that the pinned heading has real travel to hold against */
  min-height: 340px;
  justify-content: flex-end;
}

.gys .gys-stick .card-title { color: #FFFFFF; }
.gys .gys-stick .card-body { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 900px) {
  .gys .gys-stick { padding: 72px var(--gys-pagepad); }
  .gys .gys-stick-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* pinning a full-width heading on a phone just eats the screen */
  .gys .gys-stick-pin { position: static; }
  .gys .gys-stick-text .section-title { font-size: 44px; line-height: 48px; }
  .gys .gys-stick .card { min-height: 0; }
}

.gys .card-title,
.gys .card-body { font-family: "Poppins", sans-serif; }

/* ---- Become a Member (one question, two paths) ---- */
.gys-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ink ground so its darker cards read intentionally against the bento's
     dark ground + lighter cards */
  background: var(--gys-ink);
  padding: 110px var(--gys-pagepad) 120px;
  gap: 0;
}

.gys-member-title {
  font-size: 64px;
  line-height: 68px;
  color: #FFFFFF;
  text-align: center;
}

.gys-member-sub {
  margin-top: 18px;
  max-width: 720px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.6);
}

.gys-member-cards {
  display: flex;
  gap: 24px;
  align-self: stretch;
  margin-top: 56px;
}

.gys-member-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* borderless, and darker than the section ground (#171B26) so the cards
     read as recessed panels */
  background: #10141F;
  border: none;
  border-radius: 12px;
  padding: 40px;
}

.gys-member-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}

.gys-member-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gys-mi-mint { background: linear-gradient(150deg, #7CFFB0, #2ED573); }
.gys-mi-lav  { background: linear-gradient(150deg, #C3D2FF, #8B9DF8); }

.gys-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 14px;
}

.gys-mb-mint { color: var(--gys-mint); border-color: rgba(84, 255, 153, 0.5); }
.gys-mb-lav  { color: var(--gys-lav); border-color: rgba(171, 194, 255, 0.5); }

.gys-member-card-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #FFFFFF;
}

.gys-member-card-body {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  flex-grow: 1;
}

.gys-member-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.25px solid #FFFFFF;
  border-radius: 10px;
  padding: 12px 22px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #FFFFFF;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gys-member-btn:hover { background: #FFFFFF; color: var(--gys-dark); }

/* ---- Footer F1: quiet columns ---- */
.gys .footer.gys-f1 {
  display: flex;
  flex-direction: column;
  gap: 64px;
  background: #10141F;
  border-top: none;
  padding: 96px var(--gys-pagepad) 48px;
}

.gys-f1 .f1-top {
  display: flex;
  justify-content: space-between;
  gap: 64px;
}

.gys-f1 .f1-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 340px;
  flex-shrink: 0;
}

.gys-f1 .f1-tagline {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.5);
}

.gys-f1 .f1-cols {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: 48px 56px;
}

.gys-f1 .f1-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gys-f1 .f1-col-title {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.35);
}

.gys-f1 .f1-col a {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.15s ease;
}

.gys-f1 .f1-col a:hover { color: #FFFFFF; }
.gys-f1 .f1-col a.f1-app { color: var(--gys-mint); }
.gys-f1 .f1-col a.f1-app:hover { color: #FFFFFF; }

.gys-f1 .f1-legal {
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 48px;
}

.gys-f1 .f1-legal-cols {
  display: flex;
  gap: 48px;
}

.gys-f1 .f1-legal-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gys-f1 .f1-legal p {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.35);
}

.gys-f1 .f1-copy {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.5);
}

/* Footer column tiers — deliberate layouts at every width, never an
   accidental orphan wrap:
   ≥1400        five columns beside the brand block (one row)
   1025–1399    brand full-width above, five columns spread across one row
   641–1024     3-across grid: QUICK LINKS (tallest) takes a full-height
                right slot; FOLLOW US + GET THE APP tuck under the first two
   ≤640         2-across grid, QUICK LINKS spanning the left column */
@media (max-width: 1399px) {
  .gys-f1 .f1-top { flex-direction: column; gap: 48px; }
  .gys-f1 .f1-cols { justify-content: space-between; }
}

@media (max-width: 1024px) {
  .gys-f1 .f1-cols {
    grid-template-columns: repeat(3, max-content);
    grid-template-areas:
      "company operators quick"
      "follow  app       quick";
    gap: 48px;
  }
  .gys-f1 .f1-col:nth-child(1) { grid-area: company; }
  .gys-f1 .f1-col:nth-child(2) { grid-area: operators; }
  .gys-f1 .f1-col:nth-child(3) { grid-area: quick; }
  .gys-f1 .f1-col:nth-child(4) { grid-area: follow; }
  .gys-f1 .f1-col:nth-child(5) { grid-area: app; }
  .gys-f1 .f1-legal-cols { flex-direction: column; }
}

@media (max-width: 640px) {
  .gys-f1 .f1-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "company operators"
      "quick   follow"
      "quick   app";
    gap: 40px 24px;
  }
}

@media (max-width: 900px) {
  .gys-member-cards { flex-direction: column; }
  .gys-member-title { font-size: 44px; line-height: 48px; }
}

/* ---- CTA (purple) ---- */
.gys-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  background: var(--gys-mint);
  padding: 200px 40px;
}

.gys-cta-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.24em; /* a natural word space at this size, not a fixed flex gutter */
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.05;
  color: var(--gys-dark);
}

.gys-cta-title .gys-num { color: var(--gys-dark); }

.gys-cta-sub {
  font-size: 18px;
  line-height: 28px;
  color: rgba(23, 27, 38, 0.75);
  max-width: 520px;
}

/* dark button on the mint ground */
.gys-cta .gys-btn-dark {
  background: var(--gys-dark);
  color: var(--gys-mint);
}

/* ============ Product pages (/home3/learn) ============ */
.gysL-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--gys-dark);
  padding: 110px var(--gys-pagepad) 130px;
}

.gysL-h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(52px, 10.5vw, 150px);
  line-height: 0.97;
  color: #FFFFFF;
}

.gysL-h1 .gys-hl,
.gysL-h1 em {
  font-style: normal;
  color: var(--gys-mint);
}

.gysL-lead {
  margin-top: 32px;
  font-size: 22px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
}

/* mint steps band */
/* steps band runs on the dark system like the rest of the site — mint stays an
   accent (the numerals), never a full neon field */
.gysL-steps {
  background: var(--gys-ink);
  padding: 110px var(--gys-pagepad);
}

.gysL-steps-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 48px;
  line-height: 52px;
  color: #FFFFFF;
}

.gysL-steps-sub {
  margin-top: 10px;
  font-size: 17px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.65);
}

.gysL-steps-row {
  display: flex;
  gap: 20px;
  margin-top: 44px;
}

.gysL-step {
  flex: 1 1 0;
  background: #242A3A;
  border-radius: 12px;
  padding: 28px;
}

.gysL-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(84, 255, 153, 0.12);
  color: var(--gys-mint);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.gysL-step h3 {
  margin-top: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: #FFFFFF;
}

.gysL-step p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.6);
}

/* white why band */
.gysL-why {
  background: #FFFFFF;
  padding: 110px var(--gys-pagepad);
}

.gysL-why-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 48px;
  line-height: 52px;
  color: var(--gys-ink);
}

.gysL-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 36px;
  max-width: 760px;
}

.gysL-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.gysL-dot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gys-mint);
  margin-top: 2px;
}

.gysL-point p {
  font-size: 16px;
  line-height: 25px;
  color: rgba(33, 39, 55, 0.8);
}

.gysL-point strong {
  color: var(--gys-ink);
  font-weight: 600;
}

.gysL-footnote {
  margin-top: 22px;
  font-size: 13px;
  line-height: 19px;
  color: rgba(33, 39, 55, 0.45);
}

/* city dropdown, gys skin (same class names → same behavior script) */
.gys .city-select {
  position: relative;
  width: 320px;
  max-width: 100%;
  margin-top: 36px;
}

.gys .city-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  background: transparent;
  border: 1.25px solid var(--gys-mint);
  border-radius: 12px;
  padding: 12px 18px 12px 22px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  transition: background-color 0.15s ease;
}

.gys .city-select-trigger:hover { background: rgba(84, 255, 153, 0.08); }

.gys .city-select-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gys-mint);
}

.gys .city-select-chevron {
  flex-shrink: 0;
  color: var(--gys-mint);
  transition: transform 0.2s ease;
}

.gys .city-select.open .city-select-chevron { transform: rotate(180deg); }

.gys .city-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #242A3A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.gys .city-select.open .city-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* when the menu would clip at the viewport bottom, it opens upward instead
   (script toggles .drop-up on open based on available space) */
.gys .city-select.drop-up .city-select-menu {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(6px);
}

.gys .city-select.drop-up.open .city-select-menu { transform: translateY(0); }

.gys .city-option {
  padding: 11px 12px;
  border-radius: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.gys .city-option:hover { background: #2E3547; }

.gys .city-select-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1024px) {
  .gysL-hero, .gysL-steps, .gysL-why { padding-left: 40px; padding-right: 40px; }
  .gysL-steps-row { flex-direction: column; }
}

/* ---- Footer: navy instead of black, Poppins ---- */
.gys .footer { background: var(--gys-dark); }
.gys .footer,
.gys .footer a,
.gys .footer p,
.gys .footer span { font-family: "Poppins", sans-serif; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .gys .cash-back .section-title { font-size: 44px; line-height: 48px; }
  /* (no hero-inner padding override — it reads var(--gys-pagepad) everywhere) */
  .gys-rings { display: none; }
}

/* ============ Find page sections (from SmartSearch wireframe, gys skin) ============ */
.gysF-wrap { max-width: 1240px; margin: 0 auto; }
.gysF-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

.gysF-h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.06;
  color: #FFFFFF;
}

.gysF-h2 .gys-hl { font-style: normal; color: var(--gys-mint); }

.gysF-sub {
  margin-top: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 640px;
}

/* expert / locator */
.gysF-expert { background: var(--gys-ink); padding: 110px var(--gys-pagepad); }
.gysF-expert-cta { margin-top: 26px; }
.gysF-expert .gysF-wrap { display: flex; flex-direction: column; align-items: flex-start; }

.gysF-steps { display: flex; gap: 20px; margin-top: 44px; width: 100%; }

.gysF-step {
  flex: 1 1 0px;
  background: #242A3A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 28px;
}

.gysF-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gys-mint);
  color: var(--gys-ink);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.gysF-step h3 {
  margin-top: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: #FFFFFF;
}

.gysF-step p {
  margin-top: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.6);
}

/* 10,000+ apartments - deep green color moment */
.gysF-apts { background: #0F3D2A; padding: 110px var(--gys-pagepad); }
.gysF-apts .gysF-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.gysF-apts .gys-cta-primary { margin-top: 26px; }

/* categories */
.gysF-cats { background: var(--gys-dark); padding: 110px var(--gys-pagepad); }

/* segmented control (UMoveFree-style): one container, active pill slides */
.gysF-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 28px;
  background: #242A3A;
  border-radius: 100px;
  padding: 6px;
}

.gysF-tab {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.gysF-tab.active {
  background: var(--gys-mint);
  color: var(--gys-ink);
  font-weight: 600;
}

/* the panels' display:grid would otherwise beat the UA's [hidden] rule,
   leaving every tab panel visible at once */
.gysF-cats [data-tab-panel][hidden] { display: none !important; }

.gysF-citygrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.gysF-city {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  /* "square" = 1:1 aspect, radius stays on the page system */
  aspect-ratio: 1 / 1;
  background: #242A3A;
  border: none;
  border-radius: 12px;
  padding: 18px 20px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  transition: box-shadow 0.15s ease;
}

.gysF-city:hover { box-shadow: inset 0 0 0 1.5px var(--gys-mint); }

/* real photos from umovefree.com sit under a legibility gradient */
.gysF-city {
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.gysF-zipgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.gysF-zip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242A3A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 26px 0;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.gysF-zip:hover { border-color: var(--gys-mint); color: var(--gys-mint); }

.gysF-city-n {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

/* testimonials */
.gysF-trust { background: var(--gys-ink); padding: 110px var(--gys-pagepad); }

.gysF-tgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
  text-align: left;
}

.gysF-tcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* "square" = 1:1 aspect, radius stays on the page system */
  aspect-ratio: 1 / 1;
  background: #242A3A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 26px;
}

.gysF-stars { color: var(--gys-mint); font-size: 15px; letter-spacing: 3px; }

.gysF-tcard p {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.75);
}

.gysF-tby {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #FFFFFF;
}

.gysF-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(84, 255, 153, 0.16);
  color: var(--gys-mint);
  font-size: 12px;
  font-weight: 700;
}

/* directory */
.gysF-dir { background: var(--gys-dark); padding: 110px var(--gys-pagepad) 120px; }

.gysF-dirgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.gysF-dircol { display: flex; flex-direction: column; gap: 12px; }

.gysF-dirtitle {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
}

.gysF-dircol a {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s ease;
}

.gysF-dircol a:hover { color: var(--gys-mint); }

@media (max-width: 1024px) {
  .gysF-expert, .gysF-apts, .gysF-cats, .gysF-trust, .gysF-dir { padding-left: 40px; padding-right: 40px; }
  .gysF-steps { flex-direction: column; }
  .gysF-citygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gysF-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gysF-dirgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .gysF-citygrid, .gysF-tgrid, .gysF-dirgrid { grid-template-columns: minmax(0, 1fr); }
}

/* find-page city dropdown: ghost styling (1.25px white outline, no fill) */
.gys .gysF-cityselect {
  width: 380px;
  max-width: 100%;
  margin-top: 38px;
}

.gys .gysF-cityselect .city-select-trigger {
  background: transparent;
  border: 1.25px solid #FFFFFF;
  border-radius: 12px;
  padding: 17px 20px 17px 24px;
}

.gys .gysF-cityselect .city-select-trigger:hover { background: rgba(255, 255, 255, 0.08); }

.gys .gysF-cityselect .city-select-label {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
}

.gys .gysF-cityselect .city-select-chevron { color: #FFFFFF; }

.gys .gysF-cityselect .city-select-menu {
  background: #242A3A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.gys .gysF-cityselect .city-option {
  color: #FFFFFF;
  text-align: left;
}

.gys .gysF-cityselect .city-option:hover { background: rgba(255, 255, 255, 0.08); }

/* ---- Neighborhood map section (ported reference frame; cash, not points) ---- */
.gys-nnmap {
  position: relative;
  overflow: hidden;
  background: var(--gys-dark);
  padding: 110px var(--gys-pagepad) 120px;
  min-height: 780px;
  display: flex;
  align-items: stretch;
}

.gys-nnmap .gys-mapbg { opacity: 0.55; }

.gys-nnmap-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.gys-nnmap-title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.0;
  color: #FFFFFF;
  max-width: 620px;
  text-align: left;
}

.gys-nnmap-sub {
  margin-top: 14px;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  max-width: 560px;
}

.gys-nnmap-copy .gys-cta-primary { margin-top: 34px; }

/* activity chips pinned across the map (percent-based so they scale) */
.gys-nnmap-chips { position: absolute; inset: 0; pointer-events: none; }

.gys-chip {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  background: rgba(36, 42, 58, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* connector dot below each chip, like the reference */
.gys-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.gys-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.gys-chip-text { display: flex; flex-direction: column; gap: 2px; }

.gys-chip-text strong {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #FFFFFF;
}

.gys-chip-text em {
  font-style: normal;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  color: var(--gys-mint);
}

/* the rent chip reads brightest, like the reference's highlighted card */
.gys-chip-light { background: rgba(233, 237, 245, 0.95); border-color: rgba(255, 255, 255, 0.4); }
.gys-chip-light .gys-chip-icon { background: rgba(33, 39, 55, 0.08); }
.gys-chip-light .gys-chip-text strong { color: #212737; }
.gys-chip-light .gys-chip-text em { color: #0E7A3C; }

/* chips share the section but must never cover the copy: on smaller screens
   they leave the map and stack under the copy as a simple list */
@media (max-width: 900px) {
  .gys-nnmap { min-height: 0; padding-top: 80px; padding-bottom: 90px; }
  .gys-nnmap-chips {
    position: static;
    pointer-events: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 48px;
  }
  .gys-chip { position: static; }
  .gys-chip::after { display: none; }
}

@media (max-width: 640px) {
  .gys-nnmap { padding-left: 20px; padding-right: 20px; }
  .gys-nnmap-chips { flex-direction: column; align-items: stretch; }
}

/* find page: strict band alternation (no two adjacent sections share a color) */
.gys-find .gysF-expert { background: var(--gys-dark); }
.gys-find .footer { background: var(--gys-ink); }

/* ---- Network: nationwide vs Texas (dot-matrix maps, Bilt-style dark) ----
   Fully static: no animation anywhere in this section (motion-sensitivity). */
.gys-net {
  background: var(--gys-dark);
  padding: 110px var(--gys-pagepad);
}

.gys-net-title {
  font-size: 64px;
  line-height: 68px;
  color: #FFFFFF;
}

.gys-net-sub {
  margin: 14px auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.6);
}

.gys-net-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  margin-top: 44px;
}

.gys-net-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #10141F;
  border-radius: 12px;
  padding: 36px;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.gys-net-card:hover { box-shadow: inset 0 0 0 1.5px var(--gys-mint); }

.gys-net-map {
  position: relative;
  width: 100%;
  margin-bottom: 26px;
}

.gys-net-map svg { display: block; width: 100%; height: auto; }
.gys-net-map-tx svg { max-width: 320px; margin: 0 auto; }

/* floating city pills, like the reference map callouts */
.gys-net-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(36, 42, 58, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  padding: 5px 11px;
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 15px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* badges mirror the membership section's treatment */
.gys-net-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 14px;
}

.gys-nb-mint { color: var(--gys-mint); border-color: rgba(84, 255, 153, 0.5); }
.gys-nb-lav  { color: var(--gys-lav); border-color: rgba(171, 194, 255, 0.5); }

.gys-net-stat {
  margin-top: 14px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 56px;
  line-height: 60px;
  color: #FFFFFF;
}

.gys-net-label {
  margin-top: 8px;
  max-width: 34ch;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1416px) {
  .gys-net-title { font-size: 44px; line-height: 48px; }
}

@media (max-width: 900px) {
  .gys-net { padding: 72px var(--gys-pagepad); }
  .gys-net-grid { grid-template-columns: minmax(0, 1fr); }
  .gys-net-stat { font-size: 44px; line-height: 48px; }
}


/* ---- fixed nav follows the band underneath it ---- */
.gys-nav .nav-logo { position: relative; display: inline-flex; }
.gys-nav .nav-logo img { transition: opacity 0.45s ease; }
.gys-nav .nav-logo .nav-logo-dark {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}


/* ---- text on the page ground flips while the mint band is active ----
   (surfaces — cards, dropdown panels — keep their own dark grounds) */


/* ============ Sticky bento variant ============
   Same cards as the bento band, restacked: copy pinned on the left while
   one full-width card per row scrolls by on the right. */
.gys-stickbento {
  /* column gap steps down as the two-column band narrows: 64 -> 48 -> 40 */
  --sb-gap: 64px;
  display: flex;
  align-items: flex-start;
  gap: var(--sb-gap);
  background: var(--gys-dark);
  padding: 120px var(--gys-pagepad);
}

.gys-stickbento .sb-left {
  position: sticky;
  /* pin at the vertical center of the viewport: 50vh minus half the
     block's own height (three-line title ≈ 285px) */
  top: calc(50vh - 142px);
  /* text rail: 40% share, rendered on the right */
  order: 2;
  flex: 0 0 calc((100% - var(--sb-gap)) * 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.gys-stickbento .sb-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 14px;
  color: #FFFFFF;
}

.gys-stickbento .sb-title {
  color: #FFFFFF;
  text-align: left;
  /* 8vw x 1200px = 96px: full size holds down to exactly 1200, then scales
     fluidly (1024 -> 82px, 900 -> 72px, 768 -> 61px), floor 56px */
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.99;
}

/* "cash back" line holds the signature mint on every chameleon ground */
.gys-stickbento .sb-title-mint { color: var(--gys-mint); }

.gys-stickbento .sb-right {
  order: 1;
  flex: 0 0 calc((100% - var(--sb-gap)) * 0.5);
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* cards hug the right edge of their column so card and text mirror
     each other across the page's center gutter */
  align-items: flex-end;
  /* stretch to the section's full height and keep the card stack
     vertically centered in the column */
  align-self: stretch;
  justify-content: center;
  gap: 28px;
}

.gys-stickbento .bento-card {
  width: 100%;
  /* width cap only — no max-height: the card is a true square via
     aspect-ratio (a height cap here is what caused the ~900px overlaps:
     the box clamped while its content did not) */
  max-width: 430px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
}

/* cards sit on the shared dark ground — same card-well tone as the
   Choice section's cards, not the lighter bento surface */
.gys-stickbento .bento-card { background-color: #10141F; }

/* two-column persists to 900: the gap tightens first so the 430px cards
   and the (short, 3-word) headline both keep their size */
@media (max-width: 1199px) {
  .gys-stickbento { --sb-gap: 48px; }
}
@media (max-width: 1023px) {
  .gys-stickbento { --sb-gap: 40px; }
}

/* 899 and below: stack — headline first (static, centered), then the
   cards, centered at max 540px; full-width under 600 (24px pagepad) */
@media (max-width: 899px) {
  .gys-stickbento { flex-direction: column; align-items: center; gap: 48px; }
  .gys-stickbento .sb-left {
    position: static;
    order: 0;
    flex: none;
    width: 100%;
    align-items: center;
  }
  .gys-stickbento .sb-title { text-align: center; }
  .gys-stickbento .sb-right {
    flex: none;
    width: 100%;
    align-self: auto;
    align-items: center;
  }
  .gys-stickbento .bento-card { max-width: 540px; }
}
@media (max-width: 599px) {
  .gys-stickbento .bento-card { max-width: none; }
}


/* ============ "Become a member" — The Choice (replaces gys-net) ============
   Two equal paths over a faint street lattice, split by an OR chip. */
.gys-choice {
  position: relative;
  overflow: hidden;
  /* deep navy, a full step darker than the #212737 band above it */
  background: #070911;
  padding: 196px var(--gys-pagepad);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gys-choice-streets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gys-choice-streets svg { display: block; width: 100%; height: 100%; }

.gys-choice-title {
  position: relative;
  font-size: 64px;
  line-height: 68px;
  color: #FFFFFF;
  text-align: center;
}

.gys-choice-sub {
  position: relative;
  margin: 14px auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.6);
}

.gys-choice-grid {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-top: 48px;
  width: 100%;
}

.gys-choice-card {
  flex: 1;
  min-width: 0;
  /* Was 372px (30% over the natural 286px content height). That much dead
     space at the card's bottom stayed on screen well after the chameleon had
     already flipped to the mint stats band - the ground tracks the viewport
     midpoint, not whether the previous section is still showing. Trimmed to a
     small breathing margin so the dark cards clear the fold nearer to their
     own band's end. CTAs still pin to the bottom via margin-top: auto. */
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(16, 20, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 34px 38px 38px;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}


.gys-choice-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.gys-choice-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gys-ci-mint { background: rgba(84, 255, 153, 0.16); }
.gys-ci-lav  { background: rgba(171, 194, 255, 0.16); }

.gys-choice-card-title {
  margin-top: 22px;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #FFFFFF;
}

.gys-choice-card-body {
  margin-top: 10px;
  max-width: 46ch;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
}

.gys-choice-btn { margin-top: 24px; }

.gys-choice-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  border: 1.25px solid #FFFFFF;
  border-radius: 12px;
  padding: 13px 22px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #FFFFFF;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gys-choice-card:hover .gys-choice-ghost { background: #FFFFFF; color: var(--gys-dark); }

.gys-choice-or {
  position: absolute;
  left: calc(50% - 36px);
  top: calc(50% - 36px);
  width: 72px;
  height: 72px;
  border-radius: 100px;
  background: #242A3A;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 22px;
  line-height: 26px;
  color: #FFFFFF;
}


@media (max-width: 1416px) {
  .gys-choice-title { font-size: 44px; line-height: 48px; }
}

@media (max-width: 900px) {
  .gys-choice { padding: 72px var(--gys-pagepad); }
  .gys-choice-grid { flex-direction: column; align-items: center; }
  .gys-choice-card { width: 100%; }
  .gys-choice-or { position: static; flex-shrink: 0; }
}

/* sticky "Never points" alternate is hidden for now — the row version above
   carries this content; delete this rule to bring it back */
.gys .gys-stick { display: none; }

/* street lattice composes with the chameleon background: no painted overlay,
   the lines themselves fade out toward the top and bottom edges via mask */
.gys-choice-streets {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}


/* choice cards: equal heights (flex stretch) with CTAs pinned to the same
   baseline at the bottom of each card */
.gys-choice-card-body { margin-bottom: 24px; }
.gys-choice-btn { margin-top: auto; }
.gys-choice-ghost { margin-top: auto; }


.gys .gys-stickbento .bento-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(33, 39, 55, 0.16);
}
.gys .gys-stickbento .bento-title { color: var(--gys-ink); }
.gys .gys-stickbento .bento-body { color: rgba(23, 27, 38, 0.7); }
.gys .gys-stickbento .bento-btn {
  border: 1.25px solid rgba(33, 39, 55, 0.45);
  color: var(--gys-ink);
  background-color: transparent;
}
.gys .gys-stickbento .bento-btn:hover { background-color: rgba(33, 39, 55, 0.08); }



/* ==================== Chameleon scroll ====================
   script.js adds .cham-on to <body> and drives:
     - body background-color (the single animated page ground)
     - data-cham      : theme of the band at viewport middle
     - data-cham-nav  : theme of the band under the fixed nav
   Bands: hero, stickbento (white), cash-back, choice, stats, deals,
   cta (mint). The footer keeps its own solid ground and never flips.
   Without JS, every section keeps its own background. */

.gys.cham-on { transition: background-color 0.7s ease; }

/* participating bands go transparent so the animated ground shows through */
.gys.cham-on .gys-hero,
.gys.cham-on .gys-stickbento,
.gys.cham-on .cash-back,
.gys.cham-on .gys-choice,
.gys.cham-on .gys-stats,
.gys.cham-on .gys-deals,
.gys.cham-on .gysR2-hero,
.gys.cham-on .gysR2-how,
.gys.cham-on .gysR2-why,
.gys.cham-on .gysR2-proof,
.gys.cham-on .gysR2-faq,
.gys.cham-on .gys-cta { background: transparent; }

/* ---- fixed nav reads against the band underneath it ---- */
.gys-nav .nav-logo { position: relative; display: inline-flex; }
.gys-nav .nav-logo img { transition: opacity 0.45s ease; }
.gys-nav .nav-logo .nav-logo-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.gys.cham-on[data-cham-nav="light"] .gys-nav .nav-logo img { opacity: 0; }
.gys.cham-on[data-cham-nav="light"] .gys-nav .nav-logo .nav-logo-dark { opacity: 1; }

.gys.cham-on .gys-nav .nav-link { transition: color 0.45s ease; }
.gys.cham-on[data-cham-nav="light"] .gys-nav .nav-link { color: var(--gys-ink); }
.gys.cham-on[data-cham-nav="light"] .gys-nav .nav-link:hover { color: #0B5A2E; }

.gys.cham-on .gys-nav .gys-btn { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease; }
.gys.cham-on[data-cham-nav="light"] .gys-nav .gys-btn { border-color: var(--gys-ink); color: var(--gys-ink); }
.gys.cham-on[data-cham-nav="light"] .gys-nav .gys-btn:hover { background: var(--gys-ink); color: var(--gys-mint); }

/* ---- on-ground text follows the theme (surfaces keep their own colors) ---- */
/* light stops: ink text */
.gys.cham-on .sb-title,
.gys.cham-on .cash-back .section-title,
.gys.cham-on .gys-deals-title,
.gys.cham-on .gys-deals-sub,
.gys.cham-on .gys-stat-value,
.gys.cham-on .gys-stat-label { transition: color 0.7s ease; }

.gys.cham-on[data-cham="light"] .sb-title,
.gys.cham-on[data-cham="light"] .cash-back .section-title,
.gys.cham-on[data-cham="light"] .gys-deals-title { color: var(--gys-ink); }

.gys.cham-on[data-cham="light"] .gys-deals-sub { color: rgba(23, 27, 38, 0.75); }

/* stats band is mint-native: number and label flip to mint on dark ground */
.gys.cham-on .gys-stat-label { transition: color 0.7s ease; }
.gys.cham-on[data-cham="dark"] .gys-stat-value,
.gys.cham-on[data-cham="dark"] .gys-stat-label { color: var(--gys-mint); }

/* mint CTA text is ink by default; flip to light when the ground is dark */
.gys.cham-on .gys-cta-title,
.gys.cham-on .gys-cta-title .gys-num,
.gys.cham-on .gys-cta-sub { transition: color 0.7s ease; }
.gys.cham-on .gys-cta .gys-btn-dark { transition: background-color 0.7s ease, color 0.7s ease; }

.gys.cham-on[data-cham="dark"] .gys-cta-title,
.gys.cham-on[data-cham="dark"] .gys-cta-title .gys-num { color: #FFFFFF; }
.gys.cham-on[data-cham="dark"] .gys-cta-sub { color: rgba(255, 255, 255, 0.6); }
.gys.cham-on[data-cham="dark"] .gys-cta .gys-btn-dark { background: var(--gys-mint); color: var(--gys-ink); }

@media (prefers-reduced-motion: reduce) {
  .gys.cham-on,
  .gys.cham-on .gys-nav .nav-logo img,
  .gys.cham-on .gys-nav .nav-link,
  .gys.cham-on .gys-nav .gys-btn,
  .gys.cham-on .sb-title,
  .gys.cham-on .cash-back .section-title,
  .gys.cham-on .gys-deals-title,
  .gys.cham-on .gys-deals-sub,
  .gys.cham-on .gys-stat-value,
  .gys.cham-on .gys-stat-label,
  .gys.cham-on .gys-cta-title,
  .gys.cham-on .gys-cta-title .gys-num,
  .gys.cham-on .gys-cta-sub,
  .gys.cham-on .gys-cta .gys-btn-dark { transition: none; }
}

/* hero text rides the chameleon too — the mint headline line holds, the
   white line, subhead, fine print, and ghost button flip to ink on light */
.gys.cham-on .gys-l2,
.gys.cham-on .gys-sub,
.gys.cham-on .gys-fine { transition: color 0.7s ease; }
.gys.cham-on .gys-btn-ghost { transition: border-color 0.7s ease, color 0.7s ease, background-color 0.15s ease; }

.gys.cham-on[data-cham="light"] .gys-l2 { color: var(--gys-ink); }
.gys.cham-on[data-cham="light"] .gys-sub { color: rgba(23, 27, 38, 0.85); }
.gys.cham-on[data-cham="light"] .gys-fine { color: rgba(23, 27, 38, 0.5); }
.gys.cham-on[data-cham="light"] .gys-btn-ghost { border-color: var(--gys-ink); color: var(--gys-ink); }
.gys.cham-on[data-cham="light"] .gys-btn-ghost:hover { background: var(--gys-ink); color: var(--gys-mint); }

@media (prefers-reduced-motion: reduce) {
  .gys.cham-on .gys-l2,
  .gys.cham-on .gys-sub,
  .gys.cham-on .gys-fine,
  .gys.cham-on .gys-btn-ghost { transition: none; }
}

/* ---- sticky bento cards: typography + action from the Paper comp ---- */
.gys .gys-stickbento .sb-cardhead {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}
.gys .gys-stickbento .bento-title { font-size: 28px; line-height: 34px; }
.gys .gys-stickbento .sb-count {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.06em;
  color: rgba(33, 39, 55, 0.35);
}
.gys .gys-stickbento .bento-body {
  font-size: 14px;
  line-height: 22px;
  color: rgba(23, 27, 38, 0.78);
}
.gys .gys-stickbento .sb-action {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.gys .gys-stickbento .sb-action-label {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--gys-ink);
}
.gys .gys-stickbento .sb-action-circle {
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: var(--gys-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.gys .gys-stickbento .bento-card:hover .sb-action-circle { transform: translateX(4px); }

/* kicker follows the theme like the pinned title */
.gys.cham-on .sb-kicker { transition: color 0.7s ease, border-color 0.7s ease; }
.gys.cham-on[data-cham="light"] .sb-kicker {
  color: var(--gys-ink);
  border-color: rgba(33, 39, 55, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .gys.cham-on .sb-kicker { transition: none; }
}

/* Cash Back on Rent card art: single bitmap calendar element.
   height: 100% pins the stage to the art well so the img's max-height
   actually caps it (base .art-stage is flex-shrink: 0 — without the pin
   the image keeps its natural size and rides over the action row) */
.gys .gys-stickbento .sb-art-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 4px;
  height: 100%;
  min-height: 0;
}
.gys .gys-stickbento .sb-art-img {
  max-width: 78%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* square cards at every width: the art zone flexes to fill the square.
   (base .bento-card has flex: 1 1 0 + min-height: 430px, which pins the
   height and defeats aspect-ratio — neutralize both) */
.gys .gys-stickbento .bento-card {
  aspect-ratio: 1 / 1;
  flex: none;
  min-height: 0;
  height: auto;
}
/* title / body / action rows are rigid; the art well is the ONLY flexible
   region — the image shrinks first, text never compresses or overlaps */
.gys .gys-stickbento .sb-cardhead,
.gys .gys-stickbento .bento-body,
.gys .gys-stickbento .sb-action { flex: none; }
.gys .gys-stickbento .bento-art {
  flex: 1;
  /* art min-height guard: below this the card outgrows the square */
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* the base .art-* stages carry fixed widths (320-360px) — keep them on
     the card's centerline and never wider than the well */
  align-items: center;
}
.gys .gys-stickbento .bento-art .art-stage { max-width: 100%; }

/* Choice card CTA: ghost style to match its sibling */
.gys .gys-choice .gys-choice-btn {
  background: transparent;
  border: 1.25px solid #FFFFFF;
  color: #FFFFFF;
}
.gys .gys-choice-card:hover .gys-choice-btn {
  background: #FFFFFF;
  color: var(--gys-dark);
  opacity: 1;
}

/* hover shadow dialed way down for this section's cards */
.gys .gys-stickbento .bento-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }

/* section intro text reveals only when the chameleon reaches its band */
.gys.cham-on .gys-deals-head {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.gys.cham-on .gys-deals.band-active .gys-deals-head { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gys.cham-on .gys-deals-head { opacity: 1; transition: none; }
}

/* ============ /home5 — neon-green splash ============
   The hero flips to the brand mint; every piece of text on the splash
   switches to ink (or white for the second headline line) so the original
   dark-hero contrast relationships are mirrored, not lost. The chameleon
   band for the hero is #54FF99/light in script5.js, so the fixed nav
   flips to its dark-on-light state automatically; the static rules below
   cover first paint and no-JS. */

.gys-home5 .gys-hero { background: #29F17A; }

/* headline: "Cash Back" in white, the cycling second line in brand blue */
.gys-home5 .gys-l1 { color: #FFFFFF; }
.gys-home5 .gys-l2 { color: var(--gys-dark); }

.gys-home5 .gys-sub  { color: rgba(23, 27, 38, 0.88); }
.gys-home5 .gys-fine { color: rgba(23, 27, 38, 0.55); }

/* CTAs invert: primary mint→ink, ghost outlines in ink */
.gys-home5 .gys-cta-primary { background: var(--gys-ink); color: var(--gys-mint); }
.gys-home5 .gys-btn-ghost { border-color: var(--gys-ink); color: var(--gys-ink); }
.gys-home5 .gys-btn-ghost:hover { background: var(--gys-ink); color: var(--gys-mint); }

/* nav over the green splash: ink links, dark logo, ink Login button
   (mirrors the chameleon "light" state so first paint matches) */
.gys-home5 .gys-nav .nav-link { color: var(--gys-ink); }
.gys-home5 .gys-nav .nav-link:hover { color: #0B5A2E; }
.gys-home5 .gys-nav .gys-btn { border-color: var(--gys-ink); color: var(--gys-ink); }
.gys-home5 .gys-nav .gys-btn:hover { background: var(--gys-ink); color: var(--gys-mint); }
.gys-home5 .gys-nav .nav-logo img { opacity: 0; }
.gys-home5 .gys-nav .nav-logo .nav-logo-dark { opacity: 1; }

/* once scrolled past the splash the chameleon repaints the ground; hand
   nav control back to it (it re-flips via [data-cham-nav]) */
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .nav-link { color: #FFFFFF; }
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .nav-link:hover { color: var(--gys-mint); }
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .gys-btn { border-color: #FFFFFF; color: #FFFFFF; }
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .gys-btn:hover { background: #FFFFFF; color: var(--gys-dark); }
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .nav-logo img { opacity: 1; }
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .nav-logo .nav-logo-dark { opacity: 0; }

/* home5 keeps the two-tone headline while the hero band is active: the
   cham "light" flip would ink both lines; line 2 stays blue on the mint */
.gys-home5.cham-on[data-cham="light"] .gys-l2 { color: var(--gys-dark); }

/* the no-background renter art is drawn for light grounds — never dim it */
@media (max-width: 760px) {
  .gys-home5 .gys-renter { opacity: 1; }
}
/* ============ Bright V1 benefit cards ============
   From the Paper frame "Member Benefits — Full Section (Bright V1)":
   every card gets its own saturated brand surface, Anton display titles,
   Poppins 16/26 body, and a text-link action whose arrow rides
   currentColor. Light surfaces carry ink text, dark surfaces white. */

.gys .gys-stickbento .bento-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* 1440/1200 -> 42, 1024 -> 39, 900 -> 36, 768 -> 33, floor 28 at 428 */
  font-size: clamp(28px, 2.2vw + 16px, 42px);
  line-height: 1.1;
}

.gys .gys-stickbento .bento-body {
  /* 16px >= 1140, floor 15px */
  font-size: clamp(15px, 0.35vw + 12px, 16px);
  line-height: 1.55;
  font-weight: 500;
  max-width: 400px;
}

/* action: plain label + arrow (no filled circle), per the V1 card */
.gys .gys-stickbento .sb-action-label { font-size: clamp(15px, 0.5vw + 11px, 17px); }
.gys .gys-stickbento .sb-action-circle {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--gys-ink);
}

/* per-card surfaces (order: rent, leasing, credit, account, paycheck, network) */
.gys .gys-stickbento .sb-right .bento-card { border: none; }

.gys .gys-stickbento .sb-right .bento-card:nth-child(1) { background-color: #53FF99; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(2) { background-color: #0341FA; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(3) { background-color: #EFBB68; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(4) { background-color: #6B2599; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(5) { background-color: #FFC9F5; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(6) { background-color: #E04A26; }

/* dark surfaces (2, 4, 6) flip their text to white */
.gys .gys-stickbento .sb-right .bento-card:nth-child(2) .bento-title,
.gys .gys-stickbento .sb-right .bento-card:nth-child(4) .bento-title,
.gys .gys-stickbento .sb-right .bento-card:nth-child(6) .bento-title { color: #FFFFFF; }

.gys .gys-stickbento .sb-right .bento-card:nth-child(2) .bento-body,
.gys .gys-stickbento .sb-right .bento-card:nth-child(4) .bento-body,
.gys .gys-stickbento .sb-right .bento-card:nth-child(6) .bento-body { color: rgba(255, 255, 255, 0.8); }

.gys .gys-stickbento .sb-right .bento-card:nth-child(2) .sb-action-label,
.gys .gys-stickbento .sb-right .bento-card:nth-child(4) .sb-action-label,
.gys .gys-stickbento .sb-right .bento-card:nth-child(6) .sb-action-label { color: #FFFFFF; }

.gys .gys-stickbento .sb-right .bento-card:nth-child(2) .sb-action-circle,
.gys .gys-stickbento .sb-right .bento-card:nth-child(4) .sb-action-circle,
.gys .gys-stickbento .sb-right .bento-card:nth-child(6) .sb-action-circle { color: #FFFFFF; }

/* light surfaces keep ink body at 80% like the comp */
.gys .gys-stickbento .sb-right .bento-card:nth-child(1) .bento-body,
.gys .gys-stickbento .sb-right .bento-card:nth-child(3) .bento-body,
.gys .gys-stickbento .sb-right .bento-card:nth-child(5) .bento-body { color: rgba(33, 39, 55, 0.8); }

/* Neighborhood Network map: the fixed 330x260 art can't shrink inside the
   square card, so it rides up over the body copy. Scale it to fit and give
   back the freed layout height (transforms don't affect flow). */
.gys .gys-stickbento .art-map { min-height: 0; height: auto; }
.gys .gys-stickbento .art-map .map-inner {
  transform: scale(0.66);
  margin: -44px auto;
}

/* PNG art sizing per illustration proportions */
.gys .gys-stickbento .sb-right .bento-card:nth-child(2) .sb-art-img { max-width: 52%; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(3) .sb-art-img { max-width: 72%; }
.gys .gys-stickbento .sb-right .bento-card:nth-child(5) .sb-art-img { max-width: 72%; }

/* stacked widths (<=899): card text centers with the centered headline —
   title, body, and the "Learn more" action all sit on the card's axis */
@media (max-width: 899px) {
  .gys .gys-stickbento .sb-cardhead { justify-content: center; }
  .gys .gys-stickbento .bento-title { text-align: center; }
  .gys .gys-stickbento .bento-body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .gys .gys-stickbento .sb-action { align-self: center; }
}

/* home5: hide the "Not points. Cold, hard cash." band */
.gys-home5 .cash-back { display: none; }

/* home5's closing CTA runs dark-blue, not the shared mint — scoped so it
   doesn't touch cashbackonrent2's (still-mint) closing CTA, which reuses
   the same .gys-cta class */
.gys-home5 .gys-cta { background: var(--gys-dark); }
.gys-home5 .gys-cta-title,
.gys-home5 .gys-cta-title .gys-num { color: var(--gys-mint); }
.gys-home5 .gys-cta-sub { color: rgba(255, 255, 255, 0.75); }
.gys-home5 .gys-cta .gys-btn-dark { background: #FFFFFF; color: var(--gys-dark); }
/* the chameleon's generic dark-band rules (data-cham="dark" -> white text)
   would otherwise win here now that this band is dark-themed too - match
   their specificity and rely on source order (this block comes later) */
.gys-home5.cham-on[data-cham="dark"] .gys-cta-title,
.gys-home5.cham-on[data-cham="dark"] .gys-cta-title .gys-num { color: var(--gys-mint); }
.gys-home5.cham-on[data-cham="dark"] .gys-cta-sub { color: rgba(255, 255, 255, 0.75); }
.gys-home5.cham-on[data-cham="dark"] .gys-cta .gys-btn-dark { background: var(--gys-mint); color: var(--gys-dark); }

/* ============ Cash Back on Rent v2 (/learn/cashbackonrent2.html) ============
   Structure borrowed from the cash.app/bank/cash-app-green layout — dark splash
   hero, then light bands the whole way down until the dark footer. Stake skin
   throughout: Anton display, Poppins body, mint accent. */

/* hero: dark splash, copy left / card art right.
   Product-splash template (approved Paper "Product Splash" spec) — every one
   of the original complaints is solved by a responsiveness RULE, not a px:
   1. "Text too big for the word count — 1-2 goofy words per line"
      → headline runs clamp(52px, 6.7vw, 96px)/1.0 in row layouts (96px cap
        in a ~720px copy column = 2-4 words per line; the old 150px home-slogan
        cap gave 1-2). Each clause is its own <span> line, never a mid-phrase
        wrap. Stacked <900 uses the steeper clamp(44px, 8vw, 68px).
   2. "Splash runs ~120vh, subtext below the fold"
      → height: 100svh (vh fallback) + min-height 560px replaces the old
        min-height:100vh stacked on 110/130px section padding; headline +
        lead + CTA + art all live inside one viewport at every width.
   3. "Image huge / uncentered / floating at ~1090"
      → art width clamp(220px, 24vw, 346px) (never >25% of the viewport),
        max-height 52svh, flex-centered in the zone right of the copy and
        vertically centered against the copy block (~58/42 split).
   4. "Gutters don't line up at 879 / mobile"
      → hero padding-inline is var(--gys-pagepad) — the SAME var the fixed
        nav reads — at every width (this block outranks the legacy ≤1024
        40px override on .gysL-hero). Logo, headline, lead and CTA share one
        left edge.
   5. "Mobile composition floaty"
      → stacked <900 the art corner-anchors into the hero's bottom-right,
        bleeding off the right + bottom edges (overflow hidden crops it) at
        opacity 0.15 — the hand-tuned composition from the Paper 768/428
        v2-corner frames (768: 430px art shifted +15%w/+19.5%h; 428: 330px
        art shifted +21%w/+23%h). Copy stays top-anchored under the nav so
        the CTA never sinks on short screens.
   6. Transparent header over the splash → unchanged (.gys-nav overlay +
      .nav-solid sentinel in script.js). */
.gysR2-hero {
  position: relative;
  overflow: hidden;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 40px;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  box-sizing: border-box;
  /* top = fixed-nav clearance; sides = the one site gutter; bottom = breathing
     room that scales with the viewport, per the acceptance board */
  padding: 92px var(--gys-pagepad) clamp(36px, 5vh, 64px);
}
.gysR2-hero-copy {
  /* ~58% of the content row at 1440 (720px), fluid below — the image zone
     takes the rest, so the two can never overlap (gap: 40px above) */
  flex: 0 0 auto;
  width: min(720px, 58%);
  max-width: none;
}
.gysR2-hero .gysL-h1 {
  font-size: clamp(52px, 6.7vw, 96px);
  line-height: 1;
}
.gysR2-hero .gysL-lead {
  margin-top: 24px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 28em;
}
.gysR2-hero-cta { margin-top: 32px; }
.gysR2-hero-art {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gysR2-hero-art img {
  width: clamp(220px, 24vw, 346px);
  max-height: 52svh;
  height: auto;
  display: block;
}

@media (max-width: 899px) {
  /* stack: copy top-anchored under the nav; art corner-anchored bottom-right,
     edge-cropped + dimmed to 0.15 (values hand-tuned in the Paper 768/428
     v2-corner frames) so it reads as atmosphere behind the copy */
  .gysR2-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    /* copy block centers in the viewport-height section (the corner art is
       absolute atmosphere, so it doesn't affect centering) */
    justify-content: center;
    text-align: left;
    padding-top: 104px;
    padding-bottom: 44px;
  }
  .gysR2-hero-copy { width: 100%; }
  .gysR2-hero .gysL-h1 { font-size: clamp(44px, 8vw, 68px); }
  .gysR2-hero .gysL-lead { margin-top: 18px; font-size: 16px; line-height: 25px; }
  .gysR2-hero-art {
    position: absolute;
    right: 0;
    bottom: 0;
    flex: none;
    margin: 0;
    opacity: 0.15;
    transform: translate(15%, 19.5%);
    pointer-events: none;
  }
  .gysR2-hero-art img {
    width: clamp(330px, 56vw, 430px);
    max-height: none;
  }
  .gysR2-hero-copy { position: relative; z-index: 1; }
}

@media (max-width: 599px) {
  .gysR2-hero { padding-top: 84px; padding-bottom: 36px; }
  .gysR2-hero .gysL-lead { margin-top: 16px; }
  /* 428-frame offsets: the art hangs a little deeper off the corner */
  .gysR2-hero-art { transform: translate(21%, 23%); }
}

/* light "how it works": three mint tiles with captions (Cash App squares) */
.gysR2-how {
  background: #FFFFFF;
  padding: 110px var(--gys-pagepad);
}
.gysR2-h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  color: var(--gys-ink);
}
.gysR2-how-row {
  display: flex;
  gap: 24px;
  margin-top: 52px;
}
.gysR2-how-item { flex: 1 1 0; min-width: 0; }
.gysR2-how-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.1 / 1;
  background: #53FF99;
  border-radius: 20px;
}
.gysR2-how-tile .num {
  font-family: "Anton", sans-serif;
  font-size: clamp(96px, 10vw, 160px);
  line-height: 1;
  color: var(--gys-ink);
}
.gysR2-how-item h3 {
  margin-top: 22px;
  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  color: var(--gys-ink);
}
.gysR2-how-item p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 24px;
  color: rgba(33, 39, 55, 0.65);
}

/* why band: statement lead + benefits card (Cash App "Get more" card) */
.gysR2-why {
  background: #F6F5F1;
  padding: 110px var(--gys-pagepad);
}
.gysR2-why-lead {
  margin-top: 26px;
  max-width: 780px;
  font-size: 21px;
  line-height: 32px;
  font-weight: 500;
  color: rgba(33, 39, 55, 0.85);
}
.gysR2-why-lead strong { color: var(--gys-ink); font-weight: 600; }
/* the perks sit inside their own white card. Because that surface is solid
   regardless of chameleon state, the perk text never needs a dark-ground flip. */
.gysR2-why-card {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 48px;
  padding: 48px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
}
/* four-perk pages (Credit Builder 2, Express Paycheck 2) get a clean 2x2
   instead of orphaning the 4th card onto its own row in a 3-col grid */
.gysR2-why-card--quad { grid-template-columns: repeat(2, 1fr); }
.gysR2-perk { display: flex; flex-direction: column; gap: 12px; }
/* bare Font Awesome glyph, no chip */
.gysR2-perk-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
  font-size: 26px;
  line-height: 1;
  color: #0B5A2E;
}
.gysR2-perk h3 {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--gys-ink);
}
.gysR2-perk p {
  font-size: 15px;
  line-height: 23px;
  color: rgba(33, 39, 55, 0.65);
}

/* social-proof counter. Was a dark band; now light, so .gysR2-why -> proof ->
   .gysR2-faq read as one continuous stone ground with no dark interruption.
   Mint is illegible at this size on a light ground, so the number takes the
   site's dark green (the same substitute used across the light app pages). */
.gysR2-proof {
  background: #F6F5F1;
  padding: 130px var(--gys-pagepad);
  text-align: center;
}
.gysR2-proof-num {
  display: flex;
  justify-content: center;
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 1.02;
  color: #29F17A;
}
.gysR2-proof-label {
  margin-top: 18px;
  font-size: 19px;
  line-height: 28px;
  color: var(--gys-ink);
}

/* FAQs: Cash App "Common questions" rows — hairlines + plus toggles */
.gysR2-faq {
  background: #F6F5F1;
  padding: 110px var(--gys-pagepad) 130px;
}
.gysR2-faq-list { margin-top: 36px; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.gysR2-faq details { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.gysR2-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  cursor: pointer;
  list-style: none;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: rgba(33, 39, 55, 0.75);
  transition: color 0.15s ease;
}
.gysR2-faq summary::-webkit-details-marker { display: none; }
.gysR2-faq summary:hover { color: var(--gys-ink); }
.gysR2-faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--gys-ink);
  transition: transform 0.2s ease;
}
.gysR2-faq details[open] summary::after { transform: rotate(45deg); }
.gysR2-faq details p {
  padding: 0 4px 26px;
  max-width: 820px;
  font-size: 16px;
  line-height: 25px;
  color: rgba(33, 39, 55, 0.65);
}

/* closing CTA reuses the mint .gys-cta band; footnote rides at its foot */
.gysR2-footnote {
  margin-top: 40px;
  max-width: 640px;
  font-size: 12.5px;
  line-height: 19px;
  color: rgba(23, 27, 38, 0.55);
}

@media (max-width: 900px) {
  .gysR2-how-row { flex-direction: column; }
  .gysR2-how-tile { aspect-ratio: auto; padding: 48px 0; }
  .gysR2-why-card { grid-template-columns: 1fr; gap: 36px; }
  .gysR2-why-card--quad { grid-template-columns: 1fr; }
}


/* ============ v2 product pages: chameleon-aware light-band text ============
   The chameleon picks ONE ground color per scroll position from whichever
   band owns the viewport MIDPOINT (script.js, bandAt(innerHeight * 0.5)).
   So a light band's content can be on screen — peeking in at the bottom or
   still hanging at the top — while a dark band (.gysR2-hero, .gysR2-proof)
   still owns the middle and therefore the ground. Anything hardcoded to
   var(--gys-ink) goes dark-on-dark and disappears (reported on the "FAQS"
   heading right below the 600,000 proof band).

   Same pattern as the homepage's .sb-title flip above: transition the color
   always, then invert it under [data-cham="dark"]. .gysR2-why-card keeps its
   own solid white surface, so its perk text is always safe and is deliberately
   left out of these flips. */

.gys.cham-on .gysR2-h2,
.gys.cham-on .gysR2-how-item h3,
.gys.cham-on .gysR2-how-item p,
.gys.cham-on .gysR2-why-lead,
.gys.cham-on .gysR2-why-lead strong,
.gys.cham-on .gysR2-faq-list summary,
.gys.cham-on .gysR2-faq-list summary::after,
.gys.cham-on .gysR2-faq-list details p { transition: color 0.7s ease; }

.gys.cham-on .gysR2-faq-list,
.gys.cham-on .gysR2-faq-list details { transition: border-color 0.7s ease; }

.gys.cham-on[data-cham="dark"] .gysR2-h2,
.gys.cham-on[data-cham="dark"] .gysR2-how-item h3 { color: #FFFFFF; }
.gys.cham-on[data-cham="dark"] .gysR2-how-item p { color: rgba(255, 255, 255, 0.65); }
.gys.cham-on[data-cham="dark"] .gysR2-why-lead { color: rgba(255, 255, 255, 0.85); }
.gys.cham-on[data-cham="dark"] .gysR2-why-lead strong { color: #FFFFFF; }

.gys.cham-on[data-cham="dark"] .gysR2-faq-list summary { color: rgba(255, 255, 255, 0.75); }
.gys.cham-on[data-cham="dark"] .gysR2-faq-list summary:hover { color: #FFFFFF; }
.gys.cham-on[data-cham="dark"] .gysR2-faq-list summary::after { color: #FFFFFF; }
.gys.cham-on[data-cham="dark"] .gysR2-faq-list details p { color: rgba(255, 255, 255, 0.65); }

/* a dark hairline is as invisible on a dark ground as dark text is */
.gys.cham-on[data-cham="dark"] .gysR2-faq-list { border-top-color: rgba(255, 255, 255, 0.15); }
.gys.cham-on[data-cham="dark"] .gysR2-faq details { border-bottom-color: rgba(255, 255, 255, 0.15); }

@media (prefers-reduced-motion: reduce) {
  .gys.cham-on .gysR2-h2,
  .gys.cham-on .gysR2-how-item h3,
  .gys.cham-on .gysR2-how-item p,
  .gys.cham-on .gysR2-why-lead,
  .gys.cham-on .gysR2-perk h3,
  .gys.cham-on .gysR2-perk p,
  .gys.cham-on .gysR2-perk-icon,
  .gys.cham-on .gysR2-faq-list summary,
  .gys.cham-on .gysR2-faq-list details p { transition: none; }
}


/* ============ v2 product pages: "Explore more" product grid ============
   Three square product tiles + captions, borrowed from the homepage bento's
   art/colors/copy. It renders INSIDE the <section class="gysR2-faq"> element
   on purpose: the chameleon's BANDS list resolves one element per selector
   (document.querySelector), so a sibling <section> would be an unregistered
   band and the ground would jump. Nested here it shares the FAQ band's rect
   and its light (#F6F5F1) ground, and its text uses the flips above. */

.gysR2-more { margin-top: 110px; }
.gysR2-more-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gysR2-more-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.gysR2-more-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gysR2-more-card:hover .gysR2-more-art {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(23, 27, 38, 0.18);
}
.gysR2-more-art img {
  width: 68%;
  max-height: 78%;
  height: auto;
  object-fit: contain;
  display: block;
}
.gysR2-more-art svg { width: 100%; height: 100%; display: block; }

/* homepage bento product colors */
.gysR2-more-art--rent { background: #53FF99; }
.gysR2-more-art--lease { background: #0341FA; }
.gysR2-more-art--credit { background: #EFBB68; }
.gysR2-more-art--bank { background: #6B2599; }
.gysR2-more-art--pay { background: #FFC9F5; }
.gysR2-more-art--network { background: #E04A26; }

.gysR2-more-card h3 {
  margin-top: 22px;
  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  color: var(--gys-ink);
  transition: color 0.7s ease;
}
.gysR2-more-card p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 24px;
  color: rgba(33, 39, 55, 0.65);
  transition: color 0.7s ease;
}
/* pushed to the card's foot so all three "Learn more" rows share a baseline
   even when the descriptions wrap to different line counts */
.gysR2-more-action {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--gys-ink);
  transition: color 0.7s ease, gap 0.2s ease;
}
.gysR2-more-card:hover .gysR2-more-action { gap: 12px; }

/* same chameleon flip as the rest of the light-band text */
.gys.cham-on[data-cham="dark"] .gysR2-more-card h3 { color: #FFFFFF; }
.gys.cham-on[data-cham="dark"] .gysR2-more-card p { color: rgba(255, 255, 255, 0.65); }
.gys.cham-on[data-cham="dark"] .gysR2-more-action { color: var(--gys-mint); }

@media (max-width: 900px) {
  .gysR2-more { margin-top: 80px; }
  .gysR2-more-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* ==========================================================================
   Mobile nav (hamburger)
   The desktop row is four flex siblings in .nav-actions. Below 1024px that row
   goes out of flow and becomes a panel hanging off the bottom of the sticky
   header, and the burger takes its place. Because .nav uses
   justify-content: space-between, exactly one of {burger, actions} is ever in
   flow at a time - so the header stays a clean two-child logo|control layout
   at every width.
   ========================================================================== */

.gys-nav .nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* optical: align the bars with the page gutter */
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #FFFFFF;
}

.gys-nav .nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.24s ease, opacity 0.18s ease;
}

/* burger -> X */
.gys-nav[data-menu="open"] .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gys-nav[data-menu="open"] .nav-burger span:nth-child(2) { opacity: 0; }
.gys-nav[data-menu="open"] .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the burger sits on the transparent header, so it follows the chameleon the
   same way .nav-link does */
.gys.cham-on .gys-nav .nav-burger { transition: color 0.45s ease; }
.gys.cham-on[data-cham-nav="light"] .gys-nav .nav-burger { color: var(--gys-ink); }
.gys-home5 .gys-nav .nav-burger { color: var(--gys-ink); }
.gys-home5.cham-on[data-cham-nav="dark"] .gys-nav .nav-burger { color: #FFFFFF; }

/* The sheet's stat moment is injected by the shared script (the header markup
   is duplicated across every static page, so the extra node lives in JS).
   It only exists as a mobile-sheet flourish - never in the desktop nav row. */
.gys-nav .nav-sheet-stat { display: none; }

@media (max-width: 1023px) {
  .gys-nav .nav-burger { display: inline-flex; }

  /* the panel is a full-bleed sheet: it covers the viewport edge to edge and
     runs under the header itself, so the logo and the X sit on the dark
     surface rather than on whatever band the page happened to scroll to */
  .gys-nav .nav-actions {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* clears the header row above (16px pad + 23px logo + 16px pad + 44px nav
       clearance from the approved frame), keeps the CTAs off the home
       indicator. Horizontal gutter follows --gys-pagepad (24px at mobile, not
       the frame's 20px) so the type column shares the header logo's left edge
       - the site-wide alignment rule. */
    padding: 100px var(--gys-pagepad) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* always dark regardless of chameleon state - matches .nav-dd-menu, which
       is already dark on every page including the light app pages */
    background: #171B26;
    opacity: 0;
    visibility: hidden;
    /* below the logo/burger, which the header keeps on top (see below) */
    z-index: 1;
  }

  /* The fade is armed only once the burger has actually been used
     (.nav-menu-ready, set by the script and cleared on crossing back to the
     desktop layout). With a transition always on, dragging the window across
     the 1023px breakpoint animated the sheet from its desktop opacity to 0 —
     a full-screen dark flash the user never asked for. */
  .gys-nav.nav-menu-ready .nav-actions {
    transition: opacity 0.22s ease, visibility 0.22s;
  }

  .gys-nav[data-menu="open"] .nav-actions {
    opacity: 1;
    visibility: visible;
  }

  /* the header's own two children stay above the sheet */
  .gys-nav .nav-logo,
  .gys-nav .nav-burger { position: relative; z-index: 2; }

  /* on the dark sheet the logo is always the white + mint lockup, whatever the
     chameleon had picked for the band behind the header */
  .gys-nav[data-menu="open"] .nav-logo img { opacity: 1 !important; }
  .gys-nav[data-menu="open"] .nav-logo .nav-logo-dark,
  .gys-nav[data-menu="open"] .nav-logo .nav-logo-ink { opacity: 0 !important; }
  .gys-nav[data-menu="open"] .nav-burger { color: #FFFFFF !important; }

  /* Display parents. "Earn Cash Back" (the dd trigger) is a group label and
     "Build Credit" (direct-child link) is a direct link - both set in Anton at
     the frame's 56px. Clamped so one line survives 360px devices on the 24px
     gutter; at the frame's own 428px the clamp resolves to the full 56px. The
     chameleon selectors ride along so the sheet's white always outranks the
     ink recolors for the light bands behind the header. */
  .gys-nav .nav-actions .nav-link,
  .gys.cham-on[data-cham-nav="light"] .gys-nav .nav-actions .nav-link,
  .gys-home5 .gys-nav .nav-actions .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 9.5vw, 39px);
    line-height: 1.07;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #FFFFFF;
  }

  /* the sheet's group label shouldn't flash mint on hover (nav-solid's hover
     rule would otherwise reach it) - it isn't a link here */
  .gys-nav .nav-actions .nav-dd-trigger:hover { color: #FFFFFF !important; }

  /* Build Credit is a DIRECT link, and says so with a trailing mint arrow
     (Earn Cash Back deliberately has none - it's a group label). */
  .gys-nav .nav-actions > .nav-link:not(.nav-link-find) {
    gap: 14px;
    margin-top: 36px;
  }
  .gys-nav .nav-actions > .nav-link:not(.nav-link-find)::after {
    content: "";
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354FF99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* the dropdown stops being a popover and becomes the railed child group */
  .gys-nav .nav-dd { position: static; }
  .gys-nav .nav-dd-trigger { width: 100%; cursor: default; }
  .gys-nav .nav-dd-trigger svg { display: none; }

  /* five children hang off a 2px mint rail, 16px under the group label */
  .gys-nav .nav-dd-menu,
  .gys-nav .nav-dd:hover .nav-dd-menu,
  .gys-nav .nav-dd:focus-within .nav-dd-menu {
    position: static;
    min-width: 0;
    margin-top: 16px;
    padding: 0 0 0 22px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--gys-mint);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    /* inherit, not visible: the closed sheet hides via visibility, and a
       `visible` here would punch through it — invisible links that still
       swallow every click/hover on the page underneath */
    visibility: inherit;
    transform: none;
  }

  .gys-nav .nav-dd-menu a {
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-radius: 0;
    font-size: 21px;
    line-height: 26px;
    font-weight: 500;
    color: #FFFFFF;
  }
  .gys-nav .nav-dd-menu a:hover {
    background: transparent;
    color: var(--gys-mint);
  }

  /* rail items are numbered on the sheet (spans exist in markup site-wide,
     hidden on desktop) */
  .gys-nav .nav-dd-num {
    display: inline-block;
    width: 1.4em;
    flex-shrink: 0;
    color: var(--gys-mint);
    font-size: 15px;
    font-weight: 600;
  }

  /* Find a home graduates from a text link to a CTA, so drop the link copy.
     !important because the chameleon's .gys.cham-on[data-cham-nav="light"]
     ... .nav-link rules out-specify anything reasonable here. */
  .gys-nav .nav-actions .nav-link-find { display: none !important; }

  /* bottom-anchored stat moment: mint rule, Anton mint figure, letter-spaced
     eyebrow. Same figures as the home page's odometer band, static here. */
  .gys-nav .nav-sheet-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: auto;
    padding: 24px 0 12px;
  }
  .gys-nav .nav-sheet-stat-rule {
    width: 36px;
    height: 2px;
    background: var(--gys-mint);
  }
  .gys-nav .nav-sheet-stat-value {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.01em;
    color: var(--gys-mint);
  }
  .gys-nav .nav-sheet-stat-label {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }

  /* the two CTAs are a pinned 50/50 row at the foot of the sheet; margin-top
     auto is the no-JS fallback pin - with the injected stat above, the stat
     carries the auto margin instead */
  .gys-nav .nav-cta {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
  }
  .gys-nav .nav-sheet-stat + .nav-cta { margin-top: 0; }

  .gys-nav .nav-cta .gys-btn,
  .gys-nav .nav-cta .nav-cta-find {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    width: 50%;
    height: 56px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
  }

  /* Login leads, Find a home is the quieter twin at the same weight. The
     chameleon repaints .gys-btn from several [data-cham-nav] rules, so the
     sheet's own palette has to be stated as important to hold. */
  .gys-nav .nav-cta .nav-cta-find {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    color: #FFFFFF !important;
  }
  .gys-nav .nav-cta .nav-cta-find:hover {
    background: #FFFFFF !important;
    color: var(--gys-dark) !important;
  }

  .gys-nav .nav-actions .gys-btn:not(.nav-cta-find):not(.nav-dd-trigger) {
    border-color: var(--gys-mint) !important;
    background: var(--gys-mint) !important;
    color: var(--gys-dark) !important;
  }

  .gys-nav .nav-dd-login {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }
  .gys-nav .nav-dd-login > .nav-dd-trigger {
    width: 100%;
    height: 56px;
    cursor: pointer;
    border-color: var(--gys-mint) !important;
    background: var(--gys-mint) !important;
    color: var(--gys-dark) !important;
  }
  .gys-nav .nav-dd-login > .nav-dd-trigger svg { display: inline !important; }
  .gys-nav .nav-dd-login .nav-dd-menu,
  .gys-nav .nav-dd-login:hover .nav-dd-menu,
  .gys-nav .nav-dd-login:focus-within .nav-dd-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    top: auto;
    right: 0;
    left: 0;
    min-width: 0;
    margin: 0;
    padding: 8px;
    background: #242A3A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  }
  .gys-nav .nav-dd-login .nav-dd-menu a {
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
  }

  /* the login popover starts closed in the burger menu (the always-visible
     rule above is only for the inline Earn Cash Back rail) and opens via the
     .open class toggled in script.js — hover can't drive it on touch */
  .gys-nav .nav-dd-login .nav-dd-menu,
  .gys-nav .nav-dd-login:hover .nav-dd-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .gys-nav .nav-dd-login.open .nav-dd-menu,
  .gys-nav .nav-dd-login:focus-within .nav-dd-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* the generic trigger hover paints text white — on the mint Login pill that
     means white-on-white. Keep the pill's own colors on hover/active. */
  .gys-nav .nav-actions .nav-dd-login > .nav-dd-trigger:hover,
  .gys-nav .nav-actions .nav-dd-login > .nav-dd-trigger:active {
    color: var(--gys-dark) !important;
    background: var(--gys-mint) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gys-nav .nav-actions,
  .gys-nav.nav-menu-ready .nav-actions,
  .gys-nav .nav-burger span { transition: none; }
}


/* ---- logo: all-ink mark on green grounds ----
   The wordmark's ".rent" is #29F17A, which is exactly the hero band's own
   colour (and close to the #54FF99 mint bands), so the green half of the logo
   disappears against them. data-cham-navbg carries the nav band's actual hex,
   which 'light' alone can't distinguish. */
.gys-nav .nav-logo .nav-logo-ink {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.gys.cham-on[data-cham-navbg="#29F17A"] .gys-nav .nav-logo .nav-logo-dark,
.gys.cham-on[data-cham-navbg="#54FF99"] .gys-nav .nav-logo .nav-logo-dark { opacity: 0; }

.gys.cham-on[data-cham-navbg="#29F17A"] .gys-nav .nav-logo .nav-logo-ink,
.gys.cham-on[data-cham-navbg="#54FF99"] .gys-nav .nav-logo .nav-logo-ink { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gys-nav .nav-logo .nav-logo-ink { transition: none; }
}


/* ==========================================================================
   Neighborhood Network additions
   ========================================================================== */

/* hero art slot when the art is the inline map widget rather than a PNG */
.gysR2-hero-art--map { display: flex; align-items: center; justify-content: center; }
.gysR2-hero-art--map .art-stage { width: 100%; }

@media (min-width: 900px) and (max-width: 1023px) {
  /* narrowest row band: the fixed 330px map block outgrows the art zone —
     scale it so it keeps respecting the right gutter (complaint 3/6: row
     art never bleeds past the gutter) */
  .gysR2-hero-art--map .map-inner { transform: scale(0.85); transform-origin: center; }
}

@media (max-width: 899px) {
  /* stacked splash: the map widget corner-anchors exactly like the PNG art
     (the wrapper carries the translate/opacity); map-inner is a fixed
     330x260 block, so just give the wrapper its natural size */
  .gysR2-hero-art--map { width: 330px; }
  .gysR2-hero-art--map .art-stage { width: auto; }
}

/* standfirst under a section h2 (how-it-works) */
.gysR2-how-lead {
  margin-top: 18px;
  max-width: 720px;
  font-size: 19px;
  line-height: 29px;
  color: rgba(33, 39, 55, 0.7);
  transition: color 0.7s ease;
}
.gys.cham-on[data-cham="dark"] .gysR2-how-lead { color: rgba(255, 255, 255, 0.7); }

/* ---- Live offers ("earning right now") ---- */
.gysR2-offers { padding: 110px var(--gys-pagepad); }
.gysR2-offers-lead {
  margin-top: 16px;
  font-size: 19px;
  line-height: 29px;
  color: rgba(33, 39, 55, 0.7);
  transition: color 0.7s ease;
}
.gys.cham-on[data-cham="dark"] .gysR2-offers-lead { color: rgba(255, 255, 255, 0.7); }

.gysR2-offers-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gysR2-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
}
.gysR2-offer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(84, 255, 153, 0.16);
  font-size: 22px;
  color: #0B5A2E;
}
.gysR2-offer-brand {
  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  color: var(--gys-ink);
}
.gysR2-offer-rate {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  line-height: 1.1;
  color: #0B5A2E;
}

/* placeholder state — deliberately reads as unfinished so it cannot ship by
   accident. Delete along with [data-offers-status] once real offers land. */
.gysR2-offer--empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(33, 39, 55, 0.28);
}
.gysR2-offer--empty .gysR2-offer-logo { background: rgba(33, 39, 55, 0.06); color: rgba(33, 39, 55, 0.4); }
.gysR2-offer--empty .gysR2-offer-brand,
.gysR2-offer--empty .gysR2-offer-rate { color: rgba(33, 39, 55, 0.38); }

.gysR2-offers-notice {
  margin-top: 28px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 22px;
  color: #7A4A00;
  background: #FFF6E5;
  border: 1px solid rgba(122, 74, 0, 0.25);
  border-radius: 10px;
}
.gysR2-offers-notice i { margin-top: 3px; }

.gysR2-offers-foot {
  margin-top: 24px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(33, 39, 55, 0.55);
  transition: color 0.7s ease;
}
.gys.cham-on[data-cham="dark"] .gysR2-offers-foot { color: rgba(255, 255, 255, 0.55); }

@media (max-width: 900px) {
  .gysR2-offers { padding: 80px var(--gys-pagepad); }
  .gysR2-offers-grid { grid-template-columns: 1fr; }
}


/* ---- "What comes with a Stake Account": 10-up feature grid ---- */
.gysR2-incl { padding: 110px var(--gys-pagepad); }
.gysR2-incl-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 64px;
}
.gysR2-incl-item { display: flex; flex-direction: column; gap: 12px; }
.gysR2-incl-icon {
  font-size: 24px;
  line-height: 1;
  color: #0B5A2E;
  transition: color 0.7s ease;
}
.gysR2-incl-item h3 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--gys-ink);
  transition: color 0.7s ease;
}
.gysR2-incl-item p {
  font-size: 16px;
  line-height: 26px;
  color: rgba(33, 39, 55, 0.7);
  transition: color 0.7s ease;
}
.gysR2-incl-item sup { font-size: 11px; }

.gys.cham-on[data-cham="dark"] .gysR2-incl-icon { color: var(--gys-mint); }
.gys.cham-on[data-cham="dark"] .gysR2-incl-item h3 { color: #FFFFFF; }
.gys.cham-on[data-cham="dark"] .gysR2-incl-item p { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 900px) {
  .gysR2-incl { padding: 80px var(--gys-pagepad); }
  .gysR2-incl-grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ---- "Included with Unlimited": compact accent band ---- */
/* One mint-tinted bordered card riding the continuous stone ground between
   the Why band and the FAQs (cashbackonrent2). The card's surface is SOLID
   (no alpha) so its ink text and green link never need a chameleon flip —
   same rationale as .gysR2-why-card. The section itself is a registered
   chameleon band (script.js BANDS) and goes transparent below like the rest. */
.gysR2-unlim { background: #F6F5F1; padding: 0 var(--gys-pagepad); }
.gys.cham-on .gysR2-unlim { background: transparent; }
.gysR2-unlim-card {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 44px 48px;
  background: #E9FCF1;
  border: 1px solid rgba(11, 90, 46, 0.16);
  border-radius: 20px;
}
.gysR2-unlim-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(84, 255, 153, 0.35);
  font-size: 22px;
  color: #0B5A2E;
}
.gysR2-unlim-body h2 {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: var(--gys-ink);
}
.gysR2-unlim-body p {
  margin-top: 10px;
  max-width: 760px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(33, 39, 55, 0.75);
}
.gysR2-unlim-body a {
  color: #0B5A2E;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gysR2-unlim-body a:hover { color: var(--gys-ink); }

@media (max-width: 700px) {
  .gysR2-unlim-card { flex-direction: column; gap: 18px; padding: 32px 24px; }
}


/* ---- "Three ways to claim": tier comparison (cashbackonleasing2) ---- */
/* Three white offer-style cards (hairline + 20px radius, same surface as
   .gysR2-offer / .gysR2-why-card) on the stone ground. Tier names run Anton
   display over a mint tick so Legacy / Basic / Unlimited read at a glance.
   Card surfaces are SOLID, so card text never needs a chameleon flip; the
   section registers as its own band (script.js BANDS) and goes transparent
   under .cham-on like every other band. */
.gysR2-tiers { background: #F6F5F1; padding: 110px var(--gys-pagepad); }
.gys.cham-on .gysR2-tiers { background: transparent; }
.gysR2-tiers-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gysR2-tier {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 36px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 20px;
}
/* mint tick above the tier name — the accent that makes the three names
   scan as a set without adding any copy */
.gysR2-tier::before {
  content: "";
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: #53FF99;
}
.gysR2-tier-name {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  color: var(--gys-ink);
}
.gysR2-tier p {
  font-size: 15.5px;
  line-height: 25px;
  color: rgba(33, 39, 55, 0.7);
}
.gysR2-tier p strong { color: var(--gys-ink); font-weight: 600; }

@media (max-width: 900px) {
  .gysR2-tiers { padding: 80px var(--gys-pagepad); }
  .gysR2-tiers-grid { grid-template-columns: 1fr; }
}


/* hero fine print: terms line riding under the splash CTA (always on the
   dark hero ground, so the muted white never needs a chameleon flip) */
.gysR2-hero-fine {
  margin-top: 18px;
  font-size: 13px;
  line-height: 20px;
}
.gysR2-hero-fine a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.gysR2-hero-fine a:hover { color: #FFFFFF; }


/* Bento section on mobile: the desktop card composition (square card,
   title / body / flexible art well / action) now holds at every width —
   the stacked/centered rules live with the section styles above. The old
   art-left / text-right "strip row" layout is gone (it read as wide strips
   with tiny floating text). */