/* ============================================================
 * 知识花园 · Landing page motifs
 * Built on Wenxin tokens (tokens.css) + layout.css primitives.
 * Adds: garden vines, node network, growth stages, tool
 * constellation, ecosystem rows. Soul untouched — warm paper,
 * cinnabar stamp, hairlines, no shadows, no gradients.
 * ------------------------------------------------------------
 * One sanctioned secondary: a low-saturation olive ("苔绿"),
 * used ONLY for vine/node texture at low opacity — never as a
 * competing accent. Cinnabar remains the single stamp.
 * ============================================================ */

:root {
  /* 苔绿 — desaturated, warm-leaning olive. Texture only. */
  --moss:        #6F7355;
  --moss-soft:   #8B8E72;
  --moss-faint:  rgba(111, 115, 85, 0.14);
  --wider-page:  clamp(720px, 80vw, 1080px);
  --header-h:    6rem;   /* locked so the hero can fill viewport − header */
}

[data-theme="dark"] {
  --moss:       #8B8E6E;
  --moss-soft:  #767A5E;
  --moss-faint: rgba(139, 142, 110, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --moss:       #8B8E6E;
    --moss-soft:  #767A5E;
    --moss-faint: rgba(139, 142, 110, 0.16);
  }
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* wider container for the landing rhythm */
.container-wide {
  width: 100%;
  max-width: var(--wider-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---- scroll reveal — AOS toggles .aos-animate; distances and ----
   durations are controlled here, inside the spec's hard gates
   (≤8px translate, ≤420ms). AOS strips [data-aos] when reduced. */
[data-aos] {
  transition-property: opacity, transform, clip-path;
  transition-duration: var(--d-slow);          /* 420ms */
  transition-timing-function: var(--ease-out);
  will-change: opacity, transform;
}
[data-aos="fade-up"] { opacity: 0; transform: translateY(8px); }
[data-aos="fade-up"].aos-animate { opacity: 1; transform: translateY(0); }

/* gentle 1→2 cascade for header pairs */
.s-lede[data-aos], .final-sub[data-aos] { transition-delay: 80ms; }

/* clustered grids stagger by sibling index (total ≤ 240ms) */
.pain-grid > [data-aos]:nth-child(2),
.pillars > [data-aos]:nth-child(2),
.eco-list > [data-aos]:nth-child(2),
.dl-includes > [data-aos]:nth-child(2) { transition-delay: 60ms; }
.pain-grid > [data-aos]:nth-child(3),
.dl-includes > [data-aos]:nth-child(3) { transition-delay: 120ms; }
.pain-grid > [data-aos]:nth-child(4),
.pillars > [data-aos]:nth-child(3) { transition-delay: 180ms; }

/* ============================================================
 * Sticky header (document flow on mobile, sticky on desktop)
 * ============================================================ */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: header-in var(--d-slow) var(--ease-out) forwards;
}
.lp-nav a.is-current { color: var(--fg-1); }
.lp-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  height: 100%;
}
.lp-brand { display: flex; align-items: center; gap: var(--s-3); }
.lp-brand svg, .lp-brand img { width: 28px; height: 28px; flex-shrink: 0; }
.lp-brand-name {
  font-family: var(--serif-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1;
}
.lp-brand-name small {
  display: block;
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  margin-top: 3px;
}
.lp-nav { display: flex; gap: var(--s-6); align-items: center; list-style: none; }
.lp-nav a {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
}
.lp-nav a:hover { color: var(--fg-1); }
@media (max-width: 720px) { .lp-nav { display: none; } }

/* ============================================================
 * Buttons — one filled cinnabar stamp; rest are text/outline
 * ============================================================ */
.btn {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 12px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-default),
              color var(--d-fast) var(--ease-default),
              border-color var(--d-fast) var(--ease-default);
}
.btn-primary {
  background: var(--accent);
  color: var(--base-white);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-primary { color: #1A1816; }
.btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line-2);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn-disabled {
  background: transparent;
  color: var(--fg-4);
  border-color: var(--line-1);
  cursor: not-allowed;
  min-width: 84px;
  justify-content: center;
}
.btn-disabled .tag {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  opacity: 0.8;
}
.btn-note {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
}
.btn-text {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
  border-bottom: 1px solid var(--line-1);
  padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.btn-text:hover { color: var(--fg-1); border-color: var(--line-2); }
.btn .arr { transition: transform var(--d-fast); }
.btn:hover .arr { transform: translateX(3px); }

/* ============================================================
 * HERO — node network grows out of the void
 * ============================================================ */
.hero-lp {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(56px, 9vh, 110px);
  overflow: hidden;
}
.hero-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-lp .container-wide { position: relative; z-index: 1; }
.hero-eyebrow {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.hero-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--line-2);
}
.hero-title-lp {
  font-family: var(--serif-display);
  font-size: clamp(2.75rem, 8vw, 5rem);
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.08;
  letter-spacing: var(--tr-cjk);
  margin: 0;
}
.hero-sub-lp {
  font-family: var(--serif-display);
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  font-weight: 400;
  color: var(--fg-3);
  margin-top: var(--s-4);
  line-height: var(--lh-snug);
}
.hero-hook {
  font-family: var(--serif-body);
  font-size: var(--t-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  max-width: 38ch;
  margin-top: var(--s-8);
}
.hero-hook .stamp { color: var(--accent); font-style: italic; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  margin-top: var(--s-10);
}
.hero-meta {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
  margin-top: var(--s-8);
  display: flex; gap: var(--s-5); flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: max(var(--s-6), 3vh);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  z-index: 2;
  /* Hidden until the consent banner is resolved (garden.ts §4/§12),
     so the cue and the banner never compete at bottom-center. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-slow) var(--ease-out);
}
.hero-scroll .dot { font-size: var(--t-lg); }
.hero-scroll.cue-ready { opacity: 1; }
/* nudge is driven once by Anime (≤8px, finite); then this fades it out */
.hero-scroll.cue-fadeout { opacity: 0; }

/* ============================================================
 * Section rhythm helpers
 * ============================================================ */
.s-eyebrow {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  display: block;
  margin-bottom: var(--s-5);
}
.s-eyebrow .idx { color: var(--accent); }
.s-title {
  font-family: var(--serif-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-cjk);
  margin: 0 0 var(--s-6);
  max-width: 22ch;
}
.s-lede {
  font-family: var(--serif-body);
  font-size: var(--t-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 56ch;
}
.section-lp { padding-block: clamp(72px, 11vh, 130px); }
.section-lp + .section-lp { border-top: none; }
/* one unified warm-paper canvas — separation by whitespace + vines only */
.bg-surface { background: transparent; }

/* ---- vine divider ------------------------------------------- */
.vine {
  display: block; width: 100%; height: 84px;
  color: var(--moss);
  overflow: visible;
}
.vine:not(.activated) { opacity: 0; }
.vine.activated { transition: opacity 0.6s ease; }
.vine .vine-stem { vector-effect: non-scaling-stroke; }
.vine .vine-tendril { vector-effect: non-scaling-stroke; }

/* ---- hero scroll cue: duplicate removed — kept above ---- */



/* ============================================================
 * PAIN — digital hoarding
 * ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-12) var(--s-16);
  margin-top: var(--s-16);
}
@media (max-width: 720px) { .pain-grid { grid-template-columns: 1fr; gap: var(--s-10); } }
.pain {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-1);
}
.pain-q {
  font-family: var(--serif-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}
.pain-d {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.pain-tag {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
  display: block;
  margin-bottom: var(--s-3);
}

/* ============================================================
 * TURN — the thesis. Quiet, large, centered single column.
 * ============================================================ */
.turn { text-align: center; }
.turn-quote {
  font-family: var(--serif-display);
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.4;
  letter-spacing: var(--tr-cjk);
  max-width: 22ch;
  margin: 0 auto;
  position: relative;
  padding-left: var(--s-6);
}
/* canvas unfold: clip-path wipe + scale, all within the 420ms gate */
[data-aos="reveal-quote"] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: scale(0.98);
  transition: clip-path var(--d-slow) var(--ease-out),
              opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
}
[data-aos="reveal-quote"].aos-animate {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* animated left border accent */
.turn-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--accent);
  opacity: 0.45;
  transition: height var(--d-slow) var(--ease-out) 0.1s;
}
[data-aos="reveal-quote"].aos-animate::before { height: 100%; }
.turn-quote em { font-style: italic; color: var(--accent); font-weight: 600; }
.turn-quote .big {
  font-size: 1.5em;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1;
}
.turn-quote .big-accent { color: var(--accent); }
.turn-attrib {
  margin-top: var(--s-10);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 46ch;
  margin-inline: auto;
}

/* ============================================================
 * STAGES — the four parts as garden growth
 * ============================================================ */
.stages {
  margin-top: var(--s-16);
  display: grid;
  gap: 0;
}
.stage {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s-8);
  padding-block: var(--s-10);
  align-items: start;
}
.stage-glyph {
  position: sticky; top: 96px;
  color: var(--moss);
}
.stage-glyph svg { width: 64px; height: 84px; display: block; }
.stage-num {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  display: block;
  margin-bottom: var(--s-3);
}
.stage-name {
  font-family: var(--serif-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-cjk);
  margin: 0 0 var(--s-3);
}
.stage-name .en {
  display: block;
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-4);
  margin-top: var(--s-2);
}
.stage-claim {
  font-family: var(--serif-body);
  font-size: var(--t-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--s-3);
  max-width: 52ch;
}
.stage-claim strong { color: var(--fg-1); font-weight: 600; }
.stage-detail {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 52ch;
}
@media (max-width: 640px) {
  .stage { grid-template-columns: 1fr; gap: var(--s-5); }
  .stage-glyph { position: static; }
  .stage-glyph svg { width: 48px; height: 60px; }
}

/* ============================================================
 * METHOD + tool constellation
 * ============================================================ */
.method-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-24);
  margin-top: var(--s-16);
  align-items: center;
}
@media (max-width: 880px) { .method-layout { grid-template-columns: 1fr; gap: var(--s-16); } }
.pillars { display: grid; gap: var(--s-10); position: relative; z-index: 1; }
.pillar { padding-left: var(--s-6); padding-right: var(--s-4); border-left: 1px solid var(--line-1); }
/* .pillar.is-key accent border now only on hover (see hover rule below) */
.pillar-k {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  display: block;
  margin-bottom: var(--s-2);
}
.pillar-t {
  font-family: var(--serif-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
  line-height: var(--lh-snug);
}
.pillar-d {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  margin: 0;
}


/* ============================================================
 * AUTHOR
 * ============================================================ */
.author-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-16);
  margin-top: var(--s-12);
  align-items: start;
}
@media (max-width: 720px) { .author-layout { grid-template-columns: 1fr; gap: var(--s-8); } }
.author-card {
  font-family: var(--sans-ui);
}
.author-seal {
  width: 120px; height: 120px; margin-bottom: var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-display);
  font-size: 3rem; color: var(--accent);
}
.author-name { font-family: var(--serif-display); font-size: var(--t-xl); font-weight: 700; color: var(--fg-1); }
.author-role { font-size: var(--t-sm); color: var(--fg-3); letter-spacing: var(--tr-wide); margin-top: var(--s-1); }
.author-body p {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--s-5);
  max-width: 58ch;
}
.author-body p:first-child {
  font-size: var(--t-lg);
  color: var(--fg-1);
}
.author-body .timeline-rule {
  width: 40px; height: 1px; background: var(--line-2); margin: var(--s-8) 0;
}

