/*
Theme Name: FindorLabs
Theme URI: https://findorlabs.com
Author: Karim Guarmouch
Description: Custom theme for FindorLabs — an independent product-review site. Cinematic video hero, gold/navy brand palette, and a Trust Score review system (research-based scoring with an optional hands-on badge).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: findorlabs
Tags: review, affiliate, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   The full design system follows. It is the stylesheet from the static build,
   unchanged: same tokens, same animations (frame-in, nav-in, rise-in, reveal,
   search-pulse), same layout. WordPress-specific rules are appended at the end.
   ========================================================================== */


/* ---------- 1. Variables & reset ---------- */
:root {
  /* Colors */
  --canvas:        #e9e8e4;                /* outer light grey canvas    */
  --surface:       #f4f3ef;                /* card / section surfaces    */
  --ink:           #151515;                /* headline black             */
  --ink-soft:      rgba(20, 20, 20, 0.72); /* subheadline                */
  --ink-mute:      rgba(20, 20, 20, 0.55); /* body copy                  */
  --yellow:        #C9A227;                /* gold — CTA buttons         */
  --yellow-accent: #E3B23C;                /* gold — italic serif accents*/
  --yellow-deep:   #A87F1E;                /* gold — accents on light    */
  --dark:          #131310;                /* editorial / dark cards     */
  --nav-glass:     rgba(35, 35, 29, 0.56);
  --badge-glass:   rgba(255, 255, 255, 0.55);
  --search-glass:  rgba(255, 255, 255, 0.9);
  --line:          rgba(0, 0, 0, 0.08);

  /* Type */
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Type scale — codified reference (mirrors the sizes used across the theme).
     Progressive: new/edited rules should reference these; existing rules keep
     their literal clamps until intentionally migrated. */
  --fs-display: clamp(52px, 5.3vw, 78px);  /* hero headline            */
  --fs-h2:      clamp(30px, 3.2vw, 44px);  /* section titles           */
  --fs-h3:      22px;                       /* card / step titles       */
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;                       /* supporting copy          */
  --fs-caption: 12px;
  --fs-label:   11px;                       /* eyebrows / kickers (caps) */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.5, 1); /* gentle overshoot settle */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ---------- 2. Page canvas ---------- */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--canvas);
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 3. Hero — true full-screen section ---------- */
/* Full bleed: touches all four viewport edges. No frame, no radius,
   no shadow, no max-width. The section itself IS the screen. */
.hero-frame {
  position: relative;
  width: 100%;          /* 100vw without the scrollbar overflow bug */
  height: 100vh;
  height: 100dvh;
  min-height: 700px;
  overflow: hidden;
  background: #d8c895;  /* peeks through before the image paints */
  opacity: 0;
}
body.loaded .hero-frame {
  animation: frame-in 1.1s var(--ease-out) forwards;
}

/* ---------- 4. Hero background + treatment ---------- */
/*
   ┌─────────────────────────────────────────────────────────────┐
   │  REPLACE THE HERO IMAGE HERE                                │
   │  Drop your cinematic image at  assets/hero.jpg  and it will │
   │  automatically be used. The SVG scene below it is only a    │
   │  fallback that renders when hero.jpg is missing.            │
   │  (For a video background later: replace .hero-bg with a     │
   │  <video autoplay muted loop playsinline> element.)          │
   └─────────────────────────────────────────────────────────────┘
*/
/* Background video — centered, 5% overscan so edges never show, object-fit
   cover so it fills the hero on any aspect ratio. The video supplies the
   motion, so no CSS zoom is applied here. The poster (assets/hero.png) is
   the instant first frame + fallback. */
.hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105%;
  height: 105%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  /* No CSS filter here: grading each video frame in real time made the hero
     stutter. The grade was under 4%, so the loss is invisible. A <video> is
     already GPU-composited on its own layer, so no will-change is needed —
     a permanent will-change just pins GPU memory (flagged by MotionScore). */
}

/* Shared plumbing for effect overlays */
.fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Cinematic top & bottom framing — darkens the edges so the glass nav and
   scroll hint stay legible over the bright photo, and adds filmic depth. */
.fx-shapes {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 13, 4, 0.46) 0%, rgba(18, 13, 4, 0) 24%),
    linear-gradient(0deg,   rgba(18, 13, 4, 0.32) 0%, rgba(18, 13, 4, 0) 26%);
}

/* Drifting mist band across the center */
.fx-mist {
  z-index: 2;
  background:
    radial-gradient(70% 16% at 42% 58%, rgba(250, 242, 216, 0.4) 0%, rgba(250, 242, 216, 0) 100%),
    radial-gradient(60% 13% at 68% 64%, rgba(247, 238, 208, 0.32) 0%, rgba(247, 238, 208, 0) 100%);
  animation: mist-drift 22s ease-in-out infinite alternate;
}

/* Warm readability glow — lifts the headline zone so the dark type reads
   cleanly over the busier right side of the photo. */
.fx-haze {
  z-index: 3;
  background:
    radial-gradient(52% 42% at 50% 47%,
      rgba(255, 248, 226, 0.5) 0%,
      rgba(255, 244, 214, 0.24) 44%,
      rgba(255, 244, 214, 0) 100%);
}

/* Soft warm wash toward the bottom for grounding (no scene-specific glints). */
.fx-horizon {
  z-index: 3;
  background:
    linear-gradient(180deg, transparent 74%, rgba(20, 14, 4, 0.3) 100%);
}

/* Soft dark vignette hugging the frame edges */
.fx-vignette {
  z-index: 4;
  background:
    radial-gradient(115% 88% at 50% 44%,
      rgba(0, 0, 0, 0) 56%,
      rgba(22, 15, 4, 0.2) 80%,
      rgba(16, 11, 2, 0.48) 100%);
}

/* Slow drifting light sweep — barely-there cinematic shimmer */
.fx-light {
  z-index: 5;
  left: -100%;   /* 3× wide so the shimmer sweeps via transform, not
                    background-position (which isn't GPU-composited —
                    MotionScore grade D). Same look, cheaper paint. */
  width: 300%;
  background: linear-gradient(115deg,
    transparent 44%,
    rgba(255, 248, 214, 0.10) 48%,
    rgba(255, 248, 214, 0.16) 50%,
    rgba(255, 248, 214, 0.10) 52%,
    transparent 56%);
  mix-blend-mode: soft-light;
  animation: light-sweep 14s ease-in-out infinite alternate;
}

