/* ==========================================================================
   Will They Pay — Rebrand core stylesheet
   --------------------------------------------------------------------------
   The ONE shared stylesheet every rebranded page loads (via
   rebranding/layouts/app.blade.php). Page-specific styles live in
   pages/<page>.css and are pushed by that page only.

     rebrand/
     ├── rebrand.css        THIS FILE — shared by every rebrand page
     └── pages/
         └── pages/home.css       homepage sections only

   Adding a new rebrand page: reuse everything here, put only what is
   unique to that page in pages/<page>.css, and push it onto the
   `rebrand-page-css` stack. If a page style turns out to be needed by a
   second page, promote it into PRIMITIVES below — never copy it.

   CONTENTS (in cascade order — order matters, do not reshuffle)
     1. FONTS       @font-face for Space Grotesk + Inter (self-hosted, /Fonts).
     2. TOKENS      ONLY :root custom properties. The single source of truth for every design value.
     3. PRIMITIVES  Reusable .wtp-* components: container, section, grid, card, button, chip, rating...
     4. LAYOUT      Site chrome shared by every rebrand page: header, drawer, footer.

   Every selector is .wtp-* and every value comes from a TOKEN (§2). No
   @layer (AGENTS.md rule 4.4). See docs/DESIGN-SYSTEM.md.
   ========================================================================== */


/* ##########################################################################
   §1  FONTS
   ########################################################################## */

/* ==========================================================================
   Will They Pay — Rebrand Typography
   --------------------------------------------------------------------------
   Space Grotesk (display) + Inter (body), per DESIGN-SYSTEM.md §4 and
   AGENTS.md §7 — the Figma's binding typography direction. Both are SIL
   Open Font License (fully free, self-hostable, no licensing restriction),
   fetched from Google Fonts (their canonical distribution point) and
   self-hosted here under Fonts/, matching the existing Archivo pattern.
   Archivo is NOT an approved substitute; these are the real, intended faces,
   not a fallback dressed up as one.

   WEIGHTS — matched to what this rebrand's CSS actually declares via
   --wtp-weight-*, not guessed:
     Space Grotesk 400 / 500 / 700  (--wtp-weight-regular/medium/bold)
     Inter         400 / 500 / 600 / 700
       (--wtp-weight-regular/medium/semibold/bold)
   Real static instances, not synthetic — verified via fontTools:
   OS/2.usWeightClass on each file reads exactly 400/500/600/700, matching
   its filename. No weight here is a browser-synthesised fake.

   SCOPE — PRIVATE FAMILY NAMES (2026-09-24). This sheet now also loads on
   every legacy page, for the site-wide rebrand header/footer. Legacy rules
   (.title, .page-title, .categories, .home_trend, body copy ...) already name
   'Space Grotesk'. If the faces were registered under their public names,
   legacy content would switch from its fallback font to the real face. So
   they are registered as 'WTP Space Grotesk' / 'WTP Inter', names no legacy
   rule uses: old pages render exactly as before, and only .wtp-* rules
   (through --wtp-font-display / --wtp-font-body) get the real faces.
   ========================================================================== */

@font-face {
  font-family: 'WTP Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/Fonts/SpaceGrotesk-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'WTP Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/Fonts/SpaceGrotesk-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'WTP Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/Fonts/SpaceGrotesk-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'WTP Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/Fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'WTP Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/Fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'WTP Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/Fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'WTP Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/Fonts/Inter-Bold.woff2') format('woff2');
}


/* ##########################################################################
   §2  TOKENS
   ########################################################################## */

/* ==========================================================================
   Will They Pay — Rebrand Design Tokens
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for every design value used by the rebrand.

   Rules of engagement (see docs/DESIGN-SYSTEM.md):
     1. No component, blade or page may hardcode a colour, size, radius,
        shadow, duration or spacing value. Reference a token.
     2. If a value you need is missing, ADD IT HERE first, then use it.
     3. This section contains ONLY custom properties on :root. It declares no
        visual rules, so loading it cannot alter any existing page.
     4. Token values are derived from the approved design renders. Where a
        value could not be read with confidence it is marked LOW-CONFIDENCE
        and must be confirmed against Figma before that component ships.

   Provenance: values measured from the approved redesign renders extracted
   from draft.pdf (lossless PNG crops preferred over JPEG crops). See
   docs/HOMEPAGE.md for the measurement method and per-value notes.
   ========================================================================== */