/* ============================================================
 * ECOSYSTEM — hairline rows, not cards
 * ============================================================ */
.eco-list { margin-top: var(--s-16); }
.eco {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-8);
  border-top: 1px solid var(--line-1);
  transition: background var(--d-base) var(--ease-default),
              transform 0.3s ease;
}
.eco:last-child { border-bottom: 1px solid var(--line-1); }
.eco:hover { background: var(--bg-4); transform: translateX(4px); }
.eco-mark { color: var(--moss); }
.eco-mark svg { width: 40px; height: 40px; display: block; }
.eco-name {
  font-family: var(--mono);
  font-size: var(--t-md);
  color: var(--fg-1);
  margin: 0 0 4px;
}
.eco-desc {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-3);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 52ch;
}
.eco-link {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
  white-space: nowrap;
}
.eco:hover .eco-link { color: var(--accent); }
@media (max-width: 640px) {
  .eco { grid-template-columns: 40px 1fr; gap: var(--s-5); }
  .eco-link { display: none; }
}

/* AI install entry — hand the prompt to a coding agent */
.eco-ai {
  margin-top: var(--s-10);
  padding: var(--s-8);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: var(--bg-4);
}
.eco-ai-lede {
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--moss);
  margin: 0 0 var(--s-3);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.eco-ai-lede svg { width: 16px; height: 16px; display: block; }