/* Film grain — inline SVG turbulence noise, extremely subtle */
.fx-grain {
  z-index: 6;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* ---------- 5. Floating navigation ---------- */
.nav {
  position: absolute; /* static: sits at the top of the page and scrolls away */
  top: 38px;
  left: 0;
  right: 0;
  margin: 0 auto; /* centered WITHOUT a transform, so the reduced-motion and
                     no-JS guards (which zero out transforms) can't shove it
                     off-centre and cause horizontal overflow */
  width: 78%;
  max-width: 1040px;
  height: 58px;
  z-index: 100; /* above every section, site-wide */

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 26px;

  background: var(--nav-glass);
  /* 12px, down from 20px: backdrop-filter is one of the most expensive paints
     (MotionScore HIGH) and it repaints over the playing hero video. 12px keeps
     the glass look for far less GPU cost. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),   /* inner highlight */
    0 14px 36px -14px rgba(15, 10, 2, 0.4);

  opacity: 0;
}
body.loaded .nav {
  opacity: 1; /* static value — the nav never depends on animation fill to stay visible */
  animation: nav-in 0.9s var(--ease-out) 0.35s both; /* 'both' holds opacity 0 during the delay */
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.nav-logo-text sup {
  font-size: 8px;
  font-weight: 500;
  vertical-align: super;
}

/* Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;

  position: absolute;   /* truly centered regardless of logo/CTA widths */
  left: 50%;
  transform: translateX(-50%);
}
.nav-menu a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap; /* keep hyphenated labels (Best-Of, How-To) on one line */
  transition: color 0.25s ease, transform 0.25s ease;
}
.nav-menu a:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---------- Mobile nav (hamburger) ----------
   Desktop: the panel is transparent to layout (display:contents), so its
   children — the absolute-centered menu and the CTA — behave exactly as before.
   The toggle is hidden until the menu collapses under 960px. */
.nav-panel { display: contents; }
.nav-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 9px;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
  color: #fff;
}
.nav-toggle-box { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle-box span {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s var(--ease-out), opacity 0.2s ease, top 0.28s var(--ease-out);
}
.nav-toggle-box span:nth-child(1) { top: 0; }
.nav-toggle-box span:nth-child(2) { top: 7px; }
.nav-toggle-box span:nth-child(3) { top: 14px; }
.nav-open .nav-toggle-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-open .nav-toggle-box span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  border: none;
  border-radius: 999px;
  background: var(--yellow);
  color: #111111;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}

.btn-nav {
  height: 42px;
  padding: 0 26px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); /* slight white edge */
}
.btn-nav:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 6px 24px -4px rgba(201, 162, 39, 0.6);
}

/* ---------- 6. Hero content ---------- */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%); /* optically centered, a touch high */
  width: 100%;
  max-width: 850px;
  padding: 0 20px;
  text-align: center;
  z-index: 8;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 13px;
  margin-bottom: 20px;

  background: var(--badge-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  box-shadow: 0 8px 24px -10px rgba(40, 30, 10, 0.25);

  font-size: 10.5px;
  font-weight: 500;
  color: #202020;

  opacity: 0;
}
body.loaded .badge {
  /* Rises in on load, then stays put. The old perpetual badge-float was
     decorative motion the visitor saw the whole time — Emil: cut it. */
  animation: rise-in 0.8s var(--ease-out) 0.55s forwards;
}
.badge-icon { flex-shrink: 0; }

/* Headline */
.headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(52px, 5.3vw, 78px);
  line-height: 0.95;
  letter-spacing: -3.5px;
  color: var(--ink);
  margin: 0;
}
.headline-line {
  display: block;
  white-space: nowrap; /* keep "Navigate The Future" on one line */
  opacity: 0;
}
body.loaded .headline-line:nth-child(1) { animation: rise-in 0.9s var(--ease-out) 0.70s forwards; }
body.loaded .headline-line:nth-child(2) { animation: rise-in 0.9s var(--ease-out) 0.82s forwards; }

/* Yellow italic serif accent (on dark / photo backgrounds) */
.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.09em; /* Instrument Serif runs small; match cap height */
  letter-spacing: -2px;
  color: var(--yellow-accent);
  padding-right: 0.06em; /* keep the italic terminal from clipping */
  text-shadow: 0 1px 24px rgba(227, 178, 60, 0.25);
}

/* Subheadline */
.subheadline {
  margin: 20px auto 0;
  max-width: 430px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  opacity: 0;
}
body.loaded .subheadline {
  animation: rise-in 0.9s var(--ease-out) 0.95s forwards;
}

/* Search / CTA bar */
.search {
  display: flex;
  align-items: center;
  width: 450px;
  height: 54px;
  margin: 36px auto 0;
  padding: 0 4px 0 18px;
  overflow: hidden;

  background: var(--search-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  box-shadow: 0 14px 34px -14px rgba(40, 30, 10, 0.35);

  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
  opacity: 0;
}
body.loaded .search {
  animation: rise-in 0.9s var(--ease-out) 1.08s forwards;
}
.search:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -14px rgba(40, 30, 10, 0.45);
}
.search:focus-within {
  /* A soft golden glow, not a hard ring. A 0-blur 4px spread drew a crisp
     outline that hugged the pill's rounded corners — read as gold "traits"
     on each side rather than a halo. Blur + small spread bleeds it outward. */
  box-shadow:
    0 14px 34px -14px rgba(40, 30, 10, 0.35),
    0 0 22px 3px rgba(201, 162, 39, 0.30);
}

.search-icon { flex-shrink: 0; margin-right: 10px; }

.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #333333;
}
.search-input::placeholder { color: #8a8a8a; }

/* Kill the inner outline with enough specificity to beat the global
   :focus-visible rule (both were 0,1,0, so source order let the gold outline
   win and draw a box around the field). The pill's focus glow is the visible
   focus indicator for the whole control, so the input needs none of its own. */
.search-input:focus,
.search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.btn-search {
  flex-shrink: 0;
  height: 46px;
  padding: 0 24px;
  color: #161616;
  border: 3px solid rgba(255, 255, 255, 0.95);
}
.btn-search:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 22px -4px rgba(201, 162, 39, 0.6);
}
.search.pulse { animation: search-pulse 0.6s var(--ease-out); }

/* ==========================================================================
   7. Shared section primitives
   ========================================================================== */
.section {
  max-width: 1210px;
  margin: 0 auto;
  padding: 96px 24px 0;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(255, 255, 255, 0.5);
}
.eyebrow-light {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

.section-head {
  max-width: 720px;
  margin-bottom: 52px;
}

.section-title {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1.6px;
  color: var(--ink);
}

/* Serif italic accent tuned for light surfaces (deeper yellow = readable) */
.accent-dark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -1px;
  color: inherit;
  background: linear-gradient(transparent 68%, rgba(201, 162, 39, 0.55) 68%); /* yellow marker underline */
}

