/* Check Your Savings — paid acquisition funnel (uses enterprise tokens) */

html:has(.cys-body) {
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

.cys-body {
  /*
   * Page canvas from symphony.co/lp-en:
   * Wix --color_11 / --wst-color-fill-background-primary = 255,255,255
   */
  --cys-page-bg: #ffffff;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--cys-page-bg);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.cys-body.contact-body {
  min-height: 0;
}

#cys-app {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Kill the global site wash — this page owns its atmosphere */
.cys-body::before {
  display: none !important;
}

.cys-body .site-nav,
.cys-body .sub-pop {
  display: none !important;
}

/*
 * Atmosphere — psychology-driven step moods (hybrid).
 * Soft wash (+ faint photo) on early/friction steps; stronger photos on
 * volume / dropoff / result. Left/top scrim always protects question copy.
 * No SVG décor layers.
 */
.cys-root {
  --cys-bg-photo: none;
  --cys-bg-photo-opacity: 0;
  --cys-bg-photo-position: 78% 46%;
  --cys-bg-photo-saturate: 0.55;
  --cys-bg-photo-bright: 1.06;
  --cys-bg-orb-a: 0.48;
  --cys-bg-orb-b: 0.34;
  --cys-bg-orb-c: 0.22;
  --cys-bg-scrim: 1;
  --cys-bg-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

.cys-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Default canvas — Symphony white; soft gold wash kept subtle */
.cys-bg-base {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(155deg, #ffffff 0%, #ffffff 42%, #fafafa 100%),
    radial-gradient(ellipse 90% 70% at 8% 8%, rgba(227, 178, 60, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 92% 88%, rgba(166, 124, 46, 0.06) 0%, transparent 52%);
  transition: background 620ms var(--cys-bg-ease), opacity 620ms var(--cys-bg-ease);
}

/* Step-aware photography — right-biased, masked for copy */
.cys-bg-photo {
  position: absolute;
  inset: -6%;
  background-image: var(--cys-bg-photo);
  background-size: cover;
  background-position: var(--cys-bg-photo-position);
  background-repeat: no-repeat;
  opacity: var(--cys-bg-photo-opacity);
  filter: saturate(var(--cys-bg-photo-saturate)) brightness(var(--cys-bg-photo-bright));
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.35) 58%,
    rgba(0, 0, 0, 0.8) 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.35) 58%,
    rgba(0, 0, 0, 0.8) 100%
  );
  transition:
    opacity 620ms var(--cys-bg-ease),
    filter 620ms var(--cys-bg-ease),
    background-image 620ms var(--cys-bg-ease);
}

.cys-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  will-change: transform, opacity;
  transition:
    opacity 520ms var(--cys-bg-ease),
    top 520ms var(--cys-bg-ease),
    right 520ms var(--cys-bg-ease),
    left 520ms var(--cys-bg-ease),
    width 520ms var(--cys-bg-ease),
    height 520ms var(--cys-bg-ease),
    background 520ms var(--cys-bg-ease);
}

.cys-bg-orb-a {
  width: min(68vw, 580px);
  height: min(68vw, 580px);
  top: -20%;
  right: -14%;
  opacity: var(--cys-bg-orb-a);
  background: radial-gradient(
    circle,
    rgba(166, 124, 46, 0.32) 0%,
    rgba(227, 178, 60, 0.1) 40%,
    transparent 72%
  );
  animation: cysOrbA 28s ease-in-out infinite alternate;
}

.cys-bg-orb-b {
  width: min(52vw, 440px);
  height: min(52vw, 440px);
  bottom: -18%;
  left: -12%;
  opacity: var(--cys-bg-orb-b);
  background: radial-gradient(
    circle,
    rgba(184, 137, 42, 0.2) 0%,
    rgba(166, 124, 46, 0.06) 42%,
    transparent 72%
  );
  animation: cysOrbB 34s ease-in-out infinite alternate;
}

.cys-bg-orb-c {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  top: 48%;
  left: 52%;
  opacity: var(--cys-bg-orb-c);
  background: radial-gradient(
    circle,
    rgba(166, 124, 46, 0.14) 0%,
    transparent 68%
  );
  animation: cysOrbC 22s ease-in-out infinite alternate;
}

/* Protects headline + questions on the left */
.cys-bg-scrim {
  position: absolute;
  inset: 0;
  opacity: var(--cys-bg-scrim);
  background: linear-gradient(
    90deg,
    rgba(247, 246, 243, 0.98) 0%,
    rgba(247, 246, 243, 0.94) 36%,
    rgba(247, 246, 243, 0.72) 52%,
    rgba(247, 246, 243, 0.28) 68%,
    transparent 82%
  );
  transition: opacity 520ms var(--cys-bg-ease), background 520ms var(--cys-bg-ease);
}

.cys-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: radial-gradient(rgba(28, 26, 23, 0.35) 0.55px, transparent 0.6px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.cys-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 80% at 50% 40%,
    transparent 50%,
    rgba(20, 19, 17, 0.04) 100%
  );
}

/* ── Step moods ── */

