/* Pinned scenes (How it works, Works) and the CSS phone mockups */

/* ---------- Phone frame ---------- */
.phone {
  position: relative; flex: none;
  height: min(72vh, 640px); height: min(72svh, 640px); aspect-ratio: 9 / 19.5;
  background: var(--indigo); border-radius: 13% / 6%; padding: 3.2%;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(242, 234, 223, .08);
  container-type: inline-size;
}
.phone::before { /* speaker slot */
  content: ""; position: absolute; z-index: 3; top: 2.2%; left: 50%; width: 26%; height: 1.6%;
  transform: translateX(-50%); background: var(--indigo); border-radius: 0 0 10px 10px;
}
.screen {
  position: absolute; inset: 3.2%; border-radius: 10% / 4.6%; overflow: hidden;
  background: #151a2e; color: var(--silk);
  padding: 13cqw 7cqw 7cqw; font-size: max(10px, 5cqw); line-height: 1.35;
  display: flex; flex-direction: column; gap: 3.2cqw;
  opacity: 0; transform: translateY(4%); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.screen.is-on { opacity: 1; transform: none; }
.phone--light .screen { background: var(--silk); color: var(--ink); }

.mk-t { font: 400 7cqw/1.15 var(--f-head); letter-spacing: -.01em; margin-bottom: 1cqw; }
.mk-l { font-size: max(10px, 4.8cqw); opacity: .85; }
.mk-opt, .room, .mk-total {
  display: flex; justify-content: space-between; align-items: center; gap: 3cqw;
  padding: 3cqw 3.6cqw; border-radius: 3cqw; border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.mk-opt b, .room b, .mk-total b { white-space: nowrap; }
.mk-pic { height: 34cqw; border-radius: 3cqw; background: var(--indigo); display: flex; align-items: flex-end; gap: 3cqw; padding: 4cqw; }
.mk-pic i { display: block; flex: 1; height: 40%; border-radius: 1.5cqw; background: rgba(242, 234, 223, .25); }
.mk-pic i:first-child { height: 70%; background: rgba(242, 234, 223, .5); }
.mk-opt span { display: flex; align-items: center; gap: 2.4cqw; }
.mk-opt span::before {
  content: ""; width: 4cqw; height: 4cqw; flex: none; border-radius: 1cqw;
  border: 1.5px solid currentColor; transition: background-color .3s;
}
.mk-opt.is-sel span::before { background: currentColor; }
.mk-total { margin-top: auto; border: 0; padding-inline: 0; font-size: max(10px, 5cqw); }
.mk-total b { font: 400 6.4cqw var(--f-head); }
.mk-btn {
  background: var(--madder); color: #fff; text-align: center; font-weight: 500;
  padding: 3.6cqw; border-radius: 8cqw;
}

/* screen 1: a page that scrolls inside the phone */
.s-scroll { padding: 0; }
.s-scroll__feed { display: flex; flex-direction: column; gap: 4cqw; padding: 12cqw 6cqw; will-change: transform; }
.mk-hero { height: 70cqw; border-radius: 4cqw; background: var(--indigo); padding: 8cqw 6cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 3cqw; }
.mk-hero i, .mk-row i { display: block; height: 3.4cqw; border-radius: 2cqw; background: rgba(242, 234, 223, .75); }
.mk-hero i:nth-child(1) { width: 80%; height: 6cqw; background: var(--silk); }
.mk-hero i:nth-child(2) { width: 60%; height: 6cqw; background: var(--silk); }
.mk-hero i:nth-child(3) { width: 40%; margin-top: 2cqw; }
.mk-row { display: flex; gap: 4cqw; }
.mk-row i { flex: 1; height: 26cqw; background: rgba(242, 234, 223, .12); }
.mk-block { height: 60cqw; border-radius: 4cqw; background: rgba(242, 234, 223, .9); }
.mk-block--b { background: rgba(200, 68, 44, .85); }

.s-calc { background: var(--silk); color: var(--ink); }

/* screen 3: chat */
.s-chat { background: #10131d; gap: 4cqw; }
.mk-chat-head { font-weight: 500; padding-bottom: 3cqw; border-bottom: 1px solid var(--line); }
.mk-msg {
  max-width: 88%; padding: 3.6cqw 4cqw; border-radius: 4cqw 4cqw 4cqw 1cqw;
  background: var(--indigo); font-size: 4.3cqw; line-height: 1.45;
}
.mk-msg small { display: block; text-align: right; opacity: .7; font-size: 3.6cqw; margin-top: 1cqw; }
.mk-msg--me { align-self: flex-end; background: var(--silk); color: var(--ink); border-radius: 4cqw 4cqw 1cqw 4cqw; }

/* ---------- 2. How it works ---------- */
.how { position: relative; height: 340vh; }
.how::before { /* the hero thread continues down here */
  content: ""; position: absolute; z-index: 1; top: 0; width: 3px; height: 30vh;
  left: calc(max(var(--pad), (100% - var(--max)) / 2 + var(--pad)) - var(--pad) / 2 - 1.5px);
  background: linear-gradient(var(--madder), transparent);
}
.how__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.how__grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(24px, 6vw, 96px); }
.steps { margin-top: clamp(1.5rem, 5vh, 3rem); display: flex; flex-direction: column; gap: clamp(14px, 3vh, 28px); }
.steps li {
  position: relative; padding-left: 22px; color: var(--ash);
  display: flex; flex-direction: column; gap: 6px; transition: color .4s var(--ease);
}
.steps li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: var(--madder); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease);
}
.steps b { font: 400 clamp(1.1rem, 1.8vw, 1.5rem)/1.2 var(--f-head); }
.steps span { max-width: 28em; }
.steps li.is-on { color: var(--silk); }
.steps li.is-on::before { transform: none; }

