/* MWM Astra layer: build mwmastra-20260905-v1.
   Loaded last. Holds the reshaped story sections, the product preview montage
   and the type-scale caps from the 2026-09-05 review. Native CSS only. */

/* ---------------------------------------------------------------- type scale */

/* One shared cap for every long section headline: 48-62px desktop, 32-40px
   phone, with the same line height, so no section outgrows the hero. */
html .mwmastra .section-heading h2,
html .mwmastra .difference-section .section-heading h2,
html .mwmastra .details-section .section-heading h2,
html .mwmastra .preview-header h2,
html .mwmastra .chapter-problem .interlude-inner h2,
html .mwmastra .technical-mode-heading h2,
html .mwmastra .quiet-advantage-heading h3,
html .mwmastra .pricing-title-row h2 {
  font-size: clamp(48px, 4.4vw, 62px);
  line-height: 1.02;
}

/* Let headings use their actual container. The candidate classes also override
   inherited audience-mode measures and nowrap without changing type sizes. */
html .newlook.bettermotion.mwmastra :is(h2, h3) {
  max-width: none;
  white-space: normal;
  text-wrap: balance;
}

html .newlook.bettermotion.mwmastra :is(h2, h3) > span {
  display: inline;
}

.mwmastra .pricing-title-support > p:first-child {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.62;
}





.mwmastra .hero-outro-title {
  font-size: clamp(46px, 6vw, 92px);
}

.mwmastra .section-heading p:last-child,
.mwmastra .preview-lede,
.mwmastra .quiet-advantage-heading > p,
.mwmastra .quiet-advantage-footer > p,
.mwmastra .technical-future-note {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.62;
}

@media (max-width: 700px) {
  html .mwmastra .section-heading h2,
  html .mwmastra .difference-section .section-heading h2,
  html .mwmastra .details-section .section-heading h2,
  html .mwmastra .chapter-problem .interlude-inner h2,
  html .mwmastra .pricing-title-row h2,
  html .mwmastra .technical-mode-heading h2,
  html .mwmastra .quiet-advantage-heading h3,
  html .mwmastra .preview-header h2 {
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.06;
  }

  

  .mwmastra .hero-outro-title {
    font-size: clamp(34px, 10vw, 46px);
  }
}

/* Phone hero: allow natural wrapping so long taglines cannot overflow 320px. */
@media (max-width: 700px) {
  .mwmastra .hero h1.hero-tagline {
    width: 100%;
    max-width: 100%;
    font-size: clamp(38px, 10.2vw, 48px);
    line-height: 0.98;
  }

  .mwmastra .hero-tagline span,
  .mwmastra .hero-tagline strong {
    width: auto;
    white-space: normal;
    text-wrap: balance;
  }
}

/* -------------------------------------------------------------------- header */

@media (max-width: 1100px) {
  .mwmastra .header-cta-tail {
    display: none;
  }
}

.mwmastra .detail-header-slot {
  width: auto;
  min-width: 0;
}

.mwmastra .detail-compact,
html[data-detail-decision="pending"] .mwmastra .detail-compact,
html[data-detail-decision="complete"] .mwmastra .detail-compact {
  display: flex;
  visibility: visible;
  gap: 10px;
  align-items: center;
  width: auto;
  min-height: 40px;
  padding: 6px 12px;
  opacity: 1;
  pointer-events: auto;
}

.mwmastra .detail-compact-label {
  display: grid;
  text-align: left;
}

.mwmastra .detail-compact-label small {
  color: var(--quiet);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mwmastra .detail-compact-label strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 700px) {
  .mwmastra .detail-compact-label small {
    display: none;
  }

  .mwmastra .detail-compact {
    gap: 7px;
    padding: 6px 9px;
  }

  .mwmastra .detail-compact-line {
    width: 26px;
  }

  /* Nothing in the header may push a neighbour out of its column, and the
     three controls stay at the 44px minimum target height. */
  .mwmastra .site-header {
    column-gap: 6px;
  }

  .mwmastra .brand,
  .mwmastra .detail-header-slot,
  .mwmastra .header-cta {
    min-width: 0;
  }

  .mwmastra .brand-name {
    max-width: 12ch;
  }

  .mwmastra .detail-compact,
  html[data-detail-decision] .mwmastra .detail-compact,
  .mwmastra .header-cta {
    min-height: 44px;
  }
}

