/* noXcuses workout: V0.4 CINEMATIC
   Fixed Pro Max-class hardware, exact uncropped app media and motion language.
   Site chrome uses graphite + noXcuses red/orange. Any rest-timer accent remains
   confined to pixels already present inside authentic app captures. */

:root {
  --blue: #ff6b3d;
  --v4-red: #ff334b;
  --v4-orange: #ff7542;
  --v4-green: #48df87;
  --v4-ink: #030305;
  --v4-titanium: #77736f;
  --v4-cycle-duration: 6.5s;
}

html { scroll-padding-top: 96px; }
html,
body { max-width: 100%; overflow-x: clip; }

body {
  background:
    radial-gradient(circle at 82% 7%,rgba(255,49,63,.085),transparent 29rem),
    radial-gradient(circle at 12% 36%,rgba(255,105,61,.024),transparent 28rem),
    var(--v3-bg);
}

.v3-ambient-two {
  background: radial-gradient(circle,rgba(255,105,61,.075),transparent 66%);
}

/* --------------------------------------------------------------------------
   Precision device system
   Outer h/w = 2.1005. Inner display h/w = 2.1701. The app bitmap is always
   object-fit: contain inside a fixed OLED display; no screenshot is stretched.
   -------------------------------------------------------------------------- */

.phone-shell.pro-device {
  display: block;
  aspect-ratio: 77.6 / 163;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 15cqw !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
  container-type: inline-size;
  overflow: visible !important;
  will-change: translate;
}

.phone-shell.pro-device::before,
.phone-shell.pro-device::after { content: none !important; }

.pro-device__rail {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border: .62cqw solid rgba(255,255,255,.28);
  border-radius: 15cqw;
  background:
    linear-gradient(94deg,rgba(255,255,255,.42),transparent 5%,transparent 94%,rgba(255,255,255,.2)),
    linear-gradient(145deg,#8b8783 0%,#403e3d 9%,#121215 28%,#050507 67%,#504c49 93%,#817b76 100%);
  box-shadow:
    0 17cqw 30cqw rgba(0,0,0,.6),
    0 0 0 .42cqw rgba(0,0,0,.92),
    inset 0 .55cqw .65cqw rgba(255,255,255,.35),
    inset 0 -.65cqw 1.1cqw rgba(0,0,0,.86),
    0 0 25cqw rgba(255,55,58,.08);
}

.pro-device__bezel {
  position: absolute;
  inset: 1.65cqw;
  overflow: hidden;
  border: .7cqw solid #070709;
  border-radius: 13.7cqw;
  background: #010102;
  box-shadow:
    inset 0 0 0 .45cqw rgba(255,255,255,.055),
    0 0 0 .3cqw rgba(0,0,0,.95);
}

.pro-device__display {
  position: absolute;
  left: 2.35cqw;
  right: 2.35cqw;
  top: 4.9cqw;
  bottom: 4.9cqw;
  overflow: hidden;
  border-radius: 11.55cqw;
  background: #020204;
  box-shadow: inset 0 0 0 .28cqw rgba(255,255,255,.06);
  isolation: isolate;
}

.pro-device__media,
.phone-screen.pro-device__media,
.phone-screen-stack.pro-device__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  aspect-ratio: auto !important;
  background: #020204 !important;
  box-shadow: none !important;
}

.pro-device__media > img,
.pro-device__media .product-screen,
.pro-device__media .product-screen > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0;
  object-fit: contain !important;
  object-position: center center !important;
  background: #020204;
}

.pro-device__media > img { display: block; }

.pro-device__media .product-screen {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.4cqw);
  transition: opacity .36s ease,transform .36s ease,visibility .36s step-end;
}

.pro-device__media .product-screen[hidden] {
  display: none !important;
}

.pro-device__media .product-screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .36s ease,transform .36s ease,visibility 0s;
}

