/* ============================================================
   FreshLife 官网设计系统（第三轮品牌级打磨）
   Apple 原生气质 · FreshLife 绿 · 温暖米白（白天）/ 深墨绿（夜间）
   设计令牌与 App 内 FreshLifeProductStyle / FreshTheme 对齐
   白天不刺眼、夜间不用纯黑；双主题完整覆盖全部页面
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --motion-press-scale: .985;

  /* FreshLife 品牌绿（与 App FreshLifeProductStyle 对齐） */
  --green: #35694f;
  --green-strong: #28573f;
  --green-ink: #073d2c;
  --green-soft: #e8f0e8;
  --green-softer: #f0f4ed;
  /* 绿色之上的文字色（对应 App onAccent） */
  --on-green: #ffffff;

  /* 少量杏色/食物色点缀（克制使用，避免单一绿色） */
  --apricot: #9c5514;
  --apricot-soft: #f8e8cd;

  /* 状态色（与 App 对齐，保证对比度） */
  --amber: #9a5a08;
  --amber-soft: #fdf3e0;
  --red: #b33a32;
  --red-soft: #fbece9;
  --blue: #17628c;
  --blue-soft: #e7f1f8;

  /* 表面与文字：白天温暖米白（暖调纸感，不用纯白/纯绿白） */
  --bg: #f7f7f2;
  --bg-elev: #efefe7;
  --surface: #ffffff;
  --surface-2: #eceee6;
  --ink: #202820;
  --ink-2: #44524a;
  --ink-3: #5c685f;
  --line: rgba(31, 43, 33, 0.1);
  --line-strong: rgba(31, 43, 33, 0.18);
  /* 设备外壳独立于正文颜色：切换夜间模式时不反转成白色 */
  --device-shell: #17231d;
  --device-shell-edge: rgba(255, 255, 255, 0.16);

  /* 度量 */
  --radius-sm: 10px;
  --radius-control: 12px;
  --duration-fast: 160ms;
  --duration-medium: 220ms;
  --duration-slow: 300ms;
  --motion-fade: var(--duration-medium);
  --motion-reveal: var(--duration-slow);
  --motion-slide: var(--duration-medium);
  --motion-scale: var(--duration-fast);
  --motion-shared: var(--duration-medium);
  --motion-distance: 8px;
  --member-background: #086e4c;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --maxw: 1120px;
  --readable: 700px;
  --header-h: 62px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: var(--ease-out);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
    sans-serif;

  /* 阴影（克制，柔和不发灰） */
  --shadow-sm: 0 1px 2px rgba(20, 50, 35, 0.05);
  --shadow: 0 1px 3px rgba(20, 50, 35, 0.05), 0 10px 28px rgba(20, 50, 35, 0.06);
  --shadow-lg: 0 2px 8px rgba(20, 50, 35, 0.07), 0 28px 64px rgba(20, 50, 35, 0.11);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* 夜间：宁静克制，深绿黑而非纯黑，带一点暖意 */
:root[data-theme="dark"] {
  --bg: #101715;
  --bg-elev: #161f1a;
  --surface: #1b231f;
  --surface-2: #141d18;
  --ink: #eef4ef;
  --ink-2: #b8c5bc;
  --ink-3: #8d9b92;
  --line: rgba(238, 244, 239, 0.09);
  --line-strong: rgba(238, 244, 239, 0.17);

  --green: #76d7a7;
  --green-strong: #8fe0b8;
  --green-ink: #0d1913;
  --green-soft: rgba(118, 215, 167, 0.16);
  --green-softer: rgba(118, 215, 167, 0.09);
  /* 绿色之上的文字色（深绿，保证对比度，对应 App onAccent） */
  --on-green: #0d1913;

  --apricot: #eeb476;
  --apricot-soft: rgba(238, 180, 118, 0.16);

  --amber: #e9bc7c;
  --amber-soft: rgba(233, 188, 124, 0.15);
  --red: #ed8e87;
  --red-soft: rgba(237, 142, 135, 0.15);
  --blue: #8ec3e0;
  --blue-soft: rgba(142, 195, 224, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 10px 28px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.36), 0 28px 64px rgba(0, 0, 0, 0.42);
}

/* 主题切换动效：切换瞬间给整个页面一层柔和过渡 */
html.theme-switching body,
html.theme-switching .site-header,
html.theme-switching .section--alt,
html.theme-switching .theme-toggle {
  transition: background-color var(--duration-slow) ease, color var(--duration-slow) ease,
    border-color var(--duration-slow) ease, fill var(--duration-slow) ease, box-shadow var(--duration-slow) ease !important;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 首次打开带锚点的网址先准确落位；页面稳定后再为站内跳转启用平滑滚动。 */
@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll-ready { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--duration-medium) ease, color var(--duration-medium) ease;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-strong); text-decoration: none; }
button { font: inherit; cursor: pointer; }
svg { display: block; }
::selection { background: var(--green-soft); color: var(--ink); }

/* 可访问性：跳过链接、焦点环（键盘焦点清晰可见） */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 1000;
  padding: 10px 18px; border-radius: 12px;
  background: var(--green); color: var(--on-green); font-size: 0.875rem; font-weight: 600;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--duration-medium);
}
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
html[data-reading-motion] .skip-link { transition: none; }
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 8px;
}
button:focus:not(:focus-visible) { outline: none; }
/* 程序为锚点区域补的 tabindex 只用于读屏焦点，不绘制覆盖整屏的大边框。 */
[tabindex="-1"]:focus { outline: none; }

/* 页内锚点：避开固定导航；当前位置由导航和章节指示器反馈。 */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* The page is readable immediately; motion belongs to individual transitions. */

/* ---------- 布局 ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--compact { padding: 78px 0; }
.section--alt { background: var(--bg-elev); border-block: 1px solid var(--line); }
.readable { max-width: var(--readable); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--green-strong); text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--green); }

.section-head { max-width: var(--readable); margin-bottom: 48px; }
.section-head h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  line-height: 1.18; letter-spacing: -0.022em;
  color: var(--ink); font-weight: 700; margin-bottom: 14px;
  text-wrap: balance;
}
.section-head .lead { font-size: 1.09375rem; color: var(--ink-2); max-width: 58ch; }
.section-head .lead strong { color: var(--ink); font-weight: 600; }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }
.center .lead { margin-inline: auto; }

/* ---------- 页头 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--duration-slow) ease, border-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
  box-shadow: 0 10px 34px rgba(20, 50, 35, 0.06);
}
:root[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24); }
.site-header .container {
  height: 100%; display: flex; align-items: center; gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand:hover { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 0.90625rem; font-weight: 500; color: var(--ink-2);
  transition: color var(--duration-medium) ease, background var(--duration-medium) ease;
}
.nav-links a:hover { color: var(--ink); background: var(--green-softer); }
.nav-links a[aria-current="location"],
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--green-softer); }
.nav-links a[aria-current="location"]::after,
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--green);
  transform: translateX(-50%); animation: navCurrentIn var(--motion-fade) var(--ease-out);
}
@keyframes navCurrentIn {
  from { opacity: 0; transform: translate(-50%, 4px) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* 日夜切换按钮：清晰、精致、可访问 */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2);
  font-size: 0.8125rem; font-weight: 600;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--green); }
.theme-toggle:active { transform: translateY(1px) scale(var(--motion-press-scale)); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; animation: themeIconIn var(--motion-fade) var(--ease-out); }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { animation: themeIconIn var(--motion-fade) var(--ease-out); }
@keyframes themeIconIn {
  from { opacity: 0; transform: rotate(-24deg) scale(0.72); }
  to { opacity: 1; transform: none; }
}
.theme-toggle-label { line-height: 1; }

.nav-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--green); color: var(--on-green);
  font-size: 0.875rem; font-weight: 600;
  transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-cta:hover { background: var(--green-strong); color: var(--on-green); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 134, 94, 0.28); }
.nav-cta:active { transform: translateY(1px) scale(0.985); box-shadow: none; }
.nav-toggle { display: none; margin-left: auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 12px; color: var(--ink); }

/* 移动导航面板 */
.mobile-nav {
  display: block;
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px 22px;
  box-shadow: var(--shadow-lg);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px); transform-origin: 50% 0;
  transition: opacity var(--motion-fade) ease, transform var(--motion-slide) var(--ease-out), visibility 0s linear var(--motion-slide);
}
.mobile-nav.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition-delay: 0s;
}
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; font-size: 1.03125rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav a[aria-current="location"],
.mobile-nav a[aria-current="page"] { color: var(--green-strong); }
.mobile-nav a small { color: var(--ink-3); font-weight: 500; font-size: 0.8125rem; }
.theme-toggle--mobile {
  display: flex; width: 100%; justify-content: flex-start;
  height: 46px; margin-top: 12px; border-radius: 12px;
}

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: 64px 0 24px;
  display: grid; align-items: center;
  text-align: center; position: relative; overflow: clip;
}
.hero > .container { width: 100%; }
.hero-aura {
  position: absolute; inset: -200px -20% auto; height: 560px; z-index: -1;
  background:
    radial-gradient(42% 52% at 50% 0%, var(--green-softer) 0%, transparent 70%),
    radial-gradient(30% 40% at 78% 12%, var(--apricot-soft) 0%, transparent 70%);
  transform: translate3d(0, calc(var(--hero-shrink, 0) * 18px), 0) scale(calc(1 + var(--hero-shrink, 0) * 0.035));
  transform-origin: 50% 0;
}
.hero-lockup { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-lockup img { width: 58px; height: 58px; border-radius: 15px; box-shadow: var(--shadow); }
.hero-lockup .txt { text-align: left; }
.hero-lockup b { display: block; font-size: 1.375rem; color: var(--ink); letter-spacing: -0.02em; }
.hero-lockup small { display: block; font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }
.hero h1 {
  font-size: clamp(2.375rem, 6.6vw, 3.875rem);
  line-height: 1.1; letter-spacing: -0.028em; font-weight: 750;
  color: var(--ink); max-width: 16ch; margin: 0 auto 20px;
  text-wrap: balance;
}
html[lang="en"] .hero h1 { max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--green-strong); }
.hero .sub {
  font-size: clamp(1.03125rem, 2.1vw, 1.1875rem);
  color: var(--ink-2); max-width: 60ch; margin: 0 auto 30px;
}
.hero .sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.hero-assurances {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  font-size: 0.84375rem; color: var(--ink-3); font-weight: 500;
}
.hero-assurances i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.hero-assurances b { color: var(--ink-2); font-weight: 600; }
.hero-status {
  margin-top: 18px; font-size: 0.78125rem; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}
.hero-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

/* 首屏干净收尾；Everyday 以完整表面层进入，不再用细线把两个区块硬连起来。 */
#daily {
  position: relative;
  padding-top: 64px;
  background: var(--surface);
  border-block: 1px solid var(--line-strong);
}

/* Hero 滚动收束（很轻：JS 只更新 --hero-shrink，只动 transform/opacity）
   首屏始终可读：最大位移 20px、最大淡化 35%；reduced-motion 下无效果 */
.js .hero { --hero-shrink: 0; }
.js .hero .container {
  transform: translateY(calc(var(--hero-shrink) * -8px)) scale(calc(1 - var(--hero-shrink) * 0.012));
  opacity: 1;
}
.js .hero-aura { opacity: calc(1 - var(--hero-shrink) * 0.6); }

/* ---------- 按钮 ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 24px; border-radius: 14px;
  font-size: 0.96875rem; font-weight: 600; text-decoration: none;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.button:active { transform: translateY(1px) scale(0.99); }
.button.primary { background: var(--green); color: var(--on-green); box-shadow: 0 10px 26px rgba(10, 134, 94, 0.26); }
.button.primary:hover { background: var(--green-strong); color: var(--on-green); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(10, 134, 94, 0.3); }
.button svg { transition: transform var(--duration-slow) var(--ease-out); }
.button:hover svg, .nav-cta:hover svg { transform: translateX(3px); }
.button.quiet {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.button.quiet:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--ink-3); }
.button.small { min-height: 40px; padding: 0 16px; font-size: 0.875rem; border-radius: 12px; }

/* ---------- 为什么 ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.why-grid--outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; position: relative; overflow: hidden;
  transition: transform var(--duration-medium) ease, box-shadow var(--duration-medium) ease, border-color var(--duration-medium) ease;
}
.why-card::after {
  content: ""; position: absolute; inset: auto 24px 0; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--apricot));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--duration-slow) var(--ease-out);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.why-card:hover::after, .why-card:focus-within::after { transform: scaleX(1); }
.why-card .ico {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-strong); margin-bottom: 16px;
}
.why-card .ico svg { width: 22px; height: 22px; }
.why-card .ico, .daily-card .ico, .method-card .ico, .ai-card .ico, .vision-card .ico {
  transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) ease;
}
.why-card:hover .ico, .daily-card:hover .ico, .method-card:hover .ico,
.ai-card:hover .ico, .vision-card:hover .ico {
  transform: translateY(-2px) rotate(-3deg) scale(1.06);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--green) 16%, transparent);
}
.why-card h3 { font-size: 1.125rem; color: var(--ink); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.why-card p { font-size: 0.90625rem; color: var(--ink-2); }

/* ---------- 品牌滚动叙事：从放进冰箱，到端上餐桌 ----------
   桌面（≥860px + JS + 未开启减少动效）：sticky 手机舞台 + 章节联动交叉淡入；
   小屏 / 无 JS / reduced-motion：退化为顺序故事卡片 + 静态画面。
   所有文案都在文档流里，进度指示只是辅助，不是唯一信息来源。 */
.story { padding: 96px 0 40px; }
.story-track { display: grid; grid-template-columns: 1fr; gap: 28px; }
.story-track > * { min-width: 0; }
.story-chapter > * { min-width: 0; }
.story-stage-col { min-width: 0; }
.story-stage { display: none; position: relative; isolation: isolate; }

/* 章节进度指示：移动端为横向药丸；桌面 sticky 舞台内为纵向步骤 */
.story-progress {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 6px; padding: 0;
}
.story-progress-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
  transition: border-color var(--duration-medium) ease, color var(--duration-medium) ease, background var(--duration-medium) ease, transform var(--duration-medium) var(--ease-out);
}
.story-progress-link:active { transform: scale(0.97); }
.story-progress-link .n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; font-size: 0.6875rem; font-weight: 800;
  color: var(--green-strong); background: var(--green-soft);
}
.story-progress-link:hover { color: var(--green-strong); border-color: var(--green); }
.story-progress-link[aria-current="step"] {
  background: var(--green); border-color: var(--green); color: var(--on-green);
}
.story-progress-link[aria-current="step"] .n {
  background: rgba(255, 255, 255, 0.18); color: var(--on-green);
}

/* 章节卡片（移动端 / 无 JS / reduced-motion 的形态） */
.story-chapter {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 20px;
  display: grid; gap: 16px;
}
.story-mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.story-mini .mock-row { margin-bottom: 0; }
.story-copy { min-width: 0; }
.story-step {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--green-strong); margin-bottom: 8px;
}
.story-step::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--green); }
.story-copy h3 {
  font-size: clamp(1.375rem, 3.4vw, 1.875rem); line-height: 1.24; letter-spacing: -0.02em;
  color: var(--ink); font-weight: 700; margin-bottom: 10px; text-wrap: balance;
}
.story-copy > p { font-size: 0.96875rem; color: var(--ink-2); line-height: 1.85; max-width: 40ch; }
.story-state {
  display: inline-flex; align-items: flex-start; gap: 8px;
  margin-top: 16px; padding: 9px 14px; border-radius: 16px;
  background: var(--green-softer); border: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--ink-2); line-height: 1.6;
}
.story-state::before {
  content: ""; width: 6px; height: 6px; margin-top: 0.55em;
  border-radius: 50%; background: var(--green); flex: none;
}
.story-state > span { min-width: 0; }
.story-state .keep-together { white-space: nowrap; }

/* 固定舞台：手机屏幕交叉淡入 + 底部步骤圆点（只动 transform/opacity） */
.story-screens { position: absolute; left: 0; right: 0; top: 44px; bottom: 46px; }
.story-screen {
  position: absolute; inset: 0; padding: 2px 14px 46px;
  display: flex; flex-direction: column;
  opacity: 0; transform: none;
  /* Opacity follows scroll directly; no delayed transition fighting the gesture. */
  pointer-events: none;
}
.story-screen::after {
  content: attr(data-story-note);
  display: inline-flex; align-items: center; align-self: flex-start; gap: 7px;
  margin-top: 14px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); font-size: 0.625rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.story-screen::before { content: none; }
.story-stage[data-active="1"] .story-screen--1,
.story-stage[data-active="2"] .story-screen--2,
.story-stage[data-active="3"] .story-screen--3,
.story-stage[data-active="4"] .story-screen--4 { opacity: 1; transform: none; }
.story-dock {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 6px;
}
.story-dock i {
  width: 20px; height: 6px; border-radius: 999px; background: var(--line-strong); transform: scaleX(.3);
  transition: transform var(--motion-scale) var(--ease-out), background-color var(--motion-fade) ease;
}
.story-stage[data-active="1"] .story-dock i:nth-child(1),
.story-stage[data-active="2"] .story-dock i:nth-child(2),
.story-stage[data-active="3"] .story-dock i:nth-child(3),
.story-stage[data-active="4"] .story-dock i:nth-child(4) { transform: scaleX(1); background: var(--green); }
.story-phone { width: 284px; }
.story-stage::before {
  content: ""; position: absolute; inset: 10% -28% 4%; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, var(--green-soft), transparent 68%);
  opacity: 0.7; transform: scale(0.92);
  transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) ease;
}

/* 桌面：sticky 舞台 + 纵向进度 + 每章留白（仅 .js，reduced-motion 在后面覆盖） */
@media (min-width: 860px) {
  .js .story-track { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .js .story-stage-col {
    position: sticky; top: calc(var(--header-h) + 26px);
    display: flex; align-items: center; gap: 24px;
  }
  .js .story-progress { flex-direction: column; gap: 4px; margin: 0; flex: none; }
  .js .story-progress-link { border: 0; background: none; padding: 4px 4px; color: var(--ink-3); }
  .js .story-progress-link .n { min-width: 22px; height: 22px; }
  .js .story-progress-link:hover { color: var(--green-strong); }
  .js .story-progress-link[aria-current="step"] { background: none; color: var(--ink); }
  .js .story-progress-link[aria-current="step"] .n { background: var(--green); color: var(--on-green); }
  .js .story-stage { display: block; }
  .js .story-mini { display: none; }
  /* 舞台高度自适应视口：矮屏收窄手机宽度，保证完整可见、不产生嵌套滚动 */
  .js .story-phone { width: 304px; flex: none; }
  .js .story-chapter {
    background: none; border: 0; border-radius: 0; padding: 0;
    min-height: min(680px, 72vh); display: flex; flex-direction: column; justify-content: center;
  }
  .js .story-chapter .story-copy {
    opacity: 1; transform: none;
  }
  .js .story-chapter.is-active .story-copy { opacity: 1; transform: none; }
  .story-chapters { padding-top: 6vh; }
  .js .story-copy h3 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }
  .js .story-copy > p { font-size: 1.03125rem; }
}

/* ---------- 设备舞台 ---------- */
.device-stage { position: relative; isolation: isolate; }
.device-stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% 4% 12%; border-radius: 44%;
  background:
    radial-gradient(42% 54% at 30% 45%, var(--green-soft), transparent 72%),
    radial-gradient(38% 46% at 76% 56%, var(--apricot-soft), transparent 72%);
  opacity: 0.62; filter: blur(16px);
}
.device-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; margin: 0 auto 44px;
}
.device-switch-btn {
  border: 0; background: transparent; color: var(--ink-2);
  min-height: 44px; padding: 9px 18px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600;
  transition: background var(--duration-medium) ease, color var(--duration-medium) ease, transform var(--duration-medium) var(--ease-out), box-shadow var(--duration-medium) ease;
}
.device-switch-btn:hover { color: var(--ink); }
.device-switch-btn:active { transform: scale(0.97); }
.device-switch-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.device-grid {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 48px; align-items: center; justify-content: center;
}

.device-col { min-width: 0; }
.device-label {
  text-align: center; font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.device-grid[data-view="phone"] .device-col--ipad { display: none; }
.device-grid[data-view="ipad"] .device-col--phone { display: none; }
.device-grid[data-view="phone"],
.device-grid[data-view="ipad"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px; margin-inline: auto;
}
.device-grid[data-view="phone"] { max-width: 460px; }
.device-grid[data-view="ipad"] .ipad { width: min(760px, 100%); }

/* ---------- 手机演示 ---------- */
.phone {
  width: 348px; max-width: 100%; margin: 0 auto;
  background: var(--device-shell); border-radius: 54px; padding: 11px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--device-shell-edge);
  transition: transform var(--motion-slide) var(--ease-out), box-shadow var(--motion-fade) ease;
}
@media (hover: hover) and (pointer: fine) {
  .device-col:hover > .phone, .device-col:hover > .ipad { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(20, 50, 35, 0.08), 0 34px 76px rgba(20, 50, 35, 0.16); }
  :root[data-theme="dark"] .device-col:hover > .phone,
  :root[data-theme="dark"] .device-col:hover > .ipad { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 36px 80px rgba(0, 0, 0, 0.48); }
}
.phone-screen {
  position: relative; border-radius: 44px; overflow: hidden;
  background: var(--bg); aspect-ratio: 9 / 19.2;
}
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 22px; border-radius: 999px; background: var(--device-shell);
  z-index: 5;
}
.mock-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 6px; font-size: 0.75rem; font-weight: 600; color: var(--ink);
}
.mock-status .time { letter-spacing: 0.02em; }
.mock-status .icons { display: flex; gap: 5px; align-items: center; }
.mock-status .icons i { width: 14px; height: 9px; border-radius: 3px; background: var(--ink); opacity: 0.85; }

.mock-page { padding: 4px 14px 10px; }
.mock-titlebar { display: flex; align-items: center; gap: 10px; padding: 8px 2px 12px; }
.mock-titlebar .t { flex: 1; }
.mock-titlebar .t b { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.mock-titlebar .t small { display: block; font-size: 0.65625rem; color: var(--ink-3); margin-top: 2px; }
.mock-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); border: 1px solid var(--line); flex: none; }
.mock-avatar::after { content: ""; display: block; width: 9px; height: 9px; margin: 8px auto 0; border-radius: 50%; background: var(--green); opacity: 0.7; }

.mock-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.mock-eyebrow { font-size: 0.59375rem; font-weight: 700; letter-spacing: 0.1em; color: var(--green-strong); text-transform: uppercase; margin-bottom: 4px; }
.mock-focus-title { font-size: 1.03125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.mock-focus-cap { font-size: 0.65625rem; color: var(--ink-3); margin-top: 3px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.625rem; font-weight: 700; border-radius: 999px; padding: 3px 8px;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.fresh { background: var(--green-soft); color: var(--green-strong); }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.pill.danger { background: var(--red-soft); color: var(--red); }
.pill.plan { background: color-mix(in srgb, var(--ink-3) 12%, transparent); color: var(--ink-3); }

.mock-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 7px;
}
.mock-row .mi {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-strong);
}
.mock-row .mi svg { width: 17px; height: 17px; }
.mock-row .mt { flex: 1; min-width: 0; }
.mock-row .mt b { display: block; font-size: 0.78125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row .mt small { display: block; font-size: 0.625rem; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row .chev { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); flex: none; }
.mock-row .badge { font-size: 0.625rem; font-weight: 700; color: var(--amber); background: var(--amber-soft); border-radius: 999px; padding: 2px 7px; flex: none; }

.mock-ai { display: flex; gap: 9px; align-items: flex-start; background: linear-gradient(135deg, var(--green-soft), var(--green-softer)); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); border-radius: 14px; padding: 11px 12px; margin-bottom: 8px; }
.mock-ai .spark { width: 24px; height: 24px; border-radius: 8px; background: var(--green); color: var(--on-green); display: grid; place-items: center; flex: none; }
.mock-ai .spark svg { width: 13px; height: 13px; }
.mock-ai p { font-size: 0.65625rem; color: var(--ink-2); line-height: 1.5; }
.mock-ai p b { display: block; font-size: 0.71875rem; color: var(--ink); margin-bottom: 1px; }

.mock-group-label { font-size: 0.625rem; font-weight: 700; color: var(--ink-3); letter-spacing: 0.06em; margin: 10px 2px 6px; display: flex; align-items: center; gap: 6px; }
.mock-group-label .n { color: var(--ink-3); font-weight: 600; font-size: 0.59375rem; }

.mock-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; margin-bottom: 10px; }
.mock-search svg { width: 13px; height: 13px; color: var(--ink-3); }
.mock-search span { font-size: 0.6875rem; color: var(--ink-3); }

.mock-thumb { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 0.75rem; }
.thumb-green { background: var(--green-soft); }
.thumb-amber { background: var(--amber-soft); }
.thumb-red { background: var(--red-soft); }

.mock-progress { height: 4px; border-radius: 4px; background: var(--line); margin-top: 6px; overflow: hidden; }
.mock-progress i { display: block; height: 100%; border-radius: 4px; }
.mock-progress .pg-warn { background: var(--amber); width: 62%; }
.mock-progress .pg-ok { background: var(--green); width: 88%; }

.mock-tabbar {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  display: flex; background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line); border-radius: 22px; padding: 6px 4px;
  box-shadow: var(--shadow);
}
.mock-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; border: 0; background: none; border-radius: 14px; color: var(--ink-3); transition: color var(--duration-fast); }
.mock-tab svg { width: 19px; height: 19px; }
.mock-tab span { font-size: 0.5625rem; font-weight: 600; }
.mock-tab[aria-selected="true"] { color: var(--green-strong); }
.mock-tab[aria-selected="true"] span { font-weight: 700; }
.mock-tab:hover { color: var(--ink); }

/* 无 JS：隐藏无法工作的演示控件，避免死按钮 */
html:not(.js) .mock-tabbar { display: none; }
html:not(.js) .ipad-nav-item { pointer-events: none; }

/* 无 JS 时展示第一个演示屏；有 JS 时由标签切换控制（脚本失效内容仍可见） */
.mock-screen { display: none; height: 100%; padding-bottom: 62px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.mock-screen::-webkit-scrollbar { display: none; }
html:not(.js) .mock-screen { display: none; }
html:not(.js) #mock-today { display: block; }
.js .mock-screen.active { display: block; animation: screenIn var(--motion-slide) var(--ease-out); }
@keyframes screenIn { from { opacity: 0; transform: translateY(var(--motion-distance)); } to { opacity: 1; transform: none; } }
/* ---------- iPad 演示（来自 App RootView：NavigationSplitView 侧边栏） ---------- */
.ipad {
  width: 620px; max-width: 100%; margin: 0 auto;
  background: var(--device-shell); border-radius: 34px; padding: 12px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--device-shell-edge);
  transition: transform var(--motion-slide) var(--ease-out), box-shadow var(--motion-fade) ease;
}
.ipad-screen {
  position: relative; display: flex;
  border-radius: 24px; overflow: hidden;
  background: var(--bg);
  aspect-ratio: 4 / 3;
}
.ipad-sidebar {
  width: 33%; max-width: 200px; flex: none;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface-2) 85%, var(--bg));
  border-right: 1px solid var(--line);
  padding: 14px 10px;
}
.ipad-brand { display: flex; align-items: center; gap: 8px; padding: 2px 10px 14px; }
.ipad-brand img { width: 24px; height: 24px; border-radius: 7px; }
.ipad-brand span { font-size: 0.9375rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ipad-nav { display: grid; gap: 2px; }
.ipad-nav--actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ipad-nav-item {
  display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; color: var(--ink-2);
  padding: 8px 10px; border-radius: 10px;
  font-size: 0.8125rem; font-weight: 600; text-align: left;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.ipad-nav-item svg { width: 17px; height: 17px; flex: none; }
.ipad-nav-item:hover { background: var(--green-softer); color: var(--ink); }
.ipad-nav-item.active { background: var(--green-soft); color: var(--green-strong); }
.ipad-side-foot { margin-top: auto; padding: 10px 10px 2px; font-size: 0.625rem; color: var(--ink-3); }

.ipad-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.ipad-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 4px; font-size: 0.6875rem; font-weight: 600; color: var(--ink);
}
.ipad-status .icons { display: flex; gap: 4px; }
.ipad-status .icons i { width: 12px; height: 8px; border-radius: 2.5px; background: var(--ink); opacity: 0.85; }

.ipad-page { display: none; flex: 1; padding: 4px 16px 16px; overflow-y: auto; scrollbar-width: none; }
.ipad-page::-webkit-scrollbar { display: none; }
html:not(.js) [data-ipad-page="today"] { display: block; }
.ipad-page.active { display: block; animation: screenIn var(--motion-slide) var(--ease-out); }
.ipad-titlebar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 12px; }
.ipad-titlebar .t { flex: 1; }
.ipad-titlebar .t b { display: block; font-size: 1.3125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.ipad-titlebar .t small { display: block; font-size: 0.6875rem; color: var(--ink-3); margin-top: 2px; }
.ipad-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); border: 1px solid var(--line); flex: none; }
.ipad-avatar::after { content: ""; display: block; width: 10px; height: 10px; margin: 8px auto 0; border-radius: 50%; background: var(--green); opacity: 0.7; }
.ipad-addbtn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: var(--green); color: var(--on-green);
  border-radius: 999px; padding: 7px 13px; font-size: 0.71875rem; font-weight: 700;
}
.ipad-addbtn svg { width: 14px; height: 14px; }
.ipad-gen {
  font-size: 0.6875rem; font-weight: 700; color: var(--on-green);
  background: var(--green); border-radius: 999px; padding: 6px 12px; flex: none;
}
.ipad-dash { display: grid; grid-template-columns: 62% 38%; gap: 10px; align-items: start; }
.ipad-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: start; }
.ipad-col { min-width: 0; }
.ipad-dash .mock-card, .ipad-grid2 .mock-card { margin-bottom: 8px; }
.ipad-dash .mock-row, .ipad-grid2 .mock-row { margin-bottom: 7px; }
.ipad-dash .mock-group-label:first-child, .ipad-grid2 .mock-group-label:first-child { margin-top: 4px; }
.ipad-overview-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ipad-overview-strip span {
  min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.ipad-overview-strip small { display: block; font-size: 0.5625rem; color: var(--ink-3); margin-bottom: 2px; }
.ipad-overview-strip b { display: block; font-size: 0.75rem; color: var(--ink); font-weight: 700; }

/* ---------- 产品说明侧栏 ---------- */
.showcase-side { max-width: var(--readable); margin: 44px auto 0; }
.showcase-side h3 { font-size: 1.75rem; letter-spacing: -0.02em; color: var(--ink); font-weight: 700; margin-bottom: 10px; }
.showcase-side .lead { color: var(--ink-2); margin-bottom: 20px; }
.tab-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tab-switch button {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  min-height: 44px; border-radius: 999px; padding: 9px 16px; font-size: 0.875rem; font-weight: 600;
  transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast);
}
.tab-switch button:hover { border-color: var(--green); color: var(--green-strong); }
.tab-switch button[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--on-green); }
.tab-points { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tab-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--ink-2); }
.tab-points svg { width: 17px; height: 17px; color: var(--green-strong); flex: none; margin-top: 3px; }

/* ---------- 记录方式 ---------- */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.method-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--duration-medium), box-shadow var(--duration-medium);
}
.method-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.method-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* 录入方式用杏色/食物色点缀，与其他功能区的绿色拉开层次 */
.method-card .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--apricot-soft); color: var(--apricot); }
.method-card .ico svg { width: 21px; height: 21px; }
.method-card h3 { font-size: 1.09375rem; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.method-card .desc { font-size: 0.90625rem; color: var(--ink-2); }
.method-card .flow { font-size: 0.8125rem; color: var(--green-strong); font-weight: 600; }
.method-card .note { font-size: 0.78125rem; color: var(--ink-3); border-top: 1px dashed var(--line-strong); padding-top: 10px; }

/* 状态徽章：友好的状态说明 */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 4px 11px;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.shipped { background: var(--green-soft); color: var(--green-strong); }
.badge.preview { background: color-mix(in srgb, var(--ink-3) 13%, transparent); color: var(--ink-2); }
.badge.local { background: var(--blue-soft); color: var(--blue); }
.badge.online { background: var(--amber-soft); color: var(--amber); }
.badge.planned { background: color-mix(in srgb, var(--ink-3) 13%, transparent); color: var(--ink-3); }

/* 图例 */
.legend { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.legend .item { display: flex; align-items: center; gap: 8px; font-size: 0.84375rem; color: var(--ink-2); }
.legend .item small { color: var(--ink-3); }
.legend .item .swatch { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- AI 区块 ---------- */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ai-card {
  background: linear-gradient(160deg, var(--surface), var(--green-softer));
  border: 1px solid color-mix(in srgb, var(--green) 26%, var(--line));
  border-radius: var(--radius-lg); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-card .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--green); color: var(--on-green); }
.ai-card .ico svg { width: 21px; height: 21px; }
.ai-card h3 { font-size: 1.09375rem; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.ai-card .desc { font-size: 0.90625rem; color: var(--ink-2); }
.ai-note {
  margin-top: 20px; font-size: 0.84375rem; color: var(--ink-3);
  border-left: 3px solid var(--green); background: var(--surface);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
}

/* 长边界按需展开：首屏保持轻，愿意深读的人仍能看到完整说明。 */
.disclosure {
  margin-top: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: clip;
}
.disclosure summary {
  list-style: none; cursor: pointer; color: var(--ink); font-size: 0.875rem; font-weight: 700;
  padding: 16px 50px 16px 18px; position: relative;
  transition: background var(--duration-medium) ease, color var(--duration-medium) ease;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  width: 24px; height: 24px; margin-top: -12px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green-soft); color: var(--green-strong);
  font-size: 1.125rem; line-height: 1; transition: transform var(--duration-slow) var(--ease-spring), background var(--duration-medium) ease;
}
.disclosure summary:hover { background: var(--green-softer); color: var(--green-strong); }
.disclosure[open] summary::after { transform: rotate(45deg); }
.disclosure-body { border-top: 1px solid var(--line); padding: 16px 18px 18px; }
.disclosure-body p { font-size: 0.84375rem; line-height: 1.8; color: var(--ink-3); max-width: 86ch; }
@media (prefers-reduced-motion: no-preference) {
  .disclosure[open] .disclosure-body { animation: disclosureIn var(--motion-slide) var(--ease-out); }
}
@keyframes disclosureIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 隐私 ---------- */
/* Four equal columns keep the privacy promises readable without decorative rules. */
.privacy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.privacy-item {
  display: flex; gap: 14px; padding: 8px 4px 6px;
}
.privacy-item .ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--green-soft); color: var(--green-strong); }
.privacy-item .ico svg { width: 20px; height: 20px; }
.privacy-item h3 { font-size: 1rem; color: var(--ink); font-weight: 700; margin-bottom: 3px; }
.privacy-item p { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- 功能清单 ---------- */
.feature-group { margin-bottom: 34px; }
.feature-group > h3 {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.feature-table {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-row {
  display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(220px, 2fr) auto;
  gap: 16px; align-items: center; padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.feature-row:last-child { border-bottom: 0; }
.feature-row b { font-size: 0.9375rem; color: var(--ink); font-weight: 600; }
.feature-row .fd { font-size: 0.84375rem; color: var(--ink-2); }
.feature-row .badge { justify-self: end; }

/* 首页功能速览：只展示四类入口，完整表格仍在 /features/。 */
.feature-glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feature-glance-card {
  min-width: 0; display: flex; flex-direction: column; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; position: relative; overflow: hidden;
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) ease, border-color var(--duration-slow) ease;
}
.feature-glance-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 35%, var(--apricot)));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duration-slow) var(--ease-out);
}
.feature-glance-card:hover { color: inherit; transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.feature-glance-card:active { transform: translateY(-1px) scale(0.992); }
.feature-glance-card:hover::before { transform: scaleX(1); }
.feature-glance-number { position: absolute; top: 18px; right: 20px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-3); }
.feature-glance-card > .ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--green-soft); color: var(--green-strong); margin-bottom: 16px; }
.feature-glance-card > .ico svg { width: 21px; height: 21px; }
.feature-glance-card h3 { font-size: 1.0625rem; color: var(--ink); font-weight: 700; margin-bottom: 14px; }
.feature-glance-card ul { list-style: none; display: grid; gap: 10px; margin-bottom: 20px; }
.feature-glance-card li { display: grid; gap: 6px; align-items: start; font-size: 0.84375rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }
.feature-glance-card li .badge { width: fit-content; font-size: 0.65625rem; padding: 3px 8px; }
.feature-glance-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 700; color: var(--green-strong); }
.feature-glance-cta span { transition: transform var(--duration-slow) var(--ease-out); }
.feature-glance-card:hover .feature-glance-cta span { transform: translateX(4px); }

.section-more { margin-top: 26px; font-size: 0.90625rem; font-weight: 700; }
.section-more a { display: inline-flex; align-items: center; gap: 7px; }
.section-more a span { transition: transform var(--duration-slow) var(--ease-out); }
.section-more a:hover span { transform: translateX(4px); }

/* 三步路线轨道：连接线进入视口后铺开，方向清晰但不喧宾夺主。 */
.roadmap-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.roadmap-rail::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 22px; height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--apricot));
  opacity: 0.35; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duration-slow) var(--ease-out) var(--duration-fast);
}
.roadmap-rail.in-view::before { transform: scaleX(1); }
.roadmap-rail-step { position: relative; z-index: 1; min-width: 0; padding: 0 18px 0 0; }
.roadmap-rail-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); color: var(--green-strong); font-size: 0.8125rem; font-weight: 800; margin-bottom: 22px; }
.roadmap-rail-step > .ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green-strong); margin-bottom: 12px; }
.roadmap-rail-step > .ico svg { width: 17px; height: 17px; }
.roadmap-rail-step h3 { font-size: 1.0625rem; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.roadmap-rail-step p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.72; }

