:root {
  --green: #2D7D46;
  --green-dark: #246a3a;
  --green-soft: #E8F5EC;
  --green-mid: #D4EDDC;
  --green-glow: rgba(45,125,70,0.12);
  --black: #111111;
  --charcoal: #1a1a1a;
  --text: #1a1a1a;
  --text-2: #555555;
  --text-3: #777777;
  --muted: #999999;
  --line: #EAEAEA;
  --bg: #FFFFFF;
  --stage: #FAFAFA;
  --card: #FFFFFF;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 14px;
  --radius-xl: 32px;
  --shadow: 0 4px 24px rgba(17,17,17,0.04);
  --shadow-md: 0 8px 32px rgba(17,17,17,0.06);
  --shadow-hover: 0 16px 40px rgba(45,125,70,0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --max: 1120px;
  --header-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.wrap { width: min(100% - 48px, var(--max)); margin-inline: auto; }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 10px;
  object-fit: cover; background: #f3f3f3;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 15px; font-weight: 700; color: var(--charcoal); letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; }

.nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-menu a {
  position: relative;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav-menu a:hover { color: var(--charcoal); background: var(--stage); }
.nav-menu a.active { color: var(--green); font-weight: 600; }
.nav-menu a.active::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--green);
}
.nav-resource { position: relative; }
.nav-resource > summary {
  display: flex; align-items: center; gap: 4px; list-style: none;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: color .2s, background .2s;
}
.nav-resource > summary::-webkit-details-marker { display: none; }
.nav-resource > summary:hover { color: var(--charcoal); background: var(--stage); }
.nav-resource > summary > svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-resource[open] > summary > svg { transform: rotate(180deg); }
.nav-resource-panel {
  position: absolute; top: calc(100% + 8px); left: -18px; z-index: 80;
  width: 190px; padding: 10px; background: #fff; border-radius: 12px;
  box-shadow: 0 14px 42px -16px rgba(26, 45, 34, .28);
}
.nav-resource-panel a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; padding: 10px 11px; border-radius: 8px;
}
.nav-resource-panel a > svg { width: 15px; height: 15px; color: var(--muted); }

.btn-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--black); color: #fff;
  border: none; border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.btn-download:hover { background: #222; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.btn-download svg { width: 14px; height: 14px; }

.menu-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--charcoal);
  position: relative;
}
.menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--charcoal);
}
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after { top: 5px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 12px 24px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  border: none; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--green); color: #fff;
  box-shadow: 0 6px 18px rgba(45,125,70,0.22);
}
.btn-primary:hover { background: var(--green-dark); box-shadow: 0 10px 24px rgba(45,125,70,0.28); transform: translateY(-1px); }
.btn-secondary {
  background: #fff; color: var(--charcoal);
  border: 1px solid var(--line);
}
.btn-secondary:hover { border-color: #ccc; background: var(--stage); }
.btn-ghost-dark {
  background: transparent; color: var(--charcoal);
  border: 1px solid rgba(0,0,0,0.12);
}
.btn-ghost-dark:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ── Reveal ── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }

/* ── Hero (WorkBuddy-style) ── */
.hero {
  position: relative;
  padding: 48px 0 20px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: 0.5;
}
.blob-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(45,125,70,0.20), transparent 70%);
  top: -160px; right: -40px;
}
.blob-2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(45,125,70,0.08), transparent 70%);
  bottom: -60px; left: -60px;
}
.blob-3 { display: none; }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: center;
}
.hero-brand-row {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.hero-brand-row .hb-mark {
  width: 28px; height: 28px; border-radius: 8px;
  object-fit: cover;
}
.hero-brand-row .hb-name {
  font-size: 15px; font-weight: 750; color: var(--charcoal);
  letter-spacing: -0.01em;
}
.hero-brand-row .hb-sep {
  width: 1px; height: 14px; background: var(--line);
}
.hero-brand-row .hb-tag {
  font-size: 13px; font-weight: 550; color: var(--text-3);
}
.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 4.2vw, 44px);
  font-weight: 780; letter-spacing: -0.035em; line-height: 1.18;
  color: var(--charcoal);
}
.hero h1 .accent {
  color: var(--green);
}
.hero-sub {
  margin: 0 0 18px;
  font-size: 15.5px; color: var(--text-2); line-height: 1.75;
  max-width: 460px;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #EAF7EF;
  color: var(--green-dark);
  border: 1px solid rgba(45,125,70,0.14);
  font-size: 13px; font-weight: 650;
  padding: 8px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.hero-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.hero-ctas .btn svg { width: 16px; height: 16px; }
.hero-detail-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 550; color: var(--text-3);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.hero-detail-link:hover { color: var(--green); border-color: var(--green); }

/* Demo / video frame */
.hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 340px;
  padding: 8px 8px 28px;
}
.demo-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 16px 48px rgba(17,17,17,0.08), 0 2px 8px rgba(17,17,17,0.04);
  padding: 18px;
}
.demo-dash {
  position: relative;
  border: 1.5px dashed #C9C9C9;
  border-radius: 18px;
  background: linear-gradient(180deg, #FAFCFA 0%, #F3F6F4 100%);
  min-height: 280px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.demo-tag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 650;
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.demo-ui {
  flex: 1;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0;
  padding: 28px 16px 16px;
  min-height: 220px;
}
.demo-side {
  background: rgba(255,255,255,0.7);
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(0,0,0,0.04);
  border-right: none;
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.demo-side .dotline {
  height: 8px; border-radius: 4px; background: #E4EBE6;
}
.demo-side .dotline.s { width: 60%; }
.demo-side .dotline.m { width: 80%; }
.demo-main {
  background: #fff;
  border-radius: 0 12px 12px 0;
  border: 1px solid rgba(0,0,0,0.05);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.demo-main .bar {
  height: 10px; border-radius: 5px; background: #E8F0EA; width: 42%;
}
.demo-main .row {
  height: 28px; border-radius: 8px; background: #F6F8F6;
  border: 1px solid #EEF1EE;
}
.demo-main .row.w2 { width: 88%; }
.demo-main .row.w3 { width: 72%; }
.demo-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.demo-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(45,125,70,0.92);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(45,125,70,0.35);
  backdrop-filter: blur(4px);
}
.demo-play-btn svg { width: 26px; height: 26px; margin-left: 3px; }
.demo-caption {
  text-align: center;
  font-size: 12px; font-weight: 550; color: var(--muted);
  padding: 10px 8px 4px;
  letter-spacing: 0.04em;
}
.demo-mascot {
  position: absolute;
  right: -6px; bottom: -10px;
  width: 96px; height: 96px;
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(17,17,17,0.12));
  pointer-events: none;
}
.scroll-cue {
  display: flex; justify-content: center;
  padding: 8px 0 4px;
  color: var(--muted);
}
.scroll-cue svg {
  width: 22px; height: 22px;
  animation: bounceY 1.8s ease-in-out infinite;
}
@keyframes bounceY {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ── Product intro (认识小黑) ── */
.intro {
  padding: 12px 0 28px;
}
.intro-stage {
  background: #F5F5F5;
  border-radius: var(--radius-xl);
  padding: 40px 36px 36px;
  border: 1px solid rgba(0,0,0,0.03);
}
.intro-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.intro-brand {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.intro-brand img {
  width: 28px; height: 28px; border-radius: 8px;
}
.intro-brand .ib-name {
  font-size: 15px; font-weight: 750; color: var(--charcoal);
}
.intro-brand .ib-sub {
  font-size: 13px; font-weight: 550; color: var(--text-3);
  padding-left: 8px; border-left: 1px solid #ddd; margin-left: 2px;
}
.intro-head h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 750; letter-spacing: -0.02em; color: var(--charcoal);
}
.intro-head p {
  margin: 0;
  font-size: 15px; color: var(--text-2); line-height: 1.7;
}
.intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.intro-col {
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
  align-items: center;
}
.intro-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(17,17,17,0.05);
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.intro-col h3 {
  margin: 4px 0 0;
  font-size: 18px; font-weight: 750; color: var(--charcoal);
  letter-spacing: -0.01em;
}
.intro-col p {
  margin: 0;
  font-size: 13.5px; color: var(--text-3); line-height: 1.6;
  max-width: 260px;
}

/* CSS mock: report UI */
.iv-report { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.iv-report .hd {
  display: flex; align-items: center; gap: 8px;
}
.iv-report .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #D4EDDC, #2D7D46);
}
.iv-report .ht {
  height: 8px; width: 48%; border-radius: 4px; background: #E8EEE9;
}
.iv-report .block {
  flex: 1; border-radius: 10px; background: #F7FAF8;
  border: 1px solid #EEF2EF; padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.iv-report .ln { height: 6px; border-radius: 3px; background: #E0E8E2; }
.iv-report .ln.a { width: 90%; }
.iv-report .ln.b { width: 70%; }
.iv-report .ln.c { width: 55%; background: #C8DCCF; }
.iv-report .chip {
  align-self: flex-start;
  margin-top: auto;
  font-size: 10px; font-weight: 650; color: var(--green);
  background: var(--green-soft); padding: 3px 8px; border-radius: 999px;
}

/* CSS mock: timeline */
.iv-time { padding: 16px 18px; display: flex; flex-direction: column; gap: 0; position: relative; }
.iv-time::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px;
  width: 2px; background: #E0EBE3;
}
.iv-time .item {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start; padding: 10px 0; position: relative;
}
.iv-time .n {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 10px; font-weight: 750;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px #fff;
}
.iv-time .n.alt { background: #fff; color: var(--green); border: 1.5px solid var(--green-mid); }
.iv-time .txt { padding-top: 2px; }
.iv-time .t1 { height: 7px; width: 70%; border-radius: 3px; background: #1a1a1a; opacity: 0.75; margin-bottom: 5px; }
.iv-time .t2 { height: 5px; width: 90%; border-radius: 3px; background: #D5DDD7; }

/* CSS mock: multi-end */
.iv-multi {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 12px; height: 100%;
}
.iv-multi .dev {
  background: #F7FAF8; border: 1px solid #E8EEE9; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.iv-multi .desk { width: 78px; height: 56px; }
.iv-multi .desk .scr {
  width: 62px; height: 38px; border-radius: 4px; background: #fff;
  border: 1px solid #DCE4DE; margin-bottom: 4px;
}
.iv-multi .desk .base { width: 40px; height: 3px; border-radius: 2px; background: #C5D0C8; }
.iv-multi .phone {
  width: 32px; height: 52px; border-radius: 6px; background: #fff;
  border: 1.5px solid #C5D0C8; position: relative;
}
.iv-multi .phone::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 2px; border-radius: 1px; background: #C5D0C8;
}
.iv-multi .hub {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, #E8F5EC, #2D7D46);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 750;
  box-shadow: 0 4px 12px rgba(45,125,70,0.25);
}

/* ── Activity cards (refined invite-card style) ── */
.activities {
  padding: 12px 0 56px;
}
.act-stage {
  background: transparent;
  border-radius: 0;
  padding: 12px 0 0;
  border: none;
  position: relative;
  overflow: visible;
}
.act-stage::before { display: none; }
.act-head {
  text-align: center; max-width: 560px; margin: 0 auto 28px;
}
.act-head .eyebrow {
  font-size: 12px; font-weight: 650; color: var(--green);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
}
.act-head h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 750; letter-spacing: -0.02em;
}
.act-head p { margin: 0; font-size: 15px; color: var(--text-2); }

.dir-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dir-card {
  --mx: 50%; --my: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 28px;
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
  text-align: left;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(17,17,17,0.05);
}
.dir-card::before {
  content: "";
  position: absolute; top: -40px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(45,125,70,0.14), transparent 68%);
  pointer-events: none;
}
.dir-card::after { display: none; }
.dir-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(45,125,70,0.12);
  border-color: rgba(45,125,70,0.18);
}

/* Illustration zone */
.dir-illu {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-bottom: 22px;
  position: relative; z-index: 1;
  min-height: 88px;
}
.dir-tile {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dir-tile.soft {
  background: #EAF6EE;
}
.dir-tile.outline {
  background: #fff;
  border: 1.5px solid #E6EBE7;
}
.dir-dash {
  width: 28px; height: 0;
  border-top: 1.5px dashed #C5CFC8;
  margin: 0 4px;
  flex-shrink: 0;
}
.dir-face {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.dir-face svg { width: 20px; height: 20px; }
.dir-plus-cluster {
  display: flex; align-items: center; justify-content: center;
  position: relative; width: 44px; height: 44px;
}
.dir-plus-cluster .c {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #D4EDDC;
}
.dir-plus-cluster .c:nth-child(1) { top: 2px; left: 4px; }
.dir-plus-cluster .c:nth-child(2) { top: 2px; right: 4px; }
.dir-plus-cluster .c:nth-child(3) { bottom: 4px; left: 13px; }
.dir-plus-cluster .plus {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1;
}

.dir-card h3 {
  margin: 0 0 8px;
  font-size: 20px; font-weight: 750; color: var(--charcoal);
  letter-spacing: -0.015em;
  position: relative; z-index: 1;
}
.dir-sub {
  margin: 0 0 18px;
  font-size: 13.5px; color: var(--text-2); line-height: 1.65;
  position: relative; z-index: 1;
}
.dir-checks {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
  position: relative; z-index: 1;
}
.dir-checks li {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: start;
  font-size: 13.5px; color: var(--charcoal); line-height: 1.45;
  font-weight: 500;
}
.dir-checks .ck {
  width: 22px; height: 22px; border-radius: 7px;
  background: #E8F5EC;
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
}
.dir-checks .ck svg { width: 12px; height: 12px; }
.dir-card .btn { display: none; }

/* legacy reward helpers unused but keep harmless */
.dir-ico, .dir-reward, .dir-blurb { display: none; }

/* ── Deep dive strips ── */
.details { padding: 8px 0 24px; }
.detail {
  scroll-margin-top: calc(var(--header-h) + 20px);
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.detail:last-of-type { border-bottom: none; }
.detail-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.detail-inner.flip .detail-copy { order: 2; }
.detail-inner.flip .detail-visual { order: 1; }

.detail-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 650; color: var(--green);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 14px;
}
.detail-label .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--green-soft); font-size: 12px; font-weight: 750;
  color: var(--green-dark);
}
.detail-label .hair {
  width: 24px; height: 1px; background: var(--green-mid);
}
.detail h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 750; letter-spacing: -0.025em; line-height: 1.22;
}
.detail .lead {
  margin: 0 0 20px;
  font-size: 15.5px; color: var(--text-2); line-height: 1.75;
  max-width: 480px;
}
.reward-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.reward-chips .chip {
  background: var(--green-soft); color: var(--green-dark);
  border: 1px solid var(--green-mid);
  font-size: 13px; font-weight: 650;
  padding: 8px 14px; border-radius: 999px;
}

.timeline {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 0 28px; padding: 0; list-style: none;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute; left: 13px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.timeline li {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  align-items: start;
  padding: 10px 0;
  position: relative;
}
.timeline .n {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--green);
  border: 1.5px solid var(--green-mid);
  font-size: 12px; font-weight: 750;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.timeline li:hover .n {
  background: var(--green); color: #fff; border-color: var(--green);
}
.timeline h4 { margin: 0 0 3px; font-size: 15px; font-weight: 650; }
.timeline p { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.55; }

/* Visual panels (illustration cards — NO forms) */
.visual-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.visual-card::before {
  content: "";
  position: absolute; top: -40px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--green-glow), transparent 70%);
  pointer-events: none;
}
.visual-illust {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  min-height: 140px;
}
.visual-illust svg.scene { width: 100%; max-width: 280px; height: auto; }
.visual-card h3 {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 700; color: var(--charcoal);
}
.visual-card .panel-sub {
  margin: 0 0 20px;
  font-size: 13.5px; color: var(--text-3); line-height: 1.55;
}

.growth-meter {
  background: var(--stage);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.gm-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: 13px;
}
.gm-top strong { font-weight: 700; }
.gm-top span { color: var(--muted); font-weight: 500; }
.gm-bar {
  height: 8px; border-radius: 999px; background: #e8e8e8; overflow: hidden; margin-bottom: 16px;
}
.gm-bar i {
  display: block; height: 100%; width: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #4a9e62);
}
.gm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.gm-stats > div {
  text-align: center;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  border: 1px solid var(--line);
}
.gm-stats strong {
  display: block; font-size: 18px; font-weight: 750; color: var(--green);
  letter-spacing: -0.02em;
}
.gm-stats span { font-size: 11px; color: var(--muted); }

.feature-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 24px;
}
.feature-mini {
  background: var(--stage);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
}
.feature-mini h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 650; }
.feature-mini p { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }

.benefit-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.benefit-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--text-2); line-height: 1.5;
}
.benefit-item .check {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.benefit-item .check svg { width: 12px; height: 12px; }

/* ── FAQ ── */
.faq-section {
  padding: 56px 0 72px;
  background: linear-gradient(180deg, #fff 0%, var(--stage) 100%);
}
.section-head {
  text-align: center; max-width: 560px; margin: 0 auto 36px;
}
.section-head .kicker {
  font-size: 12px; font-weight: 650; color: var(--green);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px;
}
.section-head h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 750; letter-spacing: -0.02em;
}
.section-head p { margin: 0; font-size: 15px; color: var(--text-2); }

.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item.open {
  border-color: rgba(45,125,70,0.25);
  box-shadow: 0 4px 20px rgba(45,125,70,0.06);
}
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 650; color: var(--charcoal); text-align: left;
}
.faq-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--stage); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .25s, background .2s, color .2s;
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--green-soft); color: var(--green);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  padding: 0 20px;
  font-size: 14px; color: var(--text-2); line-height: 1.7;
}
.faq-item.open .faq-a-inner { padding-bottom: 18px; }

