/* ==========================================================================
   Will They Pay — Rebranded Homepage
   --------------------------------------------------------------------------
   Homepage-specific section styles. Loaded ONLY by the rebranded homepage, via
   the `rebrand-page-css` stack in rebranding/layouts/app.blade.php.

   LOAD ORDER
     app.min.css             legacy (unlayered, untouched)
     ...legacy sheets
     rebrand/rebrand.css     shared: fonts, tokens, primitives, layout chrome
     rebrand/pages/home.css  THIS FILE — homepage sections only

   WHAT BELONGS HERE
     Layout and composition that is specific to a homepage section and cannot be
     expressed with an existing primitive. One clearly-labelled block per
     section, in the same order as the page.

   WHAT DOES NOT BELONG HERE
     - Anything reusable across pages        -> rebrand.css §3 Primitives
     - Any raw design value                  -> add a token to rebrand.css §2 first
     - Anything a legacy page could match     -> everything must be `.wtp-*`

   RULES
     - Namespace every selector `.wtp-`, inside the `.wtp` scope root.
     - No hardcoded colours, sizes, radii, shadows, durations or spacing.
       Reference a token. The only exception is the px value inside a @media
       query, which CSS cannot take from a custom property — and only the eight
       approved breakpoints may be used (320/375/480/640/768/1024/1280/1440).
     - `!important` only to defeat a specific legacy `!important`, with a comment
       naming the rule being overridden.

   STATUS: scaffold. No sections implemented yet.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO + SEARCH + FEATURE CARDS  (one section)
   Figma: "Large Search Bar" + "Hero Visual" + "Hero Feature Cards"

   Geometry measured from the p1 render and scaled to our 720px search bar
   (factor 0.947):
     search bottom -> cards top   77px -> ~73px
     cards bottom  -> promo strip 75px -> ~71px
     background                   FLAT #F8F9FE across the whole band
   -------------------------------------------------------------------------- */

.wtp-hero {
  /* Client instruction: the hero sits on the brand primary, replacing the
     Figma "Hero Section" light wash (.wtp-section--wash, still used by Explore
     Industries and Stories). The fill is set here rather than through
     .wtp-section--navy because that modifier recolours every descendant
     heading and link white, which would blank the white feature cards' titles
     and the search dropdown's result links. Only the hero's own copy is
     re-inked below. `isolation` keeps the search dropdown inside the hero's
     stacking context, as the wash did. */
  position: relative;
  isolation: isolate;
  background-color: var(--wtp-bg-navy);
  /* Client instruction 2026-10-08: the brand-mark watermark from the live
     site's banner, centred behind the headline and search. */
  background-image: url("../../../images/rebrand/hero-watermark.webp");
  background-repeat: no-repeat;
  background-position: center var(--wtp-hero-watermark-offset);
  background-size: var(--wtp-hero-watermark-width) auto;
  text-align: center;
  padding-block: var(--wtp-hero-py-top) var(--wtp-hero-gap);
}

@media (max-width: 767px) {
  .wtp-hero {
    background-position: center var(--wtp-hero-watermark-offset-sm);
    background-size: var(--wtp-hero-watermark-width-sm) auto;
  }
}

/* Both gaps in the reference are ~72px at desktop, so the space under the
   search bar and the space under the cards use the same token. */
.wtp-hero__features {
  margin-block-start: var(--wtp-hero-gap);
}

.wtp-hero__title {
  font-size: var(--wtp-text-hero);
  line-height: var(--wtp-leading-none);   /* Figma: 72px / 72px */
  letter-spacing: var(--wtp-tracking-tighter);
  color: var(--wtp-text-on-navy);
  text-wrap: balance;
}

/* Second line in the accent ink — cyan on the primary fill, where the Figma's
   indigo has too little contrast to read. `display:block` gives the two-line
   break from the reference on wide screens; the heading still wraps naturally
   when narrow. */
.wtp-hero__title-accent {
  display: block;
  color: var(--wtp-brand-cyan);
}

.wtp-hero__lead {
  max-width: 62ch;
  margin-inline: auto;
  margin-block-start: var(--wtp-space-6);  /* Figma: 24px under the H1 */
  font-size: var(--wtp-text-lg);          /* Figma: 20px / 28px */
  --wtp-p-leading: var(--wtp-leading-snug);
  color: var(--wtp-text-on-navy-muted);
  text-wrap: pretty;
}

/* The hero's instance of the shared company search (rebrand.css §3
   .wtp-autocomplete owns the dropdown); this only places it in the hero. */
.wtp-company-search--hero {
  position: relative;
  max-width: var(--wtp-search-max-width);  /* Figma: 768px */
  margin-inline: auto;
  margin-block-start: var(--wtp-section-gap); /* Figma: 48px under the subtitle */
  text-align: start;
}

/* Solid white pill with the Figma 1px white @ 20% stroke. The Figma glass
   fill (white @ 70% + backdrop blur) was drawn for the light wash; over the
   primary fill it turns grey-blue and dims the placeholder, so the pill is
   opaque here. */
.wtp-hero .wtp-search {
  background-color: var(--wtp-input-bg);
  border-color: var(--wtp-border-glass);
}

/* The results dropdown is the shared .wtp-autocomplete primitive in
   rebrand.css §3 — the header search uses the same one. */

/* --- Feature cards --------------------------------------------------------
   Measured card height ~186px at desktop; driven by content, not fixed. */

.wtp-hero__features-grid {
  align-items: stretch;
}

/* Grid gap measured at 38px in the render -> 41px at our container scale. */
.wtp-hero__features-grid {
  gap: var(--wtp-hero-card-gap);
}

.wtp-feature-card {
  align-items: center;
  text-align: center;
  /* Figma "Background+Border+Shadow": 384x214, r32, 1px #C6C5D4 @ 10%,
     shadow 0 24 48 #00127A @ 4%, 32px padding. */
  border-color: var(--wtp-border-card-figma);
  border-radius: var(--wtp-radius-2xl);
  box-shadow: var(--wtp-shadow-card-figma);
  padding: var(--wtp-hero-card-padding);
}

/* Reference internal rhythm, ink-band to ink-band, scaled by 1.079:
     icon ink bottom -> title cap top   35px -> 38px
     title cap bottom -> body ink top   24px -> 26px
   The margins below are tuned so the RENDERED ink gaps land on those numbers
   (the raw margin is smaller than the visual gap because the icon box and the
   title line box each carry leading). Verified by re-measuring our own render
   with the same ink-band method. */
.wtp-feature-card__title {
  margin-block-start: var(--wtp-space-8);  /* Figma: icon box bottom -> title 30px */
}

/* The reference draws the glyph bare — no chip, no tinted background. */
.wtp-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wtp-brand-indigo);
}

.wtp-feature-card__icon svg {
  width: var(--wtp-icon-xl);
  height: var(--wtp-icon-xl);
}

/* Reference body line pitch 24px -> 26px scaled. 16px at 1.65 gives 26.4px. */
.wtp-feature-card__body {
  max-width: 34ch;
  margin-inline: auto;
  margin-block-start: var(--wtp-space-3);
  font-size: var(--wtp-text-base);
  --wtp-p-leading: var(--wtp-leading-relaxed);
  text-wrap: pretty;
}

/* Three cards go straight to one column — never 2 + 1, which orphans the third.
   The .wtp-grid--fixed-3 primitive collapses 3 -> 2 at 1023px, which produced
   exactly that orphan at 768px, so this grid opts out and holds three columns
   down to 768. pages/home.css loads after rebrand.css §3 Primitives, so these win on source
   order at equal specificity. */
@media (min-width: 768px) {
  .wtp-hero__features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .wtp-hero__features-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .wtp-company-search--hero { margin-block-start: var(--wtp-space-8); }
  .wtp-hero__title-accent { display: inline; }
}

@media (max-width: 320px) {
  .wtp-feature-card__icon svg {
    width: var(--wtp-icon-lg);
    height: var(--wtp-icon-lg);
  }
}

/* NOT REPRODUCED — needs the Figma assets.
   Two localised decorative shapes sit over the flat wash in the render: a soft
   darkening along the top edge (#E6E6F2 at the top-left corner, easing to
   #F0F0FA on the right, gone by y~200) and a pale blob at the right edge around
   the search bar's height (#E0E2F1). The Figma layer names "Background
   Decoration" and "Overlay+OverlayBlur" confirm these are decoration layers, not
   a page gradient. Reproducing them by eye would be inventing shapes; they need
   exporting from Figma. Flagged rather than approximated. */


/* --------------------------------------------------------------------------
   3. PROMOTIONAL STRIP
   Figma: "Promo Strip"
   -------------------------------------------------------------------------- */

/* Full-bleed: the marquee spans the viewport, with no container gutter. The
   .wtp-marquee primitive supplies overflow clipping and the animation; only the
   strip's own proportions belong here. */
