/* ---------- Base: v04 visual system ---------- */

:root {
  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.563rem;
  --fs-xl: 1.953rem;
  --fs-hero: clamp(2.4rem, 4.8vw, 3.4rem);

  --lh-normal: 1.6;
  --lh-tight: 1.3;

  --color-bg: #f7f1e3;
  --color-text-main: #253024;
  /* 4.55:1 against --color-bg. The previous #6f7565 measured 4.23:1, under the 4.5:1
     WCAG AA threshold for normal-size text. */
  --color-text-soft: #6a705f;
  --color-line: rgba(37, 48, 36, 0.18);
  /* One focus colour for every control. Chosen for contrast against both the cream
     background and the dark investor surface. */
  --color-focus: #1b4fd8;

  --color-circle-main: rgba(255, 255, 255, 0.82);
  --color-circle-alt1: rgba(230, 255, 51, 0.38);
  --color-circle-alt2: rgba(255, 59, 215, 0.36);
  --flower-accent-glow: rgba(230, 255, 51, 0.28);

  --color-btn-hover: #e6ff33;
  --radius-pill: 999px;
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.08);
}

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

/* ---------- Focus ----------
   One visible treatment for every keyboard-focusable control. Components below may
   restyle it, but none may remove it: a focus indicator that is only a subtle
   background change leaves keyboard users guessing where they are. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.investor-page {
  /* #1b4fd8 measures 2.6:1 on the dark investor surface; this reaches 8.3:1. */
  --color-focus: #7ab8ff;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  border: 2px solid var(--color-text-main);
  border-radius: 999px;
  background: var(--color-btn-hover);
  color: var(--color-text-main);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text-main);
  position: relative;
  overflow-x: hidden;
}

a { color: inherit; }

.flower-mark {
  --flower-petal-fill: #f6e681;
  --flower-petal-stroke: #5f6d22;
  --flower-petal-width: 2;
  --flower-petal-opacity: 1;
  --flower-aura-opacity: 1;
  --flower-aura-stroke: #6e4f1b;
  --flower-eye-fill: #6e4f1b;
  --flower-eye-stroke: #6e4f1b;
  --flower-eye-center: #fff4b0;
  overflow: visible;
}

.flower-mark .petal-outline path {
  fill: var(--flower-petal-fill);
  opacity: var(--flower-petal-opacity);
  stroke: var(--flower-petal-stroke);
  stroke-width: var(--flower-petal-width);
}

.flower-mark .aura {
  opacity: var(--flower-aura-opacity);
}

.flower-mark .aura-outline {
  stroke: var(--flower-aura-stroke);
}

.flower-mark .eye-fill {
  fill: var(--flower-eye-fill);
}

.flower-mark .eye-outline {
  stroke: var(--flower-eye-stroke);
}

.flower-mark .eye-center {
  fill: var(--flower-eye-center);
  stroke: var(--flower-eye-stroke);
}

/* ---------- Floating circle layer ---------- */

#circle-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Position comes from the standalone `translate` property, written each frame by
   syncCircle(). `transform` stays free for the hover and pop-in effects below, and the
   two compose rather than overwrite each other. */
.circle {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--color-circle-main);
  opacity: 0.45;
  transition: opacity 220ms ease-out, transform 220ms ease-out, background-color 220ms ease-out;
}

.circle:hover {
  transform: scale(1.2);
  background-color: var(--hover-color);
  box-shadow: 0 0 18px rgba(86, 191, 255, 0.5), 0 0 36px rgba(255, 59, 215, 0.35);
}

.circle[data-tone="lime"] { background-color: var(--color-circle-alt1); }
.circle[data-tone="pink"] { background-color: var(--color-circle-alt2); }
.circle.pop-in { animation: circle-pop 320ms ease-out forwards; }

@keyframes circle-pop {
  0% { transform: scale(0.7); opacity: 0.2; }
  60% { transform: scale(1.12); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* ---------- Two-level navigation ---------- */

/* Hidden above 820px, where the full navigation rail fits on one line. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--color-text-main);
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-main);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.nav-toggle-bars {
  display: inline-grid;
  gap: 3px;
  width: 18px;
}

.nav-toggle-bars span {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-toggle[aria-expanded="true"] {
  background: var(--color-btn-hover);
}

nav.main {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 8px 18px;
  background: rgba(247, 241, 227, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(37, 48, 36, 0.1);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeInUp 900ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.logo-icon {
  height: 22px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.logo-sep {
  color: rgba(37, 48, 36, 0.3);
  font-weight: 300;
}

.logo-page {
  color: var(--color-text-soft);
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Deliberately not a containing block. The wide dropdown panels and the hover bridge
   anchor to nav.main instead — it is already position:sticky, so `left: 0` lands on the
   nav's padding edge and `calc(100vw - 36px)` exactly matches its 18px side padding.
   Anchored under individual triggers, a 640px panel pushed the page's scrollable width
   past the viewport on every page, even while closed. */
.nav-item {
  position: static;
}

.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: min(640px, calc(100vw - 36px));
  height: 16px;
}

.nav-item.nav-about::after {
  left: auto;
  right: 0;
  width: min(360px, calc(100vw - 36px));
}

.nav-trigger,
.nav-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--color-text-main);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}

.nav-trigger svg {
  width: 13px;
  height: 13px;
  color: rgba(37, 48, 36, 0.55);
  transition: transform 160ms ease-out;
}

.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger,
.nav-item.is-open .nav-trigger,
.nav-trigger:hover,
.nav-trigger.active {
  background: rgba(235, 228, 211, 0.78);
  outline: none;
}

.nav-item:hover .nav-trigger svg,
.nav-item:focus-within .nav-trigger svg,
.nav-item.is-open .nav-trigger svg {
  transform: rotate(180deg);
}

.nav-item:hover::after,
.nav-item:focus-within::after,
.nav-item.is-open::after {
  display: block;
}

/* Anchored to the nav rail, not to the individual trigger. At 640px wide, a panel
   anchored under a right-hand trigger extended past the viewport and grew the page's
   scrollable width by ~57px on every page, even while closed. */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(640px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  padding: 24px 28px;
  border: 2px solid rgba(37, 48, 36, 0.16);
  border-radius: 24px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s linear 180ms;
}

.nav-dropdown-right {
  left: auto;
  right: 0;
  width: min(360px, calc(100vw - 36px));
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-dropdown a {
  display: block;
  color: var(--color-text-main);
  text-decoration: none;
  margin-bottom: 20px;
}

.nav-dropdown a:last-child {
  margin-bottom: 0;
}

.nav-dropdown-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
}

.nav-dropdown-desc {
  display: block;
  max-width: 520px;
  margin-top: 4px;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #caff3a;
  color: var(--color-text-main);
  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-badge.soft {
  background: rgba(235, 228, 211, 0.92);
  color: var(--color-text-soft);
}

.nav-cta {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #142519;
  color: var(--color-bg);
  font-weight: 700;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--color-btn-hover);
  color: var(--color-text-main);
  outline: none;
}

