/* 保用期 (warranty/index.html): the repair warranty, told like the order walk-through (order/) in
 * the learn site's dark studio. One warm "covered" green (--ok), amber for 優惠價, coral for what
 * the warranty leaves out. Each step's picture is drawn here and plays when its step opens
 * (.sc.on); js/warranty/main.js steps, scales the pictures and runs the checker.
 * Phones: picture on top, words under it, thumb nav at the bottom with Fixes Baby in its right
 * corner. Desktop: words left, picture right. Body text never under 16px on phones. */

:root {
  --bg: #060a13;
  --ink: #eef3fb;
  --ink-2: #c3cfdf;
  --ink-3: #8795aa;
  --line: rgba(170, 195, 230, 0.18);
  --glass: rgba(12, 18, 30, 0.66);
  --panel: rgba(16, 24, 40, 0.86);
  --cyan: #5fe6ff;
  --lime: #c8ff5a;
  --ok: #7dffb0;
  --amber: #ffc25c;
  --coral: #ff8a78;
  --cta: linear-gradient(100deg, #6ff7ff 0%, #b8ff5c 55%, #e9ff7a 100%);
  --cta-glow: 0 0 0 1px rgba(214, 255, 150, 0.6), 0 10px 40px -6px rgba(140, 255, 200, 0.6), 0 0 80px -12px rgba(110, 240, 255, 0.5);
  --sans: "Noto Sans TC", "PingFang HK", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 72px;
  --top-h: 60px;
  --baby: 80px; /* room kept for Fixes Baby in the nav's right corner */
  --fxc-bottom: calc(var(--safe-b) + 4px);
  --fxc-right: 12px;
  color-scheme: dark;
}
/* This page points at Fixes Baby itself; its pop-up greeting would cover the pictures. */
.fxc-teaser { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
img, svg { -webkit-user-drag: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------------------------------------------------------------- */
/* Background                                                         */
/* ---------------------------------------------------------------- */

.bg { position: fixed; inset: 0; background: radial-gradient(120% 70% at 50% 18%, #0e1d38 0%, #070c17 55%, #04070d 100%); }
.bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.16; transition: opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.bg-a { width: 80vmax; height: 80vmax; left: -30vmax; top: -40vmax; background: radial-gradient(circle, #8ff2ff 0%, transparent 62%); }
.bg-b { width: 80vmax; height: 80vmax; right: -30vmax; bottom: -45vmax; background: radial-gradient(circle, #9dffc4 0%, transparent 62%); }
.bg .bg-grid { inset: 0; width: auto; height: auto; border-radius: 0; filter: none; opacity: 1; background-image: linear-gradient(rgba(120, 170, 240, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 240, 0.05) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 100%); }
body[data-part="flow"] .bg-a { opacity: 0.24; transform: translate(10vmax, 6vmax); }
body[data-part="check"] .bg-b, body[data-part="end"] .bg-b { opacity: 0.3; transform: translate(-8vmax, -10vmax); }

.flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eafff2 20%, rgba(125, 255, 176, 0.45) 40%, rgba(120, 220, 255, 0) 70%); }
.flash.go { animation: flash 1s var(--ease) forwards; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: 0.55; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- */
/* Top bar and nav                                                    */
/* ---------------------------------------------------------------- */

.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 16px 0; display: flex; align-items: center; gap: 12px; }
.logo { flex: none; display: block; line-height: 0; }
.logo img { height: 28px; width: auto; display: block; }
.track { flex: 1; display: flex; max-width: 280px; margin-left: auto; }
.track i { flex: 1; height: 2px; background: rgba(160, 190, 230, 0.22); transition: background 0.4s; }
.track i.done { background: rgba(125, 255, 176, 0.55); }
.track i.now { height: 3px; border-radius: 3px; background: var(--cta); box-shadow: 0 0 10px rgba(180, 255, 140, 0.8); }
body[data-part="hero"] .track { visibility: hidden; }
.lang { flex: none; display: flex; padding: 3px; gap: 2px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lang button { min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 99px; background: none; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--cta); color: #06210e; }
.snd { flex: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; font-weight: 700; cursor: pointer; }
.snd svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snd .spk { fill: currentColor; }
.snd[aria-pressed="false"] .waves, .snd[aria-pressed="true"] .mute { display: none; }
.snd[aria-pressed="true"] { border-color: rgba(200, 255, 90, 0.6); color: var(--lime); }

.nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-b)); padding: 0 var(--baby) var(--safe-b) 14px; display: flex; align-items: center; gap: 10px; transition: opacity 0.4s; }
body[data-part="hero"] .nav { opacity: 0; pointer-events: none; }
.nav-btn { position: relative; width: 50px; height: 50px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: inherit; cursor: pointer; display: grid; place-items: center; transition: transform 0.15s, opacity 0.3s; }
.nav-btn:active { transform: scale(0.94); }
.nav-btn > svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn.next { background: var(--cta); color: #06210e; border: 0; box-shadow: var(--cta-glow); }
.nav-btn:disabled { opacity: 0.3; cursor: default; }
.nav-btn.play { width: 58px; height: 58px; border: 0; background: rgba(10, 18, 32, 0.72); }
.play .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.play .ring-bg { stroke: rgba(160, 190, 230, 0.22); stroke-width: 3; }
.play .ring-fg { stroke: var(--lime); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: 157.08; }
.play .ico { position: relative; width: 22px; height: 22px; fill: currentColor; }
.play .ico-play, .nav.held .play .ico-pause { display: none; }
.nav.held .play .ico-play { display: block; }
.nav:not(.auto) .play { display: none; }
.nav-mid { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; margin-left: 4px; font-size: 15px; line-height: 1.25; color: var(--ink-2); }
.nav-mid b { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nav-mid small { font-size: 14px; white-space: nowrap; }
.nav-state { display: none; font-size: 13px; font-weight: 700; color: var(--lime); }
.nav.held .nav-state { display: block; }

/* ---------------------------------------------------------------- */
/* Scenes                                                             */
/* ---------------------------------------------------------------- */

.deck { position: fixed; inset: 0; z-index: 5; }
.sc { position: absolute; inset: calc(var(--top-h) + var(--safe-t)) 0 calc(var(--nav-h) + var(--safe-b)); padding: 6px 20px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease), visibility 0s 0.55s; }
.sc.back { transform: translateX(-28px); }
.sc.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease) 0.08s, transform 0.6s var(--ease) 0.08s, visibility 0s; }
.sc-hero { inset: calc(var(--top-h) + var(--safe-t)) 0 calc(14px + var(--safe-b)); }
.sc-hero, .sc-end { justify-content: center; }

.vis { position: relative; flex: 1 1 auto; min-height: 0; }
/* The pictures are drawn on a 400×320 board and scaled to the room left (main.js fit()). */
.fit { position: absolute; left: 50%; top: 50%; width: 400px; height: 320px; margin: -160px 0 0 -200px; transform: scale(var(--s, 1)); transform-origin: 50% 50%; }

.copy { position: relative; flex: none; max-width: 640px; }
.copy > * { opacity: 0; transform: translateY(14px); transition: opacity 0.4s var(--ease), transform 0.45s var(--ease); }
.sc.on .copy > * { opacity: 1; transform: none; }
.sc.on .copy > :nth-child(2) { transition-delay: 0.08s; }
.sc.on .copy > :nth-child(3) { transition-delay: 0.16s; }
.sc.on .copy > :nth-child(n+4) { transition-delay: 0.24s; }
.kicker { margin: 0 0 10px; font-size: 16px; letter-spacing: 0.06em; color: var(--cyan); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.kicker .step { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--mono); color: #06210e; background: var(--cta); letter-spacing: 0; }
.copy h1 { font-size: clamp(36px, 10vw, 80px); line-height: 1.12; font-weight: 900; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.copy h2 { font-size: clamp(28px, 7.6vw, 54px); line-height: 1.2; font-weight: 900; }
.copy p { margin: 12px 0 0; font-size: 17px; line-height: 1.68; color: var(--ink-2); max-width: 32em; }
.copy .lead { font-size: 18px; }
html[lang="en"] .copy h1, html[lang="en"] .copy h2 { letter-spacing: -0.01em; }
/* On wide screens the headline is sized to the text column so each phrase stays
   on one line; English and Japanese lines are longer, so they get smaller sizes. */
@media (min-width: 900px) {
  .copy h1 { font-size: clamp(36px, 6.5vw, 80px); }
  html[lang="ja"] .copy h1 { font-size: clamp(32px, 5vw, 68px); }
  html[lang="en"] .copy h1 { font-size: clamp(32px, 4.2vw, 56px); }
}

.routes { display: grid; gap: 10px; margin-top: 22px; max-width: 520px; }
.route { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; min-height: 68px; padding: 10px 14px 10px 12px; text-align: left; cursor: pointer; color: #fff; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.2s var(--ease), border-color 0.3s; }
.route .rn { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 19px; font-weight: 900; border: 1.5px solid rgba(160, 200, 240, 0.45); }
.route b { grid-column: 2; font-size: 19px; font-weight: 800; }
.route small { grid-column: 2; font-size: 15px; color: var(--ink-3); margin-top: 2px; }
.route .ra, .route > i[aria-hidden]:last-child:not(.rn) { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-style: normal; font-size: 20px; }
.route .ra svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.route:hover { border-color: rgba(200, 255, 90, 0.6); transform: translateY(-1px); }
.route:active { transform: scale(0.98); }
.route.r1 { min-height: 88px; border: 0; color: #06210e; background: var(--cta); box-shadow: var(--cta-glow), 0 18px 50px -18px rgba(170, 255, 120, 0.75); }
.route.r1 .rn { width: 50px; height: 50px; font-size: 25px; border: 0; background: #06210e; color: var(--lime); }
.route.r1 b { font-size: 23px; font-weight: 900; }
.route.r1 small { color: rgba(6, 33, 14, 0.75); font-weight: 600; }
.route.r1 .ra { width: 42px; height: 42px; border: 0; background: rgba(6, 33, 14, 0.12); }
.route.r1::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 3.6s 1.2s var(--ease) infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.textver { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--ink-3); font-size: 15px; text-decoration: none; }
.textver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.textver:hover { color: var(--ink); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 18px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--cta); color: #06210e; font-size: 17px; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: var(--cta-glow); }
.ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; background: var(--glass); color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; }

/* Fixes Baby: the crayon art as it is (www / repair), on a white sticker so it reads on the dark. */
.baby { margin: 0; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 18px 40px -12px rgba(0, 0, 0, 0.7), 0 0 50px -10px rgba(125, 255, 176, 0.5); }
.baby img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Pause holds the pictures too. */
body.held .sc.on *, body.held .sc.on *::before, body.held .sc.on *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- */
/* Hero: the warranty card                                            */
/* ---------------------------------------------------------------- */

.wcard { position: absolute; left: 40px; top: 6px; width: 270px; padding: 16px 18px 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(28, 44, 70, 0.96), rgba(10, 18, 32, 0.96)); border: 1px solid rgba(125, 255, 176, 0.35);
  box-shadow: 0 30px 80px -20px rgba(40, 200, 140, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); transform: rotate(-3deg); }
.sc.on .wcard { animation: card-in 0.9s var(--pop) both; }
@keyframes card-in { 0% { opacity: 0; transform: translateY(30px) rotate(-10deg) scale(0.9); } 100% { opacity: 1; transform: rotate(-3deg); } }
.wc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wc-head img { height: 20px; width: auto; }
.wc-head span { font-size: 14px; font-weight: 700; color: var(--ok); letter-spacing: 0.1em; }
.wc-ring { position: relative; width: 104px; height: 104px; margin: 12px auto 8px; }
.wc-ring svg, .ea-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.r-bg { stroke: rgba(125, 255, 176, 0.14); stroke-width: 9; }
.r-fg { stroke: url(#none); stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(125, 255, 176, 0.7)); }
.sc.on .wc-ring .r-fg { animation: ring 2.4s 0.5s var(--ease) forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.wc-ring p { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; align-content: center; }
.wc-ring b { font: 700 34px/1 var(--mono); color: #fff; }
.wc-ring small { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.wc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wc-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 14px; color: var(--ink-2); }
.wc-rows b { color: #fff; font-weight: 700; white-space: nowrap; }
.wc-rows li.hot { background: rgba(125, 255, 176, 0.14); }
.wc-rows li.hot b { color: var(--ok); }
.wc-foot { margin: 10px 0 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.wc-stamp { font-style: normal; font-size: 13px; font-weight: 900; color: var(--ok); padding: 2px 10px; border: 2px solid var(--ok); border-radius: 8px; transform: rotate(-8deg); opacity: 0; }
.sc.on .wc-stamp { animation: stamp 0.5s 2.6s var(--pop) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(2.4); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
.baby-hero { position: absolute; right: 18px; bottom: 6px; width: 104px; height: 104px; }
.sc.on .baby-hero { animation: baby-pop 0.8s 0.9s var(--pop) both, bob 3.6s 1.8s ease-in-out infinite; }
@keyframes baby-pop { 0% { opacity: 0; transform: scale(0.3) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------------------------------------------------------------- */
/* 1 Timeline                                                          */
/* ---------------------------------------------------------------- */

.tl { position: absolute; inset: 0; }
.tl-receipt { position: absolute; left: 0; top: 10px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #f4f7fb; color: #0b1426; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6); }
.tl-receipt b { font-size: 15px; }
.tl-receipt small { grid-column: 2; font-size: 12px; color: #5b6b80; }
.mono { font-family: var(--mono); }
.tl-tick { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #10b981; position: relative; }
.tl-tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sc.on .tl-receipt { animation: drop-in 0.6s var(--pop) both; }
@keyframes drop-in { 0% { opacity: 0; transform: translateY(-24px) scale(0.9); } 100% { opacity: 1; transform: none; } }
.tl-row { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; }
.tl-row.tl-parts { top: 92px; }
.tl-row.tl-clean { top: 176px; }
.tl-row p { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.tl-row > b { grid-row: 1; grid-column: 2; font: 700 16px/1.2 var(--mono); color: var(--ok); }
.tl-row.tl-clean > b { color: var(--cyan); }
.tl-bar { grid-column: 1 / span 2; height: 26px; display: flex; gap: 4px; }
.tl-bar span { flex: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(160, 190, 230, 0.25); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #36d98a, #7dffb0); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 18px -4px rgba(125, 255, 176, 0.7); }
.tl-clean .tl-bar i { background: linear-gradient(90deg, #2bb8e0, #5fe6ff); box-shadow: 0 0 18px -4px rgba(95, 230, 255, 0.7); }
.sc.on .tl-bar i { animation: grow 0.7s var(--ease) forwards; }
.sc.on .tl-parts .tl-bar span:nth-child(1) i { animation-delay: 0.6s; } .sc.on .tl-parts .tl-bar span:nth-child(2) i { animation-delay: 1.2s; } .sc.on .tl-parts .tl-bar span:nth-child(3) i { animation-delay: 1.8s; }
.sc.on .tl-clean .tl-bar i { animation-delay: 2.5s; }
@keyframes grow { to { transform: scaleX(1); } }
.tl-months { position: absolute; left: 0; right: 0; top: 252px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 13px; color: var(--ink-3); text-align: center; }
.tl-now { position: absolute; top: 120px; bottom: 30px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; opacity: 0; }
.tl-now span { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: #fff; color: #0b1426; white-space: nowrap; }
.sc.on .tl-now { animation: now-walk 3s 3.3s var(--ease) forwards; }
@keyframes now-walk { 0% { opacity: 0; left: 0; } 10% { opacity: 1; } 100% { opacity: 1; left: 52%; } }

/* ---------------------------------------------------------------- */
/* 2 Same problem                                                      */
/* ---------------------------------------------------------------- */

.same { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: grid; gap: 12px; align-content: center; }
.same li { position: relative; display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 6px; padding: 10px 10px 26px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); opacity: 0; }
.sc.on .same li { animation: rise 0.55s var(--ease) forwards; }
.sc.on .same li:nth-child(2) { animation-delay: 1.3s; } .sc.on .same li:nth-child(3) { animation-delay: 2.6s; }
@keyframes rise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
.same span { display: grid; gap: 2px; min-width: 0; }
.same small { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }
.same b { font-size: 14.5px; line-height: 1.35; }
.sm-arrow { height: 2px; background: rgba(160, 190, 230, 0.4); position: relative; }
.sm-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: rgba(160, 190, 230, 0.6); }
.same em { position: absolute; left: 10px; bottom: 6px; font-style: normal; font-size: 13px; font-weight: 800; padding: 1px 10px; border-radius: 99px; opacity: 0; }
.same .yes em { color: #06210e; background: var(--ok); }
.same .no em { color: #2a0d08; background: var(--coral); }
.sc.on .same em { animation: stamp 0.45s var(--pop) forwards; animation-delay: 0.7s; }
.sc.on .same li:nth-child(2) em { animation-delay: 2s; } .sc.on .same li:nth-child(3) em { animation-delay: 3.3s; }
.same .yes { border-color: rgba(125, 255, 176, 0.45); }

/* ---------------------------------------------------------------- */
/* 3 Free visit: the route                                             */
/* ---------------------------------------------------------------- */

.route-map { position: absolute; inset: 0; }
.rm-road { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.rm-path { stroke: rgba(160, 190, 230, 0.16); stroke-width: 18; stroke-linecap: round; }
.rm-dash { stroke: var(--ok); stroke-width: 3; stroke-dasharray: 8 10; stroke-linecap: round; opacity: 0.8; }
.sc.on .rm-dash { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -36; } }
.rm-pin { position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; font-weight: 700; white-space: nowrap; opacity: 0; }
.rm-pin i { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--cta) center / 18px no-repeat; }
.rm-pin.p1 { left: 8px; top: 34px; } .rm-pin.p2 { left: 120px; top: 126px; } .rm-pin.p3 { right: 0; top: 262px; }
.sc.on .rm-pin { animation: rise 0.5s var(--ease) forwards; }
.sc.on .rm-pin.p2 { animation-delay: 1.3s; } .sc.on .rm-pin.p3 { animation-delay: 2.5s; }
.ico-chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306210e' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") !important; }
.ico-van { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306210e' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M2 16V6h12v10M14 9h4l4 4v3h-8'/%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E") !important; }
.ico-wrench { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306210e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 0 5 5L12 19a2 2 0 0 1-3-3l7.5-7.5a4 4 0 0 0-2-2z'/%3E%3C/svg%3E") !important; }
.rm-van { position: absolute; left: 0; top: 0; width: 56px; height: 36px; offset-path: path("M60 70 C 160 70, 120 160, 210 170 S 330 210, 336 236"); offset-distance: 0%; offset-rotate: 0deg; opacity: 0; }
.rm-van svg { width: 100%; height: 100%; fill: #f4f7fb; stroke: #0b1426; stroke-width: 2; stroke-linejoin: round; }
.rm-van .win { fill: var(--cyan); }
.sc.on .rm-van { animation: drive 2.6s 0.5s var(--ease) forwards; }
@keyframes drive { 0% { opacity: 0; offset-distance: 0%; } 8% { opacity: 1; } 100% { opacity: 1; offset-distance: 100%; } }
.rm-stamp { position: absolute; right: 18px; top: 18px; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; align-content: center; border: 4px solid var(--ok); color: var(--ok); transform: rotate(-12deg); opacity: 0;
  background: radial-gradient(circle, rgba(125, 255, 176, 0.16), transparent 70%); box-shadow: 0 0 40px -6px rgba(125, 255, 176, 0.6); }
.rm-stamp b { font: 700 38px/1 var(--mono); }
.rm-stamp small { font-size: 13px; font-weight: 800; margin-top: 4px; }
.sc.on .rm-stamp { animation: stamp-big 0.55s 3.3s var(--pop) forwards; }
@keyframes stamp-big { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* ---------------------------------------------------------------- */
/* 4 Parts: genuine, test run, pay after                               */
/* ---------------------------------------------------------------- */

.parts { position: absolute; inset: 0; }
.pt-box { position: absolute; left: 6px; top: 16px; width: 120px; height: 110px; opacity: 0; }
.pt-box svg { width: 100%; height: 100%; fill: #c99a5b; stroke: #6b4a22; stroke-width: 2; stroke-linejoin: round; }
.pt-box .lid { fill: #e0b678; }
.pt-box .tape { fill: none; stroke: #f4f7fb; stroke-width: 6; }
.pt-seal { position: absolute; right: -14px; bottom: -6px; font-style: normal; font-size: 13px; font-weight: 900; color: #06210e; background: var(--ok); padding: 3px 10px; border-radius: 99px; transform: rotate(-8deg); white-space: nowrap; box-shadow: 0 6px 20px -6px rgba(125, 255, 176, 0.8); }
.sc.on .pt-box { animation: drop-in 0.6s var(--pop) forwards; }
.pt-drum { position: absolute; left: 150px; top: 6px; width: 110px; height: 128px; opacity: 0; }
.pt-drum svg { width: 100%; height: 100%; fill: none; stroke: #dbe6f5; stroke-width: 3; }
.pt-drum rect { fill: rgba(255, 255, 255, 0.06); }
.pt-drum .spin { transform-origin: 60px 84px; }
.pt-drum .led { fill: #ff6b5a; stroke: none; }
.sc.on .pt-drum { animation: rise 0.5s 0.6s var(--ease) forwards; }
.sc.on .pt-drum .spin { animation: spin 0.9s 1.1s linear 3; }
.sc.on .pt-drum .led { animation: led 0.1s 3.8s forwards; }
@keyframes led { to { fill: var(--ok); filter: drop-shadow(0 0 6px var(--ok)); } }
@keyframes spin { to { transform: rotate(360deg); } }
.pt-run { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.pt-list { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 168px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-list li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14.5px; font-weight: 700; line-height: 1.3; opacity: 0; }
.pt-list i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); position: relative; }
.pt-list i::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 5px; height: 9px; border: solid #06210e; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.sc.on .pt-list li { animation: rise 0.45s var(--ease) forwards; }
.sc.on .pt-list li:nth-child(1) { animation-delay: 1s; } .sc.on .pt-list li:nth-child(2) { animation-delay: 1.8s; } .sc.on .pt-list li:nth-child(3) { animation-delay: 3.9s; } .sc.on .pt-list li:nth-child(4) { animation-delay: 4.6s; }
.sc.on .pt-list li:nth-child(3) { border-color: rgba(125, 255, 176, 0.6); }

/* ---------------------------------------------------------------- */
/* 5 Diagnosis                                                         */
/* ---------------------------------------------------------------- */

.diag { position: absolute; inset: 0; }
.dg-board { position: absolute; left: 40px; top: 20px; width: 260px; height: 195px; }
.dg-board svg { width: 100%; height: 100%; fill: none; stroke: rgba(95, 230, 255, 0.55); stroke-width: 2; }
.dg-board rect:first-child { fill: rgba(10, 60, 50, 0.55); stroke: rgba(95, 230, 255, 0.7); }
.dg-board .trace { stroke: var(--lime); stroke-dasharray: 4 5; }
.dg-hit { position: absolute; left: 61%; top: 62%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; border: 3px solid var(--ok); opacity: 0; box-shadow: 0 0 24px var(--ok); }
.sc.on .dg-hit { animation: hit 0.9s 2.6s var(--ease) forwards; }
@keyframes hit { 0% { opacity: 0; transform: scale(2); } 60% { opacity: 1; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
.dg-lens { position: absolute; left: 30px; top: 40px; width: 90px; height: 90px; }
.dg-lens svg { width: 100%; height: 100%; fill: rgba(95, 230, 255, 0.12); stroke: #f4f7fb; stroke-width: 5; stroke-linecap: round; }
.sc.on .dg-lens { animation: scan 2.6s var(--ease) forwards; }
@keyframes scan { 0% { transform: translate(0, 0); } 35% { transform: translate(150px, -10px); } 70% { transform: translate(40px, 90px); } 100% { transform: translate(128px, 76px); } }
.dg-tag { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; display: grid; gap: 2px; justify-items: center; text-align: center; opacity: 0; }
.dg-tag b { font-size: 18px; font-weight: 900; color: #06210e; background: var(--ok); padding: 4px 16px; border-radius: 99px; }
.dg-tag small { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.sc.on .dg-tag { animation: rise 0.5s 3.4s var(--ease) forwards; }

/* ---------------------------------------------------------------- */
/* 6 Life                                                              */
/* ---------------------------------------------------------------- */

.life { position: absolute; inset: 0; display: grid; align-content: center; gap: 22px; }
.lf-row { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; }
.lf-row > span { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.lf-row > b { grid-row: 1; grid-column: 2; font-size: 15px; color: var(--ok); }
.lf-bar { grid-column: 1 / span 2; position: relative; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.lf-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; border-radius: 8px; background: linear-gradient(90deg, #36d98a, #7dffb0); transform-origin: 0 50%; transform: scaleX(0); }
.lf-bar.p i { width: 100%; background: linear-gradient(90deg, #2bb8e0 0%, #5fe6ff 60%, rgba(95, 230, 255, 0) 100%); }
.sc.on .lf-bar.w i { animation: grow 0.8s 0.4s var(--ease) forwards; }
.sc.on .lf-bar.p i { animation: grow 2.4s 1.4s var(--ease) forwards; }
.lf-bar.p em { position: absolute; left: 22%; top: -4px; bottom: -4px; width: 2px; background: #fff; opacity: 0.7; }
.lf-note { margin: 4px 0 0; justify-self: center; font-size: 20px; font-weight: 900; padding: 8px 18px; border-radius: 14px; border: 2px dashed rgba(125, 255, 176, 0.5); color: #fff; opacity: 0; }
.sc.on .lf-note { animation: rise 0.5s 3.6s var(--ease) forwards; }

/* ---------------------------------------------------------------- */
/* 7 Fork: same / other problem                                        */
/* ---------------------------------------------------------------- */

.fork { position: absolute; inset: 0; }
.fk-top { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; font-weight: 800; white-space: nowrap; }
.ico-q { width: 28px; height: 28px; border-radius: 50%; background: var(--amber); position: relative; }
.ico-q::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 17px/1 var(--sans); color: #2a1a00; }
.fk-lines { position: absolute; left: 50px; top: 50px; width: 300px; height: 90px; fill: none; stroke: rgba(160, 190, 230, 0.4); stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; }
.sc.on .fk-lines { animation: draw 1s 0.5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fk-a, .fk-b { position: absolute; top: 146px; width: 168px; padding: 12px 12px 14px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line); display: grid; gap: 4px; text-align: center; opacity: 0; }
.fk-a { left: 28px; border-color: rgba(125, 255, 176, 0.6); }
.fk-b { right: 28px; border-color: rgba(255, 194, 92, 0.6); }
.fk-a b, .fk-b b { font-size: 16px; }
.fk-a span { font-size: 15px; font-weight: 800; color: var(--ok); }
.fk-b span { font-size: 15px; color: var(--ink-2); }
.sc.on .fk-a { animation: rise 0.5s 1.3s var(--ease) forwards; }
.sc.on .fk-b { animation: rise 0.5s 1.8s var(--ease) forwards; }
.fk-ribbon { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) rotate(-3deg); font-style: normal; font-size: 13px; font-weight: 900; padding: 3px 12px; border-radius: 6px; background: var(--amber); color: #2a1a00; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(255, 194, 92, 0.9); opacity: 0; }
.sc.on .fk-ribbon { animation: stamp 0.45s 2.6s var(--pop) forwards; }
.fk-c { position: absolute; left: 0; right: 0; bottom: 4px; margin: auto; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); opacity: 0; }
.ico-eye { width: 22px; height: 22px; border-radius: 50%; background: rgba(95, 230, 255, 0.2); border: 2px solid var(--cyan); }
.sc.on .fk-c { animation: rise 0.5s 3.3s var(--ease) forwards; }

/* ---------------------------------------------------------------- */
/* 8 Clearing                                                          */
/* ---------------------------------------------------------------- */

.clear { position: absolute; inset: 0; }
.cl-pipe { position: absolute; left: 40px; top: 10px; width: 320px; height: 90px; }
.cl-pipe svg { width: 100%; height: 100%; fill: none; }
.cl-pipe .pipe { stroke: rgba(160, 190, 230, 0.25); stroke-width: 26; stroke-linecap: round; }
.cl-pipe .pipe.in { stroke: rgba(95, 230, 255, 0.0); stroke-width: 16; }
.sc.on .cl-pipe .pipe.in { animation: water 1s 1.6s forwards; }
@keyframes water { to { stroke: rgba(95, 230, 255, 0.45); } }
.cl-pipe .gunk { fill: #7a5530; stroke: #7a5530; stroke-width: 3; }
.sc.on .cl-pipe .gunk { animation: flush 1.2s 0.7s var(--ease) forwards; }
@keyframes flush { to { transform: translate(140px, 60px) scale(0.3); opacity: 0; } }
.cl-pipe .flow circle { fill: #fff; opacity: 0; }
.sc.on .cl-pipe .flow circle { animation: bubble 1.4s 1.8s linear infinite; }
@keyframes bubble { 0% { opacity: 0; transform: translateX(-20px); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(30px); } }
.cl-tokens { position: absolute; left: 0; right: 0; top: 118px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk { display: grid; gap: 4px; padding: 12px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line); opacity: 0; }
.tk b { font-size: 15px; }
.tk span { font-size: 18px; font-weight: 900; }
.tk.free { border-color: rgba(125, 255, 176, 0.6); } .tk.free span { color: var(--ok); }
.tk.pay span { color: var(--amber); }
.tk.part { grid-column: 1 / span 2; grid-template-columns: 1fr auto; align-items: center; } .tk.part span { font-size: 16px; color: var(--cyan); }
.sc.on .tk { animation: rise 0.5s var(--ease) forwards; }
.sc.on .tk.free { animation-delay: 2.2s; } .sc.on .tk.pay { animation-delay: 2.8s; } .sc.on .tk.part { animation-delay: 3.5s; }

/* ---------------------------------------------------------------- */
/* 9 Door parts                                                        */
/* ---------------------------------------------------------------- */

.door { position: absolute; inset: 0; }
.dr-art { position: absolute; left: 0; top: 4px; width: 176px; height: 192px; fill: none; stroke-width: 6; }
.dr-art .body { fill: rgba(255, 255, 255, 0.05); stroke: rgba(160, 190, 230, 0.4); stroke-width: 3; }
.dr-art [class^="h-"] { stroke: rgba(160, 190, 230, 0.4); transition: stroke 0.3s, filter 0.3s; }
.dr-art .h-door { fill: rgba(95, 230, 255, 0.1); stroke-width: 3; }
.dr-art .h-handle, .dr-art .h-hinge { fill: rgba(160, 190, 230, 0.4); stroke: none; }
.dr-labels { list-style: none; margin: 0; padding: 0; position: absolute; left: 190px; right: 0; top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dr-labels li { font-size: 15px; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); opacity: 0.35; transition: opacity 0.3s, border-color 0.3s, color 0.3s; }
.door.lit-door .h-door, .door.lit-frame .h-frame, .door.lit-seal .h-seal, .door.lit-hook .h-hook { stroke: var(--lime); filter: drop-shadow(0 0 6px var(--lime)); }
.door.lit-handle .h-handle, .door.lit-hinge .h-hinge { fill: var(--lime); filter: drop-shadow(0 0 6px var(--lime)); }
.door.lit-door .l-door, .door.lit-frame .l-frame, .door.lit-seal .l-seal, .door.lit-handle .l-handle, .door.lit-hinge .l-hinge, .door.lit-hook .l-hook, .door.all li { opacity: 1; border-color: rgba(200, 255, 90, 0.7); color: var(--lime); }
.dr-chips { position: absolute; left: 0; right: 0; top: 212px; display: grid; gap: 8px; }
.dr-chips p { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); font-size: 15px; font-weight: 700; opacity: 0; }
.dr-chips i { flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative; }
.dr-chips .ok { border-color: rgba(125, 255, 176, 0.6); } .dr-chips .ok i { background: var(--ok); }
.dr-chips .ok i::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid #06210e; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.dr-chips .cut { border-color: rgba(255, 194, 92, 0.6); } .dr-chips .cut i { background: var(--amber); }
.dr-chips .cut i::after { content: "%"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 13px/1 var(--sans); color: #2a1a00; }
.sc.on .dr-chips p { animation: rise 0.5s var(--ease) forwards; }
.sc.on .dr-chips .ok { animation-delay: 3.4s; } .sc.on .dr-chips .cut { animation-delay: 4.1s; }

/* ---------------------------------------------------------------- */
/* 10 Refund                                                           */
/* ---------------------------------------------------------------- */

.refund { position: absolute; inset: 0; }
.rf-shield { position: absolute; left: 6px; top: 8px; width: 120px; height: 140px; }
.rf-shield svg { width: 100%; height: 100%; fill: rgba(125, 255, 176, 0.12); stroke: var(--ok); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 16px rgba(125, 255, 176, 0.45)); }
.rf-shield .chk { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 70; stroke-dashoffset: 70; }
.sc.on .rf-shield { animation: drop-in 0.6s var(--pop) both; }
.sc.on .rf-shield .chk { animation: draw 0.6s 2.8s var(--ease) forwards; }
.rf-steps { list-style: none; margin: 0; padding: 0; position: absolute; left: 146px; right: 0; top: 10px; display: grid; gap: 10px; }
.rf-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1.3; opacity: 0; }
.rf-steps i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--mono); font-style: normal; background: rgba(125, 255, 176, 0.18); color: var(--ok); }
.rf-steps li:last-child { border-color: rgba(125, 255, 176, 0.6); }
.sc.on .rf-steps li { animation: rise 0.45s var(--ease) forwards; }
.sc.on .rf-steps li:nth-child(1) { animation-delay: 0.7s; } .sc.on .rf-steps li:nth-child(2) { animation-delay: 1.5s; } .sc.on .rf-steps li:nth-child(3) { animation-delay: 2.3s; }
.rf-tip { position: absolute; left: 0; right: 0; top: 206px; margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 194, 92, 0.1); border: 1.5px dashed rgba(255, 194, 92, 0.55); font-size: 15px; line-height: 1.45; opacity: 0; }
.rf-tip b { flex: none; color: var(--amber); }
.sc.on .rf-tip { animation: rise 0.5s 3.4s var(--ease) forwards; }

/* ---------------------------------------------------------------- */
/* 11 Not covered                                                      */
/* ---------------------------------------------------------------- */

.out { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.out li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 86px; padding: 10px; border-radius: 16px; background: var(--panel); border: 1.5px solid rgba(255, 138, 120, 0.45); font-size: 14.5px; font-weight: 700; line-height: 1.35; opacity: 0; }
.out li.soft { border-color: rgba(255, 194, 92, 0.5); }
.out i { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 138, 120, 0.16) center / 22px no-repeat; }
.out li.soft i { background-color: rgba(255, 194, 92, 0.16); }
.sc.on .out li { animation: rise 0.45s var(--ease) forwards; }
.sc.on .out li:nth-child(2) { animation-delay: 0.35s; } .sc.on .out li:nth-child(3) { animation-delay: 0.7s; } .sc.on .out li:nth-child(4) { animation-delay: 1.05s; } .sc.on .out li:nth-child(5) { animation-delay: 1.4s; } .sc.on .out li:nth-child(6) { animation-delay: 1.75s; }
.out .o-cal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a78' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 14l6 5M15 14l-6 5'/%3E%3C/svg%3E"); }
.out .o-hand { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 0 5 5L12 19a2 2 0 0 1-3-3l7.5-7.5a4 4 0 0 0-2-2z'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.out .o-warn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E"); }
.out .o-rain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15a4 4 0 0 1 0-8 5 5 0 0 1 9.5-1A4 4 0 0 1 17 15z'/%3E%3Cpath d='M8 18l-1 3M12 18l-1 3M16 18l-1 3'/%3E%3C/svg%3E"); }
.out .o-new { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc25c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.out .o-door { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc25c' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='13' r='5'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- */
/* 12 Contact: the WhatsApp demo                                       */
/* ---------------------------------------------------------------- */

.phone { position: absolute; left: 50%; top: 0; width: 300px; margin-left: -150px; height: 320px; border-radius: 26px; overflow: hidden; background: #0b141a; border: 1px solid rgba(160, 190, 230, 0.25); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.8); }
.phone-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #1f2c34; }
.ph-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; }
.ph-av img { width: 100%; height: 100%; display: block; }
.ph-t { display: grid; }
.ph-t b { font-size: 15px; }
.ph-t small { font-size: 12px; color: #8696a0; }
.chat { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; align-content: start; }
.chat li { max-width: 86%; padding: 8px 10px; border-radius: 12px; font-size: 14px; line-height: 1.45; opacity: 0; }
.chat .me { justify-self: end; background: #005c4b; border-top-right-radius: 4px; }
.chat .bot { justify-self: start; background: #202c33; border-top-left-radius: 4px; }
.chat .vid { display: flex; align-items: center; gap: 8px; }
.chat .vid i { width: 64px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #2b3e4c, #121c24); position: relative; }
.chat .vid i::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -4px; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
.sc.on .chat li { animation: rise 0.4s var(--ease) forwards; }
.sc.on .chat li:nth-child(2) { animation-delay: 0.9s; } .sc.on .chat li:nth-child(3) { animation-delay: 2.1s; } .sc.on .chat li:nth-child(4) { animation-delay: 3.4s; }

html:not([lang="zh-Hant-HK"]) .chat li { font-size: 12.5px; line-height: 1.4; padding: 6px 9px; }
html:not([lang="zh-Hant-HK"]) .chat { gap: 6px; }
html:not([lang="zh-Hant-HK"]) .out li { font-size: 13.5px; line-height: 1.3; }
html:not([lang="zh-Hant-HK"]) .dr-labels li { font-size: 13px; padding: 6px 8px; white-space: nowrap; }
html:not([lang="zh-Hant-HK"]) .wc-rows li { font-size: 13px; }

/* ---------------------------------------------------------------- */
/* Checker                                                             */
/* ---------------------------------------------------------------- */

.sc-check { justify-content: flex-start; gap: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 10px; }
.sc-check .copy h2 { font-size: clamp(28px, 7vw, 46px); }
.quiz { position: relative; width: 100%; max-width: 620px; }
.qz-dots { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 6px; }
.qz-dots li { width: 28px; height: 5px; border-radius: 3px; background: rgba(160, 190, 230, 0.25); transition: background 0.3s; }
.qz-dots li.on { background: var(--ok); }
.qz { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.qz[hidden] { display: none; }
.qz.in { animation: rise 0.4s var(--ease) both; }
.qz legend { padding: 0; margin-bottom: 10px; font-size: 20px; font-weight: 800; }
.qz button { display: grid; gap: 2px; text-align: left; min-height: 58px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--glass); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.qz button b { font-size: 17px; }
.qz button small { font-size: 14.5px; color: var(--ink-3); }
.qz button:hover { border-color: rgba(125, 255, 176, 0.6); }
.qz button:active { transform: scale(0.98); }
.qz-back { margin-top: 12px; padding: 6px 2px; border: 0; background: none; color: var(--ink-3); font-size: 15px; cursor: pointer; }
.qz-res { position: relative; padding: 20px 18px 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(28, 44, 70, 0.96), rgba(10, 18, 32, 0.96)); border: 1.5px solid var(--res, var(--ok)); box-shadow: 0 24px 70px -24px var(--res, var(--ok)); animation: rise 0.45s var(--ease) both; }
.qz-res[hidden] { display: none; }
.qz-res h3 { font-size: 22px; line-height: 1.35; }
.qz-res::after { content: ""; display: block; clear: both; }
.qz-res p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.qz-res .res-note { font-size: 14px; color: var(--ink-3); }
.res-stamp { float: right; position: relative; margin: -6px -4px 10px 14px; shape-outside: circle(50%); shape-margin: 6px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--res, var(--ok)); color: var(--res, var(--ok)); font-style: normal; font-size: 17px; font-weight: 900; line-height: 1.1; text-align: center; white-space: nowrap; transform: rotate(-12deg); animation: stamp 0.5s 0.25s var(--pop) both; }
html:not([lang="zh-Hant-HK"]) .res-stamp { font-size: 13px; letter-spacing: -0.2px; }
.qz-res[data-tone="deal"] { --res: var(--amber); }
.qz-res[data-tone="look"] { --res: var(--cyan); }
.qz-res[data-tone="out"], .qz-res[data-tone="wash"] { --res: #9fb0c8; }
.res-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.res-acts .cta { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* End                                                                 */
/* ---------------------------------------------------------------- */

.end-art { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.ea-ring { position: absolute; inset: 0; }
.ea-ring .r-fg { stroke-width: 5; }
.sc.on .ea-ring .r-fg { animation: ring 1.6s var(--ease) forwards; }
.baby-end { position: absolute; inset: 22px; }
.sc.on .baby-end { animation: baby-pop 0.8s 0.4s var(--pop) both, bob 3.6s 1.4s ease-in-out infinite; }
.end-acts .routes { margin-top: 14px; }
.end-acts .route { min-height: 58px; }

/* ---------------------------------------------------------------- */
/* Desktop                                                             */
/* ---------------------------------------------------------------- */

@media (min-width: 900px) {
  :root { --top-h: 76px; --nav-h: 88px; --baby: 110px; --fxc-right: 28px; --fxc-bottom: calc(var(--safe-b) + 12px); }
  .top { padding: var(--safe-t) 32px 0; }
  .nav { padding-left: 32px; }
  .sc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy vis"; align-items: center; column-gap: 48px; padding: 10px 56px 20px; }
  .sc .copy { grid-area: copy; }
  .sc .vis { grid-area: vis; height: 100%; }
  .copy p { font-size: 18.5px; }
  .copy .lead { font-size: 20px; }
  .sc-check { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 24px; }
  .sc-check .copy { text-align: center; }
  .sc-check .kicker { justify-content: center; }
  .qz:not([data-q="3"]):not([data-q="3d"]):not([data-q="2"]) { grid-template-columns: 1fr 1fr; }
  .qz legend { grid-column: 1 / -1; font-size: 24px; }
  .quiz { max-width: 760px; }
  .qz button { min-height: 76px; padding: 16px 20px; }
  .qz button b { font-size: 19px; }
  .qz button small { font-size: 15.5px; }
  .qz-res h3 { font-size: 26px; }
  .qz-res p { font-size: 18px; }
}
@media (max-width: 899px) {
  .copy h1 { font-size: clamp(34px, 9.6vw, 60px); }
  .sc-hero .routes { margin-top: 16px; }
  .route.r1 { min-height: 76px; }
}
/* Short phones: tighter words so the picture keeps its room. */
@media (max-height: 720px) and (max-width: 899px) {
  .copy h2 { font-size: clamp(26px, 7vw, 40px); }
  .copy p { font-size: 16px; line-height: 1.6; margin-top: 8px; }
  .kicker { margin-bottom: 6px; }
  .route { min-height: 58px; }
  .route.r1 { min-height: 68px; }
  .sc-hero .lead { font-size: 16.5px; }
}
@media (max-width: 380px) {
  .top { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .snd span { display: none; }
  .snd { padding: 0 9px; }
}
/* Landscape phones: words left, picture right, like desktop but tight. */
@media (max-height: 520px) and (min-width: 560px) {
  .sc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy vis"; align-items: center; column-gap: 20px; }
  .sc .copy { grid-area: copy; } .sc .vis { grid-area: vis; height: 100%; }
  .copy h1, .copy h2 { font-size: 26px; }
  .copy p { font-size: 15px; margin-top: 6px; }
  .sc-hero .routes { gap: 8px; margin-top: 10px; }
  .route, .route.r1 { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .route.r1 b, .route b { font-size: 17px; }
  .route .rn, .route.r1 .rn { width: 34px; height: 34px; font-size: 17px; }
  .sc-hero .textver { display: none; }
  .sc-check { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}