:root {
  --cutout-blue: #3156c7;
  --cutout-coral: #c95a43;
  --cutout-green: #2f7653;
  --cutout-ink: #171612;
}

html {
  scroll-padding-top: calc(var(--header-h, 76px) + 18px);
}

body {
  overflow-x: hidden;
}

::selection {
  color: var(--cutout-ink);
  background: var(--yellow);
}

:focus-visible {
  outline: 3px solid var(--cutout-blue);
  outline-offset: 4px;
}

.masthead {
  z-index: 120;
}

/* Restore the earlier opening: a compact proof card lives inside the hero instead
   of becoming a separate dark screen. The new, shorter H1 remains live HTML. */
.home-entry {
  min-height: clamp(650px, 82svh, 850px);
  padding-block: clamp(76px, 8vw, 118px) clamp(70px, 7vw, 104px);
  isolation: isolate;
  background-color: #f6f0e3;
  background-image: url("/assets/cutout/paper-fiber.webp");
  background-size: 760px auto;
}

.home-entry::before {
  position: absolute;
  z-index: 0;
  top: 13%;
  right: 0;
  width: clamp(84px, 10vw, 150px);
  height: 72%;
  background: var(--yellow);
  content: "";
}

.home-entry .eyebrow,
.demo-proof .eyebrow {
  display: none;
}

.home-entry__inner {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(100%, 1180px);
  min-height: 500px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  grid-template-rows: auto auto auto auto auto;
  column-gap: clamp(42px, 7vw, 104px);
  align-content: center;
  align-items: center;
  justify-items: stretch;
  padding-inline: clamp(20px, 5vw, 74px) min(24px, 2vw);
}

.home-entry h1,
.home-entry__lead,
.home-entry__links,
.home-entry__trust,
.hero-status {
  grid-column: 1;
}

