/* 关于 Sandy / welcome page (index.html), 「门牌」 (owner-picked 2026-10-12; docs/previews/about-redesign.html direction B).
   One family with the 更多 pages (联系我, 支持 Sandy, 隐私政策): the same key-soft shapes with negative space as the shape,
   kicker / title scale, hairline sections and +/− folds, and the owner's own marker drawings.
   - First screen: one key-soft wall with the 更多 cat ear and an arched doorway cut out of it (the page colour IS the door);
     Sandy sits in the doorway (stroke her), the owner's books and cup on the doorstep, the brand line on a hanging sign.
   - Middle: type and hairlines. One small marker drawing per section (star, notebook, reading Sandy, Sandy asleep on her
     books, sparkles on the AI card, leaf, paw), never on text. The AI card and the postcards stay visible sections.
   - End: the 支持 Sandy cat head (.more-cathead) with the invitation inside it and Sandy peeking over the top.
   At most two tints per screen (--color-key-soft and the --surface cards). Every colour is a token, so all 12 palettes and
   dark mode work (星夜蓝 included, via data-page-tone). Nothing moves by itself: petting, and one hop when a sticker is tapped. */
.wrap { width: min(1040px, 100%); margin: 0 auto; padding-inline: 20px; }
@media (min-width: 800px) { .wrap { padding-inline: 32px; } }
main section { position: relative; padding: 72px 0 0; }
main .wrap { position: relative; }
main h1, main h2, main h3 { line-break: strict; text-wrap: balance; }
main p, main li { text-wrap: pretty; }
html[data-lang="ja"] main :is(h1, h2, h3, summary, .section-kicker, .eyebrow, .cats li > span, .stat span) { word-break: auto-phrase; }
main p { margin: 0 0 12px; }
.muted { color: var(--muted); }