/* Reference: strip 41px tall -> 44px scaled. Text cap height 9px (uppercase,
   so ~12-13px font). Padding measured symmetric at 16px top and bottom
   (strip 724-764, cap 740-748). 16 + 12 + 16 = 44. */
.wtp-promo-strip .wtp-marquee__track {
  /* Reference message cycle (bullet to bullet) is 422px -> 455px scaled. */
  gap: var(--wtp-space-4);
  padding-block: var(--wtp-space-3);      /* Figma: 12px, strip 44px tall */
  font-size: var(--wtp-text-sm);          /* Figma "Promo Strip": Bold 14px / 20px */
  line-height: var(--wtp-leading-snug);
  letter-spacing: var(--wtp-tracking-widest);
}

.wtp-promo-strip .wtp-marquee__sep {
  opacity: 0.65;
}

/* Trim the bar at 320px so it does not dominate the screen. */
@media (max-width: 480px) {
  .wtp-promo-strip .wtp-marquee__track {
    padding-block: var(--wtp-space-3);
  }
}


/* --------------------------------------------------------------------------
   4. STATISTICS
   Figma: "Section - Trust Stats"
   Measured: bg flat #F2F3F8; 4 equal columns at quarter-centres; numeral cap
   39px (~58px scaled); label cap 8px (~12px); numeral->label 12px; top padding
   ~96px (bottom edge outside the crop, assumed symmetric).
   -------------------------------------------------------------------------- */

.wtp-stats {
  /* Was --wtp-bg-muted (#F2F3F8 measured). Unified to the one page colour
     (2026-09-24); the stat cards still read against it. */
  background-color: var(--wtp-bg-page);
  padding-block: var(--wtp-section-py-md);
}

/* Four equal columns; each stat centred in its own column, which reproduces the
   measured quarter-centres without positioning anything by hand. */
/* No column gap: the reference places the four stats on exact quarter-centres
   (measured 0.125 / 0.375 / 0.625 / 0.875 of the width). Any grid gap narrows
   the tracks and pulls the centres inward, so separation comes from padding
   inside each stat instead. */
/* Figma "Section - Trust Stats": four 268px columns on a 48px grid gap
   (1216 - 3 x 48 = 4 x 268). */
.wtp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wtp-space-12);
}

.wtp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* .wtp-stat__value / .wtp-stat__label carry the type; only the gap is local. */
.wtp-stat__label {
  margin-block-start: var(--wtp-space-2);   /* Figma: numeral -> label 8px */
  font-size: var(--wtp-text-2xs);
  letter-spacing: var(--wtp-tracking-wide); /* Figma: 0.3px on 12px */
  color: var(--wtp-text-body);              /* Figma: #535E7D */
}

/* Count-up stability. Two things keep the animation from shifting anything:
   tabular figures so every digit is the same width, and a width lock. The lock
   is measured by JS from the FINAL value before any digit changes and supplied
   as --wtp-countup-width; the declaration itself stays here in CSS. With no JS
   the property is unset, min-width falls back to auto, and the server-rendered
   final value simply sits there. */
.wtp-stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: var(--wtp-countup-width, auto);
}

/* 4 -> 2 columns below 768. Four 58px numerals will not sit on one row on a
   phone, and 2x2 keeps the band compact instead of four tall rows. */
@media (max-width: 767px) {
  .wtp-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--wtp-space-8);
  }
}


/* --------------------------------------------------------------------------
   5. EXPLORE INDUSTRIES
   Figma: "Section - Categories Grid / Explore Industries Section"
   PDF override: navy background, white cards. SUPERSEDED 2026-09-24 by
   client instruction: the hero's light wash (.wtp-section--wash) instead —
   navy read heavy here, sandwiched between navy Recent Feedback and navy
   Trending Businesses. White cards on the wash is also the Figma original.
   Measured (x1.059): grid 1200; card 276 wide; gap 32; chip 61 at 29/33 inset;
   chip -> title 31; card radius ~18; chip radius ~22.
   -------------------------------------------------------------------------- */

.wtp-industries {
  padding-block: var(--wtp-section-py-md);
}

/* Heading block: measured subtitle-ink -> card-top gap of 69px. */
.wtp-industries__header {
  margin-block-end: var(--wtp-space-16);   /* Figma: header -> grid 64px */
}

.wtp-industries__header .wtp-section__subtitle {
  margin-block-start: var(--wtp-space-4);  /* Figma: heading -> subtitle 16px */
}

.wtp-industries__all {
  flex: 0 0 auto;
  font-size: var(--wtp-text-base);
  white-space: nowrap;
}

.wtp-industries__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wtp-industry-card-gap);
}

/* Left aligned, unlike the centred feature card. */
.wtp-industry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 0;
  padding: var(--wtp-space-8);                 /* Figma: chip inset 33 */
  border-color: var(--wtp-border-card-figma);  /* Figma: 1px #C6C5D4 @ 10% */
  border-radius: var(--wtp-radius-2xl);        /* Figma: r32 */
  box-shadow: var(--wtp-shadow-hairline);      /* Figma: 0 1 2 @ 5% */
  color: var(--wtp-text-strong);
  transition: box-shadow var(--wtp-hover-duration) var(--wtp-ease-standard),
              border-color var(--wtp-hover-duration) var(--wtp-ease-standard),
              transform var(--wtp-duration-slow) var(--wtp-ease-out);
}

/* Premium hover: five cues layered. The lift is an APPROVED EXCEPTION to the
   project's no-translate-hover rule, signed off for this card after the
   shadow-only state was reviewed as too static (AGENTS.md §5.2). It is a
   transform, so the card's layout box does not move: the grid, the row heights
   and the page's scrollWidth are all untouched, and neighbours never reflow.
   Buttons and every other card still do not move.

   320ms via --wtp-duration-slow, which is also what collapses the lift to
   nothing under reduced motion. */
.wtp-industry-card:hover,
.wtp-industry-card:focus-visible {
  transform: translateY(var(--wtp-industry-hover-lift));
  box-shadow: var(--wtp-industry-hover-shadow);
  border-color: var(--wtp-industry-hover-border);
  color: var(--wtp-text-strong);
}

/* 1. chip tints toward indigo   2. glyph grows very slightly inside it */
.wtp-industry-card:hover .wtp-industry-card__chip,
.wtp-industry-card:focus-visible .wtp-industry-card__chip {
  background-color: var(--wtp-industry-hover-chip);
}

.wtp-industry-card:hover .wtp-industry-card__chip img,
.wtp-industry-card:focus-visible .wtp-industry-card__chip img {
  transform: scale(var(--wtp-industry-icon-scale));
  opacity: 1;
}

/* 3. the name takes the brand indigo */
.wtp-industry-card:hover .wtp-industry-card__name,
.wtp-industry-card:focus-visible .wtp-industry-card__name {
  color: var(--wtp-brand-indigo);
}

.wtp-industry-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--wtp-industry-chip-size);
  height: var(--wtp-industry-chip-size);
  /* 50%, not a fixed radius token: --wtp-industry-chip-size is fluid
     (48 -> 61px), and a fixed 24px radius only reads as a full circle at
     its smallest step. The reference draws a true circle at every size. */
  border-radius: 50%;
  background-color: var(--wtp-bg-chip-navy);   /* Figma "Overlay": #000642 @ 5% */
  overflow: hidden;
  transition: background-color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

/* The existing category artwork in uploads/businesscategory is PURE WHITE on
   transparent — it was drawn for the legacy navy category tiles, so on the
   reference's light chip it is invisible. brightness(0) renders it as a dark
   silhouette, which preserves the reference's light-chip / dark-glyph
   relationship while still using the client's own maintained assets.
   Deviation: the glyph is near-black rather than the reference's #12164B navy,
   and the artwork is the client's illustrations, not the Figma monoline set. */
.wtp-industry-card__chip img {
  width: var(--wtp-icon-md);                   /* Figma glyph boxes: 20px */
  height: var(--wtp-icon-md);
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.82;
  transition: transform var(--wtp-hover-duration) var(--wtp-ease-out),
              opacity var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-industry-card__initial {
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-lg);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-strong);
}

/* Measured chip-bottom -> title-cap gap of 31px. */
.wtp-industry-card__name {
  margin-block-start: var(--wtp-space-6);
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-lg);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-snug);
  color: var(--wtp-text-strong);
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

/* Reduced motion: keep every colour cue, drop both movements — the lift and
   the icon scale. Shadow, border, chip tint and title colour still carry the
   state, so hover and focus stay just as legible without anything moving. */
@media (prefers-reduced-motion: reduce) {
  .wtp-industry-card:hover,
  .wtp-industry-card:focus-visible,
  .wtp-industry-card:hover .wtp-industry-card__chip img,
  .wtp-industry-card:focus-visible .wtp-industry-card__chip img {
    transform: none;
  }
}

/* 4 -> 2 -> 1, deliberately skipping 3. There are 8 flagged industries: 4, 2
   and 1 all divide evenly, whereas 3 columns leaves a ragged 3+3+2 final row.
   The 1024 -> 1023 step is the widest jump, but a wide link tile reads better
   than an orphaned row. */
