/* LP home v3 — ported from .dev-tmp/lp-book-proto (2026-07-17). Scoped check: no collisions with lp.css. */

:root{
  --rk-paper:#FAF8F4; --rk-paper-2:#F3EFE7; --rk-surface:#FFFFFF;
  --rk-ink:#2B2A26; --rk-ink-soft:#6E6A61; --rk-ink-muted:#9B958A;
  --rk-line:#E7E1D6;
  --rk-emerald:#0FA47E; --rk-emerald-hover:#0C8A6A; --rk-emerald-soft:#E3F3EC;
  --rk-radius-sm:10px; --rk-radius:16px; --rk-radius-lg:20px;
  --shadow-card:0 6px 18px -12px rgba(43,42,38,.18);
  --shadow-object:0 24px 48px -20px rgba(43,42,38,.35);
  --font-display:var(--rk-font-display);
  --font-body:var(--rk-font-body);

  /* 中后段比例与节奏（2026-07-17）：与 Hero 同源——尺寸跟外壳同呼吸，不钉死像素。
     上限受素材原生分辨率约束，下限保小桌面可读性；窄屏由既有断点接管。 */
  --sec-pad:clamp(64px,6.2vw,104px);        /* 段落上下留白，替代原型期 84/96 一次性值 */
  --sec-pad-tight:clamp(18px,1.7vw,28px);   /* 与上一段紧耦合时的顶部留白（For whom 承接 Formats） */
  --head-gap:clamp(30px,3.2vw,52px);        /* 标题组 → 展品 */
  --grid-gap:clamp(16px,1.5vw,26px);        /* 卡片网格 */
  --split-gap:clamp(36px,3.6vw,72px);       /* 两栏分栏 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--rk-paper); color:var(--rk-ink); overflow-x:clip;
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  background-image:radial-gradient(rgba(43,42,38,.022) 1px, transparent 1px);
  background-size:22px 22px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:var(--font-body)}

/* ── top bar ── */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:13px 28px;background:color-mix(in srgb,var(--rk-paper) 82%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.topbar.scrolled{border-color:var(--rk-line)}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:22px;display:flex;align-items:center;gap:8px;text-decoration:none}
.wordmark .ear{width:10px;height:10px;border:2px solid var(--rk-ink);border-bottom:0;border-radius:6px 6px 0 0;transform:rotate(8deg);margin-top:-10px}
.topbar nav{display:flex;gap:10px;align-items:center}
.btn-quiet{font:600 15px var(--font-body);color:var(--rk-ink-soft);text-decoration:none;padding:8px 14px;border-radius:999px}
.btn-quiet:hover{color:var(--rk-ink);background:var(--rk-paper-2)}
.btn-solid{font:700 15px var(--font-body);color:#fff;background:var(--rk-emerald);text-decoration:none;padding:9px 18px;border-radius:999px;box-shadow:0 4px 14px -6px rgba(15,164,126,.5);transition:background .18s,box-shadow .18s}
.btn-solid:hover{background:var(--rk-emerald-hover);box-shadow:0 6px 18px -6px rgba(15,164,126,.6)}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;font:700 15px var(--font-body);color:var(--rk-ink);text-decoration:none;
  border:1.5px solid var(--rk-line);background:var(--rk-surface);border-radius:999px;padding:10px 20px;transition:border-color .18s,color .18s}
.btn-ghost:hover{border-color:var(--rk-emerald);color:var(--rk-emerald)}
.btn-ghost svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.btn-ghost:hover svg{transform:translateX(3px)}

/* ── bookmark ribbon ── */
.bookmark{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.bookmark a{display:flex;align-items:center;gap:8px;text-decoration:none;padding:5px 2px;color:var(--rk-ink-muted);font:600 11.5px var(--font-body);letter-spacing:.3px}
.bookmark a .dot{width:7px;height:7px;border-radius:50%;background:var(--rk-line);transition:all .25s}
.bookmark a span{opacity:0;transform:translateX(4px);transition:all .2s}
.bookmark:hover a span{opacity:1;transform:none}
.bookmark a.active{color:var(--rk-emerald)}
.bookmark a.active .dot{background:var(--rk-emerald);box-shadow:0 0 0 4px var(--rk-emerald-soft)}
@media(max-width:900px){.bookmark{display:none}}

/* ── spreads / shared ── */
.spread{width:min(calc(100% - 2*clamp(24px,4vw,72px)),1560px);margin-inline:auto;padding:var(--sec-pad) 0}
.spread.tight-top{padding-top:var(--sec-pad-tight)}
.kicker{font:700 13px var(--font-body);letter-spacing:1.6px;text-transform:uppercase;color:var(--rk-emerald);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:2px;background:var(--rk-emerald);border-radius:2px}
.kicker.center{justify-content:center}
h1,h2,h3{font-family:var(--font-display);line-height:1.14;font-weight:700}
h1{font-size:clamp(48px,3.6vw,68px);line-height:1.05;letter-spacing:-0.025em}
h1{text-wrap:balance}
.h1-em{display:inline-block;text-wrap:balance}
h2{font-size:clamp(28px,3.2vw,40px)}
.h1-em{color:var(--rk-emerald)}
.sub{color:var(--rk-ink-soft);font-size:17.5px;max-width:56ch;margin-top:14px}
.center-head{text-align:center;max-width:min(100%,clamp(600px,46vw,820px));margin:0 auto}
.center-head .sub{margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1.1)}
.reveal.in{opacity:1;transform:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center;margin-top:34px}
.panel-img{border-radius:var(--rk-radius);overflow:hidden;box-shadow:var(--shadow-object);background:var(--rk-surface)}

/* ── HERO（nav + hero = 一个满屏首屏）──
   Step-fullscreen：min-height:100svh 占满一屏(svh 防手机地址栏伸缩跳动)；min-height 而非固定高 → 矮屏内容自然超出不压缩；
   顶部 padding 清 fixed nav；align-items:center 垂直居中；position:relative 供滚动提示定位。 */
.hero{display:grid;grid-template-columns:minmax(380px,0.82fr) minmax(560px,1.18fr);gap:clamp(40px,4.5vw,88px);align-items:center;
  min-height:100vh;min-height:100svh;padding-block:clamp(78px,10vh,112px) clamp(40px,5.5vh,72px);position:relative}
/* 左栏节奏：h1 放大一档+行高略收；主标题区↔输入、输入↔Try 两组间距随视口高拉开(vh)；kicker↔h1/sub 保持紧凑。 */
.hero-copy h1{margin-top:14px;font-size:clamp(52px,4.1vw,78px);line-height:1.02}
.hero-copy .sub{margin-top:12px}
.hero-copy .composer{margin-top:clamp(30px,7.2vh,92px)}
.hero-copy .hero-actions{margin-top:clamp(20px,5vh,62px)}
.hero-copy{width:100%;max-width:570px}
.hero-copy .sub{max-width:540px;font-size:clamp(16px,1.15vw,19px);line-height:1.65}
.hero-copy .trust{display:flex;gap:12px 20px;margin-top:18px;color:var(--rk-ink-soft);font-size:14.5px;font-weight:600;flex-wrap:wrap;align-items:center}
.hero-copy .trust span{display:flex;align-items:center;gap:7px}
.hero-copy .trust svg{width:17px;height:17px;stroke:var(--rk-emerald)}
.composer{width:100%;margin-top:24px;background:var(--rk-surface);border:1px solid var(--rk-line);border-radius:var(--rk-radius-lg);padding:9px 9px 9px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-card);max-width:560px;transition:box-shadow .3s,border-color .3s}
.composer input{flex:1;border:0;outline:0;font:600 16.5px var(--font-body);color:var(--rk-ink);background:transparent;min-width:0}
.composer input::placeholder{color:var(--rk-ink-muted);font-weight:400}
.composer button{border:0;cursor:pointer;background:var(--rk-emerald);color:#fff;font:700 15.5px var(--font-body);padding:12px 20px;border-radius:14px;display:flex;align-items:center;gap:8px;transition:background .18s,transform .18s;white-space:nowrap}
.composer button:hover{background:var(--rk-emerald-hover);transform:translateY(-1px)}
.composer button svg{transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.composer button:hover svg{transform:translateX(4px)}
.composer button.pulse-once{animation:ctaPulse .8s ease-out 2}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips .idea-chip{appearance:none;margin:0;min-height:36px;text-align:left;font:600 13.5px var(--font-body);color:var(--rk-ink-soft);border:1px solid var(--rk-line);background:var(--rk-surface);border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}
.chips .idea-chip:hover,.chips .idea-chip.is-selected{border-color:var(--rk-emerald);color:var(--rk-emerald);background:var(--rk-emerald-soft);transform:translateY(-2px)}
.chips .idea-chip.is-selected{box-shadow:inset 0 0 0 1px rgba(15,164,126,.14)}
.chips .idea-chip:focus-visible{outline:3px solid rgba(15,164,126,.3);outline-offset:2px}
@media (hover:none),(pointer:coarse),(max-width:767px){.chips .idea-chip{min-height:44px}}
@media (prefers-reduced-motion:reduce){.chips .idea-chip{transition:none}.composer button.pulse-once{animation:none}}

/* hero shelf stage — Step-fullscreen：去下坠(flex-end→center)让书架视觉中心对齐左栏中部；font-size 旋钮 +~20% 整体放大。 */
.hero-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding-bottom:0}
.shelf-unit{display:flex;flex-direction:column;width:fit-content;max-width:100%;font-size:clamp(16px,1.66vw,27px)}
.shelf-line{display:flex;align-items:flex-end;justify-content:center;gap:.75em;padding:0 .625em;position:relative;z-index:3}
.shelf-obj{position:relative;flex:0 0 auto;overflow:hidden;background:var(--rk-surface);
  border:1px solid rgba(79,56,32,.14);box-shadow:0 14px 26px -10px rgba(65,49,31,.3);
  opacity:1;animation:objectIn 360ms both cubic-bezier(.2,.8,.2,1);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s}
.shelf-obj:hover{transform:translateY(-8px);box-shadow:0 24px 40px -12px rgba(65,49,31,.38);z-index:6}
.shelf-obj img{width:100%;height:100%;object-fit:cover}
.shelf-obj .art{position:absolute;inset:0;background-size:cover;background-position:center}
.obj-cover{width:6em;height:8.875em;border-radius:6px 10px 10px 6px;animation-delay:.12s}
.obj-cover .mini-title{position:absolute;top:8px;left:0;right:0;z-index:2;text-align:center;color:#FFF7E8;
  font:700 11px/1.25 var(--font-display);text-shadow:0 1px 8px rgba(20,25,60,.6);padding:0 8px}
.obj-open{width:9.75em;height:6.875em;border-radius:8px;animation-delay:.2s}
.obj-open .art{background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852016037691461.webp?x-oss-process=image/resize,w_1320/format,webp');background-size:118%}
.obj-char{width:5.375em;height:8.125em;border-radius:10px;animation-delay:.28s;display:flex;flex-direction:column}
.obj-char small{font:700 9.5px var(--font-body);color:var(--rk-ink-soft);text-align:center;padding:7px 3px 2px;letter-spacing:.4px}
.obj-char .char-art{flex:1;margin:0 6px 8px;background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852015928397893.webp');background-size:cover;background-position:center 20%;border-radius:6px}
.obj-anim{width:6.5em;height:8.125em;border-radius:10px;animation-delay:.36s}
.obj-anim .art{background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852016030105669.webp?x-oss-process=image/resize,w_140/format,webp');background-position:38% center}
.obj-anim .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(20,20,20,.3);animation:playPulse 2.6s .9s ease-in-out infinite}
.obj-anim .play svg{width:16px;height:16px;fill:var(--rk-ink);margin-left:2px}
.hero-plank{position:relative;z-index:2;width:110%;max-width:none;margin:-.5em 0 0 -5%;opacity:.97}
.cat-wrap{position:relative;flex:0 0 auto;z-index:5;width:4.5em;margin:0 0 -.125em .25em;transform-origin:50% 100%;
  opacity:1;animation:objectIn 360ms .44s both cubic-bezier(.2,.8,.2,1),catIdle 4s 1.2s ease-in-out infinite}
.cat-wrap .cat{width:100%;filter:drop-shadow(0 12px 16px rgba(43,42,38,.22))}
.cat-tail{position:absolute;z-index:1;right:-1em;bottom:.5em;width:2.25em;height:3.375em;
  border:.5625em solid #3c2b24;border-left-color:transparent;border-radius:50%;
  transform-origin:20% 90%;animation:tailMove 2.8s 1.2s ease-in-out infinite}
.cat-blink{position:absolute;z-index:4;top:16.5%;left:13%;width:69%;height:2.7%;border-radius:50%;
  background:#3e2f29;opacity:0;transform:scaleY(.2);animation:blink 5.4s 1.8s infinite}
.hero-copy .kicker{animation:fadeUp .45s .02s both}
.hero-copy h1{animation:fadeUp .5s .07s both}
.hero-copy .sub{animation:fadeUp .5s .14s both}
.hero-copy .composer{animation:fadeUp .5s .2s both}
.hero-copy .hero-actions{animation:fadeUp .5s .26s both}
.hero-copy .trust{animation:fadeUp .5s .32s both}
.hero-stage{animation:shelfRise .55s .08s both}
/* Step-fullscreen 首屏滚动提示：hero 底部中央小下箭头,缓慢上下浮动,低饱和灰绿,轻不抢视线;
   一旦滚动即淡出且不再现（JS 加 .gone）。reduced-motion 去浮动。 */
.scroll-cue{position:absolute;left:50%;bottom:clamp(14px,2.4vh,30px);z-index:6;
  display:grid;place-items:center;width:40px;height:40px;
  color:color-mix(in srgb,var(--rk-emerald) 42%,var(--rk-ink-muted) 58%);
  opacity:.6;transition:opacity .55s ease;animation:scrollCueFloat 2.1s ease-in-out infinite;
  animation-delay:1.6s}
.scroll-cue svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue:hover{opacity:.9}
.scroll-cue.gone{opacity:0;pointer-events:none}
@keyframes scrollCueFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
.scroll-cue{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}

/* ══ READ ONE — 阅读舞台（2026-07-17 视觉重做）══
   纯样式改造：不碰 home-v3.js 的任何逻辑/状态/事件。CSS 只读 [data-flipped]，不写；
   不给 .leaf 设 z-index（JS 用 style.zIndex 排层）；不改 #flip-prev/#flip-next 的结构位置与 id。
   核心：书与箭头共处一个「阅读舞台」，封面态放大且与展开态在同一舞台内居中。 */
#read .center-head{max-width:min(100%,clamp(760px,58vw,860px))}
#read .center-head h2{margin-top:16px!important}
#read .center-head .sub{margin-top:18px}
.began-line{text-align:center;margin-top:7px;font:600 15px var(--font-body);color:var(--rk-ink-muted)}
.began-line q{font-style:italic;color:var(--rk-ink-soft);quotes:'“' '”'}

/* 舞台：无描边，用纸感渐层 + 圆角界定内容区域（规范禁止大面积描边框住模块）。
   舞台宽 = 书 + 两侧箭头 + 内边距，由此保证桌面端落在 900-1040 区间。 */
.flip-zone{
  --nav-size:46px;
  --nav-gap:20px;
  --stage-pad:clamp(14px,1.4vw,22px);
  --closed-scale:1.16;                                   /* 封面态放大倍数，与展开态视觉重量看齐 */
  --book-w:min(clamp(560px,54vw,840px),88vh);            /* 88vh 防矮屏竖向溢出 */
  --cover-w:calc(var(--book-w) / 2 * var(--closed-scale));
  --nav-inset:calc((var(--book-w) - var(--cover-w)) / 2); /* 封面态箭头内收量 = 书与封面的半宽差 */
  display:flex;flex-direction:column;align-items:center;
  width:min(100%,980px);
  margin:16px auto 0;
  padding:0;
  border-radius:0;
  background:transparent;
}
/* 语言 chips = 这本书的属性：书正上方居中一排（Model B 书整体居中，chips 同步居中）。降一档尺寸。 */
.langbar{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;
  width:min(720px,calc(100% - 116px));margin:0 auto 16px;padding:0;border:0}
.langbar button{box-sizing:border-box;height:33px;font:700 12.5px var(--font-body);color:var(--rk-ink-soft);
  border:1px solid color-mix(in srgb,var(--rk-line) 86%,transparent);
  background:color-mix(in srgb,var(--rk-surface) 82%,var(--rk-paper));
  border-radius:999px;padding:0 13px;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.langbar button:hover{border-color:color-mix(in srgb,var(--rk-emerald) 45%,var(--rk-line));color:var(--rk-ink)}
.langbar button.active{color:#fff;background:var(--rk-emerald);border-color:var(--rk-emerald)}

.flipbook-wrap{
  --book-w:min(840px,calc(100% - 116px));
  position:relative;display:grid;place-items:center;
  width:100%;height:clamp(520px,39vw,560px);min-height:0;
  isolation:isolate;
}
.flipbook-wrap::before{content:"";position:absolute;inset:5% 2% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 58%,rgba(255,253,248,.72) 0%,rgba(255,253,248,.28) 44%,transparent 72%)}
/* The same physical book stays pinned to one stage; only its transform changes. */
.flipbook{position:absolute;left:50%;top:calc(50% + 6px);flex:none;width:var(--book-w);height:auto;aspect-ratio:42/25;
  perspective:calc(var(--book-w)*2.7);transform:translate(-50%,-50%);transform-origin:50% 50%;
  /* Step4：整书滑移 morph 与 leaf 掀页同时长同 easing → 开合时「滑到中心」与「掀页」同步收束，读作一次开书。 */
  transition:transform .85s cubic-bezier(.32,.65,.3,1),opacity .45s ease}
/* Model B（Andy 2026-07-19）：合上的书作为整体居中于舞台。封面=盒右半页(封面画)，
   把其可见外框推到舞台正中 → translate ≈ -74.5%（比旧 -71% 更居中；去掉缩小/下移，三态书高一致=投影基线统一）；
   封底=盒左半页(end-face)，镜像 translate ≈ -25.5%。摊开态(1/2)沿用默认 translate(-50%)。
   开合时 translate 连续过渡 = 书脊小幅 morph（不硬切）。厚度块加上后于 step2 再微调这两个百分比。*/
.flipbook[data-flipped="0"]{transform:translate(-73.7%,-50%)}   /* +左厚 ~20px 后回正 */
.flipbook[data-flipped="7"]{transform:translate(-26.3%,-50%)}   /* +右厚 ~20px 后回正（镜像）*/
/* A grounded contact shadow and a shared central gutter make both states read as one object. */
/* Step5 投影统一：接触阴影移到 .flipbook-wrap（不随书盒 translate 滑走），恒居中贴书底；
   宽度随可见书宽连续过渡（合上 ~54% / 摊开 ~95% of book_w）。单一柔和横条，同向贴底、不甩团、不悬空。 */
.flipbook::after{content:none}
.flipbook-wrap::after{content:"";position:absolute;left:50%;top:calc(50% + 6px + var(--book-w) * .296);
  transform:translateX(calc(-50% + 5px));width:calc(var(--book-w) * .95);height:20px;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(43,42,38,.28),rgba(43,42,38,.10) 54%,transparent 80%);
  filter:blur(8px);transition:width .85s cubic-bezier(.32,.65,.3,1)}
.flipbook-wrap:has(.flipbook[data-flipped="0"])::after,
.flipbook-wrap:has(.flipbook[data-flipped="7"])::after{width:calc(var(--book-w) * .54)}
/* Step8 中缝：柔和内凹暖灰棕(中央略暗向两侧渐淡)，去硬白线；宽 ≈3.8% 书宽；不发光。 */
.flipbook::before{content:"";position:absolute;z-index:60;left:50%;top:1%;bottom:1%;width:calc(var(--book-w) * .038);
  transform:translateX(-50%);pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(74,56,38,.09) 26%,rgba(74,56,38,.20) 50%,rgba(74,56,38,.09) 74%,transparent);
  filter:blur(1.6px);transition:opacity .38s ease}
.flipbook:not([data-flipped="0"])::before{opacity:1}
.flipbook .base{position:absolute;left:0;top:0;width:50%;height:100%;background:var(--rk-paper-2);border-radius:10px 0 0 10px;
  border:1px solid rgba(79,56,32,.12);
  box-shadow:inset -18px 0 26px -18px rgba(43,42,38,.5),-4px 5px 0 -2px #E9E1D2,-8px 9px 22px -12px rgba(43,42,38,.3);
  opacity:0;transition:opacity .5s}
.flipbook:not([data-flipped="0"]) .base{opacity:1}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:0% 50%;
  transition:transform .85s cubic-bezier(.32,.65,.3,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:var(--rk-surface);
  border:1px solid rgba(79,56,32,.14)}
/* Step8 跨页外缘书口：极薄 3 层柔和暖色（高光#E9DFCB→暗#D4C5AA，非纯白），~7px≈1%书宽；无落影(统一走 wrap 落地影)。 */
.face.front{border-radius:0 9px 9px 0;
  box-shadow:2px 0 0 0 #E9DFCB,4.5px 0 .5px 0 #DED0B4,7px 0 1px -.5px #D4C5AA}
.face.back{transform:rotateY(180deg);border-radius:9px 0 0 9px;
  box-shadow:-2px 0 0 0 #E9DFCB,-4.5px 0 .5px 0 #DED0B4,-7px 0 1px -.5px #D4C5AA}
/* 中缝与页面弧度：阴影必须打在 .art 上（inset 阴影画在背景之上、但会被绝对定位的 .art 盖住）。
   右页（front）内侧=左缘，左页（back）内侧=右缘 → 合起来即书脊中缝。 */
.face .art{position:absolute;inset:0;background-size:cover;background-position:center}
/* Step8 中缝内凹：柔和暖灰棕(非冷灰)、更浅，让内缘自然弯入书脊；去掉外缘密集条纹(百叶窗)。 */
.face.front .art{box-shadow:inset 20px 0 26px -20px rgba(74,56,38,.40),inset 0 -6px 12px -11px rgba(74,56,38,.20)}
.face.back .art{box-shadow:inset -20px 0 26px -20px rgba(74,56,38,.40),inset 0 -6px 12px -11px rgba(74,56,38,.20)}
.flipbook:not([data-flipped="0"]) .face.front::after,
.flipbook:not([data-flipped="0"]) .face.back::after{content:none}
.face .art.strip-art{background-image:url('https://static-res.camika.ai/upload/image/0dab/cdf1/846757255352453.webp');background-size:410% 100%}
.face .art.read-spread{background-size:200% 100%;background-repeat:no-repeat}
.face .art.read-spread.spread-left{background-position:left center}
.face .art.read-spread.spread-right{background-position:right center}
.face .art.read-spread.spread-01{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004933140613.webp')}
.face .art.read-spread.spread-02{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004937384069.webp')}
.face .art.read-spread.spread-03{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004941238405.webp')}
.face .art.read-spread.spread-04{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004944806021.webp')}
.face .art.read-spread.spread-05{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004948443269.webp')}
.face .art.read-spread.spread-06{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004952973445.webp')}
/* Step8 文字区 = 真实书页排版：底部实心暖奶油区(占页高 18%)，与插画仅轻微过渡(顶 34% 渐入)，非字幕雾罩；
   左右同高同基线；文字距外缘 28-36px 不进页层/中缝。 */
.face .caption{position:absolute;left:0;right:0;bottom:0;height:max(76px,18%);
  display:flex;flex-direction:column;justify-content:center;padding:6px clamp(28px,5%,36px);
  background:linear-gradient(rgba(245,238,223,0),#F5EEDF 32%);
  font:600 clamp(13px,1.02vw,17.5px)/1.4 var(--font-body);color:var(--rk-ink);text-align:center;
  transition:opacity .15s ease}
.face .caption.lang-fade{opacity:0}
.face .caption[dir="rtl"]{font-size:clamp(15.5px,1.12vw,19px)}
/* 封面态 = 精装书：左侧书脊厚度（书体藏在封面后）+ 右侧书口纸叠 + 更实的落影 */
/* 选择器必须压过 .face.front（0,2,0）否则 box-shadow 被其覆盖 → 封面厚度不显（旧版也中招）。 */
.face.front.cover-face{display:flex;align-items:flex-start;justify-content:center;
  /* Step8 克制精装：左仅一条窄书脊(::before)；右极薄书口 3 层柔和(高光→暗)；底部薄页边；主落影偏右下。禁密集竖条/发光/统一光晕。 */
  box-shadow:
    2px 0 0 0 #E9DFCB,4px 0 .5px 0 #DED0B4,5.5px 0 1px -.5px #D4C5AA,
    0 3px 0 -.5px #E4D8BF,0 5px 0 -1.5px #D4C5AA,
    3px 15px 26px -14px rgba(43,42,38,.30)}
/* 窄书脊：与深蓝封面协调的暖偏冷深色，左折最深向右自然渐淡；无纯白高光。约 3% 封面宽。 */
.cover-face::before{content:"";position:absolute;z-index:4;left:0;top:0;bottom:0;width:11px;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,18,38,.55),rgba(28,40,66,.28) 55%,rgba(11,18,38,.08) 100%)}
.cover-face::after{content:none}
.cover-face .art{background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852015932198981.webp?x-oss-process=image/resize,w_260/format,webp')}
.cover-face .cover-title{position:relative;z-index:2;margin-top:clamp(22px,2.2vw,34px);text-align:center;color:#FFF7E8;
  font:700 clamp(26px,1.9vw,34px)/1.2 var(--font-display);text-shadow:0 2px 14px rgba(20,25,60,.55);padding:0 24px}
/* Step3 封底 = 合上实体书背面：延续封面星空调（更沉静简化）+ The End/CTA 中上 + 底部出版社 colophon（猫+Made with ReadKidz）。*/
.end-face{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:clamp(26px,3.5vw,46px) 8% clamp(16px,2vh,26px);
  background:
    radial-gradient(1.5px 1.5px at 22% 24%,rgba(255,247,224,.95),transparent 62%),
    radial-gradient(1.1px 1.1px at 67% 17%,rgba(255,247,224,.8),transparent 62%),
    radial-gradient(1.7px 1.7px at 81% 38%,rgba(255,246,222,.9),transparent 62%),
    radial-gradient(1px 1px at 36% 55%,rgba(255,247,224,.66),transparent 62%),
    radial-gradient(1.3px 1.3px at 57% 70%,rgba(255,247,224,.7),transparent 62%),
    radial-gradient(1px 1px at 14% 66%,rgba(255,247,224,.6),transparent 62%),
    radial-gradient(2.4px 2.4px at 50% 30%,rgba(255,238,196,.98),rgba(255,238,196,.18) 42%,transparent 72%),
    radial-gradient(135% 92% at 50% 4%,#243a5d 0%,#182843 44%,#0e1a31 100%)}
.end-face .end-main{margin-top:clamp(26px,6.5vh,64px);display:flex;flex-direction:column;align-items:center;gap:clamp(13px,1.5vw,19px)}
.end-face .the-end{font:700 clamp(30px,2.2vw,38px) var(--font-display);color:#FBF3E2;text-shadow:0 2px 16px rgba(8,14,36,.55)}
.end-face .book-colophon{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:5px}
.end-face .colophon-cat{width:clamp(50px,4.6vw,68px);height:auto;filter:drop-shadow(0 4px 10px rgba(8,14,36,.4))}
.end-face .colophon-mark{font:600 10.5px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,246,225,.6)}
/* Step8 封底镜像：书口(极薄3层)在左(-X)、窄书脊在右(::after)；材质/落影与封面同一套。压过 .face.back(0,2,0)。 */
.face.back.end-face{box-shadow:
    -2px 0 0 0 #E9DFCB,-4px 0 .5px 0 #DED0B4,-5.5px 0 1px -.5px #D4C5AA,
    0 3px 0 -.5px #E4D8BF,0 5px 0 -1.5px #D4C5AA,
    3px 15px 26px -14px rgba(43,42,38,.30)}
.end-face::after{content:"";position:absolute;z-index:4;right:0;top:0;bottom:0;width:11px;pointer-events:none;
  background:linear-gradient(270deg,rgba(6,11,26,.55),rgba(20,30,54,.28) 55%,rgba(6,11,26,.08) 100%)}
/* 箭头依附书本：展开态由 flex 间距贴住书缘；封面态书变窄 → 用 :has() 让箭头同步内收贴住封面缘。
   位移走 --nav-x（transform-only，可平滑过渡）；:has() 不支持时退化为展开态位置，不影响功能。 */
.flip-nav{--nav-x:0px;--nav-y:0px;position:absolute;z-index:70;top:calc(50% + 6px);
  width:var(--nav-size);height:var(--nav-size);border-radius:50%;border:1px solid var(--rk-line);
  background:color-mix(in srgb,var(--rk-surface) 90%,var(--rk-paper));cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -15px rgba(43,42,38,.46);flex:none;
  transform:translateX(var(--nav-x)) translateY(calc(-50% + var(--nav-y)));
  transition:transform .7s cubic-bezier(.3,.7,.3,1),border-color .2s,opacity .3s,background .2s}
.flip-nav:hover{border-color:var(--rk-emerald);background:var(--rk-surface);
  transform:translateX(var(--nav-x)) translateY(calc(-50% + var(--nav-y))) scale(1.05)}
/* 箭头固定在舞台外两侧、垂直居中，任何状态位置不变（去掉旧的封面态 :has 内收） */
#flip-prev{left:calc(50% - var(--book-w)/2 - var(--nav-gap) - var(--nav-size))}
#flip-next{right:calc(50% - var(--book-w)/2 - var(--nav-gap) - var(--nav-size))}
.flip-nav svg{width:calc(var(--nav-size) * .43);height:calc(var(--nav-size) * .43);stroke:var(--rk-ink);fill:none;stroke-width:2.2}
.flip-nav[disabled]{opacity:.25!important;cursor:default}
.flip-nav[disabled]:hover{transform:translateX(var(--nav-x)) translateY(calc(-50% + var(--nav-y)))}
/* ── 页码圆点指示器 + 环形进度（自动播放）──
   4 视图对应 flipped 0/1/2/3；当前高亮；自动播放时当前圆点 SVG stroke-dashoffset 环形倒计时。 */
.flip-dots{display:flex;gap:13px;justify-content:center;align-items:center;margin-top:18px}
.flip-dots button{position:relative;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.flip-dots .dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--rk-ink-muted) 55%,transparent);transition:background .25s,transform .25s}
.flip-dots button:hover .dot{background:var(--rk-ink-muted)}
.flip-dots button.active .dot{background:var(--rk-emerald);transform:scale(1.2)}
.flip-dots .ring{position:absolute;inset:0;transform:rotate(-90deg);opacity:0;transition:opacity .3s ease}
.flip-dots .ring circle{fill:none;stroke:var(--rk-emerald);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:69.115;stroke-dashoffset:69.115}
/* 自动播放中的当前圆点：显示环，dashoffset 4s 走满（JS 加/重启 .counting 触发） */
.flip-dots button.counting .ring{opacity:1}
.flip-dots button.counting .ring circle{animation:dashFill 4s linear forwards}
@keyframes dashFill{from{stroke-dashoffset:69.115}to{stroke-dashoffset:0}}
/* 提示行按 Andy 要求移除（2026-07-19）：CSS 隐藏；#flip-hint 元素与 JS 填充保留但 null-safe/无副作用。 */
.flip-hint{display:none}
.flip-hint--legacy{margin-top:9px;font:500 13.5px/1.45 var(--font-body);color:var(--rk-ink-soft);opacity:.82;text-align:center;
  transition:opacity .5s ease}
.flip-hint.faded{opacity:0}
.flip-zone:has(.flipbook-wrap:hover) .flip-hint{opacity:.82}
/* 首屏收紧（Andy spec #11）：1440×900 标题+书+圆点+提示同屏；langbar 左缘对齐书左缘 */
#read{padding-block:clamp(30px,3.4vh,52px)}
#read .center-head h2{margin-top:8px}
#read .center-head .sub{margin-top:8px;max-width:52ch}
#read .flip-zone{margin-top:12px}
#read .flip-zone .langbar{margin-bottom:12px;width:min(720px,calc(100% - 116px))}
#read .flipbook-wrap{--book-w:min(720px,calc(100% - 116px));height:clamp(392px,30vw,452px)}
#read .flip-dots{margin-top:12px}
#read .flip-hint{margin-top:7px}

/* ── SCROLLY (how a book is born) ── */
/* 模块间距（Andy 2026-07-20 审计）：#birth 是 0-padding 的 380vh 滚动段，原先 read→birth 只剩
   ~5px 观感（翻页圆点几乎贴上「How a book is born」标题）、birth→ages 又只有半拍(1×--sec-pad)。
   缓冲全部落在 #birth 一侧，绝不动 #read/hero 的 vh 首屏收紧(read=Andy spec #11 同屏,hero=满屏)：
   顶 0.6S 给 read→birth 一个耦合档缓冲（读书↔成书是叙事对，故 <2S）；底 1S 让 birth→ages 回到标准 2S。 */
#birth{padding-top:calc(var(--sec-pad)*0.6);padding-bottom:var(--sec-pad)}
.scrolly-track{height:380vh;position:relative}
.scrolly-stage{position:sticky;top:0;height:100vh;min-height:calc(100svh - 72px);display:flex;align-items:center;overflow:hidden;
  padding-block:clamp(40px,6vh,80px)}
/* Release gap. The stage is 100vh with its content vertically centred, so the lower half of that
   centring — 50vh minus half the content height — turns into dead space the instant the pin
   releases, and it GROWS with viewport height (67px @700, 160px @900, 326px @1234). The old
   padding-bottom:1S was sized as if this were an ordinary section boundary, so birth→ages measured
   364px against the ~180-215px every other boundary on this page uses. Drop that padding and pull
   the next section back up by a viewport-derived amount.
   Two things bound the pull, and both were learned the hard way:
   - Centring must not change. It is what the reader looks at for the whole 380vh of pinned
     scrolling; the release is one moment and does not get to dictate the other 99%.
   - The pull cannot exceed #ages's own lead-in (~115px of padding before its first glyph), or that
     first glyph rises into the viewport while the story is still pinned. Making the stage opaque to
     hide it does NOT work: the stage's box bottom sits at the track bottom, so anything pulled above
     that line is covered permanently, not just during the pin — it hid the next section's eyebrow
     outright.
   So tall viewports keep some of the void by construction. Removing the rest means letting the
   artwork scale with viewport height instead of sitting fixed-size in a taller and taller panel —
   a design change, not a spacing one. */
@media(min-width:1024px){
  #birth{padding-bottom:0;margin-bottom:clamp(-110px,calc(375px - 50vh),89px)}
}
/* 左右 37/63（Andy 2026-07-18）：右栏舞台成主角，与左侧当前步骤区大致对齐 */
.scrolly-inner{width:min(calc(100% - 96px),1560px);margin-inline:auto;display:grid;
  grid-template-columns:minmax(420px,.76fr) minmax(700px,1.24fr);gap:clamp(64px,6vw,112px);align-items:center}
/* 标题收成两行（硬 br）：max-w 520 让 "From one sentence" / "to the last page." 各一行，4 行→2 行减重 */
/* spec 三目标（缩小 12-18% / 两行优先 / max-w 520）在 .76fr 左栏(~478px)下互斥：
   clamp(54,4vw,72)=57.6px 容不下「From one sentence」首行 → 撑 3 行、且不算缩小。
   取字号 clamp(45,3.3vw,56)（@1440≈47.5px，较原 57.6 缩 ~17%，命中「缩小 12-18%」首要意图），
   此字号下首行放进左栏成两行。max-width 560 兜住超宽屏。 */
/* Step-visual-unify：标题再缩 ~5%（不改文字/换行）。 */
.scrolly-copy h2{font-size:clamp(43px,3.14vw,53px);line-height:1.02;letter-spacing:-.03em;max-width:560px;margin-top:14px;text-wrap:initial}
.step-rail{position:relative;display:flex;flex-direction:column;gap:34px;margin-top:36px}
.step-rail::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:var(--rk-line)}
.step{min-height:80px;padding:0 0 0 30px;border-left:0;position:relative}
.step::before{content:"";position:absolute;z-index:1;left:-5px;top:7px;width:10px;height:10px;border-radius:50%;background:#CEC7BB;transition:background .3s,box-shadow .3s,transform .3s}
.step h3{font-size:20px;color:#5F594F;transition:color .3s}
.step p{font-size:15px;line-height:1.45;color:var(--rk-ink-muted);height:2.9em;overflow:hidden;opacity:0;transform:translateY(-3px);
  transition:opacity .35s ease,transform .35s ease;color .3s;max-width:38ch;margin-top:6px}
.step.on::before{background:var(--rk-emerald);box-shadow:0 0 0 5px var(--rk-emerald-soft);transform:scale(1.18)}
.step.on h3{color:var(--rk-ink)}
.step.on p{opacity:1;transform:none;color:var(--rk-ink-soft)}
#scrolly-stage[data-phase="1"] .step[data-step="0"]::before,
#scrolly-stage[data-phase="2"] .step[data-step="0"]::before,#scrolly-stage[data-phase="2"] .step[data-step="1"]::before,
#scrolly-stage[data-phase="3"] .step[data-step="0"]::before,#scrolly-stage[data-phase="3"] .step[data-step="1"]::before,#scrolly-stage[data-phase="3"] .step[data-step="2"]::before{background:#76A997;box-shadow:none;transform:none}
#scrolly-stage[data-phase="1"] .step[data-step="0"] h3,
#scrolly-stage[data-phase="2"] .step[data-step="0"] h3,#scrolly-stage[data-phase="2"] .step[data-step="1"] h3,
#scrolly-stage[data-phase="3"] .step[data-step="0"] h3,#scrolly-stage[data-phase="3"] .step[data-step="1"] h3,#scrolly-stage[data-phase="3"] .step[data-step="2"] h3{color:#A2B0A7}
@media(min-width:1024px) and (max-width:1199px){
  .scrolly-inner{width:min(calc(100% - 56px),1120px);grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);gap:42px}
  .scrolly-copy h2{font-size:clamp(43px,4.7vw,56px)}
  /* This band stacks the copy taller (~685px vs ~580px), which eats ~53px off each half of the
     centring slack — so the release-gap constant above has to move with it, or the pull overshoots
     and the boundary closes to ~120px. Its lead-in is shorter here too, hence the tighter floor. */
  #birth{margin-bottom:clamp(-89px,calc(428px - 50vh),89px)}
}
/* Fixed transparent canvas: paper character belongs to the artifacts, not a SaaS shell. */
/* 统一 story-stage（四步共享，尺寸不变）：aspect 1.45 + min-height 520；极轻暖白径向光晕，无卡片/边框/强阴影 */
.scrolly-visual{position:relative;justify-self:center;width:min(100%,calc((100vh - 112px)*1.45));aspect-ratio:1.45/1;min-height:520px;max-height:none;
  box-sizing:border-box;padding:clamp(28px,3.4vw,48px);overflow:hidden;border:0;border-radius:0;box-shadow:none;
  background:radial-gradient(ellipse at 50% 52%,rgba(255,253,248,.8) 0%,rgba(245,239,229,.34) 50%,rgba(250,248,244,0) 78%)}
.scrolly-visual::after{content:"";position:absolute;inset:7% 5%;pointer-events:none;opacity:.11;
  background-image:radial-gradient(rgba(78,65,45,.13) .65px,transparent .65px);background-size:18px 18px;mix-blend-mode:multiply}
.ph{position:absolute;inset:0;z-index:1;padding:inherit;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transform:translateY(18px) scale(.985);transform-origin:50% 100%;clip-path:inset(0);
  transition:opacity .48s ease,transform .58s cubic-bezier(.2,.82,.28,1),clip-path .58s cubic-bezier(.2,.82,.28,1);pointer-events:none}
.ph.on{z-index:2;opacity:1;transform:none;clip-path:inset(0);pointer-events:auto}
/* Directional chapter changes use the existing phase only; no geometry or scroll state is animated. */
#scrolly-stage[data-phase="0"] .story-board{transform:scale(.88);clip-path:inset(13% 13% 13% 13% round 2px)}
#scrolly-stage[data-phase="1"] .story-seed{transform:translate(-4%,-6%) scale(.88);clip-path:inset(7% 5% 4% 9% round 2px)}
#scrolly-stage[data-phase="1"] .story-character{transform:scale(.94);clip-path:inset(7% 9% 6% 9% round 2px)}
#scrolly-stage[data-phase="2"] .story-board{transform:translate(-2%,-1%) scale(1.08);clip-path:inset(9% 52% 22% 5% round 2px)}
#scrolly-stage[data-phase="2"] .story-finale{transform:translateY(12%) scale(.94)}
#scrolly-stage[data-phase="3"] .story-character{transform:translateY(8%) scale(.9);clip-path:inset(3% 6% 0 6% round 2px)}
.story-stage-meta{position:absolute;z-index:4;top:clamp(24px,3vw,38px);left:clamp(28px,3.4vw,46px);right:clamp(28px,3.4vw,46px);
  display:flex;justify-content:space-between;gap:20px;font:700 12px var(--font-body);letter-spacing:1.25px;text-transform:uppercase;color:var(--rk-ink-muted)}
.story-stage-copy{display:none}
.ph-card{position:relative;background:#FFFDF8;border:1px solid rgba(151,135,108,.24);border-radius:4px;box-shadow:0 24px 38px -27px rgba(61,50,34,.48)}
.ph-card .from{font:600 12px var(--font-body);color:var(--rk-ink-muted);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
/* The quote types itself in, one character every 32ms, which is a content animation and therefore
   the one thing on this page that lays out rather than compositing. It stays — it is the point of
   the panel — but `contain` tells the engine the work stops here, so a tick cannot walk out into
   the rest of the stage. Its blast radius was already small (this card is absolutely positioned on
   desktop and sits inside a min-height floor on mobile, so neither mode reflows the page); this
   makes that explicit instead of incidental. Reduced motion skips the typing entirely — the line is
   written out in full at once, see startBirthTyping() in home-v3.js. */
.ph-card .line{font:600 clamp(21px,1.7vw,29px)/1.55 var(--font-display);contain:layout}
.ph-card .caret{display:inline-block;width:2px;height:1.15em;background:var(--rk-emerald);vertical-align:-3px;animation:blinkCaret 1.1s steps(1) infinite}
.ph img{max-height:100%}

/* Step 1 — 一张桌上的创作纸（绝对定位居中略偏上，脱离共享 .ph flex-end，不影响其他 phase）。 */
.story-seed{isolation:isolate}
/* 后方草稿纸：比主纸略小，左下偏移 ~18px，只露左下边角，rotate 1° */
.seed-scrap{position:absolute;z-index:0;left:11%;bottom:6%;width:66%;height:47%;background:#EADEC8;border:1px solid rgba(128,108,74,.15);
  border-radius:9px;transform:rotate(1deg);box-shadow:0 16px 30px -26px rgba(49,39,24,.4)}
.seed-scrap::before{content:"";position:absolute;left:12%;right:12%;top:30%;height:1px;background:rgba(95,77,49,.12);box-shadow:0 30px 0 rgba(95,77,49,.09),0 60px 0 rgba(95,77,49,.07)}
/* 主故事纸：居中偏上，宽 ~70% / 高 ~50% 舞台；暖奶油纸，圆角 11px（非 SaaS），纸张落桌阴影，rotate -0.5° */
/* Step2/3 宽度统一 + 底基准对齐：改 bottom 锚定(≈9%→bottomGap 与其他步一致),宽 72%,文字区加宽(padding-right 42→34%)。 */
.seed-note{position:absolute;z-index:1;left:14%;bottom:9%;width:72%;height:50%;
  padding:clamp(26px,3vw,40px);padding-right:34%;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;transform:rotate(-.5deg);border-radius:11px;background:linear-gradient(155deg,#FFFDF7,#FBF2DF);
  box-shadow:0 26px 44px -28px rgba(55,43,26,.5),0 2px 4px -3px rgba(55,43,26,.3)}
/* 胶带：纸张左上 ~20%，轻转（唯一，不加回形针） */
.seed-note::before{content:"";position:absolute;z-index:3;top:-9px;left:20%;width:74px;height:20px;background:rgba(205,185,145,.5);transform:rotate(-2.5deg);box-shadow:0 1px 2px rgba(120,100,60,.18)}
/* 狐狸创作草图：对比度提高到可清楚识别（仍保草稿感）：opacity .22→.32,少灰度多对比。右侧 ~30% 区,不贴边。 */
.seed-note::after{content:"";position:absolute;z-index:0;right:4%;bottom:4%;width:31%;height:78%;opacity:.32;
  background:url('https://static2.readkidz.com/upload/image/a583/75dc/852015928397893.webp') no-repeat center bottom/contain;filter:grayscale(.5) sepia(.18) contrast(1.08)}
.seed-note .from,.seed-note .line{position:relative;z-index:2}
/* 主句略缩 + 文案区加宽（padding-right 34% → 占纸宽 ~66%）→ 主句落 2-3 行,不再拆 4 行。 */
.seed-note .line{max-width:100%;font:600 clamp(23px,1.85vw,30px)/1.4 var(--font-display)}

/* Step 2 — one source image becomes six deliberate storyboard beats. */
.storyboard-sheet{width:96%;height:84%;margin:0;padding:clamp(20px,2.1vw,30px);background:linear-gradient(150deg,#FFFDF8,#FBF6EA);
  border:1px solid rgba(136,118,87,.3);border-radius:2px;transform:rotate(.45deg);box-shadow:0 25px 42px -27px rgba(55,43,28,.5)}
.storyboard-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:clamp(10px,1vw,16px)}
.storyboard-panel{position:relative;overflow:hidden;border:1px solid rgba(64,56,45,.38);background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852015957917765.webp?x-oss-process=image/resize,w_440/format,webp');
  background-repeat:no-repeat;background-size:300% 200%;filter:grayscale(.92) sepia(.12) contrast(.96)}
.storyboard-panel::after{content:"";position:absolute;left:10%;right:10%;bottom:9%;height:1px;background:rgba(54,48,39,.24);box-shadow:0 5px 0 rgba(54,48,39,.14)}
.storyboard-panel.panel-1{background-position:0 0}.storyboard-panel.panel-2{background-position:50% 0}.storyboard-panel.panel-3{background-position:100% 0}
.storyboard-panel.panel-4{background-position:0 100%}.storyboard-panel.panel-5{background-position:50% 100%}.storyboard-panel.panel-6{background-position:100% 100%}

/* Step 3 — one production-style sheet: front/side/back turnaround plus the story props. */
.character-board{width:91%;height:84%;margin:0;padding:clamp(18px,2vw,28px);display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;gap:clamp(12px,1.2vw,18px);background:linear-gradient(150deg,#FFFDF8,#FBF6EA);
  border:1px solid rgba(136,118,87,.3);border-radius:2px;transform:rotate(-.35deg);box-shadow:0 25px 42px -27px rgba(55,43,28,.5)}
.character-turnaround{display:block;min-height:0;width:100%;height:100%;object-fit:contain;object-position:center;
  background:#FBF4E2;border:1px solid rgba(75,65,50,.13)}
.character-board figcaption{grid-column:1/-1;font:700 12px var(--font-body);color:var(--rk-ink-soft);letter-spacing:1px;text-transform:uppercase;
  border-top:1px solid rgba(94,80,57,.17);padding-top:10px}

/* Step 4 — the finished spread is the only full-color foreground object. */
.story-finale{isolation:isolate}
/* Step4 是视觉高潮：放大到 ≈85%（原 ≈72.5%，+~12%），不小于 Step2/3。 */
.final-book{position:relative;z-index:2;width:100%;max-height:94%;object-fit:contain;filter:drop-shadow(0 24px 24px rgba(43,35,25,.24));
  transform:translateY(1.5%) scale(.97);transform-origin:50% 100%}
/* Step4 背景残影：前三步素材少量边角——左后 故事便签 / 右后 角色纸 / 下方 故事板边；opacity .14(12-16%)，只露边角不抢焦。 */
.finale-echoes{position:absolute;z-index:0;inset:14% 3% 3%;opacity:.14;filter:grayscale(.85) sepia(.22);pointer-events:none}
.finale-echoes>span{position:absolute;display:block;border:1px solid rgba(83,70,49,.4);background:#F1E8D7;box-shadow:0 15px 25px -22px rgba(43,35,25,.55)}
.echo-note{left:0;top:16%;width:21%;height:30%;transform:rotate(-6deg)}
.echo-character{right:0;top:12%;width:22%;height:38%;overflow:hidden;transform:rotate(5deg)}
.echo-board{left:37%;bottom:-4%;width:30%;height:20%;transform:rotate(-2deg);background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852015957917765.webp?x-oss-process=image/resize,w_440/format,webp')!important;background-size:cover!important}
.echo-character img{position:absolute;width:125%;max-width:none;height:auto;max-height:none;left:50%;bottom:-46%;transform:translateX(-50%)}

/* ══ AGES — 目标年龄与阅读适配（2026-07-18，整段替换 style studio）══
   同一本书三种阅读级别：JS 只写 #age-book[data-age] 与 tab active，其余全 CSS——
   文字层 opacity+轻微 translateY 交叉淡入（无打字机）、右页插画块高度平滑变化（同图不同 crop，不重载）、
   书本位置与尺寸三态恒定不跳。 */
.ages{display:flex;flex-direction:column;align-items:center;margin-top:var(--head-gap);width:100%}
/* 1:1 设计稿：本段标题比全局 h2 更大更稳，桌面一行；副标题两行居中 */
#ages .center-head{max-width:min(100%,980px)}
#ages .center-head h2{font-size:clamp(36px,3.5vw,56px);letter-spacing:-.02em}
#ages .center-head .sub{max-width:58ch}
.age-tabs{display:flex;gap:clamp(12px,1.2vw,18px);flex-wrap:wrap;justify-content:center;margin-bottom:clamp(30px,3.2vw,50px)}
.age-tabs button{font:700 clamp(14px,1.05vw,17px) var(--font-body);color:var(--rk-ink);border:1px solid var(--rk-line);background:var(--rk-surface);
  border-radius:999px;padding:clamp(9px,.9vw,13px) clamp(20px,2vw,30px);min-width:clamp(108px,9.4vw,148px);
  cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.age-tabs button:hover{border-color:color-mix(in srgb,var(--rk-emerald) 55%,var(--rk-line));background:var(--rk-emerald-soft);color:var(--rk-ink)}
.age-tabs button.active{color:#fff;background:var(--rk-emerald);border-color:var(--rk-emerald)}
.age-tabs button.active:hover{color:#fff;background:var(--rk-emerald)}

.age-stage{display:flex;align-items:center;justify-content:center;gap:clamp(40px,4.6vw,78px);width:100%}

/* 1:1 设计稿（第三轮，真素材）：中央 = 渲染的真实开页精装书 ages-book-center.webp
   （左页整幅插画、右页上部为空白纸面、底部出血插画、青绿封壳、纸芯页弧全部烤在图里）。
   文字 100% HTML 叠加在空白纸面上（LP 铁律：图内零文字，25 语可译）。
   素材底为暖白纯色（网关不支持透明底）→ mix-blend-mode:multiply 融进页面背景。
   字号用容器查询单位 cqw —— 跟书本实际宽度缩放，跨分辨率文字与纸面比例恒定。 */
/* ⚠️ 不能用 container-type：containment 生成层叠上下文，会把 multiply 隔离在组内，
   素材烤底融不进页面背景（矩形残影）。字号改用与书宽 clamp(620,54vw,940) 同比例的 vw-clamp。 */
.age-book{position:relative;flex:none;width:min(clamp(620px,54vw,940px),100%)}
.age-book .book-base{display:block;width:100%;height:auto;mix-blend-mode:multiply;filter:brightness(1.055)}
/* 文字层容器 = 右页空白纸面区（按素材实测几何定位；换素材需同步校准这四个百分比） */
.age-textwrap{position:absolute;left:54%;top:6%;width:36.5%;height:37%}
.age-text{position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;overflow:hidden;
  transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column}
.age-book[data-age="0"] .age-text[data-age-text="0"],
.age-book[data-age="1"] .age-text[data-age-text="1"],
.age-book[data-age="2"] .age-text[data-age-text="2"]{opacity:1;transform:none;transition-delay:.12s}
/* 三态排版（衬线书页字；字号 cqw 随书宽缩放）：
   3–5 两行大字居中 → 6–8 整段故事 → 9–12 四段密文 —— 文字量本身就是年龄差异的直观表达 */
.age-text p{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:400;color:#3A382F}
.age-text[data-age-text="0"]{justify-content:center;text-align:center;gap:.4em}
.age-text[data-age-text="0"] p{font-size:clamp(16.1px,1.404vw,24.4px);line-height:1.7;color:#33312B}
.age-text[data-age-text="1"] p{font-size:clamp(8.4px,.729vw,12.7px);line-height:1.72;margin-bottom:.55em}
.age-text[data-age-text="2"] p{font-size:clamp(7.2px,.54vw,9.8px);line-height:1.42;margin-bottom:.35em;color:#4A473E}
html[lang^="zh"] .age-text[data-age-text="2"] p{font-size:clamp(8px,.56vw,10.2px);line-height:1.48}

/* Ages book v2: three text-safe illustrations share one physical-book geometry.
   The artwork changes with the existing data-age state, while the translated HTML copy stays live above it.
   This makes the reading-level difference explicit without baking English into the images or touching JS. */
.age-book{aspect-ratio:3/2;background:transparent}
.age-book .book-base{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.age-textwrap{inset:0;width:100%;height:100%}
.age-text{isolation:isolate}
.age-text::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain}
/* Each plate is fetched when its age is first shown, not all three up front. All three .age-text
   layers are always in the DOM — the inactive ones only carry opacity:0 — and a background-image on
   a rendered element is fetched whatever its opacity, so the page used to pull 614KB of book plates
   to display one of them. The exhibit sits below the fold and rotates every 4s once it scrolls into
   view (home-v3.js), so the other two arrive when they are actually about to be seen.
   Measured 2026-08-04: 614KB → 231KB on first load.

   TWO selectors per plate, and both are load-bearing:
    · `.age-book[data-age=N]` paints the default plate before any script runs — no first-paint gap.
    · `.plate-on` is added by home-v3.js when an age becomes active and is never removed, so the
      OUTGOING plate keeps its artwork through the 0.5s crossfade instead of vanishing the instant
      data-age changes. */
.age-book[data-age="0"] .age-text[data-age-text="0"]::before,
.age-text.plate-on[data-age-text="0"]::before{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004919902341.webp')}
.age-book[data-age="1"] .age-text[data-age-text="1"]::before,
.age-text.plate-on[data-age-text="1"]::before{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004921278597.webp')}
.age-book[data-age="2"] .age-text[data-age-text="2"]::before,
.age-text.plate-on[data-age-text="2"]::before{background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847004925120645.webp')}
.age-text p{position:relative;z-index:1}
/* 3–5: two large beginner lines. 6–8: seven short lines. 9–12: four compact paragraphs.
   Padding is expressed against the shared 3:2 stage, so every text block lands on the right-hand paper. */
.age-text[data-age-text="0"]{padding:16% 13.5% 26% 54.5%}
.age-text[data-age-text="1"]{padding:6.5% 9% 34% 58%}
/* The oldest-reader sample is deliberately dense. Give it the full paper height and a slightly
   wider measure so all four paragraphs remain inside the physical page at desktop and short-screen sizes. */
.age-text[data-age-text="2"]{padding:5.5% 7% 7% 54.5%}

/* 两侧 ghost 迷你页：随主书状态切换，永远显示「不在主书上」的那两个级别（≤1100 隐藏）。
   两侧各堆叠全部三档变体（grid 同格），:has() 读 #age-book[data-age] 决定各侧显示哪档并交叉淡入；
   不支持 :has 的浏览器退化为固定 3–5 / 9–12（旧静态行为）。JS 零参与。 */
.age-mini{flex:none;width:clamp(150px,13.5vw,214px);display:grid}
.mini-item{grid-area:1/1;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.age-stage:has(.age-book[data-age="0"]) .mini-l .mini-item[data-mini="1"],
.age-stage:has(.age-book[data-age="0"]) .mini-r .mini-item[data-mini="2"],
.age-stage:has(.age-book[data-age="1"]) .mini-l .mini-item[data-mini="0"],
.age-stage:has(.age-book[data-age="1"]) .mini-r .mini-item[data-mini="2"],
.age-stage:has(.age-book[data-age="2"]) .mini-l .mini-item[data-mini="0"],
.age-stage:has(.age-book[data-age="2"]) .mini-r .mini-item[data-mini="1"]{opacity:1;transform:none}
@supports not selector(:has(*)){
  .mini-l .mini-item[data-mini="0"],.mini-r .mini-item[data-mini="2"]{opacity:1;transform:none}
}
/* ghost 弱化放在 img 自身（元素自身 opacity 不断开它与页面背景的 multiply；
   若放在祖先 mini-item 上会生成层叠上下文 → 烤底融不掉出白卡） */
.mini-tag{display:block;text-align:center;font:600 clamp(13px,1vw,15.5px) var(--font-body);color:var(--rk-ink-muted);
  letter-spacing:.2px;margin-bottom:12px}
/* 小书 = 三档真实书壳素材（版式即年龄观感），文字 HTML 叠加在各壳的空白区；cqw 随壳宽缩放 */
/* 页面同色垫底：mini-item 淡入淡出（opacity 过渡）会临时生成层叠上下文、把 multiply 关进组内，
   若组内无 backdrop 就露白底。垫一层 --rk-paper（=页面背景），multiply 到同色 → 过渡全程无白底。 */
.mini-book{position:relative;background:transparent}
.mini-book img{display:block;width:100%;height:auto;opacity:.9}
.mini-copy{position:absolute;display:flex;flex-direction:column;overflow:hidden}
.mini-copy p{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#57544A}
/* 字号 = 壳宽 clamp(150,13.5vw,214) 的同比例 vw-clamp（同上，避开 container 隔离） */
.mini-copy.m0{left:22%;right:18%;top:66%;height:20%;justify-content:center;text-align:center}
.mini-copy.m0 p{font-size:clamp(6.9px,.62vw,9.8px);line-height:1.55}
.mini-copy.m1{left:21%;right:16%;top:65%;height:18.5%;justify-content:center}
.mini-copy.m1 p{font-size:clamp(4px,.31vw,4.9px);line-height:1.32;margin-bottom:.18em}
.mini-copy.m2{left:21%;right:15%;top:65%;height:18.5%;justify-content:center}
.mini-copy.m2 p{font-size:clamp(3.5px,.29vw,4.3px);line-height:1.32;margin:0;color:#6B675B}
.mini-copy.m2 p:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.mini-copy.m2 p:nth-child(n+2){display:none}

/* 底部三条轻文字：非卡片，仅细分隔线 */
.age-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px clamp(24px,3vw,48px);margin-top:clamp(36px,3.6vw,56px)}
.age-notes span{display:flex;align-items:center;gap:10px;font:600 clamp(14.5px,1.05vw,16.5px) var(--font-body);color:var(--rk-ink-soft)}
.age-notes svg{width:22px;height:22px;stroke:var(--rk-emerald);fill:none;flex:none}
.age-notes span + span{border-left:1px solid var(--rk-line);padding-left:clamp(24px,3vw,48px)}

@media (max-width:1100px){.age-mini{display:none}}
@media (max-width:900px){
  .age-book{width:100%}
  /* 平板：书宽=整栏而非 54vw，vw 字号映射失准 → 按整栏宽度重标 */
  .age-text[data-age-text="0"] p{font-size:2.3vw}
  .age-text[data-age-text="1"] p{font-size:1.2vw}
  .age-text[data-age-text="2"] p{font-size:clamp(7.2px,.82vw,8.6px)}
}
@media (max-width:640px){
  /* 手机：裁切到右页做单页预览（素材宽 200% 左移一页），文字改 px 保可读；无横滚 */
  .age-book{width:min(86vw,420px);aspect-ratio:3/4;overflow:hidden;border-radius:10px}
  .age-book .book-base{width:200%;max-width:none;margin-left:-100%}
  .age-textwrap{left:8%;top:6%;width:74%;height:37%}
  .age-text[data-age-text="0"] p{font-size:17px}
  .age-text[data-age-text="1"] p{font-size:10.5px}
  .age-text[data-age-text="2"] p{font-size:8.2px;line-height:1.38}
  html[lang^="zh"] .age-text[data-age-text="2"] p{font-size:8.6px;line-height:1.5}
  .age-notes span + span{border-left:0;padding-left:0}
  .age-tabs button{padding:7px 13px;font-size:13px;min-width:0}
  /* Single-page mobile crop: keep the right page and its live age-specific copy in view. */
  .age-textwrap{inset:0;width:100%;height:100%}
  .age-text::before{background-size:200% 100%;background-position:right center}
  .age-text[data-age-text="0"]{padding:23% 16% 38% 8%}
  .age-text[data-age-text="1"]{padding:10% 12% 47%}
  .age-text[data-age-text="2"]{padding:8.5% 10% 12%}
}
@media (prefers-reduced-motion:reduce){
  .age-text,.mini-item{transition:none}
}

/* ── keepsake（两级出口）── */
/* 文案栏内容至多 600，故把多出的宽度让给实拍图：宽屏下右栏不再空出大片死区，图也更有分量。
   必须限定桌面档——id 选择器优先级高于 ≤900 断点里的 .split{1fr}，不限定会把手机端也拽回两栏。 */
@media (min-width:901px){
  #keepsake .split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
/* 出口块跟随栏宽（原 460 定值在 1920 下让右栏空出近 300px）；600 上限防超宽屏按钮拉成长条 */
/* Keepsake 去按钮化（2026-07-19 Andy）：主结果=两条静态信息行(线性绿图标+标题+说明),浅色细线分隔;
   无边框卡片/无 hover/无 pointer/无箭头 → 是结果说明,不是操作面板。 */
.exports-main{display:flex;flex-direction:column;margin-top:22px;max-width:min(100%,560px)}
.export-row{display:flex;align-items:flex-start;gap:14px;padding:16px 2px}
.export-row + .export-row{border-top:1px solid var(--rk-line)}
.export-ic{flex:none;display:grid;place-items:center;margin-top:1px}
.export-ic svg{width:23px;height:23px;stroke:var(--rk-emerald);fill:none}
.export-txt h3{font:700 clamp(18px,1.3vw,20px) var(--font-body);color:var(--rk-ink);line-height:1.25}
.export-txt p{margin-top:4px;font:500 clamp(14px,1vw,15.5px)/1.5 var(--font-body);color:var(--rk-ink-soft)}
/* 次级能力：轻标题 + 一行小字,视觉明显低于主结果,非按钮/非卡片。 */
.exports-sub{margin-top:22px;max-width:min(100%,560px)}
.more-heading{font:700 12px var(--font-body);letter-spacing:.6px;text-transform:uppercase;color:var(--rk-ink-muted)}
.more-line{margin-top:7px;font:500 14px var(--font-body);color:var(--rk-ink-soft)}
.more-sep{color:var(--rk-ink-muted);margin:0 3px}
/* ownership = 品牌承诺（非通知框）：去绿底大框 → 左浅绿竖线 + 两行文案,常规墨色不用告警绿。 */
.own-line{margin-top:26px;padding:2px 0 2px 16px;background:none;border-radius:0;
  border-left:3px solid color-mix(in srgb,var(--rk-emerald) 52%,var(--rk-line));max-width:min(100%,560px)}
.own-line b{display:block;font:700 15.5px var(--font-body);color:var(--rk-ink)}
.own-line span{font:500 14px/1.5 var(--font-body);color:var(--rk-ink-soft)}

/* ── animation studio（独立视觉容器）── */
#motion .motion-wrap{background:var(--rk-paper-2);border-radius:24px;padding:clamp(36px,3.6vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center}
.mode-note{margin-top:18px;font:600 13.5px var(--font-body);color:var(--rk-ink-muted)}
.video-frame{position:relative;border-radius:var(--rk-radius);overflow:hidden;box-shadow:var(--shadow-object)}
.play-badge{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;
  background:rgba(255,251,242,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(20,20,20,.3);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);cursor:pointer;
  animation:playPulse 3s 1s ease-in-out infinite}
.video-frame:hover .play-badge{transform:scale(1.06)}
.play-badge svg{width:28px;height:28px;fill:var(--rk-emerald);margin-left:4px}

/* ── formats（两主两次）── */
.format-grid{display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:var(--grid-gap);margin-top:var(--head-gap);align-items:stretch}
.format-card{display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-line);border-radius:var(--rk-radius);overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);text-decoration:none}
.format-card:hover{transform:translateY(-6px)}
.format-card .thumb{overflow:hidden}
.format-card.major .thumb{aspect-ratio:16/9}
/* 次级卡文案比主卡短，而四卡等高 → 原先 body 用 flex:1 吸收多余高度，卡中部留一大片死白。
   改由缩略图吸收：图更满，也顺带缓解「次级卡缩略图偏白、与整页插画不搭」。 */
.format-card.minor .thumb{aspect-ratio:auto;flex:1;min-height:clamp(150px,12vw,230px)}
.format-card.minor .body{flex:none}
.format-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.format-card:hover .thumb img{transform:scale(1.03)}
.format-card .body{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1}
.format-card h3{font-size:20px}
.format-card.minor h3{font-size:16.5px}
.format-card p{font-size:14.5px;color:var(--rk-ink-soft);margin-top:5px}
/* 两张次级卡的描述一行/两行不等，会让「图吸收高度」后的标题基线错开：给描述留两行位，使二者对齐 */
.format-card.minor p{font-size:13.5px;min-height:3.1em}
.format-card .go{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;font:700 14.5px var(--font-body);color:var(--rk-emerald)}
.format-card.minor .go{font-size:13.5px;color:var(--rk-ink-soft)}
.format-card .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .22s}
.format-card:hover .go svg{transform:translateX(3px)}

/* ── audience ── */
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);margin-top:var(--head-gap)}
.aud-card{background:var(--rk-surface);border:1px solid var(--rk-line);border-radius:var(--rk-radius);padding:28px 28px 26px;box-shadow:var(--shadow-card)}
.aud-card .ico{width:44px;height:44px;border-radius:12px;background:var(--rk-emerald-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.aud-card .ico svg{width:22px;height:22px;stroke:var(--rk-emerald);fill:none;stroke-width:2}
.aud-card h3{font-size:20px}
.aud-card>p{margin-top:10px;font-size:15px;color:var(--rk-ink-soft)}
.aud-card .plus{margin-top:14px;font:600 13px var(--font-body);color:var(--rk-ink-muted)}

/* ── numbers（SHOW_STATS 控制显隐）── */
.numbers{border-top:1px solid var(--rk-line);border-bottom:1px solid var(--rk-line);background:var(--rk-surface)}
.numbers .in{max-width:1200px;margin:0 auto;padding:38px 48px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.numbers b{display:block;font:700 clamp(28px,3vw,38px)/1.1 var(--font-display);color:var(--rk-ink)}
.numbers span{font:600 14px var(--font-body);color:var(--rk-ink-soft)}

/* ── shelf gallery ── */
/* 木板宽度绑定书排（原 max-width:1020 与实际书排 ~840 不匹配，两端空悬）：
   容器收成 fit-content，木板取 104% 轻微出挑，与 Hero 的 .hero-plank 同一手法。 */
.shelf-wrap{position:relative;margin-top:var(--head-gap);padding-bottom:40px;width:fit-content;max-width:100%;margin-inline:auto}
.shelf-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,2.4vw,44px);flex-wrap:wrap}
/* 书随外壳长大；上限 190 受书封素材约束 */
/* 2026-07-27: 2/3 → 3/4. The shelf now shows real storybooks, and every one of them is authored at
   book_ratio 3:4 (same ratio the detail page renders). Keeping the old 2/3 frame cropped ~11% off
   both sides of each cover — the exact failure the sample-book cover hit in July: the illustrator's
   composition gets trimmed away and nobody ever sees it. */
.shelf-book{position:relative;width:clamp(120px,10.6vw,190px);aspect-ratio:3/4;border:0;padding:0;background:none;
  border-radius:6px 12px 12px 6px;overflow:hidden;
  box-shadow:0 18px 32px -14px rgba(43,42,38,.42), -8px 0 0 -4px #E9E2D4, -14px 0 0 -8px #DDD4C2;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s}
/* The cover+title is the link; it fills the card so the whole book is the click target. */
.shelf-book .bk-open{position:absolute;inset:0;display:block;cursor:pointer;text-decoration:none;border-radius:inherit}
.shelf-book .bk-open:focus-visible{outline:3px solid var(--rk-emerald);outline-offset:2px}
.shelf-book img{width:100%;height:100%;object-fit:cover;display:block}
/* Real storybook titles are longer and less predictable than the five hand-picked mock-ups this
   shelf used to carry ("The Smallest Umbrella on Maple Street" wraps to three lines), and half the
   real covers are bright — a text-shadow alone left the title barely readable over the otters and the
   rainy street. A scrim gives every cover the same contrast floor; the clamp keeps an unusually long
   localization from swallowing the illustration. */
.shelf-book .bk-open::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,20,38,.66) 0%,rgba(16,20,38,.38) 45%,rgba(16,20,38,0) 100%)}
.shelf-book .bk-title{position:absolute;top:8px;left:0;right:0;z-index:2;text-align:center;color:#FFF7E8;
  font:700 clamp(12px,.92vw,16px)/1.22 var(--font-display);text-shadow:0 1px 6px rgba(20,25,60,.5);padding:0 8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shelf-book .bk-origin{position:absolute;left:7px;right:7px;bottom:7px;z-index:3;text-align:left;
  background:rgba(255,251,242,.96);border-radius:9px;padding:9px 11px;
  font:600 11.5px/1.45 var(--font-body);color:var(--rk-ink);
  opacity:0;transform:translateY(6px);transition:all .3s;pointer-events:none}
.shelf-book .bk-origin b{color:var(--rk-ink-muted);font-size:10px;letter-spacing:.6px;text-transform:uppercase;display:block;margin-bottom:2px}
/* was an <em> inside the card-wide button; now the card's SECOND action, so it has to be a real
   button that receives its own clicks — hence pointer-events comes back on with the panel. */
.shelf-book .bk-borrow{display:block;width:100%;margin-top:5px;padding:0;border:0;background:none;text-align:left;
  font:700 11px/1.3 var(--font-body);color:var(--rk-emerald);cursor:pointer}
.shelf-book .bk-borrow:hover{text-decoration:underline}
.shelf-book .bk-borrow:focus-visible{outline:2px solid var(--rk-emerald);outline-offset:2px;border-radius:3px}
.shelf-book:hover,.shelf-book.peek{transform:translateY(-8px)}
.shelf-book:hover .bk-origin,.shelf-book.peek .bk-origin{opacity:1;transform:none;pointer-events:auto}
.shelf-book:nth-child(odd){transform:rotate(-1.2deg)}
.shelf-book:nth-child(odd):hover,.shelf-book:nth-child(odd).peek{transform:translateY(-8px) rotate(0)}
/* 5 本书居中于木板：猫是 flex 第 6 项占右侧，把「书+猫」整组居中 → 书组本身偏左，book1 左缘压在木板左端斜角(~2.8%)上。
   给 book1 左加 margin = 猫宽 + 间距，使书组两侧留白对称(左=空 margin，右=间距+猫) → 5 本书居中木板、book1 完全落在实木面、猫仍坐右端。随 clamp 响应式缩放。 */
/* logical, not physical (2026-07-27): this margin reserves the cat's slot so the books stay centred on
   the plank. The cat is the LAST flex item, so under RTL it renders leftmost and the first book renders
   rightmost — a physical margin-left then opened a gap between books 1 and 2 and pushed the first book
   off the right end of the shelf. Verified in Arabic. */
.shelf-row .shelf-book:first-child{margin-inline-start:calc(clamp(88px,7.6vw,140px) + clamp(18px,2.4vw,44px))}
/* 猫坐在木板上：PNG 画面里爪子在 ~72% 处、尾巴占底部 ~28%（垂到画框底）。
   基准 = 书本落座线（书底比木板图上沿还低 ~11px，是真正的搁置面），不是木板图上沿。
   用 translateY(画框自身高度的%) 把猫下移，让爪子落到书本落座线（略沉 ~2px 实接触），
   尾巴自然垂过木板前沿。z-index 让尾巴压在木板前面。实测 30% 命中（爪子 vs 书底 ±2px）。 */
.shelf-cat{width:clamp(88px,7.6vw,140px);align-self:flex-end;position:relative;z-index:2;transform:translateY(30%);filter:drop-shadow(0 6px 10px rgba(43,42,38,.24))}
/* width:0 + min-width:104% —— 关键：让木板不参与父容器的固有宽度计算。
   木板图原生 1493 宽，若按常规 width 参与计算会把 fit-content 顶到满栏，容器就收不到书排宽度上。
   固有宽度阶段百分比按 auto 处理（贡献 0），实际布局再由 min-width 撑回 104%，于是木板始终跟着书排走。 */
.shelf-plank2{width:0;min-width:104%;max-width:none;margin:-10px 0 0 -2%;opacity:.95}
/* ── 移动端书架（≤1023：桌面整排放不下，切 2 列卡片网格 + 猫蹲底部小木板）──
   桌面 margin-left 居中偏移会让整排提前 wrap，故这里整段重排：书 grid 两列(book5 居中)、
   猫从 flex 项改成网格末行居中并坐在一小块木板(木板 object-fit center-crop 取厚实中段)。 */
@media (max-width:1023px){
  .shelf-row{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:22px;justify-items:center;align-items:end;width:min(92vw,440px);margin-inline:auto}
  .shelf-row .shelf-book:first-child{margin-inline-start:0}
  .shelf-book{width:100%}
  .shelf-book:nth-child(odd){transform:none}
  .shelf-book:nth-child(5){grid-column:1 / -1;width:calc(50% - 8px)}
  .shelf-cat{grid-column:1 / -1;justify-self:center;width:120px;z-index:2;transform:translateY(24%);margin-top:-56px}
  .shelf-plank2{width:210px;min-width:0;max-width:none;height:46px;object-fit:cover;object-position:center 30%;margin:-20px auto 0;display:block}
}

/* ── faq / final ── */
.faq{max-width:min(100%,clamp(640px,50vw,860px));margin:var(--head-gap) auto 0}
.faq details{border-bottom:1px solid var(--rk-line);padding:20px 4px}
.faq summary{cursor:pointer;font:700 17px var(--font-body);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;border-radius:8px}
/* Safari ignores list-style on a summary, so without this it draws its own triangle next to the "+"
   below. Both create-* pages had carried this line in their private copies of this block; it was
   missing here, which means the home page has been showing two markers in Safari all along. */
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--rk-emerald);outline-offset:4px}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:22px;color:var(--rk-ink-muted);transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--rk-emerald)}
.faq p{margin-top:12px;color:var(--rk-ink-soft);max-width:62ch}
.final{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(56px,5.6vw,96px)}
.final img{width:clamp(150px,11vw,196px);margin-bottom:8px}
.final .sub{text-align:center}
.colophon{margin-top:90px;padding:30px 48px 40px;border-top:1px solid var(--rk-line);display:flex;justify-content:space-between;color:var(--rk-ink-muted);font-size:13.5px;max-width:1200px;margin-left:auto;margin-right:auto;flex-wrap:wrap;gap:10px}

/* ── keyframes ── */
@keyframes fadeUp{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shelfRise{from{opacity:.6;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes objectIn{from{opacity:.45;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes catIdle{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(.8deg) translateY(-3px)}}
@keyframes tailMove{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(9deg)}}
@keyframes blink{0%,45%,49%,100%{opacity:0;transform:scaleY(.15)}46%,48%{opacity:.95;transform:scaleY(1)}}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,164,126,.3)}50%{box-shadow:0 0 0 10px rgba(15,164,126,0)}}
@keyframes blinkCaret{50%{opacity:0}}
@keyframes catPaint{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) translateY(-4px)}60%{transform:rotate(3deg)}}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(15,164,126,.45)}100%{box-shadow:0 0 0 14px rgba(15,164,126,0)}}

/* Short desktop viewports keep the full story, but tighten its vertical rhythm. */
@media(min-width:1024px) and (max-height:800px){
  .scrolly-stage{padding-block:28px}
  .scrolly-inner{gap:clamp(36px,4vw,66px)}
  .scrolly-copy h2{font-size:clamp(42px,4vw,54px);margin-top:10px}
  .step{min-height:68px;padding:0 0 0 30px}
  .step::before,.step.on::before{top:7px}
  .scrolly-visual{min-height:0;max-height:none;padding:26px}
}
@media(min-width:1024px) and (max-height:680px){
  .scrolly-copy h2{font-size:42px}
  .step{min-height:72px}.step p{font-size:13.5px}
  .scrolly-visual{width:min(100%,calc((100vh - 84px)*1.42));min-height:0;max-height:none;padding:24px}
}

/* Tablet and phone: release the pin and present the four stages as readable chapters. */
@media(max-width:1023px){
  .scrolly-track{height:auto}
  .scrolly-stage{position:relative;top:auto;height:auto;min-height:0;padding:72px 0;overflow:visible}
  .scrolly-inner{width:min(calc(100% - 48px),880px);grid-template-columns:1fr;gap:34px}
  .scrolly-copy h2{max-width:13ch;font-size:clamp(40px,8vw,58px)}
  .step-rail{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px}
  .step{min-height:0;padding:18px 14px 0 0;border-left:0;border-top:2px solid var(--rk-line)}
  .step::before,.step.on::before{left:0;top:-6px;width:10px;height:10px;box-shadow:none}
  .step h3{font-size:16px}.step p{display:none}
  .scrolly-visual{height:auto;min-height:0;max-height:none;aspect-ratio:auto;display:grid;gap:30px;padding:0;overflow:visible;
    background:none;border:0;border-radius:0;box-shadow:none}
  .scrolly-visual::after{display:none}
  #scrolly-stage .ph,#scrolly-stage .ph.on{position:relative;inset:auto;min-height:520px;padding:112px 34px 34px;opacity:1;transform:none;clip-path:none;transition:none;pointer-events:auto;
    overflow:hidden;background:linear-gradient(145deg,#F5F1E8 0%,#ECE5D9 100%);border:1px solid rgba(132,119,96,.2);border-radius:24px;
    box-shadow:0 24px 50px -38px rgba(55,47,36,.44)}
  .story-stage-meta{display:none}
  .story-stage-copy{display:block;position:absolute;z-index:5;top:28px;left:30px;right:30px}
  .story-stage-copy h3{font-size:22px}.story-stage-copy p{margin-top:5px;color:var(--rk-ink-soft);font-size:15px}
  .seed-note{width:min(72%,580px)}
  .storyboard-sheet{height:360px}
  .character-board{height:370px}
  .final-book{max-height:360px}
}
@media(max-width:767px){
  .scrolly-stage{padding:56px 0}
  .scrolly-inner{width:min(calc(100% - 32px),620px);gap:26px}
  .scrolly-copy h2{font-size:clamp(36px,11vw,50px)}
  .step-rail{display:none}
  #scrolly-stage .ph,#scrolly-stage .ph.on{min-height:450px;padding:110px 20px 24px;border-radius:20px}
  .story-stage-copy{left:22px;right:22px;top:24px}
  .story-stage-copy h3{font-size:20px}.story-stage-copy p{font-size:14px}
  .seed-scrap{left:10%;width:72%}.seed-note{width:92%;min-height:48%;padding:28px 24px}
  .storyboard-sheet{width:100%;height:280px;padding:14px}.storyboard-grid{gap:7px}
  .character-board{width:100%;height:300px;padding:12px}
  .final-book{width:100%;max-height:290px}
}

/* ── export mode（?export=1 整页截图）── */
html.export .hero{min-height:auto;padding-top:48px}
html.export .reveal{opacity:1;transform:none;transition:none}
html.export .hero-copy .kicker,html.export .hero-copy h1,html.export .hero-copy .sub,
html.export .hero-copy .composer,html.export .hero-copy .hero-actions,html.export .hero-copy .trust,
html.export .hero-stage,html.export .shelf-obj,html.export .cat-wrap{animation:none;opacity:1}
html.export .cat-blink,html.export .cat-tail,html.export .obj-anim .play,html.export .play-badge{animation:none}
html.export .scrolly-track{height:auto}
html.export .scrolly-stage{position:static;height:auto;min-height:0;padding:72px 0;overflow:visible}
html.export .scrolly-inner{grid-template-columns:1fr;gap:30px}
html.export .scrolly-visual{height:auto;min-height:0;max-height:none;aspect-ratio:auto;display:grid;gap:24px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
html.export .scrolly-visual::after{display:none}
html.export #scrolly-stage .ph{position:relative;inset:auto;min-height:500px;padding:104px 34px 34px;opacity:1;transform:none;clip-path:none;transition:none;overflow:hidden;
  background:linear-gradient(145deg,#F5F1E8,#ECE5D9);border:1px solid var(--rk-line);border-radius:24px}
html.export .story-stage-meta{display:none}
html.export .story-stage-copy{display:block;position:absolute;z-index:5;top:28px;left:32px;right:32px}
html.export .step p{opacity:1;transform:none;color:var(--rk-ink-soft)}
html.export .step h3{color:var(--rk-ink)}
html.export #read .flipbook{transform:translate(-50%,-50%);transition:none}

@media(prefers-reduced-motion:reduce){
  .reveal,.hero-copy .kicker,.hero-copy h1,.hero-copy .sub,.hero-copy .composer,.hero-copy .hero-actions,.hero-copy .trust,.hero-stage,.shelf-obj,.cat-wrap{animation:none;transition:none;opacity:1;transform:none}
  .cat-blink,.cat-tail,.obj-anim .play,.play-badge{animation:none}
  .leaf{transition:none}
  #read .flipbook,#read .leaf,#read .flip-nav,#read .flipbook::before,#read .flipbook::after{transition:none}
  #read .flipbook[data-flipped="0"]{transform:translate(-74.5%,-50%)}
  #read .flipbook[data-flipped="7"]{transform:translate(-25.5%,-50%)}
  .scrolly-track{height:auto}
  .scrolly-stage{position:static;height:auto;min-height:0;padding:72px 0;overflow:visible}
  .scrolly-inner{grid-template-columns:1fr;gap:30px}
  .scrolly-visual{height:auto;min-height:0;max-height:none;aspect-ratio:auto;display:grid;gap:24px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
  .scrolly-visual::after{display:none}
  /* Was `#scrolly-stage[data-phase] .ph`, which silently never matched: the JS branch that runs under
     reduced motion (home-v3.js) leaves every stage `.on` and never writes data-phase — only the
     scroll-driven and mobile branches do. So the stages kept `position:absolute` inside a stage that
     this block had just collapsed to height:auto, and the whole visual column rendered 0px tall: a
     reduced-motion visitor saw the step list beside an empty space. Keyed on the id alone now, like
     the ≤1023 and html.export blocks above, so the degraded layout holds even if the script never
     runs at all. The `.on` half is only there to outrank `.ph.on`. */
  #scrolly-stage .ph,#scrolly-stage .ph.on{position:relative;inset:auto;min-height:500px;padding:104px 34px 34px;opacity:1;transform:none;clip-path:none;transition:none;overflow:hidden;
    background:linear-gradient(145deg,#F5F1E8,#ECE5D9);border:1px solid var(--rk-line);border-radius:24px}
  .story-stage-meta{display:none}
  .story-stage-copy{display:block;position:absolute;z-index:5;top:28px;left:32px;right:32px}
  .step p{opacity:1;transform:none}
}
@media(max-width:900px){
  .spread{padding:64px 0}
  .hero{grid-template-columns:1fr;padding-top:40px;min-height:auto;gap:38px}
  .split{grid-template-columns:1fr;gap:30px}
  #motion .motion-wrap{grid-template-columns:1fr;padding:30px 22px;gap:28px}
  .format-grid{grid-template-columns:1fr 1fr}
  .format-card.major{grid-column:span 2}
  .aud-grid{grid-template-columns:1fr}
  .numbers .in{grid-template-columns:1fr;gap:18px;padding:28px 22px}
  .exports-main{grid-template-columns:1fr}
  /* Narrow stages keep the full spread and overlay controls inside the safe viewport edge. */
  .flip-zone{--nav-size:44px;--nav-gap:12px;width:100%;margin-top:26px}
  .flipbook-wrap{
    --book-w:min(calc(100% - 16px),700px);
    width:100%;height:clamp(270px,62.5vw,480px);
  }
  #flip-prev{left:8px}
  #flip-next{right:8px}
  .flipbook-wrap:has(.flipbook[data-flipped="0"]) #flip-prev{
    --nav-x:clamp(54px,calc(29vw - 87px),141px)}
  .flipbook-wrap:has(.flipbook[data-flipped="0"]) #flip-next{
    --nav-x:clamp(-141px,calc(87px - 29vw),-54px)}
}
html.landingExportMode,
html.landingExportMode body {
  scrollbar-width: none;
  scroll-behavior: auto !important;
}
html.landingExportMode::-webkit-scrollbar,
html.landingExportMode body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
html.landingExportMode .landingPage2026 *,
html.landingExportMode .landingPage2026 *::before,
html.landingExportMode .landingPage2026 *::after {
  animation: none !important;
  transition: none !important;
}
html.landingExportMode .landingPage2026 .shelfObject,
html.landingExportMode .landingPage2026 .flipBook,
html.landingExportMode .landingPage2026 .storyboardCard,
html.landingExportMode .landingPage2026 .animationVisual { opacity: 1; transform: none; }
html.landingExportMode .landingPage2026 .flipPage,
html.landingExportMode .landingPage2026 .catBlink,
html.landingExportMode .landingPage2026 .catTail { display: none; }



/* ── hero cat idle（透明动画 WebP;支持则换 src,否则保留 PNG+CSS 眨眼摆尾兜底）── */
.cat-wrap.has-anim{animation:objectIn 360ms .44s both}
.cat-wrap.has-anim .cat{width:5.42em;max-width:none;margin:0 0 -3.05em -0.155em}
.cat-wrap.has-anim .cat-tail,.cat-wrap.has-anim .cat-blink{visibility:hidden}

/* ── HERO 比例化舞台（2026-07-17）：固定 aspect-ratio 容器,全部物件按 % 定位,
   随同一容器缩放,1280→1920 构图不散。旧 flex/em 布局被本块覆盖。── */
.hero-stage{
  /* Step-fullscreen：书架整体放大约 +22%（撑起右侧首屏主视觉），构图 % 与 aspect 不变。 */
  position:relative;display:block;width:clamp(600px,50vw,900px);aspect-ratio:1.62/1;
  justify-self:end;min-height:0;padding:0;
  container-type:inline-size;font-size:2.05cqw; /* 内部装饰性 em 尺寸随舞台宽度缩放 */
}
.shelf-unit,.shelf-line{display:contents;font-size:inherit}
.shelf-obj{position:absolute;flex:none}
.obj-cover{left:3%;bottom:16.8%;width:18%;height:auto;aspect-ratio:96/142}
.obj-open{left:22%;bottom:16.3%;width:31%;height:auto;aspect-ratio:156/110}
.obj-char{left:55.5%;bottom:16.8%;width:15%;height:auto;aspect-ratio:86/130}
.obj-anim{left:71.5%;bottom:16.8%;width:17%;height:auto;aspect-ratio:104/130}
.hero-plank{position:absolute;left:0;right:0;bottom:8%;width:100%;max-width:none;margin:0;z-index:2}
.cat-wrap{position:absolute;left:87.5%;width:12.5%;bottom:16.3%;margin:0}
.cat-wrap .cat{width:100%}
.cat-wrap.has-anim .cat{width:120.5%;max-width:none;margin:0 0 -67.8% -3.4%}

/* ── 高度断点（宽度相同的 1366×768 与 1366×1024 可用高差异大,不能只看宽）── */
/* 矮桌面（1366×768 / 1440×800）:压间距、标题上限、舞台尺寸、内容 gap;不隐藏任何元素 */
@media (min-width:1024px) and (max-height:800px){
  .hero{padding-block:34px 48px}
  h1{font-size:clamp(46px,3.5vw,56px)}
  .hero-stage{width:min(48vw,720px)}
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .hero-copy .sub,.hero-copy .composer,.hero-copy .hero-actions,.hero-copy .trust{margin-top:0}
}
/* 高屏（1920×1200 / 1440×1100）:同时加呼吸与放大右侧视觉 */
@media (min-height:1000px) and (min-width:1200px){
  .hero{padding-block:80px 104px}
  .hero-stage{width:min(50vw,900px)}
}

/* ── 宽度策略五档（2026-07-17）── */
/* ① 超宽 ≥1600:容器已 1560 顶格,多余空间给右侧舞台与 gap,左文案不无限变宽 */
@media (min-width:1600px){
  .hero{grid-template-columns:minmax(480px,0.8fr) minmax(700px,1.2fr)}
}
/* Desktop: let the copy occupy the full left half instead of stopping at 570px. */
@media (min-width:1200px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-copy,.composer{max-width:none}
}
/* ③ 小桌面/平板横屏 961-1199:保双栏,收 gap,舞台吃满右栏 */
@media (max-width:1199px) and (min-width:961px){
  .hero{grid-template-columns:minmax(340px,.9fr) minmax(440px,1.1fr);gap:36px}
  .hero-stage{width:100%}
  h1{font-size:clamp(36px,4vw,48px)}
}
/* ④ 平板竖屏 ≤960:上下结构,不强求一屏 */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:44px}
  .hero-copy{max-width:680px}
  .hero-stage{width:min(100%,720px);justify-self:center}
}
/* ⑤ 手机 ≤767:舞台可轻微出血增强画面感,hero 自身 clip 防横滚 */
@media (max-width:767px){
  .hero{padding-block:36px 56px;overflow:clip}
  h1{font-size:clamp(38px,11vw,48px)}
  .hero-stage{width:110%;margin-left:-5%;justify-self:center}
}
/* ⑤+ 极窄屏:输入框与按钮上下排列 */
@media (max-width:380px){
  .composer{flex-direction:column;align-items:stretch;padding:10px}
  .composer input{padding:10px 12px}
  .composer button{justify-content:center}
}

/* grid 子项默认 min-width:auto 会用 min-content 撑爆 1fr 轨道 → 显式归零 */
.hero>.hero-copy,.hero>.hero-stage{min-width:0}
@media (max-width:767px){
  .hero-actions{flex-wrap:wrap}
  #read .center-head .sub{margin-top:16px}
  .began-line{margin-top:12px;font-size:14px}
  .flip-zone{--nav-size:42px;margin-top:26px}
  .langbar{justify-content:flex-start;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;
    padding:0 2px 5px;margin-bottom:24px;scrollbar-width:none}
  .langbar::-webkit-scrollbar{display:none}
  .langbar button{flex:0 0 auto;height:38px;padding-inline:14px}
  .flip-hint{max-width:30ch;padding-inline:10px;font-size:13px}
  /* <768：箭头改为覆盖书两侧边缘的半透明按钮（保留自动播放/圆点） */
  #read #flip-prev{left:5px}
  #read #flip-next{right:5px}
  #read .flip-nav{z-index:75;background:color-mix(in srgb,var(--rk-surface) 64%,transparent);backdrop-filter:blur(3px)}
}

@media (max-width:480px){
  /* Model B 在手机：箭头是两侧覆盖按钮 → 书可放宽(--book-w 只留 34px 边)填窄屏；三态同桌面 translate 精确居中(scale 1 不破居中)。 */
  #read .flipbook-wrap{--book-w:min(560px,calc(100% - 8px));height:clamp(250px,calc(80vw - 16px),330px)}
  #read .face .caption{height:86px;padding:4px 13px;
    background:linear-gradient(rgba(245,238,223,0),#F5EEDF 22%);
    font-size:clamp(10.5px,2.8vw,12px);line-height:1.25}
  #read .face .caption[dir="rtl"]{font-size:clamp(10.5px,2.8vw,12px)}
  #read .flipbook[data-flipped="0"]{transform:translate(-73.7%,-50%)}
  #read .flipbook[data-flipped="7"]{transform:translate(-26.3%,-50%)}
}

/* ── 中后段中间档（2026-07-17）：901-1199 的小桌面/平板横屏此前无专属规则。
   比例 token 已让各展品在此档自然收缩（实测无横滚、占比稳定），只剩 Formats 需要接管：
   四列会把两张次级卡压到 ~140-175px，改 2×2 让四卡都有正常阅读宽度。 */
@media (min-width:901px) and (max-width:1199px){
  .format-grid{grid-template-columns:1fr 1fr}
  .format-card.minor .thumb{aspect-ratio:16/10;flex:none}
  .format-card.minor .body{flex:1}
  .format-card.minor p{min-height:0}
}

/* ── 导航流式适配段（2026-07-17）已迁至 landing2026-nav.css（全站 home2026 头部共用）。
   此处只保留首页专属的 hero 窄屏内边距。── */
@media (max-width:960px){
  .hero{padding-block:clamp(40px,6vh,72px) clamp(48px,7vh,96px)}
}

/* ── HERO final balance pass (2026-07-18)
   Visual-only: preserve form, CTA, shelf and cat behavior hooks. ── */
.hero{
  min-height:calc(100svh - 72px);
  padding-block:clamp(44px,6vh,72px);
  align-items:center;
  gap:clamp(52px,5vw,84px);
}
.hero-copy{width:100%;max-width:680px}
.hero-copy h1{
  max-width:700px;margin-top:18px;
  /* Step-fullscreen：主标题放大一档，行高略收紧（两行仍紧凑）。 */
  font-size:clamp(54px,3.6vw,74px);line-height:1.0;letter-spacing:-.035em;
  text-wrap:initial;
}
.hero-copy .h1-line{display:block}
.hero-copy .h1-em{color:var(--rk-emerald)}
.hero-copy .sub{
  max-width:580px;margin-top:22px;
  font-size:clamp(17px,.92vw,17.5px);line-height:1.6;
}
.composer{
  position:relative;width:100%;max-width:620px;height:64px;min-height:64px;
  margin-top:26px;padding:6px 6px 6px 16px;gap:10px;
}
.composer-idea-icon{
  position:relative;z-index:3;display:grid;place-items:center;flex:0 0 24px;
  width:24px;height:24px;color:var(--rk-emerald);opacity:.72;pointer-events:none;
}
.composer-idea-icon svg{width:20px;height:20px}
.composer-fallback{
  position:absolute;z-index:1;left:50px;right:202px;top:50%;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:var(--rk-ink-muted);font:400 16.5px var(--font-body);
  opacity:0;transform:translateY(-50%);pointer-events:none;
  transition:opacity .16s ease;
}
.composer:has(#hero-input[placeholder=""]):not(:focus-within) .composer-fallback{opacity:.72}
.composer input{position:relative;z-index:2;min-width:0;height:100%;padding:0;background:transparent}
.composer button{
  flex:0 0 184px;width:184px;height:52px;padding:0 18px;
  justify-content:center;
}
.hero-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin-top:14px;
}
.hero .btn-ghost{
  gap:6px;padding:5px 0;border:0;border-radius:0;background:transparent;
  color:var(--rk-ink-soft);font-size:14.5px;box-shadow:none;
}
.hero .btn-ghost:hover{background:transparent;color:var(--rk-emerald)}
.hero .btn-ghost svg{width:14px;height:14px}
.chips{gap:8px;margin:0;align-items:center}
.chips .idea-chip{padding:8px 14px;font-size:14px;line-height:1.1}
.hero-copy .trust{gap:12px 22px;margin-top:18px;font-size:14px;line-height:1.25}

/* One proportional stage: enlarging the stage keeps every object locked together. */
.hero-stage{
  align-self:center;width:min(50vw,830px);max-width:none;
  margin-block-start:0;translate:0 clamp(-150px,-14vh,-110px);
}
.obj-cover{left:1%;bottom:16.8%;width:19%}
.obj-open{left:18%;bottom:16%;width:34%}
.obj-char{left:52%;bottom:16.8%;width:15%}
.obj-anim{left:65.8%;bottom:16.8%;width:19%}
.cat-wrap{left:84%;bottom:16.3%;width:16%}

@media (min-width:1440px){
  .hero{grid-template-columns:minmax(520px,.86fr) minmax(680px,1.14fr)}
  .hero-copy .h1-line{white-space:nowrap}
  .chips,.hero-copy .trust{flex-wrap:nowrap}
}

@media (min-width:961px) and (min-height:900px){
  .hero{margin-bottom:clamp(-180px,-18vh,-150px)}
}

@media (min-width:1200px) and (max-width:1439px){
  .hero{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr)}
  .hero-copy h1{font-size:clamp(48px,4vw,58px);line-height:1.01}
  .hero-stage{width:min(48vw,720px);translate:0 -140px}
}

@media (min-width:961px) and (max-width:1199px){
  .hero{
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    gap:clamp(30px,3.5vw,44px);
    padding-block:clamp(40px,5vh,58px);
  }
  .hero-copy h1{font-size:clamp(42px,4vw,52px);line-height:1.02}
  .hero-copy .sub{font-size:16px;line-height:1.55}
  .hero-stage{width:100%;translate:0 clamp(-44px,-4vh,-28px)}
  .composer button{flex-basis:164px;width:164px}
  .chips .idea-chip{font-size:13px;padding:7px 11px}
}

@media (max-width:960px){
  .hero{
    min-height:auto;grid-template-columns:1fr;gap:44px;
    padding-block:clamp(40px,6vh,72px) clamp(48px,7vh,88px);
  }
  .hero-copy{max-width:680px}
  .hero-copy h1{font-size:clamp(44px,7vw,58px);line-height:1.01}
  .hero-stage{width:min(100%,720px);margin-block-start:0;translate:none;justify-self:center}
  .chips,.hero-copy .trust{flex-wrap:wrap}
}

@media (max-width:767px){
  .hero{gap:34px;padding-block:36px 56px}
  .hero-copy h1{font-size:clamp(38px,11vw,48px);line-height:1.02}
  .hero-copy .sub{margin-top:18px;font-size:16px;line-height:1.55}
  .composer{margin-top:22px;max-width:100%}
  .composer button{flex-basis:154px;width:154px}
  .hero-stage{width:110%;margin-left:-5%}
  .hero-actions{margin-top:12px}
  .chips .idea-chip{font-size:13px;padding:7px 11px}
  .hero-copy .trust{gap:10px 18px;font-size:13.5px}
}

@media (max-width:380px){
  .composer{height:auto;min-height:64px;align-items:stretch;padding:8px}
  .composer-idea-icon{display:none}
  .composer-fallback{left:20px;right:20px;top:25px}
  .composer input{min-height:42px;padding:0 12px}
  .composer button{flex:0 0 50px;width:100%;height:50px}
}

/* ══ HERO refine-2（2026-07-18，Andy 二轮 spec）══
   按新 spec 推翻 balance 版三个决定：100svh 强撑视口 / 负 margin 拉下一模块 / 舞台 translate 上移
   → 高度由内容 + 自适应 padding 决定，允许大屏首屏底部轻露下一模块。
   同时：文案辅助区重组（Try an idea + 3 chips 同行 + Explore 纯文字链接）、右侧改主次堆叠构图。 */
@media (min-width:961px){
  /* Step-fullscreen（2026-07-19 Andy 复议）：推翻 refine-2 的「内容+padding 驱动」，回到满屏首屏。
     header 为 in-flow 72px → hero = calc(100svh - 72) 使「nav+hero 正好一屏」；padding 小（nav 已在流上方，无需清空），
     多余竖向空间靠「放大书架 + 拉开左栏间距」消化，不靠大留白。 */
  .hero{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);margin-bottom:0;
    /* 内容整体略上偏（top<bottom）：顶 gap 收紧不像纳下留白事故，底部空间由滚动提示锚定，读作有意。 */
    padding-block:clamp(20px,2.6vh,40px) clamp(72px,10vh,150px)}
  .hero-stage{translate:none}
}
.hero-copy h1{max-width:700px}
/* 辅助区：低视觉权重的一组，而非第二个模块 */
.hero-actions{gap:10px;margin-top:16px}
.try-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.try-label{font:600 13.5px var(--font-body);color:var(--rk-ink-muted);white-space:nowrap}
.chips{gap:8px;flex-wrap:wrap}
.chips .idea-chip{font:600 14px var(--font-body);padding:7px 12px;white-space:nowrap;width:auto}
.hero-explore{display:inline-flex;align-items:center;gap:5px;font:600 14px var(--font-body);
  color:var(--rk-ink-soft);text-decoration:none;padding:2px 0}
.hero-explore:hover{color:var(--rk-emerald)}
.hero-explore svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .22s}
.hero-explore:hover svg{transform:translateX(3px)}
/* 不强制 nowrap：英文 3 词 + 标签在桌面自然一行；长语种（俄/德等）自然换行而不是横向溢出压进舞台。
   （chip 单粒仍 white-space:nowrap，只是词与词之间允许折行。） */
/* 按钮定宽 190（≥1200；小桌面沿用 balance 版 164/154 阶梯），fallback 右界随按钮 */
@media (min-width:1200px){
  .composer button{flex:0 0 190px;width:190px}
  .composer-fallback{right:208px}
}

/* 右侧：整齐陈列（Andy 2026-07-19 选 A，对照渲染三联图定稿）：零倾斜·零叠压·等间距 1.6%，
   与 #shelf 模块同一套陈列语言。开本仍最大（30%）保主次；猫收尾在木板右端、尾垂板外。
   （z 保留：猫5 > 角色4 > 开本/动画3 > 封面2，hover 时既有规则升至 6。） */
/* Desktop hero shelf: read as one physical story-making sequence instead of
   four evenly spaced product cards. Neighbouring pieces overlap slightly and
   share the same contact line; mobile keeps the existing composition. */
@media (min-width:1024px){
  .obj-cover{left:3.2%;bottom:15%;width:17%;z-index:3;rotate:-.45deg}
  .obj-open{left:19.5%;bottom:14.35%;width:32%;z-index:4}
  .obj-char{left:49.9%;bottom:14.85%;width:17%;z-index:3;rotate:1.1deg}
  .obj-anim{left:64.9%;bottom:14.85%;width:18.5%;z-index:4;rotate:-.7deg}
  .cat-wrap{left:81.8%;bottom:16.1%;width:14.8%}

  .obj-cover,.obj-char,.obj-anim{
    transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s,rotate .24s ease;
  }
  .obj-cover:hover,.obj-char:hover,.obj-anim:hover{rotate:0deg}

  /* A loose character sheet: warm stock, a printed label, and artwork from
     the same fox story rather than a rounded application card. */
  .obj-char{
    aspect-ratio:86/130;
    border-radius:5px 7px 6px 4px;
    background:#F5EBD8;
    border:1px solid rgba(111,84,49,.24);
  }
  .obj-char small{
    padding:6px 4px 3px;
    color:#756958;
    font-size:8.5px;
    letter-spacing:1.05px;
  }
  .obj-char .char-art{
    margin:0 5px 6px;
    border-radius:2px;
    background-color:#F6EDDA;
    background-image:url('https://static2.readkidz.com/upload/image/a583/75dc/852015928397893.webp');
    background-size:cover;
    background-position:center 20%;
  }

  /* The motion sample becomes a warm-matted story frame. The painterly frame
     belongs to the open book visually; only the compact play control signals
     that it can move. */
  .obj-anim{
    aspect-ratio:104/130;
    padding:4px;
    border-radius:6px 8px 7px 5px;
    background:#F1E6D2;
    border:1px solid rgba(111,84,49,.24);
  }
  .obj-anim .art{
    inset:4px;
    border-radius:3px;
    background-image:url('https://static2.readkidz.com/upload/image/0dab/5c0b/847006131249285.webp?x-oss-process=image/resize,w_1120/format,webp');
    background-size:auto 145%;
    background-position:32% top;
  }
  .obj-anim .play{
    width:32px;
    height:32px;
    background:rgba(255,250,240,.92);
    box-shadow:0 5px 14px rgba(20,20,20,.26),0 0 0 1px rgba(78,57,34,.09);
  }
  .obj-anim .play svg{width:13px;height:13px}
}
.hero-plank{
  left:2.5%;
  width:95%;
  filter:drop-shadow(0 7px 6px rgba(51,36,20,.18));
}

/* The open-book artwork already has transparency. Keep its wrapper visually
   neutral so the physical book, rather than a white UI card, defines the edge. */
.shelf-obj.obj-open,
.shelf-obj.obj-open:hover{
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Ground every hero object on the plank. The narrow elliptical shadow reads
   as physical contact instead of another floating card shadow. */
.shelf-obj.obj-cover,
.shelf-obj.obj-open,
.shelf-obj.obj-char,
.shelf-obj.obj-anim{
  overflow:visible;
  isolation:isolate;
  transform-origin:50% 100%;
}
.shelf-obj.obj-cover::after,
.shelf-obj.obj-open::after,
.shelf-obj.obj-char::after,
.shelf-obj.obj-anim::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:7%;
  right:7%;
  bottom:-2.5%;
  height:9%;
  pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(52,37,22,.48),rgba(52,37,22,.2) 48%,transparent 78%);
  filter:blur(2.5px);
}
.shelf-obj.obj-open::after{left:12%;right:12%;bottom:-1%;height:10%}
.obj-open .art{filter:drop-shadow(2px 10px 6px rgba(45,32,19,.34))}
.obj-cover img,.obj-anim .art{border-radius:inherit}

/* Hardcover page block peeking from the right and bottom. */
.obj-cover::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:1.2%;
  right:-3.2%;
  bottom:-1.4%;
  left:4%;
  border-radius:3px 9px 9px 3px;
  background:repeating-linear-gradient(180deg,#F3EBDD 0 2px,#D8CBB7 2px 3px);
  box-shadow:4px 8px 14px -7px rgba(45,32,19,.42);
}

/* The two paper pieces keep a thin layered edge and a grounded shadow. */
.obj-char,.obj-anim{
  box-shadow:2px 2px 0 #EEE5D7,4px 4px 0 -1px #D2C3AD,7px 14px 17px -12px rgba(45,32,19,.46);
}
.obj-char:hover,.obj-anim:hover{
  box-shadow:2px 2px 0 #EEE5D7,4px 4px 0 -1px #D2C3AD,9px 21px 23px -13px rgba(45,32,19,.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RHYTHM PASS 2026-07-20 — 全页节奏优化（纯视觉，回滚=删除本终块）
   五项：① 底色呼吸带  ② 统一区块间距  ③ The Shelf 差异化  ④ Ages 侧卡围拢
   铁律：不碰 #birth 钉屏内部逻辑 / 不动 hero 书架·猫·入场 / 遵循既有断点。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ① 区块底色呼吸带（#read 试读 / #shelf 书墙）──
   跟随 #motion .motion-wrap 既有做法：paper-2 底 + 圆角 + 相对内边距，深度不超过它。
   band 边界 = .spread 内容列（已由 clamp(24,4vw,72) 侧边距天然内缩）→ 与其他区块侧边距一致，
   任何宽度不贴边/不溢出（id 提权覆盖 .spread 与 @900 扁平 64）。overflow 保持 visible：
   flip-nav/plank/cat 都在内容列内、居中不触圆角，无需裁剪。 */
#read,#shelf{
  --band-px:clamp(20px,3vw,52px);            /* 水平内边距：内容离圆角边 */
  background:var(--rk-paper-2);
  border-radius:clamp(20px,2vw,30px);
}
/* #read 竖向留 vh 档（保 Andy spec #11：1440×900 标题+书+圆点同屏），只加底色+水平内边距。
   mobile(375) 3vh≈20→28 / desktop 3vh≈27-32 → 手机内边距 ≤ 桌面，不失衡。 */
#read{padding:clamp(28px,3vh,40px) var(--band-px)}
/* #shelf 竖向 = 标准 --sec-pad（与其他区块同节奏 → whom→shelf / shelf→faq 严格 = 基准 178/158/128，
   均匀不参差），仅额外叠 tint + 水平内边距 + 圆角。sec-pad 手机 64 < 桌面 89-104，不失衡。 */
#shelf{padding:var(--sec-pad) var(--band-px)}

/* ── ② 统一区块间距 ──
   基准 = 多数 .spread↔.spread 的 2×sec-pad（birth→ages / ages→keepsake / … 已一致，不动）。
   收齐两处「感知偏大」：
   · hero→read：由 ① 的 band 收口——空纸段从 ~250px 缩到只剩 hero.pb（band 起即进入 read），
     hero 内部（书架/猫/入场/svh 满屏）一律不动。
   · read→birth：band 让 read 收口干净后，再把 #birth 顶部连接 padding 收紧（原 sec-pad*0.6 偏大）；
     #birth 钉屏舞台 100vh 居中留白属结构，不碰（sticky/相位/打字机零改）。 */
/* birth.pt 收紧只在 ≥1024（钉屏，需补偿舞台居中留白）；≤1023 birth 非钉屏无留白，保原值不过紧 */
@media(min-width:1024px){ #birth{padding-top:clamp(10px,1.6vh,22px)} }
/* hero→read 再收：只削 hero 底部「空 padding」(step-fullscreen 的滚动余量)，
   书架/猫/入场动画/svh 满屏一律不动——它们只是随 padding 变化坐得略低，外观零改。
   仅 ≥1200 有大 void(底 10vh=90~108px);961-1199 已是 5vh 小值，不动。 */
@media(min-width:1200px){ .hero{padding-bottom:clamp(52px,6vh,96px)} }

/* Sits under the plank as a quiet underlined link, not a second button: the section already ends in
   the shelf's own visual weight, and a filled control here would compete with the closing CTA.
   Deliberately NOT the flex + border-bottom pattern the closing CTA's secondary link uses. That one
   can rely on `white-space:nowrap`; this label is long enough to wrap on a phone in German, and a
   wrapped flex row stretches its border into a full-width rule while stranding the arrow vertically
   centred at the far edge. `text-decoration` follows each line of text, and an inline arrow trails
   the last word wherever it lands. */
.shelf-viewall{
  display:block;
  width:fit-content;
  max-width:min(100%,36ch);
  margin:clamp(4px,1.2vh,16px) auto 0;
  color:#225f4f;
  font-weight:700;
  text-align:center;
  text-decoration:underline;
  text-decoration-color:rgba(34,95,79,.45);
  text-underline-offset:6px;
}
.shelf-viewall:hover{color:var(--rk-emerald);text-decoration-color:currentColor}
.shelf-viewall:focus-visible{outline:3px solid rgba(15,164,126,.26);outline-offset:4px}
.shelf-viewall svg{
  display:inline-block;
  width:16px;height:16px;
  margin-inline-start:8px;
  vertical-align:-2px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
[dir="rtl"] .shelf-viewall svg{transform:scaleX(-1)}

/* ── ③ The Shelf 差异化（hero 书架不动，只改 #shelf）──
   目标：更密、更像真实书墙一角——收间距 + 差异化倾斜 + 相邻轻微叠压，打破等距排排站；
   架板更长更厚实；猫保持坐姿(D2=A)。响应式书数 桌面5/平板4/手机3，隐藏 display:none 不挤压。 */
/* 桌面(≥1024)：密排 + 每本差异化倾斜(绕底) + 部分负 margin 轻叠压 */
#shelf .shelf-row{gap:clamp(2px,0.6vw,12px)}
#shelf .shelf-book{transform-origin:50% 100%}
/* The lean overlaps were tuned when the cards were 2:3. At 3:4 they are ~12% wider, so the same
   negative margins let a later book cover the previous one's title (card 5 was eating "…Colors").
   Halved, and z-index reversed so books lean left-to-right like a real shelf — the front book is the
   left one, and no title is ever painted over by its neighbour. */
#shelf .shelf-book{z-index:1}
#shelf .shelf-book:nth-child(1){transform:rotate(-2.8deg);z-index:5}
#shelf .shelf-book:nth-child(2){transform:rotate(1.6deg);margin-left:calc(-1 * clamp(2px,0.35vw,6px));z-index:4}
#shelf .shelf-book:nth-child(3){transform:rotate(-0.8deg);z-index:3}
#shelf .shelf-book:nth-child(4){transform:rotate(2.2deg);margin-left:calc(-1 * clamp(2px,0.3vw,5px));z-index:2}
#shelf .shelf-book:nth-child(5){transform:rotate(-1.9deg);margin-left:calc(-1 * clamp(1px,0.25vw,4px));z-index:1}
/* hover/peek：抬起并扶正（压过上面差异化 rotate 与旧 odd 规则） */
#shelf .shelf-book:hover,#shelf .shelf-book.peek{transform:translateY(-10px) rotate(0)}
/* 5 本+猫居中木板：first-child 左 margin = 猫宽 + 收窄后的间距（沿用既有居中手法，同步新 gap） */
#shelf .shelf-row .shelf-book:first-child{margin-inline-start:calc(clamp(88px,7.6vw,140px) + clamp(2px,0.6vw,12px))}
/* 架板更长更厚实：108% 出挑 + drop-shadow 增厚感（比 hero 的 95% 更长） */
#shelf .shelf-plank2{min-width:108%;margin-top:-14px;filter:drop-shadow(0 5px 5px rgba(51,36,20,.22))}

/* 平板(768-1023)：单排 4 本(推翻旧 2 列 grid)；书缩放不挤压；猫收尾；无横滚 */
@media(max-width:1023px){
  #shelf .shelf-row{display:flex;grid-template-columns:none;flex-wrap:nowrap;width:auto;
    column-gap:0;row-gap:0;gap:clamp(3px,0.8vw,10px);justify-content:center;align-items:flex-end;margin-inline:0}
  #shelf .shelf-book{flex:none;width:clamp(104px,13.6vw,150px)}
  #shelf .shelf-book:nth-child(5){display:none}                 /* 4 本 */
  #shelf .shelf-book:nth-child(4){transform:rotate(2deg);margin-left:calc(-1 * clamp(3px,0.5vw,9px))}
  #shelf .shelf-row .shelf-book:first-child{margin-inline-start:calc(clamp(70px,9vw,104px) + clamp(3px,0.8vw,10px))}
  #shelf .shelf-cat{width:clamp(70px,9vw,104px);grid-column:auto;justify-self:auto;align-self:flex-end;
    margin-top:0;transform:translateY(28%)}
  #shelf .shelf-plank2{width:0;min-width:110%;max-width:none;height:auto;object-fit:fill;
    margin:-12px 0 0;object-position:center;display:block;filter:drop-shadow(0 5px 5px rgba(51,36,20,.22))}
}
/* 手机(≤767)：单排 3 本；书放大到可读；去猫补偿 margin(靠 justify center)；猫缩小；木板不戳出 band */
@media(max-width:767px){
  #shelf .shelf-row{gap:clamp(2px,1vw,7px)}
  /* Was clamp(70px,19vw,104px) — sized for the 2:3 mock-ups. Measured at 375 it produced 76px cards
     inside a row that left 106px of the viewport unused, so the covers were needlessly tiny AND the
     real storybook titles could not fit. Three books + the cat now actually use the width. */
  #shelf .shelf-book{width:clamp(84px,23.5vw,104px)}
  #shelf .shelf-book:nth-child(4){display:none}                 /* 3 本 */
  /* Four short lines rather than three: at 3 lines every title on a phone ended in an ellipsis
     ("Juniper Cat and the Last…"), which reads as a broken title rather than a long one. */
  #shelf .shelf-book .bk-title{font-size:11px;line-height:1.2;padding:0 5px;-webkit-line-clamp:4}
  #shelf .shelf-book .bk-open::before{height:60%}
  #shelf .shelf-book:nth-child(1){transform:rotate(-1.8deg)}    /* 窄屏收敛角度 */
  #shelf .shelf-book:nth-child(2){transform:rotate(1deg);margin-left:calc(-1 * clamp(2px,0.6vw,6px))}
  #shelf .shelf-book:nth-child(3){transform:rotate(-1deg)}
  #shelf .shelf-row .shelf-book:first-child{margin-inline-start:0}      /* 手机不做猫补偿，books+猫 整组 justify center */
  #shelf .shelf-cat{width:clamp(46px,12vw,64px);transform:translateY(26%)}
  /* Widened with the cards: at 104% the plank was shorter than the book row, so the first book stood
     22px past its left end — floating in mid-air on a page whose whole point is "books on a shelf".
     It also has to be re-centred: `width:0;min-width:N%` overflows its container to the RIGHT only,
     so simply lengthening the plank pushed it off the right edge instead of extending it under the
     first book. */
  #shelf .shelf-plank2{min-width:115%;position:relative;left:50%;transform:translateX(-50%)}
}

/* ── ④ Ages 侧卡：撤销「围拢」（Andy 2026-07-20 复议，回到原始分开布局）──
   原方案(向中央靠拢+内倾 rotate+叠大书下角后)已按 Andy 反馈撤销 → 侧卡回到原始
   `.age-stage{align-items:center;gap:clamp(40,4.6vw,78)}` 的两侧竖直分开、完整可见布局
   (base 规则未被本轮改动，撤掉本处覆盖即恢复)。矮屏同屏缩小(下方块)保留——那是另一条独立需求。 */
/* 矮屏(<760 高，≥1101 宽)：只压「内部」(书/侧卡/字号/内距)保证标题+tabs+大书同屏；
   **不压 #ages 的 section padding** → birth→ages / ages→keepsake 间距仍 = 基准，矮屏不参差。 */
@media(min-width:1101px) and (max-height:760px){
  #ages .center-head h2{font-size:clamp(32px,3vw,46px)}
  .ages{margin-top:clamp(20px,2.6vh,38px)}
  .age-tabs{margin-bottom:clamp(16px,2.2vh,32px)}
  .age-book{width:min(clamp(460px,42vw,700px),100%)}
  .age-mini{width:clamp(112px,10vw,158px)}
  .age-notes{margin-top:clamp(18px,2.4vh,36px)}
}
/* ── 附录（2026-07-20，Andy 反馈）：hero 猫超出木板 ──
   既有布局：hero 猫 left:86.4%→身/尾右缘达 102.8%，木板右缘仅 97.5% → 猫后半身悬板外。
   猫左紧贴动画卡(间隙 1.1%)不能左移；改**延长 hero 木板右端**到猫身下(尾尖仍垂板外，
   合原设计「尾垂板外」)。木板为绝对定位 img(不撑布局)，猫已到 1402 无横滚，故安全。
   只延右不动左(保左端仍托住封面书 left:3%)。 */
.hero-plank{left:2%;width:99.5%}
/* ═══ RHYTHM PASS 2026-07-20 结束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY UNIFY 2026-07-20（Andy：统一全页标题体系；回滚=删本块）
   ① Eyebrow(kicker) 已全局统一(13px/1.6px/emerald)，不动。
   ② H2 收成 2 档：标准段统一 clamp(32,3.2vw,46)（下半页从 40 加重、ages 从 56 收敛，
      治「下半页视觉权重逐渐下降」）；birth `.scrolly-copy h2`(特指性 0,1,1 高于本处全局 h2)
      自动保留其叙事档 = 第 2 档。统一微负字距 -.012em。
   ③ 副标题统一 max-width 56ch + line-height 1.6（hero `.hero-copy .sub` 特指性高，保留独立）。
   ④ 标题块(center-head)宽度统一 clamp(640,50vw,900)——#read/#ages 是 id 特指性(1,1,0)，
      必须同特指性覆盖；whom/shelf/faq 用全局(0,1,0)。
   标题→视觉间距：多数区块已用 var(--head-gap) 统一；#read 首屏收紧(12px, spec#11 同屏)为有意例外。
   ═══════════════════════════════════════════════════════════════════════════ */
h2{font-size:clamp(32px,3.2vw,46px);letter-spacing:-.012em}
#ages .center-head h2{font-size:clamp(32px,3.2vw,46px);letter-spacing:-.012em}
.sub{max-width:56ch;line-height:1.6}
#read .center-head .sub{max-width:56ch}
#ages .center-head .sub{max-width:56ch}
.center-head{max-width:min(100%,clamp(640px,50vw,900px))}
#read .center-head{max-width:min(100%,clamp(640px,50vw,900px))}
#ages .center-head{max-width:min(100%,clamp(640px,50vw,900px))}
/* ═══ TYPOGRAPHY UNIFY 结束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL CTA「封底」卡片重做（Andy 2026-07-20：原猫漂浮/标题输入偏小/无封底区，收尾转化弱）
   CSS-only（不碰 home.html：boot-cached + Codex 并发占用）——.final 子元素(猫/h2/sub/form)
   用 grid-template-areas 排成横向卡：猫左·内容右。暖白底+圆角+轻上边线+软影；整体放大 ~20-22%；
   手机竖向堆叠(猫在上)。回滚=删本块。
   ═══════════════════════════════════════════════════════════════════════════ */
/* [2026-07-20 参考图复刻] 薄荷底 + 猫身后光晕 + 四角叶子/散落星光/云 + 标题绿心；
   装饰全内联 SVG(存 CSS 变量),CSS-only 不碰模板。猫绝对定位落卡左下、放大;overflow 裁圆角。 */
#faq .final{
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.5 5.4 3.6 8.5 9 9-5.4.5-8.5 3.6-9 9-.5-5.4-3.6-8.5-9-9 5.4-.5 8.5-3.6 9-9z' fill='%236cbf95'/%3E%3C/svg%3E");
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 134'%3E%3Cpath d='M55 132 C53 94 48 62 30 28' fill='none' stroke='%23a6d3b3' stroke-width='3.5' stroke-linecap='round'/%3E%3Cg fill='%23b6dbc2'%3E%3Cpath d='M41 44 C29 40 20 46 18 58 C31 61 42 55 41 44Z'/%3E%3Cpath d='M55 66 C67 60 77 64 81 76 C68 82 56 78 55 66Z'/%3E%3Cpath d='M37 80 C25 78 16 84 16 96 C29 99 39 92 37 80Z'/%3E%3Cpath d='M47 104 C59 98 69 102 73 114 C60 120 49 116 47 104Z'/%3E%3C/g%3E%3C/svg%3E");
  --cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 60'%3E%3Cpath d='M34 50 C18 50 16 34 30 33 C31 18 52 16 58 28 C64 16 86 18 86 34 C103 33 105 50 90 50 Z' fill='%23d9ece0'/%3E%3C/svg%3E");
  /* ── 共享(全档)：布局壳 + 底色 + 圆角/描边/软影；卡高由内容撑开(无固定高) ── */
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;
  width:min(100%,1300px);                          /* 详规 §一：卡最大宽 ~1240-1320(cap 1300) */
  margin:clamp(72px,7vw,116px) auto 0;
  min-height:0;                                    /* 内容自然撑开,不用固定高 */
  border:1px solid #D8E8DE;
  border-radius:clamp(22px,2.1vw,30px);
  overflow:hidden;                                  /* 装饰/叶子裁进圆角,不溢出 */
  box-shadow:0 14px 44px -26px rgba(43,66,52,.32);
  background:                                       /* 薄荷底 + 猫身后薄荷光晕 */
    radial-gradient(40% 66% at 15% 54%, rgba(174,220,192,.62), rgba(174,220,192,0) 66%),
    linear-gradient(180deg,#F2F8F3 0%,#E8F2EB 100%);
}
/* 装饰层(≥960 全套)：①底左叶+左侧2星 ②底右叶+右上云+右侧2星 —— 窄档按 §七 逐级降级覆盖 */
#faq .final::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;width:auto;height:auto;
  z-index:0;pointer-events:none;border-radius:0;
  background:
    var(--leaf) bottom -8px left clamp(16px,2vw,40px) / clamp(88px,9vw,124px) auto no-repeat,
    var(--spark) top 5% left 31% / clamp(15px,1.5vw,21px) auto no-repeat,   /* 挪到标题上方,不压字 */
    var(--spark) top 37% left 6% / 13px auto no-repeat}
#faq .final::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    var(--leaf) bottom -8px right clamp(14px,1.6vw,32px) / clamp(98px,10vw,134px) auto no-repeat,
    var(--cloud) top clamp(20px,2.4vw,34px) right clamp(40px,5vw,72px) / clamp(70px,7vw,100px) auto no-repeat,
    var(--spark) top 50% right 4% / clamp(14px,1.4vw,19px) auto no-repeat,
    var(--spark) top 15% right 21% / 12px auto no-repeat}
#faq .final h2,#faq .final .sub,#faq .final .composer{position:relative;z-index:1}  /* 内容在装饰之上 */
/* 猫：绝对定位、**垂直居中**(横向档)、软影落地；尺寸逐档设。
   width:auto 必须显式(压过旧 line 758 .final img{width:...} 否则宽高都被设→objFit:fill 拉伸变形)。 */
#faq .final img{position:absolute;z-index:1;top:50%;transform:translateY(-50%);
  width:auto;height:auto;margin:0;                 /* 保原始比例 248:376,不压缩 */
  filter:drop-shadow(0 14px 18px rgba(43,66,52,.22))}
#faq .final h2{margin:0;color:#232a25;line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance}   /* §五 balance 避免末行单短词;换行随宽自然,不硬固定 */
/* 标题后绿色描边爱心（参考图 "here." 后那颗） */
#faq .final h2::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.2em;
  vertical-align:-.02em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5 C5.2 15.6 3.2 11.6 3.2 8.3 A4.4 4.4 0 0 1 12 6.2 A4.4 4.4 0 0 1 20.8 8.3 C20.8 11.6 18.8 15.6 12 20.5 Z' fill='none' stroke='%2334b98a' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
#faq .final .sub{margin:10px 0 0;color:#5f6a61;font-size:clamp(16px,1.2vw,19px);line-height:1.55}
#faq .final .composer{margin-top:clamp(14px,1.5vw,22px)!important}
/* input 优先占宽、button 不挤字、按钮文案 nowrap 全显（§六） */
#faq .final .composer input{flex:1 1 auto;min-width:0}
#faq .final .composer button{flex:0 0 auto;white-space:nowrap}

/* ── 档① ≥1200 横向：猫+装饰~25% / 内容~75% ── */
@media(min-width:1200px){
  #faq .final{padding:clamp(34px,2.8vw,44px) clamp(56px,4.5vw,72px);
    padding-left:clamp(284px,22vw,338px)}          /* 卡L pad + 猫区,合计~25% */
  #faq .final img{left:clamp(44px,3.4vw,60px);height:clamp(214px,16.5vw,256px)}  /* 猫高≤260 */
  #faq .final h2{font-size:clamp(44px,3.4vw,54px);max-width:min(100%,640px)}       /* 标题两行 */
  #faq .final .sub{max-width:52ch}
  #faq .final .composer{width:clamp(620px,49vw,680px)!important;height:66px;min-height:66px}  /* 输入总宽 620-680(压过 form inline width),同行 */
}
/* ── 档② 960-1199 横向收紧：猫 20-23% / 内容 77-80% ── */
@media(min-width:960px) and (max-width:1199px){
  #faq .final{padding:clamp(30px,2.8vw,42px) clamp(36px,3.8vw,48px);
    padding-left:clamp(206px,21vw,258px)}
  #faq .final img{left:clamp(30px,3vw,44px);height:clamp(176px,18vw,214px)}   /* 猫缩 */
  #faq .final h2{font-size:clamp(36px,3.6vw,44px);max-width:min(100%,560px)}   /* 小一档,可自然 3 行 */
  #faq .final .sub{max-width:54ch}
  #faq .final .composer{width:min(600px,100%);height:64px;min-height:64px}       /* 同行 */
}
/* ── 档③ 768-959 上下：猫缩 120-150 放上方居中；内容满宽居中；输入+钮仍同行 ── */
@media(min-width:768px) and (max-width:959px){
  #faq .final{align-items:center;text-align:center;
    padding:clamp(28px,3.6vw,40px) clamp(30px,4vw,44px);
    padding-top:clamp(162px,21vw,194px)}           /* 顶部给猫留位 */
  #faq .final img{left:50%;transform:translateX(-50%);top:clamp(20px,3vw,28px);bottom:auto;
    height:clamp(120px,16vw,150px)}                /* 猫 120-150 */
  #faq .final h2{font-size:clamp(34px,4.2vw,44px);max-width:min(100%,640px);margin-inline:auto}
  #faq .final .sub{text-align:center;max-width:60ch;margin-inline:auto}
  #faq .final .composer{width:min(600px,100%);height:62px;min-height:62px;margin-inline:auto}
  /* §七 降级：删右侧大植物+云,仅留少量叶+星 */
  #faq .final::before{background:
    var(--leaf) bottom -6px left 12px / 74px auto no-repeat,
    var(--spark) top 20% left 9% / 14px auto no-repeat}
  #faq .final::after{background:var(--spark) top 18% right 8% / 13px auto no-repeat}
}
/* ── 档④ ≤767 单列：猫→标题→副→输入→钮(输入/钮上下排,各 100%,高≥48) ── */
@media(max-width:767px){
  #faq .final{align-items:center;text-align:center;
    padding:clamp(24px,6vw,28px);
    padding-top:clamp(178px,52vw,214px)}           /* 顶部给猫留位(猫宽120→高~182) */
  #faq .final img{left:50%;transform:translateX(-50%);top:clamp(16px,4vw,24px);bottom:auto;
    width:clamp(96px,26vw,120px);height:auto}      /* §四 猫宽 96-120 */
  #faq .final h2{font-size:clamp(34px,8.4vw,40px);max-width:min(100%,460px);margin-inline:auto}  /* 34-40,2-3 行 */
  #faq .final .sub{text-align:center;max-width:none;margin-inline:auto}
  /* 输入+按钮上下排,各 100% 宽、高≥48 */
  #faq .final .composer{flex-direction:column;align-items:stretch;width:100%;max-width:min(100%,440px);
    height:auto;min-height:0;gap:10px;padding:8px;margin-inline:auto}
  #faq .final .composer input{width:100%;min-height:48px;flex:0 0 auto}
  #faq .final .composer button{width:100%;min-height:48px;justify-content:center}
  /* §四/§七 降级：删云+大植物+多数星,仅留 1-2 粒小星 */
  #faq .final::before{background:var(--spark) top 11% left 9% / 13px auto no-repeat}
  #faq .final::after{background:var(--spark) top 40% right 8% / 11px auto no-repeat}
}
/* §八 CTA↔Footer 间距：gap = #faq 底 padding + footer.mt(FOOTER 块归 0)。Footer 顶分隔线保留。 */
#faq{padding-bottom:clamp(64px,6vw,72px)}
@media(min-width:1200px){ #faq{padding-bottom:clamp(64px,5vw,80px)} }
@media(max-width:767px){ #faq{padding-bottom:64px} }

/* Homepage closing CTA: compact keepsake showcase. This class is home-only so shared create-page
   CTAs retain their composer layout. */
/* Card height is the ONLY lever on how big the artwork can be: the art is ~1.26:1 while its column
   is ~2:1, so the visible picture is height-bound and any leftover column width shows up as dead
   space on the right. 2026-07-27 measured 202px of it. Two coupled fixes: give the copy the wider
   share (.52/.48 — it also gained a trust row), and drive the art off an explicit height budget.
   --fc-art-max = card height minus 34 means the picture always clears the card edge by ~17px, at
   every breakpoint, however tall the localized copy makes the card. */
#faq .final.final-home{
  --fc-h:clamp(340px,25vw,368px);
  --fc-art-max:calc(var(--fc-h) - 34px);
  display:grid;
  grid-template-columns:minmax(0,.52fr) minmax(360px,.48fr);
  align-items:center;
  gap:clamp(24px,2.5vw,40px);
  width:min(100%,1300px);
  min-height:var(--fc-h);
  margin-top:clamp(72px,5.5vw,88px);
  padding:clamp(26px,2vw,30px) clamp(42px,4vw,62px);
  text-align:left;
  border:1px solid #c9dccf;
  border-radius:clamp(22px,2vw,28px);
  overflow:hidden;
  background:#f7f7f2;
  box-shadow:0 18px 48px -34px rgba(39,62,47,.42);
}
#faq .final.final-home::before,
#faq .final.final-home::after{content:none}
#faq .final-home .final-copy{
  position:relative;
  z-index:2;
  min-width:0;
  /* logical, not physical: in RTL the copy is the RIGHT column, so a physical padding-left would
     put this breathing room against the artwork instead of against the card edge. */
  padding-inline-start:clamp(20px,1.7vw,28px);
}
#faq .final-home h2{
  max-width:600px;
  margin:0;
  color:#222823;
  font-size:clamp(38px,3.1vw,48px);
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
#faq .final-home h2::after{content:none}
#faq .final-home .sub{
  max-width:54ch;
  margin:14px 0 0;
  color:#5f6a61;
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.55;
  text-align:left;
}
/* wrap, so a long localized primary label pushes the secondary onto its own line instead of
   overflowing the copy column (the CTA label is nowrap by design — see .final-primary). */