.section-sub {
  margin-top: 16px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* Scroll-reveal primitives — each block/card animates as it scrolls into view
   and REPLAYS every time it re-enters, so the motion can be studied on scroll.
   SAFE DEFAULT: the hidden start state applies ONLY under html.reveal-on (a
   class the head bootstrap / script.js add). No JS → no .reveal-on → everything
   visible. script.js reveals on enter and only resets a block once it is FULLY
   out of the viewport, so nothing is ever hidden while it is on screen. */

/* --- Single blocks (headings, editorial, CTA, the score visual): rise+fade -- */
.reveal:not(.reveal-stagger) {
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.6s var(--ease-spring);
}
.reveal-on .reveal:not(.reveal-stagger) { opacity: 0; transform: translateY(28px); }
.reveal:not(.reveal-stagger).revealed { opacity: 1; transform: none; }

/* --- Cards & list items in a stagger group: EACH animates on its own, in
       cascade. The per-item delay (~90ms) is set inline by script.js so the
       cascade restarts per row instead of drifting to ~1s on long grids. ----- */
.reveal-stagger > * {
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.6s var(--ease-spring);
}
.reveal-on .reveal-stagger > * { opacity: 0; transform: translateY(26px) scale(0.955); }
.reveal-stagger > *.revealed { opacity: 1; transform: none; }

/* --- Diversified variants (T8): not every block uses the same move --------- */
/* "How we score" split: the copy slides in from the left, the score card from
   the right — a bit of directional variety against the vertical rises. */
.reveal-on .split-copy.reveal-stagger > * { transform: translateX(-30px); }
.reveal-on .split-visual.reveal:not(.reveal-stagger) { transform: translateX(34px); }
/* The two variant selectors above out-rank the generic `.revealed` reset, so
   the slide would never settle back to 0 (leaving the copy shifted -30px and
   clipped on narrow screens). Pin the resting state explicitly, higher up. */
.reveal-on .split-copy.reveal-stagger > *.revealed,
.reveal-on .split-visual.reveal:not(.reveal-stagger).revealed { transform: none; }
/* On narrow screens a horizontal slide would clip at the edge, so the split
   section rises vertically instead of sliding sideways. */
@media (max-width: 760px) {
  .reveal-on .split-copy.reveal-stagger > *,
  .reveal-on .split-visual.reveal:not(.reveal-stagger) { transform: translateY(22px); }
}

/* ---- SAFE-DEFAULT + REDUCED-MOTION GUARANTEES ------------------------------
   T1/T2 fallback: if the page was never marked reveal-capable (JS off, the
   head bootstrap didn't run, or script.js failed), force EVERY animated
   element — reveals and the hero load sequence — to its visible resting state.
   An animation can never hide content. */
html:not(.reveal-on) .reveal,
html:not(.reveal-on) .reveal-stagger > *,
html:not(.reveal-on) .hero-frame,
html:not(.reveal-on) .nav,
html:not(.reveal-on) .badge,
html:not(.reveal-on) .headline-line,
html:not(.reveal-on) .subheadline,
html:not(.reveal-on) .search {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
/* T5: reduced motion → everything visible, no reveal/hero motion at all. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .hero-frame,
  .nav,
  .badge,
  .headline-line,
  .subheadline,
  .search {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   8. Section 1 — Trusted strip
   ========================================================================== */
.section-logos {
  padding-top: 64px;
  text-align: center;
}
.logos-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 56px;
  margin-top: 26px;
  list-style: none;
}
.logos-row li {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
  opacity: 0.32;
  transition: opacity 0.3s ease;
}
.logos-row li:hover { opacity: 0.75; }

/* ==========================================================================
   9. Section 2 — Solutions cards
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* four category cards on desktop */
  gap: 20px;
}

.card {
  padding: 28px 26px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 40px -28px rgba(20, 15, 5, 0.25);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 56px -28px rgba(20, 15, 5, 0.35);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px; /* was 46px — that gap made the cards feel oversized */
}
/* Category icon (Lucide, inline SVG) — gold via --yellow, top-right of the card */
.cat-icon {
  display: inline-flex;
  margin-bottom: 0; /* sits inside .card-top's flex row, so no bottom offset */
  transition: transform 0.45s var(--ease-spring); /* springy lift on card hover */
}
.card:hover .cat-icon {
  transform: translateY(-3px) rotate(-6deg);
}
.cat-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--yellow); /* gold — follows any future palette change */
}
.card-label {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.card-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.card-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  /* Cap at two lines so one long description can't make its whole grid row
     taller than the others (Kitchen was wrapping to 3). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ==========================================================================
   10. Section 3 — Technology split + dashboard visual
   ========================================================================== */
.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split-bullets {
  margin-top: 28px;
  list-style: none;
}
.split-bullets li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.split-bullets li:first-child { border-top: 1px solid var(--line); }
.split-bullets li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--yellow);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Dark futuristic dashboard card */
.split-visual { min-width: 0; }
.dash {
  padding: 22px 24px 26px;
  background:
    radial-gradient(90% 60% at 80% -10%, rgba(89, 82, 40, 0.5) 0%, rgba(89, 82, 40, 0) 70%),
    linear-gradient(165deg, #1b1b15 0%, #121210 55%, #0d0d0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 40px 70px -40px rgba(10, 8, 2, 0.6);
}

.dash-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
}
.dash-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.dash-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

/* Pulsing status dot */
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  animation: pulse-glow 2.2s ease-in-out infinite;
}

.dash-graph {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
}
.node { animation: pulse-glow 2.4s ease-in-out infinite; }
.node-2 { animation-delay: 0.7s; }
.node-3 { animation-delay: 1.3s; }

.dash-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 20px;
}
.dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
}
.dash-pill-alert {
  color: #131310;
  background: var(--yellow);
  border-color: transparent;
  font-weight: 600;
}

.dash-rows {
  display: grid;
  gap: 12px;
}
.dash-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}
.dash-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dash-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.55), var(--yellow));
}

/* ==========================================================================
   11. Section 4 — Process steps
   ========================================================================== */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  counter-reset: step;
}
/* Serpentine timeline: row 1 flows left→right (01·02·03), turns down on the
   right, then row 2 flows right→left (04·05·06) — one continuous line. Centred
   pills keep the line-through-nodes symmetric. */
.steps .step { text-align: center; }
.steps .step-num { margin-left: auto; margin-right: auto; }
.step:nth-child(1) { grid-column: 1; grid-row: 1; }
.step:nth-child(2) { grid-column: 2; grid-row: 1; }
.step:nth-child(3) { grid-column: 3; grid-row: 1; }
.step:nth-child(4) { grid-column: 3; grid-row: 2; }
.step:nth-child(5) { grid-column: 2; grid-row: 2; }
.step:nth-child(6) { grid-column: 1; grid-row: 2; }
/* Row-1 line: col-1 centre → col-3 centre */
.steps::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: rgba(0, 0, 0, 0.14);
}
/* Right-hand U-turn 03 → 04: a rounded ⊃ that carries the line down and back,
   so the timeline reads as one continuous snake rather than a hard corner.
   calc(100% + gap) makes the turn span the row gap whatever the content height. */
.step:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  width: 56px;
  height: calc(100% + 22px);
  border: 2px solid rgba(0, 0, 0, 0.14);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: transparent;
}
/* Row-2 line: col-1 centre → col-3 centre, at the row-2 pill height */
.step:nth-child(6)::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  width: calc(200% + 44px);
  height: 2px;
  background: rgba(0, 0, 0, 0.14);
}

.step {
  position: relative;
  padding: 0 6px;
  transition: transform 0.35s var(--ease-out);
}
.step:hover { transform: translateY(-4px); }