/* ── Footer ── */
.site-footer {
  position: relative;
  background: var(--charcoal);
  color: rgba(255,255,255,0.72);
  padding: 56px 0 28px;
  overflow: hidden;
}
.site-footer .watermark {
  position: absolute; right: -2%; top: 10%;
  font-size: clamp(80px, 14vw, 160px); font-weight: 800;
  color: rgba(255,255,255,0.03); letter-spacing: -0.04em;
  pointer-events: none; user-select: none; line-height: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  position: relative;
}
.footer-brand-name {
  font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px;
}
.footer-brand-desc {
  font-size: 13px; line-height: 1.65; margin: 0 0 18px;
  max-width: 280px; color: rgba(255,255,255,0.55);
}
.footer-col h4 {
  margin: 0 0 14px; font-size: 13px; font-weight: 650; color: #fff;
  letter-spacing: 0.02em;
}
.footer-col a {
  display: block; font-size: 13px; color: rgba(255,255,255,0.5);
  padding: 4px 0; transition: color .2s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.footer-bottom a:hover { color: rgba(255,255,255,0.8); }
.site-footer .btn-download {
  background: #fff; color: var(--charcoal);
}
.site-footer .btn-download:hover { background: #f0f0f0; box-shadow: none; }

/* ── Mobile jump chips ── */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 8px; justify-content: center;
}
.mobile-cta-bar a {
  flex: 1; text-align: center;
  padding: 10px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 650;
  background: var(--stage); color: var(--charcoal);
  border: 1px solid var(--line);
  transition: background .2s, color .2s;
}
.mobile-cta-bar a:hover { background: var(--green-soft); color: var(--green); border-color: var(--green-mid); }
.mobile-cta-bar a.primary {
  background: var(--green); color: #fff; border-color: var(--green);
}

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17,17,17,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 32px 28px;
  max-width: 400px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.open .modal { transform: none; }
.modal-ico {
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.modal-ico svg { width: 28px; height: 28px; }
.modal h3 {
  margin: 0 0 8px;
  font-size: 20px; font-weight: 720; letter-spacing: -0.02em;
}
.modal p {
  margin: 0 0 24px;
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}
.modal-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: var(--stage); cursor: pointer;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--line); color: var(--charcoal); }
.modal { position: relative; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--charcoal); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 550;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 300; white-space: nowrap; max-width: calc(100% - 40px);
  text-align: center;
}
.toast.show {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
body.has-sticky-cta .toast { bottom: 88px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-brand-row { justify-content: center; }
  .hero-detail-link { margin-inline: auto; }
  .hero-visual { min-height: auto; padding-bottom: 36px; }
  .demo-mascot { right: 8px; bottom: -6px; width: 80px; height: 80px; }
  .intro-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .intro-stage { padding: 28px 20px 24px; }
  .dir-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .detail-inner, .detail-inner.flip {
    grid-template-columns: 1fr; gap: 32px;
  }
  .detail-inner.flip .detail-copy,
  .detail-inner.flip .detail-visual { order: unset; }
  .feature-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .detail .lead { max-width: none; }
}
@media (max-width: 760px) {
  .nav-menu {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 12px 16px 16px; gap: 4px;
    align-items: stretch;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 12px 14px; }
  .nav-resource > summary { padding: 12px 14px; }
  .nav-resource-panel {
    position: static; width: auto; margin: 2px 0 5px; padding: 4px 8px;
    border-left: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .nav-resource-panel a { min-height: 42px; padding: 10px 12px; }
  .nav-menu a.active::after { display: none; }
  .nav-menu a.active { background: var(--green-soft); }
  .menu-toggle { display: inline-flex; }
  .brand-sub { display: none; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 72px; }
  .hero { padding-top: 36px; }
  .detail { padding: 44px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .dir-card:hover { transform: none; box-shadow: 0 8px 32px rgba(17,17,17,0.05); }
  .blob { opacity: 0.3; filter: blur(48px); }
}
@media (max-width: 480px) {
  .btn-download span.dl-label { display: none; }
  .btn-download { padding: 9px 12px; border-radius: 12px; }
  .wrap { width: min(100% - 28px, var(--max)); }
  .gm-stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .mascot-card { padding: 22px 18px; }
  .toast { white-space: normal; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Refine the supplied document in place. The original section layout remains authoritative. */
#introTitle span{display:inline-block}.btn .external-icon{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
:root{--green:#16723c;--green-dark:#0f5b2f;--green-soft:#edf5ef;--green-mid:#d4e6d9;--green-glow:#16723c0a;--black:#252a27;--charcoal:#252a27;--text:#252a27;--text-2:#536056;--text-3:#626b65;--muted:#69766d;--line:#e5e9e5;--stage:#f6f7f5;--radius:14px;--radius-lg:20px;--radius-sm:10px;--radius-xl:20px;--font:'Noto Sans SC Variable','PingFang SC','Microsoft YaHei',sans-serif;--shadow:0 14px 45px -24px #233b2a30;--shadow-md:0 16px 48px -24px #233b2a38;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
body{overflow-x:clip}html{scroll-padding-top:86px}button,input,textarea{font:inherit}a,button,summary,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:5px}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}::selection{background:#d8ecd9;color:#164c2a}textarea{caret-color:var(--green)}::-webkit-scrollbar{width:8px;height:6px}::-webkit-scrollbar-thumb{background:#acbbae;border-radius:9px}::-webkit-scrollbar-track{background:#f5f6f3}.skip-link{position:fixed;top:-90px;left:15px;z-index:150;background:var(--green);color:#fff;padding:12px 18px;border-radius:8px}.skip-link:focus{top:12px}
.site-header{background:#fffffff5;backdrop-filter:blur(12px);border-bottom-color:#edf0ec}.brand-logo{background:#fff;object-fit:contain}.brand-name{font-weight:650}.nav-menu a{font-size:13px}.btn{min-height:46px;font-size:14px;font-weight:550}.btn-primary{box-shadow:none}.btn-primary:hover{box-shadow:0 8px 20px -12px #174e2b55;transform:translateY(-2px)}.btn-download{min-height:39px;font-weight:550}.reveal,.reveal.in{opacity:1;transform:none;transition:none}.blob-1{opacity:.22}.blob-2{opacity:.12}.hero{padding:58px 0 38px}.hero-grid{gap:44px}.hero h1{font-size:40px;font-weight:620;line-height:1.35;letter-spacing:-.035em}.hero h1 .accent{font-size:35px}.hero-sub{font-size:14px;line-height:1.95;margin-bottom:18px;max-width:455px}.hero-brand-row{margin-bottom:19px}.hero-pill{font-size:11px;font-weight:450;padding:6px 12px;background:#f1f6ef;color:var(--green)}.status-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:var(--green)}.hero-ctas{margin-top:22px}.hero-detail-link{font-size:11px;min-height:40px;align-items:center}.hero-visual{padding:4px 0 20px}.demo-stage{padding:0;max-width:530px;border-radius:16px;box-shadow:0 22px 50px -22px #24342a33;overflow:hidden;animation:preview-arrive .8s var(--ease)}@keyframes preview-arrive{from{opacity:.7;transform:translateY(14px)}to{opacity:1;transform:none}}
.preview-titlebar{display:flex;align-items:center;gap:13px;background:#f2f4f1;padding:14px 17px;font-size:11px;color:#4b5a4e}.preview-titlebar>small{margin-left:auto;font-size:9px}.preview-dots{display:flex;gap:5px}.preview-dots i{width:6px;height:6px;background:#b8c8b8;border-radius:50%}.preview-dots i:nth-child(2){background:#d2dbcf}.preview-dots i:last-child{background:#7f9c81}.preview-app{display:grid;grid-template-columns:75px 1fr;min-height:283px}.preview-side{background:#f9faf7;font-size:9px;padding:17px 7px;color:var(--muted)}.preview-side img{width:22px;height:28px;object-fit:contain;margin:0 0 19px 8px}.preview-side>span{display:block;padding:8px 6px;border-radius:5px;margin-top:4px}.preview-side .current{background:#e7efe6;color:var(--green)}.preview-screens{min-width:0;padding:23px 20px}.preview-heading small{font-size:10px;color:var(--muted)}.preview-heading h3{font-size:16px;font-weight:550;line-height:1.6;margin:6px 0 0;letter-spacing:-.025em}.work-list{margin-top:19px}.work-list>div{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #edf0eb}.work-list time{font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}.work-list b{font-size:11px;font-weight:500}.work-list small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.work-list em{font-size:8px;font-style:normal;color:var(--green);margin-left:auto;white-space:nowrap}.preview-note{font-size:9px;color:var(--muted);margin:13px 0 0;line-height:1.8}.preview-tabs{display:flex;justify-content:flex-end;gap:4px;background:#f7f9f5;padding:8px 13px}.preview-tabs button{background:none;border:0;border-radius:6px;color:var(--text-3);font-size:10px;padding:8px 12px;min-height:35px;cursor:pointer;transition:background .2s}.preview-tabs [aria-selected=true]{background:#e6eee4;color:var(--green)}.preview-tabs button:hover{background:#edf2e9}.report-preview{margin-top:17px}.report-preview h4{font-size:12px;font-weight:550;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.report-preview h4 small{font-size:9px;color:var(--muted);font-weight:400}.report-preview h5{font-size:10px;font-weight:550;margin:10px 0 3px}.report-preview p{font-size:10px;margin:0;color:var(--text-3);line-height:1.7}.chat-preview{margin-top:20px;font-size:11px;line-height:1.9}.chat-preview>p{margin:0 0 17px 22px;background:#edf4e9;color:#365a3d;padding:10px 12px;border-radius:10px 10px 2px 10px}.chat-preview>div{display:flex;align-items:flex-start;gap:9px}.chat-preview img{width:22px;height:27px;object-fit:contain}.chat-preview>div p{margin:0;color:var(--text-2)}.chat-preview span{display:inline-block;padding-top:4px}
.intro{padding:12px 0 40px}.intro-stage{border:0;background:#f5f6f3;padding:38px 34px 32px;border-radius:22px}.intro-head{margin-bottom:27px}.intro-head h2{font-size:27px;font-weight:600;line-height:1.5}.intro-head p{font-size:13px;line-height:1.9}.intro-brand .ib-name{font-weight:600}.intro-brand .ib-sub{font-weight:400;font-size:11px}.intro-grid{gap:19px}.intro-visual{aspect-ratio:4/2.75;border:0;border-radius:12px;box-shadow:0 8px 24px -18px #293b3033;text-align:left}.intro-col h3{font-size:18px;font-weight:600;margin-top:2px}.intro-col>p{font-size:12px;line-height:1.8;max-width:275px}.intro-report,.intro-assistant{padding:20px;display:flex;flex-direction:column;height:100%}.mini-top{display:flex;align-items:center;gap:7px;font-size:10px}.mini-top img{width:19px;height:23px;object-fit:contain}.mini-top small{margin-left:auto;font-size:9px;color:var(--muted)}.intro-report h4{font-size:12px;font-weight:550;margin:15px 0 13px;line-height:1.7}.intro-report p{font-size:10px;line-height:1.8;margin:4px 0;color:var(--text-3)}.intro-report b{color:var(--text);font-weight:500;margin-right:4px}.mini-chip{font-size:9px;color:var(--green);background:#edf4e9;border-radius:5px;padding:5px 8px;margin-top:auto;align-self:flex-start}.intro-timeline{padding:24px 21px;display:flex;flex-direction:column;justify-content:center;height:100%}.intro-timeline>div{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}.intro-timeline>div:last-child{border-bottom:0}.intro-timeline time{font-size:10px;color:var(--green);font-variant-numeric:tabular-nums}.intro-timeline b{font-size:11px;font-weight:500}.intro-timeline small{display:block;font-size:9px;color:var(--text-3);margin-top:4px}.mini-question{align-self:flex-end;background:#edf4e9;color:#375c3f;padding:9px 11px;border-radius:8px 8px 2px 8px;font-size:10px;margin-top:8px}.mini-answer{display:flex;gap:8px;align-items:flex-start;margin-top:19px}.mini-answer img{width:21px;height:26px;object-fit:contain}.mini-answer p{margin:0;font-size:10px;line-height:1.8;color:var(--text-2)}.mini-answer span{color:var(--muted);font-size:9px;display:block;margin-top:6px}
.activities{padding:17px 0 46px}.act-head{margin-bottom:30px}.act-head h2{font-size:29px;font-weight:600;line-height:1.45}.act-head p{font-size:13px;line-height:1.9}.dir-card{border:1px solid #e9eee7;box-shadow:none;border-radius:18px;padding:26px 23px 18px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}.dir-card::before{opacity:.3}.dir-card:hover,.dir-card:focus-within{transform:translateY(-4px);border-color:transparent;box-shadow:0 16px 40px -18px #2c59352e}.dir-illu{margin-bottom:24px;min-height:94px}.dir-tile{width:66px;height:66px;border-radius:16px}.dir-tile.outline{border-width:1px}.dir-card h3{font-weight:600;font-size:19px;line-height:1.5;min-height:29px}.dir-sub{font-size:12px;line-height:1.9;min-height:70px;margin-bottom:17px}.dir-checks{gap:11px;margin-bottom:22px}.dir-checks li{font-weight:400;font-size:12px;grid-template-columns:18px 1fr;gap:8px;line-height:1.7}.dir-checks .ck{width:18px;height:18px;border-radius:5px;margin-top:1px}.dir-checks .ck svg{width:10px;height:10px}.card-entry{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);min-height:46px;padding-top:10px;font-size:12px;font-weight:500;color:var(--green)}.card-entry svg{width:18px;height:18px;transition:transform .2s}.card-entry:hover svg{transform:translateX(4px)}
.details{padding-top:0}.detail{padding:62px 0}.detail-inner{gap:60px}.detail h2{font-size:33px;font-weight:600;line-height:1.35}.detail .lead{font-size:14px;line-height:1.9;max-width:490px}.reward-chips{margin-bottom:24px}.reward-chips .chip{font-size:12px;font-weight:500;padding:7px 12px;border:0}.timeline{margin-bottom:24px}.timeline li{padding:11px 0;gap:13px}.timeline .n{font-weight:500;border-width:1px;font-size:11px}.timeline h4{font-size:14px;font-weight:550;margin-bottom:4px}.timeline p{font-size:12px;line-height:1.8}.visual-card{border:0;background:#f6f7f4;border-radius:18px;padding:27px;box-shadow:none}.visual-card::before{display:none}.visual-card h3{font-size:19px;line-height:1.55;font-weight:600;letter-spacing:-.02em}.visual-card .panel-sub{font-size:12px;line-height:1.9;margin-bottom:17px}.visual-card .btn{font-size:13px;min-height:45px}.visual-card .btn>span{margin-left:2px}.visual-illust{min-height:0}.invite-art{margin:-27px -27px 23px;overflow:hidden;height:180px;border-radius:18px 18px 0 0}.invite-art img{width:100%;height:100%;object-fit:cover;object-position:center}.invite-rewards{display:grid;margin-bottom:15px}.invite-rewards button{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid #e2e8df;background:none;padding:13px 12px;text-align:left;min-height:45px;font-size:12px;cursor:pointer;transition:background .2s}.invite-rewards button[aria-selected=true]{background:white;border-radius:8px;border-bottom-color:transparent;color:var(--green)}.invite-rewards button:hover{background:#eef3e9}.invite-rewards strong{font-weight:550;font-size:16px;color:var(--green);font-variant-numeric:tabular-nums}.reward-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}.reward-preview>span{font-size:10px;color:var(--text-3);max-width:150px}.reward-preview strong{font-size:24px;font-weight:550;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}.reward-preview small{font-size:9px;font-weight:400}.panel-note{font-size:10px;color:var(--text-3);line-height:1.85;margin:10px 0 20px}.feature-row{gap:11px;margin:26px 0}.feature-mini{background:#f5f6f3;padding:15px 12px;border-radius:10px}.feature-mini h4{font-size:13px;font-weight:550;margin-bottom:7px}.feature-mini p{font-size:11px;line-height:1.85}.sprite{background-repeat:no-repeat;background-size:300% 400%;background-position:0 0;aspect-ratio:1;mix-blend-mode:multiply;flex-shrink:0}.sprite.courier{background-image:none}.sprite.graduate{background-image:none}.sprite.celebration{background-image:none}.sprite.reader{background-image:none;background-position:0 33.333333%}.growth-scene{display:grid;grid-template-columns:1.12fr 1fr;gap:15px;align-items:center;min-height:218px;margin:20px 0 10px;isolation:isolate}.growth-scene .sprite{width:100%;max-width:230px}.milestone-days{font-size:11px;color:var(--green);margin:0}.milestone-days strong{font-size:42px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.growth-scene h4{margin:9px 0 8px;font-size:17px;font-weight:550}.growth-scene p:not(.milestone-days){font-size:11px;line-height:1.9;color:var(--text-3);margin:0}.milestone-track{height:3px;background:#dfe7dc;border-radius:2px;overflow:hidden;margin-top:15px}.milestone-track i{display:block;height:100%;width:25%;background:var(--green);transition:width .4s var(--ease)}.milestone-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 17px}.milestone-tabs button{min-height:63px;border:0;border-radius:8px;background:none;color:var(--text-3);cursor:pointer;transition:background .2s,color .2s}.milestone-tabs [aria-selected=true]{background:#fff;color:var(--green)}.milestone-tabs button:hover{background:#edf3e9}.milestone-tabs strong{display:block;font-size:14px;font-weight:550}.milestone-tabs span{display:block;font-size:10px;margin-top:4px}.student-art{display:flex;align-items:center;gap:10px;min-height:197px;justify-content:space-between;background:#edf2e7;border-radius:10px;padding:18px;margin-bottom:22px;isolation:isolate}.student-art>div:first-child{flex:1;position:relative;z-index:1}.student-art span{font-size:9px;color:#53674f}.student-art h4{margin:12px 0 0;font-size:20px;font-weight:550;color:#38583e;line-height:1.5;letter-spacing:-.025em}.student-art .sprite{width:150px;margin-right:-7px}.panel-sub>strong{font-size:17px;font-weight:550;color:var(--green)}.benefit-list{margin:18px 0}.benefit-item{font-size:12px;line-height:1.9;gap:9px}.benefit-item>svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:3px}
.participation-guide{margin-top:22px;padding:20px;background:#f4f6f1;border-radius:12px;font-size:12px}.participation-guide h3{font-size:15px;font-weight:550;margin:0 0 9px}.participation-guide p{font-size:11px;line-height:1.9;color:var(--text-3);margin:8px 0 13px}.participation-guide label{font-size:12px;display:flex;align-items:flex-start;gap:9px;padding:9px 0;line-height:1.8}.participation-guide textarea{display:block;width:100%;resize:vertical;min-height:112px;background:#fff;border:1px solid #dce5d8;border-radius:8px;padding:12px;font-size:12px;line-height:1.9;color:var(--text);margin:7px 0 13px}.participation-guide input{accent-color:var(--green);width:16px;height:16px;flex-shrink:0;margin:3px 0 0}.participation-guide .btn{min-height:42px;font-size:12px}.participation-guide #copy-status{margin-bottom:0;font-size:10px}.section-head h2{font-size:29px;font-weight:600;line-height:1.5}.section-head>p{font-size:13px;line-height:1.9}.faq-item{border-radius:12px}.faq-item.open{box-shadow:none;border-color:#b5ceb9}.faq-q{font-size:14px;font-weight:500;min-height:66px}.faq-a-inner{font-size:12px;line-height:1.95}.faq-icon{background:#f5f7f1}.faq-section{padding:51px 0 65px;background:#fafbf9}.site-footer{padding-top:49px}.footer-brand-desc{color:#b6bdb7;font-size:12px;line-height:1.9}.footer-col a{color:#b6bdb7;font-size:12px;min-height:32px}.footer-bottom{color:#a4aca5;font-size:11px}.footer-brand-name{font-weight:600}.footer-col h4{font-weight:500}.mobile-cta-bar a[aria-current]{background:var(--green);color:white;border-color:var(--green)}.state-changed{animation:state-change .35s var(--ease)}@keyframes state-change{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(min-width:961px) and (max-width:1150px){.hero h1{font-size:36px}.hero h1 .accent{font-size:31px}.hero-grid{gap:30px}.preview-screens{padding:20px 15px}.preview-app{grid-template-columns:67px 1fr}.preview-heading h3{font-size:14px}.work-list em{display:none}.intro-report,.intro-assistant{padding:16px}.intro-report h4{font-size:11px;margin-top:12px}.mini-answer{margin-top:14px}.intro-visual{aspect-ratio:4/3}.detail-inner{gap:38px}.student-art{padding:14px}.student-art .sprite{width:123px}.student-art h4{font-size:18px}.reward-preview{display:block}.reward-preview strong{display:block;margin-top:5px}}
@media(max-width:960px){.hero{padding-top:37px;padding-bottom:22px}.hero h1{font-size:38px}.hero h1 .accent{font-size:33px}.hero-grid{gap:24px}.hero-visual{padding-bottom:15px}.demo-stage{max-width:540px;text-align:left}.hero-pill{margin-top:0}.intro-stage{padding:29px 23px}.intro-head{max-width:560px;margin-bottom:26px}.intro-grid{gap:25px;max-width:400px}.intro-visual{aspect-ratio:4/2.6}.intro-report,.intro-assistant{padding:25px}.intro-report h4{font-size:14px}.intro-report p{font-size:12px}.mini-top{font-size:11px}.mini-chip{font-size:10px}.intro-timeline{padding:25px}.intro-timeline>div{padding:14px 0}.intro-timeline b{font-size:13px}.intro-timeline small{font-size:11px}.intro-timeline time{font-size:11px}.mini-question{font-size:12px}.mini-answer p{font-size:12px}.mini-answer span{font-size:10px}.dir-card{padding:26px;max-width:420px}.dir-sub{min-height:0}.detail-inner,.detail-inner.flip{grid-template-columns:1fr;gap:30px;max-width:650px}.detail-inner.flip .detail-copy,.detail-inner.flip .detail-visual{order:unset}.detail h2{font-size:30px}.detail .lead{max-width:none}.visual-card{max-width:600px;width:100%;justify-self:center;padding:27px}.feature-row{grid-template-columns:repeat(3,1fr)}.student-art .sprite{width:180px}.student-art h4{font-size:24px}.growth-scene{grid-template-columns:1fr 1fr}.growth-scene .sprite{max-width:230px;margin:auto}.detail{padding:48px 0}}
@media(max-width:760px){html{scroll-padding-top:80px}.hero{padding-top:29px}.hero h1{font-size:33px}.hero h1 .accent{font-size:28px}.hero-sub{font-size:13px;margin-bottom:16px}.hero-brand-row{margin-bottom:14px}.hero-ctas{gap:10px;margin-top:18px}.hero-ctas .btn{font-size:13px;padding:11px 19px}.hero-detail-link{font-size:11px}.hero-visual{padding-bottom:13px}.hero-grid{gap:19px}.preview-titlebar{padding:12px 15px;font-size:10px;gap:10px}.preview-titlebar small{font-size:8px}.preview-app{grid-template-columns:64px 1fr;min-height:281px}.preview-screens{padding:19px 14px}.preview-heading h3{font-size:13px}.preview-heading small{font-size:9px}.work-list>div{gap:9px;padding:12px 0}.work-list time{font-size:8px}.work-list b{font-size:10px}.work-list small{font-size:8px}.work-list em{display:none}.preview-side{font-size:8px;padding-inline:5px}.preview-note{font-size:8px}.preview-tabs{padding:6px 10px;gap:2px}.preview-tabs button{font-size:10px;min-height:40px;padding-inline:11px}.report-preview h4{font-size:11px}.chat-preview{font-size:10px;line-height:1.9}.intro{padding-bottom:31px}.intro-stage{border-radius:16px;padding:27px 21px}.intro-head h2{font-size:24px;line-height:1.45}.intro-head p{font-size:12px}.intro-brand{margin-bottom:12px}.intro-grid{gap:28px}.intro-visual{aspect-ratio:4/2.85}.intro-report,.intro-assistant{padding:20px}.intro-report h4{font-size:12px}.intro-report p{font-size:10px}.mini-top{font-size:10px}.intro-timeline{padding:21px}.intro-timeline b{font-size:12px}.intro-timeline small{font-size:10px}.intro-timeline>div{padding:11px 0}.mini-question{font-size:11px}.mini-answer p{font-size:10px}.mini-answer span{font-size:9px}.intro-col>p{font-size:12px;max-width:280px}.intro-col{gap:12px}.intro-col h3{font-size:17px}.activities{padding:10px 0 27px}.act-head{margin-bottom:24px}.act-head h2{font-size:25px}.act-head p{font-size:12px}.dir-grid{gap:16px}.dir-card{border-radius:16px;padding:23px 25px 17px}.dir-card:hover,.dir-card:focus-within{transform:none}.dir-illu{min-height:76px;margin-bottom:19px}.dir-tile{width:61px;height:61px;border-radius:14px}.dir-card h3{font-size:19px}.dir-sub{font-size:12px;line-height:1.9;margin-bottom:17px}.dir-checks li{font-size:12px}.dir-checks{margin-bottom:18px}.detail{padding:38px 0;scroll-margin-top:80px}.detail-inner{gap:25px}.detail h2{font-size:28px}.detail .lead{font-size:13px;line-height:1.95;margin-bottom:17px}.reward-chips{margin-bottom:20px}.reward-chips .chip{font-size:11px}.timeline li{padding:10px 0;gap:11px}.timeline h4{font-size:14px}.timeline p{font-size:12px}.detail-copy>.btn{font-size:13px}.visual-card{padding:23px;border-radius:16px}.visual-card h3{font-size:18px}.visual-card .panel-sub{font-size:12px}.invite-art{margin:-23px -23px 21px;height:170px;border-radius:16px 16px 0 0}.invite-rewards button{font-size:12px;padding:13px 10px}.invite-rewards strong{font-size:15px}.reward-preview{display:block}.reward-preview strong{display:block;font-size:25px;margin-top:5px}.reward-preview>span{font-size:10px}.panel-note{font-size:10px;margin:10px 0 17px}.feature-row{grid-template-columns:1fr;gap:8px;margin:20px 0}.feature-mini{padding:13px 15px}.feature-mini h4{font-size:13px;margin-bottom:5px}.feature-mini p{font-size:12px}.growth-scene{min-height:195px;gap:9px;margin:12px 0}.growth-scene .sprite{max-width:195px}.milestone-days strong{font-size:36px}.growth-scene h4{font-size:16px;margin:8px 0}.growth-scene p:not(.milestone-days){font-size:10px}.milestone-tabs{gap:5px}.milestone-tabs button{min-height:61px}.milestone-tabs strong{font-size:14px}.milestone-tabs span{font-size:9px}.student-art{padding:17px 14px;gap:5px;min-height:170px;margin-bottom:21px}.student-art span{font-size:8px}.student-art h4{font-size:18px;margin-top:10px}.student-art .sprite{width:135px;margin-right:-7px}.benefit-item{font-size:12px}.participation-guide{padding:17px}.participation-guide h3{font-size:14px}.participation-guide textarea{min-height:145px;font-size:12px}.participation-guide label{font-size:11px}.faq-section{padding:37px 0 45px}.section-head{margin-bottom:24px}.section-head h2{font-size:25px}.section-head p{font-size:12px;line-height:1.9}.faq-q{font-size:13px;padding:16px;min-height:63px;gap:10px}.faq-a-inner{font-size:12px;padding-inline:16px}.faq-icon{width:25px;height:25px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 22px}.footer-grid>div:first-child{grid-column:1/-1}.footer-brand-desc{max-width:370px}.footer-col a{min-height:36px}.site-footer{padding:37px 0 27px}.footer-grid{margin-bottom:25px}.footer-bottom{font-size:10px;display:block;padding-top:15px}.mobile-cta-bar{background:#fffffff7;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}.mobile-cta-bar a{font-size:12px;min-height:43px;border-radius:10px}.menu-toggle{min-width:40px}.nav-menu{max-height:calc(100dvh - 64px);overflow:auto}.nav-menu a{min-height:44px}.btn-download span.dl-label{display:inline}.btn-download{font-size:11px;padding:9px 13px;border-radius:999px}.brand-name{font-size:17px}}
@media(max-width:360px){.hero h1{font-size:29px}.hero h1 .accent{font-size:25px}.hero-ctas .btn{font-size:12px;padding:11px 15px}.preview-app{grid-template-columns:51px 1fr;min-height:279px}.preview-screens{padding:18px 10px}.preview-side{padding:16px 3px}.preview-side>span{padding-inline:3px}.preview-heading h3{font-size:12px}.work-list>div{gap:6px}.preview-titlebar{padding-inline:11px;gap:8px}.preview-tabs button{font-size:9px;padding-inline:10px}.intro-stage{padding-inline:18px}.intro-head h2{font-size:22px}.intro-report,.intro-assistant{padding:16px}.intro-visual{aspect-ratio:4/3.25}.mini-top{font-size:9px}.intro-report h4{font-size:11px;margin:12px 0}.mini-chip{font-size:8px}.intro-report p{font-size:10px}.intro-timeline{padding:17px}.intro-timeline b{font-size:11px}.intro-timeline small{font-size:9px}.intro-timeline>div{padding:12px 0}.mini-question{font-size:10px}.mini-answer{gap:6px}.mini-answer p{font-size:9px}.mini-answer span{font-size:8px}.dir-card{padding:22px 20px 16px}.dir-checks li{font-size:11px}.dir-card h3{font-size:18px}.visual-card{padding:19px}.invite-art{margin:-19px -19px 19px;height:157px}.growth-scene{gap:6px;grid-template-columns:1fr 1fr}.growth-scene h4{font-size:15px}.student-art{padding:14px 11px;min-height:153px}.student-art .sprite{width:115px}.student-art h4{font-size:16px}.student-art span{font-size:8px}.visual-card h3{font-size:17px}.milestone-tabs span{font-size:8px}.faq-q{font-size:12px}.act-head h2{font-size:23px}}
.growth-scene{isolation:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.dir-card:hover,.btn-primary:hover{transform:none}}

/* Scoped refinements: one participation entry, integrated student benefit, meaningful motion. */
.detail-visual .panel-note:last-child{margin-bottom:0}
#student .visual-card{padding:0;background:#f5f7f2}
.student-benefit{display:grid;grid-template-columns:1fr 44%;align-items:end;min-height:228px;padding:29px 28px 24px;background:#eaf1e4;position:relative}
.student-benefit-copy{position:relative;z-index:1;align-self:center}
#student .student-benefit h3{font-size:23px;font-weight:550;line-height:1.5;letter-spacing:-.025em;margin:0 0 19px;color:#2d4c35;white-space:nowrap}
.student-credit{display:flex;gap:8px;align-items:baseline;margin:0;color:var(--green);line-height:1.15;white-space:nowrap}
.student-credit strong{font-size:36px;font-weight:580;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.student-credit>span{font-size:12px;font-weight:500}
.student-credit-caption{font-size:11px;line-height:1.7;margin:8px 0 0;color:#51694e;white-space:nowrap}
.student-character{width:calc(100% + 19px);max-width:224px;margin:0 -13px -4px 0;justify-self:end;position:relative;clip-path:inset(0 0 4% 0)}
.student-requirements{padding:25px 28px 26px}
.student-requirements h4{font-size:14px;font-weight:550;margin:0 0 17px;line-height:1.6}
.student-requirements dl{margin:0}
.student-requirements dl>div{display:grid;grid-template-columns:65px 1fr;column-gap:18px;padding:14px 0;border-top:1px solid #dfe6db;font-size:12px;line-height:1.8}
.student-requirements dt{color:#63705f}
.student-requirements dd{margin:0;color:var(--text)}
.student-requirements dd small{display:block;color:#63705f;font-size:10px;margin-top:3px;line-height:1.8}
.student-review-note{display:flex;gap:8px;margin:13px 0 0;font-size:10px;line-height:1.9;color:#63705f}
.student-review-note svg{width:15px;height:15px;flex:none;stroke:#63705f;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.student-entry-note{font-size:11px;color:var(--text-3);line-height:1.8;max-width:330px;margin:13px 0 0}

/* The overview's three demonstrations retain the original three-column card grid. */
.dir-card::before{display:none}
.dir-card .dir-illu{display:block;min-height:0;margin:0 0 25px}
.activity-demo{height:154px;width:100%;overflow:hidden;contain:layout paint;--motion-ease:cubic-bezier(.16,1,.3,1)}
.activity-demo svg{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.invite-motion-scene,.growth-motion-scene,.student-motion-scene{height:117px;position:relative;display:flex;align-items:center;justify-content:center}
.demo-caption{height:37px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #eaf0e7;color:#56715a;font-size:10px;white-space:nowrap}
.demo-caption>[data-demo-caption]{min-width:0;white-space:normal;line-height:1.5}
.demo-phase{display:flex;gap:4px;flex:none}
.demo-phase i{width:4px;height:4px;border-radius:50%;background:#d7e1d5;transition:background .25s}
.demo-phase i.current{background:var(--green)}
.share-source{display:flex;flex-direction:column;align-items:center;gap:7px;width:61px;color:#597060;font-size:9px}
.share-source img{height:39px;width:33px;object-fit:contain}
.share-path{width:80px;height:1px;background:#d7e4d3;position:relative;margin:0 12px 15px}
.share-path>svg{position:absolute;right:-6px;top:-5.5px;width:12px;height:12px;color:#90ac91}
.share-path>i{position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--green);transform:translateX(0);opacity:0;transition:transform .65s var(--motion-ease),opacity .25s}
.share-person{display:flex;align-items:center;flex-direction:column;gap:3px;width:58px;font-size:9px;color:#628368}
.share-person>svg{width:41px;height:41px;color:#749e77;background:#f0f5ed;border-radius:50%;padding:6px;transition:background .35s,color .35s}
.share-reward{position:absolute;top:2px;right:0;background:#edf4e7;color:var(--green);font-size:10px;line-height:1;padding:7px 10px;border-radius:6px;opacity:.8;transform:translateY(5px);transition:transform .4s var(--motion-ease),opacity .3s;background-clip:padding-box;white-space:nowrap}
.invite-demo:not([data-phase="0"]) .share-path>i{opacity:1;transform:translateX(72px)}
.invite-demo:not([data-phase="0"]) .share-person>svg{color:var(--green);background:#dfedda}
.invite-demo:not([data-phase="0"]) .share-reward{transform:translateY(0);opacity:1}
.growth-motion-scene{justify-content:space-between;padding:4px 10px 0}
.growth-today{display:flex;flex-direction:column;gap:8px;align-self:center;padding-bottom:12px;color:var(--green)}
.growth-today strong{font-size:37px;line-height:1;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.growth-today span{font-size:9px;color:#638367}
.growth-bars{display:flex;gap:15px;align-items:flex-end;height:89px;padding-bottom:6px;align-self:center}
.growth-bars>div{width:26px;height:100%;display:flex;justify-content:flex-end;align-items:center;flex-direction:column;gap:7px}
.growth-bars i{display:block;width:25px;height:41px;background:#dfebdb;border-radius:4px 4px 1px 1px;transform-origin:bottom;transform:scaleY(.45);transition:transform .7s var(--motion-ease),background .4s}
.growth-bars>div:nth-child(2) i{height:56px}.growth-bars>div:nth-child(3) i{height:72px}
.growth-bars span{font-size:9px;white-space:nowrap;color:#628368}
.growth-demo:not([data-phase="0"]) .growth-bars>div:first-child i{transform:scaleY(1);background:#78a87b}
.growth-demo[data-phase="2"] .growth-bars>div:nth-child(2) i,.growth-demo[data-phase="3"] .growth-bars>div:nth-child(2) i{transform:scaleY(1);background:#519963}
.growth-demo[data-phase="3"] .growth-bars>div:nth-child(3) i{transform:scaleY(1);background:#16723c}
.student-motion-scene{gap:25px}
.proof-document{width:105px;height:65px;border:1px solid #c5d8c2;border-radius:7px;display:flex;align-items:center;gap:9px;padding:12px;position:relative;overflow:hidden;background:#fbfcf9;transform:rotate(-4deg);transition:transform .5s var(--motion-ease),border-color .3s}
.proof-avatar{width:28px;height:31px;flex:none;color:#739577}
.proof-document>div{display:grid;gap:6px;flex:1}.proof-document i{width:100%;height:3px;background:#d0deca;border-radius:2px}.proof-document i:last-child{width:65%}
.proof-scan{position:absolute;inset:10px auto 10px 0;background:#6aab70;width:1px;opacity:0;transform:translateX(4px)}
.proof-check{position:absolute;right:5px;bottom:4px;width:17px;height:17px;color:var(--green);background:#edf5e9;opacity:0;transform:scale(.7);transition:transform .3s var(--motion-ease),opacity .3s}
.proof-result{display:flex;align-items:center;flex-direction:column;gap:7px;width:86px;color:#648768}
.proof-result>svg{width:30px;height:30px}.proof-result strong{font-size:11px;font-weight:500;white-space:nowrap}
.student-demo:not([data-phase="0"]) .proof-document{transform:rotate(0)}
.student-demo[data-phase="1"] .proof-scan{opacity:1;animation:proof-scan 1.4s var(--motion-ease) 1 both}
.student-demo[data-phase="2"] .proof-document{border-color:#80a883}
.student-demo[data-phase="3"] .proof-check{opacity:1;transform:scale(1)}
.student-demo[data-phase="3"] .proof-result{color:var(--green)}
@keyframes proof-scan{from{transform:translateX(4px)}to{transform:translateX(98px)}}
.demo-controls{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:13px;color:var(--text-3);font-size:10px}
.demo-toggle{display:inline-flex;gap:5px;align-items:center;background:none;border:0;color:var(--green);font-size:11px;padding:7px 5px;min-height:32px;cursor:pointer;line-height:1.2}
.demo-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.demo-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.demos-paused .activity-demo *{animation-play-state:paused!important}
.activity-demo:not(.demo-visible) *{animation-play-state:paused!important}
@media(min-width:961px) and (max-width:1150px){.student-benefit{padding-inline:23px}.student-credit strong{font-size:32px}.student-benefit{grid-template-columns:1fr 39%}.student-character{width:calc(100% + 25px)}.student-requirements{padding-inline:23px}}
@media(max-width:960px){.student-benefit{grid-template-columns:1fr 43%;min-height:247px}.student-character{max-width:220px}}
@media(max-width:760px){.student-benefit{min-height:213px;padding:24px 23px 21px;grid-template-columns:1fr 41%}#student .student-benefit h3{font-size:21px;margin-bottom:18px}.student-credit strong{font-size:32px}.student-credit-caption{font-size:10px}.student-character{width:calc(100% + 19px);margin-right:-11px}.student-requirements{padding:23px}.student-requirements dl>div{column-gap:10px;font-size:11px;grid-template-columns:56px 1fr}.student-requirements dd small{font-size:10px}.student-review-note{font-size:10px;line-height:1.9}.student-entry-note{font-size:10px}.activity-demo{height:152px}.demo-caption{font-size:10px}.dir-card .dir-illu{margin-bottom:23px}.demo-toggle{min-height:44px}.demo-controls{margin-top:6px}.growth-motion-scene{padding-inline:15px}.share-reward{right:7px}}
@media(max-width:360px){.student-benefit{padding:23px 19px 20px;min-height:204px;grid-template-columns:1fr 37%}#student .student-benefit h3{font-size:19px}.student-credit strong{font-size:30px}.student-credit-caption{font-size:9px}.student-character{width:calc(100% + 25px);margin-right:-13px}.student-requirements{padding:21px 19px}.student-requirements dl>div{grid-template-columns:50px 1fr;gap:9px;font-size:10px}.student-requirements dd small{font-size:9px}.student-review-note{font-size:9px}.demo-caption{font-size:9px}.growth-bars{gap:11px}.share-path{width:62px;margin-inline:6px}.invite-demo:not([data-phase="0"]) .share-path>i{transform:translateX(55px)}.student-motion-scene{gap:19px}.proof-result{width:72px}}
@media(prefers-reduced-motion:reduce){.activity-demo *{animation:none!important;transition:none!important}.proof-document{transform:none}}

/* Invitation records is an inline, deliberately scoped disclosure—not a fake account page. */
.invite-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.invite-title-row h2{margin:0}
.records-entry{display:inline-flex;gap:6px;align-items:center;padding:7px 0;background:none;border:0;cursor:pointer;color:var(--green);font-size:12px;min-height:40px;white-space:nowrap}
.records-entry>svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.records-entry>svg:last-child{width:13px;height:13px;transition:transform .25s}.records-entry[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}
.records-entry:hover{text-decoration:underline;text-underline-offset:4px}
.invite-records{margin:35px auto 0;border:1px solid #e0e8dc;border-radius:16px;background:#fff;padding:27px 30px 18px;scroll-margin-top:94px;outline-offset:4px}
.records-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.records-heading h3{font-size:21px;font-weight:550;margin:0 0 7px;line-height:1.5;display:flex;align-items:center;gap:11px}
.records-heading h3>span{color:#527258;background:#eef4e9;padding:4px 7px;font-size:10px;font-weight:400;line-height:1.2;border-radius:4px}
.records-heading p{color:#637260;font-size:11px;line-height:1.85;margin:0}
.records-close{display:grid;place-items:center;flex:none;width:34px;height:34px;border:0;border-radius:50%;color:#688064;background:#f2f6ee;cursor:pointer}
.records-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.records-close:hover{background:#e5efdf}
.records-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e9df;padding-bottom:16px}
.record-filters{display:flex;gap:4px}.record-filters button{border:0;padding:9px 12px;border-radius:6px;background:transparent;color:#64725f;font-size:12px;cursor:pointer;min-height:38px;white-space:nowrap}
.record-filters button[aria-pressed=true]{color:var(--green);background:#edf4e9}.record-filters button:hover{background:#f1f5ed}
.record-filters span{font-size:10px;margin-left:5px;opacity:.8;font-variant-numeric:tabular-nums}
.record-search{display:flex;align-items:center;gap:8px;background:#f7f9f4;border-radius:7px;padding:8px 11px;min-height:38px;max-width:235px}
.record-search>svg{width:17px;height:17px;stroke:#6a7d64;stroke-width:1.5;fill:none;flex:none}
.record-search input{min-width:0;width:100%;border:0;background:none;font-size:12px;color:#304333;outline:none;padding:0;line-height:1.6}
.record-search:focus-within{outline:2px solid var(--green);outline-offset:3px}.record-search input::placeholder{color:#6b7c66}
.records-table-head,.record-summary{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(110px,.8fr) minmax(170px,1.2fr) minmax(100px,.7fr) 24px;gap:20px;align-items:center;text-align:left}
.records-table-head{font-size:10px;color:#64725f;padding:15px 12px 10px}
.record-item{border-bottom:1px solid #e5ebe1}.record-item:last-child{border:0}
.record-summary{width:100%;background:none;border:0;padding:17px 12px;font-size:12px;color:#314733;cursor:pointer;border-radius:8px;transition:background .2s}
.record-summary:hover,.record-summary[aria-expanded=true]{background:#f6f8f2}
.record-friend{display:flex;align-items:center;gap:10px;min-width:0}.record-avatar{display:grid;place-items:center;width:32px;height:32px;background:#edf3e8;color:#477351;border-radius:50%;font-size:10px;flex:none}
.record-friend>b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-date{font-size:11px;color:#6a7a64;font-variant-numeric:tabular-nums}
.record-progress{display:flex;gap:10px;align-items:center;font-size:11px;white-space:nowrap}.record-segments{display:flex;gap:3px}.record-segments i{width:15px;height:4px;border-radius:3px;background:#dfe7da}.record-segments i.done{background:#66a575}
.record-credit{color:var(--green);font-size:16px;font-weight:550;font-variant-numeric:tabular-nums}.record-credit small{font-size:10px;font-weight:400;margin-left:3px}
.record-chevron{height:14px;width:14px;stroke:#627a5e;stroke-width:1.5;fill:none;transition:transform .25s}.record-summary[aria-expanded=true] .record-chevron{transform:rotate(180deg)}
.record-milestones{padding:17px 16px 21px 54px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.record-milestones>div{font-size:11px;line-height:1.9}.record-milestones h4{font-size:11px;font-weight:450;color:#63745d;margin:0 0 4px}.record-milestones p{margin:0;color:#6a7965;font-size:11px}.record-milestones .credited p{color:var(--green)}
.records-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #e4ebdf;padding-top:16px;color:#6d7b66;font-size:10px}
.records-empty{text-align:center;padding:35px 15px 40px;color:#677960}.records-empty>svg{width:34px;height:34px;stroke:#71916d;fill:none;stroke-width:1.4;margin:auto}.records-empty h4{font-size:16px;font-weight:500;margin:13px 0 8px}.records-empty p{font-size:12px;line-height:1.8;margin:0 0 16px}.records-empty button{background:#eaf2e3;color:var(--green);padding:9px 16px;min-height:38px;border:0;border-radius:6px;font-size:12px;cursor:pointer}
@media(min-width:961px) and (max-width:1150px){.live-card-heading{align-items:flex-start}.live-card-heading h3{font-size:17px}.records-table-head,.record-summary{gap:12px;grid-template-columns:1.1fr .8fr 1fr .7fr 18px}.record-progress{gap:7px}.record-segments i{width:12px}}
@media(max-width:760px){.live-card-heading{gap:8px;margin-bottom:5px}.live-card-heading h3{font-size:18px}.card-playback{min-height:40px;font-size:9px}#invite .invite-rewards{margin:13px 0 19px}#invite .invite-rewards button{padding-inline:9px;gap:10px}.reward-row-copy{font-size:11px}.reward-row-copy small{font-size:9px}#invite #reward-total{font-size:29px}.reward-preview>div>span{font-size:10px}#reward-total>small{font-size:9px}.reward-accumulation{margin:17px 0 13px}.certification-flow{margin-top:16px}.certification-preview{gap:11px;min-height:103px}.certification-preview h5{font-size:13px}.certification-preview p{font-size:10px}.certification-symbol{width:36px}.certification-symbol svg{width:34px;height:34px}.invite-title-row{gap:10px;margin-bottom:14px}.records-entry{font-size:11px;min-height:44px}.invite-records{padding:21px 18px 17px;margin-top:26px;border-radius:14px}.records-heading h3{font-size:19px}.records-heading p{font-size:10px}.records-close{width:36px;height:36px}.records-toolbar{align-items:stretch;flex-direction:column;gap:11px;padding-bottom:15px}.record-filters{justify-content:space-between;gap:0}.record-filters button{min-height:40px;padding:9px 10px;font-size:11px}.record-search{max-width:none;min-height:42px}.records-table-head{display:none}.record-summary{grid-template-columns:1fr auto 14px;gap:9px 8px;padding:16px 0}.record-friend{grid-column:1;grid-row:1;gap:8px}.record-friend>b{font-size:11px}.record-date{grid-row:2;grid-column:1;font-size:10px;padding-left:40px}.record-progress{grid-column:2;grid-row:2;font-size:10px;gap:6px}.record-segments i{width:7px}.record-credit{grid-row:1;grid-column:2;font-size:15px;text-align:right}.record-credit small{font-size:9px}.record-chevron{grid-column:3;grid-row:1/3}.record-avatar{width:32px;height:32px;font-size:9px}.record-milestones{grid-template-columns:1fr 1fr;gap:15px 10px;padding:7px 0 20px 40px}.record-milestones h4,.record-milestones p{font-size:10px}.records-footer{font-size:9px;align-items:flex-start;flex-direction:column;gap:7px;padding-top:13px}.records-empty{padding-inline:0}.records-empty p{font-size:11px}}
@media(max-width:360px){.live-card-heading h3{font-size:16px}#growth .live-card-heading h3{font-size:16px}.live-card-heading{gap:5px}.card-playback{font-size:8px;gap:3px}#invite .invite-rewards button{gap:7px;padding-inline:7px}.reward-step{width:21px;height:21px}.reward-row-copy{font-size:10px}.reward-row-copy small{font-size:8px}#invite .invite-rewards strong{font-size:14px}#invite #reward-total{font-size:26px}.reward-preview>div>span{font-size:9px}.certification-preview{gap:8px}.certification-preview h5{font-size:12px}.certification-preview p{font-size:9px}.certification-flow button{font-size:9px}.student-requirements .live-card-heading h4{font-size:12px}.record-progress{gap:4px}.record-segments{display:none}.record-credit{font-size:14px}.record-friend>b{font-size:10px}.invite-records{padding-inline:14px}.record-milestones{padding-left:4px}.records-entry{font-size:10px}.records-entry>svg:first-child{display:none}}
@media(prefers-reduced-motion:reduce){.reward-selection,.reward-step svg,.reward-step>span,.reward-accumulation i::after,.certification-symbol svg{transition:none!important}.character-switch{animation:none!important}}

/* Open activity diagrams. No outer panels, fills, rounded containers, or card shadows. */
.detail{scroll-margin-top:0}
.detail-inner{grid-template-columns:.8fr 1.3fr;gap:52px;align-items:center}
.detail-inner.flip{grid-template-columns:1.3fr .8fr}
.detail{padding:72px 0}.detail-copy{min-width:0}.detail-visual{min-width:0;width:100%}
.detail h2{font-size:31px}.detail .lead{font-size:13px;line-height:1.95}.timeline h4{font-size:13px}.timeline p{font-size:11px}.timeline li{padding-block:9px}
#growth .feature-row{display:block;margin:19px 0 25px}#growth .feature-mini{display:grid;grid-template-columns:66px 1fr;gap:13px;background:transparent;border:0;border-radius:0;box-shadow:none;padding:13px 0;border-bottom:1px solid #e4ebe1}#growth .feature-mini:last-child{border-bottom:0}#growth .feature-mini h4{font-size:12px;font-weight:500;line-height:1.9;margin:0}#growth .feature-mini p{font-size:11px;line-height:1.9;margin:0}
.invite-title-row{align-items:center;gap:9px}.records-entry{font-size:11px}
.open-scene{position:relative;width:100%;min-width:0;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;color:var(--text)}
.scene-utility{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;margin-bottom:4px;color:#536b59;font-size:11px}
.scene-play{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:6px 0 6px 8px;border:0;background:none;color:#5f7464;font:inherit;font-size:10px;cursor:pointer;white-space:nowrap}
.scene-play>svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linejoin:round}.scene-play:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px}
.scene-seek{display:grid;gap:0;position:relative}
.scene-seek button{border:0;background:none;position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:flex-start;min-height:66px;cursor:pointer;color:#536b59;padding:15px 5px 10px;font-size:12px;line-height:1.65}
.scene-seek button::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:#d9e4d7;transition:background .3s,transform .4s}
.scene-seek button[aria-selected=true]{color:var(--green)}.scene-seek button[aria-selected=true]::before{height:2px;background:var(--green);transform:scaleX(.84)}
.scene-seek button:hover{color:var(--green)}.scene-seek small{font-size:10px;color:#697a6b;line-height:1.65;white-space:nowrap}
.scene-caption{padding-top:15px;color:#4c6453;min-height:76px}
.scene-caption p{font-size:12px;line-height:1.85;margin:0 0 5px}.scene-caption p b{font-weight:550;color:var(--green)}.scene-caption small{font-size:10px;line-height:1.8;display:block;color:#697a6b}
.invitation-canvas{height:370px;position:relative;isolation:isolate}
.invitation-narrative{position:absolute;left:8px;top:23px;z-index:2;max-width:260px}
.scene-current-title{font-size:25px;line-height:1.45;font-weight:500;letter-spacing:-.03em;display:block;color:#2e513a}
.invitation-narrative p{font-size:11px;line-height:1.85;color:#607b68;margin:10px 0 0}
.invite-total-readout{position:absolute;right:20px;top:34px;text-align:right;color:var(--green);z-index:2}
.invite-total-readout strong{font-size:52px;font-weight:450;letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.invite-total-readout>span{font-size:10px;display:block;color:#647d6a;margin-top:9px}
.invitation-character{position:absolute;width:145px;left:3%;bottom:90px;z-index:1;clip-path:inset(1% 1% 4% 1%)}
.invite-graph{position:absolute;inset:135px 0 0}
.reward-graph{width:100%;height:100%;overflow:visible;display:block}
.reward-graph path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.graph-route-future{stroke:#dce7d9}.graph-route-earned{stroke:#16723c;transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1)}
.graph-points circle{fill:#fff;stroke:#c7d9c4;stroke-width:1.5;transition:fill .3s,stroke .3s}.graph-points .reached{fill:#e1efdf;stroke:#16723c}.graph-points .current{fill:#16723c;stroke:#16723c}
.graph-particle{fill:#16723c;stroke:#fff;stroke-width:3}
.invite-amounts{position:absolute;inset:135px 0 0;pointer-events:none}.invite-amounts>span{position:absolute;font-size:12px;color:#52634f;transform:translate(-50%,-28px);font-variant-numeric:tabular-nums;transition:color .3s;white-space:nowrap}.invite-amounts>span.reached{color:var(--green)}
.invite-seek{grid-template-columns:repeat(4,1fr)}
.growth-landscape{position:relative;height:367px}
.growth-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:absolute;inset:30px 0 0;align-items:start}
.growth-role{position:relative;background:none;border:0;padding:0 0 15px;color:#4f6554;display:flex;align-items:center;flex-direction:column;min-width:0;cursor:pointer;z-index:1}
.growth-role .sprite{width:100%;max-width:210px;display:block;transform:scale(.85);opacity:.66;filter:saturate(.6);transform-origin:center 80%;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s,filter .5s;clip-path:inset(1% 1% 3% 1%)}
.growth-role[aria-selected=true] .sprite{transform:translateY(-10px) scale(1.02);opacity:1;filter:none}
.growth-role:hover .sprite{opacity:1;filter:none}
.growth-role strong{font-size:32px;font-weight:450;font-variant-numeric:tabular-nums;line-height:1.3;letter-spacing:-.035em;margin-top:15px;color:#52634f;transition:color .3s}
.growth-role strong>small{font-size:11px;font-weight:400;letter-spacing:0;margin-left:5px}
.growth-role[aria-selected=true] strong{color:var(--green)}
.role-name{font-size:13px;margin-top:8px;line-height:1.6}.role-character{font-size:10px;color:#52634f;margin-top:4px}
.growth-path{position:absolute;left:0;top:219px;width:100%;height:33px;overflow:visible}
.growth-path path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round}.growth-path-base{stroke:#dce6d6}.growth-path-current{stroke:#78a978;transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.growth-caption{padding-inline:13px}
.education-canvas{position:relative;height:336px;isolation:isolate}
.education-paper{position:absolute;left:10px;top:65px;width:155px;min-height:205px;border:1px solid #dce3d6;padding:20px 16px 14px;background:#fff;border-radius:1px;box-shadow:8px 16px 21px -19px #173d2a3b;transform:rotate(-7deg);transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .5s;overflow:hidden;z-index:2}
.paper-heading{display:block;font-size:17px;font-weight:550;color:#3c5941;line-height:1.6}.paper-subheading{font-size:7px;letter-spacing:.06em;display:block;color:#52634f;margin-top:5px}.paper-rule{height:1px;background:#e2e9dd;margin:16px 0}
.paper-fields{display:grid;grid-template-columns:28px 1fr;gap:11px 10px;font-size:9px;line-height:1.6;color:#52634f}.paper-fields i{font-style:normal;color:#52634f}
.paper-stamp{margin-top:18px;font-size:8px;letter-spacing:.03em;color:#52634f;text-align:right}
.paper-scan{position:absolute;inset:14px 0 auto;height:1px;background:#449155;opacity:0;box-shadow:0 2px 8px #98c49d77}
.education-flow-line{position:absolute;top:95px;left:0;width:100%;height:95px;z-index:0;overflow:visible}
.education-flow-line path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round}.education-line-base{stroke:#dce7d8;stroke-dasharray:4 6}.education-line-live{stroke:#6d9f73;stroke-dasharray:330;stroke-dashoffset:330;transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1)}
.education-review{position:absolute;top:112px;left:46%;transform:translateX(-50%);width:100px;display:flex;align-items:center;flex-direction:column;text-align:center;z-index:2}
.review-glyph{width:66px;height:66px;background:#fff}.review-glyph svg{width:100%;height:100%;stroke:#819b7d;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.review-orbit{stroke:#d7e3d2;stroke-dasharray:145 25;transform-origin:center}.review-check{stroke-dasharray:50;stroke-dashoffset:50;stroke:#16723c;transition:stroke-dashoffset .5s}
.review-clock{transition:opacity .3s}
.education-review strong{font-size:13px;font-weight:500;color:#4e6d55;line-height:1.6;margin-top:12px}.education-review>span{font-size:9px;color:#687e62;line-height:1.7;margin-top:5px;white-space:nowrap}
.education-result{position:absolute;top:35px;right:0;width:36%;display:flex;align-items:center;flex-direction:column;color:#52634f;z-index:1}
.education-result .sprite{width:100%;max-width:207px;clip-path:inset(1% 1% 4% 1%);opacity:.76;transition:opacity .6s,transform .7s cubic-bezier(.16,1,.3,1)}
.education-result strong{font-size:31px;font-weight:450;letter-spacing:-.035em;line-height:1.3;white-space:nowrap;margin-top:7px;transition:color .4s}.education-result strong small{font-size:10px;letter-spacing:0;margin-left:6px}
.education-result-label{font-size:10px;margin-top:7px;color:#52634f}
.education-journey[data-step="1"] .education-paper{transform:translateX(17px) rotate(-1deg)}
.education-journey[data-step="1"] .paper-scan{animation:document-scan 2.5s ease-in-out both;opacity:.8}
.education-journey[data-step="1"] .review-orbit{animation:review-wait 5s linear infinite;stroke:#6b9e74}
.education-journey[data-step="1"] .education-line-live{stroke-dashoffset:180}
.education-journey[data-step="2"] .education-line-live{stroke-dashoffset:0}.education-journey[data-step="2"] .education-paper{transform:translateX(14px) rotate(0);box-shadow:none;border-color:#e4ebe1}
.education-journey[data-step="2"] .review-check{stroke-dashoffset:0}.education-journey[data-step="2"] .review-clock{opacity:0}.education-journey[data-step="2"] .review-orbit{stroke:#90b891;stroke-dasharray:170}
.education-journey[data-step="2"] .education-result .sprite{opacity:1;transform:translateY(-9px)}.education-journey[data-step="2"] .education-result strong{color:#16723c}
.education-seek{grid-template-columns:repeat(3,1fr)}
@keyframes document-scan{from{transform:translateY(0)}to{transform:translateY(177px)}}@keyframes review-wait{to{transform:rotate(360deg)}}
.scene-stopped *{animation-play-state:paused!important}
.open-scene .scene-caption{position:relative}
.material-details{margin-top:18px;font-size:11px;color:#5e745e;line-height:1.9;max-width:370px}.material-details summary{cursor:pointer;min-height:38px;padding:8px 0;list-style:revert}.material-details p{margin:7px 0;font-size:11px;line-height:1.9}
@media(min-width:961px) and (max-width:1190px){.detail-inner{gap:36px;grid-template-columns:.85fr 1.25fr}.detail-inner.flip{grid-template-columns:1.25fr .85fr}.scene-current-title{font-size:23px}.invite-total-readout strong{font-size:45px}.invitation-character{width:128px;bottom:91px}.growth-landscape{height:335px}.growth-roles{top:33px}.growth-role .sprite{max-width:174px}.growth-path{top:186px}.education-paper{width:132px;padding:17px 13px;min-height:192px}.education-review{left:45%;width:92px}.education-result strong{font-size:28px}.education-result .sprite{max-width:180px}.education-canvas{height:309px}.education-result{top:49px}.education-review>span{font-size:8px}.paper-fields{gap:10px 6px;font-size:8px}.paper-subheading{font-size:6px}.invite-title-row h2{font-size:28px}.records-entry{font-size:10px}}
@media(max-width:960px){.detail-inner,.detail-inner.flip{grid-template-columns:1fr;gap:32px}.detail .lead{max-width:570px}.detail-copy{width:100%}.detail-visual{max-width:690px;margin-inline:auto}.detail{padding:52px 0}.timeline p{font-size:12px}.timeline h4{font-size:14px}.detail .lead{font-size:14px}.detail h2{font-size:30px}.invite-title-row{max-width:570px}.scene-utility{font-size:12px}.scene-play{font-size:11px}.invitation-character{width:155px;left:6%}.education-result .sprite{max-width:218px}.education-paper{left:22px;width:170px}.education-review{left:47%}.scene-caption p{font-size:13px}.scene-caption small{font-size:11px}.growth-landscape{height:383px}}
@media(max-width:600px){.detail{padding:39px 0}.detail-inner,.detail-inner.flip{gap:23px}.detail h2{font-size:28px}.detail .lead{font-size:13px}.timeline h4{font-size:13px}.timeline p{font-size:12px}.scene-utility{gap:7px;font-size:10px;min-height:44px}.scene-play{min-height:44px;font-size:10px}.scene-utility>span{line-height:1.6}.invitation-canvas{height:313px}.invitation-narrative{left:2px;top:19px;max-width:185px}.scene-current-title{font-size:21px;line-height:1.45}.invitation-narrative p{font-size:10px;margin-top:8px}.invite-total-readout{right:5px;top:28px}.invite-total-readout strong{font-size:38px}.invite-total-readout>span{font-size:9px}.invitation-character{width:115px;bottom:75px;left:1%}.invite-graph,.invite-amounts{top:135px}.invite-amounts>span{font-size:11px}.scene-seek button{font-size:10px;padding:12px 2px 8px;min-height:64px}.scene-seek small{font-size:8px}.scene-caption{padding-top:10px;min-height:68px}.scene-caption p{font-size:11px}.scene-caption small{font-size:10px}.growth-landscape{height:300px}.growth-roles{inset:32px 0 0;gap:0}.growth-role .sprite{max-width:145px}.growth-role strong{font-size:28px;margin-top:21px}.growth-role strong small{font-size:10px;margin-left:3px}.role-name{font-size:11px;margin-top:6px}.role-character{font-size:9px}.growth-path{top:172px;height:25px}.growth-caption{padding-inline:0}.education-canvas{height:271px}.education-paper{left:1px;top:63px;width:112px;min-height:165px;padding:15px 10px}.paper-heading{font-size:13px}.paper-subheading{font-size:5px}.paper-rule{margin:13px 0}.paper-fields{font-size:7px;grid-template-columns:21px 1fr;gap:8px 5px}.paper-stamp{font-size:7px;margin-top:15px}.education-result{top:46px;right:-2px;width:35%}.education-result .sprite{max-width:145px}.education-result strong{font-size:25px;margin-top:8px}.education-result strong small{font-size:8px;margin-left:3px}.education-result-label{font-size:8px;margin-top:4px}.education-review{left:47%;top:95px;width:73px}.review-glyph{width:49px;height:49px}.education-review strong{font-size:10px;margin-top:10px}.education-review>span{font-size:7px}.education-flow-line{top:75px;height:87px}.education-seek small{font-size:8px}.education-journey[data-step="1"] .education-paper{transform:translateX(7px) rotate(0)}.education-journey[data-step="2"] .education-paper{transform:translateX(5px) rotate(0)}.material-details{font-size:11px}.material-details p{font-size:10px}}
@media(max-width:380px){.scene-utility{font-size:9px}.scene-play{font-size:9px}.invitation-canvas{height:292px}.scene-current-title{font-size:19px}.invitation-narrative{max-width:169px}.invitation-narrative p{font-size:9px}.invite-total-readout strong{font-size:32px}.invitation-character{width:101px;bottom:65px}.invite-amounts>span{font-size:10px}.scene-seek button{font-size:9px}.scene-seek small{font-size:7px}.growth-role strong{font-size:25px}.growth-role .sprite{max-width:112px}.role-name{font-size:10px}.role-character{font-size:8px}.growth-landscape{height:279px}.growth-path{top:148px}.education-paper{width:98px;min-height:156px;padding:14px 8px}.education-review{left:46.5%;width:65px}.review-glyph{width:44px;height:44px}.education-result strong{font-size:21px}.education-result{top:57px}.education-result-label{font-size:7px}.education-review>span{font-size:6px}.paper-heading{font-size:12px}.paper-subheading{font-size:4px}.education-canvas{height:257px}.education-review{top:101px}.education-seek small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.open-scene *{transition:none!important;animation:none!important}.education-paper{transform:none!important}.growth-role[aria-selected=true] .sprite{transform:scale(1.02)}}
@media(max-width:600px){.scene-utility{font-size:11px}.scene-seek button{font-size:11px}.scene-seek small{font-size:9px}.education-review{width:86px}.education-review>span{font-size:9px}.education-review strong{font-size:11px}.education-seek small{font-size:9px}.scene-caption p{font-size:12px}.scene-caption small{font-size:10px}#growth .feature-mini p{font-size:12px}#growth .feature-mini h4{font-size:13px}}
@media(max-width:380px){.scene-utility{font-size:10px}.scene-seek button{font-size:10px}.scene-seek small{font-size:8px}.education-review{width:74px}.education-review>span{font-size:8px}.education-review strong{font-size:10px}.education-seek small{font-size:8px}.role-character{font-size:9px}}
@media(max-width:960px){.detail-copy>.detail-visual{margin:16px auto 24px}.detail-copy>.reward-chips{margin-bottom:8px}}

/* Activity hero — WorkBuddy-inspired layered product demo, using Xiaohei IP. */
.hero-visual .demo-stage{
  width:100%;
  max-width:590px;
  padding:28px 28px 10px;
  overflow:visible;
  border:1px solid #edf2ed;
  border-radius:18px;
  background:linear-gradient(135deg,#fff 0%,#f3faf7 100%);
  box-shadow:none;
}
.hero-visual .demo-dash{
  position:relative;
  min-height:350px;
  padding:70px 28px 32px;
  overflow:visible;
  border:1px dashed #80978a;
  border-radius:13px;
  background:linear-gradient(145deg,#fbfdfc 0%,#ecf7f2 100%);
}
.hero-visual .demo-tag{
  top:17px;
  right:18px;
  padding:6px 11px;
  border-radius:6px;
  background:#dff3eb;
  color:#168250;
  font-size:11px;
  font-weight:600;
}
.demo-video-card{
  position:relative;
  z-index:1;
  width:calc(100% + 34px);
  margin-left:-46px;
  padding:20px 20px 22px;
  border:1px solid #edf0ee;
  border-radius:13px;
  background:#fff;
  box-shadow:0 16px 38px rgba(25,52,38,.10);
}
.demo-video-card>strong{
  display:block;
  margin:0 0 13px 2px;
  color:#287d49;
  font-size:16px;
  font-weight:650;
  letter-spacing:-.02em;
}
.demo-video-card iframe{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  border:0;
  border-radius:9px;
  background:#f3f6f4;
}
.hero-visual .demo-mascot{
  right:-34px;
  bottom:-34px;
  width:154px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(29,48,38,.16));
}
.hero-visual .scroll-cue{padding:12px 0 0}

@media(max-width:960px){
  .hero-visual .demo-stage{max-width:610px}
}
@media(max-width:600px){
  .hero-visual .demo-stage{padding:18px 18px 8px;border-radius:15px}
  .hero-visual .demo-dash{min-height:275px;padding:57px 16px 24px}
  .demo-video-card{width:calc(100% + 18px);margin-left:-25px;padding:14px 14px 17px}
  .demo-video-card>strong{margin-bottom:9px;font-size:13px}
  .hero-visual .demo-mascot{right:-25px;bottom:-24px;width:105px}
}

/* 活动页首屏演示区：严格复刻参考页的错位叠层结构 */
.hero-visual{
  min-height:470px;
  padding:0 46px 42px 0;
  overflow:visible;
}
.hero-visual .demo-stage{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:640px;
  aspect-ratio:32/21;
  padding:0;
  overflow:visible;
  border:0!important;
  border-radius:0;
  background:transparent;
  box-shadow:none!important;
  animation:preview-arrive .8s var(--ease);
}
.hero-visual .demo-stage::before{
  position:absolute;
  top:12%;
  left:10%;
  z-index:-1;
  width:89.84375%;
  height:91.6667%;
  border:0;
  border-radius:8px;
  background:rgba(244,245,245,.6);
  box-shadow:none;
  content:"";
}
.hero-visual .demo-dash{
  position:absolute;
  top:0;
  left:18%;
  width:89.84375%;
  height:91.6667%;
  min-height:0;
  padding:0;
  display:block;
  overflow:visible;
  border:1px dashed #191a23;
  border-radius:8px;
  background:transparent;
}
.hero-visual .demo-tag{
  position:absolute;
  top:12%;
  right:0;
  z-index:3;
  padding:6px 10px;
  border-radius:0 8px;
  background:rgba(40,184,148,.12);
  color:#28b894;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
}
.hero-visual .demo-video-card{
  position:absolute;
  top:24%;
  left:-2%;
  z-index:1;
  width:93.75%;
  aspect-ratio:3/2;
  margin:0;
  padding:0;
  overflow:hidden;
  border:2px solid #fff;
  border-radius:8px;
  background:#fff;
  box-shadow:4px 8px 20px rgba(25,26,35,.15)!important;
}
.hero-visual .demo-video-card iframe{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:8px;
  background:#fff;
}
.hero-visual .demo-mascot{
  position:absolute;
  right:-17%;
  bottom:-14%;
  z-index:2;
  width:40%;
  height:68%;
  overflow:hidden;
  filter:none;
  background:transparent;
  mix-blend-mode:normal;
  animation:none!important;
  transition:none!important;
  transform:none!important;
  pointer-events:none;
}
.hero-visual .demo-mascot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  animation:none!important;
  transition:none!important;
  transform:none!important;
}
.hero-visual .scroll-cue{
  position:absolute;
  left:-2%;
  bottom:-10%;
  padding:0;
}

@media(max-width:960px){
  .hero-visual{min-height:0;padding:0 38px 50px 0}
  .hero-visual .demo-stage{max-width:640px;padding:0;border-radius:0}
  .hero-visual .demo-dash{min-height:0;padding:0}
  .hero-visual .demo-video-card{width:93.75%;margin:0;padding:0}
  .hero-visual .demo-mascot{right:-14%;bottom:-12%;width:37%;height:64%}
}
@media(max-width:600px){
  .hero-visual{padding-right:24px;padding-bottom:42px}
  .hero-visual .demo-stage{padding:0;border-radius:0}
  .hero-visual .demo-dash{min-height:0;padding:0}
  .hero-visual .demo-video-card{width:93.75%;margin:0;padding:0}
  .hero-visual .demo-mascot{right:-11%;bottom:-10%;width:35%;height:61%}
}