/* AlphaVenture landing page. Fixed Figma colours, scoped under .landing; deliberately not theme-aware. */

html, body { margin: 0; padding: 0; }

.lp-hero, .lp-section, .lp-cta-section { scroll-margin-top: var(--lp-nav-h-scrolled); }

.landing {
  --lp-black: #0A0A0A;
  --lp-tile-dark: #1A1A1A;
  --lp-orange: #F06731;
  --lp-orange-deep: #B8421B;
  --lp-bg-light: #F2F2F2;
  --lp-panel: #FFFFFF;
  --lp-border: #E0E0E0;
  --scroll-thumb: var(--lp-border);
  --lp-muted: #888888;
  --lp-gauge-bg: #E6E6E6;
  --lp-hottakes-bg: #D2D1CC;
  --lp-nav-pill-bg: rgba(255, 255, 255, 0.06);
  --lp-nav-pill-border: rgba(255, 255, 255, 0.08);
  --lp-tag-bg: rgba(0, 0, 0, 0.08);
  --lp-nav-h: 104px;
  --lp-nav-h-scrolled: 88px;

  --nav-pad-block: 24px;
  --nav-pad-block-scrolled: 16px;
  --nav-pad-inline: 60px;
  --nav-logo-h: 44px;
  --nav-cta-pad-block: 16px;
  --nav-cta-pad-inline: 32px;
  --nav-cta-font: 15px;
  --nav-pill-gap: 8px;
  --nav-pill-pad: 6px;
  --nav-link-font: 15px;
  --nav-link-pad-block: 10px;
  --nav-link-pad-inline: 20px;

  /* Shared container widths */
  --max-width-tablet-portrait: 100%;
  --max-width-tablet: 992px;
  --max-width-laptop: 1140px;
  --max-width-desktop: 1240px;
  --max-width-wide: 1340px;

  /* Base spacing unit — every padding/gap below is expressed as a multiple of this */
  --spacing-padding-inline: 0.25rem;

  --section-pad-inline: 80px;
  --section-pad-block: 60px;
  --section-pad-block-half: 30px;
  --cta-pad-block: 60px;

  /* Responsive type scale (1920px design target; scaled down per breakpoint below) */
  --alpha-heading-h0: clamp(84px, calc(60px + 1.25vw), 96px);
  --alpha-heading-h1: clamp(58px, calc(40px + 1vw), 64px);
  --alpha-heading-h2: clamp(44px, calc(32px + 0.75vw), 48px);
  --alpha-heading-h3: 38px;
  --alpha-heading-h4: 30px;
  --alpha-heading-h5: 24px;
  --alpha-body-large: 30px;
  --alpha-body-medium: 24px;
  --alpha-body-small: 20px;
  --alpha-body-xs: 16px;
  --alpha-body-xxs: 12px;
  --alpha-button-large: 30px;
  --alpha-button-medium: 24px;
  --alpha-button-small: 20px;

  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;

  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--lp-black);
  background: var(--lp-bg-light);
}
.landing * { box-sizing: border-box; }
.landing a { text-decoration: none; color: inherit; }
.landing img { display: block; max-width: 100%; }

@media (max-width: 1919px) {
  .landing {
    --alpha-heading-h0: clamp(84px, calc(60px + 1.25vw), 96px);
    --alpha-heading-h1: clamp(58px, calc(40px + 1vw), 64px);
    --alpha-heading-h2: clamp(44px, calc(32px + 0.75vw), 48px);
    --alpha-heading-h3: 38px;
    --alpha-heading-h4: 30px;
    --alpha-heading-h5: 24px;
    --alpha-body-large: 30px;
    --alpha-body-medium: 24px;
    --alpha-body-small: 20px;
    --alpha-body-xs: 16px;
    --alpha-body-xxs: 12px;
    --alpha-button-large: 30px;
    --alpha-button-medium: 24px;
    --alpha-button-small: 20px;
  }
}

@media (max-width: 1799px) {
  .landing {
    --alpha-heading-h0: clamp(72px, calc(48px + 1.5vw), 84px);
    --alpha-heading-h1: clamp(52px, calc(32px + 1.5vw), 58px);
    --alpha-heading-h2: clamp(40px, calc(28px + 0.75vw), 44px);
    --alpha-heading-h3: 36px;
    --alpha-heading-h4: 28px;
    --alpha-heading-h5: 22px;
    --alpha-body-large: 28px;
    --alpha-body-medium: 22px;
    --alpha-body-small: 18px;
    --alpha-body-xs: 15px;
    --alpha-body-xxs: 12px;
    --alpha-button-large: 28px;
    --alpha-button-medium: 22px;
    --alpha-button-small: 18px;

    /* Reference gives this band MORE side padding than the base. Intentional. */
    --nav-pad-block: 26px;
    --nav-pad-inline: 80px;
    --nav-logo-h: 34px;
    --lp-nav-h: 108px;

    --section-pad-inline: 120px;
    --section-pad-block: 160px;
    --section-pad-block-half: 80px;
  }
}

@media (max-width: 1399px) {
  .landing {
    --alpha-heading-h0: clamp(60px, calc(36px + 2vw), 72px);
    --alpha-heading-h1: clamp(44px, calc(24px + 2vw), 52px);
    --alpha-heading-h2: clamp(36px, calc(24px + 1vw), 40px);
    --alpha-heading-h3: 32px;
    --alpha-heading-h4: 26px;
    --alpha-heading-h5: 20px;
    --alpha-body-large: 24px;
    --alpha-body-medium: 20px;
    --alpha-body-small: 18px;
    --alpha-body-xs: 15px;
    --alpha-body-xxs: 10px;
    --alpha-button-large: 24px;
    --alpha-button-medium: 20px;
    --alpha-button-small: 18px;

    /* Back to the base padding below the 1400-1799 band. */
    --nav-pad-block: 24px;
    --nav-pad-inline: 60px;
    --nav-logo-h: 44px;
    --lp-nav-h: 104px;

    --section-pad-inline: 80px;
    --section-pad-block: 60px;
    --section-pad-block-half: 30px;
  }
}

@media (max-width: 1024px) {
  .landing {
    --alpha-heading-h0: clamp(48px, calc(24px + 3vw), 60px);
    --alpha-heading-h1: clamp(36px, calc(20px + 2vw), 44px);
    --alpha-heading-h2: clamp(32px, calc(20px + 1.5vw), 36px);
    --alpha-heading-h3: 28px;
    --alpha-heading-h4: 24px;
    --alpha-heading-h5: 20px;
    --alpha-body-large: 22px;
    --alpha-body-medium: 18px;
    --alpha-body-small: 18px;
    --alpha-body-xs: 14px;
    --alpha-body-xxs: 9px;
    --alpha-button-large: 22px;
    --alpha-button-medium: 18px;
    --alpha-button-small: 16px;

    --section-pad-inline: 48px;
    --section-pad-block: 100px;
    --section-pad-block-half: 50px;

    --nav-pad-block: 20px;
    --nav-pad-inline: 40px;
    --nav-logo-h: 46px;
    --nav-cta-pad-block: 14px;
    --nav-cta-pad-inline: 28px;
    --nav-cta-font: 14px;
    --lp-nav-h: 96px;
  }
}