/* the 更多 type scale: a small accent kicker, a 600 title with a key tab before it (隐私政策's index tabs), a calm intro */
.section-kicker { margin: 0 0 6px; color: var(--color-accent); font-size: .8rem; font-weight: 500; line-height: 1.5; letter-spacing: .08em; }
main h2 { display: flex; align-items: baseline; gap: 12px; max-width: 26em; margin: 0 0 12px; color: var(--ink); font-size: 1.375rem; font-weight: 600; line-height: 1.45; }
main h2::before { content: ""; flex: none; width: 22px; height: 14px; border-radius: 3px 8px 8px 3px; background: var(--color-key); translate: 0 1px; }
main h3 { margin: 0 0 6px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.section-intro { max-width: 40em; margin: 0 0 24px; color: var(--ink-2); font-size: 1rem; line-height: 1.85; }

/* small marker drawings: decoration only, never under text, buttons or fields */
.ab-deco { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none; }
/* the bigger drawings (Sandy reading, asleep): the 更多 pages' die-cut paper edge */
.ab-sticker { display: block; height: auto; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(2.5px 0 0 var(--more-edge)) drop-shadow(-2.5px 0 0 var(--more-edge)) drop-shadow(0 2.5px 0 var(--more-edge)) drop-shadow(0 -2.5px 0 var(--more-edge)) drop-shadow(0 5px 6px rgb(var(--shadow-rgb) / .14)); }

/* ───────── hero: 「门牌」 ───────── */
/* a little house in one key-soft tint: a soft gable roof (rounded ridge and eaves, overhanging the wall a little) over a
   wall with an arched doorway cut out of it; Sandy sits in the doorway, the brand sign stands on the floor beside the door */
.hero { padding: 8px 0 8px; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
/* phones: the house starts at the screen's left edge and is as wide as leaves room, right of its centred door, for the
   standing sign (168px, so its text is ≥ 12px) to end 4px inside the screen: house = 2 × screen − 352px − door. The sign
   stands partly in front of the house's right wall and partly on the page (owner, 2026-10-12). */
.hero-door { --door-w: 134px; --house-w: min(100%, calc(200% - 352px - var(--door-w))); position: relative; height: 292px; margin-inline: -20px; overflow-x: clip; }
.door-roof { position: absolute; left: 4px; top: 0; width: calc(var(--house-w) - 8px); height: 70px; overflow: visible; }
.door-roof path { fill: var(--color-key-soft); stroke: var(--color-key-soft); stroke-width: 10px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.door-wall { position: absolute; left: 14px; width: calc(var(--house-w) - 28px); bottom: 0; height: 226px; background: var(--color-key-soft); }
/* a roomy arched doorway, centred under the ridge (owner: bigger, and centred), Sandy centred in it with page-colour room
   around her; the books stand on the floor line to its left, the sign to its right */
.door-arch { position: absolute; bottom: -1px; left: 50%; width: var(--door-w); height: 172px; border-radius: 999px 999px 0 0; background: var(--color-bg); translate: -50% 0; }
.hero-sandy { position: absolute; z-index: 3; left: calc(var(--house-w) / 2); bottom: -2px; width: 98px; margin: 0; padding: 0; border: 0; border-radius: 40%; background: none; translate: -50% 0; }
.hero-sandy img { position: static; display: block; width: 100%; height: auto; transition: transform .25s ease; }
.hero-sandy.is-petting img { transform: scale(1.04) rotate(-2deg); }
.hero-sandy:focus-visible { outline-offset: 4px; }
/* the owner's books on the doorstep floor, left of the door (owner, 2026-10-12: no coffee cup) */
.door-books { z-index: 2; width: 54px; right: calc(100% - var(--house-w) / 2 + var(--door-w) / 2 + 6px); bottom: -1px; rotate: -3deg; }
/* the brand line on the owner's STANDING sign (about/sign-standing-v2.png, matching Sandy and the books' marker art; owner: not hung
   up). It stands on the floor line right of the door; the live text sits on the face (x 11–90 %, y 12–72 % of the art) with a
   safe margin, sized from the sign's own width (cqi) so 「你的温柔日语自习角」 and "Study with Sandy" stay one line each.
   The face is a light drawing in every palette, so its text stays the owner's dark diary ink (≥ 7:1 on the cream). */
.door-sign { position: absolute; z-index: 2; left: calc(var(--house-w) / 2 + var(--door-w) / 2 + 4px); bottom: -2px; container-type: inline-size; width: 168px; aspect-ratio: 800 / 466; background: url(illustrations/hand-drawn/about/sign-standing-v2.png) 0 0 / 100% 100% no-repeat; text-align: center; }
/* the blank face, with a safe margin inside it */
.door-sign-face { position: absolute; left: 15%; right: 14%; top: 16%; bottom: 31%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.brand-intro { margin: 0 !important; color: #4e3b30; font-size: 11px; font-size: 7.4cqi; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
html[data-lang="zh"] .brand-intro { font-size: 7.8cqi; white-space: nowrap; }
html[data-lang="en"] .brand-intro { font-size: 10px; font-size: 6.6cqi; }
html[data-lang="ja"] .brand-intro { font-size: 10px; font-size: 6.6cqi; word-break: auto-phrase; }
.door-sign-en { display: block; margin-top: .15em; color: #6b5548; font-size: 9px; font-size: 6cqi; line-height: 1.35; letter-spacing: .02em; white-space: nowrap; }
.hero .companion-touch { position: absolute; left: calc(var(--house-w) / 2); top: calc(100% + 6px); width: max-content; max-width: 100%; margin: 0; translate: -50% 0; color: var(--muted); font-size: .78rem; line-height: 1.5; text-align: center; }

.hero-copy { min-width: 0; padding-top: 30px; }
.eyebrow { margin: 0; color: var(--color-accent); font-size: .85rem; font-weight: 600; line-height: 1.5; letter-spacing: .08em; }
html[data-lang="en"] .eyebrow { letter-spacing: .02em; }
.hero h1 { margin: 12px 0 0; color: var(--ink); font-size: 2.125rem; font-weight: 650; line-height: 1.3; letter-spacing: .03em; }
html[data-lang="en"] .hero h1 { letter-spacing: 0; }
.hero-line { display: block; }
html[data-lang="zh"] .hero-line + .hero-line { white-space: nowrap; }
.hero .sub { max-width: 26em; margin: 14px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 24px; }
.hero-go { min-height: 52px; padding: 12px 28px; border-radius: 999px; font-size: 1.05rem; font-weight: 700; }
.second { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: 4px; text-decoration-color: var(--color-line-strong); }
.hero .trust, .hero .customise-note { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.hero .trust { margin-top: 12px; }
.customise-note a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.customise-note .ai-detail { display: block; }
.customise-note .ai-detail a { min-height: 0; }

/* ───────── 试一道题 ───────── */
#try .doodle-star { width: 30px; left: 16px; top: -36px; rotate: -13deg; }
#quiz { padding: 24px; border: 1px solid var(--color-line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 26px -18px rgb(var(--shadow-rgb) / .35); }
.q-meta { margin: 0 0 8px !important; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.q-sentence { margin: 0 0 16px !important; font-size: 1.25rem; line-height: 1.9; }
.blank { display: inline-block; min-width: 4.5em; border-bottom: 2px solid var(--color-key); color: var(--color-accent); text-align: center; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { min-height: 52px; border: 1px solid var(--color-line-strong); border-radius: 14px; background: var(--color-bg); color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.choice:disabled { cursor: default; }
.choice.right { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.choice.wrong { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
.result:empty { display: none; }
.result { margin-top: 16px; color: var(--ink-2); font-size: .95rem; line-height: 1.75; }
.result .verdict { margin: 0 0 4px; color: var(--ink); font-size: 1rem; font-weight: 600; }
.after { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.answered .after { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pause-note { flex: 1 1 100%; margin: 0 !important; color: var(--ink-2); font-size: .9rem; }

/* ───────── 易混辨析: numbers as type on hairlines, then 适合 / 不适合 ───────── */
#inside .doodle-notebook { width: 76px; right: 20px; top: 52px; rotate: 8deg; }
#inside .section-kicker, #inside h2, #inside .section-intro { padding-right: 72px; }
.stats { margin: 0 0 4px !important; color: var(--muted); font-size: .85rem; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--color-line); }
.stat { padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.stat b { display: block; color: var(--ink); font-size: 1.75rem; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; }
.fit .card { padding: 0; border: 0; background: none; }
.fit b { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 600; }
.fit ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.fit li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--color-line); color: var(--ink-2); font-size: .95rem; line-height: 1.7; }
.fit li::before { content: ""; position: absolute; left: 2px; top: calc(12px + .85em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-key); }
.fit .card + .card li::before { top: calc(12px + .85em - 1px); width: 8px; height: 2px; border-radius: 1px; background: var(--muted); }

/* ───────── folds: the 更多 pages' +/− rows (story, snacks, cats, plans, FAQ) ───────── */
main details { border-bottom: 1px solid var(--color-line); }
main summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; color: var(--ink); font-size: .98rem; font-weight: 500; line-height: 1.5; cursor: pointer; list-style: none; }
main summary::-webkit-details-marker { display: none; }
main summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); background: var(--color-key-soft); font-weight: 500; line-height: 1; }
main details[open] > summary::after { content: "−"; }
main summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
main details > div { padding: 0 0 18px; color: var(--ink-2); font-size: .95rem; line-height: 1.85; }
main details > div p:last-child { margin-bottom: 0; }
main details ol, main details ul { margin: 0; padding-left: 1.3em; }
main details li + li { margin-top: 4px; }
#faqMock [lang="ja"] { white-space: nowrap; }
.faq-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* ───────── story: the creator's note with Sandy reading beside it ───────── */
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.story-art img { width: 156px; rotate: -3deg; }
.story-lead { margin: 0 0 12px !important; color: var(--ink); font-size: 1.125rem; font-weight: 500; line-height: 1.75; }
.story-text > p { color: var(--ink-2); font-size: 1rem; line-height: 1.9; }
.story-full { margin-top: 8px; border-top: 1px solid var(--color-line); }
.story-letter p { margin-bottom: 12px; }
.story-signature { margin-top: 16px !important; color: var(--muted); font-size: .9rem; }

/* 学一点，也歇一会儿: Sandy asleep on her own (no books under her; owner, 2026-10-12) with her coffee cup beside her on the
   same ground line, then the care note and the four snacks (visible, as before the redesign) */
.rest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 56px; }
.story-sleep { position: relative; width: 220px; height: 128px; }
.story-sleep .rest-cat { position: absolute; width: 172px; left: 0; bottom: 0; }
.story-sleep .rest-cup { width: 34px; left: 180px; bottom: 2px; }
.rest-kicker { margin-bottom: 4px; }
.care-intro { color: var(--ink-2); }
.treats { display: grid; gap: 6px; margin: 4px 0 0 !important; padding: 0 !important; list-style: none; }
.treats li { display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0 !important; color: var(--ink-2); }
.treats .e { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-key-soft); font-size: 1.05rem; }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; margin: 8px 0 16px !important; padding: 0 !important; list-style: none; text-align: center; }
.cats li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 !important; }
.cats .landing-companion-art { position: relative; display: block; width: 96px; height: 96px; margin-bottom: 6px; filter: url(#sandyStickerOutline); transform-origin: 50% 70%; transition: transform .25s cubic-bezier(.22, .75, .3, 1); }
.cats .landing-companion-art > img:not(.landing-cat-animation), .cats .landing-portrait-stage { position: absolute !important; inset: 0; width: 96px; height: 96px; object-fit: contain; }
.cats .landing-cat-playing .landing-portrait-stage { visibility: hidden; }
.cats .landing-cat-animation { inset: 0; width: 96px !important; height: 96px !important; }
.cats b { color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.4; }
.cats li > span:not(.landing-companion-art) { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.cats em { position: absolute; top: -8px; left: 50%; z-index: 2; transform: translateX(-50%); padding: 0 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .72rem; font-style: normal; line-height: 1.6; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cats li:hover .landing-companion-art { transform: scale(1.15); } }
.care-intro { margin-top: 4px !important; font-size: .95rem; line-height: 1.8; }
/* pick your own cat: the six companions in one row (3 × 2 on phones) between two hairlines, no tint */
#companions .cats { margin: 20px 0 16px !important; padding: 24px 0 !important; border-block: 1px solid var(--color-line); }
.crew-note { color: var(--ink-2) !important; font-size: .95rem; line-height: 1.8; }
.crew-note a { font-weight: 500; text-underline-offset: 3px; }
.suggest-cat a { display: inline-flex; align-items: center; min-height: 44px; }

/* ───────── how: three numbered hairline rows, the AI card, plans ───────── */
.steps { margin-top: 8px; border-top: 1px solid var(--color-line); }
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.step.card { border-radius: 0; background: none; }
.step .no { color: var(--color-accent); font-size: .9rem; font-weight: 600; line-height: 1.6; font-variant-numeric: tabular-nums; }
.step p { margin: 0 0 8px !important; color: var(--ink-2); font-size: .95rem; line-height: 1.8; }
.mini { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--ink-2); font-size: .8rem; }
.chip .count { padding: 0 6px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); }
/* the AI vocab card: a visible banner (owner, 2026-10-12), a paw washi tape across its top edge and the owner's sparkles */
.ai.card { position: relative; margin-top: 40px; padding: 32px 24px 24px; border: 1px solid var(--color-line); border-radius: 22px; background: var(--surface); box-shadow: 0 10px 26px -18px rgb(var(--shadow-rgb) / .35); }
.ai-tape { top: -24px; left: 24px; rotate: -6deg; --tape: var(--color-key); }
.ai-sparkles { width: 46px; right: 18px; top: -18px; }
.ai h3 { padding-right: 48px; font-size: 1.125rem; }
.ai p { margin: 0 !important; color: var(--ink-2); font-size: .95rem; line-height: 1.8; }
.ai .ai-note { margin-top: 12px !important; padding-top: 12px; border-top: 1px dashed var(--color-line-strong); color: var(--muted); font-size: .85rem; }
.ai .btn { margin-top: 18px; }
.tag-free { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--color-key-soft); color: var(--ink-2); font-size: .78rem; font-weight: 500; line-height: 1.6; vertical-align: 2px; }
.routine { margin-top: 40px; }
.routine > p { color: var(--ink-2); font-size: .95rem; }
.routine > p.muted { color: var(--muted); font-size: .9rem; }
.routine details:first-of-type { border-top: 1px solid var(--color-line); }
.countdown { margin: 24px 0 0; color: var(--ink-2); font-size: .95rem; }
.countdown strong { color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
.countdown b { font-weight: 500; }

/* ───────── postcards: the six real share cards, one compact tilted row ───────── */
.postcards { overflow-x: clip; }
.postcards .doodle-leaf { width: 40px; right: 20px; top: 40px; rotate: 14deg; }
.postcards h2 { padding-right: 40px; }
.postcard-strip { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 20px; }
.postcard-strip::-webkit-scrollbar { display: none; }
.postcard-strip:focus-visible { outline-offset: -3px; }
.postcard-list { display: flex; gap: 14px; width: max-content; margin: 0; padding: 8px 20px; list-style: none; }
.postcard { --tilt: -2deg; flex: 0 0 auto; width: 124px; padding: 4px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 14px -8px rgb(var(--shadow-rgb) / .3); scroll-snap-align: start; rotate: var(--tilt); }
.postcard:nth-child(2) { --tilt: 2deg; } .postcard:nth-child(3) { --tilt: -1deg; } .postcard:nth-child(4) { --tilt: 2.5deg; } .postcard:nth-child(5) { --tilt: -1.5deg; } .postcard:nth-child(6) { --tilt: 1.5deg; }
/* a mouse resting on a card straightens it, lifts it above its neighbours and enlarges it (as the old page did, now with a
   gentle scale like the companion cats); it eases back when the mouse leaves. Never on touch, never with reduced motion. */
.postcard { position: relative; transition: rotate .25s cubic-bezier(.22, .75, .3, 1), scale .25s cubic-bezier(.22, .75, .3, 1), translate .25s cubic-bezier(.22, .75, .3, 1), box-shadow .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .postcard:hover { z-index: 2; rotate: 0deg; scale: 1.13; translate: 0 -6px; box-shadow: 0 18px 32px -14px rgb(var(--shadow-rgb) / .45); }
}
.postcard > span { display: block; }
.postcard img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--tint-2); }
.postcards-note { margin: 0 !important; font-size: .95rem; }
.postcards-note a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-underline-offset: 3px; }

/* ───────── FAQ ───────── */
section[aria-labelledby="faqTitle"] .doodle-paw { width: 36px; right: 24px; top: -4px; rotate: -15deg; opacity: .8; }
.faq-cols { border-top: 1px solid var(--color-line); }

/* ───────── the end: the 支持 Sandy cat head, the invitation inside, Sandy peeking over ───────── */
.end { padding-top: 104px; text-align: center; }
.end-head { position: relative; width: 320px; height: 343px; margin: 0 auto; }
.end-peek { z-index: 2; width: 112px; left: 104px; top: 54px; }
.end-in { position: absolute; inset: 0; z-index: 3; display: grid; align-content: start; justify-items: center; gap: 6px; padding: 146px 28px 0; }
.end-in h2 { display: block; max-width: none; margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.35; }
.end-in h2::before { display: none; }
html:not([data-lang="zh"]) .end-in h2 { font-size: 1.25rem; }
.end-in .muted { margin: 0 0 8px !important; color: var(--ink-2); font-size: .85rem; line-height: 1.6; }
.end-in .landing-cta { min-height: 52px; padding: 12px 26px; border-radius: 999px; font-weight: 700; }
html:not([data-lang="zh"]) .end-in .landing-cta { padding-inline: 20px; font-size: .95rem; }
.end > .wrap > .muted { max-width: 30em; margin: 16px auto 0 !important; font-size: .85rem; }
.share { margin: 16px 0 0 !important; }
.share-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--color-link); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; cursor: pointer; }
.share-link:hover { text-decoration-color: currentColor; }
.copied { min-height: 1.7em; margin: 4px 0 0 !important; color: var(--ok); font-size: .9rem; }

/* footer: Ko-fi is a quiet 支持 Sandy link here now. Phones keep the dock (Sandy + her snack) off the links: the text
   stays left and the bottom clears the dock and the home indicator. */
footer { margin-top: 64px; padding: 20px 0 calc(112px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-line); color: var(--muted); font-size: .85rem; line-height: 1.6; }
footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; }
html.about-app footer { padding-bottom: 32px; }
/* returning learners on wide screens: the same companion rail as the 更多 pages (nav.css), so Sandy's dock never sits on text */
@media (min-width: 901px) {
  html.about-app body.has-app-nav:is(.has-sandy-dock, :has(.floating-sandy-toggle)) :is(main, footer) { padding-right: var(--layout-companion-rail); }
}

