/* ============================================================
   Frontlion Platform Feature Refit
   Restyles/extends flexible-content layouts to the WebRefit
   mockup language (centered hero + product surface, alternating
   feature rows, proof quote, cross-links, roles strip, charcoal
   final CTA, full-bleed backdrop). Uses existing theme tokens.
   Loaded after main.css.
   ============================================================ */

/* ---------- eyebrow alignment ----------
   .eyebrow is inline-flex, so it does not follow a parent's text-align on its
   own. Make it a fit-content flex box whose horizontal placement is driven by
   margin, then map the alignment: centered containers auto-center it, left
   containers keep it left. This lets eyebrows follow the layout's alignment
   selection everywhere in the feature-refit scope. */
.section-content-media .eyebrow,
.section-cross-links .eyebrow,
.section-proof-quote .eyebrow,
.section-roles-strip .eyebrow,
.section-cta .eyebrow,
.flv-people-head .eyebrow {
  display: flex;
  width: fit-content;
  margin-inline-end: auto; /* default: left-aligned */
}
/* Centered contexts: center the eyebrow to match heading/subheading. */
.section-content-media__section-header .eyebrow,
.section-content-media--title-center .section-content-media__content .eyebrow,
.section-cross-links__head .eyebrow,
.section-proof-quote__head .eyebrow,
.section-roles-strip__head .eyebrow,
.section-cta--centered .eyebrow,
.section-cta--charcoal .eyebrow,
.flv-people-head .eyebrow {
  margin-inline: auto;
}
/* .section__heading/__body have a max-width but no auto margin by default, so
   inside a centered header they text-align but the box stays left. Center the
   box too. */
.section-content-media__section-header .section__heading,
.section-content-media__section-header .section__body,
.section-cross-links__head .section__heading,
.section-cross-links__head .section__body,
.section-proof-quote__head .section__heading,
.section-proof-quote__head .section__body,
.section-roles-strip__head .section__heading,
.section-roles-strip__head .section__body {
  margin-inline: auto;
}

/* ---------- shared: quiet step-down link (no button chrome) ---------- */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-semi);
  font-size: var(--text-base);
  color: var(--color-accent-hover);
  text-decoration: none;
  padding: 0.875rem 0.375rem;
  line-height: 1;
}
/* The trailing chevron is decorative, so the hover underline sits on the label
   span rather than the <a>. text-decoration propagates to descendants and a
   child cannot cancel it, so the rule has to target the label directly. */
.link-quiet:hover .link-quiet__label { text-decoration: underline; }
.link-quiet span { font-size: 1.15em; line-height: 0; }
.link-quiet .link-quiet__label { font-size: inherit; line-height: inherit; }
/* On any dark surface the coral accent goes muddy, so a quiet link flips to
   white. Covers the charcoal CTA band, dark/overlay-dark heroes and the dark
   and teal section schemes — every dark background a layout can produce. */
.section-cta--charcoal .link-quiet,
.section--dark .link-quiet,
.section-proof-quote.section--teal .link-quiet,
.section-hero--dark .link-quiet,
.section-hero--overlay-dark .link-quiet,
.section-hero--overlay-coral .link-quiet,
.section-cta--charcoal .link-quiet:hover,
.section--dark .link-quiet:hover,
.section-proof-quote.section--teal .link-quiet:hover,
.section-hero--dark .link-quiet:hover,
.section-hero--overlay-dark .link-quiet:hover,
.section-hero--overlay-coral .link-quiet:hover {
  color: var(--color-white);
}

/* ============================================================
   HERO — full-width stacked product surface
   ============================================================ */
.section-hero--has-surface .section-hero__inner { padding-bottom: var(--space-10); }

.section-hero__surface-wrap {
  position: relative;
  z-index: 3;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: var(--space-24);
}
.section-hero__surface {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(74, 67, 64, 0.14);
}
/* Embed surfaces render on a transparent body and self-size to their own design
   ratio, so the panel fill is never covered edge to edge and reads as a light
   matte behind the visual. Images use object-fit:cover and still need the fill. */
iframe.section-hero__surface { background: transparent; }
/* Several fl_hero_* shortcodes reuse .section-hero__surface on their iframe.
   Those embeds draw their own rounded card with a shadow, so the surface chrome
   would stack on top of it — a card inside a card. Strip it when the surface is
   nested in another surface (stacked slot) or sits in the secondary column. */
.section-hero__surface .section-hero__surface,
.section-hero__shortcode .section-hero__surface {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
/* Free-form graphic (floating cards etc.): no ratio box, no panel chrome. */
.section-hero__surface--free {
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.section-hero__surface--16-9  { aspect-ratio: 16 / 9; }
.section-hero__surface--4-3   { aspect-ratio: 4 / 3; }
.section-hero__surface--1-1   { aspect-ratio: 1 / 1; }
.section-hero__surface--3-2   { aspect-ratio: 3 / 2; }
img.section-hero__surface { object-fit: cover; }
.section-hero__surface-caption {
  text-align: center;
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}
.section-hero--dark .section-hero__surface-caption,
.section-hero--brand .section-hero__surface-caption { color: rgba(255,255,255,0.82); }

/* On the centered light hero, the surface reads as the page's lead visual. */
.section-hero--center.section-hero--has-surface .section-hero__inner { padding-bottom: var(--space-8); }

@media (max-width: 980px) {
  .section-hero__surface-wrap { padding-bottom: var(--space-16); }
}

/* ============================================================
   CONTENT + MEDIA — alternating feature row (text / product visual)
   ============================================================ */
.section-content-media--feature-row { padding-block: var(--space-24); }

/* Centered section header above the row (mockup "fl-feature-head"). */
.section-content-media__section-header {
  text-align: center;
  max-width: 58em;
  margin: 0 auto var(--space-12);
}
/* Let the heading use the full (wider) header width — the base .section__heading
   caps at --max-width-content, which forced the awkward wrapping. */
.section-content-media__section-header .section__heading { max-width: 100%; }
/* Keep the intro paragraph at a comfortable reading measure even though the
   header (and its heading) now runs wider. */
.section-content-media__section-header .section__body { color: var(--color-warm-gray); font-size: var(--text-lg); max-width: 46em; margin: var(--space-4) auto 0; }

/* ---------- Section Header Align (center default, left, right) ----------
   The header and its children are centered by default via text-align plus
   margin-inline:auto, so an alignment override has to reset BOTH: the box
   margins and the text. Tab rows and role captions in the media below follow
   the header so the whole section reads as one alignment. */
.section-content-media--header-left .section-content-media__section-header,
.section-content-media--header-right .section-content-media__section-header { max-width: 58em; }
.section-content-media--header-left .section-content-media__section-header { text-align: left; margin-inline: 0 auto; }
.section-content-media--header-right .section-content-media__section-header { text-align: right; margin-inline: auto 0; }

.section-content-media--header-left .section-content-media__section-header .eyebrow,
.section-content-media--header-left .section-content-media__section-header .section__heading,
.section-content-media--header-left .section-content-media__section-header .section__body { margin-inline: 0; }
.section-content-media--header-right .section-content-media__section-header .eyebrow,
.section-content-media--header-right .section-content-media__section-header .section__heading,
.section-content-media--header-right .section-content-media__section-header .section__body { margin-inline: auto 0; }

/* Tab rows and role captions follow the header alignment — those rules live in
   feature-visuals.css, which loads after this file and defines the .flv-* base. */

.section-content-media--feature-row .section-content-media__grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: var(--space-16);
  align-items: center;
}
.section-content-media--feature-row.section-content-media--left .section-content-media__grid {
  grid-template-columns: 58fr 42fr;
}
/* media-side left => visual first */
.section-content-media--feature-row.section-content-media--left .section-content-media__content { order: 2; }
.section-content-media--feature-row.section-content-media--left .section-content-media__media   { order: 1; }

.section-content-media--feature-row .section-content-media__heading {
  font-size: clamp(var(--text-2xl), 2.4vw, var(--text-4xl));
}
.section-content-media--feature-row .section-content-media__body { max-width: 34em; }

/* Stats on the alt (cream) scheme — homepage proof band + spec tiles. */
.section-stats.section--alt { background: var(--bg-secondary); }
.section-stats.section--alt .stat-item__value { color: var(--color-teal); }
.section-stats.section--alt .stat-item__prefix,
.section-stats.section--alt .stat-item__suffix { color: var(--color-teal) !important; }

/* Cards style — separate rounded tiles (homepage "fl-stat" proof + "fl-spec"
   Good-to-Know). No count animation; value is a static number OR a word. */
.stats-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(4, 1fr); }