@media (max-width: 767px) {
  .landing {
    --alpha-heading-h0: clamp(40px, calc(28px + 2.5vw), 48px);
    --alpha-heading-h1: clamp(32px, calc(24px + 1.5vw), 36px);
    --alpha-heading-h2: clamp(28px, calc(20px + 1.5vw), 32px);
    --alpha-heading-h3: 24px;
    --alpha-heading-h4: 22px;
    --alpha-heading-h5: 18px;
    --alpha-body-large: 20px;
    --alpha-body-medium: 18px;
    --alpha-body-small: 16px;
    --alpha-body-xs: 14px;
    --alpha-body-xxs: 8px;
    --alpha-button-large: 20px;
    --alpha-button-medium: 18px;
    --alpha-button-small: 16px;

    --section-pad-inline: 28px;
    --section-pad-block: 80px;
    --section-pad-block-half: 40px;

    --nav-pad-block: 16px;
    --nav-pad-block-scrolled: 12px;
    --nav-pad-inline: 20px;
    --nav-logo-h: 42px;
    --lp-nav-h: 83px;
    --lp-nav-h-scrolled: 75px;
  }
}

@media (max-width: 479px) {
  .landing {
    --alpha-heading-h0: 32px;
    --alpha-heading-h1: 28px;
    --alpha-heading-h2: 24px;
    --alpha-heading-h3: 22px;
    --alpha-heading-h4: 20px;
    --alpha-heading-h5: 16px;
    --alpha-body-large: 18px;
    --alpha-body-medium: 16px;
    --alpha-body-small: 15px;
    --alpha-body-xs: 12px;
    --alpha-body-xxs: 7px;
    --alpha-button-large: 18px;
    --alpha-button-medium: 16px;
    --alpha-button-small: 15px;

    --section-pad-inline: 20px;
    --section-pad-block: 60px;
    --section-pad-block-half: 30px;

    --nav-pad-block: 14px;
    --nav-pad-block-scrolled: 10px;
    --nav-pad-inline: 16px;
    --nav-logo-h: 38px;
    --lp-nav-h: 74px;
    --lp-nav-h-scrolled: 70px;

    --nav-cta-pad-block: 12px;
    --nav-cta-pad-inline: 22px;
  }
}

@media (min-width: 1800px) {
  .landing {
    --nav-pad-block: 28px;
    --nav-pad-inline: 100px;
    --nav-logo-h: 70px;
    --nav-cta-pad-block: 18px;
    --nav-cta-pad-inline: 36px;
    --nav-cta-font: 20px;
    --nav-pill-gap: 10px;
    --nav-pill-pad: 8px;
    --nav-link-font: 24px;
    --nav-link-pad-block: 12px;
    --nav-link-pad-inline: 24px;
    --lp-nav-h: 131px;
    --lp-nav-h-scrolled: 107px;

    --section-pad-inline: 120px;
    --section-pad-block: 200px;
    --section-pad-block-half: 100px;
  }
}

.lp-wrap { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 calc(var(--spacing-padding-inline) * 6); width: 100%; }

