/* /demo — the agency landing page (src/routes/demo.tsx + demoHtml.ts).
   Port of the ReFrame builder export: a 1920px canvas the export scaled with
   `zoom` per breakpoint, set fluidly here. Classes are namespaced `dm-`.

   Type is Discovery Fs, applied page-wide by /reframe/fonts.css (loaded just
   before this sheet); the weights below are the three it ships. */

.dm-page {
  --dm-white: #ffffff;
  --dm-pink: #ef3f83;
  --dm-purple: #9931ad;
  --dm-blue: #4323d8;
  --dm-ink: #18181b;
  --dm-line: #e4e4e7;
  --dm-quote: #56505e;
  --dm-muted: #6f6875;
  --dm-grad: linear-gradient(90deg, var(--dm-pink), var(--dm-purple) 50%, var(--dm-blue));

  background: var(--dm-white);
  color: var(--dm-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

.dm-page :where(p, h1, h2, ul) {
  margin: 0;
  padding: 0;
}

.dm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1330px;
  margin: 0 auto;
  text-align: center;
}

/* ─── Hero ─── */
.dm-hero {
  position: relative;
  width: 100%;
  padding: clamp(40px, 5.1vw, 98px) 20px clamp(80px, 8.5vw, 170px);
  background: #000 url("/reframe/demo/hero-bg.webp") center / cover no-repeat;
  color: var(--dm-white);
}

/* ReFrame × Claude. `dir="ltr"` on the row keeps ReFrame first on the right
   the way the export laid it out (row-reverse in an RTL document). */
.dm-logos {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.05vw, 20px);
}

.dm-logo {
  display: block;
  height: auto;
}

.dm-logo--rf {
  width: clamp(150px, 13.5vw, 260px);
}

.dm-logo--claude {
  width: clamp(154px, 13.9vw, 266px);
}

.dm-x {
  font-size: clamp(24px, 2.1vw, 40px);
  line-height: 1;
  font-weight: 400;
  background: linear-gradient(180deg, #fff, #999);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dm-pill {
  margin-top: clamp(20px, 1.8vw, 34px);
  padding: 10px clamp(20px, 2.3vw, 45px);
  border-radius: 1000px;
  background: var(--dm-white);
  color: rgba(12, 12, 12, 0.78);
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 700;
  line-height: 1.5;
}

/* Three lines, each with its own underline under the key phrase. The lines
   stay whole down to the tablet break, where they wrap freely. */
.dm-title {
  margin-top: clamp(20px, 1.25vw, 24px);
  font-size: clamp(30px, 3.125vw, 60px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--dm-white);
}

.dm-title-line {
  display: block;
  white-space: nowrap;
}

/* The gradient bar the export drew as a 13px image under each line, offset to
   sit under the phrase. Here it is a background on the phrase itself, painted
   in the bottom slice of its box so it tucks under the letters. */
.dm-mark {
  /* Lifted a little off the baseline so the bar runs behind the bottom of
     the letters rather than under them — a highlighter, not an underline. */
  background: var(--dm-grad) no-repeat 0 calc(100% - 0.1em) / 100% 0.2em;
  border-radius: 0.1em;
  padding-bottom: 0.02em;
}

.dm-desc {
  margin-top: clamp(16px, 1.25vw, 24px);
  max-width: 1000px;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.5;
  color: var(--dm-white);
}

.dm-desc span {
  display: block;
  white-space: nowrap;
}

/* ─── VSL ─── */
.dm-vsl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 855px;
  margin-top: clamp(28px, 2.1vw, 40px);
  padding: 14px 9px 9px;
  border-radius: 20px;
  background: var(--dm-grad);
}

.dm-vsl-title {
  margin-bottom: 12px;
  font-size: clamp(17px, 1.3vw, 25px);
  line-height: 1.32;
  color: var(--dm-white);
}

.dm-vsl-frame {
  position: relative;
  width: 100%;
  /* The clip's own ratio, so neither the poster nor the video is cropped. */
  aspect-ratio: 1280 / 671;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

/* Cover + play. The whole frame is the button. */
.dm-vsl-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  display: block;
}

.dm-vsl-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-vsl-cover:hover .dm-vsl-poster {
  transform: scale(1.03);
}

/* A dark veil so the disc reads on any frame. */
.dm-vsl-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.3));
}

.dm-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(64px, 6vw, 92px);
  height: clamp(64px, 6vw, 92px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dm-white);
  color: #111;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 12px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-play svg {
  width: 40%;
  height: 40%;
  margin-inline-start: 6%;
}

.dm-vsl-cover:hover .dm-play {
  transform: translate(-50%, -50%) scale(1.07);
}

/* Two rings pulsing out of the disc. */
.dm-play::before,
.dm-play::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: dm-pulse 3.2s ease-out infinite;
  pointer-events: none;
}