#faq .final-home .final-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px clamp(18px,2vw,30px);
  margin-top:24px;
}
#faq .final-home .final-primary,
#faq .final-home .final-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
}
#faq .final-home .final-primary{
  gap:12px;
  min-width:220px;
  padding:14px 24px;
  color:#fff;
  background:var(--rk-emerald);
  border:1px solid var(--rk-emerald);
  border-radius:12px;
  box-shadow:0 10px 24px -16px rgba(14,124,93,.72);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
#faq .final-home .final-primary:hover{
  transform:translateY(-2px);
  background:#0b8f6d;
  box-shadow:0 14px 28px -16px rgba(14,124,93,.8);
}
#faq .final-home .final-primary:focus-visible,
#faq .final-home .final-secondary:focus-visible{
  outline:3px solid rgba(15,164,126,.26);
  outline-offset:4px;
}
#faq .final-home .final-primary svg{width:17px;height:17px}
/* Shares the 54px min-height with the primary so the two sit on one optical row, but the underline
   has to hug the text — on a 54px-tall box it detaches ~17px below the baseline and reads as a rule,
   not a link. Collapsing the box and centring it in the row gives both. */
#faq .final-home .final-secondary{
  align-self:center;
  min-width:0;
  min-height:auto;
  padding-bottom:3px;
  color:#225f4f;
  border-bottom:1px solid rgba(34,95,79,.45);
}
#faq .final-home .final-secondary:hover{color:var(--rk-emerald);border-color:currentColor}
/* Wraps at every width, not just mobile: each item is nowrap, and German/Russian renderings of the
   three claims comfortably exceed the copy column on a 1280 laptop. */