/* Narrow phones (320/390/414): the brand becomes the logo on its own so it can
   never overlap the detail picker. The brand link keeps its full accessible
   name from aria-label, and the header CTA keeps "Join the early list" as its
   accessible name on the short visible "Join". Enlarged text has room to
   grow because the wordmark, the longest fixed string, is gone. */
@media (max-width: 460px) {
  .mwmastra .site-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
  }

  .mwmastra .brand,
  .mwmastra .detail-header-slot,
  .mwmastra .header-cta {
    flex: 0 0 auto;
  }

  .mwmastra .detail-header-slot {
    position: static;
    margin-left: auto;
    max-width: 100%;
  }

  .mwmastra .detail-popover {
    right: 0;
    width: min(300px, calc(100vw - 28px));
  }

  .mwmastra .header-cta {
    margin-left: auto;
  }

  .mwmastra .brand-name {
    display: none;
  }

  .mwmastra .brand {
    gap: 0;
    padding: 5px 6px;
  }

  .mwmastra .brand-mark {
    width: 46px;
    height: 34px;
  }

  .mwmastra .brand-mark img {
    width: 46px;
  }

  .mwmastra .detail-compact {
    gap: 6px;
    padding: 6px 8px;
  }

  .mwmastra .detail-compact-label strong {
    overflow: visible;
    font-size: 12px;
    white-space: nowrap;
  }

  .mwmastra .header-cta {
    margin-right: 4px;
    padding: 8px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* ---------------------------------------------------------------------- hero */



.mwmastra .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(20px, 2.4vw, 30px);
}

.mwmastra .hero-watch-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.mwmastra .hero-watch-cue:hover,
.mwmastra .hero-watch-cue:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* The pinned landscape hero fades the intro copy out as the film arrives.
   Hiding it at that point removes the ghost headline fragments and stops the
   faded links from staying clickable. */
[data-hero-intro-state="faded"] .hero-copy-intro {
  visibility: hidden;
  pointer-events: none;
}

/* The full-viewport decorative stage must not cover the intro cue's tap target. */
.mwmastra .hero-depth-stage {
  pointer-events: none;
}

.mwmastra .hero-depth-stage .film-stage {
  pointer-events: auto;
}

.mwmastra [data-hero-intro-state="visible"] .film-stage {
  pointer-events: none;
}

/* Soften the rear and front artwork edges so the layered scene no longer reads
   as a clipped rectangular panel. */
.mwmastra .hero-depth-art-rear {
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 46%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 46%, transparent 82%);
}

.mwmastra .hero-depth-art-front {
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at 50% 46%, #000 40%, transparent 84%);
  mask-image: radial-gradient(ellipse 70% 66% at 50% 46%, #000 40%, transparent 84%);
}

/* Keep the foreground art off the player while a film is running. */
.mwmastra .hero-depth-stage:has(.film-stage.is-playing) .hero-depth-art-front {
  opacity: min(0.22, var(--hero-front-opacity));
}

/* ------------------------------------------------------------------- problem */

.mwmastra .chapter-portability-still {
  cursor: default;
  pointer-events: none;
}

.mwmastra .chapter-portability-still .chapter-gallery-slide {
  opacity: 1;
  transition: none;
}

/* Decorative chapter images share a fixed stack and fade without layout shifts. */
.mwmastra [data-chapter-gallery] {
  pointer-events: none;
}

.mwmastra [data-chapter-gallery] .chapter-gallery-slide {
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: none;
  transform: none;
}

.mwmastra [data-chapter-gallery] .chapter-gallery-slide.is-active {
  opacity: 1;
}

html[data-motion="off"] .mwmastra [data-chapter-gallery] .chapter-gallery-slide {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mwmastra [data-chapter-gallery] .chapter-gallery-slide {
    transition: none;
  }
}

.mwmastra .chapter-problem {
  min-height: clamp(560px, 74svh, 820px);
}

.mwmastra .chapter-problem .interlude-inner {
  min-height: clamp(560px, 74svh, 820px);
}



/* ------------------------------------------------------------ product preview */

.mwmastra .preview-section {
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 108px);
}

.mwmastra .preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.mwmastra .preview-header h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.mwmastra .preview-lede {
  max-width: 56ch;
  margin: 0;
  color: var(--muted);
}

