/* ============================================================
   Influeri — Flagship home page (composition layer)
   Loads LAST, after: styles.css → heart.css → results-ui.css →
   trending-creators.css. Overrides only what the page needs and adds
   the section-level layouts that aren't in the shared components.

   Built per design.md §7.1. Reuses the shared component classes
   (.nav, .btn, .prompt-card, .creator, .app-frame, .hh*, .ru, .tcm*)
   — never forks them. Tokens come from styles.css :root; new tokens
   below are additive (design.md §3).
   ============================================================ */

/* ---------- Brand typefaces (design.md §3.2; CDN, same source as the site) ---------- */
@font-face {
  font-family: "Telegraf";
  src: url("https://cdn.prod.website-files.com/641819f2e2165d582c58a59e/68556c3238b43469f0f12921_Telegraf-Variable.ttf") format("truetype");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pulp Display"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("https://cdn.prod.website-files.com/641819f2e2165d582c58a59e/644625b59a23d8b4337f52ea_PulpDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Pulp Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("https://cdn.prod.website-files.com/641819f2e2165d582c58a59e/644625b58a8f428d8367b624_PulpDisplay-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Pulp Display"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("https://cdn.prod.website-files.com/641819f2e2165d582c58a59e/644625b50e0cf8052bdd80cf_PulpDisplay-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Pulp Display"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("https://cdn.prod.website-files.com/641819f2e2165d582c58a59e/644625b54719bb54b36353e2_PulpDisplay-Bold.ttf") format("truetype");
}

/* ---------- Additive tokens (design.md §3) ---------- */
:root {
  --muted: #9a9a9a;
  --muted-2: #b9b9b9;
  --surface-2: #fafafa;
  --glow-pink: rgba(11, 11, 11, .06);
  --ok: #28c840;

  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  --r-card: 12px; --r-panel: 14px; --r-frame: 18px; --r-pill: 999px;
  --sh-card: 0 23px 50px rgba(0,0,0,.10);
  --sh-card-hover: 0 28px 60px rgba(0,0,0,.14);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --dur-base: 300ms; --dur-reveal: 480ms;

  --gutter: 24px;
  --max: 1120px;            /* showcase width (design.md §3.4) */

  /* Section rhythm — the page's vertical spacing, tunable in one place.
     Halved from the original 96 / 64 / 44 scale on the designer's call: the
     sections sat too far apart, and each head too far from its own content. */
  --sec-pad-y: clamp(28px, 4.5vw, 48px);
  --sec-pad-y-tight: clamp(20px, 3vw, 32px);
  --sec-head-gap: clamp(14px, 2vw, 22px);
  --sec-block-gap: clamp(14px, 2vw, 24px);
}

/* ---------- Section rhythm + shared shells ---------- */
.section { padding: var(--sec-pad-y) var(--gutter); }
.section--tight { padding-top: var(--sec-pad-y-tight); }
.wrap { max-width: var(--max); margin: 0 auto; }
.wrap--narrow { max-width: 920px; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px;
}
.kicker::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: #0b0b0b;
}
.sec-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--primary); margin: 0; text-wrap: balance;
}
.sec-lede {
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--text);
  max-width: 60ch; margin: 16px 0 0; text-wrap: pretty;
}
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: var(--sec-head-gap);
}
.sec-head .sec-lede { margin-top: 12px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-weight: 600; font-size: 15px; color: var(--primary);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.link-arrow:hover { border-color: var(--primary); }
.link-arrow .arrow { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---------- Scroll-reveal (enhances an already-visible default) ----------
   Hidden state is gated on .reveal-ready (added by JS) so the page is fully
   visible without JS / before the observer runs — never stuck blank. */
.reveal-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay: 60ms; }
.reveal[data-d="2"]{ transition-delay: 120ms; }
.reveal[data-d="3"]{ transition-delay: 180ms; }
.reveal[data-d="4"]{ transition-delay: 240ms; }

/* ============================================================
   NAV — extends styles.css .nav (dropdown + mobile sheet)
   ============================================================ */
.nav__links a.has-caret { cursor: pointer; }
.nav__drop { position: relative; }
.nav__pop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--white); border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--r-panel); box-shadow: var(--sh-card);
  padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
  min-width: 320px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease-standard), transform .18s var(--ease-out), visibility .18s;
  z-index: 60;
}
/* Bridge the 8px dead seam between the "Pages" trigger and the panel. Without
   it the pointer crosses .nav__inner on the way down, which fires mouseleave on
   .nav__drop and snaps the panel shut before it can be reached. Inherits the
   panel's pointer-events, so it is inert while closed and never eats nav clicks. */