/* product — fit / safety (soft) */
.cys-root[data-step='product'] {
  --cys-bg-photo: url('/uploads/cys/cys-step-product.webp?v=cys78');
  --cys-bg-photo-opacity: 0.11;
  --cys-bg-photo-position: 72% 42%;
  --cys-bg-photo-saturate: 0.5;
  --cys-bg-orb-a: 0.42;
  --cys-bg-orb-b: 0.28;
  --cys-bg-orb-c: 0.18;
}
.cys-root[data-step='product'] .cys-bg-base {
  background:
    linear-gradient(155deg, #fbfaf7 0%, #f5f3ee 48%, #efebe3 100%),
    radial-gradient(ellipse 80% 60% at 12% 10%, rgba(227, 178, 60, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 85%, rgba(166, 124, 46, 0.06) 0%, transparent 50%);
}

/* geo — local belonging (soft) */
.cys-root[data-step='geo'] {
  --cys-bg-photo: url('/uploads/cys/cys-step-geo.webp?v=cys78');
  --cys-bg-photo-opacity: 0.12;
  --cys-bg-photo-position: 70% 40%;
  --cys-bg-photo-saturate: 0.48;
  --cys-bg-photo-bright: 1.1;
  --cys-bg-orb-a: 0.4;
  --cys-bg-orb-b: 0.3;
  --cys-bg-orb-c: 0.2;
}
.cys-root[data-step='geo'] .cys-bg-base {
  background:
    linear-gradient(160deg, #f7f8fa 0%, #f3f1ec 45%, #ebe6dc 100%),
    radial-gradient(ellipse 70% 55% at 85% 20%, rgba(120, 150, 180, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(227, 178, 60, 0.12) 0%, transparent 50%);
}

/* volume — stakes / magnitude (strong) */
.cys-root[data-step='volume'] {
  --cys-bg-photo: url('/uploads/cys/cys-step-volume.webp?v=cys78');
  --cys-bg-photo-opacity: 0.24;
  --cys-bg-photo-position: 78% 48%;
  --cys-bg-photo-saturate: 0.62;
  --cys-bg-orb-a: 0.58;
  --cys-bg-orb-b: 0.4;
  --cys-bg-orb-c: 0.28;
  --cys-bg-scrim: 0.96;
}
.cys-root[data-step='volume'] .cys-bg-base {
  background:
    linear-gradient(150deg, #fbf6ea 0%, #f4efe4 40%, #ebe4d6 100%),
    radial-gradient(ellipse 85% 65% at 90% 30%, rgba(227, 178, 60, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 8% 90%, rgba(166, 124, 46, 0.12) 0%, transparent 50%);
}
.cys-root[data-step='volume'] .cys-bg-orb-a {
  top: -16%;
  right: -10%;
}

/* carriers — status-quo friction (medium) */
.cys-root[data-step='carriers'] {
  --cys-bg-photo: url('/uploads/cys/cys-step-carriers.webp?v=cys78');
  --cys-bg-photo-opacity: 0.16;
  --cys-bg-photo-position: 80% 50%;
  --cys-bg-photo-saturate: 0.35;
  --cys-bg-photo-bright: 1.04;
  --cys-bg-orb-a: 0.34;
  --cys-bg-orb-b: 0.24;
  --cys-bg-orb-c: 0.14;
}
.cys-root[data-step='carriers'] .cys-bg-base {
  background:
    linear-gradient(155deg, #f4f3f1 0%, #ebe9e5 48%, #e2dfd8 100%),
    radial-gradient(ellipse 70% 50% at 88% 40%, rgba(90, 95, 105, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(166, 124, 46, 0.08) 0%, transparent 50%);
}
.cys-root[data-step='carriers'] .cys-bg-orb-b {
  background: radial-gradient(
    circle,
    rgba(90, 95, 105, 0.12) 0%,
    transparent 70%
  );
}

/* dropoff — time pain → relief foreshadow (strong) */
.cys-root[data-step='dropoff'] {
  --cys-bg-photo: url('/uploads/cys/cys-step-dropoff.webp?v=cys78');
  --cys-bg-photo-opacity: 0.22;
  --cys-bg-photo-position: 74% 44%;
  --cys-bg-photo-saturate: 0.6;
  --cys-bg-orb-a: 0.62;
  --cys-bg-orb-b: 0.42;
  --cys-bg-orb-c: 0.3;
  --cys-bg-scrim: 0.95;
}
.cys-root[data-step='dropoff'] .cys-bg-base {
  background:
    linear-gradient(148deg, #fff9ef 0%, #f7f0e2 42%, #efe6d4 100%),
    radial-gradient(ellipse 90% 70% at 92% 25%, rgba(227, 178, 60, 0.26) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 8% 88%, rgba(166, 124, 46, 0.1) 0%, transparent 50%);
}

/* aov — almost-done / commitment (soft wash only) */
.cys-root[data-step='aov'] {
  --cys-bg-photo: none;
  --cys-bg-photo-opacity: 0;
  --cys-bg-orb-a: 0.55;
  --cys-bg-orb-b: 0.38;
  --cys-bg-orb-c: 0.26;
}
.cys-root[data-step='aov'] .cys-bg-base {
  background:
    linear-gradient(155deg, #fffdf8 0%, #f8f3e8 45%, #f0e8d6 100%),
    radial-gradient(ellipse 85% 65% at 15% 15%, rgba(227, 178, 60, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 80%, rgba(166, 124, 46, 0.14) 0%, transparent 52%);
}

/* result — conversion page owns chrome; mute global bg */
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']),
.cys-root[data-phase='assess'],
.cys-root[data-phase='dq'] {
  --cys-bg-photo: none;
  --cys-bg-photo-opacity: 0;
  --cys-bg-orb-a: 0;
  --cys-bg-orb-b: 0;
  --cys-bg-orb-c: 0;
  --cys-bg-scrim: 0;
}
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-base {
  background: #171713;
}

/* DQ shares the ask split chrome — mute the old wash. */
.cys-root[data-step='dq_oversize'],
.cys-root[data-step='dq_national'],
.cys-root[data-step='dq_success'] {
  --cys-bg-photo: none;
  --cys-bg-photo-opacity: 0;
  --cys-bg-orb-a: 0;
  --cys-bg-orb-b: 0;
  --cys-bg-orb-c: 0;
}
.cys-root[data-step='dq_oversize'] .cys-bg-base,
.cys-root[data-step='dq_national'] .cys-bg-base,
.cys-root[data-step='dq_success'] .cys-bg-base {
  background: var(--cys-page-bg, #ffffff);
}
.cys-root[data-step='dq_oversize'] .cys-bg-orb-a,
.cys-root[data-step='dq_national'] .cys-bg-orb-a,
.cys-root[data-step='dq_success'] .cys-bg-orb-a {
  filter: blur(72px);
}
.cys-root[data-step='dq_oversize'] .cys-bg-orb-b,
.cys-root[data-step='dq_national'] .cys-bg-orb-b,
.cys-root[data-step='dq_success'] .cys-bg-orb-b {
  background: radial-gradient(
    circle,
    rgba(75, 85, 99, 0.1) 0%,
    transparent 70%
  );
}

/* Assess default orb placement when not result/landing */
.cys-root[data-phase='assess'] .cys-bg-orb-a {
  top: -24%;
  right: -20%;
}

@keyframes cysOrbA {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-4%, 6%, 0) scale(1.08);
  }
}

@keyframes cysOrbB {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6%, -5%, 0) scale(1.1);
  }
}

@keyframes cysOrbC {
  from {
    transform: translate3d(-3%, 2%, 0) scale(0.95);
  }
  to {
    transform: translate3d(4%, -4%, 0) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-bg-orb-a,
  .cys-bg-orb-b,
  .cys-bg-orb-c {
    animation: none !important;
  }

  .cys-bg-base,
  .cys-bg-photo,
  .cys-bg-scrim,
  .cys-bg-orb {
    transition: none !important;
  }

  /* Soften photos further when motion is reduced — less visual competition */
  .cys-root[data-step='product'],
  .cys-root[data-step='geo'],
  .cys-root[data-step='carriers'] {
    --cys-bg-photo-opacity: 0.06;
  }

  .cys-root[data-step='volume'],
  .cys-root[data-step='dropoff'] {
    --cys-bg-photo-opacity: 0.14;
  }
}

@media (max-width: 700px) {
  .cys-bg-orb {
    filter: blur(48px);
  }
  .cys-bg-orb-c {
    display: none;
  }
  .cys-bg-photo {
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 35%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.75) 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 35%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.75) 100%
    );
  }
  .cys-bg-scrim {
    background: linear-gradient(
      180deg,
      rgba(247, 246, 243, 0.98) 0%,
      rgba(247, 246, 243, 0.94) 55%,
      rgba(247, 246, 243, 0.82) 100%
    );
  }
  .cys-bg-grain {
    opacity: 0.035;
  }

  /* Soft steps: quieter photos on small screens */
  .cys-root[data-step='product'] {
    --cys-bg-photo-opacity: 0.07;
  }
  .cys-root[data-step='geo'] {
    --cys-bg-photo-opacity: 0.08;
  }
  .cys-root[data-step='carriers'] {
    --cys-bg-photo-opacity: 0.1;
  }
  .cys-root[data-step='volume'] {
    --cys-bg-photo-opacity: 0.16;
  }
  .cys-root[data-step='dropoff'] {
    --cys-bg-photo-opacity: 0.15;
  }
}

@media (max-height: 640px) {
  .cys-root[data-step='product'],
  .cys-root[data-step='geo'],
  .cys-root[data-step='carriers'] {
    --cys-bg-photo-opacity: 0;
  }
  .cys-root[data-step='volume'],
  .cys-root[data-step='dropoff'] {
    --cys-bg-photo-opacity: 0.1;
  }
}

.cys-shell {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ── */
.cys-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-shrink: 0;
  padding: 10px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  z-index: 20;
  transition: border-color 220ms ease, background 220ms ease;
}

.cys-header--landing {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--border);
}

.cys-root[data-phase='assess'] .cys-header,
.cys-root[data-phase='result'] .cys-header,
.cys-root[data-phase='dq'] .cys-header {
  border-bottom-color: var(--border);
  background: rgba(255, 255, 255, 0.92);
}

.cys-header-trust {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
  white-space: nowrap;
}

.cys-header--funnel {
  justify-content: space-between;
  width: 100%;
}

.cys-header-back {
  border: 0;
  background: none;
  padding: 8px 4px;
  min-height: 40px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #181816);
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
}

.cys-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.cys-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--gold-line);
}

/* ── Main layout ── */
.cys-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px 16px;
}

.cys-main--landing {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.cys-main--step {
  padding: clamp(8px, 1.5vh, 16px) clamp(12px, 2.5vw, 20px);
  align-items: center;
  justify-content: center;
}

.cys-stage {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cys-main--landing .cys-stage {
  max-width: 100%;
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
  align-self: stretch;
}

.cys-main--step .cys-stage {
  max-width: min(580px, 100%);
  justify-content: center;
}

/* Result: conversion split screen (from brunel-conversion-final) */
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-shell,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-main,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-stage,
.cys-root[data-phase='assess'] .cys-shell,
.cys-root[data-phase='assess'] .cys-main,
.cys-root[data-phase='assess'] .cys-stage,
.cys-root[data-phase='dq'] .cys-shell,
.cys-root[data-phase='dq'] .cys-main,
.cys-root[data-phase='dq'] .cys-stage {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-stage,
.cys-root[data-phase='assess'] .cys-stage,
.cys-root[data-phase='dq'] .cys-stage {
  margin: 0;
  flex: 1;
  align-self: stretch;
  overflow: hidden;
}

.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-footer {
  display: none;
}

.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-photo,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-orb-b,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-orb-c,
.cys-root[data-phase='assess'] .cys-bg-photo,
.cys-root[data-phase='assess'] .cys-bg-orb-a,
.cys-root[data-phase='assess'] .cys-bg-orb-b,
.cys-root[data-phase='assess'] .cys-bg-orb-c,
.cys-root[data-phase='dq'] .cys-bg-photo,
.cys-root[data-phase='dq'] .cys-bg-orb-a,
.cys-root[data-phase='dq'] .cys-bg-orb-b,
.cys-root[data-phase='dq'] .cys-bg-orb-c {
  opacity: 0 !important;
}

.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-base {
  background: #171713;
}

.cys-root[data-phase='assess'] .cys-bg-base,
.cys-root[data-phase='dq'] .cys-bg-base {
  background: var(--cys-page-bg, #ffffff);
}

.cys-main--conversion {
  padding: 0 !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}

.cys-panel--conversion {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Hide scrollbars when the conversion panel is the mobile scrollport */
.cys-panel--conversion.cys-panel--scroll-hide,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-panel--conversion {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-panel--conversion::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ── Conversion page — fonts/colors locked to brunel-conversion-final.html ──
   Body: Arial/Helvetica. Georgia only where the HTML sets it (brandmark,
   annual, quote, Shopify mark). Do not inherit site Inter / Inter Tight. */
.cys-conv {
  --cys-conv-ink: #171713;
  --cys-conv-cream: var(--cys-page-bg, #ffffff);
  --cys-conv-paper: var(--cys-page-bg, #ffffff);
  --cys-conv-gold: #b9872d;
  --cys-conv-gold2: #e4c982;
  --cys-conv-muted: #777469;
  --cys-conv-serif: Georgia, serif;
  --cys-conv-sans: Arial, Helvetica, sans-serif;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 38px;
  background: var(--cys-conv-cream);
  color: var(--cys-conv-ink);
  width: 100%;
  font-family: var(--cys-conv-sans);
  -webkit-font-smoothing: antialiased;
  border-radius: 0 0 24px 24px;
  position: relative;
}

/* Beat enterprise Inter / Inter Tight on headings inside this screen */
.cys-conv h1,
.cys-conv h2,
.cys-conv h3,
.cys-conv .cys-conv-h1,
.cys-conv .cys-conv-h2,
.cys-conv .cys-conv-money,
.cys-conv .cys-conv-money span,
.cys-conv .cys-conv-money strong,
.cys-conv .cys-conv-proof strong,
.cys-conv .cys-conv-platform-copy strong {
  font-family: var(--cys-conv-sans) !important;
}

.cys-conv a {
  color: inherit;
  text-decoration: none;
}

.cys-conv button,
.cys-conv input {
  font: inherit;
}

.cys-conv.is-locked .cys-conv-grid,
.cys-conv.is-locked .cys-conv-bottom {
  filter: blur(16px) saturate(0.75);
  transform: scale(1.03);
  pointer-events: none;
  user-select: none;
}

.cys-conv.is-revealing .cys-conv-grid,
.cys-conv.is-revealing .cys-conv-bottom {
  animation: cys-savings-reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cys-savings-reveal {
  from {
    filter: blur(16px) saturate(0.75);
    transform: scale(1.03);
  }
  to {
    filter: blur(0) saturate(1);
    transform: scale(1);
  }
}

.cys-unlock {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(23, 23, 19, 0.28);
}

.cys-unlock-card {
  width: min(420px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 18px 50px rgba(23, 23, 19, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cys-unlock-back {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #777469;
}

.cys-unlock-kicker {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9872d;
}

.cys-unlock-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #171713;
}

.cys-unlock-copy {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.45;
  color: #555248;
}

.cys-unlock-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8d2c4;
  border-radius: 12px;
  padding: 13px 14px;
  background: #fff;
  color: #171713;
}

.cys-unlock-input:focus {
  outline: 2px solid #b9872d;
  outline-offset: 1px;
}

.cys-unlock-submit {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: #171713;
  color: #fffdf8;
  font-weight: 700;
  cursor: pointer;
}

.cys-unlock-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.cys-unlock-fine {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #8a8476;
}

@media (prefers-reduced-motion: reduce) {
  .cys-conv.is-locked .cys-conv-grid,
  .cys-conv.is-locked .cys-conv-bottom {
    transform: none;
  }

  .cys-conv.is-revealing .cys-conv-grid,
  .cys-conv.is-revealing .cys-conv-bottom {
    animation: none;
  }
}

.cys-conv-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(24px, 4vw, 70px);
  border-bottom: 1px solid #1717131f;
  background: rgba(255, 255, 255, 0.78);
}

.cys-conv-back {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cys-conv-ink);
}

.cys-conv-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
  overflow: hidden;
}

.cys-conv-result {
  position: relative;
  min-height: 0;
  padding: clamp(30px, 5vh, 68px) clamp(34px, 6vw, 110px);
  background: var(--cys-conv-paper);
  overflow: hidden;
}

.cys-conv-result::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid #b9872d33;
  border-radius: 50%;
  right: -180px;
  top: -140px;
  box-shadow:
    0 0 0 54px #b9872d0a,
    0 0 0 108px #b9872d06;
  pointer-events: none;
}

.cys-conv-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.cys-conv-eyebrow {
  justify-content: flex-start;
}

.cys-conv-eyebrow span {
  color: var(--cys-conv-gold);
}

.cys-conv-h1 {
  margin: clamp(22px, 4vh, 52px) 0 0;
  font-family: var(--cys-conv-sans);
  font-size: clamp(42px, 4.6vw, 78px);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.9;
  color: var(--cys-conv-ink);
}

.cys-conv-money {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  color: #b9872d;
  line-height: 0.8;
  font-family: var(--cys-conv-sans);
}

.cys-conv-money span,
.cys-conv-money strong {
  color: #b9872d;
}

.cys-conv-money span {
  font-family: var(--cys-conv-sans);
  font-size: clamp(42px, 5vw, 82px);
  font-weight: 800;
  padding-top: 0.1em;
}

.cys-conv-money strong {
  font-family: var(--cys-conv-sans);
  font-size: clamp(90px, 10vw, 174px);
  font-weight: 700;
  letter-spacing: -0.085em;
}

.cys-conv p.cys-conv-annual,
.cys-conv-annual {
  margin: 14px 0 0;
  font-family: var(--cys-conv-serif) !important;
  font-size: clamp(19px, 2vw, 30px);
  color: var(--cys-conv-ink);
}

.cys-conv-annual span {
  color: var(--cys-conv-muted);
}

.cys-conv-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(28px, 4.5vh, 52px);
  /* one clean gold rule between the two stats — no broken black cross */
  border-top: 1px solid var(--cys-conv-gold);
  padding-top: 22px;
}

.cys-conv-proof article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: none;
  padding: 0 28px 0 0;
  min-width: 0;
}

.cys-conv-proof article + article {
  border-left: 1px solid var(--cys-conv-gold);
  padding: 0 0 0 28px;
}

/* Gold ring mark */
.cys-conv-prooficon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid var(--cys-conv-gold);
  color: var(--cys-conv-gold);
  font-weight: 900;
  font-size: 16px;
  flex: 0 0 auto;
}

.cys-conv-proof strong {
  display: block;
  font-family: var(--cys-conv-sans);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--cys-conv-ink) !important;
}

/* Worth line — big, ink, not muted grey */
.cys-conv-proof-label {
  display: block;
  margin-top: 6px;
  font-family: var(--cys-conv-sans);
  font-size: clamp(15px, 1.45vw, 18px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--cys-conv-ink) !important;
}

.cys-conv-quote {
  margin: clamp(28px, 4.5vh, 50px) 0 0;
  padding: 0;
  max-width: 680px;
  border: 0;
}

.cys-conv-action .cys-conv-quote {
  display: none;
}

.cys-conv-stars {
  color: var(--cys-conv-gold);
  letter-spacing: 0.12em;
  font-size: 12px;
  font-family: var(--cys-conv-sans);
}

.cys-conv-quote > p {
  font-family: var(--cys-conv-serif) !important;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.35;
  margin: 10px 0 16px;
  color: var(--cys-conv-ink);
}

/* Highlight stays on-palette; HTML quote has no mark chrome */
.cys-conv-mark {
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
}

.cys-conv-quote footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cys-conv-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cys-conv-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.cys-conv-quote footer strong,
.cys-conv-quote footer small {
  display: block;
  font-size: 11px;
}

.cys-conv-quote footer small {
  color: var(--cys-conv-muted);
  margin-top: 2px;
}

.cys-conv-quote footer > b {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #8a877d;
  border: 1px solid #d9d5cb;
  border-radius: 20px;
  padding: 6px 9px;
  font-weight: 800;
}

.cys-conv-action {
  min-height: 0;
  padding: clamp(28px, 4.5vh, 58px) clamp(30px, 5vw, 86px);
  background: var(--cys-conv-ink);
  color: #f9f6ed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--cys-conv-sans);
}

.cys-conv-h2 {
  font-family: var(--cys-conv-sans);
  font-size: clamp(42px, 4.8vw, 78px);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.95;
  margin: 0 0 clamp(18px, 3vh, 30px);
  color: #f9f6ed;
}

.cys-conv-h2 .cys-price-tape-amount {
  font-size: 0.42em;
  font-weight: 800;
  vertical-align: 0.18em;
  white-space: nowrap;
}

.cys-conv-h2-br--mobile {
  display: none;
}

.cys-conv-platforms {
  display: grid;
  gap: 8px;
}

.cys-conv-platform {
  min-height: 64px;
  display: grid;
  grid-template-columns: 44px 1fr auto 42px;
  align-items: center;
  gap: 13px;
  padding: 8px 10px;
  background: #282824;
  border: 1px solid #3a3933;
  border-radius: 14px;
  transition: 0.22s ease;
  color: #f9f6ed;
}

.cys-conv-platform:hover {
  transform: translateX(5px);
  background: #34332d;
  border-color: #6b5a37;
}

.cys-conv-platform.is-highlight {
  border-color: rgba(228, 201, 130, 0.55);
  box-shadow: 0 0 0 1px rgba(228, 201, 130, 0.2);
}

.cys-conv-pmark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden;
  flex: 0 0 auto;
}

.cys-conv-pmark img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cys-conv-platform-copy small,
.cys-conv-platform-copy strong {
  display: block;
}

.cys-conv-platform-copy small {
  color: var(--cys-conv-gold2) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin-bottom: 2px;
}

/* Beat enterprise `strong { color: var(--text) }` — labels must stay light on ink */
.cys-conv-platform,
.cys-conv-platform:visited,
.cys-conv-platform:hover {
  color: #f9f6ed;
}

.cys-conv-platform-copy strong {
  font-size: 17px;
  font-weight: 700;
  color: #f9f6ed !important;
}

.cys-conv-call strong {
  color: #f5f1e6 !important;
}

.cys-conv-popular {
  color: var(--cys-conv-gold2);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.cys-conv-platform-spacer {
  width: 1px;
  height: 1px;
}

.cys-conv-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cys-conv-gold2);
  color: var(--cys-conv-ink);
  font-size: 16px;
  font-weight: 700;
  transition: 0.2s;
}

.cys-conv-platform:hover .cys-conv-arrow {
  transform: translateX(2px);
  background: #f0d98f;
}

.cys-conv-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 16px 2px 0;
  color: #e8e4d8;
  font-size: 12px;
  font-weight: 600;
}

.cys-conv-checks span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cys-conv-steps {
  border-top: 1px solid #4a4841;
  margin-top: clamp(12px, 2vh, 28px);
  padding-top: 14px;
}

.cys-conv-steps > small {
  color: var(--cys-conv-gold2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.cys-conv-steps > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #f9f6ed;
}

.cys-conv-steps span {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.cys-conv-steps b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--cys-conv-gold2);
  border-radius: 50%;
  color: var(--cys-conv-gold2);
  font-weight: 800;
  font-size: 11px;
}

.cys-conv-steps i {
  height: 1px;
  flex: 1;
  max-width: 44px;
  background: rgba(228, 201, 130, 0.45);
  margin: 0 8px;
}

.cys-conv-fallback {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/*
 * Same pill shape as landing “Start now”, inverted for the dark Final step
 * panel: cream body + ink label + branded gold arrow.
 */
.cys-conv-fallback .cys-cta--pill {
  flex: 1 1 220px;
  justify-content: space-between;
  width: auto;
  max-width: 100%;
  text-decoration: none;
  background: #f7f6f3 !important;
  color: #171713 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.cys-conv-fallback .cys-cta--pill:hover {
  background: #ffffff !important;
  color: #171713 !important;
}

.cys-conv-fallback .cys-cta--pill[hidden] {
  display: none !important;
}

.cys-cta--pill-stack .cys-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding-right: 10px;
  text-align: left;
}

.cys-cta--pill-stack .cys-cta-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(23, 23, 19, 0.62);
  line-height: 1.2;
}

.cys-cta--pill-stack .cys-cta-label {
  padding-right: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  color: #171713 !important;
}