.mwmastra .preview-stage {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: clamp(18px, 2vw, 28px);
  background:
    linear-gradient(160deg, rgba(47, 116, 255, 0.07), transparent 42%),
    rgba(8, 11, 16, 0.92);
  padding: clamp(16px, 2vw, 26px);
}

.mwmastra .preview-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

.mwmastra .preview-label {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mwmastra .preview-label > span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(240, 185, 44, 0.6);
}

.mwmastra .preview-label b {
  border: 1px solid rgba(240, 185, 44, 0.42);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mwmastra .preview-sublabel {
  margin: 0;
  color: var(--quiet);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Stable 16:9 box. The future walkthrough video replaces the contents of this
   element without changing the surrounding layout. */
.mwmastra .preview-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: #05070a;
}

.mwmastra .preview-media > video,
.mwmastra .preview-media > iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.mwmastra .preview-slides {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The shot wrapper exists so the phone crop can be clipped without touching the
   caption row underneath it. */
.mwmastra .preview-shot {
  display: block;
  min-width: 0;
  min-height: 0;
}

.mwmastra .preview-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.no-js .mwmastra .preview-shot img {
  height: auto;
}

.mwmastra .preview-full {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-self: start;
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mwmastra .preview-full:hover {
  color: var(--gold);
}

.mwmastra .preview-caption {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 16px 14px;
  background: linear-gradient(transparent, rgba(4, 6, 9, 0.86) 42%);
}

.mwmastra .preview-caption strong {
  color: var(--ink);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 680;
  letter-spacing: -0.02em;
}

.mwmastra .preview-caption span {
  color: rgba(214, 219, 227, 0.84);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.45;
}

/* With JavaScript the frames stack in the 16:9 box and one is shown at a time.
   Without JavaScript every frame stays in the document as a normal image. */
.js .mwmastra .preview-media {
  isolation: isolate;
}

.js .mwmastra .preview-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
}

.js .mwmastra .preview-slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.js .mwmastra .preview-shot {
  position: relative;
  overflow: hidden;
}

.js .mwmastra .preview-slide img {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.no-js .mwmastra .preview-media {
  aspect-ratio: auto;
  height: auto;
}

.no-js .mwmastra .preview-slide + .preview-slide {
  margin-top: 18px;
}

.mwmastra .preview-controls {
  display: grid;
  gap: 14px;
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: 0;
}

.mwmastra .preview-controls[hidden] {
  display: none;
}

.mwmastra .preview-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mwmastra .preview-step,
.mwmastra .preview-pause {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

.mwmastra .preview-step {
  width: 44px;
  font-size: 20px;
  line-height: 1;
}

.mwmastra .preview-pause {
  margin-left: auto;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 650;
}

.mwmastra [data-preview-pause][hidden] {
  display: none;
}

.mwmastra .preview-step:hover,
.mwmastra .preview-pause:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.09);
}

.mwmastra .preview-status {
  margin: 0;
  color: var(--quiet);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.mwmastra .preview-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.mwmastra .preview-thumbs button {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--quiet);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.mwmastra .preview-thumbs button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 7px;
}

.mwmastra .preview-thumbs button span {
  font-size: 12px;
  font-weight: 620;
  line-height: 1.3;
}

.mwmastra .preview-thumbs button[aria-pressed="true"] {
  border-color: rgba(240, 185, 44, 0.62);
  background: rgba(240, 185, 44, 0.08);
  color: var(--ink);
}

.mwmastra .preview-thumbs button:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--ink);
}



@media (max-width: 820px) {
  .mwmastra .preview-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mwmastra .preview-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .mwmastra .preview-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mwmastra .preview-pause {
    margin-left: 0;
    width: 100%;
  }
}

/* Phone crop. A whole 1440px workspace shrunk to 360px is unreadable, so the
   frame becomes taller and each capture is cropped and scaled toward the part
   of the screen its caption describes (--preview-crop / --preview-zoom, set per
   slide in the markup). Landscape and desktop widths keep the untouched
   contain-fit frame, and View full screen always shows the whole original. */
@media (max-width: 700px) {
  .js .mwmastra .preview-media {
    aspect-ratio: 4 / 5;
  }

  .js .mwmastra .preview-slide img {
    object-fit: cover;
    object-position: var(--preview-crop, 50% 50%);
    transform: scale(var(--preview-zoom, 1.25));
    transform-origin: var(--preview-crop, 50% 50%);
  }

  .mwmastra .preview-caption {
    padding: 10px 12px 12px;
  }
}