/* ── Stats: banner style ─────────────────────────────────────────────────────
   One wide centred tile — value beside the label, source on its own row under a
   hairline rule (mockup .fl-proof-tile). For a single headline proof stat, which
   in the cards grid would sit stranded in a quarter-width column. */
.stats-banner { display: grid; gap: var(--space-5); max-width: 880px; margin-inline: auto; }
.stats-banner__tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 36px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: 34px 40px;
  box-shadow: 0 1px 2px rgba(74, 67, 64, 0.05);
}
.stats-banner__value {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.stats-banner--accent-teal  .stats-banner__value { color: var(--color-teal); }
.stats-banner--accent-coral .stats-banner__value { color: var(--color-accent); }
/* A word value ("Sevenfold") must not use the big numeric display size. */
.stats-banner__value.is-word { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.stats-banner__label {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  line-height: 1.4;
  margin: 0;
  max-width: none; /* the grid column governs the width, not the 68ch <p> cap */
}
.stats-banner__source {
  grid-column: 1 / -1;
  margin: 0;
  /* main.css caps every <p> at 68ch, which would stop this rule short of the
     tile's right edge. Same trap as story_cards' closing note. */
  max-width: none;
  padding-top: 14px;
  border-top: 1px solid var(--color-warm-beige);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-charcoal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .stats-banner__tile { grid-template-columns: 1fr; padding: 26px 24px; gap: 10px; }
  .stats-banner__value { white-space: normal; }
}
.stats-cards--2up { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.stats-cards--3up { grid-template-columns: repeat(3, 1fr); }
.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px; /* mockup fl-stat */
  text-align: center;
}
/* Good-to-Know spec tiles run a touch tighter (mockup fl-spec). */
.stats-cards--accent-coral .stat-card { padding: 26px 20px 22px; }
.stat-card__value { font-family: var(--font-serif, Georgia, serif); font-weight: var(--font-semi); line-height: 1.05; margin: 0; }
.stats-cards--accent-teal  .stat-card__value { color: var(--color-teal); }
.stats-cards--accent-coral .stat-card__value { color: var(--color-coral); }
/* Numeric proof values run large; word values (Two-way, White-label) size down
   to text-level (mockup fl-spec-num.is-word: clamp(1.35rem,2.2vw,1.75rem)). */
.stat-card__number { font-size: clamp(var(--text-3xl), 3.6vw, var(--text-5xl)); }
.stat-card__suffix { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
.stat-card__value.is-word .stat-card__number { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.stat-card__value.is-word .stat-card__suffix { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.stat-card__label { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-charcoal); }
.stat-card__source { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-warm-gray); }
@media (max-width: 860px) {
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stats-cards, .stats-cards--2up, .stats-cards--3up { grid-template-columns: 1fr; }
}

/* Tinted cluster cards (homepage mockup "fl-cluster" — teal / coral / charcoal).
   The whole row becomes a rounded, tinted, bordered card on the light page. */
.section-content-media--feature-row.section--teal .section-content-media__grid,
.section-content-media--feature-row.section--coral .section-content-media__grid,
.section-content-media--feature-row.section--dark .section-content-media__grid {
  border-radius: var(--radius-lg);
  padding: var(--space-12);
}
.section-content-media--feature-row.section--teal .section-content-media__grid,
.section-content-media--feature-row.section--coral .section-content-media__grid {
  background: var(--bg-secondary);
  border: 1px solid var(--color-warm-beige);
}
.section-content-media--feature-row.section--teal .eyebrow { color: var(--color-teal); }
.section-content-media--feature-row.section--coral .eyebrow { color: var(--color-coral); }

/* Panel tint: some mockups tint only the VISUAL side rather than the whole row
   (convert-wait-time's "Make the Wait Count" features). Opt in with
   media_panel_tint; the row itself stays on the page background. */
.section-content-media--panel-tint.section--teal .section-content-media__grid,
.section-content-media--panel-tint.section--coral .section-content-media__grid {
  background: none;
  border: 0;
  padding: 0;
}
.section-content-media--panel-tint .section-content-media__visual {
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
}
.section-content-media--panel-tint.section--teal .section-content-media__visual { background: rgba(184, 218, 218, 0.30); }
.section-content-media--panel-tint.section--coral .section-content-media__visual { background: rgba(232, 146, 106, 0.16); }
/* Charcoal cluster (the "Make It Intelligent" intelligence moment). */
.section-content-media--feature-row.section--dark { background: transparent; }
.section-content-media--feature-row.section--dark .section-content-media__grid {
  background: var(--color-charcoal);
}
.section-content-media--feature-row.section--dark .section-content-media__heading,
.section-content-media--feature-row.section--dark .section-content-media__body { color: var(--bg-primary); }
.section-content-media--feature-row.section--dark .section-content-media__body { color: var(--color-warm-beige); }
.section-content-media--feature-row.section--dark .eyebrow { color: var(--color-teal-light); }

/* Hero quick-link chips under the CTAs (platform-overview hero). */
.section-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.section-hero__chip {
  font-size: var(--text-sm); font-weight: var(--font-semi);
  color: var(--color-charcoal); background: var(--bg-secondary);
  border: 1px solid var(--color-warm-beige);
  border-radius: 999px; padding: 7px 15px; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.section-hero__chip:hover { background: #F1EBE3; border-color: var(--color-warm-beige); }
/* On dark/overlay heroes, lift chips to a translucent light treatment. */
.section-hero--dark .section-hero__chip,
.section-hero--overlay-dark .section-hero__chip {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff;
}
.section-hero--dark .section-hero__chip:hover,
.section-hero--overlay-dark .section-hero__chip:hover { background: rgba(255,255,255,.22); }

/* Chip row under the body (homepage cluster "fl-chip-row"). Chips are links
   (Feature or custom URL) or plain static text. */
/* Matches the appointments-check-in mockup's "Reminders & Confirmations"
   chip row (.fl-ac-chip): coral tint, no border, no arrow. */
.section-content-media__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }

/* ── Inline proof tile (K4) ──────────────────────────────────────────────────
   A single stat card under the body copy, inside the content column — the
   mockups' .fl-row-tile. Tinted by accent so it reads as part of the row rather
   than a separate stats band. */
.section-content-media__stat {
  display: inline-block;
  border-radius: var(--radius-lg);
  padding: 20px 24px 16px;
  margin-top: var(--space-5);
  max-width: 340px;
}
.section-content-media__stat--coral { background: rgba(196, 98, 45, 0.10); }
.section-content-media__stat--teal  { background: rgba(46, 125, 123, 0.10); }
.section-content-media__stat-value {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0;
}
.section-content-media__stat--coral .section-content-media__stat-value { color: var(--color-accent); }
.section-content-media__stat--teal  .section-content-media__stat-value { color: var(--color-teal); }
/* Word values must not use the big numeric display size. */
.section-content-media__stat-value.is-word { font-size: var(--text-xl); }
.section-content-media__stat-label {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}
.section-content-media__stat-source {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--color-warm-gray);
}
/* On a dark row the tile keeps its own light text. */
.section--dark .section-content-media__stat-label { color: var(--color-white); }
.section-content-media__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem; font-weight: var(--font-semi);
  padding: 7px 14px;
  border-radius: 999px; text-decoration: none;
  background: rgba(232,146,106,.22); color: var(--color-accent-hover);
  border: 0;
  transition: background .15s ease, color .15s ease;
}
/* Optional leading icon, pulled from the linked Feature's Lucide icon field.
   createIcons() swaps the <i> for an <svg>; whether it preserves the class
   varies by Lucide version, so match the child svg too. Inherits currentColor
   so it tracks every scheme + hover state without extra rules. */
.section-content-media__chip-icon,
.section-content-media__chip-icon svg,
.section-content-media__chip > svg {
  width: 14px; height: 14px;
  flex: 0 0 auto;
  stroke-width: 2;
}
a.section-content-media__chip:hover { background: rgba(232,146,106,.38); color: var(--color-accent-hover); }
/* Per-scheme variants. */
.section--teal .section-content-media__chip { background: var(--color-teal-light); color: var(--color-teal-dark); }
/* Scheme hovers must restate `color`: the base `a…:hover` rule below outranks
   the scheme's base chip rule, so leaving color off lets the coral hover text
   bleed onto tinted/dark chips. */
.section--teal a.section-content-media__chip:hover { background: #a5cfcf; color: var(--color-teal-dark); }
.section--dark .section-content-media__chip { background: rgba(184,218,218,.14); color: var(--color-teal-light); }
.section--dark a.section-content-media__chip:hover { background: rgba(184,218,218,.30); color: var(--color-white); }
/* ---------- static (unlinked) chips ----------
   A chip with no destination is a label, not an affordance. It steps down a
   size, tightens its padding and desaturates to a muted outline so it reads as
   inert next to the tinted, tappable link chips. Applies to every chip row. */
.section-content-media__chip--static,
.section-hero__chip--static {
  cursor: default;
  font-size: .74rem;
  font-weight: var(--font-medium);
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--color-warm-beige);
  color: var(--color-warm-gray);
  opacity: .8;
}
/* Per-scheme static chips: keep the muted read on tinted/dark backgrounds,
   where the shared beige border and warm gray would disappear. */
.section--teal .section-content-media__chip--static {
  background: transparent; border-color: rgba(46,125,123,.30); color: var(--color-teal-dark); opacity: .7;
}
.section--dark .section-content-media__chip--static,
.section-hero--dark .section-hero__chip--static,
.section-hero--overlay-dark .section-hero__chip--static {
  background: transparent; border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.62); opacity: 1;
}
/* Chips placed below the media in the stacked (Top/Bottom) layouts: full
   width of the container, centered under the visual. */
.section-content-media__links--below-media { justify-content: center; margin-top: var(--space-6); }

/* Optional CTA under the content column. */
.section-content-media__actions { margin-top: var(--space-6); }
.section-content-media__links + .section-content-media__actions { margin-top: var(--space-5); }

/* Media-only rows (no content column rendered): collapse to a single track so
   the Left/Right grids do not leave an empty column beside the media. */
.section-content-media--media-only .section-content-media__grid { grid-template-columns: 1fr; }

/* ---------- Stacked (Media Position = Top / Bottom): center the media ----------
   The stacked grid is a single 1fr column, so media narrower than the column
   would otherwise sit hard left. Excluded: the full-bleed shortcode variant,
   which intentionally spans 100vw and must not be re-centered or constrained. */
.section-content-media--top:not(.section-content-media--shortcode-full-bleed) .section-content-media__media,
.section-content-media--bottom:not(.section-content-media--shortcode-full-bleed) .section-content-media__media {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Direct children keep their own width but center within the column. */
.section-content-media--top:not(.section-content-media--shortcode-full-bleed) .section-content-media__media > *,
.section-content-media--bottom:not(.section-content-media--shortcode-full-bleed) .section-content-media__media > * {
  max-width: 100%;
  margin-inline: auto;
}
/* .__visual is a flex column whose children (grids, embeds) need the full
   width to resolve their own tracks — keep it stretching, just centered.
   .__figure carries the image treatment (min-height + cover) and would
   collapse to content width as a centered flex child. */
.section-content-media--top:not(.section-content-media--shortcode-full-bleed) .section-content-media__media > .section-content-media__visual,
.section-content-media--bottom:not(.section-content-media--shortcode-full-bleed) .section-content-media__media > .section-content-media__visual,
.section-content-media--top:not(.section-content-media--shortcode-full-bleed) .section-content-media__media > .section-content-media__figure,
.section-content-media--bottom:not(.section-content-media--shortcode-full-bleed) .section-content-media__media > .section-content-media__figure {
  width: 100%;
}

/* Feature-row product visual. The device frame inside the embed carries its own
   shadow/rounding, so the wrapper stays transparent and only centers the visual. */
.section-content-media__visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* stretch, not center: children like .flv grids need the full column width to
     resolve their own auto-fit tracks. Device embeds self-center via margin. */
  align-items: stretch;
}
.section-content-media__visual iframe,
.section-content-media__visual img,
.section-content-media__visual .section-content-media__visual-card {
  display: block;
  width: 100%;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.section-content-media__visual iframe { aspect-ratio: 16 / 9; }
.section-content-media__visual--1-1 iframe { aspect-ratio: 1 / 1; }
.section-content-media__visual--3-2 iframe { aspect-ratio: 3 / 2; }
/* Phone embeds sit on the section background with no card behind them, so the
   device needs its own lift. It must be filter: drop-shadow, not box-shadow —
   the phone is a rounded silhouette inside a transparent rectangle, and a
   box-shadow would trace the iframe's rectangular edge instead of the device.
   (The interactive-v2 screens carry only inset bezel shadows of their own.) */
.section-content-media__visual--phone iframe {
  aspect-ratio: 1 / 2;
  max-width: var(--phone-embed-max, 300px);
  filter: drop-shadow(0 24px 60px rgba(74, 67, 64, 0.28));
}

/* Screen embeds (16:9 / 3:2 / 1:1) get the mockups' .fl-screen card treatment.
   PHONE embeds are deliberately excluded: interactive-v2 screens draw their own
   device bezel, and a card behind one double-frames it.

   The embedded screens render on a transparent body and self-size to their own
   design ratio, so a white wrapper background is never covered edge to edge —
   it reads as a light band/matte behind the visual. The wrapper keeps the
   rounding and shadow but stays transparent so the visual fills the frame. */
.section-content-media__visual--16-9 iframe,
.section-content-media__visual--3-2 iframe,
.section-content-media__visual--1-1 iframe {
  background: transparent;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(74, 67, 64, 0.14);
}
/* --card holds a shortcode visual that brings its own card chrome; no extra box. */
.section-content-media__visual--card { display: flex; flex-direction: column; align-items: stretch; }
.section-content-media__visual--card > * { max-width: 100%; }
.section-content-media__visual-caption {
  text-align: center;
  margin: var(--space-3) auto 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}
/* The caption is a full-width sibling of the media, so centering its TEXT only
   centers it on the column. Where the media is narrower than the column and
   self-centers via margin-inline:auto (device embeds), the caption has to be
   held to the same width or it reads visibly off-centre against the visual. */
.section-content-media__visual--phone .section-content-media__visual-caption {
  max-width: var(--phone-embed-max, 300px);
}

@media (max-width: 980px) {
  .section-content-media--feature-row { padding-block: var(--space-16); }
  .section-content-media--feature-row .section-content-media__grid,
  .section-content-media--feature-row.section-content-media--left .section-content-media__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .section-content-media--feature-row.section-content-media--left .section-content-media__content { order: 1; }
  .section-content-media--feature-row.section-content-media--left .section-content-media__media   { order: 2; }
}

/* ============================================================
   CTA BAND — charcoal final CTA
   ============================================================ */
.section-cta--charcoal {
  background: #3C3C3C; /* --fl-charcoal from the mockups */
  color: var(--color-white);
  padding-block: var(--space-24);
  text-align: center;
}
.section-cta--charcoal .section-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.section-cta--charcoal .section-cta__content { width: 100%; }
.section-cta--charcoal .section-cta__heading { color: #FDFAF7; } /* --fl-paper */
.section-cta--charcoal .section-cta__body { color: #D4C9B8; max-width: 40em; margin-inline: auto; } /* --fl-sand */
.section-cta--charcoal .eyebrow { color: #B8DADA; } /* --fl-teal-light */
.section-cta--charcoal .section-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}
.section-cta--charcoal .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,0.4); }

@media (max-width: 980px) {
  .section-cta--charcoal { padding-block: var(--space-16); }
}

/* ============================================================
   PROOF QUOTE — single Proof-Vault quote card
   ============================================================ */
.section-proof-quote { padding-block: var(--space-24); }
.section-proof-quote.section--alt { background: var(--bg-secondary); }
/* Teal band: full teal-background proof section (mockup proof-band). */
.section-proof-quote.section--teal { background: var(--color-teal); }
.section-proof-quote.section--teal .section__heading { color: #fff; }
.section-proof-quote.section--teal .eyebrow { color: #B8DADA; }
.section-proof-quote__head {
  text-align: center;
  max-width: 44em;
  margin: 0 auto var(--space-10);
}
/* Optional stat tiles above the quote (mockup .fl-ac-proof-grid). */
.section-proof-quote__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1020px;
  margin: 0 auto;
}
.section-proof-quote__stats--1col { grid-template-columns: 1fr; max-width: 440px; }
.section-proof-quote__stats--2col { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.section-proof-quote__stats--4col { grid-template-columns: repeat(4, 1fr); }
.section-proof-quote__tile {
  background: rgba(46, 125, 123, 0.08);
  border: 1px solid var(--color-teal-light);
  border-radius: 12px;
  padding: 28px 24px 22px;
  text-align: center;
}
.section-proof-quote__num {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  color: var(--color-teal-dark);
  line-height: 1;
}
.section-proof-quote__label { margin-top: 10px; font-size: .94rem; font-weight: var(--font-medium); color: var(--color-charcoal); }
.section-proof-quote__src { margin-top: 8px; font-size: .78rem; color: var(--color-warm-gray); }
/* Tiles above a quote: space them apart (mockup quotecard margin-top). */
.section-proof-quote__stats + .section-proof-quote__card { margin-top: var(--space-10); }
/* Teal band keeps the tiles legible on the teal background. */
.section-proof-quote.section--teal .section-proof-quote__tile { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.section-proof-quote.section--teal .section-proof-quote__num { color: #fff; }
.section-proof-quote.section--teal .section-proof-quote__label { color: #fff; }
.section-proof-quote.section--teal .section-proof-quote__src { color: #B8DADA; }
.section-proof-quote.section--dark .section-proof-quote__tile { background: rgba(184,218,218,.10); border-color: rgba(184,218,218,.30); }
.section-proof-quote.section--dark .section-proof-quote__num { color: var(--color-teal-light); }
.section-proof-quote.section--dark .section-proof-quote__label { color: var(--bg-primary); }
.section-proof-quote.section--dark .section-proof-quote__src { color: var(--color-warm-beige); }

/* Duo variant: a large primary quote beside a smaller tinted one. The grid
   itself carries the card chrome, so the inner figure resets max-width/margin/
   background/border/shadow/padding — every property the default card sets. */
.section-proof-quote--duo .section-proof-quote__duo {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: 12px;
  padding: 44px;
  max-width: 1020px;
  margin-inline: auto;
}
.section-proof-quote--duo .section-proof-quote__card {
  max-width: none; margin: 0; background: none; border: 0; border-top: 0;
  border-radius: 0; box-shadow: none; padding: 0;
}
.section-proof-quote--duo .section-proof-quote__mark { font-size: 3rem; line-height: .6; color: var(--color-teal); margin-bottom: 14px; }
.section-proof-quote--duo .section-proof-quote__text { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; }
.section-proof-quote__mini {
  background: var(--color-teal-light);
  border-radius: 12px;
  padding: 24px 26px 20px;
  margin: 0;
}
.section-proof-quote__mini blockquote {
  margin: 0; padding-left: 0; border-left: 0; font-style: normal;
  font-family: var(--font-display); font-weight: var(--font-medium);
  font-size: 1.05rem; line-height: 1.4; color: var(--color-charcoal);
}
.section-proof-quote__mini .section-proof-quote__attr { font-size: .82rem; margin-top: 12px; }

/* duo-equal: both voices carry the same weight, so the pair becomes two matching
   cards side by side rather than a primary + tinted mini (mockup .fl-voice-grid). */
.section-proof-quote--duo-equal .section-proof-quote__duo {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
  background: none;
  border: 0;
  padding: 0;
}
.section-proof-quote--duo-equal .section-proof-quote__card,
.section-proof-quote--duo-equal .section-proof-quote__mini {
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-left: 4px solid var(--color-teal);
  border-radius: 12px;
  padding: 30px 32px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(74, 67, 64, 0.05);
  display: flex;
  flex-direction: column;
}
.section-proof-quote--duo-equal .section-proof-quote__mark { display: none; }
.section-proof-quote--duo-equal .section-proof-quote__text,
.section-proof-quote--duo-equal .section-proof-quote__mini blockquote {
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.4;
  color: var(--color-charcoal);
  margin: 0 0 16px;
}
/* Attributions sink so both cards agree at the baseline. */
.section-proof-quote--duo-equal .section-proof-quote__attr { margin-top: auto; font-size: .88rem; }

@media (max-width: 900px) {
  .section-proof-quote--duo .section-proof-quote__duo { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .section-proof-quote--duo-equal .section-proof-quote__duo { padding: 0; }
}

/* Pull Quote variant: a bare centered quote used as a mid-page breath. No card
   chrome — the type and the oversized coral mark carry it. */
.section-proof-quote--pull .section-proof-quote__card {
  max-width: 800px;
  margin-inline: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.section-proof-quote--pull .section-proof-quote__mark { font-size: 4rem; line-height: 1; color: var(--color-coral); margin-bottom: 0; }
.section-proof-quote--pull .section-proof-quote__text { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; margin: 6px 0 18px; }
.section-proof-quote--pull .section-proof-quote__attr { font-size: .88rem; color: var(--color-warm-gray); }
.section-proof-quote--pull .section-proof-quote__attr b,
.section-proof-quote--pull .section-proof-quote__attr strong { color: var(--color-charcoal); }

/* Band variant: product visual left, stat tiles stacked right. Tiles go
   left-aligned here (they read as a list beside the visual, not a centered row). */
.section-proof-quote--band .section-proof-quote__band { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 52px; align-items: center; }

/* Band carrying MEDIA + QUOTE (no stats): photo left, quote card right, 5fr/7fr
   per the mockup's .fl-quotes-grid. The card swaps its accent top border for a
   left border and drops the centred max-width. */
.section-proof-quote--media-quote .section-proof-quote__band {
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
}
.section-proof-quote--media-quote .section-proof-quote__card {
  margin: 0;
  max-width: none;
  border-top: 1px solid var(--color-warm-beige);
  border-left: 4px solid var(--color-accent);
  padding: 28px 32px 24px;
}
.section-proof-quote--media-quote .section-proof-quote__card--teal {
  border-left-color: var(--color-teal);
}
@media (max-width: 980px) {
  .section-proof-quote--media-quote .section-proof-quote__band {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* quote-stat: the quote card sits in the left slot beside the stat tiles, which
   become a tinted panel rather than a stacked list. Values from the mockups'
   .fl-pair-grid / .fl-pair-stat. */
.section-proof-quote--quote-stat .section-proof-quote__band {
  grid-template-columns: 7fr 5fr;
  gap: 20px;
  align-items: stretch;
  max-width: 1000px;
  margin-inline: auto;
}
.section-proof-quote--quote-stat .section-proof-quote__card { margin: 0; height: 100%; display: flex; flex-direction: column; }
/* Attribution sinks to the bottom so the two panels agree at the baseline. */
.section-proof-quote--quote-stat .section-proof-quote__attr { margin-top: auto; }
.section-proof-quote--quote-stat .section-proof-quote__stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background: var(--color-teal-light);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
}
.section-proof-quote--quote-stat .section-proof-quote__tile { text-align: center; padding: 0; background: none; border: 0; }
.section-proof-quote--quote-stat .section-proof-quote__num { font-size: clamp(2.2rem, 3.4vw, 3rem); }
@media (max-width: 980px) {
  .section-proof-quote--quote-stat .section-proof-quote__band { grid-template-columns: 1fr; }
}

/* trio: stats and the quote sit as equal peer cards in one grid (mockup
   .fl-proof-grid). The quote drops its centred-card chrome and matches the
   tiles' plain white treatment. */
.section-proof-quote--trio .section-proof-quote__stats { align-items: stretch; }
.section-proof-quote--trio .section-proof-quote__tile,
.section-proof-quote--trio .section-proof-quote__card {
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-top: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(74, 67, 64, 0.05);
  padding: 28px 26px 24px;
  margin: 0;
  max-width: none;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.section-proof-quote--trio .section-proof-quote__num { color: var(--color-teal); }
/* The quote card leads with its mark, and the attribution sinks to the bottom
   so all three cards agree at the baseline. */
.section-proof-quote--trio .section-proof-quote__mark { font-size: 1.6rem; line-height: 1; color: var(--color-teal); margin-bottom: var(--space-2); }
.section-proof-quote--trio .section-proof-quote__text { font-size: var(--text-base); line-height: 1.55; margin: 0 0 var(--space-4); }
.section-proof-quote--trio .section-proof-quote__attr { margin-top: auto; font-size: var(--text-sm); }
@media (max-width: 980px) {
  .section-proof-quote--trio .section-proof-quote__stats { grid-template-columns: 1fr; }
}
.section-proof-quote--band .section-proof-quote__stats { grid-template-columns: 1fr; gap: 16px; max-width: none; }
.section-proof-quote--band .section-proof-quote__tile { text-align: left; padding: 24px 26px; }
.section-proof-quote--band .section-proof-quote__num { font-size: 2.4rem; letter-spacing: -.02em; color: var(--color-teal); }
.section-proof-quote--band .section-proof-quote__label { margin-top: 10px; }
.section-proof-quote--band .section-proof-quote__src { margin-top: 6px; }
@media (max-width: 980px) {
  .section-proof-quote--band .section-proof-quote__band { grid-template-columns: 1fr; gap: 32px; }
  .section-proof-quote--band .section-proof-quote__band-media { order: 2; }
  .section-proof-quote--band .section-proof-quote__stats { order: 1; }
}

/* Optional quiet link below the section (mockup .fl-proof-read). */
.section-proof-quote__link-wrap { display: block; width: 100%; text-align: center; margin: var(--space-6) auto 0; }
.section-proof-quote__link { font-weight: var(--font-semi); font-size: .95rem; color: var(--color-accent); text-decoration: none; }
.section-proof-quote__link:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.section-proof-quote__link span { font-size: 1.15em; line-height: 0; }
.section-proof-quote.section--teal .section-proof-quote__link,
.section-proof-quote.section--dark .section-proof-quote__link { color: var(--color-teal-light); }

.section-proof-quote__card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 16px 44px rgba(74, 67, 64, 0.10);
  padding: var(--space-10) var(--space-12) var(--space-8);
}
.section-proof-quote__card--teal { border-top-color: var(--color-teal); }
.section-proof-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: 56px;
  line-height: 0.6;
  color: var(--color-coral);
  margin-bottom: var(--space-4);
}
.section-proof-quote__card--teal .section-proof-quote__mark { color: var(--color-teal-light); }
.section-proof-quote__text {
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl));
  line-height: 1.45;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-5);
}
.section-proof-quote__attr {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-warm-gray);
}
@media (max-width: 980px) {
  .section-proof-quote__stats--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .section-proof-quote { padding-block: var(--space-16); }
  .section-proof-quote__card { padding: var(--space-8) var(--space-6) var(--space-6); }
  .section-proof-quote__stats,
  .section-proof-quote__stats--2col,
  .section-proof-quote__stats--4col { grid-template-columns: 1fr; max-width: 440px; }
}

/* ============================================================
   CROSS-LINKS — "works better connected" link-card grid
   ============================================================ */
.section-cross-links { padding-block: var(--space-24); }
.section-cross-links.section--alt { background: var(--bg-secondary); }
.section-cross-links__head { text-align: center; margin: 0 auto var(--space-10); }
/* Optional intro below the heading, held to a comfortable reading measure. */
.section-cross-links__head .section__body { color: var(--color-warm-gray); font-size: var(--text-lg); max-width: 46em; margin: var(--space-4) auto 0; }
.section-cross-links__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.section-cross-links__grid--3 { grid-template-columns: repeat(3, 1fr); }
.section-cross-links__grid--2 { grid-template-columns: repeat(2, 1fr); }
.cross-link-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  text-decoration: none;
  color: var(--color-charcoal);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cross-link-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(74, 67, 64, 0.10);
  transform: translateY(-2px);
}
/* Title leads with the feature icon; align-items keeps the icon on the first
   line when the title wraps to two. */
.cross-link-card__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.cross-link-card__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--color-accent-hover);
  stroke-width: 2;
  /* Optically center the 20px icon against the first line of the title. */
  margin-top: 0.15em;
}
.cross-link-card:hover .cross-link-card__icon { color: var(--color-accent); }
.cross-link-card__desc { font-size: var(--text-sm); color: var(--color-charcoal); margin: 0 0 var(--space-4); }
.cross-link-card__arrow { color: var(--color-accent-hover); font-weight: var(--font-bold); font-size: var(--text-sm); }
.cross-link-card__arrow span { font-size: 1.1em; }

@media (max-width: 980px) {
  .section-cross-links { padding-block: var(--space-16); }
  .section-cross-links__grid,
  .section-cross-links__grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .section-cross-links__grid,
  .section-cross-links__grid--3,
  .section-cross-links__grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   ROLES STRIP — "who this is for" persona chip cards
   ============================================================ */
.section-roles-strip { padding-block: var(--space-20); }
.section-roles-strip.section--alt { background: var(--bg-secondary); }
.section-roles-strip__head { text-align: center; margin: 0 auto var(--space-10); max-width: 44em; }
.section-roles-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}
.role-card {
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.role-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
  margin-bottom: var(--space-4);
}
.role-card__icon i, .role-card__icon svg { width: 20px; height: 20px; }
.role-card__title { font-size: var(--text-base); font-weight: var(--font-bold); margin: 0 0 var(--space-2); color: var(--color-charcoal); }
.role-card__desc { font-size: var(--text-sm); color: var(--color-warm-gray); margin: 0; line-height: var(--leading-normal); }

@media (max-width: 980px) {
  .section-roles-strip { padding-block: var(--space-16); }
}

/* ============================================================
   BACKDROP (layout_break --backdrop) — full-bleed photo + scrim,
   two-column heading + optional side embed (K5 pattern)
   ============================================================ */
/* Backdrop Quote (K5b): full-bleed photo with a floating quote card. The
   photo carries its own brand overlay, so there is no scrim element here. */
.section-break--backdrop-quote {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-32);
  isolation: isolate;
}
.section-break--backdrop-quote .section-break__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.section-break--backdrop-quote .container { position: relative; z-index: 1; }
.section-break__quote-card {
  max-width: 560px;
  margin: 0;
  background: var(--surface);
  border-radius: 12px;
  border-top: 5px solid var(--color-accent);
  padding: 40px 44px;
  box-shadow: 0 30px 70px -28px rgba(60,60,60,0.45);
}
.section-break__quote-card blockquote {
  margin: 0 0 18px;
  padding-left: 0;
  border-left: 0;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--color-charcoal);
}
.section-break__quote-attr { font-size: .9rem; color: var(--color-warm-gray); }
.section-break__quote-attr b { font-weight: var(--font-semi); color: var(--color-charcoal); }
@media (max-width: 620px) {
  .section-break--backdrop-quote { padding-block: var(--space-20); }
  .section-break__quote-card { padding: 28px 24px; }
}

.section-break--backdrop {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-32);
  isolation: isolate;
}
.section-break--backdrop .section-break__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.section-break--backdrop .section-break__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(56,40,32,0.82) 0%, rgba(56,40,32,0.55) 52%, rgba(56,40,32,0.28) 100%);
}
.section-break--backdrop .section-break__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-12);
  align-items: center;
}
.section-break--backdrop .section-break__grid--text-only { grid-template-columns: 1fr; max-width: 44em; }
.section-break--backdrop .section-break__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--font-semi);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin: 0 0 var(--space-4);
}
.section-break--backdrop .section-break__body { color: rgba(255,255,255,0.88); font-size: var(--text-lg); max-width: 34em; }
.section-break--backdrop .section-break__embed-wrap { justify-self: end; text-align: center; width: 100%; }
.section-break--backdrop .section-break__embed {
  width: 100%;
  max-width: var(--phone-embed-max, 300px);
  aspect-ratio: 1 / 2;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  margin: 0 auto;
}
.section-break--backdrop .section-break__embed--wide { aspect-ratio: 16 / 9; max-width: 640px; }