.cys-conv-fallback .cys-cta-arrow {
  width: 48px;
  height: 48px;
  background: var(--cys-conv-gold, var(--gold, #b9872d));
  color: #171713;
}

.cys-conv-fallback .cys-cta-arrow .cys-icon {
  width: 22px;
  height: 22px;
  color: #171713 !important;
  stroke: #171713;
  stroke-width: 2.25;
}

/* Legacy selectors kept as no-ops if older markup is cached. */
.cys-conv-call,
.cys-conv-reveal {
  display: none;
}

.cys-conv-emailform {
  display: none;
  align-items: stretch;
  flex-direction: row;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 420px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.cys-conv-emailform.is-open {
  display: flex;
}

.cys-conv-emailform[hidden] {
  display: none !important;
}

.cys-conv-emailform input {
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
  height: 100%;
  min-height: 0;
  border: 1px solid #49473f;
  border-radius: 9px 0 0 9px;
  background: #242420;
  color: #fff;
  padding: 0 12px;
  outline: none;
  font-size: 14px;
  line-height: 1.2;
}

.cys-conv-emailform input:focus {
  border-color: var(--cys-conv-gold2);
}

.cys-conv-emailform button {
  flex: 0 0 auto;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: var(--cys-conv-gold2);
  color: var(--cys-conv-ink);
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.cys-conv-success {
  display: none;
  align-items: center;
  gap: 7px;
  color: #c8d8a9;
  font-size: 11px;
  margin: 0;
}

.cys-conv-success:not([hidden]) {
  display: flex;
}

.cys-conv-fallback .cys-error {
  width: 100%;
  margin: 0;
  font-size: 11px;
  color: #e8b4a0;
}

.cys-conv-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 70px);
  background: var(--cys-conv-cream);
  color: #8c887e;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.cys-conv-bottom span:last-child {
  font-weight: 800;
  letter-spacing: 0.12em;
}

@media (max-height: 760px) and (min-width: 900px) {
  /* Two rows, as at every other height: the grid and the bottom line. A
     third row for the long-gone .cys-conv-top put the grid in a 58px strip
     on short laptop windows. */
  .cys-conv {
    min-height: 600px;
    grid-template-rows: 1fr 30px;
  }

  .cys-conv-result,
  .cys-conv-action {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .cys-conv-h1 {
    margin-top: 20px;
  }

  .cys-conv-money strong {
    font-size: clamp(82px, 9vw, 140px);
  }

  .cys-conv-proof,
  .cys-conv-quote {
    margin-top: 22px;
  }

  .cys-conv-h2 {
    font-size: clamp(38px, 4.3vw, 64px);
  }

  .cys-conv-platform {
    min-height: 55px;
  }

  .cys-conv-pmark {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 899px) {
  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-base {
    background: var(--cys-page-bg, #ffffff);
  }

  /* Email gate: viewport-locked. Don’t let the blurred results page scroll. */
  .cys-root[data-step='email_gate'] .cys-panel--conversion,
  .cys-root[data-step='email_gate'] .cys-conv {
    overflow: hidden !important;
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  .cys-root[data-step='email_gate'] .cys-conv {
    display: grid;
    grid-template-rows: 1fr;
  }

  .cys-root[data-step='email_gate'] .cys-conv-grid {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .cys-root[data-step='email_gate'] .cys-conv-action {
    min-height: 0;
  }

  .cys-root[data-step='email_gate'] .cys-conv-bottom {
    display: none;
  }

  /*
   * Mobile: keep the shell viewport-fixed, scroll inside the conversion
   * panel so install/action content is reachable — scrollbar hidden.
   */
  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']),
  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-shell,
  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-main,
  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-stage {
    overflow: hidden;
    min-height: 0;
  }

  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-stage {
    flex: 1;
    height: 100%;
  }

  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-panel--conversion,
  .cys-panel--conversion {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden auto !important; /* x clip, y scroll */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .cys-root[data-phase='assess'] .cys-panel--conversion {
    overflow: hidden !important;
  }

  .cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-panel--conversion::-webkit-scrollbar,
  .cys-panel--conversion::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }

  .cys-conv {
    height: auto;
    min-height: min-content;
    max-height: none;
    overflow: visible;
    display: block;
    border-radius: 0;
  }

  .cys-conv-top {
    height: 56px;
    padding: 0 20px;
  }

  .cys-conv-grid {
    display: block;
    overflow: visible;
  }

  .cys-conv-result,
  .cys-conv-action {
    padding: 40px 22px;
    overflow: visible;
  }

  .cys-conv-money strong {
    font-size: clamp(88px, 25vw, 134px);
  }

  .cys-conv-proof,
  .cys-conv-quote {
    margin-top: 36px;
  }

  .cys-conv-action {
    min-height: 720px;
  }

  .cys-conv-h2-br--mobile {
    display: block;
  }

  .cys-conv-h2-br--desktop {
    display: none;
  }

  .cys-conv-popular {
    display: none;
  }

  .cys-conv-platform {
    grid-template-columns: 44px 1fr 42px;
  }

  .cys-conv-platform-spacer {
    display: none;
  }

  /* Mobile: review lives in the action column, in place of "after you install". */
  .cys-conv-result .cys-conv-quote,
  .cys-conv-steps {
    display: none;
  }

  .cys-conv-action .cys-conv-quote {
    display: block;
    margin-top: 22px;
    padding-top: 18px;
    max-width: none;
    border-top: 1px solid #4a4841;
  }

  .cys-conv-action .cys-conv-quote > p {
    color: #f9f6ed;
    font-size: 17px;
  }

  .cys-conv-action .cys-conv-quote footer strong {
    color: #f9f6ed;
  }

  .cys-conv-action .cys-conv-quote footer small {
    color: #aaa79e;
  }

  .cys-conv-action .cys-conv-avatar {
    background: #f7f4ec;
    color: #181812;
  }

  .cys-conv-action .cys-conv-quote footer > b {
    display: inline-flex;
    color: #c9b27a;
    border-color: rgba(228, 201, 130, 0.35);
  }

  .cys-conv-fallback {
    margin-top: 30px;
    align-items: stretch;
    flex-direction: column;
  }

  .cys-conv-fallback .cys-cta--pill {
    flex: 1 1 auto;
    width: 100%;
  }

  .cys-conv-emailform {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .cys-conv-bottom {
    min-height: 56px;
    padding: 14px 20px;
  }

  .cys-conv-bottom span:last-child {
    display: none;
  }
}

@media (max-width: 480px) {
  .cys-conv-proof {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cys-conv-proof article {
    padding: 0;
  }

  .cys-conv-proof article + article {
    border-left: 0;
    border-top: 1px solid var(--cys-conv-gold);
    padding: 18px 0 0;
  }

  .cys-conv-quote footer > b {
    display: none;
  }

  .cys-conv-steps i {
    margin: 0 3px;
  }

  .cys-conv-steps > div {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-conv-platform,
  .cys-conv-arrow {
    transition: none !important;
  }
}

/* ── Ask / waitlist split (brunel-savings-funnel-steps.html) ── */
.cys-ask {
  --cys-ask-ink: #181816;
  --cys-ask-cream: #f3efe4;
  --cys-ask-paper: var(--cys-page-bg, #ffffff);
  --cys-ask-gold: #b4822a;
  --cys-ask-gold-dark: #8c6117;
  --cys-ask-gold2: #e4c982;
  --cys-ask-muted: #77736a;
  --cys-ask-line: #ded9cd;
  --cys-ask-sans: Arial, Helvetica, sans-serif;
  --cys-ask-serif: Georgia, serif;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  background: var(--cys-ask-paper);
  color: var(--cys-ask-ink);
  font-family: var(--cys-ask-sans) !important;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

.cys-ask,
.cys-ask h1,
.cys-ask h2,
.cys-ask p,
.cys-ask span,
.cys-ask strong,
.cys-ask small,
.cys-ask b,
.cys-ask label,
.cys-ask button,
.cys-ask input,
.cys-ask select,
.cys-ask textarea,
.cys-ask a {
  font-family: var(--cys-ask-sans) !important;
}

.cys-ask .cys-ask-mark {
  font-family: var(--cys-ask-serif) !important;
}

.cys-ask a {
  color: inherit;
  text-decoration: none;
}

.cys-ask button {
  cursor: pointer;
  font: inherit;
}

.cys-ask-top,
.cys-ask-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 4vw, 70px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(15px);
}

.cys-ask-top {
  border-bottom: 1px solid #1717131f;
  gap: 16px;
}

.cys-ask-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  font-size: 14px;
  color: var(--cys-ask-ink);
}

.cys-ask-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cys-ask-ink);
  color: var(--cys-ask-cream);
  font: 20px var(--cys-ask-serif) !important;
}

.cys-ask-brand small {
  display: block;
  color: var(--cys-ask-gold-dark);
  font-size: 7px;
  letter-spacing: 0.34em;
  margin-top: 2px;
}

.cys-ask-promise {
  display: flex;
  gap: 18px;
  color: var(--cys-ask-muted);
  font-size: 12px;
  margin-left: 8px;
  margin-right: auto;
}

.cys-ask-promise span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cys-ask-promise i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6f8e55;
  box-shadow: 0 0 0 4px rgba(111, 142, 85, 0.13);
}

.cys-ask-journey {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.cys-ask-progress {
  position: absolute;
  z-index: 8;
  top: 12px;
  right: clamp(24px, 4vw, 56px);
  width: calc(46% - clamp(48px, 8vw, 112px));
  padding: 0;
  color: #f6f2e8;
}

.cys-ask-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cys-ask-progress-meta strong {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aaa79e;
}

.cys-ask-progress-meta span {
  font-size: 12px;
  color: #aaa79e;
}

.cys-ask-progress-track {
  height: 5px;
  background: #34332e;
  border-radius: 99px;
  overflow: hidden;
}

.cys-ask-progress-bar {
  height: 100%;
  background: var(--cys-ask-gold2);
  border-radius: inherit;
}

.cys-ask-step {
  display: grid;
  grid-template-columns: 54% 46%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.cys-root[data-enter='1'] .cys-ask-step {
  animation: cysAskEnter 0.42s cubic-bezier(0.2, 0.75, 0.2, 1);
}

@keyframes cysAskEnter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cys-ask-question {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vh, 56px) clamp(28px, 4vw, 64px);
  background: var(--cys-ask-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cys-ask-question::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(180, 130, 42, 0.18);
  border-radius: 50%;
  right: -190px;
  top: -190px;
  box-shadow:
    0 0 0 55px rgba(180, 130, 42, 0.035),
    0 0 0 110px rgba(180, 130, 42, 0.02);
}

.cys-ask-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cys-ask-gold-dark);
}

.cys-ask-question h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 760px;
  margin: 0;
  font-weight: 800;
  color: var(--cys-ask-ink);
}

.cys-ask-helper {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  max-width: 650px;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.4;
  color: #626c7a;
}

.cys-ask-answer {
  min-width: 0;
  min-height: 0;
  background: var(--cys-ask-ink);
  color: #f8f4e9;
  padding: clamp(52px, 8vh, 80px) clamp(24px, 3.5vw, 56px) clamp(16px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.cys-ask-answer-head {
  margin-bottom: 12px;
}

.cys-ask-answer-head span {
  display: block;
  color: var(--cys-ask-gold2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.cys-ask-answer-head strong {
  display: block;
  color: #f8f4e9;
  font-size: clamp(20px, 1.8vw, 30px);
  letter-spacing: -0.045em;
  font-weight: 800;
}

.cys-root[data-phase='dq'] .cys-ask-answer {
  overflow: auto;
}

.cys-root[data-phase='assess'] .cys-panel--conversion {
  overflow: hidden !important;
}

.cys-ask-options {
  display: grid;
  gap: 8px;
}

.cys-ask-choice {
  width: 100%;
  min-height: 64px;
  border: 1px solid #3b3932;
  border-radius: 14px;
  background: #282824;
  text-align: left;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 42px 1fr 22px;
  align-items: center;
  gap: 10px;
  color: #f8f4e9;
  transition: 0.18s ease;
}

/* Volume / dropoff / AOV — text + radio only (no repeated icon). */
.cys-ask-choice--plain {
  grid-template-columns: 1fr 22px;
  min-height: 52px;
  padding: 12px 14px;
}

.cys-ask-choice--plain.is-selected,
.cys-ask-choice--plain.is-confirming {
  padding: 11px 13px;
}

.cys-ask-choice--plain strong {
  margin-bottom: 0;
}

.cys-ask-choice:hover {
  background: #33322c;
  border-color: #6d5a34;
  transform: translateY(-1px);
}

.cys-ask-choice:focus-visible,
.cys-ask-chip:focus-visible,
.cys-ask-carrier:focus-visible,
.cys-ask-time:focus-visible,
.cys-ask-primary:focus-visible,
.cys-ask-back:focus-visible,
.cys-ask-stepper button:focus-visible {
  outline: 3px solid rgba(180, 130, 42, 0.28);
  outline-offset: 2px;
}

.cys-ask-choice.is-selected,
.cys-ask-choice.is-confirming {
  background: #3a3326;
  border: 2px solid var(--cys-ask-gold2);
  padding: 9px 11px;
}

.cys-ask-choice.is-dimmed {
  opacity: 0.45;
}

.cys-ask-choice-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #f7f3e9;
  color: var(--cys-ask-gold-dark);
}

.cys-ask-choice-icon .cys-icon {
  width: 22px;
  height: 22px;
}

.cys-ask-choice-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cys-ask-choice strong {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
  color: #fff;
  font-weight: 800;
}

.cys-ask-choice small {
  display: block;
  color: #aaa79e;
  font-size: 13px;
  line-height: 1.35;
}

.cys-ask-choice-dot {
  width: 22px;
  height: 22px;
  border: 1.5px solid #6a675d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 12px;
}

.cys-ask-choice.is-selected .cys-ask-choice-dot,
.cys-ask-choice.is-confirming .cys-ask-choice-dot {
  background: var(--cys-ask-gold2);
  border-color: var(--cys-ask-gold2);
  color: var(--cys-ask-ink);
}

.cys-ask-volume {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cys-ask-chip {
  min-height: 46px;
  border: 1px solid #3b3932;
  border-radius: 12px;
  background: #282824;
  color: #f8f4e9;
  font-weight: 800;
  font-size: 13px;
  transition: 0.18s;
}

.cys-ask-chip:hover {
  background: #33322c;
  border-color: #6d5a34;
}

.cys-ask-chip.is-selected,
.cys-ask-chip.is-confirming {
  border: 2px solid var(--cys-ask-gold2);
  background: #3a3326;
  color: #fff;
}

.cys-ask-chip.is-dimmed,
.cys-ask-time.is-dimmed {
  opacity: 0.45;
}

.cys-ask-exact {
  border-top: 1px solid #34332e;
  margin-top: 12px;
  padding-top: 12px;
  flex-shrink: 0;
}

.cys-ask-exact-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #aaa79e;
  font-size: 12px;
  margin-bottom: 10px;
}

.cys-ask-exact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.cys-ask-exact.has-continue .cys-ask-exact-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cys-ask-exact-continue {
  min-height: 48px;
  height: 100%;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0 18px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cys-ask-stepper {
  height: 48px;
  min-width: 0;
  border: 1px solid #3b3932;
  border-radius: 12px;
  background: #282824;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  color: #f8f4e9;
}

.cys-ask-stepper button {
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 23px;
  color: #f8f4e9;
}

.cys-ask-stepper button:first-child {
  border-right: 1px solid #3b3932;
}

.cys-ask-stepper button:last-child {
  border-left: 1px solid #3b3932;
}

.cys-ask-stepper-center {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.cys-ask-stepper-value {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.cys-ask-stepper-center > span:last-child {
  font-size: 13px;
  color: #aaa79e;
}

.cys-ask-carriers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.cys-ask-carrier {
  min-height: 52px;
  border: 1px solid #3b3932;
  border-radius: 12px;
  background: #282824;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: #f8f4e9;
  font-weight: 800;
  font-size: 13px;
  position: relative;
}

.cys-ask-carrier:hover {
  background: #33322c;
  border-color: #6d5a34;
}

.cys-ask-carrier.is-selected {
  border: 2px solid var(--cys-ask-gold2);
  padding: 7px 9px;
  background: #3a3326;
  color: #fff;
}

.cys-ask-carrier-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cys-ask-carrier-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f3efe4;
  color: var(--cys-ask-ink);
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  flex-shrink: 0;
}

.cys-ask-carrier-logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.cys-ask-carrier-check {
  display: none;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 17px;
  height: 17px;
  background: var(--cys-ask-gold);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  font-size: 10px;
}

.cys-ask-carrier.is-selected .cys-ask-carrier-check {
  display: grid;
}

.cys-ask-privacy {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8f8c84;
  font-size: 11px;
  margin-top: 12px;
}

.cys-ask-privacy b {
  color: #6f8e55;
}

.cys-ask-times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cys-ask-time {
  min-height: 54px;
  border: 1px solid #3b3932;
  border-radius: 12px;
  background: #282824;
  padding: 9px 11px;
  text-align: left;
  color: #f8f4e9;
}

.cys-ask-time:hover {
  background: #33322c;
  border-color: #6d5a34;
}

.cys-ask-time.is-selected,
.cys-ask-time.is-confirming {
  border: 2px solid var(--cys-ask-gold2);
  padding: 8px 10px;
  background: #3a3326;
}

.cys-ask-time strong {
  display: block;
  font-size: 16px;
  color: #fff;
}

.cys-ask-time small {
  display: block;
  font-size: 12px;
  color: #aaa79e;
  margin-top: 5px;
}

.cys-ask-recommended {
  color: var(--cys-ask-gold2) !important;
  font-weight: 800;
}

.cys-ask-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cys-ask-label {
  font-size: 12px;
  font-weight: 700;
  color: #aaa79e;
  margin-top: 8px;
}

.cys-ask-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid #3b3932;
  background: #282824;
  font: inherit;
  font-size: 15px;
  color: #f8f4e9;
  box-sizing: border-box;
}

.cys-ask-input:focus {
  outline: 3px solid rgba(180, 130, 42, 0.28);
  outline-offset: 2px;
  border-color: var(--cys-ask-gold2);
}

.cys-ask-textarea {
  min-height: 88px;
  resize: vertical;
}

.cys-ask-error {
  display: none;
  color: #e58f7f;
  font-size: 12px;
  margin: 4px 0 0;
}

.cys-ask-error:not([hidden]) {
  display: block;
}

.cys-ask-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cys-ask-success-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dce7d3;
  color: #6f8e55;
  font-weight: 900;
  font-size: 22px;
}

.cys-ask-success p {
  margin: 0;
  color: #aaa79e;
  line-height: 1.5;
  font-size: 15px;
}

.cys-ask-text {
  border: 0;
  background: transparent;
  color: var(--cys-ask-gold2);
  font-size: 13px;
  font-weight: 800;
  padding: 12px 0 0;
  text-align: left;
}

.cys-ask-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid #34332e;
  margin-top: auto;
  padding-top: 12px;
}

.cys-ask-primary {
  border: 0;
  background: var(--cys-ask-gold2);
  color: var(--cys-ask-ink);
  border-radius: 12px;
  min-height: 44px;
  padding: 0 20px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: 0.18s;
}

.cys-ask-primary:hover {
  background: #f0d78e;
  transform: translateY(-1px);
}

.cys-ask-primary:disabled {
  background: #3d3b35;
  color: #77746c;
  cursor: not-allowed;
  transform: none;
}

a.cys-ask-primary {
  text-decoration: none;
}

.cys-ask-back {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cys-ask-ink);
  flex-shrink: 0;
  margin-left: auto;
}

.cys-ask-trust {
  margin-left: auto;
  font-size: 11px;
  color: #8c8981;
}

.cys-ask-footer {
  border-top: 1px solid rgba(24, 24, 22, 0.08);
  font-size: 10px;
  color: #858178;
}

.cys-ask-footer strong {
  color: var(--cys-ask-ink);
  letter-spacing: 0.11em;
}

.cys-ask-footer a {
  color: var(--cys-ask-gold-dark);
}

@media (max-height: 800px) and (min-width: 701px) {
  .cys-ask-helper,
  .cys-ask-privacy,
  .cys-ask-trust,
  .cys-ask-exact-label {
    display: none;
  }

  .cys-root[data-step='dropoff'] .cys-ask-exact {
    display: none;
  }

  .cys-ask-question {
    padding: 24px 32px;
  }

  .cys-ask-question h1 {
    font-size: clamp(24px, 3.2vw, 40px);
  }

  .cys-ask-answer {
    padding: 48px 28px 16px;
  }

  .cys-ask-choice {
    min-height: 56px;
  }

  .cys-ask-time {
    min-height: 48px;
  }

  .cys-ask-progress {
    top: 12px;
  }
}

@media (max-width: 700px) {
  .cys-root[data-phase='assess'] .cys-main,
  .cys-root[data-phase='dq'] .cys-main {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .cys-root[data-phase='assess'] .cys-stage,
  .cys-root[data-phase='dq'] .cys-stage {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: 100%;
  }

  .cys-root[data-phase='assess'] .cys-panel--conversion,
  .cys-root[data-phase='dq'] .cys-panel--conversion {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    max-height: 100%;
    overflow: hidden !important;
  }

  .cys-root[data-phase='assess'] .cys-footer,
  .cys-root[data-phase='dq'] .cys-footer {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    background: var(--cys-page-bg, #ffffff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cys-ask {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .cys-ask-journey {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .cys-ask-progress {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    flex-shrink: 0;
    padding: 8px 16px 0;
    color: var(--cys-ask-ink);
  }

  .cys-ask-progress-meta strong,
  .cys-ask-progress-meta span {
    color: var(--cys-ask-muted);
    font-size: 11px;
  }

  .cys-ask-progress-track {
    background: #e5e1d8;
  }

  .cys-ask-progress-bar {
    background: linear-gradient(90deg, var(--cys-ask-gold-dark), var(--cys-ask-gold));
  }

  .cys-ask-step {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    animation: none;
  }

  .cys-root[data-enter='1'] .cys-ask-step {
    animation: cysAskEnter 0.35s cubic-bezier(0.2, 0.75, 0.2, 1);
  }

  .cys-ask-question {
    flex-shrink: 0;
    padding: 8px 16px 10px;
  }

  .cys-ask-question::after {
    display: none;
  }

  .cys-ask-kicker {
    margin-bottom: 6px;
    font-size: 10px;
  }

  .cys-ask-question h1 {
    font-size: 22px;
    line-height: 1.15;
    max-width: none;
    width: 100%;
  }

  .cys-ask-helper,
  .cys-ask-privacy,
  .cys-ask-trust {
    display: none;
  }

  .cys-ask-answer {
    flex: 1 1 0;
    min-height: 0;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 16px;
  }

  /* Exact-number steppers stay available on mobile for volume / dropoff / AOV. */
  .cys-ask-exact {
    display: block;
    flex-shrink: 0;
    margin-top: 14px;
    padding-top: 12px;
  }

  .cys-ask-exact-label {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .cys-ask-stepper {
    height: 48px;
  }

  .cys-ask-stepper-value {
    font-size: 18px;
  }

  .cys-ask-answer-head {
    margin-bottom: 10px;
    flex-shrink: 0;
  }

  .cys-ask-answer-head span {
    margin-bottom: 0;
  }

  /*
   * Stacked mobile already shows the real question in the cream pane.
   * The dark “answer title” reads like a second question — keep the copy for
   * screen readers, but don’t compete visually on assessment steps.
   */
  .cys-root[data-phase='assess'] .cys-ask-answer-head strong {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Waitlist/DQ: keep the answer title, but as a supporting line under the label. */
  .cys-root[data-phase='dq'] .cys-ask-answer-head strong {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #d8d2c4;
    margin-top: 4px;
  }

  .cys-ask-options,
  .cys-ask-volume,
  .cys-ask-carriers,
  .cys-ask-times {
    flex-shrink: 0;
  }

  .cys-ask-volume,
  .cys-ask-carriers {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cys-ask-times {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cys-ask-choice {
    min-height: 56px;
    padding: 10px;
    grid-template-columns: 36px 1fr 20px;
    gap: 8px;
  }

  .cys-ask-choice--plain {
    grid-template-columns: 1fr 20px;
    min-height: 48px;
    padding: 12px 14px;
  }

  .cys-ask-choice--plain.is-selected,
  .cys-ask-choice--plain.is-confirming {
    padding: 11px 13px;
  }

  .cys-ask-choice-icon {
    width: 36px;
    height: 36px;
  }

  .cys-ask-choice strong {
    font-size: 14px;
  }

  .cys-ask-choice small {
    font-size: 12px;
  }

  .cys-ask-chip {
    min-height: 44px;
    font-size: 12px;
    padding: 0 8px;
  }

  .cys-ask-carrier {
    min-height: 48px;
    font-size: 12px;
    padding: 8px;
  }

  .cys-ask-time {
    min-height: 52px;
    padding: 8px 10px;
  }

  .cys-ask-time strong {
    font-size: 14px;
  }

  .cys-ask-time small {
    font-size: 11px;
  }

  .cys-ask-actions {
    position: static;
    flex-shrink: 0;
    /* Pin to the bottom of the dark pane once the height chain is correct. */
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 12px 0 0;
    background: none;
    border-top: 1px solid #34332e;
  }

  .cys-ask-primary {
    flex: 1;
    min-height: 48px;
    width: 100%;
  }

  .cys-ask-exact.has-continue .cys-ask-exact-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .cys-ask-exact-continue {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 14px;
    font-size: 14px;
  }

  .cys-ask-exact.has-continue .cys-ask-stepper {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .cys-ask-exact.has-continue .cys-ask-stepper-value {
    font-size: 16px;
  }

  .cys-ask-exact.has-continue .cys-ask-stepper-center > span:last-child {
    font-size: 11px;
  }

  .cys-ask-form {
    gap: 6px;
  }

  .cys-ask-input {
    min-height: 48px;
  }

  .cys-ask-textarea {
    min-height: 72px;
  }
}

@media (max-width: 420px) {
  .cys-ask-question h1 {
    font-size: 20px;
  }

  .cys-ask-choice {
    grid-template-columns: 34px 1fr 20px;
    padding: 9px;
    gap: 8px;
    min-height: 52px;
  }

  .cys-ask-choice--plain {
    grid-template-columns: 1fr 20px;
    padding: 11px 12px;
    min-height: 46px;
  }

  .cys-ask-choice.is-selected {
    padding: 8px;
  }

  .cys-ask-choice--plain.is-selected,
  .cys-ask-choice--plain.is-confirming {
    padding: 10px 11px;
  }

  .cys-ask-choice-icon {
    width: 34px;
    height: 34px;
  }

  .cys-ask-choice strong {
    font-size: 13px;
  }

  .cys-ask-carrier {
    font-size: 11px;
  }

  .cys-ask-chip {
    font-size: 11px;
    min-height: 42px;
  }

  .cys-ask-stepper-value {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-ask-step,
  .cys-ask-choice,
  .cys-ask-chip,
  .cys-ask-carrier,
  .cys-ask-time,
  .cys-ask-primary,
  .cys-ask-progress-bar {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Progress (inside card) ── */
.cys-panel--card > .cys-progress {
  flex-shrink: 0;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  padding-bottom: clamp(10px, 1.4vh, 14px);
  border-bottom: 1px solid var(--border);
}

.cys-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cys-progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cys-progress-pct {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.cys-progress-dots {
  display: flex;
  gap: 6px;
}

.cys-progress-dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  transition: background 200ms ease, transform 200ms ease;
}

.cys-progress-dot.is-done {
  background: var(--gold);
}

.cys-progress-dot.is-current {
  background: var(--gold);
  transform: scaleY(1.35);
  box-shadow: 0 0 0 1px rgba(166, 124, 46, 0.2);
}

/* ── Panel / card ── */
.cys-panel {
  min-height: 0;
}

.cys-panel--card {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(18px, 2.8vh, 28px) clamp(18px, 3vw, 28px);
  box-shadow:
    0 1px 2px rgba(20, 19, 17, 0.04),
    0 12px 40px rgba(20, 19, 17, 0.06);
}

.cys-panel--landing {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.cys-q {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cys-q-head {
  flex-shrink: 0;
  margin-bottom: clamp(12px, 2vh, 18px);
}

.cys-q-body {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cys-q-body > .cys-options,
.cys-q-body > .cys-chips-grid,
.cys-q-body > .cys-numeric {
  flex-shrink: 0;
}

.cys-q-body > .cys-actions {
  margin-top: clamp(14px, 2vh, 20px);
}

.cys-dq,
.cys-result {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}

/* Keep scroll children at full height — otherwise the back row pins to the
   viewport bottom and overlaps content above on short mobile screens. */
.cys-dq > *,
.cys-result > * {
  flex-shrink: 0;
}

.cys-dq > .cys-actions,
.cys-result > .cys-actions {
  margin-top: clamp(14px, 2vh, 20px);
}

.cys-panel.is-back {
  animation: none;
}

.cys-panel.is-exiting {
  animation: none;
}

.cys-panel.is-exiting-back {
  animation: none;
}

@keyframes cysIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cysInBack {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cysOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes cysOutBack {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-panel,
  .cys-panel.is-back,
  .cys-panel.is-exiting,
  .cys-panel.is-exiting-back,
  .cys-progress-bar,
  .cys-option,
  .cys-option.is-confirming,
  .cys-option-check {
    animation: none !important;
    transition: none !important;
  }
}

.cys-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.cys-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 16px;
}

.cys-h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vh, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.cys-sub,
.cys-hint {
  font-size: clamp(14px, 1.8vh, 16px);
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
  max-width: 36em;
}

.cys-step-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin: clamp(10px, 1.5vh, 14px) 0 0;
  text-align: center;
}

.cys-q-head .cys-h2 {
  margin-bottom: 6px;
}

.cys-q-head .cys-hint {
  margin-top: 6px;
}

.cys-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin: 0 0 clamp(12px, 2vh, 20px);
}

.cys-cta {
  margin-top: 0;
  min-height: clamp(46px, 6vh, 52px);
  padding-inline: clamp(24px, 4vw, 32px);
  font-size: clamp(14px, 1.8vh, 16px);
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(166, 124, 46, 0.28);
  transform: none !important;
}

.cys-cta:hover {
  transform: none !important;
  background: var(--gold-light);
}

.cys-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Symphony-like pill: dark body + gold arrow capsule */
.cys-cta--pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px 6px 6px 22px;
  min-height: 52px;
  background: #1c1a17 !important;
  color: #f7f6f3 !important;
  border: none;
  box-shadow: 0 8px 28px rgba(28, 26, 23, 0.22);
}

.cys-cta--pill:hover {
  background: #2a2723 !important;
  color: #fff !important;
}

.cys-cta-label {
  padding-right: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cys-cta-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  flex: 0 0 auto;
  overflow: visible;
  isolation: isolate;
  transition:
    transform 220ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 220ms ease;
}

.cys-cta-arrow-glow {
  display: none;
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}

.cys-cta-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  will-change: transform;
}

.cys-cta-arrow .cys-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  vertical-align: 0;
  color: #fff !important;
  stroke: #fff;
  stroke-width: 2.25;
}

/* Mobile / coarse pointer: simple looping nudge */
@media (max-width: 959px), (pointer: coarse) {
  .cys-cta-arrow-icon {
    animation: cys-cta-arrow-nudge 1.35s ease-in-out infinite;
  }
}

@keyframes cys-cta-arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

/* Desktop magnetic mode — JS adds .is-magnetic; suppress CSS nudge */
.cys-cta-arrow.is-magnetic .cys-cta-arrow-icon {
  animation: none;
}

/* On-button: RGB ring + “about to explode” pulse */
.cys-cta-arrow.is-hot {
  transform: scale(1.14);
  background: #1c1a17;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 22px rgba(255, 80, 120, 0.45),
    0 0 34px rgba(80, 180, 255, 0.35);
}

.cys-cta-arrow.is-hot .cys-cta-arrow-glow {
  display: block;
  background: conic-gradient(
    from 0deg,
    #ff004c,
    #ffb000,
    #00e676,
    #2979ff,
    #d500f9,
    #ff004c
  );
  animation:
    cys-cta-rgb-spin 0.65s linear infinite,
    cys-cta-rgb-pulse 0.5s ease-in-out infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.cys-cta-arrow.is-hot .cys-cta-arrow-icon {
  animation: cys-cta-arrow-charge 0.45s ease-in-out infinite;
}

@keyframes cys-cta-rgb-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cys-cta-rgb-pulse {
  0%,
  100% {
    inset: -3px;
    filter: saturate(1.1) brightness(1.05);
  }
  50% {
    inset: -6px;
    filter: saturate(1.35) brightness(1.25);
  }
}

@keyframes cys-cta-arrow-charge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-cta-arrow-icon,
  .cys-cta-arrow.is-hot .cys-cta-arrow-glow,
  .cys-cta-arrow.is-hot .cys-cta-arrow-icon {
    animation: none !important;
  }

  .cys-cta-arrow.is-hot {
    transform: none;
  }
}

.cys-back {
  display: inline-flex;
  margin-top: 0;
  background: none;
  border: none;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
}

.cys-back:hover {
  color: var(--text);
}

.cys-linkish {
  display: inline-block;
  margin-top: 0;
  background: none;
  border: none;
  color: var(--gold);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none !important;
}

.cys-linkish:hover {
  transform: none !important;
}

.cys-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 22px 0 0;
}

.cys-chips li {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
}

.cys-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 1.2vh, 12px);
  margin: 0;
  width: 100%;
}

.cys-options:not(.cys-options-3) {
  grid-template-columns: minmax(0, 1fr);
}

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

@media (min-width: 640px) {
  .cys-options-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cys-option {
  position: relative;
  display: grid;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition:
    border-color 200ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    background 200ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 200ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 200ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 200ms ease;
}

.cys-option:hover {
  border-color: var(--gold-line);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(20, 19, 17, 0.06);
}

.cys-option:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.cys-option.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-line);
}

.cys-option.is-confirming {
  animation: cysConfirm 520ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 8px 28px rgba(166, 124, 46, 0.18);
}

.cys-option.is-dimmed {
  opacity: 0.42;
  transform: none;
  pointer-events: none;
}

/* Dark answer-pane choices must not inherit the light .cys-option card chrome */
.cys-ask .cys-ask-choice {
  background: #282824 !important;
  border: 1px solid #3b3932 !important;
  color: #f8f4e9 !important;
  box-shadow: none !important;
}

.cys-ask .cys-ask-choice:hover {
  background: #33322c !important;
  border-color: #6d5a34 !important;
}

.cys-ask .cys-ask-choice.is-selected,
.cys-ask .cys-ask-choice.is-confirming {
  background: #3a3326 !important;
  border: 2px solid #e4c982 !important;
  box-shadow: none !important;
  animation: none !important;
}

.cys-ask .cys-ask-choice strong {
  color: #fff !important;
}

.cys-ask .cys-ask-choice small {
  color: #aaa79e !important;
}

.cys-ask .cys-ask-chip,
.cys-ask .cys-ask-carrier,
.cys-ask .cys-ask-time,
.cys-ask .cys-ask-stepper {
  background: #282824 !important;
  border-color: #3b3932 !important;
  color: #f8f4e9 !important;
  box-shadow: none !important;
}

.cys-ask .cys-ask-chip.is-selected,
.cys-ask .cys-ask-carrier.is-selected,
.cys-ask .cys-ask-time.is-selected {
  background: #3a3326 !important;
  border-color: #e4c982 !important;
  color: #fff !important;
}

.cys-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--gold);
  flex-shrink: 0;
}

.cys-option.is-selected .cys-option-icon,
.cys-option.is-confirming .cys-option-icon {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--gold-line);
}

.cys-option-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.cys-option-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

.cys-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  color: transparent;
  background: var(--surface);
  flex-shrink: 0;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.cys-options:not(.cys-options-3) .cys-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 14px 16px;
}

.cys-options:not(.cys-options-3) .cys-option-icon,
.cys-options:not(.cys-options-3) .cys-option-logo {
  flex-shrink: 0;
}

.cys-options:not(.cys-options-3) .cys-option-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.cys-options:not(.cys-options-3) .cys-option-check {
  flex-shrink: 0;
  margin-left: 8px;
}

.cys-options:not(.cys-options-3) .cys-option-sub {
  padding-left: 0;
  margin-top: 0;
}

.cys-options-3 .cys-option {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  min-height: clamp(96px, 13vh, 118px);
  padding: clamp(12px, 1.5vh, 16px) clamp(12px, 2vw, 16px) clamp(12px, 1.5vh, 16px);
}

.cys-options-3 .cys-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
}

.cys-options-3 .cys-option-check {
  position: absolute;
  top: 14px;
  right: 14px;
}

@keyframes cysConfirm {
  0% {
    box-shadow: 0 0 0 0 rgba(166, 124, 46, 0);
  }
  35% {
    box-shadow: 0 0 0 4px rgba(166, 124, 46, 0.18);
  }
  100% {
    box-shadow: 0 8px 28px rgba(166, 124, 46, 0.18);
  }
}

.cys-icon {
  display: block;
  flex-shrink: 0;
  color: var(--gold);
}

.cys-icon-sm {
  width: 16px;
  height: 16px;
}

.btn .cys-icon,
.cys-cta .cys-icon,
.cys-linkish .cys-icon {
  display: inline-block;
  vertical-align: -4px;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.cys-option.is-selected .cys-option-check,
.cys-option.is-confirming .cys-option-check {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: scale(1.05);
}

.cys-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(6px, 1vh, 8px);
  margin-bottom: 0;
}

@media (min-width: 480px) {
  .cys-chips-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cys-chip {
  min-height: clamp(42px, 6vh, 50px);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.cys-chip:hover {
  border-color: var(--gold-line);
}

.cys-chip.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--gold-line);
}

.cys-chip-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 32px;
}

.cys-chip-logo img {
  max-width: 40px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Wordmarks need a wider slot so they stay readable */
.cys-chip.has-logo[data-carrier='ChitChats'] .cys-chip-logo,
.cys-chip.has-logo[data-carrier='UniUni'] .cys-chip-logo {
  flex-basis: 72px;
  width: 72px;
}

.cys-chip.has-logo[data-carrier='ChitChats'] .cys-chip-logo img,
.cys-chip.has-logo[data-carrier='UniUni'] .cys-chip-logo img {
  max-width: 72px;
}

.cys-chip-logo-fallback .cys-icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
}

.cys-chip-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.cys-option-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 8px;
}

.cys-option-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.cys-option.has-logo.is-selected .cys-option-logo,
.cys-option.has-logo.is-confirming .cys-option-logo {
  border-color: var(--gold-line);
}

.cys-dq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  margin-bottom: 14px;
}

.cys-dq-icon.is-success {
  background: rgba(27, 107, 58, 0.1);
  border-color: rgba(27, 107, 58, 0.25);
  color: #1b6b3a;
}

.cys-dq-icon .cys-icon {
  width: 26px;
  height: 26px;
}

.cys-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  flex-shrink: 0;
  padding-top: clamp(12px, 1.6vh, 16px);
  border-top: 1px solid var(--border);
}

.cys-actions--split {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.cys-actions--split .cys-linkish {
  order: -1;
  text-align: left;
  margin-top: 0;
}

.cys-actions .cys-back {
  margin-top: 0;
}

@media (max-width: 560px) {
  .cys-cta {
    width: 100%;
    justify-content: center;
  }
}

.cys-numeric {
  margin: 0;
}

.cys-numeric-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(6px, 1vh, 10px);
}

.cys-stepper {
  width: clamp(40px, 5.5vh, 44px);
  height: clamp(40px, 5.5vh, 44px);
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  transform: none !important;
}

.cys-stepper:hover {
  border-color: var(--gold);
  transform: none !important;
}

.cys-numeric-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vh, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  min-width: 4.5ch;
  text-align: center;
  color: var(--text);
}

.cys-range {
  width: 100%;
  accent-color: var(--gold);
  height: clamp(20px, 3vh, 24px);
  cursor: pointer;
}

.cys-dq-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
  max-width: 420px;
}

