/* ==========================================================================
   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, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
@media (max-width: 899px) {
  .cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.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;
  }
}

/* rev17b: five icon-carrying nav links need more room than the main site's
   1240px collapse point — QA showed the Request button clipping at ~1300px,
   so the hamburger takes over up to 1360px on this page. */
@media (min-width: 1241px) and (max-width: 1360px) {
  .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);
}