/* MwaRent landing: device frames, the hero demo, the scroll story, depth.
   Screenshots live in /shots (invented data). Mobile first; wider layouts use min-width queries. */

/* ── Screen: a stack of screenshots, one visible at a time ───────────── */
.screen { position: relative; overflow: hidden; background: #eef0f8; }
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.10) 0%, transparent 36%);
}
.shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 480ms var(--ease-out), visibility 0s linear 480ms; }
.shot.is-active { opacity: 1; visibility: visible; transition: opacity 480ms var(--ease-out); }
.shot picture, .shot img, .screen > img { display: block; width: 100%; height: 100%; }
.shot img, .screen > img { object-fit: cover; object-position: top left; }

/* ── Laptop ──────────────────────────────────────────────────────────── */
.laptop { position: relative; width: 100%; }
.laptop__lid {
  position: relative; padding: 2.1% 2.1% 2.5%;
  background: linear-gradient(160deg, #1d2759 0%, #0a1230 60%);
  border-radius: 16px 16px 5px 5px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 48px 60px -34px rgb(2 6 24 / 0.75), 0 14px 22px -12px rgb(2 6 24 / 0.5);
}
.laptop__lid::before { content: ""; position: absolute; top: 0.75%; left: 50%; width: 5px; height: 5px; translate: -50% 0; border-radius: 50%; background: #2b3669; }
.laptop .screen { aspect-ratio: 16 / 10; border-radius: 3px; }
.laptop__base {
  position: relative; height: 13px; width: 108%; margin-left: -4%;
  background: linear-gradient(#dfe2ec, #a3abc1); border-radius: 0 0 16px 16px / 0 0 12px 12px;
  box-shadow: 0 22px 26px -14px rgb(2 6 24 / 0.7);
}
.laptop__base::after { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; translate: -50% 0; background: #8f97ae; border-radius: 0 0 8px 8px; }

/* ── Phone ───────────────────────────────────────────────────────────── */
.phone { --w: 15rem; position: relative; width: var(--w); max-width: 100%; }
.phone__body {
  position: relative; padding: calc(var(--w) * 0.032);
  background: linear-gradient(160deg, #232d62, #0a1230 62%); border-radius: calc(var(--w) * 0.15);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.22), 0 36px 54px -22px rgb(2 6 24 / 0.7), 0 10px 18px -8px rgb(2 6 24 / 0.45);
}
.phone .screen { aspect-ratio: 390 / 844; border-radius: calc(var(--w) * 0.12); }
.phone__island { position: absolute; z-index: 3; top: calc(var(--w) * 0.062); left: 50%; translate: -50% 0; width: 27%; height: calc(var(--w) * 0.05); border-radius: 99px; background: #050816; }

/* ── Hero demo ───────────────────────────────────────────────────────── */
.demo { position: relative; }
.demo__stage { position: relative; display: grid; justify-items: center; }
.demo__laptop { display: none; }
.demo__phone--main { --w: min(72vw, 17.5rem); }
.demo__phone--float { display: none; }
.demo__chip { display: none; }

.demo__controls { display: none; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); }
.js .demo__controls { display: flex; }
.demo__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
@media (min-width: 560px) { .demo__tabs { display: flex; flex-wrap: wrap; width: auto; } }
.demo__tab, .demo__pause {
  position: relative; overflow: hidden; min-height: 2.75rem; padding: 0 var(--space-2);
  border: 1px solid rgb(255 255 255 / 0.28); border-radius: var(--radius-2); background: transparent; color: var(--text-on-navy);
  font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.demo__tab:hover, .demo__pause:hover { border-color: rgb(255 255 255 / 0.6); }
.demo__tab[aria-pressed="true"] { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.demo__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue-600); transform: scaleX(0); transform-origin: left; }
.demo.is-playing .demo__tab[aria-pressed="true"]::after { animation: demo-progress var(--demo-ms, 5600ms) linear forwards; }
@keyframes demo-progress { to { transform: scaleX(1); } }
.demo__pause { margin-left: 0; min-width: 5rem; font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.demo__caption { margin-top: var(--space-2); min-height: 3.2em; font-size: var(--text-xs); line-height: 1.55; color: var(--text-on-navy-soft); max-width: 44em; }
.demo__caption b { color: var(--text-on-navy); font-weight: 600; }
.demo__note { margin-top: 4px; font-size: 0.6875rem; color: var(--text-on-navy-soft); opacity: 0.85; }

@media (min-width: 768px) {
  .demo__laptop { display: block; width: 100%; }
  .demo__phone--main { display: none; }
  .demo__phone--float { display: block; --w: clamp(7.5rem, 15vw, 12.5rem); position: absolute; z-index: 3; left: 3%; bottom: -13%; }
  .demo__controls { margin-top: calc(var(--phone-drop, 4.5rem) + var(--space-2)); }
  .demo__chip {
    display: flex; position: absolute; z-index: 4; right: 3%; top: -5%; width: min(20rem, 70%);
    opacity: 0; translate: 0 8px; transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out); pointer-events: none;
  }
  .demo[data-active="1"] .demo__chip { opacity: 1; translate: 0 0; }
}

/* Floating match notice (hero). It sits on the laptop, not on the page grid. */
.demo__chip.match-chip { margin: 0; }

/* ── Hero A: copy left, product bleeds off the right edge ────────────── */
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__bg .gridlines { inset: 0 auto 0 50%; }
.hero--a { padding-bottom: var(--space-8); }
.hero--a .hero__copy .display { max-width: 11em; font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); }
@media (min-width: 1100px) {
  .hero--a .hero__copy { grid-column: 1 / 6; }
  .hero--a .hero__product { grid-column: 6 / -1; margin-top: var(--space-6); padding-bottom: var(--space-12); }
  .hero--a .demo__laptop { max-width: 54rem; }
  .hero--a .demo__controls, .hero--a .demo__caption, .hero--a .demo__note { max-width: 42rem; }
}
.hero--a .hero__product { padding-bottom: var(--space-2); }
@media (min-width: 768px) { .hero--a .hero__product { padding-bottom: var(--space-12); } }
.hero--a .hero__copy { padding-bottom: var(--space-4); }
@media (min-width: 768px) and (max-width: 1099px) {
  .hero--a .hero__product { grid-column: 1 / -1; }
  .hero--a .demo__phone--float { left: 2%; }
}

/* Roof placement: a depth layer behind the frames, cropped by the hero's edge */
.hero-shell .hero__roof { width: 120vw; right: -48vw; top: 34%; }
@media (min-width: 768px) { .hero-shell .hero__roof { width: min(56vw, 720px); right: -10vw; top: 38%; } }
@media (min-width: 1100px) { .hero-shell .hero__roof { width: min(50vw, 720px); right: -6vw; top: 1%; } }

/* ── Story: a pinned device while the steps scroll past ──────────────── */
.section--story { background: var(--paper-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.story__intro { grid-column: 1 / -1; margin-bottom: var(--space-6); }
.story__intro .label { margin-bottom: var(--space-3); }
.story__intro .h2 { margin-bottom: var(--space-3); max-width: 12em; }
.story__stage { display: none; }
.story__steps { grid-column: 1 / -1; display: grid; gap: var(--space-8); }
.step { display: grid; gap: var(--space-3); }
.step__no { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft); }
.step h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-heading); line-height: 1.12; margin-bottom: var(--space-1); }
.step__text p { color: var(--ink-soft); max-width: 32em; }
.step__text p + p { margin-top: var(--space-1); }
.step__fig { position: relative; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-2); background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); border-radius: var(--radius-3); overflow: hidden; }
.step__fig .phone { --w: min(64vw, 15rem); }
.step__fig figcaption { font: 500 0.6875rem/1.4 var(--font-mono); color: var(--text-on-navy-soft); text-align: center; }
.step__paper { width: min(100%, 22rem); border-radius: 3px; box-shadow: 0 18px 30px -14px rgb(2 6 24 / 0.7); rotate: -1.5deg; background: #fff; }
.step__paper img { width: 100%; height: auto; border-radius: 3px; }

@media (min-width: 1024px) {
  .story__intro { grid-column: 1 / 6; margin-bottom: 0; }
  .story__steps { grid-column: 1 / 6; grid-row: 2; gap: 0; margin-top: var(--space-6); }
  .step { min-height: 74vh; align-content: center; padding-block: var(--space-4); opacity: 0.4; transition: opacity var(--dur-med) var(--ease-out); border-top: 1px solid var(--rule); }
  .step:first-child { border-top: 0; }
  .step.is-active { opacity: 1; }
  html:not(.js) .step { opacity: 1; }
  .step__fig { display: none; }
  html:not(.js) .step__fig { display: grid; }
  .story__intro { grid-row: 1; }

  .story__stage { display: block; grid-column: 6 / -1; grid-row: 1 / span 2; position: sticky; top: 12vh; align-self: start; height: min(62vh, 38rem); margin-left: var(--space-3); }
  html:not(.js) .story__stage { display: none; }
  .story__panel { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s linear 520ms; }
  .story__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
  .story__panel .laptop { width: min(100%, 52rem); }
  .story__panel .phone { --w: min(17rem, 34vh); }
  .story__panel--stack { position: absolute; }
  .story__paper { position: absolute; z-index: 3; left: -2%; bottom: 2%; width: 44%; rotate: -2.2deg; background: #fff; border-radius: 3px; box-shadow: 0 26px 40px -16px rgb(2 6 24 / 0.65), 0 6px 10px rgb(2 6 24 / 0.25); }
  .story__paper img { width: 100%; height: auto; border-radius: 3px; }
  .story__label { margin-top: 0; position: absolute; z-index: 4; left: 0; right: 0; bottom: -1.9rem; text-align: center; font: 500 0.6875rem/1.4 var(--font-mono); color: var(--ink-soft); }
  .story__rail { position: absolute; left: -1.6rem; top: 14%; bottom: 14%; width: 1px; background: var(--rule-strong); }
  .story__rail i { position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 1px; background: var(--paper-deep); box-shadow: inset 0 0 0 1px var(--ink-faint); transition: background-color var(--dur-fast), box-shadow var(--dur-fast); }
  .story__rail i.is-on { background: var(--blue-600); box-shadow: none; }
  .story__rail i:nth-child(1) { top: 0%; }
  .story__rail i:nth-child(2) { top: 25%; }
  .story__rail i:nth-child(3) { top: 50%; }
  .story__rail i:nth-child(4) { top: 75%; }
  .story__rail i:nth-child(5) { top: 100%; }
}
@media (min-width: 1024px) and (max-height: 700px) { .step { min-height: 88vh; } }

/* ── Depth: slow drift on scroll, only where the browser supports it ─── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .drift { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes drift { from { translate: 0 var(--drift-from, 36px); } to { translate: 0 var(--drift-to, -36px); } }
    .demo__phone--float.drift { --drift-from: 48px; --drift-to: -48px; }
    .hero__roof.drift { --drift-from: -26px; --drift-to: 38px; }
    .footer__roof.drift { --drift-from: 30px; --drift-to: -30px; }
    .story__paper.drift { --drift-from: 20px; --drift-to: -20px; }
  }
}

/* Example-data label, used under every screenshot and mock panel */
.example-note { margin-top: var(--space-1); font: 500 0.6875rem/1.4 var(--font-mono); color: var(--ink-faint); }