.cys-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 8px;
}

.cys-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  box-sizing: border-box;
}

.cys-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-light);
}

.cys-textarea {
  min-height: 88px;
  resize: vertical;
}

.cys-error {
  color: var(--error);
  font-size: 13px;
  margin: 4px 0 0;
}

.cys-result-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin: 0 0 clamp(8px, 1.2vh, 14px);
  padding: clamp(12px, 1.8vh, 18px);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid var(--gold-line);
}

/* ── Result: two-column conversion layout ── */
.cys-result-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.5vh, 24px);
  min-height: 0;
}

@media (min-width: 820px) {
  .cys-result-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
}

.cys-result-figures,
.cys-result-action {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cys-result-annual {
  font-size: clamp(13px, 1.7vh, 15px);
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 clamp(10px, 1.5vh, 14px);
}

.cys-result-annual strong {
  color: var(--text);
  font-weight: 700;
}

@media (min-width: 820px) {
  .cys-result-action {
    padding-left: clamp(24px, 3vw, 40px);
    border-left: 1px solid var(--border);
  }
}

.cys-result-action .cys-h2 {
  font-size: clamp(19px, 2.8vh, 24px);
  margin: 0 0 clamp(10px, 1.5vh, 14px);
}

.cys-result-action .cys-cta {
  width: 100%;
  justify-content: center;
}

.cys-install {
  margin: 0 0 clamp(12px, 1.8vh, 18px);
}

.cys-install-head {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cys-install-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.cys-install-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 88px;
  padding: 10px 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(24, 20, 12, 0.05);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.cys-install-tile:hover {
  border-color: var(--gold-line);
  box-shadow: 0 4px 14px rgba(120, 82, 16, 0.1);
  transform: translateY(-1px);
}

.cys-install-tile.is-highlight {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--surface) 100%);
  box-shadow: 0 0 0 1px var(--gold-line);
}

