/*
 * ============================================================================
 * SpotrOS Shared Design System — "Advertise Polish, TEAL-LED"
 * ============================================================================
 *
 * PURPOSE
 * -------
 * Generalizes the /advertise/ page's visual system (eyebrow-with-live-dot,
 * bento layouts, dark section bands, generous spacing, serif-italic heading
 * accents, polished cards/buttons/forms) into a REUSABLE, brand-neutral,
 * SITE-WIDE layer that any template opts into via classes.
 *
 * KEY DECISION (BINDING): TEAL-LED.
 *   /advertise/ used AMBER as its primary CTA/accent color. This shared layer
 *   flips that: TEAL (--brand-primary #0D7E8A / hover --brand-primary-hover
 *   #0A5C65) is the PRIMARY accent + CTA color everywhere. AMBER survives ONLY
 *   as a small SECONDARY highlight (see "AMBER — SECONDARY ONLY" markers).
 *
 * ENQUEUE / CASCADE
 * -----------------
 * Load order (functions.php): fonts -> colors.css -> style.css -> THIS FILE
 * -> (advertise.css only on template-advertise.php). So:
 *   - All colors.css tokens are available (loaded first).
 *   - This layer is the LAST global sheet: at equal specificity it wins over
 *     style.css by source order, so it can refine .btn etc. cleanly.
 *   - It is ADDITIVE: nothing here applies unless a page adds the new classes,
 *     so rollout is incremental and low-risk.
 *
 * NAMESPACE (all namespace-clear per the current-site audit — zero existing
 * uses): .section-eyebrow, .bento, .section--dark, .ds-* helpers, .sds-title.
 * We deliberately DO NOT re-declare the site-wide heading font rule
 * (style.css:1425-1434 already applies Inter 800 / -0.025em) — we only ADD the
 * serif-italic <em> accent, the eyebrow, dark bands, spacing rhythm and polish.
 *
 * TOKEN DISCIPLINE
 * ----------------
 * Reference semantic tokens from colors.css (--brand-primary, --text-primary,
 * --bg-dark, --text-on-dark, ...). We do NOT hardcode teal/navy/gray hex where
 * a token exists. A small set of DS-scoped custom properties below fills the
 * gaps colors.css does not tokenize (mid-teal tints for dark bands, cream
 * amber surfaces, one canonical radius set) so downstream rules stay clean and
 * a future rebrand still only touches primitives + these DS vars.
 *
 * WCAG 2.2 AA
 * -----------
 * Every text/UI pairing below is chosen to clear >=4.5:1 (body) / >=3:1
 * (large text + UI). Contrast notes are inline at each risky pairing. The
 * amber-on-light contrast trap from /advertise/ (bright #F0A84D = 1.82:1 on
 * light) is handled by scoping: bright amber (--color-amber-500) is used ONLY
 * on dark bands; on light surfaces amber text is --brand-accent (#B45309,
 * 5.02:1). Focus is teal, 3px, via :focus-visible. Motion respects
 * prefers-reduced-motion.
 * ============================================================================
 */


/* ==========================================================================
   0. DESIGN-SYSTEM TOKENS (scoped additions; fill colors.css gaps)
   These do NOT redefine colors.css semantics — they add DS-only surfaces and
   pick ONE canonical radius, resolving the --radius-xl fallback drift the
   audit flagged (advertise.css used 20px/24px/32px for the same token).
   ========================================================================== */