/* Editable float stat card in the backdrop side slot (homepage "fl-float-card"). */
.section-break--backdrop .section-break__inset-wrap { justify-self: end; width: 100%; display: flex; justify-content: center; }
.section-break__stat-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 32px 36px; /* mockup fl-float-card */
  max-width: 300px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.30);
}
.section-break__stat-value {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: var(--font-semi);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  color: var(--color-teal);
  line-height: 1.05;
}
/* Word value (e.g. "Thousands") sizes down (mockup fl-float-card is-word 2.1rem). */
.section-break__stat-value.is-word { font-size: 2.1rem; line-height: 1.1; }
.section-break__stat-label { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-charcoal); }
.section-break__stat-source { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-warm-gray); }

/* Duo: two stat cards stacked, sharing one source line beneath both
   (mockup .fl-float-duo). The source sits on the scrim, so it reads light. */
/* Specificity note: the base rule is `.section-break--backdrop .section-break__inset-wrap`
   (two classes) and sets display:flex, so the duo must match that weight to win. */
.section-break--backdrop .section-break__inset-wrap--duo {
  display: grid;
  gap: var(--space-4);
  justify-items: stretch;
  max-width: 320px;
  margin-left: auto;
}
.section-break__inset-wrap--duo .section-break__stat-card { max-width: none; }
.section-break__inset-wrap--duo .section-break__stat-source { margin-top: 0; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) {
  .section-break--backdrop .section-break__inset-wrap { justify-content: center; }
}
.section-break--backdrop .section-break__cap {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
}
@media (max-width: 980px) {
  .section-break--backdrop { padding-block: var(--space-20); }
  .section-break--backdrop .section-break__grid { grid-template-columns: 1fr; }
  .section-break--backdrop .section-break__embed-wrap { justify-self: center; }
}