.nav__pop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* Hover and focus own the visible state in CSS so the panel cannot be closed by
   a stray pointer event mid-reach; .is-open is the click/JS-driven equivalent. */
.nav__drop:hover .nav__pop,
.nav__drop.is-open .nav__pop,
.nav__pop:focus-within { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__pop a {
  display: block; padding: 9px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
  color: var(--primary); opacity: .82; transition: background .15s, opacity .15s;
}
.nav__pop a:hover { opacity: 1; background: var(--surface-2); }
.nav__pop a:focus-visible { opacity: 1; background: var(--surface-2); outline: 2px solid var(--primary); outline-offset: 2px; }
/* Caret carries the expanded state (the only non-colour cue that it is open). */
.nav__links a.has-caret .caret { transition: transform .18s var(--ease-standard), opacity .18s var(--ease-standard); }
.nav__drop:hover .caret,
.nav__drop.is-open .caret { transform: rotate(180deg); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Collapse to a quick crossfade — no rise, no caret spin. */
  .nav__pop { transform: translateX(-50%); transition: opacity .12s linear, visibility .12s; }
  .nav__drop:hover .nav__pop,
  .nav__drop.is-open .nav__pop,
  .nav__pop:focus-within { transform: translateX(-50%); }
  .nav__links a.has-caret .caret { transition: opacity .12s linear; }
  .nav__drop:hover .caret,
  .nav__drop.is-open .caret { transform: none; }
}

.nav__burger {
  display: none; flex: none; width: 42px; height: 42px; border-radius: 11px;
  background: var(--white); border: 1px solid rgba(0,0,0,.12); cursor: pointer;
  align-items: center; justify-content: center; margin-left: auto;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--primary); border-radius: 2px; position: relative;
}
.nav__burger span::before { position: absolute; top: -6px; }
.nav__burger span::after  { position: absolute; top: 6px; }

.nav__sheet {
  position: fixed; inset: 0; z-index: 90; background: var(--white);
  padding: 88px 24px 32px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform .34s var(--ease-out); visibility: hidden;
}
.nav__sheet.is-open { transform: none; visibility: visible; }
.nav__sheet a.m-link { font-size: 19px; font-weight: 600; color: var(--primary); padding: 13px 4px; border-bottom: 1px solid var(--line); }
.nav__sheet .m-cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.nav__sheet .m-cta .btn { width: 100%; }
.nav__sheet-close {
  position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; font-size: 20px; color: var(--primary);
}

/* ============================================================
   HERO-HEART overrides (v4 banner pattern; no gradient text per §2.1)
   ============================================================ */
.hh__copy { max-width: 860px; }
.hh__title {
  font-family: "Telegraf", var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 20px;
  text-wrap: balance;
}
.hh__title em { font-style: normal; color: var(--primary); background: none; -webkit-text-fill-color: currentColor; }
.hh__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--text);
  max-width: 60ch; margin: 0 auto;
}
.hh__hint { color: var(--muted); }
.hh__hint kbd { color: var(--text); }

/* config-driven tile radius/ring hooks (heart-config.js) */
.hh__stage .hh__tile,
.hh__stage .hh__tile--feat,
.hh__stage .hh__tile--feat .hh__tileInner,
.hh__stage .hh__tile--feat img { border-radius: var(--tile-radius, 50%); }
.hh__stage.no-ring .hh__tile { border: 0; box-shadow: none; }
.hh__stage.no-ring .hh__tile--feat { box-shadow: none; }