/* -------------------------------------------------------- preview lightbox */

.mwmastra .preview-lightbox {
  width: min(1180px, calc(100vw - 20px));
  max-height: calc(100svh - 20px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: #05070a;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.68);
  padding: 12px;
  color: var(--ink);
}

.mwmastra .preview-lightbox::backdrop {
  background: rgba(2, 4, 7, 0.86);
}

.mwmastra .preview-lightbox-bar {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mwmastra .preview-lightbox-bar p {
  margin: 0;
  color: var(--quiet);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.mwmastra .preview-lightbox-close {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0 18px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}

.mwmastra .preview-lightbox-close:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.09);
}

.mwmastra .preview-lightbox img {
  display: block;
  width: 100%;
  max-height: calc(100svh - 140px);
  object-fit: contain;
  border-radius: 8px;
}





@media (prefers-reduced-motion: reduce) {
  .js .mwmastra .preview-slide {
    transition: none;
  }
}

/* --------------------------------------------------------- how it works block */

















.mwmastra .quiet-controls {
  position: relative;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(22px, 3vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}

.mwmastra .quiet-controls p { margin: 0; color: var(--quiet); font-size: 14px; }

.mwmastra .quiet-controls button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(8, 12, 17, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.mwmastra .quiet-controls button[hidden] { display: none; }
.mwmastra .quiet-controls button:disabled { color: var(--quiet); cursor: default; }

.mwmastra .quiet-controls button:focus-visible,
.mwmastra .quiet-transcript summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.mwmastra .quiet-advantage-stage { min-height: 0; }

.mwmastra .quiet-noise-scene,
.mwmastra .quiet-calm-scene {
  /* Let both characters share the stage above the two panel backgrounds. */
  z-index: auto;
  min-height: 0;
  padding: clamp(22px, 2.5vw, 36px);
}

.mwmastra .quiet-noise-scene { display: flex; flex-direction: column; }

.mwmastra .quiet-scene-heading { position: relative; inset: auto; margin-bottom: 24px; text-align: left; }
.mwmastra .quiet-scene-heading span { font-size: 11px; line-height: 1.5; }
.mwmastra .quiet-scene-heading h4 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; text-wrap: balance; }

.mwmastra .quiet-funny-character {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  max-width: 90%;
  height: clamp(480px, 45vw, 600px);
  margin-top: auto;
  margin-left: auto;
}

.mwmastra .quiet-calm-scene {
  display: grid;
  overflow: visible;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0 16px;
  align-items: end;
}

.mwmastra .quiet-calm-scene > .quiet-scene-heading { grid-column: 1 / -1; align-self: start; }

.mwmastra .quiet-calm-character-wrap {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: clamp(400px, 40vw, 540px);
}

.mwmastra .quiet-calm-character {
  position: absolute;
  inset: auto 0 0 auto;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  transform: none;
}

.mwmastra .quiet-result-cycle {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 100%;
  min-width: 0;
}

.mwmastra .quiet-result-stack { height: 600px; }
.mwmastra .quiet-result-moment[data-quiet-slot="previous"] { transform: translate3d(0, calc(-50% - 320px), 0); }
.mwmastra .quiet-result-moment[data-quiet-slot="next"] { transform: translate3d(0, calc(-50% + 320px), 0); }
.mwmastra .quiet-result-moment[data-quiet-slot="later"] { transform: translate3d(0, calc(-50% + 640px), 0); }
.mwmastra .quiet-conversation-you { display: block; padding-left: 0; font-size: 16px; line-height: 1.5; }
.mwmastra .quiet-conversation-you small { display: block; margin-bottom: 6px; font-size: 10px; }
.mwmastra .quiet-conversation-mike small { font-size: 10px; }

.mwmastra .quiet-advantage.is-quiet-paused :is(.quiet-jargon, .quiet-result-moment) {
  animation-play-state: paused !important;
  transition: none;
}

.mwmastra .quiet-transcript {
  position: relative;
  z-index: 8;
  border-top: 1px solid var(--line-soft);
  padding: 20px clamp(22px, 3vw, 40px);
}

.mwmastra .quiet-transcript summary { min-height: 44px; padding: 10px 0; color: var(--ink); font-size: 16px; line-height: 1.5; cursor: pointer; }
.mwmastra .quiet-transcript ol { display: grid; gap: 22px; max-width: 72ch; margin: 24px 0 8px; padding-left: 24px; }
.mwmastra .quiet-transcript li { padding-left: 6px; }
.mwmastra .quiet-transcript p { margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.mwmastra .quiet-transcript strong { color: var(--ink); }

@media (min-width: 961px) {
  .mwmastra .quiet-funny-character { transform: translateX(clamp(20px, 2.5vw, 40px)); }
}

@media (max-width: 960px) {
  .mwmastra .quiet-advantage-stage { grid-template-columns: 1fr; }
  .mwmastra .quiet-noise-scene { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .mwmastra .quiet-funny-character { height: 360px; }
  .mwmastra .quiet-calm-scene {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 24px clamp(12px, 3vw, 28px);
    align-items: center;
  }
  .mwmastra .quiet-calm-scene > .quiet-scene-heading { margin-bottom: 0; }
  .mwmastra .quiet-result-cycle { grid-column: 2; grid-row: 2; }
  .mwmastra .quiet-result-stack { display: grid; height: auto; min-height: 280px; overflow: visible; mask-image: none; }
  .mwmastra .quiet-result-moment[data-quiet-slot] {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    align-self: center;
    visibility: hidden;
    opacity: 0;
    transform: none;
    filter: none;
    transition: opacity 300ms ease;
    will-change: auto;
  }
  .mwmastra .quiet-result-moment.is-active { visibility: visible; opacity: 1; }
  .mwmastra .quiet-calm-character-wrap { grid-column: 1; grid-row: 2; width: min(100%, 240px); height: auto; justify-self: center; }
  .mwmastra .quiet-calm-character { position: relative; inset: auto; width: 100%; max-width: 100%; height: auto; }
}



/* --------------------------------------------------------------- build routes */

.mwmastra .build-routes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 2vw, 24px);
  background: var(--line);
  overflow: hidden;
}

.mwmastra .build-routes article {
  display: grid;
  gap: 8px;
  align-content: start;
  background: rgba(8, 11, 16, 0.94);
  padding: clamp(20px, 2.4vw, 30px);
}

.mwmastra .build-routes span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.12em;
}

.mwmastra .build-routes strong {
  color: var(--ink);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 640;
  letter-spacing: -0.025em;
}

.mwmastra .build-routes small {
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.5;
}

.mwmastra .build-routes-note {
  max-width: 68ch;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.55;
}

.mwmastra .noscript-signup {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.mwmastra .noscript-signup a {
  color: var(--ink);
}







.mwmastra .build-characters {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 2vw, 24px);
}

.mwmastra .build-characters::after {
  display: none;
}

.mwmastra .build-characters .true-cost-character {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: clamp(24px, 3.5vw, 44px);
}

.mwmastra .build-characters .true-cost-character-answer {
  border-left: 1px solid var(--line);
}

.mwmastra .build-characters .true-cost-character-question {
  container: customer-dialogue / inline-size;
}

.mwmastra .build-characters .true-cost-speech {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
}

.mwmastra .build-characters .build-customer-dialogue {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.mwmastra .build-characters .true-cost-speech p {
  margin: 0;
  font-size: clamp(1.0625rem, calc(0.94rem + 0.8cqi), 1.3125rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.mwmastra .build-characters .build-speech-bubble {
  --speaker-accent: var(--blue);
  position: relative;
  min-width: 0;
  padding: clamp(16px, 3cqi, 24px);
  border: 1px solid color-mix(in srgb, var(--speaker-accent) 30%, var(--line));
  border-radius: 20px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--speaker-accent) 10%, var(--panel)), var(--panel));
  color: var(--ink);
}

.mwmastra .build-characters .build-speech-bubble::after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 34%;
  width: 10px;
  height: 23px;
  background:
    radial-gradient(circle at 50% 4px, currentColor 3px, transparent 3.5px),
    radial-gradient(circle at 50% 13px, currentColor 2px, transparent 2.5px),
    radial-gradient(circle at 50% 21px, currentColor 1px, transparent 1.5px);
  color: color-mix(in srgb, var(--speaker-accent) 75%, var(--muted));
  opacity: 0.8;
  pointer-events: none;
}