/* ---------- Layout ---------- */

.page {
  position: relative;
  z-index: 2;
}

#upload-section {
  scroll-margin-top: 96px;
}

#map-workflow {
  scroll-margin-top: 96px;
}

.hero,
.industry-hero,
.funnel,
.solution-section,
.article,
.company,
.video-post {
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 24px 72px;
}

.hero-grid,
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  column-gap: 28px;
  align-items: flex-start;
}

.hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy,
.hero-left {
  max-width: 700px;
}

h1,
.industry-headline,
.section-headline,
.case-headline,
.final-cta h2 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  margin: 4px 0 22px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeInUp 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
  animation-delay: 120ms;
}

.section-headline,
.case-headline,
.final-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.highlight,
em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 58%, rgba(230, 255, 51, 0.58) 58%);
}

.hero-flip-line {
  position: relative;
  display: block;
  min-height: var(--hero-flip-height, 1.28em);
}

.hero-suffix-line {
  display: block;
}

.flip-word {
  display: inline-block;
  max-width: 100%;
  line-height: 1.28;
  color: var(--color-text-main);
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 190ms ease-out,
    transform 260ms cubic-bezier(0.22, 0.82, 0.22, 1),
    filter 190ms ease-out;
}

.hero-flip-measurer {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}

.flip-word.is-exiting {
  opacity: 0;
  transform: translateY(-0.42em);
  filter: blur(2px);
}

.flip-word.is-entering {
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(2px);
}