:root {

  /* ======================================================================
     1. BRAND COLOURS
     ====================================================================== */

  /* Primary brand navy. Design renders measure #041275 (PNG) / #01127A (JPEG).
     The existing application already uses #00127A in 33 places across
     app.min.css. The delta is <=4/255 per channel (imperceptible), so we keep
     the established brand value for continuity. Documented decision. */
  --wtp-brand-navy:            #00127A;
  --wtp-brand-navy-hover:      #000E63;

  /* PRIMARY — the one navy for every solid brand surface: header, footer,
     mobile drawer, navy sections, the Trusted Commercial Debt banner and the
     final CTA card. Reference this, not the raw brand value, so the whole
     page stays one colour. */
  --wtp-primary:               var(--wtp-brand-navy);
  --wtp-primary-hover:         var(--wtp-brand-navy-hover);

  /* Deep navy — hero search button, final CTA card, promotional banner.
     Measured #02094D / #01094A / #01063E. */
  --wtp-brand-navy-deep:       #000642;  /* Figma: hero search button, final CTA card, promo banner */
  --wtp-brand-navy-deep-hover: #00042E;

  /* Periwinkle/indigo accent — hero headline second line, hero feature-card
     icons. Measured #4B55AC. This is a NEW colour, not present in the
     current site palette. */
  --wtp-brand-indigo:          #4B55AC;
  --wtp-brand-indigo-soft:     #535A8D;

  /* Cyan accent — rating stars on navy, "Master your cash flow" feature icon
     chips, chart highlight bar. Measured #67E0F9 / #AFEEFD. */
  --wtp-brand-cyan:            #67E0F9;
  --wtp-brand-cyan-vivid:      #00E3FD;  /* Figma cash-flow feature chips + trend text */

  /* Promotional strip (Creditsafe marquee).
     Re-measured across the full width of the render: the bar is NOT flat, it is
     a horizontal gradient running light terracotta -> deep rust. Seven samples
     from x=20 to x=1100 fall monotonically #C76E5E -> #7D3124, which is a real
     gradient rather than compression noise. --wtp-brand-rust is kept as the
     solid fallback and matches the measured mid-point (#A44E41).
     STILL LOW-CONFIDENCE on exact endpoints — confirm against Figma. */
  --wtp-brand-rust:            #A34B3D;
  --wtp-promo-from:            #DC6A5B;  /* Figma "Promo Strip" gradient stop 0 */
  --wtp-promo-to:              #82271D;  /* Figma "Promo Strip" gradient stop 1 */
  --wtp-gradient-promo:        linear-gradient(90deg, var(--wtp-promo-from) 0%, var(--wtp-promo-to) 100%);

  /* "Section - Promotional Banner" (the partner ad creative — "Actions Now"
     debt recovery). >=768px renders the actual supplied asset file, and
     this background is only the loading-state colour behind it (sampled
     from the same asset, #0A0A0A, confirmed opaque). <768px renders a
     separate mobile-only composition (see promo-banner.blade.php) that
     reuses this same background plus a sampled accent red for its own
     logo mark, heading colour and CTA — the one place this red is
     tokenised, since that mobile block is deliberately re-drawn rather
     than an image. LOW CONFIDENCE on the exact red (sampled at small
     glyph scale from a render crop); close enough to read correctly. */
  --wtp-promo-banner-bg:        #0A0A0A;
  --wtp-promo-banner-accent:    #B0212F;


  /* ======================================================================
     2. SEMANTIC / STATUS COLOURS
     ====================================================================== */

  /* Positive / verified. Measured #00B477 in the design; the live rating
     scale already uses #00B67A. Kept as the existing brand value. */
  --wtp-success:               #00B67A;
  --wtp-success-soft:          #D6FFF6;

  /* Risk / alert — risk ring, red-flag text. Measured #AB2D25 / #AE352E. */
  --wtp-danger:                #AC2F26;
  --wtp-danger-soft:           #FBEAE8;

  --wtp-warning:               #FF8622;
  --wtp-warning-soft:          #FFF1E4;

  /* Existing 5-step review rating scale. PRESERVED EXACTLY — these drive
     live review data rendering and must not drift. */
  --wtp-rating-1:              #FF3722;
  --wtp-rating-2:              #FF8622;
  --wtp-rating-3:              #FFCE00;
  --wtp-rating-4:              #73CF11;
  --wtp-rating-5:              #00B67A;
  --wtp-rating-empty:          #D6D6D6;

  /* SINGLE-COLOUR RATING — what the approved PDF p1 render actually draws.
     Sampled from all three cards in that render, including the clearly
     negative one: (4,182,122), (4,182,122), (5,179,120). One green on every
     tile, whatever the score — it is the brand colour, not a score signal.
     That is #00B67A within JPEG noise, i.e. --wtp-rating-5 exactly.

     The five-step scale above is NOT deleted: it is the live site's data
     semantic and other surfaces still use it. `.wtp-rating--brand` opts a
     single widget into the render's treatment. */
  --wtp-rating-brand:          var(--wtp-rating-5);


  /* ======================================================================
     3. SECTION / BACKGROUND COLOURS
     ====================================================================== */

  /* ONE page background for every light surface of a rebrand page (client
     instruction 2026-09-24: the white final CTA and the mixed #F2F3F9 /
     #F7F9FB / #FFFFFF bands looked inconsistent). It is the hero's own
     --wtp-bg-subtle, so light sections, the gaps between them and the body
     all read as one continuous page colour. Cards stay white on top of it. */
  --wtp-bg-page:               var(--wtp-bg-subtle);
  --wtp-bg-subtle:             #F8F9FF;  /* hero wash, light sections (Figma) */
  --wtp-bg-muted:              #F2F3F9;  /* Explore Industries, stats band */
  --wtp-bg-cool:               #F7F9FB;  /* Master your cash flow section  */
  --wtp-bg-chip:               #F2F3F6;  /* icon chips, inset sub-cards    */
  --wtp-bg-surface:            #FFFFFF;  /* all cards                      */
  --wtp-bg-navy:               var(--wtp-primary);         /* navy sections */
  --wtp-bg-navy-deep:          var(--wtp-brand-navy-deep);
  /* Risk panel "Historical Trend" chart (2026-09-24, client instruction:
     the Figma #002147 panel, grey-blue bars and cyan highlight did not
     match the rest of the page). Now brand-primary navy deepening to
     navy-deep, white-tint history bars, and the latest bar + trend note in
     the same risk-red family as the card's "85 CRITICAL" ring — a rising
     risk reads as a warning, not as a cheerful cyan accent. */
  --wtp-risk-chart-bg:         linear-gradient(145deg, var(--wtp-primary) 0%, var(--wtp-brand-navy-deep) 100%);
  --wtp-risk-chart-bar:        rgba(255, 255, 255, 0.16);
  --wtp-risk-chart-baseline:   rgba(255, 255, 255, 0.14);
  --wtp-risk-chart-hi:         linear-gradient(180deg, #FF8A7A 0%, #E5484D 100%);
  --wtp-risk-chart-trend-bg:   rgba(255, 122, 107, 0.16);
  --wtp-risk-chart-trend-text: #FFA59B;                               /* >= 6.9:1 on its pill, over either navy */
  --wtp-bg-panel-frame:        #E6E8EA;  /* Figma "Dashboard Mockup" outer frame */
  --wtp-bg-fact:               #F2F4F6;  /* Figma dashboard inset sub-cards */

  /* Hero gradient — measured #F8F9FE (left) to #E0E2F1 (right). */
  --wtp-gradient-hero:         linear-gradient(120deg, #F8F9FE 0%, #E0E2F1 100%);


  /* ======================================================================
     4. TEXT COLOURS
     ====================================================================== */

  /* On light backgrounds */
  --wtp-text-strong:           #000642;  /* headings, card titles (Figma)  */
  --wtp-text-ink:              #191C1E;  /* neutral dark headings (Figma)  */
  --wtp-text-body:             #535E7D;  /* body copy (Figma)              */
  --wtp-text-muted:            #767683;  /* meta, captions, placeholders (Figma) */
  --wtp-text-link:             #0B0F46;

  /* On navy / dark backgrounds */
  --wtp-text-on-navy:          #FFFFFF;
  --wtp-text-on-navy-muted:    #A0A6CA;
  --wtp-text-on-navy-soft:     rgba(255, 255, 255, 0.60); /* Figma final CTA subtitle */

  --wtp-text-on-brand:         #FFFFFF;  /* text on filled brand buttons   */
  --wtp-text-inverse:          #FFFFFF;


  /* ======================================================================
     5. BORDER COLOURS
     ====================================================================== */

  --wtp-border-subtle:         #EDEEF4;  /* hairlines between light cards  */
  --wtp-border-default:        #E0E2F1;
  --wtp-border-strong:         #C7CAD9;
  --wtp-border-on-navy:        rgba(255, 255, 255, 0.24);
  --wtp-border-focus:          var(--wtp-brand-indigo);

  --wtp-border-width:          1px;
  --wtp-border-width-thick:    2px;


  /* ======================================================================
     6. TYPOGRAPHY — FAMILIES
     --------------------------------------------------------------------
     INTENDED DESIGN TYPOGRAPHY (binding):
       Display / headings : Space Grotesk
       Body / UI          : Inter

     These are the rebrand's typefaces. Archivo is NOT an approved
     substitute and must not be treated as the design direction.

     CURRENT STATE: neither font file exists in this repository. Only
     Archivo and Myriad Pro are self-hosted (Fonts/), and app.min.css has
     zero @font-face rules — its font-family:'Space Grotesk' declarations
     have never resolved.

     The stacks below therefore name the intended faces FIRST. Until the
     files are supplied they render as Archivo, which is a TEMPORARY
     RENDERING FALLBACK, not a design decision. The moment the woff2 files
     land in Fonts/ and the @font-face block is declared, every component
     picks them up with no further code change.

     ACTION REQUIRED to complete the design — see docs/DESIGN-SYSTEM.md
     §4.1 for the exact file list, weights and ready-to-paste @font-face
     block. Do not close this out by approving Archivo.
     ====================================================================== */

  --wtp-font-display: 'WTP Space Grotesk', 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wtp-font-body:    'WTP Inter', 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wtp-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The PDF-approved Figma composites (Trending, Latest News) set their card
     copy in Archivo; used only where those frames specify it. */
  --wtp-font-archivo: 'Archivo', 'WTP Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;


  /* ======================================================================
     7. TYPOGRAPHY — WEIGHTS
     --------------------------------------------------------------------
     Archivo is self-hosted at 400 / 500 / 700 only (see header.blade.php).
     600 is declared for when a 6-weight face is available; until then the
     browser synthesises or snaps it to 700. Avoid relying on 600 alone to
     carry a visual distinction.
     ====================================================================== */

  --wtp-weight-regular:        400;
  --wtp-weight-medium:         500;
  --wtp-weight-semibold:       600;
  --wtp-weight-bold:           700;


  /* ======================================================================
     8. TYPOGRAPHY — FLUID SIZE SCALE
     --------------------------------------------------------------------
     Every size is clamp()-based and interpolates between the 320px hard
     minimum and the 1440px design width. This is what removes the need for
     per-breakpoint font-size overrides and guarantees headings wrap rather
     than overflow at 320px.

     Desktop values are measured from the approved renders (+/- 2px).
     ====================================================================== */

  --wtp-text-3xs:   0.6875rem;                                  /* 11px  static  */
  --wtp-text-2xs:   0.75rem;                                    /* 12px  static  */
  --wtp-text-xs:    clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);   /* 12 -> 13 */
  --wtp-text-sm:    clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);   /* 13 -> 14 */
  --wtp-text-base:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);       /* 15 -> 16 */
  --wtp-text-md:    clamp(1rem,     0.96rem + 0.2vw,  1.125rem);    /* 16 -> 18 */
  --wtp-text-lg:    clamp(1.0625rem, 1rem + 0.3vw,    1.25rem);     /* 17 -> 20 */
  --wtp-text-xl:    clamp(1.125rem, 1.02rem + 0.54vw, 1.5rem);      /* 18 -> 24 (reaches 24 at 1440, not ~1570) */
  --wtp-text-2xl:   clamp(1.375rem, 1.19rem + 0.93vw, 2rem);        /* 22 -> 32 */
  --wtp-text-3xl:   clamp(1.75rem,  1.43rem + 1.61vw, 2.75rem);     /* 28 -> 44 */
  --wtp-text-4xl:   clamp(2rem,     1.46rem + 2.68vw, 3rem);        /* 32 -> 48 */
  --wtp-text-5xl:   clamp(2.25rem,  1.32rem + 4.64vw, 4.5rem);      /* 36 -> 72 */

  /* Role aliases — prefer these in components over raw steps. */
  --wtp-text-hero:        var(--wtp-text-5xl);  /* hero H1            72px */
  /* Section H2: every PDF-approved Figma section frame sets its "Heading 2"
     at 48px (Explore Categories, Trending, Promotional Banner, Feature
     Section, Are You a Business). The earlier 44px was a render measurement,
     not a Figma value. */
  --wtp-text-section:     var(--wtp-text-4xl);  /* section H2         48px */
  /* Stat numerals: Figma "Section - Trust Stats" sets them at 48px / 48px
     line-height, letter-spacing 0. (A previous 58px value was derived from a
     PDF cap-height measurement; Figma is the typography source of truth.) */
  --wtp-text-stat:        var(--wtp-text-4xl);  /* stat numerals      48px */
  --wtp-text-card-title:  var(--wtp-text-lg);   /* card H3            20px */
  --wtp-text-eyebrow:     var(--wtp-text-2xs);  /* uppercase kickers  12px */
  --wtp-text-meta:        var(--wtp-text-sm);   /* card meta          14px */


  /* ======================================================================
     9. TYPOGRAPHY — LINE HEIGHTS
     ====================================================================== */

  --wtp-leading-none:          1;
  --wtp-leading-tight:         1.1;    /* hero + section headings         */
  --wtp-leading-snug:          1.4;    /* card titles — Figma 20px/28px   */
  --wtp-leading-normal:        1.5;    /* body copy                       */
  --wtp-leading-relaxed:       1.65;   /* long-form paragraphs            */


  /* ======================================================================
     10. TYPOGRAPHY — LETTER SPACING
     ====================================================================== */

  --wtp-tracking-tightest:     -0.05em;  /* final CTA heading — Figma -3.6px/72px */
  --wtp-tracking-tighter:      -0.025em; /* hero display — Figma -1.8px/72px */
  --wtp-tracking-tight:        -0.015em; /* section headings, stat numbers */
  --wtp-tracking-normal:       0;
  --wtp-tracking-wide:         0.04em;   /* stat labels — Figma 0.3px/12px  */
  --wtp-tracking-wider:        0.08em;   /* uppercase eyebrows              */
  --wtp-tracking-widest:       0.05em;   /* promo marquee — Figma 0.7px/14px */


  /* ======================================================================
     11. SPACING SCALE (4px base)
     ====================================================================== */

  --wtp-space-0:               0;
  --wtp-space-1:               0.25rem;   /*  4px */
  --wtp-space-2:               0.5rem;    /*  8px */
  --wtp-space-3:               0.75rem;   /* 12px */
  --wtp-space-4:               1rem;      /* 16px */
  --wtp-space-5:               1.25rem;   /* 20px */
  --wtp-space-6:               1.5rem;    /* 24px */
  --wtp-space-8:               2rem;      /* 32px */
  --wtp-space-10:              2.5rem;    /* 40px */
  --wtp-space-12:              3rem;      /* 48px */
  --wtp-space-16:              4rem;      /* 64px */
  --wtp-space-20:              5rem;      /* 80px */
  --wtp-space-24:              6rem;      /* 96px */
  --wtp-space-30:              7.5rem;    /* 120px */


  /* ======================================================================
     12. SECTION SPACING (fluid vertical rhythm)
     --------------------------------------------------------------------
     Sections must never use a fixed desktop padding that survives to
     mobile. These interpolate 320 -> 1440.
     ====================================================================== */

  --wtp-section-py:            clamp(3rem, 1.6rem + 7vw, 7.5rem);   /* 48 -> 120 */

  /* Hero band rhythm, measured from the p1 render and scaled to our 720px
     search bar: both the gap under the search bar and the gap under the feature
     cards are ~72px at desktop, and the space above the headline is ~45px. */
  --wtp-hero-gap:              clamp(2.5rem, 1.6rem + 3.8vw, 5rem);  /* 40 ->  80  (Figma: 80 under the search bar and under the cards) */
  --wtp-hero-py-top:           clamp(2rem, 1.2rem + 3.4vw, 4.25rem); /* 32 ->  68  (Figma: heading at 160 minus the 92 nav) */
  /* Hero watermark (images/rebrand/hero-watermark.webp, 1920x600, the brand
     mark at ~10% white): drawn at its natural width on desktop and pulled up
     so the mark sits behind the headline and search, clear of the cards;
     scaled down below 768px so the whole mark fits a phone. */
  --wtp-hero-watermark-width:     1920px;
  --wtp-hero-watermark-offset:    -5rem;
  --wtp-hero-watermark-width-sm:  1100px;
  --wtp-hero-watermark-offset-sm: 0px;

  /* Feature-card grid, measured from the "Hero Feature Cards" reference and
     calibrated grid-extent to grid-extent (reference content 1112px in the
     render -> our 1200px container, factor 1.079):
       card gap     38px -> 41px      card padding 30px -> 32px
       card width  345px -> 372px     card height 196px -> 211px
     Scoped to this grid rather than changing --wtp-card-gap globally: only this
     one grid has been measured, and other card sections may differ. */
  --wtp-hero-card-gap:         clamp(1rem, 0.6rem + 1.56vw, 2rem);     /* 16 -> 32  (Figma grid gap 32) */

  /* Section padding for Statistics and Explore Industries. Measured ~95px above
     the stat numerals ("Trust Stats") and >=79px above the Industries heading —
     the Industries crop is cut at the section edge, so that one is a lower
     bound. 96px sits inside both. */
  --wtp-section-py-md:         clamp(3rem, 1.9rem + 5.5vw, 6rem);     /* 48 -> 96 */

  /* Explore Industries grid, measured from "Section - Categories Grid" and
     calibrated grid-span to grid-span (1133px render -> our 1200px, x1.059):
       card 261x193 -> 276x204      gap 30 -> 32
       chip 58x58   -> 61x61        chip inset 27/31 -> 29/33
     Card height is content-driven here: the reference's third line is a company
     count we have no data for (see the section file). */
  --wtp-industry-card-gap:     clamp(1rem, 0.85rem + 0.73vw, 1.5rem); /* 16 -> 24  (Figma grid gap 24) */

  /* Industry card hover. Indigo tints of --wtp-brand-indigo (#4B55AC); raw rgba
     because the alpha variants are their own design decisions, matching the
     precedent set by --wtp-border-on-navy.

     2026-09-24: Explore Industries moved from navy to the light wash (client
     instruction), so the hover shadow is now the shared navy-tinted
     --wtp-shadow-hover — the neutral-black one below was only needed on navy
     and reads as a dirty smudge on a light background.

     THE LIFT IS AN APPROVED EXCEPTION, signed off after the shadow-only hover
     was reviewed as too static. It applies to the INDUSTRY CARD ONLY: buttons
     and every other card still do not move on hover (see the note further
     down, and AGENTS.md 5.2). transform only, so the layout box never moves.

     The hover shadow is neutral-black rather than the shared navy-alpha
     --wtp-shadow-hover: this card sits on #00127A, where a navy shadow is
     invisible. Same reason as --wtp-feedback-card-shadow-hover. */
  --wtp-industry-hover-lift:   -5px;
  --wtp-industry-hover-shadow: var(--wtp-shadow-hover);
  --wtp-industry-hover-border: rgba(75, 85, 172, 0.38);
  --wtp-industry-hover-chip:   rgba(75, 85, 172, 0.10);
  --wtp-industry-icon-scale:   1.05;
  --wtp-industry-chip-size:    clamp(3rem, 2.7rem + 1.45vw, 4rem);     /* 48 -> 64  (Figma chip 64) */
  --wtp-hero-card-padding:     clamp(1.25rem, 0.95rem + 1.6vw, 2rem); /* 20 -> 32 */
  --wtp-section-py-sm:         clamp(2rem, 1.1rem + 4.5vw, 4.5rem); /* 32 ->  72 */
  --wtp-section-py-lg:         clamp(3rem, 1.6rem + 7.2vw, 8rem);   /* 48 -> 128  (Figma Are You a Business / composite sections) */
  --wtp-section-gap:           clamp(1.5rem, 0.9rem + 3vw, 3rem);   /* 24 ->  48 */
  --wtp-section-header-gap:    clamp(1.5rem, 1rem + 2.5vw, 3.5rem); /* 24 ->  56 */

  /* Recent Feedback grid, measured from the approved PDF p1 render of
     "Section - Recent Feedback" and calibrated grid-span to grid-span
     (912px render -> our 1200px container, x1.316). ESTIMATED FROM A RENDER,
     not decoded from Figma geometry — treat every figure below as +/-2px:
       card 292x190 -> 384x250      gap 17 -> 22        padding 21 -> 28
       logo tile 38 -> 50           rating tile 24 -> 31 (gap 3 -> 4)
     Card height is content-driven; 250 is what a four-line quote produces. */
  --wtp-feedback-card-gap:     clamp(1rem, 0.85rem + 0.73vw, 1.5rem);     /* 16 -> 24  (Figma 24) */
  --wtp-feedback-card-padding: clamp(1.25rem, 0.95rem + 1.5vw, 2rem);     /* 20 -> 32  (Figma 32) */
  --wtp-feedback-logo-size:    clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);    /* 36 -> 60  (Figma 60) */
  --wtp-feedback-rating-tile:  clamp(1.375rem, 1.1rem + 1.3vw, 2.25rem);   /* 22 -> 36  (Figma 36) */
  --wtp-feedback-rating-glyph: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);      /* 16 -> 24  (Figma star 24x12) */
  --wtp-feedback-rating-gap:   6px;                                        /* Figma 6.5 */

  /* White cards sit on #00127A here, so the shared --wtp-shadow-* tokens (navy
     at low alpha) are invisible. These are neutral-black instead, which is the
     only way elevation reads on the navy field. */
  --wtp-feedback-card-shadow:       0 1px 30px rgba(0, 0, 0, 0.10);  /* Figma */
  --wtp-feedback-card-border:       rgba(196, 198, 207, 0.30);       /* Figma 2px stroke */
  --wtp-feedback-card-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.30);

  /* Matches --wtp-industry-hover-lift. The client asked for the feedback card
     to lift exactly like the industry card, which supersedes the earlier
     decision that the slider's own movement was enough. Same approved
     exception, same conditions: transform only, no layout change. */
  --wtp-feedback-hover-lift:        -5px;
  --wtp-feedback-hover-border:      rgba(75, 85, 172, 0.45);

  /* Trending Businesses ("Section - Trending Businesses (Bento Style)" is the
     Figma library reference; the PDF p2 render is the structural source and
     draws three equal cards per row — see the section file). No pixel
     geometry was measured for this frame — unlike Recent Feedback and Explore
     Industries above, no render crop for it was supplied, so there is nothing
     to calibrate a grid span against. Card gap and padding therefore reuse
     the shared --wtp-card-gap / --wtp-card-padding rather than inventing
     section-specific numbers; this is a recorded approximation, not a
     measured value.

     Hover lift matches --wtp-industry-hover-lift / --wtp-feedback-hover-lift
     exactly (same approved exception, same conditions: transform only).

     Since 2026-10-20 the section is LIGHT, not navy (client instruction: "Are
     you a business?" moved below Explore Industries and took the navy band, to
     keep the light / navy alternation). White cards on the page tint need a
     hairline border and the shared navy-alpha shadows to separate them, the
     same treatment as the industry card. The old neutral-black shadows were
     only needed on #00127A. */
  --wtp-trending-hover-lift:        -5px;
  --wtp-trending-hover-shadow:      var(--wtp-shadow-hover);
  --wtp-trending-hover-border:      rgba(75, 85, 172, 0.38);
  --wtp-trending-card-shadow:       var(--wtp-shadow-hairline);
  --wtp-trending-card-border:       var(--wtp-border-subtle);
  --wtp-trending-logo-size:         38px;                             /* Figma */
  --wtp-trending-name-leading:      1.3333;                           /* Figma Space Grotesk 24 / 32 */
  --wtp-trending-cta-leading:       1.4286;                           /* Figma Inter 14 / 20 */


  /* ======================================================================
     13. CONTAINER WIDTHS & GUTTERS
     --------------------------------------------------------------------
     The 16px minimum gutter is what keeps content off the screen edge at
     320px. It is a hard floor — do not reduce it.
     ====================================================================== */

  --wtp-container-max:         1216px;  /* Figma: 1280 frame minus 2 x 32 gutters */
  --wtp-container-wide:        1440px;  /* full-bleed navy section inner   */
  --wtp-container-narrow:      896px;   /* Figma hero "Heading 1" box      */
  --wtp-container-cta:         1024px;  /* Figma "Section - Final CTA" card */
  --wtp-container-gutter:      clamp(1rem, 0.667rem + 1.667vw, 2rem); /* 16 -> 32 (Figma 32) */
  --wtp-container-gutter-min:  1rem;    /* 16px — never go below this      */

  /* Ideal minimum track width for intrinsic card grids. These are the
     "X" in repeat(auto-fit, minmax(min(100%, X), 1fr)). */
  --wtp-grid-min-default:      260px;
  --wtp-grid-min-2:            380px;
  --wtp-grid-min-3:            300px;
  --wtp-grid-min-4:            240px;


  /* ======================================================================
     14. BREAKPOINTS
     --------------------------------------------------------------------
     NOTE: CSS custom properties CANNOT be used inside @media queries.
     These exist for (a) documentation in one place and (b) JS that needs to
     read the same values. Media queries must repeat the literal px value —
     always use the numbers below, never an invented one.
     See docs/DESIGN-SYSTEM.md.
     ====================================================================== */

  --wtp-bp-xs:                 320px;   /* hard minimum supported viewport */
  --wtp-bp-sm:                 375px;
  --wtp-bp-md:                 480px;
  --wtp-bp-lg:                 640px;
  --wtp-bp-xl:                 768px;
  --wtp-bp-2xl:                1024px;
  --wtp-bp-3xl:                1280px;
  --wtp-bp-4xl:                1440px;  /* design reference width          */


  /* ======================================================================
     15. BORDER RADII
     ====================================================================== */

  --wtp-radius-xs:             4px;
  --wtp-radius-sm:             8px;
  --wtp-radius-md:             12px;   /* icon chips, small tiles          */
  --wtp-radius-lg:             16px;   /* standard cards                   */
  --wtp-radius-xl:             24px;   /* large panels                     */
  --wtp-radius-2xl:            32px;   /* feature / industry cards (Figma) */
  --wtp-radius-3xl:            48px;   /* final CTA card, promo banner, photo card, article image (Figma) */
  --wtp-radius-pill:           999px;  /* buttons, search bar, badges      */
  --wtp-radius-circle:         50%;


  /* ======================================================================
     16. SHADOWS
     ====================================================================== */

  --wtp-shadow-none:           none;
  --wtp-shadow-xs:             0 1px 2px rgba(2, 7, 64, 0.04);
  --wtp-shadow-sm:             0 2px 8px rgba(2, 7, 64, 0.05);
  --wtp-shadow-md:             0 6px 20px rgba(2, 7, 64, 0.07);
  --wtp-shadow-lg:             0 14px 40px rgba(2, 7, 64, 0.10);
  --wtp-shadow-xl:             0 24px 64px rgba(2, 7, 64, 0.14);
  /* Elevated search bar sitting over the hero wash */
  --wtp-shadow-search:         0 4px 6px -4px rgba(0, 0, 0, 0.10), 0 10px 15px -3px rgba(0, 0, 0, 0.10); /* Figma search pill */
  --wtp-shadow-card-figma:     0 24px 48px rgba(0, 18, 122, 0.04);   /* Figma hero feature cards, process icon */
  --wtp-shadow-hairline:       0 1px 2px rgba(0, 0, 0, 0.05);        /* Figma category cards */
  --wtp-shadow-float:          0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Figma dashboard mockup, photo card, promo banner */
  --wtp-shadow-btn-white:      0 8px 10px -6px rgba(0, 0, 0, 0.20), 0 20px 25px -5px rgba(0, 0, 0, 0.20); /* Figma white CTA buttons */
  --wtp-shadow-btn-dark:       0 2px 4px -2px rgba(0, 0, 0, 0.10), 0 4px 6px -1px rgba(0, 0, 0, 0.10);   /* Figma search button */
  --wtp-border-card-figma:     rgba(198, 197, 212, 0.10);            /* Figma card hairline stroke */
  --wtp-border-glass:          rgba(255, 255, 255, 0.20);            /* Figma search pill stroke, ghost button */
  --wtp-input-bg-glass:        rgba(255, 255, 255, 0.70);            /* Figma search pill fill */
  --wtp-bg-chip-navy:          rgba(0, 6, 66, 0.05);                 /* Figma category card icon chip */
  --wtp-text-on-navy-faint:    rgba(255, 255, 255, 0.25);            /* Figma process step number */
  --wtp-process-line:          #E7E8EE;                              /* Figma "Connecting Line (Desktop Only)" */
  --wtp-process-chip-size:     96px;                                 /* Figma "Icon Container" */
  --wtp-cashflow-chip-size:    42px;                                 /* Figma feature icon "Background" */
  --wtp-promo-copy-max:        512px;                                /* Figma promotional banner copy box */
  --wtp-finalcta-pad-top:      clamp(3rem, 1rem + 8.9vw, 9rem);      /* 48 -> 144 (Figma) */
  --wtp-finalcta-pad:          clamp(1.5rem, 0.5rem + 6.1vw, 6rem);  /* 24 ->  96 (Figma) */
  --wtp-finalcta-subtitle-max: 672px;                                /* Figma */
  --wtp-hero-blob-blur:        64px;                                 /* Figma "Overlay+Blur" layers */
  --wtp-video-play-size:       clamp(3.5rem, 2.9rem + 2.7vw, 5.5rem); /* 56 -> 88  explainer video play disc */
  --wtp-video-play-inset:      clamp(0.875rem, 0.7rem + 0.8vw, 1.5rem); /* 14 -> 24  glyph inset inside the disc */

  /* Light "wash" section background — the hero's Figma backdrop, shared by
     .wtp-section--wash (hero, Explore Industries). Two blurred discs over
     --wtp-bg-subtle, from the Figma "Overlay+Blur" layer geometry. */
  --wtp-wash-disc-lg-size:     384px;
  --wtp-wash-disc-lg-offset:   -96px;
  --wtp-wash-disc-lg-color:    rgba(0, 6, 66, 0.05);                 /* #000642 @ 5%  */
  --wtp-wash-disc-sm-size:     256px;
  --wtp-wash-disc-sm-offset:   -96px;
  --wtp-wash-disc-sm-color:    rgba(0, 18, 122, 0.10);               /* #00127A @ 10% */
  /* Card lift on hover */
  --wtp-shadow-hover:          0 16px 40px rgba(2, 7, 64, 0.12);
  --wtp-shadow-focus-ring:     0 0 0 3px rgba(75, 85, 172, 0.35);


  /* ======================================================================
     17. BUTTONS
     ====================================================================== */

  --wtp-btn-height:            48px;    /* Figma: Read Journal 48       */
  --wtp-btn-height-sm:         38px;
  --wtp-btn-height-lg:         60px;    /* Figma: search / Get Started  */
  --wtp-btn-height-xl:         68px;    /* Figma: Start Recovering / final CTA */
  /* Below 640px every CTA is this one height, whatever its desktop size
     (derived — the Figma has no mobile frame). Matches the drawer buttons. */
  --wtp-btn-height-mobile:     var(--wtp-btn-height);
  --wtp-btn-padding-x:         var(--wtp-space-6);
  --wtp-btn-padding-x-lg:      var(--wtp-space-8);
  --wtp-btn-padding-x-xl:      var(--wtp-space-10);
  --wtp-btn-radius:            var(--wtp-radius-pill);
  --wtp-btn-font-size:         var(--wtp-text-base);  /* Figma buttons: 16px */
  --wtp-btn-font-weight:       var(--wtp-weight-bold);
  --wtp-btn-tracking:          var(--wtp-tracking-normal);
  --wtp-btn-gap:               var(--wtp-space-2);

  --wtp-btn-primary-bg:        var(--wtp-primary);        /* brand primary, not the darker navy-deep */
  --wtp-btn-primary-bg-hover:  var(--wtp-primary-hover);
  --wtp-btn-primary-text:      var(--wtp-text-on-brand);

  --wtp-btn-secondary-bg:      #FFFFFF;
  --wtp-btn-secondary-text:    var(--wtp-text-strong);
  --wtp-btn-secondary-border:  var(--wtp-border-default);

  --wtp-btn-ghost-border:      var(--wtp-border-on-navy);
  --wtp-btn-ghost-text:        var(--wtp-text-on-navy);

  /* --- Hover motion -------------------------------------------------------
     The existing site fills its buttons with a left-to-right colour wipe over
     0.5s (.btn-default::before). The rebrand keeps that idea — it is a familiar
     part of the brand's feel — but makes it quicker, eased, and on-brand, and
     pairs it with a small lift. Each variant sets --wtp-btn-wipe. */
  --wtp-btn-wipe-primary:      var(--wtp-brand-indigo);
  --wtp-btn-wipe-secondary:    var(--wtp-bg-muted);
  --wtp-btn-wipe-on-navy:      var(--wtp-brand-cyan);
  --wtp-btn-wipe-ghost:        rgba(255, 255, 255, 0.14);

  --wtp-duration-wipe:         420ms;
  --wtp-ease-wipe:             cubic-bezier(0.65, 0, 0.35, 1);
  --wtp-underline-size:        2px;

  /* NOTE: buttons deliberately do NOT lift, scale or shift on hover. The wipe
     and the shadow carry the state. Do not reintroduce transform-based hover
     movement on .wtp-btn / .wtp-icon-btn — it was reviewed and rejected. */

  /* Minimum touch target — WCAG 2.5.8 / practical mobile floor. */
  --wtp-tap-target-min:        44px;


  /* ======================================================================
     18. CARDS
     ====================================================================== */

  --wtp-card-bg:               var(--wtp-bg-surface);
  --wtp-card-border:           var(--wtp-border-subtle);
  --wtp-card-radius:           var(--wtp-radius-lg);
  --wtp-card-padding:          clamp(1.25rem, 0.95rem + 1.5vw, 2rem); /* 20 -> 32 */
  --wtp-card-padding-sm:       clamp(1rem, 0.85rem + 0.75vw, 1.5rem); /* 16 -> 24 */
  --wtp-card-shadow:           var(--wtp-shadow-sm);
  --wtp-card-shadow-hover:     var(--wtp-shadow-hover);
  --wtp-card-gap:              clamp(1rem, 0.7rem + 1.5vw, 1.75rem);  /* 16 -> 28 */
  --wtp-card-title-color:      var(--wtp-text-strong);
  --wtp-card-body-color:       var(--wtp-text-body);


  /* ======================================================================
     19. INPUTS / FORMS
     ====================================================================== */

  --wtp-input-height:          52px;
  --wtp-input-height-sm:       44px;
  --wtp-input-bg:              #FFFFFF;
  --wtp-input-text:            var(--wtp-text-strong);
  --wtp-input-placeholder:     var(--wtp-text-muted);
  --wtp-input-border:          var(--wtp-border-default);
  --wtp-input-border-focus:    var(--wtp-border-focus);
  --wtp-input-radius:          var(--wtp-radius-pill);
  --wtp-input-radius-sq:       var(--wtp-radius-sm);
  --wtp-input-padding-x:       var(--wtp-space-5);
  --wtp-input-font-size:       var(--wtp-text-base);
  --wtp-input-shadow:          var(--wtp-shadow-search);
  --wtp-input-focus-ring:      var(--wtp-shadow-focus-ring);

  /* Search bar composite (hero) */
  --wtp-search-height:         78px;    /* Figma "Large Search Bar" */
  --wtp-search-height-sm:      52px;
  --wtp-search-max-width:      768px;   /* Figma */
  --wtp-search-radius:         var(--wtp-radius-pill);

  /* Company-search autocomplete list (header + hero). */
  --wtp-autocomplete-offset:      var(--wtp-space-2);    /* gap under the pill */
  --wtp-autocomplete-max-height:  min(60vh, 22.5rem);    /* ~7 rows, then scrolls */
  --wtp-autocomplete-radius:      var(--wtp-radius-xl);
  --wtp-autocomplete-shadow:      0 24px 48px -12px rgba(0, 6, 66, 0.22), 0 4px 12px rgba(0, 6, 66, 0.06);
  --wtp-autocomplete-active-bg:   var(--wtp-bg-subtle);
  --wtp-autocomplete-match-bg:    rgba(103, 224, 249, 0.35); /* brand cyan tint */
  --wtp-autocomplete-enter:       translateY(-6px);      /* open: short drop, no bounce */
  --wtp-autocomplete-spin:        800ms;                 /* spinner turn; loading only */


  /* ======================================================================
     20. BADGES / PILLS
     ====================================================================== */

  --wtp-badge-height:          24px;
  --wtp-badge-padding-x:       var(--wtp-space-3);
  --wtp-badge-radius:          var(--wtp-radius-pill);
  --wtp-badge-font-size:       var(--wtp-text-3xs);
  --wtp-badge-font-weight:     var(--wtp-weight-bold);
  --wtp-badge-tracking:        var(--wtp-tracking-wider);

  --wtp-badge-neutral-bg:      var(--wtp-bg-chip);
  --wtp-badge-neutral-text:    var(--wtp-text-body);
  --wtp-badge-success-bg:      var(--wtp-success-soft);
  --wtp-badge-success-text:    #006647;
  --wtp-badge-danger-bg:       var(--wtp-danger-soft);
  --wtp-badge-danger-text:     var(--wtp-danger);
  --wtp-badge-on-navy-bg:      #FFFFFF;
  --wtp-badge-on-navy-text:    var(--wtp-brand-navy);


  /* ======================================================================
     21. RATINGS
     --------------------------------------------------------------------
     The existing renderer draws N square tiles with a star glyph, using the
     --wtp-rating-* scale above and a gradient for the fractional tile.
     These tokens size that widget; the colour semantics must not change.
     ====================================================================== */

  --wtp-rating-tile-size:      22px;
  --wtp-rating-tile-size-sm:   18px;
  --wtp-rating-tile-gap:       3px;
  --wtp-rating-tile-radius:    var(--wtp-radius-xs);
  --wtp-rating-glyph-size:     14px;
  --wtp-rating-glyph-color:    #FFFFFF;
  /* Star colour when drawn as a glyph on navy (Trending Businesses cards) */
  --wtp-rating-star-on-navy:   var(--wtp-brand-cyan);


  /* ======================================================================
     22. ICON SIZING
     ====================================================================== */

  --wtp-icon-xs:               14px;
  --wtp-icon-sm:               16px;
  --wtp-icon-md:               20px;
  --wtp-icon-lg:               24px;
  --wtp-icon-xl:               32px;

  /* Icon "chip" — the rounded square that holds a glyph */
  --wtp-icon-chip-size:        48px;
  --wtp-icon-chip-size-sm:     40px;
  --wtp-icon-chip-radius:      var(--wtp-radius-md);
  --wtp-icon-chip-bg:          var(--wtp-bg-chip);
  --wtp-icon-chip-color:       var(--wtp-text-strong);
  --wtp-icon-chip-accent-bg:   var(--wtp-brand-cyan);

  /* Company logo tile on cards */
  --wtp-logo-tile-size:        44px;
  --wtp-logo-tile-size-sm:     36px;
  --wtp-logo-tile-radius:      var(--wtp-radius-sm);


  /* ======================================================================
     23. TRANSITIONS / MOTION
     ====================================================================== */

  --wtp-duration-fast:         120ms;
  --wtp-duration-base:         200ms;
  --wtp-duration-slow:         320ms;
  --wtp-ease-standard:         cubic-bezier(0.2, 0, 0.2, 1);
  --wtp-ease-out:              cubic-bezier(0.16, 1, 0.3, 1);

  --wtp-transition-colors:     color var(--wtp-duration-base) var(--wtp-ease-standard),
                               background-color var(--wtp-duration-base) var(--wtp-ease-standard),
                               border-color var(--wtp-duration-base) var(--wtp-ease-standard);
  --wtp-transition-transform:  transform var(--wtp-duration-base) var(--wtp-ease-out);
  --wtp-transition-shadow:     box-shadow var(--wtp-duration-base) var(--wtp-ease-standard);

  /* Viewport reveal (DESIGN-SYSTEM.md §14.5). Distance is deliberately small:
     the reveal must read as a settle, not a slide. The duration comes from
     --wtp-duration-slow, which collapses to 1ms under reduced motion. */
  --wtp-reveal-distance:       12px;
  --wtp-reveal-stagger:        70ms;

  /* Recent Feedback slider. 4.5s dwell is long enough to read a short quote
     without the track feeling parked; 700ms is slow enough to read as a glide
     rather than a flick. The curve is an ease-out quint with both control
     points inside 0..1 on the y axis, so it decelerates into place and cannot
     overshoot or bounce. Swiper reads it through its own custom property. */
  --wtp-slide-duration:        700ms;
  --wtp-slide-interval:        4500ms;
  --wtp-ease-slide:            cubic-bezier(0.22, 1, 0.36, 1);

  /* Promotional marquee speed (Creditsafe strip) */
  --wtp-marquee-duration:      28s;

  /* Sample-report preview (Master your cash flow): the Figma dashboard card,
     536 x 610. */
  --wtp-report-preview-ratio:  536 / 610;

  /* Logo marquee (Partners & Supporters). Slower than the text strip — logos
     need reading time — and each logo sits in a fixed-width cell. */
  --wtp-marquee-logo-duration: 60s;
  --wtp-marquee-logo-size:     clamp(8.75rem, 6.6rem + 9.2vw, 15rem);  /* 140 -> 240 */

  /* Partners & Supporters static grid (replaced the logo marquee 2026-10-20).
     Hover: border tint as the industry card, artwork scales inside its
     clipped card, and the cards not under the pointer dim back. */
  --wtp-partner-hover-border:  var(--wtp-industry-hover-border);
  --wtp-partner-logo-scale:    1.05;
  --wtp-partner-dim-opacity:   0.55;

  /* Statistics count-up. Long and eased rather than quick and flashy; the
     stagger lets the four figures land in sequence. Duration is read by JS, so
     it is expressed in ms here and parsed — it is NOT a CSS transition. */
  --wtp-countup-duration:      1600ms;
  --wtp-countup-stagger:       130ms;
  --wtp-hover-duration:        280ms;


  /* ======================================================================
     24. LAYOUT CHROME (header / drawer)
     ====================================================================== */

  --wtp-header-height:         92px;    /* Figma 1280 "TopNavBar"       */
  --wtp-header-height-sm:      64px;
  --wtp-header-logo-height:    30px;    /* Figma "new_logo (1) 1" 216x30 */
  --wtp-header-text:           var(--wtp-text-on-navy);
  --wtp-header-gap:            clamp(1rem, 0.4rem + 2vw, 2.25rem);

  --wtp-nav-link-size:         var(--wtp-text-base);  /* Figma nav links: 16px */
  --wtp-nav-link-weight:       var(--wtp-weight-bold);

  /* Below --wtp-drawer-fullscreen-at the drawer goes edge to edge; a partial
     panel on a very narrow phone leaves a useless sliver of page behind it. */
  --wtp-drawer-width:          min(88vw, 360px);
  --wtp-drawer-fullscreen-at:  520px;
  --wtp-drawer-bg:             var(--wtp-primary);
  --wtp-backdrop-bg:           rgba(2, 7, 64, 0.55);

  /* Circular icon button (header search trigger, drawer close) */
  --wtp-icon-btn-size:         44px;
  --wtp-icon-btn-size-sm:      40px;


  /* ======================================================================
     25. LAYERING
     ====================================================================== */

  --wtp-z-base:                1;
  --wtp-z-raised:              10;
  --wtp-z-sticky:              100;
  --wtp-z-header:              200;
  --wtp-z-dropdown:            300;
  --wtp-z-overlay:             400;
  --wtp-z-modal:               500;

  /* Dialog (profile completion prompt). */
  --wtp-dialog-max-width:      440px;
  --wtp-dialog-backdrop:       rgba(0, 6, 66, 0.55);   /* navy-deep scrim */
}