@media (max-width: 1023px) {
  .wtp-industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .wtp-industry-card { padding: var(--wtp-space-6); }
}

@media (max-width: 479px) {
  .wtp-industries__grid { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   6. RECENT FEEDBACK
   Figma: "Section - Recent Feedback"  (= the approved PDF p1 render)
   PDF override: navy background, white cards.
   Measured (x1.316, estimated from a render): grid 1200; card 384 wide, 250
   tall at four quote lines; gap 22; padding 28; logo tile 50 square; rating
   tile 31 with a 4px gap; head -> rating 14; rating -> quote 17.
   -------------------------------------------------------------------------- */

.wtp-feedback {
  padding-block: var(--wtp-section-py-md);
}

/* Measured heading-baseline -> card-top of 70px. --wtp-section-header-gap tops
   out at 56, and the heading's own descender space covers the rest. */
.wtp-feedback__header {
  margin-block-end: var(--wtp-space-16);   /* Figma: heading -> cards 64px */
}

.wtp-feedback__all {
  flex: 0 0 auto;
  font-size: var(--wtp-text-base);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SLIDER
   Swiper 11 drives this track. Swiper's own stylesheet is already loaded on
   every page (newlayouts/header.blade.php:114), so the rules below only cover
   the two things it does not: the pre-initialised state, and the Figma card
   proportions.

   Everything is written under .wtp-feedback, so none of it can reach the
   advertisement slot's swipers or any legacy page.
   -------------------------------------------------------------------------- */

/* Swiper's CSS sets `overflow: hidden` on .swiper the moment the stylesheet
   loads — script or no script. If Swiper's JS never runs (CDN blocked, error,
   JS off) that alone would clip four of the five reviews away. So until Swiper
   adds `swiper-initialized`, the track is a plain horizontal scroller: every
   review reachable, nothing hidden, and the page still cannot overflow because
   the scroller scrolls itself. */
.wtp-feedback__slider:not(.swiper-initialized) {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.wtp-feedback__slider:not(.swiper-initialized) .wtp-feedback__slide {
  width: calc((100% - 2 * var(--wtp-feedback-card-gap)) / 3);
  margin-inline-end: var(--wtp-feedback-card-gap);
  scroll-snap-align: start;
}

/* A slide is a box for a card, never a visual of its own. height:auto plus the
   flex track is what makes every card in view match the tallest one. */
.wtp-feedback__slide {
  display: flex;
  height: auto;
}

.wtp-feedback__slide > .wtp-feedback-card {
  width: 100%;
}

/* Premium slide easing. Swiper writes transition-duration inline and reads the
   timing function from this custom property, which is its supported hook. The
   curve has no overshoot: the track settles, it never bounces back. */
.wtp-feedback__slider {
  --swiper-wrapper-transition-timing-function: var(--wtp-ease-slide);
}

/* Once Swiper clips the track, a card's lift and hover shadow would be cut off
   at the top and bottom edges. The padding gives them room and the equal
   negative margin takes the same amount back out of the flow, so the section's
   vertical rhythm is byte-for-byte what it was before. 32px clears the 5px
   lift plus the shadow's 26px upward reach. Block padding only — inline
   padding would change the width Swiper measures slides against, and the
   overlap stays inside the header's 54px bottom margin, so it never covers the
   heading or the "View All Reviews" link. */
.wtp-feedback__slider.swiper-initialized {
  padding-block: var(--wtp-space-8);
  margin-block: calc(var(--wtp-space-8) * -1);
}

/* Reduced motion: no animated slide. `speed: 0` in the initialiser already
   covers the normal case; this also catches a visitor who turns the preference
   on AFTER the page has loaded, when the initialiser has long since run.
   !important because the value it has to beat is Swiper's own inline
   `transition-duration` on the track, and only !important outranks that. */
@media (prefers-reduced-motion: reduce) {
  .wtp-feedback__track {
    transition-duration: 0ms !important;
  }

  /* Drop the lift, keep every colour cue: hover and focus stay just as legible
     without anything moving. Same treatment the industry card gets. */
  .wtp-feedback-card:hover,
  .wtp-feedback-card:focus-within {
    transform: none;
  }
}

/* Fallback widths track slidesPerView so the pre-initialised scroller shows the
   same card size the slider will: 3 up from 1024, 2 from 768, 1 below. */
@media (max-width: 1023px) {
  .wtp-feedback__slider:not(.swiper-initialized) .wtp-feedback__slide {
    width: calc((100% - var(--wtp-feedback-card-gap)) / 2);
  }
}

@media (max-width: 767px) {
  .wtp-feedback__slider:not(.swiper-initialized) .wtp-feedback__slide {
    width: 100%;
  }
}

.wtp-feedback-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--wtp-feedback-card-padding);            /* Figma: 32 */
  border: 2px solid var(--wtp-feedback-card-border);    /* Figma: 2px #C4C6CF @ 30% */
  border-radius: var(--wtp-radius-lg);                  /* Figma: 16 */
  box-shadow: var(--wtp-feedback-card-shadow);          /* Figma: 0 1 30 @ 10% */
  text-align: start;
  transition: box-shadow var(--wtp-hover-duration) var(--wtp-ease-standard),
              border-color var(--wtp-hover-duration) var(--wtp-ease-standard),
              transform var(--wtp-duration-slow) var(--wtp-ease-out);
}

/* Premium hover: the same small upward lift the industry card takes, plus
   elevation, border and colour. Approved exception to the no-translate-hover
   rule (AGENTS.md §5.2); the client asked for the two cards to behave alike,
   which supersedes the earlier decision that the slider's own movement was
   enough on its own.

   transform only, so the card's layout box never moves: the slide keeps its
   width, the track keeps its length, and the page's scrollWidth is untouched.
   No bounce, no rotation, no scale. Every cue also fires on :focus-visible, so
   a keyboard user gets the identical state. */
.wtp-feedback-card:hover,
.wtp-feedback-card:focus-within {
  transform: translateY(var(--wtp-feedback-hover-lift));
  box-shadow: var(--wtp-feedback-card-shadow-hover);
  border-color: var(--wtp-feedback-hover-border);
}

.wtp-feedback-card:hover .wtp-feedback-card__attribution,
.wtp-feedback-card__main:focus-visible .wtp-feedback-card__attribution {
  color: var(--wtp-brand-indigo);
}

/* The card is an <article> with two links (profile + Companies House), since
   a link cannot contain a link. The profile link holds the card's content and
   its ::after is stretched over the whole card, so clicking anywhere on the
   card still opens the profile; the Companies House link sits above that
   overlay. `position: relative` on the card is what the overlay anchors to. */
.wtp-feedback-card {
  position: relative;
}

.wtp-feedback-card__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.wtp-feedback-card__main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--wtp-radius-lg);
}

/* Focus ring drawn round the whole card, not round the text block inside it.
   Overrides the generic `.wtp :focus-visible` outline for this one link. */
.wtp-feedback-card .wtp-feedback-card__main:focus-visible {
  outline: none;
}

.wtp-feedback-card .wtp-feedback-card__main:focus-visible::after {
  outline: var(--wtp-border-width-thick) solid var(--wtp-border-focus);
  outline-offset: 2px;
}

/* Footer row, pinned to the card bottom so the link lines up across cards
   whose quotes differ in length. Beats the generic `.wtp-card > * + *`
   margin on source order. */
.wtp-feedback-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;   /* "View Full Report" on the right (client 2026-10-16) */
  column-gap: var(--wtp-space-4);
  width: 100%;
  margin-block-start: auto;
  padding-block-start: var(--wtp-space-4);
}

/* Same type treatment as the trending card's "View Full Report"
   (.wtp-trending-card__cta). States its own colour, with the card class in
   the selector so it outranks `.wtp-section--navy a` — which would make it
   white on this white card. Companies House is 44px tall for touch and raised
   above the overlay; a click on View Full Report falls through to the overlay
   and opens the profile. */
.wtp-feedback-card .wtp-feedback-card__cta,
.wtp-feedback-card .wtp-feedback-card__ch {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-space-2);
  min-height: var(--wtp-tap-target-min);
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-trending-cta-leading);
  color: var(--wtp-text-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

/* A cue, not a link: clicks pass through it to the profile link's overlay. */
.wtp-feedback-card .wtp-feedback-card__cta {
  position: static;
  pointer-events: none;
}

.wtp-feedback-card .wtp-feedback-card__ch:hover,
.wtp-feedback-card .wtp-feedback-card__ch:focus-visible,
.wtp-feedback-card:hover .wtp-feedback-card__cta,
.wtp-feedback-card__main:focus-visible ~ .wtp-feedback-card__foot .wtp-feedback-card__cta {
  color: var(--wtp-brand-indigo);
}

/* Hovering the Companies House link is not hovering the report: keep the
   report cue neutral while the pointer is on the other link. */
.wtp-feedback-card:has(.wtp-feedback-card__ch:hover) .wtp-feedback-card__cta {
  color: var(--wtp-text-strong);
}

.wtp-feedback-card__cta .wtp-icon,
.wtp-feedback-card__ch .wtp-icon {
  flex: 0 0 auto;
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
}

/* Header row: logo tile + attribution + relative time. */
.wtp-feedback-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--wtp-space-4);
  width: 100%;
  min-width: 0;
}

