/*
 * Fixes cleaning site, version 2 (Eddie 2026-10-04): a light page with the 3D washer in a
 * deep-water window. 21:02Z: no pure white (too glaring); the page sits on a soft mint, and cards
 * on a paler mint. Repair stays dark; the two sites should never look alike.
 * One stylesheet for every HK page: home (hero, SOP player, timeline, price, Fixes Baby, cases)
 * and the inner pages (pricing, service, FAQ, contact, thank-you).
 */
:root {
  --bg: #e4f3ee;
  --surface: #f2faf7;
  --ink: #0f2a2e;
  --muted: #4f6a6e;
  --line: #c6e0d7;
  --accent: #0e9f97;
  --accent-deep: #0b7f79;
  --accent-ink: #ffffff;
  --accent-soft: #cfeee6;
  --addon: #ffd76a;
  --addon-ink: #2a1a00;
  --grime: #7a5a34;
  /* the 3D window */
  --win: #072328;
  --win-ink: #e8f7f5;
  --win-muted: #9fc3c0;
  --win-glass: rgba(7, 35, 40, 0.86);
  --win-line: rgba(159, 240, 232, 0.18);
  --win-glow: 0 0 0 1px rgba(14, 159, 151, 0.35), 0 30px 70px -24px rgba(14, 120, 115, 0.45);
  --sans: "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 4vw, 40px);
  --top-h: 56px;
  color-scheme: light;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-deep); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--top-h);
  padding: 8px var(--pad); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { display: block; height: 28px; width: auto; } /* the Fixes logo: 28px tall on every site, every width */
