:root {
  --orange-50: #fff2e3;
  --orange-200: #f5bf8c;
  --orange-500: #dd5c18;
  --orange-600: #bf4810;
  --orange-700: #91360d;
  --brown-50: #fbf6ed;
  --brown-100: #f1e3cf;
  --brown-200: #d8bea0;
  --brown-500: #806856;
  --brown-700: #4a392e;
  --brown-850: #2b2119;
  --brown-950: #18120e;
  --sage-100: #dce3d2;
  --sage-700: #425b48;
  --blue-100: #dfe8e8;
  --blue-700: #365761;
  --color-primary: var(--orange-500);
  --color-primary-hover: var(--orange-600);
  --color-primary-active: var(--orange-700);
  --color-text: var(--brown-850);
  --color-muted: #6d5848;
  --color-border: var(--brown-200);
  --surface: var(--brown-50);
  --raised: #fffaf2;
  --paper-glass: rgba(255, 250, 242, .78);
  --paper-glass-soft: rgba(255, 250, 242, .58);
  --scene-paper: rgba(255, 250, 242, .3);
  --header-height: 68px;
  --control-height: 84px;
  --content-width: 1180px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;
  --space-7xl: 80px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --motion-orb-close: 240ms;
  --motion-orb-open: 360ms;
  --ease-orb: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html,
body { height: 100%; }

html { overflow: hidden; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  background: var(--surface);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  caret-color: var(--color-primary-hover);
}

::selection { color: var(--brown-950); background: var(--orange-200); }
a { color: inherit; text-underline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid #336b82; outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 100;
  transform: translateY(-180%);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--raised);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2xl);
  height: var(--header-height);
  padding: var(--space-sm) max(var(--space-2xl), calc((100vw - var(--content-width)) / 2));
  border-bottom: 1px solid rgba(122, 91, 66, .24);
  background: #fff9ee;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--brown-850);
  font-weight: 850;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark { width: 25px; height: 42px; flex: none; }
.brand-wordmark { display: block; width: 48px; height: 41px; flex: none; object-fit: contain; }
.brand-office { margin-left: -2px; font-size: var(--text-sm); font-weight: 800; white-space: nowrap; }
.primary-nav { display: flex; justify-content: center; gap: var(--space-2xl); }
.primary-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}
.primary-nav a:hover { color: var(--color-primary-hover); }
.primary-nav a[aria-current] { color: var(--brown-850); box-shadow: inset 0 -2px 0 var(--orange-600); }
.header-actions { display: flex; gap: var(--space-sm); align-items: center; }
/* English drops the 事務所 suffix: the brand reads VeiMi (wordmark + aria-label). */
html[lang="en"] .brand-office { display: none; }
/* Strangers act on LINE; existing users get one quiet text link into the app, never a button. */
.sign-in-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-xs);
  padding: 0 var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.sign-in-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.line-button { white-space: nowrap; }

.language-toggle,
.page-arrow {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}
.language-toggle:hover,
.page-arrow:hover:not(:disabled) { border-color: var(--color-primary); background: var(--orange-50); }
.language-toggle:active,
.page-arrow:active:not(:disabled) { transform: translateY(1px); background: var(--brown-100); }
.language-toggle:focus { outline: 3px solid #336b82; outline-offset: 3px; }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border: 1px solid var(--color-primary-active);
  border-radius: var(--radius-md);
  color: #fffaf2;
  background: var(--color-primary-hover);
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease-out, background-color .18s ease-out;
}
.button:hover { transform: translateY(-2px); background: var(--color-primary-active); }
.button:active { transform: translateY(0); }
.button-small { min-height: 44px; padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); }

.story-deck {
  display: flex;
  width: 100%;
  height: calc(100dvh - var(--header-height));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.story-deck::-webkit-scrollbar { display: none; }

.story-page {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scrollbar-color: var(--brown-500) transparent;
  overscroll-behavior-y: contain;
}
.story-page[aria-current="page"] { isolation: isolate; }
.story-page::before,
.story-page::after {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  content: "";
}
.hash-anchor { position: absolute; inset: 0 auto auto 0; }

.page-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - var(--space-6xl)), var(--content-width));
  min-height: 100%;
  margin: 0 auto;
  padding: var(--space-6xl) 0 calc(var(--control-height) + var(--space-5xl) + env(safe-area-inset-bottom, 0px));
}