.pro-device__island {
  position: absolute !important;
  z-index: 6 !important;
  top: 3.35cqw !important;
  left: 50% !important;
  width: 30.5cqw !important;
  height: 8.25cqw !important;
  transform: translateX(-50%) !important;
  border: .38cqw solid rgba(255,255,255,.07) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 78% 51%,#151414 0 1.55cqw,#050506 1.7cqw 2.35cqw,#000 2.5cqw),
    #000 !important;
  box-shadow: inset 0 .35cqw .8cqw #000,0 .5cqw 1.2cqw rgba(0,0,0,.58) !important;
  pointer-events: none;
}

.pro-device__island::after {
  content: "";
  position: absolute;
  left: 6cqw;
  top: 50%;
  width: 8.5cqw;
  height: 1.15cqw;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #0d0d0e;
  box-shadow: inset 0 .2cqw .35cqw rgba(255,255,255,.04);
}

.pro-device__home {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 2.4cqw;
  width: 34cqw;
  height: 1.25cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 1cqw rgba(255,255,255,.1);
  pointer-events: none;
}

.pro-device__glass {
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg,rgba(255,255,255,.105),transparent 13%,transparent 69%,rgba(255,92,59,.035)),
    radial-gradient(circle at 19% 5%,rgba(255,255,255,.055),transparent 18%);
  mix-blend-mode: screen;
  opacity: .62;
  pointer-events: none;
}