/* Backdrop side-slot HTML inset (shortcode card, e.g. security review kit). */
.section-break__inset-wrap { justify-self: end; width: 100%; display: flex; justify-content: center; }
@media (max-width: 980px) { .section-break__inset-wrap { justify-self: center; justify-content: center; } }

/* ============================================================
   FEATURE BAND — editable centered header + full-width graphic
   (mockup band sections: stat band, controls grid, badges, etc.)
   ============================================================ */
.section-feature-band { padding-block: var(--space-24); }
.section-feature-band.section--alt { background: var(--bg-secondary); }
.section-feature-band.section--dark { background: var(--color-brand-mid); color: var(--color-white); }
.section-feature-band__head { text-align: center; max-width: 46em; margin: 0 auto var(--space-10); }
.section-feature-band__head .eyebrow { display: inline-block; }
.section-feature-band__eyebrow--teal { color: var(--color-teal-dark); }
.section-feature-band__eyebrow--coral { color: var(--color-accent-hover); }
.section-feature-band__head .section__heading { margin-inline: auto; }
.section-feature-band__head .section__body { color: var(--color-warm-gray); font-size: var(--text-lg); margin: var(--space-4) auto 0; max-width: 42em; }
.section-feature-band.section--dark .section__heading { color: var(--bg-primary); }
.section-feature-band.section--dark .section__body { color: var(--color-warm-beige); }
@media (max-width: 980px) { .section-feature-band { padding-block: var(--space-16); } }
/* Inside a Feature Band the .container already constrains width; the graphic's
   own .flv-wrap should be full-width (no second max-width). */
