/* ─── Base ───
   The page used to pull all of this from /reframe/site.css, which is 290 rules
   for the Hebrew site and three @font-face declarations pointing at a CDN that
   answers with no CORS header — three failed requests on every load, for a font
   nothing here uses now. The handful of rules this page actually needed are
   inlined instead, so that stylesheet is no longer loaded.

   `overflow-x: clip` rather than `hidden`: hidden makes the element a scroll
   container, and on body that reserves a scrollbar gutter, which showed as a
   strip down the edge of the full-bleed hero. */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
}

body {
  background: #fff;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid #ef0385;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Glue for the 1:1 Webflow port (see src/routes/wfSectionsHtml.ts).
   Every rule in /reframe/wf/webflow.css was rewritten to sit under `.wf`, so
   the export's own resets stop at the wrapper; this file adds only what the
   page around it needs. */

/* This route drops `.stage`'s cream gutter altogether and goes white, so the
   hero and the ported sections run edge to edge without negative margins. */
.stage--light {
  padding: 0;
  background: #fff;
}

.wf {
  direction: ltr;
  position: relative;
  /* Transparent on purpose: the first section carries the export's own
     `.hero-overlap-section`, which rides up over the hero with rounded top
     corners. An opaque wrapper painted over exactly that overlap. */
  background: transparent;
}

/* The wrapper above already lifts this section over the hero and rounds it, so
   the export's own overlap is zeroed out — otherwise the two stack and the
   panel climbs 96px into the hero. */
.hx-hero + .wf .hero-overlap-section {
  margin-top: 0;
  border-radius: 0;
}

/* ─── Video frame ───
   The Figma export (3a0e2f0a…html), markup and class names kept as they came.
   Two things had to be carried across by hand:

   1. The export puts its dark backdrop on `body`, as a base64 image in a second
      <style> block. Without it the frame — white at 8% around a white screen —
      is invisible. Extracted to /reframe/sections/video-frame-bg.webp and
      placed on .hero-section, with the export's own background sizing.
   2. Its sizes were fixed pixels on a 1254px board and this slot is ~590px
      wide, so each one is the same fraction of that board (67/1254 padding,
      113/1120 radius, 41/1120 padding, 68/1037 inner radius, 128/1120 glyph),
      with aspect-ratio holding the square. */
.hero-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.34%;
  background-image: url("/reframe/sections/video-frame-bg.webp");
  /* `cover`, not the export's `100% auto`: the backdrop is square (1254x1254)
     but this block is taller than it is wide once the padding is added, so
     width-fitting left a black band under the artwork. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}

.outer-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff14;
  border-radius: 10.09%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.66%;
}

.inner-frame {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 6.56%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The demo clip fills the screen. The source is a centre-cut square, so
   `cover` has nothing to crop — it only guards against rounding. */
.inner-frame > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

/* iOS paints its own big play button over an inline video, and Safari keeps a
   controls layer around even with the attribute off. Both are hidden here so
   the clip reads as a looping image, not a player. */
.inner-frame > video::-webkit-media-controls,
.inner-frame > video::-webkit-media-controls-panel,
.inner-frame > video::-webkit-media-controls-overlay-play-button,
.inner-frame > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 20px;
  }
  .outer-frame {
    border-radius: 40px;
    padding: 16px;
  }
  .inner-frame {
    border-radius: 28px;
  }
}

/* ─── Typography ───
   One family for the whole page. The hero and header were already Poppins; the
   ported sections shipped with Satoshi Variable, so the export's two family
   tokens are repointed here.

   Satoshi is a variable font and the export sets weight through
   `font-variation-settings: "wght" N` with no `font-weight` alongside it.
   Poppins is a set of static faces, which ignores that property — so every one
   of those rules is mirrored below as a real font-weight. Without this the
   headings would all quietly drop to 400. */
.stage--light {
  font-family: "Poppins", sans-serif;
}

.wf {
  --_typography---family-body: "Poppins", sans-serif;
  --_typography---family-title: "Poppins", sans-serif;
}

/* Five rules in the export name Satoshi directly instead of going through the
   tokens, so repointing the tokens alone left the buttons behind. */
.wf .button-primary,
.wf .button-pagination,
.wf .sign-up,
.wf .log-in,
.wf .link-primary {
  font-family: "Poppins", sans-serif;
}

.wf,
.wf .dropdown-menu-category {
  font-weight: 400;
}

.wf .text-weight-medium {
  font-weight: 500;
}