.step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  margin-bottom: 20px;
  background: var(--ink);
  color: #ffffff;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.3s ease, color 0.3s ease;
}
.step:hover .step-num {
  background: var(--yellow);
  color: var(--ink);
}
.step-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.step-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ==========================================================================
   12. Section 5 — Editorial insight (dark)
   ========================================================================== */
.editorial {
  position: relative;
  overflow: hidden;
  padding: 90px clamp(28px, 7vw, 110px);
  background: var(--dark);
  border-radius: 36px;
  text-align: center;
}
.editorial-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 22% 0%,   rgba(227, 178, 60, 0.1)  0%, transparent 70%),
    radial-gradient(45% 55% at 85% 100%, rgba(214, 178, 84, 0.14) 0%, transparent 70%),
    radial-gradient(30% 34% at 70% 12%,  rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}
.editorial-quote {
  position: relative;
  max-width: 820px;
  margin: 14px auto 0;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -1.8px;
  color: #f6f5ef;
}
.editorial-sub {
  position: relative;
  max-width: 480px;
  margin: 26px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(246, 245, 239, 0.6);
}
.editorial-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
  padding: 13px 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #f6f5ef;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
.editorial-cta:hover {
  background: var(--yellow);
  color: var(--ink);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(201, 162, 39, 0.5);
}

/* ==========================================================================
   13. Section 6 — Use cases grid
   ========================================================================== */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.usecase {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.3s ease;
}
.usecase:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 24px 44px -26px rgba(20, 15, 5, 0.35);
}
.usecase h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 7px;
}
.usecase p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.usecase-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  transition:
    background 0.3s ease,
    transform 0.35s var(--ease-out);
}
.usecase:hover .usecase-arrow {
  background: var(--yellow);
  transform: rotate(-45deg);
}

/* ==========================================================================
   14. Section 7 — Final CTA
   ========================================================================== */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 100px clamp(28px, 7vw, 110px) 104px;
  border-radius: 36px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(170deg, #f3ead0 0%, #e9d9ae 46%, #d9c088 100%);
  text-align: center;
}
.final-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 50% 0%,  rgba(255, 251, 230, 0.85) 0%, transparent 70%),
    radial-gradient(40% 45% at 12% 100%, rgba(120, 96, 44, 0.22) 0%, transparent 70%),
    radial-gradient(40% 45% at 88% 100%, rgba(120, 96, 44, 0.22) 0%, transparent 70%);
}
.final-title {
  position: relative;
  font-size: clamp(36px, 4.4vw, 62px);
  font-weight: 500;
  letter-spacing: -2.4px;
  line-height: 1;
  color: var(--ink);
}
.final-title .accent-dark { background: none; } /* italic reads clean on warm bg */
.final-sub {
  position: relative;
  max-width: 480px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(20, 20, 20, 0.66);
}
.final-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
.btn-primary {
  height: 50px;
  padding: 0 32px;
  font-size: 13px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 12px 32px -8px rgba(201, 162, 39, 0.65);
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 32px;
  font-size: 13px;
  background: var(--ink);
  color: #ffffff;
  text-decoration: none;
}
.btn-dark:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   15. Section 8 — Footer
   ========================================================================== */
.footer {
  max-width: 1210px;
  margin: 88px auto 0;
  padding: 44px 24px 20px;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-logo {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.footer-logo sup { font-size: 8px; }
.footer-brand p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-mute);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.footer-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-links a:hover { color: var(--ink); }
/* FTC affiliate disclosure — mandatory, quietly styled */
.footer-disclosure {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 640px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.footer-copy {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ==========================================================================
   16. Keyframes
   ========================================================================== */
@keyframes frame-in {
  from { opacity: 0; } /* pure fade — scaling a full-bleed section would expose edges */
  to   { opacity: 1; }
}
@keyframes bg-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@keyframes nav-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes light-sweep {
  from { transform: translateX(-16%); }
  to   { transform: translateX(16%); }
}
@keyframes mist-drift {
  from { transform: translateX(-1.5%); }
  to   { transform: translateX(1.5%); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@keyframes search-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(201, 162, 39, 0); }
}

/* NOTE: the prefers-reduced-motion guard was removed on purpose —
   the animations are part of this site's identity and must always play.
   (Windows "Animation effects: off" was silently disabling everything.) */

/* ==========================================================================
   17. Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .hero-frame { min-height: 640px; }
  .nav { width: 88%; }
  .nav-menu { gap: 18px; }
  .headline { letter-spacing: -2.6px; }

  .section { padding-top: 80px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); } /* 2×2 on tablet */
  .section-split { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  /* Drop the serpentine layout below the desktop breakpoint: normal flow,
     left-aligned, no connecting line. */
  .steps .step { grid-column: auto !important; grid-row: auto !important; text-align: left; }
  .steps .step-num { margin-left: 0; margin-right: 0; }
  .steps::before,
  .step:nth-child(3)::after,
  .step:nth-child(6)::before { display: none; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below 960px the inline centered menu would collide with the logo, so it
   collapses into an accessible dropdown panel behind the hamburger. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Panel drops below the bar; hidden until .nav-open is toggled by JS. */
  .nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: rgba(20, 18, 14, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    box-shadow: 0 24px 50px -24px rgba(10, 8, 2, 0.7);
  }
  .nav.nav-open .nav-panel { display: flex; }

  .nav-panel .nav-menu {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }
  .nav-panel .nav-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
  }
  .nav-panel .nav-menu a:hover { transform: none; background: rgba(255, 255, 255, 0.08); }
  .nav-panel .nav-menu a::after { display: none; }

  .nav-panel .btn-nav {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .hero-frame {
    height: 100svh; /* stable against mobile URL-bar resize */
    min-height: 620px;
  }

  .nav {
    top: 22px;
    width: calc(100% - 28px);
    height: 54px;
    padding: 0 8px 0 18px;
  }

  .headline {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -1.8px;
  }
  .headline-line { white-space: normal; }
  .accent { letter-spacing: -1.2px; }

  .search { width: 90%; }
  .btn-search { padding: 0 16px; }

  .section { padding-top: 64px; }
  .section-logos { padding-top: 48px; }
  .logos-row { gap: 14px 30px; }
  .logos-row li { font-size: 16px; }

  .cards-grid { grid-template-columns: 1fr; } /* single column on phones */
  .steps { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }

  .editorial { padding: 64px 24px; border-radius: 28px; }
  .final-cta { padding: 68px 24px 72px; border-radius: 28px; }
  .final-actions { flex-direction: column; align-items: center; }

  .footer-inner { flex-direction: column; }
}

/* ==========================================================================
   18. PREMIUM POLISH LAYER
   Micro-details that lift perceived quality: selection color, focus rings,
   skip link, scroll hint, sticky nav, logotype variety, card glows,
   cinematic blur reveals, grain cohesion, custom scrollbar.
   ========================================================================== */

/* Brand text selection */
::selection {
  background: var(--yellow);
  color: #111111;
}

/* Visible, on-brand keyboard focus */
:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Accessible skip link (revealed on keyboard focus) */
.skip-link {
  position: fixed;
  top: -56px;
  left: 18px;
  z-index: 200;
  padding: 11px 18px;
  background: var(--ink);
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.3s var(--ease-out);
}
.skip-link:focus { top: 18px; }

/* Anchored sections land with breathing room */
.section { scroll-margin-top: 90px; }

/* Slim, tasteful scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.26);
  border-radius: 999px;
  border: 3px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.42); }

/* ---------- Hero details ---------- */

/* Scroll hint — quiet invitation at the hero's bottom edge */
.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  width: 25px;
  height: 40px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  opacity: 0;
}
.scroll-hint span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  animation: hint-drop 2.2s var(--ease-out) infinite;
}
body.loaded .scroll-hint {
  animation: rise-in 1s var(--ease-out) 1.5s forwards;
}
@keyframes hint-drop {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}

/* Badge: glass edge highlight */
.badge {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 24px -10px rgba(40, 30, 10, 0.25);
}

/* Search input caret in brand yellow */
.search-input { caret-color: var(--yellow-deep); }

/* Menu links: gold underline sweep on hover (was a dot). */
.nav-menu a { position: relative; }
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--ease-out);
}
.nav-menu a:hover::after { transform: scaleX(1); }