.dm-play::after {
  animation-delay: 1.6s;
}

@keyframes dm-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-play::before,
  .dm-play::after {
    animation: none;
    display: none;
  }
}

/* The player, once it replaces the cover. */
.dm-vsl-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}

/* ─── Feature strip ─── */
.dm-feats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  list-style: none;
  margin-top: 24px;
  padding: 12px 36px;
  border-radius: 1000px;
  background: rgba(0, 0, 0, 0.33);
}

.dm-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--dm-white);
  white-space: nowrap;
}

.dm-feat-icon {
  flex: none;
  width: 15px;
  height: 15px;
}

/* ─── Buttons ───
   Same shape twice: white on the hero, brand gradient under the cards. */
.dm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 425px;
  padding: 15px 36px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
  line-height: 26px;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-btn:hover {
  transform: translateY(-1px);
}

.dm-btn-icon {
  flex: none;
  width: 19px;
  height: 15px;
}

/* ─── Lead form ───
   A frosted panel on the hero's black: title, one line of copy, the form. */
.dm-form-box {
  width: 100%;
  max-width: 860px;
  margin-top: 32px;
  padding: clamp(24px, 2.2vw, 40px) clamp(20px, 2vw, 36px) clamp(24px, 2vw, 32px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 24px 64px rgba(0, 0, 0, 0.35);
  scroll-margin-top: 24px;
}

.dm-form-title {
  font-weight: 700;
  line-height: 1.15;
  color: var(--dm-white);
}

/* Two sizes: the lead-in a step down, the offer a step up. */
.dm-form-title-a,
.dm-form-title-b {
  display: block;
}

.dm-form-title-a {
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

.dm-form-title-b {
  margin-top: -2px;
  font-size: clamp(30px, 2.6vw, 50px);
}

.dm-form-text {
  margin-top: 10px;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* The panel's underlines sit under the words, not behind them: the type is
   too small for the headline's highlighter treatment. */
.dm-form-title .dm-mark,
.dm-form-text .dm-mark {
  background-position: 0 100%;
  background-size: 100% 0.14em;
}

.dm-form {
  width: 100%;
  margin-top: 22px;
}

.dm-form-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.dm-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}

.dm-input {
  width: 100%;
  height: 64px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  text-align: start;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: var(--dm-white);
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  outline: 0;
  transition: box-shadow 0.2s, background-color 0.2s;
}

.dm-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

/* Browsers set tel fields LTR on their own; keep the placeholder and the
   typed number on the right like the rest of the form. */
.dm-input[type="tel"],
.dm-input[type="tel"]::placeholder {
  direction: rtl;
  text-align: right;
}

.dm-input:focus {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 2px var(--dm-pink);
}

.dm-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px #ff5a6e;
}

.dm-form-submit {
  flex: 0 0 auto;
  width: auto;
  height: 64px;
  border-radius: 10px;
  margin-top: 0;
  padding: 0 28px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* A light sweep across the submit every few seconds — the one thing on the
   panel that moves, so the eye lands on it. */
.dm-form-submit {
  position: relative;
  overflow: hidden;
}

.dm-form-submit::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: dm-shine 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dm-shine {
  0% { left: -60%; }
  35% { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-form-submit::after {
    animation: none;
    display: none;
  }
}

.dm-form-submit[disabled] {
  opacity: 0.7;
  cursor: wait;
}

.dm-form-error {
  margin-top: 10px;
  font-size: 14px;
  color: #ff8a97;
}

.dm-form-done {
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-size: 16px;
  color: var(--dm-white);
}

.dm-form-error[hidden],
.dm-form-done[hidden] {
  display: none;
}

.dm-btn--light {
  margin-top: 32px;
  background: linear-gradient(180deg, #fff, #e9eef3);
  color: #000;
  box-shadow: 0 1px 40px rgba(255, 255, 255, 0.5);
}

/* The sticky bar's own colour: the form button's shape and type, in black. */
.dm-btn--dark {
  background: #000;
  color: var(--dm-white);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

.dm-btn--grad {
  margin-top: 40px;
  background: var(--dm-grad);
  color: var(--dm-white);
  box-shadow: 0 1px 40px rgba(153, 49, 173, 0.3);
}

/* ─── Steps ───
   The white panel that rides up over the hero with rounded corners. */
.dm-steps-sec {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -60px;
  padding: clamp(36px, 2.8vw, 56px) 20px clamp(40px, 3.1vw, 60px);
  border-radius: clamp(36px, 3.85vw, 74px) clamp(36px, 3.85vw, 74px) 0 0;
  background: var(--dm-white);
}

.dm-sec-kicker {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: var(--dm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1200px;
}

/* Each step is a card, as on the main page: white, rounded, lifted by a
   two-part shadow — a tight 1px seat so the edge reads on white, and a wide
   soft drop for the lift. */
.dm-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 26px;
  border-radius: 20px;
  background: var(--dm-white);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.07);
  text-align: start;
}

/* The copy gets the side padding the clip does not. */
.dm-step-head,
.dm-step-title,
.dm-step-text {
  padding: 0 10px;
}

/* Three screen recordings, each a few pixels off the others; one ratio keeps
   the row of headings below them aligned. Radius a notch under the card's so
   the two rounded rectangles nest. */
.dm-step-media {
  width: 100%;
  aspect-ratio: 900 / 544;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px;
}

.dm-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

/* Light tile lifted by a hairline ring and a soft drop — the main page's. */
.dm-step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--dm-white);
  box-shadow:
    inset 0 0 0 1px rgba(24, 24, 27, 0.08),
    0 4px 14px rgba(125, 46, 200, 0.1);
}

.dm-step-mark svg,
.dm-step-mark img {
  display: block;
  width: auto;
  height: 22px;
  max-width: none;
}

.dm-step-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  background: var(--dm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dm-step-title {
  margin: 0;
  font-size: clamp(19px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dm-ink);
}

.dm-step-text {
  font-size: clamp(15px, 0.95vw, 18px);
  line-height: 1.55;
  color: var(--dm-quote);
}

/* ─── Testimonials ─── */
.dm-testimonials {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(40px, 3.1vw, 60px) 20px clamp(60px, 5.2vw, 100px);
  background: var(--dm-white);
}

.dm-testimonials .dm-container {
  max-width: 1624px;
}

/* Gradient hairline pill: the border is the gradient, the inside stays white,
   so it reads the way the export's image did. */
.dm-proof {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 6px 18px 6px 12px;
  border-radius: 999px;
  background: var(--dm-white);
}

.dm-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--dm-grad);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.dm-proof-avatars {
  display: flex;
  align-items: center;
}

.dm-proof-avatars img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--dm-white);
  margin-inline-start: -6px;
}

