/* ==========================================================================
   FRANCHISE-SPECIFIC LAYOUTS
   Everything shared with www.dapperdoughnut.com (header, nav, buttons, pills,
   cards, bands, pinstripes, footer, forms) comes from the real production
   sheets: tokens.css / fonts.css / base.css / components.css — copied, not
   imitated. This sheet only adds layouts that exist ONLY on the franchise
   page (stat cards, spec lists, app-screenshot figure, comparison cards,
   partner rows, lead-form card), all built from the main site's tokens.
   LIGHT MODE ONLY — no dark-mode blocks anywhere in this project.
   ========================================================================== */

/* ---- Section rhythm helpers ---- */
.section--offset {
  background: var(--color-surface-2);
}

/* ---- Grids ---- */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 1023px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- 1 · Hero ---- */
.hero {
  padding-block: clamp(var(--space-12), 5vw, var(--space-20));
}
/* rev4 (client): LEFT-aligned like the rest of the page — "open up" means each
   line is sized to fit on ONE line across the full page width, never wrapping
   at desktop. Plain digits 1-4 (no boxes/circles), color-matched per line.
   Line 1 leads into 2/3/4: "1 Franchise Fee unlocks… 2 / 3 / 4". No sub-copy. */
.hero-open {
  text-align: left;
  max-width: var(--content-wide);
}
.hero-script {
  font-family: var(--font-script);
  color: var(--color-coral);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.25;
  margin-top: var(--space-4);
  max-width: none;
}
.hero-outline {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}
.hero-outline .ho {
  display: block;
  /* sized so the longest line ("1 Franchise Fee unlocks…") stays on one line
     across the container from tablet width up */
  font-size: clamp(2rem, 0.9rem + 3.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero-outline .ho__n {
  font-weight: 800;
  font-size: 1.12em;
  letter-spacing: -0.04em;
  margin-right: 0.08em;
}
.ho--ink {
  color: var(--color-charcoal);
}
.ho--teal {
  color: var(--color-primary);
}
.ho--pink {
  color: var(--color-coral);
}
.ho--gold {
  color: var(--color-gold);
}
.hero-actions {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-start;
}

/* ---- Section headings (uses .section-head from components.css) ---- */
.h2 {
  font-size: var(--text-2xl);
}
.subhead {
  font-size: var(--text-lg);
  line-height: 1.35;
  font-weight: 700;
  margin-top: var(--space-4);
  max-width: var(--measure-lede-lg);
}
.subhead--teal {
  color: var(--color-link-strong);
}
.subhead--muted {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ---- rev2 §2: "The Pitch" section is deleted; its .stat-card / .card-* rules
   went with it (content now lives in the hero's .hero-points list). ---- */

/* ---- rev2 §3 · MARKET BAND — high-impact charcoal band, one hero stat + three
   supporting stats. Replaces the four quiet white .fact-card boxes. ---- */
.market-band {
  background: var(--color-charcoal);
  color: #ffffff;
}
.market-band .section-head {
  margin-bottom: var(--space-8);
  /* rev8 (client): no width cap — the subline must hold one line */
  max-width: none;
}
.market-band .eyebrow--pink {
  color: var(--color-coral-hover);
}
.market-band h2 {
  color: #ffffff;
  font-size: var(--text-2xl);
  line-height: 1.04;
}
.market-band h2 .mk-hi {
  color: var(--color-gold);
  display: block;
}
.market-band .market-sub {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  /* rev8 (client): width cap removed — "Treats are a growing category…" stays on one line */
  max-width: none;
}
.market-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: stretch;
}
@media (max-width: 899px) {
  .market-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mstat {
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 2.5vw, var(--space-10));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mstat__num {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.86;
}
.mstat__desc {
  font-size: var(--text-base);
  font-weight: 700;
}
.mstat__src {
  margin-top: auto;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Hero stat — gold slab, enormous numeral */
.mstat--hero {
  background: var(--color-gold);
  color: #151516;
  box-shadow: var(--shadow-lg);
  justify-content: center;
}
.mstat--hero .mstat__src {
  margin-top: var(--space-5);
}
.mstat--hero .mstat__num {
  font-size: clamp(4.5rem, 2rem + 11vw, 9rem);
}
.mstat--hero .mstat__desc {
  font-size: var(--text-lg);
  line-height: 1.2;
}
.mstat--hero .mstat__src {
  color: #4a3410;
}

/* Three supporting stats — stacked, hairline-separated, on the charcoal band */
.market-support {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mstat--sm {
  border-radius: 0;
  padding: clamp(var(--space-4), 2vw, var(--space-6)) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-5);
  align-items: baseline;
}
.mstat--sm:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.mstat--sm .mstat__num {
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);
  color: var(--color-coral-hover);
}
.mstat--sm:nth-child(2) .mstat__num {
  color: #8fe3dd;
}
.mstat--sm:nth-child(3) .mstat__num {
  color: var(--color-gold-light);
}
.mstat--sm .mstat__desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-sm);
}
.mstat--sm .mstat__src {
  display: block;
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 520px) {
  .mstat--sm {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

/* ---- rev2 §4 · ONE consolidated channel section ------------------------------
   Replaces the old 4-card overview grid PLUS the four separate deep-dive detail
   sections (.channel-card / .detail-grid / .spec-list / .app-figure / .drive-panel
   are all retired). Channel 01 (Mobile Sales) is the featured "star": full-width,
   two-up, with the largest image. Channels 02–04 sit in one 3-up row beneath it.
   CLIENT-CRITICAL: assets/app-screens-pair.png is object-fit: contain in its one
   remaining placement (Channel 02) — whole image, never cropped, at every width. */
/* rev13 (client): clear section separation — the Business Model sits on the
   brand's pale sage so it visibly breaks from the pinstripe hero above it. */
.channels {
  background: var(--color-sage);
}
.channels .section-head {
  margin-bottom: var(--space-10);
  /* rev7: release the default section-head measure cap — the four-channel
     arrow chain needs the full container width to hold one line at desktop */
  max-width: none;
}
/* rev5 (client): headline forced onto exactly two lines — no mid-sentence wrap */
.ch-headline span {
  display: block;
}
/* rev5 (client): the four channels as a bold arrow chain, one line across on
   desktop, each name in its channel color. As the section scrolls into view the
   names pop in one after another (piggybacks the section's .reveal observer),
   so the reader catches all four channels BEFORE the visual cards. */
.channel-chain {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55em;
  row-gap: var(--space-2);
  /* sized so all four names + arrows hold ONE line across the container at
     desktop widths (≥900px); wraps gracefully only on small screens */
  font-size: clamp(1rem, 0.4rem + 1.1vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* rev18 (client): each arrow is glued to the name that follows it (one nowrap
   unit), so a wrap on mobile never leaves an arrow hanging alone at a line end. */
.channel-chain .chain__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.channel-chain .chain__arrow {
  color: var(--color-text-faint);
  font-weight: 700;
}
.reveal.is-visible .chain__unit:nth-child(1) { transition-delay: 0.15s; }
.reveal.is-visible .chain__unit:nth-child(2) { transition-delay: 0.45s; }
.reveal.is-visible .chain__unit:nth-child(3) { transition-delay: 0.75s; }
.reveal.is-visible .chain__unit:nth-child(4) { transition-delay: 1.05s; }
.reveal.is-visible .chain__unit {
  opacity: 1;
  transform: none;
}
.chain--gold { color: var(--color-gold-deep); }
.chain--pink { color: var(--color-coral); }
.chain--teal { color: var(--color-primary); }
.chain--ink { color: var(--color-charcoal); }
@media (prefers-reduced-motion: reduce) {
  .channel-chain .chain__unit {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.ch {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}
.ch-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden;
}
.ch-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* contain-fit wells: the app screenshot pair and the Dapper Drive logo must show whole */
.ch-media--contain {
  background: var(--color-surface-2);
}
.ch-media--contain img {
  inset: var(--space-4);
  width: calc(100% - 2 * var(--space-4));
  height: calc(100% - 2 * var(--space-4));
  object-fit: contain;
}
.ch-media--logo {
  background: var(--color-gold-highlight);
}
.ch-media--logo img {
  inset: clamp(var(--space-6), 4vw, var(--space-10));
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * clamp(var(--space-6), 4vw, var(--space-10)));
  max-height: calc(100% - 2 * clamp(var(--space-6), 4vw, var(--space-10)));
  margin: auto;
}
.ch-body {
  padding: clamp(var(--space-5), 2vw, var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ch-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.ch-title {
  font-size: var(--text-lg);
  line-height: 1.15;
}
.ch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ch-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}
.ch-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* Channel 01 — featured / "make the mobile a star" */
.ch--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: clamp(var(--space-6), 2.5vw, var(--space-10));
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
}
.ch--featured .ch-media {
  aspect-ratio: auto;
  min-height: clamp(280px, 34vw, 520px);
  border-bottom: 0;
  border-right: 1px solid var(--color-divider);
}
.ch--featured .ch-body {
  padding: clamp(var(--space-6), 3vw, var(--space-12));
  justify-content: center;
  gap: var(--space-4);
}
.ch--featured .ch-title {
  font-size: var(--text-xl);
}
.ch--featured .ch-list li {
  font-size: var(--text-base);
  font-weight: 700;
}
.ch--featured .ch-list li::before {
  background: var(--color-gold);
  width: 16px;
  height: 5px;
  top: 0.55em;
}
.ch-flag {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 1;
  background: var(--color-gold);
  color: #151516;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 899px) {
  .ch--featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .ch--featured .ch-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider);
  }
}

/* Channels 02–04 */
.ch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 1023px) {
  .ch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .ch-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kept from the previous build (used by the channel kickers above).
   rev6 (client): each number circle takes the SAME color as its channel title. */
.badge-num {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--color-charcoal);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
}
.ch-kicker .badge-num:has(+ .label-gold) {
  background: var(--color-gold-deep);
}
.ch-kicker .badge-num:has(+ .label-pink) {
  background: var(--color-coral);
}
.ch-kicker .badge-num:has(+ .label-teal) {
  background: var(--color-link-strong);
}
.channel-label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.label-gold {
  color: var(--color-gold-deep);
}
.label-pink {
  color: var(--color-coral);
}
.label-teal {
  color: var(--color-link-strong);
}

/* ---- rev2 §5: the franchise-only .compare-* comparison cards are deleted —
   that section is now the real site's shared .why-band / .why-vs / .why-grid
   component, whose CSS already ships in this project's components.css copy. ---- */

/* rev9 (client): Why-Dapper head is LEFT-justified like every other section
   (not centered), width cap removed, and the headline breaks on exactly three
   lines: No Display Case. / No Day-Olds. / No Compromise. */
.why-head {
  max-width: none;
  text-align: left;
}
.why-band__headline span {
  display: block;
}
.why-head .why-band__manifesto {
  margin-inline: 0; /* components.css centers it with auto margins */
  max-width: none;
}

/* ---- 10 · Package cards ----
   rev11 (client): "add some life and color" — each card carries a brand-tinted
   surface, a hand-drawn line icon in the family color, and a color-matched
   heading. Tints are color-mix derivations of the canonical brand hexes; body
   text stays charcoal for contrast. */
.pkg-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
}
.pkg-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.pkg-card p {
  font-size: var(--text-sm);
  color: var(--color-charcoal-soft);
}
.pkg-icon {
  width: 44px;
  height: 38px;
  margin-bottom: var(--space-4);
}
.pkg-card--teal {
  background: color-mix(in srgb, #00a59d 12%, #ffffff);
  border-color: color-mix(in srgb, #00a59d 30%, #ffffff);
}
.pkg-card--teal h3,
.pkg-card--teal .pkg-icon {
  color: var(--color-link-strong);
}
.pkg-card--pink {
  background: color-mix(in srgb, #e55395 11%, #ffffff);
  border-color: color-mix(in srgb, #e55395 28%, #ffffff);
}
.pkg-card--pink h3,
.pkg-card--pink .pkg-icon {
  color: var(--color-coral);
}
.pkg-card--gold {
  background: color-mix(in srgb, #f6b333 14%, #ffffff);
  border-color: color-mix(in srgb, #f6b333 34%, #ffffff);
}
.pkg-card--gold h3,
.pkg-card--gold .pkg-icon {
  color: var(--color-gold-deep);
}

/* ---- 11 · Partner — rev12 (client): restyled to the same tinted-card +
   line-icon design language as The Package section (.pkg-card reused).
   rev13 (client): its own palette from the brand-standard sheet ("Bold Shades
   of Branded Colors 2.4"), distinct from The Package's pink/teal/gold tints —
   pale sage #D0E0D7, warm peach #F4CFB2, cream #FBE1AD, all light and easy on
   the eye, with the sheet's deep hues (#007241 / #7B5A1A) for headings. ---- */
.prt-card--sage {
  background: #d0e0d7;
  border-color: color-mix(in srgb, #007241 22%, #d0e0d7);
}
.prt-card--sage h3,
.prt-card--sage .pkg-icon {
  color: #007241;
}
.prt-card--peach {
  background: #f4cfb2;
  border-color: color-mix(in srgb, #7b5a1a 22%, #f4cfb2);
}
.prt-card--peach h3 {
  color: #7b5a1a;
}
.prt-card--peach .pkg-icon {
  color: #e55395;
}
.prt-card--cream {
  background: #fbe1ad;
  border-color: color-mix(in srgb, #7b5a1a 24%, #fbe1ad);
}
.prt-card--cream h3,
.prt-card--cream .pkg-icon {
  color: #7b5a1a;
}

/* ---- rev2 §6 · CTA / CONTACT — explicitly NOT black anymore.
   Core-brand gold band (#f6b333) with charcoal ink and the white-gauge pinstripe,
   centered, one magenta button out to the real site's Contact page. The embedded
   lead form, the info@ line, and the Gramcor / Matthews NC fineprint are removed,
   along with .form-card / .form-grid / .cta-fineprint / .cta-list. ---- */
/* rev16 (client): mustard band retired — the closing section is now a bright,
   lively LIGHT candy stripe: soft diagonal ribbons of brand pink, teal, and
   gold over white. Charcoal ink for text; highlight line in brand magenta. */
.cta {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, #ff7dac 16%, #ffffff) 0 26px,
    #ffffff 26px 52px,
    color-mix(in srgb, #34e0e8 16%, #ffffff) 52px 78px,
    #ffffff 78px 104px,
    color-mix(in srgb, #f6b333 18%, #ffffff) 104px 130px,
    #ffffff 130px 156px
  );
  color: #151516;
}
/* rev14 (client): form restored, LEFT-justified, no width caps. Two-up grid —
   headline + Info-Pack list left, white form card right. */
.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
@media (max-width: 899px) {
  .cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The form's GoHighLevel iframe runs ~1032px tall while the intro copy is
   only a few short lines by design ("less writing, more punch") — without
   this, the intro column stopped a third of the way down, leaving a large
   empty void beside the form. Pinning it below the sticky header keeps the
   pitch in view for the whole scroll instead of looking unfinished. */
.cta-intro {
  position: sticky;
  top: clamp(96px, 12vw, 148px);
}
@media (max-width: 899px) {
  .cta-intro {
    position: static;
  }
}
.cta-logo {
  height: clamp(64px, 8vw, 104px);
  width: auto;
  object-fit: contain;
  margin: 0 0 var(--space-6);
  display: block;
}
.cta-eyebrow {
  color: #151516;
  opacity: 0.85;
}
.cta h2 {
  margin-top: var(--space-3);
  font-size: var(--text-2xl);
  line-height: 1.03;
  color: #151516;
}
.cta h2 .cta-hl {
  display: block;
  /* brand core magenta — the "exciting" accent on the light stripe */
  color: var(--color-coral);
}
.cta-lede {
  margin: var(--space-5) 0 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #2b2b2d;
}
/* rev17 (client): three short lines, nothing else — less writing, more punch */
.cta-points {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cta-points span {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #2b2b2d;
}
.cta-points span:last-child {
  color: var(--color-coral);
}

/* White form card on the candy-stripe band */
.form-card {
  background: #ffffff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  box-shadow: var(--shadow-lg);
}
/* rev15 (client): the card now hosts the GoHighLevel CRM iframe. The embed
   script resizes it; min-height matches the form's declared 1032px so the
   card never collapses while the widget loads. */
.form-card--embed {
  padding: clamp(var(--space-3), 1.5vw, var(--space-5));
}
.form-card--embed iframe {
  display: block;
  width: 100%;
  min-height: 1032px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 639px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-charcoal-soft);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-faint);
}
.form-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.form-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form-status {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  display: none;
}
.form-status[data-state="success"] {
  display: block;
  background: var(--color-success-highlight);
  border: 1px solid var(--color-success);
  color: #00514a;
}
.form-status[data-state="error"] {
  display: block;
  background: var(--color-error-highlight);
  border: 1px solid var(--color-error);
  color: #8f2757;
}
.form-status[data-state="pending"] {
  display: block;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
@media (max-width: 520px) {
  .form-actions .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ---- Header CTA + mobile auto-hide (behavior preserved from the previous
   build; the header itself is the main site's sticky teal .site-header) ---- */
@media (max-width: 1023px) {
  body[data-chrome='hidden'] .site-header {
    transform: translateY(-100%);
  }
}
.site-header {
  transition: transform 0.28s ease, box-shadow var(--transition-interactive);
  will-change: transform;
}

/* ---- Reveal animation (unchanged behavior) ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* rev25: five icon-carrying nav links plus the "dapperdoughnut.com" pill and
   full "Request Info Pack" button need more room than the main site's 1240px
   collapse point. rev17b widened this to 1360px, but a live-site width sweep
   found the full nav still overflows the viewport (clipping the Request Info
   Pack button) all the way up to ~1590px — common laptop resolutions like
   1366×768 and 1440×900 were affected. Widened to 1620px with a safety
   margin, verified clean at every width from 1241px up through 1920px. */
@media (min-width: 1241px) and (max-width: 1620px) {
  .nav__links {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
  .nav__actions .nav__franchise,
  .nav__actions .nav__sep {
    display: none;
  }
  .nav__mobile-panel {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) 0 var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }
  .nav__mobile-panel.is-open {
    display: flex;
  }
  .nav__mobile-panel a {
    padding: var(--space-3) var(--space-2);
    font-weight: 800;
    font-size: 1.1875rem;
    color: #ffffff;
    border-radius: var(--radius-sm);
  }
  .nav__mobile-panel a.nav__mlink {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .nav__mobile-panel a:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  .nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
}

/* rev17 (client): footer tightened to a slim strip — badge, Company links,
   and a single Franchise Contact link out to the site's Contact page.
   rev18 (client): near-black footer looked terrible on mobile — the footer is
   now the brand's core teal (same surface as the header), with the round badge
   as-is (no inversion), cream group labels, and white links. */
.site-footer {
  background: var(--color-primary);
  color: #ffffff;
  padding-block: var(--space-8) var(--space-6);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) clamp(var(--space-8), 5vw, var(--space-16));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.footer-badge {
  height: 56px;
  width: auto;
}
.footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
}
.footer-group .footer-h {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fbe1ad;
}
.footer-group a {
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.footer-group a:hover {
  color: #fbe1ad;
}
.site-footer .footer-bottom,
.site-footer .footer-bottom a {
  color: rgba(255, 255, 255, 0.85);
}
.site-footer .footer-bottom a:hover {
  color: #fbe1ad;
}

/* ---- Eyebrow color modifiers (script labels, main-site .eyebrow base) ---- */
.eyebrow--teal { color: var(--color-link-strong); }
.eyebrow--gold { color: var(--color-gold-deep); }
.eyebrow--pink { color: var(--color-coral); }

/* Shopie renders digits as doughnut ornaments — keep numerals in Grandview. */
.eyebrow__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  transform: rotate(2deg);
}



/* ==========================================================================
   NEW SECTIONS — inspired by the Franchise Info Pack PDF creative (2026-08-15)
   Hero pills, Welcome section, Dapper Drive spec-tile, Next Steps section.
   ========================================================================== */

/* ---- Hero pills ---- */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(var(--space-6), 2.5vw, var(--space-8));
}
.hero-pill {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.5em 1.1em;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- Welcome section ---- */
.welcome {
  padding-block: clamp(var(--space-12), 5vw, var(--space-20));
  background: var(--color-bg);
}
.welcome .section-head {
  max-width: none;
}
.welcome-copy {
  max-width: none;
  font-size: var(--text-lg);
  color: var(--color-charcoal-soft);
  margin-top: var(--space-2);
}
.welcome-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
}
.welcome-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.welcome-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: clamp(var(--space-6), 2.5vw, var(--space-8));
}
@media (max-width: 899px) {
  /* Three cards never divide evenly into 2 columns (creates an uneven
     2-then-1-stretched-full-width layout) — stack to a single column
     instead, matching every other card grid on the site. */
  .welcome-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .welcome-photos {
    gap: var(--space-3);
  }
}

/* ---- Dapper Drive spec tile (channel 04) ---- */
.ch-lead {
  color: var(--color-charcoal-soft);
  margin-bottom: var(--space-4);
}
.spec-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.spec-tile > div {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.spec-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

/* ---- Next Steps section ---- */
.next-steps {
  padding-block: clamp(var(--space-12), 5vw, var(--space-20));
  background: var(--color-surface-2);
}
.next-steps .section-head {
  max-width: none;
}
.steps-sub {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  max-width: none;
  color: var(--color-charcoal-soft);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
}
.step-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.step-tile .badge-num {
  margin-bottom: var(--space-1);
}
@media (max-width: 899px) {
  .steps-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 599px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.contact-band {
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
  background: var(--color-primary-hover);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.contact-band img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
}
.contact-band__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: #ffffff;
}
.contact-band__info strong {
  font-size: var(--text-lg);
}
.contact-band__info span {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}
.contact-band__info a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 599px) {
  .contact-band {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---- Floating "Request Info Pack" side tab ---- */
.floating-cta {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: var(--color-coral);
  color: #ffffff;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  padding: 1em 0.8em;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.floating-cta:hover {
  background: var(--color-coral-hover);
}
.floating-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(100%);
}
@media (max-width: 640px) {
  .floating-cta {
    top: auto;
    bottom: 18px;
    right: 14px;
    transform: none;
    writing-mode: horizontal-tb;
    border-radius: var(--radius-full);
    padding: 0.7em 1.1em;
    font-size: 0.8rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }
  .floating-cta.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(140%);
  }
}

/* ---- The Opportunity — rebuilt to match the Info Pack PDF (2026-08-15) ---- */
.opportunity {
  background: var(--color-bg);
  padding-block: clamp(var(--space-12), 5vw, var(--space-20));
}
.opportunity .section-head {
  max-width: none;
}
.opp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-5), 2.5vw, var(--space-7));
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
}
.opp-card {
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  position: relative;
  border-top: 5px solid transparent;
}
.opp-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.opp-desc {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-charcoal);
}
.opp-sub {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-charcoal-soft);
}
.opp-card--gold {
  background: var(--color-gold-highlight);
  border-top-color: var(--color-gold);
}
.opp-card--gold .opp-num {
  color: var(--color-gold-deep);
}
.opp-card--pink {
  background: color-mix(in srgb, #e55395 12%, #ffffff);
  border-top-color: var(--color-coral);
}
.opp-card--pink .opp-num {
  color: var(--color-coral);
}
.opp-card--sage {
  background: var(--color-sage);
  border-top-color: var(--color-primary-hover);
}
.opp-card--sage .opp-num {
  color: var(--color-primary-hover);
}
.opp-card--teal {
  background: color-mix(in srgb, #34e0e8 16%, #ffffff);
  border-top-color: var(--color-primary);
}
.opp-card--teal .opp-num {
  color: var(--color-link-strong);
}
.opp-photo {
  margin-top: clamp(var(--space-6), 2.5vw, var(--space-8));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.opp-photo img {
  width: 100%;
  height: clamp(220px, 32vw, 380px);
  object-fit: cover;
  display: block;
}
.opp-sources {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: none;
}
@media (max-width: 767px) {
  .opp-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FRANCHISE-SITE-ONLY BRAND OVERRIDE (2026-08-15)
   Client request: header/footer should NOT be an exact color clone of the
   main dapperdoughnut.com site — it should read as a distinct (but still
   on-brand) property. Header/footer switch from core teal to core magenta
   pink. Since pink is now the header/footer color, every "Request Info
   Pack" CTA (button + floating tab) moves off pink to the brand's deep
   teal-green so it still pops against its background instead of blending
   into it. This file loads AFTER components.css, so these rules override
   the shared .btn--order / .site-header / .site-footer rules on THIS site
   only — components.css itself (shared with the real production site) is
   never touched.
   ========================================================================== */
.site-header {
  background: #e55395;
}
.site-footer {
  background: #e55395;
}
.nav__franchise:hover {
  color: #e55395; /* keep the white-pill hover text on-brand for a pink header */
}
.btn--order {
  background: #007241;
  color: #ffffff;
}
.btn--order:hover {
  background: color-mix(in srgb, #007241 82%, #ffffff);
  color: #ffffff;
}
.topbar a {
  color: color-mix(in srgb, #007241 55%, #ffffff 45%); /* light tint of the same approved deep teal-green, legible on near-black */
}
.floating-cta {
  background: #007241;
}
.floating-cta:hover {
  background: color-mix(in srgb, #007241 82%, #ffffff);
}

/* ==================================================================
   rev26 · Hero v2 — full-bleed sunset trailer photo, bold white copy
   Desktop: full photo behind everything, text left over a soft dark
   fade (sunset/palms stay clear on the left-mid), pills 2×2, CTA last.
   Mobile: photo as full backdrop (approved overlay look).
   ================================================================== */
.hero-v2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #0d0d0e;
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.hero-v2__media { position: absolute; inset: 0; z-index: 0; }
.hero-v2__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 24% 42%;
  display: block;
}
.hero-v2__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(97deg, rgba(10,10,11,0.66) 0%, rgba(10,10,11,0.44) 40%, rgba(10,10,11,0.1) 66%, rgba(10,10,11,0) 82%);
}
.hero-v2__content {
  position: relative; z-index: 1;
  width: 100%;
  padding: 90px clamp(24px, 5vw, 80px);
}
.hero-v2__eyebrow {
  font-family: var(--font-body); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 13px; margin: 0 0 14px;
  color: var(--color-gold-light);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-v2__headline {
  font-family: var(--font-display); font-weight: 800; color: #ffffff;
  font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.06;
  letter-spacing: -0.01em; margin: 0 0 6px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.hero-v2__headline span { display: block; }
.hero-v2__headline .hl-accent { color: var(--color-gold-light); }
.hero-v2__sub {
  font-family: var(--font-body);
  font-weight: 800; /* bold white per client */
  color: #ffffff;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55;
  margin: 16px 0 0; max-width: 620px; /* ~3 lines on desktop */
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.hero-v2__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 12px;
  margin: 26px 0 0;
}
.hero-v2 .proof-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 800; font-size: 14px;
  white-space: nowrap;
  background: rgba(13,13,14,0.45);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  backdrop-filter: blur(2px);
}
.hero-v2 .proof-icon {
  position: relative; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fffdf9; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.hero-v2 .proof-icon svg { width: 20px; height: 20px; }
.hero-v2 .proof-num {
  position: absolute; top: -5px; left: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.3);
}
.hero-v2 .pn--gold { background: var(--color-gold-deep); }
.hero-v2 .pn--pink { background: var(--color-coral); }
.hero-v2 .pn--teal { background: var(--color-primary); }
.hero-v2 .pn--ink  { background: var(--color-charcoal); }
.hero-v2__actions { margin-top: 30px; }
.hero-v2__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #007241; color: #fffdf9;
  font-family: var(--font-body); font-weight: 800; font-size: 17px;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: background 160ms ease;
}
.hero-v2__cta:hover { background: color-mix(in srgb, #007241 82%, #ffffff); }

@media (max-width: 900px) {
  /* rev27: the sticky topbar+header eat ~150px on phones, so a 100vh hero
     with text pinned 56vh down landed visitors on empty sky. Size the hero
     to the REMAINING visible screen and let the text block rise into the
     first viewport — wording visible on landing, photo still the backdrop. */
  .hero-v2 {
    min-height: calc(100vh - 150px);
    min-height: calc(100svh - 150px);
    align-items: flex-end;
  }
  .hero-v2__media img { object-position: 32% 40%; }
  .hero-v2__media::after {
    background: linear-gradient(to top, rgba(10,10,11,0.62) 0%, rgba(10,10,11,0.30) 45%, rgba(10,10,11,0.06) 72%);
  }
  .hero-v2__content { padding: 96px 24px 40px; }
  .hero-v2__sub { max-width: none; }
  .hero-v2__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .hero-v2__proof { gap: 9px; }
  .hero-v2 .proof-pill { font-size: 12px; padding: 5px 10px 5px 5px; }
  .hero-v2 .proof-icon { width: 32px; height: 32px; }
}

/* rev26 · craving strip — salvaged Welcome photos placed just before the ask */
.craving { padding-block: clamp(var(--space-8), 4vw, var(--space-12)) 0; }

/* rev26 · compact "what happens next" reassurance in the CTA intro column
   (replaces the removed Next Steps section — answers "what am I committing
   to if I submit?" without a full section slowing the path to the form) */
.cta-next { margin-top: var(--space-8); }
.cta-next__label {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12.5px; color: var(--color-gold-deep); margin: 0 0 8px;
}
.cta-next__list {
  margin: 0; padding-left: 1.2em;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px; line-height: 1.5;
}
.cta-next__list li::marker { font-weight: 800; }

/* ---- rev27 (client): "Why Dapper" ported wholesale from the dapperdoughnut.com
   v36/v37 redesign — candy-stripe band, real-photo VS comparison cards with
   captions below (not overlaid), and a 4-step photographic process filmstrip.
   Replaces the old line-icon panels + why-grid card row (incl. "60+ Menu Items"
   / "Catering Ready", already dropped on the main site). ---- */
.section-head--full { max-width: none; }

.why-band--candy {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, #ff7dac 16%, #ffffff) 0 26px,
    #ffffff 26px 52px,
    color-mix(in srgb, #34e0e8 16%, #ffffff) 52px 78px,
    #ffffff 78px 104px,
    color-mix(in srgb, #f6b333 18%, #ffffff) 104px 130px,
    #ffffff 130px 156px
  );
  color: #151516;
}
.why-band--candy .section-head h2,
.why-band--candy .why-band__manifesto { color: #151516; }
.why-band--candy .section-head .eyebrow { color: #e55395; }
.why-band--candy .why-band__manifesto { max-width: none; margin-left: 0; margin-right: 0; opacity: 1; font-weight: 500; }
.why-band--candy .why-band__headline { line-height: 1.05; }

/* VS cards: full photo on top, caption card below (no text overlaid on the photo) */
.why-vs__card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #ffffff;
  position: relative;
}
.why-vs__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.why-vs__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-vs__body { padding: clamp(var(--space-5), 1.8vw, var(--space-8)); flex: 1 1 auto; }
.why-vs__body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.why-vs__body p { margin: 0; font-size: clamp(0.9rem, 0.8rem + 0.2vw, 1.0625rem); }
.why-vs__card--old { background: #2a2a2c; color: #b8b8bd; transform: rotate(-1.2deg); }
.why-vs__card--old h3 { color: #ffffff; }
.why-vs__card--old .why-vs__photo img { filter: saturate(0.55) brightness(0.9); }
.why-vs__card--dapper { border: 6px solid #e55395; transform: rotate(1.2deg); color: #2b2b2d; }
.why-vs__card--dapper h3 { color: #e55395; }
.why-vs__sticker {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: #f6b333; color: #151516;
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5em 0.9em; border-radius: 999px;
  transform: rotate(6deg); box-shadow: var(--shadow-md);
}
@media (max-width: 720px) { .why-vs__card--old, .why-vs__card--dapper { transform: none; } }

/* 4-step photographic process filmstrip */
.why-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-10) auto clamp(var(--space-12), 6vw, var(--space-16));
  max-width: var(--module-wide);
}
.why-process__badgewrap {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-4), 2vw, var(--space-6)) clamp(var(--space-6), 4vw, var(--space-10));
  text-align: center;
}
.why-process__badgewrap .fresh-badge { display: block; width: min(360px, 100%); height: auto; margin-inline: auto; }
.why-process__badgesub { display: block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #2b2b2d; }
.why-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  width: 100%;
}
@media (max-width: 900px) { .why-process__steps { grid-template-columns: 1fr 1fr; } }
.why-process__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.why-process__media { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 5px solid #ffffff; }
.why-process__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-process__num {
  position: absolute; top: var(--space-2); left: var(--space-2);
  width: 40px; height: 40px; border-radius: 50%;
  color: #151516;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-base);
  box-shadow: var(--shadow-md);
  border: 3px solid #ffffff;
}
.why-process__num--magenta { background: #e55395; color: #ffffff; }
.why-process__num--gold { background: #f6b333; }
.why-process__num--teal { background: #34e0e8; }
.why-process__num--coral { background: #ff7dac; }
.why-process__step p { font-weight: 800; font-size: var(--text-base); color: #151516; margin: 0; line-height: 1.3; }

.why-band__cta { text-align: center; margin-top: var(--space-4); }
.why-band__cta .btn { white-space: normal; max-width: 100%; line-height: 1.3; }

/* ---- v30: /apply/ Request for Consideration questionnaire ---- */
.apply-hero{padding-block:var(--space-12) var(--space-10);background:var(--color-surface-offset,#fdf6f8)}
.apply-hero h1{margin:var(--space-2) 0 var(--space-4)}
.apply-hero p{max-width:none;font-size:var(--text-lg)}
.rc-sec{font-size:var(--text-base);margin:var(--space-8) 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-divider);color:var(--color-primary)}
.rc-sec:first-of-type{margin-top:0}
.rc-fs{border:none;padding:0;margin:0 0 var(--space-4)}
.rc-fs legend{display:block;font-weight:600;font-size:var(--text-sm);margin-bottom:var(--space-2);padding:0}
.rc-opts{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5)}
.rc-opt{text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-sm);cursor:pointer;font-weight:400}
.rc-opt input[type="radio"]{width:1.1rem;height:1.1rem;accent-color:var(--color-primary);margin:0}
.rc-inline{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:720px){ .apply-hero h1{font-size:1.75rem} .apply-hero p{font-size:1rem} .rc-sec{font-size:1.125rem} .rc-fs legend{font-size:.95rem} }

/* ---- v31: Apply Now block in CTA section ---- */
.cta-apply{margin-top:var(--space-8);padding:var(--space-5);border:2px solid var(--color-divider);border-radius:var(--radius-lg,16px);background:rgba(255,255,255,.55)}
.cta-apply__label{font-weight:800;font-size:var(--text-lg);margin:0 0 var(--space-2)}
.cta-apply p{margin:0 0 var(--space-4)}
.cta-apply__btn{display:inline-block}