/* The nav is static (absolute, top of page) — it scrolls away with the hero. */

/* The reveal used to also animate filter: blur() from 4px → 0. Animating a
   blur on large section blocks forces a full-frame GPU repaint every frame and
   was the main cause of the "not smooth" scroll. Removed — opacity + a
   translate compose cheaply and read just as premium. */

/* The "wow" lives in the reveal itself (see the .reveal block above): a
   scale + rise + fade with a gentle spring settle, staggered per child, driven
   by the JS IntersectionObserver. A pure CSS scroll-timeline (animation-
   timeline: view()) was trialled for a scroll-scrubbed version, but Chrome
   drops the fill state when the subject is fully out of view, so below-the-fold
   blocks showed at full opacity instead of hidden. Not worth the fragility —
   the JS reveal is reliable and reads just as premium. */

/* ---------- Category strip: one clean, consistent treatment ---------- */
.logos-row li {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.1px;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
.logos-row li:hover { transform: translateY(-2px); }

/* ---------- Cards: warm glow + sharpened hover ---------- */
.card {
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  top: -38%;
  right: -26%;
  width: 68%;
  height: 78%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card:hover { border-color: rgba(0, 0, 0, 0.15); }
.card-mark { transition: transform 0.4s var(--ease-out); }
.card:hover .card-mark { transform: translateY(-3px) rotate(-4deg); }

/* ---------- Grain cohesion on the feature panels ---------- */
.editorial::after,
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* Footer links: underline sweep — every bottom-row link, site + legal. */
.footer-links a,
.footer-legal a {
  position: relative;
}
.footer-links a::after,
.footer-legal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.footer-links a:hover::after,
.footer-legal a:hover::after { transform: scaleX(1); }

/* (Reduced-motion overrides intentionally removed — see note above.) */

/* ==========================================================================
   19. SIGNATURE COMPONENTS
   Reusable, brand-owned building blocks:
     .badge-research / .badge-handson  — the two review-model badges
     .trust-score                      — gold ring gauge + sub-score bars
     .verdict-box                      — "Verdict in 10 seconds" (review pages)
   All colours come from the gold tokens, so a palette change flows through.
   ========================================================================== */

/* ---------- 19.1 Badges (review model) ----------
   .badge-research → score built from verified-review research
   .badge-handson  → we bought and physically tested this one            */
.badge-research,
.badge-handson {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Small filled dot distinguishes the hands-on badge at a glance */
.badge-handson::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

/* ---------- 19.2 Trust Score ----------
   A data component first, decoration second. Set the ring percentage with
   the --score custom property:

     <div class="trust-score" style="--score: 87"> … </div>

   Design notes:
   · The unfilled arc has to be readable, otherwise the proportion cannot be
     judged at a glance — the old 8% track was effectively invisible.
   · The number alone carries no meaning, so a qualitative band ("Excellent")
     sits under it. That also stops the score being conveyed by colour alone.
   · The ring is aria-hidden and the score is announced through a visually
     hidden sentence, so a screen reader gets the summary, not loose digits.
   ------------------------------------------------------------------------ */
.trust-score {
  position: relative;
  padding: 36px 30px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 20px 44px -30px rgba(20, 15, 5, 0.28);
  text-align: center;
}

/* Screen-reader summary: "FindorLabs Trust Score: 8.7 out of 10, Excellent." */
.ts-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.trust-score-ring {
  position: relative;
  width: 172px;
  height: 172px;
  margin: 0 auto;
}
.trust-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start the arc at 12 o'clock */
  overflow: visible;
}

.ts-track {
  fill: none;
  stroke: rgba(20, 15, 5, 0.06); /* a hint of the full circle; kept light so the arc clears 3:1 against it */
  stroke-width: 7;
}
.ts-fill {
  fill: none;
  stroke: var(--yellow-deep); /* --yellow is only 2.2:1 on cream — fails WCAG 1.4.11 */
  stroke-width: 7;
  stroke-linecap: round;
  /* r=52 → circumference ≈ 327 */
  stroke-dasharray: 327;
  stroke-dashoffset: 327; /* empty until the Trust Score scrolls into view */
  filter: drop-shadow(0 2px 6px rgba(168, 127, 30, 0.3));
  transition: stroke-dashoffset 1.15s var(--ease-out) 0.15s;
}

/* The arc fills only once the Trust Score scrolls into view (its wrapper
   .split-visual gains .revealed) — it used to draw on load, off-screen, and
   was never actually seen. */
.split-visual.revealed .ts-fill {
  stroke-dashoffset: calc(327 - (327 * var(--score, 0) / 100));
}

.ts-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  padding-top: 62px; /* optical centring against the descender-free digits */
  font-weight: 600;
  color: var(--ink);
}
.ts-value strong {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2.4px;
  font-variant-numeric: tabular-nums; /* no width jump between 8.7 and 10.0 */
}
.ts-value span {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: -0.2px;
}

/* Qualitative band — gives the number meaning and satisfies colour-not-only */
.ts-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft); /* small text needs 4.5:1 — gold only reaches 3.3 */
}

.ts-label {
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--ink);
}
.ts-note {
  margin-top: 5px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-mute);
}
/* Sample-scorecard flag — sits at the very top of the card so it reads before
   the 9.2, making it unmistakable that no real product rating is implied. */
.ts-sample {
  display: inline-block;
  margin: 0 0 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7a5d10;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.4);
  padding: 5px 13px;
  border-radius: 999px;
}

/* Empty-state block — turns a pre-launch void into an intentional message. */
.empty-state {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 24px 12px;
}
.empty-state-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* Affiliate-integrity list */
.integrity-list {
  list-style: none;
  max-width: 760px;
  margin: 4px 0 0; /* left-aligned with the section heading, like How-we-score */
  padding: 0;
}
.integrity-list li {
  position: relative;
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-soft);
}
.integrity-list li:first-child { border-top: 1px solid var(--line); }
.integrity-list li strong { color: var(--ink); font-weight: 600; }
.integrity-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--yellow);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.ts-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