p,
.hero-sub,
.industry-sub,
.case-body,
.company .lede {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  margin: 6px 0 16px;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeInUp 1300ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.investor-centered {
  text-align: center;
  padding-top: 120px;
}

.investor-centered .industry-headline {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.investor-centered .industry-sub {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.investor-centered .hero-ctas {
  justify-content: center;
  margin-top: 48px;
}

.hero-copy p:nth-of-type(1),
.hero-sub { animation-delay: 620ms; }
.hero-copy p:nth-of-type(2) { animation-delay: 940ms; }
.hero-copy p:nth-of-type(3) { animation-delay: 1180ms; }

.hero h1,
.hero .hero-sub,
.hero .hero-ctas,
.hero .hero-proof,
.hero .story-carousel,
.hero .research-capture,
.hero .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.hero-ctas,
.cta-column,
.final-cta-buttons,
.submit-row {
  margin: 20px 0 36px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp 1000ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
  animation-delay: 220ms;
}

/* The hero has one button, so the gap below it is carried by the secondary text link
   rather than by the button row. Declared after the shared rule above, which would
   otherwise win on source order. */
.hero-ctas {
  margin-bottom: 14px;
}

.hero-secondary-link {
  margin: 0 0 36px;
  font-size: var(--fs-sm);
}

.hero-secondary-link a {
  color: var(--color-text-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hero-secondary-link a:hover {
  color: var(--color-text-main);
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: -8px 0 34px;
  color: var(--color-text-main);
  text-decoration: none;
}

.hero-proof-item {
  display: block;
  min-height: 146px;
  padding: 22px 20px;
  border: 2px solid rgba(37, 48, 36, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
}

.hero-proof-item strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.05;
}

.hero-proof-item span {
  display: block;
  margin-top: 5px;
  color: var(--color-text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.22;
}

.hero-proof:hover .hero-proof-item,
.hero-proof:focus-visible .hero-proof-item {
  border-color: rgba(37, 48, 36, 0.28);
  background: rgba(230, 255, 51, 0.26);
}

.hero-proof:focus-visible {
  outline: none;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(10px); }
  30% { opacity: 0.55; transform: translateY(5px); }
  50% { opacity: 0.7; transform: translateY(3px); }
  65% { opacity: 0.6; transform: translateY(2px); }
  80% { opacity: 0.9; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Buttons ---------- */

.btn,
.btn-primary,
.btn-secondary,
.btn-light,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--color-text-main);
  cursor: pointer;
  color: var(--color-text-main);
  background: transparent;
  box-shadow: none;
  gap: 0;
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-ghost:hover,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-light:focus-visible,
.btn-ghost:focus-visible {
  background: var(--color-btn-hover);
  border-color: var(--color-text-main);
  color: var(--color-text-main);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(38, 48, 36, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn-secondary:hover,
.btn-ghost:hover { background: #ff3bd7; }

/* ---------- Flower & line ---------- */

.flower-stack {
  position: absolute;
  top: 132px;
  bottom: 56px;
  left: 24px;
  z-index: 2;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.flower-icon {
  display: block;
  width: 96px;
  height: 96px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(1px) scale(0.6);
  filter: drop-shadow(0 0 18px var(--flower-accent-glow));
  transition: filter 420ms ease, transform 320ms ease;
}

.flower-stem {
  --flower-stem-color: rgba(37, 48, 36, 0.5);
  position: relative;
  width: 2px;
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
  margin: 12px 0 0;
  border-left: 2px dashed var(--flower-stem-color);
}

.flower-stem::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -32px;
  width: 64px;
  height: 64px;
  border: 2px dashed var(--flower-stem-color);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.flower-icon.grow-start {
  animation: flowerGrow 620ms cubic-bezier(0.18, 0.86, 0.32, 1) forwards;
  visibility: visible;
}

.flower-icon:hover {
  transform: translateX(0) scale(1.02);
  filter: drop-shadow(0 0 24px var(--flower-accent-glow));
}

@keyframes flowerGrow {
  from { opacity: 0; transform: translateX(-8px) scale(0.6); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---------- Product content, compact v04 treatment ---------- */

.story-carousel,
.case-visual,
.upload-card,
.contact-panel,
.waitlist-form,
.feature,
.solution-detail-item,
.stat {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(37, 48, 36, 0.14);
  border-radius: 28px;
  box-shadow: none;
}

.story-carousel {
  position: relative;
  z-index: 2;
  margin-top: 46px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.38);
  touch-action: pan-y;
}

.story-carousel-title {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 58px 0 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-tight);
}

.story-carousel-stage {
  position: relative;
  height: 560px;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
}

.story-slide {
  display: none;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  height: 560px;
}

.story-slide.active {
  display: grid;
}

.story-slide-media {
  min-height: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 24% 20%, rgba(230, 255, 51, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(247, 241, 227, 0.86), rgba(255, 255, 255, 0.42));
  border-right: 2px solid rgba(37, 48, 36, 0.12);
}

.story-slide-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center bottom;
  border: 2px solid rgba(37, 48, 36, 0.12);
  border-radius: 18px;
  background: rgba(247, 241, 227, 0.72);
  box-shadow: 0 18px 54px rgba(37, 48, 36, 0.12);
}

.story-slide-media-contain img {
  object-fit: contain;
  object-position: center;
}

.story-slide-media-cta {
  background:
    radial-gradient(circle at 50% 45%, rgba(230, 255, 51, 0.34), transparent 28%),
    radial-gradient(circle at 20% 72%, rgba(255, 59, 215, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(247, 241, 227, 0.92), rgba(255, 255, 255, 0.38));
}

.story-cta-mark {
  width: min(360px, 72%);
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(37, 48, 36, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-main);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.46);
}

.story-slide-copy {
  min-height: 0;
  padding: 34px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
}

.story-slide-copy p {
  opacity: 1;
  transform: none;
  animation: none;
}

.story-step-label {
  margin: 0 0 14px;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.story-slide-copy h3 {
  margin: 0 0 14px;
  color: var(--color-text-main);
  font-size: clamp(1.52rem, 2.35vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.story-slide-copy > p:last-of-type {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.42;
}

.story-slide-copy > p:not(.story-step-label):not(.story-slide-highlight) {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.42;
}

.story-slide-body p {
  margin: 0 0 0.7em;
  font-size: 1.02rem;
  line-height: 1.42;
}

.story-slide-body p:last-child {
  margin-bottom: 0;
}

.story-slide-highlight {
  margin-top: auto !important;
  padding: 16px 18px;
  border: 2px solid rgba(37, 48, 36, 0.16);
  border-radius: 18px;
  background: rgba(230, 255, 51, 0.34);
  color: var(--color-text-main);
  font-size: 0.96rem !important;
  font-weight: 700;
  line-height: 1.34 !important;
}

.story-slide-copy .btn-primary {
  margin-top: 18px;
  align-self: flex-start;
}

.story-arrow {
  position: absolute;
  top: 280px;
  z-index: 4;
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(37, 48, 36, 0.72);
  border-radius: 50%;
  background: rgba(247, 241, 227, 0.9);
  color: var(--color-text-main);
  font: inherit;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(37, 48, 36, 0.14);
  transition: opacity 180ms ease-out, visibility 180ms ease-out, background-color 140ms ease-out, transform 140ms ease-out;
}

.story-arrow:hover,
.story-arrow:focus-visible {
  background: var(--color-btn-hover);
  transform: translateY(-50%) scale(1.04);
  outline: none;
}

/* The arrows sit half outside the carousel by design; see the 821-1160px override
   below, where the carousel is nearly full-width and the overhang would otherwise
   extend the page's scrollable width. */
.story-arrow-prev {
  left: -34px;
}

.story-arrow-next {
  right: -34px;
}

/* Just above the mobile breakpoint the carousel spans almost the whole viewport, so a
   34px overhang lands outside it. Tuck the arrows inside for this range. */
@media (min-width: 821px) and (max-width: 1160px) {
  .story-arrow-prev {
    left: 6px;
  }

  .story-arrow-next {
    right: 6px;
  }
}

.story-carousel-controls {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 2px solid rgba(37, 48, 36, 0.12);
  border-radius: 0 0 26px 26px;
  background: rgba(247, 241, 227, 0.78);
  overflow: hidden;
}

.story-step-trigger {
  min-height: 70px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-right: 1px solid rgba(37, 48, 36, 0.12);
  background: transparent;
  color: var(--color-text-main);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.story-step-trigger:last-child {
  border-right: 0;
}

.story-step-trigger span {
  color: var(--color-text-soft);
  font-size: 0.72rem;
}

.story-step-trigger:hover,
.story-step-trigger:focus-visible {
  background: rgba(230, 255, 51, 0.42);
  outline: none;
}

.story-carousel.is-keyboarding .story-step-trigger:hover:not(:focus-visible):not(.active) {
  background: transparent;
}

.story-step-trigger.active {
  background: var(--color-text-main);
  color: var(--color-bg);
}

.story-step-trigger.active span {
  color: rgba(247, 241, 227, 0.72);
}

.research-capture {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 22px;
  align-items: center;
  border: 2px solid rgba(37, 48, 36, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.3);
}

.research-capture .section-label {
  margin-bottom: 8px;
}

.research-capture h2 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.12;
}

.research-capture p {
  margin: 0;
  color: var(--color-text-main);
  font-size: var(--fs-sm);
  line-height: 1.45;
  opacity: 1;
  transform: none;
  animation: none;
}

.research-capture-form {
  display: grid;
  gap: 8px;
}

.research-capture-form label {
  font-size: var(--fs-xs);
  font-weight: 800;
}

.research-capture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.research-capture-row input {
  width: 100%;
  min-height: 48px;
  border: 2px solid rgba(37, 48, 36, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  padding: 0 16px;
  color: var(--color-text-main);
  font: inherit;
}

.research-capture-form .price-badge {
  justify-self: start;
}

.case-study,
.final-cta {
  position: relative;
  z-index: 2;
  padding: 84px 24px;
}

.case-inner,
.final-cta-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 36px;
  align-items: center;
}

.case-meta,
.section-label,
.industry-eyebrow,
.feature-num,
.waitlist-tag,
.price-badge {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-weight: 700;
}

.feature-num { margin-bottom: 12px; text-transform: capitalize; }
.industry-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.industry-meta-row .waitlist-tag {
  margin-left: auto;
}

.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.case-meta-tag,
.waitlist-tag {
  display: inline-flex;
  border: 2px solid rgba(37, 48, 36, 0.2);
  border-radius: 999px;
  padding: 6px 10px;
}

.case-copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-tight);
  margin: 4px 0 22px;
  padding: 12px 0 12px 18px;
  border-left: 8px solid var(--color-btn-hover);
  background: linear-gradient(90deg, rgba(230, 255, 51, 0.2), transparent 72%);
}

.case-copy p {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.case-copy blockquote {
  border-left: 2px dashed rgba(37, 48, 36, 0.48);
  padding-left: 18px;
  margin: 22px 0;
}

.case-copy blockquote p {
  font-size: var(--fs-md);
  margin: 6px 0;
}

.case-copy blockquote p:last-child {
  color: var(--color-text-soft);
}

.case-copy a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.case-copy a:hover,
.case-copy a:focus-visible {
  color: var(--color-text-soft);
  outline: none;
}

.case-copy-outro > p > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--color-text-main);
  color: var(--color-text-main);
}

.case-copy-outro > p > a:hover,
.case-copy-outro > p > a:focus-visible {
  background: #ff3bd7;
  color: var(--color-text-main);
  outline: none;
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.stat { padding: 16px; }
.stat-num { font-size: var(--fs-xl); font-weight: 700; }
.stat-label { font-size: var(--fs-xs); color: var(--color-text-soft); }

.quote {
  border-left: 2px dashed rgba(37, 48, 36, 0.48);
  padding-left: 18px;
  margin: 22px 0;
}

.quote-text { font-size: var(--fs-md); }
.quote-attr { color: var(--color-text-soft); }

.case-visual {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.case-visual-embed {
  position: relative;
  aspect-ratio: 504 / 399;
  overflow: hidden;
  border-radius: 20px;
}

.case-visual-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-visual-embed-youtube {
  aspect-ratio: 16 / 9;
}

.case-visual-link {
  display: block;
  width: 100%;
  height: 100%;
}

.case-visual-link:focus-visible {
  outline: 3px solid var(--color-text-main);
  outline-offset: -6px;
}

.case-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.case-visual iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.funnel-grid,
.feature-grid,
.solution-detail {
  display: grid;
  gap: 18px;
}

.funnel-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
  margin-top: 34px;
}

.funnel-grid.is-single-pane {
  grid-template-columns: minmax(280px, 720px);
  justify-content: center;
}

.funnel-left {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 18px;
}

.funnel-left[hidden],
[data-pane][hidden] {
  display: none;
}

.funnel-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.funnel-step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 18px;
  border: 2px solid transparent;
  border-radius: 24px;
}

.funnel-step::before {
  content: counter(step, decimal-leading-zero);
  color: var(--color-text-soft);
  font-weight: 700;
  padding-top: 3px;
}

.funnel-step.active {
  border: 2px solid rgba(37, 48, 36, 0.18);
  background: rgba(255, 255, 255, 0.28);
}

.funnel-step .funnel-step-title,
.feature h3,
.solution-detail-item h3 {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  line-height: 1.25;
}

.funnel-step p,
.feature p,
.solution-detail-item p {
  font-size: var(--fs-sm);
  margin: 0 0 8px;
  color: var(--color-text-soft);
}

.upload-card,
.contact-panel,
.waitlist-form {
  padding: 24px;
}

.upload-card-heading {
  margin: 0 0 16px;
  font-size: var(--fs-md);
  line-height: 1.25;
}

.pricing-anchor {
  margin-top: auto;
  padding: 16px 18px;
  border: 2px solid rgba(37, 48, 36, 0.16);
  border-radius: 20px;
  background: rgba(230, 255, 51, 0.22);
}

.pricing-anchor span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.pricing-anchor strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.pricing-anchor p {
  margin: 0;
  color: var(--color-text-main);
  font-size: 0.92rem;
  line-height: 1.4;
  opacity: 1;
  transform: none;
  animation: none;
}

.upload-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.upload-tab {
  flex: 1;
  min-height: 38px;
  border: 2px solid var(--color-text-main);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-main);
  font-weight: 700;
  cursor: pointer;
}
.upload-tab.active,
.upload-tab:hover { background: var(--color-btn-hover); }

.upload-zone {
  border: 2px dashed rgba(37, 48, 36, 0.35);
  border-radius: 18px;
  padding: 26px 18px 18px;
  text-align: center;
  margin-bottom: 18px;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
    rgba(246, 240, 228, 0.36);
  transition: background-color 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}

.upload-zone:hover,
.upload-zone.has-file {
  border-color: var(--color-text-main);
  background: rgba(255, 255, 255, 0.22);
}

.upload-zone:hover {
  transform: translateY(-1px);
}

.upload-zone.has-file {
  border-style: solid;
}

.upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border: 2px solid var(--color-text-main);
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, 0.34);
}

.upload-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(1.05rem, 1.8vw, 1.38rem);
  font-weight: 800;
  line-height: 1.16;
}

.upload-hint {
  margin-top: 4px;
  color: var(--color-text-soft);
}

.upload-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 430px);
  min-height: 44px;
  margin: 18px auto 0;
  padding: 5px;
  border: 2px solid rgba(37, 48, 36, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  text-align: left;
}

.upload-picker-button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--color-text-main);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
}

/* The file input stays in the tab order and keeps native Enter/Space activation;
   it is only visually hidden, so its focus ring is painted on the label instead. */
.upload-file-input:focus-visible ~ .upload-picker .upload-picker-button {
  outline: 3px solid var(--color-focus, #1b6ef3);
  outline-offset: 3px;
}

.upload-file-input:focus-visible ~ .upload-picker {
  border-color: var(--color-text-main);
}

.upload-formats {
  margin-top: 10px;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
}

.upload-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-zone.has-file .upload-picker {
  border-color: var(--color-text-main);
}

.upload-zone.has-file .upload-picker-name {
  color: var(--color-text-main);
}

.upload-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-row label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.form-row-priority label::after,
.form-row-required label::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.42;
  transform: translateY(-0.08em);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  border: 2px solid rgba(37, 48, 36, 0.35);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
  padding: 12px 14px;
  color: var(--color-text-main);
  font: inherit;
}

.form-row-priority label {
  font-size: 0.95rem;
}

.form-row-priority input,
.form-row-priority textarea {
  border-color: rgba(37, 48, 36, 0.64);
  background: rgba(255, 255, 255, 0.38);
}

.form-row select {
  min-height: 51px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-main) 50%), linear-gradient(135deg, var(--color-text-main) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form-row textarea { min-height: 86px; resize: vertical; }

.contact-message-row textarea {
  min-height: 118px;
}

.lead-status {
  margin: 12px 0 0;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.lead-status p {
  margin: 0 0 10px;
}

.lead-status.has-error {
  color: #8f1d1d;
}

.lead-followup {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lead-followup label {
  color: var(--color-text-main);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.lead-followup label span {
  color: var(--color-text-soft);
  font-weight: 700;
}

.lead-followup textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 2px solid rgba(37, 48, 36, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  padding: 11px 12px;
  color: var(--color-text-main);
  font: inherit;
  font-weight: 600;
}

.lead-followup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.lead-followup-actions span {
  color: var(--color-text-soft);
}

.lead-followup-actions span.has-error {
  color: #8f1d1d;
}

.upload-diagnosis {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px dashed rgba(37, 48, 36, 0.2);
}

.upload-status-card {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 2px solid var(--color-text-main);
  border-radius: 14px;
  background: rgba(230, 255, 51, 0.28);
}

.upload-status-card strong {
  font-size: var(--fs-sm);
}

.upload-status-card span {
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.upload-status-card.is-confirmed {
  background: rgba(255, 255, 255, 0.42);
}

.upload-status-card.has-warning {
  background: rgba(255, 214, 102, 0.28);
}

.email-verification {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border: 2px solid rgba(37, 48, 36, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.lead-status .email-verification {
  margin-top: 10px;
}

.lead-status .email-verification-inline {
  padding: 0;
  border: 0;
  background: transparent;
}

.email-verification.is-verified {
  border-color: var(--color-text-main);
  background: rgba(230, 255, 51, 0.2);
}

.email-verification-copy {
  display: grid;
  gap: 3px;
}

.email-verification-copy strong {
  color: var(--color-text-main);
  font-size: var(--fs-sm);
}

.email-verification-copy span,
.email-verification-message {
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.email-verification-actions,
.email-verification-code > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.email-verification-code {
  display: grid;
  gap: 6px;
}

.email-verification-code[hidden] {
  display: none;
}

.email-verification-code label {
  color: var(--color-text-main);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.email-verification-code input {
  width: 112px;
  padding: 10px 12px;
  border: 2px solid rgba(37, 48, 36, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--color-text-main);
  font: inherit;
  font-weight: 800;
  letter-spacing: 0;
}

.email-verification-message {
  min-height: 1.2em;
  margin: 0;
}

.email-verification-message.has-error {
  color: #8f1d1d;
}

.upload-diagnosis-header,
.upload-metrics,
.upload-columns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.upload-diagnosis-header {
  justify-content: space-between;
  margin-bottom: 14px;
}

.upload-diagnosis-header h3,
.upload-warnings h4,
.upload-preview-block h4 {
  margin: 0;
  font-size: var(--fs-sm);
}

.upload-diagnosis-header span,
.upload-columns span {
  border: 1px solid rgba(37, 48, 36, 0.26);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.upload-metrics {
  margin: 0 0 14px;
}

.upload-metrics div {
  min-width: 92px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 48, 36, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
}

.upload-metrics dt {
  font-size: 0.72rem;
  color: var(--color-text-soft);
}

.upload-metrics dd {
  margin: 2px 0 0;
  font-weight: 800;
}

.upload-columns {
  margin-bottom: 16px;
}

.upload-warnings,
.upload-preview-block {
  margin: 14px 0;
}

.upload-warnings ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.upload-preview-wrap {
  overflow-x: auto;
  border: 1px solid rgba(37, 48, 36, 0.18);
  border-radius: 12px;
}

.upload-preview {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.upload-preview th,
.upload-preview td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(37, 48, 36, 0.14);
  text-align: left;
  vertical-align: top;
  max-width: 180px;
}

.upload-preview th {
  background: rgba(255, 255, 255, 0.24);
  font-weight: 800;
}

.upload-error {
  color: #8f1d1d;
  font-weight: 700;
}

.btn-primary:disabled {
  cursor: wait;
  opacity: 0.65;
}

.btn-primary.is-confirmed {
  background: var(--color-btn-hover);
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.feature {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 28px;
  border-radius: 18px;
}

.feature.dark { background: rgba(255, 59, 215, 0.12); }

.feature-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.feature-art {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.feature-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature h3 {
  font-size: var(--fs-lg);
  line-height: 1.18;
}

.feature p {
  max-width: 34rem;
}

.feature ul {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
}

.feature li {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 2px dashed rgba(37, 48, 36, 0.14);
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.feature li::before {
  content: "\2192";
  font-weight: 700;
  color: var(--color-text-main);
}

.solution-detail { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.solution-detail-item { padding: 20px; }

.waitlist-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 84px;
  position: relative;
  z-index: 2;
}

.final-cta {
  text-align: center;
}

.final-cta-buttons { justify-content: center; }

.contact-panel {
  max-width: 780px;
  margin: 28px auto 0;
  text-align: left;
}

.contact-form h3 {
  margin: 0 0 18px;
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.contact-submit-row {
  margin-bottom: 0;
  justify-content: space-between;
  opacity: 1;
  transform: none;
  animation: none;
}

.contact-submit-row .price-badge {
  max-width: 360px;
  line-height: 1.35;
}

.contact-alt-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px 12px;
  max-width: 420px;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.35;
}

.contact-alt-links a {
  color: inherit;
  font-weight: 800;
  white-space: nowrap;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.contact-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(0.2em);
}

.contact-social-icon svg {
  width: 18px;
  height: 18px;
}

/* ---------- Audience router ---------- */

/* Deliberately understated. This exists so a non-association visitor has somewhere to
   go, not to compete with the single call to action above it. */
.audience-router {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 34px 64px;
}

.audience-router-label {
  margin: 0 0 10px;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.audience-router ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audience-router a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-main);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 820px) {
  .audience-router {
    padding: 0 20px 48px;
  }

  .audience-router ul {
    flex-direction: column;
    gap: 0;
  }
}

.article,
.company,
.video-post,
.video-article {
  max-width: 820px;
}

.article h2,
.company h2,
.video-post h2,
.video-article h2 {
  margin-top: 44px;
  font-size: var(--fs-xl);
}

.video-title-row {
  margin-top: 44px;
}

.video-title-action-cluster {
  white-space: nowrap;
}

.video-guide-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  border: 2px solid var(--color-text-main);
  border-radius: 8px;
  background: var(--color-btn-hover);
  color: var(--color-text-main);
  box-shadow: 4px 4px 0 rgba(37, 48, 36, 0.16);
  vertical-align: -0.18em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

/* The icon stays 38px so it does not overwhelm the heading, but its hit area is
   extended to the 44px ergonomic target without shifting the layout. */
.video-guide-action::after {
  content: "";
  position: absolute;
  inset: -3px;
}

.video-guide-action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-guide-action:hover,
.video-guide-action:focus-visible {
  background: #ff3bd7;
  box-shadow: 2px 2px 0 rgba(37, 48, 36, 0.2);
  outline: none;
  transform: translate(2px, 2px);
}

.video-article h2 {
  padding-top: 22px;
  border-top: 2px solid rgba(37, 48, 36, 0.16);
}

.video-article h2::before {
  content: "";
  display: block;
  width: 74px;
  height: 10px;
  margin-bottom: 14px;
  border: 2px solid var(--color-text-main);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-btn-hover) 0 56%, #ff3bd7 56% 100%);
}

.article p,
.company p,
.video-post p,
.video-article p {
  color: var(--color-text-main);
}

.article ul,
.article ol {
  margin: 8px 0 22px;
  padding-left: 1.35em;
  color: var(--color-text-main);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.article li {
  margin: 4px 0;
}

.article-infographic {
  width: min(1320px, calc(100vw - 48px));
  margin: 36px 50% 0;
  transform: translateX(-50%);
}

.article-infographic img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 2px solid rgba(37, 48, 36, 0.16);
  border-radius: 20px;
  box-shadow: 0 14px 42px rgba(37, 48, 36, 0.1);
}

.article-infographic figcaption {
  margin-top: 18px;
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

.article-infographic + p {
  margin-top: 22px;
}

.article-cta-band {
  display: flex;
  width: min(1040px, calc(100vw - 48px));
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin: 28px 50% 0;
  padding: 22px 26px;
  border: 2px solid rgba(37, 48, 36, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.34);
  transform: translateX(-50%);
}

.article-cta-band h2,
.article-cta-band p {
  margin: 0;
}

.article-cta-band h2 {
  flex: 1 1 180px;
  font-size: var(--fs-xl);
}

.article-cta-band p {
  flex: 2 1 360px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.article-cta-band .btn-primary {
  flex: 0 1 auto;
  white-space: nowrap;
}

.video-article {
  margin: 0 auto;
  padding: 96px 24px 72px;
}

.video-kicker,
.video-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-weight: 700;
}

.video-kicker {
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.video-dek {
  font-size: var(--fs-lg);
  line-height: 1.45;
}

.video-article h1 + p {
  font-size: var(--fs-lg);
  line-height: 1.45;
}

.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}

.video-meta span,
.reader-list li {
  border: 2px solid rgba(37, 48, 36, 0.14);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.26);
}

.listen-guide {
  border-top: 2px solid rgba(37, 48, 36, 0.18);
  border-bottom: 2px solid rgba(37, 48, 36, 0.18);
  padding: 26px 0;
  margin: 34px 0;
}

.pullquote,
.video-article blockquote {
  margin: 38px 0;
  padding: 0 0 0 24px;
  border-left: 8px solid var(--color-btn-hover);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.18;
  color: var(--color-text-main);
}

.reader-list,
.video-article ul {
  list-style: none;
  padding: 0;
}

.reader-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.video-article ul {
  counter-reset: video-list;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 34px;
  padding: 0;
}

.reader-list li,
.video-article ul li {
  color: var(--color-text-soft);
}

.video-article ul li {
  counter-increment: video-list;
  position: relative;
  min-height: 116px;
  padding: 18px 18px 18px 58px;
  border: 2px solid rgba(37, 48, 36, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(230, 255, 51, 0.12)),
    rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 30px rgba(37, 48, 36, 0.06);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.video-article ul li::before {
  content: counter(video-list, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-text-main);
  border-radius: 50%;
  background: var(--color-btn-hover);
  color: var(--color-text-main);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.video-article ul li::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 52px;
  bottom: 18px;
  width: 2px;
  background: rgba(37, 48, 36, 0.16);
}

.edited-transcript {
  margin-top: 46px;
  padding-top: 28px;
  border-top: 2px dashed rgba(37, 48, 36, 0.24);
}

.edited-transcript p {
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.video-post > p a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 26px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--color-text-main);
  color: var(--color-text-main);
}

.video-post > p a:hover,
.video-post > p a:focus-visible {
  background: #ff3bd7;
  outline: none;
}

.legal-document {
  max-width: 920px;
}

.legal-updated {
  color: var(--color-text-soft);
  font-weight: 700;
}

.legal-intro,
.legal-section {
  margin: 24px 0;
}

.legal-document p,
.legal-document li,
.legal-document div {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.legal-document h2 {
  margin-top: 48px;
  font-size: var(--fs-lg);
}

.legal-document h3 {
  margin: 24px 0 8px;
  font-size: var(--fs-md);
}

.legal-toc {
  margin: 32px 0;
  padding: 22px;
  border: 2px solid rgba(37, 48, 36, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.3);
}

.legal-toc h2 {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  opacity: 1;
  transform: none;
  animation: none;
}

.legal-toc ol {
  margin: 0;
  padding-left: 22px;
}

.legal-toc a {
  color: var(--color-text-main);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.legal-section {
  scroll-margin-top: 110px;
  padding-top: 1px;
}

/* Anchored sections must clear the sticky nav when a table-of-contents link lands. */
.legal-document :is(h1, h2, h3, h4)[id] {
  scroll-margin-top: 110px;
}

/* The US state-law category table is wider than a phone; scroll it, not the page. */
.legal-document .table-scroll {
  margin: 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-document table {
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.legal-document :is(th, td) {
  padding: 10px 12px;
  border: 1px solid rgba(37, 48, 36, 0.16);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-normal);
}

.legal-document th {
  background: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

/* Long URLs and email addresses must not push the document wider than the viewport. */
.legal-document a {
  overflow-wrap: anywhere;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 30px 0;
  border: 2px solid var(--color-text-main);
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-card);
}

.video-grid {
  display: grid;
  gap: 28px;
  margin: 32px 0;
}

.video-card {
  padding: 0;
}

.video-card h2 {
  margin-top: 0;
}

.video-placeholder {
  display: grid;
  place-items: center;
  min-height: 280px;
  margin: 30px 0;
  border: 2px dashed rgba(37, 48, 36, 0.28);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.28);
  color: var(--color-text-soft);
  font-weight: 700;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Click-to-load video facade ---------- */

.video-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(150deg, #253024, #101a10);
  color: var(--color-bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.video-facade-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-facade-poster,
.video-facade-media picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade-placeholder {
  color: rgba(247, 241, 227, 0.22);
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.video-facade-play {
  position: relative;
  width: 68px;
  height: 48px;
  transition: transform 160ms ease-out;
}

.video-facade-play svg {
  width: 100%;
  height: 100%;
}

.video-facade-play-bg {
  fill: rgba(20, 26, 19, 0.72);
}

.video-facade-play-arrow {
  fill: var(--color-bg);
}

.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
  transform: scale(1.08);
}

.video-facade:hover .video-facade-play-bg,
.video-facade:focus-visible .video-facade-play-bg {
  fill: #ff3bd7;
}

.video-facade-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(16, 26, 16, 0.86), rgba(16, 26, 16, 0));
}

.video-facade-action {
  font-size: var(--fs-sm);
  font-weight: 800;
}

.video-facade-meta {
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0.78;
}

.video-facade:focus-visible {
  outline: 3px solid var(--color-focus, #1b6ef3);
  outline-offset: -3px;
}

.investor-page {
  --investor-bg: #151d14;
  --investor-surface: rgba(247, 241, 227, 0.095);
  --investor-surface-strong: rgba(247, 241, 227, 0.14);
  --investor-text: #fff8e8;
  --investor-muted: #e7dcc0;
  --investor-accent: #e6ff33;

  background: var(--investor-bg);
  color: var(--investor-text);
}

.investor-page #circle-layer { display: none; }
.investor-page .flower-stem { --flower-stem-color: rgba(247, 241, 227, 0.58); }
.investor-page nav.main { background: rgba(21, 29, 20, 0.92); border-bottom-color: rgba(247, 241, 227, 0.28); }
.investor-page .logo,
.investor-page .nav-trigger,
.investor-page p,
.investor-page .industry-sub { color: var(--investor-text); }
.investor-page .industry-eyebrow,
.investor-page .feature-num,
.investor-page .price-badge,
.investor-page .contact-alt-links,
.investor-page .lead-status { color: var(--investor-muted); }
.investor-page .industry-eyebrow,
.investor-page .feature-num { color: var(--investor-accent); }
.investor-page .logo-sep { color: rgba(247, 241, 227, 0.48); }
.investor-page .logo-page { color: var(--investor-muted); }
.investor-page .logo-icon {
  --flower-petal-fill: #f8e773;
  --flower-petal-stroke: #fff4a8;
  --flower-petal-width: 2.35;
  --flower-aura-opacity: 1;
  --flower-aura-stroke: #e0a617;
  --flower-eye-fill: #7a5518;
  --flower-eye-stroke: #fff1a1;
  --flower-eye-center: #fff8c9;
}
.investor-page .flower-icon {
  --flower-petal-fill: #f6e681;
  --flower-petal-stroke: #5f6d22;
  --flower-petal-width: 2.25;
  --flower-aura-opacity: 1;
  --flower-aura-stroke: #6e4f1b;
  --flower-eye-fill: #6e4f1b;
  --flower-eye-stroke: #6e4f1b;
  --flower-eye-center: #fff4b0;
}
.investor-page .nav-trigger:hover,
.investor-page .nav-trigger.active,
.investor-page .nav-item:hover .nav-trigger { background: rgba(247, 241, 227, 0.16); }
.investor-page .nav-trigger svg { color: var(--investor-muted); }
.investor-page .btn-light,
.investor-page .btn-ghost { color: var(--investor-text); border-color: var(--investor-text); }
.investor-page .btn-light:hover,
.investor-page .btn-ghost:hover,
.investor-page .btn-light:focus-visible,
.investor-page .btn-ghost:focus-visible { color: var(--color-text-main); border-color: var(--investor-accent); background: var(--investor-accent); }
.investor-page .feature,
.investor-page .contact-panel {
  background: var(--investor-surface);
  border-color: rgba(247, 241, 227, 0.36);
}
.investor-page .feature-grid {
  grid-template-columns: 1fr;
  gap: 22px;
}
.investor-page .feature.has-image {
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.investor-page .feature.has-image .feature-art {
  min-height: 300px;
  border-radius: 0;
  background: rgba(21, 29, 20, 0.64);
  border-right: 1px solid rgba(247, 241, 227, 0.14);
}
.investor-page .feature.has-image .feature-art img {
  object-fit: contain;
}
.investor-page .feature.has-image .feature-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 46%, rgba(230, 255, 51, 0.12), transparent 42%);
  pointer-events: none;
}
.investor-page .feature.has-image .feature-copy {
  justify-content: center;
  min-height: 300px;
  padding: 36px;
}
.investor-page .feature p {
  color: var(--investor-muted);
}
.investor-page .contact-panel {
  background: var(--investor-surface-strong);
}
.investor-page .form-row label {
  color: var(--investor-text);
}
.investor-page .form-row input,
.investor-page .form-row select,
.investor-page .form-row textarea {
  background-color: rgba(255, 248, 232, 0.94);
  border-color: rgba(255, 248, 232, 0.76);
  color: var(--color-text-main);
}
.investor-page .form-row input:focus,
.investor-page .form-row select:focus,
.investor-page .form-row textarea:focus {
  border-color: var(--investor-accent);
  outline: 3px solid rgba(230, 255, 51, 0.22);
}
.investor-page .btn-primary {
  background: var(--investor-text);
  border-color: var(--investor-text);
  color: var(--color-text-main);
}
.investor-page .btn-primary:hover,
.investor-page .btn-primary:focus-visible {
  background: var(--investor-accent);
  border-color: var(--investor-accent);
  color: var(--color-text-main);
}
.investor-page footer,
.investor-page footer a {
  color: var(--investor-muted);
}

footer {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
  padding: 46px 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

footer a {
  color: var(--color-text-main);
  text-decoration: none;
  margin-left: 12px;
  font-weight: 700;
}

footer a:hover { background: var(--color-btn-hover); }

.reveal { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after {
  animation-play-state: paused !important;
}

body.motion-paused .flip-word {
  animation-play-state: running !important;
}

body.motion-paused .logo,
body.motion-paused h1,
body.motion-paused .industry-headline,
body.motion-paused .section-headline,
body.motion-paused .case-headline,
body.motion-paused .final-cta h2,
body.motion-paused p,
body.motion-paused .hero-sub,
body.motion-paused .industry-sub,
body.motion-paused .case-body,
body.motion-paused .company .lede,
body.motion-paused .hero-ctas,
body.motion-paused .hero-proof,
body.motion-paused .cta-column,
body.motion-paused .final-cta-buttons,
body.motion-paused .submit-row,
body.motion-paused .reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  body.motion-paused .flip-word {
    animation: none !important;
  }

  .flip-word {
    transition:
      opacity 190ms ease-out,
      transform 260ms cubic-bezier(0.22, 0.82, 0.22, 1),
      filter 190ms ease-out !important;
  }

  #circle-layer {
    display: none;
  }

  .logo,
  h1,
  .industry-headline,
  .section-headline,
  .case-headline,
  .final-cta h2,
  p,
  .hero-sub,
  .industry-sub,
  .case-body,
  .company .lede,
  .hero-ctas,
  .cta-column,
  .final-cta-buttons,
  .submit-row,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .flower-icon {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

}

@media (min-width: 821px) and (max-width: 960px) {
  .logo-name,
  .logo-sep { display: none; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .hero-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #upload-section {
    scroll-margin-top: 86px;
  }

  #map-workflow {
    scroll-margin-top: 86px;
  }

  .logo {
    gap: 6px;
    min-height: 30px;
    font-size: 0.95rem;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .logo-icon {
    height: 20px;
  }

  /* A stacked sheet, not a silent horizontal rail: every destination is reachable by
     scrolling the page, and none of them sit off the right edge unannounced. */
  .nav-links.is-open {
    display: flex;
  }

  /* The primary CTA belongs in the sheet on mobile; the hero keeps its own copy. */
  /* Inside the sheet the submenu expands in flow rather than floating over the page,
     so opening one does not hide the destinations below it. */
  .hero,
  .industry-hero,
  .funnel,
  .solution-section,
  .article,
  .company,
  .video-post,
  .video-article { padding: 54px 20px 56px; }

  .logo,
  h1,
  .hero-sub,
  .hero-ctas,
  .hero-proof,
  .story-carousel,
  .research-capture,
  .upload-card,
  .upload-tabs,
  .upload-zone,
  .submit-row,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-proof {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 2px 0 28px;
  }
  .hero-proof-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .hero-proof-item strong {
    font-size: 1.25rem;
  }
  .hero-proof-item span {
    margin-top: 0;
    font-size: 0.78rem;
  }

  .video-article ul {
    grid-template-columns: 1fr;
  }

  .video-article ul li {
    min-height: 0;
    padding: 16px 16px 16px 54px;
  }

  .video-article ul li::before {
    left: 14px;
    top: 16px;
  }

  .video-article ul li::after {
    left: 26px;
    top: 50px;
    bottom: 16px;
  }

  .hero-grid,
  .hero-layout,
  .case-grid,
  .funnel-grid,
  .feature-grid,
  .contact-form-grid,
  .solution-detail {
    grid-template-columns: 1fr;
  }

  .flower-stack { display: none; }
  .case-stats { grid-template-columns: 1fr; }
  .funnel-grid {
    gap: 16px;
    margin-top: 22px;
  }
  .funnel-left {
    gap: 12px;
  }
  .funnel-steps {
    display: grid;
    gap: 8px;
  }
  .funnel-step {
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }
  .funnel-step .funnel-step-title {
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 1.18;
  }
  .funnel-step p {
    font-size: 0.9rem;
    line-height: 1.35;
  }
  .upload-card {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }
  .pricing-anchor {
    margin-top: 2px;
    padding: 13px 14px;
    border-radius: 16px;
  }
  .pricing-anchor strong {
    font-size: 0.98rem;
  }
  .pricing-anchor p {
    font-size: 0.84rem;
    line-height: 1.35;
  }
  .upload-tabs {
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px;
    border: 2px solid rgba(37, 48, 36, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
  }
  .upload-tab {
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    font-size: 0.92rem;
    line-height: 1.1;
  }
  .upload-zone {
    margin-bottom: 14px;
    padding: 18px 12px 12px;
    border-radius: 16px;
  }
  .upload-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    font-size: 1.05rem;
  }
  .upload-title {
    font-size: 1.05rem;
    line-height: 1.18;
  }
  .upload-hint {
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .upload-picker {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-height: 0;
    margin-top: 14px;
    padding: 6px;
    border-radius: 16px;
    text-align: center;
  }
  .upload-picker-button {
    padding: 9px 12px;
  }
  .upload-picker-name {
    padding: 2px 8px 6px;
    text-align: center;
  }
  .form-row {
    margin-bottom: 12px;
  }
  .form-row label {
    font-size: 0.82rem;
  }
  .form-row input,
  .form-row select,
  .form-row textarea {
    min-height: 46px;
    border-radius: 14px;
    padding: 11px 12px;
    font-size: 16px;
  }
  .form-row textarea {
    min-height: 90px;
  }
  .submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 16px 0 0;
  }
  .submit-row .btn-primary {
    width: 100%;
    min-height: 46px;
  }
  .submit-row .price-badge {
    display: block;
    text-align: center;
    line-height: 1.35;
  }
  .feature-grid {
    gap: 14px;
    padding: 0 20px 56px;
  }
  .feature {
    min-height: 0;
    padding: 20px;
    border-radius: 18px;
  }
  .feature-num {
    margin-bottom: 10px;
  }
  .feature h3 {
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .feature p {
    font-size: 1rem;
    line-height: 1.45;
  }
  .feature ul {
    margin-top: 16px;
  }
  .feature li {
    padding: 10px 0;
    font-size: 0.98rem;
    line-height: 1.35;
  }
  .investor-page .feature.has-image {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .investor-page .feature.has-image .feature-art {
    min-height: 0;
    aspect-ratio: 1.55 / 1;
    border-right: 0;
    border-bottom: 1px solid rgba(247, 241, 227, 0.14);
  }
  .investor-page .feature.has-image .feature-copy {
    min-height: 0;
    padding: 22px;
  }
  .contact-submit-row {
    align-items: flex-start;
  }
  .contact-alt-links {
    justify-content: flex-start;
  }
  .article-infographic {
    width: calc(100vw - 40px);
  }
  .article-infographic img {
    border-radius: 14px;
  }
  .article-cta-band {
    width: calc(100vw - 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  .story-carousel {
    margin-top: 34px;
    border-radius: 20px;
  }
  .research-capture {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
    padding: 18px;
    border-radius: 20px;
  }
  .research-capture h2 {
    font-size: 1.24rem;
  }
  .research-capture p {
    font-size: 0.92rem;
  }
  .research-capture-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .research-capture-row input {
    min-height: 46px;
    font-size: 16px;
  }
  .research-capture-row .btn-primary {
    width: 100%;
    min-height: 46px;
  }
  .story-carousel-stage {
    height: auto;
    min-height: 0;
    border-radius: 18px 18px 0 0;
  }
  .story-slide,
  .story-slide.active {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .story-slide-media {
    min-height: 0;
    aspect-ratio: 1.08 / 1;
    padding: 12px;
    border-right: 0;
    border-bottom: 2px solid rgba(37, 48, 36, 0.12);
  }
  .story-slide-media img {
    max-height: none;
    border-radius: 12px;
  }
  .story-arrow {
    top: calc((100vw - 40px) * 0.46);
    width: 56px;
    height: 56px;
    font-size: 1.55rem;
  }
  .story-arrow-prev {
    left: -16px;
  }
  .story-arrow-next {
    left: auto;
    right: -16px;
  }
  .story-slide-copy {
    padding: 16px;
    min-height: 220px;
  }
  .story-step-label {
    margin-bottom: 8px;
    font-size: 0.72rem;
  }
  .story-slide-copy h3 {
    margin-bottom: 8px;
    font-size: 1.18rem;
    line-height: 1.1;
  }
  .story-slide-copy > p:last-of-type {
    font-size: 0.88rem;
    line-height: 1.34;
  }
  .story-slide-body {
    margin-bottom: 8px;
  }
  .story-slide-body p {
    margin-bottom: 0.48em;
    font-size: 0.88rem;
    line-height: 1.34;
  }
  .story-slide-highlight {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.78rem !important;
    line-height: 1.24 !important;
  }
  .story-carousel-controls {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(50% - 56px);
    padding-inline: calc(50% - 56px);
    border-radius: 0 0 18px 18px;
    scrollbar-width: none;
  }
  .story-carousel-controls::-webkit-scrollbar {
    display: none;
  }
  .story-step-trigger {
    flex: 0 0 112px;
    min-height: 52px;
    padding: 8px;
    font-size: 0.7rem;
    scroll-snap-align: center;
  }
  .story-step-trigger span {
    font-size: 0.64rem;
  }
  footer a { margin-left: 0; margin-right: 12px; }

  .industry-meta-row {
    flex-wrap: wrap;
  }
}

@media (min-width: 821px) and (max-width: 1320px) {
  .hero,
  .industry-hero,
  .funnel,
  .solution-section,
  .article,
  .company,
  .video-post,
  .case-study,
  .final-cta,
  footer {
    padding-left: 140px;
  }
}

/* ---------- Navigation breakpoint ----------
   Wider than the 820px layout breakpoint on purpose: the full rail plus the CTA
   needs about 1000px, and between 821px and 1000px it used to overflow the
   viewport. The menu button takes over before that happens. */
@media (max-width: 1000px) {
  nav.main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 14px 10px;
  }

  nav.main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
    margin-top: 8px;
    padding-bottom: 6px;
    overflow: visible;
  }

  .nav-item {
    width: 100%;
  }

  .nav-trigger,
  .nav-cta {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    gap: 8px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .nav-trigger svg {
    width: 13px;
    height: 13px;
    margin-left: auto;
  }

  .nav-cta {
    display: inline-flex;
    margin-top: 6px;
    justify-content: center;
  }

  .nav-dropdown {
    position: static;
    width: auto;
    max-height: none;
    margin: 2px 0 6px;
    padding: 8px 10px;
    overflow: visible;
  }

  .nav-dropdown a {
    min-height: 44px;
  }
}