/* ============================================================================
   styles.css — Vectorsolv page-specific custom classes (the MAST "20%").
   Layout primitives + tokens come from mast.css / tokens.css.

   This file is the ONLY one migrated to Webflow (the custom "20%"). mast.css is
   the framework MIRROR (classes that already exist in the MAST clone) and must
   NOT be migrated. Classes below were moved out of mast.css because they are
   custom (not present in the clone): display-*, text-*, eyebrow-wrapper/dot,
   btn (+combos), and the extended u-* utilities.
   ============================================================================ */

/* ---- Design-system customs (moved from mast.css; migrated) ----------------- */
/* Display headings — MAST has no Display token (see varMap/tokenLiterals) */
.display-1 {
  margin: 0 0 0.5em;
  font-family: var(--font-primary);
  color: var(--theme-text);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
}

.display-3 {
  margin: 0 0 0.5em;
  font-family: var(--font-primary);
  color: var(--theme-text);
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
}

/* Body text sizes */
.text-lg {
  font-size: var(--fs-text-lg);
  line-height: var(--lh-relaxed);
}

.text-md {
  font-size: var(--fs-text-md);
  line-height: var(--lh-relaxed);
}

.text-sm {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-relaxed);
}

/* Eyebrow wrapper + diamond marker (the `eyebrow` text class is framework) */
/* Override MAST's native eyebrow (uppercase in the clone) to match Figma. */
.eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
}

.eyebrow-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--theme-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Buttons (MAST's native button class is `button`; this is the project's btn) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-text);
  font-weight: var(--fw-medium);
  line-height: 1.25rem;
  color: var(--color-white);
  background: var(--color-accent-dark);
  border: var(--stroke-divider) solid var(--color-accent-dark);
  border-radius: var(--radius-small);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn.cc-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn.cc-secondary:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--color-white);
}

.btn.cc-text {
  background: transparent;
  border-color: transparent;
  color: var(--theme-text);
  padding-inline: 0.25rem;
}

.btn.cc-text:hover {
  color: var(--theme-accent);
  background: transparent;
}

/* Extended utilities (beyond MAST's fixed set) */
.u-bg-foreground {
  background-color: var(--theme-foreground);
}

.u-bg-neutral-darker {
  background-color: var(--color-neutral-darker);
}

.u-bg-neutral-dark {
  background-color: var(--color-neutral-dark);
}

.u-text-muted {
  color: var(--theme-text-muted);
}

.u-text-lightest {
  color: var(--color-neutral-lightest);
}

.u-text-lightgray {
  color: var(--color-lightgray);
}

/* Used by the rose run inside the hero <h1>; only in mast.css (not migrated),
   so mirror it here so the migrated style carries the accent color. */
.u-text-primary {
  color: var(--color-primary);
}

.u-mt-xl {
  margin-top: 3rem;
}

.u-mb-xl {
  margin-bottom: 3rem;
}

.u-radius-sm {
  border-radius: var(--radius-small);
}

.u-radius-md {
  border-radius: var(--radius-medium);
}

.u-radius-lg {
  border-radius: var(--radius-large);
}

.u-shadow-lg {
  box-shadow: var(--shadow-large);
}

.u-shadow-xl {
  box-shadow: var(--shadow-xxlarge);
}

