/* Homepage composition, redesign 2026 R1b ("Kinetic editorial",
 * DESIGN.md). Loads after /style.css; chrome.css (header, footer, buttons)
 * loads after this.
 *
 * style.css's variables are repointed at the 2026 tokens in chrome.css
 * (R1c promoted that block out of here, so every public page shares it).
 * Every shared component on this page — the parse strip, the triptych,
 * the FAQ, the contact form, the "System" modal — therefore takes the new
 * palette, type and radii without a second copy of its rules. What is
 * left here are the sections that change SHAPE: the hero (the product demo replaces the photograph), the module
 * tiles (drawn icons, an asymmetric grid with Network Tracker wide), the
 * "How to start" panel and the phone sticky CTA.
 *
 * Every value is a token (--hm-*, shell/tokens.css) or a named step of
 * DESIGN.md's scales. Motion: transform and opacity only, entrances from
 * shell/motion.css via script.js's initScrollReveal. */

/* ---------------------------------------------------------------
   0. Palette, type and radii
   The repoint of style.css's variables onto the 2026 tokens that used
   to live here moved to chrome.css in R1c, where it covers every public
   page instead of this one. Nothing homepage-specific is needed now.
   --------------------------------------------------------------- */
.home ::selection { background: var(--hm-accent); color: var(--hm-on-accent); }

/* ---------------------------------------------------------------
   1. Type
   --------------------------------------------------------------- */
.home h1, .home h2, .home h3 {
  font-family: var(--hm-font-display);
  color: var(--hm-ink);
  text-wrap: balance;
}
.home h1 {
  font-size: var(--hm-fs-display);
  font-weight: var(--hm-w-display);
  line-height: var(--hm-lh-display);
  letter-spacing: var(--hm-track-display);
  font-variation-settings: "opsz" 96;
}
.home h2 {
  font-size: var(--hm-fs-h2);
  font-weight: var(--hm-w-h2);
  line-height: var(--hm-lh-h2);
  letter-spacing: var(--hm-track-h2);
  font-variation-settings: "opsz" 72;
}
.home h3 {
  font-size: var(--hm-fs-h3);
  font-weight: var(--hm-w-h3);
  line-height: var(--hm-lh-h3);
  letter-spacing: var(--hm-track-h3);
}
/* Chinese: the system Heiti face, one weight step lighter, no negative
   tracking (DESIGN.md "Type"). */
.home:lang(zh) h1, .home:lang(zh) h2, .home:lang(zh) h3 { letter-spacing: 0; }
.home:lang(zh) h1 { font-weight: 700; line-height: 1.12; }
.home:lang(zh) h2 { font-weight: 600; line-height: 1.2; }
.home:lang(zh) h3 { font-weight: 600; }

/* The one crimson word in a display headline (24 px and up, so the brand
   crimson itself is legible as large text). */
.home .accent { color: var(--hm-accent); }

/* The eyebrow: sentence case, never tracked capitals (DESIGN.md "Type"). */
.home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--hm-accent-ink);
  font: 500 14px/1.3 var(--hm-font-sans);
  letter-spacing: 0.01em;
  text-transform: none;
}
.home .eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.home p { text-wrap: pretty; }

/* ---------------------------------------------------------------
   2. Sections
   --------------------------------------------------------------- */