/* ---------- 路线（五阶段，按顺序纵向排布） ---------- */
.roadmap-grid { display: grid; gap: 14px; max-width: var(--readable); margin: 0 auto; }
.roadmap-card {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.roadmap-step {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-strong);
  font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.02em;
}
.roadmap-body { min-width: 0; }
.roadmap-body h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 1.0625rem; color: var(--ink); font-weight: 700; margin-bottom: 6px;
}
.roadmap-body h3 .ico {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex: none;
}
.roadmap-body h3 .ico svg { width: 15px; height: 15px; }
.roadmap-body .flag {
  font-size: 0.6875rem; font-weight: 700; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink-3) 12%, transparent);
  border-radius: 999px; padding: 3px 10px;
}
.roadmap-body > p { font-size: 0.90625rem; color: var(--ink-2); line-height: 1.75; }
.roadmap-items { list-style: none; margin: 12px 0 0; display: grid; gap: 7px; }
.roadmap-items li {
  position: relative; padding-left: 18px;
  font-size: 0.875rem; color: var(--ink-2); line-height: 1.6;
}
.roadmap-items li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
.roadmap-caveat {
  margin-top: 22px; font-size: 0.84375rem; color: var(--ink-3);
  display: flex; gap: 10px; align-items: flex-start;
}
.roadmap-caveat svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); margin-top: 2px; }
.roadmap-caveat a { color: var(--green-strong); font-weight: 600; }
.roadmap-caveat strong { color: var(--ink-2); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--readable); margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  list-style: none; display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 20px 24px; font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  position: relative; width: 20px; height: 20px; flex: none;
  transition: transform var(--duration-slow) var(--ease-spring);
}
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--green-strong); border-radius: 2px;
}
.faq summary .plus::before { width: 14px; height: 2px; }
.faq summary .plus::after { width: 2px; height: 14px; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .a { padding: 6px 24px 20px; font-size: 0.9375rem; color: var(--ink-2); }
.faq .a p { margin-bottom: 8px; }
.faq .a p:last-child { margin-bottom: 0; }
.faq details[open] .a { animation: faqIn var(--motion-slide) ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq summary:hover { background: var(--green-softer); }
.faq summary:focus-visible { outline-offset: -3px; }

/* ---------- 下载 / 最终 CTA ---------- */
.final-card {
  background: linear-gradient(160deg, var(--green-ink), var(--green-strong));
  border-radius: var(--radius-xl); padding: 72px 32px; color: #fff;
  position: relative; overflow: hidden; text-align: center;
}
/* 夜间用深绿渐变，保证白字对比度 */
:root[data-theme="dark"] .final-card {
  background: linear-gradient(160deg, #0d1913, #1d3a2c);
}
.final-card::after {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}
.final-card h2 { font-size: clamp(1.75rem, 4.4vw, 2.625rem); letter-spacing: -0.02em; font-weight: 750; margin-bottom: 14px; position: relative; }
.final-card p { color: rgba(255, 255, 255, 0.88); max-width: 52ch; margin: 0 auto 30px; font-size: 1.03125rem; position: relative; }
.final-card .hero-actions { position: relative; }
.final-card .button.primary { background: #fff; color: var(--green-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.final-card .button.primary:hover { background: #f2fbf5; transform: translateY(-1px); }
.final-card .statusline { margin-top: 22px; font-size: 0.84375rem; color: rgba(255, 255, 255, 0.74); position: relative; }
.final-card .statusline b { color: #fff; font-weight: 700; }
/* 简短友好的使用边界说明 */
.boundary {
  margin-top: 18px; font-size: 0.78125rem; color: rgba(255, 255, 255, 0.66);
  max-width: 56ch; line-height: 1.7; position: relative;
}
.fstatus-card .boundary { color: var(--ink-3); margin: 14px auto 0; }

/* ---------- 完整功能页 /features/ ---------- */
.fpage-hero { padding: 84px 0 56px; position: relative; overflow: clip; }
.fpage-hero::before {
  content: ""; position: absolute; inset: -180px -20% auto; height: 480px; z-index: -1;
  background:
    radial-gradient(42% 52% at 50% 0%, var(--green-softer) 0%, transparent 70%),
    radial-gradient(28% 38% at 80% 8%, var(--apricot-soft) 0%, transparent 70%);
}
.fpage-hero .kicker {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--green-strong); text-transform: uppercase; margin-bottom: 16px;
}
.fpage-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.14; letter-spacing: -0.024em;
  font-weight: 750; color: var(--ink); margin-bottom: 16px; text-wrap: balance;
}
.fpage-hero h1 em { font-style: normal; color: var(--green-strong); }
.fpage-hero .lead { font-size: 1.0625rem; color: var(--ink-2); max-width: 62ch; line-height: 1.8; }
.fpage-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--ink-2); font-weight: 500;
}
.fpage-status .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.fpage-index {
  position: sticky; top: var(--header-h); z-index: 20;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-block: 1px solid var(--line);
  padding: 12px 0;
}
.fpage-index .container { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fpage-index b {
  font-size: 0.78125rem; color: var(--ink-3); font-weight: 700;
  letter-spacing: 0.06em; margin-right: 6px; flex: none;
}
.fpage-index a {
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid transparent;
}
.fpage-index a:hover { color: var(--green-strong); background: var(--green-softer); }

.fsec { padding: 88px 0; }
.fsec--alt { background: var(--bg-elev); border-block: 1px solid var(--line); }
.fsec-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 34px; }
.fsec-ico {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-strong);
  box-shadow: var(--shadow-sm);
}
.fsec-ico svg { width: 25px; height: 25px; }
.fsec-head .eyebrow { margin-bottom: 8px; }
.fsec-head h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); font-weight: 700; margin-bottom: 10px; text-wrap: balance; }
.fsec-head .badge { margin-top: 2px; }

.fsec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.fcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.fcard h3 {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--green-strong); text-transform: uppercase; margin-bottom: 8px;
}
.fcard p { font-size: 0.90625rem; color: var(--ink-2); line-height: 1.75; }
.fcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fcard li { font-size: 0.90625rem; color: var(--ink-2); line-height: 1.7; padding-left: 18px; position: relative; }
.fcard li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.fcard li b { color: var(--ink); font-weight: 600; }
.fcard a { color: var(--green-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fcard--warn { border-color: color-mix(in srgb, var(--amber) 32%, var(--line)); }
.fcard--warn h3 { color: var(--amber); }
.fcard--warn li::before { background: var(--amber); }
.fcard--state { background: var(--green-softer); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
.fcard--state h3 { color: var(--green-strong); }

.fsec-more {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; font-size: 0.875rem; font-weight: 600;
}
.fsec-more a { color: var(--green-strong); display: inline-flex; align-items: center; gap: 4px; }
.fsec-more a:hover { color: var(--green); }
.fsec-more .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

.fstatus-card {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 56px 32px;
  box-shadow: var(--shadow);
}
.fstatus-card h2 { font-size: clamp(1.625rem, 3.6vw, 2.125rem); color: var(--ink); font-weight: 750; letter-spacing: -0.02em; margin-bottom: 12px; }
.fstatus-card > p { font-size: 1rem; color: var(--ink-2); max-width: 48ch; margin: 0 auto 26px; line-height: 1.8; }
.fstatus-card .statusline { margin-top: 20px; font-size: 0.84375rem; color: var(--ink-3); }
.fstatus-card .statusline b { color: var(--ink); font-weight: 700; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-elev); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand b { font-size: 1.0625rem; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer-brand p { font-size: 0.84375rem; color: var(--ink-3); margin-top: 12px; max-width: 32ch; line-height: 1.7; }
.footer-col h4 { font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; font-size: 0.90625rem; color: var(--ink-2); }
.footer-col a:hover { color: var(--green-strong); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--ink-3);
}
.footer-utility { display: flex; align-items: center; justify-content: flex-end; gap: 8px 18px; flex-wrap: wrap; }
.footer-utility a { color: var(--ink-2); font-weight: 600; transition: color var(--duration-fast) ease; }
.footer-utility a:hover { color: var(--green-strong); }

/* ---------- 法律 / 支持页 ---------- */
.legal-shell { min-height: 100vh; display: flex; flex-direction: column; }
.legal-nav {
  height: var(--header-h); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.legal-nav-right { display: flex; align-items: center; gap: 10px; }
.legal-nav .back { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.legal-nav .back:hover { color: var(--green-strong); }
.legal-page {
  flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 64px 24px 96px;
}
.legal-page .kicker { font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--green-strong); text-transform: uppercase; margin-bottom: 12px; }
.legal-page h1 { font-size: clamp(1.875rem, 4.6vw, 2.625rem); letter-spacing: -0.022em; color: var(--ink); font-weight: 750; margin-bottom: 14px; }
.legal-page .intro { font-size: 1.09375rem; color: var(--ink-2); margin-bottom: 18px; }
.legal-meta { display: flex; gap: 10px 24px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal-page h2 {
  font-size: 1.25rem; color: var(--ink); font-weight: 700; letter-spacing: -0.01em;
  margin: 38px 0 12px; padding-top: 6px;
}
.legal-page h3 { font-size: 1rem; color: var(--ink); font-weight: 700; margin: 22px 0 8px; }
.legal-page p { font-size: 0.96875rem; color: var(--ink-2); margin-bottom: 14px; line-height: 1.9; }
.legal-page ul { margin: 0 0 16px 1.3em; display: grid; gap: 9px; }
.legal-page li { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.8; }
.legal-page li::marker { color: var(--green-strong); }
.legal-page strong { color: var(--ink); font-weight: 700; }
.legal-page a { color: var(--green-strong); text-decoration: underline; text-underline-offset: 3px; }
.legal-note {
  margin-top: 40px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--green-softer); border: 1px solid var(--line);
  font-size: 0.875rem; color: var(--ink-2);
}
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 28px 0 8px; }
.support-grid a {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.support-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.support-grid b { font-size: 0.9375rem; color: var(--ink); font-weight: 700; }
.support-grid span { font-size: 0.78125rem; color: var(--ink-3); }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 24px; }
.notfound .code { font-size: clamp(5rem, 16vw, 8.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--green); }
.notfound h1 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--ink); letter-spacing: -0.02em; margin: 18px 0 10px; }
.notfound p { color: var(--ink-2); max-width: 44ch; margin: 0 auto 30px; }
.notfound .nf-lang { margin-top: 20px; font-size: 0.875rem; color: var(--ink-3); }
.notfound .nf-lang a { color: var(--green-strong); font-weight: 600; }

/* ---------- 语言切换 ---------- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.lang-switch:hover { color: var(--green-strong); border-color: var(--green); background: var(--green-softer); }
.lang-switch svg { flex: none; }
.language-picker{position:relative;flex:none}
.language-picker summary{list-style:none;cursor:pointer;user-select:none}
.language-picker summary::-webkit-details-marker{display:none}
.language-chevron{font-size:1rem;line-height:1;transition:transform .2s ease}
.language-picker[open] .language-chevron{transform:rotate(180deg)}
.language-picker summary:focus-visible{outline:3px solid var(--green-strong);outline-offset:3px}
.language-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:110;width:min(228px,calc(100vw - 32px));max-height:min(580px,calc(100vh - var(--header-h) - 20px));overflow:auto;padding:16px;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg,0 14px 38px #122b2326)}
.language-panel-title{font-size:.77rem;font-weight:700;letter-spacing:.06em;color:var(--ink-3);margin:0 0 8px}
.language-options{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.language-options a{display:flex;align-items:center;min-height:44px;min-width:0;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:.91rem;text-decoration:none}
.language-options a:hover,.language-options a:focus-visible{background:var(--green-soft);color:var(--green-strong)}
.language-options a[aria-current="page"]{background:var(--green-soft);color:var(--green-strong);font-weight:700}
.translation-notice{font-size:.82rem;line-height:1.6;color:var(--ink-2);margin:0 0 24px;padding:10px 0;border-bottom:1px solid var(--line)}
.translation-notice a{color:var(--green-strong);text-underline-offset:3px}
html[lang="ja"] body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif}
.lang-switch--mobile {
  display: flex; width: 100%; justify-content: center;
  height: 46px; margin-top: 12px; border-radius: 12px;
}
@media (max-width: 720px) {
  .site-header .language-picker,
  .legal-nav .lang-switch { display: none; }
}
@media (min-width: 721px) {
  .language-picker--mobile { display: none; }
}

/* ---------- 每天打开的理由 ---------- */
.daily-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.daily-card {
  display: flex; flex-direction: column; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px;
  transition: transform var(--duration-medium) ease, box-shadow var(--duration-medium) ease, border-color var(--duration-medium) ease;
}
.daily-card:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--apricot) 35%, var(--line)); }
.daily-card:active { transform: translateY(-1px) scale(0.992); }
.daily-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 45%, transparent); outline-offset: 3px; }
.daily-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.daily-card .ico {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--apricot-soft); color: var(--apricot);
}
.daily-card .ico svg { width: 21px; height: 21px; }
.daily-card .when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--apricot); text-transform: uppercase; }
.daily-card h3 { font-size: 1.09375rem; color: var(--ink); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.daily-card p { font-size: 0.90625rem; color: var(--ink-2); line-height: 1.7; }
.daily-card-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 18px;
  color: var(--green-strong); font-size: 0.84375rem; font-weight: 700;
}
.daily-card-cta span { transition: transform var(--duration-fast) ease; }
.daily-card:hover .daily-card-cta span { transform: translateX(3px); }

/* ---------- 家庭节奏愿景 ---------- */
.vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; position: relative; }
.vision-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--green); border-radius: var(--radius-lg);
  padding: 24px;
}
.vision-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vision-card .ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-strong);
}
.vision-card .ico svg { width: 20px; height: 20px; }
.vision-tag { font-size: 0.71875rem; font-weight: 700; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.vision-tag.current { background: var(--green-soft); color: var(--green-strong); }
.vision-tag.next { background: var(--blue-soft); color: var(--blue); }
.vision-tag.long { background: var(--apricot-soft); color: var(--apricot); }
.vision-card h3 { font-size: 1.0625rem; color: var(--ink); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.vision-card p { font-size: 0.90625rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- 理念页 /philosophy/ ---------- */
.philo-hero { padding: 84px 0 48px; position: relative; overflow: clip; }
.philo-hero::before {
  content: ""; position: absolute; inset: -180px -20% auto; height: 480px; z-index: -1;
  background:
    radial-gradient(42% 52% at 50% 0%, var(--green-softer) 0%, transparent 70%),
    radial-gradient(28% 38% at 80% 8%, var(--apricot-soft) 0%, transparent 70%);
}
.philo-hero .container { max-width: 760px; text-align: center; }
.philo-hero .kicker {
  font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--green-strong); text-transform: uppercase; margin-bottom: 16px;
}
.philo-hero h1 {
  font-size: clamp(1.875rem, 4.6vw, 2.75rem); letter-spacing: -0.022em; line-height: 1.14;
  color: var(--ink); font-weight: 750; margin-bottom: 16px; text-wrap: balance;
}
.philo-hero h1 em { font-style: normal; color: var(--green-strong); }
.philo-hero .intro { font-size: 1.0625rem; color: var(--ink-2); line-height: 1.8; }
.philo-hero .legal-meta { justify-content: center; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.philo-sec { padding: 56px 0; }
.philo-sec--alt { background: var(--bg-elev); border-block: 1px solid var(--line); }
.philo-sec .container { max-width: 760px; }
.philo-sec h2 {
  font-size: clamp(1.5rem, 3.2vw, 1.875rem); color: var(--ink); font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.belief-list { list-style: none; margin: 0; display: grid; gap: 12px; }
.belief-list li {
  position: relative; padding-left: 22px;
  font-size: 0.96875rem; color: var(--ink-2); line-height: 1.8;
}
.belief-list li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
.belief-list li b { color: var(--ink); font-weight: 700; }
.phase-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 28px;
}
.phase-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.phase-tag.current { background: var(--green-soft); color: var(--green-strong); }
.phase-tag.next { background: var(--blue-soft); color: var(--blue); }
.phase-tag.long { background: var(--apricot-soft); color: var(--apricot); }
.phase-block p { font-size: 0.96875rem; color: var(--ink-2); line-height: 1.85; margin-bottom: 12px; }
.phase-block p:last-child { margin-bottom: 0; }
.phase-block a { color: var(--green-strong); font-weight: 600; }
.phase-list, .phase-steps { margin: 6px 0 14px 1.3em; display: grid; gap: 8px; }
.phase-list li, .phase-steps li { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.75; }
.phase-list li::marker, .phase-steps li::marker { color: var(--green-strong); }
.phase-steps li b { color: var(--ink); }
.phase-caveat {
  padding: 14px 18px; border-left: 3px solid var(--apricot);
  background: var(--apricot-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.phase-caveat a { color: var(--apricot); }
.misread-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.misread-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.misread-card h3 { font-size: 1rem; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.misread-card p { font-size: 0.90625rem; color: var(--ink-2); line-height: 1.75; }
.philo-more { margin-top: 26px; font-size: 0.9375rem; color: var(--ink-2); }
.philo-more a { color: var(--green-strong); font-weight: 600; }

/* ---------- 滚动显现（分组轻微错峰；只动 transform / opacity，保持清晰与流畅） ---------- */
.js .reveal {
  opacity: 1; transform: translateY(var(--motion-distance));
  transition: transform var(--motion-reveal) var(--ease-out);
  /* Avoid retaining compositor layers for every offscreen card. */
}
.js .reveal.in-view { opacity: 1; transform: none; will-change: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .device-grid { grid-template-columns: 1fr; gap: 40px; }
  .device-col--ipad { order: 2; }
}

@media (max-width: 960px) {
  .section { padding: 72px 0; }
  #daily { padding-top: 60px; }
  .privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap-inline: 24px; }
  .why-grid--outcomes, .feature-glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tab-points { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .container { padding: 0 18px; }
  .section { padding: 60px 0; }
  .why-grid--outcomes, .feature-glance-grid { grid-template-columns: 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }
  /* 四步流程固定为完整的一行，不再出现 3 + 1 的孤立卡片。 */
  .story-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .story-progress-link { justify-content: center; gap: 5px; min-width: 0; padding: 8px 5px; font-size: 0.75rem; }
  .story-progress-link .n { min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.625rem; }

  /* 愿景在手机上改成连续时间线，避免三张大卡片机械堆叠。 */
  .vision-grid { grid-template-columns: 1fr; gap: 0; }
  .vision-grid::before {
    content: ""; position: absolute; left: 20px; top: 18px; bottom: 20px; width: 2px;
    background: linear-gradient(180deg, var(--green), var(--blue), var(--apricot));
    opacity: 0.34; transform: scaleY(0); transform-origin: 50% 0;
    transition: transform var(--duration-slow) var(--ease-out) var(--duration-fast);
  }
  .vision-grid.in-view::before { transform: scaleY(1); }
  .vision-card {
    border: 0; border-radius: 0; background: transparent;
    padding: 0 0 32px 62px; position: relative; overflow: visible;
  }
  .vision-card:last-child { padding-bottom: 0; }
  .vision-card .top { min-height: 42px; margin-bottom: 10px; justify-content: flex-start; }
  .vision-card .ico { position: absolute; left: 0; top: 0; z-index: 1; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
  .vision-card .vision-tag { white-space: normal; }
  .vision-card h3 { font-size: 1.125rem; margin-bottom: 6px; }
  .vision-card p { max-width: 34ch; }

  .roadmap-rail { grid-template-columns: 1fr; gap: 28px; }
  .roadmap-rail::before {
    left: 21px; right: auto; top: 20px; bottom: 22px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--green), var(--blue), var(--apricot));
    transform: scaleY(0); transform-origin: 50% 0;
  }
  .roadmap-rail.in-view::before { transform: scaleY(1); }
  .roadmap-rail-step { padding-left: 64px; padding-right: 0; }
  .roadmap-rail-number { position: absolute; left: 0; top: 0; margin: 0; }
  .feature-glance-card { padding: 22px 20px; }
  .hero { padding: 48px 0 20px; }
  #daily { padding-top: 52px; }
  .section-head { margin-bottom: 40px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .theme-toggle { height: 42px; width: 42px; padding: 0; justify-content: center; }
  .theme-toggle .theme-toggle-label { display: none; }
  .site-footer { padding: 46px 0 28px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .footer-brand { grid-column: 1 / -1; padding-bottom: 4px; }
  .footer-brand p { max-width: 38ch; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; }
  .footer-col:last-child a { display: inline-flex; margin: 0 12px 4px 0; }
  .footer-bottom { display: grid; gap: 14px; margin-top: 34px; padding-top: 18px; line-height: 1.7; }
  .footer-owner { max-width: 36ch; }
  .footer-utility { justify-content: flex-start; gap: 8px; }
  .footer-utility a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 5px 11px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    font-size: 0.78125rem;
  }
  .feature-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .feature-row .badge { justify-self: start; }
  .device-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 390px; }
  .device-switch-btn { min-width: 0; min-height: 46px; padding: 8px 8px; font-size: 0.78125rem; white-space: nowrap; }
  .device-grid { gap: 30px; }
  .phone { width: min(320px, 92vw); }
  .ipad { width: min(410px, 94vw); border-radius: 28px; padding: 9px; }
  .ipad-screen { border-radius: 20px; aspect-ratio: 3 / 4; }
  .ipad-sidebar { width: 34%; max-width: 136px; padding: 10px 7px; }
  .ipad-nav-item { font-size: 0.75rem; padding: 7px 8px; }
  .ipad-nav--actions { display: none; }
  .ipad-side-foot { font-size: 0.5625rem; }
  .ipad-page { padding-inline: 12px; }
  .ipad-dash, .ipad-grid2 { grid-template-columns: 1fr; }
  .ipad-dash .ipad-col-side { display: none; }
  .ipad-overview-strip { display: none; }
  .showcase-side { margin-top: 34px; }
  .final-card { padding: 56px 24px; }
  .legal-page { padding: 44px 18px 80px; }
  .legal-nav { padding: 0 18px; }
  .hero-assurances { gap: 10px; }
  .hero-assurances i { display: none; }
  .fpage-hero { padding: 56px 0 40px; }
  .fpage-index { position: static; padding: 10px 0; }
  .fsec { padding: 64px 0; }
  .fsec-grid { grid-template-columns: 1fr; }
  .fstatus-card { padding: 40px 20px; }
  .philo-hero { padding: 56px 0 40px; }
  .philo-sec { padding: 40px 0; }
  .phase-block { padding: 20px 18px; }
  .roadmap-card { gap: 14px; padding: 18px 16px; }
}

@media (max-width: 400px) {
  .phone { width: min(288px, 90vw); }
  .ipad { width: 92vw; }
  .ipad-sidebar { max-width: 118px; }
  .ipad-brand span { display: none; }
  .ipad-nav-item { gap: 7px; padding-inline: 7px; font-size: 0.6875rem; }
  .fsec-head { flex-direction: column; gap: 12px; }
  .roadmap-step { width: 40px; height: 40px; font-size: 0.875rem; }
}

@media (min-width: 721px) {
  .theme-toggle--mobile { display: none; }
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .mock-screen.active, .ipad-page.active { animation: none; }
  .phone, .ipad { transition: none; }
  main, .fsec, .fstatus-card { animation: none !important; }

  /* 滚动叙事：取消 sticky 舞台与滚动联动，改为普通文档流 + 静态画面 */
  .js .story-track { grid-template-columns: 1fr; gap: 28px; }
  .js .story-stage-col { position: static; display: block; }
  .js .story-progress { flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
  .js .story-progress-link {
    border: 1px solid var(--line-strong); background: var(--surface);
    padding: 8px 14px; color: var(--ink-2);
  }
  .js .story-progress-link .n { min-width: 20px; height: 20px; background: var(--green-soft); color: var(--green-strong); }
  .js .story-progress-link[aria-current="step"] { background: var(--green); color: var(--on-green); }
  .js .story-progress-link[aria-current="step"] .n { background: rgba(255, 255, 255, 0.18); color: var(--on-green); }
  .js .story-stage { display: none !important; }
  .js .story-mini { display: grid !important; }
  .js .story-phone { width: 284px; }
  .js .story-chapter {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 22px 20px;
    min-height: auto; display: grid; gap: 16px;
  }
  .story-chapters { padding-top: 0; }
}

/* ---------- 打印 ---------- */
@media print {
  .site-header, .site-footer, .mock-tabbar, .nav-toggle, .device-switch, .theme-toggle, .fpage-index { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Membership concept: preserve the existing site tokens and native app identity. */
.member-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:64px}.member-benefits{list-style:none;padding:0;margin:24px 0}.member-benefits li{padding:12px 0;border-bottom:1px solid var(--line)}.member-benefits strong{display:block;font-size:1rem;color:var(--ink)}.member-benefits span,.member-note{font-size:0.875rem;line-height:1.85;color:var(--ink-2)}.member-pass{padding:24px;border-radius:var(--radius-lg);background:var(--member-background);color:#fff;box-shadow:0 16px 42px rgba(7,61,44,.1)}.member-pass-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:0.875rem}.member-pass-top>span:first-child{display:flex;gap:10px;align-items:center;font-size:1.125rem;font-weight:650}.member-pass img{border-radius:10px}.member-pass h3{font-size:clamp(1.375rem,2.5vw,1.75rem);line-height:1.4;color:#fff;margin:34px 0 8px}.member-pass>p{font-size:0.875rem;color:#e2f3e8}.member-pass-fields{display:flex;justify-content:space-between;gap:18px;margin-top:34px}.member-pass-fields span{display:block;font-size:0.875rem;color:#dcefe5}.member-pass-fields strong{display:block;font-size:1rem;margin-top:5px;color:white}.member-caption{text-align:center;color:var(--ink-3);font-size:0.875rem;margin:16px 0}.member-preview>.member-note{padding:0 8px}@media(max-width:760px){.member-layout{grid-template-columns:1fr;gap:30px}.member-preview{max-width:440px;width:100%;margin:auto}.member-pass{padding:20px}}

/* 2026-09-09 audit: align new sections with the existing type and control scale. */
.member-layout h2{font-size:clamp(1.75rem,4.2vw,2.5rem);line-height:1.3;letter-spacing:-.022em;color:var(--ink);font-weight:700;margin:0 0 18px;text-wrap:balance}
.member-layout .lead{font-size:1.0625rem;line-height:1.8;max-width:58ch}
.member-pass{border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow)}
.member-pass-top>span:first-child{min-width:0}.member-pass-top img{flex-shrink:0}
.member-benefits li{padding:16px 0}.member-benefits strong{margin-bottom:4px}
.member-benefits span,.member-note{font-size:.9375rem;line-height:1.8}
.button,.button.small,.nav-toggle,.mobile-nav a,.support-grid a{border-radius:var(--radius-control)}
.button.small{min-height:44px}
.daily-card,.method-card,.feature-glance-card,.vision-card{border-radius:var(--radius-lg)}
.theme-toggle-label,.lang-switch,.support-grid span,.legal-meta,.vision-tag,.daily-card .when,.feature-glance-cta{font-size:.875rem}
.legal-page p,.legal-page li{overflow-wrap:anywhere}.legal-page p a,.legal-page li a{text-decoration:underline;text-underline-offset:3px}
.member-note a{color:var(--green-strong);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){.daily-card:hover,.feature-glance-card:hover,.method-card:hover,.why-card:hover{transform:translateY(-2px)}}
@media(hover:none){.daily-card:hover,.feature-glance-card:hover,.method-card:hover,.why-card:hover,.button:hover{transform:none;box-shadow:var(--shadow-sm)}}
@media(prefers-reduced-motion:reduce){html.theme-switching body,html.theme-switching .site-header,html.theme-switching .section--alt,html.theme-switching .theme-toggle{transition:none!important}.daily-card:hover,.feature-glance-card:hover,.method-card:hover,.why-card:hover,.button:hover{transform:none}.js .reveal{transition-delay:0ms!important}}
@media(max-width:600px){.member-layout h2{font-size:1.75rem;line-height:1.35}.member-pass h3{font-size:1.5rem}.member-pass-top{flex-wrap:wrap}.member-pass-fields{flex-wrap:wrap}.member-layout{gap:32px}}

/* Functional motion: hover, keyboard focus and press share the same cues. */
.fsec{scroll-margin-top:var(--feature-scroll-offset,150px)}
.fpage-index a{display:inline-flex;align-items:center;min-height:44px;transition:color var(--duration-fast) ease,background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,transform var(--duration-fast) ease}
.fpage-index a[aria-current="location"]{color:var(--green-strong);background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 35%,var(--line));}
.button,.nav-cta,.theme-toggle,.lang-switch,.fcard,.support-grid a{transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-medium) ease,border-color var(--duration-fast) ease,background-color var(--duration-fast) ease,color var(--duration-fast) ease}
.button:active,.nav-cta:active,.theme-toggle:active,.lang-switch:active,.fpage-index a:active{transform:translateY(1px) scale(var(--motion-press-scale))}
.fcard:focus-within{border-color:var(--green);box-shadow:var(--shadow-sm)}
.fsec-more a,.footer-col a{transition:color var(--duration-fast) ease,text-decoration-color var(--duration-fast) ease;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.fsec-more a:hover,.footer-col a:hover,.fsec-more a:focus-visible,.footer-col a:focus-visible{text-decoration-color:currentColor}
@media(hover:hover) and (pointer:fine){.fcard:hover{border-color:color-mix(in srgb,var(--green) 32%,var(--line));box-shadow:var(--shadow-sm)}.fcard--warn:hover{border-color:var(--amber)}.fpage-index a:hover{transform:translateY(-1px)}}
@media(max-width:760px){.fpage-index .container{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding-inline:18px}.fpage-index a{white-space:nowrap;flex-shrink:0}.fpage-index b{display:none}.fpage-index{position:sticky;top:var(--header-h);padding-block:6px}}
@media(prefers-reduced-motion:reduce){.button:active,.nav-cta:active,.theme-toggle:active,.lang-switch:active,.fpage-index a:active,.fpage-index a:hover{transform:none}.fcard,.fpage-index a{transition:none}}

/* Platform selector: same visual language, distinct product capabilities. */
.platform-tabs,.android-tabs{display:flex;gap:6px;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);width:fit-content;max-width:100%;margin:24px auto 32px}
.platform-tabs button,.android-tabs button{border:0;background:transparent;color:var(--ink-2);border-radius:var(--radius-control);min-height:46px;padding:10px 24px;font-size:1rem;font-weight:600;transition:background-color var(--duration-fast),color var(--duration-fast),transform var(--duration-fast)}
.platform-tabs [aria-selected="true"],.android-tabs [aria-selected="true"]{background:var(--green-strong);color:var(--on-green)}
.platform-tabs button:active,.android-tabs button:active{transform:scale(var(--motion-press-scale))}
.platform-panel[hidden],.android-gallery [hidden]{display:none!important}
.platform-panel{animation:platformIn var(--motion-slide) var(--ease-out);outline-offset:8px}
@keyframes platformIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.platform-status{font-size:0.875rem;color:var(--green-strong);font-weight:650;margin-bottom:14px}
.platform-note{font-size:0.875rem;line-height:1.8;color:var(--ink-3);margin:16px 0 24px}
.platform-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px;padding:24px 0}
.platform-layout--text-only{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto;align-items:start}
.platform-copy h3{font-size:clamp(1.5rem,3vw,2rem);line-height:1.35;color:var(--ink);margin:0 0 18px}
.platform-copy>p:not(.platform-note):not(.platform-status){font-size:1.0625rem;line-height:1.85}
.platform-copy ul{padding-left:22px;margin-top:20px}.platform-copy li{padding:6px 0;font-size:1rem;line-height:1.75}
.android-gallery{min-width:0}.android-tabs{margin:0 auto 18px}.android-tabs button{font-size:0.875rem;padding:8px 16px}.android-gallery figure{margin:0;text-align:center}.android-gallery img{width:auto;max-width:100%;max-height:590px;margin:auto;border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.android-gallery figcaption{font-size:0.875rem;margin-top:16px;color:var(--ink-3)}
.harmony-state{padding:56px 26px;border:1px solid var(--line-strong);border-radius:var(--radius-xl);background:var(--surface);text-align:center}.harmony-state img{border-radius:22px;margin:0 auto 24px}.harmony-state h3{font-size:1.5rem;color:var(--ink);line-height:1.35}.harmony-state p{font-size:1.0625rem;margin:14px 0}.harmony-state span{font-size:0.875rem;color:var(--ink-3)}
.platform-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:18px}.platform-entry span{font-size:0.875rem;color:var(--ink-3)}.platform-entry a{padding:10px 16px;min-height:44px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);font-size:0.875rem}
@media(hover:hover){.platform-tabs button:hover:not([aria-selected="true"]),.android-tabs button:hover:not([aria-selected="true"]){background:var(--green-soft);color:var(--green-strong)}}
@media(max-width:760px){.platform-layout{grid-template-columns:1fr;gap:24px}.platform-tabs{width:100%}.platform-tabs button{flex:1;min-width:0;padding:10px 8px;font-size:0.9375rem}.android-gallery img{max-height:540px}.harmony-state{padding:34px 20px}}
@media(prefers-reduced-motion:reduce){.platform-panel{animation:none}.platform-tabs button,.android-tabs button{transition:none}.platform-tabs button:active,.android-tabs button:active{transform:none}}
@media print{.platform-tabs,.android-tabs{display:none}.platform-panel[hidden],.android-gallery [hidden]{display:block!important}}
/* Focus on a panel marks its top edge without drawing a frame around a long demo. */
.platform-panel:focus-visible{outline:none;box-shadow:inset 0 2px var(--green)}

/* Find the right version directly from the first screen. */
.hero-platforms{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}.hero-platforms a{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 18px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);font-size:0.9375rem;font-weight:600;transition:background-color var(--duration-fast),border-color var(--duration-fast)}.hero-platforms a:hover{background:var(--green-soft);border-color:var(--green)}

/* Keep the illustrative phone, bezel and status bar in proportion. */
.phone.story-phone { padding: 9px; border-radius: 42px; }
.story-phone .phone-screen { aspect-ratio: 9 / 18; border-radius: 33px; }
.phone .mock-status { padding-inline: 18px; }
.phone .mock-status .icons { gap: 3px; }
.phone .mock-status .icons i { width: 10px; height: 7px; }
.story-screen { padding-bottom: 12px; }
.platform-details { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 12px; }
.platform-details > h3 { font-size: 1.5rem; margin-bottom: 18px; color: var(--ink); }
.platform-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 0; list-style: none; }
.platform-steps li { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.platform-steps b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 1.0625rem; }
.platform-steps p { margin: 0; line-height: 1.8; color: var(--ink-2); font-size: 0.9375rem; }
.platform-help { margin-top: 20px; }
.platform-help details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.platform-help summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 28px; }
.platform-help summary:hover { color: var(--green-strong); }
.platform-help summary:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; border-radius: 4px; }
.platform-help details p { margin: 12px 0 0; max-width: 78ch; color: var(--ink-2); line-height: 1.85; }
.android-gallery img { display: block; height: auto; object-fit: contain; }
@media (min-width:860px) and (max-height:740px), (min-width:860px) and (max-width:1040px) {
  .js .story-stage { display:none; }
  .js .story-mini { display:block; }
  .js .story-track { grid-template-columns: minmax(120px,1fr) minmax(0,4fr); gap:32px; }
  .js .story-chapter { min-height:0; padding-bottom:36px; }
  .js .story-chapter .story-copy { opacity:1; transform:none; }
}
@media (max-width:760px) {
  .platform-steps { grid-template-columns:1fr; }
  .platform-steps li { padding:18px; }
}

.web-entry-note{font-size:0.8125rem;color:var(--ink-3);max-width:52ch;margin:0 auto 18px;line-height:1.8}

/* Planned circularity: a concise overview with progressively disclosed rules. */
.cycle-hero{padding:70px 0 42px;background:var(--bg-elev);border-bottom:1px solid var(--line)}
.cycle-hero .container{max-width:1000px}
.cycle-hero h1{font-size:clamp(2.125rem,5vw,3.625rem);line-height:1.16;letter-spacing:-.035em;margin:18px 0 24px;max-width:20ch}
.cycle-hero h1 em{font-style:normal;color:var(--green-strong)}
.cycle-hero .lead{max-width:65ch;line-height:1.85}
.cycle-status{color:var(--green-strong);font-size:0.8125rem;line-height:1.9;margin:20px 0}
.cycle-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.cycle-actions a{white-space:normal;text-align:center}
.cycle-back{display:inline-flex;min-height:44px;align-items:center;color:var(--green-strong);font-weight:600}
.cycle-index{display:flex;flex-wrap:wrap;gap:8px;padding-top:24px;padding-bottom:24px}
.cycle-index a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-control);font-size:0.875rem;color:var(--green-strong);background:var(--surface)}
.cycle-index a:hover{background:var(--green-softer)}
.cycle-index a:focus-visible,.material-card>a:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.circular-grid article>a{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:0.875rem;color:var(--green-strong)}
.cycle-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cycle-evidence article{border-top:2px solid var(--line-strong);padding-top:18px;min-width:0}
.cycle-evidence article>span{font-size:0.75rem;color:var(--ink-3)}
.cycle-evidence h3{font-size:1.25rem;line-height:1.5;margin:12px 0;overflow-wrap:anywhere}
.cycle-evidence p{font-size:0.9375rem;line-height:1.85;color:var(--ink-2)}
.cycle-example{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:40px;padding:28px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface)}
.cycle-example h3{font-size:1.4375rem;line-height:1.5;margin:10px 0}.cycle-example p{font-size:0.875rem;line-height:1.85;color:var(--ink-2)}
.cycle-example dl{margin:0}.cycle-example dl>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.cycle-example dt,.cycle-example dd{font-size:0.875rem;line-height:1.8;margin:0}.cycle-example dd{color:var(--ink-2)}
.material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.material-card{padding:28px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);min-width:0}
.material-heading{display:flex;gap:16px;align-items:flex-start}.material-heading>span{font-size:0.875rem;color:var(--green-strong);padding-top:3px}.material-heading .eyebrow{font-size:0.6875rem;margin:0 0 10px}
.material-card h2{font-size:1.5rem;line-height:1.45;margin:0}.material-card dl{margin:24px 0 0}.material-card dl>div{margin-bottom:20px}
.material-card dt{font-size:0.875rem;font-weight:650;margin-bottom:6px}.material-card dd{margin:0;font-size:0.875rem;line-height:1.85;color:var(--ink-2)}
.material-card>a{display:inline-flex;align-items:center;min-height:44px;font-size:0.8125rem;color:var(--green-strong)}
.cycle-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 44px;padding-left:24px;margin-top:24px;color:var(--ink-2);line-height:1.85}
@media(max-width:800px){.cycle-evidence,.cycle-example,.material-grid{grid-template-columns:1fr}.cycle-example{gap:16px}.cycle-hero{padding:46px 0 30px}}
@media(max-width:520px){.material-card{padding:22px}.material-card h2{font-size:1.375rem}.cycle-example{padding:22px}.cycle-example dl>div{flex-direction:column;gap:3px}.cycle-checks{grid-template-columns:1fr}.cycle-actions{flex-direction:column}.cycle-index a{font-size:0.8125rem}}
.circular-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.circular-grid article,.circular-scope article{padding:24px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);min-width:0}
.circular-grid article>span{font-size:0.75rem;color:var(--green-strong);font-weight:600}
.circular-grid h3,.circular-scope h3{font-size:1.25rem;line-height:1.5;margin:12px 0}
.circular-grid p,.circular-scope p{font-size:0.9375rem;line-height:1.85;color:var(--ink-2);margin:0}
.circular-note{font-size:0.875rem;line-height:1.9;color:var(--ink-2);margin-top:24px;max-width:85ch;text-wrap:pretty}
.circular-detail>.container{max-width:1000px}
.circular-detail>.container>p{line-height:1.9}
.circular-scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.circular-scope .phase-tag{font-size:0.6875rem;white-space:normal;line-height:1.7}
.circular-subtitle{font-size:1.5rem;line-height:1.5;margin:42px 0 24px}
.circular-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0 0 32px}
.circular-flow li{border-top:2px solid var(--line-strong);padding-top:16px;min-width:0}
.circular-flow strong{font-size:1rem;color:var(--green-strong)}
.circular-flow p{font-size:0.875rem;line-height:1.9;color:var(--ink-2);margin:10px 0 0}
.circular-faq{border-top:1px solid var(--line-strong)}
.circular-faq details{border-bottom:1px solid var(--line-strong)}
.circular-faq summary{cursor:pointer;padding:20px 4px;min-height:48px;font-size:1.0625rem;font-weight:600;line-height:1.7}
.circular-faq summary:hover{color:var(--green-strong)}
.circular-faq summary:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
.circular-faq details>div{padding:0 4px 20px;max-width:80ch}
.circular-faq p{font-size:0.9375rem;line-height:1.9;color:var(--ink-2);margin:0 0 12px}
.circular-detail a,.circular-note a{text-underline-offset:4px}
@media(max-width:800px){.circular-grid,.circular-scope{grid-template-columns:1fr}.circular-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.circular-grid article,.circular-scope article{padding:22px}}
@media(max-width:520px){.circular-flow{grid-template-columns:1fr;gap:18px}.circular-subtitle{font-size:1.375rem}.circular-faq summary{font-size:1rem}.circular-note{font-size:0.8125rem}}