/* ---- Hero / Header ------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 900px;
  padding-block: var(--padding-global);
  overflow: hidden;
  background: var(--theme-background);
}

.hero-pattern {
  position: absolute;
  inset: 0 -3.4% 0 -3.5%;
  z-index: 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  width: 100%;
}

.hero-top {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hero-logo {
  display: inline-flex;
  color: var(--theme-text);
}

.logo-svg {
  display: block;
  height: 18px;
  width: auto;
}

.btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.hero-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 867px;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero-title {
  margin: 0;
}

.hero-bottom {
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
}

.hero-lead {
  flex: 0 1 755px;
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.hero-actions {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

@media (max-width: 991px) {
  .hero {
    min-height: 0;
  }

  /* desktop packs content to top+bottom of a tall hero; on mobile pack to the
     top so the buttons sit right under the copy instead of a big empty gap. */
  .hero-inner {
    justify-content: flex-start;
    gap: 2.5rem;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  /* desktop basis 755px is a WIDTH (row); in a column it becomes a 755px HEIGHT
     → reset so the lead is only as tall as its text. */
  .hero-lead {
    flex: 0 1 auto;
  }

  .hero-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 478px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* ---- Problem / Feature grid (0:302) -------------------------------------- */
.problem {
  position: relative;
  padding-top: var(--section-pad-md);
}

.problem-heading {
  max-width: 47rem;
  margin-top: 0;
}

/* Explicit grid (3:1 ≈ MAST col-lg-9/col-lg-3) — see evolve-features note: the
   MAST .row/.col grid doesn't survive the importer, a plain grid migrates 1:1. */
.problem-media {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: var(--gap-main);
  margin-bottom: 3rem;
  align-items: stretch;
}

.problem-image {
  width: 100%;
  height: 633px;
  max-height: 40vw;
  object-fit: cover;
  border-radius: var(--radius-small);
}

.problem-aside {
  display: flex;
  align-items: flex-start;
  padding-left: 1.5rem;
  border-left: var(--stroke-divider) solid var(--theme-border);
}

/* Local slot wrapper: transparent to layout (becomes a MAST slot / Card Body in
   Webflow, where children are nested component instances). */
.u-slot { display: contents; }

/* MAST row combo for the problem grid — keeps the design's asymmetric gap
   (row 2.5rem / column 1.5rem) and max width without editing the base .row. */
.row.cc-problem-grid { max-width: 867px; gap: 2.5rem 1.5rem; }

.problem-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
  border-left: var(--stroke-divider) solid var(--theme-border);
}

.problem-card__icon {
  width: 28px;
  height: 28px;
}

.problem-card__tag {
  margin: 0;
  font-size: var(--fs-tagline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  color: var(--color-neutral-lightest);
}

.problem-card__title {
  margin: 0;
}

.problem-card__text {
  margin: 0;
  color: var(--theme-text);
}

/* Decorative accent square cluster (Figma node 0:303) — 5×9 grid, ~78px cells */
.deco-squares {
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(230px, 24vw, 340px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  filter: blur(10px);
}

@media (max-width: 991px) {
  .problem-media {
    grid-template-columns: 1fr;
  }

  .problem-aside {
    border-left: 0;
    padding-left: 0;
    padding-top: 1rem;
  }

  .problem-image {
    height: auto;
    max-height: none;
    aspect-ratio: 978 / 633;
  }

  .deco-squares {
    display: none;
  }
}

/* ---- Evolve featured panel (0:364) --------------------------------------- */
.evolve {
  padding-block: var(--padding-global);
}

.evolve-panel {
  position: relative;
  overflow: hidden;
  padding: var(--padding-global) var(--section-pad-sm);
  background: var(--theme-foreground);
  border-bottom: 2px solid var(--color-accent-dark);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  box-shadow: var(--shadow-xxlarge);
}

.evolve-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .6;
}

/* single glow, top-left */
.evolve-glow--tl {
  top: -200px;
  left: -160px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--color-accent-darker) 0%, transparent 62%);
}

.evolve-lines {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  max-width: none;
  opacity: 1;
}

.evolve-lines--bl {
  left: -510px;
  bottom: -107px;
  width: 2000px;
  height: 1433px;
}

.evolve-lines--tr {
  right: -537px;
  top: -563px;
  width: 2000px;
  height: 1433px;
  transform: rotate(180deg);
}

/* 4-col grid so the heading aligns with the 2nd card: heading = row 1 / col 2→end
   (= 900px, starting at card 2), cards = row 2 / full width. Matches Figma. */
.evolve-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3rem;
  row-gap: var(--section-pad-md);
}

.evolve-intro {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.evolve-title {
  margin: 0;
  max-width: 867px;
}

.evolve-lede {
  max-width: 802px;
  margin: 0;
}

.evolve-actions {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.evolve-or {
  color: var(--theme-text);
}

.evolve-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-accent-lightest);
  text-decoration: underline;
  font-family: var(--font-secondary);
  font-weight: var(--fw-medium);
}

/* Explicit CSS grid instead of MAST .row/.col — the MAST 12-col grid is
   variant-based in the Webflow clone and the importer can't apply it cleanly
   (Webflow injects col-lg-4/col-shrink). A plain grid migrates 1:1. */
