/* BlurKids marketing site. Single deliberate look: ink stage scenes, cool mist bands, coral finale. */
@font-face{font-family:"BK Sans";src:url(fonts/bk-sans.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"BK Mono";src:url(fonts/bk-mono.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"BK TC";src:url(fonts/bk-tc.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"BK SC";src:url(fonts/bk-sc.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"BK JP";src:url(fonts/bk-jp.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"BK KR";src:url(fonts/bk-kr.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}

:root {
  color-scheme: light;
  --coral: #fa7a63;
  --coral-deep: #d9533b;
  --ink: #111517;
  --ink-2: #1a2125;
  --ink-3: #2a3339;
  --mist: #edf3f4;
  --paper: #ffffff;
  --text: #111517;
  --text-soft: #50616a;
  --on-ink: #f2f6f7;
  --on-ink-soft: #9fb0b7;
  --teal: #1bd0df;
  --teal-deep: #087580;
  --mint: #59d8b9;
  --yellow: #fcca22;
  --red: #fc625a;
  --blue: #3975ef;
  --violet: #924bda;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --header-h: 64px;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --cjk: sans-serif;
  --ar: 0.5581;
}
:lang(zh-Hant) { --cjk: "BK TC", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei"; }
:lang(zh-Hans) { --cjk: "BK SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei"; }
:lang(ja) { --cjk: "BK JP", "Hiragino Sans", "Noto Sans JP", "Yu Gothic"; }
:lang(ko) { --cjk: "BK KR", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic"; word-break: keep-all; }
:lang(ja) { word-break: auto-phrase; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font: 500 17px/1.6 "BK Sans", var(--cjk), system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[lang] { font-family: "BK Sans", var(--cjk), system-ui, -apple-system, "Segoe UI", sans-serif; }
.mono { font-family: "BK Mono", var(--cjk), ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
/* Two-tone ring: the ink outline reads on light sections, the white inner ring on dark ones. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .hl { text-wrap: balance; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--on-ink);
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand--small { font-size: 16px; }
.brand--small img { width: 24px; height: 24px; border-radius: 7px; }
.site-header__end { display: flex; align-items: center; gap: 10px; }
.soon {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: var(--coral);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s var(--out);
}
.soon:hover { background: #fb9380; }
.lang { position: relative; }
.lang summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 170px;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}
.lang a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 600; }
.lang a:hover, .lang a:focus-visible { background: rgba(255, 255, 255, 0.08); }
.lang a[aria-current] { color: var(--teal); }

/* ---------- Photo frame (cover-fit canvas in the photo's own 0–100% space) ---------- */
.frame { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: size; background: #26221f; }
.canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, calc(100cqh * var(--ar)));
  aspect-ratio: 768 / 1376;
  transform: translate(-50%, calc(-50% - (var(--fy) - 0.5) * var(--fy-shift, 0%)));
}
.canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic { position: absolute; }
.fx, .fx .face { position: absolute; inset: 0; }
.fx .face { inset: auto; }
.cell { position: absolute; }

.bracket { position: absolute; opacity: 0; transform: scale(1.35); transition: opacity 0.25s ease, transform 0.5s var(--out); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.bracket.is-on { opacity: 1; transform: none; }
.bracket i { position: absolute; width: 30%; height: 30%; border: 0 solid var(--teal); }
.bracket .tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 12px; }
.bracket .tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 12px; }
.bracket .bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 12px; }
.bracket .br { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 12px; }
.scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  top: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(27, 208, 223, 0), rgba(27, 208, 223, 0.28));
  border-bottom: 3px solid var(--teal);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--red); }
.chip--after { background: var(--teal); color: var(--ink); }
.chip--after i { background: var(--ink); }
:lang(zh), :lang(ja), :lang(ko) { --chip-track: 0.04em; }
.chip { letter-spacing: var(--chip-track, 0.12em); }

/* ---------- Story (pinned, scroll-scrubbed) ---------- */
.story { position: relative; height: 460vh; background: var(--ink); }
.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 6vw, 96px);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
}
.story__copy { display: grid; gap: 28px; align-content: center; }
.hls { display: grid; }
.hl {
  grid-area: 1 / 1;
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--on-ink);
}
:lang(zh) .hl, :lang(ja) .hl, :lang(ko) .hl { line-height: 1.22; letter-spacing: -0.01em; font-size: clamp(36px, 5vw, 68px); }
:lang(ja) .hl { font-size: clamp(34px, 4.4vw, 58px); }
.w { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(0.4em) scale(0.96); transition: opacity 0.35s ease, transform 0.6s var(--out); transition-delay: 0ms; }
.is-on > .w, .display .w, .privacy__h .w { opacity: 1; transform: none; transition-delay: var(--d); }
.hl--1 .acc { color: var(--yellow); }
.hl--2 .acc { color: var(--teal); }
.hl--3 .acc { color: var(--mint); }
.story__lede { max-width: 34ch; font-size: 18px; color: var(--on-ink-soft); margin-bottom: 10px; }
.story__meta { display: grid; gap: 18px; justify-items: start; }
.chips { display: grid; }
.chips .chip { grid-area: 1 / 1; opacity: 0; transform: scale(0.7); transition: opacity 0.25s ease, transform 0.45s var(--out); }
.chips .chip.is-on { opacity: 1; transform: none; }
.readout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; font-weight: 600; color: var(--on-ink-soft); }
.readout__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(27, 208, 223, 0.18); }
.readout.is-scanning .readout__dot { animation: pulse 0.8s ease-in-out infinite; }
.readout__count { color: var(--teal); }
.readout__count:empty { display: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(27, 208, 223, 0); } }
.story__card {
  height: min(80svh, 780px);
  aspect-ratio: 768 / 1376;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.7);
}
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-ink-soft);
  transition: opacity 0.3s ease;
}
.scroll-hint span { width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(var(--teal), transparent); animation: drip 1.6s ease-in-out infinite; }
.scroll-hint.is-off { opacity: 0; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Before / after ---------- */
.compare { background: var(--mist); color: var(--text); padding: clamp(80px, 12vw, 150px) var(--gutter); }
.compare__inner { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.display { font-weight: 800; font-size: clamp(52px, 8vw, 96px); line-height: 0.98; letter-spacing: -0.035em; }
:lang(zh) .display, :lang(ja) .display, :lang(ko) .display { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.15; letter-spacing: -0.01em; }
.display .acc { color: var(--coral-deep); }
.compare__sub { margin-top: 24px; font-size: clamp(18px, 1.8vw, 22px); color: var(--text-soft); max-width: 30ch; }
.compare__hint { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text-soft); }
.compare__hint svg { width: 26px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.compare__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(17, 21, 23, 0.55);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.compare__frame .frame, .pv__screen .frame, .step__media .frame { --fy-shift: 100%; }
.compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.compare__label { position: absolute; top: 18px; z-index: 2; }
.compare__label--l { left: 18px; }
.compare__label--r { right: 18px; }
.compare__divider { position: absolute; top: 0; bottom: 0; left: var(--x); width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 22px rgba(0, 0, 0, 0.35); z-index: 3; }
.compare__handle {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  cursor: ew-resize;
}
.compare__handle svg { width: 30px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Privacy (pinned) ---------- */
.privacy { position: relative; height: 300vh; background: var(--ink); color: var(--on-ink); }
.privacy__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 96px);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
}
.pv { position: relative; height: min(76svh, 700px); aspect-ratio: 0.6; max-width: 100%; margin-inline: auto; container-type: size; }
.pv__cloud { position: absolute; left: 50%; top: 0; width: 42cqw; transform: translate(-50%, -12px); opacity: 0; transition: opacity 0.4s ease, transform 0.6s var(--out); }
.pv__cloud svg .cloud-body { fill: var(--ink-2); stroke: var(--on-ink); stroke-width: 7; stroke-linejoin: round; transition: stroke 0.4s ease; }
.pv__cloud svg .cloud-racks rect { fill: none; stroke: var(--on-ink-soft); stroke-width: 4; }
.pv.is-cloud .pv__cloud { opacity: 1; transform: translate(-50%, 0); }
.pv.is-cut .pv__cloud { opacity: 0.38; }
.pv.is-cut .pv__cloud svg .cloud-body { stroke: var(--on-ink-soft); }
.pv__line { position: absolute; left: 50%; top: 17cqh; height: 12cqh; width: 6px; margin-left: -3px; }
.pv__line span {
  position: absolute;
  inset: 0;
  color: var(--on-ink-soft);
  background: linear-gradient(to bottom, currentColor 0 12px, transparent 12px) top / 100% 22px repeat-y;
  transform-origin: top;
  transform: scaleY(var(--draw, 0));
  transition: color 0.3s ease;
  border-radius: 3px;
}
.pv.is-cut .pv__line span { color: var(--coral); opacity: 0.55; }
.pv__cut { position: absolute; left: 50%; top: 23cqh; width: 0; height: 0; }
.pv__x {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 8px var(--ink);
  display: grid;
  place-items: center;
  transform: scale(0);
  transition: transform 0.5s var(--out);
}
.pv__x svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 6; stroke-linecap: round; fill: none; }
.pv__bytes {
  position: absolute;
  left: 42px;
  top: -12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--coral);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.5s var(--out);
}
.pv.is-cut .pv__x { transform: scale(1); }
.pv.is-bytes .pv__bytes { opacity: 1; transform: none; }
.pv__phone {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 66cqh;
  aspect-ratio: 0.5;
  transform: translate(-50%, calc((1 - var(--rise, 1)) * 10%));
  opacity: var(--rise, 1);
  padding: 2.2cqh;
  border-radius: 6.6cqh;
  background: #2a3237;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #3c464c;
}
.pv__screen { position: relative; height: 100%; border-radius: 4.6cqh; overflow: hidden; }
.pv__island { position: absolute; top: 2.2cqh; left: 50%; width: 30%; height: 3.4cqh; transform: translateX(-50%); border-radius: 99px; background: #000; }
.pv__lock {
  position: absolute;
  right: -5cqh;
  bottom: -5cqh;
  width: 15cqh;
  height: 15cqh;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 1.2cqh var(--ink);
  display: grid;
  place-items: center;
  transform: scale(0);
  transition: transform 0.55s var(--out);
}
.pv__lock svg { width: 44%; }
.pv__lock .shackle { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.pv__lock .body { fill: #fff; }
.pv__lock .hole { fill: var(--teal); }
.pv.is-lock .pv__lock { transform: scale(1); }
.privacy__copy { display: grid; gap: 22px; }
.privacy__h { font-weight: 800; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.035em; }
:lang(zh) .privacy__h, :lang(ja) .privacy__h, :lang(ko) .privacy__h { line-height: 1.22; letter-spacing: -0.01em; font-size: clamp(32px, 4vw, 56px); }
.privacy__h .acc { color: var(--teal); }
.privacy__sub { font-size: 18px; color: var(--on-ink-soft); max-width: 40ch; }
.points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.5s var(--out), border-color 0.4s ease; }
.points li:nth-child(2) { transition-delay: 60ms; }
.points li:nth-child(3) { transition-delay: 120ms; }
.points svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.points svg .slash { stroke: var(--coral); }
.points strong { display: block; font-size: 16px; font-weight: 800; }
.points span { display: block; font-size: 14.5px; color: var(--on-ink-soft); line-height: 1.5; }
.privacy.is-points .points li { border-color: rgba(27, 208, 223, 0.35); }

/* ---------- How it works ---------- */
.how { background: var(--paper); color: var(--text); padding: clamp(80px, 11vw, 140px) var(--gutter); }
.how__inner, .faq__inner, .film__inner { max-width: var(--maxw); margin-inline: auto; }
.eyebrow { font-size: 16px; font-weight: 700; color: var(--teal-deep); }
.section-h { margin-top: 14px; font-weight: 800; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.03em; max-width: 18ch; }
:lang(zh) .section-h, :lang(ja) .section-h, :lang(ko) .section-h { line-height: 1.25; letter-spacing: 0; }
.steps { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.step { display: grid; grid-template-rows: auto auto auto 1fr; gap: 10px; }
.step__media { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 24px 50px -30px rgba(17, 21, 23, 0.6); }
.step__n { font-size: 15px; font-weight: 800; color: var(--teal-deep); }
.step h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.step p { color: var(--text-soft); font-size: 16px; }
.toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  background: rgba(17, 21, 23, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.toast svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--mint); fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
[data-reveal] { transition: transform 0.8s var(--out), opacity 0.8s var(--out); }
.js [data-reveal].is-pending { opacity: 0.001; transform: translateY(28px); }

/* ---------- Film ---------- */
.film { background: var(--ink-2); color: var(--on-ink); padding: clamp(80px, 11vw, 140px) var(--gutter); }
.film__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.film .eyebrow { color: var(--teal); }
.film__phone { position: relative; width: min(340px, 78vw); aspect-ratio: 9 / 16; border-radius: 40px; padding: 12px; background: #2a3237; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #3c464c; }
.film__phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; background: #000; }
.film__controls { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.film__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 0;
  min-height: 40px;
  background: rgba(17, 21, 23, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.film__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film__sound .wave { display: none; }
.film__sound[aria-pressed="true"] .wave { display: block; }
.film__sound[aria-pressed="true"] .mute { display: none; }
.film__btn .tri { fill: currentColor; stroke: none; }
.film__btn .bars { display: none; stroke-width: 2.6; }
.film__btn.is-playing .tri { display: none; }
.film__btn.is-playing .bars { display: block; }

/* ---------- FAQ ---------- */
.faq { background: var(--mist); color: var(--text); padding: clamp(80px, 11vw, 140px) var(--gutter); }
.faq__list { max-width: 860px; }
.faq__list { margin-top: 36px; display: grid; gap: 12px; }
.qa { background: var(--paper); border-radius: 14px; padding: 4px 22px; box-shadow: 0 1px 0 rgba(17, 21, 23, 0.06); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mist); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--out); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa p { padding: 0 0 20px; color: var(--text-soft); max-width: 62ch; }

/* ---------- End card ---------- */
.end { position: relative; overflow: hidden; background: var(--coral); color: var(--ink); padding: clamp(96px, 13vw, 170px) var(--gutter); text-align: center; }
.end__inner { position: relative; display: grid; justify-items: center; gap: 18px; }
.end__icon { width: 150px; height: 150px; border-radius: 34px; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.92), 0 30px 70px rgba(120, 30, 15, 0.35); }
.end__name { margin-top: 18px; font-weight: 800; font-size: clamp(56px, 9vw, 96px); line-height: 0.98; letter-spacing: -0.035em; }
.end__tagline { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; }
.end__status { margin-top: 10px; font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; }
.end__cta { display: inline-flex; align-items: center; min-height: 52px; padding: 14px 30px; border-radius: 999px; background: var(--ink); color: #fff; font-size: clamp(16px, 1.6vw, 18px); font-weight: 800; text-decoration: none; transition: background 0.2s var(--out); }
.end__cta:hover { background: #2a3339; }
.end .end__cta:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--ink); }
.end__trust { margin-top: 6px; font-size: 14px; font-weight: 600; color: rgba(17, 21, 23, 0.78); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-soft); padding: 36px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px)); }
.site-footer__inner { max-width: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.site-footer .brand { color: var(--on-ink); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; font-weight: 600; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { color: var(--on-ink); }
.site-footer__copy { margin-left: auto; font-size: 13.5px; }
.site-footer__built { white-space: nowrap; }
.site-footer__built a { color: var(--on-ink); text-underline-offset: 3px; }
.site-footer__built a:hover { color: #fff; }
.site-footer__cookies { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.site-footer__cookies:hover { color: var(--on-ink); }

/* ---------- Analytics consent ---------- */
.consent { position: fixed; inset: auto var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 560px; margin-inline: auto; padding: 18px 20px; border-radius: 20px; background: var(--ink-2); color: var(--on-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); display: grid; gap: 14px; }
.consent[hidden] { display: none; }
.consent p { font-size: 15px; line-height: 1.55; color: var(--on-ink-soft); }
.consent a { color: var(--on-ink); }
.consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.consent__btn { min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(242, 246, 247, 0.4); background: transparent; color: var(--on-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.consent__btn:hover { background: rgba(242, 246, 247, 0.1); }

/* ---------- Document pages ---------- */
.doc { background: var(--paper); color: var(--text); padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) var(--gutter) clamp(72px, 10vw, 120px); }
.doc__inner { max-width: 38em; margin-inline: auto; display: grid; gap: 28px; }
.doc h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.doc h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.doc p, .doc li { color: var(--text-soft); line-height: 1.7; }
.doc__updated { font-size: 13px; color: var(--teal-deep); margin-top: -14px; }
.doc__intro { font-size: 19px; color: var(--text) !important; }
.contact { padding: 24px; border-radius: 20px; background: var(--mist); display: grid; gap: 12px; }
.contact__email { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact__label { font-weight: 800; color: var(--text); }
.contact__note { font-size: 15px; }
.email { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email .mono { color: var(--text); }
.copy { border: 1px solid rgba(17, 21, 23, 0.18); background: var(--paper); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.todo { padding: 3px 8px; border-radius: 6px; background: #fff3c4; color: #7a5a00; font-size: 13px; }
.tips { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc .faq__list { margin-top: 12px; }
.doc .qa { background: var(--mist); }

/* ---------- Narrow screens: the story becomes the ad (full-bleed photo, overlaid headline) ---------- */
@media (max-width: 860px) {
  :root { --header-h: 58px; }
  .soon { padding: 6px 11px; font-size: 12px; }
  .story__stage { display: block; padding: 0; }
  .story__card { position: absolute; inset: 0; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .story__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.3) 26%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.62) 70%, rgba(0, 0, 0, 0.82) 100%); }
  .story__copy { display: contents; }
  .hls { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--header-h) + 22px); padding-inline: var(--gutter); text-align: center; }
  .hl { font-size: clamp(32px, 8.6vw, 46px); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); }
  :lang(zh) .hl, :lang(ja) .hl, :lang(ko) .hl { font-size: clamp(28px, 7.6vw, 40px); }
  .story { height: 340vh; }
  .privacy { height: 240vh; }
  .story__lede { max-width: 32ch; margin: 0 auto 2px; font-size: 15.5px; line-height: 1.45; text-align: center; color: #eef3f4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
  .story__meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 88px; justify-items: center; gap: 12px; padding-inline: var(--gutter); }
  .pv__bytes { font-size: 13px; left: 34px; top: -9px; }
  .readout { justify-content: center; color: #e8eef0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
  .scroll-hint { bottom: 14px; color: #e8eef0; }
  .compare__inner, .film__inner { grid-template-columns: 1fr; }
  .compare__frame { max-width: 480px; margin-inline: auto; }
  .privacy__stage { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: calc(var(--header-h) + 14px); padding-bottom: 20px; }
  .pv { height: 40svh; flex: none; }
  .privacy__copy { gap: 12px; text-align: center; justify-items: center; }
  .privacy__h { font-size: clamp(28px, 7.4vw, 38px); }
  :lang(zh) .privacy__h, :lang(ja) .privacy__h, :lang(ko) .privacy__h { font-size: clamp(24px, 6.6vw, 32px); }
  .privacy__sub { font-size: 15.5px; }
  .points { grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px; margin: 4px 0 0; }
  .points li { padding: 8px 12px; border-radius: 999px; align-items: center; gap: 8px; }
  .points li span { display: none; }
  .points strong { font-size: 13px; white-space: nowrap; }
  .points svg { width: 18px; height: 18px; }
  .film__phone { margin-inline: auto; }
  .site-footer__copy { margin-left: 0; width: 100%; }
}
@media (max-width: 420px) {
  .points { grid-template-columns: 1fr; justify-items: center; }
  .lang summary span { display: none; }
}

/* ---------- Reduced motion: no pinning, final states ---------- */
@media (prefers-reduced-motion: reduce) {
  .story, .privacy { height: auto; }
  .story__stage, .privacy__stage { position: relative; }
  .story__stage { min-height: 100svh; }
  .w, .chip, .bracket, .pv__x, .pv__lock, [data-reveal] { transition: none !important; }
  .hls { gap: 0.25em; }
  .hl { grid-area: auto; font-size: clamp(30px, 4vw, 56px); }
  .hl .w { opacity: 1; transform: none; }
  .scroll-hint span, .readout__dot { animation: none !important; }
}