/* ============================================================
   Calculator for iOS — product walkthrough
   Fixed 1120×660 stage, scaled to the host column.
   Device frames are baked into the assets: every shot is the
   same 875×1783 plate, so nothing shifts between screens.
   ============================================================ */

.cw-embed { width: 100%; }
.cw-fit { width: 100%; }
.cw-sizer { position: relative; margin: 0 auto; }
.cw-stage {
  position: absolute; top: 0; left: 0;
  width: 1120px; height: 660px;
  -webkit-font-smoothing: antialiased;
  transform-origin: top left;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px;
  background: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #00181c;
  overflow: hidden;
}

.cw-device { position: relative; width: 265px; height: 540px; }
.cw-device::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 420px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,0,0.10) 0%, rgba(255,122,0,0) 66%);
}
.cw-plate { position: absolute; inset: 0; filter: drop-shadow(0 22px 40px rgba(0, 24, 28, 0.16)); }
.cw-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center; opacity: 0;
  transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity; backface-visibility: hidden;
}
.cw-stage.is-slow .cw-shot { transition-duration: .68s; }
.cw-stage.is-slower .cw-shot { transition-duration: .9s; }
.cw-shot.on { opacity: 1; }

/* ── caption ────────────────────────────────────────────── */
.cw-cap { width: 640px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cw-cap__k { white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ff7a00; }
.cw-cap__t { font-size: 19px; font-weight: 500; line-height: 1.45; color: #00181c; max-width: 48ch; min-height: 56px; }
.cw-cap__k, .cw-cap__t { transition: opacity .32s ease; }
.cw-stage.is-capout .cw-cap__k, .cw-stage.is-capout .cw-cap__t { opacity: 0; }
.cw-dots { display: flex; gap: 4px; }
.cw-dots button {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 10px 3px; display: block; line-height: 0;
}
.cw-dots button i { display: block; width: 18px; height: 3px; border-radius: 2px; background: rgba(0, 24, 28, 0.14); transition: background .3s ease; }
.cw-dots button:hover i { background: rgba(0, 24, 28, 0.34); }
.cw-dots button.on i { background: #00181c; }
.cw-dots button:focus-visible { outline: 2px solid #00181c; outline-offset: 2px; border-radius: 4px; }

/* ── highlight strip: underline gesture (CSS-only loop) ─── */
.cw-h1 {
  width: 100%; max-width: 720px; margin: 0 auto; height: 300px;
  background: #f4f4f3; background-image: radial-gradient(rgba(0,24,28,0.12) 1px, transparent 1px);
  background-size: 18px 18px; display: grid; place-items: center; overflow: hidden;
}
.cw-h1__ink { --w: 430px; position: relative; text-align: center; }
.cw-h1__eq {
  font-family: 'Caveat', 'Segoe Script', cursive; font-size: 62px; font-weight: 600; color: #1a6dff;
  white-space: nowrap; overflow: hidden; width: 0; margin: 0 auto;
  animation: cwH1write 9s linear infinite;
}
@keyframes cwH1write { 0% { width: 0; } 22% { width: var(--w); } 100% { width: var(--w); } }
.cw-h1__rule { display: block; margin: 4px auto 0; }
.cw-h1__rule path {
  stroke: #1a6dff; stroke-width: 6; fill: none; stroke-linecap: round;
  stroke-dasharray: 430; stroke-dashoffset: 430; animation: cwH1rule 9s linear infinite;
}
@keyframes cwH1rule { 0%, 30% { stroke-dashoffset: 430; } 42% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.cw-h1__ans {
  font-family: 'Caveat', 'Segoe Script', cursive; font-size: 60px; font-weight: 600; color: #00181c;
  opacity: 0; animation: cwH1ans 9s ease infinite;
}
@keyframes cwH1ans {
  0%, 46% { opacity: 0; transform: translateY(8px) scale(0.94); }
  58%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px) scale(0.94); }
}

@media (max-width: 640px) {
  .cw-h1 { height: 220px; }
  .cw-h1__ink { --w: 250px; }
  .cw-h1__eq { font-size: 36px; }
  .cw-h1__ans { font-size: 34px; }
  .cw-h1__rule { transform: scale(0.58); transform-origin: center top; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-h1__eq, .cw-h1__rule path, .cw-h1__ans { animation: none !important; }
  .cw-h1__eq { width: var(--w); }
  .cw-h1__rule path { stroke-dashoffset: 0; }
  .cw-h1__ans { opacity: 1; transform: none; }
  .cw-shot { transition: none !important; }
}