.evolve-features {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3rem;
  row-gap: 2.5rem;
}

.evolve-feature {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
}

.evolve-feature__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 2.5rem;
}

.evolve-feature__tag {
  margin: 0 0 .5rem;
  font-size: var(--fs-tagline);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-lightest);
}

.evolve-feature__title {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

@media (max-width: 991px) {

  /* stack: heading full width above the cards */
  .evolve-inner {
    grid-template-columns: 1fr;
  }

  .evolve-intro {
    grid-column: 1 / -1;
  }

  .evolve-features {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .evolve-actions {
    gap: 1.5rem;
  }

  .evolve-features {
    grid-template-columns: 1fr;
  }
}

/* ---- Control layer (image + text) (0:412) -------------------------------- */
/* Left text aligned to the site container; right image bleeds to the edge. */
.imgtext-row {
  display: flex;
  gap: 3rem;
  align-items: stretch;
}

.imgtext-copy {
  /* 632px text measure + the site container's left gutter, so the copy aligns
     to the container content edge while the row bleeds full-width. Gutter mirrors
     the MAST container: max(6vw, (100vw - 1440px)/2). No local --gutter custom
     prop (the CSS migrator drops those). */
  flex: 0 1 auto;
  width: calc(632px + max(6vw, calc((100vw - 1440px) / 2)));
  padding-left: max(6vw, calc((100vw - 1440px) / 2));
  padding-bottom: var(--section-pad-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: var(--stroke-divider) solid var(--theme-border);
}

.imgtext-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.imgtext-title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--theme-text);
}

.imgtext-foot {
  margin: 0;
}

.imgtext-media {
  flex: 1 1 0%;
  min-width: 0;
}

.imgtext-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: left center;
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}

@media (max-width: 991px) {
  .imgtext-row {
    flex-direction: column;
    gap: 2rem;
  }

  .imgtext-copy {
    width: auto;
    flex: none;
    padding-inline: var(--padding-global);
    padding-bottom: 0;
    border-bottom: 0;
  }

  .imgtext-image {
    height: auto;
    aspect-ratio: 696 / 500;
    border-radius: var(--radius-small);
  }
}

/* ---- Levers (numbered table) (0:422) ------------------------------------- */
.levers {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-darkest);
}

/* Top row mirrors the table grid (num + title | desc) so the heading aligns
   with the lever descriptions below; the line-art fills the left two columns. */
.levers-top {
  position: relative;
  display: grid;
  grid-template-columns: 85px 535px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: var(--section-pad-md);
}

.levers-art {
  grid-column: 1 / 3;
  /* num + title columns */
  position: relative;
  align-self: stretch;
  min-height: 360px;
  overflow: visible;
}

.levers-art-img {
  position: absolute;
  /* Anchored to the cell (fixed 644px = 85+gap+535), NOT the viewport — so it
     stays aligned with the columns at any width (vw broke once the container caps
     at 1440). Figma: art 1314×941 at section (-462,-267); cell-left = content-left
     = section-x 64, heading-top = 64 → -526px / -331px relative to the cell.
     Fixed width+height (the SVG has a broken 300×150 intrinsic). */
  left: -526px;
  top: -331px;
  width: 1314px;
  height: 941px;
  max-width: none;
}