/* --- header (fixed, tone-aware) --- */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  min-height: 70px; display: flex; align-items: center;
  padding: var(--nav-pad-block) var(--nav-pad-inline);
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  animation: slideDown 0.8s ease-out;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.lp-nav-inner {
  flex: 1; min-width: 0;
  max-width: var(--max-width-tablet-portrait); /* 100% */
  margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
@media (min-width: 992px)  { .lp-nav-inner { max-width: var(--max-width-tablet); } }  /*  992px */
@media (min-width: 1200px) { .lp-nav-inner { max-width: var(--max-width-laptop); } }  /* 1140px */
@media (min-width: 1400px) { .lp-nav-inner { max-width: var(--max-width-wide); } }    /* 1340px */
.lp-nav-logo { flex: none; height: var(--nav-logo-h); width: auto; transition: filter 0.3s ease; }

/* --- scrolled state (shared across tones) --- */
.lp-nav.is-scrolled {
  padding-block: var(--nav-pad-block-scrolled);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.lp-nav.is-scrolled.lp-nav--dark {
  background: rgba(10, 10, 10, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.lp-nav.is-scrolled.lp-nav--light {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* --- links pill --- */
.lp-nav-links {
  display: flex; align-items: center; gap: var(--nav-pill-gap);
  background: var(--lp-nav-pill-bg); border: 1px solid var(--lp-nav-pill-border);
  border-radius: 50px; padding: var(--nav-pill-pad);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-nav-links a {
  padding: var(--nav-link-pad-block) var(--nav-link-pad-inline); border-radius: 50px;
  font-size: var(--nav-link-font); font-weight: var(--font-weight-medium);
  color: #fff; white-space: nowrap; position: relative;
  transition: all 0.3s ease;
}
.lp-nav-links a:not(.active):hover,
.lp-nav-links a:not(.active):focus-visible { background: rgba(255, 255, 255, 0.1); }
.lp-nav-links a.active { background: #fff; color: var(--lp-black); }
a.lp-nav-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--lp-black); font-weight: var(--font-weight-semibold);
  font-size: var(--nav-cta-font);
  padding: var(--nav-cta-pad-block) var(--nav-cta-pad-inline);
  border-radius: 50px; white-space: nowrap;
  transition: all 0.3s ease;
}
a.lp-nav-cta:hover, a.lp-nav-cta:focus-visible {
  background: var(--lp-orange); color: #fff;
}
.lp-nav-cta-icon { flex: none; width: 0.95em; height: 0.95em; }
a.lp-nav-cta:hover .lp-nav-cta-icon,
a.lp-nav-cta:focus-visible .lp-nav-cta-icon { filter: brightness(0) invert(1); }

/* --- light tone --- */
/* No black logo asset exists (only white and orange), so the white PNG is inverted. */
.lp-nav--light .lp-nav-logo { filter: invert(1); }
.lp-nav--light .lp-nav-links {
  background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.08);
}
.lp-nav--light .lp-nav-links a { color: var(--lp-black); }
.lp-nav--light .lp-nav-links a:not(.active):hover,
.lp-nav--light .lp-nav-links a:not(.active):focus-visible { background: rgba(0, 0, 0, 0.06); }
.lp-nav--light .lp-nav-links a.active { background: var(--lp-black); color: #fff; }
.lp-nav--light a.lp-nav-cta { background: var(--lp-black); color: #fff; }
.lp-nav--light a.lp-nav-cta:hover,
.lp-nav--light a.lp-nav-cta:focus-visible { background: var(--lp-orange); color: #fff; }
.lp-nav--light .lp-nav-cta-icon { filter: brightness(0) invert(1); }

/* --- mobile toggle + overlay --- */
.lp-nav-toggle {
  display: none; flex-direction: column; gap: 7px; padding: 10px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: 101;
}
.lp-nav-toggle span {
  display: block; width: 32px; height: 3px; border-radius: 2px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-nav--light .lp-nav-toggle span { background: var(--lp-black); }
.lp-nav--light .lp-nav-toggle[aria-expanded="true"] span { background: #fff; }
.lp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.lp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

.lp-nav-mobile {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  background: var(--lp-black);
  flex-direction: column; align-items: center;
  padding-top: calc(var(--lp-nav-h) + 40px);
  overflow-y: auto;
}
.lp-nav-mobile.is-open { display: flex; animation: lp-mobile-in 0.3s ease; }
@keyframes lp-mobile-in { from { opacity: 0; } to { opacity: 1; } }
.lp-nav-mobile a {
  color: #fff; font-size: 32px; font-weight: var(--font-weight-semibold);
  padding: 16px; width: 100%; text-align: center;
  transition: color 0.3s ease;
}
.lp-nav-mobile a:hover, .lp-nav-mobile a:focus-visible { color: var(--lp-orange); }
.lp-nav-mobile a.active { color: var(--lp-orange); }
/* Body scroll lock while the overlay is open. */
.landing-menu-open, .landing-menu-open body { overflow: hidden; }

@media (max-width: 850px) {
  .lp-nav-links { display: none; }
  .lp-nav-toggle { display: flex; }
  /* Logo and CTA both stay visible, so the row is logo | CTA | toggle. */
  .lp-nav-inner { gap: 16px; justify-content: space-between; }
  a.lp-nav-cta { margin-left: auto; }
}
@media (max-width: 479px) {
  .lp-nav-toggle { gap: 6px; padding: 8px; }
  .lp-nav-toggle span { width: 28px; }
  /* Travel shrinks with the gap: 3 + 6 = 9px. */
  .lp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .lp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .lp-nav-mobile a { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-nav { animation: none; }
  .lp-nav-mobile.is-open { animation: none; }
  .lp-nav-toggle span { transition: none; }
}

/* --- hero (full viewport height; big grid + centered oval radial gradient) --- */
.lp-hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  padding: calc(calc(var(--spacing-padding-inline) * 15) + 70px)
           calc(var(--spacing-padding-inline) * 6)
           calc(var(--spacing-padding-inline) * 15);
  background-color: var(--lp-black);
}
@media (max-width: 1024px) {
  .lp-hero { padding: calc(calc(var(--spacing-padding-inline) * 15) + 70px)
     80px
      calc(var(--spacing-padding-inline) * 15); }
}
@media (max-width: 767px) {
  .lp-hero { padding: calc(calc(var(--spacing-padding-inline) * 15) + 70px)
     calc(var(--spacing-padding-inline) * 6)
      calc(var(--spacing-padding-inline) * 15); }
}

.lp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--lp-black);
  background-image:
    radial-gradient(ellipse 80% 72% at 50% 46%, #0A0A0A 27%, rgba(10, 10, 10, 0.55) 46%, transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='white' fill-opacity='0.04'><rect x='0' y='49.5' width='44' height='1'/><rect x='56' y='49.5' width='44' height='1'/><rect x='49.5' y='0' width='1' height='44'/><rect x='49.5' y='56' width='1' height='44'/></g><rect x='47.5' y='48' width='5' height='4' fill='rgb(240,103,49)' fill-opacity='0.4'/></svg>");
  background-size: auto, 100px 100px;
  background-position: center, center;
  animation: lp-hero-breathe 6s ease-in-out infinite;
}
.lp-hero > * { position: relative; z-index: 1; }
@keyframes lp-hero-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero::before { animation: none; }
}
.lp-hero h1 {
  font-size: var(--alpha-heading-h0); font-weight: var(--font-weight-medium); line-height: 1.12;
  margin: 0 auto calc(var(--spacing-padding-inline) * 10); letter-spacing: -0.01em;
  max-width: 1200px;
}
@media (max-width: 1399px) {
  .lp-hero h1 { max-width:900px; }
}
/* @media (max-width: 1024px) {
  .lp-hero h1 { max-width:700px; }
} */
.lp-hero h1 .accent { color: var(--lp-orange); }
.lp-hero p {
  font-size: var(--alpha-body-large); color: rgba(255, 255, 255, 0.85); max-width: 1000px;
  margin: 0 auto calc(var(--spacing-padding-inline) * 20); line-height: 1.45;
}
@media (max-width: 1399px) {
  .lp-hero p { max-width: 900px; }
}
@media (max-width: 1024px) {
  .lp-hero p { max-width: 600px; }
}
a.lp-pill-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 3); background: #fff;
  color: #000; font-weight: var(--font-weight-bold); font-size: var(--alpha-button-small);
  padding: calc(var(--spacing-padding-inline) * 5) calc(var(--spacing-padding-inline) * 8.5)
           calc(var(--spacing-padding-inline) * 5) calc(var(--spacing-padding-inline) * 7);
  border-radius: 100px;
}
.lp-pill-icon { flex: none; width: 18px; height: 18px; position: relative; z-index: 2; transition: opacity 0.18s ease; }
.lp-pill-label { position: relative; z-index: 2; transition: color 0.18s ease, transform 0.28s ease; }
.lp-pill-fill {
  position: absolute; left: 37px; top: 50%; width: 36px; height: 36px; border-radius: 50%;
  background: var(--lp-orange); transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform 0.6s ease-in-out; z-index: 1;
}
a.lp-pill-btn:hover .lp-pill-fill, a.lp-pill-btn:focus-visible .lp-pill-fill {
  transform: translate(-50%, -50%) scale(30);
}
a.lp-pill-btn:hover .lp-pill-icon, a.lp-pill-btn:focus-visible .lp-pill-icon {
  opacity: 0;
}
a.lp-pill-btn:hover .lp-pill-label, a.lp-pill-btn:focus-visible .lp-pill-label {
  color: #fff; transform: translateX(-15px);
}
@media (prefers-reduced-motion: reduce) {
  .lp-pill-fill { transition: none; }
  .lp-pill-icon { transition: none; }
  .lp-pill-label { transition: none; }
}

/* --- "Ask YC Analyst" (hero) and "Talk to the Data" (CTA) button: shared sizing --- */
.lp-hero a.lp-pill-btn,
.lp-cta a.lp-pill-btn {
  --btn-pad-block: 24px;
  --btn-pad-inline: 32px;
  --btn-gap: 14px;
  --pill-icon-size: 0.73em;

  justify-content: flex-start;
  gap: 0;
  padding: var(--btn-pad-block) var(--btn-pad-inline);
  font-size: var(--alpha-button-large);
  font-weight: var(--font-weight-bold);
  border-radius: 100px;
  transition: all 0.3s ease;
}
.lp-hero a.lp-pill-btn { background-color: var(--lp-panel); color: rgba(0, 0, 0, 0.80); }
.lp-hero .lp-pill-label { z-index: 10; transition: all 0.5s ease; }
.lp-hero .lp-pill-icon {
  width: var(--pill-icon-size); height: var(--pill-icon-size);
  margin-right: var(--btn-gap);
  transition: width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease;
}
.lp-hero .lp-pill-fill { left: calc(var(--btn-pad-inline) + var(--pill-icon-size) / 2); }
.lp-hero a.lp-pill-btn:hover .lp-pill-icon,
.lp-hero a.lp-pill-btn:focus-visible .lp-pill-icon {
  width: 0; margin-right: 0; opacity: 0;
}
.lp-hero a.lp-pill-btn:hover .lp-pill-label,
.lp-hero a.lp-pill-btn:focus-visible .lp-pill-label {
  transform: none;
}
@media (max-width: 1399px) {
  .lp-hero a.lp-pill-btn,
  .lp-cta a.lp-pill-btn { --btn-pad-block: 20px; --btn-pad-inline: 40px; }
}
@media (max-width: 767px) {
  .lp-hero a.lp-pill-btn,
  .lp-cta a.lp-pill-btn { --btn-pad-block: 12px; --btn-pad-inline: 16px; }
  .lp-hero a.lp-pill-btn { --btn-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero .lp-pill-icon { transition: none; }
}

.lp-ask {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 785px;
  height: 75px;
  margin: 0 auto;
  padding: 0 8px 0 24px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 100px;
}
.lp-ask-icon {
  flex: none;
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.lp-ask-icon svg { width: 100%; height: 100%; display: block; }
.lp-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--alpha-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--lp-black);
}
.lp-ask-input::placeholder { color: #292929; opacity: 1; }
.lp-ask-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 59px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: #0a0a0a;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lp-ask-send:hover, .lp-ask-send:focus-visible { background: var(--lp-orange); }
.lp-ask-send svg { width: 20.5px; height: 20.5px; display: block; }
@media (max-width: 767px) {
  .lp-ask { height: 62px; gap: 12px; padding: 0 6px 0 18px; }
  .lp-ask-input { font-size: 18px; }
  .lp-ask-send { width: 48px; height: 48px; }
  .lp-ask-send svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ask-send { transition: none; }
}

/* --- generic light section --- */
.lp-section {
  padding: var(--section-pad-block) var(--section-pad-inline);
}
#company-profile { padding-bottom: var(--section-pad-block-half); }
#stories { padding-top: var(--section-pad-block-half); }
#stories { padding-bottom: 200px; }
#company-profile > .lp-wrap,
#stories > .lp-wrap { padding-inline: 0; }
.lp-section-head {
  margin-bottom: calc(var(--spacing-padding-inline) * 15);
}
.lp-section-head > div { width: 100%; }
.lp-head-group { padding: 40px 0 40px; }
.lp-section-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: calc(var(--spacing-padding-inline) * 5); margin-bottom: calc(var(--spacing-padding-inline) * 5); flex-wrap: wrap;
}
.lp-section-head-row h2, .lp-section-head h2 { font-size: var(--alpha-heading-h1); font-weight: var(--font-weight-medium); margin: 0;     margin-bottom: calc(var(--spacing-padding-inline) * 5); letter-spacing: -0.01em; }
@media (max-width: 1024px) { .lp-section-head-row h2, .lp-section-head h2 { margin-bottom: 12px; } }
@media (max-width: 767px) { .lp-section-head-row h2, .lp-section-head h2 { margin-bottom: 8px; } }

.lp-section-head p { font-size: var(--alpha-body-medium); color: var(--bg-color); margin: 0; }
a.lp-view-more {
  flex: none; background: var(--lp-black); color: #fff;
  font-size: var(--nav-cta-font); font-weight: var(--font-weight-semibold);
  padding: var(--nav-cta-pad-block) var(--nav-cta-pad-inline); border-radius: 50px;
  transition: background-color 0.18s ease, color 0.18s ease;
  margin-top: 12px;
}
/* Same hover as the nav CTA: fills orange, text stays white. */
a.lp-view-more:hover, a.lp-view-more:focus-visible {
  background: var(--lp-orange); color: #fff;
}
@media (max-width: 767px) {
  .lp-section-head > div { display: flex; flex-direction: column; }
  .lp-section-head-row { display: contents; }
  .lp-section-head-row h2 { order: 1; margin-bottom: calc(var(--spacing-padding-inline) * 5); }
  .lp-section-head p { order: 2;
  margin-bottom: 0;
  max-width:600px }
  #stories .lp-section-head { margin-bottom: 40px; }
  a.lp-view-more { order: 3; align-self: flex-start; margin-top: 0; }
}
/* #stories .lp-section-head h2 { margin-bottom: calc(var(--spacing-padding-inline) * 5); } */

/* --- company profile cards --- */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--spacing-padding-inline) * 6); }
.lp-card-wrap { position: relative; }
.lp-card {
  background: var(--lp-panel); border-radius: 36px;
  overflow: hidden; display: flex; flex-direction: column; min-height: 520px; height: 100%;
}
.lp-card-wrap .lp-card-ask {
  position: absolute; top: calc(var(--spacing-padding-inline) * 5); right: calc(var(--spacing-padding-inline) * 5);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: none;
  background: #fff; color: #0A0A0A;
  font-family: inherit; font-size: var(--alpha-body-xs); font-weight: var(--font-weight-medium);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.16);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.15s ease;
}
.lp-card-wrap:hover .lp-card-ask,
.lp-card-wrap:focus-within .lp-card-ask {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.lp-card-wrap .lp-card-ask:hover, .lp-card-wrap .lp-card-ask:focus-visible { color: var(--lp-orange); }
.lp-card-wrap .lp-card-ask .ec-star { width: 14px; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-card-wrap .lp-card-ask { transition: none; }
}

/* TEMPORARY: "Ask Parallax" hidden on the landing card grid. Delete this block to restore. */
#lpCompanyGrid .lp-card-ask { display: none !important; }

/* TEMPORARY: company search bar hidden on the home page. Delete this rule to restore. */
#lpCompanySearch { display: none !important; }

.lp-card-logo {
  height: 244px; flex: none; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--spacing-padding-inline) * 6);
}
.lp-card-logo-circle {
  width: 150px; height: 150px; border-radius: 50%; background: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.lp-card-logo-circle img { max-width: 62%; max-height: 62%; width: auto; height: auto; object-fit: contain; }
.lp-card-logo--flat { background: #fff; }
.lp-card-logo--flat img { max-width: 84%; max-height: 64%; width: auto; height: auto; object-fit: contain; }
.lp-card-logo-circle,
.lp-card-logo--flat img { transition: transform 0.35s ease; }
.lp-card:hover .lp-card-logo-circle,
.lp-card:focus-visible .lp-card-logo-circle,
.lp-card:hover .lp-card-logo--flat img,
.lp-card:focus-visible .lp-card-logo--flat img { transform: scale(1.05); }
.lp-card-body {
  padding: calc(var(--spacing-padding-inline) * 8) calc(var(--spacing-padding-inline) * 10) calc(var(--spacing-padding-inline) * 10);
  display: flex; flex-direction: column; flex: 1;
}
.lp-card-body h3 { font-size: var(--alpha-heading-h4); font-weight: var(--font-weight-medium); margin: 0 0 16px 0; }
.lp-card-body p { font-size: var(--alpha-body-small); color:#0A0A0A; line-height: 1.55; margin: 0 0 32px 0; }
.lp-card-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Description(or h3, if no description)-to-tags gap: 40px. */
.lp-card-body .lp-tags { display: flex; gap: calc(var(--spacing-padding-inline) * 2.5); flex-wrap: wrap; }
.lp-tag {
  background: transparent; border: 1px solid #D0D0D0; color: #666666;
  border-radius: 50px; padding: 8px 16px;
  font-size: var(--alpha-body-small);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.lp-tag:hover { background-color: #F5F5F5; border-color: #999999; }
@media (max-width: 479px) {
  .lp-tag { padding: 6px 14px; font-size: 12px; }
}

@media (max-width: 1024px) {
  .lp-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .lp-card { border-radius: 20px; min-height: 460px; }
  .lp-card-body { padding: 32px; }
}
@media (max-width: 767px) {
  .lp-card { min-height: 420px; }
  .lp-card-body { padding: 28px; }
}
@media (max-width: 600px) {
  .lp-cards { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .lp-card { min-height: 380px; }
  .lp-card-body { padding: 24px; }
}

/* 40px gap to the search bar below (h2-to-p is set on the p itself, just below). */
#company-profile .lp-section-head { margin-bottom: 60px; }
/* #company-profile .lp-section-head p { margin-top: 40px; } */
@media (max-width: 479px) {
  #company-profile .lp-section-head { margin-bottom: 40px; }
}
.cp-search.lp-company-search {
  margin-top: 0;
  margin-bottom: calc(var(--spacing-padding-inline) * 20);
  height: 75px;
  padding: 0 8px 0 24px;
  gap: 16px;
}
@media (max-width: 767px) {
  .cp-search.lp-company-search { margin-bottom: 64px; height: 62px; gap: 12px; padding: 0 6px 0 18px; }
}
.cp-search.lp-company-search .cp-search-input {
  font-size: var(--alpha-body-medium);
}
.cp-search.lp-company-search .cp-search-btn { width: 59px; height: 59px; }
@media (max-width: 767px) {
  .cp-search.lp-company-search .cp-search-input { font-size: 18px; }
  .cp-search.lp-company-search .cp-search-btn { width: 48px; height: 48px; }
}
/* View More sits centred under the grid (was a top-right button in the head row). */
.lp-view-more-row {
  display: flex; justify-content: center;
  margin-top: calc(var(--spacing-padding-inline) * 10);
}
.lp-view-more-row a.lp-view-more {
  margin-top: 0;
}

/* --- company listing page (/companies) --- */
.cp-section,
.st-section {
  min-height: auto; display: block;
  padding: calc(var(--lp-nav-h) + calc(var(--spacing-padding-inline) * 15)) 0 180px;
}
.cp-breadcrumb {
  display: inline-flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 2);
  background: var(--lp-tag-bg); border-radius: 100px;
  padding: calc(var(--spacing-padding-inline) * 2) calc(var(--spacing-padding-inline) * 6);
  font-size: var(--alpha-body-xs); color: var(--lp-black); margin-bottom: calc(var(--spacing-padding-inline) * 0);
}
.cp-breadcrumb a { color: var(--lp-black); }
.cp-breadcrumb a:hover { text-decoration: underline; }
.cp-breadcrumb-sep { color: var(--lp-muted); font-size: var(--alpha-body-xs); line-height: 1; }
.cp-head { margin-bottom: 0; }

/* 40px between the filter sidebar and the results column. */
.cp-layout { display: flex; align-items: flex-start; gap: calc(var(--spacing-padding-inline) * 10); }
.cp-sidebar {
  flex: none; width: 340px;
  /* 36px matches .lp-card, so the sidebar and the cards beside it read as one family. */
  background: var(--lp-panel); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 36px;
  overflow: hidden;
  position: sticky; top: calc(var(--lp-nav-h-scrolled) + calc(var(--spacing-padding-inline) * 7));
  margin-top : 56px;
  max-height: calc(100vh - var(--lp-nav-h-scrolled) - calc(var(--spacing-padding-inline) * 7) * 2);
  display: flex; flex-direction: column;
}
.cp-filter-header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex: none;
  padding: calc(var(--spacing-padding-inline) * 6) calc(var(--spacing-padding-inline) * 6) calc(var(--spacing-padding-inline) * 5);
  margin-bottom: calc(var(--spacing-padding-inline) * 5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cp-filter-title { font-size: var(--alpha-body-small); font-weight: var(--font-weight-medium); color: var(--lp-black); }
/* Needs the .cp-filter-header prefix to out-specify `.landing a { color: inherit }`,
   which would otherwise force this back to black. */
.cp-filter-header .cp-filter-clear {
  font-size: var(--alpha-body-xs); font-weight: var(--font-weight-bold); color: var(--lp-orange); background: none; padding: 0;
}
.cp-filter-header .cp-filter-clear:hover { text-decoration: underline; }
.cp-filter-header .cp-filter-clear[hidden] { display: none; }

.cp-sheet-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 calc(var(--spacing-padding-inline) * 6) calc(var(--spacing-padding-inline) * 6);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.cp-sheet-scroll::-webkit-scrollbar { width: 6px; }
.cp-sheet-scroll::-webkit-scrollbar-track { background: transparent; }
.cp-sheet-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 100px;
}

.cp-filter-section { border: none; }
.cp-filter-section + .cp-filter-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: calc(var(--spacing-padding-inline) * 5); padding-top: calc(var(--spacing-padding-inline) * 5);
}
.cp-filter-summary {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing-padding-inline) * 3);
  cursor: pointer; list-style: none;
}
.cp-filter-summary::-webkit-details-marker { display: none; }
.cp-filter-label { font-size: var(--alpha-body-xs); font-weight: var(--font-weight-bold); }
.cp-filter-toggle {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  background: var(--lp-tag-bg); display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--lp-black); position: relative;
}
.cp-filter-toggle::before { content: '+'; }
details[open] > .cp-filter-summary .cp-filter-toggle::before { content: '\2212'; }

details[open] > .cp-filter-options {
  display: flex; flex-direction: column; gap: calc(var(--spacing-padding-inline) * 1);
  margin-top: calc(var(--spacing-padding-inline) * 3.5);
}
.cp-filter-row {
  display: flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 2);
  padding: calc(var(--spacing-padding-inline) * 1.5) 0; cursor: pointer;
}
.cp-filter-row input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; border-radius: 4px; accent-color: var(--lp-orange);
  cursor: pointer;
}
.cp-filter-row-label { flex: 1; font-size: var(--alpha-body-xs); }
.cp-filter-count {
  flex: none; background: var(--lp-tag-bg); color: #666; font-size: 11px;
  border-radius: 4px; padding: calc(var(--spacing-padding-inline) * 0.5) calc(var(--spacing-padding-inline) * 1.5);
}
.cp-filter-row--all { font-weight: var(--font-weight-medium); }