/* ==========================================================================
   Reduced motion — honour the OS preference for every token-driven
   animation and transition in the rebrand layer.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --wtp-duration-fast:      1ms;
    --wtp-duration-base:      1ms;
    --wtp-duration-slow:      1ms;
    --wtp-duration-wipe:      1ms;
    --wtp-marquee-duration:   0s;
  }
}


/* ##########################################################################
   §3  PRIMITIVES
   ########################################################################## */

/* ==========================================================================
   Will They Pay — Rebrand Primitives
   --------------------------------------------------------------------------
   The controlled styling layer for the rebrand. Depends on rebrand.css §2 Tokens.

   CO-EXISTENCE STRATEGY (see docs/DESIGN-SYSTEM.md "Styling layer"):

     * Namespace.  Every selector here is prefixed `.wtp-` and every rebrand
       section must be wrapped in a `.wtp` scope root. No selector in this
       file can match existing markup, so loading it cannot alter any
       legacy page.

     * Load order.  This sheet loads AFTER app.min.css. Where specificity is
       equal, we win. We do not use @layer: app.min.css is unlayered, and
       unlayered CSS always beats layered CSS — putting the rebrand in a
       layer would make it lose to the legacy theme.

     * Scoped reset.  app.min.css styles ~70 bare element selectors
       (h1-h6, p, ul, a, img, button, input, article, section, ...). The
       `.wtp` scope block below neutralises them using `:where()`, which
       weighs (0,1,0): enough to beat a bare `article` (0,0,1), but only a
       tie with `.wtp-card` (0,1,0) — so components win on source order.
       See the block comment on the reset itself; it is load-bearing.

     * !important.  app.min.css contains 1133 of them. Use !important here
       ONLY to defeat a specific legacy !important, and leave a comment
       naming it. There is exactly one: the paragraph line-height reset below,
       answering `p{line-height:1.8em!important}`.

   DO NOT add page- or section-specific styles to this sheet. Page styles
   belong in assetnew/assets/css/rebrand/pages/<page>.css and must be
   built from tokens.
   ========================================================================== */