/* Layout A flow plays the trimmed studio deck BELOW the persistent heading, so
   the hero needs room for copy + the full deck/dashboard without clipping the
   bottom. (Heart.css's base .hh is shorter — override here, page-layer only.) */
.hh { min-height: clamp(1080px, 102vh, 1220px); }

/* results overlay offset below the persistent copy (--ru-top measured by JS) */
.hh .ru {
  top: var(--ru-top, 280px);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
@media (max-width: 720px) { .hh .ru { border-radius: 0; } }

/* ============================================================
   LOGO WALL (design.md §4.18) — static monochrome row
   ============================================================ */
.logos { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos__cap {
  text-align: center; font-size: 14.5px; font-weight: 600; color: var(--text);
  margin: 0 0 28px; letter-spacing: .005em;
}
.logos__cap strong { color: var(--primary); font-weight: 700; }
.logos__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px 48px;
}
.logos__row img {
  height: 26px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter var(--dur-base), opacity var(--dur-base);
}
.logos__row img:hover { filter: grayscale(0); opacity: 1; }

/* ============================================================
   HOW IT WORKS — 3-step grid (design.md §7.1 #4)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.step { display: flex; flex-direction: column; gap: 14px; }
.step__num {
  width: 52px; height: 52px; border-radius: var(--r-pill); flex: none;
  background: #0b0b0b; padding: 2.5px; display: inline-flex;
}
.step__num span {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--white); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--primary);
}
.step__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.25; color: var(--primary); margin: 4px 0 0; }
.step__body { font-size: 15.5px; line-height: 1.6; color: var(--text); margin: 0; }
.steps-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 48px); }

/* ============================================================
   PRODUCT TOUR — quiet app-frame still (design.md §7.1 #5, §4.17)
   ============================================================ */
.tour__head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tour .app-frame { max-width: 1040px; margin: 0 auto; }

/* Live Influeri Studio review deck in the platform section — mounted INLINE by
   home-flagship.js via createStudioDeck (see the JS for why the old <iframe> was
   dropped). The deck (.sd-root) is fully self-contained and sizes itself; this
   host just gives it the page width + side gutters and never clips its shadows. */
.tour-deck {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: clamp(8px, 2vw, 16px);
  overflow: visible;
}

/* ============================================================
   FEATURES grid (design.md §7.1 #6)
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(172px, auto);
  grid-auto-flow: dense;
  gap: 16px;
}
.feature {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  /* explicit props only (never `all`) — lift + depth + border tint */
  transition: transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
}
/* content sits above the spotlight layer */
.feature > * { position: relative; z-index: 1; }
/* cursor-following spotlight — position fed by JS via --mx/--my (cheap: opacity only) */
.feature::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(11, 11, 11, .10), transparent 60%);
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
/* pink→gold hairline ring that draws in on hover (masked gradient border) */
.feature::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px; background: #0b0b0b;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 260ms var(--ease-out);
}

/* ---- bento spans ---- */
.feature--hero { grid-column: span 2; grid-row: span 2; }
.feature--wide { grid-column: span 2; }
.feature--full { grid-column: 1 / -1; }
/* three equal tiles on one row, across the full grid width */
.features__trio {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(172px, auto);
  gap: 16px;
}

.feature__icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glow-pink); color: #0b0b0b;
  transition: transform 260ms var(--ease-out),
              background 260ms var(--ease-out), color 260ms var(--ease-out);
}
.feature__icon svg { width: 22px; height: 22px; transition: transform 260ms var(--ease-out); }

/* ---- Micro-interactions — fine-pointer (hover-capable) devices only ----
   Touch devices skip the hover lift so a tap doesn't strand a card raised. */
@media (hover: hover) and (pointer: fine) {
  .feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(11, 11, 11, .09);
    border-color: transparent;
  }
  .feature:hover::before { opacity: 1; }
  .feature:hover::after  { opacity: 1; }
  /* icon lifts & tilts on card hover */
  .feature:hover .feature__icon {
    transform: translateY(-2px) scale(1.06);
  }
  .feature:hover .feature__icon svg { transform: rotate(-6deg); }
  /* press feedback — settle the card back down a touch */
  .feature:active { transform: translateY(-2px) scale(.995); }
}

