/* Cubbi marketing site design system.
   Tokens match the app brand (cubbi-app-main tailwind.config.js / Paper "Homepage Redesign"). */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/rubik-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand */
  --green-900: #163827;
  --green-700: #214e37;
  --green-600: #2e6a4b;
  --green-500: #4c945b;
  --green-100: #cee2b7;
  --purple-700: #4d216d;
  --purple-500: #8b579c;
  --lilac-500: #e8c6f7;
  --lilac-100: #f2ddfa;
  --lilac-50: #fdf7ff;
  --cream-200: #f1f0d8;
  --cream-100: #f7f6e2;

  /* Text / surfaces */
  --ink: #1a1a1a;
  --ink-muted: #5e5e5e;
  --ink-light: #9a9a9a;
  --border: #ececec;
  --surface: #ffffff;
  --surface-alt: #f9f9f9;

  /* Radii per brand spec */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --font: "Rubik", Arial, Helvetica, sans-serif;
  --container: 72rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* CUB-259: nothing may widen the page on mobile (clip keeps sticky/fixed working). */
  overflow-x: clip;
}
@media (max-width: 63.9rem) {
  html.nav-locked {
    overflow: hidden; /* mobile menu open: the page must not scroll underneath */
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  /* CUB-227: body copy is muted; headings carry the primary green. */
  color: var(--ink-muted);
  background: var(--surface);
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  color: var(--green-700);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
}
h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}
h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--green-600);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ----------
   Paper "Cubbi Website": pill buttons carry a hard offset shadow (no blur) in the
   sibling brand colour — lilac button → purple-500 shadow, green button → green-900. */