.pro-device__button {
  position: absolute;
  z-index: 1;
  width: 1.3cqw;
  border: .2cqw solid rgba(255,255,255,.14);
  background: linear-gradient(#76716d,#242326 62%,#0d0d0f);
  box-shadow: 0 .6cqw 1.4cqw rgba(0,0,0,.58);
  pointer-events: none;
}

.pro-device__button--action { left: -1.15cqw; top: 31cqw; height: 8.5cqw; border-radius: .8cqw 0 0 .8cqw; }
.pro-device__button--up { left: -1.28cqw; top: 47cqw; height: 14cqw; border-radius: 1cqw 0 0 1cqw; }
.pro-device__button--down { left: -1.28cqw; top: 64cqw; height: 14cqw; border-radius: 1cqw 0 0 1cqw; }
.pro-device__button--power { right: -1.28cqw; top: 51cqw; height: 24cqw; border-radius: 0 1cqw 1cqw 0; }

.phone-shell-small.pro-device,
.phone-shell-card.pro-device { padding: 0 !important; border-radius: 15cqw !important; }

.phone-shell-small .pro-device__display,
.phone-shell-card .pro-device__display { border-radius: 11.55cqw; }

/* --------------------------------------------------------------------------
   Seamless system marquee: exact duplicate groups, no fake feature claims.
   -------------------------------------------------------------------------- */

.v3-system-strip { position: relative; overflow: hidden; background: rgba(8,9,13,.9); }
.v3-system-strip::before,
.v3-system-strip::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: min(12vw,150px);
  pointer-events: none;
}
.v3-system-strip::before { left: 0; background: linear-gradient(90deg,#08090d,transparent); }
.v3-system-strip::after { right: 0; background: linear-gradient(-90deg,#08090d,transparent); }
.v3-system-strip .container.v4-marquee-viewport {
  width: 100%;
  max-width: none;
  min-height: 66px;
  padding: 0;
  display: block;
  overflow: hidden;
}
.v4-marquee-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  animation: v4Marquee 34s linear infinite;
  will-change: transform;
}
.v4-marquee-group {
  flex: none;
  min-width: 100vw;
  min-height: 66px;
  padding: 0 clamp(28px,4vw,76px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(24px,4vw,68px);
}
.v3-system-strip.is-paused .v4-marquee-track { animation-play-state: paused; }
.v4-marquee-toggle {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: clamp(8px,1.5vw,22px);
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #dedee3;
  background: rgba(9,10,14,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  cursor: pointer;
}
.v4-marquee-toggle:hover,
.v4-marquee-toggle:focus-visible { border-color: rgba(255,117,66,.55); color: #fff; }
.v4-marquee-toggle span { color: var(--v4-orange); font-size: .65rem; }
.v4-marquee-toggle b { font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Cinematic motion: wrappers move; the bitmap and display geometry never do.
   -------------------------------------------------------------------------- */

.reveal.is-visible .phone-shell.pro-device {
  animation: v4DeviceFloat 7.8s ease-in-out var(--v4-float-delay,0s) infinite;
}

.v3-presenter-man,
.v3-coach-side-man { animation: v4CoachFloat 8.5s ease-in-out -2.1s infinite; }
.v3-presenter-woman,
.v3-coach-side-woman { animation: v4CoachFloatReverse 9.2s ease-in-out -5.4s infinite; }
.v3-mini-coaches img:first-child { animation: v4CoachFloat 8.6s ease-in-out -3s infinite; }
.v3-mini-coaches img:last-child { animation: v4CoachFloatReverse 9.4s ease-in-out -6s infinite; }

.v3-phone-rail { perspective: 1400px; padding-top: 38px; }
.v3-phone-rail figure {
  transform-origin: center 88%;
  transition: transform .55s cubic-bezier(.2,.75,.2,1),filter .55s ease;
}
.v3-phone-rail figure:nth-child(1) { transform: translateY(22px); }
.v3-phone-rail figure:nth-child(2) { transform: translateY(7px); }
.v3-phone-rail figure:nth-child(3) { transform: translateY(0); }
.v3-phone-rail figure:nth-child(4) { transform: translateY(7px); }
.v3-phone-rail figure:nth-child(5) { transform: translateY(22px); }
.v3-phone-rail figure:hover,
.v3-phone-rail figure:focus-within { transform: translateY(-9px); filter: brightness(1.06); }

.v3-loop-grid { position: relative; }
.v3-loop-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,55,75,.12),rgba(255,117,66,.42),rgba(255,55,75,.12),transparent);
  box-shadow: 0 0 24px rgba(255,72,58,.13);
}
.v3-loop-grid article { z-index: 1; transition: transform .4s ease,border-color .4s ease,box-shadow .4s ease; }
.v3-loop-grid article:hover { transform: translateY(-7px); border-color: rgba(255,103,78,.28); box-shadow: 0 24px 55px rgba(0,0,0,.3),0 0 35px rgba(255,54,66,.06); }
.v3-loop-grid article.is-visible:nth-child(1) { transition-delay: 0s; }
.v3-loop-grid article.is-visible:nth-child(2) { transition-delay: .08s; }
.v3-loop-grid article.is-visible:nth-child(3) { transition-delay: .16s; }
.v3-loop-grid article.is-visible:nth-child(4) { transition-delay: .24s; }

.v3-feature-card { transition: transform .45s cubic-bezier(.2,.75,.2,1),border-color .45s ease,box-shadow .45s ease; }
.v3-feature-card:hover { transform: translateY(-6px); border-color: rgba(255,105,77,.25); box-shadow: 0 28px 70px rgba(0,0,0,.3),inset 0 0 50px rgba(255,51,65,.025); }

.v3-product-device.v4-is-switching .pro-device__rail { animation: v4DevicePulse .62s ease; }
.v4-cycle-meter {
  position: relative;
  z-index: 2;
  width: min(100%,340px);
  height: 2px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
}
.v4-cycle-meter i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg,var(--v4-red),var(--v4-orange));
  box-shadow: 0 0 15px rgba(255,82,62,.42);
  animation: v4CycleMeter var(--v4-cycle-duration) linear infinite;
}
.v3-product-device.v4-cycle-paused .v4-cycle-meter i { animation-play-state: paused; opacity: .4; }

/* --------------------------------------------------------------------------
   Photo-AI scanner presentation. Red/orange scanner, green only when the
   result is ready for the user to review. No result is auto-saved.
   -------------------------------------------------------------------------- */

.v4-photo-ai-stage {
  position: relative;
  width: 100%;
  min-height: 425px;
  margin: -6px 0 24px;
}
.v4-photo-ai-stage > .phone-shell { position: absolute; left: 4%; bottom: 0; width: 190px; }
.v4-scan-badge {
  position: absolute;
  z-index: 12;
  right: 1%;
  top: 63px;
  width: min(245px,48%);
  padding: 13px;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,104,75,.27);
  border-radius: 19px;
  background: linear-gradient(145deg,rgba(24,18,21,.94),rgba(8,9,13,.96));
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 55px rgba(0,0,0,.5),0 0 36px rgba(255,62,63,.09),inset 0 1px rgba(255,255,255,.07);
}
.v4-scan-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,transparent 35%,rgba(255,117,66,.07),transparent 65%);
  transform: translateX(-100%);
  animation: v4BadgeSweep 5.6s ease-in-out infinite;
  pointer-events: none;
}
.v4-scan-window {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255,102,74,.36);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle,rgba(255,71,61,.14),transparent 64%),#07070a;
  box-shadow: inset 0 0 24px rgba(255,57,63,.08);
}
.v4-scan-window b {
  color: rgba(255,255,255,.78);
  font-size: .54rem;
  letter-spacing: .2em;
}
.v4-scan-reticle,
.v4-scan-reticle::before,
.v4-scan-reticle::after {
  position: absolute;
  inset: 10px;
  border: solid rgba(255,116,75,.62);
}
.v4-scan-reticle { content: ""; border-width: 1px 0 0 1px; }
.v4-scan-reticle::before { content: ""; inset: -1px; border-width: 0 1px 1px 0; }
.v4-scan-reticle::after { content: ""; inset: 10px; border-width: 1px; border-color: rgba(255,255,255,.055); border-radius: 50%; }
.v4-scan-line {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  top: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,var(--v4-red) 15%,#ffb06d 50%,var(--v4-red) 85%,transparent);
  box-shadow: 0 0 9px #ff4c48,0 0 20px rgba(255,106,61,.6);
  animation: v4ScanLine 2.35s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.v4-scan-readout { min-width: 0; display: grid; gap: 6px; }
.v4-scan-readout small { color: #ff775f; font-size: .55rem; font-weight: 950; letter-spacing: .2em; }
.v4-scan-readout strong { position: relative; min-height: 28px; display: block; font-size: .72rem; line-height: 1.2; letter-spacing: .035em; }
.v4-scan-readout strong span { position: absolute; inset: 0; display: flex; align-items: center; animation: v4ScanCopy 5.6s ease-in-out infinite; }
.v4-scan-readout strong span:last-child { color: var(--v4-green); opacity: 0; animation-name: v4ScanCopyReady; }
.v4-scan-readout em { color: #85868f; font-size: .46rem; font-style: normal; font-weight: 900; letter-spacing: .12em; line-height: 1.35; }

.v4-scan-badge-compact {
  right: -35px;
  top: 42%;
  width: 235px;
  transform: translateY(-50%);
}

@keyframes v4Marquee { to { transform: translateX(-50%); } }
@keyframes v4DeviceFloat {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes v4CoachFloat {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes v4CoachFloatReverse {
  0%,100% { translate: 0 -5px; }
  50% { translate: 0 4px; }
}
@keyframes v4DevicePulse {
  45% { box-shadow: 0 17cqw 30cqw rgba(0,0,0,.6),0 0 0 .42cqw rgba(0,0,0,.92),inset 0 .55cqw .65cqw rgba(255,255,255,.35),0 0 31cqw rgba(255,72,57,.18); }
}
@keyframes v4CycleMeter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v4ScanLine { from { transform: translateY(0); } to { transform: translateY(54px); } }
@keyframes v4BadgeSweep { 0%,55% { transform: translateX(-100%); } 76%,100% { transform: translateX(100%); } }
@keyframes v4ScanCopy { 0%,48% { opacity: 1; transform: translateY(0); } 57%,100% { opacity: 0; transform: translateY(-5px); } }
@keyframes v4ScanCopyReady { 0%,48% { opacity: 0; transform: translateY(5px); } 57%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

@media (max-width:1100px) {
  .v4-scan-badge-compact { right: -46px; width: 220px; }
}

@media (max-width:820px) {
  html,
  body { overflow-x: hidden; }
  .v4-marquee-track { animation-duration: 29s; }
  .v4-marquee-group { min-width: max-content; padding-inline: 28px; justify-content: flex-start; gap: 31px; }
  .v4-marquee-toggle { right: 7px; width: 34px; padding: 0; justify-content: center; }
  .v4-marquee-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .v3-phone-rail { perspective: none; }
  .v3-phone-rail figure:nth-child(n) { transform: none; }
  .v3-phone-rail figure:hover,
  .v3-phone-rail figure:focus-within { transform: translateY(-4px); }
  .v3-loop-grid::before { display: none; }
  .v4-scan-badge-compact {
    position: relative;
    right: auto;
    top: auto;
    width: min(290px,100%);
    margin: -52px 0 0 auto;
    transform: none;
  }
}

@media (max-width:560px) {
  .v3-proof-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .v3-proof-row::-webkit-scrollbar { display: none; }
  .v3-proof-row span { flex: 0 0 auto; }
  .reveal.is-visible .phone-shell.pro-device { animation-name: v4DeviceFloatMobile; }
  .v3-presenter-man,
  .v3-presenter-woman,
  .v3-coach-side-man,
  .v3-coach-side-woman,
  .v3-mini-coaches img { animation-name: v4CoachFloatMobile !important; }
  .v4-photo-ai-stage { min-height: 390px; }
  .v4-photo-ai-stage > .phone-shell { left: 0; width: 174px; }
  .v4-scan-badge {
    right: 0;
    top: 72px;
    width: 158px;
    padding: 10px;
    grid-template-columns: 51px minmax(0,1fr);
    gap: 8px;
    border-radius: 15px;
  }
  .v4-scan-reticle,
  .v4-scan-reticle::before { inset: 7px; }
  .v4-scan-reticle::after { inset: 6px; }
  .v4-scan-line { left: 6px; right: 6px; top: 7px; animation-name: v4ScanLineMobile; }
  .v4-scan-readout small { font-size: .45rem; }
  .v4-scan-readout strong { min-height: 33px; font-size: .55rem; }
  .v4-scan-readout em { font-size: .37rem; letter-spacing: .08em; }
  .v4-scan-badge-compact { width: min(270px,94%); grid-template-columns: 66px minmax(0,1fr); }
}

@keyframes v4DeviceFloatMobile {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@keyframes v4CoachFloatMobile {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes v4ScanLineMobile { from { transform: translateY(0); } to { transform: translateY(34px); } }

@media (prefers-reduced-motion:reduce) {
  .v4-marquee-track,
  .reveal.is-visible .phone-shell.pro-device,
  .v3-presenter,
  .v3-coach-side,
  .v3-mini-coaches img,
  .v4-cycle-meter i,
  .v4-scan-badge::after,
  .v4-scan-line,
  .v4-scan-readout strong span { animation: none !important; }
  .v4-marquee-track { transform: none !important; }
  .v4-marquee-group[aria-hidden="true"] { display: none; }
  .v4-scan-readout strong span:first-child { opacity: 0; }
  .v4-scan-readout strong span:last-child { opacity: 1; transform: none; }
  .v3-feature-card,
  .v3-loop-grid article,
  .v3-phone-rail figure { transition: none !important; }
  .v4-marquee-toggle { display: none; }
}