:root {
  /* Canonical radii for this layer (avoids the colors.css rem-fallback drift).
     Pinned in px so a reorder of stylesheets can never silently shrink them. */
  --ds-radius-card:    20px;   /* cards, panels */
  --ds-radius-feature: 28px;   /* hero visuals, estimator-style framed panels */
  --ds-radius-input:   10px;   /* form fields */
  --ds-radius-pill:    9999px; /* eyebrows, chips, buttons */

  /* Section spacing rhythm (advertise: 5rem heavy / 4rem light -> 3rem mobile) */
  --ds-section-y:        5rem;   /* standard/heavy band vertical padding */
  --ds-section-y-light:  4rem;   /* lighter connective band */
  --ds-section-x:        1.5rem; /* horizontal gutter (desktop) */
  --ds-section-y-mobile: 3rem;
  --ds-section-x-mobile: 1rem;
  --ds-header-max:       42rem;  /* centered section-header measure */

  /* Dark-band accent surfaces (teal-led). colors.css has no mid-teal-on-dark
     tint, so define here. --ds-teal-on-dark clears AA on navy-900. */
  --ds-teal-on-dark:      var(--color-teal-300);          /* #6DD4DC — ~8.9:1 on navy-900 */
  --ds-teal-tint-on-dark: rgba(13, 126, 138, 0.22);       /* teal chip bg on dark */
  --ds-teal-glow:         rgba(13, 126, 138, 0.18);       /* radial light source on dark */
  --ds-hairline-on-dark:  rgba(255, 255, 255, 0.10);      /* dividers on dark */
  --ds-rule-on-dark:      rgba(109, 212, 220, 0.45);      /* teal left-rule on dark */

  /* Teal-tint eyebrow/chip on LIGHT (mirrors --brand-primary-light usage) */
  --ds-teal-tint:         var(--brand-primary-light);     /* #EEF9FA */
  --ds-teal-tint-border:  var(--color-teal-200);          /* #A8E6EB */

  /* AMBER — SECONDARY ONLY. Cream surfaces + small light-bg highlight text.
     Bright amber (amber-500) is dark-band-only. */
  --ds-cream-bg:      var(--color-amber-50);              /* #FFFAF4 */
  --ds-cream-bg-2:    #FDF1DF;                            /* gradient partner (amber-200-ish) */
  --ds-cream-border:  var(--color-amber-300);             /* #F8D4A0 */
  --ds-amber-hi:      var(--brand-accent);                /* #B45309 — light-bg amber text, 5.02:1 */
  --ds-amber-hi-dark: var(--color-amber-500);             /* #F0A84D — dark-band amber text, 7.9:1 */

  /* Depth (reuse colors.css shadow tokens; add teal-led CTA + selection glow) */
  --ds-shadow-cta:   0 8px 24px rgba(13, 126, 138, 0.25); /* teal CTA glow (was amber on /advertise/) */
  --ds-shadow-chip:  0 4px 12px rgba(13, 126, 138, 0.20); /* selected chip depth */
}


/* ==========================================================================
   1. SECTION SPACING RHYTHM
   Opt-in vertical rhythm matching /advertise/. Padding lives on the section;
   inner .container (theme-global max-width wrapper) is untouched.
   ========================================================================== */
.ds-section {
  padding: var(--ds-section-y) var(--ds-section-x);
}
.ds-section--light {            /* lighter connective bands (founder, communities) */
  padding: var(--ds-section-y-light) var(--ds-section-x);
}
.ds-section--hero {             /* asymmetric: more top than bottom */
  padding: var(--ds-section-y) var(--ds-section-x) var(--ds-section-y-light);
}
/* Optional tonal grounds (tokens, so dark-mode / rebrand stay consistent) */
.ds-section--subtle { background: var(--bg-subtle); }   /* #F9FAFB */
.ds-section--page   { background: var(--bg-page); }     /* #fff */

@media (max-width: 900px) {
  .ds-section,
  .ds-section--light,
  .ds-section--hero {
    padding: var(--ds-section-y-mobile) var(--ds-section-x-mobile);
  }
}


/* ==========================================================================
   2. SECTION HEADER + TITLE ACCENT
   We reuse the EXISTING global heading rule (Inter 800 / -0.025em on
   .section-title etc.) — we do NOT redeclare font/weight (audit §2a: don't add
   a 4th copy). We ADD: (a) the centered header block, (b) the signature
   serif-italic <em> accent, TEAL-LED by default.
   ========================================================================== */
.ds-section-header {
  text-align: center;
  max-width: var(--ds-header-max);
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/*
 * Serif-italic <em> accent — the signature device. Scoped to .ds-accent so it
 * NEVER collides with the site-wide .section-title rule or the base h1-h6 rule.
 * Add .ds-accent to any heading; wrap the accent word in <em>.
 * TEAL-LED: default accent is --brand-primary (teal). On dark bands the
 * .section--dark scope re-colors it to bright amber as a SMALL secondary pop.
 */
.ds-accent em,
.ds-accent-em {
  font-family: var(--font-display, 'Instrument Serif'), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--brand-primary);   /* TEAL (was amber #F0A84D on /advertise/) */
  letter-spacing: -0.02em;
}

/* Section subhead / intro paragraph. Default = light-bg color. */
.ds-section-sub {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text-secondary);   /* #4B5563, 7.56:1 on white */
  max-width: 40rem;
}


/* ==========================================================================
   3. EYEBROW (+ live dot) — .section-eyebrow
   Generalizes .adv-eyebrow. TEAL is the DEFAULT variant (was amber on
   /advertise/). Folds in the 4 bespoke eyebrows the audit found
   (.badge-label, .mla-eyebrow, .bridge-card-eyebrow, .sgb-eyebrow).
   ========================================================================== */
.section-eyebrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;                /* never wider than its container (long labels wrap, not overflow) */
  padding: 5px 14px;
  border-radius: var(--ds-radius-pill);
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 0.75rem;             /* 12px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* TEAL variant — DEFAULT. #0A5C65 on #EEF9FA = ~6.1:1. PASS. */
.section-eyebrow,
.section-eyebrow--teal {
  background: var(--ds-teal-tint);        /* #EEF9FA */
  color: var(--brand-primary-hover);      /* #0A5C65 */
}