.cp-filter-subsection { border: none; }
.cp-filter-subsummary {
  display: flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 2);
  padding: calc(var(--spacing-padding-inline) * 1.5) 0; cursor: pointer; list-style: none;
}
.cp-filter-subsummary::-webkit-details-marker { display: none; }
.cp-filter-subsummary input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; border-radius: 4px; accent-color: var(--lp-orange);
  cursor: pointer;
}
/* Caret comes first (before the checkbox); the count is pushed to the far right. */
.cp-filter-subsummary .cp-filter-row-label { flex: 0 1 auto; }
.cp-filter-subsummary .cp-filter-count { margin-left: auto; }
.cp-filter-subtoggle {
  flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--lp-black); font-size: 12px; transform: rotate(0deg); transition: transform 0.15s ease;
}
.cp-filter-subtoggle::before { content: '\203A'; }
.cp-filter-subsection[open] > .cp-filter-subsummary .cp-filter-subtoggle { transform: rotate(90deg); }

details[open] > .cp-filter-children {
  display: flex; flex-direction: column; gap: calc(var(--spacing-padding-inline) * 1);
  margin-left: calc(var(--spacing-padding-inline) * 6.5);
}
.cp-filter-row--child .cp-filter-row-label { color: var(--lp-black); }
.cp-filter-empty { font-size: 13px; color: var(--lp-muted); margin: calc(var(--spacing-padding-inline) * 3.5) 0 0; }