#faq .final-home .final-proof{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 18px;
  margin-top:22px;
  color:#667068;
  font-size:14px;
  line-height:1.35;
}
#faq .final-home .final-proof span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
#faq .final-home .final-proof span+span::before{
  content:"";
  width:4px;
  height:4px;
  margin-right:7px;
  border-radius:50%;
  background:var(--rk-emerald);
}
#faq .final-home .final-proof svg{display:none}
#faq .final-home .final-showcase{
  position:relative;
  align-self:stretch;
  min-width:0;
  min-height:240px;
}
/* The source PNG carried ~16% transparent margin left/right and ~11-17% top/bottom, so the old
   512px-wide box rendered only 345px of actual picture while overflowing the card by 41px top and
   bottom (clipped by overflow:hidden — the visible art cleared the top edge by 3px). The webp is
   trimmed to its alpha bounds, which decouples "how big the box is" from "how close to the edge the
   picture gets": the box IS the picture now, so a plain centered max-height does the whole job.
   width/max-width stay explicit — line 758's `.final img{width:clamp(...)}` still applies here. */
#faq .final-home .final-showcase .final-showcase-art{
  position:absolute;
  z-index:1;
  display:block;
  left:50%;
  top:50%;
  bottom:auto;
  width:auto;
  height:var(--fc-art-max);
  max-width:100%;
  aspect-ratio:978/776;
  margin:0;
  transform:translate(-50%,-50%);
  filter:none;
}
@media(min-width:960px) and (max-width:1199px){
  #faq .final.final-home{
    --fc-h:clamp(324px,28vw,344px);
    grid-template-columns:minmax(0,.52fr) minmax(320px,.48fr);
    gap:24px;
    padding:28px 32px;
  }
  #faq .final-home h2{font-size:clamp(36px,3.8vw,44px)}
  #faq .final-home .final-proof{gap:12px;font-size:13px}
  #faq .final-home .final-proof span+span::before{margin-right:2px}
}
@media(min-width:768px) and (max-width:959px){
  #faq .final.final-home{
    grid-template-columns:1fr;
    gap:20px;
    padding:38px 42px 26px;
    text-align:center;
  }
  #faq .final-home .final-copy{max-width:680px;margin-inline:auto;padding-inline-start:0}
  #faq .final-home h2,
  #faq .final-home .sub{margin-inline:auto;text-align:center}
  #faq .final-home .final-actions,
  #faq .final-home .final-proof{justify-content:center}
  /* Stacked: the card is no longer height-bound, so the art budget is a flat number rather than a
     slice of --fc-h (which only describes the side-by-side layout). */
  #faq .final-home .final-showcase{min-height:272px;width:min(100%,600px);margin-inline:auto}
  #faq .final-home .final-showcase .final-showcase-art{--fc-art-max:262px;max-width:min(100%,420px)}
}
@media(max-width:767px){
  #faq .final.final-home{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-height:0;
    margin-top:72px;
    padding:28px 20px 30px;
    text-align:center;
  }
  #faq .final-home .final-copy{order:1;padding-inline-start:0}
  #faq .final-home .final-showcase{
    order:2;
    align-self:auto;
    width:100%;
    min-height:238px;
  }
  #faq .final-home .final-showcase .final-showcase-art{
    left:50%;
    top:50%;
    bottom:auto;
    --fc-art-max:228px;
    max-width:100%;
  }
  #faq .final-home h2{font-size:clamp(32px,9vw,40px);margin-inline:auto}
  #faq .final-home .sub{text-align:center;margin-inline:auto}
  #faq .final-home .final-actions{flex-direction:column;gap:12px;margin-top:20px}
  /* The label is nowrap everywhere else so the pill stays one clean line, but on a 375px phone the
     longest localizations (ru "Создать мою книжку с картинками", uk, cs) are wider than the whole
     card — nowrap made the copy column 357px inside a 327px card and overflow:hidden ate the tail.
     Below 768 the button is full-width anyway, so wrapping costs nothing and clips nothing. */
  #faq .final-home .final-primary{
    width:100%;
    min-width:0;
    padding-inline:18px;
    white-space:normal;
    text-wrap:balance;
    text-align:center;
  }
  /* min-height:40px here used to win over the base rule's `auto` and re-detached the underline by
     ~13px, which is exactly the bug the base rule fixes. Keep the touch target with padding. */
  #faq .final-home .final-secondary{min-height:auto;padding-block:6px 4px}
  /* One item per line below 768: wrapped as a row, the middle dot separator rides along with the
     item that wrapped and lands as a stray bullet at the head of the second line. */
  #faq .final-home .final-proof{flex-direction:column;align-items:center;gap:7px;margin-top:18px}
  #faq .final-home .final-proof span+span::before{content:none}
}