/* ---------- Sub-score bars — label · track · value ---------- */
.score-bars {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  text-align: left;
}
.score-bar {
  display: grid;
  grid-template-columns: 96px 1fr 34px;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
}
.score-bar-label {
  color: var(--ink-soft); /* was ink-mute — too faint on cream */
  font-weight: 500;
}
.score-bar-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(20, 15, 5, 0.06);
  overflow: hidden;
}
.score-bar-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--yellow-deep);
  transform: scaleX(0); /* fills when the Trust Score scrolls into view */
  transform-origin: left center;
  transition: transform 0.9s var(--ease-out);
}
.split-visual.revealed .score-bar-track i { transform: scaleX(1); }
/* Stagger the three bars as they fill. */
.split-visual.revealed .score-bar:nth-child(1) .score-bar-track i { transition-delay: 0.30s; }
.split-visual.revealed .score-bar:nth-child(2) .score-bar-track i { transition-delay: 0.42s; }
.split-visual.revealed .score-bar:nth-child(3) .score-bar-track i { transition-delay: 0.54s; }
.score-bar-value {
  text-align: right;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Data must be readable instantly when motion is unwelcome — show the arc and
   bars filled, with no transition. */
@media (prefers-reduced-motion: reduce) {
  .ts-fill {
    stroke-dashoffset: calc(327 - (327 * var(--score, 0) / 100));
    transition: none;
  }
  .score-bar-track i {
    transform: scaleX(1);
    transition: none;
  }
}

@media (max-width: 640px) {
  .trust-score { padding: 28px 22px 26px; }
  .trust-score-ring { width: 150px; height: 150px; }
  .ts-value { padding-top: 54px; }
  .ts-value strong { font-size: 42px; }
  .ts-band { bottom: 34px; }
  .score-bar { grid-template-columns: 84px 1fr 32px; gap: 10px; }
}

/* ---------- 19.3 Verdict box ("Verdict in 10 seconds") ----------
   Ready for the future review pages — NOT used on the home page.
   HTML pattern is documented in index.html next to the CTA section.   */
.verdict-box {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid rgba(201, 162, 39, 0.5); /* thin gold rule */
  border-radius: 20px;
}
.verdict-box h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.verdict-box ul {
  list-style: none;
  display: grid;
  gap: 11px;
}
.verdict-box li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.verdict-box li strong {
  font-weight: 600;
}

/* Responsive: keep the Trust Score comfortable on small screens */
@media (max-width: 640px) {
  .trust-score { padding: 28px 20px; }
  .trust-score-ring { width: 148px; height: 148px; }
  .score-bar { grid-template-columns: 80px 1fr 28px; }
}

/* ==========================================================================
   20. MICRO-INTERACTIONS
   Additive polish on hover feedback. The named entrance animations
   (frame-in, nav-in, rise-in, reveal, search-pulse) are NOT touched.
   ========================================================================== */

/* ---------- Gold buttons: light on hover, press feedback on :active ----------
   Emil Kowalski: every pressable element must respond to the press. scale(0.96)
   on :active tells the user "the interface heard you". Transform is snappy
   (160ms) so both the hover lift and the press read as instant. */
.btn {
  text-decoration: none; /* .btn is used on <a> too (404, legal pages) */
  transition:
    transform 0.16s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    filter 0.2s ease;
}
.btn:hover {
  filter: brightness(1.06);
}
/* Placed after every :hover rule so, on press, this scale wins over the
   hover lift (equal specificity, later in source). Covers nav + search +
   primary + dark buttons, since they all carry the .btn class. */
.btn:active {
  transform: scale(0.96);
}

/* ---------- Cards: lift + hairline gold edge ----------
   Applies to the category cards and the Latest Reviews cards.       */
.card,
.usecase {
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    border-color 0.25s ease;
}
.card:hover,
.usecase:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.35); /* gold hairline, ~35% */
  box-shadow: 0 26px 50px -28px rgba(20, 15, 5, 0.32);
}

/* ---------- Reduced motion ----------
   Drop the MOVEMENT (what can cause discomfort) but keep the visual
   feedback — brightness, gold edge and shadow still respond instantly,
   so hover remains discoverable for everyone.                        */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .usecase {
    transition: none;
  }
  .btn:hover,
  .card:hover,
  .usecase:hover {
    transform: none;
  }
}

/* ---------- Touch devices: no sticky hover ----------
   Emil Kowalski: a tap fires :hover on touch screens and leaves the lift/scale
   stuck until you tap elsewhere. Neutralise the movement here — the :active
   press feedback above already gives touch users the response they need. */
@media (hover: none) {
  .btn:hover,
  .btn-nav:hover,
  .btn-search:hover,
  .search:hover,
  .card:hover,
  .usecase:hover,
  .step:hover {
    transform: none;
  }
}

/* ==========================================================================
   21. UX ADDITIONS — error page, back-to-top, breadcrumbs
   ========================================================================== */

/* ---------- 21.1 Error page (404.html) ---------- */
.error-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 24px 90px;
}
.error-code {
  font-size: clamp(70px, 13vw, 150px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -6px;
  color: var(--ink);
}
.error-code em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -4px;
  color: var(--yellow-deep);
}
.error-title {
  margin-top: 26px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ink);
}
.error-text {
  margin: 14px auto 0;
  max-width: 430px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

/* ---------- 21.2 Back-to-top ----------
   Hidden until ~600px of scroll; script.js toggles .visible.        */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;

  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;

  background: var(--nav-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 26px -10px rgba(15, 10, 2, 0.45);
  color: #ffffff;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    visibility 0.3s,
    filter 0.2s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  filter: brightness(1.12);
}

/* ---------- 21.3 Breadcrumbs ----------
   For future internal pages. NOT rendered on the home page.
   Pattern is documented in index.html.                              */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.breadcrumbs a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.25s ease;
}
.breadcrumbs a:hover {
  color: var(--ink);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.45;
}
.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 640px) {
  .back-to-top { right: 16px; bottom: 16px; }
}

/* Reduced motion: the button appears without sliding */
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
  .back-to-top.visible { transform: none; }
}

/* ==========================================================================
   22. NAV VARIANT — pages without a dark hero behind the bar
   The default .nav glass (rgba(35,35,29,.56)) is tuned to sit over the hero
   video. On light pages (404, legal) that translucency turns muddy, so those
   pages add .nav-solid for a properly dark, legible bar.
   ========================================================================== */
.nav-solid {
  background: rgba(19, 19, 16, 0.94);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 36px -16px rgba(15, 10, 2, 0.5);
}

/* ==========================================================================
   23. LINK-BUTTON HARDENING
   .btn is used on both <button> and <a>. A bare .btn rule (0,1,0) can lose
   to user stylesheets, accessibility settings or extensions that force
   underlines on every link. a.btn (0,1,1) + explicit states win cleanly.
   ========================================================================== */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus {
  text-decoration: none;
}