.wf h1,
.wf h5,
.wf .heading-medium,
.wf .heading-xsmall,
.wf .heading-xxsmall,
.wf .text-weight-semibold,
.wf .button-primary,
.wf .button-pagination,
.wf .nav-category,
.wf .nav-link,
.wf .link-primary {
  font-weight: 600;
}

.wf h2,
.wf h3,
.wf h4,
.wf h6,
.wf .heading-small,
.wf .heading-large,
.wf .logo-text,
.wf strong,
.wf b {
  font-weight: 700;
}

/* A hand-set line break in a heading. Dropped on small screens, where the
   text should wrap wherever it fits rather than at the point chosen for a
   wide viewport. */
.wf .wf-brk {
  display: none;
}

@media (min-width: 768px) {
  .wf .wf-brk {
    display: block;
  }

  /* The heading block is 672px, and the second line needs about 700px at 48px,
     so the break alone still left three lines. Widened just for the heading
     that carries a hand-set break. */
  .wf .section-heading:has(.wf-brk) {
    max-width: 900px;
  }
}

/* ─── "More Than a Converter" (WF5) ───
   Hand-authored replacement for the export's alternating platform blocks. Light
   ground, four cards in a 2x2, using the same card language as the flow steps
   above it so the two light sections read as one system. */
.wy {
  --wy-accent: #ef0385;
  --wy-accent-2: #7d2ec8;
  --wy-ink: #18181b;
  --wy-muted: #6b6675;
  --wy-line: #ece9f1;
  padding: clamp(64px, 7vw, 104px) 24px clamp(72px, 8vw, 120px);
  color: var(--wy-ink);
}

/* Kept out of the flow entirely — it carries only the gradient definition. */
.wy .wy-defs {
  position: absolute;
}

.wy .wy-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.wy .wy-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.wy .wy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--wy-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--wy-muted);
}

.wy .wy-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wy-accent), var(--wy-accent-2));
}

.wy .wy-h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.wy .wy-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--wy-muted);
}

/* Two up. One column below 760px, where a half-width card would hold two words
   a line. */
.wy .wy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

.wy .wy-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  background: #fff;
  border-radius: 20px;
  /* The flow steps' shadow, to the value: a tight seat plus a wide soft drop,
     both near-transparent. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.07);
}

.wy .wy-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(239, 3, 133, 0.08), rgba(125, 46, 200, 0.08));
  box-shadow: inset 0 0 0 1px rgba(125, 46, 200, 0.12);
}

.wy .wy-mark svg {
  display: block;
  /* Height-driven: the Figma-to-WordPress mark is a 44x24 pair, the other three
     are 24x24 squares, so a shared width would shrink the pair to nothing. */
  width: auto;
  height: 24px;
  max-width: none;
}

.wy .wy-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.wy .wy-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wy-muted);
}

/* ─── Flow steps as cards ───
   The three steps were bare stacks on the page ground. Each is a panel now:
   white, rounded, and lifted by a two-part black shadow — a tight 1px seat so
   the edge is legible against a white section, and a wide soft drop for the
   lift. Both are near-transparent, which is what keeps it from reading as a
   heavy box. */
.wf .features-grid .feature-grid-item {
  background: #fff;
  border-radius: 20px;
  padding: 14px 14px 26px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.07);
}

/* The clip keeps its own radius but has to sit inside the card's, so it is
   pulled in a notch — a rounded rectangle inside a rounded rectangle looks
   wrong at equal radii. */
.wf .features-grid .feature-image-wrapper {
  border-radius: 12px;
}

/* The copy needs the side padding the media does not: the clip runs to the
   card's inner edge, the text should not. */
.wf .features-grid .feature-text-wrapper {
  padding: 0 10px;
}

/* ─── Flow step marks + numerals ───
   A row above each step's heading: the brand the step is about, then its
   number. It sits inside .feature-text-wrapper, which is centred by default and
   left-aligned by `.is-left-aligned`; `align-self: inherit` makes the row
   follow whichever is in force rather than pinning it one way. */
.wf .flow-step-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  align-self: inherit;
  margin-bottom: 4px;
}

/* A light tile, the counterpart of the hero's frosted one: this section is
   white, so the mark is lifted by a hairline ring and a soft drop rather than
   by a translucent film. */
.wf .flow-step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(24, 24, 27, 0.08),
    0 4px 14px rgba(125, 46, 200, 0.1);
}