/* The reference draws this tile square, not rounded like the shared
   --wtp-logo-tile-radius (8px), and larger than the shared 44px. */
.wtp-feedback-card__logo {
  width: var(--wtp-feedback-logo-size);
  height: var(--wtp-feedback-logo-size);
  border-radius: 0;
  font-size: var(--wtp-text-lg);
}

.wtp-feedback-card__ident {
  display: flex;
  flex-direction: column;
  min-width: 0;                       /* the wrap guarantee for long names */
}

/* .wtp-section--navy sets `a { color: white }`, which this card is. Text on a
   white card therefore has to state its own colour — inheritance would make it
   invisible. Same reason the time and quote below do. */
.wtp-feedback-card__attribution {
  font-size: var(--wtp-text-base);          /* Figma: Regular 16 / 1.3 */
  font-weight: var(--wtp-weight-regular);
  line-height: var(--wtp-leading-snug);
  color: var(--wtp-text-strong);
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

/* "Reviewed By" carries no weight of its own in the reference; it reads as part
   of the same bold line. Kept as an element so the two company names can be
   styled apart later without touching the markup. */
.wtp-feedback-card__by {
  font-weight: inherit;
}

/* Measured ~11px. Rendered at 12px on --wtp-text-body rather than the render's
   #7C7E7D: that grey is 4.13:1 on white, below the 4.5:1 AA floor. This is an
   accessibility-driven deviation and is recorded as one. */
.wtp-feedback-card__time {
  margin-block-start: var(--wtp-space-1);
  font-size: var(--wtp-text-xs);            /* Figma: 13px */
  line-height: var(--wtp-leading-snug);
  color: var(--wtp-text-body);
}

/* Section-scoped rating size. The shared tokens (22px tile / 14px glyph) come
   from the design system's default; this reference draws the widget noticeably
   larger relative to the card — 24px of a 292px card, which is 31px of ours.
   Set as local custom properties so the shared primitive is reused unchanged
   and no other section is affected. */
.wtp-feedback-card__rating {
  --wtp-rating-tile-size: var(--wtp-feedback-rating-tile);
  --wtp-rating-glyph-size: var(--wtp-feedback-rating-glyph);
  --wtp-rating-tile-gap: var(--wtp-feedback-rating-gap);
  margin-block-start: var(--wtp-space-4);
}

/* Measured leading 1.25 — tight, and what the reference draws. Clamped to four
   lines by .wtp-clamp-4 in the markup; no fixed height, so a short review
   simply makes a shorter card. */
.wtp-feedback-card__quote {
  margin-block-start: var(--wtp-space-4);
  font-size: var(--wtp-text-lg);            /* Figma: Medium 20 / 1.3 */
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-text-ink);
  --wtp-p-leading: var(--wtp-leading-snug);
}

/* Columns are owned by Swiper's `breakpoints` (3 from 1024, 2 from 768, 1
   below), per HOMEPAGE.md §7 — not by CSS, or the two would disagree and
   Swiper's inline widths would win anyway. The only CSS equivalents are the
   pre-initialised fallback widths above. */

/* 320px: the head row is allowed to wrap so a long company name takes the full
   card width instead of being squeezed beside the tile. The quote clamps to
   three lines here, per the section spec. */
@media (max-width: 479px) {
  .wtp-feedback-card__head {
    flex-wrap: wrap;
    gap: var(--wtp-space-3);
  }

  .wtp-feedback-card__quote {
    -webkit-line-clamp: 3;
  }
}


/* --------------------------------------------------------------------------
   7. TRENDING BUSINESSES
   Figma: "Section - Trending Businesses (Bento Style)" (visual reference only)
   PDF:   p2 render — three equal white cards per row on navy. The PDF is the
          more literal source for this section's structure, so the grid below
          is a plain 3-column layout, reusing .wtp-grid--fixed-3 exactly as
          rebrand.css §3 Primitives already defines it (3 -> 2 at 1024px -> 1 at 640px)
          — no new grid-template-columns rule needed here.

   No render crop was supplied for this frame (unlike Recent Feedback and
   Explore Industries above), so card gap/padding reuse the same tokens as the
   two navy sections above it rather than inventing section-specific pixel
   values.
   -------------------------------------------------------------------------- */

.wtp-trending {
  padding-block: var(--wtp-section-py-md);
}

.wtp-trending__header {
  margin-block-end: var(--wtp-space-16);   /* Figma: header -> grid 64px */
}

/* Figma "Section - Trending Businesses (Data-Rich Cards)": a 16px Regular
   line sits ABOVE the heading (16px gap), not a subtitle below it. Body
   colour since the section went light (2026-10-20). */
.wtp-trending__header .wtp-section__subtitle {
  order: -1;
  margin-block: 0 var(--wtp-space-4);
  font-size: var(--wtp-text-base);
  color: var(--wtp-text-body);
}

.wtp-trending .wtp-grid {
  gap: var(--wtp-space-8);                 /* 32px: the Figma 1280-wide 3-column grids (feature cards, Latest News) */
  /* Every row as tall as the tallest one. Cards already stretch to their own
     row, but a row of one-line names came out shorter than a row holding a
     two-line name; the Figma cards are all one height. */
  grid-auto-rows: 1fr;
}

/* --------------------------------------------------------------------------
   CARD
   White on the light page tint since 2026-10-20 (it was white on #00127A):
   a hairline border and the shared navy-alpha shadows separate it, as on
   the industry card. See the --wtp-trending-* tokens.
   -------------------------------------------------------------------------- */

.wtp-trending-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wtp-space-6);                 /* Figma "Business Card": 24px stack gap */
  padding: var(--wtp-card-padding);        /* Figma: 32 */
  border-color: var(--wtp-trending-card-border);
  border-radius: var(--wtp-radius-md);     /* Figma: r12 */
  box-shadow: var(--wtp-trending-card-shadow);
  text-align: start;
  transition: box-shadow var(--wtp-hover-duration) var(--wtp-ease-standard),
              border-color var(--wtp-hover-duration) var(--wtp-ease-standard),
              transform var(--wtp-duration-slow) var(--wtp-ease-out);
}

/* Premium hover: the same lift the industry and feedback cards take.
   Approved exception to the no-translate-hover rule (AGENTS.md §5.2), kept
   consistent across all three cards it applies to. Transform only, so the
   grid track and the page's scrollWidth are untouched; every cue also fires
   on :focus-visible for keyboard parity. */
.wtp-trending-card:hover,
.wtp-trending-card:focus-visible {
  transform: translateY(var(--wtp-trending-hover-lift));
  box-shadow: var(--wtp-trending-hover-shadow);
  border-color: var(--wtp-trending-hover-border);
}

.wtp-trending-card:hover .wtp-trending-card__name,
.wtp-trending-card:focus-visible .wtp-trending-card__name {
  color: var(--wtp-brand-indigo);
}

@media (prefers-reduced-motion: reduce) {
  .wtp-trending-card:hover,
  .wtp-trending-card:focus-visible {
    transform: none;
  }
}

/* The card's own 24px flex gap is the Figma stack gap; the generic
   .wtp-card child margin must not add to it. */
.wtp-trending-card > * + * { margin-block-start: 0; }

/* Figma "Rectangle 2833": 38px square logo above the name, no rounding. */
.wtp-trending-card__logo {
  width: var(--wtp-trending-logo-size);
  height: var(--wtp-trending-logo-size);
  border-radius: 0;
}

/* Figma: star row and "View Full Report" share one line, space-between.
   Figma's cards are equal height with this row at the same y in every card
   (Frame 13 "Business Card 1-6": y=171), so it is pinned to the card
   bottom; a one-line name leaves its spare space above the row, not below. */
.wtp-trending-card__foot {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wtp-space-3);
  width: 100%;
  min-width: 0;
}

/* The card states its own text colour. That was required while the section
   was navy (.wtp-section--navy sets `a { color: white }`) and is kept so the
   card reads the same on any background. */
.wtp-trending-card__name {
  min-width: 0;
  overflow-wrap: break-word;
  /* Figma "Section - Trending Businesses (Data-Rich Cards)" > "Business
     Card" > Heading 3: Space Grotesk Bold 24 / 32, sentence case. The
     1920-wide Frame 13 composite still carries the legacy Archivo 25
     uppercase here; Archivo is not an approved family (AGENTS.md §7), so
     the source component's typography wins. */
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-xl);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-trending-name-leading);
  color: var(--wtp-text-strong);
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-trending-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-space-2);
  font-family: var(--wtp-font-body);      /* Figma "View Full Report": Inter Bold 14 / 20, underlined */
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-trending-cta-leading);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: var(--wtp-text-strong);
}