.btn {
  display: inline-block;
  font: 800 0.875rem var(--font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}
.btn-primary {
  background: var(--green-700);
  color: var(--cream-100);
  box-shadow: 3px 3px 0 var(--green-900);
}
.btn-primary:hover {
  background: var(--green-600);
}
.btn-secondary {
  background: var(--lilac-500);
  color: var(--green-700);
  box-shadow: 3px 3px 0 var(--purple-500);
}
.btn-secondary:hover {
  background: var(--lilac-100);
}
.btn-pink {
  background: var(--cta-pink, #e5399b);
  color: #fff;
  box-shadow: 3px 3px 0 var(--purple-700);
}
.btn-outline {
  background: transparent;
  color: var(--green-700);
  box-shadow: inset 0 0 0 2px var(--green-700);
}
.btn-outline:hover {
  background: var(--green-700);
  color: #fff;
}

/* ---------- Header ----------
   Paper "Cubbi Website" nav: deep green bar, cream links (active link lilac),
   lilac LOG IN / SIGN UP pill with a purple offset shadow. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-700);
}
/* Paper nav (11E-0): logo pinned to the left gutter, LOG IN pinned to the right,
   links centred in the space between. */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: 6rem;
  position: relative;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 4rem;
}
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* Logo-width spacer on the right so the link group centres on the page, not on
   the leftover space. Dropped on narrower desktops where the CTA would collide. */
.site-header .container::after {
  content: "";
  width: 133px;
  flex-shrink: 0;
}
@media (max-width: 72rem) {
  .site-header .container::after { display: none; }
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.site-nav a,
.site-nav .nav-item > a {
  white-space: nowrap;
}
.site-nav > a,
.site-nav .nav-item > a {
  color: var(--cream-100);
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.site-nav > a:hover,
.site-nav .nav-item > a:hover,
.site-nav > a[aria-current="page"],
.site-nav .nav-item > a[aria-current="page"] {
  color: var(--lilac-500);
}
/* nav-scoped CTA keeps its own colours (nav link rule outranks .btn) */
.site-nav a.btn-secondary,
.site-nav a.btn-secondary:hover {
  color: var(--green-700);
  font-size: 0.875rem;
  font-weight: 800;
}
/* The CTA leaves the centred link flow and sits on the right gutter. */
.site-nav a.btn-secondary {
  position: absolute;
  right: 4rem;
  top: 50%;
  transform: translateY(-50%);
}
/* CTA back in flow on narrower desktops: links centre between logo and button. */
@media (max-width: 72rem) {
  .site-nav a.btn-secondary {
    position: static;
    transform: none;
  }
}
/* Dropdowns (For Parents / For Brands): open on hover and on keyboard focus. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-item > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.35rem;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.25rem;
  min-width: 14rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(22, 56, 39, 0.25);
  padding: 0.6rem 0;
  margin: 0;
  list-style: none;
  transition: opacity 0.12s ease;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  visibility: visible;
  opacity: 1;
}
/* hover bridge so the pointer can travel into the menu */
.nav-item::after {
  content: "";
  position: absolute;
  inset: 100% 0 -1rem 0;
}
.nav-menu a {
  display: block;
  padding: 0.55rem 1.4rem;
  color: var(--green-700);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
}
.nav-menu a:hover {
  border-left-color: var(--green-100);
  background: var(--cream-100);
  color: var(--green-700);
}
.nav-menu-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.35rem 1.4rem 0.15rem;
}
.nav-menu a.nav-new-chip {
  color: var(--green-700);
  font-weight: 700;
  border-left: 3px solid var(--green-100);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--cream-100);
}

@media (max-width: 63.9rem) {
  .site-header .container {
    min-height: 4.5rem;
    padding-inline: 1.25rem;
    justify-content: space-between;
  }
  /* CUB-263: on mobile this heads the category list, so it reads as a section
     title rather than an eyebrow, and aligns with the links below it (the base
     rule's 1.4rem side padding indented it further right than its own list).
     The "Browse all brands" entry is hidden because the parent "Brand Directory"
     link directly above it already goes to /brands. */
  .nav-menu-title {
    color: var(--cream-100);
    font-size: 0.95rem;
    letter-spacing: normal;
    text-transform: none;
    padding: 0.6rem 0 0.35rem;
  }
  .nav-menu-all {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  /* Full-screen green menu per the Paper mobile-menu artboard. */
  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    top: 4.5rem;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start; /* CUB-260: desktop centring would push the top items above the panel */
    gap: 0;
    background: var(--green-700);
    padding: 1rem 1.25rem 2.5rem;
    overflow-y: auto;
  }
  .site-header.nav-open .site-nav {
    display: flex;
  }
  .site-nav > a,
  .site-nav .nav-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .nav-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-item > a::after {
    transform: rotate(-45deg);
  }
  .nav-item::after {
    content: none;
  }
  .nav-menu {
    visibility: visible;
    opacity: 1;
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0.5rem 1rem;
  }
  .nav-menu a {
    color: var(--cream-100);
    padding: 0.5rem 0;
  }
  .nav-menu a:hover {
    background: transparent;
    color: var(--lilac-500);
  }
  .site-nav a.btn-secondary {
    position: static;
    transform: none;
    margin-top: 1.5rem;
    justify-content: center;
    text-align: center;
    padding-block: 1rem;
    border-bottom: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--lilac-50);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.hero-mark {
  position: absolute;
  right: -4rem;
  top: -5rem;
  width: 24rem;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
.hero-copy p.lede {
  font-size: 1.15rem;
  max-width: 30rem;
}
.store-badges {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.store-badges img {
  height: 3rem;
  width: auto;
}
.hero-visual {
  position: relative;
  justify-self: center;
}
.hero-visual > img {
  width: min(19rem, 70vw);
  filter: drop-shadow(0 24px 40px rgba(22, 56, 39, 0.25));
}
.offer-chip {
  position: absolute;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(22, 56, 39, 0.18);
  white-space: nowrap;
  animation: chip-float 5s ease-in-out infinite;
}
.offer-chip small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.offer-chip .pct {
  color: var(--green-500);
}
.offer-chip:nth-child(2) { top: 8%; left: -18%; }
.offer-chip:nth-child(3) { top: 38%; right: -22%; animation-delay: 1.2s; }
.offer-chip:nth-child(4) { bottom: 12%; left: -14%; animation-delay: 2.4s; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .offer-chip { animation: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 47.9rem) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 1rem; }
  .offer-chip:nth-child(2) { left: 0; }
  .offer-chip:nth-child(3) { right: 0; }
  .offer-chip:nth-child(4) { left: 4%; }
}

/* ---------- Photo band (full-bleed image + quote) ---------- */
.photo-band {
  position: relative;
  min-height: 26rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.photo-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-band .band-quote {
  position: relative;
  margin: 0 auto 2.5rem;
  max-width: 40rem;
  background: rgba(22, 56, 39, 0.85);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  text-align: center;
}
.photo-band .band-quote p {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}
.photo-band .band-quote cite {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--green-100);
}

/* ---------- Photo cards ---------- */
.photo-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.photo-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.photo-card .photo-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.photo-card .photo-card-body p:last-child {
  margin-bottom: 0;
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(2.25rem, 6vw, 4rem);
}
.section-alt {
  background: var(--cream-100);
}
.section-lilac {
  background: var(--lilac-50);
}
.section-green {
  background: var(--green-700);
  color: #fff;
}
.section-green h1,
.section-green h2,
.section-green h3 {
  color: #fff;
}
.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-500);
  margin-bottom: 0.75rem;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ---------- Blog ---------- */
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.post-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}
.post-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.post-card h3 {
  color: var(--ink);
}
.post-card:hover h3 {
  color: var(--green-600);
}
.post-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.prose {
  max-width: 44rem;
  margin-inline: auto;
}
.prose img {
  border-radius: var(--radius-md);
  margin-block: 1.5rem;
}
.prose h2,
.prose h3 {
  margin-top: 1.75em;
}
.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--lilac-500);
  color: var(--ink-muted);
}