/* ═══ FOOTER READABILITY 结束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   WHOM CARDS UPLIFT 2026-07-20（Andy: #whom 3 卡太普通 → 方向 A 克制暖化）
   暖渐变底 + 图标圆形徽章带柔环 + hover 抬升/徽章填色/图标转白 + plus→pill 标签 +
   每卡去饱和专属色(避开紫,与 v3 单绿有张力→用土色系保持安静)。CSS-only 不碰模板。回滚=删本块。
   ═══════════════════════════════════════════════════════════════════════════ */
.aud-grid{gap:clamp(18px,1.9vw,30px)}
.aud-card{--acc:var(--rk-emerald);
  position:relative;overflow:hidden;
  background:
    radial-gradient(130px 108px at 28px 26px, color-mix(in srgb,var(--acc) 8%,transparent), transparent 72%),
    linear-gradient(180deg,#FFFFFF 0%,#FBFAF5 100%);
  border:1px solid var(--rk-line);border-radius:clamp(16px,1.4vw,20px);
  padding:clamp(26px,2.2vw,34px) clamp(24px,2vw,30px);
  box-shadow:0 6px 20px -14px rgba(43,42,38,.18);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2),box-shadow .32s,border-color .32s}
/* 顶部专属强调色渐隐条 */
.aud-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 0%,transparent) 72%)}
/* 大圆形图标徽章 + 柔环 */
.aud-card .ico{width:clamp(52px,4.4vw,60px);height:clamp(52px,4.4vw,60px);border-radius:50%;
  background:color-mix(in srgb,var(--acc) 14%,var(--rk-surface));
  box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 7%,transparent);
  margin-bottom:clamp(16px,1.6vw,22px);
  transition:background .3s,box-shadow .3s,transform .3s}