.wtp-trending-card__cta .wtp-icon {
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
}

/* 320-479px: allow the head row to wrap so a long company name takes the
   full card width instead of being squeezed beside the tile, same pattern
   as the feedback card. */
@media (max-width: 479px) {
  .wtp-trending-card__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   CTA
   Centred pill beneath the grid, per HOMEPAGE.md §8. Reuses
   route('business.category') — the same "View All Categories" target
   Explore Industries already links to, not a new destination.
   -------------------------------------------------------------------------- */

.wtp-trending__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--wtp-space-16); /* Figma: grid -> button 64px */
}


/* --------------------------------------------------------------------------
   7a. PROMOTIONAL BANNER
   Figma: "Section - Promotional Banner". >=768px renders the ACTUAL
   supplied creative file (assetnew/assets/images/promo/
   actions-now-debt-recovery-banner.png, 3839x278) as a single image —
   nothing redrawn. <768px swaps to a separate, non-scrolling mobile
   composition per client request; see the section file for the full
   reasoning on both.
   -------------------------------------------------------------------------- */

.wtp-promo-banner {
  background-color: var(--wtp-promo-banner-bg);
}

.wtp-promo-banner__desktop {
  display: block;
}

.wtp-promo-banner__mobile {
  display: none;
}

/* Own scrollbar, own overflow — the page's scrollWidth is never affected by
   this element, the same contained-overflow contract .wtp-scroller already
   guarantees elsewhere on this page. Only reached at exactly 768px, where
   the desktop image is still shown (see the swap breakpoint below). */
.wtp-promo-banner__scroller {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.wtp-promo-banner__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Below 768px: the real creative can only shrink to ~55px tall before the
   button/artwork require a swipe to reach at all, which read badly on a
   phone in review — swap to the mobile-only block instead of continuing to
   shrink or scroll the real image. */
@media (max-width: 767px) {
  .wtp-promo-banner__desktop {
    display: none;
  }

  .wtp-promo-banner__mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wtp-space-4);
    padding-block: var(--wtp-space-6);
    padding-inline: var(--wtp-container-gutter);
    text-align: center;
  }
}

.wtp-promo-banner__mobile-brand {
  display: flex;
  align-items: center;
  gap: var(--wtp-space-3);
}

.wtp-promo-banner__mobile-logo {
  width: 30px;
  height: 24px;
  flex: 0 0 auto;
}

.wtp-promo-banner__mobile-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}

.wtp-promo-banner__mobile-name {
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-md);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-promo-banner-accent);
}

.wtp-promo-banner__mobile-tagline {
  font-size: 10px;
  font-weight: var(--wtp-weight-semibold);
  letter-spacing: var(--wtp-tracking-wider);
  text-transform: uppercase;
  color: var(--wtp-text-muted);
}

.wtp-promo-banner__mobile-message {
  font-size: var(--wtp-text-md);
  font-weight: var(--wtp-weight-semibold);
  color: var(--wtp-text-on-navy-muted);
  max-width: 32ch;
}

.wtp-promo-banner__mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wtp-space-2);
  width: 100%;
  min-height: var(--wtp-btn-height);
  padding-inline: var(--wtp-btn-padding-x);
  border-radius: var(--wtp-btn-radius);
  background-color: var(--wtp-promo-banner-accent);
  color: var(--wtp-text-inverse);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-bold);
  transition: filter var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-promo-banner__mobile-cta:hover,
.wtp-promo-banner__mobile-cta:focus-visible {
  filter: brightness(1.12);
}

.wtp-promo-banner__mobile-cta .wtp-icon {
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
}


/* --------------------------------------------------------------------------
   7b. TRUSTED COMMERCIAL DEBT COLLECTION (CTA card)
   Figma: "Section - Promotional Banner" (the rounded-card child, distinct
   from the full-width banner above). Same family as .wtp-finalcta's card —
   rounded deep-navy panel on a light page — but a horizontal split (text
   left, button right) instead of a centred stack, and shorter.
   -------------------------------------------------------------------------- */

/* Figma places the banner card with no padding of its own between its
   neighbours' 96px section paddings. Here the full-bleed ad creative sits
   directly above, so the section carries one 48px gap above the card and
   none below (the next section's own 96px top padding follows). */
/* Client instruction 2026-10-05: a FULL-WIDTH navy band like the other navy
   sections, not the Figma's rounded card (1216x296, r48, floating shadow)
   inset in the container. The fill moves from the card to the section; the
   copy and button stay on the container's edges. */
.wtp-trusted-debt {
  padding-block: var(--wtp-section-py-sm);
  background-color: var(--wtp-primary);
}

/* Now only the layout row inside the band — no fill, radius, shadow or
   padding of its own. */
.wtp-trusted-debt__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wtp-space-6);
}

.wtp-trusted-debt__text {
  min-width: 0;
  flex: 1 1 360px;
}

/* Measured directly from a 600dpi crop of the PDF card: isolated the cap
   height of the "T" in "Trusted" (96px in the crop, no descender to
   confuse the reading), the card's own pixel width (3636px in the same
   crop), and scaled by the ratio between that measured card width and this
   card's actual rendered width (~1200px, full container). Result: ~44px at
   desktop — that's --wtp-text-section (--wtp-text-3xl, 28->44px), the same
   token every other section heading on this page already uses (Explore
   Industries, Trending Businesses, Cash Flow, ...), not the smaller
   --wtp-text-2xl "sub-heading" role this was wrongly built with. */
.wtp-trusted-debt__heading {
  font-size: var(--wtp-text-section);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-none);   /* Figma: 48 / 48 */
  color: var(--wtp-text-on-navy);
}

.wtp-trusted-debt__body {
  margin-block-start: var(--wtp-space-4);       /* Figma: 16px */
  max-width: var(--wtp-promo-copy-max);         /* Figma: 512px */
  font-size: var(--wtp-text-md);                /* Figma: 18px / 28px */
  --wtp-p-leading: var(--wtp-leading-relaxed);
  /* The shared on-navy subtitle ink, the same as every other navy section's
     subtitle (.wtp-section--navy .wtp-section__subtitle). Client instruction
     2026-09-24: the Figma periwinkle #7784E6 read poorly on the primary
     navy, and no other section used it. */
  color: var(--wtp-text-on-navy-muted);
}

/* Figma "Button": 296x68, padding 20/48, white, Bold 18, two-layer shadow. */
.wtp-trusted-debt__cta {
  flex: 0 0 auto;
  min-height: var(--wtp-btn-height-xl);
  padding-inline: var(--wtp-space-12);
  font-size: var(--wtp-text-md);
  box-shadow: var(--wtp-shadow-btn-white);
}