.mwmastra .build-characters .build-speech-bubble-first {
  width: 92%;
  justify-self: start;
  border-bottom-left-radius: 8px;
}

.mwmastra .build-characters .build-speech-bubble-first::after {
  left: 14%;
}

.mwmastra .build-characters .build-speech-bubble-reply {
  --speaker-accent: var(--gold);
  width: 78%;
  justify-self: end;
  border-bottom-right-radius: 8px;
}

.mwmastra .build-characters .build-speech-bubble-reply::after {
  left: auto;
  right: 30%;
}

.mwmastra .build-characters .build-speech-bubble-mike {
  --speaker-accent: var(--teal);
  width: 100%;
}

.mwmastra .build-characters .build-speech-bubble-mike::after {
  left: calc(50% - 5px);
}

.mwmastra .build-characters .build-speech-bubble-mike small {
  display: block;
  margin-bottom: 12px;
}

.mwmastra .build-characters .true-cost-speech .build-plan-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

.mwmastra .build-characters .true-cost-customer-pair {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}

.mwmastra .build-characters .true-cost-customer-pair img,
.mwmastra .build-characters .build-mike-symbol {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}

.mwmastra .build-characters .build-mike-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 12px;
  width: min(240px, 80%);
  margin: clamp(8px, 1.5vw, 24px) auto 0;
}