/* reduced motion: keep the color feedback, drop every transform + spotlight */
@media (prefers-reduced-motion: reduce) {
  .feature, .feature__icon, .feature__icon svg { transition: background 200ms ease, color 200ms ease; }
  .feature:hover, .feature:active { transform: none; }
  .feature:hover::before { opacity: 0; }
  .feature:hover .feature__icon { transform: none; }
  .feature:hover .feature__icon svg { transform: none; }
}
.feature__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--primary); margin: 2px 0 0; }
.feature__body { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; max-width: 48ch; }

/* ---- hero tile (the anchor): larger type, brand aura, headline stat ---- */
.feature--hero {
  padding: 30px; gap: 14px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(130, 130, 130, .12), transparent 42%),
    radial-gradient(120% 120% at 0% 100%, rgba(11, 11, 11, .10), transparent 46%),
    var(--white);
}
.feature--hero .feature__icon { width: 52px; height: 52px; border-radius: 14px; }
.feature--hero .feature__icon svg { width: 26px; height: 26px; }
.feature--hero .feature__title { font-size: clamp(20px, 2.2vw, 24px); }
.feature--hero .feature__body { font-size: 15px; max-width: 34ch; }
.feature__proof { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.feature__faces { display: flex; align-items: center; }
.feature__faces img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2.5px solid var(--white); margin-left: -12px; background: var(--surface-2);
  box-shadow: 0 2px 10px rgba(11, 11, 11, .10);
  transition: margin-left 260ms var(--ease-out);
}
.feature__faces img:first-child { margin-left: 0; }
.feature__faces-more {
  width: 42px; height: 42px; border-radius: 50%; margin-left: -12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff;
  background: #0b0b0b; border: 2.5px solid var(--white);
}
.feature__stat { display: flex; align-items: baseline; gap: 12px; }
.feature__stat b {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(32px, 4.6vw, 46px); line-height: 1;
  background: #0b0b0b; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feature__stat span { font-size: 13px; color: var(--muted); max-width: 16ch; line-height: 1.35; }
/* avatars fan out slightly on hero hover */
@media (hover: hover) and (pointer: fine) {
  .feature--hero:hover .feature__faces img { margin-left: -7px; }
  .feature--hero:hover .feature__faces img:first-child { margin-left: 0; }
}

/* ============================================================
   CUSTOMER CASES (design.md §4.13, §7.1 #7)
   ============================================================ */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.case { display: block; group: case; }
.case__media { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); }
.case__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.case:hover .case__media img { transform: scale(1.04); }
.case__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--primary); margin: 18px 0 8px; }
.case__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--primary); }
.case__link .arrow { transition: transform var(--dur-base) var(--ease-out); }
.case:hover .case__link .arrow { transform: translateX(4px); }

/* ============================================================
   TESTIMONIALS carousel (design.md §4.12)
   ============================================================ */
.quotes { position: relative; --quote-w: 820px; }
/* The edge fade softens the hard cut a slide makes as it crosses the viewport
   edge mid-transition — but it must never be wider than the gutter beside the
   resting card, or the ramp eats that card's own border and corners. The
   original 5% ramp did exactly that: harmless at 1440 (a 46px ramp against a
   50px gutter) and destructive below ~960px, where the card fills the viewport
   and the ramp erased its left and right edge outright. So tie the ramp to the
   real gutter — (viewport - card) / 2, floored at 0 — and it only ever touches
   margin the card does not occupy.
   The vertical padding gives the card's 0 14px 40px shadow room to render
   inside the clip box (it was sliced 4px under the card before), and the
   matching negative margins take that room straight back out of the flow: the
   -10px collapses through .quotes, the -54px against .quotes__nav's 28px. Net
   effect on layout is zero — the card sits where it always did and the nav is
   still 32px below it. Don't give .quotes a BFC (overflow, flow-root) without
   re-checking that. */
