/* ============ /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;
  transition: transform 0.32s ease, background-color 0.25s ease;
}

/* the nav background stays transparent in EVERY state — no scrolled surface,
   no shadow, no blur; hide/reveal on scroll is transform-only. !important on
   purpose: nothing (base .nav, .nav-overlay, future states) may ever paint
   the header. */
.gys .nav,
.gys .nav.nav-scrolled,
.gys .nav-overlay.nav-scrolled,
.gys-nav,
.gys-nav.nav-scrolled {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* 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; }

/* 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;
}

.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) {
  .gys-nav { padding: 16px 20px; }
  .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;
  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;
  right: -150px;
  bottom: 0;
  /* 20% smaller than the original 910px at the desktop breakpoint */
  width: 728px;
  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;
  right: -150px;
  bottom: 0;
  width: 728px;
  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/168 over 162/150 shares both edges */
.gys-l1 {
  font-size: clamp(56px, 12.2vw, 176px);
  line-height: 0.9545em;
  color: var(--gys-mint);
}

.gys-l2 {
  display: flex;
  font-size: clamp(52px, 11.25vw, 162px);
  line-height: 0.926em;
  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;
  overflow: hidden;
}

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

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

.gys-sub {
  margin-top: 30px;
  width: min(485px, 100%);
  font-size: 22px;
  line-height: 30px;
  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);
}

@media (max-width: 1200px) {
  .gys-renter { width: 680px; right: -110px; bottom: 0; }
}

@media (max-width: 760px) {
  .gys-hero-inner { padding: 72px 40px 100px; }
  .gys-renter { width: 500px; right: -80px; bottom: 0; opacity: 0.55; }
}

/* ---- 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;
}

@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: 100px;
}

.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: flex;
  gap: 80px;
}

.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);
}

@media (max-width: 1024px) {
  .gys-f1 .f1-top { flex-direction: column; gap: 48px; }
  .gys-f1 .f1-cols { flex-wrap: wrap; gap: 48px; }
  .gys-f1 .f1-legal-cols { flex-direction: column; }
}

@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; }
  .gys-hero-inner { padding: 80px 40px; }
  .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 {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  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% - 64px) * 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;
  font-size: clamp(56px, 6.7vw, 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% - 64px) * 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%;
  /* cap the size so cards stay compact and near-square at any viewport */
  max-width: 430px;
  max-height: 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; }

@media (max-width: 900px) {
  .gys-stickbento { flex-direction: column; gap: 40px; }
  .gys-stickbento .sb-left { position: static; flex: 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 */
.gys .gys-stickbento .sb-art-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 4px;
}
.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;
}
.gys .gys-stickbento .bento-art {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 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;
  font-size: 42px;
  line-height: 46px;
}

.gys .gys-stickbento .bento-body {
  font-size: 16px;
  line-height: 26px;
  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: 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%; }

/* 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 */
.gysR2-hero {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 40px;
  min-height: 100vh;
  box-sizing: border-box;
}
.gysR2-hero-copy { max-width: 640px; }
.gysR2-hero-cta { margin-top: 36px; }
.gysR2-hero-art {
  flex-shrink: 0;
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gysR2-hero-art img { max-width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .gysR2-hero { flex-direction: column !important; text-align: left; }
  .gysR2-hero-art { width: 220px; margin-top: 24px; }
}

/* 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 900px 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; }

@media (max-width: 900px) {
  .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: 2px;
    /* clears the header row above, keeps the CTAs off the home indicator */
    padding: 84px 20px 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;
    transition: opacity 0.22s ease, visibility 0.22s;
    /* below the logo/burger, which the header keeps on top (see below) */
    z-index: 1;
  }

  .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; }

  /* links go full-width rows; force white since the panel is always dark and
     the chameleon may have flipped these to ink for the light band behind */
  .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;
    justify-content: flex-start;
    padding: 14px 8px;
    font-size: 16px;
    color: #FFFFFF;
  }

  /* the dropdown stops being a popover and becomes an inline sub-list */
  .gys-nav .nav-dd { position: static; }
  .gys-nav .nav-dd-trigger { width: 100%; }
  .gys-nav .nav-dd-trigger svg { display: none; }

  .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;
    padding: 0 0 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .gys-nav .nav-dd-menu a { padding: 11px 8px; font-size: 15px; }

  /* 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; }

  /* the two CTAs are a pinned 50/50 row at the foot of the sheet */
  .gys-nav .nav-cta {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
  }

  .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) {
    border-color: var(--gys-mint) !important;
    background: var(--gys-mint) !important;
    color: var(--gys-dark) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gys-nav .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%; }