.section-feature-band__graphic .flv-wrap { max-width: none; padding: 0; }

/* ---------- Editable band items: icon cards ---------- */
.section-feature-band__cards { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.section-feature-band__cards--2col { grid-template-columns: repeat(2, 1fr); }
.section-feature-band__cards--3col { grid-template-columns: repeat(3, 1fr); }
.section-feature-band__cards--4col { grid-template-columns: repeat(4, 1fr); }
.section-feature-band__card { background: var(--color-white); border: 1px solid var(--color-warm-beige); border-radius: 12px; padding: 26px 24px; }
.section-feature-band__card-icon { display: inline-flex; color: var(--color-teal-dark); margin-bottom: var(--space-3); }
.section-feature-band__card-icon i { width: 22px; height: 22px; }
.section-feature-band__card-body { margin: 0; font-size: .92rem; color: var(--color-warm-gray); }
.section-feature-band__item-label { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.section-feature-band.section--alt .section-feature-band__card { background: var(--bg-primary); }
.section-feature-band.section--dark .section-feature-band__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section-feature-band.section--dark .section-feature-band__card-body { color: var(--color-warm-beige); }
.section-feature-band.section--dark .section-feature-band__item-label { color: var(--bg-primary); }

/* ---------- Editable band items: numbered track ---------- */
.section-feature-band__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; }
.section-feature-band__stage { position: relative; padding: 0 14px; text-align: center; }
.section-feature-band__stage::before { content: ""; position: absolute; top: 20px; left: 0; right: 0; height: 3px; background: rgba(232,146,106,.5); }
.section-feature-band__stage:first-child::before { left: 50%; }
.section-feature-band__stage:last-child::before { right: 50%; }
.section-feature-band__stage-dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 999px; margin: 0 auto 14px; background: var(--color-accent); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; border: 4px solid var(--bg-secondary); box-shadow: 0 0 0 3px rgba(232,146,106,.4); }
.section-feature-band__track .section-feature-band__item-label { font-size: .95rem; color: var(--color-accent); margin-bottom: 10px; }
.section-feature-band__stage-bubble { background: var(--color-white); border: 1px solid var(--color-warm-beige); border-radius: 12px; padding: 10px 14px; font-size: .82rem; color: var(--color-charcoal); text-align: left; line-height: 1.45; box-shadow: 0 1px 2px rgba(74,67,64,.05); margin: 0; }