/* Keyboard and touch feedback follows the same border language as hover. */
.feature-glance-card:focus-visible,.daily-card:focus-visible,.support-grid a:focus-visible{border-color:var(--green);box-shadow:var(--shadow-sm)}
.disclosure:focus-within,.faq details:focus-within{border-color:var(--green)}
@media(hover:none){.nav-cta:hover,.support-grid a:hover,.fpage-index a:hover{transform:none}.button:hover svg,.nav-cta:hover svg{transform:none}}
@media(prefers-reduced-motion:reduce){.device-col:hover>.phone,.device-col:hover>.ipad,.support-grid a:hover,.button:hover svg,.nav-cta:hover svg,.why-card:hover .ico,.daily-card:hover .ico,.method-card:hover .ico,.ai-card:hover .ico,.vision-card:hover .ico{transform:none}}

/* Product hierarchy: one primary action, secondary exploration, quiet utilities. */
.hero .sub{max-width:48ch;line-height:1.75;margin-bottom:26px;text-wrap:balance}
.hero-actions{align-items:center;gap:22px;margin-bottom:14px}
.hero-actions .primary{box-shadow:none}
.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 8px;color:var(--green-strong);font-size:0.96875rem;font-weight:600;border-radius:var(--radius-control);text-underline-offset:5px}
.hero-secondary:hover{text-decoration:underline}
.hero-secondary span{transition:transform var(--duration-fast) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.hero-secondary:hover span{transform:translateX(3px)}}
.hero-platforms{align-items:center;gap:4px 16px;margin:22px auto;max-width:640px}
.hero-platforms .platform-label{font-size:0.8125rem;color:var(--ink-3)}
.hero-platforms a{border:0;background:transparent;padding:0 4px;min-height:44px;font-size:0.875rem;font-weight:500}
.hero-platforms a:hover{background:transparent;text-decoration:underline;text-underline-offset:5px}
.hero-status{display:block;max-width:720px;margin:14px auto 0;padding:0;background:transparent;border:0;border-radius:0;line-height:1.8;text-wrap:pretty}
.hero-status::before{display:none}
.hero-status+.hero-status{margin-top:4px}
.site-header .lang-switch,.site-header .theme-toggle{border-color:transparent;background:transparent;font-size:0.8125rem;padding-inline:10px}
.site-header .lang-switch:hover,.site-header .theme-toggle:hover{background:var(--green-softer)}
@media(max-width:960px){.site-header .nav-cta{display:inline-flex;flex:none;white-space:nowrap}.site-header .nav-toggle{margin-left:0;flex:none}}
@media(max-width:720px){
 .site-header .theme-toggle{display:none}
 .site-header .container{gap:8px}
 .site-header .nav-cta{font-size:0.75rem;padding:0 12px;gap:6px}
 .hero .sub{max-width:29ch}
 .hero-actions{gap:8px 16px}
 .hero-actions .primary{min-height:48px;padding-inline:20px}
 .hero-secondary{font-size:0.875rem;min-height:48px;padding-inline:4px}
 .hero-platforms{gap:0 14px;margin-block:18px}
 .hero-platforms .platform-label{flex-basis:100%}
 .hero-status{font-size:0.75rem;max-width:42ch}
}
@media(max-width:360px){.site-header .container{padding-inline:12px;gap:6px}.site-header .brand{font-size:0.9375rem;gap:6px}.site-header .nav-cta{padding-inline:10px}.site-header .nav-cta svg{display:none}}
@media(prefers-reduced-motion:reduce){.hero-secondary span{transition:none;transform:none!important}}

/* Release information uses the existing palette, spacing and corner radii. */
.hero-downloads{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:22px auto 14px}
.hero-downloads .button{font-size:0.875rem;min-height:44px;padding:10px 18px;line-height:1.5}
.hero{min-height:0;padding:64px 0 56px}
.hero-download-group{display:flex;align-items:center;justify-content:center;gap:16px;max-width:520px;margin:24px auto 18px;padding-top:20px;border-top:1px solid var(--line)}
.hero-download-label{font-size:0.8125rem;color:var(--ink-3);white-space:nowrap}
.hero-download-group .hero-downloads{margin:0;gap:10px}
#product{border-top:1px solid var(--line);padding-top:64px}
@media(max-width:720px){
 .hero{padding:36px 0 40px}
 .hero-lockup{margin-bottom:22px}
 .hero-download-group{flex-direction:column;gap:10px;margin-top:20px;padding-top:18px}
 .hero-download-group .hero-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:360px}
 .hero-downloads .button{padding-inline:10px}
 #product{padding-top:44px}
}
.release-card a.button.primary{color:var(--on-green);padding:12px 16px;line-height:1.5;white-space:normal;text-align:center}
.release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.release-card{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);min-width:0}
.release-card h3{font-size:1.25rem;line-height:1.4;margin:0 0 18px;color:var(--ink)}
.release-card .release-status{font-size:1.0625rem;font-weight:600;color:var(--green-strong);margin:0 0 8px}
.release-card p{font-size:0.875rem;line-height:1.7;color:var(--ink-2);margin:0 0 20px;overflow-wrap:anywhere;text-wrap:pretty}
#download .lead{text-wrap:pretty}
.release-card a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;font-size:0.875rem;font-weight:600;color:var(--green-strong);text-underline-offset:4px}
.release-card a:hover{text-decoration:underline}
.release-card a:focus-visible,.support-platforms a:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
.release-date{font-size:0.8125rem;color:var(--ink-3);line-height:1.8;margin-top:22px}
.support-platforms{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.support-platforms a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-control);color:var(--green-strong);text-decoration:none}
.support-platforms a:hover{background:var(--green-softer)}
.update-notes{padding:24px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);margin-block:28px}
.update-notes h2:first-child{margin-top:0}
@media(max-width:1000px){.release-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.release-grid{grid-template-columns:1fr;gap:12px}.release-card{padding:20px}.release-card h3{margin-bottom:12px}.update-notes{padding:18px}.hero .sub{max-width:32ch;text-wrap:pretty}}

/* Shared glass and reading rhythm across every marketing/platform page. */
:root{--glass-surface:color-mix(in srgb,var(--surface) 78%,transparent);--glass-rim:rgba(57,78,63,.14);--glass-highlight:inset 0 1px 0 #ffffffb8}
:root[data-theme=dark]{--glass-surface:color-mix(in srgb,var(--surface) 76%,transparent);--glass-rim:rgba(218,239,224,.18);--glass-highlight:inset 0 1px 0 #ffffff24}
.site-header,.fpage-index{border-bottom-color:var(--glass-rim);box-shadow:var(--glass-highlight)}
.platform-tabs,.android-tabs,.device-switch{border-color:var(--glass-rim);box-shadow:var(--glass-highlight),var(--shadow);border-radius:20px}
.platform-tabs button,.android-tabs button,.device-switch-btn{transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease,box-shadow var(--duration-medium) ease,transform var(--duration-fast) var(--ease-out)}
.platform-tabs [aria-selected=true],.android-tabs [aria-selected=true]{box-shadow:0 2px 8px #17231d18,inset 0 1px 0 #ffffff24}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .site-header,.site-header.is-scrolled,.fpage-index,.mobile-nav,.platform-tabs,.android-tabs,.device-switch{background:var(--glass-surface);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
}
.release-card,.circular-grid article,.circular-scope article,.update-notes{box-shadow:var(--shadow-sm);transition:border-color var(--duration-fast) ease,box-shadow var(--duration-medium) ease}
.release-card:focus-within,.circular-grid article:focus-within,.circular-scope article:focus-within{border-color:var(--green);box-shadow:var(--shadow)}
.release-card h3{margin-bottom:12px}.release-card .release-status{display:inline-block;padding:4px 10px;background:var(--green-softer);border-radius:10px;font-size:0.9375rem}
.platform-panel p,.release-card p,.fcard p{line-height:1.8}
.js .reveal:focus-within{opacity:1;transform:none;transition:none}
@media(hover:hover) and (pointer:fine){.release-card:hover{border-color:color-mix(in srgb,var(--green) 40%,var(--line-strong));box-shadow:var(--shadow)}}
@media(prefers-reduced-motion:no-preference){
 .circular-faq details[open]>div{animation:disclosureIn var(--motion-slide) var(--ease-out)}
 .platform-panel{animation:platformIn var(--motion-slide) var(--ease-out)}
}
@media(prefers-reduced-transparency:reduce){.site-header,.site-header.is-scrolled,.fpage-index,.mobile-nav,.platform-tabs,.android-tabs,.device-switch{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.js .hero .container,.js .hero-aura{transform:none;opacity:1}.js .reveal{opacity:1;transform:none}.platform-panel,.circular-faq details[open]>div{animation:none!important}}
@media(forced-colors:active){.platform-tabs,.android-tabs,.device-switch{border:1px solid CanvasText}.platform-tabs [aria-selected=true],.android-tabs [aria-selected=true]{outline:2px solid Highlight}.js .reveal{opacity:1}}

/* Platform demonstrations share workflow rules, with separate sample state. */
.hands-on{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:48px;align-items:center;padding:32px;margin:32px 0;border:1px solid var(--line-strong);border-radius:var(--radius-xl);background:var(--surface)}
.hands-on-copy h3{font-size:1.625rem;line-height:1.4;margin-bottom:14px}.hands-on-copy>p{font-size:0.875rem;color:var(--ink-2);line-height:1.8}
.demo-steps{list-style:none;padding:0;margin:24px 0;display:grid;gap:8px}.demo-steps button{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink-2);font:inherit;cursor:pointer}
.demo-steps button[aria-current=step]{background:var(--green-softer);border-color:var(--green);color:var(--green-strong)}.demo-steps span{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--green-soft)}
[data-demo-reset],[data-demo-go]{min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--green-strong);cursor:pointer;font:inherit}
.demo-handset{min-height:520px;padding:24px 20px 34px;position:relative;border:6px solid var(--device-shell);border-radius:38px;background:var(--bg);box-shadow:var(--shadow)}
[data-demo=harmony] .demo-handset{border-radius:32px}.demo-system{font-size:0.75rem;font-weight:600;color:var(--ink-3);margin-bottom:20px}.demo-metrics{display:flex;gap:12px;justify-content:space-between;font-size:0.8125rem;margin-bottom:22px;color:var(--ink-2)}.demo-metrics b{color:var(--green-strong)}
[data-demo-screen] h4{font-size:1.25rem;margin:0 0 18px;line-height:1.4}[data-demo-screen] p,.demo-feedback{font-size:0.8125rem;line-height:1.8;color:var(--ink-2)}
[data-demo-screen] label{display:grid;gap:6px;margin-bottom:14px;font-size:0.8125rem;font-weight:600}[data-demo-screen] input{width:100%;min-width:0;font:inherit;font-size:1rem;padding:10px;border:1px solid var(--line-strong);border-radius:12px;color:var(--ink);background:var(--surface)}
[data-demo-screen] .button{font-size:0.875rem;width:100%;border:0;cursor:pointer;padding:10px;line-height:1.5}[data-demo-screen] button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.demo-food{padding:14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;margin-bottom:12px;overflow-wrap:anywhere}.demo-food strong,.demo-food span{display:block}.demo-food span{font-size:0.8125rem;color:var(--ink-2);margin-top:6px}.demo-feedback{color:var(--green-strong);margin-top:16px;min-height:24px}.demo-home{position:absolute;width:72px;height:4px;border-radius:4px;background:var(--ink-3);bottom:12px;left:50%;transform:translateX(-50%)}
@media(max-width:760px){.hands-on{grid-template-columns:1fr;padding:20px;gap:24px}.demo-handset{width:100%;max-width:340px;margin:auto}.demo-steps{grid-template-columns:1fr 1fr;gap:6px}.demo-steps button{font-size:0.8125rem;padding:8px;gap:6px}.hands-on-copy h3{font-size:1.375rem}}

/* One arrival rhythm. Essential text and actions stay readable from frame one. */
@media(prefers-reduced-motion:no-preference){
 .home-motion .site-header::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--green);transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
 .home-motion .hero-lockup,.home-motion .hero h1,.home-motion .hero .sub,.home-motion .hero-actions{animation:homeArrival var(--motion-reveal) var(--ease-out) both}
 .home-motion .hero h1{animation-delay:30ms}.home-motion .hero .sub{animation-delay:60ms}.home-motion .hero-actions{animation-delay:90ms}
 .home-motion .button,.home-motion .hero-secondary{transition:transform var(--motion-scale) var(--ease-out),box-shadow var(--motion-fade) ease,background-color var(--motion-fade) ease}
 .home-motion .button:active,.home-motion .hero-secondary:active{transform:scale(var(--motion-press-scale));box-shadow:none}
 .home-motion .platform-panel{animation:homeArrival var(--motion-slide) var(--ease-out)}
}
@keyframes homeArrival{from{opacity:1;transform:translateY(var(--motion-distance))}to{opacity:1;transform:none}}
.demo-food .button{max-width:100%;white-space:normal;overflow-wrap:anywhere;margin-top:10px}
.demo-food strong{overflow-wrap:anywhere}