/* ───────── wider screens ───────── */
@media (min-width: 800px) {
  main section { padding-top: 112px; }
  main h2 { font-size: 1.625rem; }
  .hero { padding: 40px 0 0; }
  .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 48px; align-items: center; }
  .hero-door { --door-w: 184px; --house-w: calc(100% - 90px); order: 2; height: 444px; margin-inline: 0; overflow-x: visible; }
  .door-roof { left: -16px; width: calc(var(--house-w) + 32px); height: 108px; }
  .door-wall { left: 0; width: var(--house-w); }
  .door-roof path { stroke-width: 14px; }
  .door-wall { height: 340px; }
  .door-arch { height: 256px; }
  .hero-sandy { width: 136px; }
  .door-books { width: 70px; }
  .door-sign { width: 208px; }  /* stands partly past the house's right wall (owner, 2026-10-12) */
  .hero-copy { padding: 40px 0 56px; }
  .hero h1 { font-size: 2.625rem; letter-spacing: .04em; }
  .hero .sub { font-size: 1.0625rem; }
  #try > .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 56px; align-items: start; }
  #try .section-kicker, #try h2, #try .section-intro { grid-column: 1; }
  #try #quiz { grid-column: 2; grid-row: 1 / 5; padding: 30px; }
  #try .doodle-star { width: 36px; left: 26px; top: -48px; }
  #inside .doodle-notebook { width: 112px; right: 32px; top: 100px; }
  #inside .section-kicker, #inside h2, #inside .section-intro { padding-right: 140px; }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fit { grid-template-columns: 1fr 1fr; gap: 56px; }
  .story { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; max-width: 900px; }
  .story-art img { width: 210px; }
  .rest { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; max-width: 900px; align-items: start; }
  .story-sleep { width: 220px; height: 140px; margin-top: 24px; }
  .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .step { grid-template-columns: 64px minmax(0, 1fr); }
  .step > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .step > div > h3, .step > div > p { grid-column: 1; }
  .step .mini { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; align-self: start; }
  .ai.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; padding: 36px 36px 30px; }
  .ai.card > :not(.btn):not(.tape):not(.ab-deco) { grid-column: 1; }
  .ai .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .ai-sparkles { width: 56px; right: 28px; top: -24px; }
  .routine { max-width: 760px; }
  .postcard-strip { overflow: visible; }
  .postcard-list { width: auto; justify-content: center; gap: 18px; padding: 24px 32px; }  /* room for a lifted card */
  .postcard { width: 132px; }
  .postcards .doodle-leaf { width: 54px; right: 40px; top: 84px; }
  .faq-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; border-top: 0; }
  .faq-cols details:nth-child(-n+2) { border-top: 1px solid var(--color-line); }
  section[aria-labelledby="faqTitle"] .doodle-paw { width: 44px; right: 40px; top: -8px; }
  .end { padding-top: 136px; }
  .end-head { width: 440px; height: 466px; }
  .end-cathead { width: 440px; height: 376px; clip-path: var(--more-cathead-l); }
  .end-peek { width: 132px; left: 154px; top: 82px; }
  .end-in { padding: 196px 44px 0; gap: 10px; }
  .end-in h2 { font-size: 2rem; }
  html:not([data-lang="zh"]) .end-in h2 { font-size: 1.625rem; }
  .end-in .muted { font-size: .95rem; margin-bottom: 12px !important; }
  footer { padding-bottom: 32px; text-align: center; }
}
@media (max-width: 370px) {
  .hero-door { --door-w: 120px; }
  .door-arch { height: 160px; }
  .hero-sandy { width: 90px; }
  .door-books { width: 48px; }
  .hero h1 { font-size: 1.875rem; }
  .end-head { transform: scale(.94); transform-origin: 50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sandy img, .cats .landing-companion-art, .postcard { transition: none; }
  .postcard:hover { scale: none; translate: none; }
  .hero-sandy.is-petting img { transform: none; }
  .cats li:hover .landing-companion-art { transform: none; }
}