/* Optional closing line under the graphic (mockup: .fl-ac-channels-foot). */
.section-feature-band__footnote { text-align: center; font-size: 1.05rem; font-weight: 500; color: var(--color-charcoal); max-width: 46em; margin: var(--space-6) auto 0; }
/* Optional quiet CTA below the graphic. Follows the band's centered header:
   .link-quiet is inline-flex, so the wrapper must span full width for
   text-align to have room to centre within. Sits tighter under a footnote when
   both are present, since the footnote already opens the gap. */
.section-feature-band__actions { display: block; width: 100%; text-align: center; margin: var(--space-6) auto 0; }
.section-feature-band__footnote + .section-feature-band__actions { margin-top: var(--space-4); }
.section-feature-band.section--dark .section-feature-band__footnote { color: var(--color-warm-beige); }

/* Items sit above a graphic when both are present. */
.section-feature-band__cards + .section-feature-band__graphic,
.section-feature-band__track + .section-feature-band__graphic { margin-top: var(--space-10); }

@media (max-width: 980px) {
	.section-feature-band__cards--3col, .section-feature-band__cards--4col { grid-template-columns: repeat(2, 1fr); }
	.section-feature-band__track { grid-template-columns: 1fr 1fr; row-gap: 32px; }
	.section-feature-band__stage::before { display: none; }
}
@media (max-width: 640px) {
	.section-feature-band__cards--2col, .section-feature-band__cards--3col, .section-feature-band__cards--4col { grid-template-columns: 1fr; }
	.section-feature-band__track { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE SPOTLIGHT — featured case study as a split card
   (mockup: banking.html .fl-case-card / .fl-mini-grid)
   ============================================================ */
.section-case-spotlight__head { max-width: 44em; margin: 0 0 var(--space-10); }
.section-case-spotlight__head .section__heading { max-width: 100%; }

/* 7fr/5fr split: copy beside a tinted headline-stat panel. */
.section-case-spotlight__card {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(74, 67, 64, 0.10);
}
.section-case-spotlight__card--no-stat { grid-template-columns: 1fr; }
/* Photo variant: the panel carries an image instead of a stat (60/40 split).
 * The copy column centres against the photo rather than stretching, so a short
 * card does not leave a tall gap under the link. */
.section-case-spotlight__card--photo { grid-template-columns: 60fr 40fr; align-items: center; }
/* The photo still fills its cell even though the row is centre-aligned. */
.section-case-spotlight__card--photo .section-case-spotlight__photo { align-self: stretch; }
.section-case-spotlight__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
.section-case-spotlight__body { padding: var(--space-8) var(--space-10); }
.section-case-spotlight__title {
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}
.section-case-spotlight__body-text {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-warm-gray);
  margin: 0 0 var(--space-4);
}
.section-case-spotlight__link {
  color: var(--color-accent);
  font-weight: var(--font-semi);
  font-size: var(--text-lg);
  text-decoration: none;
}
.section-case-spotlight__link:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* Tinted stat panel. Accent drives the tint so the layout works on any page. */
.section-case-spotlight__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-10);
  background: var(--color-teal-light);
}
.section-case-spotlight--coral .section-case-spotlight__stat { background: var(--color-soft-peach); }

.section-case-spotlight__stat-value {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-teal);
}
.section-case-spotlight--coral .section-case-spotlight__stat-value { color: var(--color-accent); }
/* Word values (e.g. "Thousands") must not use the numeric display size. */
.section-case-spotlight__stat-value.is-word { font-size: var(--text-2xl); }
.section-case-spotlight__stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}

/* Supporting stat cards. */
.section-case-spotlight__minis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.section-case-spotlight__minis--3 { grid-template-columns: repeat(3, 1fr); }
.section-case-spotlight__minis--4 { grid-template-columns: repeat(4, 1fr); }
.section-case-spotlight__mini {
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.section-case-spotlight__mini .section-case-spotlight__stat-value { font-size: clamp(2rem, 3vw, 2.6rem); }
.section-case-spotlight__mini-source {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-warm-gray);
}

/* Quiet closing line. */
.section-case-spotlight__note {
  margin: var(--space-6) 0 0;
  font-size: var(--text-base);
  color: var(--color-warm-gray);
}
.section-case-spotlight__note a { color: var(--color-accent); font-weight: var(--font-semi); text-decoration: none; }
.section-case-spotlight__note a:hover { color: var(--color-accent-hover); text-decoration: underline; }

@media (max-width: 980px) {
  .section-case-spotlight__card,
  .section-case-spotlight__minis,
  .section-case-spotlight__minis--3,
  .section-case-spotlight__minis--4 { grid-template-columns: 1fr; }
  .section-case-spotlight__body { padding: var(--space-6); }
  .section-case-spotlight__stat { padding: var(--space-6); }
  .section-case-spotlight__photo { min-height: 200px; max-height: 280px; }
}