/*
 * AMBER — SECONDARY ONLY. Use sparingly (a single "energy" eyebrow per page at
 * most), never as the primary section marker. Light/dark contrast branch:
 *   - Light bg: dark amber --brand-accent #B45309 on amber-50 tint = ~4.7:1 PASS
 *     (bright #F0A84D would be 1.82:1 FAIL — do not use on light).
 *   - Dark bg: handled by the .section--dark scope below (bright amber, 7.9:1).
 */
.section-eyebrow--amber {
  background: var(--color-amber-100);        /* #FEF4E8 tint */
  color: var(--brand-accent-hover);          /* #7C3D0A on #FEF4E8 = ~6.6:1 (was
                                                amber-800 #B45309 at 4.62:1 — knife-edge) */
}

/* Dot-eyebrow flex modifier: inline dot sits centered before the label.
   flex-wrap + a non-shrinking dot let a long label wrap cleanly under the dot
   instead of forcing horizontal overflow (e.g. a 5-item product-list eyebrow). */
.section-eyebrow--dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-radius: 14px;            /* softer than full-pill when it wraps to 2 lines */
}
.section-eyebrow--dot .section-eyebrow-dot { flex: 0 0 auto; }

/* Live dot — TEAL-LED (was amber #B45309 on /advertise/). Static glow ring;
   the optional pulse is added by --live below, gated for reduced motion. */
.section-eyebrow-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--ds-radius-pill);
  background: var(--brand-primary);                 /* teal */
  box-shadow: 0 0 0 3px rgba(13, 126, 138, 0.20);   /* soft teal glow ring */
}

/* Animated "live" variant — reuses an opacity blink; opt-in + motion-safe. */
@media (prefers-reduced-motion: no-preference) {
  .section-eyebrow-dot--live {
    animation: ds-pulse-fade 1.5s ease infinite;
  }
}
@keyframes ds-pulse-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


/* ==========================================================================
   4. DARK SECTION BAND — .section--dark
   Generalizes .adv-pillars / .adv-proof / .adv-cta-bottom. Uses the
   contrast-verified on-dark TOKENS (per audit §4) rather than /advertise/'s
   hardcoded #bcc3d0/#9aa3b2 grays. TEAL-LED accents; amber only as a small pop.
   ========================================================================== */
.section--dark {
  background: var(--bg-dark);      /* var, not raw navy — safe if dark-mode flips it */
  color: var(--text-inverse);      /* #fff, 15.9:1 on navy-900 */
}

/* Heading + accent recolor on dark. Titles white; <em> accent stays TEAL-LED
   via a light teal that reads on navy. Amber is offered as an OPTIONAL small
   secondary highlight (.ds-accent--amber), not the default. */
.section--dark .section-title,
.section--dark .ds-section-title,
.section--dark .sds-title,
.section--dark h2,
.section--dark h3 {
  color: var(--text-inverse);
}
.section--dark .ds-accent em,
.section--dark .ds-accent-em {
  color: var(--ds-teal-on-dark);   /* #6DD4DC — teal-led on dark, ~8.9:1. PASS */
}
/* AMBER — SECONDARY ONLY: opt-in bright-amber accent for a single energy pop
   on a dark band. amber-500 on navy-900 = ~7.9:1. PASS (dark-only). */
.section--dark .ds-accent--amber em,
.section--dark .ds-accent-em.ds-accent--amber {
  color: var(--ds-amber-hi-dark);  /* #F0A84D */
}

.section--dark .ds-section-sub {
  color: var(--text-on-dark);      /* #D1D5DB, 10.28:1 on navy-900. PASS */
}
.section--dark .ds-section-sub--muted,
.section--dark .ds-meta {
  color: var(--text-on-dark-muted);/* #9CA3AF, 6.26:1 on navy-900. PASS */
}
.section--dark .section-eyebrow--teal,
.section--dark .section-eyebrow {
  background: var(--ds-teal-tint-on-dark);   /* rgba teal on dark */
  color: var(--ds-teal-on-dark);             /* #6DD4DC on the tint over navy. PASS */
}
/* AMBER — SECONDARY ONLY: dark-band amber eyebrow, bright amber (dark-only). */
.section--dark .section-eyebrow--amber {
  background: rgba(240, 168, 77, 0.15);
  color: var(--ds-amber-hi-dark);            /* #F0A84D, 7.9:1 on navy. PASS */
}
.section--dark .section-eyebrow-dot {
  background: var(--ds-teal-on-dark);        /* lighter teal so the dot reads on navy */
  box-shadow: 0 0 0 3px rgba(109, 212, 220, 0.22);
}