/* ==========================================================================
   1. SCOPE ROOT + RESET
   ========================================================================== */

.wtp {
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-text-base);
  line-height: var(--wtp-leading-normal);
  color: var(--wtp-text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt-and-braces against a stray wide child creating a scrollbar. */
  max-width: 100%;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Scoped element reset.

   Every rule below uses `:where()` deliberately, so each selector weighs
   exactly (0,1,0) — the weight of the `.wtp` scope alone:

     * (0,1,0) BEATS a bare legacy element selector like `article` (0,0,1),
       which is what neutralises the legacy theme inside our scope;
     * (0,1,0) TIES with a component class like `.wtp-card`, and because the
       reset appears first in this section, the component always wins.

   Without `:where()` a reset like `.wtp h2` would weigh (0,1,1) and silently
   override `.wtp-card__title`. Keep this block first, and keep `:where()`.
   -------------------------------------------------------------------------- */

.wtp :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--wtp-font-display);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-strong);
  line-height: var(--wtp-leading-tight);
  letter-spacing: var(--wtp-tracking-tight);
  text-transform: none;
}

.wtp :where(p, ul, ol, dl, figure, blockquote) {
  margin: 0;
}

/* app.min.css declares `p{line-height:1.8em!important}`. Being !important it
   overrides every paragraph line-height inside .wtp no matter how specific the
   component rule is — silently, which is how it went unnoticed. This is the one
   place the rebrand must answer with !important (AGENTS.md rule 4.7), and
   `.wtp :where(p)` (0,1,0) outweighs the legacy `p` (0,0,1).

   CONSEQUENCE FOR COMPONENTS: do NOT set `line-height` directly on a <p> — it
   will lose to the rule below. Set --wtp-p-leading instead, which this rule
   consumes, so normal cascade resumes. */
.wtp :where(p) {
  line-height: var(--wtp-p-leading, var(--wtp-leading-normal)) !important;
}

.wtp :where(ul, ol) {
  padding: 0;
  list-style: none;
}

/* HTML5 sectioning elements.
   REQUIRED: app.min.css contains a bare `article{width:200%;overflow:hidden;
   animation:20s linear infinite ...}` rule — a homepage logo-marquee style
   written against the element instead of a class. It applies to EVERY
   <article> in the application. Without this reset, any rebrand card or
   section built on <article> renders at double width and is clipped. */
.wtp :where(article, section, aside, main, nav, header, footer, figure) {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  animation: none;
  float: none;
}

.wtp :where(a) {
  color: var(--wtp-text-link);
  text-decoration: none;
  transition: var(--wtp-transition-colors);
}

.wtp :where(a):hover,
.wtp :where(a):focus {
  color: var(--wtp-brand-indigo);
  text-decoration: none;
}

/* Images never overflow their column — a 320px guarantee. */
.wtp :where(img, svg, video, picture) {
  display: block;
  max-width: 100%;
  height: auto;
}

.wtp :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Long company names / URLs must wrap rather than push the layout wide. */
.wtp :where(h1, h2, h3, h4, h5, h6, p, li, a, span, div) {
  overflow-wrap: break-word;
  word-break: normal;
}

.wtp :focus-visible {
  outline: var(--wtp-border-width-thick) solid var(--wtp-border-focus);
  outline-offset: 2px;
  border-radius: var(--wtp-radius-xs);
}

/* Inline icons from components/ui/icon.blade.php carry no width/height
   attributes, and the scoped `svg { height: auto }` reset above collapses an
   unsized SVG to 0x0. Give every .wtp-icon a default box; components that need
   a different size (.wtp-icon-btn, .wtp-search__icon, the industry chip) simply
   override it. */
.wtp-icon {
  flex: 0 0 auto;
  width: var(--wtp-icon-md);
  height: var(--wtp-icon-md);
}

.wtp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. CONTAINER
   ========================================================================== */

.wtp-container {
  width: 100%;
  max-width: calc(var(--wtp-container-max) + (var(--wtp-container-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--wtp-container-gutter);
}

.wtp-container--wide {
  max-width: calc(var(--wtp-container-wide) + (var(--wtp-container-gutter) * 2));
}

.wtp-container--narrow {
  max-width: calc(var(--wtp-container-narrow) + (var(--wtp-container-gutter) * 2));
}

.wtp-container--flush {
  padding-inline: 0;
}


/* ==========================================================================
   3. SECTION
   ========================================================================== */

.wtp-section {
  position: relative;
  padding-block: var(--wtp-section-py);
  background-color: var(--wtp-bg-page);
}

/* The page itself, so blocks without a section background of their own
   (promo strip, ad slots, the Trusted Debt card's surround) show the same
   colour. `.wtp-body` only exists on the rebrand layout. */
.wtp-body {
  background-color: var(--wtp-bg-page);
}

.wtp-section--tight   { padding-block: var(--wtp-section-py-sm); }
.wtp-section--subtle  { background-color: var(--wtp-bg-subtle); }
.wtp-section--muted   { background-color: var(--wtp-bg-muted); }
.wtp-section--cool    { background-color: var(--wtp-bg-cool); }

/* Light wash — the hero's backdrop as a reusable section background: flat
   --wtp-bg-subtle plus two soft blurred discs (Figma "Overlay+Blur" x2).
   Used by the hero and Explore Industries. Pure CSS, no asset. The discs sit
   behind the content (isolation + z-index -1) and are clipped to the section,
   so they can never cause horizontal overflow. */
.wtp-section--wash {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--wtp-bg-subtle);
}

.wtp-section--wash::before,
.wtp-section--wash::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--wtp-radius-circle);
  filter: blur(var(--wtp-hero-blob-blur));
  pointer-events: none;
}

/* Large disc, top-left corner. */
.wtp-section--wash::before {
  top: var(--wtp-wash-disc-lg-offset);
  left: var(--wtp-wash-disc-lg-offset);
  width: var(--wtp-wash-disc-lg-size);
  height: var(--wtp-wash-disc-lg-size);
  background-color: var(--wtp-wash-disc-lg-color);
}

/* Small disc, half-way down the right edge. */
.wtp-section--wash::after {
  top: 50%;
  right: var(--wtp-wash-disc-sm-offset);
  width: var(--wtp-wash-disc-sm-size);
  height: var(--wtp-wash-disc-sm-size);
  background-color: var(--wtp-wash-disc-sm-color);
}

/* Navy sections — PDF-approved override for Explore Industries and
   Recent Feedback. Sets the on-navy text defaults for all descendants. */
.wtp-section--navy {
  background-color: var(--wtp-bg-navy);
  color: var(--wtp-text-on-navy-muted);
}

.wtp-section--navy :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wtp-text-on-navy);
}

.wtp-section--navy a {
  color: var(--wtp-text-on-navy);
}

.wtp-section--navy-deep {
  background-color: var(--wtp-bg-navy-deep);
  color: var(--wtp-text-on-navy-muted);
}

.wtp-section--navy-deep :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wtp-text-on-navy);
}

/* Section header block: eyebrow / heading / subtitle / action */
.wtp-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wtp-space-4);
  margin-block-end: var(--wtp-section-header-gap);
}

.wtp-section__header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wtp-section__heading {
  font-size: var(--wtp-text-section);
}

.wtp-section__eyebrow {
  display: block;
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-text-eyebrow);
  font-weight: var(--wtp-weight-bold);
  letter-spacing: var(--wtp-tracking-wider);
  text-transform: uppercase;
  color: var(--wtp-text-muted);
  margin-block-end: var(--wtp-space-2);
}

.wtp-section--navy .wtp-section__eyebrow,
.wtp-section--navy-deep .wtp-section__eyebrow {
  color: var(--wtp-text-on-navy-muted);
}

.wtp-section__subtitle {
  font-size: var(--wtp-text-md);
  color: var(--wtp-text-body);
  margin-block-start: var(--wtp-space-3);
  max-width: 60ch;
}