.home .sec {
  max-width: calc(var(--hm-page-max) + 2 * var(--hm-gutter));
  margin-inline: auto;
  padding: var(--hm-section-gap) var(--hm-gutter);
  scroll-margin-top: 72px;
}
.home .sec-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
}
.home .sec-split-tight { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.home .sec-split > :first-child { margin: 0; }
.home .sec-split:not(.sec-split-tight) > h2,
.home .sec-split:not(.sec-split-tight) > div > h2 { font-size: clamp(28px, 1.6rem + 1.6vw, 44px); }
.home .sec-intro,
.home .answer {
  margin: 0;
  color: var(--hm-ink-2);
  font-size: var(--hm-fs-lede);
  line-height: 1.6;
  max-width: 48ch;
}
.home .answer { font-size: 17px; max-width: var(--hm-measure); }
.home .sec-split + .card,
.home .sec-split + .triptych,
.home .sec-split + .mod-grid,
.home .sec-split + p { margin-top: clamp(32px, 4vw, 56px); }
.home .sec-split .sec-actions { margin-top: 24px; }

/* Headings that sit directly in a section, not in a card (the ZH Network
   Tracker section lists two ways in as plain h3 + p pairs where the EN
   page has the triptych). Before R1b they sat flush against the card. */
.home .sec > h3 { margin: clamp(32px, 4vw, 48px) 0 10px; font-size: clamp(22px, 1.2rem + .6vw, 28px); }
.home .sec > h3 + p { margin: 0; max-width: var(--hm-measure); color: var(--hm-ink-2); line-height: 1.65; }

/* ---------------------------------------------------------------
   3. Hero: the product is the hero
   --------------------------------------------------------------- */
.home .hero {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 0;
  margin-top: -72px; /* under the transparent sticky header */
  padding: calc(72px + clamp(40px, 7vw, 104px)) var(--hm-gutter) clamp(56px, 8vw, 120px);
  overflow: clip;
  background: var(--hm-hero-grad);
  isolation: isolate;
}
/* Faint grain over the gradient (DESIGN.md "Imagery"). */
.home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--hm-grain-opacity, .06);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.home .hero-inner {
  max-width: var(--hm-page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.home .hero-stack { position: relative; text-align: left; }
.home .hero-stack > * { margin-left: 0; margin-right: 0; }
.home .hero h1 { max-width: 13ch; }
.home:lang(zh) .hero h1 { max-width: 12em; }
/* Chinese can break between any two characters, and text-wrap: balance
   then split "生活" across the lines. The crimson phrase stays whole. */
.home:lang(zh) .hero h1 .accent { white-space: nowrap; }
.home .hero-lede {
  margin: 24px 0 32px;
  max-width: 44ch;
  color: var(--hm-ink-2);
  font-size: var(--hm-fs-lede);
  line-height: 1.55;
}
.home .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.home .hero-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--hm-hit);
  color: var(--hm-ink);
  font: 500 16px/1 var(--hm-font-sans);
  text-decoration: none;
}
.home .hero-jump span { transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.home .hero-jump:hover { color: var(--hm-accent-ink); text-decoration: none; }
.home .hero-jump:hover span { transform: translateX(4px); }
.home .hero-trust { margin: 20px 0 0; color: var(--hm-ink-2); font-size: var(--hm-fs-small); }
.home .hero-trust + .hero-free { margin-top: 4px; }

.home .hero-demo { display: flex; justify-content: flex-end; }
.home .hero-demo .hd { max-width: 440px; }
/* Reduced motion shows all three finished cards; in the hero they sit
   in one column so the right side does not outgrow the headline. */
.home .hero-demo .hd.hd-still { max-width: 440px; }
.home .hero-demo .hd-still .hd-gallery { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------
   4. Modules: drawn icons, asymmetric (Network Tracker is wide)
   --------------------------------------------------------------- */
.home .mod-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
}
.home .mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r-3);
  background: var(--hm-surface);
  transition: border-color 240ms ease, background-color 240ms ease, transform 240ms cubic-bezier(.34, 1.56, .64, 1);
}
.home .mod:hover { border-color: var(--hm-line-strong); background: var(--hm-surface-2); }
.home .mod:active { transform: rotate(-1deg) scale(.99); }
/* Row one: Fitness, Finance, Network Tracker (wide). Row two:
   Numerology (wide), Debrief, Council. Eight cells, no hole. */
.home .mod:nth-child(3),
.home .mod:nth-child(4) { grid-column: span 2; }
.home .mod:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--hm-accent) 9%, var(--hm-surface)) 0%, var(--hm-surface) 60%); }