/* Give each platform the same product-first visual hierarchy. */
#demo-android>.hands-on,#demo-harmony>.hands-on{border:0;background:transparent;border-radius:0;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:80px;padding:40px 24px;margin:0 0 48px;align-items:start}
#demo-android .demo-handset,#demo-harmony .demo-handset{position:sticky;top:calc(var(--header-h) + 28px);width:100%;min-height:640px;border-width:12px;border-radius:48px;box-shadow:0 24px 60px #182c2020,inset 0 0 0 1px #ffffff30;padding:30px 22px 38px}
.hands-on-copy .demo-steps{margin-top:32px;gap:12px}.demo-step-caption{font-size:1rem;line-height:1.7;color:var(--ink-2);margin:8px 0 0 48px;max-width:30ch}.hands-on-copy .demo-steps li{padding-bottom:24px}
#demo-android>.platform-layout,#demo-harmony>.platform-layout{border-top:1px solid var(--line);padding-top:48px}
@media(prefers-reduced-motion:no-preference){.demo-steps button{transition:background-color var(--duration-medium),border-color var(--duration-medium),transform var(--duration-medium)}.demo-steps button:active{transform:scale(var(--motion-press-scale))}}
@media(max-width:760px){
 #demo-android>.hands-on,#demo-harmony>.hands-on{grid-template-columns:1fr;gap:24px;padding:24px 0;margin-bottom:32px}
 #demo-android .demo-handset,#demo-harmony .demo-handset{position:relative;top:auto;max-width:360px;min-height:560px;border-width:9px;border-radius:40px}
 .hands-on-copy .demo-steps{gap:10px;margin-top:20px}.hands-on-copy .demo-steps li{padding-bottom:8px}.demo-step-caption{margin:8px 4px;font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){.demo-steps button:active{transform:none}}
/* Short windows and enlarged text must not trap part of the device under the header. */
@media(max-height:800px){#demo-android .demo-handset,#demo-harmony .demo-handset{position:relative;top:auto}}
html[data-reading-size="150"] .demo-handset,html[data-reading-size="200"] .demo-handset{position:relative!important;top:auto!important}
/* A quieter first screen and one focused download choice. */
.hero-download-link{margin:22px auto 12px;font-size:.9375rem}.hero-download-link a{text-underline-offset:5px}.hero-download-link a:hover{text-decoration:underline}
.site-header .reading-open{font-size:.875rem;flex:none;white-space:nowrap}
.reading-appearance{padding:16px 0;border-top:1px solid var(--line);margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.reading-appearance p{flex-basis:100%;margin:0}.reading-appearance .lang-switch{display:inline-flex!important}.reading-appearance button{display:inline-flex!important}
.download-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 24px;max-width:760px}.download-tabs button{font:inherit;min-height:48px;padding:10px 20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;cursor:pointer}.download-tabs [aria-selected=true]{background:var(--green);color:var(--on-green);border-color:var(--green)}
.release-grid.release-picker{display:block;max-width:760px;margin:auto}.release-picker .release-card{padding:32px;text-align:center}.release-picker .release-card[hidden]{display:none!important}.release-picker .release-card a{display:inline-flex;margin:12px 10px;min-height:44px;align-items:center}
@media(prefers-reduced-motion:no-preference){.release-picker .release-card:not([hidden]){animation:release-arrive .22s ease-out both}}
@keyframes release-arrive{from{opacity:.72;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:600px){.download-tabs{display:grid;grid-template-columns:1fr 1fr}.download-tabs button{padding:10px}.release-picker .release-card{padding:24px}.site-header .reading-open{font-size:.75rem;padding:6px 8px}.site-header .container{gap:8px}}
@media print{.download-tabs{display:none}.release-picker .release-card[hidden]{display:block!important}}
@media(max-width:600px){.site-header .nav-cta{display:none}.site-header .brand{margin-right:auto}.site-header .reading-open{margin-left:0}}

/* Selective liquid glass: only segmented choices, not content or forms. */
.glass-options{position:relative;isolation:isolate;padding:6px;border:1px solid var(--glass-rim);border-radius:22px;background:var(--glass-surface);box-shadow:inset 0 1px 0 #ffffff55,0 5px 18px #1731260c}
.glass-options>button{position:relative;z-index:1;border-color:transparent;background:transparent;transition:color var(--duration-medium) ease;transform:none}
.selection-glass{position:absolute;inset:0 auto auto 0;z-index:0;pointer-events:none;border-radius:16px;border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,transparent),var(--green-soft));box-shadow:inset 0 1px 1px #ffffff99,inset 0 -1px 0 #1731260c,0 3px 9px #17312614}
.glass-ready>button[aria-selected=true],.glass-ready>button[aria-pressed=true]{background:transparent;color:var(--green-strong);box-shadow:none;border-color:transparent;font-weight:700}
.glass-options>button:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
@supports(backdrop-filter:blur(1px)){.selection-glass{backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%)}}
@media(prefers-reduced-motion:no-preference){.glass-ready .selection-glass{transition:transform var(--motion-shared) var(--ease-out)}}
@media(hover:hover){.glass-options>button:hover{background:color-mix(in srgb,var(--green-soft) 45%,transparent);border-radius:16px}}
@media(prefers-reduced-transparency:reduce){.glass-options,.selection-glass{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}.selection-glass{border:2px solid var(--green);box-shadow:none}}
@media(forced-colors:active){.selection-glass{display:none}.glass-options>button[aria-selected=true],.glass-options>button[aria-pressed=true]{outline:2px solid Highlight;background:Highlight;color:HighlightText}}
/* Keep selected choices stronger than hover, with the same focus treatment. */
@media(hover:hover){.glass-options>button[aria-selected=true]:hover,.glass-options>button[aria-pressed=true]:hover{background:transparent}}
.reading-open,.demo-steps button,[data-demo-reset]{line-height:1.5}
@media(hover:hover) and (pointer:fine){.glass-options>button{cursor:grab}.glass-options.is-dragging,.glass-options.is-dragging>button{cursor:grabbing}}
.glass-options{user-select:none;-webkit-user-select:none}
.glass-options.is-dragging .selection-glass{transition:none;box-shadow:inset 0 1px 2px #ffffffaa,0 5px 14px #17312620}

/* Reading hierarchy: important limitations stay legible on small screens. */
.web-entry-note,.hero-status,.release-date,.footer-bottom{font-size:.875rem;line-height:1.75;color:var(--ink-2)}
.web-entry-note{max-width:56ch;margin-top:18px}.web-entry-note a{text-decoration:underline;text-underline-offset:3px}
.platform-note,.hands-on-copy>p{color:var(--ink-2)}
.hero-actions{gap:16px 24px}.hero-download-link{margin-top:24px}
.site-header .reading-open{font-size:.875rem;min-height:44px}
.footer-utility a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:600px){
 .hero .sub{font-size:1.0625rem;line-height:1.75}
 .hero-status{font-size:.875rem;max-width:34ch}
 .web-entry-note{max-width:34ch;text-wrap:pretty}
 .hero-actions{gap:12px 20px}
 .hero-actions .primary,.hero-secondary{min-height:48px}
 .site-header .reading-open{font-size:.875rem;padding:8px 10px}
 .release-picker .release-card{text-align:left}.release-picker .release-card a{margin-left:0;margin-right:16px}
}

/* Large text has its own flowing layout, rather than larger text in fixed frames. */
html.reading-reflow body{overflow-wrap:anywhere}
html.reading-reflow .hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.2;letter-spacing:-.025em}
html.reading-reflow :is(.why-grid,.daily-grid,.ai-grid,.vision-grid,.method-grid,.feature-glance-grid,.circular-grid,.circular-scope,.circular-flow,.cycle-evidence,.material-grid,.platform-steps){grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
html.reading-reflow :is(.device-grid,.platform-layout,.cycle-example){grid-template-columns:minmax(0,1fr);gap:32px}
html.reading-reflow .device-grid{max-width:900px;margin-inline:auto}
html.reading-reflow #demo-android>.hands-on,html.reading-reflow #demo-harmony>.hands-on{grid-template-columns:minmax(0,1fr);gap:28px;padding-inline:0}
html.reading-reflow .demo-handset{position:relative!important;top:auto!important;max-width:32rem!important;min-height:0!important;margin-inline:auto}
html.reading-reflow .phone{width:min(100%,28rem)}
html.reading-reflow .phone-screen,html.reading-reflow .ipad-screen{aspect-ratio:auto;height:auto;overflow:visible;border-radius:24px}
html.reading-reflow .phone-notch{display:none}
html.reading-reflow .mock-tabbar{position:relative;inset:auto;margin:12px;flex-wrap:wrap;gap:8px}
html.reading-reflow .mock-tab{flex:1 1 4rem;min-height:44px}
html.reading-reflow .ipad-screen{display:block}
html.reading-reflow .ipad-sidebar{width:100%;max-width:none;border-right:0;border-bottom:1px solid var(--line)}
html.reading-reflow .ipad-nav{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}
html.reading-reflow .ipad{width:100%!important}
html.reading-reflow :is(.device-switch,.platform-tabs,.download-tabs,.tab-switch){flex-wrap:wrap;max-width:100%;height:auto}
html.reading-reflow .glass-options>button{white-space:normal;min-width:0;overflow-wrap:anywhere}
html.reading-reflow .story-track{grid-template-columns:minmax(0,1fr)}
html.reading-reflow .story-stage-col{position:static;display:block}
html.reading-reflow .story-stage{display:none}
html.reading-reflow .story-mini{display:block}
html.reading-reflow .story-progress{flex-direction:row;flex-wrap:wrap}
html.reading-reflow .story-chapter{min-height:0;padding-block:24px}
html.reading-reflow .story-copy{opacity:1!important;transform:none!important}
html.reading-reflow .story-state .keep-together{white-space:normal}
html.reading-reflow .story-chapters{padding-top:0}
html.reading-reflow :is(.footer-grid,.fcard-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
html.reading-reflow :is(.mock-row,.mock-titlebar,.ipad-row){flex-wrap:wrap}
html.reading-reflow :is(.legal-page ul,.phase-list,.phase-steps){display:block;min-width:0;margin-inline-start:0;padding-inline-start:1.25em}
html.reading-reflow :is(.legal-page ul,.phase-list,.phase-steps) li{min-width:0;margin-bottom:8px}
html.reading-reflow .cycle-example :is(dl,dt,dd){min-width:0;max-width:100%;overflow-wrap:anywhere}
html.reading-reflow .cycle-example .eyebrow{display:block;max-width:100%;overflow-wrap:anywhere}
@media(max-width:700px){
 html.reading-reflow .container{padding-inline:16px}
 html.reading-reflow .site-header .brand span{font-size:1rem}
 html.reading-reflow .site-header .reading-open{white-space:normal}
 html.reading-reflow .hero h1{font-size:2rem}
 html.reading-reflow :is(.fpage-hero,.philo-hero,.cycle-hero) h1{font-size:1.5rem;overflow-wrap:anywhere}
 html[data-reading-size="200"].reading-reflow :is(.fpage-hero,.philo-hero,.cycle-hero) h1{font-size:1.125rem;line-height:1.2}
 html[data-reading-size="200"].reading-reflow :is(.fpage-hero,.philo-hero,.cycle-hero) .eyebrow{font-size:.75rem;letter-spacing:.04em}
 html.reading-reflow .demo-steps{grid-template-columns:1fr}
 html.reading-reflow .download-tabs{grid-template-columns:1fr}
 html.reading-reflow .phone,html.reading-reflow .ipad{padding:6px;border-radius:30px}
 html.reading-reflow .hero-actions>*{flex:1 1 100%}
}
html.reading-reflow .legal-nav{height:auto;min-height:64px;flex-wrap:wrap;gap:12px;padding-block:14px}
html.reading-reflow .legal-nav-right{flex-wrap:wrap;gap:12px}
html.reading-reflow .legal-page{overflow-wrap:anywhere}
@media(max-width:600px){html.reading-reflow .legal-nav{padding-inline:16px}html.reading-reflow .legal-page{padding-inline:16px}}

/* A transparent lens with a moving rim, rather than a painted sliding tile. */
.glass-options{background:color-mix(in srgb,var(--surface) 65%,transparent);box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #12291d0c,0 8px 24px #1731260b;border-radius:999px}
.selection-glass{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.selection-glass::before{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,35%) 0%,#ffffffad,transparent 60%),linear-gradient(165deg,color-mix(in srgb,var(--surface) 54%,transparent),color-mix(in srgb,var(--green-soft) 70%,transparent));border:1px solid color-mix(in srgb,var(--green) 20%,#ffffff99);box-shadow:inset 0 1.5px 1px #ffffffc0,inset 1px 0 1px #ffffff66,inset 0 -1px 2px #1630241c,0 4px 12px #1731261a;transform:scale(var(--lens-x,1),var(--lens-y,1));transform-origin:center;backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
:root[data-theme=dark] .selection-glass::before{background:radial-gradient(ellipse at var(--light-x,35%) 0%,#ffffff25,transparent 60%),linear-gradient(160deg,#ffffff18,#76d7a718);border-color:#ffffff30;box-shadow:inset 0 1px 1px #ffffff50,inset 0 -1px 2px #00000040,0 5px 16px #00000030}
.glass-options.is-held .selection-glass::before{box-shadow:inset 0 2px 2px #ffffffaa,inset 0 -1px 2px #16302418,0 7px 18px #17312626}
.glass-options.is-dragging .selection-glass{box-shadow:none}
@media(prefers-reduced-motion:no-preference){.glass-ready .selection-glass{transition:transform var(--motion-shared) var(--ease-out)}.selection-glass::before{transition:transform var(--motion-scale) var(--ease-out),box-shadow var(--motion-fade) ease}.is-dragging .selection-glass::before{transition:transform var(--duration-fast) linear,box-shadow var(--duration-fast)}.glass-options.is-held:not(.is-dragging) .selection-glass::before{transform:scale(1.015,1.015)}}
.glass-options.is-dragging .selection-glass{transition:none}
@media(prefers-reduced-motion:reduce){.selection-glass::before{transform:none!important}}
html[data-reading-motion] .selection-glass::before{transform:none!important}
@media(prefers-reduced-transparency:reduce){.glass-options{background:var(--surface)}.selection-glass::before{background:var(--green-soft)!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:2px solid var(--green)}}
@media(max-width:600px){.download-tabs.glass-options{border-radius:24px}}

/* Mobile reading rhythm: clear entry points, fluid type, comfortable touch targets. */
@media(max-width:600px){
 .hero{min-height:0;padding:30px 0 32px;text-align:left}
 .hero .container{padding-inline:22px}
 .hero-lockup{gap:12px;margin-bottom:24px;max-width:100%}
 .hero-lockup img{width:44px;height:44px;border-radius:13px;flex:none;animation:none}
 .hero-lockup b{font-size:1.125rem}.hero-lockup small{font-size:.8125rem;line-height:1.5}
 .hero h1,html[lang=en] .hero h1{max-width:none;margin:0 0 20px;font-size:clamp(1.875rem,8.4vw,2.75rem);line-height:1.2;letter-spacing:-.035em;text-wrap:pretty}
 .hero .sub{margin:0 0 24px;max-width:36ch;font-size:1rem;line-height:1.8}
 .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
 .hero-actions .button{width:100%;min-width:0;min-height:50px;padding:12px 10px;font-size:.9375rem;justify-content:center;border-radius:16px;white-space:normal}
 .hero-app-download{background:var(--surface);border:1px solid var(--line-strong)}
 .web-entry-note{margin:0;max-width:none;font-size:.8125rem;line-height:1.7}
 .web-entry-note a{display:inline-block;padding-block:6px}
 .hero-download-link{margin:14px 0 8px;font-size:.9375rem}.hero-download-link a{display:inline-flex;align-items:center;min-height:44px}
 .hero-status{margin:0;max-width:none;padding-top:14px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.7}
 .section{padding-block:44px}.section-head{margin-bottom:24px}.section-head h2{font-size:clamp(1.5rem,6.5vw,2rem);line-height:1.3;text-wrap:pretty}.section-head .lead{font-size:1rem;line-height:1.8}
 .platform-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px;padding:5px;margin-bottom:20px}
 .platform-tabs button{min-width:0;min-height:48px;padding:10px 6px;font-size:1rem}
 .platform-note{font-size:.875rem;line-height:1.8}
 .device-switch{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .device-switch-btn{white-space:normal;min-height:48px;font-size:.8125rem;line-height:1.4}
 .phone{width:min(100%,320px)}.ipad{max-width:100%}
 .hands-on{padding:18px 14px;gap:20px;border-radius:24px}
 .demo-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.demo-steps button{min-height:48px;font-size:.875rem;line-height:1.4;white-space:normal}
 .demo-step-caption{font-size:.8125rem;line-height:1.65}.demo-handset{max-width:100%;min-width:0}
 .download-tabs{gap:4px;padding:5px;margin-bottom:14px}.download-tabs button{font-size:.9375rem;min-height:48px;white-space:normal;line-height:1.4}
 .release-picker .release-card{padding:22px;border-radius:24px}.release-picker .release-card a{display:flex;width:100%;margin:12px 0 0;min-height:48px;justify-content:center;text-align:center}
 .release-picker .release-card a:not(.button){border:1px solid var(--line);border-radius:14px;padding:10px 12px}
 .release-date{font-size:.8125rem;line-height:1.75}
 .site-header .container{min-width:0}.site-header .brand{min-width:0;gap:8px}.site-header .brand span{font-size:1rem}.site-header .reading-open{font-size:.8125rem;padding:8px}
 html.reading-reflow .hero-actions{grid-template-columns:minmax(0,1fr)}
 html.reading-reflow .platform-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:350px){.site-header .container{padding-inline:12px;gap:6px}.site-header .brand img{width:26px;height:26px}.site-header .brand span{font-size:.875rem}.hero .container{padding-inline:18px}}

/* Release notes: one useful summary, with details available on demand. */
.hero-download-link{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px}
.hero-download-link a{display:inline-flex;align-items:center;min-height:44px}
.release-updates .section-head{max-width:760px}
.update-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.update-grid article{display:flex;flex-direction:column;min-width:0;padding:clamp(22px,3vw,36px);border:1px solid var(--line-strong);border-radius:24px;background:var(--surface)}
.update-grid h3{font-size:1.3rem;line-height:1.45;margin:12px 0}
.update-grid p{line-height:1.8;overflow-wrap:anywhere}
.update-grid .update-stage{font-size:.875rem;color:var(--green-strong);font-weight:650;margin:0}
.update-grid a{align-self:flex-start;margin-top:auto;padding-top:20px;min-height:44px;line-height:1.6;font-weight:600}
.update-footnote{max-width:80ch;color:var(--ink-3);font-size:.9375rem;line-height:1.8;margin-top:24px}
.update-footnote a{display:inline-block;padding-block:6px}
.update-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:18px;line-height:1.7}
.update-inline a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}.update-inline span{color:var(--ink-3)}
.update-availability{padding:20px 24px;background:var(--green-softer);border-inline-start:3px solid var(--green);border-radius:0 16px 16px 0;margin:24px 0}
.update-availability p:last-child{margin-bottom:0}
.update-detail{border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);margin:12px 0;overflow-wrap:anywhere}
.update-detail summary{padding:18px 22px;min-height:48px;line-height:1.65;cursor:pointer;font-weight:600}
.update-detail[open] summary{border-bottom:1px solid var(--line)}
.update-detail>p,.update-detail>ul{margin:18px 22px;line-height:1.85}.update-detail>ul{padding-left:1.25em}
.update-detail summary:focus-visible{outline-offset:3px}
@media(hover:hover){.update-detail summary:hover{background:var(--green-softer)}.update-grid a:hover{text-decoration:underline;text-underline-offset:4px}}
@media(prefers-reduced-motion:no-preference){.update-detail summary{transition:background-color var(--duration-fast) ease}.update-grid article{transition:border-color var(--duration-fast) ease}.update-grid article:focus-within{border-color:var(--green)}}
@media(max-width:900px){.update-grid{grid-template-columns:minmax(0,1fr)}.update-grid article{padding:24px}.update-grid h3{font-size:1.25rem}.update-grid a{margin-top:0}}
@media(max-width:600px){.hero-download-link{justify-content:flex-start;gap:4px 18px}.update-detail summary{padding:16px}.update-detail>p,.update-detail>ul{margin:16px}.update-availability{padding:16px}.update-grid{gap:14px}}
html.reading-reflow .update-grid{grid-template-columns:minmax(0,1fr)}

/* Runtime motion preference has the same static reading layout as the OS setting. */
html.motion-static *,html.motion-static *::before,html.motion-static *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.motion-static .hero .container,html.motion-static .hero-aura,html.motion-static #daily{transform:none!important;opacity:1}
html.motion-static .story-track{grid-template-columns:1fr;gap:28px}
html.motion-static .story-stage-col{position:static;display:block}
html.motion-static .story-stage{display:none!important}
html.motion-static .story-mini{display:grid!important}
html.motion-static .story-progress{flex-direction:row;flex-wrap:wrap}
html.motion-static .story-chapter{min-height:0;padding:22px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
html.motion-static .story-chapter .story-copy{opacity:1;transform:none}
html.motion-static .reveal{opacity:1;transform:none}
html.motion-static .selection-glass::before{transform:none!important}
@media(max-width:760px){.js .hero .container{transform:none}.js .reveal{transform:none;transition:none}}

/* Homepage: a quiet product stage, then a clear rhythm of deeper information. */
body:has(.marketing-home){--bg:#f7f6f1;--bg-elev:#efeee6;--surface:#fffefa;--surface-2:#eff1e9}
:root[data-theme="dark"] body:has(.marketing-home){--bg:#101715;--bg-elev:#161f1a;--surface:#1b231f;--surface-2:#141d18}
.marketing-home .hero{min-height:0;padding:44px 0 36px;background:var(--surface)}
.marketing-home .hero-aura{display:none}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center;text-align:center}
.hero-copy{min-width:0;max-width:900px;margin-inline:auto}
.hero-layout .hero-lockup{justify-content:center;gap:10px;margin-bottom:22px}
.hero-layout .hero-lockup img{width:36px;height:36px;border-radius:10px;box-shadow:none;animation:none}
.hero-layout .hero-lockup b{font-size:1.125rem}
.hero-layout .hero-lockup small{font-size:.875rem;line-height:1.5}
.hero-layout h1,html[lang="en"] .hero-layout h1{max-width:none;font-size:clamp(2.5rem,5.7vw,4.5rem);line-height:1.16;letter-spacing:-.04em;margin:0 0 22px;text-wrap:balance}
.hero-layout .sub{font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.75;margin:0 auto 24px;max-width:50ch}
.hero-layout .hero-actions{display:flex;justify-content:center;gap:14px;margin:0}
.hero-layout .button{border-radius:999px;padding:12px 24px;min-height:48px;min-width:148px;font-size:1rem;box-shadow:none}
.hero-layout .hero-app-download{border:1px solid var(--green);color:var(--green-strong);background:transparent}
.hero-layout .web-entry-note{font-size:.875rem;line-height:1.7;margin:18px auto 0;max-width:62ch;color:var(--ink-3)}
.hero-preview{margin:0 auto;padding:32px 36px 22px;width:min(100%,900px);background:var(--bg);border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 48px #09261a0a;min-width:0;text-align:left}
.hero-preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;font-size:.875rem;color:var(--ink-2)}
.hero-preview-sample{border:1px solid var(--line-strong);border-radius:6px;padding:2px 8px;flex:none;font-size:.8125rem}
.hero-preview h2{font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.4;letter-spacing:-.02em;margin:0 0 24px;text-wrap:balance}
.hero-preview-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;align-items:stretch}
.hero-preview-foods{list-style:none;padding:0;margin:0}
.hero-preview-foods li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:22px 0;border-top:1px solid var(--line-strong)}
.hero-preview-foods strong,.hero-preview-foods small{display:block}
.hero-preview-foods strong{font-size:1.125rem;font-weight:650}
.hero-preview-foods small{font-size:.875rem;color:var(--ink-2);margin-top:6px}
.hero-preview-date,.hero-preview-neutral{font-size:.875rem;line-height:1.5}
.hero-preview-date{padding:6px 10px;border-radius:8px;background:var(--apricot-soft);color:var(--apricot)}
.hero-preview-neutral{color:var(--ink-2)}
.hero-preview-next{padding:24px;background:var(--green-soft);border-radius:18px}
.hero-preview-next>span{font-size:.875rem;color:var(--green-strong);font-weight:600}
.hero-preview-next h3{font-size:1.75rem;line-height:1.3;letter-spacing:-.025em;margin:14px 0 12px;color:var(--green-strong)}
.hero-preview-next p{font-size:.9375rem;line-height:1.75;margin:0;color:var(--ink-2);max-width:30ch}
.hero-preview figcaption{font-size:.8125rem;line-height:1.7;color:var(--ink-3);margin-top:20px}
.hero-support{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 28px;max-width:100%}
.hero-support .hero-status{display:block;background:none;border:0;padding:0;margin:0;border-radius:0;font-size:.875rem;line-height:1.7;color:var(--ink-2)}
.hero-support .hero-status::before{display:none}
.hero-support .hero-download-link{margin:0;justify-content:center;font-size:.875rem;gap:18px}
.marketing-home>.section{padding-block:88px}
.marketing-home .section-head{max-width:800px;margin-bottom:36px}
.marketing-home .section-head h2{font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.25;letter-spacing:-.025em}
.marketing-home .section-head .lead{line-height:1.8}
.marketing-home #product>.container>.section-head{margin-inline:auto;text-align:center}
.marketing-home #product>.container>.section-head .lead{margin-inline:auto}
.marketing-home #daily{background:var(--surface);border:0;transform:none}
.marketing-home :is(.daily-card,.why-card){box-shadow:none;border-color:transparent;padding:30px;border-radius:24px}
.marketing-home .daily-card{background:var(--bg)}
.marketing-home :is(.daily-card,.why-card) h3{font-size:1.25rem;line-height:1.45;margin-bottom:12px}
.marketing-home :is(.daily-card,.why-card) p{font-size:1rem;line-height:1.8}
.marketing-home .daily-card .when{font-size:.875rem}
@media(hover:hover){.hero-layout .hero-app-download:hover{background:var(--green-soft)}.marketing-home :is(.daily-card,.why-card):hover{border-color:var(--line-strong)}}
@media(max-width:760px){
 .marketing-home .hero{padding:36px 0 28px}
 .hero-layout{gap:28px}
 .hero-layout .hero-lockup{margin-bottom:20px}
 .hero-layout h1,html[lang="en"] .hero-layout h1{font-size:clamp(2rem,8.2vw,3.2rem);line-height:1.2;text-align:center;margin-bottom:20px}
 .hero-layout .sub{text-align:center;margin-bottom:22px;font-size:1rem}
 .hero-layout .hero-actions .button{width:auto;flex:0 1 auto;min-width:130px;padding:12px 18px;font-size:.9375rem}
 .hero-layout .web-entry-note{text-align:center;font-size:.875rem;max-width:38ch}
 .hero-preview{padding:22px;border-radius:22px}
 .hero-preview-content{grid-template-columns:minmax(0,1fr);gap:8px}
 .hero-preview h2{margin-bottom:18px}
 .hero-preview-foods li{padding:16px 0}
 .hero-preview-next{padding:20px}
 .hero-preview-next h3{font-size:1.5rem;margin:10px 0}
 .hero-preview-next h3 br{display:none}
 .hero-preview-next p{max-width:none}
 .hero-support{gap:12px;text-align:center}
 .hero-support .hero-status{max-width:36ch}
 .marketing-home>.section{padding-block:52px}
 .marketing-home .section-head{margin-bottom:28px}
 .marketing-home :is(.daily-card,.why-card){padding:24px}
}
html.reading-reflow .hero-preview-content{grid-template-columns:minmax(0,1fr)}
html.reading-reflow .hero-layout h1{font-size:2rem}
html.reading-reflow .hero-layout .hero-actions{flex-wrap:wrap}
html.reading-reflow .hero-layout .button{flex:1 1 auto;min-width:0}

@media(min-width:761px){
 html[lang="zh-CN"] .hero-layout h1{font-size:clamp(2.5rem,5.1vw,4rem)}
 html[lang="zh-CN"] .hero-layout h1 br{display:none}
 .hero-layout .sub br{display:none}
 .hero-layout .hero-lockup{margin-bottom:18px}
}

/* FreshLife commitments: the product stays in view as the story moves. */
.principles-cue{display:inline-flex;align-items:center;justify-content:center;gap:14px;justify-self:center;min-height:44px;font-size:.875rem;color:var(--ink-2)}
.principles-cue span{font-size:1.25rem;color:var(--green-strong)}
.principles{padding:88px 0;background:var(--bg);position:relative}
.principles-heading{max-width:900px;margin:0 auto 48px;text-align:center}
.principles-heading h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.25;letter-spacing:-.035em;color:var(--ink);margin:18px 0 24px;text-wrap:balance}
.principles-heading h2 em{font-style:normal;color:var(--green-strong)}
.principles-heading>p:last-child{font-size:1.125rem;line-height:1.8;max-width:55ch;margin:auto}
.principles-track{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.principles-stage{display:none}
.principles-chapter{padding:36px 0;border-top:1px solid var(--line-strong);scroll-margin-top:calc(var(--header-h) + 24px)}
.principles-number{font-size:.875rem;color:var(--green-strong);font-weight:650;letter-spacing:.1em}
.principles-chapter h3{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.3;letter-spacing:-.025em;color:var(--ink);margin:18px 0 22px;text-wrap:balance}
.principles-chapter>p{font-size:1.0625rem;line-height:1.9;margin-bottom:18px;max-width:42ch}
.principles-chapter .principles-note{font-size:.875rem;line-height:1.8;color:var(--ink-3)}
.principles-chapter>a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:600}
.principles-animated .principles-track{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:start}
.principles-animated .principles-stage{display:block;position:sticky;top:calc(var(--measured-header-h,var(--header-h)) + 36px);align-self:start;min-width:0}
.principles-canvas{position:relative;height:clamp(340px,58svh,540px);border-radius:32px;background:var(--surface);box-shadow:0 24px 70px #0a372010;overflow:hidden;isolation:isolate;border:1px solid var(--line)}
.principles-scene{position:absolute;inset:0;padding:clamp(22px,3vw,40px);opacity:0;transform-origin:50% 65%;display:flex;flex-direction:column;justify-content:center;background:var(--surface);color:var(--ink);will-change:transform,opacity}
.principles-scene:first-child{opacity:1}
.principles-scene-top{display:flex;align-items:center;gap:12px;font-size:.875rem;color:var(--ink-2);margin-bottom:auto}
.principles-scene-top img{width:32px;height:32px;border-radius:9px;flex:none}
.principles-scene-top>b{margin-left:auto;color:var(--green-strong);font-size:1rem}
.principles-scene h3{font-size:clamp(1.5rem,2.7vw,2.5rem);line-height:1.3;letter-spacing:-.035em;margin:28px 0;color:inherit;text-wrap:balance}
.principles-sample-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line-strong);padding:18px 0;font-size:1rem}
.principles-sample-row>span:first-child{min-width:0}
.principles-sample-row b,.principles-sample-row small{display:block;overflow-wrap:anywhere}
.principles-sample-row small{font-size:.875rem;line-height:1.6;color:var(--ink-2);margin-top:6px}
.principles-tag{flex:none;border-radius:8px;padding:5px 8px;background:var(--green-soft);color:var(--green-strong);font-size:.8125rem;line-height:1.5}
.principles-scene--1 .principles-sample-row:nth-of-type(2) .principles-tag{background:var(--amber-soft);color:var(--amber)}
.principles-scene--2{background:var(--green-softer)}
.principles-scene--3{background:#103b2d;color:#f2fbf6;--ink-2:#c0ddce;--green-strong:#a2e7bf;--line-strong:#ffffff2b;--green-soft:#ffffff12}
.principles-scene--4{background:var(--surface-2)}
.principles-meter{height:3px;background:var(--line-strong);margin:24px 18px 14px;overflow:hidden;border-radius:2px}
.principles-meter>span{display:block;height:100%;background:var(--green);transform:scaleX(var(--principles-progress,0));transform-origin:left}
.principles-caption{font-size:.8125rem;line-height:1.6;color:var(--ink-3);text-align:center;margin:0}
.principles-animated .principles-chapter{display:flex;flex-direction:column;justify-content:center;min-height:78svh;border:0;padding:52px 0}
.principles-animated .principles-chapter:first-child{padding-top:0}
.principles-animated .principles-chapter>a{align-self:flex-start}
@media(max-width:760px){
 .principles{padding:52px 0}.principles-heading{margin-bottom:32px}.principles-heading>p:last-child{font-size:1rem}
 .principles-animated .principles-track{grid-template-columns:minmax(0,1fr);gap:0}
 .principles-animated .principles-stage{z-index:3;top:var(--measured-header-h,var(--header-h));padding:10px 0;background:var(--bg)}
 .principles-canvas{height:clamp(210px,32svh,280px);border-radius:22px}
 .principles-scene{padding:18px 20px}
 .principles-scene-top{font-size:.8125rem;gap:8px;margin-bottom:0}.principles-scene-top img{width:24px;height:24px;border-radius:7px}
 .principles-scene h3{font-size:1.375rem;line-height:1.3;margin:12px 0}.principles-scene h3 br{display:none}
 .principles-sample-row{padding:9px 0;font-size:.9375rem;gap:8px}.principles-sample-row small{font-size:.8125rem;margin-top:2px;line-height:1.4}
 .principles-tag{font-size:.75rem;padding:4px 6px}
 .principles-meter{margin:10px 8px 6px}.principles-caption{font-size:.75rem}
 .principles-animated .principles-chapter{min-height:66svh;padding:40px 0;justify-content:flex-start;scroll-margin-top:calc(var(--measured-header-h,var(--header-h)) + 38svh + 30px)}
 .principles-animated .principles-chapter:first-child{padding-top:30px}
 .principles-chapter h3{font-size:1.75rem;margin:14px 0 18px}.principles-chapter>p{font-size:1rem;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){.principles-stage{display:none!important}.principles-track{display:block!important}.principles-chapter{min-height:0!important;padding:32px 0!important;border-top:1px solid var(--line-strong)!important}}
html.motion-static .principles-stage,html.reading-reflow .principles-stage{display:none!important}
html.motion-static .principles-track,html.reading-reflow .principles-track{display:block!important}
html.motion-static .principles-chapter,html.reading-reflow .principles-chapter{min-height:0;padding:32px 0;border-top:1px solid var(--line-strong)}

@media(max-width:760px){
 html[lang="en"] .principles-canvas{height:300px}
 html[lang="en"] .principles-scene h3{font-size:1.25rem}
 html[lang="en"] .principles-animated .principles-chapter{scroll-margin-top:calc(var(--measured-header-h,var(--header-h)) + 370px)}
}

/* The first screen introduces the brand; the next scroll introduces its beliefs. */
.marketing-home .brand-hero{min-height:calc(100svh - var(--header-h));padding:clamp(32px,6svh,64px) 0;background:var(--surface)}
.brand-hero .hero-layout{gap:28px}
.brand-hero .hero-lockup{flex-direction:column;gap:20px;margin-bottom:28px}
.brand-hero .hero-lockup img{width:clamp(120px,20svh,168px);height:auto;border-radius:25%;box-shadow:0 18px 48px #0967431a}
.brand-hero .hero-lockup .txt{text-align:center}
.brand-hero .hero-lockup b{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;letter-spacing:-.035em}
.brand-hero .hero-copy h1,html[lang="en"] .brand-hero .hero-copy h1{font-size:clamp(2rem,4.8vw,3.75rem);line-height:1.25;margin-bottom:20px;letter-spacing:-.035em}
.brand-hero .hero-copy .sub{font-size:1.125rem;max-width:32em;margin:0 auto;line-height:1.9;text-wrap:balance}
.brand-hero .principles-cue{color:var(--ink-3);gap:14px}
.product-intro .section-head{margin:0 auto;text-align:center}
.product-intro .hero-layout{gap:24px}
.product-intro .hero-layout .web-entry-note{margin:0 auto}
.product-intro .hero-preview{margin-top:12px}
@media(max-width:760px){
 .marketing-home .brand-hero{padding:36px 0;min-height:calc(100svh - var(--header-h))}
 .brand-hero .hero-lockup{gap:18px;margin-bottom:26px}
 .brand-hero .hero-lockup img{width:128px}
 .brand-hero .hero-copy h1,html[lang="en"] .brand-hero .hero-copy h1{font-size:clamp(1.875rem,8.2vw,2.5rem)}
 .brand-hero .hero-copy .sub{font-size:1rem;max-width:23em}
 .brand-hero .principles-cue{font-size:.875rem}
}
@media(max-height:650px){.brand-hero .hero-lockup img{width:100px}.brand-hero .hero-lockup{gap:12px;margin-bottom:18px}.brand-hero .hero-layout{gap:18px}}
html.reading-reflow .brand-hero{min-height:0}
html.reading-reflow .brand-hero .hero-copy h1{font-size:2rem}


/* Mid-Autumn lives within the home hero, without a separate card or overlay. */
.moon-festival[hidden]{display:none!important}
.marketing-home .brand-hero:has(.moon-festival:not([hidden])){position:relative;overflow:hidden;background:radial-gradient(ellipse at 86% 32%,#ecd28b24,transparent 48%);padding-bottom:32px}
.brand-hero:has(.moon-festival:not([hidden])) .hero-layout{gap:24px}
.brand-hero:has(.moon-festival:not([hidden])) .hero-lockup{margin-bottom:20px;gap:12px}
.brand-hero:has(.moon-festival:not([hidden])) .hero-lockup img{width:88px}
.moon-festival{position:relative;width:100%;max-width:920px;margin:8px auto 12px;padding:32px 150px 12px;border:0;border-radius:0;box-shadow:none;background:none;color:var(--ink);text-align:center}
.moon-copy{position:relative;z-index:1;min-width:0}.moon-copy h2{font-family:Georgia,"Songti SC",serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:500;line-height:1.5;margin:8px 0 14px;letter-spacing:.025em}.moon-copy p{line-height:1.9;margin:0;text-wrap:pretty}.moon-eyebrow{font-size:.72rem;letter-spacing:.18em;color:var(--ink-3)}.moon-invite{margin-top:20px!important;font-size:.9rem}.moon-orb{position:absolute;right:0;top:10px;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbea,#e5cc91);box-shadow:0 0 70px #e7c98338;filter:brightness(calc(.9 + var(--moon-glow,0)*.15));transition:box-shadow .8s,filter .8s}.moon-orb:after{content:"";position:absolute;inset:28px 16px 35px 45px;border-radius:50%;background:#b5a06e22;filter:blur(9px)}.moon-complete .moon-orb,.is-lit .moon-orb{box-shadow:0 0 90px #e7c98370}.moon-sprig{position:absolute;left:16px;top:65px;color:#b9944e;letter-spacing:8px;font-size:22px;transform:rotate(-28deg);opacity:.6}.moon-sprig span{display:inline-block;transform:translateY(-16px);font-size:14px}
.moon-lanterns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:12px}.moon-lantern{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:72px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer;transition:transform .2s}.moon-lantern span{display:grid;place-items:center;width:28px;height:34px;border-radius:10px;background:#e4cf9e55;color:#92713b;font-size:.75rem;box-shadow:inset 0 0 0 1px #ad905e55;transition:background .3s,box-shadow .3s}.moon-lantern[aria-pressed="true"] span{background:#efce82;box-shadow:0 0 22px #e2bd6855}.moon-lantern:focus-visible,.moon-actions button:focus-visible{outline:2px solid #078964;outline-offset:4px}.moon-progress{font-size:.75rem;color:var(--ink-3);margin-top:4px!important}.moon-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-top:14px}.moon-actions .button{min-height:44px;padding:8px 0;border:0;background:none;box-shadow:none;color:var(--ink);border-radius:0;text-decoration:underline;text-underline-offset:5px}.moon-actions a{font-size:.85rem;color:var(--ink);text-underline-offset:5px}.moon-message{min-height:3.8em;font-size:.9rem;margin-top:14px!important;color:var(--ink-2)}
.moon-sparkles{pointer-events:none;position:absolute;right:56px;top:67px;width:0;height:0}.moon-sparkles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#c69b35;animation:moon-celebrate 1.4s ease-out var(--delay) both}@keyframes moon-celebrate{0%{opacity:0;transform:rotate(var(--a)) translateX(45px)}20%{opacity:.8}100%{opacity:0;transform:rotate(var(--a)) translateX(95px)}}
:root[data-theme="dark"] .moon-orb{background:radial-gradient(circle at 35% 30%,#f0e4bf,#bfa266)}:root[data-theme="dark"] .moon-lantern span{color:#e6d5af}:root[data-theme="dark"] .moon-lantern[aria-pressed="true"] span{color:#4f3a17}
@media(hover:hover){.moon-lantern:hover{transform:translateY(-3px)}}
@media(max-width:650px){.moon-festival{padding:24px 12px 0;margin-top:8px}.moon-orb{width:54px;height:54px;right:8px;top:-7px;opacity:.75}.moon-orb:after{inset:14px}.moon-sprig{left:5px;top:8px;font-size:15px;letter-spacing:3px}.moon-copy h2{padding:0 24px;font-size:1.5rem}.moon-copy>p:not(.moon-eyebrow){font-size:.875rem}.moon-lanterns{gap:4px}.moon-lantern{padding:10px 8px;font-size:.8rem}.moon-sparkles{right:34px;top:20px}}
@media(prefers-reduced-motion:reduce){.moon-orb,.moon-lantern,.moon-lantern span{transition:none}.moon-lantern:hover{transform:none}.moon-sparkles{display:none}}
html[data-reading-motion] .moon-lantern,html[data-reading-motion] .moon-orb{transition:none}html[data-reading-motion] .moon-sparkles{display:none}

/* A discoverable, inline moon-letter. No overlay, sound or endless animation. */
button.moon-orb{border:1px solid #b69a5733;padding:0;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .5s,filter .5s}
button.moon-orb:focus-visible{outline:3px solid var(--green);outline-offset:7px}button.moon-orb:active{transform:scale(.95)}
.moon-rabbit{position:absolute;width:57%;height:57%;bottom:12%;left:20%;fill:#fff9e8;filter:drop-shadow(0 2px 2px #7a673322);opacity:0;transform:translateY(9px) scale(.8);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);z-index:2}.moon-rabbit .rabbit-eye{fill:#725d40}.moon-letter-open .moon-rabbit{opacity:1;transform:translateY(0) scale(1)}.moon-letter-open .moon-orb{box-shadow:0 0 90px #e7c98380}.moon-orb:before{content:"";position:absolute;inset:-8px;border:1px solid #b89c5722;border-radius:50%;pointer-events:none}
.moon-lantern{position:relative;min-width:100px;min-height:105px;gap:14px;border-radius:18px;transition:transform .2s,background .2s}.moon-lantern:active{transform:translateY(2px) scale(.96);background:#d9c48818}.moon-lantern .lantern-body{position:relative;width:35px;height:42px;border-radius:13px;background:linear-gradient(90deg,#b59a6830,#ead7aa70,#b59a6830);border:1px solid #b49b6744;box-shadow:inset 6px 0 0 #c4ab7922,inset -6px 0 0 #c4ab7922;transition:background .35s,box-shadow .35s,transform .35s}.lantern-body:before{content:"";position:absolute;top:-5px;left:7px;right:7px;height:4px;border-radius:3px;background:#a18b60}.lantern-body:after{content:"";position:absolute;bottom:-11px;left:16px;width:1px;height:10px;background:#b39451}.lantern-body i{position:absolute;width:4px;height:4px;border-radius:50%;background:#ba9551;bottom:-13px;left:14.5px}.moon-lantern[aria-pressed="true"] .lantern-body{background:linear-gradient(90deg,#dfb96c,#ffebac,#dfb96c);box-shadow:0 0 28px #e2bd6850,inset 6px 0 0 #a17d2920,inset -6px 0 0 #a17d2920}.moon-lantern[aria-pressed="true"] .lantern-body i{background:#bc9244}.moon-lantern[aria-pressed="true"]{color:var(--green);font-weight:600}
.moon-secret-hint{font-size:.75rem!important;color:var(--ink-3);margin:4px 0 0!important}.moon-letter[hidden]{display:none!important}.moon-letter{margin:26px auto 0;padding:26px 6px 10px;max-width:34rem;border-top:1px solid #bca77455;animation:moon-unfold .45s cubic-bezier(.2,.8,.2,1) both}.moon-letter h3{font-family:Georgia,"Songti SC",serif;font-weight:500;font-size:1.3rem;line-height:1.6;margin:12px 0}.moon-letter-kicker{font-size:.75rem;color:var(--ink-3);letter-spacing:.1em}.moon-letter>p{font-size:.925rem}.moon-letter .moon-signature{margin-top:18px;color:var(--ink-2);font-size:.85rem}.moon-copy-wish{font:inherit;font-size:.8rem;min-height:44px;margin-top:14px;padding:10px 15px;background:transparent;color:var(--ink);border:1px solid #af9b6b66;border-radius:99px;cursor:pointer;transition:background .2s,transform .2s}.moon-copy-wish:active{transform:scale(.97)}.moon-copy-wish:focus-visible{outline:3px solid var(--green);outline-offset:3px}.moon-copy-status{font-size:.8rem!important;min-height:3.8em;margin-top:8px!important}.moon-copy-wish:disabled{opacity:.65;cursor:wait}
@keyframes moon-unfold{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(hover:hover){button.moon-orb:hover{transform:translateY(-3px);filter:brightness(1.04)}.moon-lantern:hover .lantern-body{transform:rotate(-5deg)}.moon-copy-wish:hover{background:#dac78b22}}
@media(max-width:650px){.moon-lantern{min-width:0;flex:1;padding:10px 4px;font-size:.75rem}.moon-lanterns{gap:6px}.moon-letter{padding-inline:0}.moon-letter h3{font-size:1.15rem}.moon-rabbit{width:65%;height:65%;left:16%}}
@media(prefers-reduced-motion:reduce){button.moon-orb,.moon-rabbit,.moon-lantern,.moon-lantern .lantern-body,.moon-copy-wish{transition:none}.moon-letter{animation:none}button.moon-orb:hover,.moon-lantern:hover .lantern-body{transform:none}}
html[data-reading-motion] .moon-letter{animation:none}html[data-reading-motion] .moon-rabbit,html[data-reading-motion] button.moon-orb{transition:none}

/* Color-independent cues: text is retained, status shapes and selection lines add redundancy. */
.pill.warn::before{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);width:9px;height:8px}
.pill.danger::before{border-radius:0;transform:rotate(45deg);width:7px;height:7px}
.pill.plan::before{background:transparent;border:1px solid currentColor;width:7px;height:7px}
[role="tab"][aria-selected="true"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.moon-lantern .lantern-check{display:none;color:#49300e;font-size:18px;line-height:1;font-weight:800}
.moon-lantern[aria-pressed="true"] .lantern-check{display:block}
.moon-lantern[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px}
.moon-cake-moment{margin:18px auto 22px;max-width:30rem}
.moon-cake{position:relative;display:block;width:120px;height:120px;margin:0 auto 10px;padding:0;border:0;background:transparent;cursor:pointer;transition:transform .22s ease;filter:drop-shadow(0 5px 7px #54310e22)}
.moon-cake svg{display:block;width:100%;height:100%;overflow:visible}.cake-pastry{fill:#dba24f;stroke:#986020;stroke-width:1.5}.cake-ring{fill:#e9b66a;stroke:#9a6226;stroke-width:1.3}.cake-ring+.cake-ring{fill:none;stroke-dasharray:2 4}
.moon-cake img{position:absolute;width:42px;height:42px;left:39px;top:39px;border-radius:11px;filter:sepia(1) saturate(.7);mix-blend-mode:multiply;opacity:.9;pointer-events:none}
.moon-copy .moon-cake-caption{font-family:Georgia,"Songti SC",serif;font-size:1rem!important;color:var(--ink)}
.moon-copy .moon-cake-invite{font-size:.8rem!important;color:var(--ink-2)}.moon-copy .moon-cake-note{margin:12px auto 0!important;font-size:.9rem!important;color:var(--ink);max-width:28rem;animation:moon-unfold .3s ease both}.moon-cake-note[hidden]{display:none!important}
.moon-cake:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:35%}.moon-cake:active{transform:scale(.96)}.moon-cake[aria-expanded="true"] .cake-ring{stroke-width:2.2}
@media(hover:hover){.moon-cake:hover{transform:translateY(-3px) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.moon-cake{transition:none}.moon-cake:hover,.moon-cake:active{transform:none}.moon-cake-note{animation:none}}
html[data-reading-motion] .moon-cake{transition:none}html[data-reading-motion] .moon-cake:hover,html[data-reading-motion] .moon-cake:active{transform:none}html[data-reading-motion] .moon-cake-note{animation:none}
@media(forced-colors:active){.moon-lantern[aria-pressed="true"]{outline:2px solid Highlight}.moon-lantern .lantern-check{color:ButtonText}.moon-cake{border:2px solid ButtonText;border-radius:35%}.cake-pastry,.cake-ring{fill:Canvas;stroke:CanvasText}}

/* Refined seasonal still life, with quiet, explicit state labels. */
.moon-lantern[aria-pressed="true"]{text-decoration:none;color:var(--ink);font-weight:500}
.moon-lantern .lantern-check,.moon-lantern[aria-pressed="true"] .lantern-check{display:none}
.moon-lantern{gap:14px;min-height:128px;font-weight:500}
.moon-lantern::after{content:"点亮心愿";font-size:.68rem;letter-spacing:.04em;color:var(--ink-2);line-height:1.3}
.moon-lantern[aria-pressed="true"]::after{content:"已点亮 · 心意已到"}
html[lang^="en"] .moon-lantern::after{content:"Light a wish"}
html[lang^="en"] .moon-lantern[aria-pressed="true"]::after{content:"Lit · with care"}
html[lang="zh-TW"] .moon-lantern::after{content:"點亮心願"}
html[lang="zh-TW"] .moon-lantern[aria-pressed="true"]::after{content:"已點亮 · 心意已到"}
html[lang="ja"] .moon-lantern::after{content:"願いを灯す"}
html[lang="ja"] .moon-lantern[aria-pressed="true"]::after{content:"灯りました"}
html[lang="fr"] .moon-lantern::after{content:"Allumer un vœu"}
html[lang="fr"] .moon-lantern[aria-pressed="true"]::after{content:"Vœu allumé"}
html[lang="es"] .moon-lantern::after{content:"Enciende un deseo"}
html[lang="es"] .moon-lantern[aria-pressed="true"]::after{content:"Deseo encendido"}
.moon-lantern .lantern-body{border-radius:45%;width:36px;height:46px;background:linear-gradient(90deg,#89755333,#d7c29a66,#89755333);box-shadow:inset 7px 0 0 #aa916a18,inset -7px 0 0 #aa916a18}
.moon-lantern[aria-pressed="true"] .lantern-body{background:radial-gradient(ellipse,#fff6d5,#dfbd76);box-shadow:0 0 24px #dfbd7635,inset 7px 0 0 #a17d2915,inset -7px 0 0 #a17d2915}
.moon-cake-moment{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;text-align:left;max-width:32rem;margin:24px auto;padding:18px 0;border-block:1px solid var(--line-strong)}
.moon-cake{width:150px;height:150px;margin:0;filter:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.moon-cake-writing{min-width:0}.moon-copy .moon-cake-caption{font-size:1.15rem!important;letter-spacing:.04em}.moon-copy .moon-cake-invite{margin-top:5px;color:var(--ink-2)}.moon-copy .moon-cake-note{font-size:.85rem!important;line-height:1.85;margin-top:12px!important}
@media(hover:hover){.moon-cake:hover{transform:translateY(-2px)}}
.moon-cake:active{transform:translateY(1px) scale(.98)}
@media(max-width:450px){.moon-cake-moment{grid-template-columns:106px minmax(0,1fr);gap:12px}.moon-cake{width:106px;height:106px}.moon-copy .moon-cake-caption{font-size:1rem!important}}
@media(prefers-reduced-motion:reduce){.moon-cake{transition:none}.moon-cake:hover,.moon-cake:active{transform:none}}
html[data-reading-motion] .moon-cake{transition:none}html[data-reading-motion] .moon-cake:hover,html[data-reading-motion] .moon-cake:active{transform:none}

/* Hover invites action; press and content feedback are finite and interruptible. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not([data-reading-motion]) .button{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
 html:not([data-reading-motion]) .button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #17231d14}
 html:not([data-reading-motion]) .fcard,html:not([data-reading-motion]) .release-card{transition:transform .3s ease,box-shadow .3s ease}

}
.moon-cake svg{transform-origin:50% 60%}.moon-lantern .lantern-body{transform-origin:50% 0}

/* A sealed paper gift: tear strip first, wrapper folds second, pastry last. */
.moon-cake-moment{grid-template-columns:200px minmax(0,1fr);gap:24px;max-width:36rem;padding:24px 0}
.moon-cake{width:200px;height:210px;perspective:800px;isolation:isolate;overflow:visible}
.moon-cake:hover,.moon-cake:active{transform:none!important}
.moon-cake .cake-reveal{position:absolute;inset:5px 0;display:block;opacity:0;transform:translateY(16px) scale(.88)}
.moon-cake .cake-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none;mix-blend-mode:normal;opacity:1;border-radius:0;pointer-events:none}
.moon-cake .cake-stamp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7}
.cake-wrapper{position:absolute;inset:12px 9px 4px;display:block;filter:drop-shadow(0 8px 12px #142c2420);pointer-events:none}
.wrapper-front,.wrapper-back{position:absolute;inset:27px 0 0;border-radius:2px 2px 9px 9px;background:linear-gradient(110deg,#e9e2ce,#fff9e8 30%,#ece6d4 75%,#d8cfb9);border:1px solid #bdb298;transform-origin:50% 100%;clip-path:polygon(0 0,4% 2%,8% 0,12% 2%,16% 0,20% 2%,24% 0,28% 2%,32% 0,36% 2%,40% 0,44% 2%,48% 0,52% 2%,56% 0,60% 2%,64% 0,68% 2%,72% 0,76% 2%,80% 0,84% 2%,88% 0,92% 2%,96% 0,100% 2%,100% 100%,0 100%)}
.wrapper-back{background:#d8c9a9;inset:24px 3px 2px;transform-origin:50% 0}
.wrapper-front{display:flex;align-items:center;flex-direction:column;padding:15px 8px 12px;box-shadow:inset 5px 0 8px #6b5a3310,inset -5px 0 8px #6b5a3310}
.moon-cake .wrapper-front img{position:static;width:26px;height:26px;filter:none;mix-blend-mode:normal;opacity:1;border-radius:7px}
.wrapper-brand{font-size:11px;font-weight:650;color:#274f40;margin-top:4px;letter-spacing:.04em}
.wrapper-moon{display:block;width:28px;height:28px;border-radius:50%;margin:9px 0;background:radial-gradient(circle at 30% 25%,#ead8ac,#c4a270);box-shadow:0 0 0 1px #bda57555}
.wrapper-title{font-family:Georgia,"Songti SC",serif;font-size:12px;color:#405347;letter-spacing:.06em}
.wrapper-edition{font-size:7px;color:#6f7569;letter-spacing:.16em;margin-top:7px}
.wrapper-strip{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;height:31px;padding:0 12px;color:#f4e9ce;background:repeating-linear-gradient(90deg,#244d40 0 3px,#2c5748 3px 5px);border-radius:5px 5px 0 0;border-bottom:1px dashed #d8caa777;font-size:9px;letter-spacing:.08em;transform-origin:0 50%}
.moon-cake[aria-expanded="true"] .wrapper-strip{animation:gift-tear .65s cubic-bezier(.3,.05,.5,1) forwards}
.moon-cake[aria-expanded="true"] .wrapper-front{animation:gift-peel .7s .38s cubic-bezier(.25,.6,.3,1) forwards}
.moon-cake[aria-expanded="true"] .wrapper-back{animation:gift-back .6s .5s ease forwards}
.moon-cake[aria-expanded="true"] .cake-reveal{animation:gift-reveal .7s .55s cubic-bezier(.2,.7,.2,1) forwards}
.moon-cake-moment:has([aria-expanded="true"]) .moon-cake-note{animation:gift-wish .45s .85s both}
.cake-replay{font:inherit;font-size:.78rem;color:var(--ink-2);padding:8px 0;min-height:44px;background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-top:6px}.cake-replay[hidden]{display:none!important}.cake-replay:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@keyframes gift-tear{0%{transform:translate(0) rotate(0);clip-path:inset(0)}40%{transform:translate(7px,-9px) rotate(-7deg)}100%{transform:translate(65px,-45px) rotate(-18deg);opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes gift-peel{0%{transform:rotateX(0);opacity:1}65%{opacity:.8}100%{transform:translateY(30px) rotateX(-75deg);opacity:0}}
@keyframes gift-back{to{transform:translateY(-12px) scale(.94);opacity:0}}
@keyframes gift-reveal{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gift-wish{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:500px){.moon-cake-moment{grid-template-columns:150px minmax(0,1fr);gap:12px}.moon-cake{width:150px;height:180px}.wrapper-front{padding-top:10px}.wrapper-title{font-size:10px}.wrapper-moon{width:22px;height:22px;margin:6px 0}.wrapper-edition{font-size:6px}}
@media(max-width:360px){.moon-cake-moment{grid-template-columns:1fr;text-align:center}.moon-cake{margin:auto}}
@media(prefers-reduced-motion:reduce){.moon-cake[aria-expanded="true"] .cake-wrapper{display:none}.moon-cake[aria-expanded="true"] .cake-reveal{animation:none;opacity:1;transform:none}.moon-cake-moment:has([aria-expanded="true"]) .moon-cake-note{animation:none}}
html[data-reading-motion] .moon-cake[aria-expanded="true"] .cake-wrapper{display:none}html[data-reading-motion] .moon-cake[aria-expanded="true"] .cake-reveal{animation:none;opacity:1;transform:none}html[data-reading-motion] .moon-cake-moment:has([aria-expanded="true"]) .moon-cake-note{animation:none}

.moon-cake-moment:has([data-moon-cake][aria-expanded="true"]) .moon-cake-invite{display:none}

/* Editorial hierarchy across product, guidance and reading pages. */
.fpage-hero,.philo-hero,.cycle-hero{background:radial-gradient(ellipse at 80% 15%,var(--green-soft),transparent 62%);border-bottom:1px solid var(--line)}
.fpage-hero h1,.philo-hero h1,.cycle-hero h1{font-size:clamp(2.5rem,5.4vw,4.8rem);line-height:1.14;letter-spacing:-.04em;text-wrap:balance}
.section-head h2,.fsec-head h2{letter-spacing:-.025em;text-wrap:balance}
.fsec-grid{gap:0;border-top:1px solid var(--line-strong)}
.fcard{border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;padding:27px 24px;box-shadow:none}
.fcard h3{font-size:.91rem;letter-spacing:.025em}.fcard--warn{border-inline-start:2px solid var(--amber)}.fcard--state{background:var(--green-softer)}
.fsec .fsec-grid .fcard:hover{transform:none;box-shadow:none}
.cycle-index a,.fpage-index a{min-height:44px;display:inline-flex;align-items:center}
.cycle-index a:hover,.fpage-index a:hover{text-decoration:underline;text-underline-offset:5px}
.circular-flow{counter-reset:journey}.circular-flow li{position:relative;border-inline-start:2px solid var(--line-strong);border-radius:0;transition:border-color .25s}
.circular-flow li:hover{border-inline-start-color:var(--green-strong)}
.reading-layout{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:230px minmax(0,1fr);gap:52px;padding-inline:24px;align-items:start}
.reading-rail{position:sticky;top:28px;padding-top:64px;max-height:calc(100dvh - 40px);overflow:auto;scrollbar-width:thin}
.reading-index{border:0;background:none;padding:0}.reading-index summary{font-size:.85rem;font-weight:650;letter-spacing:.08em;padding:12px 0;color:var(--ink);cursor:pointer}
.reading-index nav{display:grid;gap:2px;border-left:1px solid var(--line-strong);margin-top:10px}
.reading-index a{display:block;min-height:36px;padding:8px 12px;font-size:.79rem;line-height:1.5;color:var(--ink-2);border-left:2px solid transparent;margin-left:-1px;text-decoration:none;transition:background .2s,color .2s}
.reading-index a:hover,.reading-index a[aria-current="location"]{background:var(--green-softer);color:var(--green-strong);border-left-color:currentColor}
.reading-index a[aria-current="location"]{font-weight:650;text-decoration:underline;text-underline-offset:4px}
.reading-layout .legal-page{padding-inline:0;max-width:760px;min-width:0}.legal-page h1{font-size:clamp(2.1rem,4.5vw,3.9rem);line-height:1.16;letter-spacing:-.035em;text-wrap:balance}
.legal-page h2{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.4;margin-top:46px;padding-top:24px;border-top:1px solid var(--line-strong)}
.legal-page .intro{font-size:1.12rem;line-height:1.85}.legal-page :is(p,li){overflow-wrap:anywhere}
.legal-page .support-grid a{text-decoration:none;border-radius:12px;border-color:var(--line-strong);padding:20px}
.reading-next{margin-top:64px;padding:32px;border-radius:18px;background:var(--green-softer);border:1px solid var(--line-strong)}
.reading-next h2{margin:0 0 12px;padding:0;border:0}.reading-next>div{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.reading-next .button{text-decoration:none}.reading-next .button.primary{color:var(--on-green)}
.legal-page details{border-bottom:1px solid var(--line-strong);padding:16px 0}.legal-page summary{cursor:pointer;line-height:1.6;min-height:44px;font-weight:600;padding:8px 0;color:var(--ink)}
.site-footer a:hover,.legal-nav a:hover{text-underline-offset:5px;text-decoration:underline}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--green-strong);outline-offset:5px}
@media(max-width:900px){.reading-layout{display:block;max-width:780px;padding-inline:22px}.reading-rail{position:static;padding-top:24px;max-height:none}.reading-index{border:1px solid var(--line-strong);border-radius:12px;padding:4px 14px}.reading-index nav{max-height:240px;overflow:auto;margin-bottom:12px}.reading-layout .legal-page{padding-top:32px}.reading-index a{min-height:44px}}
@media(max-width:600px){.fpage-hero h1,.philo-hero h1,.cycle-hero h1{font-size:2.4rem}.fcard{padding:22px 8px}.reading-next{padding:24px 18px}.reading-layout{padding-inline:18px}.reading-next>div{gap:14px}}
@media(max-width:360px){.legal-nav{height:auto;min-height:var(--header-h);flex-wrap:wrap;gap:4px 12px;padding-block:8px}.legal-nav-right{min-width:0;margin-left:auto}.legal-nav .back{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25}}
@media(prefers-reduced-motion:reduce){.reading-index a,.circular-flow li{transition:none}}

.material-finder{padding-block:24px 0;max-width:760px}.material-finder label{display:block;font-size:1.3rem;font-weight:650;margin-bottom:14px;letter-spacing:-.02em}.material-finder>div{display:flex;gap:10px}.material-finder input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;padding:14px 16px;min-height:48px}.material-finder button{font:inherit;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 16px;cursor:pointer}.material-finder p{font-size:.875rem;color:var(--ink-2);margin-top:12px}.material-card[hidden],.material-empty[hidden]{display:none!important}.material-grid{gap:32px}.material-card{border-radius:16px;box-shadow:none}.material-heading>span{font-variant-numeric:tabular-nums}.material-card dl>div{padding-block:14px;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .material-card:not([hidden]){animation:moon-unfold .3s ease both}}

/* Quiet glass: solid fallback, readable surfaces, finite transitions. */
.site-finder-launch{position:fixed;z-index:65;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;min-height:48px;padding:12px 16px;border:1px solid var(--glass-rim);border-radius:28px;background:var(--surface);color:var(--ink);font:inherit;font-size:.85rem;box-shadow:inset 0 1px 0 #ffffffb8,0 1px 2px #122b230c,0 9px 26px #122b231c;cursor:pointer;transition:box-shadow .28s var(--ease-out),background .28s ease,transform .28s var(--ease-out)}
.site-finder-launch span{max-width:180px;overflow:hidden;white-space:nowrap;opacity:1;transition:max-width .35s,opacity .2s}.site-finder-launch.is-compact:not(:hover):not(:focus-visible){gap:0}.site-finder-launch.is-compact:not(:hover):not(:focus-visible) span{max-width:0;opacity:0}.site-finder-launch:hover{box-shadow:inset 0 1px 0 #ffffffdf,0 2px 5px #122b2314,0 13px 30px #122b2323;transform:translateY(-2px)}
.site-finder{width:min(620px,calc(100% - 32px));max-height: min(760px,84dvh);padding:28px;border:1px solid var(--line-strong);border-radius:24px;color:var(--ink);background:var(--surface);box-shadow:0 30px 100px #0003;overflow:auto;overscroll-behavior:contain}.site-finder::backdrop{background:#10241d66;backdrop-filter:blur(7px)}
.finder-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.finder-top h2{margin:0;font-size:1.5rem;letter-spacing:-.025em}.finder-close{border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);min-width:44px;height:44px;font-size:26px;cursor:pointer}#finder-hint{color:var(--ink-2);font-size:.875rem;line-height:1.6}#finder-input{box-sizing:border-box;width:100%;min-height:54px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:14px;font:inherit;color:var(--ink);background:var(--surface)}.finder-status{font-size:.8rem;color:var(--ink-2);margin:20px 0 8px}.finder-results{display:grid;gap:3px}.finder-results a{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;padding:10px 14px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background .18s,transform .18s}.finder-results a:hover,.finder-results a:focus-visible{background:var(--green-soft);transform:translateX(3px)}.finder-results a span{color:var(--ink-2)}
@supports (background:color-mix(in srgb,white,transparent)){.site-finder-launch{background:color-mix(in srgb,var(--surface) 76%,transparent);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}.site-finder{background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(20px)}}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .site-finder[open]{animation:finder-arrive .32s cubic-bezier(.18,.8,.25,1)}html:not([data-reading-motion]) .site-finder[open]::backdrop{animation:finder-shade .24s ease}html:not([data-reading-motion]) .finder-results a{animation:finder-result .22s ease both}}
@keyframes finder-arrive{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}@keyframes finder-shade{from{background:#10241d00}to{background:#10241d66}}@keyframes finder-result{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:600px){.site-finder{padding:20px;border-radius:22px;max-height:82dvh}.site-finder-launch{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:48px;height:48px;padding:12px;justify-content:center}.site-finder-launch span{display:none}.finder-top h2{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.site-finder-launch,.site-finder-launch span,.finder-results a{transition:none;animation:none}}
html[data-reading-motion] .site-finder-launch,html[data-reading-motion] .site-finder-launch span,html[data-reading-motion] .finder-results a{transition:none;animation:none}

/* Native navigation keeps scroll/history intact; unsupported browsers navigate normally. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:route-out .2s ease both}
::view-transition-new(root){animation:route-in .42s cubic-bezier(.16,1,.3,1) both}
@keyframes route-out{to{opacity:0}}@keyframes route-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
html[data-reading-motion]::view-transition-old(root),html[data-reading-motion]::view-transition-new(root){animation:none}
@media(max-width:600px){.site-finder[open]{margin:auto auto max(12px,env(safe-area-inset-bottom))}html:not([data-reading-motion]) .site-finder[open]{transform-origin:50% 100%}}
.site-finder .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* No positional movement when readers request reduced motion. */
@media(prefers-reduced-motion:reduce){.finder-results a:hover,.finder-results a:focus-visible{transform:none}}
html[data-reading-motion] .finder-results a:hover,html[data-reading-motion] .finder-results a:focus-visible{transform:none}
/* Reserve footer space for the floating search control. */
body:has(.site-finder-launch) footer{padding-bottom:max(88px,env(safe-area-inset-bottom))}
/* A seasonal discovery after the opening screen, not a modal interruption. */
.marketing-home>.moon-festival{margin:0 auto;padding-top:64px;padding-bottom:72px;background:radial-gradient(ellipse at 80% 24%,#ecd28b20,transparent 58%)}
.moon-festival.surprise-waiting{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .surprise-revealed .moon-orb{animation:season-moon .9s ease backwards}html:not([data-reading-motion]) .surprise-revealed .moon-copy>h2,html:not([data-reading-motion]) .surprise-revealed .moon-copy>p{animation:season-wish .7s .15s backwards}html:not([data-reading-motion]) .surprise-revealed .moon-lanterns,html:not([data-reading-motion]) .surprise-revealed .moon-cake-moment{animation:season-wish .7s .3s backwards}}
@keyframes season-moon{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes season-wish{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:650px){.marketing-home>.moon-festival{padding-top:48px;padding-bottom:48px}.marketing-home>.moon-festival .moon-orb{top:12px}}

/* Keyboard discovery is immediate; the focused target must never fade away. */
.moon-festival:focus-within{opacity:1;pointer-events:auto}
.moon-festival.surprise-revealed:focus-within .moon-orb,.moon-festival.surprise-revealed:focus-within .moon-copy>h2,.moon-festival.surprise-revealed:focus-within .moon-copy>p,.moon-festival.surprise-revealed:focus-within .moon-lanterns,.moon-festival.surprise-revealed:focus-within .moon-cake-moment{animation:none}
html[data-reading-motion] button.moon-orb:hover,html[data-reading-motion] button.moon-orb:active,html[data-reading-motion] .moon-lantern:hover .lantern-body{transform:none}
@media(prefers-reduced-motion:reduce){button.moon-orb:active{transform:none}}
/* An invitation before the discovery: a quiet, tangible object in the hero. */
.season-preview[hidden]{display:none!important}
.season-preview{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px 16px;max-width:420px;width:100%;margin:4px auto 0;padding:18px 22px;text-align:left;border:1px solid #b59b633d;border-radius:18px;background:linear-gradient(125deg,#f3deac1c,transparent);color:var(--ink);text-decoration:none;transition:border-color .25s,box-shadow .25s}
.season-preview>span:nth-child(2){display:grid;gap:5px}.season-preview small{font-size:.65rem;letter-spacing:.12em;color:var(--ink-2)}.season-preview strong{font-family:Georgia,"Songti SC",serif;font-size:1.1rem;font-weight:500}.season-preview>span>span{font-size:.75rem;color:var(--ink-2)}.season-preview b{grid-column:2;font-size:.72rem;font-weight:500;color:var(--green-strong)}
.preview-moon{width:38px;height:38px;align-self:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff4d1,#c9aa68);box-shadow:0 0 24px #e2bf6650,inset -5px -3px 8px #a6813630}
.season-preview:hover{border-color:#b59b6380;box-shadow:0 8px 34px #a8883016}
.brand-hero:has(.season-preview:not([hidden])) .principles-cue{display:none}
.marketing-home>.moon-festival{isolation:isolate;padding-top:100px;padding-bottom:100px;max-width:1100px}
.marketing-home>.moon-festival:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 25%,#e5c47820,transparent 65%);pointer-events:none}
.moon-cake-moment{perspective:900px}.moon-cake{perspective:700px;overflow:visible}
.cake-wrapper{transform-style:preserve-3d}.wrapper-front{backface-visibility:hidden}
.wrapper-strip{box-shadow:0 3px 6px #142a2420}
.moon-cake[aria-expanded="false"]:hover .wrapper-strip{transform:translateY(-3px) rotate(-2deg);transition:transform .22s}
.moon-cake[aria-expanded="true"] .wrapper-strip{animation:unwrap-ribbon 1s cubic-bezier(.2,.7,.3,1) forwards}
.moon-cake[aria-expanded="true"] .wrapper-front{animation:unwrap-paper 1.1s .4s cubic-bezier(.2,.7,.3,1) forwards}
.moon-cake[aria-expanded="true"] .wrapper-back{animation:unwrap-lining .95s .65s ease forwards}
.moon-cake[aria-expanded="true"] .cake-reveal{animation:unwrap-cake 1s .7s cubic-bezier(.18,.8,.3,1) forwards}
.moon-cake-moment:has([aria-expanded="true"]) .moon-cake-note{animation:gift-wish .6s 1.3s both}
@keyframes unwrap-ribbon{0%{transform:translate(0);clip-path:inset(0)}25%{transform:translate(8px,-6px) rotate(-5deg);clip-path:inset(0 0 0 10%)}65%{transform:translate(42px,-24px) rotate(-22deg);opacity:1;clip-path:inset(0 0 0 45%)}100%{transform:translate(110px,-65px) rotate(-42deg);opacity:0;clip-path:inset(0 0 0 95%)}}
@keyframes unwrap-paper{0%{transform:rotateX(0);opacity:1}45%{transform:translateY(18px) rotateX(-32deg);opacity:1}100%{transform:translateY(80px) rotateX(-100deg) scale(.94);opacity:0}}
@keyframes unwrap-lining{35%{opacity:1;transform:translateY(-8px) rotateX(12deg)}100%{opacity:0;transform:translateY(-40px) rotateX(55deg)}}
@keyframes unwrap-cake{0%{opacity:0;transform:translateY(16px) scale(.85) rotate(-5deg)}65%{opacity:1;transform:translateY(-9px) scale(1.035) rotate(1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .season-preview .preview-moon{animation:preview-glow 2.8s ease-in-out 2}html:not([data-reading-motion]) .surprise-revealed:before{animation:moonlight-arrives 1.4s ease backwards}html:not([data-reading-motion]) .surprise-revealed .moon-copy>h2{animation:blessing-unfold 1s .12s backwards}html:not([data-reading-motion]) .surprise-revealed .moon-lanterns{animation:season-wish .8s .4s backwards}html:not([data-reading-motion]) .surprise-revealed .moon-cake-moment{animation:season-wish .9s .6s backwards}}
@keyframes preview-glow{50%{box-shadow:0 0 36px #e2bf6670,inset -5px -3px 8px #a6813630}}
@keyframes moonlight-arrives{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes blessing-unfold{from{opacity:0;transform:translateY(22px);clip-path:inset(0 0 100%)}to{opacity:1;transform:none;clip-path:inset(0)}}
@media(max-width:650px){.season-preview{max-width:340px;padding:14px 18px}.marketing-home>.moon-festival{padding-top:80px;padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.moon-cake[aria-expanded="true"] .cake-reveal{animation:none;opacity:1;transform:none}.moon-cake-moment:has([aria-expanded="true"]) .moon-cake-note{animation:none}.moon-cake[aria-expanded="false"]:hover .wrapper-strip{transform:none;transition:none}}
html[data-reading-motion] .moon-cake[aria-expanded="true"] .cake-reveal{animation:none;opacity:1;transform:none}html[data-reading-motion] .moon-cake-moment:has([aria-expanded="true"]) .moon-cake-note{animation:none}html[data-reading-motion] .moon-cake[aria-expanded="false"]:hover .wrapper-strip{transform:none;transition:none}
.moon-cake{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.moon-cake[aria-expanded="false"] .wrapper-strip{transform:translateX(var(--tear-pull,0px));transition:transform .12s ease-out}
@media(prefers-reduced-motion:reduce){.moon-cake[aria-expanded="false"] .wrapper-strip{transition:none}}
html[data-reading-motion] .moon-cake[aria-expanded="false"] .wrapper-strip{transition:none}
/* Edge-free seasonal scenery, with readable content above it. */
.season-preview{border:0;border-radius:0;background:none;box-shadow:none;padding-inline:8px}
.season-preview:hover{box-shadow:none;background:none}.season-preview b{text-decoration:underline;text-underline-offset:5px}
.marketing-home>.moon-festival{width:100%;max-width:none;padding-inline:max(24px,calc((100% - 800px)/2));background:none}
.marketing-home>.moon-festival:before{background:radial-gradient(ellipse at 50% 30%,#e8c58125,transparent 68%)}
.marketing-home>.moon-festival>.moon-orb{right:clamp(18px,8vw,170px);top:32px}
.season-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint}
.season-atmosphere i{position:absolute;left:calc(5% + var(--petal)*11%);top:calc(30px + var(--petal)*37px);width:9px;height:13px;background:linear-gradient(135deg,#d2ae69,#edd8a3);border-radius:65% 20% 65% 20%;opacity:calc(.13 + var(--season-progress,0)*.32);transform:translate3d(calc((var(--season-progress,0) - .5)*24px),calc(var(--season-progress,0)*-100px),0) rotate(calc(var(--petal)*33deg + var(--season-progress,0)*65deg))}
.season-atmosphere i:nth-child(3n){width:6px;height:9px}.moon-copy{overflow-wrap:anywhere}
@media(max-width:650px){.marketing-home>.moon-festival{padding-inline:20px;padding-top:100px}.marketing-home>.moon-festival>.moon-orb{right:24px;top:22px}.season-atmosphere i{opacity:.22}.moon-copy h2{padding-inline:0}}
@media(prefers-reduced-motion:reduce){.season-atmosphere i{transform:none;opacity:.2}}
html[data-reading-motion] .season-atmosphere i{transform:none;opacity:.2}
/* Status text must wrap at large text sizes rather than widen the page. */
.badge{max-width:100%;white-space:normal;overflow-wrap:anywhere;min-width:0}
.badge::before{flex-shrink:0}
html.reading-reflow .story-progress{display:flex;flex-wrap:wrap;overflow:visible}
html.reading-reflow .story-progress>li{min-width:0;max-width:100%}
html.reading-reflow .story-progress-link{max-width:100%;overflow-wrap:anywhere}
/* Small inline gifts: no popup, autoplay audio, or floating obstruction. */
.season-companion{grid-column:1/-1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:680px;margin:36px auto 64px;padding:24px 24px 32px;color:var(--ink)}
.companion-button{display:grid;place-items:center;flex:none;width:112px;height:128px;border:0;background:none;padding:0;color:inherit;cursor:pointer;touch-action:manipulation;border-radius:24px}
.companion-button svg{width:104px;height:120px;overflow:visible}.companion-button img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 8px 9px #37281022)}
.rabbit-shadow{fill:#957d4826}.bunny-ear,.bunny-body{fill:#f5ecda;stroke:#ac966d;stroke-width:1.3}.bunny-pink{fill:#e6beb0}.bunny-eye{fill:#4b463e}.bunny-nose{fill:none;stroke:#866e63;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.companion-invite{font-family:Georgia,"Songti SC",serif;font-size:1.05rem;margin:12px 0 4px;line-height:1.6}.companion-hint{font-size:.78rem;color:var(--ink-2)}.companion-wish{max-width:34em;margin:18px 0 0;line-height:1.85;overflow-wrap:anywhere}.companion-wish[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .is-greeted .companion-rabbit{animation:bunny-hello .7s ease}html:not([data-reading-motion]) .is-greeted .companion-button.cake img{animation:cake-hello .65s ease}html:not([data-reading-motion]) .is-greeted .companion-wish{animation:gift-wish .4s ease both}}
@keyframes bunny-hello{0%,100%{transform:translateY(0) rotate(0);transform-origin:60px 115px}35%{transform:translateY(-9px) rotate(-5deg)}70%{transform:translateY(-3px) rotate(3deg)}}
@keyframes cake-hello{0%,100%{transform:rotate(0) scale(1)}40%{transform:rotate(-8deg) scale(1.06)}70%{transform:rotate(4deg)}}
@media(max-width:480px){.season-companion{padding-inline:20px;margin-block:24px 48px}.companion-wish{font-size:.9rem}}

.companion-trail{display:block;width:fit-content;max-width:100%;margin:14px 0 18px;padding:8px 0;font-size:.82rem;line-height:1.7;font-weight:400;letter-spacing:normal;color:var(--ink-2);text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere;min-height:44px}.companion-trail:hover{color:var(--green-strong)}.fpage-hero .companion-trail,.philo-hero .companion-trail,.cycle-hero .companion-trail{margin-inline:0}.season-companion{scroll-margin-top:160px}
/* Product story: motion follows a quantity change, with a static accessible fallback. */
.life-loop{scroll-margin-top:110px}.life-loop .container{max-width:1050px}.loop-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;margin:32px 0}.loop-steps button{width:100%;min-height:60px;text-align:left;border:0;border-bottom:2px solid var(--line);background:none;color:var(--ink);padding:12px;cursor:pointer;font:inherit}.loop-steps button span{display:block;font-size:.75rem;opacity:.7}.loop-steps button[aria-pressed=true]{border-color:var(--green);font-weight:700}.loop-stage{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,6vw,80px);align-items:center;padding:32px 0}.loop-visual{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px;background:var(--bg);border-radius:36px;min-width:0}.loop-bottle{font-size:80px}.loop-meter{height:12px;width:min(180px,100%);background:#80978c30;border-radius:20px;overflow:hidden}.loop-meter i{display:block;height:100%;width:0;background:var(--green);transition:width .4s ease}.life-loop[data-stage="1"] .loop-meter i{width:100%}.life-loop[data-stage="2"] .loop-meter i,.life-loop[data-stage="3"] .loop-meter i{width:50%}.loop-content{min-width:0}.loop-content article[hidden],.loop-undo[hidden]{display:none}.loop-content h3{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.35}.loop-content p{line-height:1.8}.loop-stock{font-size:.85rem;color:var(--ink-2)}.loop-undo{font:inherit;background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;min-height:44px;cursor:pointer;margin-top:12px}.loop-feedback{min-height:2em;font-size:.85rem}.loop-boundary,.loop-hero-note{font-size:.82rem;color:var(--ink-2);line-height:1.8}.loop-boundary{max-width:65em}.brand-hero .hero-actions{margin-top:24px}.life-loop button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.life-loop .button:active{transform:scale(.98)}
@media(max-width:600px){.loop-stage{grid-template-columns:1fr;gap:16px;padding:12px 0}.loop-visual{padding:20px}.loop-bottle{font-size:56px}.loop-steps{gap:4px}.loop-steps button{font-size:.8rem;padding:10px 4px}.loop-content h3{font-size:1.5rem}.loop-content .button{width:100%}}
@media(prefers-reduced-motion:reduce){.loop-meter i{transition:none}.life-loop .button:active{transform:none}}html[data-reading-motion] .loop-meter i{transition:none}html[data-reading-motion] .life-loop .button:active{transform:none}
.trust-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:32px 0}.trust-columns h3{font-size:1.1rem}.trust-columns p{color:var(--ink-2);line-height:1.8}.trust-summary article{scroll-margin-top:120px}@media(max-width:800px){.trust-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.trust-columns{grid-template-columns:1fr;gap:12px}}
/* Calm / Fluid / Connected: shared timings, no stacked panel animations. */
:root{--motion-feedback:180ms;--motion-surface:320ms;--motion-story:600ms;--motion-continuity:cubic-bezier(.2,.75,.25,1)}
.platform-panel,.home-motion .platform-panel{animation:none!important}
.loop-steps.glass-options{isolation:isolate}.loop-steps li{position:relative;z-index:1;min-width:0}.loop-steps .selection-glass{z-index:0;border-radius:14px;transition:transform var(--motion-surface) var(--motion-continuity),width var(--motion-surface) var(--motion-continuity),height var(--motion-surface) var(--motion-continuity)}
.loop-steps button{border-bottom:0;border-radius:14px}.loop-steps button[aria-pressed=true]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.loop-visual{position:relative;overflow:hidden}.loop-bottle{display:block;width:140px;height:210px;overflow:visible}.bottle-body{fill:var(--surface)}.bottle-outline{fill:none;stroke:var(--ink-3);stroke-width:2}.bottle-cap{fill:var(--green)}.bottle-label{fill:var(--green-soft);stroke:var(--line-strong)}.bottle-leaf{fill:none;stroke:var(--green-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.bottle-milk{fill:var(--apricot-soft);transform:translateY(120px);transition:transform var(--motion-story) var(--motion-continuity)}
.life-loop[data-stage="1"] .bottle-milk{transform:translateY(0)}.life-loop[data-stage="2"] .bottle-milk,.life-loop[data-stage="3"] .bottle-milk{transform:translateY(60px)}
.loop-content{min-height:330px}.loop-content h3{margin-top:12px}.loop-content .loop-feedback{min-height:3.6em}.loop-content .button{transition:background-color var(--motion-feedback),transform var(--motion-feedback)}
/* Reading stays quiet; only interactive controls invite a response. */
.marketing-home .why-card:hover,.marketing-home .method-card:hover{transform:none;box-shadow:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .daily-card:hover,html:not([data-reading-motion]) .feature-glance-card:hover{transform:scale(1.008);box-shadow:none;border-color:var(--line-strong)}}
@media(max-width:600px){.loop-bottle{width:100px;height:150px}.loop-content{min-height:350px}.loop-stage{align-items:start}}
@media(prefers-reduced-motion:reduce){.bottle-milk,.loop-steps .selection-glass{transition:none!important}}html[data-reading-motion] .bottle-milk,html[data-reading-motion] .loop-steps .selection-glass{transition:none!important}
@media(forced-colors:active){.bottle-outline,.bottle-leaf{stroke:CanvasText}.bottle-milk{fill:Highlight}.loop-steps button[aria-pressed=true]{outline:2px solid Highlight}}
/* Editorial polish: a clear reading rhythm around the interactive example. */
.life-loop .section-head{max-width:700px;margin-bottom:28px}.life-loop .section-head>p:last-child{max-width:40em;line-height:1.85}
.life-loop .loop-steps{border-radius:18px;padding:6px;background:var(--surface);border:1px solid var(--line);box-shadow:none;gap:6px;margin-bottom:22px}
.life-loop .loop-steps .selection-glass{border-radius:12px;box-shadow:0 2px 5px #17231d0a;background:var(--green-soft);backdrop-filter:none}
.life-loop .loop-steps button{padding:10px 14px;min-height:64px;line-height:1.5;font-size:.94rem}.life-loop .loop-steps button span{font-size:.7rem;letter-spacing:.08em;margin-bottom:3px}.life-loop .loop-steps button[aria-pressed=true]{text-decoration:none;color:var(--green-strong)}
.loop-stage{gap:clamp(32px,6vw,72px);padding-block:20px 28px;align-items:center}.loop-visual{border-radius:28px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 35%,var(--surface) 0%,var(--bg-elev) 100%);padding:26px 24px;gap:12px}.loop-visual-heading{font-size:.83rem;letter-spacing:.06em;color:var(--ink-2)}.loop-bottle{filter:drop-shadow(0 9px 7px #17231d0b)}.loop-meter{height:6px;width:120px}.loop-visual strong{font-size:1.55rem;line-height:1.4;font-variant-numeric:tabular-nums}.loop-visual small{font-size:.75rem;color:var(--ink-2)}
.loop-content{min-height:0}.loop-content article{display:flex;flex-direction:column;align-items:flex-start;min-height:238px}.loop-content article[hidden]{display:none}.loop-content h3{margin:8px 0 14px;max-width:19em;text-wrap:balance;letter-spacing:-.025em}.loop-content .loop-stock{margin:0;font-size:.79rem;color:var(--ink-2)}.loop-content article>p:not(.loop-stock){margin:0 0 24px;max-width:31em;color:var(--ink-2);font-size:.97rem}.loop-content article>.button{margin-top:auto;min-height:48px;padding:12px 22px;border-radius:14px;box-shadow:none}.loop-undo{padding:8px 0;margin-top:8px;font-size:.85rem}.loop-feedback{margin:8px 0 0;color:var(--ink-2)}.loop-content .loop-feedback{min-height:1.8em}.loop-boundary{border-top:1px solid var(--line);padding-top:20px;max-width:none;margin-top:8px;margin-bottom:16px;font-size:.78rem;line-height:1.8}.life-loop .container>.button{padding-left:0;border:0;background:none;box-shadow:none;color:var(--green-strong);min-height:44px}
@media(max-width:600px){.life-loop .loop-steps button{font-size:.78rem;padding:10px 6px;min-height:60px}.life-loop .loop-steps{padding:4px;gap:2px;border-radius:16px}.loop-stage{gap:24px}.loop-visual{padding:20px;display:grid;grid-template-columns:minmax(64px,100px) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:20px;text-align:left;align-items:center}.loop-bottle{grid-column:1;grid-row:1/5;width:100px;height:150px;filter:none}.loop-visual-heading{grid-column:2;align-self:end;letter-spacing:0}.loop-meter{display:none}.loop-visual strong{grid-column:2;font-size:1.5rem}.loop-visual small{grid-column:2;align-self:start}.loop-content article{min-height:244px}.loop-content h3{font-size:1.5rem}.loop-content article>.button{width:100%}.loop-content .loop-feedback{min-height:3.6em}.loop-visual{border-radius:22px}}
@media(forced-colors:active){.life-loop .loop-steps button[aria-pressed=true]{outline:2px solid Highlight}.loop-visual{background:Canvas}}

/* Material and editorial finish: shared semantics, restrained depth. */
:root{--radius-dialog:28px;--radius-stage:32px;--chapter-cream:#f3efe5;--moon-lit:#f6e6ba;--moon-shade:#c5b486;--moon-shadow:#8a76472b}
:root[data-theme="dark"]{--chapter-cream:#19211c;--moon-lit:#e9d9ac;--moon-shade:#aa976c;--moon-shadow:#00000036}
body{background-color:var(--bg)}
.section-head h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:650;line-height:1.2;letter-spacing:-.025em}.section-head .lead{font-size:1.0625rem;line-height:1.85;max-width:62ch}
html[lang="zh-CN"] :is(h1,h2,h3){letter-spacing:0}.eyebrow{font-weight:600}.section-head{margin-bottom:48px}
.button,.hero-actions .button,.header-cta{border-radius:var(--radius-control);font-weight:600;box-shadow:none}.button:hover{box-shadow:none}.button.primary:hover{background:var(--green-strong);color:var(--on-green)}
.site-header{box-shadow:none;border-bottom-color:var(--line)}
:is(.why-card,.method-card,.ai-card,.vision-card,.daily-card,.release-card){border-radius:var(--radius-lg);box-shadow:none;border-color:var(--line);padding:24px}
:is(.why-card,.method-card,.ai-card,.vision-card):hover{transform:none!important;box-shadow:none!important}
:is(.why-card,.method-card,.ai-card,.vision-card) .ico{background:none;border:0;box-shadow:none;border-radius:0;width:32px;height:32px;justify-content:start;color:var(--green-strong)}
:is(.why-card,.method-card,.ai-card,.vision-card):hover .ico{transform:none;box-shadow:none}.why-card::after{display:none}
:is(.why-card,.method-card,.ai-card,.vision-card) h3{font-weight:600;font-size:1.125rem;line-height:1.5}
#daily{background:linear-gradient(180deg,var(--bg),var(--chapter-cream) 22%,var(--chapter-cream) 78%,var(--bg))}
.device-stage::before{inset:14% 0 5%;border-radius:var(--radius-stage);background:radial-gradient(ellipse at 50% 100%,var(--line-strong),transparent 66%);filter:none;opacity:.5}
.device-label{font-size:.75rem;letter-spacing:.08em;font-weight:500;color:var(--ink-2)}
#privacy{background:linear-gradient(180deg,var(--bg),var(--green-softer) 20%,var(--green-softer) 80%,var(--bg));border-block:0}
.marketing-home #ai{--bg:#151e19;--surface:#1c2921;--surface-2:#202f26;--ink:#f2f4ec;--ink-2:#c0ccc2;--ink-3:#a9b7ac;--green:#a6cbb0;--green-strong:#b8d8c0;--green-soft:#263d2e;--green-softer:#1c3023;--line:#d4e1d414;--line-strong:#d4e1d42b;color:var(--ink);background:var(--bg);border:0;position:relative}
.marketing-home #ai .ai-card{background:var(--surface);border-color:var(--line)}.marketing-home #ai :is(h2,h3,summary){color:var(--ink)}.marketing-home #ai :is(p,.lead){color:var(--ink-2)}.marketing-home #ai a{color:var(--green-strong)}.marketing-home #ai .badge{color:var(--green-strong);background:var(--green-soft)}
.fpage-hero,.philo-hero,.cycle-hero{background:radial-gradient(ellipse at 80% 0%,var(--green-softer),transparent 70%);border-bottom:0}
.fsec .fcard h3{font-size:1rem;letter-spacing:0;font-weight:600}.fsec .fcard{padding-block:24px}.reading-body p{line-height:1.85}
/* Illustrations sit in light and space, rather than on icon tiles. */
.loop-visual{background:radial-gradient(ellipse at 50% 32%,var(--surface),var(--chapter-cream));border:0;box-shadow:inset 0 1px var(--surface)}
.bottle-outline{stroke-width:1.35;stroke:var(--ink-3)}.bottle-body{fill:var(--surface);fill-opacity:.65}.bottle-cap{fill:var(--green-strong)}.bottle-label{fill:var(--surface);stroke:var(--line);stroke-width:.8}.bottle-milk{fill:var(--apricot-soft)}.bottle-glint{stroke:var(--surface);stroke-width:3;fill:none;opacity:.75;stroke-linecap:round}.bottle-ground{fill:var(--line);opacity:.6}
.moon-orb{background:radial-gradient(circle at 34% 27%,var(--moon-lit),var(--moon-shade) 80%);border:0;box-shadow:inset -7px -5px 18px var(--moon-shadow),0 0 72px var(--moon-shadow)}
.moon-orb::before,.moon-orb::after{border:0;box-shadow:none}.moon-crater{opacity:.12;filter:blur(2px)}
.moon-cake .cake-photo{filter:drop-shadow(0 6px 5px #58401c20)}.moon-cake .cake-stamp{opacity:.45;mix-blend-mode:multiply}
.moon-cake .wrapper-front{border-color:#8c754c30;box-shadow:inset 0 1px #fff8,0 4px 8px #49361410}.moon-copy>p{max-width:36em;margin-inline:auto}
@media(max-width:650px){.section-head h2{font-size:clamp(1.8rem,7.5vw,2.4rem)}.section-head{margin-bottom:32px}.section-head .lead{font-size:1rem}.device-stage::before{inset:18% 0 6%}:is(.why-card,.method-card,.ai-card,.vision-card,.daily-card,.release-card){padding:24px}.loop-visual{background:linear-gradient(115deg,var(--chapter-cream),var(--surface))}}
@media(forced-colors:active){.marketing-home #ai{color:CanvasText;background:Canvas}.marketing-home #ai :is(p,h2,h3,summary,a,.badge){color:CanvasText}.loop-visual{border:1px solid CanvasText}.moon-orb{border:1px solid ButtonText}}
/* First-visit review: keep identity, meaning and the next action in one screen. */
.marketing-home .brand-hero{min-height:0;padding:clamp(48px,8svh,88px) 0 56px;background:var(--bg)}
.brand-hero .hero-lockup{flex-direction:column;justify-content:center;gap:16px;margin-bottom:28px}.brand-hero .hero-lockup img{width:96px;height:96px;border-radius:24%;box-shadow:0 12px 32px #09674314}.brand-hero .hero-lockup b{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.brand-hero .hero-copy h1,html[lang="en"] .brand-hero .hero-copy h1{font-size:clamp(2.5rem,5.7vw,4.5rem);line-height:1.16;max-width:18ch;margin:0 auto 24px;font-weight:650;text-wrap:balance}.brand-hero .hero-copy .sub{max-width:36em;line-height:1.8;color:var(--ink-2)}
.brand-hero .hero-actions{margin-top:28px;gap:16px}.brand-hero .loop-hero-note{margin-top:16px}.brand-hero .season-preview{margin-top:12px;max-width:440px}.brand-hero .season-preview .preview-moon{width:36px;height:36px;flex-basis:36px}.brand-hero .season-preview strong{font-size:1rem}
.life-loop{padding-top:64px}.brand-hero .hero-actions .button{min-height:48px;white-space:normal;text-align:center}
@media(max-width:600px){.marketing-home .brand-hero{padding:40px 0 40px}.brand-hero .hero-lockup{margin-bottom:24px}.brand-hero .hero-lockup img{width:80px;height:80px}.brand-hero .hero-copy h1,html[lang="en"] .brand-hero .hero-copy h1{font-size:clamp(2.15rem,9vw,3rem);line-height:1.22}.brand-hero .hero-copy .sub{font-size:1rem;max-width:24em}.brand-hero .hero-actions{display:grid;grid-template-columns:1fr;width:100%;max-width:330px;margin-inline:auto;gap:8px}.brand-hero .hero-actions .button{width:100%;justify-content:center}.brand-hero .season-preview{gap:12px;text-align:left}.life-loop{padding-top:48px}}
@media(max-height:650px) and (min-width:761px){.marketing-home .brand-hero{padding-block:32px}.brand-hero .hero-lockup{margin-bottom:20px}.brand-hero .hero-copy h1,html[lang="en"] .brand-hero .hero-copy h1{font-size:3rem}}

/* Reflow product examples with the reader's text size; never crop quantities. */
.loop-visual > :is(strong,small,.loop-visual-heading){min-width:0;max-width:100%;overflow-wrap:anywhere}
.loop-bottle{max-width:100%}
.loop-steps button{height:100%;overflow-wrap:anywhere}
.life-loop .loop-steps .selection-glass::before{border-radius:inherit}
html.reading-reflow .loop-stage{grid-template-columns:minmax(0,1fr)}
html.reading-reflow .loop-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
html.reading-reflow .loop-visual{display:flex;align-items:center;text-align:center;gap:16px}
html.reading-reflow .loop-content article{min-height:0}
html.reading-reflow .mock-row .mt :is(b,small){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* Search belongs in the mobile menu, outside the content and tap targets. */
.site-finder-menu{display:flex;align-items:center;gap:12px;width:100%;padding:16px 4px;min-height:48px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.site-finder-menu svg{flex-shrink:0}
@media(max-width:960px){.site-finder-launch.has-menu-entry{display:none}body:has(.site-finder-launch.has-menu-entry) footer{padding-bottom:max(32px,env(safe-area-inset-bottom))}}

/* An open editorial stage: one object, four chapters, no inset app window. */
.cycle-story{padding:100px 0 64px;background:var(--bg);scroll-margin-top:var(--header-h);overflow:clip}
.cycle-story>.container{max-width:1120px}
.cycle-story-head{text-align:center;max-width:840px;margin:0 auto 48px}
.cycle-story-head .eyebrow{justify-content:center}
.cycle-story-head h2{font-size:clamp(2.5rem,5.4vw,4.75rem);line-height:1.2;font-weight:600;letter-spacing:-.035em;margin:24px 0}
.cycle-story-head h2 em{font-style:normal;color:var(--green-strong)}
.cycle-story-head>p:last-child{font-size:1.1rem;line-height:1.9;color:var(--ink-2);margin-top:24px}
.cycle-story-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:16px}
.cycle-story-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--ink-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:8px}
.cycle-story-nav a:hover,.cycle-story-nav a[aria-current]{color:var(--green-strong);text-decoration-color:currentColor}
.cycle-story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,112px);align-items:start}
.cycle-art{position:sticky;top:calc(var(--header-h) + 32px);height:min(650px,calc(100svh - var(--header-h) - 64px));min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;color:var(--green-strong)}
.cycle-art-orbit{position:absolute;inset:12% -8% 18%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,var(--green-soft),transparent 68%);opacity:.65;transition:opacity .8s ease,transform .8s ease;pointer-events:none}
.cycle-bottle{width:clamp(140px,min(18vw,28svh),250px);height:auto;overflow:visible;filter:drop-shadow(0 18px 14px #132c1c0b);transition:transform .7s var(--ease-out)}
.cycle-bottle .bottle-milk{transform:translateY(0);transition:transform .8s var(--ease-out)}
[data-cycle-stage="1"] .cycle-bottle .bottle-milk{transform:translateY(60px)}
[data-cycle-stage="2"] .cycle-bottle .bottle-milk,[data-cycle-stage="3"] .cycle-bottle .bottle-milk{transform:translateY(125px)}
.cycle-return{position:absolute;inset:8% 0 auto;width:100%;height:72%;opacity:0;transform:rotate(-28deg) scale(.9);transition:opacity .7s ease,transform 1s var(--ease-out);pointer-events:none}
[data-cycle-stage="2"] .cycle-return,[data-cycle-stage="3"] .cycle-return{opacity:.55;transform:rotate(0) scale(1)}
[data-cycle-stage="3"] .cycle-art-orbit{opacity:1;transform:scale(1.12)}
.cycle-art-caption{margin:32px 0 0;font-size:1rem;text-align:center;color:var(--ink);line-height:1.7;max-width:100%;overflow-wrap:anywhere}
.cycle-art-caption [hidden]{display:none}
.cycle-art-note{font-size:.75rem;color:var(--ink-3);margin-top:8px}
.cycle-chapter{min-height:65svh;display:flex;flex-direction:column;justify-content:center;padding:64px 0;scroll-margin-top:calc(var(--header-h) + 32px)}
.cycle-chapter-label{font-size:.8rem;color:var(--green-strong);margin:0 0 22px;letter-spacing:.08em}
.cycle-chapter-label span{margin-right:14px;font-variant-numeric:tabular-nums}
.cycle-chapter h3{font-size:clamp(1.8rem,3vw,2.65rem);font-weight:600;line-height:1.35;letter-spacing:-.025em;margin:0 0 24px}
.cycle-chapter>p:not(.cycle-chapter-label){font-size:1rem;line-height:1.9;color:var(--ink-2);margin:0;max-width:30em}
.cycle-story-link{display:inline-flex;align-items:center;gap:16px;align-self:flex-start;min-height:44px;margin-top:24px;font-weight:600;color:var(--green-strong);text-underline-offset:6px}
.cycle-story-link:hover{text-decoration:underline}
.cycle-chapter>p.cycle-story-limit{font-size:.8rem;line-height:1.8;margin-top:24px;color:var(--ink-3)}
@media(max-width:760px){
 .cycle-story{padding:64px 0 32px}.cycle-story-head{margin-bottom:24px;text-align:left}.cycle-story-head .eyebrow{justify-content:flex-start}
 .cycle-story-head h2{font-size:clamp(2rem,7.8vw,3rem)}.cycle-story-head>p:last-child{font-size:1rem}.cycle-story-nav{justify-content:flex-start;gap:4px 22px;margin-bottom:0}
 .cycle-story-layout{grid-template-columns:minmax(0,1fr);gap:0}.cycle-art{position:relative;top:auto;height:380px;min-height:0;margin:8px 0 0}.cycle-bottle{width:156px}.cycle-return{inset:0 0 auto;height:78%}.cycle-art-orbit{inset:0}
 .cycle-art-caption{margin-top:20px}.cycle-chapter{min-height:0;padding:40px 0;border-top:1px solid var(--line)}.cycle-chapter h3{font-size:1.8rem}.cycle-chapter-label{margin-bottom:16px}
}
html.reading-reflow .cycle-story-layout{grid-template-columns:minmax(0,1fr)}
html.reading-reflow .cycle-art{position:relative;top:auto;height:auto;min-height:0;padding:40px 0}
html.reading-reflow .cycle-chapter{min-height:0;padding:48px 0;border-top:1px solid var(--line)}
html.reading-reflow .cycle-story-head h2{font-size:2rem}
html[data-reading-motion] .cycle-art *,html[data-reading-motion] .cycle-bottle .bottle-milk{transition:none!important}
@media(prefers-reduced-motion:reduce){.cycle-art *,.cycle-bottle .bottle-milk{transition:none!important}}

/* Shared spatial material: depth belongs to objects; reading stays on a stable plane. */
:root{--fluid-mint:#b2c3a6;--fluid-blue:#afbfbe;--fluid-gold:#d5c8a8;--fluid-rim:#ffffff80}
:root[data-theme=dark]{--fluid-mint:#53684e;--fluid-blue:#4e6565;--fluid-gold:#766b4e;--fluid-rim:#ffffff30}
.marketing-home{background:radial-gradient(ellipse 80% 620px at 70% 600px,color-mix(in srgb,var(--fluid-mint) 8%,transparent),transparent),var(--bg)}
.marketing-home .brand-hero,.marketing-home .cycle-story,.marketing-home .trust-summary,.marketing-home .product-intro{background:transparent}
.brand-hero .hero-lockup{perspective:800px}
.brand-hero .hero-lockup img{transform:rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));box-shadow:0 2px 3px #21322315,0 12px 24px #21322315;transition:transform .55s var(--ease-out),box-shadow .55s ease}
.cycle-art{perspective:1000px;--scene-tint:var(--fluid-mint)}
[data-cycle-stage="1"] .cycle-art{--scene-tint:var(--fluid-gold)}
[data-cycle-stage="2"] .cycle-art{--scene-tint:var(--fluid-blue)}
[data-cycle-stage="3"] .cycle-art{--scene-tint:var(--fluid-mint)}
.cycle-art-orbit{background:radial-gradient(ellipse at var(--pointer-light-x,35%) var(--pointer-light-y,25%),color-mix(in srgb,var(--scene-tint) 26%,transparent),transparent 65%);filter:blur(20px);transition:background 1s ease,opacity 1s ease,transform 1s ease;transform:rotate(-12deg) scale(1.12,.8)}
.cycle-bottle{transform:rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,-6deg));transform-origin:50% 70%;filter:drop-shadow(5px 12px 10px #3036291c);transition:transform .55s var(--ease-out),filter .6s ease}
.cycle-bottle .bottle-body{fill:url(#cycle-glass);fill-opacity:1}
.cycle-bottle .bottle-milk{fill:url(#cycle-milk)}
.cycle-bottle .bottle-cap{fill:url(#cycle-cap);stroke:#ffffff55;stroke-width:.5}
.cycle-bottle .bottle-outline{stroke:color-mix(in srgb,var(--green-strong) 45%,transparent);stroke-width:.7}
.cycle-bottle .bottle-label{fill:var(--surface);fill-opacity:.8;stroke:#ffffff88}
.cycle-glass-edge{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.42}
.cycle-cap-top{fill:#b4d4bf;opacity:.55}
.cycle-bottle .bottle-ground{fill:#183b29;opacity:.13;filter:blur(3px)}
.cycle-return{filter:drop-shadow(0 8px 5px #194c2820)}
[data-cycle-stage="2"] .cycle-return,[data-cycle-stage="3"] .cycle-return{transform:rotateX(22deg) rotateZ(-12deg);color:color-mix(in srgb,var(--scene-tint) 65%,var(--green-strong));opacity:.85}
.device-stage{perspective:1400px}
.device-stage .phone,.device-stage .ipad{rotate:0 1 0 var(--depth-y,0deg);transition:rotate .65s var(--ease-out),box-shadow .65s ease}
/* One neutral control layer. The background passes through; the moving rim supplies depth. */
.glass-options{background:color-mix(in srgb,var(--surface) 62%,transparent);border-color:var(--glass-rim);box-shadow:inset 0 1px 0 #ffffffb0,inset 0 -1px 0 #162b1e0b,0 2px 5px #1731260a,0 12px 30px #1731260d;backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
.selection-glass::before{background:radial-gradient(ellipse 85% 70% at var(--pointer-light-x,var(--light-x,35%)) -18%,#ffffffdf,transparent 75%),linear-gradient(155deg,#ffffffc4,#f0f5efad);border:1px solid #ffffffc7;box-shadow:inset 0 1px 0 #ffffffed,inset 0 -1px 0 #18342618,0 1px 2px #18342612,0 5px 14px #1834261a;backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);transition:transform .28s var(--ease-out),box-shadow .28s ease,background-position .28s ease}
:root[data-theme=dark] .glass-options{background:#1b231f9c;box-shadow:inset 0 1px 0 #ffffff2a,inset 0 -1px 0 #0004,0 8px 28px #0003}
:root[data-theme=dark] .selection-glass::before{background:radial-gradient(ellipse 85% 70% at var(--pointer-light-x,var(--light-x,35%)) -18%,#ffffff40,transparent 75%),linear-gradient(155deg,#53675a9c,#23362cba);border-color:#ffffff40;box-shadow:inset 0 1px 0 #ffffff52,inset 0 -1px 0 #0006,0 2px 3px #0003,0 6px 16px #0004}
.glass-ready .selection-glass{transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s var(--ease-out),height .32s var(--ease-out)}
.glass-options.is-dragging .selection-glass{transition:none}
@media(max-width:360px){html[lang^="en"] .platform-tabs button{font-size:.8125rem;letter-spacing:-.015em}}
@media(prefers-reduced-transparency:reduce){.glass-options,.site-finder-launch{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}.selection-glass::before{background:var(--green-soft)!important;border:2px solid var(--green);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.site-finder-launch:hover{transform:none}}
html[data-reading-motion] .site-finder-launch:hover{transform:none}
:is(.button,.nav-cta,.glass-options button){position:relative;isolation:isolate;overflow:hidden}
.contact-light{position:absolute;display:block;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fffef58c 0%,#fffef530 36%,transparent 72%);mix-blend-mode:soft-light;z-index:2;will-change:transform,opacity}
.button.primary,.nav-cta{background:linear-gradient(145deg,color-mix(in srgb,var(--green) 85%,var(--blue)),var(--green) 55%,color-mix(in srgb,var(--green) 85%,var(--amber)));box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 0 #00000012,0 6px 16px #17312612;transition:background .4s ease,box-shadow .35s ease,transform .25s var(--ease-out)}
.button.primary:hover,.nav-cta:hover{box-shadow:inset 0 1px 0 #ffffff77,0 8px 24px #17312624;background:linear-gradient(125deg,var(--green-strong),var(--green),color-mix(in srgb,var(--green) 75%,var(--blue)))}
/* AI shares the page's light instead of cutting abruptly to a dark rectangle. */
.marketing-home #ai{--bg:inherit;--surface:inherit;--surface-2:inherit;--ink:inherit;--ink-2:inherit;--ink-3:inherit;--green:inherit;--green-strong:inherit;--green-soft:inherit;--green-softer:inherit;--line:inherit;--line-strong:inherit;background:radial-gradient(ellipse at 65% 50%,color-mix(in srgb,var(--fluid-blue) 15%,transparent),transparent 70%)}
.marketing-home #ai .ai-card{background:color-mix(in srgb,var(--surface) 55%,transparent);border-color:var(--line)}
@media(prefers-reduced-motion:reduce){.cycle-bottle,.brand-hero .hero-lockup img{transform:none!important}.device-stage .phone,.device-stage .ipad{rotate:none!important}.selection-glass,.selection-glass::before,.cycle-art-orbit{transition:none!important}}
html[data-reading-motion] :is(.cycle-bottle,.brand-hero .hero-lockup img){transform:none!important}
html[data-reading-motion] .device-stage :is(.phone,.ipad){rotate:none!important}
html[data-reading-motion] :is(.selection-glass,.selection-glass::before,.cycle-art-orbit){transition:none!important}
@media(forced-colors:active){.contact-light{display:none}.cycle-bottle .bottle-body{fill:Canvas}.cycle-bottle .bottle-milk{fill:Highlight}.cycle-bottle .bottle-outline{stroke:CanvasText}.cycle-bottle .bottle-cap{fill:CanvasText}}
.cycle-bottle .bottle-glint{stroke:#fff;opacity:.55;stroke-width:1.5}
[data-cycle-stage="1"] .milk-surface{animation:milk-settle .9s ease-out}
[data-cycle-stage="2"] .milk-surface{animation:milk-release .9s ease-out}
@keyframes milk-settle{0%{transform:translateY(2px) scaleY(.85)}35%{transform:translateY(-2px) scaleY(1.03)}70%{transform:translateY(1px)}100%{transform:none}}
@keyframes milk-release{0%{transform:translateY(-2px)}40%{transform:translateY(2px)}100%{transform:none}}
.cycle-art-caption span:not([hidden]){animation:caption-flow .4s ease-out}
@keyframes caption-flow{from{opacity:.25;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.milk-surface,.cycle-art-caption span{animation:none!important}}
html[data-reading-motion] :is(.milk-surface,.cycle-art-caption span){animation:none!important}
/* The story follows the finger: continuous liquid and a compact mobile stage. */
.cycle-scroll-ready .cycle-bottle .bottle-milk{transform:translateY(var(--cycle-level,0px));transition:none}
.cycle-scroll-ready .cycle-return{opacity:var(--cycle-arc,0);transition:color .5s ease;transform:rotateX(22deg) rotateZ(-12deg)}
.cycle-scroll-ready .milk-surface{animation:none}
.platform-flow{display:flow-root;overflow-anchor:none}
@media(max-width:760px) and (min-height:700px){
 .cycle-compact-stage .cycle-art{position:sticky;top:var(--measured-header-h,var(--header-h));z-index:3;height:230px;margin:0;padding:12px 0 24px;background:linear-gradient(var(--bg) 0%,var(--bg) 92%,transparent);pointer-events:none}
 .cycle-compact-stage .cycle-bottle{width:94px;flex-shrink:0}.cycle-compact-stage .cycle-art-caption{font-size:.8rem;line-height:1.4;margin-top:8px}.cycle-compact-stage .cycle-art-note{display:none}
 .cycle-compact-stage .cycle-art-orbit{inset:0 15% 10%;filter:blur(12px)}.cycle-compact-stage .cycle-return{inset:0 0 auto;height:80%}
 .cycle-compact-stage .cycle-chapter{min-height:65svh;scroll-margin-top:calc(var(--measured-header-h,var(--header-h)) + 246px);padding:32px 0 64px}
}

/* A continuous scene, rather than a collection of decorated panels. */
.cycle-bottle .bottle-brand{clip-path:inset(0 round 6px)}
.cycle-bottle .box-brand{clip-path:inset(0 round 3px)}
.cycle-bottle .bottle-ribs{fill:none;stroke:#728a7b;stroke-width:.7;opacity:.28}
.cycle-bottle .bottle-outline{fill:none;stroke:#6d877044;stroke-width:.5}
.cycle-scroll-ready .cycle-bottle{transform:perspective(900px) rotateY(var(--bottle-turn,-8deg));transition:none}
.cycle-scroll-ready .bottle-cap,.cycle-scroll-ready .cycle-cap-top{translate:0 var(--cap-lift,0px)}
.cycle-return{display:none}
.cycle-art-orbit{background:radial-gradient(ellipse,color-mix(in srgb,var(--scene-tint) 35%,transparent),transparent 70%)}
.cycle-story-nav,.cycle-chapter{border:0}
.cycle-chapter h3{font-weight:550;line-height:1.45;letter-spacing:0}
.scroll-composed:is(.device-stage,.demo-handset,.platform-shots){translate:0 var(--scene-rise,0px);scale:var(--scene-scale,1);transform-origin:50% 70%;perspective:1400px}
.scroll-composed.device-stage .phone{rotate:1 0 0 var(--scene-tilt,0deg)}
.scroll-composed.device-stage .ipad{translate:0 calc(var(--scene-rise,0px)*.45);rotate:0 1 0 var(--scene-tilt,0deg)}
.marketing-home .moon-festival{background:transparent!important;border:0;box-shadow:none;isolation:isolate}
.marketing-home .moon-festival::before{content:'';position:absolute;inset:-100px 0 -100px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 68% 46%,#dcc18a25,transparent 65%);border-radius:50%;filter:blur(28px)}
.marketing-home .moon-festival .moon-copy{background:transparent}
.scroll-composed.moon-festival .moon-orb{translate:0 calc(var(--scene-rise,0px)*-.6)}
@media(max-width:760px){.scroll-composed:is(.device-stage,.demo-handset,.platform-shots){translate:0 calc(var(--scene-rise,0px)*.5)}.cycle-chapter h3{font-size:clamp(1.65rem,6vw,2rem)}}
@media(prefers-reduced-motion:reduce){.scroll-composed,.scroll-composed *{translate:none!important;scale:1!important;rotate:none!important}.cycle-scroll-ready .bottle-cap,.cycle-scroll-ready .cycle-cap-top{translate:none}}
html[data-reading-motion] .scroll-composed,html[data-reading-motion] .scroll-composed *{translate:none!important;scale:1!important;rotate:none!important}
@media(max-width:760px) and (min-height:700px){.cycle-compact-stage .cycle-chapter{min-height:55svh;justify-content:flex-start;padding-top:48px}}

/* A quiet reading trace accompanies the object, without another card or overlay. */
.cycle-art::after{content:"";display:block;width:96px;height:2px;margin-top:22px;border-radius:2px;background:linear-gradient(to right,var(--green-strong) 0%,var(--green-strong) calc(var(--cycle-progress,0)*100%),var(--line) calc(var(--cycle-progress,0)*100%),var(--line) 100%)}
@media(max-width:760px){.cycle-compact-stage .cycle-art::after{margin-top:10px;width:64px}}
html.reading-reflow .cycle-art::after,html[data-reading-motion] .cycle-art::after{display:none}
@media(prefers-reduced-motion:reduce){.cycle-art::after{display:none}}

/* Keep the search controls reachable even with large text or a small keyboard viewport. */
.site-finder[open]{display:flex;flex-direction:column;overflow:hidden}
.finder-top,#finder-hint,#finder-input,.finder-status,.finder-keys{flex-shrink:0}
.finder-close{flex-shrink:0}
.finder-results{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:6px;padding:3px;scrollbar-gutter:stable}
.finder-results a{flex-shrink:0;overflow-wrap:anywhere}
.finder-keys{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.75rem;line-height:1.5;color:var(--ink-2)}
@media(pointer:coarse){.finder-keys{display:none}}
@media(max-height:500px){.site-finder{max-height:calc(100dvh - 16px);padding:14px 18px}.site-finder #finder-hint,.finder-keys{display:none}.finder-status{margin-top:10px}}
/* At enlarged text sizes, preserve all content rather than squeezing results to zero. */
html.reading-reflow .site-finder[open]{display:block;overflow-y:auto}
html.reading-reflow .finder-results{overflow:visible;scrollbar-gutter:auto}
html.reading-reflow .finder-keys{display:none}

/* A seasonal greeting in the first view, naturally part of the hero. */
.hero-festival-greeting{display:block;width:fit-content;margin:0 auto 24px;text-align:center;color:#8d5724;font-family:ui-serif,Georgia,serif;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.4;text-decoration:none;text-wrap:balance;text-shadow:0 2px 22px #dda74344}
.hero-festival-greeting[hidden]{display:none}
.hero-festival-greeting>span{font-size:.55em;vertical-align:middle;margin:0 .65em;color:#b28038}
.hero-festival-greeting small{display:block;font-family:var(--font-sans,system-ui);font-size:.875rem;letter-spacing:.08em;margin-top:8px;color:var(--ink-2)}
.brand-hero:has(.hero-festival-greeting:not([hidden])){background:radial-gradient(ellipse at 50% 5%,#e4b65b20,transparent 64%)}
html[data-theme="dark"] .hero-festival-greeting{color:#f0cf8e}
.bottle-deposit{transform-origin:70px 150px;transform:translateY(var(--placement-y,0px)) scale(var(--placement-scale,1));opacity:var(--bottle-visible,1)}
.glass-bin{opacity:var(--bin-show,0);transform:translateY(calc((1 - var(--bin-show,0))*20px))}
@media(prefers-reduced-motion:reduce){.bottle-deposit,.glass-bin{transform:none;opacity:1}.glass-bin{display:none}}
html[data-reading-motion] .bottle-deposit,html.reading-reflow .bottle-deposit{transform:none;opacity:1}
html[data-reading-motion] .glass-bin,html.reading-reflow .glass-bin{display:none}
@media(max-width:760px){.hero-festival-greeting{margin-bottom:20px;font-size:1.7rem}.hero-festival-greeting small{font-size:.8rem;letter-spacing:.03em}.brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-lockup img{width:72px;height:72px}}

/* Mobile navigation: readable destinations, deliberate hierarchy, no background drift. */
body.navigation-open{overflow:hidden}
.mobile-nav{padding:18px max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:var(--bg-elev)}
.mobile-nav .mobile-nav-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start;padding:18px 4px;border-radius:0}
.mobile-nav-item>span{font-size:1.16rem;letter-spacing:-.02em}
.mobile-nav-item>small{grid-column:1;font-size:.82rem;line-height:1.6;max-width:32em}
.mobile-nav-item::after{content:'↗';grid-column:2;grid-row:1 / 3;align-self:center;color:var(--ink-3);font-size:1.1rem}
.mobile-nav .mobile-nav-primary{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:20px 0;padding:18px 20px;border-radius:18px;background:var(--green);color:var(--on-green)}
.mobile-nav .mobile-nav-primary small{color:inherit;opacity:.9;font-size:.78rem;line-height:1.6}
.mobile-nav .lang-switch--mobile{display:inline-flex;width:auto;min-height:44px;padding:10px 16px;margin-right:12px}
.mobile-nav .language-picker--mobile{display:block;width:100%;margin:4px 0 12px}
.mobile-nav .language-picker--mobile .lang-switch{display:inline-flex;width:auto;margin:0;min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}
.mobile-nav .language-picker--mobile .language-panel{position:static;width:100%;max-height:none;margin-top:10px;box-shadow:none}
.mobile-nav .language-options a{display:flex;justify-content:flex-start;padding:8px 10px;border:0;font-size:.9rem;font-weight:500}
.mobile-nav .language-options a[aria-current="page"]{font-weight:700}
html[data-reading-size]:not([data-reading-size="100"]) .site-header .language-picker{display:none}
html[data-reading-size]:not([data-reading-size="100"]) .mobile-nav .language-picker--mobile{display:block}
.mobile-nav .theme-toggle--mobile{display:inline-flex;width:44px;height:44px;vertical-align:middle;margin:0;justify-content:center}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .mobile-nav.open .mobile-nav-item{animation:nav-destination-in .3s var(--ease-out) both}}
@keyframes nav-destination-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-height:550px){.mobile-nav .mobile-nav-item{padding-block:12px}.mobile-nav .mobile-nav-primary{margin-block:12px}}

/* Editorial pacing: the story has chapters, the commitments have a lead and supporting notes. */
.site-header{view-transition-name:site-navigation}
::view-transition-group(site-navigation){animation-duration:.3s}
::view-transition-old(site-navigation),::view-transition-new(site-navigation){animation:none;mix-blend-mode:normal}
.cycle-chapter-label{display:flex;align-items:center;gap:12px;letter-spacing:.04em}
.cycle-chapter-label::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px;flex:none}
.circular-editorial{grid-template-columns:1.1fr 1fr;column-gap:clamp(32px,6vw,88px);row-gap:0;align-items:start}
.circular-editorial article{border:0;border-radius:0;box-shadow:none;background:none;padding:28px 0;transition:none}
.circular-editorial article:first-child{grid-row:span 2;padding-right:clamp(16px,3vw,48px)}
.circular-editorial article:first-child h3{font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.25;letter-spacing:-.035em;margin:20px 0}
.circular-editorial article+article{border-top:1px solid var(--line)}
.circular-editorial article>span{font-size:.8125rem;letter-spacing:.04em}
.circular-editorial article:focus-within{box-shadow:none}
@media(max-width:700px){.circular-editorial{grid-template-columns:1fr;gap:0}.circular-editorial article:first-child{grid-row:auto;padding-right:0}.circular-editorial article{padding:24px 0}}
@media(prefers-reduced-motion:reduce){::view-transition-group(site-navigation){animation:none}}
html[data-reading-motion]::view-transition-group(site-navigation){animation:none}
/* Disclosure movement follows the action; no scroll blocking or delayed focus. */
@media(prefers-reduced-motion:no-preference){
 html:not([data-reading-motion]) details[open]>:not(summary){animation:disclosure-settle .28s cubic-bezier(.16,1,.3,1) both}
}
@media(prefers-reduced-motion:reduce){html details[open]>:not(summary){animation:none!important}}
html[data-reading-motion] details[open]>:not(summary){animation:none!important}
@keyframes disclosure-settle{from{opacity:.25;transform:translateY(-5px)}to{opacity:1;transform:none}}

.story-progress-link .n{min-width:6px;width:6px;height:6px;padding:0;border-radius:50%;background:currentColor}
.story-progress-link[aria-current="step"] .n{background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 15%,transparent)}

/* Reading stays steady; previews and controls own the movement. */
:is(.fpage-hero,.philo-hero,.cycle-hero) h1{max-width:20ch;text-wrap:balance;letter-spacing:-.035em}
:is(.fpage-hero,.philo-hero,.cycle-hero) .lead{max-width:62ch;text-wrap:pretty}
:is(.section-head,.fsec-head,.philo-sec) h2{text-wrap:balance}
.js :is(.section-head,.fsec-head,.philo-sec h2,.lead,.section-more,.roadmap-caveat){transform:none;opacity:1;transition:none}
.fcard,.material-card,.misread-card,.circular-scope article{box-shadow:none}
.fcard:hover,.material-card:hover,.misread-card:hover,.circular-scope article:hover{transform:none}
:is(.fcard,.material-card,.misread-card) h3{letter-spacing:-.015em;text-wrap:pretty}
:is(.material-card,.legal-page,.philo-page) :is(p,dd,li){overflow-wrap:break-word}
:is(.material-finder input,.finder-close,.material-finder button){transition:border-color .14s ease,background-color .14s ease}
:is(.material-finder button,.finder-close):active{background:var(--green-soft)}
/* Distinct arrival: product previews settle, reading destinations remain still. */
.js :is(.fcard,.release-card,.member-preview).reveal{transform:translateY(10px);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.js :is(.fcard,.release-card,.member-preview).reveal.in-view{transform:none}
.js .reading-next.reveal{transform:none;transition:none}
@media(hover:hover) and (pointer:fine){
 :is(.section-more,.reading-next,.legal-page,.philo-page) a{ text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .16s ease,color .16s ease}
 :is(.section-more,.reading-next,.legal-page,.philo-page) a:hover{text-decoration-color:currentColor}
}
@media(max-width:760px){
 :is(.fpage-hero,.philo-hero,.cycle-hero) h1{font-size:clamp(2rem,8vw,3.2rem);line-height:1.16}
 .js :is(.fcard,.release-card,.member-preview).reveal{transform:none;transition:none}
}
@media(prefers-reduced-motion:reduce){.js .reveal{transform:none!important;transition:none!important}}
html[data-reading-motion] .js .reveal,html[data-reading-motion] .reveal{transform:none!important;transition:none!important}

/* Hover describes what can be activated, without moving the pointer target. */
html:root :is(.why-card,.method-card,.ai-card,.vision-card,.fcard,.release-card):hover{transform:none;box-shadow:none}
html:root :is(.why-card,.method-card,.ai-card,.vision-card):hover .ico{transform:none;box-shadow:none}
html:root .why-card:hover::after{transform:scaleX(0)}
:is(a.daily-card,a.feature-glance-card,.support-grid a){transition:border-color .16s ease,background-color .16s ease,box-shadow .18s ease}
:is(.button,.nav-cta){transition:box-shadow .18s ease,background-color .16s ease,transform .12s ease}
:is(.section-more a,.fsec-more a,.footer-col a,.footer-utility a,.material-card>a,.legal-nav .back){text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.28em;transition:color .14s ease,text-decoration-color .14s ease}
@media(hover:hover) and (pointer:fine){
 html:root :is(a.daily-card,a.feature-glance-card,.support-grid a):hover{transform:none;border-color:var(--green);background-color:color-mix(in srgb,var(--green-soft) 30%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 10%,transparent)}
 html:root :is(.button,.nav-cta):hover{transform:none;box-shadow:inset 0 1px 0 #ffffff44,0 4px 12px #1731261a}
 html:root :is(.button,.nav-cta):active{transform:scale(.985);box-shadow:inset 0 1px 2px #17312616}
 .nav-links a:hover{background:var(--green-soft)}
 :is(.section-more a,.fsec-more a,.footer-col a,.footer-utility a,.material-card>a,.legal-nav .back):hover{text-decoration-color:currentColor}
 :is(.platform-help,.circular-faq) summary:hover{background:var(--green-softer);border-radius:8px}
}
:is(a.daily-card,a.feature-glance-card,.support-grid a):focus-visible{outline:2px solid var(--green);outline-offset:4px;border-color:var(--green);transform:none}
:is(.section-more a,.fsec-more a,.footer-col a,.footer-utility a,.material-card>a,.legal-nav .back):focus-visible{text-decoration-color:currentColor}
@media(hover:none){
 html:root :is(.button,.nav-cta,a.daily-card,a.feature-glance-card,.support-grid a):hover{transform:none;box-shadow:none}
 html:root :is(.why-card,.method-card,.ai-card,.vision-card,.daily-card):hover .ico{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){html:root :is(.button,.nav-cta,a.daily-card,a.feature-glance-card,.support-grid a):active{transform:none}}
html:root[data-reading-motion] :is(.button,.nav-cta,a.daily-card,a.feature-glance-card,.support-grid a):active{transform:none}
@media(forced-colors:active){:is(a.daily-card,a.feature-glance-card,.support-grid a):hover{outline:1px solid Highlight}}

/* Alternate the reading rhythm: a path, a directory, then optional depth. */
.marketing-home #features .feature-glance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.marketing-home #features .feature-glance-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px 18px;padding:26px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.marketing-home #features .feature-glance-card>.ico{grid-column:1;grid-row:1/4;margin:0;width:40px;height:40px}
.marketing-home #features .feature-glance-card>h3,.marketing-home #features .feature-glance-card>ul,.marketing-home #features .feature-glance-cta{grid-column:2;margin:0}
.marketing-home #features .feature-glance-card::before{display:none}
.marketing-home #features .feature-glance-card:hover{background:none;box-shadow:none;border-color:var(--green)}
.roadmap-disclosure{border-block:1px solid var(--line);margin-block:24px}
.roadmap-disclosure>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:18px 0;font-weight:600;cursor:pointer;color:var(--ink)}
.roadmap-disclosure>summary::-webkit-details-marker{display:none}
.roadmap-disclosure>summary span{font-size:1.5rem;line-height:1;flex:none;transition:transform .18s ease}
.roadmap-disclosure[open]>summary span{transform:rotate(45deg)}
.roadmap-disclosure>summary:hover{color:var(--green-strong)}
.roadmap-disclosure>summary:focus-visible{outline-offset:4px}
.roadmap-disclosure .roadmap-rail{padding-bottom:24px}
@media(max-width:760px){.marketing-home #features .feature-glance-grid{grid-template-columns:1fr}.marketing-home #features .feature-glance-card{padding-block:24px}}
html.reading-reflow .marketing-home #features .feature-glance-grid{grid-template-columns:1fr}
@media(prefers-reduced-motion:reduce){.roadmap-disclosure>summary span{transition:none}}
html[data-reading-motion] .roadmap-disclosure>summary span{transition:none}
.marketing-home #features .feature-glance-card li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;border:0;padding-top:0}
.marketing-home #features .feature-glance-card li .badge{flex:none}
.roadmap-disclosure .roadmap-rail::before{display:none}

/* Let the main story breathe; future plans are available without demanding a detour. */
.marketing-home .optional-depth{padding-block:24px;background:none}
.explore-depth{border-block:1px solid var(--line)}
.explore-depth>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;list-style:none;cursor:pointer}
.explore-depth>summary::-webkit-details-marker{display:none}
.explore-depth>summary small{display:block;font-size:.75rem;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.explore-depth>summary strong{display:block;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.5;text-wrap:balance}
.depth-toggle{font-size:1.6rem;flex:none;line-height:1;transition:transform .18s ease}
.explore-depth[open]>summary .depth-toggle{transform:rotate(45deg)}
.explore-depth>summary:hover strong{color:var(--green-strong)}
.explore-depth>summary:focus-visible{outline-offset:4px}
.depth-content{padding:12px 0 32px}.depth-content>.container{width:100%;padding-inline:0}
.depth-content .section-head{margin-bottom:28px}.depth-content .section-head h2{font-size:1.75rem}
.marketing-home #daily .daily-grid{gap:0 32px}
.marketing-home #daily .daily-card{border:0;border-radius:0;border-top:1px solid var(--line-strong);background:none;box-shadow:none;padding:24px 0}
.marketing-home #daily .daily-card:hover{background:none;box-shadow:none;border-color:var(--green)}
.marketing-home #daily .daily-card::before{display:none}
@media(max-width:760px){.marketing-home .optional-depth{padding-block:16px}.explore-depth>summary{gap:16px;padding-block:20px}.depth-content .member-layout{gap:24px}.marketing-home #daily .daily-grid{gap:0}}
@media(prefers-reduced-motion:reduce){.depth-toggle{transition:none}}
html[data-reading-motion] .depth-toggle{transition:none}

/* Preserve source detail and aspect ratio; do not sharpen UI screenshots artificially. */
.android-gallery img{image-rendering:auto;object-fit:contain}
.harmony-shot{margin:0;text-align:center}.harmony-shot img{display:block;width:auto;max-width:100%;max-height:590px;margin:auto;border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.harmony-shot figcaption{font-size:0.875rem;margin-top:16px;color:var(--ink-3)}
.harmony-gallery{min-width:0}.harmony-gallery .android-tabs{margin:0 auto 18px}.harmony-gallery [hidden]{display:none!important}


/* A small fold response follows placement, in either scroll direction. */
.box-flap-front{transform-origin:55px 155px;transform:rotate(calc(var(--box-response,0)*3deg))}
.box-flap-side{transform-origin:100px 155px;transform:rotate(calc(var(--box-response,0)*-3deg))}
@media(prefers-reduced-motion:reduce){.box-flap-front,.box-flap-side{transform:none}}
html[data-reading-motion] .box-flap-front,html[data-reading-motion] .box-flap-side{transform:none}

/* Quiet chapter wayfinding: small outlined stops, a distinct current step. */
html:root .story-progress-link{position:relative;gap:12px;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink-2);transition:color .18s ease,background .18s ease}
html:root .story-progress-link .n{box-sizing:border-box;flex:0 0 7px;width:7px;min-width:7px;height:7px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;box-shadow:none;color:inherit;position:relative;z-index:1}
html:root .story-progress-link[aria-current="step"]{color:var(--green-strong);background:var(--green-soft);border-color:transparent}
html:root .story-progress-link[aria-current="step"] .n{color:inherit;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent)}
html:root .story-progress-link:hover{color:var(--green-strong);background:var(--green-softer)}
html:root .story-progress-link:focus-visible{outline:2px solid var(--green-strong);outline-offset:3px}
@media(max-width:720px){html:root .story-progress-link{box-sizing:border-box;width:100%;min-width:0;padding-inline:4px;gap:4px;overflow-wrap:anywhere;text-align:center}}
@media(min-width:860px) and (prefers-reduced-motion:no-preference){
 html:root:not([data-reading-motion]):not(.reading-reflow):not(.motion-static) .story-progress{gap:8px;position:relative}
 html:root:not([data-reading-motion]):not(.reading-reflow):not(.motion-static) .story-progress li{position:relative}
 html:root:not([data-reading-motion]):not(.reading-reflow):not(.motion-static) .story-progress li:not(:last-child)::after{content:"";position:absolute;left:16px;top:30px;height:36px;width:1px;background:var(--line-strong);pointer-events:none}
 html:root:not([data-reading-motion]):not(.reading-reflow):not(.motion-static) .story-progress-link{min-width:92px}
}
@media(max-width:859px){html:root .story-progress-link{justify-content:center;gap:8px;padding:8px 6px}}
@media(forced-colors:active){html:root .story-progress-link[aria-current="step"]{outline:1px solid Highlight}html:root .story-progress-link .n{forced-color-adjust:auto}}

/* Secondary pages share a reading rhythm, while keeping their own layout. */
:is(.fpage-hero,.philo-hero,.cycle-hero) .lead{line-height:1.75}
:is(.legal-page,.material-card,.philo-sec) h3{line-height:1.45;text-wrap:pretty}
.material-card dd{margin-inline-start:0;line-height:1.75}
.material-card dt{line-height:1.5;margin-bottom:6px}
.material-quick-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:10px 18px;margin:12px 18px 0 0;border:1px solid var(--line-strong);border-radius:12px;color:var(--green-strong);background:var(--surface);font-weight:600;transition:background .18s ease,border-color .18s ease}
.material-quick-link:hover{background:var(--green-soft);border-color:var(--green)}
#find-material{scroll-margin-top:calc(var(--header-h) + 24px);padding-block:28px 12px}
.reading-index summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.reading-index summary::-webkit-details-marker{display:none}
.reading-index summary::after{content:"";flex:0 0 7px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.reading-index[open] summary::after{transform:rotate(225deg)}
.legal-page :is(h2,h3):focus{outline:none}
.legal-page :is(h2,h3):focus-visible{outline:2px solid var(--green-strong);outline-offset:6px}
@media(max-width:600px){
 :is(.fpage-hero,.philo-hero,.cycle-hero) .lead{font-size:1rem;line-height:1.75}
 .material-card{padding:22px 18px}
 .material-grid{gap:20px}
 .reading-layout .legal-page h2{margin-top:36px;padding-top:22px}
 .reading-index summary{min-height:44px;letter-spacing:.02em}
 .material-quick-link{margin-right:12px}
}
@media(prefers-reduced-motion:reduce){.reading-index summary::after,.material-quick-link{transition:none}}

/* Complete placement with a reversible fold and paper seal. */
.box-flap-back{transform-origin:72px 145px;transform:scaleY(calc(1 - var(--box-close,0)));opacity:calc(1 - var(--box-close,0))}
.box-flap-front{transform-origin:55px 155px;transform:scaleY(calc(1 - var(--box-close,0))) rotate(calc(var(--box-response,0)*3deg));opacity:calc(1 - var(--box-close,0))}
.box-flap-side{transform-origin:100px 155px;transform:scaleY(calc(1 - var(--box-close,0))) rotate(calc(var(--box-response,0)*-3deg));opacity:calc(1 - var(--box-close,0))}
.box-sealed{opacity:var(--box-close,0);transform-origin:70px 148px;transform:scaleY(calc(.7 + var(--box-close,0)*.3))}
@media(prefers-reduced-motion:reduce){.box-sealed{display:none}}
html[data-reading-motion] .box-sealed,html.reading-reflow .box-sealed{display:none}

/* Seasonal light stays behind the existing centered brand composition. */
.brand-hero{isolation:isolate;position:relative}
.hero-moonlight{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 78% 32%,#e9bd6830,transparent 42%),radial-gradient(ellipse at 22% 76%,#cdddb91a,transparent 48%);mask-image:linear-gradient(#000 78%,transparent)}
.brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-moonlight{display:block}
.hero-little-moon{position:absolute;top:22%;right:max(6%,calc((100% - 1080px)/2));width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff8db,#ebd3a0 62%,#c5a96d);box-shadow:0 0 50px 18px #e3b75919,inset -5px -3px 12px #ac884326;opacity:.82}
.hero-moonlight i{position:absolute;width:3px;height:3px;background:#cbaa67;border-radius:50%;opacity:.45}
.hero-moonlight i:nth-child(2){top:19%;right:17%}.hero-moonlight i:nth-child(3){top:37%;right:7%;width:2px;height:2px}.hero-moonlight i:nth-child(4){top:31%;left:10%;width:2px;height:2px}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .hero-little-moon{animation:hero-moon-drift 8s ease-in-out infinite alternate}}
@keyframes hero-moon-drift{from{transform:translateY(0)}to{transform:translateY(-7px)}}
html[data-theme="dark"] .hero-moonlight{opacity:.7}
@media(max-width:700px){.hero-little-moon{width:30px;height:30px;right:7%;top:26%;opacity:.55}.hero-moonlight i:nth-child(2){right:12%;top:22%}.hero-moonlight{background:radial-gradient(ellipse at 85% 30%,#e9bd6826,transparent 52%)}}
@media(forced-colors:active){.hero-moonlight{display:none!important}}

.life-purpose h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.2;letter-spacing:-.035em;text-wrap:balance;margin-bottom:24px}.purpose-lead{max-width:48em;font-size:1.125rem;line-height:1.85;color:var(--ink-2)}.purpose-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:36px 0}.purpose-topics p{border-top:1px solid var(--line-strong);padding-top:20px;color:var(--ink-2);line-height:1.8}.purpose-topics strong{display:block;color:var(--ink);font-size:1.125rem;margin-bottom:10px}.purpose-status{max-width:64em;font-size:.875rem;line-height:1.8;color:var(--ink-2);margin-bottom:18px}@media(max-width:700px){.purpose-topics{grid-template-columns:1fr;gap:16px;margin:28px 0}.purpose-lead{font-size:1rem}}

/* The bottle passes behind the front rim, never through the cardboard. */
.box-receiving .bottle-occlusion{clip-path:url(#box-opening-mask)}
@media(prefers-reduced-motion:reduce){.box-receiving .bottle-occlusion{clip-path:url(#bin-deposit-boundary)}}
html[data-reading-motion] .bottle-occlusion,html.reading-reflow .bottle-occlusion{clip-path:url(#bin-deposit-boundary)}

/* Everyday choices stay readable without scripts and use native disclosure keys. */
.everyday-choices>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.choice-list{border-top:1px solid var(--line-strong)}
.day-choice{border-bottom:1px solid var(--line-strong);padding:0}
.day-choice summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:18px 4px;list-style:none;cursor:pointer;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600;color:var(--ink)}
.day-choice summary::-webkit-details-marker{display:none}
.choice-mark{font-weight:400;flex:none;transition:transform .22s ease}
.day-choice[open] .choice-mark{transform:rotate(45deg)}
.choice-body{padding:0 4px 28px;max-width:40em}.choice-body p{line-height:1.85;color:var(--ink-2)}
.choice-body small{display:block;color:var(--ink-2);line-height:1.7;margin:16px 0 8px}
.choice-body a{display:inline-flex;align-items:center;gap:10px;min-height:44px;line-height:1.7;text-underline-offset:5px}
.day-choice summary:focus-visible{outline:3px solid var(--green-strong);outline-offset:4px;border-radius:4px}
@media(hover:hover){.day-choice summary:hover{color:var(--green-strong)}.choice-body a:hover{text-decoration-thickness:2px}}
@media(max-width:760px){.everyday-choices>.container{grid-template-columns:1fr;gap:20px}}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .day-choice[open] .choice-body{animation:disclosure-settle .24s ease both}}
@media(prefers-reduced-motion:reduce){.choice-mark{transition:none}}
html[data-reading-motion] .choice-mark{transition:none}

/* Progressive scroll detail: the text stays still and readable in every browser. */
.purpose-topics p{position:relative}
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
 html:not([data-reading-motion]) .purpose-topics p::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--green-strong);transform-origin:left;animation:purpose-line linear both;animation-timeline:view();animation-range:entry 10% entry 95%}
 }
}
@keyframes purpose-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.difference-section{overflow:hidden}
.marketing-home #why>.container{display:block}
.difference-intro{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:16px clamp(28px,5vw,90px);align-items:end;margin-bottom:clamp(40px,6vw,74px)}
.difference-intro .eyebrow{grid-column:1/-1;margin:0}
.difference-intro h2{font-size:clamp(2.15rem,4.2vw,4.25rem);line-height:1.18;letter-spacing:-.04em;margin:0;max-width:13ch;text-wrap:balance}
.difference-intro>p:last-child{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.85;max-width:31em;margin:0 0 .35em;text-wrap:pretty}
.difference-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);padding:0;margin:0;list-style:none;counter-reset:none}
.difference-flow li{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;padding-top:20px}
.difference-flow li:not(:last-child)::after{content:"";position:absolute;top:43px;left:48px;right:calc(-1 * clamp(18px,3vw,48px));height:2px;background:linear-gradient(90deg,var(--green-strong),var(--line-strong));opacity:.7;transform-origin:left}
.difference-step{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--green);border-radius:50%;color:var(--green-strong);font-size:.82rem;font-weight:700;letter-spacing:.04em;background:var(--bg-elev);margin-bottom:28px}
.difference-kicker{display:block;color:var(--green-strong);font-size:.78rem;font-weight:700;letter-spacing:.1em;margin-bottom:10px}
.difference-flow h3{font-size:clamp(1.3rem,1.9vw,1.72rem);line-height:1.35;letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance}
.difference-flow p{color:var(--ink-2);line-height:1.8;max-width:28ch;margin:0 0 20px}
.difference-flow a,.difference-bottom a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--green-strong);font-weight:650;line-height:1.5;text-underline-offset:5px}
.difference-flow a{align-self:end}
.difference-flow a span,.difference-bottom a span{transition:translate .2s ease}
.difference-bottom{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.8fr);gap:clamp(20px,4vw,72px);align-items:center;border-top:1px solid var(--line-strong);margin-top:clamp(44px,7vw,94px);padding-top:clamp(28px,4vw,46px)}
.difference-promise{display:flex;gap:18px;align-items:flex-start}
.difference-promise>span{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:14px;background:var(--green-soft);color:var(--green-strong);font-size:1.25rem}
.difference-promise h3{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.35;margin:0 0 6px}
.difference-promise p,.difference-future{color:var(--ink-2);line-height:1.78;margin:0;max-width:48em}
.difference-future{font-size:.91rem;border-left:1px solid var(--line-strong);padding-left:clamp(18px,3vw,42px)}
@media(hover:hover) and (pointer:fine){.difference-flow a:hover span,.difference-bottom a:hover span{translate:2px -2px}}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .difference-flow li:not(:last-child)::after{animation:purpose-line linear both;animation-timeline:view();animation-range:entry 0% entry 90%}}
@media(max-width:760px){.difference-intro{grid-template-columns:1fr;gap:15px;margin-bottom:36px}.difference-intro .eyebrow{grid-column:auto}.difference-intro h2{font-size:clamp(2rem,8vw,3rem)}.difference-flow{grid-template-columns:1fr;gap:0}.difference-flow li{grid-template-columns:54px minmax(0,1fr);grid-template-rows:1fr;gap:0 16px;padding:0 0 34px;border:0}.difference-flow li:not(:last-child)::after{top:50px;left:23px;right:auto;bottom:0;width:1px;height:auto;background:var(--line-strong);transform:none;animation:none!important}.difference-step{grid-column:1;margin:0}.difference-flow li>div{grid-column:2}.difference-flow h3{margin-bottom:8px}.difference-flow p{max-width:36ch;margin-bottom:8px}.difference-bottom{grid-template-columns:1fr;gap:20px;margin-top:4px;padding-top:28px}.difference-future{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}}
@media(max-width:380px){.difference-promise{gap:12px}.difference-promise>span{width:36px;height:36px}.difference-flow li{grid-template-columns:46px minmax(0,1fr);column-gap:12px}}
html.reading-reflow .difference-intro,html.reading-reflow .difference-flow,html.reading-reflow .difference-bottom{grid-template-columns:1fr}
html.reading-reflow .difference-intro .eyebrow{grid-column:auto}
html.reading-reflow .difference-flow{gap:28px}
html.reading-reflow .difference-flow li:not(:last-child)::after{display:none}
html.reading-reflow .difference-future{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}

/* A practical entry after the unchanged opening screen. */
.start-here{position:relative;isolation:isolate;padding:clamp(80px,10vw,136px) 0 clamp(56px,8vw,100px);background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--surface) 45%,transparent) 150px,var(--surface) 58%);border:0}
.start-here::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:180px;background:radial-gradient(ellipse 75% 95% at 50% 0,color-mix(in srgb,var(--fluid-mint) 11%,transparent),transparent);pointer-events:none}
.start-intro{max-width:730px;margin:0 auto clamp(34px,5vw,60px);text-align:center}
.start-intro h2{font-size:clamp(2.15rem,4.5vw,3.75rem);line-height:1.16;letter-spacing:-.04em;margin:12px 0 14px;text-wrap:balance}
.start-intro>p:last-child{color:var(--ink-2);font-size:1.0625rem;line-height:1.75;max-width:36em;margin-inline:auto}
.start-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0 clamp(24px,5vw,72px)}
.start-option{display:flex;flex-direction:column;min-width:0;position:relative;padding:24px 4px;border:0;border-top:1px solid var(--line-strong);border-radius:0;background:transparent;box-shadow:none}
.start-option--web{grid-row:span 2;min-height:360px;padding:clamp(32px,4vw,52px);border:1px solid color-mix(in srgb,var(--green) 35%,var(--line));border-radius:30px;background:radial-gradient(circle at 83% 18%,color-mix(in srgb,var(--fluid-mint) 33%,transparent),transparent 38%),linear-gradient(155deg,var(--green-soft),var(--surface) 72%);box-shadow:0 20px 48px #1731260b,inset 0 1px 0 var(--fluid-rim);overflow:hidden;transition:box-shadow .35s ease,translate .35s var(--ease-out)}
.start-option--web::after{content:"";position:absolute;width:220px;height:220px;right:-78px;bottom:-105px;border:1px solid color-mix(in srgb,var(--green-strong) 24%,transparent);border-radius:50%;box-shadow:0 0 0 33px color-mix(in srgb,var(--green) 5%,transparent),0 0 0 66px color-mix(in srgb,var(--green) 4%,transparent);pointer-events:none}
.start-option--preview{grid-column:1/-1;display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:8px 24px;align-items:center;margin-top:28px;padding:25px 0;border-top:1px solid var(--line-strong)}
.start-state{font-size:.75rem;font-weight:700;line-height:1.4;letter-spacing:.035em;color:var(--green-strong)}
.start-option--preview .start-state{color:var(--ink-3);grid-column:1}
.start-option h3{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.26;margin:15px 0 9px;letter-spacing:-.025em}
.start-option--web h3{font-size:clamp(2rem,3.5vw,3rem);margin-top:auto}
.start-option p{color:var(--ink-2);line-height:1.75;margin:0 0 22px;max-width:32em}
.start-option a{display:inline-flex;gap:7px;align-items:center;margin-top:auto;align-self:flex-start;min-height:44px;font-weight:650;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:gap .2s ease,color .2s ease}
.start-option a:hover{gap:12px;text-decoration:none;color:var(--green-strong)}
.start-option--preview h3{grid-column:1;grid-row:2;margin:0;font-size:1.35rem}.start-option--preview p{grid-column:2;grid-row:1/3;margin:0}.start-option--preview>a{grid-column:3;grid-row:1;margin:0}.start-option--preview .start-secondary{grid-column:3;grid-row:2;margin:0}
.start-footnote{color:var(--ink-3);font-size:.84rem;text-align:center;line-height:1.7;margin:18px auto 0}
@media(hover:hover) and (pointer:fine){.start-option--web:hover{translate:0 -4px;box-shadow:0 28px 56px #17312616,inset 0 1px 0 var(--fluid-rim)}}
@media(max-width:900px){.start-grid{grid-template-columns:1fr 1fr;gap:14px}.start-option--web{grid-column:1/-1;grid-row:auto;min-height:260px}.start-option--preview{grid-template-columns:1fr auto}.start-option--preview .start-state,.start-option--preview h3{grid-column:1}.start-option--preview p{grid-column:1;grid-row:3}.start-option--preview>a,.start-option--preview .start-secondary{grid-column:2}}
@media(max-width:620px){.start-here{padding:66px 0 52px}.start-intro{text-align:left;margin-bottom:30px}.start-intro>p:last-child{margin-inline:0}.start-grid{grid-template-columns:1fr;gap:0}.start-option--web{grid-column:auto;min-height:300px;padding:28px;border-radius:23px;margin-bottom:18px}.start-option:not(.start-option--web){padding:23px 4px}.start-option--preview{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:8px}.start-option--preview p{margin:8px 0 12px}.start-option--preview .start-secondary{margin-top:4px}.start-option h3{margin-top:12px}.start-option p{margin-bottom:14px}.start-footnote{text-align:left}}
@media(prefers-reduced-motion:reduce){.start-option--web,.start-option a{transition:none!important}.start-option--web:hover{translate:none}}
html[data-reading-motion] .start-option--web,html[data-reading-motion] .start-option a{transition:none!important}
html.reading-reflow .start-grid{grid-template-columns:1fr}html.reading-reflow .start-option--web{grid-row:auto}html.reading-reflow .start-option--preview{display:flex;flex-direction:column;align-items:flex-start}

/* The language control has one quiet place in the header. */
.site-header .language-picker .lang-switch{display:grid;place-items:center;width:46px;height:46px;min-width:46px;padding:0;border-radius:50%;font-size:0}
.site-header .language-picker .lang-switch svg{width:21px;height:21px}
.site-header .language-picker[open] .lang-switch{background:var(--green-soft);color:var(--green-strong);border-color:var(--green)}
.site-header .reading-open,.legal-nav .reading-open{display:flex;align-items:center;justify-content:center;width:46px;min-width:46px;height:46px;padding:0!important;font-size:0!important;line-height:1!important;border-radius:50%}
.site-header .reading-open::before,.legal-nav .reading-open::before{content:"Aa";font-size:1rem;font-weight:700;letter-spacing:-.07em}
.site-header .nav-cta,.site-header .nav-links a{white-space:nowrap}
.language-panel{box-sizing:border-box;max-width:calc(100vw - 24px);border-color:var(--line);box-shadow:0 18px 52px #122b2322}
.language-options a{overflow-wrap:anywhere}
.language-options a:focus-visible{outline:2px solid var(--green-strong);outline-offset:-2px}
.mobile-nav .language-picker--mobile .lang-switch{font-size:0;width:46px;min-width:46px;padding:0;justify-content:center;border-radius:50%}

/* A continuous handoff from the opening scene into the first practical choice. */
.marketing-home .brand-hero{padding-bottom:clamp(85px,12vw,160px)}
.marketing-home .start-here{margin-top:-1px;background:linear-gradient(180deg,#f7f6f1 0%,#f4f6f0 30%,#fffefa 70%)}
:root[data-theme="dark"] .marketing-home .start-here{background:linear-gradient(180deg,#101715 0%,#17211a 32%,#1b231f 72%)}
.start-here::before{opacity:.45}
.start-option--preview{gap:10px 28px}
.life-purpose .container{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(42px,8vw,120px);align-items:start}
.life-purpose .eyebrow{grid-column:1;grid-row:1;margin-top:5px}
.life-purpose h2{grid-column:1;grid-row:2/6;margin:12px 0;position:sticky;top:calc(var(--header-h) + 40px);font-size:clamp(2.2rem,3.5vw,2.8rem)}
.life-purpose .purpose-lead{grid-column:2;grid-row:1/3;margin:0;font-size:clamp(1.18rem,2vw,1.55rem);line-height:1.75;color:var(--ink)}
.life-purpose .purpose-status{grid-column:2;grid-row:3;max-width:44em;border-top:1px solid var(--line);padding-top:22px;margin:26px 0 10px;line-height:1.8}
.life-purpose .section-more{grid-column:2;margin:6px 0}
@media(max-width:760px){.life-purpose .container{display:block}.life-purpose h2{position:static}.life-purpose .purpose-lead{font-size:1.1rem}.life-purpose .purpose-status{margin-top:22px}}
html.reading-reflow .life-purpose .container{display:block}html.reading-reflow .life-purpose h2{position:static}
@media(max-width:620px){.marketing-home .brand-hero{padding-bottom:92px}.start-here::before{opacity:.25}}

/* Food and sorting information is kept in separate, scannable guides. */
.food-hero .food-hero-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.food-section h2,.sorting-bins h2{font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.04em;line-height:1.2;margin:10px 0 24px}
.food-principles,.food-needs,.sorting-bin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin:32px 0}
.food-principles article,.food-needs article{border-top:1px solid var(--line-strong);padding-top:20px}
.food-principles article span{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--green-strong)}
.food-section h3,.sorting-bins h3{font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.025em;margin:12px 0}
.food-section p,.sorting-bins p{line-height:1.78;color:var(--ink-2)}
.food-source{font-size:.82rem;max-width:76em;margin-top:26px}.food-source a{text-underline-offset:3px}.food-source--wide{grid-column:1/-1}
.food-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:clamp(24px,6vw,88px);align-items:start}
@media(min-width:900px){.food-split>div:first-child{position:sticky;top:clamp(92px,12vh,140px)}}
.food-small{font-size:.82rem;color:var(--ink-3)!important}
.food-calculator{display:grid;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:24px;padding:clamp(22px,3vw,36px);box-shadow:0 16px 42px #122b230b}
.food-calculator label{font-size:.85rem;font-weight:650;margin-top:7px}.food-calculator input,.food-calculator select{box-sizing:border-box;width:100%;min-height:48px;border:1px solid var(--line-strong);border-radius:11px;padding:10px 13px;background:var(--surface);color:var(--ink);font:inherit}
.food-calculator input:focus-visible,.food-calculator select:focus-visible{outline:none;border:2px solid var(--green-strong);box-shadow:none}
#finder-input:focus-visible{outline:2px solid var(--green-strong);outline-offset:1px;box-shadow:none}
.food-amount{display:flex;align-items:center;gap:12px}.food-amount span{white-space:nowrap;color:var(--ink-2);font-size:.84rem}.food-calculator button{justify-self:start;margin-top:8px}.food-calculator output{display:block;min-height:3em;padding:12px 15px;border-radius:12px;background:var(--green-soft);color:var(--ink);line-height:1.55}
.food-calculator-actions{display:flex;flex-wrap:wrap;gap:10px}.food-calculator-actions .button{margin-top:8px}.food-calculator-actions [hidden]{display:none}
.food-meal-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}.food-meal-items:empty{display:none}.food-meal-items li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line)}.food-meal-items li span{min-width:0;overflow-wrap:anywhere}.food-meal-items li button{min-height:44px;padding:7px 10px;border:0;background:transparent;color:var(--green-strong);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin:0}.food-meal-items li button:focus-visible{outline:2px solid var(--green-strong);outline-offset:2px;border-radius:8px}
.food-next{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;border-top:1px solid var(--line);padding-top:24px;margin-top:32px}.food-next p{flex:1 1 100%;margin:0}.food-next a{min-height:44px;display:inline-flex;align-items:center}
.sorting-bin-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.sorting-bin-grid article{min-width:0;border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--surface);transition:transform .28s var(--ease-out),box-shadow .28s ease}.sorting-bin-grid article:hover{transform:translateY(-3px);box-shadow:0 14px 32px #122b2312}.sorting-bin-grid article p{font-size:.9rem}.sorting-bin-grid article a{display:inline-flex;min-height:44px;align-items:center;font-weight:650}.sorting-lead{max-width:56em}.bin-mark{display:block;width:28px;height:5px;border-radius:10px;background:var(--ink)}.bin-blue{background:#47779d}.bin-green{background:#4e8064}.bin-red{background:#ac6a61}.bin-gray{background:#757a77}
@media(max-width:900px){.sorting-bin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.food-principles,.food-needs{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.food-split{grid-template-columns:1fr}.food-split>div:first-child{position:static}.food-principles,.food-needs,.sorting-bin-grid{grid-template-columns:1fr}.sorting-bin-grid article{padding:18px}.food-hero .food-hero-links .button{flex:1 1 auto}}
html.reading-reflow :is(.food-split,.food-principles,.food-needs,.sorting-bin-grid){grid-template-columns:1fr}
html.reading-reflow .food-split>div:first-child{position:static}
@media(prefers-reduced-motion:reduce){.sorting-bin-grid article{transition:none}.sorting-bin-grid article:hover{transform:none}}
html[data-reading-motion] .sorting-bin-grid article{transition:none}html[data-reading-motion] .sorting-bin-grid article:hover{transform:none}

/* Modals use one border and one focus ring, without stacked green frames. */
.site-finder{border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);box-shadow:0 24px 80px #09171040,0 2px 8px #09171010}
.site-finder :is(button,a):focus-visible{outline:2px solid var(--green-strong);outline-offset:2px}
/* Keep the product-to-principles handoff readable without adding another panel. */
.trust-lead{max-width:38em;margin:12px 0 0;color:var(--ink-2);line-height:1.8}


.date-check[hidden]{display:none}
.date-check{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center;margin:32px 0 0;padding:clamp(24px,4vw,42px);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--background)}
.date-check-copy h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.3;margin:8px 0 12px}.date-check-copy>p:last-child{color:var(--ink-2);line-height:1.8;margin:0}
.date-check-form{display:grid;gap:12px}.date-check-form label{font-weight:650}.date-check-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.date-check-actions input{flex:1;min-width:170px;min-height:46px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font:inherit}.date-check-actions .button{min-height:46px}
.date-check-result{min-height:3.4em;margin:2px 0 0;color:var(--ink);line-height:1.7}.date-check-form>a{font-weight:650;color:var(--green-strong);text-underline-offset:5px}
@media(max-width:760px){.date-check{grid-template-columns:1fr}.date-check-actions input{flex-basis:100%}.date-check-actions .button{flex:1}}

/* Keep the current way to start ahead of seasonal content. */
.season-band{padding-block:14px}
.season-band .season-preview{margin:0 auto}
.start-option .start-secondary{margin-top:12px;font-weight:500;font-size:.875rem;color:var(--ink-2)}
.brand-hero .loop-hero-note{line-height:1.75}

/* Community: quiet editorial rhythm, one connected process, restrained colour. */
.community-hero,
.community-section,
.community-close{scroll-margin-top:var(--header-h)}
.community-hero .container,
.community-section .container,
.community-close .container{max-width:1080px}
.community-hero{padding:clamp(78px,9vw,126px) 0 54px;background:var(--bg)}
.community-kicker,
.community-eyebrow{margin:0;color:var(--green-strong);font-size:.82rem;font-weight:700;letter-spacing:.09em;line-height:1.5}
.community-kicker span{padding:0 .4em;color:var(--apricot)}
.community-hero h1{max-width:12ch;margin:26px 0 26px;color:var(--ink);font-size:clamp(2.65rem,6vw,5rem);font-weight:650;letter-spacing:-.052em;line-height:1.17;text-wrap:balance}
.community-hero h1 em{color:var(--green-strong);font-style:normal}
.community-lead{max-width:39ch;margin:0;color:var(--ink-2);font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.82}
.community-state{display:flex;align-items:flex-start;gap:12px;max-width:77ch;margin:42px 0 0;padding-top:20px;border-top:1px solid var(--line-strong);color:var(--ink-3);font-size:.875rem;line-height:1.8}
.community-state>span{flex:none;width:6px;height:6px;margin-top:.74em;border-radius:50%;background:var(--apricot)}
.community-index{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:31px}
.community-index a{display:inline-flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--line-strong);color:var(--ink);font-size:.89rem;font-weight:600;transition:color .18s,border-color .18s}
.community-index a:hover{color:var(--green-strong);border-color:var(--green-strong)}
.community-index a span{color:var(--green-strong);font-size:.82rem}
.community-section{padding:clamp(75px,9vw,116px) 0}
.community-section-head{max-width:68ch;margin-bottom:48px}
.community-section-head h2{max-width:21ch;margin:16px 0 18px;color:var(--ink);font-size:clamp(2rem,3.7vw,3.15rem);font-weight:650;line-height:1.25;letter-spacing:-.038em;text-wrap:balance}
.community-section-head>p:last-child{max-width:60ch;margin:0;color:var(--ink-2);font-size:1rem;line-height:1.9}
.community-threads{border-top:1px solid var(--line-strong)}
.community-thread{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:40px;padding:34px 0 38px;border-bottom:1px solid var(--line-strong);align-items:start}
.community-thread h3{margin:0 0 12px;color:var(--ink);font-size:clamp(1.25rem,2vw,1.55rem);font-weight:640;line-height:1.42;letter-spacing:-.02em}
.community-thread div p{max-width:62ch;margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.9}
.community-thread-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:13px;border-bottom:1px solid var(--line-strong);color:var(--green-strong);font-size:.83rem;font-weight:650;transition:border-color .18s ease,color .18s ease}
.community-thread-link:hover,.community-thread-link:focus-visible{border-color:var(--green-strong)}
.community-thread-link span,.community-text-link span,.community-index a span{transition:transform .18s var(--ease-out)}
.community-thread-link:hover span,.community-thread-link:focus-visible span,.community-text-link:hover span,.community-index a:hover span{transform:translate(2px,-2px)}
.community-thread-note{margin:4px 0 0;padding-left:16px;border-left:1px solid var(--line-strong);color:var(--ink-3);font-size:.82rem;line-height:1.8}
.community-journey{background:var(--bg-elev)}
.community-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.community-flow::before{content:"";position:absolute;left:22px;right:calc(25% - 10px);top:22px;height:1px;background:var(--line-strong);transform-origin:left center}
.community-flow li{position:relative;min-width:0;padding-top:71px}
.community-flow-no{position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--green-strong);border-radius:50%;background:var(--bg-elev);color:var(--green-strong);font-family:Georgia,serif;font-size:.94rem;letter-spacing:.02em}
.community-flow h3{max-width:14ch;margin:0 0 13px;color:var(--ink);font-size:1.12rem;font-weight:650;line-height:1.45}
.community-flow p{max-width:25ch;margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.86}
.community-conduct{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;max-width:850px;margin-top:62px;padding-top:28px;border-top:1px solid var(--line-strong)}
.community-conduct-mark{color:var(--apricot);font-size:2.1rem;line-height:1}
.community-conduct h3{margin:0 0 9px;color:var(--ink);font-size:1.1rem;font-weight:650}
.community-conduct p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.9}
.community-esg-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.community-esg-columns article{min-width:0;padding:27px 26px 32px 0}
.community-esg-columns article+article{padding-left:26px;border-left:1px solid var(--line-strong)}
.community-esg-letter{display:block;color:var(--green-strong);font-family:Georgia,serif;font-size:2.55rem;line-height:1}
.community-esg-columns h3{margin:17px 0 12px;color:var(--ink);font-size:1.2rem;font-weight:650}
.community-esg-columns p{max-width:30ch;margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.85}
.community-proof{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:65px;margin-top:78px}
.community-proof-intro h3{max-width:14ch;margin:17px 0 16px;color:var(--ink);font-size:clamp(1.6rem,2.7vw,2.2rem);font-weight:650;line-height:1.34;letter-spacing:-.026em}
.community-proof-intro>p:last-child{max-width:36ch;color:var(--ink-2);font-size:.93rem;line-height:1.9}
.community-proof dl{margin:0;border-top:1px solid var(--line-strong)}
.community-proof dl>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px;padding:20px 0;border-bottom:1px solid var(--line-strong)}
.community-proof dt{color:var(--ink);font-size:.98rem;font-weight:650;line-height:1.6}
.community-proof dt span{display:block;margin-bottom:5px;color:var(--green-strong);font-size:.8rem;font-weight:700;letter-spacing:.04em}
.community-proof dd{margin:0;color:var(--ink-2);font-size:.87rem;line-height:1.8}
.community-sources{max-width:79ch;margin-top:30px;padding-top:15px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.85rem;line-height:1.8}
.community-sources p{margin:0 0 6px}.community-sources a{color:var(--green-strong);text-decoration:underline;text-underline-offset:3px}
.community-close{padding:76px 0 90px;background:var(--bg-elev)}
.community-close h2{max-width:22ch;margin:15px 0 18px;color:var(--ink);font-size:clamp(1.9rem,3.6vw,3rem);font-weight:650;line-height:1.3;letter-spacing:-.03em}
.community-close p:not(.community-eyebrow){max-width:59ch;margin:0;color:var(--ink-2);line-height:1.85}
.community-close>div>div{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:27px}
.community-text-link{display:inline-flex;align-items:center;min-height:44px;gap:9px;color:var(--green-strong);font-size:.9rem;font-weight:650;border-bottom:1px solid var(--green-strong)}
@media(max-width:850px){
  .community-thread{grid-template-columns:minmax(0,1fr) 160px;gap:25px}
  .community-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}.community-flow::before{display:none}
  .community-flow li{padding-top:63px}
  .community-proof{grid-template-columns:1fr;gap:22px}.community-proof-intro h3{max-width:none}
}
@media(max-width:620px){
  .community-hero{padding:68px 0 42px}.community-hero h1{font-size:clamp(2.38rem,11vw,3.1rem);letter-spacing:-.05em}.community-lead{font-size:1.05rem}
  .community-state{margin-top:31px}.community-index{gap:6px 21px;margin-top:23px}.community-index a{font-size:.82rem}
  .community-section{padding:72px 0}.community-section-head{margin-bottom:34px}.community-section-head h2{font-size:clamp(1.85rem,8vw,2.3rem)}
  .community-thread{grid-template-columns:1fr;gap:14px;padding:27px 0 29px}.community-thread h3{font-size:1.2rem}.community-thread div p{font-size:.9rem}.community-thread-note{margin:0;padding-left:0;border-left:0}
  .community-flow{display:block;padding-left:55px}.community-flow::before{display:block;left:21px;right:auto;top:20px;bottom:30px;width:1px;height:auto;transform-origin:center top}
  .community-flow li{padding:0 0 36px}.community-flow li:last-child{padding-bottom:0}.community-flow-no{left:-55px;width:42px;height:42px}.community-flow p{max-width:none}.community-flow h3{max-width:none;margin-bottom:8px}
  .community-conduct{grid-template-columns:30px minmax(0,1fr);gap:11px;margin-top:45px}.community-conduct-mark{font-size:1.55rem}
  .community-esg-columns{display:block}.community-esg-columns article,.community-esg-columns article+article{padding:22px 0;border-left:0}.community-esg-columns article+article{border-top:1px solid var(--line-strong)}.community-esg-columns p{max-width:none}
  .community-proof{margin-top:58px}.community-proof dl>div{grid-template-columns:1fr;gap:7px;padding:17px 0}
  .community-close{padding:66px 0 78px}
}
@media(max-width:620px){
  html[data-reading-size="200"] .community-flow{padding-left:68px}
  html[data-reading-size="200"] .community-flow::before{left:26px}
  html[data-reading-size="200"] .community-flow-no{left:-68px;width:52px;height:52px}
}
.community-close .button.primary:hover{box-shadow:none;transform:translateY(-1px)}
@media(prefers-reduced-motion:no-preference){
  .community-flow[data-motion-ready]::before{transform:scaleX(0);transition:transform 760ms cubic-bezier(.25,.75,.25,1)}
  .community-flow[data-motion-ready].is-drawn::before{transform:scaleX(1)}
  .community-flow[data-motion-ready] .community-flow-no{transition:background-color .28s ease,border-color .28s ease}
  .community-flow[data-motion-ready].is-drawn .community-flow-no{background:var(--green-soft)}
}
html[data-reading-motion] .community-flow::before{transform:none!important;transition:none!important}
html[data-reading-motion] .community-flow-no{transition:none!important}
@media(max-width:620px) and (prefers-reduced-motion:no-preference){
  .community-flow[data-motion-ready]::before{transform:scaleY(0)}
  .community-flow[data-motion-ready].is-drawn::before{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){.community-thread-link span,.community-text-link span,.community-index a span{transition:none;transform:none!important}}
html[data-reading-motion] .community-thread-link span,html[data-reading-motion] .community-text-link span,html[data-reading-motion] .community-index a span{transition:none;transform:none!important}
html.reading-reflow .cycle-art-orbit{display:none}
html.reading-reflow{scroll-behavior:auto!important}
html.reading-reflow .start-intro h2{overflow-wrap:anywhere}
@media(max-width:760px){
  html.reading-reflow .date-check{grid-template-columns:minmax(0,1fr)}
  html.reading-reflow .date-check>*{min-width:0}
  html.reading-reflow .date-check-form{grid-template-columns:minmax(0,1fr)}
  html.reading-reflow .date-check-actions input{min-width:0;max-width:100%}
  html.reading-reflow .day-choice summary>span:first-child{min-width:0}
  html.reading-reflow .day-choice summary .choice-mark{flex:none;margin-right:14px}
  html.reading-reflow .day-choice summary::marker{content:""}
}
@media(forced-colors:active){
  .community-index a,.community-thread-link,.community-text-link,.community-sources a{color:LinkText;border-color:LinkText}
  .community-index a span,.community-thread-link span,.community-text-link span{color:LinkText}
  .community-flow-no{color:CanvasText;background:Canvas;border-color:CanvasText}
  .community-flow::before{background:CanvasText}
  .community-close .button.primary{border:1px solid ButtonText}
}
/* Recovery journey: a quiet, scroll-following route with all copy readable at rest. */
.circular-flow[data-recovery-flow]{--flow-progress:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:830px;margin:42px auto 62px;padding:4px 0;list-style:none;isolation:isolate}
.circular-flow[data-recovery-flow]::before,.circular-flow[data-recovery-flow]::after{content:"";position:absolute;z-index:-1;left:26px;top:30px;width:2px;border-radius:2px}
.circular-flow[data-recovery-flow]::before{bottom:58px;background:var(--line-strong)}
.circular-flow[data-recovery-flow]::after{height:calc((100% - 88px)*var(--flow-progress));background:var(--green-strong)}
.circular-flow[data-recovery-flow] li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:clamp(16px,3vw,32px);min-width:0;min-height:140px;margin:0;padding:0 0 46px;border:0;transition:none}
.circular-flow[data-recovery-flow] li:last-child{padding-bottom:0;min-height:0}
.circular-flow[data-recovery-flow] li>div{min-width:0;padding:1px 0 0}
.circular-flow[data-recovery-flow] .flow-node{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line-strong);border-radius:50%;background:var(--bg-elev);color:var(--green-strong);font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color .25s,border-color .25s,color .25s,transform .4s cubic-bezier(.2,.75,.2,1)}
.circular-flow[data-recovery-flow] .flow-phase{display:block;color:var(--ink-3);font-size:.76rem;font-weight:650;letter-spacing:.04em;line-height:1.6}
.circular-flow[data-recovery-flow] h4{margin:7px 0 7px;color:var(--ink);font-size:clamp(1.15rem,2vw,1.48rem);font-weight:650;line-height:1.35;letter-spacing:-.02em}
.circular-flow[data-recovery-flow] p{max-width:62ch;margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.78}
.circular-flow[data-recovery-flow] li.is-current .flow-node{background:var(--green-strong);border-color:var(--green-strong);color:var(--bg-elev);transform:scale(1.06)}
@media(max-width:520px){.circular-flow[data-recovery-flow]{margin:31px 0 46px}.circular-flow[data-recovery-flow] li{min-height:150px;padding-bottom:38px}.circular-flow[data-recovery-flow] h4{font-size:1.18rem}}
@media(prefers-reduced-motion:reduce){.circular-flow[data-recovery-flow] .flow-node{transition:none;transform:none!important}.circular-flow[data-recovery-flow]::after{display:none}}
html[data-reading-motion] .circular-flow[data-recovery-flow] .flow-node{transition:none;transform:none!important}
html[data-reading-motion] .circular-flow[data-recovery-flow]::after,html.reading-reflow .circular-flow[data-recovery-flow]::after{display:none}
html.reading-reflow .circular-flow[data-recovery-flow]{grid-template-columns:minmax(0,1fr)}
@media(forced-colors:active){.circular-flow[data-recovery-flow]::before{background:CanvasText}.circular-flow[data-recovery-flow]::after{background:Highlight}.circular-flow[data-recovery-flow] li.is-current .flow-node{border:2px solid Highlight;color:Highlight;background:Canvas}}

/* The header stays quiet beside the primary action in the page itself. */
.site-header .nav-cta{min-height:44px;background:var(--green-soft);color:var(--green-strong);border:0;box-shadow:none;padding-inline:15px;font-weight:650}
.site-header .nav-cta{justify-content:center;text-align:center;line-height:1.2}
.site-header .nav-cta:hover{background:color-mix(in srgb,var(--green-soft) 72%,var(--green));color:var(--green-ink);box-shadow:none}
.site-header .language-picker .lang-switch,.site-header .reading-open{width:44px;min-width:44px;height:44px;border:0;background:transparent;color:var(--ink-2)}
.site-header .language-picker .lang-switch:hover,.site-header .reading-open:hover{background:var(--green-softer);color:var(--green-strong)}
.mobile-nav .language-picker--mobile .lang-switch{display:inline-flex;gap:10px;width:auto;min-width:0;height:44px;padding:0 12px;font-size:.9rem;justify-content:flex-start;border-radius:12px}
.mobile-nav .language-picker--mobile .mobile-language-label{font-size:.9rem;font-weight:600}
.site-header .reading-open::before,.legal-nav .reading-open::before{font-size:.9rem;letter-spacing:-.04em}
html[data-reading-size="200"] .site-header .nav-cta{display:none}
html[data-reading-size]:not([data-reading-size="100"]) .site-header .nav-toggle{margin-left:0}
html[data-reading-size]:not([data-reading-size="100"]) .site-header .nav-cta{margin-left:auto}
@media(min-width:601px){html[data-reading-size="200"] .site-header .reading-open{margin-left:auto}}
@media(max-width:760px){.site-header .nav-cta{display:none!important}.site-header .brand{margin-right:auto}}
@media(forced-colors:active){.site-header .nav-cta,.site-header .language-picker .lang-switch,.site-header .reading-open{border:1px solid ButtonText;color:ButtonText;background:Canvas}}

/* Offer useful routes at the moment a visitor first understands the promise. */
.hero-quicklinks{display:flex;justify-content:center;flex-wrap:wrap;gap:2px clamp(12px,2vw,24px);max-width:760px;margin:17px auto 3px}
.hero-quicklinks a{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--ink-2);font-size:.86rem;font-weight:600;text-decoration:none;text-underline-offset:4px;white-space:normal}
.hero-quicklinks a:hover,.hero-quicklinks a:focus-visible{color:var(--green-strong);text-decoration:underline}
.hero-quicklinks a span{color:var(--green-strong);transition:transform .22s var(--ease-out)}
.hero-quicklinks a:hover span{transform:translate(2px,-2px)}
@media(max-width:600px){.hero-quicklinks{justify-content:flex-start;gap:0 16px;margin:10px 0 5px}.hero-quicklinks a{font-size:.82rem}}

/* One calm focus ring and enough space for every line of search copy. */
.site-finder{width:min(560px,calc(100% - 32px));padding:clamp(21px,3vw,32px);border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);border-radius:22px;box-shadow:0 24px 72px #111d1740}
.site-finder::backdrop{background:#17211b70;backdrop-filter:blur(3px)}
.finder-top h2{font-size:clamp(1.3rem,2.5vw,1.55rem);line-height:1.3;font-weight:680}
.finder-close{border:0;background:var(--bg-elev);width:42px;min-width:42px;height:42px;font-size:23px}
.finder-close:hover{background:var(--green-soft)}
.site-finder #finder-hint{margin:10px 0 20px;line-height:1.65}
.site-finder #finder-input{min-height:52px;background:var(--surface);border-color:var(--line-strong)}
.site-finder #finder-input:focus-visible{border:2px solid var(--green-strong);outline:none;box-shadow:none}
.finder-status{margin:22px 0 9px;font-weight:600}
.finder-results{gap:2px}
.finder-results a{min-height:47px;padding:9px 13px;border-radius:10px}
.finder-results a:hover,.finder-results a:focus-visible{background:var(--green-softer);transform:none}
@media(max-width:600px){.site-finder{padding:20px}.site-finder #finder-hint{margin-bottom:18px}}
@media(max-height:500px){.site-finder #finder-hint{display:block;margin:6px 0 12px}.finder-status{margin-top:14px}}

/* Legal references are available at the foot of the page without competing with product tasks. */
.footer-bottom{font-size:.78rem;line-height:1.7}
.footer-utility{gap:4px 18px}
.footer-utility a{color:var(--ink-3);font-size:.78rem;font-weight:500}

/* Scroll entrances use three restrained motions; content remains readable while awaiting view. */
.js .story-reveal{opacity:.55;transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.js .story-reveal[data-motion="rise"]{transform:translateY(18px)}
.js .story-reveal[data-motion="slide"]{transform:translateX(18px)}
.js .story-reveal[data-motion="fade"]{transform:none}
.js .story-reveal:is(.in-view,:focus-within){opacity:1;transform:none;transition-delay:0ms}
@media(max-width:760px){.js .story-reveal[data-motion="rise"]{transform:translateY(9px)}.js .story-reveal[data-motion="slide"]{transform:translateX(9px)}}
@media(prefers-reduced-motion:reduce){.js .story-reveal{opacity:1;transform:none!important;transition:none!important}.brand-hero .hero-lockup img{translate:none!important;scale:1!important}}
html[data-reading-motion] .story-reveal,html.reading-reflow .story-reveal{opacity:1!important;transform:none!important;transition:none!important}
html[data-reading-motion] .brand-hero .hero-lockup img,html.reading-reflow .brand-hero .hero-lockup img{translate:none!important;scale:1!important}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]):not(.reading-reflow) .brand-hero .hero-lockup img{translate:0 var(--hero-icon-rise,0px);scale:var(--hero-icon-scale,1)}html:not([data-reading-motion]):not(.reading-reflow) .site-header .brand img{transition:transform .4s var(--ease-out),opacity .4s ease}html:not([data-reading-motion]):not(.reading-reflow) .site-header.is-scrolled .brand img{transform:scale(1.08)}}
@media(forced-colors:active){.js .story-reveal{opacity:1;transform:none}}

/* The ecosystem route stays beside the evidence, then becomes a compact map on phones. */
.ecosystem-mural{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,74px);align-items:start;margin:36px 0 60px}
.ecosystem-map{position:sticky;top:calc(var(--header-h) + 24px);min-width:0;margin:0;padding:23px 24px 19px;border:1px solid var(--line-strong);border-radius:26px;background:var(--bg);box-shadow:0 18px 45px #18251b0a}
.ecosystem-map-heading span{display:block;color:var(--green-strong);font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.ecosystem-map-heading p{max-width:34ch;margin:8px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.7}
.ecosystem-live-label,.ecosystem-live-status{display:none}
.ecosystem-art{display:block;width:min(100%,440px);height:auto;margin:8px auto 0;overflow:visible}
.ecosystem-track{fill:none;stroke:var(--line-strong);stroke-width:2.5}
.ecosystem-progress{fill:none;stroke:var(--green-strong);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1263;stroke-dashoffset:1263;transform:rotate(-90deg);transform-origin:260px 260px}
.ecosystem-traveller{fill:var(--green-strong);stroke:var(--bg);stroke-width:3;transform:rotate(var(--map-turn,0deg));transform-origin:260px 260px}
.ecosystem-sky{fill:var(--green-softer)}
.ecosystem-sun-halo{fill:none;stroke:var(--apricot);stroke-width:1.5;opacity:.32}
.ecosystem-sun{fill:var(--apricot-soft)}
.ecosystem-cloud{fill:none;stroke:var(--green-strong);stroke-width:2;stroke-linecap:round;opacity:.33}
.ecosystem-hill-far{fill:var(--green-soft)}
.ecosystem-hill-near{fill:var(--surface-2)}
.ecosystem-path{fill:none;stroke:var(--apricot);stroke-width:10;stroke-linecap:round;opacity:.45}
.ecosystem-house{fill:var(--bg);stroke:var(--green-strong);stroke-width:3}
.ecosystem-roof,.ecosystem-door,.ecosystem-tree{fill:none;stroke:var(--green-strong);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ecosystem-window{fill:var(--apricot-soft);stroke:var(--green-strong);stroke-width:2}
.ecosystem-door-knob{fill:var(--green-strong)}
.ecosystem-field{fill:none;stroke:var(--green-strong);stroke-width:1.5;opacity:.3}
.ecosystem-crops{fill:none;stroke:var(--green-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ecosystem-walker circle{fill:var(--green-strong)}
.ecosystem-walker path{fill:none;stroke:var(--green-strong);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ecosystem-seed circle{fill:var(--bg);stroke:var(--green-strong);stroke-width:2}
.ecosystem-seed path{fill:none;stroke:var(--green-strong);stroke-width:2;stroke-linecap:round}
.ecosystem-map-step{color:var(--ink-2);transition:color .2s ease}
.ecosystem-map-step>circle{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.5;transition:fill .2s ease,stroke .2s ease}
.ecosystem-map-step text{fill:currentColor;font-size:9px;font-weight:700;font-family:var(--font);font-variant-numeric:tabular-nums}
.ecosystem-step-icon{pointer-events:none}
.ecosystem-map-step.is-current>circle{fill:var(--green-strong);stroke:var(--green-strong)}
.ecosystem-map-step.is-current{color:var(--on-green)}
.ecosystem-map figcaption{max-width:47ch;margin:0 auto;color:var(--ink-2);font-size:.82rem;line-height:1.7}
.ecosystem-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.76rem;line-height:1.5}
.ecosystem-legend span{position:relative;padding-left:14px}
.ecosystem-legend span::before{content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border-radius:50%;background:var(--green-strong)}
.ecosystem-legend span+span::before{background:var(--apricot)}
.ecosystem-mural .circular-flow[data-recovery-flow]{max-width:none;margin:0;padding:8px 0 0}
.ecosystem-mural .circular-flow[data-recovery-flow] li{min-height:164px}
.ecosystem-mural .circular-flow[data-recovery-flow] li.is-current h4{color:var(--green-strong)}
@media(max-width:850px){
 .ecosystem-mural{grid-template-columns:1fr;gap:30px}
 .ecosystem-map{top:calc(var(--header-h) + 8px);z-index:2;display:grid;grid-template-columns:minmax(115px,160px) minmax(0,1fr);gap:4px 18px;align-items:center;padding:12px 16px;border-radius:18px}
 .ecosystem-art{grid-column:1;grid-row:1 / 4;width:100%;margin:0}
 .ecosystem-map-heading{grid-column:2;grid-row:1}.ecosystem-map-heading p{font-size:.78rem;line-height:1.55}
 .ecosystem-map figcaption{grid-column:2;grid-row:2;font-size:.72rem;line-height:1.5}
 .ecosystem-legend{grid-column:2;grid-row:3;margin:0;padding-top:7px;gap:5px;font-size:.67rem}
 .ecosystem-track{stroke:var(--line-strong);stroke-width:4}
 .ecosystem-progress{stroke-width:5}
 .ecosystem-sky{fill:var(--green-soft)}
 .ecosystem-map-step>circle{stroke:var(--ink-3);stroke-width:2.5}
 .ecosystem-step-icon{display:none}
 .ecosystem-map-step text{display:none}
 .ecosystem-map-step>circle{transform:scale(.62);transform-origin:center;transform-box:fill-box}
 .ecosystem-mural .circular-flow[data-recovery-flow]{margin:0 0 0 6px}
}
@media(max-width:480px){
 .ecosystem-map{grid-template-columns:minmax(118px,44%) minmax(0,1fr);gap:4px 10px;padding:10px 11px}
 .ecosystem-map-heading span{font-size:.69rem;letter-spacing:.04em}
 .ecosystem-map-heading p{display:none}
 .ecosystem-live-label{display:block;margin-top:11px;color:var(--ink);font-size:.94rem;font-weight:650;line-height:1.4}
 .ecosystem-live-status{display:block;margin-top:8px;color:var(--ink-2);font-size:.7rem;line-height:1.45}
 .ecosystem-map figcaption,.ecosystem-legend{display:none}
 .ecosystem-mural .circular-flow[data-recovery-flow] li{min-height:150px}
}
html.reading-reflow .ecosystem-mural,html[data-reading-size="200"] .ecosystem-mural{grid-template-columns:1fr}
html.reading-reflow .ecosystem-map,html[data-reading-size="200"] .ecosystem-map{position:static;display:block}
html.reading-reflow .ecosystem-art,html[data-reading-size="200"] .ecosystem-art{width:min(100%,300px);margin:12px auto}
html.reading-reflow .ecosystem-map-heading p,html[data-reading-size="200"] .ecosystem-map-heading p{display:block}
html.reading-reflow .ecosystem-live-label,html.reading-reflow .ecosystem-live-status,html[data-reading-size="200"] .ecosystem-live-label,html[data-reading-size="200"] .ecosystem-live-status{display:none}
html.reading-reflow .ecosystem-map figcaption,html[data-reading-size="200"] .ecosystem-map figcaption{display:block}
html.reading-reflow .ecosystem-legend,html[data-reading-size="200"] .ecosystem-legend{display:flex}
@media(prefers-reduced-motion:reduce){.ecosystem-progress,.ecosystem-traveller{display:none}.ecosystem-map-step,.ecosystem-map-step circle,.ecosystem-map-step text{transition:none}}
html[data-reading-motion] .ecosystem-progress,html[data-reading-motion] .ecosystem-traveller,html.reading-reflow .ecosystem-progress,html.reading-reflow .ecosystem-traveller{display:none}
html[data-reading-motion] .ecosystem-map-step,html[data-reading-motion] .ecosystem-map-step :is(circle,text),html.reading-reflow .ecosystem-map-step,html.reading-reflow .ecosystem-map-step :is(circle,text){transition:none}
@media(forced-colors:active){.ecosystem-map{border:1px solid CanvasText}.ecosystem-map-step.is-current>circle{fill:Highlight}.ecosystem-map-step.is-current{color:HighlightText}.ecosystem-progress{stroke:Highlight}}

/* A disclosure worksheet, rather than decorative ESG scores or invented totals. */
.esg-ledger{margin-top:77px;padding-top:34px;border-top:1px solid var(--line-strong)}
.esg-ledger-intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px 42px;align-items:start}
.esg-ledger-intro .community-eyebrow{grid-column:1 / -1}
.esg-ledger-intro h3{max-width:16ch;margin:0;color:var(--ink);font-size:clamp(1.55rem,2.7vw,2.2rem);font-weight:650;line-height:1.32;letter-spacing:-.03em}
.esg-ledger-intro>p:last-child{max-width:58ch;margin:2px 0 0;color:var(--ink-2);font-size:.96rem;line-height:1.85}
.esg-ledger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:34px;border-bottom:1px solid var(--line-strong)}
.esg-ledger-grid article{min-width:0;padding:24px 27px 25px 0;border-top:1px solid var(--line-strong)}
.esg-ledger-grid article:nth-child(even){padding-left:27px;border-left:1px solid var(--line-strong)}
.esg-ledger-grid span{color:var(--green-strong);font-size:.76rem;font-weight:700;letter-spacing:.04em}
.esg-ledger-grid h4{margin:9px 0 14px;color:var(--ink);font-size:1.15rem;font-weight:650;line-height:1.45}
.esg-ledger-grid p{margin:0 0 11px;color:var(--ink-2);font-size:.87rem;line-height:1.8}
.esg-ledger-grid p:last-child{margin-bottom:0}
.esg-ledger-grid strong{color:var(--ink);font-weight:650}
.esg-ledger-method{max-width:80ch;margin:22px 0 0;color:var(--ink-2);font-size:.86rem;line-height:1.82}
.esg-ledger-method strong{color:var(--ink)}
@media(max-width:700px){.esg-ledger{margin-top:55px}.esg-ledger-intro{grid-template-columns:1fr;gap:12px}.esg-ledger-intro h3{max-width:none}.esg-ledger-grid{grid-template-columns:1fr;margin-top:27px}.esg-ledger-grid article,.esg-ledger-grid article:nth-child(even){padding:20px 0;border-left:0}.esg-ledger-grid h4{font-size:1.08rem}}
/* National Day: a warm red-and-gold celebration without flag or emblem graphics. */
.national-festival[hidden],.national-preview[hidden]{display:none!important}
.hero-festival-greeting{display:block;width:fit-content;max-width:min(100%,40rem);margin:0 auto 20px;padding:8px 18px 10px;border-top:1px solid #c49a51;border-bottom:1px solid #c49a51;color:#9b2b2c;font-family:var(--font-sans,system-ui);font-size:clamp(.78rem,1.35vw,.95rem);font-weight:700;line-height:1.55;letter-spacing:.06em;text-align:center;text-decoration:none;text-shadow:none}
.hero-festival-greeting small{display:block;margin-top:2px;color:var(--ink-2);font-size:.72rem;font-weight:500;letter-spacing:.03em}
.hero-festival-greeting:hover{color:#bd3232}
.brand-hero:has(.hero-festival-greeting:not([hidden])){background:radial-gradient(ellipse at 50% 5%,#f5cd7429,transparent 64%)}
.national-festival{padding:clamp(60px,8vw,100px) 24px;background:linear-gradient(180deg,#f8f3ea,#f7e9d8 50%,#f8f3ea);text-align:center}
.national-festival-inner{position:relative;isolation:isolate;overflow:hidden;max-width:1000px;margin:auto;padding:clamp(70px,9vw,110px) clamp(27px,7vw,90px);border-radius:30px;background:radial-gradient(circle at 15% 18%,#f9cc7152,transparent 26%),radial-gradient(circle at 88% 75%,#f4a95142,transparent 30%),linear-gradient(135deg,#b83032,#8d222a 55%,#a52b2d);color:#fff8e9;box-shadow:0 23px 58px #80312a28}
.national-festival-inner::before{content:"";position:absolute;inset:18px;border:1px solid #f7d58670;border-radius:20px;pointer-events:none;z-index:-1}
.national-festival-inner::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#f8d78f90 .8px,transparent 1.3px);background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent 27%,transparent 73%,#000);pointer-events:none;z-index:-1}
.national-kicker{margin:0 0 12px;color:#f9df9e;font-size:.78rem;font-weight:750;letter-spacing:.2em}
.national-anniversary{margin:0 auto 11px;color:#f9db8f;font-family:Georgia,serif;font-size:clamp(5.5rem,13vw,10.5rem);font-weight:400;letter-spacing:-.065em;line-height:1;text-shadow:0 9px 30px #4a131a43}
.national-anniversary span{display:inline-block;margin-left:.65em;vertical-align:middle;color:#f9df9e;font-family:var(--font-sans,system-ui);font-size:clamp(.8rem,1.5vw,1.05rem);font-weight:700;letter-spacing:.08em;text-shadow:none}
.national-festival h2{max-width:22em;margin:0 auto 24px;font-family:Georgia,"Songti SC",serif;font-size:clamp(1.9rem,4vw,3.4rem);font-weight:600;line-height:1.4;letter-spacing:.015em;text-wrap:balance}
.national-lead{max-width:590px;margin:0 auto;color:#fff2dd;font-size:clamp(.99rem,1.5vw,1.13rem);line-height:1.95}
.national-closing{margin:28px 0 0;color:#ffe4a0;font-family:Georgia,"Songti SC",serif;font-size:1.08rem;font-weight:650;line-height:1.8}
.national-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin-top:26px;padding:10px 23px;border-radius:99px;background:#ffebbd;color:#8c262b!important;text-decoration:none;font-size:.86rem;font-weight:700;box-shadow:0 6px 18px #4d121526}
.national-action:hover{background:#fff5d9;color:#7b1d23!important}
.national-preview{grid-template-columns:8px minmax(0,1fr);column-gap:20px;max-width:680px;padding:16px 20px;border:1px solid color-mix(in srgb,#b98757 24%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,#f4e4d0);box-shadow:none}
.national-preview>span:nth-child(2){gap:4px;min-width:0}.national-preview strong{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.5}.national-preview>span>span{line-height:1.6}.national-preview b{align-self:start;line-height:1.6}
.national-preview .preview-moon{width:7px;height:54px;flex:none;border-radius:2px;background:linear-gradient(#ddaa54,#a92f2e);box-shadow:none}
@media(prefers-reduced-motion:no-preference){html:not([data-reading-motion]) .national-festival.national-visible .national-festival-inner{animation:national-enter .9s ease both}@keyframes national-enter{from{opacity:1;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:650px){.hero-festival-greeting{max-width:calc(100% - 16px);margin-bottom:19px;padding-inline:4px;font-size:.75rem}.hero-festival-greeting small{font-size:.68rem}.national-festival{padding:54px 14px}.national-festival-inner{padding:70px 27px;border-radius:23px}.national-festival-inner::before{inset:12px;border-radius:14px}.national-anniversary{font-size:6rem}.national-festival h2{font-size:1.88rem}.national-preview .preview-moon{height:44px}}
:root[data-theme="dark"] .hero-festival-greeting{color:#f7d18c;border-color:#ad7c46}:root[data-theme="dark"] .national-festival{background:linear-gradient(180deg,#16231b,#2a211d 50%,#16231b)}:root[data-theme="dark"] .national-preview{background:color-mix(in srgb,var(--surface) 91%,#704335)}
#download{padding-bottom:clamp(42px,5vw,64px)}
#download+.site-footer,.marketing-home+.site-footer{padding-top:clamp(36px,4vw,50px)}
@media(max-width:650px){.national-preview{grid-template-columns:6px minmax(0,1fr);column-gap:14px;padding:16px}.national-preview .preview-moon{width:6px;align-self:stretch;height:auto;min-height:52px}}
@media(forced-colors:active){.national-festival-inner{border:1px solid CanvasText;box-shadow:none}.national-festival-inner::after{display:none}.national-preview .preview-moon{background:CanvasText}.hero-festival-greeting{border-color:CanvasText}}
/* Keep the first useful action in reach on narrow screens, even during the campaign. */
@media(max-width:600px){
 .brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-lockup{gap:10px;margin-bottom:16px}
 .brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-lockup img{width:68px;height:68px}
 .brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-copy h1{margin-bottom:14px}
 .brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-copy .sub{line-height:1.65}
 .brand-hero:has(.hero-festival-greeting:not([hidden])) .hero-actions{margin-top:18px}
 html[lang="en"] .brand-hero .hero-copy h1,html[lang="fr"] .brand-hero .hero-copy h1,html[lang="ja"] .brand-hero .hero-copy h1{font-size:clamp(1.85rem,7.6vw,2.25rem)}
}
/* A calm editorial sequence for the feature overview. The connecting rule follows reading order. */
.feature-day{padding:clamp(32px,5vw,68px) 0;background:var(--surface)}
.feature-day-head{max-width:58rem;margin-bottom:clamp(24px,4vw,42px)}
.feature-day-head h2{margin:.45rem 0 .6rem;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.22;letter-spacing:-.035em;text-wrap:balance}
.feature-day-head>p:last-child{margin:0;color:var(--ink-2);line-height:1.7}
.feature-day-flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,34px);padding:0;margin:0}
.feature-day-flow li{position:relative;min-width:0;padding:15px 0 0;border-top:1px solid var(--line)}
.feature-day-flow li::before{content:"";position:absolute;inset:-1px auto auto 0;width:34%;height:2px;background:var(--green-strong)}
.feature-day-number{display:block;margin-bottom:22px;font-size:.75rem;font-weight:650;letter-spacing:.12em;color:var(--green-strong)}
.feature-day-flow h3{margin:0 0 9px;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.35;letter-spacing:-.025em}
.feature-day-flow p{margin:0;color:var(--ink-2);line-height:1.7;font-size:.94rem}
.feature-day-next{margin:38px 0 0;max-width:75ch;line-height:1.75}
.feature-day-next a{font-weight:600;text-underline-offset:4px}
.feature-day-status{margin:16px 0 0;max-width:90ch;color:var(--ink-3);font-size:.82rem;line-height:1.75}
@media(max-width:760px){.feature-day-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.feature-day-number{margin-bottom:12px}}
@media(max-width:520px){.feature-day-flow{grid-template-columns:minmax(0,1fr);gap:16px}.feature-day-flow li{padding:13px 0 0 42px}.feature-day-flow li::before{width:27px}.feature-day-number{position:absolute;left:0;top:14px;margin:0}.feature-day-flow h3{font-size:1.16rem}.feature-day-next{margin-top:28px}}
@media(forced-colors:active){.feature-day-flow li::before{background:Highlight}}

/* National Day 2026. One dated theme, with artwork subordinate to the message. */
.hero-national,.hero-national-flag,.hero-entry,.national-care{display:none}
:root[data-national-season]{--green:#b52e36;--green-strong:#98222e;--green-ink:#69202b;--green-soft:#fae3d7;--green-softer:#fff0e5;--bg:#fff9f0;--bg-elev:#fffdf8;--surface:#fffdf8;--surface-2:#faeee0;--ink:#3e2427;--ink-2:#694c47;--ink-3:#785f55;--line:#d9bba14d;--line-strong:#c8a08688;--on-green:#fffaf0}
:root[data-national-season][data-theme="dark"]{--green:#f1b899;--green-strong:#ffe0aa;--green-ink:#ffe8c1;--green-soft:#4a252b;--green-softer:#331f24;--bg:#20171b;--bg-elev:#2b1e22;--surface:#2b1e22;--surface-2:#352429;--ink:#fff3e0;--ink-2:#e6cbbb;--ink-3:#cdb3a4;--line:#cda27940;--line-strong:#cda27970;--on-green:#351820}
:root[data-national-season] body:has(.marketing-home){--bg:inherit;--bg-elev:inherit;--surface:inherit;--surface-2:inherit}
:root[data-national-season] .site-header{background:var(--surface);border-bottom:1px solid var(--line-strong);box-shadow:0 2px 16px #64172308}
:root[data-national-season] .site-footer{background:#691f2b;--ink:#fff1df;--ink-2:#efd4bb;--ink-3:#dbbaa4;--green-strong:#ffe1a0;--line:#f0cf9e40;color:var(--ink)}
:root[data-national-season] .site-footer a,:root[data-national-season] .site-footer h4{color:#ffe8c6}
:root[data-national-season] .section--alt,:root[data-national-season] .feature-day{background:var(--surface-2)}
:root[data-national-season] .start-option{border-color:var(--line-strong)}
:root[data-national-season] .start-option--web{background:var(--green-softer)}
:root[data-national-season] .eyebrow{color:var(--green-strong)}
:root[data-national-season] .brand-hero{
 --national-ground:#821f2d;--ink:#fff5e4;--ink-2:#f9ddc6;--ink-3:#ecc8af;
 position:relative;isolation:isolate;overflow:hidden;background:var(--national-ground);color:var(--ink);min-height:0;padding:34px 0 200px
}
:root[data-national-season] .brand-hero::before{display:none}
:root[data-national-season] .brand-hero::after{
 content:"";display:block;position:absolute;inset:auto 0 0;z-index:-1;height:320px;pointer-events:none;border:0;border-radius:0;
 background:url('/national-great-wall-ai.jpg') center 68%/cover no-repeat;opacity:.55;mask-image:linear-gradient(transparent,#000 65%)
}
:root[data-national-season] .brand-hero .hero-layout{display:block}
:root[data-national-season] .brand-hero .hero-copy{width:100%;max-width:860px;margin:0 auto;text-align:center}
:root[data-national-season] .brand-hero .hero-evergreen,:root[data-national-season] .brand-hero .hero-evergreen-entry,:root[data-national-season] .brand-hero .hero-lockup,:root[data-national-season] .brand-hero .principles-cue{display:none}
:root[data-national-season] .brand-hero .hero-national{display:inline}
:root[data-national-season] .brand-hero .hero-national-flag{display:block;width:81px;height:auto;max-width:35%;object-fit:contain;margin:20px auto 24px;border:0;border-radius:0;filter:none;box-shadow:none}
:root[data-national-season] .brand-hero .hero-festival-greeting{color:#f7dca8;border:0;border-radius:0;padding:0;margin:0 auto;min-height:44px;font-size:.83rem;letter-spacing:.11em;line-height:1.75}
:root[data-national-season] .brand-hero .hero-festival-greeting small{font-size:.7rem;color:#ebc5a6;letter-spacing:.1em}
:root[data-national-season] .brand-hero .hero-copy h1{font-family:ui-serif,'Songti SC','Noto Serif CJK SC',Georgia,serif;font-size:clamp(2.8rem,5.7vw,4.75rem);font-weight:600;letter-spacing:.04em;line-height:1.28;text-align:center;text-wrap:balance;color:#fff5e4;margin:0 auto 22px;max-width:100%;overflow-wrap:anywhere}
:root[data-national-season] .brand-hero .hero-copy h1 br{display:block}
:root[data-national-season] .brand-hero .hero-copy h1 em{color:#f5d79e;font-style:normal}
:root[data-national-season] .brand-hero .hero-copy .sub{max-width:35em;margin:0 auto;text-align:center;font-size:.98rem;line-height:1.95;color:#f9ddc6;text-wrap:pretty}
:root[data-national-season] .hero-entry{display:block;padding-block:28px 26px;text-align:center;border-bottom:1px solid var(--line-strong)}
.hero-entry .hero-actions{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-entry .hero-actions .button{min-height:48px;white-space:normal}
.hero-entry .hero-quicklinks{justify-content:center;margin-top:18px;gap:10px 24px}
.hero-entry .loop-hero-note{font-size:.76rem;line-height:1.8;color:var(--ink-3);margin:16px auto 0;max-width:52em}
:root[data-national-season] .national-care{display:block;padding-block:42px 28px}
.national-care h2{font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.45;text-wrap:balance;margin:8px 0 28px;letter-spacing:-.02em}
.national-care-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.national-care-grid article{min-width:0;border-top:1px solid var(--line-strong);padding-top:22px;position:relative}
.national-care-grid svg{color:var(--green-strong);margin-bottom:10px}
.national-care-grid h3{font-size:1.08rem;margin:0 0 8px}
.national-care-grid p{font-size:.92rem;line-height:1.85;color:var(--ink-2);margin:0;max-width:36em}
.national-credits{max-width:54rem;margin:20px auto 0;color:var(--ink-2);font-size:.8rem;line-height:1.8;text-align:center;overflow-wrap:anywhere}
.national-credits summary{cursor:pointer;min-height:44px;padding:10px;list-style-position:inside}
.national-credits p{margin:6px 0}.national-credits a{color:var(--green-strong);text-underline-offset:4px}
:root[data-national-season] .national-festival{background:linear-gradient(180deg,var(--surface),var(--surface-2),var(--surface));padding-block:60px}
:root[data-national-season] .national-festival-inner{background:linear-gradient(135deg,#912431,#641b2a);box-shadow:0 24px 70px #67212c18}
:root[data-national-season][data-theme="dark"] .brand-hero{--national-ground:#541e2a}
:root[data-national-season][data-theme="dark"] .brand-hero::after{opacity:.3}
.national-preview{background:var(--green-softer);border-color:var(--line-strong);color:var(--ink)}
.national-preview small,.national-preview>span>span{color:var(--ink-2)}.national-preview b{color:var(--green-strong)}
@media(max-width:650px){
 :root[data-national-season] .brand-hero{padding:28px 0 150px}
 :root[data-national-season] .brand-hero::after{height:220px;background-size:auto 340px;background-position:center 75%;opacity:.48}
 :root[data-national-season] .brand-hero .hero-copy h1{font-size:clamp(2.4rem,10vw,3.5rem);letter-spacing:.03em;margin-bottom:18px}
 :root[data-national-season] .brand-hero .hero-festival-greeting{letter-spacing:.02em;font-size:.76rem;max-width:100%}
 :root[data-national-season] .brand-hero .hero-national-flag{width:72px;margin:16px auto 22px}
 :root[data-national-season] .brand-hero .hero-copy .sub{font-size:.88rem;line-height:1.9;max-width:27em}
 :root[data-national-season] .hero-entry{padding-block:24px}
 .hero-entry .hero-actions .button{flex:1 1 135px;min-width:0;padding:12px 14px;font-size:.88rem}
 .hero-entry .hero-quicklinks{column-gap:14px}.hero-entry .hero-quicklinks a{font-size:.8rem}
 :root[data-national-season] .national-care{padding-block:30px 22px}
 .national-care-grid{grid-template-columns:1fr;gap:20px}
 .national-care-grid article{padding:18px 0 0 42px}
 .national-care-grid svg{position:absolute;left:0;top:18px}
 .national-care h2{font-size:1.5rem;margin-bottom:20px}
 :root[data-national-season] .national-festival{padding-block:32px}
 .national-festival-inner{padding:48px 24px}.national-festival h2{font-size:clamp(1.4rem,6vw,1.88rem);overflow-wrap:anywhere}
 .national-anniversary{font-size:clamp(4rem,22vw,6rem)}
}
@media(forced-colors:active){
 :root[data-national-season] .brand-hero,:root[data-national-season] .site-footer{background:Canvas;color:CanvasText}
 :root[data-national-season] .brand-hero::after{display:none}
 :root[data-national-season] .brand-hero *,:root[data-national-season] .site-footer *{color:CanvasText!important}
}

/* The standard flag belongs to the anniversary masthead, not a floating ornament. */
.national-masthead{display:none}
:root[data-national-season] .national-masthead{display:flex;justify-content:center;align-items:center;gap:16px;margin:6px auto 36px;max-width:34rem}
:root[data-national-season] .brand-hero .national-masthead .hero-national-flag{width:60px;max-width:22%;height:auto;margin:0;flex:0 0 auto}
:root[data-national-season] .brand-hero .national-masthead .hero-festival-greeting{margin:0;text-align:left;min-height:0;max-width:28rem;line-height:1.65;letter-spacing:.05em}
:root[data-national-season] .brand-hero::after{opacity:.42}
@media(max-width:650px){
 :root[data-national-season] .national-masthead{gap:12px;margin:2px auto 30px}
 :root[data-national-season] .brand-hero .national-masthead .hero-national-flag{width:51px}
 :root[data-national-season] .brand-hero .national-masthead .hero-festival-greeting{font-size:.72rem;letter-spacing:0}
 :root[data-national-season] .brand-hero .national-masthead .hero-festival-greeting small{font-size:.65rem;letter-spacing:.025em}
}
@media(max-width:650px){:root[data-national-season].reading-reflow .brand-hero .hero-copy h1{font-size:1.6rem;line-height:1.4}}

/* Quiet, consistent illustration and a footer that fits a phone screen. */
.difference-promise-icon svg{display:block;width:23px;height:23px}
.difference-promise>span.difference-promise-icon{background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:50%;color:var(--green-strong)}
@media(max-width:650px){
 .difference-section{padding-block:54px}
 .difference-flow li{padding-bottom:28px}
 .difference-flow h3{font-size:1.28rem}
 .difference-flow p,.difference-promise p{font-size:.94rem;line-height:1.68}
 .difference-bottom{gap:18px;padding-top:24px}
 .difference-promise{gap:13px}
 .difference-promise>span.difference-promise-icon{width:40px;height:40px}
 .difference-promise h3{font-size:1.12rem;line-height:1.4}
 .difference-future{font-size:.84rem;line-height:1.65}
 .site-footer{padding:34px 0 28px}
 .footer-grid{display:block}
 .footer-brand{padding-bottom:22px;border-bottom:1px solid var(--line)}
 .footer-brand p{margin-top:8px;font-size:.85rem;line-height:1.55}
 .footer-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;padding:18px 0 14px;border-bottom:1px solid var(--line)}
 .footer-col h4{grid-column:1/-1;margin:0 0 6px;font-size:.73rem}
 .footer-col a,.footer-col:last-child a{display:flex;margin:0;min-height:42px;padding:5px 0;font-size:.88rem;line-height:1.4;overflow-wrap:anywhere}
 .footer-bottom{margin-top:18px;padding-top:0;border-top:0;gap:8px}
 .footer-owner{font-size:.76rem;line-height:1.5}
 .footer-utility{gap:0 20px}
 .footer-utility a{border:0;background:transparent;border-radius:0;padding:0;min-height:40px;font-size:.78rem}
}

/* Apple screenshots use the same visual rhythm as Android and HarmonyOS. */
.apple-preview-layout{margin:12px 0 36px;padding:24px clamp(18px,3vw,36px);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface)}
.apple-gallery figure[hidden]{display:none!important}
.apple-gallery img{display:block;max-height:520px;object-fit:contain;box-shadow:0 12px 30px #142d2112}
.apple-gallery #apple-shot-inner img{width:100%;height:auto;max-height:440px}
.apple-gallery figcaption{line-height:1.5}
@media(max-width:760px){.apple-preview-layout{margin-bottom:28px;padding:20px 14px}.apple-gallery img{max-height:450px}.apple-gallery #apple-shot-inner img{max-height:300px}.apple-gallery .android-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.apple-gallery .android-tabs button{min-height:44px;padding:8px 12px}}
/* A quieter date-check action avoids a detached-looking shadow at large text sizes. */
.date-check-actions .button.primary{box-shadow:0 4px 12px color-mix(in srgb,var(--green) 16%,transparent);font-size:clamp(.9rem,1vw,1rem);line-height:1.35;white-space:normal;text-align:center;padding:10px 16px}
.date-check-actions .button.primary:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--green) 20%,transparent)}
@media(max-width:760px){.date-check-actions .button.primary{flex:1 1 100%;min-width:0}}

/* The National Day dark palette must stay warm throughout the page. */
:root[data-national-season][data-theme="dark"] .marketing-home{
  background:radial-gradient(ellipse 80% 620px at 70% 600px,#a35b3910,transparent),var(--bg);
}
:root[data-national-season][data-theme="dark"] .marketing-home .start-here{
  background:linear-gradient(180deg,#20171b 0%,#271b20 34%,#2b1e22 76%);
}
:root[data-national-season][data-theme="dark"] .start-here::before{
  background:radial-gradient(ellipse 75% 95% at 50% 0,#d98e5430,transparent);
}
:root[data-national-season][data-theme="dark"] .start-option--web{
  background:radial-gradient(circle at 83% 18%,#d18b6730,transparent 38%),linear-gradient(155deg,#39232a,#2b1e22 72%);
  box-shadow:0 20px 48px #10070d33,inset 0 1px 0 #ffffff13;
}
:root[data-national-season][data-theme="dark"] .glass-options{
  background:#34232bba;
  border-color:#cda27955;
  box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #0003,0 8px 28px #10070d40;
}
:root[data-national-season][data-theme="dark"] .selection-glass::before{
  background:radial-gradient(ellipse at var(--light-x,35%) 0%,#ffe1bd2e,transparent 60%),linear-gradient(160deg,#f1b89919,#5f323519);
  border-color:#f1b89942;
}
:root[data-national-season][data-theme="dark"] .apple-gallery img{
  box-shadow:0 12px 30px #10070d4d;
}