.levers-head {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.levers-title {
  margin: 0;
  font-size: var(--fs-display-3);
}

.levers-table {
  display: flex;
  flex-direction: column;
}

.lever-row {
  display: grid;
  grid-template-columns: 85px 535px 1fr;
  gap: 1.5rem;
  align-items: end;
  padding-block: 1.25rem;
  border-bottom: var(--stroke-divider) solid var(--color-accent-darker);
}

.lever-num {
  font-size: var(--fs-h6);
  font-weight: 300;
  line-height: var(--lh-normal);
  color: var(--color-accent-dark);
  font-variant-numeric: lining-nums tabular-nums;
}

.lever-title {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.lever-desc {
  margin: 0;
  font-size: var(--fs-text-md);
  line-height: var(--lh-relaxed);
}

@media (max-width: 991px) {
  .levers-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .levers-art {
    display: none;
  }

  .levers-head {
    grid-column: 1;
  }

  .lever-row {
    grid-template-columns: 64px 1fr;
  }

  .lever-desc {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .lever-row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .lever-desc {
    grid-column: 1;
  }
}

/* ---- Control compounds (benefit grid + image) (0:507) -------------------- */
.compounds {
  background: var(--color-neutral-darkest);
}

.compounds-head {
  max-width: 644px;
  margin-bottom: var(--section-pad-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.compounds-title {
  margin: 0;
  font-size: var(--fs-h1);
}

.compounds-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  column-gap: 1.5rem;
  row-gap: 0;
}

.compounds-photo {
  grid-column: 3 / span 2;
  grid-row: 1 / span 3;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.compound-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: var(--stroke-divider) solid var(--theme-border);
}

.compound-item__icon {
  width: 28px;
  height: 28px;
}

.compound-item__text {
  margin: 0;
  font-size: var(--fs-text-lg);
  line-height: var(--lh-relaxed);
}

@media (max-width: 991px) {
  .compounds-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .compounds-photo {
    grid-column: 1 / span 2;
    grid-row: auto;
    aspect-ratio: 644 / 648;
    max-height: 420px;
    margin-top: 1.5rem;
  }
}

@media (max-width: 767px) {
  .compounds-grid {
    grid-template-columns: 1fr;
  }

  .compounds-photo {
    grid-column: 1;
  }
}

/* ---- Testimonial (0:558) ------------------------------------------------- */
.testimonial {
  position: relative;
  overflow: hidden;
}

.testimonial-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1545px;
  height: 341px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-accent-darkest) 0%, transparent 80%);
  opacity: .5;
  filter: blur(30px);
}

.quote-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--theme-foreground);
  border: var(--stroke-divider) solid var(--theme-border);
  border-radius: var(--radius-small);
}

.quote-media {
  flex: 1 1 0%;
  min-width: 0;
}

.quote-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--section-pad-md);
  padding: var(--section-pad-sm);
}

.quote-lead {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.quote-text {
  margin: 0;
  padding: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--theme-text);
}

.quote-author {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-top: 1.5rem;
  border-top: var(--stroke-divider) solid var(--theme-border);
}

.quote-author__name {
  margin: 0;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.quote-author__role {
  margin: 0;
  flex: 1;
  font-size: var(--fs-text);
  color: var(--theme-text);
}

@media (max-width: 991px) {
  .quote-card {
    flex-direction: column;
  }

  .quote-media {
    min-height: 360px;
  }
}

@media (max-width: 767px) {
  .quote-author {
    flex-direction: column;
    gap: .25rem;
  }
}

/* ---- FAQ (0:580) --------------------------------------------------------- */
.faq {
  position: relative;
  overflow: hidden;
  padding-top: var(--padding-global);
}

.faq-pattern {
  position: absolute;
  right: 0;
  top: 60%;
  width: 384px;
  height: 388px;
  z-index: 0;
  opacity: .8;
  pointer-events: none;
}

.faq-title {
  margin: 0 0 var(--section-pad-md);
  font-size: var(--fs-h1);
  max-width: 644px;
}

.faq-list {
  max-width: 866px;
  margin-inline: auto;
}

.accordion-trigger {
  font-size: var(--fs-h6);
  padding-block: 1.25rem;
}

.faq-list details:not([open]) .accordion-trigger,
.faq-list details:not([open]) {
  opacity: .92;
}

.faq-list details:not([open]) .accordion-trigger {
  color: var(--theme-text);
  opacity: .8;
}

.faq-list details[open] {
  border-bottom-color: var(--theme-accent);
}

.faq-list details[open] .accordion-trigger {
  opacity: 1;
  color: var(--theme-text);
}

.accordion-content {
  max-width: 768px;
}

/* Arrow: hidden by default; only the active item shows it (left, accent) */
.accordion-trigger {
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}

.accordion-q {
  flex: 1 1 auto;
}

.accordion-arrow {
  flex: 0 0 auto;
  width: 0;
  height: 32px;
  opacity: 0;
  overflow: hidden;
  color: var(--theme-accent);
  transition: width .3s ease, opacity .3s ease, margin-right .3s ease;
}

.faq-list details[open] .accordion-arrow {
  width: 32px;
  opacity: 1;
  margin-right: 1.5rem;
}

/* Open/close motion (animate height; needs interpolate-size for 0→auto) */
.faq-list details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
  transition-behavior: allow-discrete;
}