@media (max-width: 639px) {
  .wtp-trusted-debt__card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* In a column the 360px flex-basis becomes a 360px minimum HEIGHT, which
     left a large empty gap between the copy and the button. */
  .wtp-trusted-debt__text {
    flex: 0 1 auto;
  }

  .wtp-trusted-debt__body {
    max-width: none;
  }

  /* Size comes from the shared mobile CTA rule (§13). */
  .wtp-trusted-debt__cta {
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   8. MASTER YOUR CASH FLOW / SAMPLE REPORT  (illustration only)
   Figma: "Feature Section (UI Mockup)" / "Dashboard Mockup"
   -------------------------------------------------------------------------- */

.wtp-cashflow {
  background-color: var(--wtp-bg-page);   /* was --wtp-bg-cool; unified 2026-09-24 */
  padding-block: var(--wtp-section-py-md);
}

.wtp-cashflow__heading {
  max-width: 20ch;                        /* Figma text box: 568px */
  color: var(--wtp-text-ink);             /* Figma: #191C1E */
  letter-spacing: var(--wtp-tracking-normal); /* Figma: 0 — with the default -0.015em
                                             "…cash flow by" squeezes onto line 1 and
                                             the heading loses Figma's three-line break */
}

.wtp-cashflow__pane {
  gap: var(--wtp-space-20);                /* Figma grid gap 80 */
}

/* The Figma split is 568 + 80 + 568 on a 1216 container; at 1024 the two
   tracks would fall to 412px and the 536px dashboard card cannot hold its
   composition, so the split collapses one step earlier than the generic
   .wtp-split-pane (text first, panel second — DOM order, no reordering). */
@media (max-width: 1024px) {
  .wtp-cashflow__pane {
    grid-template-columns: minmax(0, 1fr);
  }

  .wtp-cashflow__panel {
    max-width: 568px;
  }
}

.wtp-cashflow__features {
  margin-block-start: var(--wtp-section-gap); /* Figma: heading -> features 48 */
  --wtp-stack-gap: var(--wtp-space-8);        /* Figma: 32 between features */
}

.wtp-cashflow__feature {
  display: flex;
  gap: var(--wtp-space-6);                 /* Figma: chip -> text 24 */
  align-items: flex-start;
}

/* Figma "Background": 42x42, r12, #00E3FD, 12px padding. */
.wtp-cashflow__feature .wtp-icon-chip {
  width: var(--wtp-cashflow-chip-size);
  height: var(--wtp-cashflow-chip-size);
  background-color: var(--wtp-brand-cyan-vivid);
}

.wtp-cashflow__feature .wtp-icon-chip svg {
  width: var(--wtp-icon-md);
  height: var(--wtp-icon-md);
}

/* Figma "Dashboard Mockup": a 16px #E6E8EA frame, r24, 0 25 50 -12 @ 25%
   shadow, wrapping the white r16 card. */
.wtp-cashflow__panel {
  padding: var(--wtp-space-4);
  border-radius: var(--wtp-radius-xl);
  background-color: var(--wtp-bg-panel-frame);
  box-shadow: var(--wtp-shadow-float);
}

/* Mobile: no frame padding around the illustration (client instruction
   2026-09-24), so the panel content uses the full column width. */
@media (max-width: 767px) {
  .wtp-cashflow__panel {
    padding: 0;
  }
}

.wtp-cashflow__feature-title {
  font-family: var(--wtp-font-body);      /* Figma: Inter Bold 18px / 28px */
  font-size: var(--wtp-text-md);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-normal);
  letter-spacing: var(--wtp-tracking-normal);
  color: var(--wtp-text-ink);             /* Figma: #191C1E */
}

.wtp-cashflow__feature-body {
  margin-block-start: var(--wtp-space-1);
  font-size: var(--wtp-text-base);
  color: var(--wtp-text-body);
}

/* Sample-report preview. The Figma frame and white card keep their box
   (536 x 610 at desktop, scaling by the same ratio below); only the card's
   contents changed (client instruction 2026-10-08). The card plays a short
   highlight video rendered from the real report UI with fictional data — an
   illustration, never a real company (AGENTS.md 5.1). The video fills the
   card exactly, so the card never changes size. Play, pause and the
   off-screen hold are in the section view's script; under reduced motion the
   script never starts it, and the visitor can still press play. */
.wtp-report-preview {
  position: relative;
  aspect-ratio: var(--wtp-report-preview-ratio);
  padding: 0;
  overflow: hidden;
  border-color: transparent;
  box-shadow: var(--wtp-shadow-none);
}

.wtp-report-preview__viewport {
  flex: 1 1 auto;
  min-height: 0;
  margin-block-start: 0;                  /* cancels the .wtp-card sibling rhythm */
}

/* Always visible, whatever part of the report is in view. */
.wtp-report-preview__badge {
  position: absolute;
  inset-block-start: var(--wtp-space-3);
  inset-inline-end: var(--wtp-space-3);
  z-index: var(--wtp-z-base);
  box-shadow: var(--wtp-shadow-sm);
}

.wtp-report-preview__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--wtp-card-bg);
}

/* Play / pause. Hidden without JS, where it could do nothing and the card
   simply shows the poster frame. */
.wtp-report-preview__toggle {
  position: absolute;
  inset-block-end: var(--wtp-space-3);
  inset-inline-end: var(--wtp-space-3);
  z-index: var(--wtp-z-base);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--wtp-icon-btn-size);
  height: var(--wtp-icon-btn-size);
  padding: 0;
  border: 0;
  border-radius: var(--wtp-radius-circle);
  background-color: var(--wtp-brand-navy-deep);
  color: var(--wtp-text-on-brand);
  box-shadow: var(--wtp-shadow-md);
  cursor: pointer;
  appearance: none;
  transition: var(--wtp-transition-colors);
}

.wtp-js .wtp-report-preview__toggle { display: inline-flex; }

.wtp-report-preview__toggle:focus-visible {
  background-color: var(--wtp-brand-navy);
}

/* Pointer devices only: on touch, :hover sticks after a tap and would leave
   the button a different colour from one visit to the next. */
@media (hover: hover) {
  .wtp-report-preview__toggle:hover {
    background-color: var(--wtp-brand-navy);
  }
}

.wtp-report-preview__toggle .wtp-icon {
  width: var(--wtp-icon-md);
  height: var(--wtp-icon-md);
}

/* One icon at a time: pause while playing, play while stopped. */
.wtp-report-preview__toggle .wtp-report-preview__toggle-play,
.wtp-report-preview.is-stopped .wtp-report-preview__toggle-pause { display: none; }
.wtp-report-preview.is-stopped .wtp-report-preview__toggle-play  { display: block; }


/* --------------------------------------------------------------------------
   9. HOW IT WORKS
   Figma: "Process Section" (Step 01 / 02 / 03)
   -------------------------------------------------------------------------- */

.wtp-howitworks {
  padding-block: var(--wtp-section-py-md);
}

/* Visible heading + intro (client instruction 2026-09-24). The gap clears
   the step numbers, which sit 24px above the chips. Same 64px header -> grid
   rhythm as Trending Businesses. */
.wtp-howitworks__header {
  margin-block-end: var(--wtp-space-16);
}

.wtp-howitworks__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wtp-section-gap);
}

/* Desktop-only connecting line, per the Figma layer's own name
   "Connecting Line (Desktop Only)" — dropped below 768px. */
/* Figma: 1px #E7E8EE at the chips' vertical centre, from the first chip's
   left edge to the last chip's right edge. */
.wtp-howitworks__grid::before {
  content: "";
  position: absolute;
  top: calc(var(--wtp-process-chip-size) / 2);
  inset-inline: calc(16.667% - var(--wtp-process-chip-size) / 2);
  height: 1px;
  background-color: var(--wtp-process-line);
  z-index: 0;
}

.wtp-howitworks__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma "Step Number": a 40x40 label overlapping the chip's top-right corner
   (chip x + 80, chip y - 24), Space Grotesk Bold 36/40, white @ 25%. */
.wtp-howitworks__number {
  position: absolute;
  top: calc(var(--wtp-space-6) * -1);
  left: calc(50% + var(--wtp-space-8));
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-2xl);         /* Figma 36px — nearest scale step */
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-on-navy-faint);
  line-height: 1;
}

/* Figma "Icon Container": 96x96, r32, white, 1px #C6C5D4 @ 15%, 0 24 48 shadow. */
.wtp-howitworks__chip {
  width: var(--wtp-process-chip-size);
  height: var(--wtp-process-chip-size);
  border: var(--wtp-border-width) solid var(--wtp-border-card-figma);
  border-radius: var(--wtp-radius-2xl);
  box-shadow: var(--wtp-shadow-card-figma);
}

.wtp-howitworks__title {
  margin-block-start: var(--wtp-space-10);  /* Figma: chip -> title 40 */
  font-size: var(--wtp-text-xl);          /* Figma: Space Grotesk Bold 24px / 32px */
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-snug);
  color: var(--wtp-text-on-navy);
}

.wtp-howitworks__body {
  margin-block-start: var(--wtp-space-4);   /* Figma: title -> body 16 */
  max-width: 38ch;                        /* Figma text box 306-350px: two lines per step */
  font-size: var(--wtp-text-base);        /* Figma: 16px / 26px */
  --wtp-p-leading: var(--wtp-leading-relaxed);
  color: var(--wtp-text-on-navy);         /* Figma: #FFFFFF */
}

@media (max-width: 767px) {
  .wtp-howitworks__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wtp-space-10);
  }

  .wtp-howitworks__grid::before {
    display: none;
  }

  /* The number keeps its Figma spot on the chip's top-right corner; stacked
     single-column steps have the same room for it as the desktop row. */

  .wtp-howitworks__step {
    flex-direction: column;
  }
}


/* --------------------------------------------------------------------------
   10. OUR STORIES
   Figma: "Section - Latest News"
   -------------------------------------------------------------------------- */

.wtp-stories {
  padding-block: var(--wtp-section-py-md);
}

.wtp-stories__header {
  margin-block-end: var(--wtp-space-16);  /* Figma: header -> grid 64px */
}

/* PDF render / Figma composite: "LATEST NEWS" set in caps. */
.wtp-stories__heading {
  text-transform: uppercase;
}

.wtp-stories__header .wtp-section__subtitle {
  margin-block-start: var(--wtp-space-2); /* Figma: heading -> subtitle 8px */
  font-family: var(--wtp-font-archivo);   /* Figma: Archivo Regular 16 */
  font-size: var(--wtp-text-base);
}

/* Figma "Read Journal": pill, padding 12/32, Space Grotesk Bold 16 uppercase. */
.wtp-stories__all {
  flex: 0 0 auto;
  padding-inline: var(--wtp-space-8);
  font-family: var(--wtp-font-display);
  text-transform: uppercase;
  letter-spacing: var(--wtp-tracking-tight);
}

.wtp-stories .wtp-grid {
  gap: var(--wtp-space-8);                /* Figma grid gap 32 */
}