/* A <button> centres its label natively; an <a> does not. Since .btn sets an
   explicit height with zero vertical padding, link-buttons need flex centring
   or the text sits on the baseline instead of the middle of the pill. */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   24. LEGAL PAGES — affiliate disclosure, privacy, terms
   Long-form reading layout on the light canvas. Narrow measure (~70ch)
   so body copy stays comfortable.
   ========================================================================== */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 150px 24px 96px;
}

.legal-breadcrumbs {
  margin-bottom: 30px;
}

.legal-title {
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--ink);
}
.legal-updated {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.legal-intro {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.legal-content {
  margin-top: 46px;
}
.legal-content section {
  margin-bottom: 38px;
}
.legal-content h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 12px;
}
.legal-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.legal-content ul {
  margin: 12px 0 14px;
  padding-left: 20px;
}
.legal-content li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.legal-content a {
  color: var(--yellow-deep);
}

/* Draft marker — makes unfinished clauses impossible to miss before launch */
.todo {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--yellow-deep);
  border-radius: 6px;
  background: rgba(201, 162, 39, 0.07);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--yellow-deep);
  vertical-align: middle;
}

/* Legal links row in the footer */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 18px;
}
.footer-legal a {
  font-size: 12px;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-legal a:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  .legal-page { padding: 120px 20px 70px; }
}




/* ==========================================================================
   25. BRAND LOCKUP IMAGES (final logo)
   Two raster variants of the same lockup: white wordmark for the dark nav,
   black wordmark for the light footer. Both served oversized for retina;
   height-driven so the aspect ratio always holds.
   ========================================================================== */
.nav-logo-img {
  display: block;
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
.footer-logo-img {
  display: block;
  height: 27px;
  width: auto;
}
@media (max-width: 640px) {
  .nav-logo-img { height: 26px; }
}

/* ==========================================================================
   26. FOOTER SOCIAL LINKS
   Inline SVG marks, no icon font, no external request. Gold on hover so
   they echo the accent without competing with the footer navigation.
   ========================================================================== */
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-mute);
  text-decoration: none;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s var(--ease-out);
}
.footer-social a:hover {
  color: var(--yellow-deep);
  border-color: rgba(201, 162, 39, 0.45);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 17px;
  height: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .footer-social a { transition: color 0.2s ease, border-color 0.2s ease; }
  .footer-social a:hover { transform: none; }
}

@media (max-width: 640px) {
  .footer-social { margin-top: 4px; }
}

/* ==========================================================================
   27. CREDIBILITY STRIP — icons + legibility
   The base .logos-row rules came from the old "partner logos" strip, which
   was deliberately faded (opacity .32). These are trust signals now, so they
   must read at full strength.
   ========================================================================== */
.logos-row {
  gap: 18px 38px;
}
.logos-row li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--ink-soft);
  opacity: 1;                 /* was .32 — faded logos, not trust claims */
}
.logos-row li svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: var(--yellow);      /* follows the palette token */
}
.logos-row li:hover {
  opacity: 1;
  color: var(--ink);
}

@media (max-width: 640px) {
  .logos-row { gap: 14px 26px; }
  .logos-row li { font-size: 14px; }
  .logos-row li svg { width: 16px; height: 16px; }
}

/* Inline link inside the FTC disclosure. Without this it falls back to the
   browser default (blue/purple + underline), which reads as unstyled. */
.footer-disclosure a {
  color: var(--yellow-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 127, 30, 0.35);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer-disclosure a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ==========================================================================
   29. FOOTER — WordPress menu markup + column balance
   The static build prints bare <a> inside the nav; WordPress wraps items in
   a <ul>. Both shapes are supported here so one stylesheet serves both.
   ========================================================================== */

/* Flatten the WordPress list. Stripping the <ul> in PHP instead left orphan
   <li> elements, which are invalid and render with bullet markers. */
.footer-links ul,
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links ul { gap: 26px; }
.footer-legal ul { gap: 20px; }

.footer-links li,
.footer-legal li {
  list-style: none;
}
.footer-links li::marker,
.footer-legal li::marker {
  content: none;
}

/* Let the brand claim the slack so the social row and the nav group together
   on the right. Previously space-between spread three blocks evenly and left
   an awkward void between them on wide screens. */
.footer-brand {
  flex: 1 1 320px;
  min-width: 0;
}
.footer-inner {
  gap: 40px;
}

/* ---------- Centred footer variant ----------
   Add class="footer footer--centered" to switch. Suits the current light
   content; revisit if category columns are added later, since columns read
   better left-aligned. */
.footer--centered {
  text-align: center;
}
.footer--centered .footer-inner {
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.footer--centered .footer-brand {
  flex: none;
}
.footer--centered .footer-logo-img {
  margin: 0 auto;
}
.footer--centered .footer-social,
.footer--centered .footer-links ul,
.footer--centered .footer-legal ul,
.footer--centered .footer-links,
.footer--centered .footer-legal {
  justify-content: center;
}
/* The disclosure stays measured — centred legal text is already harder to
   scan, so it keeps its narrow column rather than stretching. */
.footer--centered .footer-disclosure {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.footer--centered .footer-legal {
  margin-top: 18px;
}

/* ---------- Bottom link row ----------
   Site links and legal links sit in one row under the disclosure. They come
   from two different menus, so their styling is unified here — otherwise the
   size/colour difference would read as two separate rows. */
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 20px;
}
.footer-bottom-links .footer-links,
.footer-bottom-links .footer-legal {
  margin-top: 0;
}
.footer-bottom-links a {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
}
.footer-bottom-links a:hover {
  color: var(--ink);
}
.footer--centered .footer-bottom-links {
  justify-content: center;
}

/* ---------- Category card links ----------
   The card title links to its category. Without these rules it fell back to
   the browser default (blue, underlined) — the card is the link, so it should
   look like a card, not like body-copy hypertext. */
.card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.card-title a:hover {
  color: var(--yellow-deep);
}

/* Stretch the hit area over the whole card. One semantic <a>, but a 231px
   target instead of a 25px line of text. The hover glow above already sets
   pointer-events: none, so it does not intercept the click. */
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* The link is stretched, so the focus ring belongs on the card. */
.card:has(.card-title a:focus-visible) {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 3px;
  border-radius: 28px;
}
.card-title a:focus-visible {
  outline: none; /* the card carries it instead */
}

/* ==========================================================================
   28. WORDPRESS TEMPLATES
   Layouts that only exist once the site runs on WordPress: review pages,
   archives, pagination. Everything above is shared with the static build.
   ========================================================================== */

/* ---------- Review page ---------- */
.review-page {
  max-width: 1210px;
  margin: 0 auto;
  padding: 150px 24px 40px;
}
.review-head {
  max-width: 760px;
}
.review-head .eyebrow a {
  color: inherit;
  text-decoration: none;
}

/* Body + sticky score card */
.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
  margin-top: 44px;
}
.review-body { min-width: 0; }
.review-aside {
  position: sticky;
  top: 110px;
}

.review-figure {
  margin: 28px 0;
  border-radius: 22px;
  overflow: hidden;
}
.review-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Method note — the hybrid model, restated on every review */
.review-method {
  margin-top: 44px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.review-method h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.review-method p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.review-method a { color: var(--yellow-deep); }

/* ---------- Review cards: score + hands-on flag ---------- */
.review-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.review-card-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 9px;
  background: var(--yellow);
  color: #131310;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.review-card-handson {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mute);
}

/* ---------- Archive ---------- */
.archive-page {
  padding-top: 150px;
}
.archive-empty {
  padding: 40px 0 20px;
}
.archive-empty p { margin-bottom: 22px; }

/* ---------- Pagination ---------- */
.fl-pagination,
.navigation.pagination {
  margin-top: 52px;
}
.fl-pagination .nav-links,
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.fl-pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.fl-pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
  color: var(--ink);
  border-color: rgba(201, 162, 39, 0.45);
}
.fl-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background: var(--yellow);
  border-color: transparent;
  color: #131310;
  font-weight: 700;
}