.wtp-section--navy .wtp-section__subtitle,
.wtp-section--navy-deep .wtp-section__subtitle {
  color: var(--wtp-text-on-navy-muted);
}


/* ==========================================================================
   4. GRID
   --------------------------------------------------------------------------
   auto-fit + minmax means columns collapse by available space, not by
   breakpoint. `min()` guarantees the track can shrink below its ideal
   minimum on a 320px screen instead of overflowing.
   ========================================================================== */

/* `--wtp-grid-min`, `--wtp-stack-gap` and `--wtp-cluster-gap` are deliberate
   per-instance override hooks. They are intentionally NOT defined on :root —
   leaving them unset is what lets the fallback apply — and every fallback
   resolves to a token. Set them inline on a specific element when one layout
   needs to deviate. */

.wtp-grid {
  display: grid;
  gap: var(--wtp-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wtp-grid-min, var(--wtp-grid-min-default))), 1fr));
}

.wtp-grid--2 { --wtp-grid-min: var(--wtp-grid-min-2); }
.wtp-grid--3 { --wtp-grid-min: var(--wtp-grid-min-3); }
.wtp-grid--4 { --wtp-grid-min: var(--wtp-grid-min-4); }

/* Explicit column counts for layouts that must not reflow arbitrarily. */
.wtp-grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wtp-grid--fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wtp-grid--fixed-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .wtp-grid--fixed-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wtp-grid--fixed-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .wtp-grid--fixed-4,
  .wtp-grid--fixed-3,
  .wtp-grid--fixed-2 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   5. CARD
   ========================================================================== */

.wtp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;                       /* lets the card shrink inside a grid */
  padding: var(--wtp-card-padding);
  background-color: var(--wtp-card-bg);
  border: var(--wtp-border-width) solid var(--wtp-card-border);
  border-radius: var(--wtp-card-radius);
  box-shadow: var(--wtp-card-shadow);
  color: var(--wtp-card-body-color);
  transition: var(--wtp-transition-shadow), var(--wtp-transition-transform);
}

.wtp-card--compact   { padding: var(--wtp-card-padding-sm); }
.wtp-card--flush     { padding: 0; overflow: hidden; }
.wtp-card--borderless{ border-color: transparent; }
.wtp-card--flat      { box-shadow: var(--wtp-shadow-none); }

/* Shadow only — no lift. Matches the reviewed decision that hover must not
   move anything (see the note in rebrand.css §2 Tokens). */
.wtp-card--interactive:hover,
.wtp-card--interactive:focus-within {
  box-shadow: var(--wtp-card-shadow-hover);
}

.wtp-card__title {
  font-size: var(--wtp-text-card-title);
  color: var(--wtp-card-title-color);
  line-height: var(--wtp-leading-snug);
}

.wtp-card__meta {
  font-size: var(--wtp-text-meta);
  color: var(--wtp-text-muted);
}

.wtp-card__body {
  font-size: var(--wtp-text-base);
  color: var(--wtp-card-body-color);
  --wtp-p-leading: var(--wtp-leading-normal);
}

.wtp-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-3);
  margin-block-start: auto;
  padding-block-start: var(--wtp-space-4);
}

/* Stack of vertical rhythm inside a card */
.wtp-card > * + * { margin-block-start: var(--wtp-space-3); }
.wtp-card__footer { margin-block-start: auto; }


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.wtp-btn {
  position: relative;
  /* `isolation` keeps the ::before wipe above the button's own background but
     still behind the label, without needing a wrapper element around the text. */
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wtp-btn-gap);
  min-height: var(--wtp-btn-height);
  min-width: var(--wtp-tap-target-min);
  padding-inline: var(--wtp-btn-padding-x);
  border: var(--wtp-border-width) solid transparent;
  border-radius: var(--wtp-btn-radius);
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-btn-font-size);
  font-weight: var(--wtp-btn-font-weight);
  letter-spacing: var(--wtp-btn-tracking);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  /* A button label is always one line (client requirement). Narrow screens
     shrink the type and padding below instead of letting the label wrap. */
  white-space: nowrap;
  cursor: pointer;
  background: none;
  transition: var(--wtp-transition-colors), var(--wtp-transition-shadow);
  /* Never let a long label blow out a narrow column. */
  max-width: 100%;
}

/* The wipe. Evolved from the existing site's .btn-default::before fill: same
   left-to-right reveal, but scaleX (compositor-friendly) instead of animating
   width, quicker, eased, and clipped to the pill radius. */
.wtp-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--wtp-btn-wipe, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wtp-duration-wipe) var(--wtp-ease-wipe);
}

.wtp-btn:hover::before,
.wtp-btn:focus-visible::before {
  transform: scaleX(1);
}

/* Buttons must NOT move on hover — no lift, no scale. The colour wipe plus a
   deeper shadow carry the state entirely, so nothing shifts under the cursor. */
.wtp-btn:hover,
.wtp-btn:focus-visible {
  box-shadow: var(--wtp-shadow-md);
}

/* Pressed: shadow pulls in tight. Still no movement. */
.wtp-btn:active {
  box-shadow: var(--wtp-shadow-xs);
  transition-duration: var(--wtp-duration-fast);
}

/* On the way out the wipe retracts to the right, so it reads as a sweep
   through rather than a rubber band. */
.wtp-btn:not(:hover)::before {
  transform-origin: right center;
}

.wtp-btn--sm { min-height: var(--wtp-btn-height-sm); padding-inline: var(--wtp-space-4); }
.wtp-btn--lg { min-height: var(--wtp-btn-height-lg); padding-inline: var(--wtp-btn-padding-x-lg); }
.wtp-btn--xl { min-height: var(--wtp-btn-height-xl); padding-inline: var(--wtp-btn-padding-x-xl); font-size: var(--wtp-text-md); }

/* Full-width on narrow screens is the default escape hatch for CTA rows. */
.wtp-btn--block { width: 100%; }

/* Each variant supplies its own wipe colour; the base rules above do the work. */

/* Filled variants drop the base 1px transparent border. The wipe (::before)
   is clipped by overflow:hidden to the PADDING box, but the button's own
   background still paints under the border — so with a border, hovering
   left a 1px ring of the resting colour around the wipe. Height is
   unaffected (min-height is border-box). Outlined variants (--secondary,
   --ghost) keep their border: it is their visible outline. */
.wtp-btn--primary,
.wtp-btn--on-navy {
  border-width: 0;
}

.wtp-btn--primary {
  --wtp-btn-wipe: var(--wtp-btn-wipe-primary);
  background-color: var(--wtp-btn-primary-bg);
  color: var(--wtp-btn-primary-text);
}

.wtp-btn--primary:hover,
.wtp-btn--primary:focus {
  color: var(--wtp-btn-primary-text);
}

.wtp-btn--secondary {
  --wtp-btn-wipe: var(--wtp-btn-wipe-secondary);
  background-color: var(--wtp-btn-secondary-bg);
  color: var(--wtp-btn-secondary-text);
  border-color: var(--wtp-btn-secondary-border);
}

.wtp-btn--secondary:hover,
.wtp-btn--secondary:focus {
  border-color: var(--wtp-border-strong);
  color: var(--wtp-btn-secondary-text);
}

/* On navy: solid white pill (header "Sign In / Sign Up", CTA "Search Company").
   Wipes to the cyan accent; the label stays dark navy, which reads strongly
   against cyan. */
.wtp-btn--on-navy {
  --wtp-btn-wipe: var(--wtp-btn-wipe-on-navy);
  background-color: var(--wtp-bg-surface);
  color: var(--wtp-text-strong);
}

.wtp-btn--on-navy:hover,
.wtp-btn--on-navy:focus {
  color: var(--wtp-text-strong);
}

/* Same fix as .wtp-section--navy .wtp-btn-link below: `.wtp-section--navy a`
   sets every anchor to white at (0,1,1) specificity, which otherwise beats
   this component's own (0,1,0) colour rule and makes the label invisible on
   its own white pill. First needed by the Trending Businesses CTA — every
   earlier .wtp-btn--on-navy use (header "Sign In / Sign Up") sits outside a
   .wtp-section--navy scope, so the collision never surfaced before. */
.wtp-section--navy .wtp-btn--on-navy,
.wtp-section--navy-deep .wtp-btn--on-navy,
.wtp-section--navy .wtp-btn--on-navy:hover,
.wtp-section--navy .wtp-btn--on-navy:focus,
.wtp-section--navy-deep .wtp-btn--on-navy:hover,
.wtp-section--navy-deep .wtp-btn--on-navy:focus {
  color: var(--wtp-text-strong);
}

/* On navy: outlined ghost pill (CTA "Leave a Review"). */
.wtp-btn--ghost {
  --wtp-btn-wipe: var(--wtp-btn-wipe-ghost);
  background-color: transparent;
  color: var(--wtp-btn-ghost-text);
  border-color: var(--wtp-btn-ghost-border);
}

.wtp-btn--ghost:hover,
.wtp-btn--ghost:focus {
  border-color: var(--wtp-text-on-navy);
  color: var(--wtp-btn-ghost-text);
}

.wtp-btn[disabled],
.wtp-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Text link with trailing arrow — "View All Categories", "Learn More".
   Hover draws an underline in from the left. Nothing moves. */
.wtp-btn-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-space-2);
  min-height: var(--wtp-tap-target-min);
  font-size: var(--wtp-text-meta);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-link);
  white-space: nowrap;
}

.wtp-btn-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 10px;
  height: var(--wtp-underline-size);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wtp-duration-base) var(--wtp-ease-out);
}

.wtp-btn-link:hover::after,
.wtp-btn-link:focus-visible::after {
  transform: scaleX(1);
}

.wtp-section--navy .wtp-btn-link,
.wtp-section--navy-deep .wtp-btn-link {
  color: var(--wtp-text-on-navy);
}


/* ==========================================================================
   7. INPUTS + SEARCH
   ========================================================================== */

.wtp-input {
  width: 100%;
  min-width: 0;                       /* required for flex/grid shrinking */
  min-height: var(--wtp-input-height);
  padding-inline: var(--wtp-input-padding-x);
  background-color: var(--wtp-input-bg);
  border: var(--wtp-border-width) solid var(--wtp-input-border);
  border-radius: var(--wtp-input-radius-sq);
  color: var(--wtp-input-text);
  font-size: var(--wtp-input-font-size);
}

.wtp-input::placeholder { color: var(--wtp-input-placeholder); opacity: 1; }

.wtp-input:focus {
  outline: none;
  border-color: var(--wtp-input-border-focus);
  box-shadow: var(--wtp-input-focus-ring);
}

.wtp-input--pill { border-radius: var(--wtp-input-radius); }

/* Hero search: icon + field + button in one pill.
   Wraps to a stacked block on narrow screens so nothing is ever clipped. */
.wtp-search {
  display: flex;
  align-items: center;
  gap: var(--wtp-space-4);              /* Figma: icon -> input 16px */
  width: 100%;
  min-height: var(--wtp-search-height); /* Figma: 78px */
  padding: var(--wtp-space-2) var(--wtp-space-2) var(--wtp-space-2) var(--wtp-space-6); /* Figma: 8 / 8 / 8 / 24 */
  background-color: var(--wtp-input-bg);
  border: var(--wtp-border-width) solid var(--wtp-input-border);
  border-radius: var(--wtp-search-radius);
  box-shadow: var(--wtp-input-shadow);
}

.wtp-search__icon {
  flex: 0 0 auto;
  width: var(--wtp-icon-md);
  height: var(--wtp-icon-md);
  color: var(--wtp-text-muted);
}

.wtp-search__field {
  flex: 1 1 auto;
  min-width: 0;                       /* the anti-overflow guarantee */
  border: 0;
  background: transparent;
  font-size: var(--wtp-text-md);      /* Figma "Large Search Bar": Medium 18px */
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-input-text);
}

.wtp-search__field:focus { outline: none; }
.wtp-search__field::placeholder { color: var(--wtp-input-placeholder); opacity: 1; }

/* Safari (macOS + iOS) draws type=search with its own bezel, inner padding and
   a built-in magnifier, which broke the pill there. Strip the native chrome so
   every browser renders the same bare field; a long placeholder ends in an
   ellipsis instead of being cut mid-letter. */
.wtp-search__field {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border-radius: 0;
  text-overflow: ellipsis;
}

.wtp-search__field::-webkit-search-decoration { -webkit-appearance: none; }

/* The field has no outline of its own, so the whole pill shows the focus. */
.wtp-search:focus-within {
  box-shadow: var(--wtp-input-shadow), var(--wtp-input-focus-ring);
}

.wtp-search__submit {                 /* Figma "Button": 141x60, padding 16/40, Bold 18px, two-layer shadow */
  flex: 0 0 auto;
  min-height: var(--wtp-btn-height-lg);
  padding-inline: var(--wtp-space-10);
  font-size: var(--wtp-text-md);
  box-shadow: var(--wtp-shadow-btn-dark);
}

/* Magnifier inside the submit button — shown only in the compact mobile pill. */
.wtp-search__submit-icon { display: none; }

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

/* Below 640px the pill stays ONE row — the familiar mobile search bar: field
   on the left, a round magnifier button on the right. (The earlier stacked
   card — field over a full-width button — did not read as a search box.)
   The leading icon goes, since the button now carries the magnifier, and the
   "Search" label stays for screen readers. Derived mobile behaviour — the
   Figma has no mobile frame. */
@media (max-width: 640px) {
  .wtp-search {
    gap: var(--wtp-space-2);
    min-height: var(--wtp-search-height-sm);
    padding: var(--wtp-space-1) var(--wtp-space-1) var(--wtp-space-1) var(--wtp-space-5);
  }

  .wtp-search__icon { display: none; }

  .wtp-search__field { min-height: var(--wtp-tap-target-min); }

  .wtp-search__submit {
    width: var(--wtp-tap-target-min);
    min-width: var(--wtp-tap-target-min);
    min-height: var(--wtp-tap-target-min);
    padding: 0;
    border-radius: var(--wtp-radius-circle);
  }

  .wtp-search__submit-icon { display: inline-flex; }

  .wtp-search__submit-label {         /* same recipe as .wtp-visually-hidden */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   Company-search autocomplete (.wtp-autocomplete)
   One dropdown for every rebrand search box — the header panel and the hero —
   rendered by rebranding/livewire/company-search.blade.php and driven by
   rebranding/components/common/search-autocomplete-script.blade.php.

   Visibility: the panel shows when the server says there is something to show
   (.is-open) or a first search is running (.is-loading). The script's state
   classes then veto it: .is-short (under 3 characters) and .is-dismissed
   (Esc / click outside). The hide rules come last so they win.
   -------------------------------------------------------------------------- */

.wtp-autocomplete {
  position: relative;
  text-align: start;
}

.wtp-autocomplete__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--wtp-autocomplete-offset));
  z-index: var(--wtp-z-dropdown);
  display: none;
  flex-direction: column;
  max-height: var(--wtp-autocomplete-max-height);
  overflow: hidden;
  background-color: var(--wtp-bg-surface);
  border: var(--wtp-border-width) solid var(--wtp-border-subtle);
  border-radius: var(--wtp-autocomplete-radius);
  box-shadow: var(--wtp-autocomplete-shadow);
  color: var(--wtp-text-body);
  animation: wtp-autocomplete-in var(--wtp-duration-base) var(--wtp-ease-out);
}