.cys-install-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 40px;
}

.cys-install-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
}

.cys-install-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-2);
  line-height: 1.2;
  text-align: center;
}

.cys-install-tile.is-highlight .cys-install-label {
  color: var(--gold-dim, #8a5a14);
}

@media (max-width: 420px) {
  .cys-install-grid {
    gap: 6px;
  }

  .cys-install-tile {
    min-height: 76px;
    padding: 8px 6px 10px;
    border-radius: 12px;
  }

  .cys-install-logo {
    width: 44px;
    height: 32px;
  }

  .cys-install-logo img {
    max-height: 28px;
  }

  .cys-install-label {
    font-size: 10px;
  }

  .cys-next-list li {
    font-size: 12px;
  }
}

.cys-reassure {
  list-style: none;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cys-merchant-quote {
  position: relative;
  margin: 0 0 clamp(12px, 1.8vh, 16px);
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 2vw, 16px);
  border-radius: 14px;
  border: 1px solid var(--gold-line);
  background:
    linear-gradient(145deg, rgba(255, 252, 245, 0.98) 0%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow: 0 10px 28px rgba(120, 82, 16, 0.08);
  overflow: hidden;
  animation: cysMerchantIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cys-merchant-quote::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 120px;
  background: radial-gradient(circle, rgba(227, 178, 60, 0.18), transparent 68%);
  pointer-events: none;
}

.cys-merchant-quote-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cys-merchant-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-dim, #8a5a14);
  background: linear-gradient(145deg, var(--gold-soft) 0%, #fff 100%);
  border: 1px solid var(--gold-line);
}

.cys-merchant-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cys-merchant-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cys-merchant-star {
  font-size: 12px;
  line-height: 1;
  color: var(--gold-dim, #8a5a14);
  animation: cysMerchantStarPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cys-merchant-star:nth-child(1) { animation-delay: 0.08s; }
.cys-merchant-star:nth-child(2) { animation-delay: 0.13s; }
.cys-merchant-star:nth-child(3) { animation-delay: 0.18s; }
.cys-merchant-star:nth-child(4) { animation-delay: 0.23s; }
.cys-merchant-star:nth-child(5) { animation-delay: 0.28s; }

@keyframes cysMerchantStarPop {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cys-merchant-meta cite {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.cys-merchant-stat {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}

.cys-merchant-lead {
  position: relative;
  margin: 0;
  font-size: clamp(13px, 1.7vh, 14px);
  line-height: 1.55;
  color: var(--text-2);
  animation: cysMerchantLeadIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.cys-merchant-mark {
  color: var(--gold-dim, #8a5a14);
  background: linear-gradient(
    105deg,
    rgba(242, 214, 140, 0.95) 0%,
    rgba(255, 252, 240, 0.98) 42%,
    rgba(227, 178, 60, 0.92) 72%,
    rgba(242, 214, 140, 0.95) 100%
  );
  background-size: 220% auto;
  padding: 0 0.12em;
  border-radius: 3px;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: cysMerchantShimmer 5s ease-in-out 0.8s infinite;
}

@keyframes cysMerchantIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cysMerchantLeadIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cysMerchantShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.cys-reassure li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 1.7vh, 14px);
  font-weight: 500;
  color: var(--text);
}

.cys-reassure .cys-icon {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.cys-next {
  margin-top: clamp(12px, 1.8vh, 18px);
  padding-top: clamp(12px, 1.8vh, 16px);
  border-top: 1px solid var(--border);
}

.cys-next-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}

.cys-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: cysnext;
}

.cys-next-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(12px, 1.6vh, 13px);
  line-height: 1.4;
  color: var(--text-2);
}

.cys-next-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold-dim);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cys-next-time {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-dim);
}

.cys-result-grid {
  display: grid;
  gap: clamp(6px, 1vh, 8px);
  flex-shrink: 0;
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

@media (min-width: 480px) {
  .cys-result-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cys-result-card {
  background: var(--text);
  color: var(--text-inv);
  border-radius: 12px;
  padding: clamp(10px, 1.5vh, 14px);
}

.cys-result-card.is-accent {
  background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 100%);
}

/* ── Landing split hero (viewport-fit) ── */
.cys-landing {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cys-landing-copy {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3.5vh, 48px) clamp(20px, 4.5vw, 56px);
  background: var(--cys-page-bg, #ffffff);
  overflow: hidden;
}

.cys-landing-visual {
  position: relative;
  flex: 0 0 clamp(160px, 28vh, 280px);
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #1c1a17;
}

.cys-landing-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  display: block;
}

.cys-landing-visual-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.15) 0%, rgba(10, 9, 8, 0.55) 100%),
    linear-gradient(90deg, rgba(247, 246, 243, 0.92) 0%, transparent 28%);
  pointer-events: none;
}

.cys-landing-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cys-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: clamp(8px, 1.2vh, 12px) 8px;
  background: rgba(20, 19, 17, 0.72);
  text-align: center;
}

.cys-stat strong {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.6vh, 14px);
  font-weight: 700;
  color: #f7f6f3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.cys-stat span {
  font-size: 10px;
  font-weight: 500;
  color: rgba(247, 246, 243, 0.72);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/*
 * Proof ticker — one non-wrapping row, so its height is constant and the hero
 * can never grow past the viewport. `is-marquee` is added by JS only when the
 * chips genuinely overflow; otherwise the row sits still.
 */
.cys-badges {
  --cys-ticker-duration: 30s;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Vertical padding keeps `overflow: hidden` from slicing the entrance rise
     and the chip shadows; the margin is pulled back by the same amount. */
  padding: 6px 0;
  margin-top: calc(clamp(12px, 2vh, 18px) - 6px);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
}