.aud-card .ico svg{width:26px;height:26px;stroke:var(--acc);transition:stroke .3s}
.aud-card h3{font-size:clamp(19px,1.5vw,21px)}
.aud-card>p{margin-top:9px;font-size:15px;line-height:1.56;color:var(--rk-ink-soft)}
/* plus 行 → pill 标签(带前导小圆点) */
.aud-card .plus{display:inline-flex;align-items:center;gap:7px;margin-top:clamp(16px,1.7vw,22px);
  padding:6px 13px;border-radius:999px;font:600 12.5px var(--font-body);
  background:color-mix(in srgb,var(--acc) 9%,var(--rk-surface));
  color:color-mix(in srgb,var(--acc) 68%,var(--rk-ink));
  border:1px solid color-mix(in srgb,var(--acc) 24%,transparent)}
.aud-card .plus::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--acc)}
/* hover：抬升 + 徽章填色 + 图标转白 + 边框强调 */
.aud-card:hover{transform:translateY(-6px);
  box-shadow:0 18px 36px -18px color-mix(in srgb,var(--acc) 30%,rgba(43,42,38,.55));
  border-color:color-mix(in srgb,var(--acc) 38%,var(--rk-line))}
.aud-card:hover .ico{background:var(--acc);transform:scale(1.05);
  box-shadow:0 0 0 9px color-mix(in srgb,var(--acc) 11%,transparent)}
