/* ---- phone motion ---- */
#included .scr { position: absolute; inset: 0; visibility: hidden; z-index: 1; }
#included .scr.on { visibility: visible; z-index: 2; }
#included .home-layer { position: absolute; inset: 0; z-index: 1; visibility: hidden; }
#included .home-layer.on { visibility: visible; }
#included .ad-scrim { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
#included .tapdot { position: absolute; left: 0; top: 0; z-index: 70; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,140,146,.5) 0, rgba(140,140,146,.38) 70%, rgba(140,140,146,.3) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65), 0 2px 10px rgba(0,0,0,.16); opacity: 0; pointer-events: none; }
#included .ad-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; border-radius: 1px; background: var(--ac, #007AFF); animation: ad-blink 1.06s steps(1) infinite; }
#included .ad-caret.on { animation: none; }
@keyframes ad-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
#included .ad-caret { display: none; }
#included .tapdot { display: none; }
}

/* live-page fixes: the chip strip must not widen the column; site link and text styles must not leak in */
#included .row1 > * { min-width: 0; }
@media (max-width: 991px) { #included .row1 { grid-template-columns: minmax(0, 1fr); } }
#included .btn-p { text-decoration: none; }

/* calmer (Evan 2026-10-04): smaller pills, the phone is the focus */
#included .tabs button { font-size: 16px; height: 44px; padding: 0 18px; }
#included .tabs button[aria-selected="true"] { transform: none; }


/* motion kit: a short loading shimmer (engine m.shimmer) */
#included .ad-shim { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: inherit; background: var(--fill, #eee); pointer-events: none; }
#included .ad-shim i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
@media (prefers-reduced-motion: reduce) { #included .ad-shim { display: none; } }

/* === motion-a === */
#included .ma-fid-ok { position: absolute; left: 50%; top: 18px; width: 54px; height: 54px; margin-left: -27px; color: #007AFF; pointer-events: none; }
#included .ma-ring { position: absolute; left: -6px; top: -6px; width: 68px; height: 68px; color: var(--ac); pointer-events: none; }
#included .ma-tog-off { position: absolute; inset: 0; border-radius: inherit; background: #E9E9EA; }
#included .ma-glow { position: absolute; left: 0; right: 0; border-radius: 5px; box-shadow: 0 0 0 3px rgba(107,46,143,.2), 0 8px 24px rgba(107,46,143,.35); opacity: 0; pointer-events: none; }
#included .ma-typ { position: absolute; left: 0; display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 15px; border-radius: 19px; background: #E9E9EB; transform-origin: left bottom; opacity: 0; pointer-events: none; }
#included .ma-typ i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; }

#included .ma-pk-dim { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.2); opacity: 0; pointer-events: none; }
#included .ma-pk { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 6px 0 40px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,.12); translate: 0 101%; pointer-events: none; }
#included .ma-pk-h { text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; padding: 12px 0 8px; }
#included .ma-pk-r { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 20px 8px 24px; }
#included .ma-pk-r + .ma-pk-r::before { content: ""; position: absolute; top: 0; left: 84px; right: 0; height: .8px; background: var(--sep); }
#included .ma-ck { width: 20px; height: 20px; color: #007AFF; flex: none; }
#included .ma-pk-r + .ma-pk-r .ma-ck { opacity: 0; }
#included .ps-cardart.ma-mc { background: #2E6B5A; }
#included .ma-ll-bg { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; }
#included .ma-ll { position: absolute; left: 8px; right: 8px; bottom: 132px; z-index: 5; overflow: hidden; border-radius: 22px; background: rgba(245,245,245,.94); color: #000; transform-origin: 50% 100%; opacity: 0; pointer-events: none; }
#included .ma-ll-img { display: block; width: 100%; height: 190px; object-fit: cover; }
#included .ma-ll-in { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px 16px; }
#included .ma-ll .lk-b { font-size: 17px; line-height: 22px; letter-spacing: -.4px; }
#included .ma-ll-d { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: rgba(60,60,67,.6); }
#included .ma-pop { position: absolute; left: 36px; right: 4px; z-index: 3; padding: 11px 14px 12px; border-radius: 14px; background: #fff; color: #000; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.08); font-size: 13px; line-height: 18px; transform-origin: 50% 0; opacity: 0; pointer-events: none; }
#included .ma-pop span { display: block; color: rgba(60,60,67,.6); }
#included .ma-pop .ma-pop-t { margin-bottom: 2px; color: #000; font-size: 15px; line-height: 20px; font-weight: 600; }
#included .msg-th [data-seq] .ma-msg { order: 5; }

/* === end motion-a === */

/* === motion-b === */
#included .app-chat .ad-shim { background: #1E293B; }
#included .app-chat .ad-shim i { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
#included .app-chat .app-top { position: relative; z-index: 2; background: #0F172A; }
#included .app-acts .mb-fill { margin-left: -34px; color: #E2E8F0; }
#included .mb-ring { position: absolute; left: 0; right: 0; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--ac); pointer-events: none; z-index: 2; }
#included .seg.mb-seg { position: relative; }
#included .seg.mb-seg span { position: relative; z-index: 1; }
#included .seg.mb-seg span.on { background: none; box-shadow: none; }
#included .mb-pill { position: absolute; top: 2px; bottom: 2px; border-radius: 7px; background: #636366; }
#included .mb-hl { position: absolute; inset: -5px -8px; z-index: -1; border-radius: 10px; background: rgba(255,255,255,.07); opacity: 0; }
#included .mb-dim { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.2); opacity: 0; pointer-events: none; }
#included .mb-pick { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 10px 0 34px; border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,.12); translate: 0 100%; }
#included .mb-pick-h { padding: 12px 24px 8px; }
#included .mb-ck { width: 22px; height: 22px; margin-left: auto; fill: none; stroke: #007AFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#included .mb-det { margin-top: 40px; padding-top: 6px; box-shadow: inset 0 .8px 0 var(--sep); }
#included .mb-det-r { display: flex; justify-content: space-between; padding: 6px 0; }
#included .mb-det-r:last-child span { color: var(--ink); font-weight: 600; }

/* === end motion-b === */

/* "What could your app do?" (Evan 2026-10-04, picked A in inc-lab): the app types on top, the step names on the left (tap one
   to jump to that screen; the current one is black with a dot in the app colour), the phone in the centre, the caption on the right,
   one button under. Replaces the eyebrow, the instruction line, the step bars and "Don't see it?". */
#included .ih { text-align: center; margin-bottom: 36px; }
#included .ih h2 { margin: 0; }
#included .row1 { display: grid; grid-template-columns: minmax(0, 1fr) 348px minmax(0, 1fr); grid-template-areas: "tabs tabs tabs" "feats phone fcap" "acts acts acts"; column-gap: clamp(32px, 5vw, 80px); row-gap: 44px; align-items: center; }
#included .row1 > div:first-child { display: contents; }
#included .tabs { grid-area: tabs; justify-content: center; gap: 8px; }
#included .tabs button { display: inline-flex; align-items: center; height: 44px; font-size: 16px; padding: 0 18px; }
#included .tabs button[aria-selected="true"] { box-shadow: inset 0 1.5px 1px rgba(255,255,255,.18), 0 8px 18px -8px rgba(0,0,0,.45); }
#included .phone { grid-area: phone; margin: 0; justify-self: center; }
#included .feats { grid-area: feats; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; }
#included .feats[hidden] { display: none; }
#included .feats button { position: relative; border: 0; padding: 12px 0; background: none; font: inherit; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; color: #939396; text-align: right; cursor: pointer; transition: color .35s; }
#included .feats button:hover { color: #6e6e73; }
#included .feats button[aria-current="step"] { color: #000; }
#included .feats button span::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 14px; border-radius: 50%; vertical-align: middle; background: var(--dot, #000); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .45s cubic-bezier(.3,1.4,.5,1); }
#included .feats button[aria-current="step"] span::after { opacity: 1; transform: none; }
#included .feats button:focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 6px; }
#included .fcap { grid-area: fcap; justify-self: start; margin: 0; max-width: 300px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s cubic-bezier(.65,0,.35,1); }
#included .fcap.on { opacity: 1; transform: none; }
#included .fcap .ft { margin: 0 0 12px; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; color: #000; }
#included .fcap .fd { margin: 0; font-size: 18px; line-height: 1.45; color: #48484a; }
#included .acts { grid-area: acts; justify-content: center; margin: 0; }
@media (min-width: 992px) {
  #included .tabs { gap: 10px; }
  #included .tabs button { height: 52px; font-size: 18px; padding: 0 22px; }
  #included .btn-p { height: 58px; padding: 0 34px; font-size: 19px; }
}
@media (min-width: 992px) and (max-width: 1279px) { #included .tabs button { height: 46px; font-size: 16px; padding: 0 18px; } }
@media (max-width: 991px) {
  #included .row1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "phone" "fcap" "feats" "acts"; row-gap: 28px; }
  #included .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  #included .tabs button { flex: none; }
  #included .fcap { justify-self: center; text-align: center; }
  #included .feats { justify-self: center; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  #included .feats button { font-size: 16px; padding: 6px 0; }
  #included .feats button span::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { #included .fcap, #included .feats button, #included .feats button span::after { transition: none; } }
@media (max-width: 1333px) { #included .feats button { color: #757578; } #included .feats button[aria-current="step"] { color: #000; } } /* smaller text on narrower screens needs 4.5:1 (Evan approved darker inactive steps) */