.dm-proof-avatars img:first-child {
  margin-inline-start: 0;
}

.dm-proof-text {
  font-size: 14px;
  line-height: 17px;
  color: #252526;
}

.dm-proof-text b {
  background: var(--dm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.dm-sec-title {
  margin-bottom: 16px;
  font-size: clamp(32px, 3.3vw, 63px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dm-ink);
}

.dm-sec-title span {
  display: block;
  white-space: nowrap;
}

.dm-sec-sub {
  margin-bottom: clamp(32px, 3.1vw, 60px);
  font-size: clamp(16px, 1.1vw, 21px);
  line-height: 1.5;
  color: var(--dm-muted);
}

/* Three columns, the outer two dropped a card so the middle reads first. The
   grid is capped in height and fades out at the bottom, as in the export. */
.dm-cards {
  position: relative;
  display: flex;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.dm-cards-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  max-width: 513px;
}

.dm-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 308px;
  padding: clamp(24px, 2.3vw, 44px);
  border: 1px solid var(--dm-line);
  border-radius: 21px;
  background: var(--dm-white);
  text-align: start;
}

.dm-card-quote {
  margin-bottom: 24px;
  font-size: clamp(16px, 1.1vw, 21px);
  line-height: 1.52;
  color: var(--dm-quote);
}

.dm-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-card-avatar {
  width: clamp(48px, 3.3vw, 63px);
  height: clamp(48px, 3.3vw, 63px);
  border-radius: 50%;
  margin-inline-end: 8px;
}

.dm-card-name {
  font-size: clamp(16px, 1.1vw, 21px);
  line-height: 1.5;
  color: var(--dm-ink);
}

.dm-card-badge {
  width: 21px;
  height: 21px;
}

/* The export's 264px white-fade image over the bottom of the grid. */
.dm-cards-fade {
  position: absolute;
  inset: auto 0 0;
  height: 264px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 76%);
  pointer-events: none;
}

/* The two "without"s under the headline: side by side, a red x leading
   each, wrapping to two rows only when the phone is too narrow. */
.dm-nots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 28px;
  margin-top: clamp(14px, 1.25vw, 22px);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--dm-white);
}