/* ============================================================
   LOGO CARDS — customer logo tiles with the name beneath
   (logo_bar style=cards, source=customer)
   ============================================================ */
.logo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.logo-card:hover { box-shadow: 0 10px 28px rgba(74, 67, 64, 0.12); transform: translateY(-2px); }
/* Fixed mark height so logos of differing proportions optically align. */
.logo-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
}
.logo-card__mark img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.logo-card__mark-text {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  text-align: center;
}
.logo-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-warm-gray);
  text-align: center;
  line-height: 1.3;
}
/* On dark/brand schemes the tile inverts to a translucent panel. */
.section-logos.section--dark .logo-card,
.section-logos.section--brand .logo-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.section-logos.section--dark .logo-card__name,
.section-logos.section--brand .logo-card__name { color: rgba(255, 255, 255, 0.82); }

@media (max-width: 620px) {
  .logo-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* ============================================================
   STORY CARDS — image-topped success-story cards
   (mockup: healthcare.html .fl-story-grid)
   ============================================================ */
.section-story-cards__head { max-width: 44em; margin: 0 0 var(--space-10); }
.section-story-cards__head .section__heading { max-width: 100%; }
.section-story-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.section-story-cards__grid--2 { grid-template-columns: repeat(2, 1fr); }
.section-story-cards__grid--4 { grid-template-columns: repeat(4, 1fr); }
.story-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.story-card:hover { box-shadow: 0 8px 24px rgba(74, 67, 64, 0.12); transform: translateY(-2px); }
.story-card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.story-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.story-card__tag {
  align-self: flex-start;
  background: var(--color-teal-light);
  color: var(--color-charcoal);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 12px;
}
.story-card__stat {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: var(--text-3xl);
  color: var(--color-teal);
  line-height: 1;
  margin-top: var(--space-1);
}
/* Word values step down from the numeric display size (site-wide rule). */
.story-card__stat.is-word { font-size: var(--text-xl); }
.story-card__unit { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-charcoal); }
.story-card__title { font-size: var(--text-lg); margin: var(--space-2) 0 0; }
.story-card__desc { margin: 0; font-size: var(--text-sm); color: var(--color-warm-gray); }
/* Push the link to the card foot so links align across uneven cards. */
.story-card__link {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--color-accent);
  font-weight: var(--font-semi);
  font-size: var(--text-sm);
  text-decoration: none;
}
.story-card__link:hover { color: var(--color-accent-hover); text-decoration: underline; }
/* Quiet closing strip under the cards: centred, above a hairline rule
   (mockup: education.html .fl-compare-strip). */
.section-story-cards__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2);
  /* The rule must span the card grid above it. This is a <p>, and main.css caps
     every paragraph at a 68ch reading measure — which would stop the border
     short — so the measure is lifted here. */
  max-width: none;
  margin: var(--space-10) 0 0;
  padding-top: 28px; /* mockup value; --space-7 does not exist in the token set */
  border-top: 1px solid var(--color-warm-beige);
  font-size: var(--text-base);
  color: var(--color-warm-gray);
}
.section-story-cards__note a { color: var(--color-accent); font-weight: var(--font-semi); text-decoration: none; }
.section-story-cards__note a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* ============================================================
   LOGO DESCRIPTORS — anonymised trust strip (logo_bar style=descriptors)
   ============================================================ */
.logo-descriptors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
}
.logo-descriptors__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.logo-descriptors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
}
.logo-descriptors__list li {
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  font-size: var(--text-lg);
  color: var(--color-charcoal);
  position: relative;
}
/* Coral dot separator between descriptors (mockup: li + li::before). */
.logo-descriptors__list li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) / -2 - 3px);
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--color-accent);
}
.section-logos.section--dark .logo-descriptors__label,
.section-logos.section--dark .logo-descriptors__list li { color: var(--color-white); }

/* ============================================================
   TABS — switcher style (homepage "Watch It Work" + "Industries")
   A centered rounded rail with a coral active pill, over a panel that carries
   a step number, a pin tag, a chip row and a product surface. Values taken
   from the mockup's .fl-tabs / .fl-panel / .fl-ind-* rules.
   ============================================================ */
.section-tabs--switcher { padding: 104px 0 96px; }
.section-tabs__head { max-width: 52em; margin: 0 auto var(--space-10); }
.section-tabs__intro { margin: 0 auto; max-width: 36em; }
.section-tabs--switcher .section-tabs__head .eyebrow { margin-bottom: 14px; }
.section-tabs--accent-coral .section-tabs__head .eyebrow { color: var(--color-accent); }
.section-tabs--accent-teal  .section-tabs__head .eyebrow { color: var(--color-teal); }

.section-tabs--switcher .tabs-component__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--color-warm-beige);
  border-radius: 999px;
  padding: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--space-10);
}
.section-tabs--switcher .tabs-component__tab {
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: var(--font-semi);
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.section-tabs--switcher .tabs-component__tab:hover { color: var(--color-accent-hover); }
.section-tabs--switcher .tabs-component__tab.is-active,
.section-tabs--switcher .tabs-component__tab[aria-selected="true"] {
  background: var(--color-accent);
  color: var(--color-white);
}
.section-tabs--switcher .tabs-component__tab.is-active:hover { color: var(--color-white); }

/* Panel grid. Media side flips the column order; the copy column stays narrower
   than the surface so the product visual carries the row (mockup .82fr/1.18fr). */
.section-tabs--switcher .tabs-component__panel-inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 52px;
  align-items: center;
}
.section-tabs--media-left .tabs-component__panel-inner { grid-template-columns: 1.18fr 0.82fr; }
.section-tabs--media-left .tabs-component__panel-content { order: 2; }
.section-tabs--media-left .tabs-component__panel-media { order: 1; }
.section-tabs--switcher .tabs-component__panel--no-media .tabs-component__panel-inner { grid-template-columns: 1fr; }

/* Styled as an eyebrow — same treatment as .eyebrow in main.css. */
.tabs-component__panel-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section-tabs--accent-teal .tabs-component__panel-step { color: var(--color-teal); }

/* Pin tag: a qualitative capability marker, never a statistic. */
.tabs-component__panel-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: var(--font-semi);
  letter-spacing: 0.02em;
  color: var(--color-teal-dark);
  background: rgba(46, 125, 123, 0.10);
  border: 1px solid var(--color-teal-light);
  padding: 7px 14px;
  border-radius: 999px;
  margin-top: var(--space-5);
}
.tabs-component__panel-pin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  flex: 0 0 auto;
}

.tabs-component__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.tabs-component__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: var(--font-semi);
  padding: 8px 15px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(232, 146, 106, 0.22);
  color: var(--color-accent);
  transition: background 0.15s ease, color 0.15s ease;
}
a.tabs-component__chip:hover { background: rgba(232, 146, 106, 0.38); color: var(--color-accent-hover); }
.tabs-component__chip-arrow { opacity: 0.65; }
.tabs-component__chip--static { background: var(--color-warm-beige); color: var(--color-charcoal); }
.section--dark .tabs-component__chip { background: rgba(184, 218, 218, 0.14); color: var(--color-teal-light); }
.section--dark a.tabs-component__chip:hover { background: rgba(184, 218, 218, 0.30); color: var(--color-white); }

/* Product surface inside a panel. */
/* Transparent, not white: the embedded screen renders on a transparent body and
   self-sizes, so a white panel behind it shows as a light matte rather than
   being covered. The rounding and shadow stay. */
.tabs-component__panel-visual {
  width: 100%;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 26px 60px rgba(74, 67, 64, 0.16);
}
.tabs-component__panel-visual iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 14px; }
.tabs-component__panel-visual--16-9 { aspect-ratio: 16 / 9; }
.tabs-component__panel-visual--3-2  { aspect-ratio: 3 / 2; }
.tabs-component__panel-visual--1-1  { aspect-ratio: 1 / 1; }
/* Phone embeds are 400x800 natively and draw their own bezel, so the wrapper
   must contribute NO card chrome — otherwise the device letterboxes inside a
   white panel instead of sitting on the section background, as it does in the
   mockup (.fl-panel-phoneframe is the iframe itself, not a frame around it).
   The device's lift comes from a drop-shadow on the iframe below: the screens
   themselves carry only inset bezel shadows. */