.mwmastra .build-characters .build-mike-brand figcaption {
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-align: center;
}

@container customer-dialogue (min-width: 480px) {
  .mwmastra .build-characters .build-customer-dialogue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: end;
  }

  .mwmastra .build-characters .build-speech-bubble-first,
  .mwmastra .build-characters .build-speech-bubble-reply {
    grid-row: 1;
    width: 100%;
  }

  .mwmastra .build-characters .build-speech-bubble-first {
    grid-column: 1;
  }

  .mwmastra .build-characters .build-speech-bubble-first::after {
    left: 60%;
  }

  .mwmastra .build-characters .build-speech-bubble-reply {
    grid-column: 2;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 8px;
  }

  .mwmastra .build-characters .build-speech-bubble-reply::after {
    top: calc(100% + 5px);
    bottom: auto;
    right: 60%;
    transform: none;
  }

  .mwmastra .build-characters .true-cost-customer-pair {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .mwmastra .build-characters {
    grid-template-columns: minmax(0, 1fr);
  }

  .mwmastra .build-characters .true-cost-character-answer {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

.mwmastra .technical-future-note {
  max-width: 74ch;
  margin: clamp(24px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  color: var(--muted);
}

@media (max-width: 960px) {
  .mwmastra .build-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .mwmastra .build-routes {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------- pricing */

.mwmastra .pricing-hold-option {
  align-items: center;
}

.mwmastra .pricing-hold-copy p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}

/* ------------------------------------------------------- focus and tap targets */

.mwmastra .preview-step:focus-visible,
.mwmastra .preview-pause:focus-visible,
.mwmastra .preview-thumbs button:focus-visible,
.mwmastra .preview-full:focus-visible,
.mwmastra .preview-lightbox-close:focus-visible,
.mwmastra .detail-compact:focus-visible,
.mwmastra .hero-watch-cue:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .mwmastra .preview-thumbs button {
    min-height: 44px;
  }
}

/* Lift the artwork, while keeping the reading area and outer edges dark. */
.mwmastra :is(.chapter-problem-media, .chapter-portability-media) {
  opacity: 1;
}

.mwmastra :is(.chapter-problem-media, .chapter-portability-media) img {
  filter: brightness(1.18) contrast(1.02) saturate(1.08);
}

.mwmastra .chapter-problem::before {
  background:
    linear-gradient(90deg, #050608 0%, rgba(5, 6, 8, 0.94) 24%, rgba(5, 6, 8, 0.42) 54%, transparent 80%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.2), transparent 48%, #050608 100%);
}

.mwmastra .chapter-portability::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(5, 6, 8, 0.08) 36%, rgba(5, 6, 8, 0.86) 65%, #050608 100%),
    linear-gradient(180deg, rgba(5, 6, 8, 0.14), transparent 52%, #050608 98%);
}

.mwmastra .quiet-jargon {
  color: rgba(231, 235, 244, 0.88);
}

.mwmastra .quiet-funny-character,
.mwmastra .quiet-calm-character {
  filter: drop-shadow(0 2px 2px rgba(5, 10, 18, 0.7)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.4));
}

/* Pause this field independently when the other half of the scene is visible. */
.js .mwmastra .quiet-advantage:not(.is-noise-in-view) .quiet-jargon {
  animation-play-state: paused !important;
}

@media (max-width: 960px) {
  .mwmastra .quiet-funny-character { height: clamp(380px, 70vw, 440px); }
}

@media (max-width: 760px) {
  .mwmastra :is(.chapter-problem-media, .chapter-portability-media) img {
    filter: brightness(1.32) contrast(1.025) saturate(1.1);
  }

  

  

  .mwmastra .chapter-problem::before {
    background: linear-gradient(180deg, #050608 0%, rgba(5, 6, 8, 0.94) 26%, rgba(5, 6, 8, 0.64) 43%, rgba(5, 6, 8, 0.08) 66%, rgba(5, 6, 8, 0.12) 84%, #050608 100%);
  }

  .mwmastra .chapter-portability-media { opacity: 1; }
  .mwmastra .chapter-portability-media img { object-position: 32% center; }

  .mwmastra .chapter-portability::after {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.28), rgba(5, 6, 8, 0.08) 26%, rgba(5, 6, 8, 0.68) 60%, #050608 96%),
      linear-gradient(90deg, transparent, rgba(5, 6, 8, 0.35));
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .js:not([data-motion="off"]) .mwmastra .quiet-advantage.is-in-view .quiet-jargon {
    left: 0;
    animation: quiet-jargon-mobile var(--duration) linear var(--delay) infinite both !important;
    animation-play-state: paused !important;
  }

  .js:not([data-motion="off"]) .mwmastra .quiet-advantage.is-in-view.is-noise-in-view:not(.is-quiet-paused) .quiet-jargon {
    animation-play-state: running !important;
  }
}

@media (max-width: 960px) {
  .mwmastra .quiet-jargon:nth-child(n + 9) { display: none; }
  .mwmastra .quiet-jargon { opacity: max(0.55, var(--alpha)); }
}

/* Keep the scroll-controlled outer stage stable while the inner player grows.
   Animate dimensions, not scale, so captions and controls retain their size. */
.mwmastra .film-stage.cinema-ready {
  aspect-ratio: 16 / 9;
}

.mwmastra .cinema-anchor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate3d(var(--cinema-x, 0px), var(--cinema-y, 0px), 0);
  transition: transform .5s ease-in-out;
}

.mwmastra .film-stage.cinema-ready .video-frame {
  flex: 0 0 auto;
  width: var(--cinema-width, 100%);
  pointer-events: auto;
  transition: width .5s ease-in-out;
}

.mwmastra .film-stage.cinema-expanded .cinema-anchor,
.mwmastra .film-stage.cinema-expanded .video-frame {
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.mwmastra .hero-depth-stage .film-stage.cinema-expanded {
  z-index: 5;
}

.mwmastra .film-stage.cinema-resizing :is(.cinema-anchor, .video-frame),
html[data-motion="off"] .mwmastra .film-stage.cinema-ready :is(.cinema-anchor, .video-frame) {
  transition: none;
}

.mwmastra .film-stage.cinema-ready:fullscreen .video-frame {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 177.7778vh);
  transform: none;
  translate: none;
  transition: none;
}

.mwmastra .film-stage.cinema-ready:fullscreen .cinema-anchor {
  transform: none;
  transition: none;
}

.mwmastra .hero-depth-stage .film-stage.cinema-ready:fullscreen {
  width: 100vw;
  height: 100vh;
  transform: none !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mwmastra .film-stage.cinema-ready :is(.cinema-anchor, .video-frame) { transition: none; }
}

.mwmastra .hero-depth-art-rear { translate: var(--idle-rear-x, 0px) var(--idle-rear-y, 0px); }
.mwmastra .hero-depth-art-front { translate: var(--idle-front-x, 0px) var(--idle-front-y, 0px); }

@keyframes quiet-jargon-mobile {
  0% {
    transform: translate3d(-105%, 0, 0) rotate(var(--tilt)) scale(var(--scale));
    opacity: 0;
  }
  16%, 72% { opacity: max(0.58, var(--alpha)); }
  100% {
    transform: translate3d(var(--jargon-travel, 55vw), var(--drift), 0) rotate(0deg) scale(0.82);
    opacity: 0;
  }
}