.chapter-marker {
  position: absolute;
  z-index: 5;
  top: var(--space-lg);
  left: max(var(--space-3xl), calc((100vw - var(--content-width)) / 2));
  display: grid;
  grid-template-columns: auto auto auto 76px;
  gap: var(--space-sm);
  align-items: center;
  color: var(--brown-700);
  font-size: var(--text-xs);
  line-height: 1;
}
.chapter-marker-index { color: var(--orange-700); font-weight: 900; font-variant-numeric: tabular-nums; }
.chapter-marker strong { font-size: var(--text-sm); }
.chapter-marker-place { color: #5f4939; font-variant-numeric: tabular-nums; }
.chapter-thread { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.chapter-thread i { height: 3px; background: rgba(74, 57, 46, .2); }
.chapter-thread i.is-current { background: var(--orange-600); }
.feature-page-dark .chapter-marker,
.trust-page .chapter-marker { color: #fff2df; }
.feature-page-dark .chapter-marker-index,
.trust-page .chapter-marker-index { color: #f5bf8c; }
.feature-page-dark .chapter-marker-place,
.trust-page .chapter-marker-place { color: rgba(255, 242, 223, .72); }
.feature-page-dark .chapter-thread i,
.trust-page .chapter-thread i { background: rgba(255, 242, 223, .2); }
.feature-page-dark .chapter-thread i.is-current,
.trust-page .chapter-thread i.is-current { background: #f5bf8c; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.028em; }
:lang(zh) :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
:is(h2, h3) { text-wrap: balance; }
h1 { margin-bottom: var(--space-2xl); font-size: clamp(38px, 5vw, 68px); max-width: 13ch; }
h2 { margin-bottom: var(--space-xl); font-size: clamp(32px, 4.1vw, 56px); max-width: 14ch; }
h3 { font-size: var(--text-xl); }
p { max-width: 68ch; }

.warm-note,
.section-label {
  margin: 0 0 var(--space-lg);
  color: var(--orange-700);
  font-size: var(--text-sm);
  font-weight: 850;
}
.chapter-number {
  margin: 0;
  color: rgba(74, 57, 46, .22);
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}

.welcome-page { background: #fbf0df; }
.welcome-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: center; }
.hero-copy {
  z-index: 2;
  grid-column: 1 / 8;
  grid-row: 1;
  padding: var(--space-4xl) var(--space-7xl) var(--space-4xl) 0;
  background: linear-gradient(90deg, #fbf0df 0 84%, rgba(251, 240, 223, .92) 92%, transparent 100%);
}
.hero-copy h1 { max-width: 9ch; font-size: clamp(54px, 6.4vw, 82px); }
/* English runs longer than the six-character zh headline; two lines keep the hero inside one desktop screen. */
@media (min-width: 901px) {
  html[lang="en"] .hero-copy h1 { max-width: 12ch; font-size: clamp(48px, 5.2vw, 72px); }
}
.hero-lead { max-width: 62ch; color: var(--color-muted); font-size: var(--text-lg); text-wrap: pretty; }
/* Desktop: the hero column overlaps the demo card by design; keep the lead short of the card edge. */
@media (min-width: 901px) { .hero-copy .hero-lead { max-width: 31em; } }
:lang(zh) .hero-loop-line { word-break: keep-all; }
.hero-loop-line { max-width: 54ch; margin: var(--space-2xl) 0 0; padding-left: var(--space-md); border-left: 1px solid var(--orange-600); color: var(--brown-700); font-size: var(--text-sm); font-weight: 850; }
.hero-actions { display: flex; align-items: center; gap: var(--space-2xl); margin-top: var(--space-3xl); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--brown-700); font-weight: 800; }
/* Phones have no room for 登入 in the header, so the quiet sign-in line sits under the hero actions there. */
.hero-sign-in { display: none; margin: var(--space-sm) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.hero-sign-in a { min-height: 44px; display: inline-flex; align-items: center; margin-left: var(--space-xs); color: var(--brown-700); font-weight: 800; }
.demo-note { grid-column: 7 / 13; grid-row: 2; justify-self: end; max-width: none; margin: var(--space-md) var(--space-xs) 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; text-align: right; }
/* The fixed chapter orb sits over the bottom-right corner on desktop; keep the note clear of it (orb 72px + gap). */
@media (min-width: 901px) { .demo-note { margin-right: calc(var(--space-xs) + 76px); } }

.office-vignette {
  position: relative;
  grid-column: 7 / 13;
  grid-row: 1;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #c9a780;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #efd7b2 0 54%, #dfbd8e 100%);
  box-shadow: 0 18px 40px rgba(64, 42, 28, .14);
}
.demo-topline {
  position: absolute;
  top: var(--space-xl);
  left: var(--space-xl);
  right: var(--space-xl);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}
.office-vignette figcaption {
  color: #624a38;
  font-size: var(--text-sm);
  font-weight: 800;
}
.demo-topline > span {
  flex: none;
  padding: 3px 9px;
  border: 1px solid rgba(145, 54, 13, .26);
  border-radius: 999px;
  color: var(--orange-700);
  background: rgba(255, 250, 240, .5);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .08em;
}
.demo-options {
  position: absolute;
  z-index: 7;
  top: 58px;
  left: var(--space-xl);
  display: flex;
  gap: 6px;
}
.demo-options button,
.workflow-tabs button {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid rgba(74, 57, 46, .28);
  border-radius: 999px;
  color: var(--brown-700);
  background: rgba(255, 250, 242, .66);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 850;
  transition: color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out, transform .18s ease-out;
}
.demo-options button:hover,
.workflow-tabs button:hover { transform: translateY(-1px); border-color: var(--orange-500); }
.demo-options button[aria-selected="true"],
.workflow-tabs button[aria-selected="true"] { border-color: var(--orange-700); color: #fffaf2; background: var(--orange-700); }
.work-thread {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.work-thread-line {
  fill: none;
  stroke: rgba(145, 54, 13, .48);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
.work-thread-node {
  fill: #fffaf2;
  stroke: var(--orange-600);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
.window { position: absolute; top: 74px; right: 42px; display: grid; grid-template-columns: 1fr 1fr; width: 132px; height: 118px; gap: 6px; padding: 8px; border: 8px solid #6d4930; background: #b7d2cf; }
.window span { background: #e9e0b8; opacity: .72; }
.request-note,
.result-paper { position: absolute; z-index: 3; display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--radius-sm); background: #fffaf0; box-shadow: 0 8px 20px rgba(52, 31, 18, .16); }
.request-note { top: 126px; left: 32px; width: 210px; transform: rotate(-2deg); transition: transform .3s var(--ease-orb), opacity .2s ease-out; }
.request-note small,
.result-paper small { color: var(--orange-700); font-weight: 850; }
.request-note strong { margin-top: var(--space-sm); line-height: 1.35; }
.result-paper { right: 20px; bottom: 44px; width: 228px; padding: var(--space-md) var(--space-lg) var(--space-sm); transform: rotate(2deg); transition: transform .3s var(--ease-orb), opacity .2s ease-out; }
/* Three labelled lines: what the first draft said, what VeiMi caught (the guardian's orange), what the fix did. */
.demo-line { margin: 0; padding: 6px 0; border-bottom: 1px solid #e5d3bc; font-size: 12.5px; font-weight: 650; line-height: 1.4; }
.demo-line:last-child { border-bottom: 0; }
.demo-line b { display: block; margin-bottom: 1px; color: var(--brown-700); font-size: var(--text-xs); font-weight: 850; letter-spacing: .04em; }
.demo-line-draft span { color: #5f4939; }
.demo-line-caught { margin-inline: calc(-1 * var(--space-sm)); padding-inline: var(--space-sm); border-left: 3px solid var(--orange-500); background: rgba(255, 233, 210, .6); }
.demo-line-caught b { color: var(--orange-700); }
.demo-line-fixed b { color: #2f5d47; }
.desk { position: absolute; left: 0; right: 0; bottom: 0; height: 178px; border-top: 18px solid #67442e; background: #936744; }
.desk::after { content: ""; position: absolute; left: 44px; bottom: 0; width: 18px; height: 118px; background: #503421; box-shadow: 330px 0 0 #503421; }
.lamp { position: absolute; left: 64px; top: -80px; width: 70px; height: 64px; border-left: 8px solid #4d3d31; border-top: 8px solid #4d3d31; }
.lamp::after { content: ""; position: absolute; right: -6px; bottom: -8px; width: 48px; height: 28px; border-radius: 50% 50% 4px 4px; background: #d79a3d; }
.cup { position: absolute; left: 158px; top: -28px; width: 34px; height: 30px; border-radius: 3px 3px 10px 10px; background: #4e746d; }
.guardian { position: absolute; z-index: 4; left: 50%; bottom: 78px; width: 90px; isolation: isolate; transform: translateX(-50%); filter: drop-shadow(0 10px 4px rgba(58, 31, 16, .2)); }
.guardian::before {
  position: absolute;
  z-index: -1;
  inset: 18% 0 4%;
  border: 1px solid rgba(145, 54, 13, .46);
  border-radius: 50%;
  content: "";
  opacity: 0;
}
.guardian svg { display: block; width: 100%; }
.demo-route {
  position: absolute;
  z-index: 6;
  bottom: 15px;
  left: var(--space-xl);
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.demo-route li { padding: 2px 7px; border-radius: 999px; color: #fffaf2; background: rgba(43, 33, 25, .78); font-size: var(--text-xs); font-weight: 850; letter-spacing: .05em; }
.demo-route li:not(:last-child)::after { margin-left: 4px; content: "→"; opacity: .8; }
.office-vignette.is-changing .request-note { opacity: .55; transform: translateY(-5px) rotate(-2deg); }
.office-vignette.is-changing .result-paper { opacity: .55; transform: translateY(5px) rotate(2deg); }
.office-vignette.is-changing .guardian { animation: guardian-hop .38s var(--ease-orb); }
.office-vignette.is-awakening .request-note { animation: request-arrive .58s .12s both var(--ease-orb); }
.office-vignette.is-awakening .window span { animation: window-awake .8s .28s both ease-out; }
.office-vignette.is-awakening .work-thread-line { animation: work-thread-draw 1.35s .34s both var(--ease-orb); }
.office-vignette.is-awakening .work-thread-node-request { animation: work-node-arrive .32s .28s both var(--ease-orb); }
.office-vignette.is-awakening .work-thread-node-guardian { animation: work-node-arrive .32s .88s both var(--ease-orb); }
.office-vignette.is-awakening .work-thread-node-result { animation: work-node-arrive .32s 1.42s both var(--ease-orb); }
.office-vignette.is-awakening .guardian { animation: guardian-receive .68s .78s both var(--ease-orb); }
.office-vignette.is-awakening .guardian::before { animation: guardian-ring .84s .94s both ease-out; }
.office-vignette.is-awakening .result-paper { animation: result-unfold .72s 1.22s both var(--ease-orb); }
.welcome-page.is-awakening-page .hero-loop-line { animation: loop-line-arrive .64s .5s both var(--ease-orb); }
.welcome-page.is-awakening-page .page-pet-visitor-primary { animation: welcome-pet-arrive .8s .86s both var(--ease-orb); }
.welcome-page.is-awakening-page .page-pet-visitor-secondary { animation: welcome-pet-arrive-secondary .8s 1.1s both var(--ease-orb); }
@keyframes guardian-hop { 50% { transform: translateX(-50%) translateY(-8px) scale(1.04); } }
@keyframes request-arrive {
  from { opacity: .45; transform: translate(-32px, -18px) rotate(-6deg); }
  to { opacity: 1; transform: rotate(-2deg); }
}
@keyframes window-awake {
  from { background: #b7d2cf; opacity: .46; }
  to { background: #e9e0b8; opacity: .72; }
}
@keyframes work-thread-draw {
  from { stroke-dashoffset: 1; opacity: .35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes work-node-arrive {
  from { opacity: .35; transform: scale(.56); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes guardian-receive {
  0% { transform: translateX(-50%); }
  48% { transform: translateX(-50%) translateY(-12px) rotate(-3deg) scale(1.04); }
  100% { transform: translateX(-50%); }
}
@keyframes guardian-ring {
  0% { opacity: 0; transform: scale(.56); }
  42% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes result-unfold {
  from { opacity: .45; transform: translate(28px, 22px) rotate(8deg) scale(.9); }
  to { opacity: 1; transform: rotate(2deg) scale(1); }
}
@keyframes loop-line-arrive {
  from { opacity: .55; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes welcome-pet-arrive {
  from { opacity: .42; transform: translate(18px, -18px) rotate(8deg) scale(.78); }
  to { opacity: 1; transform: rotate(3deg) scale(1); }
}
@keyframes welcome-pet-arrive-secondary {
  from { opacity: .3; transform: translate(-18px, 18px) scaleX(-1) rotate(-10deg) scale(.78); }
  to { opacity: .76; transform: scaleX(-1) rotate(-4deg) scale(1); }
}

.flow-page { background: #efdcbf; }
.chapter-heading { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4xl); align-items: start; margin-bottom: var(--space-5xl); }
.chapter-heading > div > p:last-child { color: var(--color-muted); font-size: var(--text-lg); }
.flow-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 0; border: 1px solid #b89975; background: #b89975; list-style: none; }
.flow-step { min-height: 260px; padding: var(--space-3xl); background: var(--paper-glass); }
.flow-step:nth-child(even) { background: rgba(246, 233, 214, .74); }
.flow-step > span { display: block; margin-bottom: var(--space-5xl); color: var(--orange-600); font-size: var(--text-xl); font-weight: 900; }
.flow-step h3 { margin-bottom: var(--space-md); }
.flow-step p { margin: 0; color: var(--color-muted); }

.feature-page { background: #f8ead6; }
.feature-spread { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--space-7xl); align-items: center; }
.feature-spread.has-product-proof { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(230px, .68fr); gap: var(--space-3xl); }
.feature-header .chapter-number { margin-bottom: var(--space-5xl); }
.feature-header > p:last-child { color: var(--color-muted); font-size: var(--text-lg); }
.feature-ledger { border-top: 1px solid rgba(74, 57, 46, .4); }
.feature-ledger p { position: relative; margin: 0; padding: var(--space-xl) var(--space-md) var(--space-xl) var(--space-5xl); border-bottom: 1px solid rgba(74, 57, 46, .28); background: rgba(255, 250, 242, .24); font-weight: 620; }
/* A small filled diamond (as on the pet page), not a hollow circle that reads as an unchecked to-do box. */
.feature-ledger p::before { content: "◆"; position: absolute; left: var(--space-lg); top: 27px; color: var(--orange-700); font-size: 10px; line-height: 1; }
.results-page .feature-ledger p::before { color: var(--sage-700); }
.access-page .feature-ledger p::before { color: var(--blue-700); }
.review-page .feature-ledger p::before { color: #f3a06d; }
.review-page { color: #fff6e8; background: #3c2c23; }
.review-page .section-label { color: #f3a06d; }
.review-page .chapter-number { color: rgba(255, 246, 232, .13); }
.review-page .feature-header > p:last-child { color: #e7d1ba; }
.review-page .feature-ledger { border-color: rgba(255, 246, 232, .34); }
.review-page .feature-ledger p { border-color: rgba(255, 246, 232, .22); background: rgba(255, 246, 232, .04); }
.product-proof { align-self: center; margin: 0; overflow: hidden; border: 1px solid rgba(74, 57, 46, .3); border-radius: var(--radius-lg); background: rgba(255, 250, 242, .92); box-shadow: 0 18px 34px rgba(43, 33, 25, .13); transform: rotate(.6deg); }
.product-proof img { display: block; width: 100%; height: auto; object-fit: contain; image-rendering: auto; }
.product-proof figcaption { padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid rgba(74, 57, 46, .22); }
.product-proof figcaption strong,
.product-proof figcaption span { display: block; }
.product-proof figcaption strong { color: var(--orange-700); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.product-proof figcaption span { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 720; line-height: 1.4; }
.product-proof-result { transform: rotate(-.6deg); }
.proof-zoom { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; color: inherit; background: none; cursor: zoom-in; font: inherit; text-align: inherit; }
.proof-zoom-hint { position: absolute; right: var(--space-sm); bottom: var(--space-sm); display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; color: #fffaf2; background: rgba(43, 33, 25, .82); box-shadow: 0 4px 10px rgba(43, 33, 25, .18); font-size: var(--text-xs); font-weight: 850; line-height: 1.3; pointer-events: none; transition: background-color .18s ease-out; }
.proof-zoom-hint::before { content: "⤢"; font-size: var(--text-sm); line-height: 1; }
.proof-zoom:hover .proof-zoom-hint,
.proof-zoom:focus-visible .proof-zoom-hint { background: var(--orange-700); }
.proof-zoom:focus-visible { outline: 3px solid #336b82; outline-offset: -3px; }
.proof-viewer { --viewer-gap: 12px; box-sizing: border-box; max-width: calc(100vw - 2 * var(--viewer-gap)); max-height: calc(100dvh - 2 * var(--viewer-gap)); padding: var(--space-md) var(--space-lg) var(--space-lg); overflow: hidden; border: 0; border-radius: var(--radius-lg); color: var(--color-text); background: var(--raised); box-shadow: 0 24px 60px rgba(24, 18, 14, .42); }
.proof-viewer[open] { display: flex; flex-direction: column; }
.proof-viewer::backdrop { background: rgba(24, 18, 14, .74); }
.proof-viewer-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-md); }
.proof-viewer-bar strong { color: var(--orange-700); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.proof-viewer-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: transparent; cursor: pointer; font-weight: 800; }
.proof-viewer-close span[aria-hidden] { font-size: var(--text-xl); line-height: 1; }
.proof-viewer-close:hover { border-color: var(--color-primary); background: var(--orange-50); }
.proof-viewer-close:focus-visible { outline: 3px solid #336b82; outline-offset: 3px; }
/* The enlarged capture pans here, in both directions as needed; the bar above stays in place. */
.proof-viewer-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.proof-viewer-image { display: block; max-width: none; height: auto; margin: 0 auto; border: 1px solid rgba(74, 57, 46, .22); border-radius: var(--radius-md); background: #fffaf2; image-rendering: auto; }
.proof-viewer-caption { max-width: 60ch; margin: var(--space-md) 0 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 720; }
@media (max-width: 600px), (max-height: 500px) {
  .proof-viewer { --viewer-gap: 6px; padding: 6px 8px 8px; border-radius: var(--radius-md); }
  .proof-viewer-bar { margin-bottom: 6px; }
  .proof-viewer-caption { margin-top: 6px; font-size: var(--text-xs); }
}
.review-page .product-proof { border-color: rgba(255, 246, 232, .28); background: rgba(255, 250, 242, .94); box-shadow: 0 18px 34px rgba(0, 0, 0, .24); }
.workflow-showcase { min-width: 0; align-self: center; }
.workflow-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: var(--space-md); }
.workflow-tabs button { min-width: 0; padding-inline: 8px; border-radius: var(--radius-md); }
.workflow-showcase .product-proof { width: 100%; transform: none; transition: opacity .16s ease-out, transform .28s var(--ease-orb); }
.workflow-showcase .product-proof img { height: 330px; padding: var(--space-sm); object-fit: contain; background: rgba(255, 250, 242, .8); }
.workflow-showcase .product-proof figcaption span { min-height: 2.8em; }
.workflow-showcase.is-changing .product-proof { opacity: .36; transform: translateY(6px) scale(.985); }
.workflow-takeaway { min-height: 3em; margin: var(--space-md) var(--space-sm) 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: 720; line-height: 1.5; }
.results-page { background: var(--sage-100); }
.results-page .section-label { color: var(--sage-700); }
.pet-page { background: #f3c08f; }
.pet-page .section-label { color: #743112; }
.pet-page .pet-growth-copy > p:not(.section-label, .chapter-number) { color: #6a3e29; }
.game-loop-page { background: #e7d8bd; }
.game-loop-layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: var(--space-6xl);
  align-content: center;
}
.game-loop-copy h2 { max-width: 15ch; font-size: clamp(30px, 3.2vw, 40px); }
#game-loop .page-pet-visitor-secondary { display: none; }
.game-loop-copy .chapter-number,
.pet-growth-copy .chapter-number,
.pet-dex-copy .chapter-number { margin-bottom: var(--space-4xl); }
.game-loop-copy > p:last-child,
.pet-growth-copy > p:not(.section-label, .chapter-number) { color: var(--color-muted); font-size: var(--text-lg); }
.game-loop-board {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(300px, 1.22fr);
  min-height: 500px;
  overflow: hidden;
  border: 1px solid #ad8d69;
  border-radius: var(--radius-lg);
  background: rgba(255, 250, 242, .48);
  box-shadow: 0 16px 32px rgba(78, 51, 30, .1);
}
.game-loop-track {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border-right: 1px solid #ad8d69;
  list-style: none;
}
.game-loop-track li { min-height: 0; border-bottom: 1px solid rgba(173, 141, 105, .72); }
.game-loop-track li:last-child { border-bottom: 0; }
.game-loop-track button {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 112px;
  display: block;
  padding: var(--space-lg) var(--space-4xl) var(--space-lg) var(--space-xl);
  border: 0;
  color: var(--brown-850);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color .18s ease-out, background-color .18s ease-out;
}
.game-loop-track button::after {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
  opacity: .42;
}
.game-loop-track button:hover { background: rgba(255, 250, 242, .46); }
.game-loop-track button[aria-pressed="true"] { color: #fffaf2; background: var(--brown-850); }
.game-loop-track button[aria-pressed="true"]::after { border-color: var(--orange-200); background: var(--orange-200); opacity: 1; }
.game-loop-track span { display: block; margin-bottom: var(--space-xs); color: var(--orange-700); font-size: var(--text-xs); font-weight: 900; }
.game-loop-track button[aria-pressed="true"] span { color: var(--orange-200); }
.game-loop-track strong { display: block; font-size: var(--text-base); }
.game-loop-track small { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.4; }
.game-loop-track button[aria-pressed="true"] small { color: #e6d5c5; }
.game-loop-outcome { position: relative; display: grid; grid-template-rows: 1fr auto; margin: 0; padding: var(--space-2xl); overflow: hidden; }
.game-example-label { position: absolute; z-index: 2; top: var(--space-lg); right: var(--space-lg); color: var(--orange-700); font-size: var(--text-xs); font-weight: 850; }
.game-pet-stage { position: relative; min-height: 260px; display: grid; place-items: center; }
.game-pet-stage img { position: relative; z-index: 1; width: 210px; max-width: 82%; height: 230px; object-fit: contain; filter: drop-shadow(0 14px 9px rgba(43, 33, 25, .18)); transition: transform .42s var(--ease-orb), filter .3s ease-out; }
.game-pet-stage-label { position: absolute; z-index: 2; bottom: 0; left: 50%; padding: 2px 10px; border: 1px solid rgba(145, 54, 13, .3); border-radius: 999px; color: var(--orange-700); background: rgba(255, 250, 242, .86); font-size: var(--text-xs); font-weight: 850; transform: translateX(-50%); white-space: nowrap; }
.game-pet-shadow { position: absolute; bottom: 20px; width: 164px; height: 22px; border-radius: 50%; background: rgba(71, 48, 31, .16); filter: blur(3px); transition: transform .42s var(--ease-orb), opacity .3s ease-out; }
.game-loop-outcome figcaption { position: relative; z-index: 2; padding-top: var(--space-lg); border-top: 1px solid rgba(116, 77, 49, .32); }
.game-loop-outcome figcaption > small,
.game-loop-outcome figcaption > strong,
.game-loop-outcome figcaption > em { display: block; }
.game-loop-outcome figcaption > small { color: var(--orange-700); font-size: var(--text-xs); font-weight: 900; }
.game-loop-outcome figcaption > strong { margin-top: var(--space-xs); font-size: var(--text-xl); line-height: 1.3; }
.game-loop-outcome figcaption > p { min-height: 3em; margin: var(--space-sm) 0 var(--space-md); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.game-loop-outcome figcaption > em { margin-top: var(--space-sm); color: #5f4939; font-size: var(--text-xs); font-style: normal; font-weight: 760; }
.game-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(74, 57, 46, .14); }
.game-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--orange-600); transform: scaleX(.25); transform-origin: left center; transition: transform .48s var(--ease-orb); }
.game-loop-board[data-active-step="review"] .game-progress span { transform: scaleX(.5); }
.game-loop-board[data-active-step="growth"] .game-progress span { transform: scaleX(.75); }
.game-loop-board[data-active-step="office"] .game-progress span { transform: scaleX(1); }
.game-loop-board[data-active-step="review"] .game-pet-stage img { transform: translateY(-4px) rotate(-2deg); }
.game-loop-board[data-active-step="growth"] .game-pet-stage img { transform: translateY(-10px) scale(1.06); filter: drop-shadow(0 18px 11px rgba(145, 54, 13, .24)); }
.game-loop-board[data-active-step="office"] .game-pet-stage img { transform: translateY(-5px) rotate(2deg); }
.game-loop-board[data-active-step="growth"] .game-pet-shadow { transform: scaleX(.88); opacity: .72; }
.game-side-note { margin-top: var(--space-4xl); padding-top: var(--space-xl); border-top: 1px solid #ad8d69; }
.game-side-note strong { color: var(--orange-700); }
.game-side-note p { margin: 0; color: #5f4939; }
.game-side-note p + p { margin-top: var(--space-sm); font-size: var(--text-sm); }

.pet-growth-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(260px, 1fr) minmax(0, .82fr);
  gap: var(--space-5xl);
  align-items: center;
}
.pet-growth-copy h2 { font-size: clamp(32px, 3.4vw, 50px); }
.pet-dex-link { margin-top: var(--space-sm); }
.growth-path { position: relative; margin: 0; padding: 0; list-style: none; }
.growth-path::before { position: absolute; top: 28px; bottom: 28px; left: 23px; width: 2px; background: rgba(116, 49, 18, .34); content: ""; }
.growth-path li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-lg); min-height: 92px; padding-bottom: var(--space-md); }
/* When each stage arrives, from PET_TIERS in the app (the features test reads the numbers from index.html). */
.growth-at { display: block; margin-bottom: 2px; color: #743112; font-size: var(--text-xs); font-weight: 850; letter-spacing: .02em; }
.growth-stage-dot { z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid #743112; border-radius: 50%; color: #fff8ed; background: #a44013; font-weight: 900; }
.growth-path strong { display: block; margin-bottom: var(--space-xs); font-size: var(--text-lg); }
.growth-path p { margin: 0; color: #6a3e29; }
.growth-details { border-top: 1px solid rgba(74, 57, 46, .38); }
.growth-details p { position: relative; margin: 0; padding: var(--space-lg) 0 var(--space-lg) var(--space-3xl); border-bottom: 1px solid rgba(74, 57, 46, .26); }
.growth-details p::before { position: absolute; top: 23px; left: 0; color: #743112; content: "◆"; font-size: 10px; }

.pet-dex-page { background: #e5e1cc; }
.pet-dex-layout { display: grid; grid-template-columns: minmax(240px, .6fr) minmax(0, 1.4fr); gap: var(--space-5xl); align-items: center; }
.pet-dex-copy > p:last-child { color: var(--color-muted); font-size: var(--text-lg); }
/* The compendium is one growth ladder: six shelves, one per stage, four pets each. Column 1 is the same fire line
   the game loop shows growing; the shelves get taller pets as the stages rise. */
.dex-ladder { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dex-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: 6px var(--space-lg) 2px; border: 1px solid rgba(66, 91, 72, .24); border-bottom: 3px solid rgba(66, 91, 72, .3); border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); background: var(--paper-glass-soft); }
.dex-row-label { margin: 0; }
.dex-row-label strong,
.dex-row-label span { display: block; }
.dex-row-label strong { color: #334b3b; font-size: var(--text-base); line-height: 1.3; }
.dex-row-label span { margin-top: 2px; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.35; }
.dex-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.dex-cells li { display: grid; justify-items: center; align-content: end; gap: 1px; min-width: 0; }
.dex-cells img { display: block; width: 100%; max-width: 92px; height: 76px; object-fit: contain; object-position: center bottom; image-rendering: auto; filter: drop-shadow(0 6px 4px rgba(43, 33, 25, .16)); }
.dex-row[data-stage="baby"] .dex-cells img { height: 56px; }
.dex-row[data-stage="child"] .dex-cells img { height: 66px; }
.dex-cells span { color: #4b5d4f; font-size: var(--text-xs); font-weight: 800; line-height: 1.3; }

.page-pet-decor { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.page-pet-visitor { position: absolute; display: block; width: 92px; height: 92px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 8px 5px rgba(43, 33, 25, .15)); }
.page-pet-visitor-primary { top: 12px; right: max(14px, calc((100vw - var(--content-width)) / 2 - 88px)); width: 72px; height: 72px; transform: rotate(3deg); }
.page-pet-visitor-secondary { bottom: calc(var(--control-height) + 10px); left: max(14px, calc((100vw - var(--content-width)) / 2 - 92px)); width: 76px; height: 76px; opacity: .76; transform: scaleX(-1) rotate(-4deg); }

@media (min-width: 901px) {
  #faq .page-pet-visitor-primary { right: auto; left: 14px; }
}
@media (min-width: 901px) and (max-width: 1439px) {
  .page-pet-visitor-secondary { display: none; }
}
/* On narrower or shorter desktops the ledgers (longer in English) reach these scene objects, so leave them out. */
@media (min-width: 901px) and (max-width: 1439px), (min-width: 901px) and (max-height: 819px) {
  .family-page::before,
  .family-page::after,
  .access-page::before { display: none; }
}
@media (min-width: 901px) and (max-width: 1359px) {
  .page-pet-visitor-primary,
  #faq .page-pet-visitor-primary { top: 4px; right: 10px; left: auto; width: 52px; height: 52px; }
}
.family-page { background: #f4e4d7; }
.family-page .feature-spread { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.access-page { color: #183139; background: var(--blue-100); }
.access-page .section-label { color: var(--blue-700); }

.trust-page { color: #fff6e8; background: var(--brown-850); }
.trust-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-7xl); align-items: center; }
.trust-copy .chapter-number { margin-bottom: var(--space-5xl); color: rgba(255, 246, 232, .11); }
.trust-copy .section-label { color: #f3a06d; }
.trust-copy > p:last-child { color: #dcc8b4; font-size: var(--text-lg); }
.trust-ledger { border-top: 1px solid rgba(255, 246, 232, .28); }
.trust-ledger > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-2xl); padding: var(--space-xl) 0; border-bottom: 1px solid rgba(255, 246, 232, .22); }
.trust-ledger strong { color: #f5b076; }
.trust-ledger p { margin: 0; color: #f4e5d5; }

.audiences-page { background: #f8efe0; }
.audiences-layout { display: flex; flex-direction: column; justify-content: center; }
.audience-list { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: var(--space-2xl); }
.audience-list article { min-height: 230px; padding: var(--space-3xl); border: 1px solid #cbb08f; border-radius: var(--radius-lg); background: var(--paper-glass-soft); }
.audience-list article:nth-child(2) { transform: translateY(var(--space-2xl)); }
.audience-list article > span { display: inline-grid; width: 44px; height: 44px; place-items: center; margin-bottom: var(--space-3xl); border-radius: 50%; color: #fff8ec; background: var(--orange-600); font-weight: 900; }
.audience-list p { color: var(--color-muted); }

.faq-page { background: #ead7bb; }
.faq-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--space-3xl) var(--space-6xl); align-items: start; }
.faq-intro { grid-column: 1; grid-row: 1; }
.faq-list { grid-column: 2; grid-row: 1; }
.faq-intro .chapter-number { margin-bottom: var(--space-3xl); }
.faq-intro > p:not(.chapter-number, .section-label) { color: var(--color-muted); }
.faq-list { border-top: 1px solid #a98560; }
.faq-list details { border-bottom: 1px solid #a98560; background: rgba(255, 250, 242, .18); }
.faq-list summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-md) 0; cursor: pointer; font-weight: 850; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--orange-700); font-size: var(--text-xl); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0; padding: 0 var(--space-4xl) var(--space-xl) 0; color: #5f4939; }
/* The way to buy: an index card clipped into the ruled notebook, its orange edge echoing the notebook's margin line. */
.closing {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: var(--space-2xl) var(--space-4xl);
  align-items: center;
  padding: var(--space-xl) var(--space-3xl);
  border: 1px solid #c9a780;
  border-left: 4px solid var(--orange-600);
  border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm);
  background: #fffaf2;
  box-shadow: 0 10px 24px rgba(52, 31, 18, .1);
}
.closing-intro { margin: 0 0 var(--space-xs); color: var(--orange-700); font-size: var(--text-sm); font-weight: 800; }
.closing h3 { margin: 0 0 var(--space-sm); font-size: var(--text-xl); max-width: none; }
.nowrap { white-space: nowrap; }
.closing-body { margin: 0; color: var(--color-muted); }
.closing-actions .button { min-width: 168px; }
.reply-time { margin: var(--space-sm) 0 0; color: var(--brown-700); font-size: var(--text-sm); font-weight: 750; }
.closing-email { margin: var(--space-xs) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.closing-email a { color: var(--brown-700); font-weight: 750; overflow-wrap: anywhere; }
.line-qr { display: grid; justify-items: center; gap: var(--space-xs); margin: 0; }
.line-qr svg { display: block; width: 112px; height: 112px; border: 1px solid rgba(74, 57, 46, .18); border-radius: var(--radius-sm); }
.line-qr figcaption { color: var(--color-muted); font-size: var(--text-xs); font-weight: 750; }
.button-light { color: #fffaf2; }
.site-footer { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2xl); padding-top: var(--space-xs); border-top: 1px solid #a98560; color: #5f4939; font-size: var(--text-sm); }
.site-footer > * { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a { color: var(--brown-700); font-weight: 750; }
.footer-brand { color: var(--brown-850); font-weight: 850; }

/* Each chapter is staged as a different room or work surface, not a color swatch. */
.welcome-page {
  background-color: #fbf0df;
  background-image:
    linear-gradient(90deg, transparent 0 72%, rgba(112, 78, 55, .08) 72% 72.25%, transparent 72.25% 88%, rgba(112, 78, 55, .06) 88% 88.2%, transparent 88.2%),
    linear-gradient(180deg, rgba(255, 253, 247, .22) 0 68%, rgba(133, 92, 61, .09) 68% 100%);
}
.welcome-page::before {
  top: 12%;
  left: 4%;
  width: 72px;
  height: 112px;
  border: 8px solid rgba(92, 62, 42, .14);
  background: rgba(227, 210, 164, .22);
  box-shadow: inset 0 0 0 2px rgba(255, 250, 242, .36);
}
.welcome-page::after {
  right: 3%;
  bottom: 15%;
  width: 210px;
  height: 2px;
  background: rgba(93, 61, 41, .16);
  box-shadow: 0 12px 0 rgba(93, 61, 41, .08), 0 24px 0 rgba(93, 61, 41, .05);
}

.flow-page {
  background-color: #efdcbf;
  background-image:
    radial-gradient(circle at 8% 76%, rgba(191, 72, 16, .22) 0 7px, transparent 8px),
    radial-gradient(circle at 36% 64%, rgba(191, 72, 16, .18) 0 7px, transparent 8px),
    radial-gradient(circle at 69% 78%, rgba(66, 91, 72, .2) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 58%, rgba(66, 91, 72, .2) 0 7px, transparent 8px),
    linear-gradient(180deg, rgba(255, 250, 242, .18), rgba(167, 119, 77, .08));
}
.flow-page::before {
  top: 62%;
  left: 7%;
  width: 88%;
  height: 20%;
  border-top: 2px dashed rgba(116, 76, 48, .22);
  border-bottom: 2px dashed rgba(116, 76, 48, .12);
  transform: rotate(-5deg);
}
.flow-page::after {
  top: 10%;
  right: 5%;
  width: 152px;
  height: 112px;
  border: 1px solid rgba(116, 76, 48, .18);
  background: var(--scene-paper);
  transform: rotate(4deg);
  box-shadow: 12px 14px 0 rgba(140, 96, 62, .07);
}

#feature-work {
  background-color: #f8ead6;
  background-image:
    linear-gradient(rgba(111, 78, 55, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 78, 55, .07) 1px, transparent 1px),
    linear-gradient(155deg, rgba(255, 252, 244, .34), rgba(213, 178, 136, .1));
  background-size: 40px 40px, 40px 40px, 100% 100%;
}
/* The work page has no ::before card: at every desktop size it sat under the screenshot takeaway line. */
#feature-work::after {
  top: 13%;
  left: 4%;
  width: 170px;
  height: 22px;
  border-block: 1px solid rgba(111, 78, 55, .2);
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(111, 78, 55, .2) 15px 16px);
  transform: rotate(3deg);
}

.review-page {
  background-color: #3c2c23;
  background-image:
    radial-gradient(ellipse at 78% 38%, rgba(255, 233, 202, .15) 0 10%, rgba(255, 233, 202, .06) 34%, transparent 58%),
    linear-gradient(90deg, rgba(255, 246, 232, .025), rgba(24, 18, 14, .12));
}
.review-page::before {
  top: 14%;
  right: 7%;
  width: 250px;
  height: 250px;
  border: 2px solid rgba(255, 231, 203, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(255, 231, 203, .025);
}
.review-page::after {
  right: 4%;
  bottom: 13%;
  width: 154px;
  height: 2px;
  background: rgba(255, 231, 203, .16);
  transform: rotate(44deg);
  transform-origin: right center;
}

.results-page {
  background-color: var(--sage-100);
  background-image:
    linear-gradient(90deg, transparent 0 18%, rgba(50, 75, 58, .08) 18% 18.2%, transparent 18.2% 46%, rgba(50, 75, 58, .08) 46% 46.2%, transparent 46.2% 74%, rgba(50, 75, 58, .08) 74% 74.2%, transparent 74.2%),
    linear-gradient(180deg, rgba(255, 252, 241, .26) 0 73%, rgba(77, 99, 75, .1) 73% 100%);
}
.results-page::before {
  top: 10%;
  right: 3%;
  width: 246px;
  height: 286px;
  border: 1px solid rgba(50, 75, 58, .17);
  background:
    linear-gradient(180deg, rgba(255, 250, 238, .32) 0 31%, transparent 31% 34%, rgba(255, 250, 238, .25) 34% 65%, transparent 65% 68%, rgba(255, 250, 238, .2) 68%);
  box-shadow: inset 82px 0 0 rgba(50, 75, 58, .035), inset -82px 0 0 rgba(50, 75, 58, .035);
}
.results-page::after {
  right: 1%;
  bottom: 12%;
  width: 300px;
  height: 12px;
  border-block: 2px solid rgba(50, 75, 58, .13);
}

.game-loop-page {
  background-color: #e7d8bd;
  background-image:
    conic-gradient(from 90deg at 1px 1px, rgba(128, 89, 56, .09) 25%, transparent 0 50%, rgba(66, 91, 72, .08) 0 75%, transparent 0),
    linear-gradient(180deg, rgba(255, 251, 241, .25), rgba(123, 85, 56, .07));
  background-size: 64px 64px, 100% 100%;
}
.game-loop-page::before {
  top: 9%;
  right: 4%;
  width: 220px;
  height: 220px;
  border: 12px solid rgba(137, 94, 59, .08);
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px rgba(255, 250, 242, .12);
}
.game-loop-page::after {
  right: 11%;
  bottom: 15%;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 45% 45%;
  background: rgba(191, 72, 16, .18);
  box-shadow: -74px -54px 0 rgba(66, 91, 72, .16), 54px -92px 0 rgba(128, 89, 56, .14);
}

.pet-page {
  background-color: #f3c08f;
  background-image:
    radial-gradient(circle at 84% 70%, transparent 0 94px, rgba(116, 49, 18, .11) 95px 98px, transparent 99px 136px, rgba(116, 49, 18, .07) 137px 140px, transparent 141px),
    linear-gradient(180deg, rgba(255, 244, 224, .22), rgba(171, 76, 35, .06));
}
.pet-page::before {
  right: 7%;
  bottom: 7%;
  width: 250px;
  height: 330px;
  border: 2px solid rgba(116, 49, 18, .13);
  border-bottom-width: 12px;
  border-radius: 130px 130px 20px 20px;
  background: rgba(255, 246, 231, .08);
}
.pet-page::after {
  right: 15%;
  bottom: 6%;
  width: 100px;
  height: 170px;
  border-left: 3px solid rgba(66, 91, 72, .15);
  border-radius: 50%;
  transform: rotate(-22deg);
  box-shadow: -35px -25px 0 -32px rgba(66, 91, 72, .22), 28px -68px 0 -24px rgba(66, 91, 72, .18);
}
/* The arch, flame and rings sit under the growth detail list on every desktop narrower than 2048 px or shorter
   than 1080 px (measured in English and Chinese, 1024x768 to 1920x1200), so show them only on screens larger than that. */
@media (min-width: 901px) and (max-width: 2047px), (min-width: 901px) and (max-height: 1079px) {
  .pet-page::before,
  .pet-page::after { display: none; }
  .pet-page { background-image: linear-gradient(180deg, rgba(255, 244, 224, .22), rgba(171, 76, 35, .06)); }
}

.pet-dex-page {
  background-color: #e5e1cc;
  background-image:
    linear-gradient(rgba(51, 75, 59, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 75, 59, .08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 252, 239, .22), rgba(78, 97, 73, .06));
  background-size: 100% 168px, 248px 100%, 100% 100%;
}
/* No cabinet frame or tab bars here: the shelves of the ladder are the cabinet, and the bars read as broken tabs. */

.family-page {
  background-color: #f4e4d7;
  background-image:
    radial-gradient(circle, rgba(125, 80, 51, .1) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 252, 245, .25) 0 76%, rgba(126, 82, 52, .07) 76% 100%);
  background-size: 22px 22px, 100% 100%;
}
.family-page::before {
  right: 4%;
  bottom: 6%;
  width: 220px;
  height: 150px;
  border: 10px solid rgba(114, 72, 45, .09);
  background: rgba(178, 124, 80, .08);
}
.family-page::after {
  right: 7%;
  bottom: 11%;
  width: 150px;
  height: 80px;
  border-top: 2px solid rgba(191, 72, 16, .14);
  border-right: 2px solid rgba(66, 91, 72, .13);
  transform: skew(-18deg) rotate(5deg);
}

.access-page {
  background-color: var(--blue-100);
  background-image:
    linear-gradient(rgba(54, 87, 97, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 87, 97, .07) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 250, .27), rgba(54, 87, 97, .05));
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
.access-page::before {
  right: 5%;
  bottom: 12%;
  width: 280px;
  height: 170px;
  border: 3px solid rgba(54, 87, 97, .12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 250, .1);
  box-shadow: 34px 28px 0 -20px rgba(54, 87, 97, .14);
}
.access-page::after {
  top: 4%;
  right: 12%;
  width: 160px;
  height: 90px;
  border-top: 2px solid rgba(54, 87, 97, .14);
  border-right: 2px solid rgba(54, 87, 97, .14);
  box-shadow: 28px -28px 0 -26px #365761, 56px 40px 0 -26px #bf4810;
}

.trust-page {
  background-color: var(--brown-850);
  background-image:
    radial-gradient(circle at 82% 54%, transparent 0 112px, rgba(255, 239, 218, .09) 113px 115px, transparent 116px 152px, rgba(255, 239, 218, .05) 153px 155px, transparent 156px),
    linear-gradient(90deg, rgba(255, 246, 232, .025), rgba(0, 0, 0, .1));
}
.trust-page::before {
  top: 50%;
  right: calc(18% - 82px);
  width: 164px;
  height: 164px;
  border: 2px solid rgba(255, 239, 218, .09);
  border-radius: 50%;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: inset 0 0 0 20px rgba(255, 239, 218, .018);
}
.trust-page::after {
  right: 4%;
  bottom: 11%;
  width: 280px;
  height: 1px;
  background: rgba(255, 239, 218, .1);
  box-shadow: 0 20px 0 rgba(255, 239, 218, .08), 0 40px 0 rgba(255, 239, 218, .06);
}

.audiences-page {
  background-color: #f8efe0;
  background-image:
    linear-gradient(90deg, rgba(232, 205, 175, .24) 0 33%, rgba(255, 250, 240, .12) 33% 66%, rgba(207, 219, 207, .2) 66% 100%),
    linear-gradient(180deg, transparent 0 74%, rgba(126, 82, 52, .07) 74% 100%);
}
.audiences-page::before {
  top: 7%;
  left: 33%;
  width: 1px;
  height: 84%;
  background: rgba(104, 72, 50, .1);
  box-shadow: calc(33vw) 0 0 rgba(104, 72, 50, .1);
}
.audiences-page::after {
  top: 12%;
  left: 8%;
  width: 74px;
  height: 92px;
  border: 7px solid rgba(104, 72, 50, .08);
  background: rgba(255, 250, 242, .13);
  box-shadow: 76vw -12px 0 -12px rgba(191, 72, 16, .08);
}

.faq-page {
  background-color: #ead7bb;
  background-image:
    linear-gradient(90deg, transparent 0 11%, rgba(191, 72, 16, .1) 11% 11.15%, transparent 11.15%),
    repeating-linear-gradient(180deg, transparent 0 39px, rgba(120, 82, 53, .1) 39px 40px),
    linear-gradient(145deg, rgba(255, 251, 242, .23), rgba(143, 97, 62, .06));
}
.faq-page::before {
  top: 9%;
  right: 3%;
  width: 200px;
  height: 62px;
  border: 1px solid rgba(120, 82, 53, .15);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: rgba(255, 250, 242, .2);
  transform: rotate(3deg);
  box-shadow: -18px 18px 0 rgba(191, 72, 16, .06);
}
/* No second card: the LINE card is the object on this page, and an empty card beside it read as a stray. */

.chapter-orb {
  position: fixed;
  z-index: 40;
  right: max(var(--space-2xl), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-2xl), env(safe-area-inset-bottom, 0px));
}
.chapter-orb::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(43, 33, 25, .1);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
.chapter-orb.is-open::before { opacity: 1; }
.chapter-orb-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  padding: 0;
  border: 3px solid #fff3df;
  border-radius: 50%;
  color: #fffaf2;
  background: var(--brown-850);
  box-shadow: 0 10px 24px rgba(43, 33, 25, .24);
  cursor: pointer;
  transition: transform 280ms var(--ease-orb), background-color 180ms ease-out, box-shadow 280ms var(--ease-orb);
}
.chapter-orb-toggle:hover { background: var(--brown-700); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(43, 33, 25, .28); }
.chapter-orb-toggle:active { transform: translateY(0) scale(.97); }
.chapter-orb-guardian { width: 46px; height: 46px; transition: opacity 180ms ease-out, transform 280ms var(--ease-orb); }
.chapter-orb-number {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  padding: 0 var(--space-xs);
  border: 2px solid var(--brown-850);
  border-radius: 9999px;
  color: var(--brown-850);
  background: #fff5e8;
  font-size: var(--text-xs);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.chapter-orb-close { position: absolute; opacity: 0; font-size: 34px; font-weight: 350; line-height: 1; transform: rotate(-30deg) scale(.8); transition: opacity 180ms ease-out, transform 280ms var(--ease-orb); }
.chapter-orb.is-open .chapter-orb-toggle { transform: scale(.94); box-shadow: 0 8px 20px rgba(43, 33, 25, .22); }
.chapter-orb.is-open .chapter-orb-toggle:hover { transform: scale(.96); }
.chapter-orb.is-open .chapter-orb-guardian { opacity: 0; transform: rotate(20deg) scale(.72); }
.chapter-orb.is-open .chapter-orb-close { opacity: 1; transform: rotate(0) scale(1); }
.chapter-orb.is-open .chapter-orb-number { opacity: 0; }
.orb-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 52px;
  height: 52px;
  pointer-events: none;
}
.orb-action {
  --orb-x: 0px;
  --orb-y: 0px;
  --orb-open-delay: 0ms;
  --orb-close-delay: 0ms;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid #e8c79f;
  border-radius: 50%;
  color: var(--brown-850);
  background: #fff7eb;
  box-shadow: 0 8px 18px rgba(43, 33, 25, .18);
  font-size: var(--text-sm);
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0) scale(.62);
  will-change: transform, opacity;
  transition-property: transform, opacity, visibility, border-color, background-color;
  transition-duration: var(--motion-orb-close), 160ms, 0s, 160ms, 160ms;
  transition-timing-function: var(--ease-orb), ease-out, linear, ease-out, ease-out;
  transition-delay: var(--orb-close-delay), var(--orb-close-delay), calc(var(--orb-close-delay) + var(--motion-orb-close)), 0ms, 0ms;
}
.orb-action-meet { --orb-x: -210px; --orb-y: 0px; --orb-open-delay: 0ms; --orb-close-delay: 60ms; }
.orb-action-delegate { --orb-x: -205px; --orb-y: -72px; --orb-open-delay: 30ms; --orb-close-delay: 50ms; }
.orb-action-guard { --orb-x: -178px; --orb-y: -142px; --orb-open-delay: 60ms; --orb-close-delay: 40ms; }
.orb-action-grow { --orb-x: -108px; --orb-y: -196px; --orb-open-delay: 90ms; --orb-close-delay: 30ms; }
.orb-action-expand { --orb-x: -35px; --orb-y: -218px; --orb-open-delay: 120ms; --orb-close-delay: 20ms; }
.orb-action-begin { --orb-x: 0px; --orb-y: -146px; --orb-open-delay: 150ms; --orb-close-delay: 10ms; }
.chapter-orb.is-open .orb-actions { pointer-events: auto; }
.chapter-orb.is-open .orb-action {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--orb-x), var(--orb-y)) scale(1);
  transition-duration: var(--motion-orb-open), 220ms, 0s, 160ms, 160ms;
  transition-delay: var(--orb-open-delay), var(--orb-open-delay), 0ms, 0ms, 0ms;
}
.orb-action:hover { border-color: var(--orange-500); background: #fff0dc; transform: translate(var(--orb-x), var(--orb-y)) scale(1.05); }
.orb-action[aria-current] { border-color: var(--orange-700); color: #fffaf2; background: var(--orange-700); }
.orb-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-neighbors,
.swipe-hint { display: none; }
.chapter-orb-toggle:focus-visible,
.orb-action:focus-visible,
.page-neighbor:focus-visible,
.demo-options button:focus-visible,
.workflow-tabs button:focus-visible { outline: 3px solid #336b82; outline-offset: 3px; }
.game-loop-track button:focus-visible { z-index: 1; outline: 3px solid #fffaf2; outline-offset: -5px; box-shadow: 0 0 0 3px #336b82; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-arrow { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.page-arrow:disabled { opacity: .38; cursor: not-allowed; }

@media (min-width: 901px) {
  .results-page .feature-spread.has-product-proof { grid-template-columns: minmax(0, .65fr) minmax(0, .85fr) minmax(340px, 1.05fr); }
  /* Headlines in the narrow first column of the three-column screenshot pages and the compendium must fit whole phrases. */
  .has-product-proof .feature-header h2 { font-size: clamp(28px, 2.8vw, 40px); }
  .pet-dex-copy h2 { font-size: clamp(32px, 3.4vw, 48px); }
  /* The six shelves fit one 1440x900 slide; the orb sits right of the content column, so less bottom room is needed. */
  .pet-dex-page .page-inner { padding-bottom: var(--space-4xl); }
  .primary-nav a { white-space: nowrap; }
}
/* Narrow desktops: the header holds the brand, six chapter links, 登入, the language toggle and the LINE button. */
/* Below 1440 px the content column reaches the chapter orb's corner; keep the compendium shelves clear of it. */
@media (min-width: 901px) and (max-width: 1439px) {
  .dex-ladder { margin-right: 72px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .site-header { gap: var(--space-lg); }
  .primary-nav { gap: var(--space-md); }
  .primary-nav a { font-size: var(--text-xs); }
  .sign-in-link { margin-right: 0; }
}
@media (min-width: 901px) and (max-height: 819px) {
  .dex-ladder { gap: 4px; }
  .dex-cells img { height: 58px; }
  .dex-row[data-stage="baby"] .dex-cells img { height: 44px; }
  .dex-row[data-stage="child"] .dex-cells img { height: 52px; }
}

@media (max-width: 900px) {
  :root { --header-height: 64px; --control-height: 92px; }
  /* Single-column pages leave no free area for the scene objects; the chapter background patterns carry the scene. */
  .story-page::before,
  .story-page::after { display: none; }
  .site-header { grid-template-columns: auto 1fr auto; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); }
  .primary-nav { display: none; }
  .header-actions { justify-self: end; }
  .page-inner { width: min(calc(100% - var(--space-5xl)), 720px); padding-top: var(--space-6xl); }
  .feature-spread.has-product-proof { grid-template-columns: 1fr; }
  .product-proof { width: min(100%, 360px); margin: var(--space-3xl) auto 0; transform: none; }
  .workflow-showcase { width: min(100%, 360px); margin: var(--space-3xl) auto 0; }
  .workflow-showcase .product-proof { width: 100%; margin-top: 0; }
  .product-proof-result { width: min(100%, 560px); }
  .welcome-layout,
  .feature-spread,
  .family-page .feature-spread,
  .game-loop-layout,
  .pet-growth-layout,
  .pet-dex-layout,
  .trust-layout,
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-4xl); align-items: start; }
  .welcome-layout { padding-top: var(--space-6xl); }
  .hero-copy,
  .office-vignette,
  .demo-note { grid-column: 1; grid-row: auto; }
  .demo-note { justify-self: start; margin-top: calc(-1 * var(--space-2xl)); text-align: left; }
  .hero-copy { padding: var(--space-3xl) 88px 0 0; background: none; }
  .hero-copy h1 { max-width: 12ch; }
  .office-vignette { min-height: 380px; }
  .hero-copy h1 { font-size: clamp(38px, 8vw, 54px); }
  .chapter-heading { grid-template-columns: 120px 1fr; gap: var(--space-2xl); }
  .flow-list { grid-template-columns: repeat(2, 1fr); }
  .flow-step { min-height: 210px; }
  .flow-step > span { margin-bottom: var(--space-2xl); }
  .feature-header .chapter-number,
  .trust-copy .chapter-number,
  .faq-intro .chapter-number { margin-bottom: var(--space-2xl); }
  .feature-ledger p { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .feature-ledger p::before { top: 23px; }
  .game-loop-board { grid-template-columns: 1fr; min-height: 0; }
  .game-loop-track { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; border-right: 0; border-bottom: 1px solid #ad8d69; }
  .game-loop-track li { border-right: 1px solid rgba(173, 141, 105, .72); border-bottom: 0; }
  .game-loop-track li:last-child { border-right: 0; }
  .game-loop-track button { min-height: 116px; padding: var(--space-lg) var(--space-3xl) var(--space-lg) var(--space-md); }
  .game-loop-outcome { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr; align-items: center; }
  .game-pet-stage { min-height: 240px; }
  .game-loop-outcome figcaption { padding-top: 0; padding-left: var(--space-2xl); border-top: 0; border-left: 1px solid rgba(116, 77, 49, .32); }
  .pet-growth-layout { align-content: start; }
  .growth-path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .growth-path::before { display: none; }
  .growth-path li { min-height: auto; padding: var(--space-lg); border: 1px solid rgba(116, 49, 18, .28); background: rgba(255, 250, 242, .42); }
  .page-pet-visitor-secondary { display: none; }
  .audience-list { grid-template-columns: 1fr 1fr; }
  .audience-list article:nth-child(2) { transform: none; }
  .audience-list article:last-child { grid-column: 1 / -1; min-height: auto; }
  .faq-intro,
  .faq-list,
  .closing,
  .site-footer { grid-column: 1; grid-row: auto; }
  /* The QR is for desktop visitors; on a phone or tablet the LINE button opens LINE directly. */
  .line-qr { display: none; }
  .closing { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-xl) var(--space-2xl); }
  .chapter-orb { right: var(--space-lg); bottom: max(var(--space-lg), env(safe-area-inset-bottom, 0px)); }
  .page-neighbors {
    position: fixed;
    z-index: 35;
    right: 104px;
    bottom: max(var(--space-lg), env(safe-area-inset-bottom, 0px));
    left: var(--space-lg);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 6px;
    align-items: center;
    padding: 5px;
    border: 1px solid rgba(74, 57, 46, .28);
    border-radius: 999px;
    background: rgba(255, 250, 242, .92);
    box-shadow: 0 10px 24px rgba(43, 33, 25, .14);
    backdrop-filter: blur(12px);
  }
  .page-neighbor {
    min-width: 0;
    width: 46px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    color: var(--brown-850);
    background: rgba(231, 205, 167, .52);
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: 850;
  }
  .page-neighbor:hover:not(:disabled) { color: #fffaf2; background: var(--orange-700); }
  .page-neighbor:disabled { opacity: .46; cursor: default; }
  .mobile-page-progress { min-width: 0; margin: 0; text-align: center; line-height: 1.15; }
  .mobile-page-progress span,
  .mobile-page-progress strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-page-progress span { color: var(--orange-700); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
  .mobile-page-progress strong { margin-top: 3px; color: var(--brown-850); font-size: var(--text-xs); }
  .swipe-hint {
    position: fixed;
    z-index: 34;
    bottom: calc(max(var(--space-lg), env(safe-area-inset-bottom, 0px)) + 68px);
    left: var(--space-lg);
    display: block;
    margin: 0;
    padding: 5px 11px;
    border: 1px solid rgba(74, 57, 46, .22);
    border-radius: 999px;
    color: var(--brown-700);
    background: rgba(255, 250, 242, .88);
    box-shadow: 0 6px 16px rgba(43, 33, 25, .1);
    font-size: var(--text-xs);
    font-weight: 800;
    transition: opacity .2s ease-out, transform .2s ease-out;
  }
  .swipe-hint::before { margin-right: 6px; content: "↔"; }
  .swipe-hint.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
  .chapter-orb.is-open ~ .page-neighbors,
  .chapter-orb.is-open ~ .swipe-hint { visibility: hidden; opacity: 0; pointer-events: none; }
}

@media (max-width: 600px) {
  :root { --control-height: 88px; }
  .site-header { padding-inline: var(--space-lg); }
  .brand-mark { width: 22px; height: 38px; }
  .brand-wordmark { width: 43px; height: 37px; }
  .brand { font-size: var(--text-sm); }
  /* The LINE button stays in the phone header; 登入 moves under the hero actions (.hero-sign-in). */
  .sign-in-link { display: none; }
  .hero-sign-in { display: block; }
  .line-button { padding-inline: var(--space-md); }
  .welcome-page .hero-copy { padding: var(--space-2xl) 80px 0 0; }
  .welcome-page .hero-copy h1 { max-width: 11ch; }
  .page-inner { width: calc(100% - var(--space-4xl)); padding: var(--space-6xl) 0 calc(var(--control-height) + var(--space-4xl)); }
  .chapter-marker { top: var(--space-md); left: var(--space-lg); grid-template-columns: auto auto auto; }
  .chapter-thread { display: none; }
  h1 { font-size: clamp(34px, 10.5vw, 44px); }
  h2 { font-size: clamp(30px, 9vw, 40px); }
  .hero-lead,
  .chapter-heading > div > p:last-child,
  .feature-header > p:last-child,
  .trust-copy > p:last-child { font-size: var(--text-base); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: var(--space-md); }
  /* Phones: the check paper needs the full width, so the scene stacks: request top left, guardian on the desk at
     the right, paper across the desk. The work thread and the route chips repeat the hero line; they stay hidden. */
  .office-vignette { min-height: 520px; }
  .work-thread,
  .demo-route { display: none; }
  .demo-topline { top: var(--space-md); left: var(--space-md); right: var(--space-md); }
  .demo-topline figcaption { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 11px; line-height: 1.35; }
  .demo-options { top: 62px; left: var(--space-md); right: var(--space-md); gap: 4px; }
  .demo-options button { min-width: 0; flex: 1; padding-inline: 5px; }
  .window { top: 116px; right: 16px; width: 92px; height: 78px; }
  .request-note { top: 120px; left: 12px; width: 176px; padding: var(--space-md); }
  .result-paper { right: 12px; bottom: 14px; left: 12px; width: auto; padding: var(--space-md) var(--space-lg) var(--space-xs); }
  .desk { height: 232px; }
  .desk::after { left: 30px; height: 90px; box-shadow: 250px 0 0 #503421; }
  .lamp { left: 38px; }
  .guardian { left: 74%; bottom: 232px; width: 64px; }
  .chapter-heading { display: block; margin-bottom: var(--space-3xl); }
  .chapter-heading .chapter-number { margin-bottom: var(--space-3xl); }
  .flow-list { grid-template-columns: 1fr; }
  .flow-step { min-height: auto; display: grid; grid-template-columns: 34px 1fr; gap: var(--space-md); padding: var(--space-xl); }
  .flow-step > span { margin: 0; }
  .feature-spread { display: block; }
  .product-proof { width: min(100%, 320px); margin: var(--space-3xl) auto 0; transform: none; }
  .workflow-showcase .product-proof { margin-top: 0; }
  .workflow-showcase .product-proof img { height: 340px; }
  .workflow-takeaway { text-align: center; }
  .game-loop-layout,
  .pet-growth-layout,
  .pet-dex-layout { display: block; }
  .feature-header { margin-bottom: var(--space-3xl); }
  .feature-header .chapter-number { margin-bottom: var(--space-3xl); }
  .feature-ledger p { padding-left: var(--space-4xl); }
  .game-loop-copy,
  .pet-growth-copy,
  .pet-dex-copy { margin-bottom: var(--space-3xl); }
  .game-loop-copy .chapter-number,
  .pet-growth-copy .chapter-number,
  .pet-dex-copy .chapter-number { margin-bottom: var(--space-3xl); }
  .game-loop-board { display: block; }
  .game-loop-track { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }
  .game-loop-track li,
  .game-loop-track li:last-child { min-height: auto; border-right: 1px solid rgba(173, 141, 105, .72); border-bottom: 1px solid rgba(173, 141, 105, .72); }
  .game-loop-track li:nth-child(even) { border-right: 0; }
  .game-loop-track li:nth-child(n + 3) { border-bottom: 0; }
  .game-loop-track button { min-height: 118px; padding: var(--space-md) var(--space-3xl) var(--space-md) var(--space-md); }
  .game-loop-track small { display: none; }
  .game-loop-outcome { display: block; padding: var(--space-xl); }
  .game-pet-stage { min-height: 230px; }
  .game-pet-stage img { height: 210px; }
  .game-loop-outcome figcaption { padding-top: var(--space-lg); padding-left: 0; border-top: 1px solid rgba(116, 77, 49, .32); border-left: 0; }
  .game-side-note { display: block; margin-top: var(--space-2xl); }
  .game-side-note strong { display: block; margin-bottom: var(--space-sm); }
  .growth-path { display: block; }
  .growth-path li { min-height: auto; margin-bottom: var(--space-md); }
  .growth-details { margin-top: var(--space-3xl); }
  .dex-row { grid-template-columns: 1fr; gap: 6px; padding: var(--space-sm) var(--space-md) 4px; }
  .dex-row-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); }
  .dex-cells img { height: 68px; }
  .dex-row[data-stage="baby"] .dex-cells img { height: 52px; }
  .dex-row[data-stage="child"] .dex-cells img { height: 60px; }
  .page-pet-visitor-primary { top: var(--space-md); right: var(--space-sm); bottom: auto; left: auto; width: 68px; height: 68px; opacity: .82; }
  .trust-layout { display: block; }
  .trust-copy { margin-bottom: var(--space-3xl); }
  .trust-ledger > div { grid-template-columns: 1fr; gap: var(--space-sm); }
  .audience-list { grid-template-columns: 1fr; }
  .audience-list article,
  .audience-list article:last-child { grid-column: auto; min-height: auto; }
  .audience-list article > span { margin-bottom: var(--space-lg); }
  .faq-layout { display: block; }
  .faq-intro { margin-bottom: var(--space-4xl); }
  .closing { display: block; margin-top: var(--space-4xl); padding: var(--space-xl); }
  .closing-actions { margin-top: var(--space-xl); }
  .closing-actions .button { width: 100%; }
  .site-footer { flex-direction: column; align-items: flex-start; margin-top: var(--space-3xl); }
  .chapter-orb { right: var(--space-md); bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px)); }
  .chapter-orb-toggle { width: 64px; height: 64px; }
  .chapter-orb-guardian { width: 42px; height: 42px; }
  .orb-actions { right: 6px; bottom: 6px; }
  .page-neighbors { right: 86px; bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px)); left: var(--space-md); }
  .page-neighbor { width: 44px; min-height: 44px; }
  .swipe-hint { bottom: calc(max(var(--space-md), env(safe-area-inset-bottom, 0px)) + 64px); left: var(--space-md); }
}

@media (max-height: 720px) and (min-width: 700px) {
  .page-inner { padding-top: var(--space-6xl); }
  .office-vignette { min-height: 410px; }
  .feature-header .chapter-number { margin-bottom: var(--space-2xl); }
  .feature-ledger p { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .feature-ledger p::before { top: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .orb-action { transition: none !important; }
}