/* Figma "Article - News Card": no card surface, no border, no shadow — the
   image and copy sit straight on the section. Dark ink by default: the
   section is on the light wash (2026-09-24). The navy override further down
   keeps the card correct if it is ever placed on a navy section again. */
.wtp-article-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--wtp-text-strong);
  transition: var(--wtp-transition-transform);
}

.wtp-article-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;                   /* Figma: 456x256 */
  border-radius: var(--wtp-radius-3xl);   /* Figma: r48 */
  background-color: var(--wtp-bg-chip);
  overflow: hidden;
}

.wtp-article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wtp-article-card__media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-4xl);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-muted);
}

.wtp-article-card__body {
  display: block;
  padding: 0;
  margin-block-start: var(--wtp-space-6); /* Figma: image -> title 24 */
}

.wtp-article-card__title {
  display: block;
  font-family: var(--wtp-font-archivo);   /* Figma "Article - News Card": Archivo Bold 25 / 1.3, uppercase */
  font-size: var(--wtp-text-xl);
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-snug);
  text-transform: uppercase;
  color: var(--wtp-text-strong);
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-article-card__excerpt {
  display: block;
  margin-block-start: var(--wtp-space-2); /* Figma: 7px */
  font-family: var(--wtp-font-archivo);   /* Figma: Archivo Regular 16 / 1.3 */
  font-size: var(--wtp-text-base);
  color: var(--wtp-text-body);
}

.wtp-article-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-space-2);
  margin-block-start: var(--wtp-space-5); /* Figma: 19px */
  font-family: var(--wtp-font-archivo);   /* Figma "Learn More": Archivo Regular 16 */
  font-size: var(--wtp-text-base);
  font-weight: var(--wtp-weight-regular);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: var(--wtp-primary);
}

/* Title takes the brand indigo on hover/focus, like the industry card name. */
.wtp-article-card:hover .wtp-article-card__title,
.wtp-article-card:focus-visible .wtp-article-card__title {
  color: var(--wtp-brand-indigo);
}

/* On a navy section the card reverts to the original white-on-navy ink. */
.wtp-section--navy .wtp-article-card,
.wtp-section--navy .wtp-article-card__title,
.wtp-section--navy .wtp-article-card__excerpt,
.wtp-section--navy .wtp-article-card__cta {
  color: var(--wtp-text-on-navy);
}

.wtp-article-card__cta .wtp-icon {
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
}

/* Same approved lift as every other rebrand card on this page — transform
   only, no layout shift. */
.wtp-article-card:hover,
.wtp-article-card:focus-visible {
  transform: translateY(var(--wtp-trending-hover-lift));
}

@media (prefers-reduced-motion: reduce) {
  .wtp-article-card:hover,
  .wtp-article-card:focus-visible {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   11. ARE YOU A BUSINESS? (CTA)
   Figma: "Section - Are You a Business? (CTA)"
   -------------------------------------------------------------------------- */

/* The Figma's photo column was removed (client, 2026-10-15): the text is one
   centred column. Without the photo the Figma's 128px padding read as too
   big (client, 2026-10-15), so the section takes the compact rhythm.

   NAVY since 2026-10-20 (client instruction): it moved to directly below
   Explore Industries (light), so it takes the navy band and Trending
   Businesses goes light, keeping the light / navy alternation. Buttons are
   the Final CTA's on-navy pair: white pill + outlined ghost. */
.wtp-areyoubusiness {
  padding-block: var(--wtp-section-py-sm);
}

.wtp-areyoubusiness__text {
  min-width: 0;
  max-width: var(--wtp-container-narrow);
  margin-inline: auto;
  text-align: center;
}

.wtp-areyoubusiness__heading {
  font-size: var(--wtp-text-section);     /* Figma: Space Grotesk Bold 48 / 48 */
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-none);
  letter-spacing: var(--wtp-tracking-normal);
  text-transform: uppercase;              /* Figma renders the heading in caps */
  color: var(--wtp-text-on-navy);
}

.wtp-areyoubusiness__body {
  margin-block-start: var(--wtp-space-4); /* Figma: 24, tightened */
  font-size: var(--wtp-text-lg);          /* Figma: 20 / 32.5 */
  --wtp-p-leading: var(--wtp-leading-relaxed);
  color: var(--wtp-text-on-navy-muted);
}

.wtp-areyoubusiness__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wtp-space-4);                /* Figma: 16 */
  margin-block-start: var(--wtp-space-6); /* Figma: 40, tightened */
}

/* Mobile button layout and sizing: §13. */


/* --------------------------------------------------------------------------
   11a. EXPLAINER VIDEO
   No Figma frame. The player frame reuses the photo-card language from "Are
   you a business?" — large radius, floating shadow — at the Final CTA measure.
   -------------------------------------------------------------------------- */

/* Normal top padding (2026-10-20). It was 0 while Latest News sat above on
   the same background (client instruction 2026-10-08), but Latest News has
   since moved, and a navy section above left the heading flush against it.
   Only when the light Partners band is directly above does it go back to 0,
   so the two bottom/top paddings do not stack into a double gap. */
.wtp-video {
  padding-block: var(--wtp-section-py-md);
}

.wtp-partners + .wtp-video {
  padding-block-start: 0;
}

.wtp-video__frame {
  position: relative;
  max-width: var(--wtp-container-cta);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--wtp-radius-2xl);
  background-color: var(--wtp-bg-navy);   /* the video's own ground, shown while it loads */
  box-shadow: var(--wtp-shadow-float);
}

/* The video is uploaded from the admin, so its shape is not known here. A 16:9
   box is reserved before anything loads; a video of another shape is fitted
   inside it (never cropped) on the frame's navy ground. */
.wtp-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Covers the whole poster, so a click anywhere on it starts the video; the
   visible white disc is the icon inside it. */
.wtp-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wtp-primary);
  cursor: pointer;
}

.wtp-video__play[hidden] { display: none; }

.wtp-video__play .wtp-icon {
  box-sizing: border-box;
  width: var(--wtp-video-play-size);
  height: var(--wtp-video-play-size);
  padding: var(--wtp-video-play-inset);
  border-radius: var(--wtp-radius-circle);
  background-color: var(--wtp-bg-surface);
  box-shadow: var(--wtp-shadow-btn-white);
  transition: background-color var(--wtp-hover-duration) var(--wtp-ease-standard),
              color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

/* Colour only — hover must not move buttons. */
.wtp-video__play:hover .wtp-icon,
.wtp-video__play:focus-visible .wtp-icon {
  background-color: var(--wtp-brand-cyan);
  color: var(--wtp-brand-navy-deep);
}

.wtp-video__play:focus-visible {
  outline: none;
}

.wtp-video__play:focus-visible .wtp-icon {
  box-shadow: var(--wtp-shadow-btn-white), var(--wtp-shadow-focus-ring);
}

@media (max-width: 480px) {
  .wtp-video__frame {
    border-radius: var(--wtp-radius-lg);
  }
}


/* --------------------------------------------------------------------------
   11b. PARTNERS & SUPPORTERS (static logo grid)
   Source: the live homepage — no Figma frame. Was a scrolling marquee until
   2026-10-20; the client asked for fixed positions, no slider, no autoplay,
   and a richer hover instead.
   -------------------------------------------------------------------------- */

/* Same page tint as the sections around it (client instruction 2026-10-05;
   it was white). */
.wtp-partners {
  padding-block: var(--wtp-section-py-sm);
  background-color: var(--wtp-bg-page);
}

/* Visible title above the marquee (client instruction 2026-10-05). Centred,
   with "Will They Pay" forced onto its own line as in the client's reference;
   the first line still wraps naturally on narrow screens. */
.wtp-partners__heading {
  text-wrap: balance;
}

.wtp-partners__heading-line {
  display: block;
}

/* 2 -> 3 -> 6 per row. A centred wrapping flex row, not a grid, so any
   count of uploads sits in the middle — a short or partial row is centred
   instead of leaving empty columns on the right (client, 2026-10-21). Each
   card keeps the width of a 1/2, 1/3 or 1/6 column. */
.wtp-partners__grid {
  --wtp-partner-cols: 2;
  --wtp-partner-gap: var(--wtp-space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wtp-partner-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wtp-partners__item {
  flex: 0 0 calc((100% - (var(--wtp-partner-cols) - 1) * var(--wtp-partner-gap)) / var(--wtp-partner-cols));
  min-width: 0;
}

@media (min-width: 640px) {
  .wtp-partners__grid {
    --wtp-partner-cols: 3;
    --wtp-partner-gap: var(--wtp-space-6);
  }
}

@media (min-width: 1024px) {
  .wtp-partners__grid {
    --wtp-partner-cols: 6;
  }
}

/* Staggered entrance, left to right. The index comes from the view. */
.wtp-js .wtp-partners__item.wtp-reveal {
  transition-delay: calc(var(--wtp-partner-index, 0) * var(--wtp-reveal-stagger));
}

/* A white card: the uploads have a white ground, so the artwork sits in it
   seamlessly instead of showing as a white box on the page tint. */
.wtp-partners__card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: var(--wtp-space-2);
  background-color: var(--wtp-bg-surface);
  border: var(--wtp-border-width) solid var(--wtp-border-subtle);
  border-radius: var(--wtp-radius-lg);
  box-shadow: var(--wtp-shadow-hairline);
  transition: box-shadow var(--wtp-hover-duration) var(--wtp-ease-standard),
              border-color var(--wtp-hover-duration) var(--wtp-ease-standard),
              opacity var(--wtp-hover-duration) var(--wtp-ease-standard);
}

/* Indigo top bar, drawn in from the left on hover. A transform, so nothing
   reflows. */
.wtp-partners__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1;
  height: var(--wtp-border-width-thick);
  background-color: var(--wtp-brand-indigo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wtp-duration-slow) var(--wtp-ease-out);
}

/* Square cell reserved up front, so lazy-loaded uploads of any shape cannot
   shift the layout as they arrive. */
.wtp-partners__logo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform var(--wtp-duration-slow) var(--wtp-ease-out);
}