/* --- Company Size: continuous dual-handle slider + editable number inputs --- */
.cp-size { margin-top: calc(var(--spacing-padding-inline) * 1.5); }
.cp-size-inputs { display: flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 2.5); }
.cp-size-inputs label {
  display: flex; flex-direction: column; gap: calc(var(--spacing-padding-inline) * 1);
  font-size: 12px; color: var(--lp-muted); flex: 1;
}
.cp-size-num {
  border: 1px solid var(--lp-border); border-radius: 8px;
  padding: calc(var(--spacing-padding-inline) * 1.75) calc(var(--spacing-padding-inline) * 2);
  font-size: var(--alpha-body-xs); font-family: inherit; width: 100%; color: var(--lp-black);
}
.cp-size-slider { position: relative; height: 28px; margin-top: calc(var(--spacing-padding-inline) * 4); }
.cp-size-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  background: var(--lp-gauge-bg); border-radius: 2px; transform: translateY(-50%);
}
.cp-size-track-fill {
  position: absolute; top: 50%; height: 4px; background: var(--lp-orange);
  border-radius: 2px; transform: translateY(-50%);
}
.cp-size-range {
  position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
  background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; z-index: 2;
}
.cp-size-range:focus, .cp-size-range:active { z-index: 3; }
.cp-size-range::-webkit-slider-runnable-track { background: transparent; -webkit-appearance: none; height: 28px; }
.cp-size-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%; background: var(--lp-orange);
  border: none; cursor: pointer; margin-top: 5px;
}
.cp-size-range::-moz-range-track { background: transparent; height: 28px; }
.cp-size-range::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--lp-orange); border: none; cursor: pointer;
}

.cp-result-count { font-size: var(--alpha-body-xs); color: var(--lp-muted); margin-bottom: calc(var(--spacing-padding-inline) * 5); }

.cp-grid-col { flex: 1; min-width: 0; }
.cp-grid { grid-template-columns: repeat(2, 1fr); gap: calc(var(--spacing-padding-inline) * 4); }