.faq-list details[open]::details-content {
  block-size: auto;
}

/* ---- CTA + footer (0:613) ------------------------------------------------ */
.cta {
  padding-top: 0;
}

.cta-card {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad-sm);
  border-radius: var(--radius-small);
  background: var(--theme-foreground);
}

/* Background layers behind the content. The card texture (Figma imgCta13) is the
   exported PNG — already rotated/cropped — stretched to the card like Figma's
   `size-full` fill; the panel glow (imgColumn) is cta-col.svg. */
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.cta-bg--img {
  object-fit: fill;
}

.cta-bg--fade {
  background: linear-gradient(180deg, rgba(2, 6, 24, 0) 0%, rgba(2, 6, 24, .5) 100%);
}

/* Lift the card's own content above the bg layers. position/z-index folded into
   the single-class rules below (was `.cta-card > .cta-row, .cta-card > .cta-footer`,
   a child-combinator the importer can't migrate — these classes are unique to the
   card so the scoping is unnecessary). */
.cta-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 3rem;
  align-items: stretch;
  margin-bottom: var(--section-pad-sm);
}

.cta-lead {
  width: 699px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.cta-logo {
  height: 18px;
  width: 168px;
  color: var(--theme-text);
}

.cta-headline {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.cta-panel {
  position: relative;
  overflow: hidden;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 1rem 1.5rem 1.5rem;
  background: var(--color-accent-darkest);
  /* #68252c — glow via the cta-col.svg layer */
}

.cta-panel__arrows {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 236px;
  height: 169px;
  max-width: none;
  opacity: .5;
  pointer-events: none;
}

.cta-panel__text {
  position: relative;
  z-index: 1;
  margin: 0;
}

.cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: var(--section-pad-sm);
  border-top: var(--stroke-divider) solid var(--color-neutral-light);
}

.cta-copy {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--fs-text-sm);
  color: var(--color-neutral-lighter);
}

.cta-links {
  display: flex;
  gap: 3rem;
  align-items: center;
  font-family: var(--font-secondary);
  font-size: var(--fs-text-sm);
}

.cta-link {
  color: var(--color-neutral-lightest);
  text-decoration: underline;
}

.cta-loc {
  color: var(--color-neutral-light);
}

@media (max-width: 991px) {
  .cta-row {
    flex-direction: column;
  }

  .cta-lead {
    width: 100%;
    max-width: none;
  }

  .cta-panel__arrows {
    display: none;
  }
}

@media (max-width: 767px) {
  .cta-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-links {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
  }
}

/* ---- Future-proof comparison table (0:457) ------------------------------- */
.compare {
  position: relative;
  overflow: hidden;
}

.compare-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 58% at 50% 50%, var(--color-accent-darker) 0%, rgba(153, 47, 61, .4) 45%, transparent 78%);
}

.compare-card {
  position: relative;
  overflow: hidden;
  max-width: 1090px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--section-pad-md);
  padding: var(--section-pad-sm);
  background: var(--theme-foreground);
  border: 2px solid var(--theme-border);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  box-shadow: var(--shadow-xxlarge);
}

.compare-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 408px;
  height: 247px;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

.compare-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.compare-title {
  margin: 0;
  font-size: var(--fs-h1);
  max-width: 528px;
}

.compare-lede {
  margin: 0;
  max-width: 680px;
}

.compare-table {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-small);
  overflow: hidden;
}

.compare-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.compare-col--vs {
  position: relative;
  border-left: 2px solid var(--color-accent);
  background: radial-gradient(100% 100% at 0% 0%, rgba(244, 63, 94, 0.30) 0%, rgba(244, 63, 94, 0.00) 100%)
}

.compare-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 80px;
  padding: 1.25rem 1.5rem;
  font-size: var(--fs-text);
  color: var(--theme-text);
  border-bottom: var(--stroke-divider) solid var(--theme-border);
}