/* Hover only where there is a real pointer, so a tap on touch never leaves a
   card stuck in its hover state. The card does not lift (AGENTS.md §5.2):
   elevation, border, the bar and the artwork carry the state. */
@media (hover: hover) {
  .wtp-partners__card:hover {
    box-shadow: var(--wtp-shadow-hover);
    border-color: var(--wtp-partner-hover-border);
  }

  .wtp-partners__card:hover::before {
    transform: scaleX(1);
  }

  .wtp-partners__card:hover .wtp-partners__logo {
    transform: scale(var(--wtp-partner-logo-scale));
  }

  /* Spotlight: the others step back while one card is hovered. Keyed on a
     hovered card, not the grid, so the pointer in a gap dims nothing. */
  .wtp-partners__grid:has(.wtp-partners__card:hover) .wtp-partners__card:not(:hover) {
    opacity: var(--wtp-partner-dim-opacity);
  }
}

/* Reduced motion: the artwork does not scale. Shadow, border, bar and dimming
   still mark the hovered card; the duration tokens make them instant. */
@media (prefers-reduced-motion: reduce) {
  .wtp-partners__card:hover .wtp-partners__logo {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   12. FINAL CTA
   Figma: "Section - Final CTA"
   -------------------------------------------------------------------------- */

/* Client instruction 2026-10-05: a FULL-WIDTH navy band like the other navy
   sections, not the Figma's 1024px rounded card (r48) inset in the page. The
   flat primary fill (itself an earlier client change from the Figma #000642
   radial wash) moves from the card to the section. */
.wtp-finalcta {
  padding-block: var(--wtp-section-py-lg);
  background-color: var(--wtp-primary);
}

/* Client instruction 2026-10-05: no line between the Final CTA band and the
   footer. Drops the footer's dashed cyan top accent (rebrand.css §9) on the
   homepage only — this file loads nowhere else, so every other page keeps it.
   The footer is a sibling of <main>, not of the section, hence :has(). */
.wtp-body :has(> .wtp-finalcta) + .wtp-footer {
  border-block-start: 0;
}

/* Now only the centred copy column inside the band — the 1024px measure is
   kept so the headline wraps as before; no fill, radius or padding. */
.wtp-finalcta__card {
  max-width: var(--wtp-container-cta);
  margin-inline: auto;
  text-align: center;
  align-items: center;
  background: none;
  border-color: transparent;
  border-radius: 0;
  box-shadow: var(--wtp-shadow-none);
  padding: 0;
}

.wtp-finalcta__heading {
  font-size: var(--wtp-text-hero);        /* Figma "Section - Final CTA": 72px / 72px, -3.6px */
  font-weight: var(--wtp-weight-bold);
  line-height: var(--wtp-leading-none);
  letter-spacing: var(--wtp-tracking-tightest);
  color: var(--wtp-text-on-navy);
  max-width: 24ch;
}

.wtp-finalcta__subtitle {
  margin-block-start: var(--wtp-space-6);       /* Figma: 24 */
  max-width: var(--wtp-finalcta-subtitle-max);  /* Figma: 672 */
  font-size: var(--wtp-text-lg);                /* Figma: 20px / 28px */
  --wtp-p-leading: var(--wtp-leading-snug);
  color: var(--wtp-text-on-navy-soft);          /* Figma: white @ 60% */
}

.wtp-finalcta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--wtp-space-6);                      /* Figma: 24 */
  margin-block-start: var(--wtp-space-12);      /* Figma: 48 */
}

/* Figma buttons: 68-72 tall, padding 20/40, Bold 18; white one carries the
   two-layer shadow, the ghost one a 2px white @ 20% stroke. */
.wtp-finalcta__actions .wtp-btn {
  min-height: var(--wtp-btn-height-xl);
  padding-inline: var(--wtp-btn-padding-x-xl);
  font-size: var(--wtp-text-md);
}

.wtp-finalcta__actions .wtp-btn--on-navy {
  box-shadow: var(--wtp-shadow-btn-white);
}

.wtp-finalcta__actions .wtp-btn--ghost {
  border-width: 2px;
  border-color: var(--wtp-border-glass);
}

/* Mobile button layout and sizing: §13. */


/* --------------------------------------------------------------------------
   13. MOBILE CTA SIZING
   Derived — the Figma has no mobile frame. Below 640px every section CTA is
   the same button: full row width, one height, one label size, one padding.
   The desktop sizes above (48 / 60 / 68 tall, three paddings, two label
   sizes) each follow their own Figma frame, which read as inconsistent once
   the sections stack in a single column. A pair shares its row equally from
   480px and stacks below it (the two 479px rules above).
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .wtp-trending__cta .wtp-btn,
  .wtp-trusted-debt__cta,
  .wtp-stories__all,
  .wtp-areyoubusiness__actions .wtp-btn,
  .wtp-finalcta__actions .wtp-btn {
    width: 100%;
    min-height: var(--wtp-btn-height-mobile);
    padding-inline: var(--wtp-space-5);
    font-size: var(--wtp-btn-font-size);
  }

  .wtp-promo-banner__mobile-cta {
    min-height: var(--wtp-btn-height-mobile);
    padding-inline: var(--wtp-space-5);
    font-size: var(--wtp-btn-font-size);
  }

  /* The copy column centres its children, which shrank the row to the width
     of its labels; stretch it so the buttons span the column like the rest. */
  .wtp-finalcta__actions {
    align-self: stretch;
  }

  /* ...and drop the card's invisible 1px border, which left these two
     buttons 2px narrower than every other CTA on the page. */
  .wtp-finalcta__card {
    border-width: 0;
  }

  /* Grid, not flex: equal halves whatever the label length or border width. */
  .wtp-areyoubusiness__actions,
  .wtp-finalcta__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wtp-space-4);
  }
}

@media (max-width: 479px) {
  .wtp-areyoubusiness__actions,
  .wtp-finalcta__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   14. ADVERTISEMENT SLOT — MOBILE CONTROLS  (homepage only)
   <x-advertisement-slot> overlays its dots and pause button on the bottom of
   the creative. A wide banner creative is only ~27px tall on a phone, shorter
   than the 52px control bar, so the bar was clipped by the slot. Below 768px
   the bar sits under the creative instead. Scoped to .wtp so the slots on the
   category and profile pages (shared advertisement-slot.css) are untouched.
   -------------------------------------------------------------------------- */

/* One slim row under the creative: small dots centred, a quiet pause button at
   the trailing edge. The legacy grey 32px discs and 10px grey dots were as
   tall as the banner itself and read as heavier than the advert. */
@media (max-width: 767px) {
  .wtp .advertisement-slot-controls {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    min-height: var(--wtp-tap-target-min);
    padding: 0 var(--wtp-container-gutter);
  }

  .wtp .advertisement-slot-pagination {
    grid-column: 2;
    min-height: 0;
    gap: var(--wtp-space-2);
  }

  .wtp .advertisement-slot-pagination .advertisement-slot-bullet {
    width: var(--wtp-space-2);
    height: var(--wtp-space-2);
    border: 0;
    background: var(--wtp-border-strong);
    transition: var(--wtp-transition-colors);
  }

  .wtp .advertisement-slot-pagination .advertisement-slot-bullet-active {
    background: var(--wtp-primary);
  }

  .wtp .advertisement-slot-nav {
    grid-column: 3;
    justify-self: end;
    /* Pull the 44px hit area out so the icon itself lines up with the gutter. */
    margin-inline-end: calc(var(--wtp-space-3) * -1);
  }

  .wtp .advertisement-slot-toggle {
    width: var(--wtp-tap-target-min);
    height: var(--wtp-tap-target-min);
    background: none;
    color: var(--wtp-text-muted);
    transition: var(--wtp-transition-colors);
  }

  .wtp .advertisement-slot-toggle:hover,
  .wtp .advertisement-slot-toggle:focus-visible {
    color: var(--wtp-primary);
  }
}