/* KelvinAI homepage — the one stylesheet of the page (hero, chapters 01–08, 下载 · 常见问题 · 结尾).
   Marketing chrome only: every piece of product UI on the page is a re-hosted capture of the real app (rehost.js +
   data/story-*.js, pixel-verified) and is never styled from here. The frames around it only crop, scale, dim or fade
   whole nodes. */
:root {
  --ink: #1c1915;
  --ink-2: #5c554f;
  --ink-3: #8c857e;
  --line: rgba(28, 25, 21, .09);
  --line-2: rgba(28, 25, 21, .16);
  --accent: #bd5d3a;          /* = the app's classic-light --accent */
  --accent-deep: #a24b2b;
  --cream: #f6f2ec;           /* = the app's classic-light window */
  --soft: #faf8f5;
  --page: #ffffff;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --nav-h: 64px;
  --gutter: 48px;
  --col: 390px;               /* the text column in the chapters */
  --hero-col: 440px;          /* the copy column in the hero */
  --gap: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
.nw { white-space: nowrap; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------- nav ---------------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.brand svg { width: 28px; height: 28px; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.lang { font-size: 14px; color: var(--ink-2); padding: 10px 2px; }
.lang:hover { color: var(--ink); }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn-line { height: 36px; padding: 0 17px; font-size: 14px; color: var(--ink); border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--ink); }
.btn-line { position: relative; }
.btn-line::after { content: ""; position: absolute; inset: -5px -3px; } /* a ≥ 44 px tap target around the small pill */
.btn-solid { height: 52px; padding: 0 30px; font-size: 16px; color: #fff; background: var(--accent); box-shadow: 0 8px 22px -10px rgba(189, 93, 58, .7); }
.btn-solid:hover { background: var(--accent-deep); }
.btn:active { transform: scale(.98); }
.link-more { font-size: 16px; font-weight: 500; color: var(--ink); padding: 14px 0; }
.link-more span { display: inline-block; transition: transform .25s; }
.link-more:hover span { transform: translateY(3px); }

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: clip; padding: 0 0 18px; }
.hero-grid { display: grid; grid-template-columns: var(--hero-col) minmax(0, 1fr); column-gap: var(--gap); align-items: center; min-height: calc(100svh - var(--nav-h) - 18px); padding: 28px var(--gutter) 30px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 40px; }
.eyebrow { margin: 0 0 22px; font-size: 14px; color: var(--ink-3); letter-spacing: .02em; }
.hero h1 { font-size: clamp(46px, 4.7vw, 68px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 26px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { font-size: 19px; line-height: 1.75; color: var(--ink-2); margin: 0 0 36px; max-width: 23em; }
.cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.fine { margin: 22px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-3); }

.hero-stage { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.at-glyph {
  position: absolute; z-index: 0; left: -196px; bottom: -6px;
  font: 400 360px/1 var(--font); letter-spacing: 0;
  background: linear-gradient(160deg, #c46a45 8%, #dd9774 34%, #efcdb6 62%, #f8ebe1 86%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none;
}
.hero-stage .panel { position: relative; z-index: 1; }
.hero-panel { width: 100%; max-width: 640px; margin-left: auto; }
.hero-frame { width: 100%; aspect-ratio: 620 / 580; }
.hero-sheet { display: none; }
.cast { position: relative; z-index: 1; margin: 22px 0 0 auto; width: 100%; max-width: 640px; padding-left: 128px; }
.cast-title { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cast-title .clock { margin: 0; }
.cast ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; }
.cast li { display: flex; align-items: center; gap: 10px; }
.cast-av { display: block; width: 34px; height: 34px; flex: none; }
.cast-av .zoom, .cast-av > * { display: block; }
.cast-who { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.cast-who b { font-size: 14px; font-weight: 600; color: var(--ink); }
.cast-who small { font-size: 12px; color: var(--ink-3); }

/* ---------------- real-UI frames (frame = chrome; the host inside = the app) ---------------- */
.panel, .phone, .card-pop { margin: 0; }
.frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--cream); box-shadow: 0 0 0 1px rgba(40, 30, 20, .09), 0 32px 80px -30px rgba(70, 45, 20, .28), 0 4px 14px -6px rgba(70, 45, 20, .10); }
.zoom { transform-origin: 0 0; }
.host { pointer-events: none; }
.fallback { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(40, 30, 20, .09); }
.clock { margin: 16px 0 0; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; letter-spacing: .01em; }
.clock i { width: 6px; height: 6px; border-radius: 50%; background: #3a9a63; display: inline-block; flex: none; }
.clock .t { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.clock .t:empty { display: none; }

/* ---------------- chapters ---------------- */
.chapter { position: relative; padding: 140px 0 40px; }
.ch-head { max-width: 640px; padding-top: 26px; border-top: 1px solid var(--ink); }
.label { display: flex; align-items: baseline; gap: 14px; margin: 0 0 30px; font-size: 14px; color: var(--ink-2); letter-spacing: .04em; }
.label .no { font: 500 13px/1 var(--mono); color: var(--accent); letter-spacing: .04em; }
.ch-head h2 { font-size: clamp(36px, 3.7vw, 54px); line-height: 1.14; letter-spacing: -.025em; margin: 0 0 24px; }
.copy { font-size: 19px; line-height: 1.8; color: var(--ink-2); margin: 0; max-width: 31em; }
.ch-body { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gap); }
.ch-visual { grid-column: 2; grid-row: 1; position: relative; }
.steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.ch-visual .sticky { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; }
/* each step's text sits in the middle of its own stretch of scroll; the stretch = how long its beat(s) stay on screen */
.step { min-height: 78svh; display: flex; align-items: center; }
.step[data-beats*=","], .step[data-office*=","], .step[data-m4*=","] { min-height: 108svh; } /* two or more beats: a longer stretch of scroll */
.step:first-child { margin-top: 6svh; }
.step:last-child { margin-bottom: 18svh; }
.step-in { padding: 4px 0 4px 26px; border-left: 1px solid var(--line-2); transition: opacity .5s, border-color .5s; opacity: .26; }
.step.on .step-in { opacity: 1; border-color: var(--ink); }
.num { display: block; font: 500 12px/1 var(--mono); color: var(--ink-3); margin: 2px 0 14px; letter-spacing: .06em; }
.step h3 { font-size: 26px; line-height: 1.32; margin: 0 0 12px; letter-spacing: -.012em; }
.step p { font-size: 17px; line-height: 1.85; color: var(--ink-2); margin: 0; max-width: 23em; }
.ch-note { margin: 10px 0 0; max-width: var(--col); font-size: 13px; line-height: 1.8; color: var(--ink-3); }

/* the stage: the group panel; in 02 / 03 a second real node (林晓's phone / Ava's card) comes in front of it */
.stage { position: relative; width: 100%; }
.desk { position: relative; width: 100%; max-width: 690px; transition: opacity .6s ease, filter .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.desk-frame { width: 100%; height: min(700px, calc(100svh - var(--nav-h) - 120px)); }
.duo.front .desk { opacity: .5; filter: saturate(.75); transform: scale(.985); transform-origin: 0 50%; }
.duo.front.soft .desk { opacity: .92; filter: none; transform: none; }

.phone, .card-pop { position: absolute; right: 0; top: 50%; z-index: 3; transform: translate(0, calc(-50% + 22px)) scale(.985); transform-origin: 100% 50%; opacity: 0; pointer-events: none; transition: opacity .55s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.duo.front .phone, .duo.front .card-pop { opacity: 1; transform: translate(0, -50%); }
.phone { filter: drop-shadow(0 34px 44px rgba(60, 38, 18, .26)) drop-shadow(0 3px 8px rgba(60, 38, 18, .10)); }
.phone-label { margin: 0 0 10px 6px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.phone-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: inline-block; }
/* the phone: a plain rounded shell (no fake status bar). Its height never changes (no layout shift); a shorter state
   is shown by clipping the shell from the bottom. */
.phone-shell { position: relative; padding: 9px; border-radius: 38px; background: #f4f1ec; box-shadow: inset 0 0 0 1px rgba(40, 30, 20, .14); clip-path: inset(0 0 var(--cut, 0px) 0 round 38px); transition: clip-path .7s cubic-bezier(.2, .7, .2, 1); }
.phone-screen { position: relative; overflow: hidden; border-radius: 30px; background: rgb(246, 243, 239); }
.phone-screen .host2 { margin-top: 12px; }
.card-pop .pop-frame { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px rgba(40, 30, 20, .10), 0 34px 70px -24px rgba(60, 38, 18, .34); }

/* fragments (phones): text, then its own piece of the real phone app */
.frag { display: none; }

.foot { border-top: 1px solid var(--line); padding: 28px 0 44px; font-size: 12px; color: var(--ink-3); }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------------- motion entry (JS) ---------------- */
.js .hero-copy > *, .js .hero-stage { animation: rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.js .hero-copy > :nth-child(2) { animation-delay: .06s; }
.js .hero-copy > :nth-child(3) { animation-delay: .12s; }
.js .hero-copy > :nth-child(4) { animation-delay: .18s; }
.js .hero-copy > :nth-child(5) { animation-delay: .24s; }
.js .hero-stage { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------------- without JavaScript: final beats as screenshots of the same live nodes; steps undimmed ---------------- */
html:not(.js) .desk .frame, html:not(.js) .phone-shell, html:not(.js) .phone-label, html:not(.js) .pop-frame, html:not(.js) .cast-av { display: none; }
html:not(.js) .phone, html:not(.js) .card-pop { position: static; opacity: 1; transform: none; margin-top: 20px; max-width: 366px; filter: none; }
html:not(.js) .step-in { opacity: 1; }
html:not(.js) .step { min-height: 0; padding: 30px 0; }
html:not(.js) .ch-visual .sticky { height: auto; }

/* ---------------- large screens ---------------- */
@media (min-width: 1600px) {
  :root { --hero-col: 500px; --col: 420px; --gap: 84px; }
  .wrap { max-width: 1400px; }
  .hero h1 { font-size: 76px; }
  .lead { font-size: 20px; }
  .hero-panel, .cast { max-width: 720px; }
  .at-glyph { font-size: 400px; left: -220px; }
  .desk { max-width: 760px; }
  .desk-frame { height: min(760px, calc(100svh - var(--nav-h) - 120px)); }
}

/* ---------------- tablets ---------------- */
@media (max-width: 1180px) {
  :root { --col: 340px; --hero-col: 380px; --gap: 48px; --gutter: 36px; }
  .at-glyph { font-size: 280px; left: -128px; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .at-glyph { display: none; }
  .cast { padding-left: 100px; }
  .step h3 { font-size: 23px; }
}
@media (max-width: 1000px) {
  :root { --col: 290px; --hero-col: 330px; --gap: 36px; --gutter: 28px; }
  .hero h1 { font-size: 44px; }
  .lead { font-size: 17px; }
  .at-glyph { display: none; }
  .cast { padding-left: 0; }
}

/* ---------------- phones (≤ 820 px): a storyboard — each step is text plus its own piece of the real phone app ---------------- */
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  :root { --nav-h: 56px; --gutter: 20px; }
  body { font-size: 16px; }
  .brand { font-size: 16px; }
  .brand svg { width: 26px; height: 26px; }
  .nav-right { gap: 8px; }
  .lang { font-size: 13px; padding: 12px 8px; }
  .btn-line { height: 40px; padding: 0 16px; font-size: 13px; }
  .hero { padding-bottom: 8px; }
  .hero-grid { display: block; min-height: 0; padding: 26px var(--gutter) 30px; }
  .hero-copy { padding-bottom: 0; }
  .eyebrow { font-size: 13px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(36px, 10.4vw, 44px); margin-bottom: 16px; }
  .lead { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
  .cta { gap: 20px; }
  .btn-solid { height: 48px; padding: 0 26px; }
  .fine { display: none; }
  .hero-stage { margin-top: 44px; }
  .at-glyph { display: block; font-size: 180px; left: auto; right: -62px; bottom: auto; top: -92px; }
  .hero-panel { display: none; }
  .hero-sheet { display: block; position: relative; z-index: 1; }
  .sheet-frame { position: relative; overflow: hidden; border-radius: 22px 22px 18px 18px; height: var(--sheet-h, 330px); box-shadow: 0 0 0 1px rgba(40, 30, 20, .10), 0 26px 60px -26px rgba(70, 45, 20, .32); background: #fff; }
  .cast { margin-top: 22px; padding-left: 0; max-width: none; }
  .cast ul { gap: 14px 20px; }

  .chapter { padding: 96px 0 10px; }
  .ch-head { padding-top: 20px; }
  .label { margin-bottom: 20px; font-size: 13px; }
  .ch-head h2 { font-size: 34px; margin-bottom: 16px; }
  .copy { font-size: 16px; line-height: 1.75; }
  .ch-body { display: block; }
  .ch-visual { display: none; }
  .step, .step[data-beats*=","], .step[data-office*=","], .step[data-m4*=","] { min-height: 0; display: block; margin: 0 !important; padding: 46px 0 0; }
  .step-in { opacity: 1; border-left: 0; padding: 0; }
  .num { margin-bottom: 10px; }
  .step h3 { font-size: 21px; margin-bottom: 6px; }
  .step p { font-size: 15.5px; line-height: 1.75; }
  .frag { display: block; margin-top: 18px; }
  .frag-frame { position: relative; overflow: hidden; border-radius: 18px; background: rgb(246, 243, 239); box-shadow: 0 0 0 1px rgba(40, 30, 20, .09), 0 22px 50px -28px rgba(70, 45, 20, .30); }
  .frag-frame + .frag-frame { margin-top: 12px; }
  .frag .clock { margin-top: 10px; }
  .ch-note { margin-top: 26px; }
  html:not(.js) .ch-visual { display: block; }
}

/* ---------------- reduced motion: final states, no transitions (site.js also stops beat changes) ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .step-in { opacity: 1; }
}

/* =================================================================================================
   04 团队办公 (#ch-office)
   ================================================================================================= */
/* chapter ch-office (团队办公 · 花钱的事，照规矩走) — marketing chrome only, on top of the shared site.css. The product UI
   inside (the phone's OA screens, the cloud-table window) is re-hosted real app DOM (data/story-office.js, pixel-verified)
   and is never styled from here: these rules only size, crop, scale, dim or fade the frames around it. */

@media (min-width: 1001px), (min-width: 821px) and (min-height: 561px) {
  /* the table window: sized by ch-office.js to the captured 660 × 470 window, scaled to the column */
  .office-desk { max-width: none; }
  .office-table-frame { width: 100%; height: auto; }
  .office-table-frame .zoom { position: absolute; left: 0; top: 0; }
  /* the phone: one screen, no clipping */
  .office-phone .phone-screen .zoom { position: absolute; left: 0; top: 0; }
  /* before step 1 and at step 4 the table stands alone; between, 林晓's / 王总's phone is in front */
  .js .office-duo:not(.front) .office-phone { transform: translate(28px, -50%) scale(.985); }
}

/* phones (≤ 820 px): each step's fragment is one band of the real phone screen */
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  .office .frag-frame .zoom { position: absolute; left: 0; }
}

/* =================================================================================================
   05 随身 (#ch-mobile)
   ================================================================================================= */
/* 04 随身 — marketing chrome only: the column, the phone shell (site.css .phone-shell / .phone-screen / .phone-label, the
   same shell as 02), the label. Everything inside the screen is a re-hosted capture of the real mobile app
   (ch-mobile.js + data/story-mob.js, pixel-verified) and is never styled from here; this file only places, crops,
   scales and fades whole nodes. */
#ch-mobile .chm-stage { display: flex; flex-direction: column; align-items: center; }
#ch-mobile .chm-phone { position: relative; margin: 0; filter: drop-shadow(0 34px 44px rgba(60, 38, 18, .20)) drop-shadow(0 3px 8px rgba(60, 38, 18, .08)); }
#ch-mobile .chm-phone .phone-screen { width: calc(390px * var(--z, .86)); height: calc(844px * var(--z, .86)); }
#ch-mobile .chm-phone .zoom { position: absolute; left: 0; top: 0; width: 390px; height: 844px; }
#ch-mobile .chm-screen, #ch-mobile .chm-call { position: absolute; left: 0; top: 0; }
#ch-mobile .chm-ball { position: absolute; }
/* a host that is not showing anything (the shadow root's :host{display:block} would otherwise beat [hidden]) */
#ch-mobile .host[hidden] { display: none !important; }
#ch-mobile .chm-stage .clock { align-self: stretch; justify-content: center; }
#ch-mobile .phone-label { justify-content: center; margin-left: 0; }

/* phones: each step's own window onto the phone screen (same frame as the other chapters' fragments) */
#ch-mobile .frag-frame .zoom { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; }
#ch-mobile .frag-frame .host { position: absolute; left: 0; top: 0; }

html:not(.js) #ch-mobile .chm-stage .clock { display: none; }
html:not(.js) #ch-mobile .chm-phone { max-width: 366px; filter: none; }
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  html:not(.js) #ch-mobile .chm-stage { align-items: flex-start; }
}

/* =================================================================================================
   06 动手 (#ch-hands)
   ================================================================================================= */
/* ch-hands (动手) — chapter chrome only, on top of site.css (same frame, phone shell, steps, clock, storyboard).
   The product UI inside is re-hosted capture (ch-hands.js + data/story-hands-*.js) and is never styled from here. */

/* the KK phone assistant only has a dark skin: the screen behind its real UI is KK's own --bg (#1a1714), so a re-host
   that has not painted yet, or the rounded corners of the screen, never flash the light phone screen of chapter 02 */
#hands-phone .phone-screen { background: #1a1714; }
#ch-hands .frag-frame.kk { background: #1a1714; }

/* storyboard fragments that show a window of a captured node (cropped top and bottom) */
#ch-hands .frag-frame .zoom { position: absolute; left: 0; top: 0; }

/* the dark KK screen should not sit half-transparent over the panel's text for long while it comes in */
#hands-phone { transition: opacity .32s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { #hands-phone { transition: none; } }

/* =================================================================================================
   07 一人工作室 (#ch-studio)
   ================================================================================================= */
/* 07 一人工作室 — marketing chrome for this chapter only (load after site.css). The chapter reuses the page's own
   chapter / step / sticky-stage / desk-frame / clock classes; everything here is the one new piece: the film frame that
   shows the teaser 小K delivered — a REAL model output, shown as itself (no player chrome imitating the app). */
#ch-studio .film { position: absolute; right: 0; top: 50%; z-index: 3; width: min(88%, 610px); margin: 0;
  transform: translate(0, calc(-50% + 22px)) scale(.985); transform-origin: 100% 50%; opacity: 0; pointer-events: none;
  transition: opacity .55s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
#ch-studio .duo.front .film { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
/* a plain white card: label, the film itself, a line of facts — page chrome, kept apart from the app panel behind it */
.film { padding: 14px 14px 12px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(40, 30, 20, .08), 0 40px 90px -30px rgba(60, 38, 18, .40), 0 4px 14px -6px rgba(70, 45, 20, .10); }
.film-label { margin: 2px 4px 12px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.film-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: inline-block; flex: none; }
.film-frame { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 1344 / 768; background: #efe4d6; box-shadow: 0 0 0 1px rgba(40, 30, 20, .07); }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-foot { margin: 12px 2px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.film .vo { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); font: 500 13px/1 var(--font); cursor: pointer; transition: border-color .2s; }
.film .vo:hover { border-color: var(--ink); }
.film .vo i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.film .vo[aria-pressed="true"] i { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.film-note { letter-spacing: .01em; }

/* phones: the film is its own piece in step 3's storyboard, under the real phone thread */
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  #ch-studio .ch-visual .film { display: none; }
  #ch-studio .frag .film { position: static; width: auto; opacity: 1; transform: none; pointer-events: auto; margin-top: 14px; padding: 12px 12px 10px; border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(40, 30, 20, .09), 0 22px 50px -28px rgba(70, 45, 20, .30); }
  #ch-studio .frag .film-label { margin: 0 2px 10px; }
}
/* without JavaScript: the desk falls back to its screenshot; the film is shown as itself under it (poster, still) */
html:not(.js) #ch-studio .film { position: static; opacity: 1; transform: none; margin-top: 20px; width: auto; max-width: 600px; }
html:not(.js) #ch-studio .film .vo { display: none; }
@media (prefers-reduced-motion: reduce) {
  #ch-studio .film { transition: none; }
}
/* the teaser's poster without JavaScript (with it, the poster is set when the chapter comes near) */
.film-frame .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =================================================================================================
   08 模型 (#ch-models)
   ================================================================================================= */
/* ch-models (08 模型) — chapter chrome only, on top of site.css (same classes, same rhythm as 01–03).
   The product UI inside (.host shadow roots) is the re-hosted real app and is never styled from here: these rules only
   frame, scale, crop and fade whole nodes. */

/* desktop: the model picker is shown as what it is in the app — a modal (its own 14-px corners, no cream window around it) */
.ch-models .chm-frame { background: transparent; border-radius: 14px; }
.ch-models .chm-desk { max-width: 700px; }
@media (min-width: 1600px) { .ch-models .chm-desk { max-width: 760px; } } /* = .desk on large screens (site.css) */

/* 林晓's phone (step 4): a plain shell filled by the sheet. It stands a little higher than the picker so its label sits
   on the white above the picker, not over the picker's own header */
.ch-models .chm-screen { background: rgb(253, 252, 250); }
.ch-models .chm-phone { top: -34px; transform: translate(0, 22px) scale(.985); }
.ch-models .duo.front .chm-phone { transform: none; }


/* phones: each step's own piece of the real phone app */
.ch-models .chm-ff { position: relative; overflow: hidden; background: rgb(253, 252, 250); box-shadow: 0 0 0 1px rgba(40, 30, 20, .09), 0 22px 50px -28px rgba(70, 45, 20, .30); }
.ch-models .chm-ff.sheet { border-radius: 16px 16px 18px 18px; }
.ch-models .chm-ff.bar { border-radius: 14px; }
.ch-models .chm-ff + .chm-ff { margin-top: 10px; }
.ch-models .chm-ff .zoom { position: absolute; left: 0; top: 0; }
/* a sheet cut under a whole row fades out instead of ending on a hard edge */
.ch-models .chm-ff.cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgba(253, 252, 250, 0), rgb(253, 252, 250)); pointer-events: none; }

/* =================================================================================================
   下载 · 常见问题 · 结尾 (#download, #faq, #start)
   ================================================================================================= */
/* ch-end · 下载 + 常见问题 + 结尾 — marketing chrome only. Builds on site.css (tokens --ink/--accent/…, .wrap, .label,
   .ch-head, .copy, .btn, .fine, .clock, .zoom, .host). Every piece of product UI in this chapter is a re-hosted capture
   of the real app (ch-end.js + data/story-end.js, pixel-verified); nothing here styles inside it — the frames only crop,
   scale and fade whole nodes. Class names are prefixed e- so the sample's old .download / .faq / .closing rules in
   site.css never touch this markup (they can be deleted when this replaces those sections). */

/* ---------------- shared ---------------- */
.e-head { max-width: 640px; }
.e-head h2 { font-size: clamp(36px, 3.7vw, 54px); line-height: 1.14; letter-spacing: -.025em; margin: 0 0 24px; }
.e-head .copy { max-width: 31em; }

/* entrance (only once ch-end.js runs and motion is allowed: it adds .e-anim to <html>; without it all is visible) */
.e-anim .e-dl-grid > li, .e-anim .e-closing h2 > span, .e-anim .e-closing-cta, .e-anim .e-closing .fine { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.e-anim .e-dl-grid.in > li, .e-anim .e-closing.in h2 > span, .e-anim .e-closing.in .e-closing-cta, .e-anim .e-closing.in .fine { opacity: 1; transform: none; }
.e-anim .e-dl-grid.in > li:nth-child(2) { transition-delay: .07s; }
.e-anim .e-dl-grid.in > li:nth-child(3) { transition-delay: .14s; }
.e-anim .e-dl-grid.in > li:nth-child(4) { transition-delay: .21s; }
.e-anim .e-closing.in h2 > span:nth-child(2) { transition-delay: .12s; }
.e-anim .e-closing.in .e-closing-cta { transition-delay: .26s; }
.e-anim .e-closing.in .fine { transition-delay: .36s; }

/* ---------------- 下载 ---------------- */
.e-download { padding: 150px 0 30px; }
.e-dl-grid { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.e-dl-grid > li { display: flex; }
.e-dl { position: relative; flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; padding: 26px 24px 22px; min-height: 212px; border-radius: 18px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: box-shadow .25s, background .25s, transform .25s; }
.e-dl:hover { background: var(--cream); box-shadow: inset 0 0 0 1px var(--line-2); }
.e-dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.e-dl-ic { width: 26px; height: 26px; color: var(--ink); margin-bottom: 26px; }
.e-dl-ic-line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.e-dl-name { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.e-dl-meta { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.e-dl-meta [data-ver]:not(:empty)::before { content: " · "; }
.e-dl-go { align-self: end; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--accent); }
.e-dl-go::after { content: " →"; display: inline-block; transition: transform .25s; }
.e-dl:hover .e-dl-go::after { transform: translateX(3px); }
/* the visitor's own platform (ch-end.js): one quiet ring, one small word — nothing else changes */
.e-dl-you { display: none; position: absolute; top: 22px; right: 20px; font-size: 12px; color: var(--accent); letter-spacing: .02em; }
.e-dl.is-you { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent), 0 18px 40px -26px rgba(189, 93, 58, .45); }
.e-dl.is-you .e-dl-you { display: block; }
.e-dl.soon .e-dl-go { color: var(--ink-3); }
.e-dl-hint { margin: 24px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-3); max-width: 52em; }
.e-dl-more { margin: 6px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.e-dl-more a, .e-dl-cli { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.e-dl-more a:hover, .e-dl-cli:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.e-dl-cli { font: inherit; background: none; border: 0; padding: 6px 0; margin: -6px 0; cursor: pointer; }
.e-dl-dot { color: var(--line-2); }
.e-dl-cmd { flex-basis: 100%; margin-top: 6px; }
.e-dl-cmd code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 6px 10px; border-radius: 8px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); font: 12.5px/1.6 var(--mono); color: var(--ink-2); user-select: all; }

/* ---------------- 常见问题 ---------------- */
.e-faq { padding: 150px 0 30px; }
/* the question column is narrower than a chapter's text column: the answers' column then fits the desktop app's
   760-px 「MCP 推荐」 dialog at 1:1 on a 1440 screen (no shrinking a real window below its own size) */
.e-faq-grid { display: grid; grid-template-columns: var(--qcol, 320px) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.e-faq-side { align-self: stretch; }
.e-faq-sticky { position: sticky; top: calc(var(--nav-h) + 44px); max-width: none; }
.e-faq-sticky h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.2; letter-spacing: -.022em; margin: 0 0 34px; }
.e-faq-index { list-style: none; margin: 0; padding: 0; }
.e-faq-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 9px 0 9px 20px; border-left: 1px solid var(--line-2); font-size: 16px; line-height: 1.5; color: var(--ink); opacity: .34; transition: opacity .45s, border-color .45s; }
.e-faq-index a:hover { opacity: .7; }
.e-faq-index li.on a { opacity: 1; border-color: var(--ink); }
.e-faq-index .num, .e-qa .num { font: 500 12px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.e-faq-list { border-top: 1px solid var(--ink); }
.e-qa { padding: 30px 0 64px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.e-qa + .e-qa { border-top: 1px solid var(--line); padding-top: 44px; }
.e-qa:last-child { padding-bottom: 20px; }
.e-qa .num { display: block; margin: 2px 0 14px; }
.e-qa h3 { font-size: 26px; line-height: 1.32; letter-spacing: -.012em; margin: 0 0 14px; }
.e-qa p { font-size: 17px; line-height: 1.85; color: var(--ink-2); margin: 0 0 6px; max-width: 38em; }
/* desktop: an answer line breaks between clauses (after ，；：。), never inside one — Chinese breaks anywhere otherwise */
@media (min-width: 1001px), (min-width: 821px) and (min-height: 561px) { .e-qa p .c { white-space: nowrap; } }

/* a real screen under an answer: where it is (林晓的手机 / 电脑), the node (cropped / scaled, never restyled), the label */
.e-ui { margin: 30px 0 0; }
.e-ui-where { margin: 0 0 10px 4px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.e-ui-where i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: inline-block; flex: none; }
.e-ui-frame { position: relative; overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px rgba(40, 30, 20, .09), 0 30px 70px -34px rgba(70, 45, 20, .32), 0 4px 14px -8px rgba(70, 45, 20, .10); }
.e-ui-phone .e-ui-frame { width: var(--fw, 452px); max-width: 100%; height: var(--fh, 300px); }
.e-ui-phone[data-frame="P_E_B1"] .e-ui-frame { background: rgb(246, 243, 239); }   /* = the mobile thread's own colour */
.e-ui-phone[data-frame="M_FEE"] .e-ui-frame { background: rgb(243, 239, 233); }    /* = the 待处理 sheet's own colour */
/* the desktop dialog keeps its own border, radius and the app's own shadow — no frame chrome around it */
.e-ui-desk .e-ui-frame { overflow: visible; border-radius: 0; box-shadow: none; width: var(--fw, 760px); max-width: 100%; height: var(--fh, 592px); }
.e-ui .clock { margin-top: 14px; }
.e-ui .fallback { display: block; max-width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(40, 30, 20, .09); }
.e-ui-phone .fallback { width: 452px; }
.e-ui-desk .fallback { width: 760px; border-radius: 12px; }
html:not(.js) .e-ui-frame { display: none; }
html:not(.js) .e-faq-index a { opacity: .8; } /* nothing lights up without the script: the index is just a list */

/* ---------------- 结尾 ---------------- */
.e-closing { position: relative; overflow: clip; padding: 190px 0 170px; text-align: center; }
.e-closing .wrap { position: relative; z-index: 1; }
/* the hero's @, once more — a quiet bookend behind the last line (decoration, not UI) */
.e-closing-at {
  position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -54%);
  font: 400 clamp(300px, 36vw, 540px)/1 var(--font);
  background: linear-gradient(160deg, #eccab3 6%, #f4e1d3 40%, #faf1ea 72%, #fff 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none; opacity: .6;
}
.e-closing h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.18; letter-spacing: -.03em; margin: 0 0 44px; }
.e-closing h2 > span { display: block; }
.e-closing-cta { justify-content: center; }
.e-closing .fine { margin-top: 24px; }
.e-cta-other[hidden] { display: none; }

/* ---------------- large screens ---------------- */
@media (min-width: 1600px) {
  .e-qa p { font-size: 18px; }
}
/* ---------------- tablets ---------------- */
@media (max-width: 1180px) {
  .e-faq-grid { --qcol: 290px; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .e-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-faq-index a { font-size: 15px; }
}
@media (max-width: 1000px) {
  .e-faq-grid { --qcol: 250px; }
  .e-faq-sticky h2 { font-size: 30px; }
  .e-faq-index a { grid-template-columns: 28px minmax(0, 1fr); padding-left: 14px; font-size: 14.5px; }
}

/* ---------------- phones (≤ 820 px): one column; each answer followed by its own piece of the real phone app ---------------- */
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  .e-download { padding-top: 100px; }
  .e-head h2 { font-size: 32px; margin-bottom: 14px; }
  .e-head .copy { font-size: 16px; line-height: 1.75; }
  .e-dl-grid { margin-top: 30px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .e-dl { min-height: 0; padding: 18px 16px 16px; border-radius: 16px; }
  .e-dl-ic { width: 22px; height: 22px; margin-bottom: 16px; }
  .e-dl-name { font-size: 19px; }
  .e-dl-meta { font-size: 12.5px; }
  .e-dl-go { margin-top: 12px; }
  .e-dl-you { top: 16px; right: 14px; font-size: 11.5px; }
  .e-dl-hint, .e-dl-more { font-size: 12.5px; }
  .e-faq { padding-top: 100px; }
  .e-faq-grid { display: block; }
  .e-faq-sticky { position: static; padding-top: 20px; }
  .e-faq-sticky h2 { font-size: 30px; margin-bottom: 8px; }
  .e-faq-index { display: none; }
  .e-faq-list { border-top: 0; }
  .e-qa { padding: 40px 0 8px; }
  .e-qa + .e-qa { padding-top: 40px; }
  .e-qa h3 { font-size: 21px; margin-bottom: 8px; }
  .e-qa p { font-size: 15.5px; line-height: 1.75; }
  .e-ui { margin-top: 20px; }
  .e-ui-frame { border-radius: 18px; }
  .e-ui-desk { display: none; } /* the 「MCP 推荐」 dialog is the desktop app's (760 px): unreadable at phone width — the answer says where it is */
  .e-dl-more { flex-direction: column; align-items: flex-start; gap: 0; }
  .e-dl-dot { display: none; }
  .e-closing { padding: 120px 0 110px; }
  .e-closing .fine { display: block; font-size: 12.5px; } /* site.css hides the hero's .fine on phones; the closing keeps its line */
  .e-closing h2 { font-size: 30px; margin-bottom: 32px; }
  .e-closing-at { font-size: 300px; }
}
@media (max-width: 820px) and (min-width: 600px), (max-height: 560px) and (max-width: 1000px) and (min-width: 600px) {
  .e-ui-desk { display: block; } /* tablets: wide enough to read it */
}

/* ---------------- reduced motion: everything in its final state ---------------- */
@media (prefers-reduced-motion: reduce) {
  .e-anim .e-dl-grid > li, .e-anim .e-closing h2 > span, .e-anim .e-closing-cta, .e-anim .e-closing .fine { opacity: 1; transform: none; transition: none; }
  .e-faq-index a, .e-dl { transition: none; }
}

/* =================================================================================================
   integration: the chapters as one page
   ================================================================================================= */
/* rules that exist only because the chapters now share one page (each chapter's own chrome is in its section above),
   and the review fixes of 10-13. Marketing chrome only: nothing here reaches inside a re-hosted app node. */

/* ---- text on the page reads at WCAG AA (4.5 : 1): the grey of small print, the solid button, small accent text ---- */
:root { --ink-3: #736c65; --accent-text: #a24b2b; }
.btn-solid { background: #b4552f; }
.btn-solid:hover { background: var(--accent-deep); }
.label .no, .e-dl-go, .e-dl-you { color: var(--accent-text); }
.e-faq-index a { opacity: 1; color: var(--ink-2); }   /* the question being read: ink + the rule beside it (no faded text) */
.e-faq-index a:hover, .e-faq-index li.on a { opacity: 1; color: var(--ink); }

/* ---- the provenance line (「真实界面 · 演示数据」) and the device caption stay small wherever they sit: a step's or an
   answer's paragraph rule must not make them body copy ---- */
.step p.clock, .e-qa p.clock { font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: none; margin: 16px 0 0; }
.frag p.clock { margin-top: 10px; }
.e-ui p.clock { margin-top: 14px; }
.e-qa p.e-ui-where { font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: none; margin: 0 0 10px 4px; }

/* ---- an in-page jump on arrival (a /#download link) lands at once; the page's smooth scroll starts after load ---- */
html { scroll-behavior: auto; }
html.smooth-ok { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.smooth-ok { scroll-behavior: auto; } }

/* ---- the big CJK headlines: a full-width comma inside a line takes half its width (no hole after 「今天，」) ---- */
.hero h1, .ch-head h2, .e-closing h2 { font-feature-settings: "halt"; }

/* ---- phones and short screens: a phrase is kept whole only where the line is long enough to hold it ---- */
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  .nw { white-space: normal; }
}

/* ---- 04 团队办公: the approval card — the approval flow of the same phone screens, larger than the phone ---- */
@media (min-width: 1001px), (min-width: 821px) and (min-height: 561px) {
  .office-band .phone-label { margin: 0 0 10px 6px; }
  .office-band .band-frame { position: relative; overflow: hidden; border-radius: 16px; background: #fff; }
  .office-band .band-frame .zoom { position: absolute; left: 0; top: 0; }
  .office-duo.band .office-phone { opacity: 0; transform: translate(28px, -50%) scale(.985); }
  .office-duo:not(.band) .office-band { opacity: 0; transform: translate(28px, calc(-50% + 22px)) scale(.985); }
}
/* the window ends inside the comments row under the flow: it fades out instead of ending on a cut line */
.office-band .band-frame::after, .office .frag-frame.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; z-index: 1; }

/* ---- a device label that sits over the panel behind it (the approval card, the KK phone, 林晓's phone in 08): a quiet
   white chip so it reads on whatever is under it ---- */
@media (min-width: 1001px), (min-width: 821px) and (min-height: 561px) {
  .office-band .phone-label, #hands-phone .phone-label, .ch-models .chm-phone .phone-label { display: inline-flex; margin: 0 0 10px 0; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(60, 38, 18, .35); }
  /* 08: 林晓's phone stands centred on the picker like every other phone (its label is a chip now) */
  .ch-models .chm-phone { top: 50%; transform: translate(0, calc(-50% + 22px)) scale(.985); }
  .ch-models .duo.front .chm-phone { transform: translate(0, -50%); }
}

/* ---- 05 随身: the screen is shown down to the top of its composer (the call: down to its 免提 / 挂断 bar) ---- */
#ch-mobile .chm-phone .phone-screen { height: var(--show-h, calc(844px * var(--z, .86))); }

/* ---- 07 一人工作室: the teaser can always be paused (it loops while it is on screen) ---- */
.film-btns { display: inline-flex; align-items: center; gap: 8px; }
.film .pp { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); font: 500 13px/1 var(--font); cursor: pointer; transition: border-color .2s; }
.film .pp:hover { border-color: var(--ink); }
.film .pp i { width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.film .pp.paused i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.film-frame { cursor: pointer; }
html:not(.js) .film .pp { display: none; }
/* desktop: while the film card is not in front it is not there for the keyboard either */
@media (min-width: 1001px), (min-width: 821px) and (min-height: 561px) {
  .js #ch-studio .duo:not(.front) .film { visibility: hidden; transition: opacity .55s ease, transform .8s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .55s; }
}

/* ---- 08 模型: the picker's frame has its final size before the data arrives (ch-models.js reads the scale back) ---- */
@media (min-width: 1001px), (min-width: 821px) and (min-height: 561px) {
  .ch-models .chm-frame { width: min(100%, 765.6px, calc((100svh - var(--nav-h) - 112px) * 696 / 700)); height: auto; aspect-ratio: 696 / 700; }
  .ch-models .chm-frame .zoom { position: absolute; left: 0; top: 0; }
}

/* ---- 常见问题: the 「MCP 推荐」 dialog shown down to its first row; the phone pieces in the page's phone shell ---- */
.e-ui-desk.cut .e-ui-frame { clip-path: inset(-80px -80px 0 -80px); }
.e-ui-desk.cut .e-ui-frame::after { content: ""; position: absolute; left: -80px; right: -80px; bottom: 0; height: 56px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; z-index: 2; }
.e-ui-phone .e-ui-frame { border-radius: 30px; margin: 9px; max-width: calc(100% - 18px);
  box-shadow: 0 0 0 9px #f4f1ec, 0 0 0 10px rgba(40, 30, 20, .14), 0 34px 60px -30px rgba(60, 38, 18, .30); }
.e-ui-phone .e-ui-where { margin-left: 6px; }

/* ---- tap targets of the small links under the download cards ---- */
.e-dl-more a.e-dl-kk { display: inline-block; padding: 11px 0; margin: -11px 0; }
.e-dl-cli { padding: 11px 0; margin: -11px 0; }
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  .film .vo, .film .pp { height: 40px; }
}

/* ---- phones (and phones turned sideways): every step's piece of the app has its box BEFORE its data arrives, so the
   page never grows under the reader and an in-page jump lands where it points. The box = a × (the piece's width) + b,
   measured per step by integrate/measure-frags.mjs and written into the step's style by assemble.mjs. A piece is never
   wider than 440 px (tablets in portrait, phones sideways: the phone app stays near its own size beside the text) ---- */
@media (max-width: 820px), (max-height: 560px) and (max-width: 1000px) {
  .steps { container-type: inline-size; }
  .frag { max-width: 440px; }
  .js .step[style*="--fa"]:not([data-frag-ready])::after { content: ""; display: block; height: calc(var(--fa) * min(100cqw, 440px) + var(--fb) * 1px); }
}
.e-faq-list { container-type: inline-size; }
.e-ui[style*="--fa"] .e-ui-frame { height: var(--fh, calc(var(--fa) * min(100cqw - var(--fpad), var(--fwmax)) + var(--fb) * 1px)); }
.e-ui-phone { --fwmax: 452px; --fpad: 18px; }
.e-ui-desk { --fwmax: 760px; --fpad: 0px; }