.eco-ai-desc {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-3);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-6);
  max-width: 80ch;
}
.eco-ai-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.eco-ai-cmd {
  flex: 1 1 280px;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--fg-2);
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: 12px 14px;
  line-height: var(--lh-normal);
  word-break: break-word;
}
.eco-ai-copy {
  flex: 0 0 auto;
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-default),
              border-color var(--d-fast) var(--ease-default);
}
.eco-ai-copy:hover { color: var(--accent); border-color: var(--accent); }
.eco-ai-copy.is-copied { color: var(--moss); border-color: var(--moss); }
.eco-ai-link {
  display: inline-block;
  margin-top: var(--s-5);
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
  transition: color var(--d-fast) var(--ease-default);
}
.eco-ai-link:hover { color: var(--accent); }

/* ============================================================
 * LINEAGE — thinkers
 * ============================================================ */
.lineage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-12) var(--s-10);
  margin-top: var(--s-16);
}
@media (max-width: 880px) { .lineage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lineage-grid { grid-template-columns: 1fr; } }
.thinker { padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.thinker-name { font-family: var(--serif-display); font-size: var(--t-lg); font-weight: 700; color: var(--fg-1); margin: 0 0 var(--s-1); }
.thinker-idea { font-family: var(--sans-ui); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-4); margin: 0 0 var(--s-3); }
.thinker-d { font-family: var(--serif-body); font-size: var(--t-sm); color: var(--fg-3); line-height: var(--lh-normal); margin: 0; }