.cys-badges-track {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/*
 * Only the overflowing row gets a trailing fade, so chips dissolve at the edge
 * instead of being sliced mid-word. A row that fits needs no fade and must not
 * have its first chip dimmed.
 */
.cys-badges.is-marquee {
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 calc(100% - 32px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 calc(100% - 32px),
    transparent 100%
  );
}

.cys-badges.is-marquee .cys-badges-track {
  animation: cys-badge-drift var(--cys-ticker-duration) linear infinite;
  will-change: transform;
}

/* Reading beats motion — hold still while the visitor inspects the proof.
   `:active` covers touch, where there is no hover to pause with. */
.cys-badges.is-marquee:hover .cys-badges-track,
.cys-badges.is-marquee:active .cys-badges-track,
.cys-badges.is-marquee:focus-within .cys-badges-track {
  animation-play-state: paused;
}

@keyframes cys-badge-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* One full track plus the inter-track gap lands the clone exactly in place. */
    transform: translate3d(calc(-100% - 8px), 0, 0);
  }
}

.cys-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(24, 20, 12, 0.05);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.2;
  white-space: nowrap;
  animation: cys-badge-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(180ms + var(--cys-badge-i, 0) * 70ms);
}

@keyframes cys-badge-pop {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cys-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(160, 122, 42, 0.14);
}

/* The clone is decorative; replaying the entrance on it would look like a stutter. */
.cys-badges-track[aria-hidden='true'] .cys-badge {
  animation: none;
}

.cys-landing .cys-cta {
  align-self: flex-start;
  margin-top: clamp(4px, 0.8vh, 10px);
}

@media (max-height: 700px) {
  .cys-landing .cys-h1 {
    font-size: clamp(30px, 6.2vw, 48px);
  }

  .cys-landing-visual {
    flex-basis: clamp(120px, 18vh, 160px);
  }

  .cys-landing-copy {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (max-width: 420px) {
  .cys-stat {
    padding: 10px 4px;
  }

  .cys-stat strong {
    font-size: 11px;
  }

  .cys-stat span {
    font-size: 9px;
  }

  .cys-landing-copy {
    padding: 20px 16px 18px;
  }

  .cys-landing .cys-eyebrow {
    margin-bottom: 14px;
  }
}

.cys-h1-line {
  white-space: nowrap;
}

/*
 * Washi-tape callout under the landing headline (campaign `tape`).
 * Warm gold gradient keeps contrast on the cream landing panel while echoing
 * the highlighter-tape look from the design reference.
 */
.cys-price-tape {
  --cys-tape-rotate: -1.75deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  padding: 0.42em 0.95em 0.48em;
  transform: rotate(var(--cys-tape-rotate));
  transform-origin: left center;
}

.cys-price-tape-strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 2px;
  background:
    linear-gradient(
      105deg,
      rgba(242, 214, 140, 0.95) 0%,
      rgba(227, 178, 60, 0.92) 38%,
      rgba(196, 146, 48, 0.9) 68%,
      rgba(232, 196, 98, 0.94) 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 248, 230, 0.55) inset,
    0 -1px 0 rgba(140, 96, 20, 0.18) inset,
    0 6px 14px rgba(120, 82, 16, 0.16);
  clip-path: polygon(
    1.2% 8%,
    0% 48%,
    1.6% 92%,
    98.6% 100%,
    100% 54%,
    98.4% 0%
  );
  opacity: 0.92;
}

.cys-price-tape-strip::before,
.cys-price-tape-strip::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 10px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.28),
    transparent 70%
  );
  opacity: 0.7;
  pointer-events: none;
}

.cys-price-tape-strip::before {
  left: 0;
}

.cys-price-tape-strip::after {
  right: 0;
  transform: scaleX(-1);
  background: linear-gradient(
    90deg,
    rgba(80, 50, 8, 0.12),
    transparent 70%
  );
}

.cys-price-tape-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-size: clamp(15px, 2.1vh, 18px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #2a2112;
  white-space: nowrap;
}

/* Cream chip so $5.00 pops off the gold tape instead of blending into it. */
.cys-price-tape-amount {
  display: inline-flex;
  align-items: center;
  margin-left: 0.05em;
  padding: 0.12em 0.42em 0.16em;
  border-radius: 999px;
  background: #fffdf8;
  border: 1px solid rgba(90, 58, 12, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(90, 58, 12, 0.18),
    0 0 0 1px rgba(227, 178, 60, 0.15);
  color: #1a1206;
  -webkit-text-fill-color: #1a1206;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  animation: cys-price-pop 2.4s ease-in-out infinite;
}

@keyframes cys-price-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 2px 6px rgba(90, 58, 12, 0.18),
      0 0 0 1px rgba(227, 178, 60, 0.15);
  }
  50% {
    transform: translateY(-1px) scale(1.045);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 5px 12px rgba(90, 58, 12, 0.22),
      0 0 0 1px rgba(227, 178, 60, 0.35),
      0 0 14px rgba(227, 178, 60, 0.35);
  }
}

/*
 * Package-tracking style journey — vertical scan events with a gold rail,
 * matching Brunel’s carrier aesthetic on the landing panel.
 */
.cys-track {
  list-style: none;
  margin: 0 0 clamp(10px, 1.6vh, 16px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 34em;
}

.cys-track-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0 12px;
  align-items: stretch;
  animation: cys-track-in 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(120ms + var(--cys-track-i, 0) * 90ms);
}

@keyframes cys-track-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cys-track-rail {
  position: relative;
  display: flex;
  justify-content: center;
  width: 18px;
}

.cys-track-rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(196, 146, 48, 0.55) 0%,
    rgba(196, 146, 48, 0.28) 100%
  );
}

.cys-track-step:first-child .cys-track-rail::before {
  top: 11px;
}

.cys-track-step:last-child .cys-track-rail::before {
  bottom: calc(100% - 11px);
}

.cys-track-node {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(160, 122, 42, 0.12);
  flex: 0 0 auto;
}

.cys-track-step.is-done .cys-track-node {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(160, 122, 42, 0.14);
}

.cys-track-step.is-active .cys-track-node {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(160, 122, 42, 0.18),
    0 0 0 6px rgba(227, 178, 60, 0.12);
  animation: cys-track-pulse 2.2s ease-in-out infinite;
}

@keyframes cys-track-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(160, 122, 42, 0.18),
      0 0 0 6px rgba(227, 178, 60, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(160, 122, 42, 0.28),
      0 0 0 8px rgba(227, 178, 60, 0.18);
  }
}

.cys-track-body {
  min-width: 0;
  padding: 0 0 clamp(10px, 1.4vh, 14px);
}

.cys-track-step:last-child .cys-track-body {
  padding-bottom: 2px;
}

.cys-track-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 2px;
}

.cys-track-label {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.7vh, 15px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}

.cys-track-step.is-active .cys-track-label {
  color: var(--gold-dim, #8a5a14);
}

.cys-track-meta {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-soft, rgba(227, 178, 60, 0.14));
  border: 1px solid var(--gold-line, rgba(160, 122, 42, 0.28));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim, #8a5a14);
  line-height: 1.2;
}

.cys-track-step.is-active .cys-track-meta {
  background: rgba(227, 178, 60, 0.22);
  border-color: rgba(160, 122, 42, 0.4);
  color: #6e4710;
}

.cys-track-copy {
  margin: 0;
  font-size: clamp(13px, 1.7vh, 15px);
  line-height: 1.45;
  color: var(--text-2);
}

.cys-track-copy strong {
  color: var(--text);
  font-weight: 600;
}