.quotes__viewport {
  --quotes-fade: max(0px, (100% - var(--quote-w)) / 2);
  overflow: hidden;
  padding: 10px 0 54px;
  margin: -10px 0 -54px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--quotes-fade), #000 calc(100% - var(--quotes-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--quotes-fade), #000 calc(100% - var(--quotes-fade)), transparent 100%);
}
.quotes__track { display: flex; transition: transform .5s var(--ease-out); }
.quote {
  /* flex so the card stretches to the track height: the track is as tall as the
     longest quote, so a top-aligned card left ~34px of dead space under the
     shorter ones — and the card's bottom edge jumped by that much between
     slides. Side padding keeps the card off the clip edge on mobile. */
  flex: 0 0 100%; min-width: 0; padding: 4px 12px;
  display: flex;
}
.quote__card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-frame);
  padding: clamp(28px, 4vw, 44px); box-shadow: 0 14px 40px rgba(0,0,0,.05);
  width: 100%; max-width: var(--quote-w); margin: 0 auto;
  /* centred so the spare height on a short quote reads as breathing room,
     rather than a hole above the attribution row */
  display: flex; flex-direction: column; justify-content: center;
}
.quote__text { font-family: var(--font-body); font-weight: 500; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5; color: var(--primary); margin: 0 0 28px; text-wrap: pretty; }
.quote__who { display: flex; align-items: center; gap: 14px; }
.quote__av { width: 50px; height: 50px; border-radius: 50%; flex: none; padding: 2.5px; background: #0b0b0b; display: inline-flex; }
.quote__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--white); display: block; }
.quote__name { font-weight: 700; font-size: 16px; color: var(--primary); margin: 0; }
.quote__role { font-size: 14px; color: var(--text); margin: 2px 0 0; }
.quotes__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.quotes__btn {
  width: 46px; height: 46px; border-radius: 50%; background: var(--white);
  border: 1px solid rgba(0,0,0,.16); cursor: pointer; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.quotes__btn:hover { border-color: var(--primary); }
.quotes__dots { display: inline-flex; gap: 9px; }
.quotes__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,11,11,.18); border: 0; padding: 0; cursor: pointer; transition: width .25s var(--ease-out), background .25s; }
.quotes__dot.is-active { width: 26px; border-radius: 999px; background: var(--primary); }

/* ============================================================
   TRENDING STRIP — reuses trending-creators.css (.tcm-rail / .tcm-track)
   ============================================================ */
/* set the track card sizing vars locally (they live on .tcm, which we don't use) */
.trending { overflow: hidden; --card-w: 300px; --gap: 22px; }
/* padding must match trending-creators.css's own .tcm-rail default (34px/42px):
   this rail's overflow:hidden is real (both axes), and the .creator card's hover
   shadow (--shadow-hover, 0 14px 26px -12px) needs that full vertical clearance
   to clear the clip edge — a tighter 22/28 here sliced the shadow into a hard
   flat line on hover (confirmed via CDP A/B capture). Don't shrink this again
   without re-verifying against the shadow tokens above. */
.trending .tcm-rail { padding: 34px 0 42px; margin: 4px 0; }
.trending__rows { display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   FINAL CTA band (design.md §7.1 #9)
   ============================================================ */
.final { text-align: center; }
.final__inner {
  max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: clamp(24px, 3vw, 36px) 40px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px;
  position: relative; overflow: hidden;
}
.final__inner::before {
  content: ""; position: absolute; left: 50%; top: -40%; width: 440px; height: 440px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(11,11,11,.05), transparent 72%);
  pointer-events: none;
}
.final__sub { position: relative; font-size: 14.5px; color: var(--text); max-width: 560px; margin: 4px auto 0; line-height: 1.5; }
.final__tag { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--primary); max-width: 480px; margin: 22px auto 0; line-height: 1.5; }

/* Contextual CTAs — slim bands after Results / Live Demo / ROI Calculator /
   Enterprise Infrastructure, so visitors can convert at different stages
   of the buying journey rather than only at the hero and footer. */
.ctx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ctx-cta__text { margin: 0; font-size: 15px; font-weight: 600; color: var(--primary); }
.ctx-cta__btn { flex: none; }