/* ============================================================
 * FINAL CTA
 * ============================================================ */
.final {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-net { position: absolute; inset: 0; pointer-events: none; color: var(--moss); }
.final .container-wide { position: relative; z-index: 1; }
.final-title {
  font-family: var(--serif-display);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.2;
  letter-spacing: var(--tr-cjk);
  margin: 0 0 var(--s-6);
}
.final-sub {
  font-family: var(--serif-body);
  font-size: var(--t-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 44ch;
  margin: 0 auto var(--s-12);
}
.final-actions { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; align-items: center; }
.final-note {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
  margin-top: var(--s-6);
}
/* what the minimal example contains — three hairline columns */
.dl-includes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  max-width: 720px;
  margin: 0 auto var(--s-12);
  text-align: left;
}
@media (max-width: 640px) { .dl-includes { grid-template-columns: 1fr; gap: var(--s-6); max-width: 360px; } }
.dl-item { padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.dl-k {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--moss);
  display: block;
  margin-bottom: var(--s-2);
}
.dl-t {
  font-family: var(--serif-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--s-1);
}
.dl-d {
  font-family: var(--serif-body);
  font-size: var(--t-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
  margin: 0;
}
/* hero actions can stack a small note under the buttons */
.hero-actions-note {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
  margin-top: var(--s-5);
  display: flex; align-items: center; gap: var(--s-2);
}
.hero-actions-note::before { content: ""; width: 16px; height: 1px; background: var(--line-2); }

/* ============================================================
 * FOOTER
 * ============================================================ */
.lp-footer {
  border-top: 1px solid var(--line-1);
  padding-block: var(--s-16) var(--s-12);
  background: transparent;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-12);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h5 {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
  margin: 0 0 var(--s-5);
  font-weight: 600;
}
.footer-col a, .footer-col p {
  display: block;
  font-family: var(--serif-body);
  font-size: var(--t-md);
  color: var(--fg-3);
  margin: 0 0 var(--s-3);
}
.footer-col a:hover { color: var(--accent); }
.footer-lead .lp-brand-name { font-size: var(--t-xl); }
.footer-tagline {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 34ch;
  margin-top: var(--s-5);
}
.footer-simple {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-12);
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--s-2);
}
.footer-links a {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
}
.footer-links a:hover { color: var(--accent); }
.footer-base {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-1);
}
.footer-copy {
  font-family: var(--sans-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
}

/* ============================================================
 * NAV CTA — accent-coloured download link in header
 * ============================================================ */
.lp-nav a.nav-cta { color: var(--accent); }
.lp-nav a.nav-cta:hover { color: var(--accent-hover); }

/* ============================================================
 * PILLAR — hover: left border lights up to accent
 * ============================================================ */
.pillar { transition: border-left-color var(--d-base) var(--ease-default); }
.pillar:hover { border-left-color: var(--accent); }

/* ============================================================
 * ECO rows — remove hairline top/bottom borders (Zopiya)
 * ============================================================ */
.eco            { border-top: none; }
.eco:last-child { border-bottom: none; }

/* ============================================================
 * READING — body copy flows naturally (no hard <br>); pretty
 * wrap keeps the last line from leaving an orphan glyph/标点.
 * ============================================================ */
.s-lede, .pain-d, .stage-claim, .stage-detail, .pillar-d,
.eco-desc, .eco-ai-desc, .turn-attrib, .dl-d {
  text-wrap: pretty;
}

/* ============================================================
 * FLOWER CONSTELLATION — Canvas-based satellite labels
 * ============================================================ */

/* ── Constellation wrap ── */
.constellation-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 380;
  overflow: visible;
}