.home .mod-num {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--hm-ink-3);
  font: 500 13px/1 var(--hm-font-sans);
  font-variant-numeric: tabular-nums;
}
.home .mod-art {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--hm-r-2);
  background: var(--hm-accent-soft);
}
.home .mod-icon {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--hm-accent-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Hovering or focusing anywhere on the tile redraws its icon (motion.css's
   own .hm-draw-hover rule only reacts to the icon's direct parent). */
@media (prefers-reduced-motion: no-preference) {
  .home .mod:is(:hover, :focus-within) .mod-icon.is-in :is(path, circle) { animation: hm-redraw 800ms cubic-bezier(.65, 0, .35, 1); }
}
.home .mod-body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.home .mod-role { margin: 0; color: var(--hm-ink-3); font: 500 13px/1.3 var(--hm-font-sans); text-transform: none; letter-spacing: 0; }
.home .mod h3 { margin: 0; font-size: clamp(22px, 1.2rem + .6vw, 28px); }
.home .mod-blurb { margin: 0; color: var(--hm-ink-2); line-height: 1.55; max-width: 44ch; }
/* Inline, so a two-line label keeps its arrow on the last line; the hit
   area is the whole tile (::after below), not the text box. */
.home .mod-link {
  display: inline-block;
  width: fit-content;
  padding-top: 12px;
  line-height: 1.4;
  margin-top: auto;
  color: var(--hm-accent-ink);
  font: 500 15px/1 var(--hm-font-sans);
  text-decoration: none;
}
/* The whole tile is the link's hit area; the visible link stays the
   accessible name. */
.home .mod-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.home .mod-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.home .mod-link:focus-visible { outline: none; }
.home .mod-link:focus-visible::after { outline: 2px solid var(--hm-accent-ink); outline-offset: 2px; }
.home .mod-chevron { display: none; }

@media (max-width: 1000px) {
  .home .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .mod:nth-child(4) { grid-column: span 2; }
}

/* ---------------------------------------------------------------
   5. Shared components on this page, in the new shapes
   --------------------------------------------------------------- */
.home .card {
  background: var(--hm-surface);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r-3);
}
.home .parse-card { box-shadow: var(--hm-shadow-float); }
.home .parse-caption { color: var(--hm-ink-3); font-size: 13px; }

.home .brief-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 4.5vw, 72px) 56px;
}
.home .brief {
  padding-top: 24px;
  border-top: 1px solid var(--hm-line-strong);
  scroll-margin-top: 96px;
}
.home .brief > h2 { margin: 0 0 16px; font-size: clamp(24px, 1.2rem + .8vw, 30px); line-height: 1.15; }
.home .brief .answer { max-width: 52ch; font-size: 16px; }
@media (max-width: 760px) {
  .home .brief-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .home .brief .crop-wide { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home .brief .crop-wide .parse-arrow-inline { transform: rotate(90deg); }
}

.home .app-shot { margin: 24px 0 0; padding: 12px; }
.home .app-shot img { display: block; width: 100%; height: auto; border-radius: var(--hm-r-2); }
.home .app-shot figcaption { margin-top: 12px; color: var(--hm-ink-3); font-size: 13px; }
.home .app-shot .shot-link { display: block; border-radius: var(--hm-r-2); }

/* "How to start": the conversion panel. */
.home .sec-dark {
  max-width: var(--hm-page-max);
  margin: clamp(40px, 5vw, 72px) auto;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px);
  border: 1px solid var(--hm-line-strong);
  border-radius: var(--hm-r-3);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--hm-accent) 14%, transparent) 0%, transparent 60%),
    var(--hm-surface);
}
.home .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.home .steps li { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--hm-line-strong); }
.home .step-n { color: var(--hm-accent); font: 700 34px/1 var(--hm-font-display); font-variant-numeric: tabular-nums; }
.home .steps h3 { margin: 0; font-size: 22px; }
.home .steps p { color: var(--hm-ink-2); line-height: 1.55; }
.home .steps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 32px;
  border-top: 1px solid var(--hm-line);
}
.home .steps-trust { margin: 0 0 0 auto; color: var(--hm-ink-3); font: 500 13px/1.4 var(--hm-font-sans); letter-spacing: 0; }