/* ---------- 3. Works ---------- */
.works { position: relative; height: 320vh; }
.works__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 4vh, 40px); }
.works__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.works__track { display: flex; width: max-content; will-change: transform; }
.work {
  width: min(100vw, 980px); padding-inline: var(--pad);
  display: flex; align-items: center; gap: clamp(24px, 5vw, 72px);
}
.work:first-child { margin-left: max(0px, (100vw - var(--max)) / 2 - 0px); }
.work__text { max-width: 26em; display: flex; flex-direction: column; gap: 14px; }
.work__text p { color: rgba(242, 234, 223, .86); }

.works .phone { height: min(62vh, 560px); height: min(62svh, 560px); }
.works .mk-total { margin-top: 2cqw; }
/* cake builder */
.cake-art { display: flex; flex-direction: column; align-items: center; gap: 0; padding-block: 1cqw; }
.cake-art i { display: block; height: 10cqw; border-radius: 2cqw; background: var(--indigo); transition: width .4s var(--ease); }
.cake-art i:nth-child(1) { width: calc(var(--w, 50%) * .6); background: var(--madder); }
.cake-art i:nth-child(2) { width: calc(var(--w, 50%) * .8); }
.cake-art i:nth-child(3) { width: var(--w, 50%); }
.chips { display: flex; flex-wrap: wrap; gap: 2cqw; }
.chips span { padding: 1.6cqw 3cqw; border-radius: 6cqw; border: 1px solid rgba(13, 15, 20, .3); font-size: max(10px, 4.4cqw); }
.chips .is-sel { background: var(--ink); color: var(--silk); border-color: var(--ink); }
.s-cake input[type="range"] {
  width: 100%; height: 44px; margin: -12px 0; background: transparent; accent-color: var(--madder); cursor: pointer;
}

/* hotel */
.room span { font-weight: 500; }
.room.is-sel { background: rgba(242, 234, 223, .1); border-color: var(--silk); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; font-size: max(9px, 4cqw); text-align: center; }
.cal span { padding: 1.4cqw 0; border-radius: 1.6cqw; }
.cal .busy { background: rgba(242, 234, 223, .14); color: rgba(242, 234, 223, .55); text-decoration: line-through; }
.cal .pick { background: var(--madder); color: #fff; }
.legend { display: flex; gap: 4cqw; font-size: max(10px, 4cqw); opacity: .85; }
.legend span { display: flex; align-items: center; gap: 1.4cqw; }
.legend i { width: 3cqw; height: 3cqw; border-radius: 1cqw; }
.legend .busy { background: rgba(242, 234, 223, .3); }
.legend .pick { background: var(--madder); }

/* dentistry */
.teeth { width: 100%; height: auto; margin-block: 1cqw 2cqw; }
.teeth rect { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.teeth rect.on { fill: var(--madder); stroke: var(--madder); }
.teeth text { font: 500 7px var(--f-text); fill: var(--ash); }

/* ---------- Phone layout ---------- */
@media (max-width: 860px) {
  .how__grid { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .how__phone { order: -1; height: min(46vh, 440px); height: min(46svh, 440px); justify-self: center; }
  .how .h2 { font-size: 1.5rem; }
  .steps { margin-top: 12px; gap: 10px; }
  .steps li:not(.is-on) span { display: none; }
  .steps b { font-size: 1rem; }
  .steps span { font-size: .95rem; }
  .work { width: 100vw; flex-direction: column; gap: 18px; justify-content: center; }
  .work .phone { height: min(calc(100svh - 250px), 520px); }
  .work__text { gap: 6px; text-align: left; align-self: stretch; }
  .work__text p { font-size: .95rem; }
  .works__stage { gap: 12px; }
  .works .h2 { font-size: 1.5rem; }
  .works .note { font-size: .875rem; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .how__phone { height: 40svh; }
  .how .mk-pic, .how .s-calc .mk-l { display: none; }
  .work .phone { height: calc(100svh - 210px); }
  .work__text p { display: none; }
}

/* ---------- Reduced motion: no pinned scenes ---------- */
@media (prefers-reduced-motion: reduce) {
  .how, .works { height: auto; }
  .how__stage, .works__stage { position: relative; height: auto; padding-block: var(--section); }
  .how .screen { display: none; }
  .how .screen.s-calc { display: flex; opacity: 1; transform: none; }
  .steps li { color: var(--silk); }
  .steps li::before { transform: none; }
  .steps li span { display: block !important; }
  .works__track { width: auto; flex-direction: column; gap: 64px; }
  .work, .work:first-child { width: auto; margin: 0 auto; max-width: calc(var(--max) + 2 * var(--pad)); }
}