:root {
  color-scheme: dark;
  --background: #020405;
  --foreground: #f2f2ed;
}
* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; }
.site-shell { min-height: 100svh; background: var(--background); }
.design-reveal {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--background);
}
.sketch-field {
  position: absolute;
  inset: 8% 5% 8% 17%;
  z-index: -2;
  background-image: url('assets/rv_web_concept_03.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  filter: grayscale(1) invert(1) contrast(7) brightness(.74);
  mask-image: radial-gradient(ellipse 3.4% 4.1% at 41.5% 55%, transparent 58%, #000 100%);
  mix-blend-mode: screen;
  opacity: .88;
  transform: scale(1.15);
  transform-origin: 75% 50%;
  pointer-events: none;
}
.sketch-details {
  position: absolute;
  inset: 8% 5% 8% 17%;
  z-index: -2;
  background: url('assets/rv_web_concept_03.png') center center / 118% auto no-repeat;
  filter: grayscale(1) invert(1) contrast(2.5) brightness(1.15);
  mask-image:
    radial-gradient(ellipse 7% 3.4% at 90% 40.5%, #000 35%, transparent 100%),
    radial-gradient(ellipse 13% 4.8% at 68% 73%, #000 35%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .95;
  transform: scale(1.15);
  transform-origin: 75% 50%;
  pointer-events: none;
}
.sketch-lufs {
  position: absolute;
  inset: 8% 5% 8% 17%;
  z-index: -2;
  background: url('assets/rv_web_concept_03.png') center center / 118% auto no-repeat;
  filter: grayscale(1) invert(1) contrast(2.5) brightness(1.15);
  mask-image: radial-gradient(ellipse 5.2% 2.6% at 90% 40.5%, #000 30%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .72;
  transform: scale(1.15);
  transform-origin: 75% 50%;
  pointer-events: none;
}
.sketch-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #020405 0%, #020405 18%, rgba(2,4,5,.72) 33%, transparent 56%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  width: min(47vw, 760px);
  margin-left: clamp(32px, 6.2vw, 120px);
  padding: 7rem 0;
}
.chapter-label {
  margin: 0 0 clamp(26px, 4.5vh, 52px);
  color: #a4adb0;
  font-size: clamp(.78rem, .9vw, .95rem);
  font-weight: 600;
  letter-spacing: .23em;
}
h1 {
  margin: 0;
  font-size: clamp(3.7rem, 7.25vw, 8.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .95;
  white-space: nowrap;
}
.product-definition {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
}
.definition-break { display: none; }
.chapter-index {
  position: absolute;
  right: clamp(32px, 5.7vw, 110px);
  bottom: clamp(28px, 5.8vh, 56px);
  margin: 0;
  color: #8c9698;
  font-size: .82rem;
  letter-spacing: .18em;
}
.chapter-index span { color: #536064; margin: 0 .45rem; }
.analog-reveal {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: 112svh;
  overflow: hidden;
  background: var(--background);
}
.analog-rta,
.analog-vu {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: contrast(1.5);
  mix-blend-mode: screen;
  pointer-events: none;
}
.analog-rta {
  top: 11%;
  right: 5%;
  width: min(49vw, 880px);
  aspect-ratio: 1030 / 627;
  background-image: url('assets/web_02_rta_origin.png');
  mask-image: radial-gradient(ellipse 78% 75% at 58% 42%, #000 47%, transparent 100%);
}
.analog-vu {
  top: 45%;
  right: -3%;
  width: min(62vw, 1120px);
  aspect-ratio: 1022 / 621;
  background-image: url('assets/web_02_vu_origin.png');
  mask-image: radial-gradient(ellipse 78% 78% at 46% 36%, #000 49%, transparent 100%);
}
.analog-content {
  position: relative;
  width: min(47vw, 760px);
  margin-left: clamp(32px, 6.2vw, 120px);
  padding: 7rem 0;
}
.analog-content h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6.35vw, 7.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .97;
  white-space: nowrap;
}
.analog-subtitle {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
}
.digital-reveal {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: 112svh;
  overflow: hidden;
  background: var(--background);
}
.digital-info,
.digital-transport {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: contrast(1.45);
  mix-blend-mode: screen;
  pointer-events: none;
}
.digital-info {
  z-index: -2;
  top: 48%;
  right: 2%;
  width: min(55vw, 1000px);
  aspect-ratio: 1023 / 621;
  background-image: url('assets/web_03_digi_origin.png');
  mask-image: radial-gradient(ellipse 81% 83% at 51% 40%, #000 53%, transparent 100%);
}
.digital-transport {
  z-index: -1;
  top: 7%;
  right: 6%;
  width: min(17vw, 305px);
  aspect-ratio: 358 / 680;
  background-image: url('assets/web_03_transp_origin.png');
  mask-image: radial-gradient(ellipse 82% 80% at 53% 43%, #000 51%, transparent 100%);
}
.digital-content {
  position: relative;
  width: min(47vw, 760px);
  margin-left: clamp(32px, 6.2vw, 120px);
  padding: 7rem 0;
}
.digital-content h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6.35vw, 7.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .97;
  white-space: nowrap;
}
.digital-subtitle {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
}
.measurement-reveal { background: var(--background); }
.measurement-stage {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: 110svh;
  overflow: hidden;
}
.measurement-panel,
.measurement-controls {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: contrast(1.45);
  mix-blend-mode: screen;
  pointer-events: none;
}
.measurement-panel {
  top: 15%;
  right: 2%;
  width: min(55vw, 1000px);
  aspect-ratio: 1034 / 631;
  background-image: url('assets/web_04_lufs_origin.png');
  mask-image: radial-gradient(ellipse 85% 87% at 51% 44%, #000 55%, transparent 100%);
}
.measurement-controls {
  top: 59%;
  right: 9%;
  width: min(18vw, 320px);
  aspect-ratio: 360 / 615;
  background-image: url('assets/web_04_vol_origin.png');
  mask-image: radial-gradient(ellipse 65% 72% at 50% 38%, #000 42%, transparent 100%);
}
.measurement-content {
  position: relative;
  width: min(47vw, 760px);
  margin-left: clamp(32px, 6.2vw, 120px);
  padding: 7rem 0;
}
.measurement-content h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6.35vw, 7.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .97;
  white-space: nowrap;
}
.measurement-subtitle {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
}
.measurement-breath { height: 40svh; }
.view-continuity { height: 324svh; background: var(--background); }
.default-reveal {
  position: sticky;
  top: -12svh;
  isolation: isolate;
  height: 112svh;
  min-height: 112svh;
  overflow: hidden;
  background: var(--background);
}
.default-content,
.pro-content {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: clamp(32px, 6.2vw, 120px);
  width: min(34vw, 570px);
  transform: translateY(-50%) translateY(22px);
  opacity: 0;
  transition: opacity .75s ease .1s, transform .75s ease .1s;
}
.pro-content {
  transform: translateY(-50%);
  transition: opacity .28s ease;
  pointer-events: none;
}
.default-content h2,
.pro-content h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6.35vw, 7.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .97;
  white-space: nowrap;
}
.default-subtitle {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
  white-space: nowrap;
}
.product-monitor {
  position: absolute;
  top: 15svh;
  right: 0;
  width: min(64vw, 1180px);
  aspect-ratio: 1536 / 1024;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}
.default-reveal.is-visible .product-monitor { opacity: 1; transform: translateY(0); }
.default-reveal.is-visible .default-content { opacity: 1; transform: translateY(-50%); }
.default-reveal.has-switched .default-content { transition: opacity .28s ease; }
.default-reveal.is-visible.pro-active .default-content { opacity: 0; transition: opacity .28s ease; pointer-events: none; }
.default-reveal.pro-active .pro-content { opacity: 1; }
.monitor-screen {
  position: absolute;
  z-index: 1;
  top: 5.96%;
  left: 8.92%;
  width: 82.16%;
  height: 66.6%;
  overflow: hidden;
}
.monitor-screen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.monitor-screen .default-screen-image,
.monitor-screen .pro-screen-image { transition: opacity .28s ease; }
.monitor-screen .pro-screen-image { opacity: 0; object-fit: cover; object-position: center top; }
.default-reveal.pro-active .default-screen-image { opacity: 0; }
.default-reveal.pro-active .pro-screen-image { opacity: 1; }
.monitor-shell {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.default-reveal > .chapter-index { z-index: 2; }
.default-index, .pro-index { transition: opacity .28s ease; }
.pro-index { opacity: 0; }
.default-reveal.pro-active .default-index { opacity: 0; }
.default-reveal.pro-active .pro-index { opacity: 1; }
.loopback-section { background: var(--background); }
.loopback-breath { height: 26svh; }
.loopback-continuity { height: 324svh; }
.loopback-stage {
  position: sticky;
  top: -12svh;
  isolation: isolate;
  height: 112svh;
  min-height: 112svh;
  overflow: hidden;
  background: var(--background);
}
.loopback-content {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: clamp(32px, 6.2vw, 120px);
  width: min(34vw, 570px);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .75s ease .1s;
}
.loopback-content h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6.35vw, 7.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .97;
  white-space: nowrap;
}
.loopback-subtitle {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
  white-space: nowrap;
}
.loopback-context {
  margin: clamp(26px, 4vh, 40px) 0 0;
  color: #f2f2ed;
  font-size: clamp(1.4rem, 2.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.22;
}
.loopback-stage.is-visible .loopback-content,
.loopback-stage.is-visible .product-monitor { opacity: 1; }
.loopback-stage .product-monitor { transform: none; transition: opacity .8s ease; }
.loopback-stage .monitor-screen .loopback-pro-image { opacity: 0; transition: opacity .28s ease; }
.loopback-stage.pro-active .monitor-screen .loopback-pro-image { opacity: 1; }
.loopback-stage > .chapter-index { z-index: 2; }
.loopback-exit { height: 30svh; }
.mini-desk-sequence { background: var(--background); }
.mini-desk-reveal {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--background);
}
.mini-desk-content {
  position: absolute;
  z-index: 1;
  top: 42%;
  left: clamp(32px, 6.2vw, 120px);
  width: min(34vw, 570px);
  opacity: 0;
  transform: translateY(calc(-50% + 18px));
  transition: opacity .75s ease, transform .75s ease;
}
.mini-desk-content h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6.35vw, 7.8rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .97;
  white-space: nowrap;
}
.mini-desk-subtitle {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .115em;
  line-height: 1.65;
  white-space: nowrap;
}
.mini-desk-object {
  position: absolute;
  top: 33%;
  right: 6vw;
  display: block;
  width: 52vw;
  height: auto;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s ease;
}
.mini-desk-reveal.is-visible .mini-desk-content { opacity: 1; transform: translateY(-50%); }
.mini-desk-reveal.is-visible .mini-desk-object { opacity: 1; transform: translateY(0); }
.mini-desk-exit { height: 30svh; }
.final-actions {
  min-height: 100svh;
  padding: clamp(105px, 14svh, 170px) clamp(32px, 6.2vw, 120px) 38px;
  background: var(--background);
}
.final-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(80px, 9vw, 170px);
  max-width: 1540px;
  margin: 0 auto;
}
.final-try h2 {
  margin: 0;
  font-size: clamp(3.3rem, 4.55vw, 6rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .98;
  white-space: nowrap;
}
.final-platform {
  margin: clamp(24px, 4vh, 42px) 0 0;
  color: #c2c8c9;
  font-size: clamp(1rem, 1.26vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
}
.final-trial {
  margin: clamp(40px, 6vh, 60px) 0 0;
  color: #e3e7e4;
  font-size: clamp(1.1rem, 1.45vw, 1.5rem);
  line-height: 1.4;
}
.final-cta-group { display: flex; flex-direction: column; gap: 12px; width: min(100%, 380px); margin-top: 26px; }
.final-cta-group button {
  min-height: 62px;
  padding: 14px 20px;
  font: 700 .95rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .075em;
  cursor: not-allowed;
}
.final-try-button { border: 1px solid #e7bd56; background: #e7bd56; color: #10110e; cursor: pointer; }
.final-buy-button { border: 1px solid #697174; background: transparent; color: #d5dad9; }
.final-release-note { margin: 15px 0 0; color: #879093; font-size: .81rem; letter-spacing: .02em; }
.final-support-label {
  margin: 0 0 clamp(24px, 4vh, 42px);
  color: #a4adb0;
  font-size: clamp(.78rem, .9vw, .95rem);
  font-weight: 600;
  letter-spacing: .23em;
}
.final-support h2 {
  margin: 0;
  font-size: clamp(2.75rem, 4vw, 5.3rem);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: 1.02;
}
.final-support h2 span { color: #e7bd56; }
.final-support-intro { margin: 16px 0 32px; color: #c2c8c9; font-size: clamp(.95rem, 1.16vw, 1.14rem); line-height: 1.5; }
.final-support-list { display: flex; flex-direction: column; }
.final-support-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 17px;
  min-height: 76px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: inherit;
  text-decoration: none;
}
.final-support-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #111715; color: #e7bd56; }
.final-support-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.final-support-text strong { font-size: .99rem; font-weight: 700; }
.final-support-text > span { color: #aab3b4; font-size: .86rem; line-height: 1.35; }
.final-support-arrow { color: #ab8b40; }
.final-support-link:hover .final-support-text strong,
.final-support-link:focus-visible .final-support-text strong { color: #e7bd56; }
.final-support-link:focus-visible, .final-contact-address:focus-visible { outline: 2px solid #e7bd56; outline-offset: 5px; }
.final-contact-address { display: inline-block; margin-top: 20px; color: #c2c8c9; font-size: .9rem; text-underline-offset: 4px; }
.final-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 32px;
  max-width: 1540px;
  margin: clamp(100px, 13svh, 150px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.13);
  color: #929b9e;
  font-size: .82rem;
  letter-spacing: .035em;
}
.final-footer p { margin: 0; }
.final-publisher { color: #e3e7e4; font-size: .92rem; font-weight: 600; }
.final-publisher span { margin-left: .3em; color: #929b9e; font-size: .83rem; font-weight: 400; }
.final-legal { display: flex; gap: 24px; }
.final-copyright { grid-column: 1; }
.final-footer .final-index { position: static; grid-column: 2; grid-row: 2; justify-self: end; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
  .product-monitor, .default-content, .pro-content,
  .default-index, .pro-index,
  .monitor-screen .default-screen-image, .monitor-screen .pro-screen-image { transition-duration: .01ms; }
  .loopback-content, .loopback-stage .product-monitor,
  .loopback-stage .monitor-screen .loopback-pro-image { transition-duration: .01ms; }
  .mini-desk-content, .mini-desk-object { transition-duration: .01ms; }
}
@media (max-width: 900px) {
  .design-reveal { align-items: flex-start; }
  .sketch-field, .sketch-details, .sketch-lufs {
    inset: 38% 7% 9% 7%;
    background-size: contain;
    background-position: center center;
    transform-origin: center center;
  }
  .sketch-field { opacity: .76; }
  .sketch-vignette {
    background: linear-gradient(180deg, #020405 0%, #020405 22%, rgba(2,4,5,.72) 42%, transparent 65%);
  }
  .hero-content { width: calc(100% - 64px); margin: 0 32px; padding-top: clamp(78px, 12svh, 130px); }
  h1 { font-size: clamp(3.35rem, 12vw, 7rem); }
  .product-definition { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .chapter-index { right: 32px; bottom: 30px; }
  .analog-reveal { min-height: 105svh; align-items: flex-start; }
  .analog-content { width: calc(100% - 64px); margin: 0 32px; padding-top: clamp(78px, 12svh, 130px); }
  .analog-content h2 { font-size: clamp(3.15rem, 9.5vw, 6.4rem); }
  .analog-subtitle { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .analog-rta { top: 36%; right: 4%; width: 74vw; }
  .analog-vu { top: 59%; right: -10%; width: 95vw; }
  .digital-reveal { min-height: 105svh; align-items: flex-start; }
  .digital-content { width: calc(100% - 64px); margin: 0 32px; padding-top: clamp(78px, 12svh, 130px); }
  .digital-content h2 { font-size: clamp(3.15rem, 9.5vw, 6.4rem); }
  .digital-subtitle { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .digital-transport { top: 36%; right: 6%; width: 26vw; }
  .digital-info { top: 61%; right: -5%; width: 96vw; }
  .measurement-stage { min-height: 105svh; align-items: flex-start; }
  .measurement-content { width: calc(100% - 64px); margin: 0 32px; padding-top: clamp(78px, 12svh, 130px); }
  .measurement-content h2 { font-size: clamp(3.15rem, 9.5vw, 6.4rem); }
  .measurement-subtitle { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .measurement-panel { top: 37%; right: -5%; width: 96vw; }
  .measurement-controls { top: 68%; right: 9%; width: 27vw; }
  .default-reveal { height: 105svh; min-height: 105svh; }
  .view-continuity { height: 315svh; }
  .default-content,
  .pro-content {
    top: 10svh;
    left: 32px;
    width: calc(100% - 64px);
    transform: translateY(22px);
  }
  .default-content h2, .pro-content h2 { font-size: clamp(3.15rem, 9.5vw, 6.4rem); }
  .default-subtitle { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .default-reveal.is-visible .default-content { transform: translateY(0); }
  .pro-content { transform: translateY(0); }
  .product-monitor { top: 39svh; right: 3vw; width: 94vw; }
  .loopback-continuity { height: 315svh; }
  .loopback-stage { height: 105svh; min-height: 105svh; }
  .loopback-content { top: 10svh; left: 32px; width: calc(100% - 64px); transform: none; }
  .loopback-content h2 { font-size: clamp(3.15rem, 9.5vw, 6.4rem); }
  .loopback-subtitle { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .mini-desk-reveal { min-height: 105svh; }
  .mini-desk-content { top: 10svh; left: 32px; width: calc(100% - 64px); transform: translateY(18px); }
  .mini-desk-content h2 { font-size: clamp(3.15rem, 9.5vw, 6.4rem); }
  .mini-desk-subtitle { font-size: clamp(.9rem, 2.4vw, 1.2rem); }
  .mini-desk-object { top: 43%; right: 6vw; width: 82vw; }
  .mini-desk-reveal.is-visible .mini-desk-content { transform: translateY(0); }
  .final-columns { column-gap: 6vw; }
  .final-try h2 { font-size: clamp(2.8rem, 5.1vw, 4.5rem); }
}
@media (max-width: 560px) {
  .sketch-field, .sketch-details, .sketch-lufs {
    inset: 40% 5% 10% 5%;
    /* Mobile portrait: crop only the source asset's empty left canvas so the
       actual blueprint collage fills the safe frame and sits visually left. */
    background-size: 135% auto;
    background-position: right center;
  }
  .sketch-field { opacity: .78; }
  .hero-content { width: calc(100% - 44px); margin: 0 22px; padding-top: 13svh; }
  .chapter-label { margin-bottom: 26px; font-size: .78rem; }
  h1 { font-size: clamp(2.8rem, 13vw, 4.8rem); letter-spacing: -.075em; }
  .product-definition { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; line-height: 1.7; }
  .product-definition span { display: none; }
  .definition-break { display: block; }
  .chapter-index { right: 23px; bottom: 22px; }
  .analog-reveal { min-height: max(780px, 108svh); }
  .analog-content { width: calc(100% - 44px); margin: 0 22px; padding-top: 13svh; }
  .analog-content h2 { font-size: clamp(2.7rem, 12vw, 4.8rem); }
  .analog-subtitle { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; }
  .analog-rta { top: 39%; right: -9%; width: 112vw; }
  .analog-vu { top: 64%; right: -28%; width: 142vw; }
  .digital-reveal { min-height: max(800px, 108svh); }
  .digital-content { width: calc(100% - 44px); margin: 0 22px; padding-top: 13svh; }
  .digital-content h2 { font-size: clamp(2.7rem, 12vw, 4.8rem); }
  .digital-subtitle { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; }
  .digital-transport { top: 34%; right: 8%; width: 38vw; }
  .digital-info { top: 66%; right: -18%; width: 132vw; }
  .measurement-stage { min-height: max(800px, 108svh); }
  .measurement-content { width: calc(100% - 44px); margin: 0 22px; padding-top: 13svh; }
  .measurement-content h2 { font-size: clamp(2.7rem, 12vw, 4.8rem); }
  .measurement-subtitle { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; }
  .measurement-panel { top: 40%; right: -21%; width: 132vw; }
  .measurement-controls { top: 69%; right: 11%; width: 37vw; }
  .measurement-breath { height: 38svh; }
  .default-reveal { height: max(850px, 108svh); min-height: max(850px, 108svh); }
  .view-continuity { height: max(2550px, 324svh); }
  .default-content, .pro-content { top: 13svh; left: 22px; width: calc(100% - 44px); }
  .default-content h2, .pro-content h2 { font-size: clamp(2.7rem, 12vw, 4.8rem); }
  .default-subtitle { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; white-space: normal; }
  .product-monitor { top: 41%; right: 0; width: 100vw; }
  .loopback-continuity { height: max(2550px, 324svh); }
  .loopback-stage { height: max(850px, 108svh); min-height: max(850px, 108svh); }
  .loopback-content { top: 13svh; left: 22px; width: calc(100% - 44px); }
  .loopback-content h2 { font-size: clamp(2.7rem, 12vw, 4.8rem); }
  .loopback-subtitle { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; white-space: normal; }
  .loopback-context { margin-top: 24px; font-size: 1.2rem; }
  .mini-desk-reveal { min-height: max(800px, 108svh); }
  .mini-desk-content { top: 13svh; left: 22px; width: calc(100% - 44px); }
  .mini-desk-content h2 { font-size: clamp(2.7rem, 12vw, 4.8rem); }
  .mini-desk-subtitle { margin-top: 20px; font-size: .88rem; letter-spacing: .075em; }
  .mini-desk-object { top: 48%; right: 3vw; width: 94vw; }
  .final-actions { padding: 90px 22px 28px; }
  .final-columns { grid-template-columns: 1fr; gap: 110px; }
  .final-try h2 { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .final-platform { font-size: .88rem; letter-spacing: .075em; }
  .final-trial { margin-top: 36px; }
  .final-cta-group { width: 100%; }
  .final-support h2 { font-size: clamp(2.7rem, 11vw, 4rem); }
  .final-support-intro { font-size: .95rem; }
  .final-support-item { gap: 12px; }
  .final-footer { grid-template-columns: 1fr; gap: 17px; margin-top: 95px; }
  .final-copyright, .final-footer .final-index { grid-column: 1; grid-row: auto; justify-self: start; }
}

.final-support-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.final-support-arrow { display: block; font-size: 2rem; font-weight: 300; line-height: 1; text-align: center; }

/* SECTION 01 mobile portrait safe-frame refinement — desktop/landscape untouched */
.mobile-blueprint { display: none; }

@media (max-width: 560px) and (orientation: portrait) {
  .design-reveal {
    display: block;
    min-height: 100svh;
    overflow: hidden;
  }

  /* Desktop blueprint layers remain LOCKED; portrait uses the dedicated cropped asset. */
  .design-reveal > .sketch-field,
  .design-reveal > .sketch-details,
  .design-reveal > .sketch-lufs,
  .design-reveal > .sketch-vignette {
    display: none;
  }

  .hero-content {
    width: calc(100% - 48px);
    margin: 0 24px;
    padding: 13svh 0 0;
  }

  /* Safe-frame maximum: copy first, then the blueprint centered at full usable width. */
  .mobile-blueprint {
    position: relative;
    display: block;
    width: calc(100% - 48px);
    max-width: none;
    aspect-ratio: 1234 / 1152;
    margin: 42px auto 0;
    background: url('assets/rv_web_concept_03_mobile.png') center center / contain no-repeat;
    pointer-events: none;
  }

  /* Dedicated mobile asset already contains the approved black/white treatment. */
  .mobile-blueprint-field,
  .mobile-blueprint-details,
  .mobile-blueprint-lufs {
    display: none;
  }

  .design-reveal .chapter-index {
    right: 24px;
    bottom: 22px;
  }
}

/* SECTION 02 mobile portrait fit — copy/layout locked; only VU/RTA visual size constrained to safe frame */
@media (max-width: 560px) and (orientation: portrait) {
  .analog-rta,
  .analog-vu {
    left: 24px;
    right: auto;
    width: calc(100% - 48px);
  }
}

/* Mobile portrait refinement — 01~03 use the same #020405 site background.
   Remove the temporary inset-shadow fade. 02/03 keep their approved desktop-style
   radial masks; 01 uses screen blend plus only a very gentle edge dissolve. */
@media (max-width: 560px) and (orientation: portrait) {
  .mobile-blueprint,
  .analog-rta,
  .analog-vu,
  .digital-info,
  .digital-transport {
    box-shadow: none;
  }

  .mobile-blueprint {
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(
      ellipse 66% 72% at 50% 50%,
      #000 0%,
      #000 64%,
      rgba(0,0,0,.96) 76%,
      rgba(0,0,0,.78) 90%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 66% 72% at 50% 50%,
      #000 0%,
      #000 64%,
      rgba(0,0,0,.96) 76%,
      rgba(0,0,0,.78) 90%,
      transparent 100%
    );
  }

  .digital-transport {
    top: 38%;
    right: 24px;
    left: auto;
    width: min(35vw, 138px);
  }

  .digital-info {
    top: 58%;
    left: 24px;
    right: auto;
    width: calc(100% - 48px);
  }
}

/* SECTION 04 mobile portrait fit — copy/layout locked; only measurement visuals constrained to safe frame */
@media (max-width: 560px) and (orientation: portrait) {
  .measurement-panel {
    left: 24px;
    right: auto;
    width: calc(100% - 48px);
  }

  .measurement-controls {
    left: auto;
    right: 24px;
    width: min(37vw, 148px);
  }
}

/* SECTION 04 mobile portrait — keep visuals/copy locked; move only section index clear of VU CAL/VOL */
@media (max-width: 560px) and (orientation: portrait) {
  .measurement-stage > .chapter-index {
    right: 10px;
    bottom: 2px;
  }
}


/* SECTION 04 mobile portrait v3 — collision fix:
   restore the common page-index position and move only VU CAL/VOL upward. */
@media (max-width: 560px) and (orientation: portrait) {
  .measurement-controls {
    top: 62%;
  }

  .measurement-stage > .chapter-index {
    right: 23px;
    bottom: 22px;
  }
}

/* Mobile portrait v4 — requested micro-adjustments only
   03: raise the vertical transport so it sits just under the DIRECT CONTROL copy,
   clearing the digital-info file-format row.
   04: raise VU CAL / VOL so it tucks directly under the LUFS / TIME panel. */
@media (max-width: 560px) and (orientation: portrait) {
  .digital-transport {
    top: 30%;
  }

  .measurement-controls {
    top: 54%;
  }
}

/* Mobile portrait v5 — 04 measurement-controls fine-tune
   User wants VU CAL / VOL to start below the TIME numeric readout,
   not overlapping the TIME label. */
@media (max-width: 560px) and (orientation: portrait) {
  .measurement-controls {
    top: 58%;
  }
}

/* Mobile portrait v6 — 04 only
   1) lower VU CAL / VOL slightly more so it starts below the TIME numeric readout,
   2) soften the measurement-panel edge dissolve so the peak-meter top and waveform stay brighter. */
@media (max-width: 560px) and (orientation: portrait) {
  .measurement-controls {
    top: 61%;
  }

  .measurement-panel {
    -webkit-mask-image: radial-gradient(
      ellipse 92% 92% at 50% 50%,
      #000 0%,
      #000 68%,
      rgba(0,0,0,.94) 82%,
      rgba(0,0,0,.72) 92%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 92% 92% at 50% 50%,
      #000 0%,
      #000 68%,
      rgba(0,0,0,.94) 82%,
      rgba(0,0,0,.72) 92%,
      transparent 100%
    );
  }
}

/* Mobile portrait v7 — 04 VU CAL / VOL top-edge blend only.
   Keep position and existing mask; soften just the top cut line with a short black dissolve. */
@media (max-width: 560px) and (orientation: portrait) {
  .measurement-controls::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 15%;
    background: linear-gradient(
      to bottom,
      #000 0%,
      rgba(0, 0, 0, .86) 28%,
      rgba(0, 0, 0, .38) 68%,
      transparent 100%
    );
    pointer-events: none;
  }
}


/* Mobile portrait — SECTION 04 -> 05 rhythm + DEFAULT -> PRO screen crossfade
   Desktop and all previously approved section composition remain untouched. */
@media (max-width: 560px) and (orientation: portrait) {
  /* Remove the extra 04->05 breathing gap so this handoff follows the normal section rhythm. */
  .measurement-breath {
    height: 0;
  }

  /* Keep the monitor shell fixed; fade only the display content. */
  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image {
    transition: opacity .62s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity;
  }
}


/* Mobile portrait v2 — normalize SECTION 05 page length to SECTION 04.
   SECTION 04 = max(800px, 108svh)
   SECTION 05 sticky stage now uses the exact same height.
   The 05/06 continuity wrapper remains exactly 3x that stage length. */
@media (max-width: 560px) and (orientation: portrait) {
  .default-reveal {
    height: max(800px, 108svh);
    min-height: max(800px, 108svh);
  }

  .view-continuity {
    height: max(2400px, 324svh);
  }
}


/* Mobile portrait v3 — 05/06 is one fixed monitor scene, not two full-page scrolls.
   Stage itself stays 108svh; the continuity wrapper is shortened to 138svh,
   leaving ~30svh of scroll travel for the view transition. */
@media (max-width: 560px) and (orientation: portrait) {
  .view-continuity {
    height: max(1020px, 138svh);
  }

  /* On mobile the crossfade is driven directly by scroll progress in JS. */
  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image,
  .default-reveal .default-content,
  .default-reveal .pro-content,
  .default-reveal .default-index,
  .default-reveal .pro-index {
    transition: none !important;
  }
}


/* Mobile portrait v4
   05→06: slower, more legible crossfade without requiring a full-page scroll.
   02 RTA: restore visibility; keep only a shallow edge dissolve. */
@media (max-width: 560px) and (orientation: portrait) {
  .view-continuity {
    height: max(1180px, 160svh);
  }

  .analog-rta {
    opacity: 1;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.78) 92%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.78) 92%,
      transparent 100%
    );
  }
}


/* Mobile portrait v5 — 04→05→06 rhythm
   1) SECTION 05 first settles as a full viewport scene.
   2) After it is fully pinned, the next scroll begins DEFAULT→PRO crossfade.
   3) Monitor shell remains fixed; only content changes. */
@media (max-width: 560px) and (orientation: portrait) {
  .default-reveal {
    top: 0;
    height: 100svh;
    min-height: 100svh;
  }

  /* 100svh visible stage + ~55svh of transition travel. */
  .view-continuity {
    height: max(1160px, 155svh);
  }
}


/* Mobile portrait v7 — 05/06 spacing refinement only
   - Keep SECTION 05 as a full 100svh scene.
   - Give the transition a fixed ~360px scroll travel instead of a long extra page.
   - Move the monitor lower so copy and image have more breathing room. */
@media (max-width: 560px) and (orientation: portrait) {
  .view-continuity {
    height: calc(100svh + 360px);
  }

  .default-reveal .product-monitor {
    top: 46%;
  }
}


/* Mobile portrait v9 — exact 05→06 travel alignment
   Approved crossfade: start 150px + distance 220px = 370px.
   Add 10px safety so the fade can complete cleanly before the sticky sequence ends. */
@media (max-width: 560px) and (orientation: portrait) {
  .view-continuity {
    height: calc(100svh + 380px);
  }
}


/* Mobile portrait v10 — normalize 06 → 07 page spacing.
   Previous mobile 07 had 26svh extra loopback breathing space before the stage.
   Remove that extra gap so 07 starts with the same rhythm as 04 → 05. */
@media (max-width: 560px) and (orientation: portrait) {
  .loopback-breath {
    height: 0;
  }
}


/* SECTION 07 mobile portrait refinement
   - Keep desktop copy untouched.
   - Force clean 3-line context on mobile.
   - Match LOOPBACK copy→monitor spacing to SECTION 06. */
.loopback-context-mobile { display: none; }

@media (max-width: 560px) and (orientation: portrait) {
  .loopback-context-desktop { display: none; }
  .loopback-context-mobile { display: inline; }

  /* SECTION 06 monitor top is 46%; use the same value for SECTION 07. */
  .loopback-stage .product-monitor {
    top: 46%;
  }
}


/* SECTION 07 mobile portrait v2 — match 05→06 scroll rhythm
   07 remains one full-screen fixed monitor scene.
   Then 150px hold + 220px screen crossfade + 10px safety = 380px extra travel. */
@media (max-width: 560px) and (orientation: portrait) {
  .loopback-stage {
    top: 0;
    height: 100svh;
    min-height: 100svh;
  }

  .loopback-continuity {
    height: calc(100svh + 380px);
  }

  .loopback-stage .monitor-screen .loopback-default-image,
  .loopback-stage .monitor-screen .loopback-pro-image {
    transition: none !important;
    will-change: opacity;
  }
}


/* SECTION 07 mobile portrait v3 — restore copy→monitor breathing room.
   07 has three extra context lines compared with 06, so using the same 46% monitor top
   does not produce the same visual gap. Keep the approved 07 scroll timing unchanged
   and move only the LOOPBACK monitor lower. */
@media (max-width: 560px) and (orientation: portrait) {
  .loopback-stage .product-monitor {
    top: 58%;
  }
}


/* SECTION 08 mobile portrait v1 — normalize 07 → 08 page rhythm.
   Previous mobile flow had an extra 30svh blank exit after LOOPBACK.
   Remove only that extra gap so MINI DESK follows like the earlier sections. */
@media (max-width: 560px) and (orientation: portrait) {
  .loopback-exit {
    height: 0;
  }
}


/* SECTION 09 mobile portrait v1 — normalize 08 → 09 page rhythm.
   Previous mobile flow had an extra 30svh blank exit after MINI DESK.
   Remove only that extra gap; keep SECTION 09's own top padding/layout unchanged. */
@media (max-width: 560px) and (orientation: portrait) {
  .mini-desk-exit {
    height: 0;
  }
}


/* MOBILE LANDSCAPE — SECTION 01 baseline
   Same composition grammar as portrait:
   SAFE FRAME → COPY → CENTERED VISUAL.
   Do not compress the visual to viewport height; let the page scroll naturally. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .design-reveal {
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 72px;
  }

  /* Use the approved responsive blueprint asset instead of the old absolute collage layers. */
  .design-reveal > .sketch-field,
  .design-reveal > .sketch-details,
  .design-reveal > .sketch-lufs,
  .design-reveal > .sketch-vignette {
    display: none;
  }

  .design-reveal .hero-content {
    width: calc(100% - 64px);
    margin: 0 32px;
    padding: 44px 0 0;
  }

  .design-reveal .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .design-reveal h1 {
    font-size: clamp(3rem, 7vw, 4.1rem);
    line-height: .95;
  }

  .design-reveal .product-definition {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
  }

  .design-reveal .product-definition span {
    display: inline;
  }

  .design-reveal .definition-break {
    display: none;
  }

  .design-reveal .mobile-blueprint {
    position: relative;
    display: block;
    width: calc(100% - 64px);
    max-width: none;
    aspect-ratio: 1234 / 1152;
    margin: 38px auto 0;
    background: url('assets/rv_web_concept_03_mobile.png') center center / contain no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(
      ellipse 72% 76% at 50% 50%,
      #000 0%,
      #000 70%,
      rgba(0,0,0,.96) 82%,
      rgba(0,0,0,.82) 92%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 72% 76% at 50% 50%,
      #000 0%,
      #000 70%,
      rgba(0,0,0,.96) 82%,
      rgba(0,0,0,.82) 92%,
      transparent 100%
    );
  }

  .design-reveal .chapter-index {
    right: 32px;
    bottom: 24px;
  }
}


/* MOBILE LANDSCAPE — SECTION 02
   Same grammar as SECTION 01:
   SAFE FRAME → COPY → VISUALS.
   Keep original image aspect ratios and let the page grow vertically. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .analog-reveal {
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 72px;
  }

  .analog-content {
    width: calc(100% - 64px);
    margin: 0 32px;
    padding: 44px 0 0;
  }

  .analog-content .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .analog-content h2 {
    font-size: clamp(2.8rem, 6.6vw, 4rem);
    line-height: .96;
  }

  .analog-subtitle {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
  }

  .analog-rta,
  .analog-vu {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 64px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    background-size: 100% 100%;
  }

  .analog-rta {
    margin-top: 38px;
    aspect-ratio: 1030 / 627;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
  }

  .analog-vu {
    margin-top: 24px;
    aspect-ratio: 1022 / 621;
    -webkit-mask-image: radial-gradient(
      ellipse 95% 93% at 50% 50%,
      #000 0%,
      #000 74%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 95% 93% at 50% 50%,
      #000 0%,
      #000 74%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
  }

  .analog-reveal .chapter-index {
    right: 32px;
    bottom: 24px;
  }
}

/* MOBILE LANDSCAPE — SECTION 03
   Same grammar as SECTION 01/02:
   SAFE FRAME → COPY → VERTICAL TRANSPORT → DIGITAL INFO.
   Preserve original aspect ratios and allow natural vertical scrolling. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .digital-reveal {
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 72px;
  }

  .digital-content {
    width: calc(100% - 64px);
    margin: 0 32px;
    padding: 44px 0 0;
  }

  .digital-content .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .digital-content h2 {
    font-size: clamp(2.8rem, 6.6vw, 4rem);
    line-height: .96;
  }

  .digital-subtitle {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
  }

  .digital-transport {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: min(30vw, 220px);
    max-width: 220px;
    margin: 34px auto 0;
    aspect-ratio: 358 / 680;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 92% 90% at 50% 50%,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.82) 93%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 92% 90% at 50% 50%,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.82) 93%,
      transparent 100%
    );
  }

  .digital-info {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 64px);
    max-width: none;
    margin: 28px auto 0;
    aspect-ratio: 1023 / 621;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
  }

  .digital-reveal .chapter-index {
    right: 32px;
    bottom: 24px;
  }
}


/* MOBILE LANDSCAPE — SECTION 04
   Same grammar as SECTION 01–03:
   SAFE FRAME → COPY → MEASUREMENT PANEL → VU CAL / VOL.
   Preserve original aspect ratios and allow natural vertical scrolling. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .measurement-reveal {
    min-height: 0;
    height: auto;
  }

  .measurement-stage {
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 72px;
  }

  .measurement-content {
    width: calc(100% - 64px);
    margin: 0 32px;
    padding: 44px 0 0;
  }

  .measurement-content .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .measurement-content h2 {
    font-size: clamp(2.8rem, 6.6vw, 4rem);
    line-height: .96;
  }

  .measurement-subtitle {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
  }

  .measurement-panel,
  .measurement-controls {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    background-size: 100% 100%;
  }

  .measurement-panel {
    width: calc(100% - 64px);
    max-width: none;
    margin: 38px auto 0;
    aspect-ratio: 1034 / 631;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.96) 84%,
      rgba(0,0,0,.80) 93%,
      transparent 100%
    );
  }

  .measurement-controls {
    width: min(27vw, 205px);
    max-width: 205px;
    margin: 28px auto 0;
    aspect-ratio: 360 / 615;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.72) 7%,
      #000 16%,
      #000 88%,
      rgba(0,0,0,.90) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.72) 7%,
      #000 16%,
      #000 88%,
      rgba(0,0,0,.90) 95%,
      transparent 100%
    );
  }

  .measurement-breath {
    height: 0;
  }

  .measurement-stage > .chapter-index {
    right: 32px;
    bottom: 24px;
  }
}


/* LANDSCAPE 04 visibility hardening — preserve the approved layout. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .measurement-panel,
  .measurement-controls {
    z-index: 0;
  }
}

/* MOBILE LANDSCAPE — SECTION 05/06 continuity
   Rebased from the approved SECTION 04 package.
   Keep the shared monitor and crossfade; do not split 05 and 06 into separate monitors. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .view-continuity {
    height: auto;
    min-height: 0;
  }

  .default-reveal {
    position: relative;
    top: auto;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 44px 0 76px;
  }

  .default-content,
  .pro-content {
    top: auto;
    left: 32px;
    width: calc(100% - 64px);
    transform: none !important;
    transition: none !important;
  }

  .default-content {
    position: relative;
    left: auto;
    margin: 0 32px;
    opacity: 1;
  }

  .pro-content {
    position: absolute;
    top: 44px;
    opacity: 0;
    pointer-events: none;
  }

  .default-content .chapter-label,
  .pro-content .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .default-content h2,
  .pro-content h2 {
    font-size: clamp(2.8rem, 6.6vw, 4rem);
    line-height: .96;
  }

  .default-subtitle {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
    white-space: normal;
  }

  .default-reveal .product-monitor {
    position: relative;
    top: auto !important;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 64px);
    max-width: none;
    margin: 38px auto 0;
    aspect-ratio: 1536 / 1024;
    opacity: 1 !important;
    transform: none !important;
  }

  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image,
  .default-index,
  .pro-index {
    transition: none !important;
    will-change: opacity;
  }

  .default-reveal > .chapter-index {
    right: 32px;
    bottom: 24px;
  }

  .default-index { opacity: 1; }
  .pro-index { opacity: 0; }
}


/* LANDSCAPE v3 — robust visibility fix for SECTION 02 and 04.
   The base desktop visuals use z-index:-1. In mobile landscape, once those visuals
   become normal-flow relative blocks, negative z-index can drop them behind the
   section/background on real Safari/Brave. Keep the approved layouts, but promote
   only the visual layers into the section stacking context. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .analog-reveal,
  .measurement-stage {
    isolation: isolate;
  }

  .analog-content,
  .measurement-content {
    position: relative;
    z-index: 1;
  }

  .analog-rta,
  .analog-vu,
  .measurement-panel,
  .measurement-controls {
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .analog-reveal > .chapter-index,
  .measurement-stage > .chapter-index {
    z-index: 2;
  }
}


/* LANDSCAPE v4 — restore intended order for SECTION 02–04.
   Visual elements appear before copy in the HTML. Once they became normal-flow blocks,
   real mobile browsers rendered IMAGE → COPY. Use flex order explicitly:
   COPY → VISUAL(S). */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {

  /* 02 ANALOG */
  .analog-reveal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .analog-content { order: 1; }
  .analog-rta     { order: 2; }
  .analog-vu      { order: 3; }

  /* 03 DIGITAL */
  .digital-reveal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .digital-content   { order: 1; }
  .digital-transport { order: 2; }
  .digital-info      { order: 3; }

  /* 04 MEASUREMENT */
  .measurement-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .measurement-content  { order: 1; }
  .measurement-panel    { order: 2; }
  .measurement-controls { order: 3; }

  .analog-reveal > .chapter-index,
  .digital-reveal > .chapter-index,
  .measurement-stage > .chapter-index {
    position: absolute;
    z-index: 2;
  }
}


/* LANDSCAPE v5 — cross-browser horizontal-overflow guard.
   Goal: preserve the approved Safari/Edge composition while preventing Brave
   from exposing any page-width overflow / horizontal scroll indicator.
   No section geometry is changed. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .design-reveal,
  .analog-reveal,
  .digital-reveal,
  .measurement-reveal,
  .measurement-stage,
  .view-continuity,
  .default-reveal,
  .loopback-section,
  .loopback-continuity,
  .loopback-stage,
  .mini-desk-sequence,
  .mini-desk-reveal,
  .final-actions {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* MOBILE LANDSCAPE — SECTION 07 LOOPBACK
   Match SECTION 05/06 composition:
   SAFE FRAME → COPY → SHARED MONITOR.
   Keep the same monitor for DEFAULT→PRO crossfade and allow natural vertical scrolling. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .loopback-breath,
  .loopback-exit {
    height: 0;
  }

  .loopback-continuity {
    height: auto;
    min-height: 0;
  }

  .loopback-stage {
    position: relative;
    top: auto;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 44px 0 76px;
  }

  .loopback-content {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 64px);
    margin: 0 32px;
    transform: none;
    opacity: 1;
  }

  .loopback-content .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .loopback-content h2 {
    font-size: clamp(2.8rem, 6.6vw, 4rem);
    line-height: .96;
    white-space: normal;
  }

  .loopback-subtitle {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
    white-space: normal;
  }

  .loopback-context {
    margin-top: 18px;
    font-size: clamp(1rem, 2.35vw, 1.35rem);
    line-height: 1.35;
  }

  .loopback-stage .product-monitor {
    position: relative;
    top: auto !important;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 64px);
    max-width: none;
    margin: 38px auto 0;
    aspect-ratio: 1536 / 1024;
    opacity: 1 !important;
    transform: none !important;
  }

  .loopback-stage .monitor-screen .loopback-default-image,
  .loopback-stage .monitor-screen .loopback-pro-image {
    transition: none !important;
    will-change: opacity;
  }

  .loopback-stage > .chapter-index {
    right: 32px;
    bottom: 24px;
    z-index: 2;
  }
}


/* MOBILE LANDSCAPE — SECTION 08 MINI DESK
   Same composition grammar as 05–07:
   SAFE FRAME → COPY → IMAGE.
   Preserve the real Mini Desk image ratio and allow natural vertical scrolling. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .mini-desk-reveal {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 44px 0 76px;
  }

  .mini-desk-content {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 64px);
    margin: 0 32px;
    opacity: 1 !important;
    transform: none !important;
  }

  .mini-desk-content .chapter-label {
    margin-bottom: 18px;
    font-size: .72rem;
  }

  .mini-desk-content h2 {
    font-size: clamp(2.8rem, 6.6vw, 4rem);
    line-height: .96;
    white-space: normal;
  }

  .mini-desk-subtitle {
    margin-top: 18px;
    font-size: .9rem;
    line-height: 1.55;
    letter-spacing: .08em;
    white-space: normal;
  }

  .mini-desk-object {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 64px);
    max-width: none;
    height: auto;
    margin: 38px auto 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .mini-desk-reveal > .chapter-index {
    position: absolute;
    right: 32px;
    bottom: 24px;
    z-index: 2;
  }
}


/* MOBILE LANDSCAPE — SECTION 08 → 09 rhythm
   Remove only the extra inter-section blank exit after MINI DESK.
   SECTION 09 keeps its own internal top spacing. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .mini-desk-exit {
    height: 0;
  }
}


/* MOBILE LANDSCAPE v3 — scroll-compensated monitor pinning.
   Rebased from the last known-good landscape layout.
   Avoid CSS position:sticky on a monitor taller than the landscape viewport.
   JS writes --land-pin-y while the actual monitor screen is centered. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {

  .default-reveal,
  .loopback-stage {
    /* Existing visual bottom breathing (76px) + 450px active transition travel. */
    padding-bottom: 526px;
  }

  .default-reveal .product-monitor,
  .loopback-stage .product-monitor {
    position: relative !important;
    top: auto !important;
    transform: translateY(var(--land-pin-y, 0px)) !important;
    will-change: transform;
  }

  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image,
  .loopback-stage .monitor-screen .loopback-default-image,
  .loopback-stage .monitor-screen .loopback-pro-image {
    transition: none !important;
    will-change: opacity;
  }
}


/* MOBILE LANDSCAPE v4 — stabilize 05→06 and 07 crossfades.
   Both sequences now use the exact same geometry/timing.
   translate3d + integer-pixel travel reduces iOS compositor shimmer. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .default-reveal,
  .loopback-stage {
    padding-top: 44px;
    padding-bottom: 526px;
  }

  .default-reveal .product-monitor,
  .loopback-stage .product-monitor {
    width: calc(100% - 64px);
    margin: 38px auto 0;
    transform: translate3d(0, var(--land-pin-y, 0px), 0) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .default-reveal .monitor-screen,
  .loopback-stage .monitor-screen,
  .default-reveal .monitor-screen img,
  .loopback-stage .monitor-screen img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}


/* 05→06 LANDSCAPE ONLY — parity with the approved 07 behavior.
   LOOPBACK already has no transform transition; DEFAULT/PRO still inherited
   transform .8s, which makes the monitor lag behind scroll compensation.
   Disable that transition only for 05/06. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .default-reveal .product-monitor {
    transition: none !important;
  }
}


/* TABLET PORTRAIT — SECTION 01 baseline
   Same approved grammar as mobile portrait:
   SAFE FRAME → COPY → LARGE CENTERED BLUEPRINT.
   Only 01 is changed in this step. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .design-reveal {
    display: block;
    min-height: max(1100px, 112svh);
    overflow: hidden;
  }

  /* Tablet portrait uses the same dedicated clean blueprint asset as phone portrait. */
  .design-reveal > .sketch-field,
  .design-reveal > .sketch-details,
  .design-reveal > .sketch-lufs,
  .design-reveal > .sketch-vignette {
    display: none;
  }

  .design-reveal .hero-content {
    width: calc(100% - 88px);
    margin: 0 44px;
    padding: 11svh 0 0;
  }

  .design-reveal .chapter-label {
    margin-bottom: 30px;
  }

  .design-reveal h1 {
    font-size: clamp(5.2rem, 12vw, 6.4rem);
    line-height: .94;
  }

  .design-reveal .product-definition {
    margin-top: 30px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
  }

  .design-reveal .mobile-blueprint {
    position: relative;
    display: block;
    width: calc(100% - 88px);
    max-width: 680px;
    aspect-ratio: 1234 / 1152;
    margin: 36px auto 0;
    background: url('assets/rv_web_concept_03_mobile.png') center center / contain no-repeat;
    pointer-events: none;
  }

  .design-reveal .mobile-blueprint-field,
  .design-reveal .mobile-blueprint-details,
  .design-reveal .mobile-blueprint-lufs {
    display: none;
  }

  .design-reveal .chapter-index {
    right: 44px;
    bottom: 30px;
  }
}


/* TABLET PORTRAIT — SECTION 02 ANALOG
   Match SECTION 01 tablet grammar:
   SAFE FRAME → COPY → RTA → VU.
   Preserve source aspect ratios and allow natural vertical scrolling. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .analog-reveal {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 88px;
  }

  .analog-content {
    position: relative;
    width: calc(100% - 88px);
    margin: 0 44px;
    padding: 11svh 0 0;
    z-index: 1;
  }

  .analog-content .chapter-label {
    margin-bottom: 30px;
  }

  .analog-content h2 {
    font-size: clamp(4.3rem, 10vw, 5.6rem);
    line-height: .96;
  }

  .analog-subtitle {
    margin-top: 28px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
  }

  .analog-rta,
  .analog-vu {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 88px);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
  }

  .analog-rta {
    margin-top: 42px;
    aspect-ratio: 1030 / 627;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .analog-vu {
    margin-top: 30px;
    aspect-ratio: 1022 / 621;
    -webkit-mask-image: radial-gradient(
      ellipse 95% 93% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.97) 85%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 95% 93% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.97) 85%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .analog-reveal > .chapter-index {
    position: absolute;
    right: 44px;
    bottom: 30px;
    z-index: 2;
  }
}


/* TABLET PORTRAIT — SECTION 02 order fix
   HTML order is visual layers first, then copy.
   Force the intended composition: COPY → RTA → VU. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .analog-reveal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .analog-content { order: 1; }
  .analog-rta     { order: 2; }
  .analog-vu      { order: 3; }

  .analog-reveal > .chapter-index {
    position: absolute;
  }
}


/* TABLET PORTRAIT — SECTION 03 DIGITAL
   Match the approved tablet grammar:
   SAFE FRAME → COPY → VERTICAL TRANSPORT → DIGITAL INFO.
   Preserve original aspect ratios and allow natural vertical scrolling. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .digital-reveal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 88px;
  }

  .digital-content {
    position: relative;
    order: 1;
    width: calc(100% - 88px);
    margin: 0 44px;
    padding: 11svh 0 0;
    z-index: 1;
  }

  .digital-content .chapter-label {
    margin-bottom: 30px;
  }

  .digital-content h2 {
    font-size: clamp(4.3rem, 10vw, 5.6rem);
    line-height: .96;
  }

  .digital-subtitle {
    margin-top: 28px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
  }

  .digital-transport {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: min(24vw, 180px);
    max-width: 180px;
    margin: 42px auto 0;
    aspect-ratio: 358 / 680;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 92% 90% at 50% 50%,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.97) 84%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 92% 90% at 50% 50%,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.97) 84%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .digital-info {
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 88px);
    max-width: 680px;
    margin: 30px auto 0;
    aspect-ratio: 1023 / 621;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .digital-reveal > .chapter-index {
    position: absolute;
    right: 44px;
    bottom: 30px;
    z-index: 2;
  }
}


/* TABLET PORTRAIT — SECTION 04 MEASUREMENT
   Match the approved tablet grammar:
   SAFE FRAME → COPY → MEASUREMENT PANEL → VU CAL / VOL.
   Preserve original aspect ratios and allow natural vertical scrolling. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .measurement-reveal {
    min-height: 0;
    height: auto;
  }

  .measurement-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 88px;
  }

  .measurement-content {
    position: relative;
    order: 1;
    width: calc(100% - 88px);
    margin: 0 44px;
    padding: 11svh 0 0;
    z-index: 1;
  }

  .measurement-content .chapter-label {
    margin-bottom: 30px;
  }

  .measurement-content h2 {
    font-size: clamp(4.3rem, 10vw, 5.6rem);
    line-height: .96;
  }

  .measurement-subtitle {
    margin-top: 28px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
  }

  .measurement-panel {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 88px);
    max-width: 680px;
    margin: 42px auto 0;
    aspect-ratio: 1034 / 631;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .measurement-controls {
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: min(24vw, 180px);
    max-width: 180px;
    margin: 30px auto 0;
    aspect-ratio: 360 / 615;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.78) 7%,
      #000 15%,
      #000 90%,
      rgba(0,0,0,.92) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.78) 7%,
      #000 15%,
      #000 90%,
      rgba(0,0,0,.92) 96%,
      transparent 100%
    );
  }

  .measurement-breath {
    height: 0;
  }

  .measurement-stage > .chapter-index {
    position: absolute;
    right: 44px;
    bottom: 30px;
    z-index: 2;
  }
}


/* TABLET PORTRAIT — SECTION 05 DEFAULT VIEW
   Same approved tablet grammar:
   SAFE FRAME → COPY → MONITOR.
   Keep 05/06 shared-monitor continuity logic intact; only tablet portrait geometry changes. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .default-reveal {
    min-height: 112svh;
    height: 112svh;
  }

  .default-content,
  .pro-content {
    top: 11svh;
    left: 44px;
    width: calc(100% - 88px);
  }

  .default-content .chapter-label,
  .pro-content .chapter-label {
    margin-bottom: 30px;
  }

  .default-content h2,
  .pro-content h2 {
    font-size: clamp(4.3rem, 10vw, 5.6rem);
    line-height: .96;
  }

  .default-subtitle {
    margin-top: 28px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
    white-space: normal;
  }

  .default-reveal .product-monitor {
    top: 42%;
    right: 44px;
    width: calc(100% - 88px);
    max-width: 680px;
  }

  .default-reveal > .chapter-index {
    right: 44px;
    bottom: 30px;
  }
}


/* TABLET PORTRAIT — SECTION 05 spacing refinement
   Reduce only the copy-to-monitor gap by moving the monitor up.
   Continuity / crossfade logic remains unchanged. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .default-reveal .product-monitor {
    top: 39% !important;
  }
}


/* TABLET PORTRAIT — SECTION 05/06 chapter-label safe top
   When the shared view stage is held during scroll, iPad Safari can place the
   chapter label too close to the browser chrome. Move only the copy block down
   slightly; monitor geometry and continuity remain unchanged. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .default-content,
  .pro-content {
    top: 13svh !important;
  }
}


/* TABLET PORTRAIT — SECTION 05/06 top breathing refinement
   Move only the shared copy block slightly lower so the chapter label
   has visible breathing room under iPad Safari chrome. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .default-content,
  .pro-content {
    top: 15svh !important;
  }
}


/* TABLET PORTRAIT — SECTION 05→06 crossfade
   Use the approved phone-portrait rhythm:
   after the sticky stage is settled, hold 150px → fade 220px → 10px safety.
   Tablet keeps its approved 112svh stage, -12svh sticky top,
   15svh copy position and 39% monitor position. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  /* Extra travel = 12svh sticky-entry offset + 150 + 220 + 10px. */
  .view-continuity {
    height: calc(124svh + 380px);
  }

  /* Scroll progress drives these opacities directly, like phone portrait. */
  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image,
  .default-reveal .default-content,
  .default-reveal .pro-content,
  .default-reveal .default-index,
  .default-reveal .pro-index {
    transition: none !important;
  }
}


/* TABLET PORTRAIT — SECTION 07 LOOPBACK
   Match the approved 05→06 tablet rhythm:
   SAFE FRAME → COPY → SHARED MONITOR,
   then hold 150px → fade 220px → 10px safety.
   07 copy is longer, so its monitor sits lower than SECTION 05/06. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .loopback-breath,
  .loopback-exit {
    height: 0;
  }

  .loopback-stage {
    height: 112svh;
    min-height: 112svh;
  }

  /* 112svh stage + 12svh sticky entry + 150 + 220 + 10px travel */
  .loopback-continuity {
    height: calc(124svh + 380px);
  }

  .loopback-content {
    top: 15svh;
    left: 44px;
    width: calc(100% - 88px);
  }

  .loopback-content .chapter-label {
    margin-bottom: 30px;
  }

  .loopback-content h2 {
    font-size: clamp(4.3rem, 10vw, 5.6rem);
    line-height: .96;
  }

  .loopback-subtitle {
    margin-top: 28px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
    white-space: normal;
  }

  .loopback-context {
    margin-top: 24px;
    font-size: clamp(1.05rem, 2.45vw, 1.22rem);
    line-height: 1.45;
  }

  /* Longer copy than 05/06: lower the monitor to keep clear breathing room. */
  .loopback-stage .product-monitor {
    top: 49%;
    right: 44px;
    width: calc(100% - 88px);
    max-width: 680px;
  }

  .loopback-stage .monitor-screen .loopback-default-image,
  .loopback-stage .monitor-screen .loopback-pro-image {
    transition: none !important;
  }

  .loopback-stage > .chapter-index {
    right: 44px;
    bottom: 30px;
  }
}


/* TABLET PORTRAIT — SECTION 08 MINI DESK
   Same approved tablet grammar:
   SAFE FRAME → COPY → MINI DESK IMAGE.
   Preserve the real image ratio and allow natural vertical scrolling. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .mini-desk-reveal {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 11svh 0 88px;
  }

  .mini-desk-content {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 88px);
    margin: 0 44px;
    opacity: 1 !important;
    transform: none !important;
  }

  .mini-desk-content .chapter-label {
    margin-bottom: 30px;
  }

  .mini-desk-content h2 {
    font-size: clamp(4.3rem, 10vw, 5.6rem);
    line-height: .96;
    white-space: normal;
  }

  .mini-desk-subtitle {
    margin-top: 28px;
    font-size: clamp(1rem, 2.25vw, 1.12rem);
    line-height: 1.6;
    white-space: normal;
  }

  .mini-desk-object {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 88px);
    max-width: 680px;
    height: auto;
    margin: 42px auto 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .mini-desk-reveal > .chapter-index {
    position: absolute;
    right: 44px;
    bottom: 30px;
    z-index: 2;
  }
}


/* TABLET PORTRAIT — SECTION 09 TRY / BUY + SUPPORT
   Preserve the approved 50:50 concept on iPad portrait, but tighten typography
   and spacing for the 768px-class viewport.
   Also remove the extra 08→09 blank exit. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .mini-desk-exit {
    height: 0;
  }

  .final-actions {
    min-height: 100svh;
    padding: 11svh 44px 34px;
  }

  .final-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 44px;
    max-width: 680px;
    margin: 0 auto;
  }

  .final-try h2 {
    font-size: clamp(3rem, 7.5vw, 4rem);
    line-height: .98;
    white-space: normal;
  }

  .final-platform {
    margin-top: 28px;
    font-size: .95rem;
    line-height: 1.55;
  }

  .final-trial {
    margin-top: 34px;
    font-size: 1.08rem;
  }

  .final-cta-group {
    width: 100%;
    margin-top: 24px;
  }

  .final-cta-group button {
    min-height: 58px;
    padding: 13px 16px;
    font-size: .88rem;
  }

  .final-support-label {
    margin-bottom: 28px;
  }

  .final-support h2 {
    font-size: clamp(2.7rem, 6.7vw, 3.6rem);
  }

  .final-support-intro {
    margin: 16px 0 26px;
    font-size: .94rem;
  }

  .final-support-item {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 13px;
    min-height: 72px;
  }

  .final-support-icon {
    width: 40px;
    height: 40px;
  }

  .final-support-text strong {
    font-size: .95rem;
  }

  .final-support-text > span {
    font-size: .82rem;
  }

  .final-contact-address {
    margin-top: 18px;
    font-size: .88rem;
  }

  .final-footer {
    max-width: 680px;
    margin-top: 100px;
    gap: 16px 24px;
  }
}


/* TABLET LANDSCAPE — SECTION 01 DESIGN
   SAFE FRAME → COPY → LARGE CENTERED BLUEPRINT.
   Preserve aspect ratio and allow natural vertical scrolling. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .design-reveal {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 82px;
  }

  .design-reveal > .sketch-field,
  .design-reveal > .sketch-details,
  .design-reveal > .sketch-lufs,
  .design-reveal > .sketch-vignette {
    display: none;
  }

  .design-reveal .hero-content {
    width: calc(100% - 112px);
    margin: 0 56px;
    padding: 72px 0 0;
  }

  .design-reveal .chapter-label {
    margin-bottom: 26px;
    font-size: .78rem;
  }

  .design-reveal h1 {
    font-size: clamp(4.6rem, 7vw, 6.2rem);
    line-height: .95;
  }

  .design-reveal .product-definition {
    margin-top: 28px;
    font-size: clamp(.98rem, 1.75vw, 1.14rem);
    line-height: 1.6;
    letter-spacing: .08em;
  }

  .design-reveal .product-definition span {
    display: inline;
  }

  .design-reveal .definition-break {
    display: none;
  }

  .design-reveal .mobile-blueprint {
    position: relative;
    display: block;
    width: calc(100% - 112px);
    max-width: 880px;
    aspect-ratio: 1234 / 1152;
    margin: 42px auto 0;
    background: url('assets/rv_web_concept_03_mobile.png') center center / contain no-repeat;
    pointer-events: none;
  }

  .design-reveal .mobile-blueprint-field,
  .design-reveal .mobile-blueprint-details,
  .design-reveal .mobile-blueprint-lufs {
    display: none;
  }

  .design-reveal .chapter-index {
    right: 56px;
    bottom: 28px;
  }
}


/* TABLET LANDSCAPE — SECTION 02 ANALOG
   Same tablet-landscape grammar as SECTION 01:
   SAFE FRAME → COPY → RTA → VU.
   Preserve source ratios and allow natural vertical scrolling. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .analog-reveal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 82px;
  }

  .analog-content {
    position: relative;
    order: 1;
    width: calc(100% - 112px);
    margin: 0 56px;
    padding: 72px 0 0;
    z-index: 1;
  }

  .analog-content .chapter-label {
    margin-bottom: 26px;
    font-size: .78rem;
  }

  .analog-content h2 {
    font-size: clamp(4.2rem, 6.8vw, 5.8rem);
    line-height: .96;
  }

  .analog-subtitle {
    margin-top: 28px;
    font-size: clamp(.98rem, 1.75vw, 1.14rem);
    line-height: 1.6;
    letter-spacing: .08em;
  }

  .analog-rta,
  .analog-vu {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 112px);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
  }

  .analog-rta {
    order: 2;
    margin-top: 42px;
    aspect-ratio: 1030 / 627;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .analog-vu {
    order: 3;
    margin-top: 30px;
    aspect-ratio: 1022 / 621;
    -webkit-mask-image: radial-gradient(
      ellipse 95% 93% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.97) 85%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 95% 93% at 50% 50%,
      #000 0%,
      #000 76%,
      rgba(0,0,0,.97) 85%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .analog-reveal > .chapter-index {
    position: absolute;
    right: 56px;
    bottom: 28px;
    z-index: 2;
  }
}


/* TABLET LANDSCAPE — SECTION 03 DIGITAL
   Same tablet-landscape grammar as SECTION 01/02:
   SAFE FRAME → COPY → VERTICAL TRANSPORT → DIGITAL INFO.
   Preserve source ratios and allow natural vertical scrolling. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .digital-reveal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 82px;
  }

  .digital-content {
    position: relative;
    order: 1;
    width: calc(100% - 112px);
    margin: 0 56px;
    padding: 72px 0 0;
    z-index: 1;
  }

  .digital-content .chapter-label {
    margin-bottom: 26px;
    font-size: .78rem;
  }

  .digital-content h2 {
    font-size: clamp(4.2rem, 6.8vw, 5.8rem);
    line-height: .96;
  }

  .digital-subtitle {
    margin-top: 28px;
    font-size: clamp(.98rem, 1.75vw, 1.14rem);
    line-height: 1.6;
    letter-spacing: .08em;
  }

  .digital-transport {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: min(22vw, 220px);
    max-width: 220px;
    margin: 42px auto 0;
    aspect-ratio: 358 / 680;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 92% 90% at 50% 50%,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.97) 84%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 92% 90% at 50% 50%,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.97) 84%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .digital-info {
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 112px);
    max-width: 880px;
    margin: 30px auto 0;
    aspect-ratio: 1023 / 621;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .digital-reveal > .chapter-index {
    position: absolute;
    right: 56px;
    bottom: 28px;
    z-index: 2;
  }
}


/* TABLET LANDSCAPE — SECTION 04 MEASUREMENT
   Same tablet-landscape grammar as SECTION 01–03:
   SAFE FRAME → COPY → MEASUREMENT PANEL → VU CAL / VOL.
   Preserve source ratios and allow natural vertical scrolling. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .measurement-reveal {
    min-height: 0;
    height: auto;
  }

  .measurement-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 82px;
  }

  .measurement-content {
    position: relative;
    order: 1;
    width: calc(100% - 112px);
    margin: 0 56px;
    padding: 72px 0 0;
    z-index: 1;
  }

  .measurement-content .chapter-label {
    margin-bottom: 26px;
    font-size: .78rem;
  }

  .measurement-content h2 {
    font-size: clamp(4.2rem, 6.8vw, 5.8rem);
    line-height: .96;
  }

  .measurement-subtitle {
    margin-top: 28px;
    font-size: clamp(.98rem, 1.75vw, 1.14rem);
    line-height: 1.6;
    letter-spacing: .08em;
  }

  .measurement-panel {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 112px);
    max-width: 880px;
    margin: 42px auto 0;
    aspect-ratio: 1034 / 631;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 96% 94% at 50% 50%,
      #000 0%,
      #000 78%,
      rgba(0,0,0,.97) 86%,
      rgba(0,0,0,.84) 94%,
      transparent 100%
    );
  }

  .measurement-controls {
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: min(22vw, 220px);
    max-width: 220px;
    margin: 30px auto 0;
    aspect-ratio: 360 / 615;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.78) 7%,
      #000 15%,
      #000 90%,
      rgba(0,0,0,.92) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.78) 7%,
      #000 15%,
      #000 90%,
      rgba(0,0,0,.92) 96%,
      transparent 100%
    );
  }

  .measurement-breath {
    height: 0;
  }

  .measurement-stage > .chapter-index {
    position: absolute;
    right: 56px;
    bottom: 28px;
    z-index: 2;
  }
}


/* TABLET LANDSCAPE — SECTION 05→06
   KEEP DESKTOP COMPOSITION:
   copy on the left, monitor on the right.
   Only the scroll/crossfade rhythm is adapted to the tablet:
   sticky entry offset + 150px hold + 220px fade + 10px safety. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .view-continuity {
    height: calc(124svh + 380px);
  }

  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image,
  .default-reveal .default-content,
  .default-reveal .pro-content,
  .default-reveal .default-index,
  .default-reveal .pro-index {
    transition: none !important;
  }
}


/* TABLET LANDSCAPE — SECTION 05/06 vertical centering refinement
   Atomic geometry-only change:
   - move copy and monitor lower toward the visual center
   - move page index slightly upward
   - keep approved crossfade timing unchanged */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .default-content,
  .pro-content {
    top: 50% !important;
  }

  .default-reveal .product-monitor {
    top: 21svh !important;
  }

  .default-reveal > .chapter-index {
    bottom: calc(28px + 16px) !important;
  }
}


/* TABLET LANDSCAPE — SECTION 07 LOOPBACK
   Preserve the desktop composition:
   copy on the left, monitor on the right.
   Match the approved 05/06 tablet-landscape rhythm:
   150px hold → 220px crossfade → 10px safety. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .loopback-breath,
  .loopback-exit {
    height: 0;
  }

  .loopback-continuity {
    height: calc(124svh + 380px);
  }

  .loopback-stage {
    height: 112svh;
    min-height: 112svh;
  }

  .loopback-content {
    top: 50% !important;
    left: 56px;
    width: min(34vw, 360px);
    transform: translateY(-50%) !important;
  }

  .loopback-content .chapter-label {
    margin-bottom: 26px;
    font-size: .78rem;
  }

  .loopback-content h2 {
    font-size: clamp(4.2rem, 6.8vw, 5.8rem);
    line-height: .96;
    white-space: nowrap;
  }

  .loopback-subtitle {
    margin-top: 28px;
    font-size: clamp(.98rem, 1.75vw, 1.14rem);
    line-height: 1.6;
    letter-spacing: .08em;
    white-space: normal;
  }

  .loopback-context {
    margin-top: 22px;
    font-size: clamp(.96rem, 1.6vw, 1.08rem);
    line-height: 1.45;
  }

  .loopback-stage .product-monitor {
    top: 21svh !important;
    right: 0;
    width: min(64vw, 880px);
    max-width: none;
    transition: none !important;
  }

  .loopback-stage .monitor-screen .loopback-default-image,
  .loopback-stage .monitor-screen .loopback-pro-image {
    transition: none !important;
  }

  .loopback-stage > .chapter-index {
    right: 56px;
    bottom: 44px !important;
  }
}


/* TABLET LANDSCAPE — SECTION 08 MINI DESK
   Return to the simple responsive grammar:
   SAFE FRAME → COPY → MINI DESK IMAGE.
   Preserve source ratio and allow natural vertical scrolling. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .mini-desk-reveal {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 72px 0 82px;
  }

  .mini-desk-content {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 112px);
    margin: 0 56px;
    opacity: 1 !important;
    transform: none !important;
  }

  .mini-desk-content .chapter-label {
    margin-bottom: 26px;
    font-size: .78rem;
  }

  .mini-desk-content h2 {
    font-size: clamp(4.2rem, 6.8vw, 5.8rem);
    line-height: .96;
    white-space: normal;
  }

  .mini-desk-subtitle {
    margin-top: 28px;
    font-size: clamp(.98rem, 1.75vw, 1.14rem);
    line-height: 1.6;
    letter-spacing: .08em;
    white-space: normal;
  }

  .mini-desk-object {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
    width: calc(100% - 112px);
    max-width: 880px;
    height: auto;
    margin: 42px auto 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .mini-desk-reveal > .chapter-index {
    position: absolute;
    right: 56px;
    bottom: 28px;
    z-index: 2;
  }
}


/* TABLET LANDSCAPE — SECTION 08 → 09 rhythm
   Remove only the extra inter-section blank exit after MINI DESK.
   SECTION 09 desktop 50:50 layout and its own internal spacing remain untouched. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .mini-desk-exit {
    height: 0;
  }
}


/* TABLET LANDSCAPE — SECTION 05/06 screen Y alignment
   DEFAULT uses object-position:center.
   PRO inherited object-position:center top, creating a small vertical jump
   during crossfade because the 16:9 source is cropped inside the wider monitor screen.
   Match PRO to DEFAULT / LOOPBACK: center. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1180px) {
  .default-reveal .monitor-screen .pro-screen-image {
    object-position: center !important;
  }
}


/* RESPONSIVE 05→06 SCREEN Y ALIGNMENT
   DEFAULT uses object-position:center.
   PRO inherits center top from desktop base.
   Match PRO to DEFAULT in the responsive modes where the small vertical jump is visible.
   Desktop remains untouched.
   Tablet Landscape keeps its already-approved center override. */

/* iPhone / narrow phone portrait */
@media (max-width: 560px) and (orientation: portrait) {
  .default-reveal .monitor-screen .pro-screen-image {
    object-position: center !important;
  }
}

/* iPhone / narrow phone landscape */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  .default-reveal .monitor-screen .pro-screen-image {
    object-position: center !important;
  }
}

/* iPad / tablet portrait */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .default-reveal .monitor-screen .pro-screen-image {
    object-position: center !important;
  }
}


/* DESKTOP — scroll-driven crossfade for SECTION 05→06 and 07.
   Desktop previously toggled pro-active at one threshold, which looked like a hard switch.
   JS now drives opacity continuously over scroll distance.
   Responsive modes are untouched. */
@media (min-width: 1181px) {
  .default-reveal .monitor-screen .default-screen-image,
  .default-reveal .monitor-screen .pro-screen-image,
  .default-reveal .default-content,
  .default-reveal .pro-content,
  .default-reveal .default-index,
  .default-reveal .pro-index,
  .loopback-stage .monitor-screen .loopback-default-image,
  .loopback-stage .monitor-screen .loopback-pro-image {
    transition: none !important;
  }
}


/* DESKTOP — tighten sticky sequence length after approved smooth crossfade.
   Previous 324svh wrapper left a long dead scroll after the fade completed.
   Exact travel:
   112svh stage + 12svh sticky entry offset
   + 150px hold + 340px fade + 20px safety. */
@media (min-width: 1181px) {
  .view-continuity,
  .loopback-continuity {
    height: calc(124svh + 510px);
  }
}


/* DESKTOP — SECTION 04 → 05 rhythm refinement
   Reduce only the extra breathing gap after MEASUREMENT.
   Crossfade, sticky sequence length, and all responsive modes remain unchanged. */
@media (min-width: 1181px) {
  .measurement-breath {
    height: 14svh;
  }
}


/* DESKTOP — inter-section rhythm normalization
   Match 04→05, 06→07, 07→08, and 08→09 to the same 14svh breathing space.
   Internal section layout and crossfade behavior are unchanged. */
@media (min-width: 1181px) {
  .measurement-breath,
  .loopback-breath,
  .loopback-exit,
  .mini-desk-exit {
    height: 14svh;
  }
}


/* LEGAL — activate published footer documents without changing footer geometry */
.final-legal a {
  color: inherit;
  text-decoration: none;
}
.final-legal a:hover,
.final-legal a:focus-visible {
  color: #e7bd56;
}

/* WEB v25 — TRY cursor specificity fix.
   The generic .final-cta-group button rule is more specific than .final-try-button,
   so explicitly override only the enabled TRY control. BUY remains not-allowed. */
.final-cta-group .final-try-button {
  cursor: pointer;
}

/* WEB v25 — DESKTOP SECTION 05→06 screen alignment fix.
   Keep the shared monitor geometry fixed and match the approved responsive behavior:
   DEFAULT and PRO images use the same centered crop during crossfade.
   Desktop only; responsive breakpoints remain untouched. */
@media (min-width: 1181px) {
  .default-reveal .monitor-screen .pro-screen-image {
    object-position: center !important;
  }
}