.drop { width: 18px; height: 18px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #9ff0e8, var(--accent)); }
.top-nav { display: flex; gap: 2px; align-items: center; }
.top-nav a { white-space: nowrap; padding: 6px 10px; border-radius: 99px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; }
.top-nav a:hover, .top-nav a[aria-current="page"] { background: var(--accent-soft); }
.top-nav .top-cta { background: var(--accent); color: #fff; border: 0; cursor: pointer; }
.top-nav .top-cta:hover { background: var(--accent-deep); }
.top-nav .top-book { border: 1px solid var(--accent); color: var(--accent-deep); background: var(--surface); }
.top-nav .top-order { background: var(--addon); color: #3a2a00; }
.top-nav .top-order:hover { background: #ffcb3d; }

/* ---------- shared bits ---------- */
.sec-hd { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.ch-n { color: var(--accent-deep); font-weight: 900; font-size: 14px; letter-spacing: 0.08em; }
.sec-hd h2, .ask h2 { margin-top: 6px; font-size: clamp(26px, 6.4vw, 44px); font-weight: 900; }
.ch-p { margin-top: 8px; color: var(--muted); font-size: 16px; max-width: 640px; }
.eyebrow { color: var(--accent-deep); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; }
.shine { background: linear-gradient(90deg, #8a6a3e 0%, #9a8656 25%, var(--accent) 72%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--muted); max-width: 640px; margin-top: 14px; font-size: 17px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 99px; text-decoration: none; font-weight: 800; border: 1px solid transparent; cursor: pointer; }
.btn.main { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.main:hover { background: var(--accent-deep); }
.btn.sub { border-color: var(--line); background: var(--surface); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span, .proof span { font-size: 12.5px; padding: 2px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.badge { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 900; color: var(--addon-ink); background: var(--addon); }

/* ---------- hero: the C2 drop talks you through two hours, dirty to clean (Eddie 21:02Z) ---------- */
.hero { max-width: 1200px; margin: 0 auto; padding: 10px var(--pad) 40px; display: grid; gap: 8px; }
.h-stage { position: relative; height: min(52svh, 470px); min-height: 360px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 100%, #d9f3ef 0%, #e3f6f2 45%, var(--surface) 100%); border: 1px solid var(--line); transition: background 1.2s; }
.h-stage.clean { background: radial-gradient(120% 80% at 50% 100%, #bff1ea 0%, #dff7f2 45%, var(--surface) 100%); }
.h-clock { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(7, 35, 40, 0.6); }
.h-clock svg { width: 46px; height: 46px; }
.hc-face { fill: #f6fafa; stroke: var(--line); stroke-width: 3; }
.hc-ring { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 32px 32px; stroke-linecap: round; }
.hc-ticks path { stroke: #9fb9bb; stroke-width: 2.4; stroke-linecap: round; }
.hc-hour, .hc-min { stroke: var(--ink); stroke-linecap: round; transform-origin: 32px 32px; }
.hc-hour { stroke-width: 4; }
.hc-min { stroke-width: 2.6; }
.hc-pin { fill: var(--accent); }
.h-clock p { line-height: 1; }
.h-clock b { font: 800 22px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.h-clock small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); font-weight: 700; }
.h-bubble { position: absolute; top: 74px; left: 50%; z-index: 2; transform: translateX(-50%); width: min(86%, 400px); min-height: 56px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 18px; border-radius: 20px; background: var(--surface); border: 2px solid #16393f; box-shadow: 4px 5px 0 #16393f; }
.h-bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px; margin-left: -10px; background: var(--surface);
  border-right: 2px solid #16393f; border-bottom: 2px solid #16393f; transform: rotate(45deg); }
.h-bubble p { font-size: 18px; font-weight: 800; line-height: 1.45; color: var(--ink); }
.h-busy { display: none; align-items: center; gap: 4px; color: var(--accent-deep); font-weight: 800; font-size: 15px; }
.h-busy em { font-style: normal; margin-left: 6px; }
.h-busy i, .ap-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dots 1s infinite; }
.h-busy i:nth-child(2), .ap-dots i:nth-child(2) { animation-delay: 0.15s; }
.h-busy i:nth-child(3), .ap-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.h-bubble.thinking .h-busy { display: flex; }
.h-bubble.thinking p { display: none; }
.h-ctl { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.h-dots { flex: 1; display: flex; gap: 4px; }
.h-dots button { flex: 1; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; align-items: center; }
.h-dots i { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--grime) 30%, transparent); transition: background 0.3s; }
.h-dots .done i { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.h-dots .on i { background: var(--accent); }
.h-play { flex: none; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.h-copy h1 { font-size: clamp(32px, 8.4vw, 60px); font-weight: 900; line-height: 1.2; }
.h-copy .l { display: block; }
.h-copy .eyebrow { margin: 10px 0; }

/* ---------- the 3D SOP player: one 3D world filling its window (Eddie 2026-10-05) ----------
   The machine sits high; the top bar and the step card float on the 3D and are measured as insets,
   so the camera frames the machine clear of them (a visitor who drags it under the card still can). */
.sop { max-width: 1200px; margin: 0 auto; padding: 36px 0 20px; scroll-margin-top: var(--top-h); }
.player { height: 100%; }
.stage { position: relative; height: 100%; overflow: hidden; color: var(--win-ink); background: var(--win); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.stage .fx-callouts { position: absolute; inset: 0; --ink: #e9eef6; --ink-2: #aab4c3; --ink-3: #8390a3; }
.stage .fx-dot { background: var(--accent); }
/* The loading cover: the 3D capture under deep water with a spinner. It covers the machine until
   every shader is compiled and the first step is drawn, and its spinner runs on the compositor, so a
   phone busy compiling still shows it turning. */
.stage .loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 0 24px; text-align: center; color: #e3f1ef; font-weight: 700;
  background: linear-gradient(180deg, rgba(7,35,40,0.62), rgba(7,35,40,0.9)), url(/images/sop-3d-poster.webp) center / cover, #072328;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.stage[data-state="loading"] .loading::before { content: ""; width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.16); border-top-color: var(--accent); animation: stage-spin 0.9s linear infinite; }
.stage[data-state="ready"] .loading { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes stage-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stage[data-state="loading"] .loading::before { animation-duration: 2.4s; } }
.meter { flex: none; display: flex; align-items: center; gap: 8px; }
.meter p { font-size: 12px; color: var(--win-muted); letter-spacing: 0.08em; }
.meter-ring { --p: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--win) 78%, transparent 80% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--grime) 80%, transparent) 0); }
.meter-ring span { font-size: 16px; font-weight: 900; color: var(--win-ink); font-variant-numeric: tabular-nums; }
.meter-ring small { font-size: 10px; margin-left: 1px; color: var(--win-muted); }
.rinse { position: absolute; top: 76px; right: 14px; z-index: 3; padding: 5px 14px; border-radius: 99px; background: var(--win-glass); color: var(--win-ink); font-weight: 700; font-size: 14px; border: 1px solid var(--accent); }
.dock { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; padding: 12px 14px 12px 16px; border-radius: 18px; background: rgba(7, 35, 40, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--win-line); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); }
.dk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.count { margin: 0; font-size: 12px; color: #7ff0dc; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav button { height: 36px; padding: 0 16px; border-radius: 99px; cursor: pointer; border: 1px solid var(--win-line); background: rgba(255, 255, 255, 0.04); color: var(--win-ink); font: inherit; font-size: 14px; font-weight: 800; }
.nav #prev { width: 36px; padding: 0 0 2px; font-size: 20px; line-height: 1; }
.nav button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.nav button.primary::after { content: " ›"; }
.nav button:disabled { opacity: 0.3; cursor: default; }
.dk-bar { display: block; height: 3px; margin: 10px 0 9px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) calc(var(--step, 0.0833) * 100%), rgba(255, 255, 255, 0.12) 0); }
.dock h3 { font-size: 17px; line-height: 1.35; color: var(--win-ink); }
.dock #cap-see { margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--win-muted); }
.cap-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cap-foot .proof { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cap-foot .proof span { background: rgba(127, 240, 220, 0.1); border-color: transparent; color: var(--win-ink); }
@media (min-width: 900px) { .dock { left: 50%; right: auto; bottom: 18px; width: min(660px, calc(100% - 40px)); transform: translateX(-50%); padding: 14px 18px 14px 20px; } .dock h3 { font-size: 18px; } }
.tags3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag3d { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 800; white-space: nowrap; background: var(--win-glass); color: var(--win-ink); border: 1px solid var(--win-line); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.tag3d.clock { min-width: 44px; text-align: center; }
.tag3d.clock.now { background: var(--addon); color: #3a2a00; border-color: var(--addon); box-shadow: 0 0 0 4px rgba(255, 215, 106, 0.3); }
.tag3d.name { border-color: var(--accent); }
.tag3d.phone { background: var(--surface); color: var(--ink); border-color: #fff; }
.info { position: absolute; top: 76px; right: 14px; z-index: 3; width: min(320px, calc(100% - 28px)); padding: 14px 40px 14px 16px; border-radius: 16px; background: var(--win-glass); border: 1px solid var(--accent); color: var(--win-ink); backdrop-filter: blur(8px); }
.info b { font-size: 16px; }
.info p { margin-top: 6px; font-size: 14px; color: var(--win-muted); line-height: 1.55; }
.info button { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--win-ink); font-size: 20px; cursor: pointer; }

/* ---------- the two hours, step by step (www timeline, light page) ---------- */
.story { padding: 56px 0 8px; }
/* the 12 steps stay folded until asked for (Eddie 21:02Z): scroll past to the cases and the price */
.tl-box { max-width: 1200px; margin: 18px auto 0; padding: 0 var(--pad); }
.tl-box > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; max-width: 760px;
  padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.tl-box > summary::-webkit-details-marker { display: none; }
.tl-box > summary b { font-weight: 900; font-size: 17px; color: var(--accent-deep); }
.tl-box .c, .tl-box[open] .o { display: none; }
.tl-box[open] .c { display: inline; }
.tl-box > summary b, .tl-box > summary small { grid-column: 1; }
.tl-box > summary small { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.tl-box > summary { border: 2px solid var(--accent); }
.tl-go { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 99px; background: var(--accent); color: #fff; font-style: normal; font-weight: 900; font-size: 15px; animation: tl-pulse 2s ease-in-out infinite; }
.tl-go::after { content: "＋"; font-size: 17px; }
.tl-box[open] .tl-go { animation: none; background: var(--surface); color: var(--accent-deep); border: 1px solid var(--line); }
.tl-box[open] .tl-go::after { content: "－"; }
@keyframes tl-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); } }
.tl-box .tl { margin-top: 28px; padding-left: 30px; padding-right: 0; }
.tl { position: relative; max-width: 1200px; margin: 30px auto 0; padding: 0 var(--pad) 0 calc(var(--pad) + 30px); }
.tl-rail { position: absolute; left: 9px; top: 8px; bottom: 0; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--grime) 20%, transparent); }
.tl-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--tl, 0%); border-radius: 3px; background: linear-gradient(180deg, #a07a4a, #6fbfa8 40%, var(--accent)); }
.ev { position: relative; padding-bottom: 48px; scroll-margin-top: calc(var(--top-h) + 16px); }
.ev:last-child { padding-bottom: 0; }
.ev::before { content: ""; position: absolute; z-index: 1; left: -29px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 3px solid color-mix(in srgb, var(--grime) 40%, var(--bg)); transition: border-color 0.4s, box-shadow 0.4s; }
.ev.lit::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ev.addon.lit::before { border-color: #e2a400; box-shadow: 0 0 0 4px #fff1c4; }
.ev-when { font: 800 15px/22px var(--sans); letter-spacing: 0.04em; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ev.addon .ev-when { color: #8a6200; }
.ev h3 { margin-top: 6px; font-size: clamp(21px, 5.4vw, 28px); font-weight: 900; }
.ev-txt { max-width: 760px; }
.ev-txt > p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.ev-txt .chips { margin-top: 10px; }
.ev.addon .ev-txt { border-left: 4px solid var(--addon); padding-left: 14px; }
.ev .badge { margin-top: 8px; }

/* ---------- price ---------- */
.price { padding: 56px 0 20px; scroll-margin-top: var(--top-h); }
.price-body { max-width: 1200px; margin: 18px auto 0; padding: 0 var(--pad); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier { padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.tier.base { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tier-n { font-weight: 800; color: var(--muted); font-size: 14px; }
.tier-p { margin-top: 4px; font-size: 38px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.tier-p small { font-size: 15px; margin-right: 2px; color: var(--muted); }
.tier-d { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.addon-card { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 16px 18px; border-radius: 20px; background: #fffaf0; border: 2px dashed #f0c64a; }
.addon-card .badge { flex: none; }
.addon-card div { flex: 1; }
.addon-card h3 { font-size: 18px; }
.addon-card div p { margin-top: 4px; color: var(--muted); font-size: 14.5px; }
.addon-card .tier-p { font-size: 30px; flex: none; margin: 0; }
.notes { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.notes li + li { margin-top: 4px; }
/* 報價導航: count the price step by step on the learn order page. */
.qn { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 28px; margin-top: 22px; padding: 20px 22px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.qn-t { flex: 1 1 260px; padding-top: 6px; }
.qn-t b { display: block; font-size: 19px; font-weight: 900; color: var(--ink); }
.qn-t span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
.qn-go { flex: 0 1 340px; display: flex; flex-direction: column; align-items: flex-start; }
.qn-go .qn-note { margin-top: 16px; }
.more { margin-top: 12px; font-weight: 800; }

/* ---------- ask Fixes Baby ---------- */
.ask { max-width: 1200px; margin: 0 auto; padding: 56px var(--pad) 20px; display: grid; gap: 18px; scroll-margin-top: var(--top-h); }
.ask-phone { width: min(100%, 380px); justify-self: center; border-radius: 30px; background: var(--surface); border: 8px solid #0f2a2e; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(7, 35, 40, 0.5); }
.ap-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f0f7f6; border-bottom: 1px solid var(--line); }
.ap-head img { width: 32px; height: 32px; border-radius: 50%; }
.ap-head b { font-size: 15px; }
.ap-head small { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.ap-head small i { width: 7px; height: 7px; border-radius: 50%; background: #2bd16b; }
.ap-chat { height: 440px; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f7fbfb; }
.ap-row { display: flex; animation: rowin 0.3s ease-out; }
.ap-row.me { justify-content: flex-end; }
.ap-b { max-width: 86%; padding: 8px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); }
.ap-row.me .ap-b { background: var(--accent); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.ap-row.ai .ap-b { border-bottom-left-radius: 4px; }
.ap-row.typing .ap-b { display: flex; align-items: center; gap: 4px; color: var(--accent-deep); font-weight: 800; }
.ap-row.typing em { font-style: normal; margin-left: 6px; }
.ap-again { flex: none; align-self: center; margin-top: 4px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--accent-deep); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; animation: rowin 0.3s ease-out; }
.ap-again:hover { background: var(--accent-soft); }
.ap-dots { display: flex; gap: 4px; }
.ap-card { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.ap-card b { display: block; font-size: 15px; }
.ap-card .pp { font-size: 22px; font-weight: 900; color: var(--ink); }
.ap-card .nt { margin-top: 4px; font-size: 13px; color: var(--muted); }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ask .acts { margin-top: 14px; }

/* ---------- real cases ---------- */
.cases { max-width: 1200px; margin: 0 auto; padding: 56px 0 20px; }
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; padding: 0 var(--pad); }
.ba { margin: 0; --x: 50%; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 10px; }
.ba .pic { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba img.after { clip-path: inset(0 0 0 var(--x)); }
.ba .pic::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--surface); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
.ba input { width: 100%; margin: 10px 0 0; accent-color: var(--accent); }
.ba figcaption { color: var(--muted); font-size: 14px; padding: 0 4px; }

/* ---------- end + footer ---------- */
.end { max-width: 1200px; margin: 40px auto 0; padding: 40px var(--pad); text-align: center; }
.end h2 { font-size: clamp(26px, 6vw, 40px); font-weight: 900; }
.end .acts { justify-content: center; }
.foot { margin-top: 40px; padding: 28px var(--pad) 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; }
.foot p + p { margin-top: 8px; }
.foot-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.foot-l a { color: var(--ink); text-decoration: none; font-weight: 700; }

/* ---------- inner pages ---------- */
.page { max-width: 880px; margin: 0 auto; padding: 32px var(--pad) 20px; }
.page h1 { font-size: clamp(30px, 7vw, 48px); font-weight: 900; }
.page .lede { margin-top: 12px; }
.page section { margin-top: 40px; }
.page h2 { font-size: clamp(22px, 5vw, 30px); font-weight: 900; }
.page h2 + p, .page h2 + ul, .page h2 + .table-wrap { margin-top: 12px; }
.page p + p { margin-top: 10px; }
.page ul.ticks { list-style: none; padding: 0; margin: 12px 0 0; }
.page ul.ticks li { position: relative; padding-left: 28px; }
.page ul.ticks li + li { margin-top: 8px; }
.page ul.ticks li::before { content: "✓"; position: absolute; left: 4px; color: var(--accent); font-weight: 900; }
.page ul.ticks.no li::before { content: "✕"; color: #b54a3a; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f0f7f6; font-weight: 800; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.models { columns: 2 220px; gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 14px; }
.models li { padding: 4px 0; break-inside: avoid; }
.faq-list { margin-top: 16px; display: grid; gap: 10px; }
.faq-list details { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 4px 16px; }
.faq-list summary { cursor: pointer; padding: 12px 0; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--accent); font-weight: 900; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-bottom: 14px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.card { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.card h3 { font-size: 17px; }
.card p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.card a { font-weight: 800; }

.page ul + p { margin-top: 12px; }
.crumbs + h1 { margin-top: 10px; }
.page ol.steps { margin: 12px 0 0; padding-left: 22px; }
.page ol.steps li + li { margin-top: 10px; }
.page .tiers, .page .addon-card { margin-top: 14px; }
.page .table-wrap + p { margin-top: 12px; color: var(--muted); font-size: 15px; }
.ba-one { max-width: 420px; margin-top: 18px; }
.stage .loading .go { margin-top: 10px; padding: 10px 18px; border-radius: 99px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
/* the C2 drop */
.ip-anim svg { display: block; width: 100%; height: auto; overflow: visible; }
.ip-anim svg g { transform-box: fill-box; transform-origin: center; }
.ip-anim .ipa-body { animation: ipa-bob 2.6s ease-in-out infinite; }
.ip-anim .ipa-shadow { animation: ipa-shadow 2.6s ease-in-out infinite; }
.ip-anim .ipa-l { animation: ipa-float 1.7s ease-in-out infinite; }
.ip-anim .ipa-r { animation: ipa-wave 1.7s ease-in-out infinite 0.35s; }
.ip-anim .ipa-eyes { animation: ipa-blink 4.2s infinite; }
.ip-anim .ipa-tuft { transform-origin: 50% 100%; animation: ipa-sway 2.2s ease-in-out infinite; }
.ip-anim .ipa-spark { animation: ipa-twinkle 1.4s ease-in-out infinite; }
.ip-anim .ipa-sweat { animation: ipa-sweat 1.6s ease-in infinite; }
@keyframes ipa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ipa-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.12; } 50% { transform: scaleX(0.86); opacity: 0.08; } }
@keyframes ipa-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -8px); } }
@keyframes ipa-wave { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(3px, -9px) rotate(-12deg); } 60% { transform: translate(-1px, -3px) rotate(10deg); } }
@keyframes ipa-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
@keyframes ipa-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes ipa-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@keyframes ipa-sweat { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.h-drop { position: absolute; left: 50%; top: calc(50% + 64px); z-index: 1; height: calc(100% - 226px); max-height: 320px; width: auto; aspect-ratio: 210 / 220; transform: translate(-50%, -50%); pointer-events: none; }
/* while the drop speaks, its hands talk too */
.h-drop.talk .ipa-l { animation: ipa-float 0.9s ease-in-out infinite; }
.h-drop.talk .ipa-r { animation: ipa-wave 0.9s ease-in-out infinite 0.2s; }
.h-drop .h-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.h-drop .h-layer.on { opacity: 1; }
.drop-side { width: 120px; flex: none; }
.addon-wrap { display: flex; align-items: flex-end; gap: 6px; }
.addon-wrap .addon-card { flex: 1; }
.end .drop-end, .end-mini .drop-end { width: 120px; margin: 0 auto 6px; }
.end-mini { margin-top: 48px; padding: 28px 22px; border-radius: 24px; background: var(--accent-soft); text-align: center; }
.end-mini .acts { justify-content: center; }
.card .btn { margin-top: 4px; }

/* ---------- phones ---------- */
/* Small phones keep 報價導航 and 問 Fixes Baby; 預約清洗 opens the same chat. */
@media (max-width: 480px) { .top-nav a.top-book { display: none; } }
@media (max-width: 760px) {
  .top-nav a:not(.top-cta):not(.top-book):not(.top-order) { display: none; }
  .drop-side { width: 78px; }
  .top-nav a.top-book, .top-nav a.top-cta, .top-nav a.top-order { padding: 7px 12px; font-size: 14px; }
  .ba-grid, .tiers, .cards { grid-template-columns: 1fr; }
  .tier { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 14px; padding: 14px 16px; }
  .tier-p { grid-column: 2; grid-row: 1 / span 2; font-size: 30px; }
  .tier-n, .tier-d { grid-column: 1; }
  .tier-d { margin-top: 2px; }
  .addon-card { flex-wrap: wrap; }
  .addon-card div { order: 2; flex-basis: 100%; }
  .addon-card .tier-p { margin-left: auto; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; padding-top: 40px; padding-bottom: 60px; }
  .h-copy { order: -1; }
  .h-stage { height: min(70vh, 560px); }
  .tl-box .tl { padding-left: 64px; }
  .tl-box .tl-rail { left: 23px; }
  .ev::before { left: -51px; top: 4px; width: 22px; height: 22px; }
  .ev-when { font-size: 17px; }
  .ask { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Brush-arrow notes, the repair site's 報價導航 arrow (Eddie 2026-10-05): under a button, pointing up
   at it, with two lines on what tapping does. Above the 12 steps the arrow points down into the box. */
.cta-note { position: relative; flex: 1 1 100%; margin: 16px 0 0; /* the arrow head clears the button it points at (Eddie 2026-10-05) */ padding: 30px 0 0 116px; min-height: 76px; color: var(--muted); text-align: left; }
.cta-note svg { position: absolute; left: 38px; top: -12px; width: 70px; transform: scaleY(-1) rotate(8deg); color: var(--accent); }
.cta-note path { fill: currentColor; }
.cta-note .sc-reveal { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 420; }
.cta-note.pend .sc-reveal { stroke-dashoffset: 420; }
.cta-note.pend .sc-head { opacity: 0; }
.cta-note.in .sc-reveal { stroke-dashoffset: 420; animation: cn 0.9s 0.2s forwards; }
.cta-note.in .sc-head { opacity: 0; animation: cn 0.3s 1.05s forwards; }
@keyframes cn { to { stroke-dashoffset: 0; opacity: 1; } }
.cta-note b { display: block; color: var(--accent-deep); font-size: 19px; font-weight: 900; line-height: 1.25; transform: rotate(-3deg); transform-origin: left; }
.cta-note span { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 700; }
/* Below ~400 px the hero's two buttons stack; the note then follows the main button so its arrow points
   at 問 Fixes Baby, not at the button under it (Eddie 2026-10-07). */
@media (max-width: 419px) { .h-copy .acts .cta-note { order: 1; } .h-copy .acts .btn.sub { order: 2; } }
.tl-note { max-width: 1200px; margin: 14px auto 10px; padding: 4px var(--pad) 0 calc(var(--pad) + 104px); min-height: 84px; }
.tl-note svg { left: calc(var(--pad) + 22px); top: 2px; width: 66px; transform: rotate(-4deg); }
.tl-note + .tl-box { margin-top: 0; }

/* Before / after: a nudging hint on the first case until it is dragged. */
.ba-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: rgba(15, 42, 46, 0.78); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; pointer-events: none; animation: ba-nudge 1.6s ease-in-out infinite; transition: opacity 0.3s; }
.ba.used .ba-hint { opacity: 0; }
@keyframes ba-nudge { 25% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 6px)); } }
.ba .pic { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ba .pic img { -webkit-user-drag: none; }

/* ---------- round 2 (Eddie 2026-10-05): cartoons first, the 3D last and on request ---------- */
/* The top links glide to their section (js/clean.js) and stop below the bar. */
main > section[id] { scroll-margin-top: var(--top-h); }

/* 高濃度活性氧: the scene itself is css/oxy.css */
.oxy { padding: 48px 0 8px; }
.oxy .ox { max-width: 1200px; margin: 18px auto 0; padding: 0 var(--pad); }
.ox-note { margin: 16px 0 10px; padding: 4px 0 0 100px; min-height: 80px; }
.ox-note svg { left: 20px; top: 2px; width: 64px; transform: rotate(-4deg); }
@media (min-width: 900px) { .ox-note { margin-top: 0; } }

/* The 3D, offered after the twelve steps (Eddie 06:16Z: eye-catching and obvious, without slowing the
   page): a real capture of the 3D washer as a big poster with a play button; one tap opens the live
   3D. Nothing of the 3D runs until then; the files are fetched quietly once the card is close. */
.sop { padding: 40px var(--pad) 8px; }
.sop-entry { max-width: 1200px; margin: 0 auto; display: grid; gap: 18px; padding: 14px 14px 22px; border-radius: 24px;
  background: var(--win); color: var(--win-ink); box-shadow: var(--win-glow); }
.sop-entry .ch-n { color: #7ff0dc; }
.sop-entry h2 { margin-top: 6px; font-size: clamp(24px, 5.6vw, 34px); font-weight: 900; }
.sop-entry .ch-p { color: var(--win-muted); }
.sop-entry .btn { margin-top: 14px; font-size: 17px; }
.se-copy { padding: 0 6px; }
.se-poster { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #0b2a30; cursor: pointer; aspect-ratio: 16 / 10; }
.se-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.se-poster:hover img, .se-poster:focus-visible img { transform: scale(1.04); }
.se-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent 40%, rgba(4, 22, 26, 0.45)); pointer-events: none; }
.se-chip { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 5px 12px; border-radius: 99px; background: var(--addon); color: var(--addon-ink); font: 800 13px/1.4 var(--sans); }
.se-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--accent); box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5); }
.se-play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #9ff0e8; animation: se-ring 1.8s ease-out infinite; }
.se-play i { position: absolute; left: 30px; top: 23px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #fff; }
@keyframes se-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.sop-entry .sop-note { margin-top: 20px; color: var(--win-muted); padding-left: 104px; }
.sop-entry .sop-note svg { left: 26px; color: #7ff0dc; }
.sop-entry .sop-note b { color: #7ff0dc; }
@media (min-width: 860px) { .sop-entry { grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; padding: 20px 28px 20px 20px; } .se-copy { padding: 0; } }

/* The 3D window: the whole screen on a phone, a large panel on a desktop, all of it 3D. */
.sop-pop { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--win); color: var(--win-ink); overflow: hidden; }
.sop-pop::backdrop { background: rgba(7, 35, 40, 0.6); backdrop-filter: blur(4px); }
html.pop-open { overflow: hidden; }
.sp-hd { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 12px 18px 14px; background: linear-gradient(180deg, rgba(7, 35, 40, 0.85), rgba(7, 35, 40, 0)); }
.sp-hd b { flex: 1; min-width: 0; font-size: 16px; font-weight: 900; color: var(--win-ink); text-align: right; }
.sp-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--win-line); background: rgba(255, 255, 255, 0.06); color: var(--win-ink); font-size: 24px; line-height: 1; cursor: pointer; }
.sp-x:hover { background: rgba(255, 255, 255, 0.14); }
@media (min-width: 900px) {
  .sop-pop { width: min(1180px, calc(100% - 48px)); height: min(860px, calc(100% - 48px)); margin: auto; border-radius: 22px; box-shadow: var(--win-glow); }
  .sp-hd { padding: 16px 16px 22px 20px; }
  .sp-hd b { font-size: 17px; }
}

/* The smallest phones: the logo, 報價導航 and 問 Fixes Baby on one line. */
@media (max-width: 380px) {
  .top { gap: 6px; }
  .top-nav { gap: 4px; }
  .top-nav a.top-order, .top-nav a.top-cta { padding: 6px 9px; font-size: 13px; }
}