/* Search bar (Figma 574:7119): white pill + black circular submit button. */
.cp-search {
  display: flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 3);
  background: var(--lp-panel); border: 1px solid var(--lp-border); border-radius: 100px;
  padding: calc(var(--spacing-padding-inline) * 2.5) calc(var(--spacing-padding-inline) * 3)
           calc(var(--spacing-padding-inline) * 2.5) calc(var(--spacing-padding-inline) * 8);
  margin-top: 56px;
  margin-bottom: calc(var(--spacing-padding-inline) * 7);
}
.cp-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: var(--alpha-body-small); color: var(--lp-black);
}
.cp-search-input::placeholder { color: #858585; }
.cp-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-left: 8px; cursor: pointer;
  background-color: var(--lp-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 5 L15 15 M15 5 L5 15' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 5 L15 15 M15 5 L5 15' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
.cp-search-btn {
  flex: none; width: 52px; height: 52px; border: none; border-radius: 50%;
  background: var(--lp-black); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.18s ease;
}
/* .cp-search-btn:hover { background: var(--lp-orange); } */

.cp-filter-sheet { display: contents; }
.cp-sheet-backdrop, .cp-sheet-head, .cp-sheet-actions { display: none; }

/* Outlined twin of .cp-search-btn: same 52px circle so the two sit as a pair. */
.cp-filter-btn {
  display: none;
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--lp-border); background: var(--lp-panel);
  color: var(--lp-black); cursor: pointer; position: relative;
  align-items: center; justify-content: center;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.cp-filter-btn:hover { background: var(--lp-bg-light); border-color: #C4C4C4; }
.cp-filter-btn[aria-expanded="true"] { background: var(--lp-black); color: #fff; border-color: var(--lp-black); }
/* Ring in the bar's own background so the dot stays legible against the icon. */
/* .cp-filter-btn-dot {
  position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--lp-orange); box-shadow: 0 0 0 2px var(--lp-panel);
} */
/* .cp-filter-btn-dot[hidden] { display: none; } */

.cp-empty {
  color: var(--lp-muted); font-size: var(--alpha-body-small); padding: calc(var(--spacing-padding-inline) * 12) 0;
  border: 1px dashed var(--lp-border); border-radius: 24px; text-align: center;
  grid-column: 1 / -1;
}

@media (max-width: 1399px) {
  .cp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .cp-layout { flex-direction: column; }
  /* Sidebar is out of the flow now, so the full width is free again. */
  .cp-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-filter-sheet--interactive ~ .cp-grid-col .cp-filter-btn { display: flex; }

  .cp-filter-sheet { display: block; }
  .cp-filter-sheet--interactive {
    position: fixed; inset: 0; z-index: 95;
    visibility: hidden; pointer-events: none;
  }
  .cp-filter-sheet--interactive.is-open { visibility: visible; pointer-events: auto; }

  .cp-filter-sheet--interactive .cp-sheet-backdrop {
    display: block; position: absolute; inset: 0;
    background: rgba(10, 10, 10, 0.45);
    opacity: 0; transition: opacity 0.3s ease;
  }
  .cp-filter-sheet--interactive.is-open .cp-sheet-backdrop { opacity: 1; }

  .cp-sidebar {
    width: 100%; position: static; margin-top: 0;
    display: flex; flex-direction: column;
    border-radius: 36px; padding: 0;
    max-height: none; overflow: visible;
  }
  .cp-filter-sheet--interactive .cp-sidebar {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 85vh;
    border: none; border-radius: 36px 36px 0 0;
    box-shadow: 0 -12px 40px rgba(10, 10, 10, 0.18);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .cp-filter-sheet--interactive.is-open .cp-sidebar { transform: translateY(0); }

  .cp-filter-sheet--interactive .cp-filter-header { display: none; }
  .cp-filter-sheet--interactive .cp-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    flex: none;
    padding: calc(var(--spacing-padding-inline) * 7) calc(var(--spacing-padding-inline) * 6);
    border-bottom: 1px solid var(--lp-border);
  }
  .cp-sheet-title {
    font-size: var(--alpha-heading-h5); font-weight: var(--font-weight-medium);
    color: var(--lp-black);
  }
  .cp-sheet-close {
    flex: none; width: 34px; height: 34px; border: none; border-radius: 50%;
    background: var(--lp-tag-bg); color: var(--lp-black); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.18s ease;
  }
  .cp-sheet-close:hover { background: rgba(0, 0, 0, 0.14); }

  .cp-sheet-scroll {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--spacing-padding-inline) * 5) calc(var(--spacing-padding-inline) * 6);
  }
  /* First section has the head's border above it already. */
  .cp-sheet-scroll > .cp-filter-section:first-of-type { padding-top: 0; }

  .cp-filter-sheet--interactive .cp-sheet-actions {
    display: flex; align-items: center; gap: calc(var(--spacing-padding-inline) * 3);
    flex: none;
    padding: calc(var(--spacing-padding-inline) * 5) calc(var(--spacing-padding-inline) * 6);
    border-top: 1px solid var(--lp-border);
    /* Clears the iOS home indicator / Android gesture bar. */
    padding-bottom: calc(var(--spacing-padding-inline) * 5 + env(safe-area-inset-bottom, 0px));
  }
  .cp-sheet-btn {
    flex: 1; border-radius: 100px; cursor: pointer;
    padding: calc(var(--spacing-padding-inline) * 4) calc(var(--spacing-padding-inline) * 5);
    font-family: inherit; font-size: var(--alpha-body-xs); font-weight: var(--font-weight-medium);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .cp-sheet-btn--ghost {
    border: 1px solid var(--lp-border); background: var(--lp-panel); color: var(--lp-black);
  }
  .cp-sheet-btn--ghost:hover { background: var(--lp-bg-light); border-color: #C4C4C4; }
  .cp-sheet-btn--solid {
    border: 1px solid var(--lp-black); background: var(--lp-black); color: #fff;
  }
  .cp-sheet-btn--solid:hover { background: var(--lp-orange); border-color: var(--lp-orange); }

  /* Scroll lock while the sheet is up, same mechanism as the nav overlay. */
  .cp-filters-open, .cp-filters-open body { overflow: hidden; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .cp-filter-sheet--interactive .cp-sidebar,
  .cp-filter-sheet--interactive .cp-sheet-backdrop { transition: none; }
}
/* Corners tighten with the cards at the narrowest widths. */
@media (max-width: 479px) {
  .cp-filter-sheet--interactive .cp-sidebar { border-radius: 24px 24px 0 0; max-height: 90vh; }
}
@media (max-width: 710px) {
  .cp-grid { grid-template-columns: 1fr; }
}

/* --- stories bento grid --- */
.lp-bento {
  display: grid; grid-template-columns: 2fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: calc(var(--spacing-padding-inline) * 5); align-items: stretch;
  height: clamp(420px, 50vw, 600px);
}
a.lp-bento-tile {
  position: relative; border-radius: 24px; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--spacing-padding-inline) * 7.5);
}
.lp-bento-tag {
  position: absolute; top: calc(var(--spacing-padding-inline) * 5); left: calc(var(--spacing-padding-inline) * 5);
  z-index: 2;
  color: #fff; font-size: var(--alpha-body-xs); font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: calc(var(--spacing-padding-inline) * 2) calc(var(--spacing-padding-inline) * 5); border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
.lp-bento-tile h3 { font-size: var(--alpha-heading-h5); font-weight: var(--font-weight-regular); line-height: 1.3; margin: 0; position: relative; z-index: 2; max-width: none; }
.lp-tile-founders h3 { font-size: var(--alpha-heading-h3); }
a.lp-bento-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 70%);
  border-radius: inherit;
}
.lp-illustration {
  position: absolute; left: 0; right: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp-illustration img { width: auto; height: auto; }

.lp-tile-founders { background: var(--lp-tile-dark); grid-row: span 2; }
/* Illustration centred in the space between the tag and the title. */
.lp-tile-founders .lp-illustration { top: 11%; bottom: 24%; }
.lp-tile-founders .lp-illustration img { max-width: 84%; max-height: 100%; }

.lp-tile-investment { background: var(--lp-orange-deep); }
.lp-tile-investment .lp-illustration { top: 4%; bottom: 12%; }
.lp-tile-investment .lp-illustration img { max-width: 100%; max-height: 100%; }

a.lp-tile-hottakes { background: var(--lp-hottakes-bg); color: #fff; }
.lp-gauge {
  position: absolute; top: calc(var(--spacing-padding-inline) * 6.5); left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 260px; height: auto; aspect-ratio: 260 / 155; z-index: 0;
}

.lp-illustration img,
.lp-gauge { transition: transform 0.35s ease; }
a.lp-bento-tile:hover .lp-illustration img,
a.lp-bento-tile:focus-visible .lp-illustration img { transform: scale(1.05); }
a.lp-tile-hottakes:hover .lp-gauge,
a.lp-tile-hottakes:focus-visible .lp-gauge { transform: translateX(-50%) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .lp-card-logo-circle,
  .lp-card-logo--flat img,
  .lp-illustration img,
  .lp-gauge { transition: none; }
}

@media (max-width: 767px) {
  .lp-bento {
    grid-template-columns: 1fr; grid-auto-rows: auto; height: auto;
    gap: calc(var(--spacing-padding-inline) * 4);
  }
  a.lp-bento-tile { min-height: 260px; }
  .lp-tile-founders { grid-row: auto; }
}

/* --- CTA (full-viewport black section, tall orange panel, upward-scrolling grid) --- */
.lp-cta-section {
  min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lp-bg-light);
  padding: var(--cta-pad-block) calc(var(--spacing-padding-inline) * 8);
}
.lp-cta-section .lp-wrap { max-width: 1920px; padding: 0 calc(var(--spacing-padding-inline) * 8); }
#cta > .lp-wrap { padding-inline: 0; }
@media (max-width: 767px) {
  .lp-cta-section { padding: var(--cta-pad-block) calc(var(--spacing-padding-inline) * 5); }
}
.lp-cta {
  position: relative;
  width: 100%; overflow: hidden;
  min-height: 90vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background-color: var(--lp-orange);
  border-radius: 40px; color: #fff; text-align: center;
  padding: calc(var(--spacing-padding-inline) * 25) calc(var(--spacing-padding-inline) * 10);
}
.lp-cta > .lp-cta-video {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  border-radius: 40px;
}
.lp-cta::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(118.28% 118.28% at 50% 50%, var(--lp-orange) 0%, rgba(240, 103, 49, 0) 100%);
}
.lp-cta > .lp-cta-content {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  padding-inline: calc(var(--spacing-padding-inline) * 10);
  display: flex; flex-direction: column; align-items: center;
}
.lp-cta h2 { font-size: var(--alpha-heading-h0); font-weight: var(--font-weight-medium); line-height: 1.1; margin: 0 0 calc(var(--spacing-padding-inline) * 10); max-width: calc(var(--max-width-laptop)); letter-spacing: -0.01em; }
.lp-cta a.lp-pill-btn {
  --cta-btn-gap: calc(var(--spacing-padding-inline) * 3.5);
}
.lp-cta a.lp-pill-btn .lp-pill-icon {
  width: var(--pill-icon-size); height: var(--pill-icon-size); margin-right: var(--cta-btn-gap);
  filter: brightness(0);
  transition: width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease;
}
.lp-cta .lp-pill-label { transition: all 0.5s ease; }
.lp-cta .lp-pill-fill {
  display: block; background: var(--lp-black);
  left: calc(var(--btn-pad-inline) + var(--pill-icon-size) / 2);
}
.lp-cta a.lp-pill-btn:hover .lp-pill-icon,
.lp-cta a.lp-pill-btn:focus-visible .lp-pill-icon { width: 0; margin-right: 0; opacity: 0; }
/* No slide: with the icon's box gone the label sits centred on its own. */
.lp-cta a.lp-pill-btn:hover .lp-pill-label,
.lp-cta a.lp-pill-btn:focus-visible .lp-pill-label { transform: none; }
@media (min-width: 1999px) {
  .lp-cta h2{
    max-width: 1260px;
  }
}
@media (max-width: 1400px){
  .lp-cta h2{
    max-width: 860px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-cta a.lp-pill-btn .lp-pill-icon { transition: none; }
}

/* --- footer (sizing replicates the supplied reference spec) --- */
.lp-footer {
  background: var(--lp-black); color: #fff;
  padding: calc(var(--spacing-padding-inline) * 20) calc(var(--spacing-padding-inline) * 20)
           calc(var(--spacing-padding-inline) * 12.5);
}
#site-footer > .lp-wrap { padding-inline: 0; }
.lp-footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: calc(var(--spacing-padding-inline) * 12.5); flex-wrap: wrap;
}
.lp-footer-brand { flex: 1; max-width: 440px; }
.lp-footer-brand img { height: 70px; width: auto; }
.lp-footer-brand p {
  color: #fff; font-size: var(--alpha-body-medium); font-weight: var(--font-weight-regular);
  line-height: 1.6; margin: calc(var(--spacing-padding-inline) * 6.25) 0 0;
}
.lp-socials {
  display: flex; gap: calc(var(--spacing-padding-inline) * 3);
  margin-top: calc(var(--spacing-padding-inline) * 12.5);
}
/* The white disc is drawn HERE rather than baked into the icon artwork, and that is
   what makes the hover possible: the glyphs are now inline SVG painted with
   fill:currentColor, so flipping `color` recolours them. The old <img> icons carried
   the disc inside the file and could not be tinted at all.
   Two class levels deep on purpose — `.landing a { color: inherit }` would otherwise
   out-specify a single-class rule and force the glyph to inherit the footer's white,
   leaving it invisible on the white disc. Same hazard as .cp-filter-clear above. */
.lp-socials .lp-social {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #000100;
  transition: all 0.3s ease;
}
.lp-socials .lp-social:hover,
.lp-socials .lp-social:focus-visible { background: var(--lp-orange); color: #fff; }
.lp-social svg { width: 100%; height: 100%; }
.lp-footer-cols { display: flex; gap: calc(var(--spacing-padding-inline) * 20); }
.lp-footer-col h4 {
  font-size: var(--alpha-body-medium); font-weight: var(--font-weight-medium);
  margin: 0 0 calc(var(--spacing-padding-inline) * 10); letter-spacing: 0.05em;
  text-transform: capitalize;
}
.lp-footer-col a {
  display: block; font-size: var(--alpha-body-medium); font-weight: var(--font-weight-regular);
  color: #fff; transition: color 0.3s ease;
}
.lp-footer-col a + a { margin-top: calc(var(--spacing-padding-inline) * 4); }
.lp-footer-col a:hover, .lp-footer-col a:focus-visible { color: var(--lp-orange); }
.lp-footer-bottom {
  border-top: 1px solid #858585;
  margin-top: calc(var(--spacing-padding-inline) * 12.5);
  padding-top: calc(var(--spacing-padding-inline) * 7.5);
  display: flex; justify-content: space-between; align-items: center;
  gap: calc(var(--spacing-padding-inline) * 4); flex-wrap: wrap;
  font-size: var(--alpha-body-medium); color: #858585;
}
.lp-footer-bottom .lp-legal { display: flex; gap: calc(var(--spacing-padding-inline) * 7); flex-wrap: wrap; }
.lp-footer-bottom a { color: #858585; transition: color 0.3s ease; }
.lp-footer-bottom a:hover, .lp-footer-bottom a:focus-visible { color: #fff; }

@media (max-width: 1024px) {
  .lp-footer { padding-inline: calc(var(--spacing-padding-inline) * 12); }
}
@media (max-width: 767px) {
  .lp-footer { padding-inline: calc(var(--spacing-padding-inline) * 7); }
  .lp-footer-top { flex-direction: column; }
  .lp-footer-cols { gap: calc(var(--spacing-padding-inline) * 10); }
}
@media (max-width: 479px) {
  .lp-footer { padding-inline: calc(var(--spacing-padding-inline) * 5); }
  .lp-footer-cols { gap: calc(var(--spacing-padding-inline) * 6); }
  .lp-footer-col h4 { margin-bottom: calc(var(--spacing-padding-inline) * 5); }
}

/* --- stories list page (/stories) --- */
/* Same override as .cp-head — spacing now lives on .lp-head-group's padding. */
.st-head { margin-bottom: 0; }

.st-featured { margin: 56px 0 80px; }

.st-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(var(--spacing-padding-inline) * 4);
  margin-bottom: 48px;
  margin-top: 64px;
}
.st-filter-label {
  flex: none; font-size: var(--alpha-body-medium); font-weight: 500;
  color: var(--lp-black);
}
.st-filter-pills { display: flex; flex-wrap: wrap; gap: calc(var(--spacing-padding-inline) * 3); }
/* Filter pills, following the supplied .filter-btn spec: borderless, 100px radius,
   16px/32px padding, body-medium at regular weight, on an 8%-black wash that goes to
   15% on hover and orange when selected. The 0.3s all-ease transition is the spec's too.
   Ours are <a>s, not <button>s (filtering is a real link, see the view), so the spec's
   cursor/font-family are inherited rather than restated — but border-box IS restated,
   since the spec's box-sizing reset covers its whole wrapper and the padding here would
   otherwise sit outside the box. It's scoped to the pill instead of the section so it
   cannot reach the shared .lp-bento the featured grid rides on.
   Two class levels deep, like .cp-filter-clear and .lp-socials .lp-social above:
   `.landing a { color: inherit }` is one class plus an element and would otherwise
   out-specify a single-class rule, dragging the active pill's white text back to black. */
.st-filter-pills .st-pill {
  display: inline-flex; align-items: center; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.08); border: none; color: #000;
  border-radius: 100px;
  padding: calc(var(--spacing-padding-inline) * 4) calc(var(--spacing-padding-inline) * 8);
  font-size: var(--alpha-body-medium); font-weight: var(--font-weight-regular); line-height: 150%;
  cursor: pointer; transition: all 0.3s ease;
}
.st-filter-pills .st-pill:hover,
.st-filter-pills .st-pill:focus-visible { background: rgba(0, 0, 0, 0.15); }
.st-filter-pills .st-pill.is-active { background: var(--lp-orange); color: #FFF; }
.st-filter-pills .st-pill.is-active:hover,
.st-filter-pills .st-pill.is-active:focus-visible { background: var(--lp-orange); color: #FFF; }
@media (max-width: 1024px) {
  .st-filter-pills .st-pill { padding: 14px 28px; }
}
@media (max-width: 767px) {
  .st-filter-pills .st-pill { padding: 12px 24px; }
}
@media (max-width: 479px) {
  .st-filter-pills .st-pill { padding: 10px 20px; }
}

.st-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--spacing-padding-inline) * 6);
  align-items: stretch;
}
/* 36px and the same panel/border as .lp-card — same card family, different contents. */
.st-card {
  background: var(--lp-panel); border-radius: 36px;
  overflow: hidden; display: flex; flex-direction: column;
}
.st-card-img {
  position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden;
}
.st-card-img-founders   { background: var(--lp-tile-dark); }
.st-card-img-investment { background: var(--lp-orange-deep); }
.st-card-img-hottakes   { background: var(--lp-hottakes-bg); }
.st-card-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: calc(var(--spacing-padding-inline) * 4); box-sizing: border-box;
}
.st-card-img-hottakes .lp-gauge {
  top: 50%; transform: translate(-50%, -50%);
  width: 84%; max-width: 260px;
}
.st-card:hover .st-card-img-hottakes .lp-gauge,
.st-card:focus-visible .st-card-img-hottakes .lp-gauge { transform: translate(-50%, -50%) scale(1.05); }
.st-card-img img { transition: transform 0.35s ease; }
.st-card:hover .st-card-img img,
.st-card:focus-visible .st-card-img img { transform: scale(1.05); }

.st-card-body {
  padding: calc(var(--spacing-padding-inline) * 6.5) calc(var(--spacing-padding-inline) * 7)
           calc(var(--spacing-padding-inline) * 7);
  display: flex; flex-direction: column; gap: calc(var(--spacing-padding-inline) * 3.5); flex: 1;
}
@media (max-width: 1024px) {
  .st-card { border-radius: 20px; }
  .st-card-body { padding: 22px; }
}
@media (max-width: 767px) {
  .st-card-body { padding: 20px; }
}
@media (max-width: 479px) {
  .st-card-body { padding: 18px; }
}
.st-card-title { font-size: var(--alpha-heading-h5); font-weight: var(--font-weight-medium); margin: 0; line-height: 1.3; }
.st-card-excerpt {
  font-size: var(--alpha-body-small); color: #0A0A0A; line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.st-card-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(var(--spacing-padding-inline) * 3); margin-top: auto;
  padding-top: calc(var(--spacing-padding-inline) * 2);
}
.st-card-tag {
  flex: none; background: transparent; border: 1px solid #D0D0D0; color: #666666;
  border-radius: 50px; padding: 8px 16px;
  font-size: var(--alpha-body-small); line-height: 1.2;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
@media (max-width: 479px) {
  .st-card-tag { padding: 6px 14px; font-size: 12px; }
}
.st-card:hover .st-card-tag,
.st-card:focus-visible .st-card-tag { background-color: #F5F5F5; border-color: #999999; }
/* Same dashed empty state as /companies. */
.st-empty {
  color: var(--lp-muted); font-size: var(--alpha-body-small); padding: calc(var(--spacing-padding-inline) * 12) 0;
  border: 1px dashed var(--lp-border); border-radius: 24px; text-align: center; margin: 0;
}

.st-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: calc(var(--spacing-padding-inline) * 3);
  margin-top: calc(var(--spacing-padding-inline) * 14);
}
.st-pagination .st-page-btn,
.st-pagination .st-page-arrow {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--alpha-body-xs); font-weight: var(--font-weight-medium);
  color: var(--lp-black); background: transparent; border: 1px solid var(--lp-border);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.st-pagination .st-page-btn:hover,
.st-pagination .st-page-btn:focus-visible,
.st-pagination .st-page-arrow:hover,
.st-pagination .st-page-arrow:focus-visible {
  background: var(--lp-black); border-color: var(--lp-black); color: #fff;
}
.st-pagination .st-page-btn.is-active {
  background: var(--lp-black); border-color: var(--lp-black); color: #fff;
}
.st-page-arrow svg { width: 20px; height: 20px; display: block; }
.st-pagination .st-page-arrow.is-disabled { color: var(--lp-border); border-color: #EFEFEF; }
.st-page-dots { color: var(--lp-muted); font-size: var(--alpha-body-xs); padding-inline: calc(var(--spacing-padding-inline) * 1); }

@media (max-width: 1024px) {
  .st-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
  .st-featured { margin: 40px 0 60px; }
  .st-pagination .st-page-btn,
  .st-pagination .st-page-arrow { width: 44px; height: 44px; }
  .st-pagination { gap: calc(var(--spacing-padding-inline) * 2); }
}
@media (max-width: 650px) {
  .st-grid { grid-template-columns: 1fr; }
}