/* Links on dark = light teal, underlined (not color-alone). */
.section--dark a:not(.btn) {
  color: var(--ds-teal-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* GUARD: light/white cards CAN sit on a dark band. Links inside them must keep a
   dark-on-light color, NOT inherit the light-teal above (which fails on white).
   Covers the DS white cards; bespoke white cards on dark bands should likewise
   not carry .section--dark, or add their class here. */
.section--dark .bento--teal a:not(.btn),
.section--dark .bento--cream a:not(.btn),
.section--dark .ds-card a:not(.btn),
.section--dark .ds-gallery-card a:not(.btn),
.section--dark .ds-step a:not(.btn) {
  color: var(--brand-primary-hover);   /* teal-800 on white = 7.69:1 */
}

/* Optional radial teal glow light-source for dark panels/cards. */
.section--dark.ds-glow,
.ds-glow--dark {
  background-image: radial-gradient(circle at 100% 100%, var(--ds-teal-glow) 0%, transparent 50%);
}

/* ==========================================================================
   TEAL CTA BAND — pure-white text (DESIGN.md rule 2). PREVENTIVE GUARD.
   On a TEAL #0D7E8A ground the on-navy .ds-* tokens (#D1D5DB 3.26:1, #6DD4DC 2.77:1)
   FAIL AA. Force pure #FFFFFF (4.81:1 PASS). Scope = teal band = .cta-section WITHOUT
   .section--dark (navy), or an explicit .section--teal hook. Leaves every
   .cta-section.section--dark (navy, already PASS) untouched.
   ========================================================================== */
.cta-section:not(.section--dark) .section-title,
.cta-section:not(.section--dark) .cta-title,
.cta-section:not(.section--dark) .ds-section-sub,
.cta-section:not(.section--dark) .cta-desc,
.cta-section:not(.section--dark) .ds-accent-em,
.cta-section:not(.section--dark) .ds-accent em,
.section--teal .section-title,
.section--teal .ds-section-sub,
.section--teal .cta-desc,
.section--teal .ds-accent-em,
.section--teal .ds-accent em {
  color: #FFFFFF;
}
.cta-section:not(.section--dark) .section-eyebrow,
.cta-section:not(.section--dark) .section-eyebrow--teal,
.section--teal .section-eyebrow,
.section--teal .section-eyebrow--teal {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
.cta-section:not(.section--dark) a:not(.btn),
.section--teal a:not(.btn) {
  color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px;
}

/* Left-rule column accent (was amber on /advertise/; now teal-led). */
.ds-rule-left {
  border-left: 2px solid var(--ds-rule-on-dark);
  padding-left: 1rem;
}

/* Hairline dividers on dark. */
.ds-divider-dark {
  border-top: 1px solid var(--ds-hairline-on-dark);
}

/*
 * Dark-band OUTLINE button. Generalizes .btn-outline-light and the
 * .local-hero .btn-outline patch the audit flagged: on dark, the global
 * .btn-outline is dark-on-dark, so we override it here. White 1.5px border on
 * navy = well over 3:1 for a UI component. PASS.
 */
.section--dark .btn-outline,
.btn-outline-light {
  background: transparent;
  color: var(--text-inverse);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.section--dark .btn-outline:hover,
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   5. BUTTONS — TEAL-LED refinement
   The global .btn/.btn-primary already exist in style.css (teal). We only ADD
   a polished PRIMARY treatment (teal fill + teal glow — the CTA color that was
   AMBER on /advertise/ is now TEAL) and an AMBER-SECONDARY variant kept small.
   We DO NOT touch the intentional red .btn-primary overrides (bundle-bridge,
   sgb) — those are descendant-scoped and outrank this.
   ========================================================================== */

/* Primary CTA polish — additive, opt-in via .btn.ds-btn-primary.
   TEAL-LED: teal-800 fill + white = 7.69:1 (comfortable headroom for a
   site-wide primary CTA; teal-700 would be a tight 4.81:1). Hover -> teal-900. */
.btn.ds-btn-primary,
.ds-btn-primary {
  background: var(--brand-primary-hover);    /* teal-800 #0A5C65, white = 7.69:1 */
  color: var(--text-inverse);
  border: none;
  border-radius: var(--ds-radius-pill);
  padding: 14px 28px;
  min-height: 44px;                          /* touch target */
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--ds-shadow-cta);          /* teal glow (was amber) */
}
.btn.ds-btn-primary:hover,
.ds-btn-primary:hover {
  background: var(--color-teal-900);         /* #073F45 -> white = ~10.6:1. PASS */
}

/*
 * AMBER — SECONDARY ONLY. A single, deliberately-rare warm CTA (e.g. one
 * "energy" action on the advertise/DOOH surface). NOT the site default.
 * amber-800 fill + white = 5.02:1. PASS. Keep usage to <=1 per page.
 */
.btn.ds-btn-amber,
.ds-btn-amber {
  background: var(--brand-accent);           /* #B45309 */
  color: var(--text-inverse);
  border: none;
  border-radius: var(--ds-radius-pill);
  padding: 14px 28px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(180, 83, 9, 0.25);
}
.btn.ds-btn-amber:hover,
.ds-btn-amber:hover {
  background: var(--brand-accent-hover);     /* #7C3D0A. white = ~7:1. PASS */
}

/* Actions row helper. */
.ds-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.ds-actions--center { justify-content: center; }


/* ==========================================================================
   6. BENTO — .bento / .bento-grid
   New PEER component (not a rename of .spotros-card, per audit + CARD-FACE
   memory). Color-blocked feature cards. TEAL-LED: the "brand" card (c2 on
   /advertise/) is promoted to the PRIMARY look; the navy card leads with TEAL
   accents; amber survives only on ONE warm cream card.
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile */
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .bento-grid { grid-template-columns: repeat(3, 1fr); }
}
.bento-grid--2 { }
@media (min-width: 900px) {
  .bento-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Shared card shell. Hover = border-color swap only (matches /advertise/;
   no lift). */
.bento {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bento-tag {                     /* uppercase pill at top of card */
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.bento-title {
  font-family: var(--font-body, Inter), sans-serif;
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.bento-title em {                /* serif-italic accent, colored per variant */
  font-family: var(--font-display, 'Instrument Serif'), Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
.bento-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Variant: TEAL BRAND (the DEFAULT / primary look; was c2) --- */
.bento--teal {
  background: var(--bg-page);
  border: 1.5px solid var(--border-light);
  color: var(--text-primary);
}
.bento--teal .bento-tag {
  background: var(--ds-teal-tint);
  color: var(--brand-primary-hover);   /* #0A5C65 on #EEF9FA, ~6.1:1 */
}
.bento--teal .bento-title em { color: var(--brand-primary); }   /* teal */
.bento--teal .bento-body { color: var(--text-secondary); }
.bento--teal:hover { border-color: var(--brand-primary); }      /* teal hover */

/* --- Variant: DARK NAVY, TEAL-LED accents (was c1: navy+amber). --- */
.bento--dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
  background-image: radial-gradient(circle at 100% 100%, var(--ds-teal-glow) 0%, transparent 50%);
}
.bento--dark .bento-tag {
  background: var(--ds-teal-tint-on-dark);
  color: var(--ds-teal-on-dark);       /* #6DD4DC, PASS on navy */
}
.bento--dark .bento-title { color: var(--text-inverse); }
.bento--dark .bento-title em { color: var(--ds-teal-on-dark); } /* teal-led accent */
.bento--dark .bento-body { color: var(--text-on-dark); }        /* #D1D5DB, 10.28:1 */
/* Inline CTA link inside the dark bento — lift teal so it reads on navy (the
   base .service-link teal-700 is too dark on the navy ground). Underlined so the
   affordance is never color-alone. #6DD4DC on navy-900 ~8.9:1. PASS. */
.bento--dark .service-link {
  color: var(--ds-teal-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Variant: CREAM/AMBER — AMBER SECONDARY ONLY. One warm card max. --- */
.bento--cream {
  background: linear-gradient(135deg, var(--ds-cream-bg) 0%, var(--ds-cream-bg-2) 100%);
  border: 1.5px solid var(--ds-cream-border);
  color: var(--text-primary);
}
.bento--cream .bento-tag {
  background: rgba(124, 61, 10, 0.12);
  color: var(--brand-accent-hover);    /* #7C3D0A on cream gradient end #FDF1DF = ~6.4:1
                                          (amber-800 #B45309 was exactly 4.50:1 knife-edge) */
}
.bento--cream .bento-title em { color: var(--brand-accent-hover); }   /* dark amber */
.bento--cream .bento-body { color: var(--text-secondary); }
.bento--cream:hover { border-color: var(--brand-accent); }


/* ==========================================================================
   7. STAT CHIP — .ds-chip
   Generalizes .adv-bento-chip. TEAL-LED: the big stat number is now teal
   (was amber #C97A1F). Sourced-stat card.
   ========================================================================== */
.ds-chips {
  list-style: none;
  padding: 0;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 64rem;
}
@media (min-width: 768px) {
  .ds-chips { grid-template-columns: repeat(3, 1fr); }
}
.ds-chip {
  padding: 1.25rem 1.125rem 1rem;
  border-radius: 0.625rem;
  background: var(--bg-subtle);           /* #F9FAFB */
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
/* Big numeral — TEAL-LED, sans 800 (display size). teal-700 on #F9FAFB ~4.6:1;
   at 1.875rem/800 it is large text (>=3:1). PASS. */
.ds-chip-big {
  display: block;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-primary);            /* teal (was amber #C97A1F) */
}
.ds-chip-label {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-primary);             /* navy, 17:1 */
}
.ds-chip-source {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-muted);               /* #6B7280, 4.83:1. PASS */
}


/* ==========================================================================
   8. SERIF-ITALIC DISPLAY NUMBER — .ds-stat
   Generalizes .adv-step-num / .adv-est-stat-value / .adv-pillar-word. TEAL-LED
   default (teal, like /advertise/'s step numbers); amber is dark-band-only pop.
   ========================================================================== */
.ds-stat {
  font-family: var(--font-display, 'Instrument Serif'), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-primary);            /* teal-led */
  margin: 0;
}
.ds-stat--xl { font-size: 3.375rem; }     /* step numeral scale */
.ds-stat--lg { font-size: 2.75rem; }
.ds-stat--md { font-size: 2.5rem; }
/* On dark, lift to a lighter teal so it reads on navy. */
.section--dark .ds-stat { color: var(--ds-teal-on-dark); }
/* AMBER — SECONDARY ONLY: dark-band amber stat pop (dark-only, 7.9:1). */
.section--dark .ds-stat--amber { color: var(--ds-amber-hi-dark); }


/* ==========================================================================
   9. STEPS — .ds-steps
   Generalizes .adv-steps. 5-track grid (card·arrow·card·arrow·card). TEAL-LED:
   numerals + arrows already teal on /advertise/ (kept); step-title <em> flips
   from amber -> teal.
   ========================================================================== */
.ds-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.ds-step {
  background: var(--bg-page);
  border: 1.5px solid var(--border-light);
  border-radius: var(--ds-radius-card);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.ds-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);            /* teal */
  font-size: 1.5rem;
  padding: 0 0.5rem;
}
.ds-step-title {
  font-family: var(--font-body, Inter), sans-serif;
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}
.ds-step-title em {
  font-family: var(--font-display, 'Instrument Serif'), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--brand-primary);            /* TEAL (was #B45309 amber) */
}
.ds-step-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.ds-steps-foot {
  margin: 2.25rem 0 0;
  padding: 1.125rem 1.5rem;
  background: var(--bg-page);
  border: 1.5px dashed var(--brand-primary);   /* teal dashed */
  border-radius: 14px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .ds-steps-grid { grid-template-columns: 1fr; }
  .ds-step-arrow { transform: rotate(90deg); padding: 0.5rem 0; }
}


/* ==========================================================================
   10. GALLERY — .ds-gallery
   Generalizes .adv-gallery. Image-forward 2-up card grid. Tag flips amber->teal.
   ========================================================================== */
.ds-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .ds-gallery-grid { grid-template-columns: 1fr 1fr; }
}
.ds-gallery-card {
  background: var(--bg-page);
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-gallery-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-dark);   /* navy fallback behind loading images */
}
.ds-gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ds-gallery-body { padding: 0.875rem 1rem 1rem; }
.ds-gallery-tag {
  display: inline-block;
  margin-bottom: 0.375rem;
  padding: 3px 9px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-teal-tint);        /* teal tint (was cream/amber) */
  color: var(--brand-primary-hover);      /* #0A5C65 */
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ds-gallery-body h3 {
  font-weight: 800;
  font-size: 0.90625rem;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.ds-gallery-body p {
  font-size: 0.78125rem;
  color: var(--text-muted);               /* 4.83:1. PASS */
  line-height: 1.5;
  margin: 0;
}


/* ==========================================================================
   11. CHIP-CLOUD ROW — .ds-cloud (communities pattern)
   Generalizes .adv-comm-row. Label + wrapping pill cloud, hairline-divided.
   Label is TEAL.
   ========================================================================== */
.ds-cloud-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-light);
}
.ds-cloud-row:last-of-type { border-bottom: none; }
.ds-cloud-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);            /* teal */
}
.ds-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ds-cloud li {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-pill);
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.ds-cloud-foot {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
}
.ds-cloud-foot a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   12. CARD POLISH — .ds-card
   Lightweight polish layer for the existing .card / feature cards: consistent
   border, radius, TEAL hover border (was amber on the /advertise/ "-on" card).
   Border-color-only hover (no lift), matching the /advertise/ restraint.
   ========================================================================== */