.wtp-autocomplete__panel.is-open,
.wtp-autocomplete.is-loading .wtp-autocomplete__panel {
  display: flex;
}

.wtp-autocomplete.is-short .wtp-autocomplete__panel,
.wtp-autocomplete.is-dismissed .wtp-autocomplete__panel {
  display: none;
}

@keyframes wtp-autocomplete-in {
  from { opacity: 0; transform: var(--wtp-autocomplete-enter); }
  to   { opacity: 1; transform: none; }
}

/* Loading. First search: a status row. Refining an existing list: the list
   stays and dims, so the panel never collapses between keystrokes. */
.wtp-autocomplete__status {
  display: none;
  align-items: center;
  gap: var(--wtp-space-3);
  padding: var(--wtp-space-4) var(--wtp-space-5);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-text-muted);
}

.wtp-autocomplete.is-loading .wtp-autocomplete__panel:not(.is-open) .wtp-autocomplete__status {
  display: flex;
}

.wtp-autocomplete__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity var(--wtp-duration-fast) var(--wtp-ease-standard);
}

.wtp-autocomplete.is-loading .wtp-autocomplete__body {
  opacity: 0.55;
}

.wtp-autocomplete__spinner {
  flex: 0 0 auto;
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
  border: var(--wtp-border-width-thick) solid var(--wtp-border-default);
  border-top-color: var(--wtp-primary);
  border-radius: var(--wtp-radius-circle);
  animation: wtp-autocomplete-spin var(--wtp-autocomplete-spin) linear infinite;
}

@keyframes wtp-autocomplete-spin {
  to { transform: rotate(360deg); }
}

/* Reduced motion: no drop-in, and the spinner holds still (the text still
   says "Searching companies…"). */
@media (prefers-reduced-motion: reduce) {
  .wtp-autocomplete__panel,
  .wtp-autocomplete__spinner { animation: none; }
}

.wtp-autocomplete__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-3);
  padding: var(--wtp-space-4) var(--wtp-space-5) var(--wtp-space-2);
}

.wtp-autocomplete__label {
  font-size: var(--wtp-text-eyebrow);
  font-weight: var(--wtp-weight-bold);
  letter-spacing: var(--wtp-tracking-wider);
  text-transform: uppercase;
  color: var(--wtp-text-muted);
}

.wtp-autocomplete__count {
  font-size: var(--wtp-text-xs);
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-text-muted);
}

.wtp-autocomplete__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 var(--wtp-space-2) var(--wtp-space-2);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Row: company icon, name, arrow. Hover and keyboard highlight share one
   look — tinted row, navy name, icon chip fills, arrow appears. The row
   itself never moves. */
.wtp-autocomplete__option {
  display: flex;
  align-items: center;
  gap: var(--wtp-space-3);
  min-height: var(--wtp-tap-target-min);
  padding: var(--wtp-space-2) var(--wtp-space-3);
  border-radius: var(--wtp-radius-md);
  font-size: var(--wtp-text-base);
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-text-strong);
  text-decoration: none;
  transition: var(--wtp-transition-colors);
}

.wtp-autocomplete__option-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wtp-icon-chip-size-sm);
  height: var(--wtp-icon-chip-size-sm);
  border-radius: var(--wtp-radius-md);
  background-color: var(--wtp-bg-chip);
  color: var(--wtp-primary);
  transition: var(--wtp-transition-colors);
}

.wtp-autocomplete__option-icon .wtp-icon,
.wtp-autocomplete__option-arrow .wtp-icon,
.wtp-autocomplete__footer .wtp-icon {
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
}

.wtp-autocomplete__option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;              /* long registered names wrap at 320px */
  line-height: var(--wtp-leading-snug);
}

.wtp-autocomplete__match {
  padding: 0;
  border-radius: var(--wtp-radius-xs);
  background-color: var(--wtp-autocomplete-match-bg);
  color: inherit;
  font-weight: var(--wtp-weight-bold);
}

.wtp-autocomplete__option-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--wtp-primary);
  opacity: 0;
  transition: opacity var(--wtp-duration-fast) var(--wtp-ease-standard);
}

.wtp-autocomplete__option:hover,
.wtp-autocomplete__option:focus-visible,
.wtp-autocomplete__option.is-active {
  background-color: var(--wtp-autocomplete-active-bg);
  color: var(--wtp-primary);
}

.wtp-autocomplete__option:focus-visible {
  outline: none;
  box-shadow: var(--wtp-shadow-focus-ring);
}

.wtp-autocomplete__option:hover .wtp-autocomplete__option-icon,
.wtp-autocomplete__option:focus-visible .wtp-autocomplete__option-icon,
.wtp-autocomplete__option.is-active .wtp-autocomplete__option-icon {
  background-color: var(--wtp-primary);
  color: var(--wtp-text-on-brand);
}

.wtp-autocomplete__option:hover .wtp-autocomplete__option-arrow,
.wtp-autocomplete__option:focus-visible .wtp-autocomplete__option-arrow,
.wtp-autocomplete__option.is-active .wtp-autocomplete__option-arrow {
  opacity: 1;
}

/* Footer: the full results page for the same query. */
.wtp-autocomplete__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wtp-space-2);
  min-height: var(--wtp-tap-target-min);
  padding: var(--wtp-space-3) var(--wtp-space-5);
  border-top: var(--wtp-border-width) solid var(--wtp-border-subtle);
  background-color: var(--wtp-bg-cool);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-primary);
  text-align: center;
  overflow-wrap: anywhere;
  transition: var(--wtp-transition-colors);
}

.wtp-autocomplete__footer .wtp-icon {
  flex: 0 0 auto;
}

.wtp-autocomplete__footer:hover,
.wtp-autocomplete__footer:focus-visible {
  background-color: var(--wtp-bg-muted);
  color: var(--wtp-primary);
}

/* Empty state: no local or Creditsafe match. */
.wtp-autocomplete__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wtp-space-2);
  padding: var(--wtp-space-6) var(--wtp-space-5);
  text-align: center;
}

.wtp-autocomplete__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wtp-icon-chip-size-sm);
  height: var(--wtp-icon-chip-size-sm);
  margin-block-end: var(--wtp-space-1);
  border-radius: var(--wtp-radius-circle);
  background-color: var(--wtp-bg-chip);
  color: var(--wtp-text-muted);
}

.wtp-autocomplete__empty-title {
  font-family: var(--wtp-font-display);
  font-size: var(--wtp-text-base);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-strong);
  overflow-wrap: anywhere;
}

.wtp-autocomplete__empty-text {
  max-width: 46ch;
  font-size: var(--wtp-text-sm);
  --wtp-p-leading: var(--wtp-leading-normal);
  color: var(--wtp-text-body);
}

.wtp-autocomplete__empty-cta {
  margin-block-start: var(--wtp-space-2);
}

@media (max-width: 480px) {
  .wtp-autocomplete__head,
  .wtp-autocomplete__status { padding-inline: var(--wtp-space-4); }
  .wtp-autocomplete__option { font-size: var(--wtp-text-sm); }
}


/* --------------------------------------------------------------------------
   Dialog (.wtp-dialog) — native <dialog>, used by the profile completion
   prompt (components/common/profile-prompt.blade.php). Centred card with the
   standard button pair; buttons stack below 480px. Never touches the screen
   edge: max-width leaves the container gutter on both sides at 320px.
   -------------------------------------------------------------------------- */

.wtp-dialog {
  width: calc(100% - 2 * var(--wtp-container-gutter));
  max-width: var(--wtp-dialog-max-width);
  padding: var(--wtp-space-8);
  border: 0;
  border-radius: var(--wtp-radius-xl);
  background-color: var(--wtp-bg-surface);
  box-shadow: var(--wtp-shadow-xl);
  color: var(--wtp-text-body);
  font-family: var(--wtp-font-body);
}

/* Without JS it renders `open` in the flow; keep it visibly separated. */
.wtp-dialog[open]:not(:modal) {
  position: relative;
  z-index: var(--wtp-z-modal);
  margin: var(--wtp-space-6) auto;
}

.wtp-dialog::backdrop {
  background-color: var(--wtp-dialog-backdrop);
}

.wtp-dialog__body p {
  margin: 0;
  font-size: var(--wtp-text-md);
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-text-strong);
  --wtp-p-leading: var(--wtp-leading-normal);
}

.wtp-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wtp-space-3);
  margin-block-start: var(--wtp-space-6);
}

@media (max-width: 479px) {
  .wtp-dialog { padding: var(--wtp-space-6); }
  .wtp-dialog__actions .wtp-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   8. BADGES
   ========================================================================== */

.wtp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-space-1);
  min-height: var(--wtp-badge-height);
  padding-inline: var(--wtp-badge-padding-x);
  border-radius: var(--wtp-badge-radius);
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-badge-font-size);
  font-weight: var(--wtp-badge-font-weight);
  letter-spacing: var(--wtp-badge-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--wtp-badge-neutral-bg);
  color: var(--wtp-badge-neutral-text);
}

.wtp-badge--success { background-color: var(--wtp-badge-success-bg); color: var(--wtp-badge-success-text); }
.wtp-badge--danger  { background-color: var(--wtp-badge-danger-bg);  color: var(--wtp-badge-danger-text); }
.wtp-badge--on-navy { background-color: var(--wtp-badge-on-navy-bg); color: var(--wtp-badge-on-navy-text); }


/* ==========================================================================
   9. RATING
   --------------------------------------------------------------------------
   Structural only. Tile colours are set per-tile from the existing
   --wtp-rating-1..5 scale by the rating component, preserving the current
   review data semantics.
   ========================================================================== */

.wtp-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-rating-tile-gap);
}

.wtp-rating__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--wtp-rating-tile-size);
  height: var(--wtp-rating-tile-size);
  border-radius: var(--wtp-rating-tile-radius);
  background-color: var(--wtp-rating-empty);
}

.wtp-rating__tile svg {
  width: var(--wtp-rating-glyph-size);
  height: var(--wtp-rating-glyph-size);
  color: var(--wtp-rating-glyph-color);
}

/* The mark is 1600x780 (2.05:1), so the glyph size is its WIDTH and the height
   follows from the intrinsic ratio. Sizing both axes would squash it. */
.wtp-rating__tile img {
  width: var(--wtp-rating-glyph-size);
  height: auto;
}

/* The fractional tile: the scale colour fills --wtp-rating-fill of the width,
   the empty colour takes the rest. --wtp-rating-fill is the only value the
   rating component sets inline, because it carries per-review DATA (the
   decimal part of the average) and CSS has no other way to receive it. */
.wtp-rating__tile--1 { background-color: var(--wtp-rating-1); }
.wtp-rating__tile--2 { background-color: var(--wtp-rating-2); }
.wtp-rating__tile--3 { background-color: var(--wtp-rating-3); }
.wtp-rating__tile--4 { background-color: var(--wtp-rating-4); }
.wtp-rating__tile--5 { background-color: var(--wtp-rating-5); }

.wtp-rating__tile--partial {
  background-image: linear-gradient(to right,
                    var(--wtp-rating-partial-color) 0 var(--wtp-rating-fill, 0%),
                    var(--wtp-rating-empty) var(--wtp-rating-fill, 0%) 100%);
}

.wtp-rating__tile--partial.wtp-rating__tile--1 { --wtp-rating-partial-color: var(--wtp-rating-1); }
.wtp-rating__tile--partial.wtp-rating__tile--2 { --wtp-rating-partial-color: var(--wtp-rating-2); }
.wtp-rating__tile--partial.wtp-rating__tile--3 { --wtp-rating-partial-color: var(--wtp-rating-3); }
.wtp-rating__tile--partial.wtp-rating__tile--4 { --wtp-rating-partial-color: var(--wtp-rating-4); }
.wtp-rating__tile--partial.wtp-rating__tile--5 { --wtp-rating-partial-color: var(--wtp-rating-5); }

/* A partial tile keeps its gradient; the flat colour class must not win. */
.wtp-rating__tile--partial { background-color: var(--wtp-rating-empty); }

/* --brand: one green on every earned tile, per the approved render, instead of
   the five-step scale. The SCORE IS STILL ENCODED — by how many tiles are
   filled and how far the fractional one is filled — and the widget's
   aria-label still announces the exact value, so nothing is lost but the
   colour signal. Opt-in, so the five-step scale stays the default. */
.wtp-rating--brand .wtp-rating__tile--1,
.wtp-rating--brand .wtp-rating__tile--2,
.wtp-rating--brand .wtp-rating__tile--3,
.wtp-rating--brand .wtp-rating__tile--4,
.wtp-rating--brand .wtp-rating__tile--5 {
  background-color: var(--wtp-rating-brand);
}

/* Must follow the --partial.--N rules above: same specificity, later wins. */
.wtp-rating--brand .wtp-rating__tile--partial {
  --wtp-rating-partial-color: var(--wtp-rating-brand);
  background-color: var(--wtp-rating-empty);
}

/* --on-navy: cyan on every earned tile, for sections DESIGN-SYSTEM.md §11
   documents as drawing stars in cyan (Trending Businesses). Same opt-in
   pattern as --brand: the score is still carried by tile count, fractional
   fill and the aria-label — only the colour signal changes. */
.wtp-rating--on-navy .wtp-rating__tile--1,
.wtp-rating--on-navy .wtp-rating__tile--2,
.wtp-rating--on-navy .wtp-rating__tile--3,
.wtp-rating--on-navy .wtp-rating__tile--4,
.wtp-rating--on-navy .wtp-rating__tile--5 {
  background-color: var(--wtp-rating-star-on-navy);
}

.wtp-rating--on-navy .wtp-rating__tile--partial {
  --wtp-rating-partial-color: var(--wtp-rating-star-on-navy);
  background-color: var(--wtp-rating-empty);
}

/* --stars: bare star glyphs with no tile, for the Figma "Business Card"
   (Trending Businesses) whose rating is five 20x19 cyan star icons. The tile
   box becomes the star itself: the existing star mark is used as a mask over
   the tile background, so earned / fractional / empty states keep exactly the
   same colour machinery as the tile variants (fill colour, gradient for the
   decimal, empty colour), only clipped to the star shape. */