.aud-card:hover .ico svg{stroke:#fff}
@media(prefers-reduced-motion:reduce){.aud-card,.aud-card .ico{transition:none}}
/* per-persona 专属色(去饱和土色系,避开紫)：家长暖珊瑚 / 老师翠绿(v3) / 创作者青蓝 */
.aud-card:nth-child(1){--acc:#D98A6E}
.aud-card:nth-child(2){--acc:#0FA47E}
.aud-card:nth-child(3){--acc:#5C93A6}
/* ═══ WHOM CARDS UPLIFT 结束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION CINEMATIC 2026-07-20（Andy: #motion 中段最弱一屏 → 方向 A 电影化+假播放感）
   讲「动」的模块此前完全静止：静帧加 Ken Burns 慢推镜(transform-only 循环) + 电影化包装
   (顶部薄黑边/底部渐晕/假进度条+翠绿已播+播放头/右下时长角标)。CSS-only 零新素材。回滚=删本块。
   ═══════════════════════════════════════════════════════════════════════════ */
.video-frame{background:#101614}                    /* letterbox 后备底(推镜边缘不露白) */
.video-frame img{animation:kenBurns 16s ease-in-out infinite alternate;
  transform-origin:60% 42%;will-change:transform}   /* 慢推镜:16s 缓慢推近+平移,alternate 回摆 */
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.8%,1.2%)}}
/* 覆盖层：顶黑条 + 底渐晕 + 进度轨(白) —— 全画在一层 background 里
   2026-07-31：卡片接了真视频，原先固定 38% 的「已播段(翠绿)+播放头(白点)」两层删掉了——
   一条还没播过的片子显示 38% 进度是在说假话。只留空轨，等于诚实的 0:00。 */
.video-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.38),rgba(255,255,255,.38)) no-repeat
      left 18px bottom 16px / calc(100% - 36px) 3px,
    linear-gradient(180deg,rgba(8,12,10,.45),transparent 11%),
    linear-gradient(0deg,rgba(8,12,10,.58),rgba(8,12,10,.22) 15%,transparent 30%)}