.ds-card {
  position: relative;              /* anchors the absolutely-positioned .ds-card-tag */
  background: var(--bg-page);
  border: 1.5px solid var(--border-light);
  border-radius: 18px;
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ds-card--hover:hover { border-color: var(--brand-primary); }   /* teal */
/* AMBER — SECONDARY ONLY: rare warm card hover. */
.ds-card--warm { background: var(--ds-cream-bg); border-color: var(--ds-cream-border); }
.ds-card--warm.ds-card--hover:hover { border-color: var(--brand-accent); }
/* Corner tag — TEAL fill (was #0D7E8A teal on /advertise/, kept). */
.ds-card-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 9px;
  border-radius: var(--ds-radius-pill);
  background: var(--brand-primary);
  color: var(--text-inverse);             /* white on teal-700 = 4.81:1. PASS */
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   13. FRAMED PANEL — .ds-panel (estimator-style)
   Generalizes .adv-est-wrap: thick TEAL frame, feature radius.
   ========================================================================== */
.ds-panel {
  background: var(--bg-page);
  border: 2.5px solid var(--brand-primary);   /* teal frame */
  border-radius: var(--ds-radius-feature);
  padding: 3.5rem 2.75rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) {
  .ds-panel { padding: 2rem 1.25rem; }
}
/* Dark output sub-panel inside a framed panel. TEAL-led glow. */
.ds-panel-dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  background-image: radial-gradient(circle at 100% 0%, var(--ds-teal-glow) 0%, transparent 60%);
}
.ds-panel-dark .ds-stat { color: var(--ds-teal-on-dark); }