.wtp-rating--stars {
  --wtp-rating-tile-size: var(--wtp-icon-md);
  --wtp-rating-tile-gap: 0px;
  /* A five-point star, the Figma vector, as an inline mask (no asset). */
  --wtp-rating-star-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'><path d='M10 0.6l2.9 5.9 6.5 0.95-4.7 4.6 1.1 6.45L10 15.45 4.2 18.5l1.1-6.45L0.6 7.45l6.5-0.95z'/></svg>");
}

.wtp-rating--stars .wtp-rating__tile {
  border-radius: 0;
  -webkit-mask: var(--wtp-rating-star-mask) center / 100% 100% no-repeat;
          mask: var(--wtp-rating-star-mask) center / 100% 100% no-repeat;
}

.wtp-rating--stars .wtp-rating__tile img { display: none; }

.wtp-rating--stars .wtp-rating__tile--1,
.wtp-rating--stars .wtp-rating__tile--2,
.wtp-rating--stars .wtp-rating__tile--3,
.wtp-rating--stars .wtp-rating__tile--4,
.wtp-rating--stars .wtp-rating__tile--5 {
  background-color: var(--wtp-rating-star-on-navy);
}

.wtp-rating--stars .wtp-rating__tile--partial {
  --wtp-rating-partial-color: var(--wtp-rating-star-on-navy);
  background-color: var(--wtp-rating-empty);
}

.wtp-rating--sm .wtp-rating__tile {
  width: var(--wtp-rating-tile-size-sm);
  height: var(--wtp-rating-tile-size-sm);
}

.wtp-rating__value {
  font-family: var(--wtp-font-display);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-strong);
}

.wtp-rating__label {
  font-size: var(--wtp-text-3xs);
  letter-spacing: var(--wtp-tracking-wider);
  text-transform: uppercase;
  color: var(--wtp-text-muted);
}


/* ==========================================================================
   10. ICON CHIP + LOGO TILE
   ========================================================================== */

.wtp-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--wtp-icon-chip-size);
  height: var(--wtp-icon-chip-size);
  border-radius: var(--wtp-icon-chip-radius);
  background-color: var(--wtp-icon-chip-bg);
  color: var(--wtp-icon-chip-color);
}

.wtp-icon-chip--sm {
  width: var(--wtp-icon-chip-size-sm);
  height: var(--wtp-icon-chip-size-sm);
}

.wtp-icon-chip--accent {
  background-color: var(--wtp-icon-chip-accent-bg);
  color: var(--wtp-brand-navy-deep);
}

.wtp-icon-chip--on-navy {
  background-color: var(--wtp-bg-surface);
  color: var(--wtp-brand-navy);
}

.wtp-icon-chip svg,
.wtp-icon-chip img {
  width: var(--wtp-icon-lg);
  height: var(--wtp-icon-lg);
}

.wtp-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--wtp-logo-tile-size);
  height: var(--wtp-logo-tile-size);
  border-radius: var(--wtp-logo-tile-radius);
  background-color: var(--wtp-brand-navy);
  color: var(--wtp-text-inverse);
  font-family: var(--wtp-font-display);
  font-weight: var(--wtp-weight-bold);
  overflow: hidden;
}

.wtp-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wtp-logo-tile--sm {
  width: var(--wtp-logo-tile-size-sm);
  height: var(--wtp-logo-tile-size-sm);
}


/* ==========================================================================
   11. TYPOGRAPHY HELPERS
   ========================================================================== */

.wtp-display   { font-family: var(--wtp-font-display); font-size: var(--wtp-text-hero);
                 line-height: var(--wtp-leading-tight); letter-spacing: var(--wtp-tracking-tighter);
                 font-weight: var(--wtp-weight-bold); color: var(--wtp-text-strong); }
.wtp-display__accent { color: var(--wtp-brand-indigo); }

.wtp-lead      { font-size: var(--wtp-text-md); --wtp-p-leading: var(--wtp-leading-relaxed); color: var(--wtp-text-body); }
.wtp-meta      { font-size: var(--wtp-text-meta); color: var(--wtp-text-muted); }
.wtp-eyebrow   { font-size: var(--wtp-text-eyebrow); font-weight: var(--wtp-weight-bold);
                 letter-spacing: var(--wtp-tracking-wider); text-transform: uppercase; }

.wtp-stat__value { font-family: var(--wtp-font-display); font-size: var(--wtp-text-stat);
                   font-weight: var(--wtp-weight-bold); line-height: var(--wtp-leading-none);
                   letter-spacing: var(--wtp-tracking-tight); color: var(--wtp-text-strong); }
.wtp-stat__label { font-size: var(--wtp-text-3xs); font-weight: var(--wtp-weight-medium);
                   letter-spacing: var(--wtp-tracking-wider); text-transform: uppercase;
                   color: var(--wtp-text-muted); margin-block-start: var(--wtp-space-2); }

.wtp-section--navy .wtp-stat__value,
.wtp-section--navy-deep .wtp-stat__value { color: var(--wtp-text-on-navy); }
.wtp-section--navy .wtp-stat__label,
.wtp-section--navy-deep .wtp-stat__label { color: var(--wtp-text-on-navy-muted); }

/* Clamp long review/blog copy to a fixed number of lines without JS. */
.wtp-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wtp-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wtp-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }


/* --------------------------------------------------------------------------
   VIEWPORT REVEAL                              DESIGN-SYSTEM.md §14.5
   --------------------------------------------------------------------------
   The hidden state is gated on .wtp-js, which a one-line script at the top of
   <body> adds to <html>. Without JavaScript the class never appears, these
   rules never match, and the content is simply visible — a script error or a
   blocked bundle can never leave the page blank.

   Only opacity and transform are animated; both run on the compositor and
   neither moves anything in flow, so a reveal cannot shift layout or create
   horizontal overflow.
   -------------------------------------------------------------------------- */

.wtp-js .wtp-reveal {
  opacity: 0;
  transform: translateY(var(--wtp-reveal-distance));
  transition: opacity var(--wtp-duration-slow) var(--wtp-ease-out),
              transform var(--wtp-duration-slow) var(--wtp-ease-out);
  will-change: opacity, transform;
}

.wtp-js .wtp-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Reduced motion: no entrance at all. The duration tokens already collapse to
   1ms, but this removes the movement outright rather than making it fast. */
@media (prefers-reduced-motion: reduce) {
  .wtp-js .wtp-reveal,
  .wtp-js .wtp-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   12. LAYOUT HELPERS
   ========================================================================== */

.wtp-stack       { display: flex; flex-direction: column; }
.wtp-stack > * + * { margin-block-start: var(--wtp-stack-gap, var(--wtp-space-4)); }

.wtp-cluster     { display: flex; flex-wrap: wrap; align-items: center;
                   gap: var(--wtp-cluster-gap, var(--wtp-space-3)); }

.wtp-split       { display: flex; flex-wrap: wrap; align-items: center;
                   justify-content: space-between; gap: var(--wtp-space-4); }

/* Two-column split that collapses to one column at 1024px. */
.wtp-split-pane  { display: grid; gap: var(--wtp-section-gap);
                   grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }

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

/* Horizontal scroller fallback for card rows on small screens.
   Scrolls inside its own track — never the page. */
.wtp-scroller {
  display: flex;
  gap: var(--wtp-card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--wtp-space-2);
  scrollbar-width: thin;
}

.wtp-scroller > * {
  flex: 0 0 min(82%, 320px);
  scroll-snap-align: start;
}


/* ==========================================================================
   13. MARQUEE (promotional strip)
   ========================================================================== */

/* Colour lives on modifiers, not the base: the same marquee also carries the
   partner-logo strip (§8a), which is not rust. */
.wtp-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Promotional strip — the rust gradient bar. */
.wtp-marquee--promo {
  background: var(--wtp-gradient-promo);
  color: var(--wtp-text-inverse);
}

.wtp-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--wtp-space-6);
  width: max-content;
  padding-block: var(--wtp-space-2);
  font-size: var(--wtp-text-2xs);
  font-weight: var(--wtp-weight-bold);
  letter-spacing: var(--wtp-tracking-widest);
  text-transform: uppercase;
  white-space: nowrap;
  animation: wtp-marquee-scroll var(--wtp-marquee-duration) linear infinite;
}

@keyframes wtp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduced motion: the strip simply stops. It stays clipped rather than becoming
   horizontally scrollable — the track is the same message repeated, so a
   scrollbar would expose nothing new and add visual noise. The message is still
   announced once via the visually-hidden copy in the marquee component. */
@media (prefers-reduced-motion: reduce) {
  .wtp-marquee__track { animation: none; }
}

/* Logo variant — the same track and keyframe carrying images instead of a
   message. Cells are fixed-width with NO flex gap, so the two halves are
   exactly equal and the -50% wrap is seamless. */
.wtp-marquee--logos .wtp-marquee__track {
  gap: 0;
  padding-block: 0;
  animation-duration: var(--wtp-marquee-logo-duration);
}

.wtp-marquee__logo {
  flex: 0 0 auto;
  display: block;
  width: var(--wtp-marquee-logo-size);
  /* Square cell reserved up front, so lazy-loaded uploads of any shape cannot
     shift the layout as they arrive. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Reduced motion: a stopped, clipped track would hide most of the logos, so
   the repeats are dropped and the one real set wraps into a centred row. */
@media (prefers-reduced-motion: reduce) {
  .wtp-marquee--logos .wtp-marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .wtp-marquee__logo--repeat { display: none; }
}


/* ##########################################################################
   §4  LAYOUT
   ########################################################################## */

/* ==========================================================================
   Will They Pay — Rebrand Layout Chrome
   --------------------------------------------------------------------------
   Header, navigation drawer and (later) footer. Loaded by
   rebranding/layouts/app.blade.php, so it applies to every rebranded page —
   which is why it is NOT in pages/home.css (homepage sections only) and NOT in
   rebrand.css §3 Primitives (generic, page-agnostic primitives only).

   Load order: rebrand.css §2 Tokens -> rebrand.css §3 Primitives -> rebrand.css §4 Layout -> pages/home.css

   Figma reference: "Header - Top Navigation Bar (Shared Component)".
   All values come from rebrand.css §2 Tokens. Every selector is `.wtp-*`.
   ========================================================================== */


/* ==========================================================================
   1. HEADER SHELL
   ========================================================================== */

.wtp-header {
  position: relative;
  z-index: var(--wtp-z-header);
  background-color: var(--wtp-primary);
  color: var(--wtp-header-text);
  box-shadow: var(--wtp-shadow-hairline);  /* Figma header: 0 1px 2px rgba(0,0,0,.05) */
}

.wtp-header__inner {
  display: flex;
  align-items: center;
  gap: var(--wtp-header-gap);
  min-height: var(--wtp-header-height);
}

.wtp-header__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--wtp-tap-target-min);
}

.wtp-header__logo {
  width: auto;
  height: var(--wtp-header-logo-height); /* Figma "new_logo (1) 1": 216x30 */
}

/* Nav takes the middle; actions sit hard right. */
.wtp-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.wtp-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--wtp-space-4);
}


/* ==========================================================================
   2. DESKTOP NAV
   ========================================================================== */

.wtp-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.1rem + 2vw, 2rem);
}

.wtp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--wtp-tap-target-min);
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-nav-link-size);
  font-weight: var(--wtp-nav-link-weight);
  color: var(--wtp-text-on-navy);
  white-space: nowrap;
  transition: var(--wtp-transition-colors);
}

/* Underline sweeps in from the left on hover, and sits permanently under the
   current page. */
.wtp-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 12px;
  height: var(--wtp-underline-size);
  border-radius: var(--wtp-radius-pill);
  background-color: var(--wtp-brand-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wtp-duration-base) var(--wtp-ease-out);
}

.wtp-nav__link:hover::after,
.wtp-nav__link:focus-visible::after,
.wtp-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.wtp-nav__link:hover,
.wtp-nav__link:focus {
  color: var(--wtp-brand-cyan);
}

.wtp-nav__link[aria-current="page"] {
  color: var(--wtp-brand-cyan);
}

/* In the drawer the links are full-width rows with their own divider, so the
   sweeping underline would collide with it. Colour change only — the row must
   not shift. */
.wtp-drawer__nav .wtp-nav__link::after {
  display: none;
}


/* ==========================================================================
   3. HEADER ACTIONS
   ========================================================================== */

/* "Write A Review" — a plain white text link in the reference, not a button. */
.wtp-header__action-link {
  position: relative;
  display: none;
  align-items: center;
  min-height: var(--wtp-tap-target-min);
  font-size: var(--wtp-nav-link-size);
  font-weight: var(--wtp-weight-bold);
  color: var(--wtp-text-on-navy);
  white-space: nowrap;
  transition: var(--wtp-transition-colors);
}

.wtp-header__action-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 12px;
  height: var(--wtp-underline-size);
  border-radius: var(--wtp-radius-pill);
  background-color: var(--wtp-brand-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wtp-duration-base) var(--wtp-ease-out);
}

.wtp-header__action-link:hover::after,
.wtp-header__action-link:focus-visible::after {
  transform: scaleX(1);
}

.wtp-header__action-link:hover,
.wtp-header__action-link:focus {
  color: var(--wtp-brand-cyan);
}

/* Circular outlined icon button. */
.wtp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--wtp-icon-btn-size);
  height: var(--wtp-icon-btn-size);
  padding: 0;
  border: var(--wtp-border-width) solid var(--wtp-border-on-navy);
  border-radius: var(--wtp-radius-circle);
  background: none;
  color: var(--wtp-text-on-navy);
  cursor: pointer;
  transition: var(--wtp-transition-colors);
}

/* No lift and no scale — the button must stay exactly where it is. */
.wtp-icon-btn:hover,
.wtp-icon-btn:focus-visible {
  border-color: var(--wtp-brand-cyan);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--wtp-brand-cyan);
}

.wtp-icon-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
  transition-duration: var(--wtp-duration-fast);
}

.wtp-icon-btn--plain {
  border-color: transparent;
}

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


/* ==========================================================================
   4. HEADER SEARCH PANEL
   --------------------------------------------------------------------------
   Collapsed by default; the trigger expands it. Uses the same GET /business
   endpoint and `q` parameter as the existing site search.
   ========================================================================== */

/* The panel is an extension of the header bar, so it carries the SAME brand
   navy — not the deeper navy, which read as a mismatched second colour. A
   hairline divider separates it from the bar and a drop shadow lifts it over
   the page beneath. */
.wtp-search-panel {
  /* Slides rather than snapping. `display` cannot be transitioned, so the panel
     stays displayed and animates max-height; the JS in nav-drawer.blade.php
     supplies the exact content height. `visibility` keeps the collapsed field
     out of the tab order, and is delayed on close so the panel finishes sliding
     up before it is hidden. */
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background-color: var(--wtp-primary);
  transition: max-height var(--wtp-duration-slow) var(--wtp-ease-out),
              box-shadow var(--wtp-duration-slow) var(--wtp-ease-out),
              visibility 0s linear var(--wtp-duration-slow);
}