/* 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; }
}


/* ==========================================================================
   Bento section on mobile
   Desktop pins the statement beside a column of square cards. On a phone the
   pin isn't reproducible and isn't the point - the statement just needs to
   anchor the list, so it leads the section and the cards become compact
   art-left / text-right rows beneath it. Six 396px squares ran ~2,960px
   (6+ screens); these rows bring the section to roughly a third of that.
   ========================================================================== */
@media (max-width: 900px) {
  /* the base rule sets order:2 on .sb-left / order:1 on .sb-right for the
     desktop mirror layout. Un-reversing it is the whole fix for the headline
     otherwise rendering below all six cards. */
  .gys-stickbento .sb-left { order: 1; }
  .gys-stickbento .sb-right { order: 2; align-items: stretch; justify-content: flex-start; gap: 14px; }

  .gys .gys-stickbento .bento-card {
    /* drop the square: these are rows now */
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
    /* rows, but with real presence - roughly double the 140px they collapsed
       to, which was too slight to read as cards */
    min-height: 280px;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-areas:
      "art head"
      "art body"
      "art act";
    align-items: center;
    align-content: center;
    column-gap: 18px;
    row-gap: 6px;
    /* the height comes from min-height, not from a fat art well - the copy
       column needs every px it can keep at 375 */
    padding: 24px 20px;
    border-radius: 22px;
  }

  .gys .gys-stickbento .sb-cardhead { grid-area: head; align-self: end; }
  .gys .gys-stickbento .bento-body   { grid-area: body; align-self: start; margin: 0; }
  .gys .gys-stickbento .bento-art    { grid-area: art; }

  /* at the taller row height there's room for the affordance again, and it's
     what keeps the extra space from reading as padding */
  .gys .gys-stickbento .sb-action {
    grid-area: act;
    display: inline-flex;
    align-self: start;
    justify-self: start;
    margin: 8px 0 0;
    gap: 10px;
  }
  .gys .gys-stickbento .sb-action-label { font-size: 14px; }
  .gys .gys-stickbento .sb-action-circle { width: 34px; height: 34px; }

  .gys .gys-stickbento .bento-title { font-size: 21px; line-height: 27px; }
  .gys .gys-stickbento .bento-body { font-size: 15px; line-height: 22px; }

  /* art zone: fixed square well on the left, art scaled to fit it */
  .gys .gys-stickbento .bento-art {
    width: 128px;
    height: 128px;
    flex: none;
    align-self: center;
  }
  .gys .gys-stickbento .art-stage { width: 100%; height: 100%; }
  .gys .gys-stickbento .sb-art-calendar { padding: 0; }
  .gys .gys-stickbento .sb-art-img { max-width: 100%; max-height: 100%; }
  /* per-card PNG tuning from the desktop layout doesn't apply at this size */
  .gys .gys-stickbento .sb-right .bento-card .sb-art-img { max-width: 100%; }

  /* the map is a fixed 330x260 widget - rescale it into the 104px well
     instead of letting it blow the row out */
  .gys .gys-stickbento .art-map .map-inner {
    transform: scale(0.3);
    transform-origin: center;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
  }
  .gys .gys-stickbento .art-map { position: relative; overflow: hidden; }
}