.tabs-component__panel-visual--phone {
  aspect-ratio: 1 / 2;
  max-width: 400px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* drop-shadow, not box-shadow: traces the device silhouette rather than the
   iframe's transparent rectangle. */
.tabs-component__panel-visual--phone iframe {
  border-radius: 0;
  filter: drop-shadow(0 24px 60px rgba(74, 67, 64, 0.28));
}

/* Card panel style (Industries): the panel itself becomes a tinted card. */
.section-tabs--panel-card .tabs-component__panel-inner {
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--color-warm-beige);
  border-radius: var(--radius-xl);
  padding: 40px;
  overflow: hidden;
}
.section-tabs--panel-card.section-tabs--media-left .tabs-component__panel-inner { grid-template-columns: 7fr 5fr; }
.section-tabs--panel-card .tabs-component__panel-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px rgba(74, 67, 64, 0.14);
}

/* ============================================================
   PROOF QUOTE — outcome variant (homepage "Measured Outcome")
   One giant coral figure and its claim, beside a rule-edged supporting panel.
   The big figure is NOT a stat tile; the KPI beneath the lead is.
   ============================================================ */
.section-proof-quote--outcome {
  background:
    radial-gradient(760px 420px at 82% 120%, rgba(196, 98, 45, 0.10), transparent 60%),
    var(--bg-secondary);
  border-top: 1px solid var(--color-warm-beige);
  border-bottom: 1px solid var(--color-warm-beige);
  padding: 104px 0;
}
.section-proof-quote__outcome-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: center;
}
.section-proof-quote--outcome .section-proof-quote__eyebrow { color: var(--color-accent); }
.section-proof-quote--outcome-teal .section-proof-quote__eyebrow { color: var(--color-teal); }
.section-proof-quote__big {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: clamp(5.5rem, 15vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  margin: 0;
}
.section-proof-quote--outcome-teal .section-proof-quote__big { color: var(--color-teal); }
.section-proof-quote__claim { margin: 18px 0 0; max-width: 11em; }
.section-proof-quote__outcome-side {
  border-left: 3px solid var(--color-coral);
  padding-left: 26px;
}
.section-proof-quote--outcome-teal .section-proof-quote__outcome-side { border-left-color: var(--color-teal-light); }
.section-proof-quote__lead {
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  font-size: 1.5rem;
  color: var(--color-charcoal);
  line-height: 1.25;
  margin: 0 0 14px;
}
.section-proof-quote__outcome-stat {
  margin: 0 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--color-warm-beige);
}
.section-proof-quote__outcome-stat .section-proof-quote__num {
  font-family: var(--font-display);
  font-weight: var(--font-semi);
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  color: var(--color-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Word values must not take the big numeric display size. */
.section-proof-quote__outcome-stat .section-proof-quote__num.is-word { font-size: var(--text-2xl); }
.section-proof-quote__outcome-stat .section-proof-quote__label {
  margin-top: 10px;
  font-size: 0.94rem;
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}
.section-proof-quote__outcome-stat .section-proof-quote__src {
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: var(--font-semi);
  color: var(--color-charcoal);
  opacity: 0.72;
}

/* ============================================================
   MEDIA DUO — captioned product surfaces (homepage "Frontlion AI")
   A section header over N equal product surfaces, each with a caption title
   and one supporting line. Charcoal by default.
   ============================================================ */
.section-media-duo { padding: 104px 0; }
.section-media-duo__head { max-width: 58em; margin: 0 0 46px; }
.section-media-duo--center .section-media-duo__head { margin-left: auto; margin-right: auto; text-align: center; }
.section-media-duo--center .section-media-duo__chips { justify-content: center; }
.section-media-duo__intro { max-width: 44em; }
.section-media-duo--center .section-media-duo__intro { margin-left: auto; margin-right: auto; }
.section-media-duo--accent-teal  .section-media-duo__head .eyebrow { color: var(--color-teal); }
.section-media-duo--accent-coral .section-media-duo__head .eyebrow { color: var(--color-accent); }
.section-media-duo.section--dark .section__heading { color: var(--bg-primary); }
.section-media-duo.section--dark .section-media-duo__intro { color: var(--color-warm-beige); }
.section-media-duo.section--dark .section-media-duo__head .eyebrow { color: var(--color-teal-light); }

.section-media-duo__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.section-media-duo__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: var(--font-semi);
  padding: 8px 15px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(232, 146, 106, 0.22);
  color: var(--color-accent);
  transition: background 0.15s ease, color 0.15s ease;
}
a.section-media-duo__chip:hover { background: rgba(232, 146, 106, 0.38); color: var(--color-accent-hover); }
.section-media-duo__chip-arrow { opacity: 0.65; }
.section-media-duo.section--dark .section-media-duo__chip {
  background: rgba(184, 218, 218, 0.14);
  color: var(--color-teal-light);
  border: 1px solid rgba(184, 218, 218, 0.35);
}
.section-media-duo.section--dark a.section-media-duo__chip:hover { background: rgba(184, 218, 218, 0.26); }

.section-media-duo__grid { display: grid; gap: var(--space-8); }
.section-media-duo__grid--2 { grid-template-columns: 1fr 1fr; }
.section-media-duo__grid--3 { grid-template-columns: repeat(3, 1fr); }
.section-media-duo__fig { margin: 0; }
.section-media-duo__frame {
  width: 100%;
  border: 1px solid var(--color-warm-beige);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 26px 60px rgba(74, 67, 64, 0.16);
}
.section-media-duo.section--dark .section-media-duo__frame {
  border-color: rgba(255, 255, 255, 0.10);
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}
/* Embed surfaces only. An <img> uses object-fit:cover and fills the frame, so
   its border and fill still read correctly. An embedded screen renders on a
   transparent body and self-sizes to its own design ratio, so the fill is never
   covered edge to edge and shows as a light (or dark) matte behind the visual.
   Drop the fill and border there; keep the rounding and shadow. */
.section-media-duo__frame:has(iframe),
.section-media-duo.section--dark .section-media-duo__frame:has(iframe) {
  border: 0;
  background: transparent;
}
.section-media-duo__frame iframe,
.section-media-duo__frame img { display: block; width: 100%; height: 100%; border: 0; border-radius: 14px; object-fit: cover; }
.section-media-duo__frame--16-9 { aspect-ratio: 16 / 9; }
.section-media-duo__frame--3-2  { aspect-ratio: 3 / 2; }
.section-media-duo__frame--1-1  { aspect-ratio: 1 / 1; }
/* Phone frames hold a device silhouette on a transparent background, so the
   rectangular frame shadow is dropped for a drop-shadow that follows the
   device outline. overflow must stay visible or that shadow is clipped. */
.section-media-duo__frame--phone { aspect-ratio: 1 / 2; max-width: 376px; margin: 0 auto; }
.section-media-duo__frame--phone:has(iframe) {
  box-shadow: none;
  overflow: visible;
}
.section-media-duo__frame--phone iframe {
  /* The device draws its own 48px bezel radius; the frame's 14px card radius
     would cut its corners square. */
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(74, 67, 64, 0.28));
}
.section-media-duo__cap { margin-top: 18px; }
.section-media-duo__cap-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  font-size: 1.2rem;
  color: var(--color-charcoal);
  margin-bottom: 5px;
  line-height: 1.2;
}
.section-media-duo__cap-meta { display: block; font-size: 0.93rem; color: var(--color-warm-gray); line-height: 1.5; }
.section-media-duo.section--dark .section-media-duo__cap-title { color: var(--bg-primary); }
.section-media-duo.section--dark .section-media-duo__cap-meta { color: var(--color-warm-beige); }

@media (max-width: 980px) {
  .section-story-cards__grid,
  .section-story-cards__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .section-tabs--switcher .tabs-component__panel-inner,
  .section-tabs--media-left .tabs-component__panel-inner,
  .section-tabs--panel-card .tabs-component__panel-inner,
  .section-tabs--panel-card.section-tabs--media-left .tabs-component__panel-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .section-tabs--media-left .tabs-component__panel-content { order: 1; }
  .section-tabs--media-left .tabs-component__panel-media { order: 2; }
  .section-proof-quote__outcome-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .section-media-duo__grid--2,
  .section-media-duo__grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .section-story-cards__grid,
  .section-story-cards__grid--2,
  .section-story-cards__grid--4 { grid-template-columns: 1fr; }
  .logo-descriptors__list li + li::before { display: none; }
  .section-tabs--switcher { padding: 64px 0 56px; }
  .section-tabs--switcher .tabs-component__nav { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .section-tabs--switcher .tabs-component__tab { padding: 10px 16px; font-size: 0.88rem; }
  .section-tabs--panel-card .tabs-component__panel-inner { padding: 24px; }
  .section-proof-quote--outcome { padding: 64px 0; }
  .section-proof-quote__claim { max-width: none; }
  .section-media-duo { padding: 64px 0; }
}