.flower-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
 * GLOBAL ANIMATION POLISH
 * ============================================================ */

/* Header entrance */
@keyframes header-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stage glyphs settle in once on scroll (driven by Anime) —
   the previous infinite breathe loop has been removed. */

/* Pain card hover — the drawn top hairline (.gx-rule-top) lights up;
   see the LIBRARY-DRIVEN MOTIF ELEMENTS block below. */

/* breathing brand mark inline */
.bm {
  display: inline-block; width: 8px; height: 8px;
  background: var(--accent); vertical-align: baseline;
  margin-left: 6px;
  animation: wenxin-breath 4s ease-in-out infinite;
}

/* ============================================================
 * LIBRARY-DRIVEN MOTIF ELEMENTS (v5)
 * Hooks created/animated by garden.ts via GSAP / Anime.
 * ============================================================ */

/* Drawn hairlines — pain card tops & method pillars (moments B/D) */
.has-rule { position: relative; }
.rule-top { border-top-color: transparent; }
.rule-left { border-left-color: transparent; }
.gx-rule { position: absolute; background: var(--line-1); pointer-events: none; }
.gx-rule-top  { top: -1px; left: 0; width: 100%; height: 1px; transform-origin: left center; }
.gx-rule-left { top: 0; left: 0; width: 1px; height: 100%; transform-origin: top center; }
.pain:hover .gx-rule-top,
.pillar:hover .gx-rule-left {
  background: var(--accent);
  transition: background var(--d-base) var(--ease-default);
}

/* Stages growth spine — vertical line behind the glyph column (moment C) */
.has-spine { position: relative; }
.stages-spine {
  position: absolute;
  left: 42px; top: 0; bottom: 0;
  width: 1px;
  background: var(--moss-faint);
  transform-origin: top center;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px) { .stages-spine { display: none; } }

/* Tool constellation — symmetric satellite labels (moment D) */
.tool-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.tool-label small {
  display: block;
  font-size: var(--t-xs);
  color: var(--fg-4);
  letter-spacing: var(--tr-wide);
  margin-top: 2px;
}
.tool-center {
  left: 50%; top: 50%;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--fg-1);
}

/* Scroll progress hairline (moment F) */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 1px;
  background: var(--moss-soft);
  opacity: 0.5;
  transform-origin: left center;
  pointer-events: none;
}

/* ============================================================
 * FOOTER copyright + CONSENT banner (privacy / 数据使用同意)
 * ============================================================ */
.footer-copyright {
  margin: var(--s-10) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-1);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-4);
}

/* Frosted + translucent so it informs without stealing focus from the hero. */
.consent {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  width: min(640px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid color-mix(in srgb, var(--line-1) 65%, transparent);
  border-radius: var(--r-lg, 10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.consent[hidden] { display: none; }
.consent-text {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.consent-text a { color: var(--accent); }
.consent-text a:hover { color: var(--accent-hover); }
.consent-actions { flex: 0 0 auto; display: flex; gap: var(--s-3); }
.consent-btn {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  padding: 8px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-default),
              border-color var(--d-fast) var(--ease-default),
              background var(--d-fast) var(--ease-default);
}
.consent-reject:hover { color: var(--fg-1); border-color: var(--fg-3); }
.consent-accept {
  background: var(--accent);
  color: var(--base-white);
  border-color: var(--accent);
}
.consent-accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
[data-theme="dark"] .consent-accept { color: #1A1816; }
@media (max-width: 560px) {
  .consent { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .consent-actions { justify-content: flex-end; }
}