/* ROI calculator */
.roi-calc {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(11, 11, 11, 0.06);
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.roi-calc__inputs { display: flex; flex-direction: column; gap: 22px; text-align: left; }
.roi-calc__field { display: flex; flex-direction: column; gap: 8px; }
.roi-calc__label { font-size: 13px; font-weight: 700; color: var(--primary); }
.roi-calc__field input[type="range"] { width: 100%; accent-color: #0b0b0b; }
.roi-calc__field output { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.roi-calc__outputs {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 32px 0 18px;
  padding-top: 28px;
  border-top: 1px solid rgba(11, 11, 11, 0.08);
  flex-wrap: wrap;
}
.roi-calc__stat { display: flex; flex-direction: column; gap: 6px; }
.roi-calc__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 40px);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.roi-calc__outputs .roi-calc__label { font-weight: 600; color: var(--text); text-transform: none; }
.roi-calc__note { font-size: 12.5px; color: #9a9a9a; line-height: 1.5; margin: 0 0 22px; }
.roi-calc__cta { display: inline-flex; }
.final__mark { position: relative; }
.final__title { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--primary); margin: 0; text-wrap: balance; }
.final__cta { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }

/* ============================================================
   FOOTER (design.md §4.6)
   ============================================================ */
.footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) var(--gutter) 28px; --surface-2: #0b0b0b; --text: #ffffff; --primary: #ed3d7f; }
.footer__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand .brand { margin-bottom: 16px; color: var(--text); }
.footer__mission { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; max-width: 32ch; }
.footer__col h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col.footer__col--pages ul { grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.footer__col a, .footer__col address a { font-size: 14.5px; color: var(--text); transition: color .15s; font-style: normal; }
.footer__col a:hover { color: var(--primary); }
.footer__social { display: inline-flex; gap: 12px; }
.footer__social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: var(--white); transition: transform .15s; }
.footer__social a:hover { transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bar { max-width: var(--max); margin: clamp(40px,5vw,56px) auto 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13.5px; color: var(--text); }
.footer__bar a { color: var(--text); }
.footer__bar a:hover { color: var(--primary); }
.footer__bar .dot { color: var(--muted-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav__burger { display: inline-flex; }
  .nav__actions { display: none; }
  /* The self-serve "try it free" path (ai.influeri.com) stays reachable only
     on desktop; mobile keeps just the assisted "Book an intro" / "Talk to us"
     CTA. Targeted by href, not .btn--dark, so it can't catch an unrelated
     dark button — and only within the nav sheet and .ctx-cta blocks, where a
     ghost sibling CTA is always left standing (never a plan card's only
     button, and never an inline sentence link). */
  .m-cta a[href*="ai.influeri.com"],
  .ctx-cta__btn[href*="ai.influeri.com"] { display: none; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  /* bento → 2 columns: hero + wide + full go edge-to-edge, small tiles pair up */
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature--hero { grid-column: 1 / -1; grid-row: auto; }
  .feature--wide { grid-column: 1 / -1; }
  /* trio pairs up, last tile goes edge-to-edge */
  .features__trio { grid-template-columns: repeat(2, 1fr); }
  .features__trio > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .sec-head { flex-direction: column; align-items: flex-start; }
  .cases { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__col.footer__col--pages ul { grid-template-columns: 1fr 1fr; }
  /* bento → single column */
  .features { grid-template-columns: 1fr; }
  .feature, .feature--hero, .feature--wide, .feature--full { grid-column: 1 / -1; }
  .features__trio { grid-template-columns: 1fr; }
  .feature { border-radius: 16px; padding: 20px; }
  .feature--hero { padding: 22px; }
}

/* ============================================================
   REDUCED MOTION (design.md §5.5, §9)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .quotes__track { transition: none; }
  /* No slide motion to soften, so drop the ramp entirely. */
  .quotes__viewport { -webkit-mask-image: none; mask-image: none; }
  .case__media img, .link-arrow .arrow, .case__link .arrow { transition: none; }
}