/* ---------- WordPress core classes ---------- */
.alignleft  { float: left;  margin: 6px 24px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 24px; }
.aligncenter { display: block; margin: 18px auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.legal-content figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.legal-content img,
.legal-content iframe {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
.legal-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 8px;
}
.legal-content blockquote {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--yellow);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14px;
}
.legal-content th,
.legal-content td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.legal-content th {
  font-weight: 600;
  color: var(--ink);
}
.page-links { margin-top: 24px; font-size: 13px; }

/* The admin bar must not hide the fixed nav */
body.admin-bar .nav { top: 70px; }

@media (max-width: 1024px) {
  .review-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Score first on narrow screens — it is the headline information */
  .review-aside {
    position: static;
    order: -1;
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .review-page, .archive-page { padding-top: 120px; }
  body.admin-bar .nav { top: 68px; }
}

/* Matching-categories block on the search results page. */
.search-cats { margin-bottom: 48px; }
.search-cats .eyebrow { margin-bottom: 18px; }
/* ==========================================================================
   Why-trust pillars — scannable trust block on the home page.
   Same surface/hairline/shadow language as .card, lighter footprint.
   ========================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.trust-item {
  padding: 30px 26px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 40px -28px rgba(20, 15, 5, 0.25);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(20, 15, 5, 0.32);
}
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: rgba(201, 162, 39, 0.10);
  border: 1px solid rgba(201, 162, 39, 0.22);
}
.trust-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--yellow-deep); /* gold on light — meets contrast on the surface */
}
.trust-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 9px;
}
.trust-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
}
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* ---- Serpentine "How we review" timeline -------------------------------- */
/* ported from the approved artifact; tokens bridged to the theme palette.   */
#guides .tl{--gold:var(--yellow);--gold-deep:var(--yellow-deep);--node:#FCFAF3;--f-sans:var(--font-sans);--f-serif:var(--font-serif);
  position:relative;margin-top:clamp(28px,4vw,48px);padding:clamp(124px,15vw,158px) clamp(74px,9vw,132px)}
#guides .tl-track{position:relative;width:100%}
#guides .tl-nodes,#guides .tl-steps{margin:0;padding:0;list-style:none}
#guides .tl-wave{display:block;width:100%;height:auto;overflow:visible}
#guides .tl-wave .wave-main{filter:drop-shadow(0 13px 16px rgba(138,108,27,.30))}
#guides .tl-node{position:absolute;margin:-29px 0 0 -29px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FCFAF2 44%, #EADFC2 100%);border:6px solid var(--ring,var(--gold));box-shadow:0 0 0 3px rgba(230,208,150,.9), 0 11px 22px -7px rgba(23,20,12,.5), 0 2px 4px rgba(23,20,12,.25), inset 0 0 0 1.5px rgba(120,92,20,.45), inset 0 2px 4px rgba(120,92,20,.30);font-family:var(--f-sans);font-weight:700;font-size:17px;color:var(--ringtxt,#B8912A);letter-spacing:.02em;font-variant-numeric:tabular-nums;z-index:3}
#guides .tl-step{position:absolute;width:min(252px,27vw);margin-left:calc(min(252px,27vw) / -2);z-index:2;display:grid;grid-template-columns:50px 1fr;column-gap:14px;align-content:start}
#guides .tl-step.above{bottom:calc(100% + 12px)}
#guides .tl-step.below{top:calc(100% + 12px)}
#guides .tl-ico{grid-column:1;grid-row:1 / span 2;align-self:start;width:50px;height:50px;color:var(--gold)}
#guides .tl-ico svg{width:100%;height:100%;display:block}
#guides .tl-kicker{grid-column:2;grid-row:1;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
#guides .tl-title{grid-column:2;grid-row:2;font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:-.018em;line-height:1.05;margin:2px 0 0;color:var(--ink)}
#guides .tl-desc{grid-column:1 / -1;grid-row:3;font-size:14px;line-height:1.55;color:var(--ink-soft);margin-top:10px}
/* --- Scroll cascade 1 → 6 : nodes and steps live in `.reveal-stagger`
   wrappers, so the SAME observer the category cards use reveals them one by one,
   and the theme's JS-off / reduced-motion failsafes apply automatically.
   Centring is done with margins above, so `transform` is free for the reveal
   slide and nothing fights it. The theme sets a per-item delay inline that
   restarts every 4 items; we override it to a clean 1 → 6.                    */
#guides .tl-nodes > .tl-node:nth-of-type(1),#guides .tl-steps > .tl-step:nth-of-type(1){transition-delay:0s!important}
#guides .tl-nodes > .tl-node:nth-of-type(2),#guides .tl-steps > .tl-step:nth-of-type(2){transition-delay:.1s!important}
#guides .tl-nodes > .tl-node:nth-of-type(3),#guides .tl-steps > .tl-step:nth-of-type(3){transition-delay:.2s!important}
#guides .tl-nodes > .tl-node:nth-of-type(4),#guides .tl-steps > .tl-step:nth-of-type(4){transition-delay:.3s!important}
#guides .tl-nodes > .tl-node:nth-of-type(5),#guides .tl-steps > .tl-step:nth-of-type(5){transition-delay:.4s!important}
#guides .tl-nodes > .tl-node:nth-of-type(6),#guides .tl-steps > .tl-step:nth-of-type(6){transition-delay:.5s!important}

@media (max-width:860px){
  #guides .tl{margin-top:32px;padding:0}
  #guides .tl-wave,#guides .tl-nodes{display:none}
  /* mobile: the wave unwinds into a vertical timeline (gold rule + numbered badges) */
  #guides .tl-steps{display:flex;flex-direction:column;gap:30px;padding-left:30px;border-left:2px solid var(--gold)}
  #guides .tl-step{position:relative;width:auto;margin:0;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
  #guides .tl-step::before{content:attr(data-n);position:absolute;left:-47px;top:-2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--node);border:2px solid var(--gold);box-shadow:0 4px 10px -4px rgba(23,20,12,.4);font-weight:700;font-size:12px;color:var(--ink)}
  #guides .tl-ico{margin-bottom:8px}
}