.home-entry h1 {
  grid-row: 1;
  max-width: 12ch;
  margin-bottom: 20px;
  font-size: clamp(3rem, calc(4.9vw * var(--a11y-scale, 1)), 4.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-entry h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.16em;
  font-family: "Weave Miriam", sans-serif;
  font-size: 0.58em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.home-entry h1 span::before {
  right: -0.08em;
  bottom: -0.02em;
  width: calc(100% + 0.16em);
  height: 0.16em;
  background: var(--yellow);
}

.home-entry__links {
  grid-row: 2;
  gap: 16px;
  margin-top: 0;
}

.home-entry__links a {
  min-height: 48px;
}

.home-entry__links a:first-child {
  color: var(--cutout-ink);
  background: var(--yellow);
  border-color: var(--cutout-ink);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgb(23 22 18 / 0.13);
  transform: none;
}

.home-entry__lead {
  grid-row: 3;
  max-width: 545px;
  margin-top: 14px;
  font-size: clamp(1.02rem, calc(1.35vw * var(--a11y-scale, 1)), 1.22rem);
  line-height: 1.6;
}

.home-entry__trust {
  grid-row: 4;
}

.hero-status {
  grid-row: 5;
}

.home-entry__trust,
.hero-status {
  max-width: 560px;
}

/* One quiet channel rail replaces the former run-on helper sentence. It brings
   back the older call/mail/WhatsApp language without claiming WhatsApp is live. */
.hero-status {
  display: grid;
  width: 100%;
  margin-top: 12px;
  border-block: 1px solid rgb(23 22 18 / 0.24);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-status__item {
  display: flex;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  color: var(--cutout-ink);
  text-decoration: none;
}

.hero-status__item + .hero-status__item {
  border-inline-start: 1px solid rgb(23 22 18 / 0.18);
}

.hero-status__item--call:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--cutout-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hero-status__dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.hero-status__item--call .hero-status__dot {
  color: var(--cutout-blue);
  background: var(--cutout-blue);
}

.hero-status__item--active .hero-status__dot {
  color: var(--cutout-green);
  background: var(--cutout-green);
}

.hero-status__item--waiting {
  color: rgb(23 22 18 / 0.64);
}

.hero-status__item--waiting .hero-status__dot {
  color: var(--cutout-coral);
  background: transparent;
  border-style: dashed;
}

.hero-status__copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.hero-status__copy strong {
  font-size: 0.84rem;
  white-space: nowrap;
}

.hero-status__copy small {
  margin-top: 4px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.hero-objects {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-receiver {
  position: absolute;
  top: -250px;
  left: clamp(28px, 8vw, 128px);
  width: clamp(245px, 25vw, 360px);
  height: auto;
  filter: drop-shadow(0 30px 34px rgb(23 22 18 / 0.23));
  transform: rotate(7deg);
  transform-origin: top center;
}

.hero-signal {
  position: absolute;
  right: 0;
  bottom: 12%;
  left: 0;
  width: 100%;
  height: 44%;
  overflow: visible;
}

.hero-signal path {
  fill: none;
  stroke: var(--cutout-blue);
  stroke-width: 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero-signal circle {
  fill: var(--yellow);
  stroke: var(--cutout-ink);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.hero-demo {
  position: relative;
  z-index: 5;
  grid-column: 2;
  grid-row: 1 / span 5;
  width: min(100%, 470px);
  margin: 0;
  justify-self: end;
  align-self: center;
  color: var(--cutout-ink);
  background: #f6f0e3;
  border: 1px solid var(--cutout-ink);
  border-radius: 3px;
  box-shadow: 0 24px 48px rgb(23 22 18 / 0.19);
  transform: rotate(-1.2deg);
}

.hero-demo .demo-proof__frame {
  border: 0;
  border-bottom: 1px solid var(--cutout-ink);
  border-radius: 2px 2px 0 0;
  background: #f6f0e3;
}

.hero-demo .demo-proof__frame video {
  border-radius: 2px 2px 0 0;
}

.hero-demo figcaption {
  margin: 0;
  padding: 11px 15px 12px;
  color: var(--cutout-ink);
  font-size: 0.78rem;
}

/* The explanation now follows as a light, fast-reading proof strip. */
.demo-proof {
  padding-block: clamp(82px, 9vw, 128px);
  background: rgb(246 240 227 / 0.92);
  border-block: 0;
}

.demo-proof::before,
.demo-proof::after,
.demo-proof__copy::before,
.demo-proof__copy::after,
.demo-proof__media::before {
  display: none;
}

.demo-proof__grid {
  display: block;
}

.demo-proof__copy {
  display: grid;
  max-width: 1080px;
  margin-inline: auto;
  padding: 0;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto auto auto auto;
  gap: 12px clamp(46px, 7vw, 96px);
  align-items: start;
}

.demo-proof__copy h2 {
  grid-column: 1;
  grid-row: 1 / span 5;
  max-width: 11ch;
  margin: 0;
  font-family: "Weave Frank", serif;
  font-size: clamp(2.6rem, calc(4.6vw * var(--a11y-scale, 1)), 4.6rem);
  line-height: 0.98;
}

.demo-proof__copy > p:not(.eyebrow, .demo-proof__voices) {
  grid-column: 2;
  grid-row: 1;
  max-width: 48ch;
  margin-top: 0;
}

.demo-proof__facts {
  grid-column: 2;
  grid-row: 2;
  max-width: 430px;
  border-top-width: 1px;
}

.demo-proof__voices {
  grid-column: 2;
  grid-row: 3;
  margin: -8px 0 4px !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

.demo-proof__cta {
  grid-column: 2;
  grid-row: 4;
  justify-self: start;
  margin-top: 14px;
}

.demo-proof__transcript--long {
  grid-column: 2;
  grid-row: 5;
  max-width: 48ch;
  margin-top: 8px;
}

.demo-proof__media figcaption span {
  color: var(--cutout-coral);
}

.demo-proof__facts li:last-child::before {
  color: var(--cutout-green);
}

.demo-proof__voices a {
  color: var(--cutout-ink);
  font-weight: 800;
  text-decoration-color: var(--cutout-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* The workshop grows out of the scene. It is not a rectangular illustration and
   never carries essential copy. The original three-step machine stays untouched. */
.scene.scene--still {
  overflow: hidden;
  overflow: clip;
}

.scene.scene--still .scene-sticky {
  isolation: isolate;
}

.scene.scene--still .scene-copy,
.scene-flow {
  position: relative;
  z-index: 2;
}

.scene-workshop {
  --scene-workshop-opacity: 0.16;
  position: absolute;
  z-index: 0;
  right: 50%;
  bottom: -4%;
  width: min(1280px, 96vw);
  height: auto;
  opacity: var(--scene-workshop-opacity);
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
  transform: translateX(50%);
  pointer-events: none;
}

.scene-flow__machine picture {
  filter: drop-shadow(0 24px 28px rgb(32 29 24 / 0.16));
}

/* The older color system returns as meaning, not decoration: incoming,
   service, delivered. The yellow numbered nodes and the composition stay put. */
.scene-flow__step--incoming .scene-flow__number {
  outline: 3px solid var(--cutout-coral);
  outline-offset: 3px;
}

.scene-flow__machine-copy .scene-flow__number {
  outline: 3px solid var(--cutout-blue);
  outline-offset: 3px;
}

.scene-flow__step--summary .scene-flow__number {
  outline: 3px solid var(--cutout-green);
  outline-offset: 3px;
}

/* The incumbent weave stays; the live route receives one stable service color. */
.bridge-cord__drawn {
  stroke: var(--cutout-blue);
}

.spam-panel .bridge-panel__inner,
.facts-panel .bridge-panel__inner,
.how-panel .bridge-panel__inner {
  position: relative;
}

.spam-stamp {
  position: absolute;
  z-index: 2;
  right: 48%;
  bottom: 2%;
  width: clamp(145px, 16vw, 215px);
  height: auto;
  filter: drop-shadow(0 22px 24px rgb(23 22 18 / 0.2));
  transform: rotate(-7deg);
  pointer-events: none;
}

.spam-call {
  box-shadow: 8px 9px 0 rgb(201 90 67 / 0.22);
}

.spam-result__seal {
  color: #fff;
  background: var(--cutout-green);
}

/* A real transparent phone and paper tag are added as proof below the original
   fact rack. All readable information remains live HTML. */
.summary-object {
  position: relative;
  width: min(100%, 430px);
  min-height: 610px;
  margin: 16px auto 0;
}

.summary-object__phone {
  position: absolute;
  z-index: 2;
  top: -42px;
  right: 42px;
  width: 270px;
  height: auto;
  filter: drop-shadow(0 30px 36px rgb(23 22 18 / 0.28));
  transform: rotate(4deg);
}

.summary-object__screen {
  position: absolute;
  z-index: 3;
  top: 110px;
  right: 89px;
  display: grid;
  width: 176px;
  min-height: 292px;
  padding: 26px 18px 22px;
  align-content: start;
  color: var(--cutout-ink);
  text-align: right;
  transform: rotate(3.2deg);
}

.summary-object__screen span {
  padding-bottom: 12px;
  color: var(--cutout-blue);
  border-bottom: 1px solid rgb(23 22 18 / 0.2);
  font-size: 0.72rem;
  font-weight: 700;
}

.summary-object__screen strong {
  margin-top: 20px;
  font-size: 1.18rem;
}

.summary-object__screen p {
  margin: 8px 0 20px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.summary-object__screen small {
  color: var(--cutout-green);
  font-weight: 700;
}

.summary-object__tag {
  position: absolute;
  z-index: 4;
  right: 5px;
  bottom: 6px;
  width: 365px;
  height: auto;
  filter: drop-shadow(0 18px 22px rgb(23 22 18 / 0.2));
  transform: rotate(-5deg);
}

.summary-object__tag-copy {
  position: absolute;
  z-index: 5;
  right: 86px;
  bottom: 86px;
  display: grid;
  width: 230px;
  grid-template-columns: 52px 1fr;
  gap: 5px 12px;
  color: var(--cutout-ink);
  font-size: 0.72rem;
  line-height: 1.15;
  transform: rotate(-5deg);
}

.summary-object__tag-copy span {
  color: var(--cutout-blue);
}

.summary-object__tag-copy strong {
  font-size: 0.8rem;
}

.facts-panel .panel-more {
  margin-top: 8px;
}

/* The plug/socket explain carrier forwarding without replacing the original steps. */
.connection-object {
  position: absolute;
  z-index: 0;
  top: 49%;
  left: -9%;
  width: min(430px, 35vw);
  height: 320px;
  opacity: 0.9;
  transform: translateY(-50%);
  pointer-events: none;
}

.connection-object__plug {
  position: absolute;
  top: 72px;
  left: -10%;
  width: 72%;
  height: auto;
  filter: drop-shadow(0 24px 26px rgb(23 22 18 / 0.2));
}

.connection-object__socket {
  position: absolute;
  top: 18px;
  right: 0;
  width: 45%;
  height: auto;
  filter: drop-shadow(0 24px 26px rgb(23 22 18 / 0.17));
}

.how-panel .panel-heading,
.how-panel .steps-route,
.how-panel .installation-code,
.how-panel .installation-note,
.how-panel .panel-more {
  position: relative;
  z-index: 1;
}

/* The original closing flow, offer card and pricing remain fully visible. */
.closing {
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.closing-inner {
  position: relative;
  z-index: 2;
}

.closing-ticker {
  position: absolute;
  z-index: 0;
  right: -5%;
  bottom: 9%;
  width: 110%;
  height: clamp(90px, 11vw, 150px);
  object-fit: fill;
  opacity: 0.16;
  transform: rotate(-1.2deg);
  pointer-events: none;
}

/* One quiet, product-specific sequence. Content is visible by default; JavaScript
   only adds the starting pose, then each object settles once when it enters view. */
html.cutout-motion .hero-receiver {
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 520ms ease-out;
}

html.cutout-motion .home-entry:not(.is-cutout-visible) .hero-receiver {
  opacity: 0.88;
  transform: translateY(-14px) rotate(10deg);
}

html.cutout-motion .scene-workshop {
  clip-path: inset(0);
  transition:
    clip-path 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 620ms ease-out;
}

html.cutout-motion .scene:not(.is-cutout-visible) .scene-workshop {
  clip-path: inset(5% 7% 4%);
  opacity: calc(var(--scene-workshop-opacity) * 0.5);
  transform: translateX(50%) translateY(14px);
}

html.cutout-motion .scene-flow__machine picture {
  transition: transform 720ms 80ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.cutout-motion .scene:not(.is-cutout-visible) .scene-flow__machine picture {
  transform: translateY(18px) scale(0.985);
}

html.cutout-motion .summary-object__tag {
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease-out;
}

html.cutout-motion .summary-object:not(.is-cutout-visible) .summary-object__tag {
  opacity: 0.72;
  transform: translateY(14px) rotate(-5deg);
}

html.cutout-motion .summary-object__tag-copy,
html.cutout-motion .summary-object:not(.is-cutout-visible) .summary-object__tag-copy {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 980px) {
  .home-entry__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    column-gap: clamp(28px, 5vw, 54px);
    padding-inline: 22px;
  }

  .hero-receiver {
    left: 2vw;
    opacity: 0.62;
  }

  .hero-signal {
    width: 100%;
    opacity: 0.7;
  }

  .spam-stamp {
    right: auto;
    left: -18px;
    opacity: 0.32;
  }

  .connection-object {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 440px);
    height: 300px;
    margin: -20px auto 18px;
    opacity: 0.78;
    transform: none;
  }
}

@media (max-width: 720px) {
  .home-entry {
    min-height: 0;
    padding-block: 64px 74px;
  }

  .home-entry::before {
    top: 0;
    right: auto;
    left: 0;
    width: 18px;
    height: 100%;
  }

  .home-entry__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-content: start;
    padding-inline: 6px 12px;
  }

  .home-entry h1 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    font-size: clamp(2.7rem, calc(13.2vw * var(--a11y-scale, 1)), 3.65rem);
  }

  .hero-demo {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 330px);
    margin: 20px 0 28px auto;
    justify-self: end;
    transform: rotate(-0.5deg);
  }

  .home-entry__links {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: 360px;
  }

  .home-entry__lead {
    grid-column: 1;
    grid-row: 4;
    max-width: 29ch;
  }

  .home-entry__trust {
    grid-column: 1;
    grid-row: 5;
  }

  .hero-status {
    grid-column: 1;
    grid-row: 6;
  }

  .hero-status__item {
    min-height: 58px;
    padding-inline: 7px;
    gap: 6px;
  }

  .hero-status__dot {
    width: 8px;
    height: 8px;
  }

  .hero-status__copy strong {
    font-size: 0.76rem;
  }

  .hero-status__copy small {
    font-size: 0.66rem;
  }

  .hero-receiver {
    display: none;
  }

  .hero-signal {
    top: auto;
    bottom: -5%;
    left: -32%;
    width: 112%;
    height: 46%;
    opacity: 0.46;
  }

  .demo-proof {
    padding-block: 76px 84px;
  }

  .demo-proof__copy {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .demo-proof__copy h2,
  .demo-proof__copy > p:not(.eyebrow, .demo-proof__voices),
  .demo-proof__facts,
  .demo-proof__voices,
  .demo-proof__cta,
  .demo-proof__transcript--long {
    grid-column: 1;
    grid-row: auto;
  }

  .demo-proof__copy h2 {
    max-width: 12ch;
    margin-bottom: 10px;
    font-size: clamp(2.35rem, calc(11.5vw * var(--a11y-scale, 1)), 3.5rem);
  }

  .demo-proof__voices {
    margin: -4px 0 4px !important;
  }

  .scene-workshop {
    --scene-workshop-opacity: 0.1;
    bottom: 12%;
    width: 980px;
  }

  .spam-stamp {
    right: auto;
    bottom: 2%;
    left: -42px;
    width: 164px;
    opacity: 0.24;
  }

  .summary-object {
    width: 330px;
    min-height: 510px;
    margin-top: 34px;
  }

  .summary-object__phone {
    top: -28px;
    right: 58px;
    width: 214px;
  }

  .summary-object__screen {
    top: 92px;
    right: 95px;
    width: 137px;
    min-height: 246px;
    padding: 20px 12px 12px;
  }

  .summary-object__screen strong {
    margin-top: 14px;
    font-size: 0.94rem;
  }

  .summary-object__screen p {
    font-size: 0.76rem;
  }

  .summary-object__tag {
    right: 8px;
    bottom: 0;
    width: 300px;
  }

  .summary-object__tag-copy {
    right: 76px;
    bottom: 67px;
    width: 180px;
    grid-template-columns: 42px 1fr;
    font-size: 0.63rem;
  }

  .summary-object__tag-copy strong {
    font-size: 0.69rem;
  }

  .connection-object {
    width: 320px;
    height: 245px;
    margin-bottom: 30px;
  }

  .closing-ticker {
    right: -15%;
    bottom: 5%;
    width: 130%;
    height: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-receiver,
  .scene-workshop,
  .scene-flow__machine picture,
  .summary-object__phone,
  .summary-object__tag,
  .summary-object__tag-copy,
  .spam-stamp,
  .closing-ticker {
    transition: none !important;
  }
}

html.a11y-no-motion .hero-receiver,
html.a11y-no-motion .scene-workshop,
html.a11y-no-motion .scene-flow__machine picture,
html.a11y-no-motion .summary-object__tag,
html.a11y-no-motion .summary-object__tag-copy {
  clip-path: none !important;
  opacity: 1 !important;
  transition: none !important;
}

html.a11y-no-motion .hero-receiver {
  transform: rotate(7deg) !important;
}

html.a11y-no-motion .scene-workshop {
  opacity: var(--scene-workshop-opacity) !important;
  transform: translateX(50%) !important;
}

html.a11y-no-motion .scene-flow__machine picture {
  transform: none !important;
}

html.a11y-no-motion .summary-object__tag,
html.a11y-no-motion .summary-object__tag-copy {
  transform: rotate(-5deg) !important;
}

/* Polish v9: one calm paper world with tonal shifts. Interest comes from the
   cutout composition and product route, while color remains a small signal. */
:root {
  --cutout-night: #10100d;
  --cutout-paper: #f6f0e3;
  --cutout-paper-deep: #eadfc9;
  --cutout-blue-bright: #7895ff;
  --cutout-coral-bright: #f18770;
  --cutout-green-bright: #69bd8f;
}

.home-entry h1 {
  font-size: clamp(3rem, calc(4.35vw * var(--a11y-scale, 1)), 4.25rem);
}

.home-entry::before {
  width: clamp(16px, 2.4vw, 34px);
}

.home-entry__lead {
  max-width: 500px;
  line-height: 1.5;
}

.hero-demo {
  border-top: 3px solid var(--cutout-blue);
}

/* A gentle tonal pause: the product proof, reduced to three beats. */
.demo-proof {
  color: var(--cutout-ink);
  background-color: var(--cutout-paper-deep);
  background-image: none;
  border-block: 1px solid rgb(23 22 18 / 0.12);
}

.demo-proof__copy {
  max-width: 1040px;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px clamp(54px, 8vw, 112px);
}

.demo-proof__copy h2 {
  max-width: 8ch;
  color: var(--cutout-ink);
  font-size: clamp(2.75rem, calc(4.5vw * var(--a11y-scale, 1)), 4.35rem);
  line-height: 0.94;
}

.demo-proof__copy > p:not(.eyebrow, .demo-proof__voices) {
  max-width: 38ch;
  color: var(--cutout-ink);
  font-size: clamp(1.05rem, calc(1.4vw * var(--a11y-scale, 1)), 1.2rem);
}

.demo-proof__facts {
  max-width: 500px;
  gap: 0;
  margin-block: 18px 20px;
  padding-top: 0;
  border-top: 1px solid rgb(23 22 18 / 0.2);
}

.demo-proof__facts li {
  display: grid;
  min-height: 48px;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgb(23 22 18 / 0.13);
  color: var(--cutout-ink);
  font-size: 1rem;
}

.demo-proof__facts li::before {
  width: 10px;
  height: 10px;
  margin: 0;
  background: var(--yellow);
  border: 2px solid var(--cutout-ink);
  border-radius: 50%;
  content: "";
}

.demo-proof__voices,
.demo-proof__transcript,
.demo-proof__transcript p {
  color: rgb(23 22 18 / 0.7);
}

.demo-proof__voices a,
.demo-proof__transcript summary {
  color: var(--cutout-ink);
  text-decoration-color: var(--cutout-blue);
}

.demo-proof__voices a,
.panel-more a,
.offer-copy a,
.offer-hint a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.demo-proof__transcript--long {
  border-color: rgb(23 22 18 / 0.18);
}

.demo-proof__cta {
  color: var(--cutout-ink);
}

/* The visual explanation stays on paper and becomes faster to scan. */
.scene.scene--still {
  padding-block: clamp(82px, 8vw, 112px) clamp(84px, 8vw, 118px);
}

.scene-still__inner {
  gap: clamp(38px, 4vw, 58px);
}

.scene.scene--still .scene-copy h2 {
  max-width: 13ch;
  font-size: clamp(2.7rem, calc(4.5vw * var(--a11y-scale, 1)), 4.45rem);
}

.scene.scene--still .scene-copy p {
  max-width: 44ch;
  line-height: 1.5;
}

.scene-workshop {
  --scene-workshop-opacity: 0.14;
  bottom: -1%;
}

.scene-flow__step--incoming .scene-flow__number,
.scene-flow__machine-copy .scene-flow__number,
.scene-flow__step--summary .scene-flow__number {
  outline: 0;
}

.weave {
  background: var(--cutout-paper);
}

.bridge-panel {
  min-height: 0;
  padding-block: clamp(92px, 9vw, 122px);
}

.panel-heading {
  gap: 10px;
  margin-bottom: clamp(34px, 5vw, 54px);
}

.panel-heading h2 {
  max-width: 13ch;
  font-size: clamp(2.75rem, calc(4.65vw * var(--a11y-scale, 1)), 4.55rem);
  line-height: 0.95;
}

.panel-heading .sub {
  max-width: 52ch;
  font-size: clamp(1rem, calc(1.35vw * var(--a11y-scale, 1)), 1.15rem);
  line-height: 1.5;
}

.warm-seam {
  display: none;
}

/* Paper filter counter: one cutout stamp sits beside the outcome it explains. */
.spam-panel {
  background-color: var(--cutout-paper);
  background-image: url("/assets/cutout/paper-fiber.webp");
  background-size: 760px auto;
}

.spam-machine {
  min-height: clamp(410px, 45vw, 510px);
}

.spam-machine::before {
  border-top-width: 4px;
}

.spam-call,
.spam-answer,
.spam-result {
  background: #fffaf0;
  border: 1px solid rgb(23 22 18 / 0.62);
  box-shadow: 0 18px 38px rgb(23 22 18 / 0.07);
}

.spam-call p,
.spam-answer p {
  font-size: clamp(1.08rem, calc(1.8vw * var(--a11y-scale, 1)), 1.55rem);
  line-height: 1.18;
}

.spam-stamp {
  right: 46%;
  bottom: -10px;
  width: clamp(155px, 15vw, 195px);
  opacity: 1;
}

/* A deeper paper field lets the delivered summary remain the visual proof. */
.facts-panel {
  color: var(--cutout-ink);
  background-color: var(--cutout-paper-deep);
  background-image: url("/assets/cutout/paper-fiber.webp");
  background-size: 760px auto;
  border-block: 1px solid rgb(23 22 18 / 0.12);
}

.facts-panel .bridge-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.95fr);
  grid-template-areas:
    "heading visual"
    "facts visual"
    "detail detail"
    "more more";
  gap: 18px clamp(48px, 7vw, 90px);
  align-items: center;
}

.facts-panel .panel-heading {
  grid-area: heading;
  align-self: end;
  margin: 0;
}

.facts-panel .panel-heading h2,
.facts-panel .panel-heading .sub {
  color: var(--cutout-ink);
}

.facts-panel .panel-kicker {
  color: var(--cutout-ink);
  background: var(--yellow);
}

.facts-panel .fact-rack {
  grid-area: facts;
  display: grid;
  min-height: 0;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.facts-panel .fact-rack::before,
.facts-panel .fact-slip::before {
  display: none;
}

.facts-panel .fact-slip,
.facts-panel.is-visible .fact-slip,
.facts-panel.is-visible .fact-slip:nth-child(2),
.facts-panel.is-visible .fact-slip:nth-child(3) {
  min-height: 0;
  padding: 20px 0 18px;
  color: var(--cutout-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid rgb(23 22 18 / 0.24);
  clip-path: none;
  transform: none;
}

.facts-panel .fact-slip .figure {
  margin-bottom: 7px;
  color: var(--cutout-ink);
  font-family: "Weave Miriam", sans-serif;
  font-size: clamp(1.3rem, calc(1.9vw * var(--a11y-scale, 1)), 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.facts-panel .fact-slip p {
  max-width: 48ch;
  color: rgb(23 22 18 / 0.78);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
}

.facts-panel .fact-slip small {
  margin-top: 6px;
  color: rgb(23 22 18 / 0.56);
}

.facts-panel .summary-object {
  grid-area: visual;
  width: min(100%, 450px);
  min-height: 610px;
  margin: 0 auto;
}

.facts-panel .summary-object__phone {
  top: -24px;
  right: 58px;
  width: 292px;
  filter: drop-shadow(0 28px 34px rgb(23 22 18 / 0.22));
}

.facts-panel .summary-object__screen {
  top: 138px;
  right: 109px;
  width: 186px;
}

.facts-panel .summary-object__tag {
  right: 2px;
  bottom: 0;
  width: 398px;
  filter: drop-shadow(0 18px 24px rgb(23 22 18 / 0.18));
}

.facts-panel .summary-object__tag-copy {
  right: 96px;
  bottom: 94px;
  width: 244px;
}

.facts-detail {
  grid-area: detail;
  max-width: 760px;
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px solid rgb(23 22 18 / 0.18);
  color: rgb(23 22 18 / 0.68);
  font-size: 0.9rem;
  line-height: 1.6;
}

.facts-detail summary {
  min-height: 44px;
  padding-block: 11px;
  color: var(--cutout-ink);
  cursor: pointer;
  font-weight: 800;
}

.facts-detail p {
  max-width: 78ch;
  margin: 4px 0 10px;
}

.facts-panel .panel-more {
  grid-area: more;
  max-width: 900px;
  margin-top: 4px;
  color: rgb(23 22 18 / 0.66);
}

.facts-panel .panel-more a {
  color: var(--cutout-ink);
  text-decoration-color: var(--cutout-blue);
}

/* The connector belongs to the installation step, so it sits beside the setup. */
.how-panel {
  background-color: var(--cutout-paper);
  background-image: url("/assets/cutout/paper-fiber.webp");
  background-size: 760px auto;
}

.how-panel .steps-route {
  width: calc(100% - 230px);
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-right: 0;
  margin-left: 230px;
  padding-block: 42px 22px;
}

.how-panel .steps-route::before {
  top: 38px;
  right: 3%;
  left: 3%;
  border-top: 2px solid rgb(49 86 199 / 0.48);
}

.how-panel .step-node {
  min-height: 185px;
  padding: 52px 20px 22px;
  background: #fffaf0;
  border: 1px solid rgb(23 22 18 / 0.55);
  box-shadow: 0 18px 38px rgb(23 22 18 / 0.06);
}

.how-panel .step-node::before,
.how-panel .step-node::after {
  display: none;
}

.how-panel .step-node__number {
  position: absolute;
  top: -31px;
  right: 50%;
  width: 52px;
  margin: 0;
  border-width: 2px;
  font-size: 1.55rem;
  transform: translateX(50%);
}

.how-panel .step-node h3 {
  font-size: clamp(1.45rem, calc(2vw * var(--a11y-scale, 1)), 1.95rem);
}

.how-panel .step-node p {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.connection-object {
  top: 58%;
  left: -5%;
  width: min(350px, 30vw);
  height: 270px;
}

.installation-code {
  margin-top: 14px;
}

/* The close stays calm: the pricing detail remains, while the promise reads first. */
.closing {
  padding-block: clamp(92px, 9vw, 124px);
  background-color: var(--cutout-paper);
  background-image: url("/assets/cutout/paper-fiber.webp");
  background-size: 760px auto;
}

.closing-inner {
  gap: 16px;
}

.closing h2 {
  max-width: 12ch;
  font-size: clamp(3rem, calc(5.8vw * var(--a11y-scale, 1)), 5rem);
  line-height: 0.92;
}

.closing p.closing-lead {
  max-width: 58ch !important;
  font-size: clamp(1rem, calc(1.35vw * var(--a11y-scale, 1)), 1.15rem);
  line-height: 1.55;
}

.closing-offer {
  margin-top: 20px;
  padding: clamp(28px, 4vw, 46px);
  background: #fffaf0;
  border-width: 1px;
  border-top: 4px solid var(--yellow);
  box-shadow: 0 24px 54px rgb(23 22 18 / 0.08);
}

.benefit-route li:nth-child(1) i,
.benefit-route li:nth-child(2) i,
.benefit-route li:nth-child(3) i {
  background: var(--yellow);
}

.closing-ticker {
  bottom: 11%;
  opacity: 0.2;
}

@media (max-width: 980px) {
  .facts-panel .bridge-panel__inner {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.85fr);
    gap: 16px 34px;
  }

  .how-panel .steps-route {
    width: 100%;
    margin-inline: 0;
  }

  .connection-object {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 390px);
    height: 260px;
    margin: -18px auto 20px;
    transform: none;
  }
}

@media (max-width: 720px) {
  .home-entry h1 {
    font-size: clamp(2.65rem, calc(12.4vw * var(--a11y-scale, 1)), 3.5rem);
  }

  .home-entry__lead {
    max-width: 31ch;
  }

  .demo-proof {
    padding-block: 70px 76px;
  }

  .demo-proof__copy {
    gap: 10px;
  }

  .demo-proof__copy h2 {
    max-width: 8ch;
    font-size: clamp(2.45rem, calc(11.2vw * var(--a11y-scale, 1)), 3.4rem);
  }

  .scene.scene--still {
    padding-block: 70px 82px;
  }

  .scene.scene--still .scene-copy h2,
  .panel-heading h2 {
    font-size: clamp(2.45rem, calc(10.8vw * var(--a11y-scale, 1)), 3.45rem);
  }

  .bridge-panel {
    min-height: 0;
    padding-block: 72px 80px;
  }

  .spam-machine {
    min-height: 565px;
  }

  .spam-stamp {
    right: auto;
    bottom: -18px;
    left: -24px;
    width: 142px;
    opacity: 0.88;
  }

  .facts-panel .bridge-panel__inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "facts"
      "visual"
      "detail"
      "more";
    gap: 18px;
  }

  .facts-panel .panel-heading {
    margin-bottom: 12px;
  }

  .facts-panel .fact-slip {
    width: 100%;
    margin: 0;
    padding-block: 18px 16px;
  }

  .facts-panel .summary-object {
    width: 330px;
    min-height: 520px;
    margin: 14px auto 0;
  }

  .facts-panel .summary-object__phone {
    top: -18px;
    right: 57px;
    width: 216px;
  }

  .facts-panel .summary-object__screen {
    top: 104px;
    right: 94px;
    width: 140px;
  }

  .facts-panel .summary-object__tag {
    right: 8px;
    width: 304px;
  }

  .facts-panel .summary-object__tag-copy {
    right: 77px;
    bottom: 69px;
    width: 184px;
  }

  .facts-detail {
    margin-top: 0;
  }

  .connection-object {
    width: 300px;
    height: 225px;
    margin-bottom: 34px;
  }

  .how-panel .steps-route {
    grid-template-columns: 1fr;
    gap: 46px;
    padding-block: 34px 18px;
  }

  .how-panel .steps-route::before {
    top: 0;
    right: 50%;
    bottom: 0;
    left: auto;
    border-top: 0;
    border-right: 2px solid rgb(49 86 199 / 0.48);
  }

  .how-panel .step-node {
    width: min(100%, 370px);
    min-height: 0;
    margin-inline: auto;
    padding: 48px 20px 22px;
  }

  .closing {
    padding-block: 76px 88px;
  }

  .closing h2 {
    max-width: 10ch;
    font-size: clamp(2.75rem, calc(12vw * var(--a11y-scale, 1)), 3.8rem);
  }

  .closing-offer {
    border-top-width: 4px;
  }
}

/* Polish v10: depth without noise. The same quiet palette now behaves like a
   physical call path: objects occupy near, middle and far planes; repeated
   paper cards recede; and the route resolves once as the visitor reaches it. */
:root {
  --cutout-shadow-near: 0 38px 70px rgb(23 22 18 / 0.22);
  --cutout-shadow-mid: 0 24px 46px rgb(23 22 18 / 0.15);
  --cutout-shadow-low: 0 12px 24px rgb(23 22 18 / 0.1);
}

/* The opening remains calm, but the receiver and proof now share one stage. */
.home-entry::after {
  position: absolute;
  z-index: 0;
  bottom: 4%;
  left: -5%;
  width: min(760px, 58vw);
  height: 26%;
  background: radial-gradient(ellipse at center, rgb(23 22 18 / 0.16), rgb(23 22 18 / 0) 70%);
  content: "";
  transform: rotate(-4deg);
  pointer-events: none;
}

.hero-receiver {
  filter:
    drop-shadow(0 42px 38px rgb(23 22 18 / 0.2))
    drop-shadow(0 10px 8px rgb(23 22 18 / 0.16));
}

.hero-demo {
  box-shadow: var(--cutout-shadow-near), 0 3px 0 rgb(255 255 255 / 0.72) inset;
  transform: translateY(22px) rotate(-2deg);
}

.hero-signal path {
  stroke-width: 5;
}

/* The demo explanation sits over a shallow sound chamber instead of another
   flat strip. It uses the existing ink and paper only. */
.demo-proof {
  overflow: hidden;
  overflow: clip;
}

.demo-proof__copy {
  position: relative;
  isolation: isolate;
}

.demo-proof__copy::before,
.demo-proof__copy::after {
  display: block;
  position: absolute;
  pointer-events: none;
  content: "";
}

.demo-proof__copy::before {
  z-index: -1;
  top: 50%;
  right: -58px;
  width: clamp(260px, 31vw, 410px);
  aspect-ratio: 1;
  background: rgb(246 240 227 / 0.7);
  border: 1px solid rgb(23 22 18 / 0.18);
  border-radius: 50%;
  box-shadow:
    0 34px 64px rgb(23 22 18 / 0.14),
    0 8px 14px rgb(23 22 18 / 0.1),
    inset 0 8px 16px rgb(255 255 255 / 0.42),
    inset 0 -10px 18px rgb(23 22 18 / 0.06);
  transform: translateY(-50%);
}

.demo-proof__copy::after {
  z-index: -1;
  top: 50%;
  right: clamp(72px, 10vw, 136px);
  width: clamp(48px, 5.5vw, 72px);
  aspect-ratio: 1;
  background: var(--yellow);
  border: 4px solid var(--cutout-ink);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px var(--cutout-paper-deep),
    0 0 0 21px rgb(23 22 18 / 0.78),
    0 0 0 44px rgb(246 240 227 / 0.78),
    0 0 0 45px rgb(23 22 18 / 0.12),
    0 20px 30px 42px rgb(23 22 18 / 0.11);
  transform: translateY(-50%);
}

.demo-proof__copy h2 {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 0 rgb(255 255 255 / 0.48);
}

/* The workshop becomes a spatial composition: the object is close, the room is
   behind it, and the two outcomes sit at different distances. */
.scene.scene--still {
  perspective: 1400px;
}

.scene-workshop {
  --scene-workshop-opacity: 0.23;
  bottom: -4%;
  filter: grayscale(1) contrast(1.12) drop-shadow(0 16px 24px rgb(23 22 18 / 0.08));
}

.scene-flow {
  perspective: 1200px;
}

.scene-flow::before {
  height: 5px;
  background: var(--cutout-blue);
  box-shadow: 0 7px 12px rgb(23 22 18 / 0.12);
}

.scene-flow__step {
  background: transparent;
}

.scene-flow__step--incoming {
  transform: translateY(-28px) rotateY(-3deg);
}

.scene-flow__step--summary {
  transform: translateY(30px) rotateY(3deg);
}

.scene-flow__number {
  box-shadow:
    0 7px 0 rgb(23 22 18 / 0.12),
    0 13px 20px rgb(23 22 18 / 0.12),
    inset 0 2px 0 rgb(255 255 255 / 0.65);
}

.scene-flow__step .scene-flow__label,
.scene-flow__step strong {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 0 rgb(246 240 227 / 0.85);
}

.scene-flow__step .scene-flow__label {
  padding: 4px 7px 3px;
}

.scene-flow__step strong {
  padding: 5px 9px 7px;
}

.scene-flow__machine {
  transform: translateY(24px) scale(1.06);
}

.scene-flow__machine picture {
  filter:
    drop-shadow(0 40px 40px rgb(23 22 18 / 0.24))
    drop-shadow(0 10px 12px rgb(23 22 18 / 0.14));
}

.scene-flow__machine-copy {
  padding: 10px 22px 12px;
  border: 1px solid rgb(23 22 18 / 0.16);
  box-shadow: var(--cutout-shadow-mid);
  transform: translateY(-12px);
}

/* Filtering is an action, so its surfaces converge on a single physical gate. */
.spam-machine {
  perspective: 1200px;
}

.spam-call,
.spam-answer,
.spam-result {
  border-color: rgb(23 22 18 / 0.52);
  box-shadow: var(--cutout-shadow-mid), 0 2px 0 rgb(255 255 255 / 0.72) inset;
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 680ms ease-out;
}

.spam-call,
.spam-answer {
  border-width: 2px;
}

.spam-call {
  border-radius: 22px 22px 6px 22px;
}

.spam-answer {
  border-radius: 22px 6px 22px 22px;
}

.spam-call::after,
.spam-answer::after {
  position: absolute;
  bottom: -13px;
  width: 24px;
  height: 24px;
  background: inherit;
  content: "";
}

.spam-call::after {
  right: 28px;
  border-right: 2px solid rgb(23 22 18 / 0.52);
  border-bottom: 2px solid rgb(23 22 18 / 0.52);
  transform: skewY(34deg) rotate(16deg);
}

.spam-answer::after {
  left: 28px;
  border-bottom: 2px solid rgb(23 22 18 / 0.52);
  border-left: 2px solid rgb(23 22 18 / 0.52);
  transform: skewY(-34deg) rotate(-16deg);
}

.spam-call {
  transform: translateZ(36px) rotate(1.8deg);
}

.spam-answer {
  transform: translateZ(18px) rotate(-1.6deg);
}

.spam-result {
  transform: translateZ(50px) rotate(1deg);
}

.filter-gate {
  background: var(--cutout-paper-deep);
  border-width: 5px;
  box-shadow:
    0 24px 42px rgb(23 22 18 / 0.2),
    0 7px 10px rgb(23 22 18 / 0.12),
    inset 0 5px 8px rgb(255 255 255 / 0.55),
    inset 0 -7px 10px rgb(23 22 18 / 0.08);
}

.spam-stamp {
  filter:
    drop-shadow(0 32px 28px rgb(23 22 18 / 0.2))
    drop-shadow(0 8px 8px rgb(23 22 18 / 0.12));
  transform: translateY(12px) rotate(-9deg);
}

/* The delivered summary rises out of the page rather than sitting on it. */
.facts-panel .summary-object {
  perspective: 1300px;
}

.facts-panel .summary-object::after {
  position: absolute;
  z-index: 0;
  right: 3%;
  bottom: 2%;
  left: 3%;
  height: 92px;
  background: radial-gradient(ellipse at center, rgb(23 22 18 / 0.24), transparent 70%);
  content: "";
  filter: blur(8px);
  transform: rotate(-4deg);
}

.facts-panel .summary-object__phone {
  filter:
    drop-shadow(0 46px 42px rgb(23 22 18 / 0.24))
    drop-shadow(0 10px 12px rgb(23 22 18 / 0.14));
  transform: translateZ(40px) rotate(5deg);
}

.facts-panel .summary-object__tag {
  filter:
    drop-shadow(0 30px 26px rgb(23 22 18 / 0.2))
    drop-shadow(0 7px 8px rgb(23 22 18 / 0.1));
  transform: translateZ(72px) rotate(-7deg);
}

.facts-panel .summary-object__tag-copy {
  transform: translateZ(76px) rotate(-7deg);
}

/* The setup stops being three paper cards. The information hangs from a single
   cable, while the real plug and socket perform the connection once. */
.how-panel .steps-route {
  width: calc(100% - 360px);
  min-height: 260px;
  margin-right: 0;
  margin-left: 360px;
  padding-block: 42px 24px;
  align-items: start;
}

.how-panel .steps-route::before {
  top: 66px;
  right: 1%;
  left: 1%;
  border-top: 5px solid var(--cutout-ink);
  box-shadow: 0 6px 10px rgb(23 22 18 / 0.15);
  transform: rotate(-0.35deg);
}

.how-panel .step-node {
  min-height: 215px;
  padding: 104px 18px 20px;
  justify-items: center;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.how-panel .step-node__number {
  top: 38px;
  width: 56px;
  border-width: 3px;
  background: var(--cutout-paper);
  box-shadow:
    0 8px 0 rgb(23 22 18 / 0.12),
    0 16px 24px rgb(23 22 18 / 0.13),
    inset 0 3px 0 rgb(255 255 255 / 0.7);
}

.how-panel .step-node:nth-child(2) .step-node__number {
  background: var(--yellow);
  transform: translateX(50%) rotate(2deg);
}

.how-panel .step-node h3 {
  font-size: clamp(1.55rem, calc(2.25vw * var(--a11y-scale, 1)), 2.1rem);
}

.how-panel .step-node p {
  max-width: 29ch;
  font-weight: 600;
}

.connection-object {
  z-index: 3;
  width: min(430px, 33vw);
  opacity: 1;
}

.connection-object__plug,
.connection-object__socket {
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), filter 620ms ease-out;
}

.connection-object__plug {
  filter:
    drop-shadow(0 34px 28px rgb(23 22 18 / 0.22))
    drop-shadow(0 8px 8px rgb(23 22 18 / 0.12));
}

.connection-object__socket {
  filter:
    drop-shadow(0 28px 24px rgb(23 22 18 / 0.18))
    drop-shadow(0 7px 8px rgb(23 22 18 / 0.1));
}

.installation-code {
  background: var(--cutout-paper-deep);
  border-width: 2px;
  box-shadow:
    0 22px 38px rgb(23 22 18 / 0.12),
    inset 0 4px 7px rgb(255 255 255 / 0.52),
    inset 0 -5px 8px rgb(23 22 18 / 0.06);
}

/* The final decision surface is one substantial object, not another repeated
   card family. The printed band remains behind it as depth, not color noise. */
.closing-ticker {
  bottom: 14%;
  opacity: 0.28;
  filter: drop-shadow(0 18px 18px rgb(23 22 18 / 0.12));
}

.closing-offer {
  position: relative;
  isolation: isolate;
  border-color: rgb(23 22 18 / 0.44);
  box-shadow: var(--cutout-shadow-near), 0 4px 0 rgb(255 255 255 / 0.65) inset;
  transform: rotate(-0.35deg);
}

.closing-offer::before {
  position: absolute;
  z-index: -1;
  inset: 16px -18px -18px 18px;
  background: rgb(190 174 145 / 0.34);
  content: "";
  filter: blur(2px);
}

/* One authored movement: the call line resolves, the physical objects settle,
   and the plug reaches its socket. Nothing loops. */
html.cutout-motion .hero-signal path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 860ms 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.cutout-motion .home-entry:not(.is-cutout-visible) .hero-signal path {
  stroke-dashoffset: 1;
}

html.cutout-motion .demo-proof__copy::before,
html.cutout-motion .demo-proof__copy::after {
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 520ms ease-out, box-shadow 760ms ease-out;
}

html.cutout-motion .demo-proof:not(.is-cutout-visible) .demo-proof__copy::before,
html.cutout-motion .demo-proof:not(.is-cutout-visible) .demo-proof__copy::after {
  opacity: 0.72;
  transform: translateY(calc(-50% + 18px)) scale(0.94);
}

html.js-motion .spam-panel:not(.is-visible) .spam-call {
  transform: translate3d(38px, -12px, 36px) rotate(3.6deg);
}

html.js-motion .spam-panel:not(.is-visible) .spam-answer {
  transform: translate3d(-42px, 16px, 18px) rotate(-3.2deg);
}

html.js-motion .spam-panel:not(.is-visible) .spam-result {
  transform: translate3d(18px, 22px, 50px) rotate(2.5deg);
}

html.js-motion .how-panel:not(.is-visible) .connection-object__plug {
  transform: translateX(-34px) rotate(-2deg);
}

html.js-motion .how-panel:not(.is-visible) .connection-object__socket {
  transform: translateX(12px) rotate(1deg);
}

html.cutout-motion .closing-ticker {
  transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1), opacity 560ms ease-out;
}

html.cutout-motion .closing:not(.is-cutout-visible) .closing-ticker {
  opacity: 0.18;
  transform: translateX(34px) rotate(-2.2deg);
}

@media (max-width: 980px) {
  .scene-flow__step--incoming,
  .scene-flow__step--summary {
    transform: none;
  }

  .scene-flow__machine {
    transform: translateY(18px) scale(1.03);
  }

  .connection-object {
    width: min(100%, 430px);
  }

  .how-panel .steps-route {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 720px) {
  .home-entry::after {
    display: none;
  }

  .hero-demo {
    box-shadow: 0 24px 42px rgb(23 22 18 / 0.18), 0 3px 0 rgb(255 255 255 / 0.7) inset;
    transform: translateY(0) rotate(-1deg);
  }

  .demo-proof__copy::before {
    top: 132px;
    right: -72px;
    width: 260px;
  }

  .demo-proof__copy::after {
    top: 132px;
    right: 62px;
    width: 48px;
  }

  .scene-workshop {
    --scene-workshop-opacity: 0.16;
  }

  .scene-flow__machine {
    transform: none;
  }

  .facts-panel .summary-object__phone {
    transform: rotate(4deg);
  }

  .facts-panel .summary-object__tag,
  .facts-panel .summary-object__tag-copy {
    transform: rotate(-6deg);
  }

  .how-panel .steps-route {
    gap: 18px;
    padding-block: 18px 10px;
  }

  .how-panel .steps-route::before {
    top: 32px;
    right: 50%;
    bottom: 32px;
    left: auto;
    border-top: 0;
    border-right: 4px solid var(--cutout-ink);
    box-shadow: 5px 0 9px rgb(23 22 18 / 0.12);
  }

  .how-panel .step-node {
    width: min(100%, 330px);
    min-height: 180px;
    padding: 76px 18px 18px;
    background: transparent;
  }

  .how-panel .step-node__number {
    top: 8px;
  }

  .how-panel .step-node h3,
  .how-panel .step-node p {
    position: relative;
    z-index: 1;
    padding-inline: 10px;
    background: var(--cutout-paper);
  }

  .closing-offer {
    transform: none;
  }

  .closing-offer::before {
    inset: 12px -10px -12px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-signal path,
  .demo-proof__copy::before,
  .demo-proof__copy::after,
  .spam-call,
  .spam-answer,
  .spam-result,
  .connection-object__plug,
  .connection-object__socket,
  .closing-ticker {
    transition: none !important;
  }
}

html.a11y-no-motion .hero-signal path {
  stroke-dashoffset: 0 !important;
}

html.a11y-no-motion .demo-proof__copy::before,
html.a11y-no-motion .demo-proof__copy::after {
  opacity: 1 !important;
  transform: translateY(-50%) !important;
}

html.a11y-no-motion .connection-object__plug,
html.a11y-no-motion .connection-object__socket,
html.a11y-no-motion .closing-ticker {
  transition: none !important;
}

/* Production polish v13: replace the abstract sound chamber with one useful
   cutout object. The picture explains the product; all meaningful copy stays
   live beside it and remains available to search engines and assistive tech. */
.demo-proof__grid {
  display: grid;
  max-width: 1180px;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(36px, 6vw, 92px);
}

.demo-proof__object {
  position: relative;
  z-index: 1;
  grid-column: 1;
  margin: -3% -10% 0 -4%;
  isolation: isolate;
  transform: rotate(1.5deg);
}

.demo-proof__object::before {
  position: absolute;
  z-index: -1;
  right: 13%;
  bottom: 6%;
  width: 68%;
  height: 18%;
  border-radius: 50%;
  background: rgb(23 22 18 / 0.18);
  filter: blur(24px);
  content: "";
  transform: rotate(-4deg);
}

.demo-proof__object::after {
  position: absolute;
  z-index: -2;
  right: -3%;
  bottom: 14%;
  width: 44%;
  height: 5px;
  border-radius: 999px;
  background: var(--cutout-blue);
  box-shadow: 0 8px 14px rgb(23 22 18 / 0.12);
  content: "";
}

.demo-proof__object img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 34px 34px rgb(23 22 18 / 0.2))
    drop-shadow(0 8px 10px rgb(23 22 18 / 0.12));
}

.demo-proof__copy {
  grid-column: 2;
  display: flex;
  max-width: 600px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}

.demo-proof__copy::before,
.demo-proof__copy::after {
  display: none !important;
}

.demo-proof__copy h2,
.demo-proof__copy > p:not(.eyebrow, .demo-proof__voices),
.demo-proof__facts,
.demo-proof__voices,
.demo-proof__cta,
.demo-proof__transcript--long {
  grid-column: auto;
  grid-row: auto;
}

.demo-proof__copy h2 {
  max-width: 9ch;
  margin-bottom: 22px;
  font-size: clamp(2.8rem, calc(4.35vw * var(--a11y-scale, 1)), 4.3rem);
  line-height: 0.96;
  text-shadow: none;
}

.demo-proof__copy > p:not(.eyebrow, .demo-proof__voices) {
  margin: 0;
}

.demo-proof__facts {
  width: 100%;
  margin-block: 22px 18px;
}

.demo-proof__voices {
  margin: 0 0 8px !important;
}

.demo-proof__cta {
  margin-top: 18px;
}

.demo-proof__transcript--long {
  width: min(100%, 48ch);
  margin-top: 12px;
}

html.cutout-motion .demo-proof__object img {
  opacity: 1;
  transition: opacity 760ms ease, transform 900ms cubic-bezier(.2, .72, .2, 1);
  transform: translate3d(0, 0, 0) rotate(0);
}

html.cutout-motion .demo-proof:not(.is-cutout-visible) .demo-proof__object img {
  opacity: 0;
  transform: translate3d(28px, 22px, 0) rotate(3deg);
}

/* The summary signal resolves once; nothing pulses or loops. */
html.js-motion .brand-flow__signal {
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@media (max-width: 860px) {
  .demo-proof__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .demo-proof__copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 660px;
  }

  .demo-proof__object {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 680px);
    margin: 10px auto 0;
    padding-bottom: 22px;
    transform: none;
  }
}

@media (max-width: 520px) {
  .demo-proof__copy h2 {
    max-width: 100%;
    font-size: clamp(2.5rem, calc(12vw * var(--a11y-scale, 1)), 3.45rem);
  }

  .demo-proof__object {
    width: 110%;
    margin-right: -5%;
    margin-left: -5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-proof__object img {
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
  }
}

html.a11y-no-motion .demo-proof__object img {
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
}

/* Production polish v14: the static story must not inherit the old 240svh
   scroll-scene geometry. Keep every cutout truly alpha-led and avoid Safari
   3D compositing layers, which can expose a rectangular image canvas. */
.scene.scene--still {
  height: auto;
  min-height: 0;
  padding-block: clamp(82px, 8vw, 116px) clamp(94px, 9vw, 132px);
  overflow: hidden;
  overflow: clip;
}

.scene.scene--still .scene-sticky,
html:not(.js-motion) .scene.scene--still .scene-sticky,
html.static .scene.scene--still .scene-sticky {
  position: relative;
  top: auto;
  display: grid;
  width: min(calc(100% - 40px), 1280px);
  height: auto;
  min-height: 0;
  margin-inline: auto;
  grid-template-rows: auto auto;
  gap: clamp(42px, 5vw, 68px);
  overflow: visible;
  background: transparent;
}

.scene.scene--still .scene-sticky::after {
  inset: -72px -10vw;
  background: radial-gradient(circle at 50% 58%, rgb(255 232 26 / 0.09), transparent 34%);
}

.scene.scene--still .scene-copy,
.scene.scene--still.has-answer .scene-copy {
  position: relative;
  z-index: 4;
  top: auto;
  right: auto;
  left: auto;
  width: min(100%, 760px);
  margin-inline: auto;
  color: var(--cutout-ink);
  text-align: center;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}

.scene.scene--still .scene-copy h2,
.scene.scene--still .scene-copy p {
  margin-inline: auto;
}

.scene-workshop {
  right: 50%;
  bottom: -5%;
  width: min(1540px, calc(100vw + 120px));
  max-width: none;
  opacity: var(--scene-workshop-opacity);
  transform: translateX(50%);
}

.scene-flow {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 470px;
  margin: 0;
  padding: 18px 0 0;
  grid-template-columns: minmax(170px, 0.82fr) minmax(340px, 1.36fr) minmax(170px, 0.82fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
  list-style: none;
}

.scene-flow::before {
  position: absolute;
  z-index: -1;
  top: 55%;
  right: 7%;
  left: 7%;
  height: 4px;
  border-radius: 999px;
  background: var(--cutout-blue);
  box-shadow: 0 7px 12px rgb(23 22 18 / 0.12);
  content: "";
}

.scene-flow__step,
.scene-flow__machine {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.scene-flow__step {
  display: grid;
  width: min(100%, 270px);
  min-height: 178px;
  padding: 24px 20px 22px;
  justify-items: center;
  align-content: center;
  gap: 8px;
  justify-self: center;
  color: var(--cutout-ink);
  text-align: center;
  background: rgb(255 250 240 / 0.92);
  border: 1px solid rgb(23 22 18 / 0.18);
  border-radius: 28px 8px 28px 8px;
  box-shadow: 0 22px 42px rgb(23 22 18 / 0.12), inset 0 2px 0 rgb(255 255 255 / 0.7);
}

.scene-flow__step--incoming {
  transform: translateY(-18px) rotate(-1.4deg);
}

.scene-flow__step--summary {
  transform: translateY(22px) rotate(1.4deg);
}

.scene-flow__number {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 5px;
  color: var(--cutout-ink);
  background: var(--yellow);
  border: 3px solid var(--cutout-ink);
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}

.scene-flow__label {
  font-size: 0.86rem;
  font-weight: 700;
}

.scene-flow__step strong,
.scene-flow__machine-copy strong {
  display: block;
  max-width: 19ch;
  font-family: "Weave Frank", serif;
  font-size: clamp(1.35rem, calc(2vw * var(--a11y-scale, 1)), 1.8rem);
  line-height: 1.12;
}

.scene-flow__machine {
  display: grid;
  justify-items: center;
  align-items: end;
  transform: none;
}

.scene-flow__machine picture {
  display: block;
  width: min(100%, 500px);
  transform: none;
}

.scene-flow__machine img {
  display: block;
  width: 100%;
  height: auto;
}

.scene-flow__machine-copy {
  position: absolute;
  z-index: 4;
  top: -18px;
  right: 50%;
  display: grid;
  width: min(250px, 78%);
  min-height: 130px;
  padding: 16px 22px 18px;
  justify-items: center;
  align-content: center;
  gap: 6px;
  color: var(--cutout-ink);
  text-align: center;
  background: rgb(255 250 240 / 0.96);
  border: 1px solid rgb(23 22 18 / 0.18);
  border-radius: 8px 26px 8px 26px;
  box-shadow: 0 24px 48px rgb(23 22 18 / 0.16);
  transform: translateX(50%) rotate(-0.8deg);
}

.scene-flow__machine-copy .scene-flow__number {
  width: 40px;
  height: 40px;
  margin-bottom: 0;
}

/* These source files already have clean alpha. Restrict the visual treatment to
   2D transforms so WebKit cannot expose their transparent canvas as a rectangle. */
.facts-panel .summary-object {
  perspective: none;
  isolation: isolate;
  transform: none;
}

.facts-panel .summary-object::after {
  right: 8%;
  bottom: 3%;
  left: 8%;
  height: 76px;
  border-radius: 50%;
  filter: blur(14px);
  transform: rotate(-4deg);
}

.facts-panel .summary-object__phone {
  filter: drop-shadow(0 28px 28px rgb(23 22 18 / 0.22));
  transform: rotate(4deg);
}

.facts-panel .summary-object__tag {
  filter: drop-shadow(0 20px 22px rgb(23 22 18 / 0.18));
  transform: rotate(-6deg);
}

.facts-panel .summary-object__tag-copy {
  transform: rotate(-6deg);
}

/* The preview carries intrinsic 1920×1080 dimensions. Without an explicit
   responsive rule Safari lets those dimensions enlarge the grid item and a
   grey video canvas escapes the cutout card. */
.hero-demo,
.hero-demo .demo-proof__frame {
  min-width: 0;
  overflow: hidden;
}

.hero-demo .demo-proof__frame video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--cutout-paper);
}

/* Searchable product copy must never depend on an observer firing. The old
   reveal used a full clip-path and could leave an otherwise valid section blank
   after a resize or an anchor jump. Keep it readable and animate only a small
   settling movement. */
.panel-reveal,
.bridge-panel.is-visible .panel-reveal,
html:not(.js-motion) .panel-reveal,
html.static .panel-reveal {
  clip-path: none;
  opacity: 1;
  transform: none;
  transition: opacity 440ms ease-out, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-motion .bridge-panel:not(.is-visible) .panel-reveal {
  opacity: 0.84;
  transform: translateY(10px) scale(0.997);
}

@media (max-width: 900px) {
  .scene.scene--still .scene-sticky,
  html:not(.js-motion) .scene.scene--still .scene-sticky,
  html.static .scene.scene--still .scene-sticky {
    width: min(calc(100% - 32px), 820px);
  }

  .scene-flow {
    min-height: 420px;
    grid-template-columns: minmax(142px, 0.72fr) minmax(300px, 1.4fr) minmax(142px, 0.72fr);
    gap: 12px;
  }

  .scene-flow__step {
    min-height: 154px;
    padding: 19px 12px;
  }

  .scene-flow__machine-copy {
    top: -8px;
  }
}

@media (max-width: 720px) {
  .scene.scene--still {
    padding-block: 72px 88px;
  }

  .scene.scene--still .scene-sticky,
  html:not(.js-motion) .scene.scene--still .scene-sticky,
  html.static .scene.scene--still .scene-sticky {
    width: min(calc(100% - 28px), 520px);
    gap: 28px;
  }

  .scene.scene--still .scene-copy {
    text-align: right;
  }

  .scene.scene--still .scene-copy h2,
  .scene.scene--still .scene-copy p {
    margin-inline: 0;
  }

  .scene-workshop {
    bottom: 7%;
    width: 980px;
  }

  .scene-flow {
    min-height: 0;
    padding-top: 10px;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .scene-flow::before {
    top: 4%;
    right: 50%;
    bottom: 4%;
    left: auto;
    width: 4px;
    height: auto;
  }

  .scene-flow__step {
    width: min(100%, 300px);
    min-height: 142px;
  }

  .scene-flow__step--incoming,
  .scene-flow__step--summary {
    transform: none;
  }

  .scene-flow__machine {
    width: min(112%, 500px);
    margin-inline: auto;
  }

  .scene-flow__machine-copy {
    top: 1%;
    width: min(238px, 72%);
  }
}

@media (max-width: 420px) {
  .scene-flow__machine {
    width: 108%;
    margin-right: -4%;
    margin-left: -4%;
  }

  .facts-panel .summary-object {
    width: min(100%, 318px);
  }
}

/* Final fold repair: the material-depth layer previously reused this pseudo
   element as a full rectangle. Safari exposed that rectangle through the
   clipped top-right corner. Keep the depth in the card shadow and draw only
   the triangular paper fold that belongs inside the cut corner. */
.closing-offer::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: clamp(58px, 7vw, 88px);
  aspect-ratio: 1;
  border: 0;
  background: rgb(224 216 197 / 0.92);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  content: "";
  filter: none;
  pointer-events: none;
}

@media (max-width: 720px) {
  .closing-offer::before {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: clamp(52px, 18vw, 70px);
  }
}

/* Site-wide action frame. The loop from the approved demo CTA is the button
   silhouette everywhere; secondary text links remain ordinary links. */
.masthead-cta,
.home-entry__links a:first-child {
  position: relative;
  z-index: 0;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  color: var(--cutout-ink);
  background: var(--yellow);
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  transition: transform 140ms ease, background-color 140ms ease;
}

.masthead-cta::before,
.home-entry__links a:first-child::before {
  position: absolute;
  z-index: -1;
  inset: -6px -16px;
  border: 0;
  border-radius: 0;
  background: url("/assets/brand/action-loop.svg") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
  transform: none;
}

.masthead-cta::after,
.home-entry__links a:first-child::after {
  content: none;
}

.masthead-cta:hover,
.home-entry__links a:first-child:hover {
  color: var(--cutout-ink);
  background: #fffdf7;
  transform: translateY(-2px);
}

.masthead-cta:active,
.home-entry__links a:first-child:active {
  transform: translateY(0);
}

.home-entry__links {
  column-gap: 30px;
}

@media (max-width: 720px) {
  .masthead-cta::before,
  .home-entry__links a:first-child::before {
    inset-inline: -12px;
  }
}

/* Mobile finishing pass: foreground objects stay within the frame; large
   alpha-led workshop pieces may still grow beyond it, but never create page
   overflow or resemble a pasted rectangle. */
@media (max-width: 720px) {
  .home-entry,
  .demo-proof,
  .scene,
  .bridge-panel,
  .closing {
    scroll-margin-top: 82px;
  }

  .home-entry h1,
  .demo-proof__copy h2,
  .scene.scene--still .scene-copy h2,
  .panel-heading h2,
  .closing h2 {
    letter-spacing: -0.035em;
  }

  .demo-proof__object {
    width: calc(100% - 24px);
    margin: 12px auto 0;
    padding-bottom: 12px;
  }

  .demo-proof__object img {
    width: 100%;
    max-width: 100%;
  }

  .scene-workshop {
    width: min(760px, 195vw);
  }

  .scene-flow__machine {
    width: 100%;
    margin-inline: 0;
  }

  .spam-call,
  .spam-answer {
    width: calc(100% - 24px);
    max-width: none;
  }

  .spam-call {
    right: 12px;
    left: auto;
  }

  .spam-answer {
    right: auto;
    left: 12px;
  }

  .connection-object {
    max-width: calc(100% - 24px);
  }

  .closing-ticker {
    right: -8%;
    width: 116%;
  }
}

@media (max-width: 420px) {
  .home-entry__inner,
  .demo-proof__grid,
  .scene.scene--still .scene-sticky,
  .bridge-panel__inner,
  .closing-inner {
    min-width: 0;
  }

  .home-entry h1 {
    font-size: clamp(2.45rem, calc(11.6vw * var(--a11y-scale, 1)), 3.1rem);
    line-height: 1.01;
  }

  .home-entry__lead,
  .panel-heading .sub,
  .scene.scene--still .scene-copy p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .summary-object {
    max-width: 100%;
  }
}

/* Clean hero: one promise, one action and one proof. Product truth stays in
   readable HTML while the selected cutout workshop language remains intact. */
.home-entry {
  min-height: clamp(610px, 76svh, 760px);
  padding-block: clamp(62px, 7vw, 92px) clamp(60px, 6vw, 84px);
}

.home-entry::before {
  width: clamp(12px, 1.7vw, 24px);
  opacity: 0.82;
}

.home-entry__inner {
  min-height: 450px;
  grid-template-columns: minmax(0, 1.03fr) minmax(320px, 0.72fr);
  grid-template-rows: repeat(6, auto);
  column-gap: clamp(44px, 7vw, 94px);
  padding-inline: clamp(20px, 4vw, 54px);
}

.home-entry h1,
.home-entry__promise,
.home-entry__lead,
.home-entry__links,
.home-entry__trust,
.hero-try-call {
  grid-column: 1;
}

.home-entry h1 {
  grid-row: 1;
  max-width: 11.5ch;
  margin: 0;
  font-size: clamp(3rem, calc(4.15vw * var(--a11y-scale, 1)), 4.15rem);
  line-height: 1.01;
}

.home-entry__promise {
  grid-row: 2;
  max-width: 30ch;
  margin: 20px 0 0;
  color: var(--cutout-ink);
  font-family: "Weave Miriam", sans-serif;
  font-size: clamp(1.15rem, calc(1.55vw * var(--a11y-scale, 1)), 1.38rem);
  font-weight: 850;
  line-height: 1.35;
}

.home-entry__lead {
  grid-row: 3;
  max-width: 49ch;
  margin: 9px 0 0;
  color: rgb(23 22 18 / 0.76);
  font-size: clamp(1rem, calc(1.14vw * var(--a11y-scale, 1)), 1.1rem);
  font-weight: 650;
  line-height: 1.52;
}

.home-entry__links {
  grid-row: 4;
  margin-top: 22px;
  column-gap: 26px;
}

.home-entry__links a:last-child {
  color: var(--cutout-ink);
  text-decoration-color: var(--cutout-blue);
  text-decoration-thickness: 2px;
}

.home-entry__trust {
  grid-row: 5;
  margin-top: 11px;
  color: rgb(23 22 18 / 0.68);
  font-size: 0.82rem;
  font-weight: 750;
}

.hero-try-call {
  grid-row: 6;
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-block: 8px;
  color: var(--cutout-ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.hero-try-call strong {
  color: var(--cutout-blue);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.hero-try-call:hover strong {
  text-decoration-thickness: 2.5px;
}

.hero-demo {
  grid-column: 2;
  grid-row: 1 / span 6;
  width: min(100%, 420px);
  border: 1px solid rgb(23 22 18 / 0.68);
  border-top: 2px solid var(--cutout-blue);
  border-radius: 8px 3px 9px 4px;
  box-shadow: 0 28px 54px -30px rgb(23 22 18 / 0.46), 0 8px 22px -18px rgb(23 22 18 / 0.34);
  transform: translateY(8px) rotate(-0.35deg);
}

.hero-demo .demo-proof__frame,
.hero-demo .demo-proof__frame video {
  border-radius: 7px 2px 0 0;
}

.hero-demo figcaption {
  padding: 10px 13px 11px;
  color: rgb(23 22 18 / 0.7);
  font-weight: 700;
}

.hero-receiver {
  top: -285px;
  left: clamp(6px, 5vw, 78px);
  width: clamp(230px, 21vw, 310px);
  opacity: 0.78;
}

.hero-signal {
  bottom: 8%;
  height: 38%;
  opacity: 0.68;
}

.hero-signal path {
  stroke-width: 3.5;
}

@media (max-width: 980px) {
  .home-entry__inner {
    grid-template-columns: minmax(0, 1fr) minmax(285px, 0.7fr);
    column-gap: 34px;
  }

  .home-entry h1 {
    font-size: clamp(2.8rem, calc(4.8vw * var(--a11y-scale, 1)), 3.75rem);
  }
}

@media (max-width: 720px) {
  .home-entry {
    padding-block: 48px 62px;
  }

  .home-entry__inner {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    padding-inline: 8px 14px;
  }

  .home-entry h1 {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    font-size: clamp(2.65rem, calc(12.2vw * var(--a11y-scale, 1)), 3.45rem);
  }

  .home-entry__promise {
    grid-column: 1;
    grid-row: 2;
    margin-top: 16px;
    font-size: 1.12rem;
  }

  .home-entry__lead {
    grid-column: 1;
    grid-row: 3;
    max-width: 32ch;
    margin-top: 8px;
  }

  .home-entry__links {
    grid-column: 1;
    grid-row: 4;
    margin-top: 18px;
  }

  .home-entry__trust {
    grid-column: 1;
    grid-row: 5;
  }

  .hero-try-call {
    grid-column: 1;
    grid-row: 6;
  }

  .hero-demo {
    grid-column: 1;
    grid-row: 7;
    width: min(100%, 360px);
    margin: 20px 0 0 auto;
    transform: none;
  }

  .hero-signal {
    bottom: -7%;
    height: 35%;
    opacity: 0.35;
  }
}

@media (max-width: 420px) {
  .home-entry h1 {
    font-size: clamp(2.42rem, calc(11.4vw * var(--a11y-scale, 1)), 3rem);
  }

  .home-entry__links {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .home-entry__links a:first-child {
    width: auto;
  }

  .hero-try-call {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Mobile composition v15: preserve the desktop cutout world, but make the
   phone experience read like a focused product page instead of a tall poster. */
@media (max-width: 820px) {
  .home-entry,
  .demo-proof,
  .scene.scene--still,
  .bridge-panel,
  .closing {
    scroll-margin-top: 72px;
  }

  .home-entry {
    min-height: 0;
    padding-block: 32px 42px;
  }

  .home-entry::after,
  .hero-receiver,
  .hero-signal {
    display: none;
  }

  .home-entry__inner {
    width: 100%;
    min-height: 0;
    padding-inline: max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(7, auto);
  }

  .home-entry h1 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(2.2rem, calc(9.8vw * var(--a11y-scale, 1)), 2.75rem);
    line-height: 1.03;
  }

  .home-entry__promise {
    max-width: 31ch;
    margin-top: 12px;
    font-size: 1.04rem;
    line-height: 1.4;
  }

  .home-entry__lead {
    max-width: 34ch;
    margin-top: 7px;
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .home-entry__links {
    display: grid;
    width: 100%;
    max-width: 360px;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 16px;
  }

  .home-entry__links a {
    min-height: 46px;
  }

  .home-entry__links a:first-child {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .home-entry__links a:last-child {
    width: max-content;
    max-width: 100%;
    padding-block: 10px;
  }

  .home-entry__trust {
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .hero-try-call {
    width: 100%;
    min-height: 44px;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    margin-top: 0;
    padding-block: 8px;
    font-size: 0.82rem;
  }

  .hero-demo {
    width: min(100%, 340px);
    margin: 11px auto 0;
    padding: 8px 8px 10px;
    border-radius: 10px 4px 11px 5px;
    box-shadow: 0 18px 34px rgb(23 22 18 / 0.13);
    transform: none;
  }

  .hero-demo figcaption {
    padding: 8px 5px 0;
    font-size: 0.78rem;
  }

  .demo-proof {
    padding-block: 46px 52px;
  }

  .demo-proof__grid {
    padding-inline: max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-left));
    gap: 20px;
  }

  .demo-proof__copy {
    gap: 0;
  }

  .demo-proof__copy h2 {
    max-width: 100%;
    margin-bottom: 11px;
    font-size: clamp(2rem, calc(9vw * var(--a11y-scale, 1)), 2.4rem);
    line-height: 1.02;
  }

  .demo-proof__copy > p:not(.eyebrow, .demo-proof__voices) {
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .demo-proof__facts {
    margin-block: 14px 12px;
  }

  .demo-proof__facts li {
    min-height: 40px;
    align-items: center;
    padding-block: 8px;
    font-size: 0.98rem;
  }

  .demo-proof__voices {
    margin-block: 0 5px !important;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .demo-proof__cta {
    width: min(100%, 340px);
    min-height: 48px;
    margin-top: 13px;
  }

  .demo-proof__transcript--long {
    margin-top: 8px;
  }

  .demo-proof__object {
    width: min(76%, 280px);
    margin: 0 auto;
    padding: 0;
  }

  .demo-proof__object::before,
  .demo-proof__object::after,
  .demo-proof__copy::before,
  .demo-proof__copy::after {
    display: none !important;
  }

  .scene.scene--still {
    padding-block: 48px 54px;
  }

  .scene.scene--still .scene-sticky,
  html:not(.js-motion) .scene.scene--still .scene-sticky,
  html.static .scene.scene--still .scene-sticky {
    width: min(calc(100% - 40px), 520px);
    gap: 22px;
  }

  .scene-workshop {
    display: none;
  }

  .scene.scene--still .scene-copy h2,
  .panel-heading h2,
  .closing h2 {
    max-width: 100%;
    font-size: clamp(2rem, calc(9vw * var(--a11y-scale, 1)), 2.45rem);
    line-height: 1.03;
  }

  .scene.scene--still .scene-copy p,
  .panel-heading .sub,
  .closing p.closing-lead {
    max-width: 34ch !important;
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .scene-flow {
    min-height: 0;
    gap: 12px;
    padding: 0;
  }

  .scene-flow::before {
    top: 24px;
    right: 21px;
    bottom: 24px;
    width: 3px;
    height: auto;
    background: rgb(49 86 199 / 0.42);
    box-shadow: none;
  }

  .scene-flow__step,
  .scene-flow__machine-copy {
    position: relative;
    top: auto;
    right: auto;
    display: grid;
    width: 100%;
    min-height: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
    justify-items: start;
    padding: 15px 14px;
    text-align: start;
    background: rgb(255 250 240 / 0.94);
    border: 1px solid rgb(23 22 18 / 0.18);
    border-radius: 18px 7px 19px 8px;
    box-shadow: 0 12px 24px rgb(23 22 18 / 0.07);
    transform: none;
  }

  .scene-flow__number,
  .scene-flow__machine-copy .scene-flow__number {
    width: 42px;
    height: 42px;
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .scene-flow__label,
  .scene-flow__machine-copy .scene-flow__label {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.76rem;
  }

  .scene-flow__step strong,
  .scene-flow__machine-copy strong {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    font-size: 1.18rem;
    line-height: 1.2;
  }

  .scene-flow__machine {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  .scene-flow__machine picture {
    display: none;
  }

  .bridge-panel {
    padding-block: 48px 54px;
  }

  .bridge-panel__inner {
    width: min(calc(100% - 40px), 520px);
  }

  .panel-heading {
    gap: 7px;
    margin-bottom: 24px;
  }

  .panel-kicker {
    font-size: 0.74rem;
  }

  .spam-stamp {
    display: none;
  }

  .spam-machine {
    display: grid;
    min-height: 0;
    gap: 12px;
    padding: 0;
  }

  .spam-machine::before {
    display: none;
  }

  .spam-call,
  .spam-answer,
  .spam-result,
  html.js-motion .spam-panel:not(.is-visible) .spam-call,
  html.js-motion .spam-panel:not(.is-visible) .spam-answer,
  html.js-motion .spam-panel:not(.is-visible) .spam-result {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 16px;
    transform: none;
  }

  .spam-call p,
  .spam-answer p {
    margin-top: 7px;
    font-size: 1rem;
    line-height: 1.45;
  }

  .filter-gate {
    position: relative;
    inset: auto;
    width: 68px;
    height: 68px;
    margin: 0 auto;
    transform: none;
  }

  .spam-result {
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .facts-panel .bridge-panel__inner {
    display: block;
  }

  .facts-panel .panel-heading {
    margin-bottom: 18px;
  }

  .facts-panel .fact-rack {
    gap: 0;
  }

  .facts-panel .fact-slip,
  .facts-panel.is-visible .fact-slip,
  .facts-panel.is-visible .fact-slip:nth-child(2),
  .facts-panel.is-visible .fact-slip:nth-child(3) {
    padding-block: 16px 14px;
  }

  .facts-panel .fact-slip .figure {
    font-size: 1.28rem;
  }

  .facts-panel .fact-slip p {
    font-size: 0.95rem;
  }

  .facts-panel .summary-object {
    display: none;
  }

  .facts-detail {
    margin-top: 10px;
  }

  .facts-panel .panel-more,
  .how-panel .panel-more {
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.6;
  }

  .facts-panel .panel-more a,
  .how-panel .panel-more a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-block: 9px;
  }

  .connection-object {
    width: 218px;
    height: 132px;
    margin: 0 auto 18px;
  }

  .how-panel .steps-route {
    gap: 12px;
    padding-block: 10px 14px;
  }

  .how-panel .steps-route::before {
    display: none;
  }

  .how-panel .step-node {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    justify-items: start;
    padding: 15px 14px;
    text-align: start;
    background: rgb(255 250 240 / 0.78);
    border: 1px solid rgb(23 22 18 / 0.16);
    border-radius: 17px 7px 18px 8px;
  }

  .how-panel .step-node__number {
    position: static;
    width: 40px;
    height: 40px;
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 1.15rem;
    transform: none;
  }

  .how-panel .step-node h3,
  .how-panel .step-node p {
    grid-column: 2;
    margin: 0;
    padding: 0;
    text-align: start;
    background: transparent;
  }

  .how-panel .step-node h3 {
    grid-row: 1;
    font-size: 1.2rem;
  }

  .how-panel .step-node p {
    grid-row: 2;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .installation-code {
    display: grid;
    width: 100%;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 10px;
    align-items: center;
    margin-top: 10px;
    padding: 13px 14px;
  }

  .installation-code .event-seal {
    grid-row: 1 / span 2;
  }

  .installation-code .num {
    grid-column: 2;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
  }

  .installation-note {
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .closing {
    padding-block: 50px 58px;
  }

  .closing-inner {
    width: min(calc(100% - 40px), 520px);
    gap: 10px;
  }

  .closing h2 {
    max-width: 11ch;
  }

  .closing-ticker,
  .brand-flow--summary {
    display: none;
  }

  .closing-offer {
    margin-top: 18px;
    padding: 24px 20px 22px;
    grid-template-columns: 1fr;
    gap: 22px;
    border-radius: 24px 8px 25px 9px;
    box-shadow: 0 18px 36px rgb(23 22 18 / 0.1);
    transform: none;
  }

  .closing-offer::before {
    width: 52px;
  }

  .offer-copy h3 {
    font-size: 2rem;
    line-height: 1.08;
  }

  .offer-copy p,
  .benefit-route li,
  .offer-hint {
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .offer-action .wbtn {
    width: 100%;
    min-height: 50px;
  }
}

@media (max-width: 360px) {
  .home-entry__inner,
  .demo-proof__grid {
    padding-inline: 17px;
  }

  .home-entry h1 {
    font-size: clamp(2.05rem, calc(10vw * var(--a11y-scale, 1)), 2.35rem);
  }

  .home-entry__promise,
  .home-entry__lead {
    max-width: 100%;
  }

  .hero-try-call {
    flex-wrap: wrap;
  }

  .bridge-panel__inner,
  .closing-inner,
  .scene.scene--still .scene-sticky,
  html:not(.js-motion) .scene.scene--still .scene-sticky,
  html.static .scene.scene--still .scene-sticky {
    width: calc(100% - 34px);
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .hero-demo,
  .demo-proof__object,
  .scene-flow__step,
  .scene-flow__machine-copy,
  .spam-call,
  .spam-answer,
  .spam-result,
  .how-panel .step-node,
  .closing-offer {
    transition: none !important;
    transform: none !important;
  }
}

/* Mobile fidelity v17: keep the approved cutout world and only reflow it. */
@media (max-width: 820px) {
  .home-entry {
    padding-block: 40px 50px;
  }

  .home-entry__inner {
    grid-template-rows: repeat(7, auto);
    row-gap: 16px;
  }

  .home-entry h1 {
    font-size: clamp(2.16rem, calc(9.2vw * var(--a11y-scale, 1)), 2.55rem);
    line-height: 1.06;
  }

  .home-entry__promise {
    margin-top: 14px;
  }

  .home-entry__lead {
    max-width: 32ch;
    margin-top: 8px;
    font-size: 1rem;
  }

  .home-entry__links {
    gap: 10px;
    margin-top: 20px;
  }

  .home-entry__trust {
    margin-top: 8px;
  }

  .hero-demo {
    grid-row: 6;
    margin-top: 22px;
  }

  .hero-try-call {
    grid-row: 7;
    width: max-content;
    max-width: 100%;
    margin-top: 7px;
  }

  .demo-proof,
  .scene.scene--still,
  .bridge-panel,
  .closing {
    padding-block: 56px 64px;
  }

  .demo-proof__grid,
  .scene.scene--still .scene-sticky,
  html:not(.js-motion) .scene.scene--still .scene-sticky,
  html.static .scene.scene--still .scene-sticky,
  .bridge-panel__inner,
  .closing-inner {
    width: min(calc(100% - 44px), 520px);
  }

  .scene-flow,
  .spam-machine,
  .how-panel .steps-route {
    gap: 16px;
  }

  .panel-heading {
    margin-bottom: 28px;
  }

  .facts-panel .fact-slip,
  .facts-panel.is-visible .fact-slip,
  .facts-panel.is-visible .fact-slip:nth-child(2),
  .facts-panel.is-visible .fact-slip:nth-child(3) {
    padding-block: 18px 16px;
  }

  .connection-object {
    width: 190px;
    height: 116px;
    margin-bottom: 22px;
  }

  .installation-code {
    margin-top: 16px;
  }

  .installation-note {
    margin-top: 16px;
  }

  .closing-offer {
    gap: 26px;
  }

  .offer-action {
    padding-top: 22px;
    border-top: 1px solid rgb(23 22 18 / 0.16);
  }
}

/* Mobile readable scale v18: the original cutout composition stays intact;
   sentences and their supporting objects no longer inherit poster-scale microcopy. */
@media (max-width: 820px) {
  .masthead-cta,
  .home-entry .wbtn,
  .demo-proof .wbtn,
  .closing .wbtn {
    font-size: 1rem;
  }

  .home-entry__promise {
    font-size: 1.08rem;
    line-height: 1.55;
  }

  .home-entry__lead {
    font-size: 1.05rem;
    line-height: 1.62;
  }

  .home-entry__trust {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .hero-try-call {
    font-size: 1rem;
    line-height: 1.45;
  }

  .hero-demo {
    width: 100%;
    max-width: 380px;
  }

  .hero-demo figcaption {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .demo-proof__copy > p:not(.eyebrow, .demo-proof__voices),
  .scene.scene--still .scene-copy p,
  .panel-heading .sub,
  .closing p.closing-lead {
    font-size: 1.05rem;
    line-height: 1.62;
  }

  .demo-proof__facts li {
    min-height: 44px;
    font-size: 1.03rem;
    line-height: 1.5;
  }

  .demo-proof__voices {
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  .demo-proof__transcript,
  .demo-proof__transcript summary,
  .demo-proof__transcript p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .demo-proof__object {
    width: min(92%, 330px);
  }

  .scene-flow__label,
  .scene-flow__machine-copy .scene-flow__label {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .panel-kicker {
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .spam-call strong,
  .spam-answer strong {
    font-size: 0.94rem;
    line-height: 1.4;
  }

  .spam-call p,
  .spam-answer p {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .filter-gate {
    width: 78px;
    height: 78px;
  }

  .spam-result strong {
    font-size: 1.02rem;
  }

  .spam-result small {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .facts-panel .fact-slip p {
    font-size: 1.04rem;
    line-height: 1.58;
  }

  .facts-panel .fact-slip small {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .facts-detail summary,
  .facts-detail p {
    font-size: 1rem;
    line-height: 1.62;
  }

  .facts-panel .panel-more,
  .how-panel .panel-more {
    font-size: 1rem;
    line-height: 1.65;
  }

  .connection-object {
    width: 218px;
    height: 132px;
  }

  .how-panel .step-node p {
    font-size: 1.03rem;
    line-height: 1.55;
  }

  .installation-code span:not(.event-seal) {
    font-size: 0.9rem;
  }

  .installation-code .num,
  .installation-note {
    font-size: 1rem;
    line-height: 1.6;
  }

  .offer-copy > p,
  .benefit-route li {
    font-size: 1.04rem;
    line-height: 1.6;
  }

  .offer-hint {
    font-size: 1rem !important;
    line-height: 1.55;
  }
}

/* Mobile material integration v19: preserve the approved paper-and-wire world,
   but let one useful object explain each section instead of repeating cards. */
@media (max-width: 820px) {
  .home-entry__promise,
  .home-entry__trust,
  .hero-try-call,
  .scene-flow__number,
  .panel-kicker,
  .closing-offer .offer-copy > .panel-kicker {
    font-weight: 700;
  }

  .home-entry__lead,
  .demo-proof__copy > p:not(.eyebrow, .demo-proof__voices),
  .scene.scene--still .scene-copy p,
  .panel-heading .sub,
  .spam-call p,
  .spam-answer p,
  .facts-panel .fact-slip p,
  .closing p.closing-lead,
  .offer-copy > p,
  .benefit-route li,
  .offer-hint {
    font-weight: 600;
  }

  .panel-kicker,
  .closing-offer .offer-copy > .panel-kicker {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* A video remains honest rectangular media. The cable, punch and live label
     make it an intentional product screen rather than a pasted image card. */
  .hero-demo {
    position: relative;
    overflow: visible;
    margin-top: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-demo::before {
    position: absolute;
    z-index: -1;
    top: auto;
    right: 24px;
    bottom: -26px;
    left: auto;
    display: block;
    width: 72px;
    height: 42px;
    background: transparent;
    border: 0;
    border-right: 3px solid var(--cutout-blue);
    border-bottom: 3px solid var(--cutout-blue);
    border-radius: 0 0 24px 0;
    content: "";
    transform: none;
  }

  .hero-demo::after {
    position: absolute;
    z-index: 2;
    right: 17px;
    bottom: -33px;
    width: 15px;
    height: 15px;
    background: var(--yellow);
    border: 3px solid var(--cutout-ink);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--cutout-paper);
    content: "";
  }

  .hero-demo .demo-proof__frame {
    overflow: hidden;
    background: #f7f6f1;
    border: 1px solid rgb(23 22 18 / 0.64);
    border-top: 3px solid var(--cutout-blue);
    border-radius: 12px 4px 10px 5px;
    box-shadow:
      0 22px 38px -26px rgb(23 22 18 / 0.46),
      0 8px 18px -16px rgb(23 22 18 / 0.32);
  }

  .hero-demo .demo-proof__frame video {
    border-radius: 9px 2px 8px 3px;
  }

  .hero-demo figcaption {
    width: max-content;
    max-width: calc(100% - 30px);
    margin: -1px 14px 0 auto;
    padding: 9px 14px 9px 24px;
    color: rgb(23 22 18 / 0.76);
    background: var(--cutout-paper);
    border: 1px solid rgb(23 22 18 / 0.48);
    border-top: 0;
    border-radius: 0 0 3px 9px;
    box-shadow: 0 12px 22px -18px rgb(23 22 18 / 0.42);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 96%);
    font-weight: 600;
  }

  /* The call route is open text around one cable. Only the machine is visual. */
  .scene-flow {
    gap: 4px;
    padding-top: 4px;
  }

  .scene-flow::before {
    top: 21px;
    right: 20px;
    bottom: 22px;
    width: 3px;
    background: rgb(49 86 199 / 0.56);
  }

  .scene-flow__step {
    width: 100%;
    min-height: 0;
    padding: 13px 0 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .scene-flow__machine {
    display: grid;
    width: 100%;
    margin: 2px 0 10px;
    justify-items: center;
  }

  .scene-flow__machine picture {
    display: block;
    width: min(calc(100vw - 48px), 320px);
    margin: 0 auto;
    filter:
      drop-shadow(0 24px 24px rgb(23 22 18 / 0.18))
      drop-shadow(0 7px 8px rgb(23 22 18 / 0.1));
  }

  .scene-flow__machine-copy {
    position: relative;
    top: auto;
    right: auto;
    width: min(86%, 280px);
    min-height: 0;
    margin: -13px 0 0 auto;
    padding: 12px 0 13px 14px;
    background: rgb(255 250 240 / 0.97);
    border: 0;
    border-block: 1px solid rgb(23 22 18 / 0.34);
    border-radius: 0;
    box-shadow: 0 14px 24px -19px rgb(23 22 18 / 0.45);
    clip-path: polygon(1% 2%, 100% 0, 99% 97%, 3% 100%);
    transform: rotate(-0.45deg);
  }

  .scene-flow__machine-copy::before {
    position: absolute;
    right: 19px;
    top: -23px;
    width: 3px;
    height: 23px;
    background: var(--cutout-blue);
    content: "";
  }

  .scene-flow__label,
  .scene-flow__machine-copy .scene-flow__label {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .scene-flow__step strong,
  .scene-flow__machine-copy strong {
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
  }

  /* Transparent phone + paper output. The information remains live HTML and
     is sized independently of the raster so it stays readable. */
  .facts-panel .summary-object {
    position: relative;
    display: block;
    width: min(calc(100vw - 32px), 340px);
    height: clamp(410px, 128vw, 468px);
    min-height: 0;
    margin: 18px auto 2px;
  }

  .facts-panel .summary-object::after {
    right: 8%;
    bottom: 1%;
    left: 8%;
    height: 58px;
    opacity: 0.68;
    filter: blur(13px);
  }

  .facts-panel .summary-object__phone {
    top: 0;
    right: 14%;
    width: 65%;
  }

  .facts-panel .summary-object__screen {
    top: 24%;
    right: 25%;
    width: 43%;
    min-height: 220px;
    padding: 16px 12px 14px;
    line-height: 1.38;
  }

  .facts-panel .summary-object__screen span,
  .facts-panel .summary-object__screen small {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .facts-panel .summary-object__screen span {
    padding-bottom: 8px;
  }

  .facts-panel .summary-object__screen strong {
    margin-top: 12px;
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .facts-panel .summary-object__screen p {
    margin: 6px 0 12px;
    font-size: 1rem;
    line-height: 1.42;
  }

  .facts-panel .summary-object__tag {
    right: 0;
    bottom: 0;
    width: 91%;
  }

  .facts-panel .summary-object__tag-copy {
    right: 21%;
    bottom: 16%;
    width: 57%;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 7px;
    font-size: 0.9rem;
    line-height: 1.28;
  }

  .facts-panel .summary-object__tag-copy strong {
    font-size: 1rem;
    line-height: 1.25;
  }

  /* Short related links scan as separate choices instead of one dense line. */
  .facts-panel .panel-more,
  .how-panel .panel-more {
    display: flex;
    max-width: 34ch;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 12px;
    margin: 12px auto 0;
    font-size: 0;
    line-height: 1;
    text-align: start;
  }

  .facts-panel .panel-more a,
  .how-panel .panel-more a {
    padding-block: 7px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
  }

  /* The installation copy hangs from the same cable as the real plug/socket. */
  .how-panel .steps-route {
    gap: 5px;
    padding-block: 4px 12px;
  }

  .how-panel .steps-route::before {
    top: 20px;
    right: 19px;
    bottom: 20px;
    left: auto;
    display: block;
    width: 3px;
    border: 0;
    background: rgb(49 86 199 / 0.52);
    box-shadow: none;
  }

  .how-panel .step-node {
    min-height: 0;
    padding: 12px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .how-panel .step-node h3 {
    font-weight: 700;
    line-height: 1.15;
  }

  .how-panel .step-node p {
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.55;
  }
}

html.a11y-large-text .facts-panel .summary-object {
  display: none;
}

/* Mobile visual priority v20: keep every readable size, but let the product
   proof arrive before the supporting copy. Related links stay full-width. */
@media (max-width: 820px) {
  .home-entry h1 {
    grid-row: 1;
  }

  .home-entry__promise {
    grid-row: 2;
  }

  .hero-demo {
    grid-row: 3;
    margin-top: 18px;
  }

  .home-entry__lead {
    grid-row: 4;
    margin-top: 18px;
  }

  .home-entry__links {
    grid-row: 5;
  }

  .home-entry__trust {
    grid-row: 6;
  }

  .hero-try-call {
    grid-row: 7;
  }

  .facts-panel .panel-more,
  .how-panel .panel-more {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 12px auto 0;
    font-size: 0;
    line-height: 0;
    text-align: start;
  }

  .facts-panel .panel-more a,
  .how-panel .panel-more a {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    margin-block: 2px;
    padding-block: 7px;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: normal;
    white-space: normal;
    word-break: normal;
  }
}

/* Hybrid production alignment v21: retain the approved quiet composition,
   while restoring the stronger image scale and placement from the faster
   production build. These overrides intentionally affect visual objects only. */
@media (min-width: 821px) {
  .hero-receiver {
    top: -250px;
    left: clamp(28px, 8vw, 128px);
    width: clamp(245px, 25vw, 360px);
    opacity: 1;
  }

  .hero-demo {
    width: min(100%, 470px);
    transform: translateY(22px) rotate(-2deg);
  }
}

@media (max-width: 820px) {
  .hero-demo {
    width: min(100%, 330px);
    max-width: none;
    margin: 20px 0 28px auto;
    padding: 13px 13px 17px;
    justify-self: end;
    transform: rotate(-1deg);
  }

  .demo-proof__object {
    width: calc(100% + 32px);
    max-width: 680px;
    margin: 12px -16px 0;
    padding-bottom: 12px;
  }

  .scene-flow__machine {
    width: calc(100% + 16px);
    margin-inline: -8px;
  }

  .scene-flow__machine picture {
    width: 100%;
    max-width: 500px;
  }

  .facts-panel .summary-object {
    width: min(100%, 318px);
    height: auto;
    min-height: 520px;
    margin: 14px auto 0;
  }

  .facts-panel .summary-object__phone {
    top: -28px;
    right: 58px;
    width: 214px;
  }

  .facts-panel .summary-object__screen {
    top: 92px;
    right: 95px;
    width: 137px;
    min-height: 246px;
    padding: 20px 12px 12px;
  }

  .facts-panel .summary-object__screen span {
    padding-bottom: 12px;
    font-size: 0.72rem;
  }

  .facts-panel .summary-object__screen strong {
    margin-top: 14px;
    font-size: 0.94rem;
  }

  .facts-panel .summary-object__screen p {
    margin: 8px 0 20px;
    font-size: 0.76rem;
  }

  .facts-panel .summary-object__screen small {
    font-size: 0.72rem;
  }

  .facts-panel .summary-object__tag {
    right: 8px;
    bottom: 0;
    width: 300px;
  }

  .facts-panel .summary-object__tag-copy {
    right: 76px;
    bottom: 67px;
    width: 180px;
    grid-template-columns: 42px 1fr;
    font-size: 0.63rem;
  }

  .facts-panel .summary-object__tag-copy strong {
    font-size: 0.69rem;
  }

  .connection-object {
    width: calc(100% - 8px);
    max-width: 440px;
    height: 225px;
    margin: -18px 4px 34px;
  }

  .closing-ticker {
    display: block;
    right: -8%;
    width: 116%;
    height: 110px;
    opacity: 0.18;
    transform: translateX(8vw) rotate(-2.2deg);
  }
}

/* Mobile composition v22: restore the three approved paper-and-wire stories
   from e004186. Later compact passes flattened their hierarchy into short
   rows; these sections need the generous, sequential poster rhythm shown in
   the approved mobile references. Product images and live HTML remain intact. */
@media (max-width: 820px) {
  #scene.scene.scene--still {
    padding-block: 72px 88px;
  }

  #scene.scene.scene--still .scene-sticky,
  html:not(.js-motion) #scene.scene.scene--still .scene-sticky,
  html.static #scene.scene.scene--still .scene-sticky {
    width: min(calc(100% - 28px), 520px);
    gap: 28px;
  }

  #scene.scene.scene--still .scene-copy,
  #scene.scene.scene--still.has-answer .scene-copy {
    width: min(100%, 760px);
    margin-inline: auto;
    text-align: center;
  }

  #scene.scene.scene--still .scene-copy h2 {
    max-width: 13ch;
    margin-inline: auto;
    font-size: clamp(2.45rem, calc(10.8vw * var(--a11y-scale, 1)), 3.45rem);
    line-height: 0.96;
  }

  #scene.scene.scene--still .scene-copy p {
    max-width: 44ch !important;
    margin: 16px auto 0;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
  }

  #scene .scene-workshop {
    right: 50%;
    bottom: 7%;
    left: auto;
    display: block;
    width: min(760px, 195vw);
    max-width: none;
  }

  #scene .scene-flow {
    min-height: 0;
    padding: 10px 0 0;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  #scene .scene-flow::before {
    top: 4%;
    right: 50%;
    bottom: 4%;
    left: auto;
    display: block;
    width: 4px;
    height: auto;
    background: var(--cutout-blue);
    box-shadow: 0 7px 12px rgb(23 22 18 / 0.12);
  }

  #scene .scene-flow__step {
    display: grid;
    width: min(100%, 300px);
    min-height: 142px;
    padding: 19px 12px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
    align-items: normal;
    align-content: center;
    gap: 8px;
    justify-self: center;
    text-align: center;
    background: rgb(255 250 240 / 0.92);
    border: 1px solid rgb(23 22 18 / 0.18);
    border-radius: 28px 8px 28px 8px;
    box-shadow: 0 22px 42px rgb(23 22 18 / 0.12), inset 0 2px 0 rgb(255 255 255 / 0.7);
    transform: none;
  }

  #scene .scene-flow__number,
  #scene .scene-flow__machine-copy .scene-flow__number {
    width: 44px;
    height: 44px;
    grid-column: auto;
    grid-row: auto;
    margin: 0 0 5px;
    font-weight: 900;
  }

  #scene .scene-flow__label,
  #scene .scene-flow__machine-copy .scene-flow__label {
    grid-column: auto;
    grid-row: auto;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: normal;
  }

  #scene .scene-flow__step strong,
  #scene .scene-flow__machine-copy strong {
    grid-column: auto;
    grid-row: auto;
    max-width: 19ch;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.12;
  }

  #scene .scene-flow__machine {
    display: grid;
    width: 108%;
    min-height: 330px;
    margin: 0 -4%;
    justify-items: center;
    align-items: end;
  }

  #scene .scene-flow__machine picture {
    display: block;
    width: min(100%, 500px);
    max-width: none;
    margin: 0;
    filter: drop-shadow(0 40px 40px rgb(23 22 18 / 0.24)) drop-shadow(0 10px 12px rgb(23 22 18 / 0.14));
  }

  #scene .scene-flow__machine-copy {
    position: absolute;
    z-index: 4;
    top: 1%;
    right: 50%;
    display: grid;
    width: min(238px, 72%);
    min-height: 130px;
    margin: 0;
    padding: 16px 22px 18px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
    align-items: normal;
    align-content: center;
    gap: 6px;
    text-align: center;
    background: rgb(255 250 240 / 0.96);
    border: 1px solid rgb(23 22 18 / 0.18);
    border-radius: 8px 26px 8px 26px;
    box-shadow: 0 24px 48px rgb(23 22 18 / 0.16);
    clip-path: none;
    transform: translateX(50%) rotate(-0.8deg);
  }

  #scene .scene-flow__machine-copy::before {
    display: none;
    content: none;
  }

  #scene .scene-flow__machine-copy .scene-flow__number {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
  }

  #spam.bridge-panel,
  #how.bridge-panel {
    min-height: 0;
    padding-block: 72px 80px;
  }

  #spam .bridge-panel__inner,
  #how .bridge-panel__inner {
    width: min(calc(100% - 28px), 520px);
  }

  #spam .panel-heading,
  #how .panel-heading {
    gap: 10px;
    margin-bottom: 42px;
  }

  #spam .panel-kicker,
  #how .panel-kicker {
    font-size: 0.8125rem;
    line-height: 1;
  }

  #spam .panel-heading h2,
  #how .panel-heading h2 {
    max-width: 13ch;
    font-size: clamp(2.45rem, calc(10.8vw * var(--a11y-scale, 1)), 3.45rem);
    line-height: 0.95;
  }

  #spam .panel-heading .sub,
  #how .panel-heading .sub {
    max-width: 52ch !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
  }

  #spam .spam-stamp {
    right: auto;
    bottom: -18px;
    left: -24px;
    display: block;
    width: 142px;
    opacity: 0.88;
  }

  #spam .spam-machine {
    position: relative;
    display: block;
    min-height: 565px;
    padding: 0;
    perspective: 1200px;
  }

  #spam .spam-machine::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -12%;
    left: -12%;
    display: block;
    border-top: 4px solid var(--cutout-ink);
    content: "";
    transform: rotate(4deg);
  }

  #spam .spam-call,
  #spam .spam-answer,
  #spam .spam-result,
  html.js-motion #spam.spam-panel:not(.is-visible) .spam-call,
  html.js-motion #spam.spam-panel:not(.is-visible) .spam-answer,
  html.js-motion #spam.spam-panel:not(.is-visible) .spam-result {
    position: absolute;
    z-index: 4;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 15px 18px;
  }

  #spam .spam-call,
  html.js-motion #spam.spam-panel:not(.is-visible) .spam-call {
    top: 2%;
    right: 0;
    bottom: auto;
    left: auto;
    width: min(88%, 340px);
    transform: translateZ(36px) rotate(1.8deg);
  }

  #spam .spam-answer,
  html.js-motion #spam.spam-panel:not(.is-visible) .spam-answer {
    top: 53%;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(94%, 360px);
    transform: translateZ(18px) rotate(-1.6deg);
  }

  #spam .spam-call p,
  #spam .spam-answer p {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.18;
  }

  #spam .filter-gate {
    position: absolute;
    z-index: 5;
    top: 30%;
    right: auto;
    bottom: auto;
    left: 49%;
    display: grid;
    width: 96px;
    height: auto;
    margin: 0;
    place-items: center;
    transform: translateX(-50%) rotate(-2deg);
  }

  #spam .spam-result,
  html.js-motion #spam.spam-panel:not(.is-visible) .spam-result {
    top: auto;
    right: 4%;
    bottom: 1%;
    left: auto;
    display: grid;
    width: auto;
    min-width: 210px;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    transform: translateZ(50px) rotate(1deg);
  }

  #spam .spam-result__seal {
    display: grid;
    width: 48px;
    aspect-ratio: 1;
    place-items: center;
    transform: scale(1);
  }

  #how .steps-route {
    display: grid;
    width: 100%;
    min-height: auto;
    margin-inline: 0;
    padding-block: 18px 10px;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  #how .steps-route::before {
    top: 32px;
    right: 50%;
    bottom: 32px;
    left: auto;
    display: block;
    width: auto;
    border: 0;
    border-right: 4px solid var(--cutout-ink);
    background: transparent;
    box-shadow: 5px 0 9px rgb(23 22 18 / 0.12);
    transform: none;
  }

  #how .step-node {
    position: relative;
    display: grid;
    width: min(100%, 330px);
    min-height: 180px;
    margin-inline: auto;
    padding: 76px 18px 18px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
    align-items: normal;
    align-content: start;
    gap: normal;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #how .step-node__number {
    position: absolute;
    top: 8px;
    right: 50%;
    width: 56px;
    height: 56px;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    border-width: 3px;
    background: var(--cutout-paper);
    box-shadow: 0 8px 0 rgb(23 22 18 / 0.12), 0 16px 24px rgb(23 22 18 / 0.13), inset 0 3px 0 rgb(255 255 255 / 0.7);
    font-size: 1.55rem;
    transform: translateX(50%);
  }

  #how .step-node:nth-child(2) .step-node__number {
    background: var(--yellow);
    transform: translateX(50%) rotate(2deg);
  }

  #how .step-node h3,
  #how .step-node p {
    position: relative;
    z-index: 1;
    grid-column: auto;
    grid-row: auto;
    padding-inline: 10px;
    text-align: center;
    background: var(--cutout-paper);
  }

  #how .step-node h3 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 0.98;
  }

  #how .step-node p {
    max-width: 29ch;
    margin: 10px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
  }
}

@media (max-width: 390px) {
  #spam .spam-call p,
  #spam .spam-answer p {
    font-size: 1.125rem;
  }
}