/* FAQ: native <details>, animated by script.js. */
.home .faq-list { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--hm-line); }
.home .faq-item { border-bottom: 1px solid var(--hm-line); }
.home .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 0;
  color: var(--hm-ink);
  font: 600 18px/1.35 var(--hm-font-sans);
  list-style: none;
  cursor: pointer;
}
.home .faq-item summary::-webkit-details-marker { display: none; }
.home .faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--hm-accent-ink);
  border-bottom: 2px solid var(--hm-accent-ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.home .faq-item[open] summary::after { transform: translateY(3px) rotate(225deg); }
.home .faq-item summary:hover { color: var(--hm-accent-ink); }
.home .faq-item > :not(summary) { margin: 0 0 20px; color: var(--hm-ink-2); line-height: 1.65; max-width: var(--hm-measure); }

/* The request-access form: inputs in the new field style. */
.home .contact-form input,
.home .contact-form select,
.home .contact-form textarea {
  border-radius: var(--hm-r-2);
  border-color: var(--hm-line-field);
  background: var(--hm-bg);
  color: var(--hm-ink);
  font-family: var(--hm-font-sans);
}
.home .contact-form input:focus-visible,
.home .contact-form select:focus-visible,
.home .contact-form textarea:focus-visible { outline: 2px solid var(--hm-accent-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------
   6. Phones: the sticky CTA (chrome.js shows it after the hero)
   --------------------------------------------------------------- */
.hm-sticky-cta { display: none; }
@media (max-width: 700px) {
  .hm-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--hm-z-sticky);
    padding: 12px var(--hm-gutter) calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--hm-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hm-line);
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease, visibility 0s linear 240ms;
  }
  .hm-sticky-cta.is-shown {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease, visibility 0s;
  }
  .hm-sticky-cta .btn-cta { width: 100%; }
  /* The WhatsApp button rides above the bar while it shows. */
  body.home:has(.hm-sticky-cta.is-shown) .whatsapp-fab { transform: translateY(-76px); }
}

/* ---------------------------------------------------------------
   7. Narrow layouts
   --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .home .sec-split,
  .home .sec-split-tight { grid-template-columns: minmax(0, 1fr); }
  .home .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home .steps-trust { margin-left: 0; width: 100%; }
}
@media (max-width: 860px) {
  .home .hero { margin-top: -60px; padding-top: calc(60px + 40px); }
  .home .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .home .hero-demo { justify-content: flex-start; }
  .home .hero-demo .hd { max-width: 520px; }
}
@media (max-width: 700px) {
  /* Bigger than the token's 40 px floor on phones, so the H1, not the
     lede under it, is the largest paint (LCP), as the brief requires. */
  .home .hero h1 { font-size: clamp(48px, 13.5vw, 60px); }
  /* Chinese keeps "生活生态系统。" (seven full-width glyphs) on one line,
     so its size is set by that phrase fitting a 343 px column. */
  .home:lang(zh) .hero h1 { font-size: clamp(36px, 11vw, 60px); }
  .home .hero-actions { flex-direction: column; align-items: stretch; }
  .home .hero-actions .btn-cta-lg { width: 100%; }
  .home .hero-jump { justify-content: center; }

  /* Six tiles become six list rows: icon, text, whole row tappable. */
  .home .mod-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home .mod:nth-child(n) { grid-column: auto; }
  .home .mod {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 16px;
    padding: 16px;
  }
  .home .mod-art { width: 48px; height: 48px; }
  .home .mod-icon { width: 28px; height: 28px; }
  .home .mod-num { display: none; }
  .home .mod-body { gap: 2px; }
  .home .mod h3 { font-size: 18px; }
  .home .mod-blurb {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
  }
  .home .mod-link { position: static; min-height: 0; margin: 0; color: transparent; font-size: 0; }
  .home .mod-chevron { display: block; justify-self: end; color: var(--hm-accent-ink); font-size: 22px; line-height: 1; }

  .home .steps-foot { flex-direction: column; align-items: stretch; }
  .home .steps-foot .btn-cta { width: 100%; }
}

/* ---------------------------------------------------------------
   8. Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home .mod,
  .home .hero-jump span,
  .home .faq-item summary::after,
  .hm-sticky-cta,
  .hm-sticky-cta.is-shown { transition: opacity 150ms linear; }
  .home .mod:active,
  .home .hero-jump:hover span { transform: none; }
  .hm-sticky-cta { transform: none; }
}