/* 右下时长角标(数字通用,无 i18n 负担)；时长由模板注入 --motion-duration，换片子不用动样式。
   变量缺失时 content 退回 normal，伪元素干脆不生成——好过印一个假数字。 */
.video-frame::after{content:var(--motion-duration);position:absolute;z-index:1;right:14px;bottom:27px;
  font:700 12px/1 var(--font-body);letter-spacing:.04em;color:#fff;pointer-events:none;
  background:rgba(10,14,12,.55);border-radius:999px;padding:5px 10px;backdrop-filter:blur(3px)}
.play-badge{z-index:2}                              /* 播放钮提到覆盖层之上(pulse 动画保留) */
@media(prefers-reduced-motion:reduce){.video-frame img{animation:none}}
html.export .video-frame img{animation:none}
/* ═══ MOTION CINEMATIC 结束 ═══ */

/* ── #motion 门面式真播放（2026-07-31，Andy）
   播放钮从 div 改成了真 <button>，所以要抹掉 UA 的边框/内边距/字体，并给回键盘焦点环——
   原先那套样式是按 div 写的，不抹的话按钮会自带一圈灰边。
   点击后 .is-playing 落在 .video-frame 上：海报、假外壳、按钮全部退场，iframe 铺满。 ── */
.play-badge{appearance:none;border:0;padding:0;font:inherit;color:inherit}
.play-badge:focus-visible{outline:3px solid var(--rk-emerald);outline-offset:3px}
.video-frame .yt-embed{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;display:block}
.video-frame.is-playing img,
.video-frame.is-playing .play-badge{display:none}   /* 海报退场顺带停掉 Ken Burns 推镜 */
.video-frame.is-playing::before,
.video-frame.is-playing::after{content:none}        /* 真播放器上面不该再叠一层假进度条与假时长 */