/* ==========================================================================
   14. FORMS — .ds-field / .ds-input / .ds-segment
   Generalizes the estimator form. TEAL focus + TEAL checked state (was already
   teal for the primary segment on /advertise/ — kept). Amber segment variant
   demoted / recolored to teal by default.
   ========================================================================== */
.ds-field { margin-bottom: 1.125rem; border: 0; padding: 0; }
.ds-field:last-child { margin-bottom: 0; }
.ds-field label,
.ds-field legend {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4375rem;
  padding: 0;
}
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  background: var(--bg-page);
  border: 1.5px solid var(--border-light);
  border-radius: var(--ds-radius-input);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary);
}
.ds-textarea { resize: vertical; min-height: 5rem; }
/* Focus: TEAL, 3px. Use :focus-visible for keyboard, plus :focus for fields so
   pointer users also see the affordance (matches /advertise/ input behavior). */
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: 3px solid var(--brand-primary-hover);   /* #0A5C65 */
  outline-offset: 0;
  border-color: var(--brand-primary);
}

/* Segmented radio/checkbox chips: visually-hidden input, label = pressable
   pill (>=44px). Checked = TEAL fill + depth shadow. State conveyed by
   bg+border+text inversion, never color alone. */
.ds-segment {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.ds-segment label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 0.78125rem;
  font-weight: 600;
  cursor: pointer;
}
.ds-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ds-segment label:has(input:checked) {
  background: var(--brand-primary);        /* TEAL fill */
  border-color: var(--brand-primary);
  color: var(--text-inverse);              /* white on teal-700, 4.81:1 */
  box-shadow: var(--ds-shadow-chip);
}
.ds-segment label:has(input:focus-visible) {
  outline: 3px solid var(--brand-primary-hover);
  outline-offset: 1px;
}