.wf .flow-step-mark svg,
.wf .flow-step-mark img {
  display: block;
  width: auto;
  /* Height-driven: the three marks are different aspect ratios (Figma is
     taller than wide, WordPress is a circle, the ReFrame R is nearly square),
     so a shared width would size them unevenly. */
  height: 22px;
  max-width: none;
}

.wf .flow-step-num {
  /* Poppins by name rather than by inheritance: this section runs in the
     export's own stack, which is not Poppins. */
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  /* Brand gradient clipped to the glyphs, with the pink left as the fallback
     colour for anything that cannot clip a background to text. */
  color: #ef0385;
  background: linear-gradient(120deg, #ef0385, #7d2ec8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Flow steps: animated screen recordings ───
   All three are screen captures, each a fraction off the others (900x544,
   900x546, 900x542). Pinning them to one ratio keeps the three cards the same
   height so the row of headings below them stays aligned; the few pixels that
   costs are cropped. */
.wf .feature-motion {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1975 / 1200;
  object-fit: cover;
  /* The wrapper's 1rem radius already clips, but Safari has historically let
     video paint past a rounded overflow ancestor; matching it here holds. */
  border-radius: inherit;
}

/* ─── The two dark panels ───
   "Built for Designers" and the final CTA both run on the hero's own backdrop,
   so the page opens and closes on the same artwork. Each shipped with its own
   set of corner textures from the export — three on one, three on the other —
   which are switched off: one image reads cleaner than three overlapping ones,
   and they were the reference site's art, not ours. */
.wf .section-dark,
.wf .footer-another-cta-wrapper {
  background-image: url("/reframe/hero-v3/hero-bg.webp");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The card copy in this panel is the export's muted grey, which was fine on
   flat black but disappears where the backdrop's glow comes through. White,
   slightly held back, reads on both. */
.wf .section-dark .criteria-text-wrapper p,
.wf .section-dark .text-color-secondary,
.wf .section-dark .text-color-tertiary {
  color: rgba(255, 255, 255, 0.82);
}

.wf .section-dark > .section-texture-top-left,
.wf .section-dark > .section-texture-top-right,
.wf .section-dark > .section-texture-bottom-right,
.wf .footer-another-cta-wrapper > .section-texture-top-left,
.wf .footer-another-cta-wrapper > .section-texture-top-right,
.wf .footer-another-cta-wrapper > .section-texture-top-center {
  display: none;
}

/* The four principle icons. The export's were Konvert's ad-review art — a
   rocket, a rosette, a sparkle, a speech bubble — which said nothing about
   these points. Drawn inline instead, so they inherit colour and stay sharp,
   in the tile the originals sat in: a rounded square on the brand gradient. */
.wf .criteria-icon--rf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(239, 3, 133, 0.9), rgba(125, 46, 200, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 6px 18px rgba(239, 3, 133, 0.28);
  color: #fff;
}

.wf .criteria-icon--rf svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ─── FAQ accordion ───
   The export left the answers permanently open: the collapse was Webflow's
   runtime setting inline heights, which the port drops. This does it in CSS
   with a 0fr/1fr grid row, so it animates to the answer's real height without
   anyone having to measure it. Toggling lives in /reframe/faq.js. */
.wf .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wf .faq-answer > * {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.wf .faq-question.open + .faq-answer {
  grid-template-rows: 1fr;
}

.wf .faq-question.open + .faq-answer > * {
  opacity: 1;
  padding-top: 0.25rem;
  padding-right: 3rem;
}

/* The export's questions are a plain row with .5rem of vertical padding, which
   leaves the text tight against the divider. Give each item room to breathe,
   and take the bottom padding off while it is closed so a shut accordion is a
   list of evenly spaced questions rather than gaps. */
.wf .faq-question {
  gap: 24px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.wf .faq-item {
  padding-bottom: 0;
}

.wf .faq-item:has(.faq-question.open) {
  padding-bottom: 1.25rem;
}

.wf .faq-question:focus-visible {
  outline: 2px solid var(--cx-accent, #ef0385);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The plus becomes a minus. */
.wf .faq-icon-wrapper {
  transition:
    border-color 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wf .icon-plus-horizontal {
  transition:
    opacity 0.24s ease,
    background-color 0.24s ease;
}

.wf .icon-plus-vertical {
  transition: background-color 0.24s ease;
}

.wf .faq-question.open .faq-icon-wrapper {
  border-color: #ef0385;
  transform: rotate(180deg);
}

.wf .faq-question.open .icon-plus-horizontal {
  opacity: 0;
}

.wf .faq-question.open .icon-plus-vertical {
  background-color: #ef0385;
}

/* ─── Brand tokens ───
   The port inherits the reference site's palette: a violet brand (#6100ff) and
   cool zinc greys. Both are retargeted here, once, so every ported section
   picks up ReFrame's pink-to-purple and a neutral that leans the same way
   instead of reading as unrelated grey. Nothing else needs touching — the
   export's own rules all reference these variables. */
.wf {
  /* Brand */
  --brand-primary: #ef0385;
  --brand-secondary: #7d2ec8;

  /* The accent ramp, used by the section pills and badges. Was violet. */
  --accent-purple-50: #fdf2f9;
  --accent-purple-200: #f6cfe6;
  --accent-purple-300: #eeaad3;
  --accent-purple-700: #c11e78;
  --accent-purple-800: #9c1a62;
  --accent-purple-900: #5d0f3b;

  /* Neutrals, nudged off pure grey toward the brand purple. */
  --text-secondary: #6f6875;
  --text-tertiary: #56505e;
  --border-primary: #ece9f1;
  --border-secondary: #ddd8e4;
  --background-subtle: #f7f4fa;
}

/* ─── Why It's Different — split panel ───
   Ported from the reference supplied for this section. Structure, proportions
   and behaviour follow it exactly: full-bleed two columns, an uppercase tracked
   label over 22px lines, the "before" side struck through on a tinted ground,
   the "after" side on white under a 2px accent rule, corner artwork at low
   opacity behind radial masks, and a circular arrow sitting on the seam.

   Three things are ours rather than the reference's: the accent is the brand
   pink-to-purple instead of its green, the neutrals are this page's cool greys
   instead of its beige, and the type inherits the page's family instead of
   loading Instrument Sans. */
.wf .cx {
  --cx-accent: #ef0385;
  --cx-accent-2: #7d2ec8;
  --cx-ink: #18181b;
  /* Tinted toward the brand purple rather than neutral grey. A flat grey slab
     next to a white page reads as dead space; a 3% wash of the brand sits in
     the same family as everything around it. */
  --cx-muted: #8d8794;
  --cx-line: #ece9f1;
  --cx-ground: rgba(125, 46, 200, 0.035);
  /* Was clamp(64px, 7vw, 112px). The logo strip above ends with its own 2.5rem
     bottom padding, so the two stacked into a gap wide enough to read as a
     break between two pages rather than a step between two sections. That
     padding is zeroed below and this one carries the whole space. */
  padding-top: clamp(32px, 3.5vw, 56px);
  color: var(--cx-ink);
}

/* The logo strip's trailing padding, dropped so it does not add to the above.
   Scoped through .hero-overlap-section, which only WF1 carries, so every other
   section keeping the export's `.section` padding is untouched. */
.wf .hero-overlap-section .section {
  padding-bottom: 0;
}

.wf .cx-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  padding: 0 24px;
}

.wf .cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #6b6675;
}

.wf .cx-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cx-accent), var(--cx-accent-2));
}

.wf .cx-h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.wf .cx-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #6b6675;
}

/* The split runs edge to edge — no card, no container. */
.wf .cx-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wf .cx-col {
  padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 88px);
  display: flex;
  flex-direction: column;
}

/* Before: tinted ground, content pushed to the seam. */
.wf .cx-col--before {
  background: var(--cx-ground);
  border-top: 1px solid var(--cx-line);
  /* The seam, so the two halves separate without a hard grey edge. */
  border-right: 1px solid var(--cx-line);
  align-items: flex-end;
}

/* After: white, lit by the accent rule and the corner artwork. */
/* After: the supplied backdrop, full bleed across the column. A flat black
   layer rides over it in the same background stack — background-image takes no
   opacity of its own — so the white type stays legible over the bright part of
   the glow. */
.wf .cx-col--after {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    url("/reframe/hero-v3/hero-bg.webp");
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-color: #08080c;
  border-top: 2px solid var(--cx-accent);
}

/* Everything in this column is now on black. */
.wf .cx-col--after .cx-list--on li {
  color: #fff;
}

.wf .cx-col--after .cx-mark--on {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.wf .cx-col--after .cx-label--accent {
  /* White, not the brand pink: a gradient clipped to text goes muddy on black,
     and the pink competed with the accent rule directly above it. */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
}

.wf .cx-col--after .cx-cta {
  background: #fff;
  color: #18181b;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.wf .cx-col-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wf .cx-label {
  margin: 0;
  /* A real heading rather than the reference's tracked micro-caps. */
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
  color: var(--cx-muted);
}

.wf .cx-label--accent {
  /* The brand gradient, clipped to the text. */
  background: linear-gradient(90deg, var(--cx-accent), var(--cx-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wf .cx-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf .cx-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* Held down on desktop: at 22px the list competed with the headings above it. */
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.45;
  color: var(--cx-muted);
}

/* The strike sits on the text only — running it through the mark as well would
   cross out the icon. */
.wf .cx-list li > span:last-child {
  text-decoration: line-through;
  text-decoration-color: rgba(125, 46, 200, 0.28);
  text-decoration-thickness: 1px;
}

.wf .cx-list--on li {
  color: var(--cx-ink);
  font-weight: 500;
}

.wf .cx-list--on li > span:last-child {
  text-decoration: none;
}

/* The marks. Hollow and grey on the left, brand gradient on the right.
   Nudged down a hair so they sit on the first line's optical centre. */
.wf .cx-mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  border-radius: 8px;
  border: 1px solid rgba(125, 46, 200, 0.16);
  background: rgba(255, 255, 255, 0.6);
  color: #a99fb4;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ghosted rather than filled: the tick is drawn in the brand gradient on a
   near-transparent tint, with a hairline ring in the same colour. The solid
   block read heavier than the type it sits next to. */
.wf .cx-mark--on {
  border-color: rgba(239, 3, 133, 0.28);
  background: linear-gradient(
    135deg,
    rgba(239, 3, 133, 0.07),
    rgba(125, 46, 200, 0.07)
  );
  box-shadow: none;
}

.wf .cx-ic {
  width: 14px;
  height: 14px;
  display: block;
}

/* The gradient the ticks stroke themselves with lives in one hidden svg. */
.wf .cx-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wf .cx-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cx-accent), var(--cx-accent-2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(239, 3, 133, 0.28);
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wf .cx-cta:hover {
  transform: translateY(-2px);
}

/* The node on the seam. */
@media (max-width: 860px) {
  .wf .cx-split {
    grid-template-columns: 1fr;
  }
  .wf .cx-col--before {
    align-items: flex-start;
    /* Stacked: the seam runs across, not down. */
    border-right: 0;
    border-bottom: 1px solid var(--cx-line);
  }
  .wf .cx-col-inner {
    max-width: none;
  }
}

/* ─── Client logo marquee ───
   The export's strip was scrolled by Webflow's JS runtime, which the port drops
   (see wfSectionsHtml.ts). The motion is CSS here instead: the row holds two
   identical runs, so translating it -50% lands exactly on the copy and loops
   with no seam. */
.wf .logos-line {
  width: max-content;
  animation: sc-logos 26s linear infinite;
}

.wf .logos-line-container {
  /* Not `flex: 1` as the export had it: the two runs must keep their natural
     width or the -50% no longer lines up. */
  flex: none;
}

@keyframes sc-logos {
  to {
    transform: translateX(-50%);
  }
}

.wf .logo-slider-wrapper:hover .logos-line {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .wf .logos-line {
    animation: none;
  }
}

/* Both ends dissolve into the section's white, so logos are swallowed rather
   than clipped. The mask fades to transparent and the white behind shows
   through, which keeps it correct whatever sits under it. */
.wf .logo-slider-wrapper {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

/* Height-driven, width auto. The export capped both axes, which fixed every
   box at the cap and let `object-fit: contain` letterbox the logo inside it —
   so wide and narrow marks got the same box and the leftover space read as a
   gap. Sizing by height alone makes each box hug its own artwork. */
.wf .track-image_hero {
  width: auto;
  height: 4rem;
  max-width: none;
  max-height: none;
  min-width: 0;
}

.wf .logo-track-item {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 767px) {
  .wf .track-image_hero {
    height: 3.5rem;
  }
  /* Each box now hugs its logo, so this is the whole gap. */
  .wf .logo-track-item {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .wf .logos-line {
    animation-duration: 18s;
  }
}

/* ─── Reveal on scroll ───
   Same motion as the hero's entrance (hx-rise), driven by an
   IntersectionObserver that adds .is-in — see useSectionReveal in index.tsx. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Cards in a row stagger across, set per item via --sc-i. */
  transition-delay: calc(var(--sc-i, 0) * 0.09s);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ─── Shared heading ─── */
.sc-head {
  max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.sc-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  font-size: 13px;
  line-height: 17px;
  color: #a1a1aa;
}

.sc-h2 {
  margin: 18px 0 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.sc-lead {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.6;
  color: #a1a1aa;
}

/* ─── Buttons ─── */
.sc-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 14px;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-btn--primary {
  background: #fff;
  border: 1px solid #f1f1f1;
  color: #18181b;
  font-weight: 500;
}

.sc-btn:hover {
  transform: translateY(-2px);
}

.sc-btn-ic {
  flex: none;
}

/* ─── 1. Logo strip ───
   A marquee rather than a static row: six logos look thin on a wide screen. */
.sc--strip {
  padding: clamp(40px, 5vw, 64px) 0;
}

.sc-strip-label {
  margin: 0 0 28px;
  text-align: center;
  font-size: 14px;
  color: #a1a1aa;
}

.sc-marquee {
  overflow: hidden;
  /* Fade both ends so logos enter and leave instead of being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.sc-marquee-track {
  display: flex;
  width: max-content;
  animation: sc-marquee 34s linear infinite;
}

.sc-marquee:hover .sc-marquee-track {
  animation-play-state: paused;
}

.sc-marquee-run {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  margin: 0 clamp(20px, 3vw, 40px) 0 0;
  padding: 0 0 0 clamp(20px, 3vw, 40px);
  list-style: none;
}

.sc-marquee-run img {
  display: block;
  height: 28px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(1) brightness(1.6);
}

@keyframes sc-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-marquee-track {
    animation: none;
  }
}

/* ─── 2 + 6. Two-column comparison ─── */
.sc-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.sc-compare-col {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.sc-compare-col--yes {
  border-color: rgba(239, 3, 133, 0.35);
  background: linear-gradient(180deg, rgba(239, 3, 133, 0.12), rgba(255, 255, 255, 0.03));
}

.sc-compare-col h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
}

.sc-compare-col ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-compare-col li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #d4d4d8;
}

.sc-ic {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}

.sc-ic--no {
  color: #a1a1aa;
}

.sc-ic--yes {
  color: #ef0385;
}

/* ─── 3 + 5 + 7. Card grids ─── */
.sc-cards {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.sc-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sc-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sc-card {
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.28s ease,
    background 0.28s ease;
}

.sc-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.055);
}

.sc-card-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ef0385;
}

.sc-card-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.sc-card-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #a1a1aa;
}

.sc-card--tight {
  padding: clamp(20px, 2.2vw, 26px);
}

/* ─── 4. Steps ─── */
.sc-steps {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sc-step;
}

.sc-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.sc-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef0385, #7d2ec8);
  font-size: 15px;
  font-weight: 600;
}

.sc-step-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.sc-step-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #a1a1aa;
}

/* ─── 8. Testimonials ─── */
.sc-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.sc-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  margin: 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.sc-quote blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #e4e4e7;
}

.sc-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #a1a1aa;
}