/* ═══════════════════════════════════════════════════════════════════════════
   READ ONE SQUARE BOOK 2026-07-21
   One complete 1:1 page per state: cover + 12 story pages + back cover.
   The original leaf/spread rules stay above as a rollback reference; this
   block owns the new .landscape-page stack and wins by source order.
   ═══════════════════════════════════════════════════════════════════════════ */
#read .flip-zone{
  --nav-size:46px;
  --nav-gap:20px;
  width:min(100%,1040px);
}
#read .flip-zone .langbar{width:min(720px,calc(100% - 132px),calc(100svh - 180px))}
#read .flipbook-wrap{
  --book-w:100%;
  width:min(720px,calc(100% - 132px),calc(100svh - 180px));
  height:auto;
  aspect-ratio:1/1;
}
#read .flipbook-wrap::before{inset:2% 0 0}
#read .flipbook-wrap::after,
#read .flipbook-wrap:has(.flipbook[data-flipped="0"])::after,
#read .flipbook-wrap:has(.flipbook[data-flipped="7"])::after,
#read .flipbook-wrap:has(.flipbook[data-flipped="13"])::after{
  top:calc(100% - 12px);
  width:92%;
  height:22px;
}
#read .flipbook,
#read .flipbook[data-flipped],
html.export #read .flipbook{
  top:50%;
  width:100%;height:100%;
  aspect-ratio:auto;
  perspective:1800px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  transition:none;
}
#read .flipbook::before,
#read .flipbook::after{content:none}
#read .flipbook:focus-visible{outline:3px solid color-mix(in srgb,var(--rk-emerald) 72%,white);outline-offset:7px;border-radius:14px}

#read .landscape-page{
  position:absolute;inset:0;
  overflow:hidden;
  transform:rotateY(0deg);
  transform-origin:0 50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  border:1px solid rgba(79,56,32,.16);
  border-radius:14px;
  background:#F5EEDF;
  box-shadow:3px 4px 0 #E8DDC8,7px 8px 0 -1px #D7C8AA,0 22px 38px -26px rgba(43,42,38,.48);
  pointer-events:none;
  transition:transform .72s cubic-bezier(.32,.65,.3,1),filter .32s ease;
  will-change:transform;
}
#read .landscape-page.is-past{transform:rotateY(-180deg)}
#read .landscape-page.is-current{pointer-events:auto}
#read .landscape-page::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 11px 0 20px -17px rgba(49,40,29,.35),inset 0 -3px 8px -6px rgba(49,40,29,.2);
}
#read .page-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

#read .story-page .caption{
  position:absolute;z-index:4;left:0;right:0;bottom:0;height:23%;
  display:flex;align-items:center;justify-content:center;
  padding:1% clamp(34px,7%,62px) 0;
  background:linear-gradient(180deg,rgba(245,238,223,0),rgba(245,238,223,.88) 24%,#F5EEDF 46%);
  color:var(--rk-ink);text-align:center;
  font:600 clamp(14px,1.15vw,18px)/1.42 var(--font-body);
  transition:opacity .15s ease;
}
#read .story-page .caption.lang-fade{opacity:0}
#read .story-page .caption[dir="rtl"]{font-size:clamp(15px,1.2vw,19px)}

#read .cover-page{background:#12213c}
#read .cover-page .cover-title{
  position:absolute;z-index:4;top:9%;left:10%;right:10%;
  color:#FFF7E8;text-align:center;
  font:700 clamp(29px,2.8vw,43px)/1.12 var(--font-display);
  text-shadow:0 2px 16px rgba(10,18,42,.68);
}

/* The back cover now uses a fully illustrated square scene, but the copy stays HTML so the
   language switcher can keep localizing it. The artwork therefore carries no baked text and leaves
   a quiet center field for the blurb + CTA. */
#read .end-page{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:clamp(26px,4.2vw,54px) 8% clamp(18px,2.5vw,30px);
  background-color:#F5EEDF;
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
}
/* The back cover is page 14 of 14 — a reader reaches it last or never — but a background-image on a
   rendered element is fetched at parse time regardless, so it used to cost 81KB on every homepage
   load. home-v3.js adds `.art-on` once the artwork is wanted (the same hydration pass that fills the
   deferred page rasters), and the painted colour above holds the panel until then. */
#read .end-page.art-on{
  background-image:url('https://static2.readkidz.com/upload/image/0dab/7ed7/849455511154821.webp?x-oss-process=image/resize,w_1120/format,webp');
}
#read .end-page .end-main{
  position:relative;z-index:4;
  width:min(100%,560px);
  margin-top:clamp(102px,16%,170px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,22px);
  text-align:center;
}
#read .end-page .the-end{
  max-width:100%;
  white-space:pre-line;
  text-wrap:balance;
  font:400 clamp(19px,2.05vw,31px)/1.56 var(--font-display);
  color:#3E3428;
  text-shadow:0 1px 0 rgba(255,247,230,.65);
}
#read .end-page .btn-solid{
  min-height:clamp(46px,4.2vw,56px);
  padding:.85em 1.9em;
  font-size:clamp(14px,1.4vw,20px);
  box-shadow:0 10px 20px -14px rgba(41,84,73,.45);
}
#read .end-page .book-colophon{
  position:relative;z-index:4;
  margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:0;
  padding-bottom:clamp(2px,.8vw,8px);
}
#read .end-page .book-colophon::before{content:none}
#read .end-page .colophon-cat{display:none}
#read .end-page .colophon-mark{
  font:600 clamp(10px,1vw,11px)/1 var(--font-body);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(60,52,40,.8);
  text-shadow:0 1px 0 rgba(255,248,235,.72);
}

#read .flip-dots{gap:7px;margin-top:10px;max-width:100%}
#read .flip-dots button{width:24px;height:24px;flex:0 0 24px}
#read #flip-prev{left:calc(0px - var(--nav-gap) - var(--nav-size))}
#read #flip-next{right:calc(0px - var(--nav-gap) - var(--nav-size))}

@media (max-width:767px){
  #read .flip-zone{--nav-size:42px;margin-top:26px}
  #read .flip-zone .langbar{width:100%}
  #read .flipbook-wrap{
    width:min(760px,calc(100% + 32px));
    height:auto;
  }
  #read #flip-prev{left:5px}
  #read #flip-next{right:5px}
  #read .story-page .caption{
    height:25%;padding:2% 12% 0;
    font-size:clamp(10.5px,3vw,13px);line-height:1.3;
  }
  #read .story-page .caption[dir="rtl"]{font-size:clamp(10.5px,3vw,13px)}
  #read .cover-page .cover-title{top:8%;font-size:clamp(19px,6vw,29px)}
  #read .end-page{padding:18px 10% 16px;background-position:center top}
  #read .end-page .end-main{width:min(100%,290px);margin-top:clamp(72px,23vw,112px);gap:14px}
  #read .end-page .the-end{font-size:clamp(15px,4.8vw,20px);line-height:1.48}
  #read .end-page .btn-solid{min-height:40px;padding:10px 18px;font-size:13px}
  #read .flip-dots{gap:4px;margin-top:8px}
  #read .flip-dots button{width:20px;height:20px;flex-basis:20px}
  #read .flip-dots .dot{width:7px;height:7px}
}

@media (prefers-reduced-motion:reduce){
  #read .landscape-page{transition:none}
}
html.export #read .landscape-page{transition:none}
/* ═══ READ ONE SQUARE BOOK 结束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   READ TWO-PAGE SPREAD 2026-07-21
   Desktop binds the flat page list into a real book: seven leaves stand on the
   right half, each carrying two pages back to back, and flipping one sweeps it
   180° onto the left half — so every view between the covers is a true spread.
   Below 1024px none of this applies and the square single-page block above stays
   in charge: a 2:1 spread on a tablet leaves ~264px per page and the captions
   stop being readable. Rollback = delete this block.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  #read .flip-zone{--nav-size:46px;--nav-gap:20px;width:min(100%,1264px)}
  #read .flip-zone .langbar{width:min(760px,calc(100% - 132px))}

  /* One stage height across all three states (closed cover / spread / closed back)
     so the contact shadow and the dot row never jump as the book opens. */
  #read .flipbook-wrap{
    --book-w:min(1120px,calc(100% - 132px),calc((100svh - 300px) * 2));
    width:var(--book-w);
    height:auto;
    aspect-ratio:2/1;
  }
  #read .flipbook-wrap::before{inset:4% 3% 0}
  #read .flipbook-wrap::after,
  #read .flipbook-wrap:has(.flipbook[data-flipped="0"])::after,
  #read .flipbook-wrap:has(.flipbook[data-flipped="7"])::after{
    top:calc(100% - 9px);
    transform:translateX(-50%);
    width:93%;height:20px;
    transition:width .8s cubic-bezier(.32,.65,.3,1);
  }
  #read .flipbook-wrap:has(.flipbook[data-flipped="0"])::after,
  #read .flipbook-wrap:has(.flipbook[data-flipped="7"])::after{width:47%}

  /* Back to a flat rendering context: the leaves are ordered by z-index, and a
     preserve-3d parent would sort them by depth instead — letting a mid-swing
     sheet cut through the stack it is passing over. */
  #read .flipbook.is-spread,
  #read .flipbook.is-spread[data-flipped],
  html.export #read .flipbook.is-spread{
    left:50%;top:50%;
    width:100%;height:100%;
    aspect-ratio:auto;
    perspective:1900px;
    transform-style:flat;
    transform:translate(-50%,-50%);
    transition:transform .8s cubic-bezier(.32,.65,.3,1);
  }
  /* Closed states centre the visible half on the stage, not the whole spread. The book is as wide
     as the stage, so shifting it by three quarters of its own width puts the right-hand half dead
     centre — and a quarter does the same for the left-hand half. */
  #read .flipbook.is-spread[data-flipped="0"]{transform:translate(-75%,-50%)}
  #read .flipbook.is-spread[data-flipped="7"]{transform:translate(-25%,-50%)}

  /* Backing paper under the left half: only wanted once the book is open, where it
     fills the gap while a sheet is still mid-swing. */
  #read .flipbook.is-spread::before{
    content:"";position:absolute;z-index:0;left:0;top:0;bottom:auto;width:50%;height:100%;
    /* The gutter rule this pseudo-element used to serve centred itself with translateX(-50%);
       inheriting that here slid the backing paper a half-width out past the spine. */
    transform:none;
    background:#F1E8D6;border-radius:12px 0 0 12px;
    box-shadow:inset -16px 0 24px -19px rgba(74,56,38,.42);
    opacity:0;transition:opacity .3s ease;
  }
  #read .flipbook.is-spread:not([data-flipped="0"])::before{opacity:1}
  #read .flipbook.is-spread::after{
    content:"";position:absolute;z-index:95;left:50%;top:1.5%;bottom:1.5%;
    width:3.4%;transform:translateX(-50%);
    pointer-events:none;opacity:0;
    background:linear-gradient(90deg,transparent,rgba(74,56,38,.09) 26%,rgba(74,56,38,.21) 50%,rgba(74,56,38,.09) 74%,transparent);
    filter:blur(1.7px);transition:opacity .35s ease;
  }
  #read .flipbook.is-spread:not([data-flipped="0"]):not([data-flipped="7"])::after{opacity:1}

  #read .flipbook.is-spread .leaf{
    position:absolute;left:50%;top:0;width:50%;height:100%;
    transform-style:preserve-3d;transform-origin:0% 50%;
    transform:rotateY(0deg);
    transition:transform .8s cubic-bezier(.32,.65,.3,1);
    will-change:transform;
  }
  #read .flipbook.is-spread .leaf.flipped{transform:rotateY(-180deg)}

  /* The pages become the two faces of a sheet: the rotation, border and page-stack
     shadow the square block gave each page all belong to the leaf now. */
  #read .flipbook.is-spread .landscape-page,
  #read .flipbook.is-spread .landscape-page.is-past,
  #read .flipbook.is-spread .landscape-page.is-current{
    position:absolute;inset:0;
    transform:none;transform-origin:50% 50%;
    transform-style:flat;
    backface-visibility:hidden;
    /* The leaf moves, the face never does — drop the square block's promotion hint so 14 pages
       don't each hold a compositing layer for an animation they take no part in. */
    will-change:auto;
    overflow:hidden;
    border:0;
    box-shadow:none;
    transition:none;
    pointer-events:auto;
  }
  #read .flipbook.is-spread .landscape-page.front{border-radius:0 11px 11px 0}
  #read .flipbook.is-spread .landscape-page.back{transform:rotateY(180deg);border-radius:11px 0 0 11px}

  /* Gutter shading rides an overlay rather than an inset shadow: the full-bleed
     <img> paints over the page background and would hide it. */
  #read .flipbook.is-spread .landscape-page::after{
    content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  }
  #read .flipbook.is-spread .landscape-page.front::after{
    box-shadow:inset 22px 0 28px -21px rgba(74,56,38,.44),inset 0 -5px 12px -10px rgba(74,56,38,.2);
  }
  #read .flipbook.is-spread .landscape-page.back::after{
    box-shadow:inset -22px 0 28px -21px rgba(74,56,38,.44),inset 0 -5px 12px -10px rgba(74,56,38,.2);
  }

  /* Closed states show the page-block edge so the book reads as a solid object. */
  #read .flipbook.is-spread .cover-page{
    box-shadow:3px 0 0 #E9DFCB,6px 0 0 -1px #DBCCB0,9px 0 0 -2px #CCBA99,
      0 26px 40px -28px rgba(43,42,38,.52);
  }
  #read .flipbook.is-spread .end-page{
    box-shadow:-3px 0 0 #E9DFCB,-6px 0 0 -1px #DBCCB0,-9px 0 0 -2px #CCBA99,
      0 26px 40px -28px rgba(43,42,38,.52);
  }

  /* Half-width pages want a tighter caption band than the full square did. */
  #read .flipbook.is-spread .story-page .caption{
    height:24%;padding:1% clamp(20px,6%,44px) 0;
    font-size:clamp(13px,1.02vw,16.5px);line-height:1.4;
  }
  #read .flipbook.is-spread .story-page .caption[dir="rtl"]{font-size:clamp(13.5px,1.08vw,17.5px)}
  #read .flipbook.is-spread .cover-page .cover-title{top:10%;font-size:clamp(25px,2.05vw,34px)}
  #read .flipbook.is-spread .end-page{padding:clamp(22px,3vw,38px) 10% clamp(16px,1.8vw,24px);background-position:center top}
  #read .flipbook.is-spread .end-page .end-main{width:min(100%,320px);margin-top:clamp(72px,16%,120px)}
  #read .flipbook.is-spread .end-page .the-end{font-size:clamp(16px,1.45vw,22px);line-height:1.5}
  #read .flipbook.is-spread .end-page .btn-solid{min-height:42px;font-size:clamp(12px,1.1vw,16px);padding:.85em 1.6em}

  /* Arrows hug the visible half while the book is closed. Driven by left/right, not --nav-x:
     --book-w carries a calc(100% - …) term, and a custom property resolves its percentages
     against whoever *uses* it — on a 46px button that term goes negative and the arrows fly
     outward. Percentages in left/right resolve against the stage, which is what we mean. */
  #read .flip-zone #flip-prev,
  #read .flip-zone #flip-next{
    transition:transform .7s cubic-bezier(.3,.7,.3,1),
      left .8s cubic-bezier(.32,.65,.3,1),right .8s cubic-bezier(.32,.65,.3,1),
      border-color .2s,opacity .3s,background .2s;
  }
  #read .flipbook-wrap:has(.flipbook[data-flipped="0"]) #flip-prev,
  #read .flipbook-wrap:has(.flipbook[data-flipped="7"]) #flip-prev{
    left:calc(25% - var(--nav-gap) - var(--nav-size));
  }
  #read .flipbook-wrap:has(.flipbook[data-flipped="0"]) #flip-next,
  #read .flipbook-wrap:has(.flipbook[data-flipped="7"]) #flip-next{
    right:calc(25% - var(--nav-gap) - var(--nav-size));
  }

  #read .flip-dots{gap:11px;margin-top:16px}
  #read .flip-dots button{width:26px;height:26px;flex:0 0 26px}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  #read .flipbook.is-spread,
  #read .flipbook.is-spread .leaf{transition:none}
}
html.export #read .flipbook.is-spread,
html.export #read .flipbook.is-spread .leaf{transition:none}
/* ═══ READ TWO-PAGE SPREAD 结束 ═══ */

/* 共享头尾 chrome 规则已于 2026-07-26 全部迁往 landing2026-nav.css（唯一来源）。
   原因：home-v3.css 与另一份拷贝已漂移，且页面加载哪一份决定头尾长相。
   不要在本文件重新添加 .landing2026* 规则。 */

/* ── CJK line-height pass (2026-07-31)
   拉丁字面高约 0.72em，line-height:1.0~1.14 仍留得出行间空白；汉字字面几乎撑满 em 框
   （实测 69px 字号下墨迹高 68px），同一组数值换到中文就成了两行几乎贴住。
   只放大 CJK 下的行高——字号、字距、间距、布局一律不动。
   作用域锁 .lp-home-v3：本文件被 create 系列、pricing、legal、tutorials 等页共用，不能全局改
   （注意别在本段注释里写出星号加斜杠的组合，那会提前闭合注释、吃掉紧随其后的第一条规则）。
   #faq 那两条要带 id 才压得过原规则（#faq .final h2 的 id 特指性高于类选择器）。 ── */
html[lang^="zh"] .lp-home-v3 h1,
html[lang^="zh"] .lp-home-v3 h2,
html[lang^="zh"] .lp-home-v3 h3{line-height:1.26}
html[lang^="zh"] .lp-home-v3 .hero-copy h1{line-height:1.22}
html[lang^="zh"] .lp-home-v3 #faq .final h2,
html[lang^="zh"] .lp-home-v3 #faq .final-home h2{line-height:1.24}

/* ── #motion 视频卡改 16:9（2026-07-31，Andy）
   原先 .video-frame 不声明比例，高度由里面那张 1100x733(3:2) 静帧撑出来，
   于是一套标准播放器外壳套在了非视频比例的框上（同页 .format-card.major .thumb 用的就是 16/9）。
   这里把比例交给框自己持有，图改 cover 填充——之后素材换成 YouTube 那条片子的 16:9 帧时，
   不用再动 CSS。裁切用默认居中；要偏移只需给 img 加一行 object-position。 ── */
.video-frame{aspect-ratio:16/9}
.video-frame img{width:100%;height:100%;object-fit:cover}