/* Inline form error (shared). */
.ds-form-error {
  background: var(--status-error-bg);      /* #FEE2E2 */
  border: 1px solid #FECACA;
  border-radius: 12px;
  color: var(--color-error-700);           /* #B91C1C on #FEE2E2 = 5.30:1. PASS
                                              (error-600 #DC2626 was 3.95:1 — FAIL) */
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
/* Success (teal). */
.ds-form-success {
  background: var(--ds-teal-tint);         /* #EEF9FA */
  border: 1.5px solid var(--ds-teal-tint-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: center;
}
.ds-form-success p { margin: 0; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.5; }
.ds-form-success p + p { margin-top: 0.25rem; color: var(--text-secondary); }


/* ==========================================================================
   15. MODAL — .ds-modal
   Generalizes .adv-modal. Navy backdrop, white panel, TEAL focus. Title <em>
   accent flips amber -> teal.
   ========================================================================== */
.ds-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.ds-modal[hidden] { display: none; }
.ds-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 46, 0.72);      /* navy-900 @ 72% */
  backdrop-filter: blur(4px);
}
.ds-modal-content {
  position: relative;
  z-index: 1;
  background: var(--bg-page);
  border-radius: 24px;
  padding: 2rem 2rem 1.75rem;
  max-width: 28rem;
  width: 100%;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(15, 28, 46, 0.35);
}
.ds-modal-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ds-modal-close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.ds-modal-title {
  font-family: var(--font-body, Inter), sans-serif;
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}
.ds-modal-title em {
  font-family: var(--font-display, 'Instrument Serif'), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--brand-primary);             /* TEAL (was #B45309) */
}
.ds-modal-sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.ds-modal-alt {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
  text-align: center;
}
.ds-modal-alt a {
  color: var(--brand-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   16. UNIVERSAL FOCUS-VISIBLE (TEAL) + REDUCED MOTION
   Site-wide teal focus ring on every interactive element the DS layer styles.
   3px solid teal-800, offset 2px. This is a WCAG 2.2 AA commitment.
   Scoped to DS controls + the shared buttons so it never fights existing
   page-specific focus styles unexpectedly.
   ========================================================================== */
.ds-btn-primary:focus-visible,
.ds-btn-amber:focus-visible,
.btn-outline-light:focus-visible,
.section--dark .btn-outline:focus-visible,
.ds-modal-close:focus-visible,
.ds-modal-alt a:focus-visible,
.section-eyebrow:focus-visible,
.ds-cloud-foot a:focus-visible,
.ds-gallery-card a:focus-visible {
  outline: 3px solid var(--brand-primary-hover);   /* #0A5C65 */
  outline-offset: 2px;
}
/* On dark bands, lift the focus ring to a lighter teal so it stays visible
   against navy (0A5C65 would be low-contrast on navy). */
.section--dark .btn-outline:focus-visible,
.section--dark a:focus-visible,
.ds-panel-dark a:focus-visible {
  outline-color: var(--ds-teal-on-dark);           /* #6DD4DC */
}

/* FAQ-style toggle icon rotate (the one eased micro-interaction). */
.ds-toggle-icon {
  color: var(--brand-primary);
  font-size: 1.25rem;
  transition: transform 200ms ease;
}
.ds-toggle[aria-expanded="true"] .ds-toggle-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .ds-toggle-icon { transition: none; }
  /* Looping "live" dot animations are opt-in via
     @media (prefers-reduced-motion: no-preference) above, so they simply never
     start under reduced-motion — nothing to disable here. */
}


/* ==========================================================================
   17. HERO — .ds-hero  (2-COLUMN: text left, media right)
   Honors the DESIGN.md hero structural lock (§4): text column left, image/media
   column right — NEVER full-width or behind the text. Restyles the hero in the
   /advertise/ language: eyebrow-with-dot, serif-italic <em> accent (TEAL-LED),
   teal CTAs, and a teal-framed media panel. Works on light ground by default;
   add .section--dark to the section for the dark hero variant.
   ========================================================================== */
.ds-hero {
  padding: 4.5rem var(--ds-section-x) 4rem;
  background: var(--bg-page);
}
.ds-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;         /* mobile: stacked, text first */
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .ds-hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}
.ds-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;   /* let the grid cell shrink so a wide child (long eyebrow) can't force overflow */
}
.ds-hero-title {
  font-family: var(--font-body, Inter), sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2.35rem, 5vw, 3.85rem);
  color: var(--text-primary);
  margin: 0;
}
/* Signature serif-italic accent — TEAL-LED (the /advertise/ device). */
.ds-hero-title em {
  font-family: var(--font-display, 'Instrument Serif'), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--brand-primary);
}
.ds-hero-tagline {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-primary-hover);   /* teal-800, 7.69:1 on white */
  margin: 0;
}
.ds-hero-desc {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);        /* #4B5563, 7.56:1 */
  margin: 0;
  max-width: 34rem;
}
.ds-hero-trust {
  font-size: 0.875rem;
  color: var(--text-muted);            /* #6B7280, 4.83:1 */
  margin: 0.25rem 0 0;
}
.ds-hero-trust a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
/* Media column — teal-framed panel (the estimator-frame device applied to the
   hero showcase). Navy fallback ground behind the image while it loads. */