.cys-landing .cys-h1 {
  /* Symphony-inspired scale — still left-aligned for quiz CTA. */
  font-size: clamp(36px, 7.5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 14ch;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}

.cys-landing .cys-sub {
  font-size: clamp(14px, 1.9vh, 16px);
  line-height: 1.55;
  max-width: 32em;
  margin-bottom: clamp(10px, 1.5vh, 16px);
}

.cys-landing .cys-sub strong {
  color: var(--text);
  font-weight: 600;
}

.cys-sub-part {
  white-space: nowrap;
}

.cys-landing .cys-eyebrow {
  margin-bottom: clamp(12px, 1.8vh, 18px);
}

.cys-landing .cys-meta {
  margin-top: clamp(4px, 0.8vh, 8px);
  margin-bottom: clamp(10px, 1.5vh, 16px);
}

@media (min-width: 960px) {
  /* Height sets the scale; the width cap keeps an unbreakable
     .cys-h1-line (the longest, "We pick up at your door.", is ~10em)
     inside the copy column, which is ~41.5vw of content up to 1310px. */
  .cys-landing .cys-h1 {
    font-size: min(clamp(48px, 6.2vh, 72px), 4.1vw);
  }

  .cys-landing {
    display: grid;
    grid-template-columns: minmax(400px, 1.05fr) minmax(340px, 0.95fr);
    grid-template-rows: 1fr;
  }

  .cys-landing-copy {
    padding: clamp(32px, 5vh, 64px) clamp(36px, 5.5vw, 72px);
    border-right: 1px solid rgba(28, 26, 23, 0.06);
  }

  .cys-landing-visual {
    flex: none;
    height: 100%;
  }

  .cys-landing-visual-wash {
    background:
      linear-gradient(180deg, rgba(10, 9, 8, 0.08) 0%, rgba(10, 9, 8, 0.45) 100%),
      linear-gradient(90deg, rgba(247, 246, 243, 0.98) 0%, rgba(247, 246, 243, 0.4) 12%, transparent 32%);
  }

  .cys-header-trust {
    display: block;
  }
}

@media (max-width: 959px) {
  .cys-header-trust {
    display: none;
  }

  /* Trust line is hidden on small screens — collapse the empty header bar. */
  .cys-header {
    display: none;
  }

  .cys-root[data-phase='assess'] .cys-header.cys-header--funnel,
  .cys-root[data-phase='dq'] .cys-header.cys-header--funnel,
  .cys-root[data-phase='result'] .cys-header.cys-header--funnel {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
  }

  .cys-root[data-phase='assess'] .cys-header--funnel .cys-header-trust,
  .cys-root[data-phase='dq'] .cys-header--funnel .cys-header-trust,
  .cys-root[data-phase='result'] .cys-header--funnel .cys-header-trust {
    display: block !important;
  }

  .cys-header-back {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 8px 6px;
    color: #181816 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .cys-root[data-phase='landing'] .cys-main,
  .cys-root[data-phase='landing'] .cys-stage,
  .cys-root[data-phase='landing'] .cys-panel--landing {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .cys-root[data-phase='landing'] .cys-panel--landing {
    display: flex;
    flex-direction: column;
  }

  .cys-root[data-phase='landing'] .cys-footer {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    background: var(--cys-page-bg, #ffffff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cys-landing {
    flex: 1 1 0;
    height: auto;
    max-height: 100%;
    min-height: 0;
  }

  .cys-landing-visual {
    order: -1;
    flex: 0 0 clamp(148px, 22vh, 200px);
    border-bottom: 1px solid rgba(28, 26, 23, 0.08);
  }

  .cys-landing-visual-wash {
    /* Keep stats readable without cream bleeding into the copy below. */
    background: linear-gradient(
      180deg,
      transparent 35%,
      rgba(10, 9, 8, 0.28) 70%,
      rgba(10, 9, 8, 0.55) 100%
    );
  }

  .cys-landing-copy {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 18px 18px 12px;
  }

  .cys-landing .cys-eyebrow {
    margin-top: 2px;
    margin-bottom: 12px;
  }

  /* 8.2vw keeps a ~10em .cys-h1-line inside the 18px gutters down to 320px. */
  .cys-landing .cys-h1 {
    font-size: clamp(28px, 8.2vw, 46px);
    margin-bottom: 14px;
  }

  .cys-landing .cys-meta {
    margin-bottom: 10px;
  }

  /* Keep the CTA above the footer while the copy scrolls. */
  .cys-landing .cys-cta {
    position: sticky;
    bottom: 0;
    z-index: 3;
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
    box-shadow:
      0 -12px 20px var(--cys-page-bg, #ffffff),
      0 8px 28px rgba(28, 26, 23, 0.22);
  }

  .cys-landing .cys-badges {
    margin-top: calc(12px - 6px);
    margin-bottom: 4px;
  }
}

@media (max-width: 959px) and (max-height: 720px) {
  .cys-landing-visual {
    flex: 0 0 clamp(110px, 16vh, 150px);
  }

  .cys-landing-copy {
    padding: 14px 16px 10px;
  }

  .cys-landing .cys-h1 {
    font-size: clamp(28px, 7vw, 36px);
    margin-bottom: 10px;
  }

  .cys-landing .cys-eyebrow {
    margin-bottom: 8px;
  }

  .cys-track-copy {
    display: none;
  }

  .cys-price-tape {
    margin-bottom: 10px;
  }

  .cys-landing .cys-badges {
    display: none;
  }
}

/* Landing + result use split visual — hide global bg noise */
.cys-root[data-phase='landing'],
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) {
  --cys-bg-photo: none;
  --cys-bg-photo-opacity: 0;
  --cys-bg-orb-a: 0.55;
  --cys-bg-orb-b: 0;
  --cys-bg-orb-c: 0;
  --cys-bg-scrim: 0;
}

.cys-root[data-phase='landing'] .cys-bg-photo,
.cys-root[data-phase='landing'] .cys-bg-orb-b,
.cys-root[data-phase='landing'] .cys-bg-orb-c,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-photo,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-orb-b,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-orb-c {
  opacity: 0 !important;
}

.cys-root[data-phase='landing'] .cys-bg-scrim,
.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-scrim {
  opacity: 0 !important;
}

.cys-root[data-phase='landing'] .cys-bg-base {
  background: var(--cys-page-bg, #ffffff);
}

.cys-root:is([data-step='result'], [data-step='email_gate'], [data-step='offer']) .cys-bg-base {
  background: #171713;
}

.cys-result-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 6.5vh, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gold);
  line-height: 1;
  animation: cysNumIn 420ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes cysNumIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-result-num {
    animation: none !important;
  }

  .cys-price-tape-amount,
  .cys-track-step.is-active .cys-track-node,
  .cys-track-step,
  .cys-merchant-quote,
  .cys-merchant-lead,
  .cys-merchant-mark,
  .cys-merchant-star {
    animation: none !important;
    transform: none !important;
  }

  /*
   * No drift and no entrance. JS also skips cloning the track, so the chips
   * stay swipeable instead of becoming unreachable.
   */
  .cys-badge,
  .cys-badges .cys-badges-track {
    animation: none !important;
  }

  .cys-badges {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cys-badges::-webkit-scrollbar {
    display: none;
  }
}

.cys-result-label {
  font-size: clamp(12px, 1.6vh, 14px);
  color: var(--text-2);
}

.cys-result-card-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.8vh, 22px);
  font-weight: 700;
  margin-bottom: 2px;
}

.cys-result-card-label {
  font-size: 11px;
  opacity: 0.75;
}

.cys-convert {
  flex-shrink: 0;
  margin: 0 0 clamp(6px, 1vh, 10px);
}

.cys-convert .cys-h2 {
  font-size: clamp(17px, 2.4vh, 20px);
  margin-bottom: 6px;
}

.cys-call {
  margin: clamp(10px, 1.5vh, 14px) 0 0;
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
}

.cys-compare-lite {
  flex-shrink: 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.cys-compare-lite .cys-chips {
  margin: 6px 0 0;
}

.cys-compare-lite .cys-chips li {
  font-size: 11px;
  padding: 4px 8px;
}

.cys-footer {
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  padding: 5px 14px;
  text-align: center;
  border-top: 1px solid var(--border);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.cys-footer p {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-height: 650px) {
  .cys-hint {
    display: none;
  }

  .cys-panel--card > .cys-progress {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
}

@media (max-height: 700px) {
  .cys-compare-lite {
    display: none;
  }

  .cys-landing .cys-sub br {
    display: none;
  }

  /*
   * Chips used to be dropped here to save height. The ticker is a single fixed-
   * height row that scrolls its own overflow, so every proof point can stay —
   * it only needs to get a little tighter.
   */
  .cys-badges {
    margin-top: 10px;
  }

  .cys-badge {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .cys-options-3 .cys-option {
    min-height: 96px;
    padding-top: 10px;
  }

  .cys-dq-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
  }

  .cys-textarea {
    min-height: 64px;
  }
}

.cys-call a {
  color: var(--gold);
  font-weight: 600;
}

.cys-footer a {
  color: var(--gold);
  text-decoration: none;
}

.cys-footer a:hover {
  text-decoration: underline;
}

.cys-note-warn {
  font-size: 12px;
  line-height: 1.45;
  color: var(--gold-dim);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 10px;
}

@supports (padding: max(0px)) {
  .cys-header {
    padding-top: max(16px, env(safe-area-inset-top));
  }
  .cys-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* Chip label for carriers whose logo already spells the name — removed
   from view, kept for screen readers since the logo img is decorative. */
.cys-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The three qualifiers now sit under the install block, so they read as
   one line of conditions rather than a stacked list competing with it.
   Wraps rather than shrinking — "No contract or monthly minimum" does
   not survive being squeezed onto a narrow third of a phone. */
.cys-reassure-row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: clamp(10px, 1.4vh, 14px);
}

.cys-reassure-row li {
  font-size: clamp(12px, 1.5vh, 13px);
}

@media (max-width: 560px) {
  .cys-reassure-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ── Install tiles read as buttons ──────────────────────────────────
   They were logo cards with a name — indistinguishable from the static
   platform logos elsewhere on the page. An explicit action label plus a
   filled hover state says "this is the thing you click". */
.cys-install-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-pale, rgba(235, 224, 200, 0.6));
  border: 1px solid var(--gold-line, rgba(184, 137, 42, 0.28));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-ink, #8A6518);
  transition: background 160ms ease, color 160ms ease;
}

.cys-install-action svg {
  width: 12px;
  height: 12px;
}

.cys-install-tile:hover .cys-install-action,
.cys-install-tile:focus-visible .cys-install-action {
  background: var(--gold, #A67C2E);
  border-color: var(--gold, #A67C2E);
  color: #fff;
}

/* ── "What happens after you install" as a horizontal track ─────────
   Three short steps stacked vertically read as a checklist to work
   through. In a row with arrows between, they read as a sequence that is
   already short — which is the actual point. */
.cys-next {
  text-align: center;
}

.cys-next-track {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.cys-next-track li {
  position: relative;
  gap: 7px;
  padding-right: 20px;
}

/* Arrow between steps, never after the last one. */
.cys-next-track li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--gold-line, rgba(184, 137, 42, 0.5));
  border-right: 1.5px solid var(--gold-line, rgba(184, 137, 42, 0.5));
  transform: translateY(-50%) rotate(45deg);
}

.cys-next-time {
  text-align: center;
}

/* Below this the three steps plus arrows stop fitting on one line, and
   a half-wrapped track is worse than a stacked one. */
@media (max-width: 520px) {
  .cys-next-track {
    flex-direction: column;
    align-items: center;
  }
  .cys-next-track li { padding-right: 0; }
  .cys-next-track li:not(:last-child)::after { display: none; }
}

/* ── "Not ready yet" capture on the result screen ───────────────────
   Sits under the book-a-call line as the softest of the three exits:
   install now, talk to someone, or leave an address. Visually quieter
   than both so it never competes with the install tiles. */
.cys-stay {
  margin-top: clamp(14px, 2vh, 20px);
  padding-top: clamp(12px, 1.8vh, 16px);
  border-top: 1px solid var(--border);
  text-align: center;
}

.cys-stay-head {
  margin: 0;
  font-size: clamp(14px, 1.8vh, 15px);
  font-weight: 600;
  color: var(--text);
}

.cys-stay-sub {
  margin: 2px 0 10px;
  font-size: clamp(12.5px, 1.6vh, 13.5px);
  color: var(--text-3);
}

.cys-stay-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cys-stay-form .cys-input {
  flex: 1 1 220px;
  max-width: 300px;
  min-width: 0;
}

.cys-stay-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Fine print, but legible — it is the wording the consent rests on. */
.cys-stay-consent {
  margin: 8px auto 0;
  max-width: 44ch;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
}

@media (max-width: 520px) {
  .cys-stay-form .cys-input,
  .cys-stay-btn {
    flex: 1 1 100%;
    max-width: none;
  }
}

/*
 * ── Assess steps 1–6 mobile revamp ─────────────────────────────────────
 * Applies to product → geo → volume → carriers → dropoff → aov.
 * Desktop / DQ / landing / result stay unchanged.
 * Beats `.cys-ask .cys-ask-choice { … !important }` dark-pane overrides.
 */
@media (max-width: 700px) {
  .cys-root[data-phase='assess'] .cys-header.cys-header--funnel {
    padding: max(14px, env(safe-area-inset-top)) 20px 10px;
    background: var(--cys-ask-paper, #f7f3e8);
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cys-root[data-phase='assess'] .cys-header--funnel .cys-header-trust {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #9d9b95;
  }

  .cys-root[data-phase='assess'] .cys-header-back {
    min-height: 44px;
    padding: 8px 2px;
    font-size: 15px;
    font-weight: 800;
    color: #151510 !important;
    gap: 6px;
  }

  .cys-root[data-phase='assess'] .cys-ask-progress {
    padding: 4px 20px 0;
  }

  .cys-root[data-phase='assess'] .cys-ask-progress-meta {
    margin-bottom: 10px;
  }

  .cys-root[data-phase='assess'] .cys-ask-progress-meta strong,
  .cys-root[data-phase='assess'] .cys-ask-progress-meta span {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #757268;
  }

  .cys-root[data-phase='assess'] .cys-ask-progress-meta span {
    letter-spacing: 0;
    font-weight: 500;
    color: #77746b;
    text-transform: none;
  }

  .cys-root[data-phase='assess'] .cys-ask-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #e7e1d6;
  }

  .cys-root[data-phase='assess'] .cys-ask-progress-bar {
    background: linear-gradient(90deg, #9e6715, #c18a2f);
  }

  .cys-root[data-phase='assess'] .cys-ask-question {
    padding: 12px 20px 14px;
  }

  .cys-root[data-phase='assess'] .cys-ask-kicker {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: #976316;
  }

  .cys-root[data-phase='assess'] .cys-ask-question h1 {
    margin: 0;
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 900;
    max-width: none;
    width: 100%;
  }

  .cys-root[data-phase='assess'] .cys-ask-answer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 14px 18px 12px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .cys-root[data-phase='assess'] .cys-ask-answer::after {
    content: '';
    flex: 1 1 auto;
    min-height: 8px;
  }

  .cys-root[data-phase='assess'] .cys-ask-answer-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  .cys-root[data-phase='assess'] .cys-ask-answer-head > span {
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f1dc9a;
  }

  .cys-root[data-phase='assess'] .cys-ask-options,
  .cys-root[data-phase='assess'] .cys-ask-carriers,
  .cys-root[data-phase='assess'] .cys-ask-volume,
  .cys-root[data-phase='assess'] .cys-ask-times {
    gap: 11px;
    flex-shrink: 0;
  }

  /* Icon + text cards (product, geo) */
  .cys-root[data-phase='assess'] .cys-ask-choice {
    min-height: 92px;
    padding: 15px 15px 15px 14px !important;
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    gap: 14px;
    border-radius: 22px;
    border: 1px solid #3b3b32 !important;
    background: #23241e !important;
    color: #f8f4e9 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 0.16s ease,
      background 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice:active {
    transform: scale(0.992);
  }

  .cys-root[data-phase='assess'] .cys-ask-choice:hover {
    transform: none;
    background: #2a2b25 !important;
    border-color: #4a4a40 !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice.is-selected,
  .cys-root[data-phase='assess'] .cys-ask-choice.is-confirming {
    min-height: 92px;
    padding: 14px 14px 14px 13px !important;
    border: 2px solid #e6c978 !important;
    background:
      linear-gradient(180deg, rgba(179, 123, 32, 0.14), rgba(179, 123, 32, 0.08)),
      #3b3525 !important;
    box-shadow: 0 0 0 1px rgba(230, 201, 120, 0.1) inset !important;
  }

  /* Range / time cards without icons (volume, dropoff, aov) */
  .cys-root[data-phase='assess'] .cys-ask-choice--plain {
    grid-template-columns: minmax(0, 1fr) 34px;
    min-height: 72px;
    padding: 14px 16px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice--plain.is-selected,
  .cys-root[data-phase='assess'] .cys-ask-choice--plain.is-confirming {
    min-height: 72px;
    padding: 13px 15px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: #f7f4ec;
    color: #b37b20;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice-icon .cys-icon {
    width: 27px;
    height: 27px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice strong {
    font-size: 18px !important;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 5px;
    font-weight: 800;
    color: #fff !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice--plain strong {
    font-size: 17px !important;
    margin-bottom: 0;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice small {
    font-size: 14px !important;
    line-height: 1.32;
    color: #aaa79d !important;
    font-weight: 500;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice-dot {
    width: 34px;
    height: 34px;
    border-width: 2px;
    border-color: #68675f;
    font-size: 14px;
    color: transparent;
    background: transparent;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice.is-selected .cys-ask-choice-dot,
  .cys-root[data-phase='assess'] .cys-ask-choice.is-confirming .cys-ask-choice-dot {
    border-color: #e6c978;
    background: #e6c978;
    color: #181812;
  }

  /* Carrier multi-select grid */
  .cys-root[data-phase='assess'] .cys-ask-carriers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cys-root[data-phase='assess'] .cys-ask-carrier {
    min-height: 64px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #3b3b32 !important;
    background: #23241e !important;
    font-size: 14px;
    font-weight: 700;
  }

  .cys-root[data-phase='assess'] .cys-ask-carrier.is-selected {
    border: 2px solid #e6c978 !important;
    background:
      linear-gradient(180deg, rgba(179, 123, 32, 0.14), rgba(179, 123, 32, 0.08)),
      #3b3525 !important;
    color: #fff !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-actions {
    flex-shrink: 0;
    margin-top: 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .cys-root[data-phase='assess'] .cys-ask-primary {
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
  }

  .cys-root[data-phase='assess'] .cys-ask-privacy {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: #8d8b84;
  }

  .cys-root[data-phase='assess'] .cys-footer {
    background: var(--cys-ask-ink, #181816);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #8f8e87;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    font-size: 11px;
    line-height: 1.45;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cys-root[data-phase='assess'] .cys-footer a {
    color: #b98736;
  }
}

@media (max-width: 700px) and (max-height: 740px) {
  .cys-root[data-phase='assess'] .cys-header.cys-header--funnel {
    padding-bottom: 6px;
  }

  .cys-root[data-phase='assess'] .cys-ask-question {
    padding: 10px 18px 12px;
  }

  .cys-root[data-phase='assess'] .cys-ask-question h1 {
    font-size: clamp(24px, 6.8vw, 30px);
  }

  .cys-root[data-phase='assess'] .cys-ask-answer {
    padding-top: 12px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice {
    min-height: 80px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice.is-selected,
  .cys-root[data-phase='assess'] .cys-ask-choice.is-confirming {
    min-height: 80px;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice--plain,
  .cys-root[data-phase='assess'] .cys-ask-choice--plain.is-selected,
  .cys-root[data-phase='assess'] .cys-ask-choice--plain.is-confirming {
    min-height: 64px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice strong {
    font-size: 17px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice small {
    font-size: 13px !important;
  }
}

@media (max-width: 374px) {
  .cys-root[data-phase='assess'] .cys-ask-choice {
    grid-template-columns: 48px minmax(0, 1fr) 30px;
    gap: 12px;
    min-height: 84px;
    padding: 12px !important;
    border-radius: 18px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice.is-selected,
  .cys-root[data-phase='assess'] .cys-ask-choice.is-confirming {
    min-height: 84px;
    padding: 11px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice--plain {
    grid-template-columns: minmax(0, 1fr) 30px;
    min-height: 64px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice-icon {
    width: 48px;
    height: 48px;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice strong {
    font-size: 17px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-choice small {
    font-size: 13px !important;
  }

  .cys-root[data-phase='assess'] .cys-ask-question h1 {
    font-size: clamp(24px, 7vw, 30px);
  }
}


/* ==========================================================================
   A/B variants — v2 (blurred savings number) and v3 (book a call)
   --------------------------------------------------------------------------
   Both arms reuse the v1 conversion screen wholesale; only the money figure and
   the action column change. Nothing below this comment is reachable on v1, so
   the control renders exactly as it did before the test.
   ========================================================================== */

/* --- v2: the number is the gate -------------------------------------------
   The locked figure keeps v1's `<span>$</span><strong>N</strong>` untouched so
   every existing sizing rule still applies to it. Everything wrapped around it
   uses em / b / i, which `.cys-conv-money span|strong` cannot match — see the
   note in renderMoney(). These resets undo the browser defaults those tags
   bring with them. */
.cys-money-lock em,
.cys-money-lock b,
.cys-money-lock i {
  font-style: normal;
}

/* --- v2: the number is the gate ------------------------------------------- */
.cys-money-lock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* filter: blur() bleeds past the border box, and the leading $ sits right on
     the left edge. The padding absorbs the bleed on every side; the matching
     negative margin keeps the figure optically aligned with the headline above
     it, exactly where the unblurred v1 number sits. */
  padding: 10px 30px 12px 18px;
  margin: 0 0 0 -18px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  /* Comfortably past the 44px minimum on the smallest phone. */
  min-height: 96px;
}

.cys-money-lock-blur {
  display: flex;
  align-items: flex-start;
  user-select: none;
  pointer-events: none;
}

/* The blur lands on the digits alone, never on the leading $.
   A 72px thin dollar sign washes out to a smudge under the same blur that
   144px digit strokes shrug off, which read as a rendering fault rather than a
   deliberate tease. Kept sharp, it anchors the figure as money and makes the
   softened digits beside it obviously intentional.

   It is also lighter than it would need to be if this were the real number,
   because it isn't — the digits under it are a decoy (see renderMoneyDecoy).
   The blur says "not yet"; it is not what keeps the number secret. */
.cys-money-roll {
  filter: blur(9px) saturate(0.9);
  opacity: 0.95;
  transform: scale(1.01);
  transition: filter 0.25s ease, transform 0.25s ease;
  will-change: filter;
}

/* --- rolling decoy --------------------------------------------------------
   One variable drives the mask height, the line box inside it and the travel
   distance. They must agree exactly: if the reel window were taller than the
   line box, the figure would grow while locked and jump on reveal. */
.cys-money-roll {
  --cys-roll-line: 0.8em;
  display: inline-flex;
  align-items: flex-start;
  /* The bleed from the blur above needs somewhere to go, or the top of the
     digits clips against the headline. */
  padding: 14px 16px;
  margin: -14px -16px;
}

.cys-money-reel {
  display: block;
  height: var(--cys-roll-line);
  overflow: hidden;
  /* The strip is one glyph wide; ch tracks the font's own digit advance, so the
     decoy occupies the same width the real number would. */
  width: 1ch;
}

.cys-money-reel b {
  display: block;
  /* 0-9 then 0 again: the repeat gives the loop somewhere to land, so the wrap
     from 9 back to 0 is not a visible snap backwards. */
  white-space: pre;
  line-height: var(--cys-roll-line);
  font-weight: inherit;
  animation: cys-money-reel var(--cys-roll-dur, 1.2s) linear infinite;
  animation-delay: var(--cys-roll-delay, 0s);
}

/* Continuous, not stepped. A stepped reel holds each digit for a beat, and a
   screenshot taken during one of those beats shows a settled, entirely
   plausible dollar figure that is not the visitor's. Scrolling linearly there
   is no such frame: the strip is always between digits. */
@keyframes cys-money-reel {
  from {
    transform: translateY(0);
  }
  to {
    /* Ten line boxes — one full pass through 0-9. */
    transform: translateY(calc(var(--cys-roll-line) * -10));
  }
}

.cys-money-sep {
  display: block;
  line-height: var(--cys-roll-line);
}

/* Hover/focus lifts the veil slightly — enough to read as "this will open",
   never enough to read the number. */
.cys-money-lock:hover .cys-money-roll,
.cys-money-lock:focus-visible .cys-money-roll {
  filter: blur(7px) saturate(1);
  transform: scale(1.03);
}

.cys-money-lock:active .cys-money-roll {
  transform: scale(1.05);
}

.cys-money-lock:focus-visible {
  outline: 2px solid #b9872d;
  outline-offset: 6px;
  border-radius: 18px;
}

/* Hint pill — the only unambiguous instruction on the screen, so it stays
   sharp while everything above it is deliberately not. */
.cys-money-lock-hint {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(185, 135, 45, 0.38);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 6px 18px rgba(23, 23, 19, 0.1);
  font-family: var(--cys-conv-sans);
  font-size: 13px;
  font-weight: 700;
  /* .cys-conv-money sets line-height 0.8 for a 174px numeral; the pill would
     inherit it and clip its own descenders. */
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #8a6414;
  white-space: nowrap;
}

.cys-money-lock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9872d;
  box-shadow: 0 0 0 0 rgba(185, 135, 45, 0.55);
  animation: cys-lock-pulse 1.9s ease-out infinite;
}

@keyframes cys-lock-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(185, 135, 45, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(185, 135, 45, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(185, 135, 45, 0);
  }
}

/* Sparks — six gold motes drifting over the blurred figure. Purely decorative
   and pointer-inert, so they never intercept the tap they are advertising. */
.cys-money-sparks {
  position: absolute;
  inset: 0 14px 26px 0;
  pointer-events: none;
  overflow: visible;
}

.cys-money-sparks i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9b8 0%, #d9a63f 55%, rgba(217, 166, 63, 0) 72%);
  opacity: 0;
  animation: cys-spark 2.8s ease-in-out infinite;
}

.cys-money-sparks i:nth-child(1) { left: 8%;  top: 58%; animation-delay: 0s; }
.cys-money-sparks i:nth-child(2) { left: 26%; top: 22%; animation-delay: 0.4s; }
.cys-money-sparks i:nth-child(3) { left: 44%; top: 70%; animation-delay: 0.9s; }
.cys-money-sparks i:nth-child(4) { left: 63%; top: 30%; animation-delay: 1.3s; }
.cys-money-sparks i:nth-child(5) { left: 81%; top: 62%; animation-delay: 1.7s; }
.cys-money-sparks i:nth-child(6) { left: 93%; top: 18%; animation-delay: 2.2s; }

@keyframes cys-spark {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.5); }
  22%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1.15); }
  55%  { opacity: 0.75; transform: translate3d(3px, -8px, 0) scale(0.9); }
  100% { opacity: 0; transform: translate3d(6px, -20px, 0) scale(0.4); }
}

/* Reveal burst — one paint after the email lands. v1 unblurs the whole page
   (.is-revealing); v2 only ever hid the figure, so only the figure reacts. */
.cys-conv-money.is-bursting {
  animation: cys-money-burst 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cys-money-burst {
  0% {
    filter: blur(15px) saturate(0.85);
    transform: scale(1.06);
    opacity: 0.6;
  }
  60% {
    filter: blur(0) saturate(1.1);
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    filter: blur(0) saturate(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* --- v3: single book-a-call action ---------------------------------------- */
.cys-conv-action--call {
  display: flex;
  flex-direction: column;
}

.cys-conv-call {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 22px;
  padding: 22px 22px 22px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #d9a63f 0%, #b9872d 62%, #9d711f 100%);
  color: #fffdf8;
  box-shadow: 0 14px 34px rgba(157, 113, 31, 0.34);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.cys-conv-call:hover,
.cys-conv-call:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(157, 113, 31, 0.42);
}

.cys-conv-call:active {
  transform: translateY(0);
}

.cys-conv-call:focus-visible {
  outline: 2px solid #fffdf8;
  outline-offset: 3px;
}

.cys-conv-call-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cys-conv-call-copy small {
  font-family: var(--cys-conv-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255, 253, 248, 0.82);
}

.cys-conv-call-copy strong {
  font-family: var(--cys-conv-sans);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.cys-conv-call-copy em {
  font-style: normal;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 253, 248, 0.9);
}

.cys-conv-call-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.16);
  transition: transform 0.18s ease, background 0.18s ease;
}

.cys-conv-call-arrow svg {
  width: 20px;
  height: 20px;
}

.cys-conv-call:hover .cys-conv-call-arrow {
  background: rgba(255, 253, 248, 0.26);
  transform: translateX(3px);
}

.cys-conv-call-sub {
  margin: 16px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  /* The action column is near-black. Inheriting the light-side ink token here
     put dark grey on dark and made this line unreadable. */
  color: rgba(255, 253, 248, 0.72);
}

.cys-conv-action--call .cys-conv-checks {
  margin-top: 18px;
}

/* --- mobile ---------------------------------------------------------------
   The lock hint and the call button are the two things a phone visitor must be
   able to hit without thinking, so both go full-bleed at the narrow end. */
@media (max-width: 720px) {
  .cys-money-lock {
    padding-right: 12px;
    min-height: 108px;
  }

  .cys-money-lock-hint {
    font-size: 12px;
    padding: 9px 14px;
  }

  .cys-money-sparks {
    inset: 0 4px 30px 0;
  }

  .cys-money-lock-hint {
    margin-left: 18px;
  }

  .cys-conv-call {
    gap: 12px;
    padding: 20px 18px;
    border-radius: 18px;
  }

  .cys-conv-call-arrow {
    width: 42px;
    height: 42px;
  }

  .cys-conv-call-sub {
    font-size: 13px;
  }
}

/* --- reduced motion -------------------------------------------------------
   The sparks and the pulse are ornament; the blur is information. Motion goes,
   the gate stays legible. */
@media (prefers-reduced-motion: reduce) {
  .cys-money-sparks {
    display: none;
  }

  .cys-money-lock-dot {
    animation: none;
  }

  .cys-money-roll {
    transition: none;
  }

  /* Frozen, not removed: the decoy still has to stand in for the number. */
  .cys-money-reel b {
    animation: none;
  }

  .cys-conv-money.is-bursting {
    animation: none;
  }

  .cys-conv-call {
    transition: none;
  }

  .cys-conv-call:hover,
  .cys-conv-call:focus-visible {
    transform: none;
  }
}

/* --- v1: contact-first action column ---------------------------------------- */
/* "$7,128 / year": the suffix sits on the figure's baseline at label size. */
.cys-conv-money .cys-conv-money-per {
  align-self: flex-end;
  margin: 0 0 0.12em 0.35em;
  font-family: var(--cys-conv-sans);
  font-size: clamp(24px, 2.4vw, 40px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #b9872d;
  white-space: nowrap;
}

/* Line icons in the white tile the platform logos sit in. */
.cys-conv-pmark--icon .cys-icon {
  width: 22px;
  height: 22px;
  color: var(--cys-conv-ink);
}

.cys-conv-platform[data-action='whatsapp'] .cys-conv-pmark--icon .cys-icon {
  color: #1da851;
}

button.cys-conv-platform {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cys-conv-platform.is-done,
.cys-conv-platform.is-done:hover {
  cursor: default;
  transform: none;
  background: #282824;
  border-color: rgba(200, 216, 169, 0.45);
}

.cys-conv-platform.is-done .cys-conv-arrow {
  background: #c8d8a9;
}

.cys-conv-contact-error {
  margin: 8px 2px 0;
  font-size: 11px;
  color: #e8b4a0;
}

.cys-conv-install {
  border-top: 1px solid #4a4841;
  margin-top: clamp(16px, 2.6vh, 28px);
  padding-top: 14px;
}

.cys-conv-install > small {
  display: block;
  color: var(--cys-conv-gold2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cys-conv-install-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
  border: 1px solid #3a3933;
  border-radius: 12px;
  overflow: hidden;
}

.cys-conv-install-link,
.cys-conv-install-link:visited,
.cys-conv-install-link:hover {
  color: #f9f6ed;
}

.cys-conv-install-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 8px;
  background: #282824;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease;
}

.cys-conv-install-link + .cys-conv-install-link {
  border-left: 1px solid #3a3933;
}

.cys-conv-install-link:hover {
  background: #34332d;
}

.cys-conv-install-link:focus-visible {
  outline: 2px solid var(--cys-conv-gold2);
  outline-offset: -2px;
}

/* The same logos as the full install rows, in a smaller version of their tile. */
.cys-conv-install-logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #fff;
  flex: none;
}

.cys-conv-install-logo img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

@media (max-width: 899px) {
  /* The 720px floor was sized for the taller install column. */
  .cys-conv-action--contact {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-conv-install-link {
    transition: none;
  }
}

/* --- v2: one-page offer ----------------------------------------------------- */
/* The result layout with nothing to calculate: the hook on the paper side, the
   ways to start on the ink side. Both columns centre their content — neither
   is a report to read from the top. */
.cys-offer .cys-conv-result,
.cys-offer .cys-conv-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The platform picker can open on a short window: scroll rather than clip.
   Auto margins centre the stack — unlike justify-content, they give way when
   it overflows, so the top stays reachable. */
.cys-offer .cys-conv-action {
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: none;
}

.cys-offer-stack {
  margin-block: auto;
}

.cys-offer .cys-conv-action::-webkit-scrollbar {
  display: none;
}

.cys-offer .cys-conv-eyebrow {
  margin: 0;
  text-transform: uppercase;
}

/*
 * The hook's lines never wrap, and "We pick up at your door." runs ~10em in
 * this face, so the size is also capped by the column. Its content is ~42vw
 * between the 6vw gutters, and least (0.88vw - 440px) at 900px, where the
 * action column is held at its 440px floor — 3.85vw fits both.
 */
.cys-offer .cys-offer-h1 {
  margin-top: clamp(14px, 2.4vh, 24px);
  font-size: min(clamp(40px, 6.4vh, 76px), 3.85vw);
  line-height: 0.95;
}

.cys-offer .cys-price-tape {
  margin: clamp(16px, 2.6vh, 26px) 0 0;
}

.cys-offer-sub {
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: #555248;
}

.cys-offer-q {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: #f9f6ed;
  text-wrap: balance;
}

/* Three a row, or all six once the column has ~490px of content. */
.cys-offer-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(14px, 2.4vh, 22px);
}

@media (min-width: 1360px), (min-width: 600px) and (max-width: 899px) {
  .cys-offer-chips {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.cys-offer-chip {
  min-height: 44px;
  padding: 0 4px;
  white-space: nowrap;
  border: 1px solid #3a3933;
  border-radius: 999px;
  background: #282824;
  color: #f9f6ed;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.cys-offer-chip:hover {
  background: #34332d;
  border-color: #6b5a37;
}

.cys-offer-chip.is-selected {
  background: var(--cys-conv-gold2);
  border-color: var(--cys-conv-gold2);
  color: var(--cys-conv-ink);
}

.cys-offer-chip:focus-visible,
.cys-offer-card:focus-visible,
.cys-offer-more:focus-visible {
  outline: 2px solid var(--cys-conv-gold2);
  outline-offset: 2px;
}

.cys-offer-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(18px, 3vh, 28px);
}

/* Beat enterprise link and `strong` colours — labels stay light on ink. */
.cys-offer-card,
.cys-offer-card:visited,
.cys-offer-card:hover {
  color: #f9f6ed;
}

.cys-offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 16px 18px;
  border: 1px solid #3a3933;
  border-radius: 14px;
  background: #282824;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.cys-offer-card:hover {
  transform: translateY(-2px);
  background: #34332d;
  border-color: #6b5a37;
}

/* The way to start the page puts forward for the picked volume (offerPickFor). */
.cys-offer-card.is-highlight {
  border-color: rgba(228, 201, 130, 0.75);
  background: #2e2c26;
  box-shadow:
    0 0 0 1px rgba(228, 201, 130, 0.3),
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.cys-offer-card .cys-conv-pmark {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.cys-offer-card[data-action='whatsapp'] .cys-icon {
  color: #1da851;
}

.cys-offer-card strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #f9f6ed !important;
}

.cys-offer-card-copy {
  font-size: 13px;
  line-height: 1.45;
  color: #c9c4b6;
}

.cys-offer-card .cys-conv-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
}

.cys-offer-card:hover .cys-conv-arrow {
  transform: translateX(2px);
  background: #f0d98f;
}

/* The picker opens beneath the cards; the arrow turns to point at it. */
.cys-offer-card[aria-expanded='true'] .cys-conv-arrow,
.cys-offer-card[aria-expanded='true']:hover .cys-conv-arrow {
  transform: rotate(90deg);
}

.cys-offer-install[hidden] {
  display: none;
}

.cys-offer-more {
  display: block;
  margin-top: clamp(18px, 3vh, 28px);
  padding-top: 16px;
  border-top: 1px solid #4a4841;
  font-size: 14px;
  font-weight: 700;
}

.cys-offer .cys-offer-more,
.cys-offer .cys-offer-more:visited {
  color: var(--cys-conv-gold2);
}

.cys-offer .cys-offer-more:hover {
  color: #f0d98f;
}

/* The arrow stays on the line with "minutes" — an inline-block alone may wrap. */
.cys-offer-more-end {
  white-space: nowrap;
}

.cys-offer-more i {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  transition: transform 0.2s ease;
}

.cys-offer-more:hover i {
  transform: translateX(3px);
}

@media (max-height: 760px) and (min-width: 900px) {
  .cys-offer .cys-conv-quote {
    margin-top: 22px;
  }

  .cys-offer-chip {
    min-height: 40px;
  }

  .cys-offer-card {
    padding: 12px 14px 14px;
  }

  .cys-offer-card .cys-conv-pmark {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }
}

@media (max-width: 899px) {
  .cys-offer .cys-conv-result {
    padding: 30px 22px 32px;
  }

  .cys-offer .cys-conv-action {
    min-height: 0;
    padding: 32px 22px 36px;
  }

  /* Content is the viewport less the 22px gutters. */
  .cys-offer .cys-offer-h1 {
    font-size: min(44px, calc((100vw - 44px) / 10.6));
  }
}

@media (max-width: 560px) {
  .cys-offer-cards {
    grid-template-columns: 1fr;
  }

  /* One row per card, like the result screen's action rows. */
  .cys-offer-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 38px;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 12px;
  }

  .cys-offer-card .cys-conv-pmark {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    margin: 0;
  }

  .cys-offer-card strong {
    grid-column: 2;
    font-size: 16px;
  }

  .cys-offer-card-copy {
    grid-column: 2;
  }

  .cys-offer-card .cys-conv-arrow {
    position: static;
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cys-offer-chip,
  .cys-offer-card,
  .cys-offer-more i {
    transition: none;
  }

  .cys-offer-card:hover {
    transform: none;
  }
}

/* --- Turnstile ------------------------------------------------------------- */
/* Invisible unless Cloudflare needs a click ('interaction-only'); then the
   widget appears here, full width, above the button it guards. */
.cys-turnstile:not(:empty) {
  margin: 10px 0 0;
}