.dm-not {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.dm-not-x {
  font-size: 1.05em;
  font-weight: 900;
  line-height: 1;
  color: #ff5a6e;
}

/* ─── Narrow screens ─── */
@media (max-width: 992px) {
  .dm-title-line,
  .dm-desc span,
  .dm-sec-title span {
    white-space: normal;
    display: inline;
  }
  .dm-sec-title span {
    display: block;
  }
  .dm-title {
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  /* Wrapped lines break the underlines into fragments, so only the number —
     which never wraps — keeps its bar. */
  .dm-title .dm-mark {
    background: none;
    padding-bottom: 0;
  }
  .dm-title [dir="ltr"] {
    background: var(--dm-grad) no-repeat 0 100% / 100% 0.2em;
    border-radius: 0.1em;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .dm-hero {
    padding: 40px 16px 80px;
  }
  /* One row, always: each mark takes a share of the width, so the pair fits
     side by side down to the narrowest phone. */
  .dm-logos {
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 250px;
  }
  .dm-logo--rf,
  .dm-logo--claude {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 112px;
  }
  .dm-x {
    flex: none;
    font-size: 16px;
  }
  /* The glow lives in the bottom corners of a landscape image; `cover` on a
     tall phone section scales it by height and crops both corners away.
     Stretched to the section instead, so the colour stays in frame. */
  .dm-hero {
    background-size: 100% 100%;
  }
  /* One line on the phone: the type steps down with the viewport so the
     question never wraps. */
  .dm-pill {
    padding: 8px 14px;
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 22px;
    white-space: nowrap;
  }
  .dm-title {
    font-size: clamp(24px, 7.2vw, 28px);
    line-height: 1.25;
  }
  .dm-desc {
    font-size: 16px;
    line-height: 24px;
  }
  /* Two ticks side by side under the button; the third is desktop-only. */
  .dm-feats {
    gap: 16px;
    padding: 10px 20px;
    margin-top: 16px;
  }
  .dm-feat--desk {
    display: none;
  }
  .dm-btn--light {
    margin-top: 20px;
  }
  .dm-form-box {
    margin-top: 20px;
    padding: 22px 16px 20px;
    border-radius: 16px;
  }
  .dm-form {
    margin-top: 18px;
  }
  /* The phone keeps the headline's rule (no underline except LTR runs), so
     these are put back by hand. */
  .dm-form-title .dm-mark,
  .dm-form-text .dm-mark {
    background: var(--dm-grad) no-repeat 0 100% / 100% 0.14em;
  }
  .dm-form-fields {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dm-form-submit {
    width: 100%;
    margin-top: 4px;
  }
  /* Tighter box around the clip: less air above the caption and under it. */
  .dm-vsl {
    padding: 10px 8px 8px;
  }
  .dm-vsl-title {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.2;
  }
  .dm-steps-sec {
    margin-top: -30px;
    padding: 36px 16px 40px;
    border-radius: 36px 36px 0 0;
  }
  .dm-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dm-testimonials {
    padding: 30px 16px 60px;
  }
  .dm-sec-title {
    font-size: 32px;
    line-height: 40px;
  }
  .dm-sec-sub {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px;
  }
  .dm-cards {
    flex-direction: column;
  }
  .dm-cards-col {
    max-width: 100%;
  }
  .dm-card {
    min-height: auto;
    padding: 24px;
  }
  .dm-card-quote {
    font-size: 16px;
    line-height: 26px;
  }
  .dm-cards-fade {
    display: none;
  }
}

/* Every button on the page jumps to the form; glide there, and land with
   the panel clear of the top edge (scroll-margin-top on .dm-form-box). */
html {
  scroll-behavior: smooth;
}

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

/* ─── /main only ───
   The booking page (src/routes/mainHtml.ts) runs on this same sheet. These are
   the blocks it adds: the two lead paragraphs under its headline, the numbered
   agenda, the "instead of" block, the consent row, the scarcity line and its
   closing beats. Nothing here is used by /demo. */

/* The headline, set the way the old campaign page set its own: the Black
   weight rather than Bold, tighter leading, and a size that runs further up
   with the viewport. /demo keeps the export's lighter setting. */
/* The bar rides higher here than on /demo, so it runs behind the bottom of
   the letters rather than under them. */
.dm-title--bk .dm-mark {
  background-position: 0 calc(100% - 0.19em);
}

/* The old campaign page's setting: Black rather than Bold, tight leading,
   three lines broken by hand. /demo keeps the export's lighter setting. */
.dm-title--bk {
  margin-top: clamp(10px, 0.8vw, 14px);
  max-width: 34ch;
  margin-inline: auto;
  font-size: clamp(29px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Two lines, broken at the comma. They hold as one line each from the tablet
   up; on the phone they are allowed to wrap rather than run off the screen. */
.dm-title--bk .dm-title-line {
  display: block;
  white-space: normal;
}

@media (min-width: 701px) {
  .dm-title--bk .dm-title-line {
    white-space: nowrap;
  }
}

/* Phone: the headline keeps its three hand-broken lines rather than wrapping
   into five, so the underlined phrases stay whole. Sized to the longest line
   at 390px. The "without"s go: at this width they are three stacked rows of
   fine print between the headline and the video, and the video is the point. */
@media (max-width: 700px) {
  /* Sized so the longest of the three lines runs the full width of the hero:
     6.9vw is where that line meets the 20px gutters at every phone width. */
  .dm-title--bk {
    font-size: 6.9vw;
    max-width: none;
  }

  .dm-title--bk .dm-title-line {
    white-space: nowrap;
  }

  /* The export kills the headline bars on the phone because its lines wrap
     into fragments. These three do not wrap, so they keep theirs. */
  /* The white bar runs into the notch area on the phone, so it takes more
     room top and bottom than it needs on the desktop. */
  .dm-topbar {
    padding-top: clamp(32px, 9vw, 46px);
    padding-bottom: clamp(16px, 4.5vw, 22px);
    font-size: clamp(16px, 4.8vw, 22px);
  }

  /* More air under the lockup than the desktop needs: on the phone the
     kicker and headline sit right under it otherwise. */
  .dm-page--main .dm-logos--one {
    margin-bottom: clamp(18px, 5vw, 28px);
  }

  .dm-page--main .dm-kicker {
    margin-top: clamp(10px, 2.5vw, 16px);
  }

  .dm-title--bk .dm-mark {
    background: var(--dm-grad) no-repeat 0 calc(100% - 0.19em) / 100% 0.2em;
    padding-bottom: 0.08em;
  }
}

/* The offer line over the headline: white, with the gradient bar under the
   word that carries the offer. */
.dm-kicker {
  margin-top: clamp(16px, 1.4vw, 24px);
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--dm-white);
}

/* One wide lockup in place of the two-logo row. It is set by height, since
   the artwork is 6.5:1 and a width would leave it huge or hairline. */
.dm-logos--one .dm-logo--pair {
  width: auto;
  height: clamp(34px, 3.8vw, 58px);
}

/* The home page's hero opens on the lockup with nothing over it, so it is
   set smaller there to let the headline lead. */
.dm-logos--sm .dm-logo--pair {
  height: clamp(24px, 2.6vw, 40px);
}

/* The white panels below the hero. Only the first of them carries the rounded
   lip that the hero ends on — the rest run flat into each other. */
.dm-close-sec {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(36px, 2.8vw, 56px) 20px clamp(40px, 3.1vw, 60px);
  background: var(--dm-white);
}

/* The proof row, bare: no pill, no gradient hairline, and a size up. Here it
   opens the section under the hero instead of sitting over the cards. */
.dm-proof--bare {
  gap: 16px;
  margin-bottom: clamp(18px, 1.8vw, 30px);
  padding: 0;
  border-radius: 0;
  background: none;
}

.dm-proof--bare::before {
  content: none;
}

.dm-proof--bare .dm-proof-avatars img {
  width: clamp(38px, 3.1vw, 50px);
  height: clamp(38px, 3.1vw, 50px);
  border-width: 3px;
  margin-inline-start: -10px;
}

.dm-proof--bare .dm-proof-text {
  font-size: clamp(16px, 1.35vw, 24px);
  line-height: 1.35;
  font-weight: 500;
}

/* The "who it is for" bar: full width, flush with the top of the hero, so the
   page opens on it. The negative margins undo .dm-hero's padding. */
.dm-topbar {
  margin: calc(-1 * clamp(40px, 5.1vw, 98px)) -20px clamp(26px, 3vw, 44px);
  /* A little more air above the line than below it, so the bar reads as the
     top edge of the page rather than a band floating on the hero. */
  padding: clamp(22px, 2.4vw, 36px) 20px clamp(14px, 1.4vw, 20px);
  background: var(--dm-white);
  font-size: clamp(16px, 1.45vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--dm-ink);
  text-align: center;
}

/* Faces over the line, both centred: this sits as the carousel's own label. */
.dm-proof--stacked {
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(10px, 1vw, 18px);
}

/* The strip's own label ("נבנה עבור מעצבים ובוני אתרים") is replaced by the
   proof line above it, so it is hidden rather than edited — the markup is the
   home page's. */
.dm-clients .text-color-tertiary {
  display: none;
}

/* The credential line on /v3 carries the page's opening claim, so it takes
   the full white rather than the muted one the other leads use. */
.dm-lead--white {
  color: var(--dm-white);
}

/* The same count row, on the hero's black rather than the white section under
   it: the ink turns white, and it sits in a soft dashed frame so it reads as
   a badge at the top of the page rather than loose text. */
.dm-hero .dm-proof-text {
  color: var(--dm-white);
}

/* On the black the avatars' white rims read as a row of holes; black keeps
   them separate without lighting them up. */
.dm-hero .dm-proof-avatars img {
  border-color: #000;
}

/* The credential sits in a soft dashed frame, so it reads as a note from the
   person behind the page rather than more body copy. */
.dm-cred {
  margin-top: clamp(16px, 1.6vw, 26px);
  padding: clamp(14px, 1.4vw, 22px) clamp(20px, 2vw, 34px);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 20px;
}

.dm-cred .dm-lead {
  margin-top: 0;
  color: var(--dm-white);
}

/* The home page's logo carousel, which ships as a panel that climbs over the
   hero above it. Here it is mid-section, so that lift and its rounding go. */
.dm-clients .hero-overlap-section {
  margin-top: 0;
  border-radius: 0;
  background: none;
}

.dm-clients .section {
  padding-top: 0;
}

.dm-after-hero {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  border-radius: clamp(36px, 3.85vw, 74px) clamp(36px, 3.85vw, 74px) 0 0;
}

.dm-page .dm-steps-sec {
  margin-top: 0;
  border-radius: 0;
  padding-bottom: 0;
}

/* Every white panel below the hero carries the export's generous padding, and
   where two meet the two paddings read as one empty band. Halved at each of
   those seams. */
.dm-steps-sec + .dm-testimonials {
  padding-top: clamp(20px, 2vw, 32px);
}

.dm-after-hero {
  padding-bottom: clamp(20px, 2vw, 32px);
}

.dm-testimonials + .dm-steps-sec {
  padding-top: clamp(16px, 1.6vw, 26px);
}

.dm-lead {
  max-width: 46ch;
  margin: clamp(16px, 1.4vw, 24px) auto 0;
  font-size: clamp(17px, 1.35vw, 25px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--dm-white);
}

.dm-lead--sub {
  max-width: 60ch;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* The form button's label runs longer than the fields' own, so it wraps
   rather than stretching the row, and its underline sits clear of the text. */
.dm-sticky u,
.dm-form-submit u {
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Privacy consent, under the fields. The box is the form's own accent so it
   reads as part of the control, not as a stray browser default. */
.dm-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  text-align: start;
  cursor: pointer;
}

.dm-consent-box {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--dm-pink);
  cursor: pointer;
}

.dm-consent a {
  color: inherit;
  text-decoration: underline;
}

.dm-consent-box[aria-invalid="true"] {
  outline: 2px solid var(--dm-pink);
  outline-offset: 2px;
}

.dm-scarcity {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.dm-scarcity b {
  color: var(--dm-white);
}

/* Three short quotes in a row: nothing to cut off, so neither the height cap
   nor /demo's fade applies. */
.dm-cards--row {
  align-items: stretch;
}

.dm-cards--row .dm-card {
  min-height: auto;
}

/* The closing panel, set like the home page's dark card (.wf .section-dark):
   black with the hero's own backdrop over it, rounded, inset from the page. */
.dm-close-sec {
  padding: 0 clamp(16px, 2.5vw, 40px) clamp(40px, 4vw, 64px);
}

.dm-close-sec .dm-close {
  position: relative;
  overflow: hidden;
  max-width: 1330px;
  margin-inline: auto;
  padding: clamp(48px, 5vw, 84px) clamp(20px, 3vw, 48px);
  border-radius: 24px;
  background: #000 url("/reframe/hero-v3/hero-bg.webp") center bottom / cover no-repeat;
  color: var(--dm-white);
  text-align: center;
}

.dm-close-sec .dm-sec-title,
.dm-close-sec .dm-feat {
  color: var(--dm-white);
}

.dm-close-sec .dm-sec-sub {
  color: rgba(255, 255, 255, 0.82);
}

/* The tick strip's own pale ground would be a grey slab on the artwork. */
.dm-close-sec .dm-feats {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Nothing between the sub-line and the button now, so the button carries the
   space the beats used to. */
.dm-close-sec .dm-sec-sub {
  margin-bottom: clamp(24px, 2.4vw, 40px);
}


.dm-close .dm-feats {
  margin-top: clamp(20px, 1.8vw, 32px);
}

/* The hero's ticks are white on the dark backdrop; this pair sits on the white
   section, so it takes the body colour instead. */
.dm-close .dm-feat {
  color: var(--dm-muted);
}



/* ─── /main: the floating brand tiles ───
   Ported from the English hero (.hx-deco in hero-v3.css). On the desktop the
   two tiles sit out in the hero's side gutters, tilted toward the copy and
   drifting; on the phone there are no gutters, so they become a static pair
   centred over the video. */
.dm-deco {
  display: contents;
}

.dm-deco-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  /* Frosted tile on the hero's black: a lifted white film, a hairline edge and
     a wide soft drop, so the mark floats above the glow. */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.dm-deco-mark svg {
  display: block;
  width: 34px;
  height: 34px;
}

.dm-deco-mark--figma svg {
  /* The Figma mark is 38x57. Matching its height to the WordPress circle would
     make it read as the larger of the two, so it is sized on the shared 34px
     box and lets its own width fall out. */
  width: auto;
  height: 34px;
}

.dm-deco-mark--wp {
  color: #fff;
}

@media (min-width: 701px) {
  /* Out in the gutters, against the hero rather than the copy column. */
  .dm-deco-mark {
    position: absolute;
    animation:
      dm-deco-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both,
      dm-deco-float 7s ease-in-out infinite;
  }

  .dm-deco-mark--figma {
    top: clamp(180px, 20vw, 290px);
    inset-inline-end: clamp(16px, 7vw, 150px);
    --dm-deco-tilt: -12deg;
    transform: rotate(var(--dm-deco-tilt));
  }

  /* Offset down the headline so the pair reads as a diagonal, not bookends. */
  .dm-deco-mark--wp {
    top: clamp(300px, 30vw, 430px);
    inset-inline-start: clamp(16px, 7vw, 150px);
    --dm-deco-tilt: 11deg;
    transform: rotate(var(--dm-deco-tilt));
    animation-delay: 0.15s, 0.9s;
  }
}

@keyframes dm-deco-in {
  from {
    opacity: 0;
    transform: rotate(var(--dm-deco-tilt)) translateY(18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(var(--dm-deco-tilt)) translateY(0) scale(1);
  }
}

@keyframes dm-deco-float {
  0%,
  100% {
    transform: rotate(var(--dm-deco-tilt)) translateY(0);
  }
  50% {
    transform: rotate(var(--dm-deco-tilt)) translateY(-14px);
  }
}

/* Phone: off for now. The desktop gutters the tiles live in are gone here, and
   as a static row over the video they only pushed it further down. */
@media (max-width: 700px) {
  .dm-deco {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-deco-mark {
    animation: none;
  }
}

/* ─── /main: the entrance ───
   The page is server-rendered and then hydrated, which rebuilds the DOM and
   would replay any animation already running — the "twice" effect. So nothing
   animates from the markup: the elements start hidden (only when scripting is
   on, via .dm-anim on <html>), and main.tsx adds .dm-page--in once, after
   hydration. One pass, always.
   The same load animation the home page hero plays (hx-rise in hero-v3.css):
   each block rises a little, unblurs and fades in, staggered down the hero, and
   the video lands last on the product shot's own curve. Only /main opts in
   (.dm-page--in), so /demo still paints at once. */
@keyframes dm-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* The video just fades up in place — no tilt, no travel. */
@keyframes dm-shot-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Held back until .dm-page--in lands, one frame after hydration. */
.dm-page--main:not(.dm-page--in) .dm-logos,
.dm-page--main:not(.dm-page--in) .dm-pill,
.dm-page--main:not(.dm-page--in) .dm-kicker,
.dm-page--main:not(.dm-page--in) .dm-title-line,
.dm-page--main:not(.dm-page--in) .dm-lead,
.dm-page--main:not(.dm-page--in) .dm-vsl-title,
.dm-page--main:not(.dm-page--in) .dm-vsl-frame,
.dm-page--main:not(.dm-page--in) .dm-form-box,
.dm-page--main:not(.dm-page--in) .dm-hero .dm-feats {
  opacity: 0;
}

.dm-page--in .dm-logos,
.dm-page--in .dm-pill,
.dm-page--in .dm-kicker,
.dm-page--in .dm-title-line,
.dm-page--in .dm-lead,
.dm-page--in .dm-nots,
.dm-page--in .dm-vsl-title,
.dm-page--in .dm-form-box,
.dm-page--in .dm-hero .dm-feats {
  animation: dm-rise 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--dm-d, 0s);
}

.dm-page--in .dm-logos { --dm-d: 0.02s; }
.dm-page--in .dm-pill { --dm-d: 0.05s; }
.dm-page--in .dm-kicker { --dm-d: 0.07s; }
.dm-page--in .dm-title-line:nth-child(1) { --dm-d: 0.1s; }
.dm-page--in .dm-title-line:nth-child(2) { --dm-d: 0.14s; }
.dm-page--in .dm-title-line:nth-child(3) { --dm-d: 0.18s; }
.dm-page--in .dm-lead { --dm-d: 0.22s; }
.dm-page--in .dm-nots { --dm-d: 0.24s; }
.dm-page--in .dm-vsl-title { --dm-d: 0.26s; }
.dm-page--in .dm-form-box { --dm-d: 0.32s; }
.dm-page--in .dm-hero .dm-feats { --dm-d: 0.36s; }

.dm-page--in .dm-vsl-frame {
  animation: dm-shot-in 0.5s ease 0.28s both;
}

@media (prefers-reduced-motion: reduce) {
  .dm-page--in .dm-logos,
  .dm-page--in .dm-pill,
  .dm-page--in .dm-kicker,
  .dm-page--in .dm-title-line,
  .dm-page--in .dm-lead,
  .dm-page--in .dm-nots,
  .dm-page--in .dm-vsl-title,
  .dm-page--in .dm-vsl-frame,
  .dm-page--in .dm-form-box,
  .dm-page--in .dm-hero .dm-feats {
    animation: none;
  }
}

/* ─── /main: the sticky phone CTA ───
   A black bar-width button that rides the scroll once the hero is off screen.
   Phone only: on the desktop the section buttons are always a short scroll
   away, and a fixed bar would sit over the page for no reason. */
.dm-sticky {
  display: none;
}

@media (max-width: 700px) {
  /* Same block as the form's submit: 64px tall, a 10px radius, not a pill. */
  .dm-sticky {
    display: flex;
    position: fixed;
    inset-inline: 16px;
    /* Clear of the home indicator, and of the edge on phones without one. */
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    width: auto;
    max-width: none;
    height: 64px;
    margin: 0;
    padding: 0 24px;
    border-radius: 10px;
    /* Parked just below the viewport until the hero has gone. */
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition:
      transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .dm-sticky.is-in {
    transform: none;
    opacity: 1;
  }

  /* Room for the bar over the last thing on the page. */
  .dm-page--main .sf-footer {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-sticky {
    transition: none;
  }
}

/* The accessibility button sits bottom-left site-wide (see a11y.js). On the
   phone the sticky CTA owns that strip, so it steps up over it. */
@media (max-width: 700px) {
  .dm-page--main ~ .rf-a11y-btn,
  html:has(.dm-page--main) .rf-a11y-btn {
    bottom: 104px;
  }

  html:has(.dm-page--main) .rf-a11y-panel {
    bottom: 168px;
  }
}


/* The step numbers are Hebrew-page type by inheritance; Latin digits belong in
   Poppins, which is what the rest of the ported section uses. */
.dm-steps-sec .flow-step-num {
  font-family: "Poppins", sans-serif;
}

/* The Wistia player sits in the same gradient frame the old cover did. Before
   its script defines the element it is an unstyled block, so it gets the
   clip's poster, blurred, at the frame's own ratio — Wistia's own fallback. */
.dm-vsl-frame--wistia wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}

.dm-vsl-frame--wistia wistia-player:not(:defined) {
  background: center / contain no-repeat
    url("https://fast.wistia.com/embed/medias/1xfgbw6p0i/swatch");
  filter: blur(5px);
}

/* The gradient frame around the clip: a hairline down the sides and along the
   bottom, with the caption's own room kept at the top. /demo keeps the
   export's thicker frame. */
.dm-page--main .dm-vsl {
  padding: 12px 3px 3px;
  border-radius: 16px;
}

.dm-page--main .dm-vsl-frame {
  border-radius: 13px;
}

/* ─── /main/thanks ───
   The confirmation page runs the hero on its own, so it carries the page's
   bottom padding itself and the footer sits straight under it. */
.dm-page--thanks .dm-hero {
  padding-bottom: clamp(48px, 5vw, 90px);
}

/* The booking panel: white, rounded, the invitation and Cal.com's own page
   inside it, so the two read as one section on the hero's black. */
.dm-book {
  width: 100%;
  max-width: 1100px;
  margin-top: clamp(28px, 2.8vw, 48px);
  padding: clamp(22px, 2.2vw, 38px) clamp(14px, 1.4vw, 24px) clamp(14px, 1.4vw, 24px);
  border-radius: 24px;
  background: var(--dm-white);
  color: var(--dm-ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.dm-book-line {
  font-weight: 700;
  line-height: 1.3;
  color: var(--dm-ink);
}

/* Two lines and a quiet aside under them, half again the size they were. */
.dm-book-a,
.dm-book-b,
.dm-book-note {
  display: block;
}

.dm-book-a,
.dm-book-b {
  font-size: clamp(22px, 1.85vw, 32px);
}

.dm-book-note {
  margin-top: 8px;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 400;
  color: var(--dm-muted);
}

.dm-cal {
  width: 100%;
  margin-top: clamp(16px, 1.6vw, 26px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--dm-white);
}

.dm-cal-frame {
  display: block;
  width: 100%;
  height: clamp(760px, 78vh, 940px);
  border: 0;
}

/* The divider between the two ticks — the strip's own separator, not a tick. */
.dm-feat--sep {
  opacity: 0.45;
}

/* No sticky bar here, so the footer needs no room kept for it. */
.dm-page--thanks .sf-footer {
  padding-bottom: 40px;
}

/* ─── "/": the landing-page test ───
   The snapshot of "/" carries all three heroes; the script in its <head>
   (src/lib/ab.ts) names this visitor's on <html data-ab>, and only that one is
   shown. Until it has chosen, the home page's own hero holds the space — its
   contents are still held back by the entrance above, so nothing swaps in
   view. Once hydrated, the page drops the other two from the DOM. */
html:not([data-ab]) .dm-hero[data-ab-variant]:not([data-ab-variant="main"]),
html[data-ab="main"] .dm-hero[data-ab-variant]:not([data-ab-variant="main"]),
html[data-ab="v2"] .dm-hero[data-ab-variant]:not([data-ab-variant="v2"]),
html[data-ab="v3"] .dm-hero[data-ab-variant]:not([data-ab-variant="v3"]) {
  display: none;
}