.ds-hero-media { width: 100%; min-width: 0; }
.ds-hero-frame {
  position: relative;
  border: 2.5px solid var(--brand-primary);
  border-radius: var(--ds-radius-feature);   /* 28px */
  overflow: hidden;
  background: var(--bg-dark);
  box-shadow: 0 24px 64px rgba(15, 28, 46, 0.18);
}
.ds-hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Dark hero variant (section carries .section--dark): frame becomes a teal-tinted
   hairline, title/desc use on-dark tokens (handled by the .section--dark scope). */
.section--dark .ds-hero { background: transparent; }
.section--dark .ds-hero-tagline { color: var(--ds-teal-on-dark); }
.section--dark .ds-hero-desc { color: var(--text-on-dark); }
.section--dark .ds-hero-trust { color: var(--text-on-dark-muted); }
.section--dark .ds-hero-frame { border-color: var(--ds-rule-on-dark); }

/* Showcase modifier — applies the teal frame to the homepage ROTATING showcase
   (multiple absolutely-positioned scenes + composed POS/website imagery) WITHOUT
   the single-photo img rules above. The base .ds-hero-frame forces every img to
   16/10 cover at height:100%, which would distort the floating "contain" product
   scenes and clip their drop-shadows; here we neutralize that and swap the navy
   ground for a soft light ground so the transparent product art reads correctly.
   The teal border + feature radius (the actual "frame" look) are inherited. */
.ds-hero-frame--showcase {
  background: var(--bg-subtle);          /* light ground for transparent product art */
  padding: 1.25rem;
  /* .hero-showcase already sets its own 16/10 aspect-ratio; keep it. */
}
.ds-hero-frame--showcase img {
  width: auto;                            /* undo base 100%/cover/16-10 */
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* MOBILE / stacked (below the 960px 2-col breakpoint): center the hero so the
   text block doesn't read as left-hung. Matches the centered .ds-section-header
   treatment used in every other section on narrow screens. */
@media (max-width: 959px) {
  .ds-hero-content { align-items: center; text-align: center; }
  .ds-hero-desc { margin-left: auto; margin-right: auto; }
  .ds-hero .ds-actions { justify-content: center; }
}