/* The divider lives INSIDE the clipped box. As a border on the panel itself it
   would keep painting a stray hairline under the header while collapsed. */
.wtp-search-panel::before {
  content: "";
  display: block;
  height: var(--wtp-border-width);
  background-color: var(--wtp-border-on-navy);
}

.wtp-search-panel.is-open {
  visibility: visible;
  box-shadow: var(--wtp-shadow-lg);
  transition: max-height var(--wtp-duration-slow) var(--wtp-ease-out),
              box-shadow var(--wtp-duration-slow) var(--wtp-ease-out),
              visibility 0s linear 0s;
}

.wtp-search-panel__inner {
  padding-block: var(--wtp-space-5);
}

/* Keep the field a comfortable reading width on wide screens rather than
   stretching the pill across the full bar. The autocomplete wrapper takes the
   width so its dropdown lines up with the pill. */
.wtp-search-panel .wtp-autocomplete {
  max-width: var(--wtp-container-narrow);
  margin-inline: auto;
}

.wtp-search-panel .wtp-search {
  box-shadow: var(--wtp-shadow-search);
}

/* Once the open slide has finished (nav-drawer.blade.php adds .is-settled),
   stop clipping so the autocomplete list can hang below the panel. */
.wtp-search-panel.is-open.is-settled {
  overflow: visible;
}

/* nav-drawer.blade.php measures the panel with the list hidden, so an open
   list never inflates the slide height. */
.wtp-search-panel.is-measuring .wtp-autocomplete__panel {
  display: none;
}


/* ==========================================================================
   5. ACCOUNT MENU (authenticated)
   ========================================================================== */

/* Header auth pill. Compact like the reference, but never below the 44px
   touch-target floor. */
.wtp-header__auth-btn {
  min-height: var(--wtp-tap-target-min);
  padding-inline: var(--wtp-space-5);
}

.wtp-account {
  position: relative;
}

.wtp-account__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wtp-space-2);
  /* 44px floor, not --wtp-btn-height-sm (38px): this is an interactive target. */
  min-height: var(--wtp-tap-target-min);
  padding-inline: var(--wtp-space-4);
  border: var(--wtp-border-width) solid var(--wtp-border-on-navy);
  border-radius: var(--wtp-radius-pill);
  background: none;
  color: var(--wtp-text-on-navy);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-bold);
  cursor: pointer;
  transition: var(--wtp-transition-colors);
}

.wtp-account__toggle:hover,
.wtp-account__toggle:focus-visible {
  border-color: var(--wtp-brand-cyan);
  color: var(--wtp-brand-cyan);
}

.wtp-account__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: var(--wtp-space-1);
  border-radius: var(--wtp-radius-pill);
  background-color: var(--wtp-danger);
  color: var(--wtp-text-inverse);
  font-size: var(--wtp-text-3xs);
  line-height: 1;
}

.wtp-account__menu {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--wtp-space-2));
  z-index: var(--wtp-z-dropdown);
  min-width: 232px;
  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-md);
  box-shadow: var(--wtp-shadow-lg);
}

.wtp-account__menu.is-open {
  display: block;
}

.wtp-account__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-3);
  min-height: var(--wtp-tap-target-min);
  padding-inline: var(--wtp-space-3);
  border-radius: var(--wtp-radius-sm);
  color: var(--wtp-text-strong);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-medium);
}

.wtp-account__item {
  transition: var(--wtp-transition-colors);
}

.wtp-account__item:hover,
.wtp-account__item:focus-visible {
  background-color: var(--wtp-bg-muted);
  color: var(--wtp-text-strong);
}


/* ==========================================================================
   6. BURGER
   ========================================================================== */

.wtp-burger {
  display: inline-flex;
}

.wtp-burger__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--wtp-radius-pill);
  background-color: currentColor;
}

.wtp-burger__bars::before,
.wtp-burger__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--wtp-radius-pill);
  background-color: currentColor;
}

.wtp-burger__bars::before { inset-block-start: -6px; }
.wtp-burger__bars::after  { inset-block-start: 6px; }


/* ==========================================================================
   7. NAV DRAWER
   ========================================================================== */

/* `visibility` keeps the closed drawer out of the tab order and the accessibility
   tree — `pointer-events` alone would leave its links focusable.

   The visibility change is delayed by the panel's own transition duration on
   CLOSE (and applied immediately on OPEN, via the `transition-delay: 0s` in the
   .is-open rule). Without the delay the container would be hidden the instant
   the class is removed and the panel would disappear rather than slide out.
   Verified in-browser: on close the panel animates back to translateX(100%) and
   only then does the container compute to `visibility: hidden`. */
.wtp-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--wtp-z-overlay);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--wtp-duration-slow);
}

.wtp-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.wtp-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--wtp-backdrop-bg);
  opacity: 0;
  transition: opacity var(--wtp-duration-base) var(--wtp-ease-standard);
}

.wtp-drawer.is-open .wtp-drawer__backdrop {
  opacity: 1;
}

.wtp-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: var(--wtp-drawer-width);
  max-width: 100%;
  background-color: var(--wtp-drawer-bg);
  color: var(--wtp-text-on-navy);
  box-shadow: var(--wtp-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--wtp-duration-slow) var(--wtp-ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wtp-drawer.is-open .wtp-drawer__panel {
  transform: translateX(0);
}

.wtp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-3);
  min-height: var(--wtp-header-height-sm);
  padding-inline: var(--wtp-container-gutter-min);
  border-block-end: var(--wtp-border-width) solid var(--wtp-border-on-navy);
}

.wtp-drawer__body {
  padding: var(--wtp-space-4) var(--wtp-container-gutter-min) var(--wtp-space-8);
}

.wtp-drawer__nav {
  display: flex;
  flex-direction: column;
}

.wtp-drawer__nav .wtp-nav__link {
  min-height: 52px;
  font-size: var(--wtp-text-md);
  border-block-end: var(--wtp-border-width) solid var(--wtp-border-on-navy);
}

.wtp-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--wtp-space-3);
  margin-block-start: var(--wtp-space-6);
}

/* Disclosure group replacing the nested account dropdown on small screens. */
.wtp-disclosure {
  margin-block-start: var(--wtp-space-6);
  border-block-start: var(--wtp-border-width) solid var(--wtp-border-on-navy);
}

.wtp-disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-3);
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wtp-text-on-navy);
  font-size: var(--wtp-text-md);
  font-weight: var(--wtp-weight-bold);
  cursor: pointer;
  text-align: start;
}

.wtp-disclosure__icon {
  flex: 0 0 auto;
  width: var(--wtp-icon-sm);
  height: var(--wtp-icon-sm);
  transition: var(--wtp-transition-transform);
}

.wtp-disclosure__toggle[aria-expanded="true"] .wtp-disclosure__icon {
  transform: rotate(180deg);
}

.wtp-disclosure__panel {
  display: none;
  padding-block-end: var(--wtp-space-4);
}

.wtp-disclosure__panel.is-open {
  display: block;
}

.wtp-disclosure__panel .wtp-nav__link {
  min-height: var(--wtp-tap-target-min);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-medium);
  color: var(--wtp-text-on-navy-muted);
}

.wtp-disclosure__panel .wtp-nav__link:hover,
.wtp-disclosure__panel .wtp-nav__link:focus {
  color: var(--wtp-text-on-navy);
}

/* Below 520px the drawer fills the screen. The sliver of page left behind a
   partial panel is not usable on a phone that narrow, and the full-bleed panel
   gives the nav rows and CTAs their full width.
   NOTE: 520px is a component-level breakpoint added at the client's request on
   top of the eight standard widths in docs/DESIGN-SYSTEM.md. */
@media (max-width: 519px) {
  .wtp-drawer__panel {
    width: 100%;
    box-shadow: none;
  }

  /* With no page visible behind it, the scrim is redundant. */
  .wtp-drawer__backdrop {
    background-color: transparent;
  }
}

/* Lock background scroll while the drawer is open. */
html.wtp-scroll-locked,
html.wtp-scroll-locked body {
  overflow: hidden;
}


/* ==========================================================================
   8. RESPONSIVE
   --------------------------------------------------------------------------
   Approved breakpoints only: 320 / 375 / 480 / 640 / 768 / 1024 / 1280 / 1440
   ========================================================================== */

/* Desktop: full nav, inline action link, no burger. */
@media (min-width: 1024px) {
  .wtp-header__action-link { display: inline-flex; }
  .wtp-header__burger     { display: none; }
}

/* 1024-1279: the full nav row (brand + six links + search + two actions) does
   not fit at the Figma 16px link size — the Figma header frames are 1280 and
   1920 wide, and a 1024 full-nav row is a derived layout. Step the link size
   down one scale step here only; from 1280 the Figma value applies. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wtp-header { --wtp-nav-link-size: var(--wtp-text-sm); }
  /* The Figma 30px logo (218px wide) plus six links, the search trigger and
     both actions do not fit a 960px row; the logo steps down with the links. */
  .wtp-header__logo { height: var(--wtp-icon-md); }
}

/* Below 1024: nav collapses into the drawer. */
@media (max-width: 1023px) {
  .wtp-header__nav { display: none; }

  .wtp-header__inner {
    justify-content: space-between;
    min-height: var(--wtp-header-height-sm);
  }

  .wtp-header__actions { gap: var(--wtp-space-2); }

  /* Auth controls move into the drawer. */
  .wtp-header__auth { display: none; }
}

/* 320px: the hard floor. Logo shrinks; both controls keep a 40px target and
   the row still fits inside the 16px gutters. */
@media (max-width: 374px) {
  .wtp-header__logo { height: var(--wtp-icon-md); }
  .wtp-header__actions { gap: var(--wtp-space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .wtp-drawer__panel,
  .wtp-drawer__backdrop { transition: none; }
}


/* ==========================================================================
   9. FOOTER
   Structure matches a footer reference frame's LAYOUT only (brand block,
   three link columns, dashed top accent, bottom bar with secondary links
   beside the copyright) — its copy belongs to an unrelated brand
   exploration elsewhere in the Figma library and is not used. See
   site-footer.blade.php for the full explanation.
   ========================================================================== */

.wtp-footer {
  background-color: var(--wtp-primary);
  color: var(--wtp-text-on-navy-muted);
  padding-block-start: var(--wtp-section-py-sm);
  border-block-start: 2px dashed var(--wtp-brand-cyan);
}

.wtp-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: var(--wtp-section-gap);
  padding-block-end: var(--wtp-space-10);
  border-block-end: 1px solid var(--wtp-border-on-navy);
}

.wtp-footer__logo {
  display: inline-block;
}

.wtp-footer__logo img {
  height: 40px;
  width: auto;
}

.wtp-footer__blurb {
  margin-block-start: var(--wtp-space-4);
  max-width: 32ch;
  font-size: var(--wtp-text-sm);          /* Figma footers: 14px / 22.75px */
  --wtp-p-leading: var(--wtp-leading-relaxed);
  color: var(--wtp-text-on-navy-muted);
}

.wtp-footer__social {
  display: flex;
  gap: var(--wtp-space-2);
  margin-block-start: var(--wtp-space-5);
}

.wtp-footer__social .wtp-icon-btn {
  color: var(--wtp-text-on-navy);
}

.wtp-footer__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wtp-space-6);
}

.wtp-footer__group {
  min-width: 0;
}

/* Desktop: the trigger reads as a plain heading, not a control — inert,
   panel always open. Below 640px it becomes a real accordion button. */
.wtp-footer__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-2);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--wtp-font-body);
  font-size: var(--wtp-text-sm);
  font-weight: var(--wtp-weight-bold);
  letter-spacing: var(--wtp-tracking-wider);
  text-transform: uppercase;
  color: var(--wtp-text-on-navy);
  cursor: default;
  pointer-events: none;
}

.wtp-footer__chevron {
  display: none;
}

.wtp-footer__panel {
  list-style: none;
  margin-block-start: var(--wtp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--wtp-space-3);
}

.wtp-footer__panel a {
  color: var(--wtp-text-on-navy-muted);
  font-size: var(--wtp-text-sm);
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-footer__panel a:hover,
.wtp-footer__panel a:focus-visible {
  color: var(--wtp-text-on-navy);
}

.wtp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtp-space-4);
  padding-block: var(--wtp-space-6);
  font-size: var(--wtp-text-sm);
  color: var(--wtp-text-on-navy-muted);
}

.wtp-footer__copyright {
  margin: 0;
}

/* "Powered By Digitex Technologies" credit. */
.wtp-footer__copyright a {
  color: var(--wtp-text-on-navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-footer__copyright a:hover,
.wtp-footer__copyright a:focus-visible {
  color: var(--wtp-brand-cyan);
}

/* Secondary links beside the copyright — the same pattern the reference
   frame's own bottom bar uses, populated with real pages instead. */
.wtp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wtp-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wtp-footer__legal a {
  font-size: var(--wtp-text-sm);
  color: var(--wtp-text-on-navy-muted);
  transition: color var(--wtp-hover-duration) var(--wtp-ease-standard);
}

.wtp-footer__legal a:hover,
.wtp-footer__legal a:focus-visible {
  color: var(--wtp-text-on-navy);
}

/* --------------------------------------------------------------------------
   Below 768: columns narrow but stay in one row. Below 640: single column,
   real accordion.
   -------------------------------------------------------------------------- */

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

  .wtp-footer__bottom {
    justify-content: center;
    text-align: center;
  }
}

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

  .wtp-footer__group {
    border-block-end: 1px solid var(--wtp-border-on-navy);
  }

  .wtp-footer__group:first-child {
    border-block-start: 1px solid var(--wtp-border-on-navy);
  }

  .wtp-footer__trigger {
    min-height: var(--wtp-tap-target-min);
    padding-block: var(--wtp-space-4);
    cursor: pointer;
    pointer-events: auto;
  }

  .wtp-footer__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--wtp-icon-sm);
    height: var(--wtp-icon-sm);
    transition: transform var(--wtp-duration-base) var(--wtp-ease-standard);
  }

  .wtp-footer__trigger[aria-expanded="true"] .wtp-footer__chevron {
    transform: rotate(180deg);
  }

  .wtp-footer__panel {
    max-height: 0;
    overflow: hidden;
    margin-block-start: 0;
    transition: max-height var(--wtp-duration-slow) var(--wtp-ease-out);
  }

  .wtp-footer__panel.is-open {
    margin-block-start: 0;
    padding-block-end: var(--wtp-space-4);
  }

  .wtp-footer__panel li:first-child {
    margin-block-start: var(--wtp-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wtp-footer__panel,
  .wtp-footer__chevron {
    transition: none;
  }
}