/* ---------- Brands ---------- */
.brand-hero {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.brand-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  flex-shrink: 0;
}
.offer-flash {
  display: inline-block;
  background: var(--green-700);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.35rem 1rem;
  margin: 0.25rem 0 0.5rem;
}
.brand-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.brand-card:hover {
  border-color: var(--green-500);
  transform: translateY(-2px);
}
.brand-card img {
  border-radius: 10px;
  flex-shrink: 0;
}
.brand-card h3 {
  color: var(--ink);
}
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green-500);
  margin-top: 0.25rem;
}
.live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.25rem;
}
.filter-search {
  font: inherit;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  min-width: 14rem;
  background: var(--surface);
}
.filter-search:focus {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
}
.filter-chip {
  font: 600 0.85rem var(--font);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
}
.filter-chip:hover {
  border-color: var(--green-500);
}
.filter-chip.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
@media (max-width: 47.9rem) {
  [data-brand-columns] {
    grid-template-columns: 1fr !important;
  }
  .brand-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Footer ----------
   Paper "Cubbi Website" footer: primary-green, brand block (logo, #JOINTHECUB pill,
   socials, email) left, store badges centre, uppercase link list right. */
.site-footer {
  background: var(--green-700);
  color: var(--cream-100);
}
.site-footer a {
  color: var(--cream-100);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--lilac-500);
}
/* One row per Paper (18G-0): brand block | stacked store badges | link columns.
   No wrapping on desktop — the columns must sit beside the brand block, never under it. */
.footer-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 90rem;
  margin-inline: auto;
  padding: 2rem 4rem 2.5rem;
}
/* Mid-width fallback: let the row wrap before it could overflow. */
@media (max-width: 80rem) {
  .footer-grid { flex-wrap: wrap; }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.footer-brand .footer-logo img {
  width: 12rem;
  height: auto;
}
.site-footer a.footer-hashtag {
  color: var(--green-700);
}
.footer-hashtag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background: var(--lilac-500);
  color: var(--green-700);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  box-shadow: 4px 4px 0 var(--purple-500);
}
.site-footer a.footer-hashtag:hover {
  color: var(--green-700);
  background: var(--lilac-100);
}
.footer-social {
  display: flex;
  gap: 0.875rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--lilac-500);
}
.footer-social a:hover {
  color: var(--lilac-100);
}
.footer-email {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-top: 2.5rem; /* optically level with the column headings, per artboard */
}
.footer-badges img {
  width: 9rem;
  height: auto;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  gap: 0.85rem 2.75rem;
}
.footer-links a {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.25rem 4rem 2rem;
  max-width: 98rem;
  margin-inline: auto;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 63.9rem) {
  .footer-grid {
    flex-direction: column;
    padding: 2rem 1.25rem;
  }
  .footer-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0;
    align-self: flex-start;
    max-width: 100%;
  }
  .footer-legal {
    padding-inline: 1.25rem;
  }
  .footer-links {
    column-gap: 1.5rem;
  }
}

/* ---------- Paper redesign shared components ---------- */

/* Section wave dividers: 3-band "rainbow" flow lifted from the Paper file.
   The svg sits flush against the section it belongs to; flip with .wave-flip. */
.wave {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}
.nav-wave {
  background: var(--green-700);
  margin-top: -1px;
}
.wave-flip {
  transform: scaleY(-1);
  margin-bottom: 0;
  margin-top: -1px;
}

/* Squiggle underline accent used beneath display headings. */
.squiggle {
  display: block;
  width: 10.4rem;
  max-width: 60%;
  height: auto;
  margin-top: -0.3rem;
}

/* Small pill label that introduces a section ("OUR BRANDS", "OUR BLOG"). */
.section-chip {
  display: inline-block;
  background: var(--lilac-500);
  color: var(--green-700);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--purple-500);
}

/* Display headings: heavy, uppercase, tight tracking (Rubik black). */
.display {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.display-xl { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.display-lg { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.display-md { font-size: clamp(1.35rem, 2.5vw, 2rem); }

/* Footer columns per the TOP OFFERS design (CUB-242). */
.footer-cols {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: flex-start;
  min-width: 0; /* long admin-authored Top Offers titles wrap instead of overflowing */
}
.footer-col h4 {
  color: var(--cream-100);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.footer-cols .footer-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (max-width: 63.9rem) {
  .footer-cols {
    flex-wrap: wrap;
    gap: 1.75rem 2.5rem;
  }
}