.compare-cell--vs {
  border-bottom-color: var(--color-neutral);
  font-family: var(--font-secondary);
  font-weight: var(--fw-medium);
}

.compare-cell:last-child {
  border-bottom: 0;
}

.compare-cell--head {
  min-height: 72px;
}

.compare-colname {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  color: var(--color-neutral-lighter);
}

.compare-logo {
  height: 16px;
  width: auto;
  color: var(--theme-text);
}

.compare-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

@media (max-width: 767px) {
  .compare-pattern {
    display: none;
  }

  .compare-cell {
    padding: 1rem;
    min-height: 64px;
    gap: 0.5rem;
  }
}

/* Mobile spacing: section-specific paddings that don't otherwise scale down,
   tightened so content gets more width and less vertical air on small screens. */
@media (max-width: 767px) {
  .problem {
    padding-top: var(--section-pad-sm);
  }

  /* 80px → 48px */
  .compare-card {
    padding: 1.5rem;
    gap: 2rem;
  }

  /* 48px → 24px */
  .evolve-panel {
    padding: var(--padding-global) 1.5rem;
  }

  /* 48px sides → 24px */
  .evolve-inner {
    gap: 2.5rem;
  }

  .quote-body {
    padding: 1.5rem;
    gap: 2rem;
  }

  /* 48px → 24px */
  .imgtext-copy {
    padding-bottom: 2rem;
  }
}

/* Flattened from descendant selectors → native Webflow classes */
.u-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u-layer {
  position: relative;
  z-index: 1;
}

/* ── Hero pattern motion ────────────────────────────────────────────────────
   Each square (inline <svg> <path>) pops in on load (gently staggered) and the
   JS in index.html brightens squares near the cursor. Descendant + @keyframes
   rules → don't migrate; mirrored in dist/webflow-custom-code.css for Webflow. */
.hero-pattern svg path {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-pattern svg path {
    animation: hp-pop .7s ease backwards;
  }

  .hero-pattern svg path:nth-child(6n+1) {
    animation-delay: 0s;
  }

  .hero-pattern svg path:nth-child(6n+2) {
    animation-delay: .07s;
  }

  .hero-pattern svg path:nth-child(6n+3) {
    animation-delay: .14s;
  }

  .hero-pattern svg path:nth-child(6n+4) {
    animation-delay: .21s;
  }

  .hero-pattern svg path:nth-child(6n+5) {
    animation-delay: .28s;
  }

  .hero-pattern svg path:nth-child(6n) {
    animation-delay: .35s;
  }
}

@keyframes hp-pop {
  from {
    opacity: 0;
    transform: scale(.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Scroll reveal ──────────────────────────────────────────────────────────
   IntersectionObserver (index.html / custom-code) adds .is-inview as each
   [data-reveal] enters view. Gated on html.is-reveal-ready (added by JS only
   when IO is supported + motion allowed) so without JS / reduced-motion nothing
   is hidden. Same subtle fade-up as the stagger → harmonic. Descendant rules →
   don't migrate; mirrored in dist/webflow-custom-code.css for Webflow. */
html.is-reveal-ready [data-reveal] {
  transition: opacity 1.6s ease, transform 1.6s ease;
}

html.is-reveal-ready [data-reveal]:not(.is-inview):not(.compare-pattern) {
  opacity: 0;
  transform: translateY(16px);
}

/* compare-pattern: its 8 squares materialize (scale pop) when scrolled into view */
.compare-pattern[data-reveal] path {
  transform-box: fill-box;
  transform-origin: center;
}

html.is-reveal-ready .compare-pattern[data-reveal]:not(.is-inview) path {
  opacity: 0;
  transform: scale(.6);
}

html.is-reveal-ready .compare-pattern[data-reveal].is-inview path {
  animation: hp-pop 1.6s ease forwards;
}

.compare-pattern[data-reveal].is-inview path:nth-child(4n+1) {
  animation-delay: 0s;
}

.compare-pattern[data-reveal].is-inview path:nth-child(4n+2) {
  animation-delay: .08s;
}

.compare-pattern[data-reveal].is-inview path:nth-child(4n+3) {
  animation-delay: .16s;
}

.compare-pattern[data-reveal].is-inview path:nth-child(4n) {
  animation-delay: .24s;
}