.sc-quote figcaption img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* ─── 9. FAQ ─── */
.sc-faq {
  display: grid;
  gap: 12px;
  max-width: 840px;
  margin: 0 auto;
}

.sc-faq-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.sc-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
}

.sc-faq-item summary::-webkit-details-marker {
  display: none;
}

.sc-faq-ic {
  width: 20px;
  height: 20px;
  flex: none;
  color: #a1a1aa;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-faq-item[open] .sc-faq-ic {
  transform: rotate(45deg);
}

.sc-faq-item p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: #a1a1aa;
}

/* ─── 10. Final CTA ─── */
.sc--final {
  padding-bottom: clamp(80px, 10vw, 140px);
}

.sc-final {
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(90% 140% at 50% 130%, rgba(239, 3, 133, 0.38), transparent 70%),
    rgba(255, 255, 255, 0.03);
  text-align: center;
}

.sc-final .sc-h2 {
  margin-top: 18px;
}

.sc-final .sc-lead {
  margin-bottom: 32px;
}

/* ─── Responsive ─── */
@media (max-width: 1000px) {
  .sc-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sc-cards--3,
  .sc-steps,
  .sc-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sc {
    padding: clamp(48px, 12vw, 72px) 16px;
  }
  .sc-cards--3,
  .sc-cards--4,
  .sc-steps,
  .sc-quotes,
  .sc-compare {
    grid-template-columns: minmax(0, 1fr);
  }
  /* No stagger once everything is stacked — it would read as a lag. */
  [data-reveal] {
    transition-delay: 0s;
  }
}