/* Shared styles for the public marketing site (home / about / services). */

.mkt-nav { background: var(--navy); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 64px; position: sticky; top: 0; z-index: 10; }
.mkt-nav .brandmark { color: #fff; font-weight: 700; letter-spacing: 1px; text-decoration: none; font-size: 17px; }
.mkt-nav .brandmark .gold { color: var(--gold); font-weight: 400; margin-left: 4px; }
.mkt-nav .links { display: flex; align-items: center; gap: 28px; }
.mkt-nav .links a { color: #cbd5e1; text-decoration: none; font-size: 13px; font-weight: 700; }
.mkt-nav .links a:hover, .mkt-nav .links a.active { color: var(--gold); }
.mkt-nav .links a.nav-cta { background: var(--gold); color: var(--navy); padding: 8px 16px; border-radius: 6px; }
.mkt-nav .links a.lang-switch { border: 1px solid rgba(255,255,255,0.3); padding: 5px 10px; border-radius: 6px; font-size: 12px; }

.hero {
  --hero-photo: none;
  /* Duotone navy wash with darker corners (closer to the punchier photo
     treatment recruiting decks use) but kept light enough that the photo
     itself stays visible — text contrast comes from the text-shadow below,
     not from crushing the image to near-black. */
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(11,31,58,0.28), rgba(5,12,24,0.62)),
    linear-gradient(180deg, rgba(11,31,58,0.5), rgba(6,14,28,0.72)),
    var(--hero-photo);
  background-color: var(--navy);
  background-size: cover;
  background-position: center 30%;
  color: #fff; padding: 108px 32px 88px; text-align: center; position: relative; overflow: hidden;
}
.hero.small { padding: 64px 32px 56px; }
.hero .brandmark { font-size: 28px; font-weight: 800; letter-spacing: 1.5px; position: relative; }
.hero .brandmark .gold { color: var(--gold); font-weight: 400; margin-left: 6px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(201,160,99,0.14); border: 1px solid rgba(201,160,99,0.4); color: var(--gold); font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; margin: 0; position: relative; letter-spacing: 0.3px; }
.hero h1 { font-size: 42px; font-weight: 800; margin: 32px auto 20px; max-width: 720px; line-height: 1.28; position: relative; letter-spacing: -0.3px; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.hero.small h1 { font-size: 29px; }
.hero h1 .en { display: block; font-size: 15px; font-weight: 400; color: #9fb0cc; margin-top: 8px; letter-spacing: 0.5px; }
.hero .tagline { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; opacity: 0.95; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.hero p.sub { color: #cbd5e1; font-size: 16.5px; max-width: 560px; margin: 0 auto 40px; position: relative; line-height: 1.75; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }

.brand-meaning { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin: 0; position: relative; }
.brand-letter { background: transparent; border: none; border-left: 2px solid rgba(201,160,99,0.4); border-radius: 0; padding: 2px 0 2px 16px; font-size: 15px; color: #cbd5e1; min-width: 0; text-align: left; transition: border-color 0.2s ease; }
.brand-letter:hover { transform: none; background: transparent; border-color: var(--gold); }
.brand-letter .letter { color: var(--gold); font-size: 20px; font-weight: 700; }
.brand-letter .cn { font-size: 11px; color: #9fb0cc; margin-top: 2px; letter-spacing: 1px; }
.btn-primary { background: var(--gold); color: var(--navy); font-weight: 800; letter-spacing: 0.3px; padding: 14px 28px; border-radius: 8px; text-decoration: none; display: inline-block; box-shadow: 0 8px 20px rgba(201,160,99,0.35); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201,160,99,0.45); }
.btn-secondary { background: rgba(255,255,255,0.04); color: #fff; font-weight: 700; padding: 14px 28px; border-radius: 8px; text-decoration: none; display: inline-block; border: 1px solid rgba(255,255,255,0.4); transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }

.section { max-width: 920px; margin: 0 auto; padding: 60px 32px; }
.section-heading { font-size: 27px; font-weight: 800; color: var(--navy); margin-bottom: 4px; text-align: center; letter-spacing: 0.2px; text-transform: uppercase; }
.section-heading .en { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.section-heading::after { content: ''; display: block; width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 16px auto 0; }
.section-sub { color: var(--muted); text-align: center; max-width: 640px; margin: 0 auto 36px; font-size: 14px; line-height: 1.6; }

.icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 10px; box-shadow: inset 0 0 0 1px rgba(11,31,58,0.06); }
.eco-card .icon-circle { background: linear-gradient(150deg, #eef3fb, #e2ebf9); }


.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.pain-card { background: #fff; border-radius: 12px; padding: 0; font-size: 13px; color: var(--muted); line-height: 1.6; overflow: hidden; box-shadow: 0 4px 16px rgba(11,31,58,0.06); border: 1px solid #eef0f3; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pain-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,31,58,0.12); }
.pain-card summary { padding: 22px; cursor: pointer; list-style: none; }
.pain-card summary::-webkit-details-marker { display: none; }
.pain-card .title { color: var(--navy); font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.pain-card .title .en { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pain-card .more { padding: 0 20px 20px; border-top: 1px solid #e8eaee; margin-top: 10px; padding-top: 12px; }
.pain-card summary .expand-hint { color: var(--gold); font-size: 11px; font-weight: 700; margin-top: 10px; }

.eco-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.eco-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 0; box-shadow: 0 4px 16px rgba(11,31,58,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.eco-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,31,58,0.1); }
.eco-card summary { padding: 22px; cursor: pointer; list-style: none; }
.eco-card summary::-webkit-details-marker { display: none; }
.eco-card .title { color: var(--navy); font-weight: 700; margin-bottom: 2px; font-size: 15px; }
.eco-card .title .en { display: block; font-weight: 400; font-size: 11px; color: var(--gold); margin: 2px 0 8px; }
.eco-card .desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.eco-card .more { padding: 0 20px 20px; font-size: 13px; color: var(--muted); line-height: 1.6; border-top: 1px solid #f2f2f2; margin-top: 8px; padding-top: 12px; }
.eco-card summary .expand-hint { color: var(--gold); font-size: 11px; font-weight: 700; margin-top: 10px; }

.evolve-band { background: var(--navy); color: #fff; padding: 50px 32px; text-align: center; }
.evolve-band .section-heading { color: #fff; }
.evolve-band .section-sub { color: #cbd5e1; }
.evolve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 920px; margin: 0 auto; }
.evolve-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; font-size: 13px; line-height: 1.6; transition: transform 0.2s ease, background 0.2s ease; }
.evolve-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.evolve-item .title { color: var(--gold); font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.evolve-item .title .en { display: block; font-weight: 400; font-size: 11px; color: #9fb0cc; margin-top: 2px; }

.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.why-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 0; box-shadow: 0 4px 16px rgba(11,31,58,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,31,58,0.1); }
.why-card summary { padding: 22px; cursor: pointer; list-style: none; }
.why-card summary::-webkit-details-marker { display: none; }
.why-card .icon-circle { background: linear-gradient(150deg, #eef3fb, #e2ebf9); font-size: 20px; }
.why-card .title { color: var(--navy); font-weight: 700; margin-bottom: 2px; font-size: 15px; }
.why-card .title .en { display: block; font-weight: 400; font-size: 11px; color: var(--gold); margin: 2px 0 8px; }
.why-card .desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.why-card .more { padding: 0 20px 20px; font-size: 13px; color: var(--muted); line-height: 1.6; border-top: 1px solid #f2f2f2; margin-top: 8px; padding-top: 12px; }
.why-card summary .expand-hint { color: var(--gold); font-size: 11px; font-weight: 700; margin-top: 10px; }

.stat-band {
  background: linear-gradient(180deg, #fff, #fafbfd);
  border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 40px 32px;
}
.stat-band-grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; position: relative; }
.stat-band-grid > div { padding: 0 12px; position: relative; }
.stat-band-grid > div:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px; background: #e8eaee; }
.stat-band-grid .num { font-size: 36px; font-weight: 900; color: var(--navy); letter-spacing: -0.5px; }
.stat-band-grid .label { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-weight: 700; letter-spacing: 0.2px; }

/* Anonymized student-outcome strip — no photos, no full names (privacy),
   just UTR + background + placement so it still reads as real evidence
   rather than a vague "trust us" claim. */
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; }
.result-card { background: #fff; border-radius: 12px; padding: 28px 20px 24px; text-align: center; box-shadow: 0 4px 16px rgba(11,31,58,0.06); border: 1px solid #eef0f3; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.result-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,31,58,0.12); }
.result-card .avatar-badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(150deg, var(--navy), var(--navy-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(11,31,58,0.25);
}
.result-card .avatar-badge svg { width: 28px; height: 28px; color: var(--gold); }
.result-card .school { color: var(--navy); font-weight: 800; font-size: 19px; margin-bottom: 10px; }
.result-card .detail { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.result-card .detail + .detail { margin-top: 4px; }
.result-card .student-tag { color: var(--gold); font-size: 11px; font-weight: 700; margin-top: 12px; letter-spacing: 0.3px; }
.result-card .in-progress-flag {
  display: inline-block; background: var(--light); color: var(--muted); font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; margin-bottom: 10px; letter-spacing: 0.2px;
}

@media (max-width: 640px) {
  .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .stat-band-grid > div:nth-child(2)::after { display: none; }
  .stat-band-grid .num { font-size: 28px; }
}

.journey { display: flex; align-items: flex-start; justify-content: center; gap: 6px; max-width: 920px; margin: 0 auto; flex-wrap: wrap; }
.journey-step { text-align: center; padding: 0 6px; width: 160px; transition: transform 0.2s ease; }
.journey-step:hover { transform: translateY(-3px); }
.journey-step .icon-circle { margin: 0 auto 12px; width: 52px; height: 52px; background: linear-gradient(150deg, var(--navy), var(--navy-2)); font-size: 22px; box-shadow: 0 8px 18px rgba(11,31,58,0.25); }
.journey-step .step-text { font-size: 13px; color: var(--ink); line-height: 1.5; font-weight: 700; }
.journey-arrow { color: var(--gold); font-size: 20px; padding-top: 16px; }

.funnel-list { max-width: 700px; margin: 0 auto; position: relative; padding-left: 56px; }
.funnel-list::before { content: ''; position: absolute; left: 25px; top: 6px; bottom: 30px; width: 2px; background: linear-gradient(to bottom, var(--gold), #e5decb); }
.funnel-step { position: relative; margin-bottom: 22px; }
.funnel-step:last-child { margin-bottom: 0; }
.funnel-num {
  position: absolute; left: -56px; top: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--gold); font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(11,31,58,0.18); z-index: 1;
}
.funnel-body { background: var(--light); border-radius: 12px; padding: 18px 22px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.funnel-body:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(11,31,58,0.08); }
a.funnel-body { display: block; color: inherit; text-decoration: none; }
a.funnel-body .funnel-cta { display: inline-block; margin-top: 10px; color: var(--gold); font-size: 12.5px; font-weight: 700; }
.funnel-title { font-weight: 700; color: var(--navy); font-size: 16px; margin-bottom: 6px; }
.funnel-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }
/* Expandable service cards on /services — the summary is the old funnel row,
   the detail below it answers the questions a family actually has before
   paying: who it's for, what's inside, how it's scheduled, what it costs. */
.funnel-step.svc { border-radius: 12px; }
.funnel-step.svc > summary { cursor: pointer; list-style: none; }
.funnel-step.svc > summary::-webkit-details-marker { display: none; }
.funnel-step.svc[open] > summary { border-radius: 12px 12px 0 0; transform: none; }
.funnel-step.svc[open] > summary .expand-hint::after { content: ' （点击收起）'; font-weight: 400; }
.svc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svc-price { color: var(--navy); font-weight: 700; font-size: 17px; white-space: nowrap; }
.svc-price .per { font-size: 12px; font-weight: 600; color: var(--muted); }
.svc-price.free { color: #2e7d5b; }
.funnel-step.svc .expand-hint { color: var(--gold); font-size: 11.5px; font-weight: 700; margin-top: 10px; }
.svc-detail { background: #fff; border: 1px solid #e8ecf2; border-top: none; border-radius: 0 0 12px 12px; padding: 4px 22px 20px; }
.svc-block { padding-top: 16px; }
.svc-block h4 { color: var(--navy); font-size: 13px; margin: 0 0 6px; letter-spacing: 0.2px; }
.svc-block p { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 0 0 8px; }
.svc-block ul { margin: 6px 0 0; padding: 0; list-style: none; }
.svc-block li { font-size: 13px; color: var(--muted); line-height: 1.8; padding-left: 16px; position: relative; }
.svc-block li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.svc-block strong { color: var(--ink); }
.svc-block.highlight { background: var(--light); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 14px 16px; margin-top: 16px; }
.svc-block.highlight h4 { color: var(--gold); }
.week-phase { border-left: 2px solid #e8ecf2; padding: 0 0 14px 14px; margin-left: 4px; }
.week-phase:last-child { padding-bottom: 0; }
.wp-head { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.wp-week { display: inline-block; background: var(--navy); color: var(--gold); font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-right: 8px; }
.wp-body { font-size: 12.5px; color: var(--muted); line-height: 1.75; }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef1f5; }
.svc-cta .price-line { font-size: 14px; font-weight: 700; color: var(--navy); }
.btn-primary.small { padding: 9px 18px; font-size: 13px; }
.funnel-step.book { margin-top: 30px; }
.funnel-step.book .funnel-num { background: var(--gold); color: var(--navy); font-size: 20px; }
.funnel-step.book .funnel-body { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }  /* 2026-10-25：原为 深蓝→深蓝，绿金改版漏了这一处 */
.funnel-step.book .funnel-title { color: var(--gold); }
.funnel-step.book .funnel-desc { color: #cbd5e1; }
.funnel-bullets { list-style: none; margin: 10px 0 0; padding: 0; }
.funnel-bullets li { font-size: 12.5px; color: var(--muted); line-height: 1.7; padding-left: 16px; position: relative; }
.funnel-bullets li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.funnel-step.book .funnel-bullets li { color: #cbd5e1; }

.founder { background: var(--light); border-radius: 16px; padding: 36px; display: flex; gap: 28px; align-items: center; box-shadow: 0 8px 24px rgba(11,31,58,0.06); }
.founder .avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(150deg, var(--navy), var(--navy-2)); color: var(--gold); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 8px 20px rgba(11,31,58,0.25); }
.founder .avatar img { width: 100%; height: 100%; object-fit: cover; }
.founder .name { font-weight: 700; color: var(--navy); font-size: 18px; }
.founder .role { color: var(--gold); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.founder .bio { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* "Photo wall" team roster — square tiles in a fixed-width grid so a photo
   can never blow up past its tile regardless of source resolution; each
   category is its own little wall section. */
.team-intro { max-width: 640px; margin: 0 auto 32px; text-align: center; font-size: 14px; line-height: 1.8; color: var(--ink); }
.team-category { margin-bottom: 40px; }
.team-category:last-child { margin-bottom: 0; }
.team-category-heading { font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 16px; text-align: center; letter-spacing: 0.3px; }
.team-category-heading::after { content: ''; display: block; width: 28px; height: 2px; background: var(--gold); margin: 8px auto 0; }
.team-wall { display: grid; grid-template-columns: repeat(auto-fill, 140px); justify-content: center; gap: 20px; }
.team-tile { width: 140px; text-align: center; transition: transform 0.2s ease; }
.team-tile:hover { transform: translateY(-4px); }
.team-tile .photo-slot { width: 140px; height: 140px; border-radius: 12px; overflow: hidden; background: var(--light); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; box-shadow: 0 6px 18px rgba(11,31,58,0.1); }
.team-tile .photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-tile .photo-slot .initial { color: var(--navy); font-weight: 700; font-size: 28px; }
.team-tile .name { font-weight: 700; color: var(--navy); font-size: 13px; }
.team-tile .position { color: var(--gold); font-size: 11px; font-weight: 700; margin-top: 2px; }
.team-tile.placeholder .photo-slot { background: #f8f9fb; border: 1px dashed #d5dae3; }
.team-tile.placeholder .photo-slot svg { width: 40px; height: 40px; opacity: 0.35; }
.team-tile.placeholder .name { color: var(--muted); font-weight: 400; }
.team-tile.clickable { cursor: pointer; }
.team-tile.clickable:hover .photo-slot { box-shadow: 0 10px 24px rgba(11,31,58,0.18); }

.bio-modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(11,31,58,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bio-modal-overlay[hidden] { display: none; }
.bio-modal {
  position: relative; background: #fff; border-radius: 14px; max-width: 480px; width: 100%;
  max-height: 82vh; overflow-y: auto; padding: 36px 32px 32px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.bio-modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.bio-modal .photo-slot { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; box-shadow: 0 6px 18px rgba(11,31,58,0.15); }
.bio-modal .photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-modal h3 { color: var(--navy); font-size: 19px; margin: 0 0 4px; }
.bio-modal .position { color: var(--gold); font-size: 13px; font-weight: 700; margin-bottom: 18px; }
/* Capability tags sit between the title and the bio: the title says how senior
   someone is, these say what they actually cover. */
.bio-modal .bio-capabilities { text-align: left; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid #eef1f5; }
.bio-modal .bio-capabilities[hidden] { display: none; }
.bio-modal .cap-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; }
.bio-modal .cap-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bio-modal .cap-tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--light); color: var(--navy); font-size: 11.5px; font-weight: 600; line-height: 1.5;
}
.bio-modal .bio-text { color: var(--ink); font-size: 13px; line-height: 1.8; text-align: left; white-space: pre-wrap; }

.story-section { max-width: 720px; margin: 0 auto; padding: 20px 32px 60px; }
/* .story-section h2 见文件末尾（20px 居中 → 左对齐衬线大标题）。 */
.story-section p { font-size: 15px; line-height: 1.9; color: var(--ink); margin-bottom: 20px; }
.story-section p strong { color: var(--navy); }
/* .story-section .quote 的样式 2026-10-25 统一收进文件末尾（去斜体、去竖线）。 */

.cta-band {
  background: var(--navy);
  color: #fff; text-align: center; padding: 50px 32px;
}
.cta-band h2 { font-size: 22px; margin-bottom: 4px; }
.cta-band h2 .en { display: block; font-size: 12px; font-weight: 400; color: var(--gold); margin-top: 8px; letter-spacing: 1px; }
.cta-band p { color: #cbd5e1; font-size: 14px; margin: 14px 0 24px; }

.mkt-footer { text-align: center; padding: 24px; font-size: 12px; color: var(--muted); }
.mkt-footer .links { margin-top: 8px; }
.mkt-footer .links a { color: var(--muted); text-decoration: none; margin: 0 8px; }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--navy); color: #fff; padding: 16px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 13px; color: #dfe6f0; max-width: 640px; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions .btn-primary, .cookie-banner-actions .btn-secondary {
  padding: 8px 16px; font-size: 13px; border-radius: 6px; cursor: pointer; border: none;
}
.cookie-banner-actions .btn-secondary { background: transparent; color: #cbd5e1; border: 1px solid #465877; }

.lead-modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(11,31,58,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lead-modal-overlay[hidden] { display: none; }
.lead-modal {
  position: relative; background: #fff; border-radius: 14px; max-width: 420px; width: 100%;
  padding: 36px 32px 32px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.lead-modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.lead-modal-badge {
  width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: #fff;
  font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.lead-modal h3 { color: var(--navy); font-size: 19px; margin: 0 0 10px; }
.lead-modal p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 20px; }
.lead-modal #lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-modal #lead-form input {
  padding: 12px 14px; border: 1px solid #d7dce3; border-radius: 8px; font-size: 14px;
}
.lead-modal #lead-form button {
  padding: 12px; border: none; border-radius: 8px; background: var(--navy); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.lead-modal #lead-form button:hover { background: var(--navy-2); }
.lead-modal-error { color: #c0392b !important; font-size: 12px !important; margin-top: 10px !important; }

@media (max-width: 480px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

.help-bubble {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 26px rgba(11,31,58,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.help-bubble:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(0,92,56,0.42); }
.help-bubble-icon { font-size: 0; display: flex; align-items: center; justify-content: center; }

.help-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 81;
  width: 340px; max-width: calc(100vw - 48px); max-height: 70vh;
  background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(11,31,58,0.28);
  display: flex; flex-direction: column; overflow: hidden;
}
.help-panel[hidden] { display: none; }
.help-panel-header { background: var(--navy); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.help-panel-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-panel-title { font-weight: 700; font-size: 14px; }
.help-panel-sub { font-size: 11.5px; color: #cbd5e1; margin-top: 1px; }
.help-panel-close { margin-left: auto; background: none; border: none; color: #cbd5e1; font-size: 20px; cursor: pointer; line-height: 1; padding: 0; }
.help-panel-body { padding: 8px 6px; overflow-y: auto; flex: 1; }
.help-faq-item { border-bottom: 1px solid #f0f1f4; padding: 10px 14px; }
.help-faq-item:last-child { border-bottom: none; }
.help-faq-item summary { cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.help-faq-item summary::-webkit-details-marker { display: none; }
.help-faq-item summary::before { content: 'Q  '; color: var(--gold); }
.help-faq-item p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 8px 0 2px; }
.help-panel-footer { padding: 12px 16px; font-size: 12px; color: var(--muted); background: var(--light); border-top: 1px solid #eee; }
.help-panel-footer a { color: var(--navy); font-weight: 700; }

@media (max-width: 480px) {
  .help-bubble { right: 16px; bottom: 16px; }
  .help-panel { right: 16px; bottom: 84px; }
}

.photo-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; max-width: 960px; margin: 0 auto; }
.photo-feature .photo { border-radius: 14px; overflow: hidden; box-shadow: 0 16px 36px rgba(11,31,58,0.18); position: relative; }
.photo-feature .photo img { width: 100%; height: 340px; object-fit: cover; display: block; }
/* Navy duotone wash over every photo — same move recruiting decks use to
   make stock/varied-source photography read as one cohesive brand instead
   of a grab-bag of random stock images. */
.photo-feature .photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(11,31,58,0.38), rgba(11,31,58,0.05) 55%, rgba(201,160,99,0.12));
  mix-blend-mode: multiply; pointer-events: none;
}
.photo-feature.reverse .photo { order: 2; }
.photo-feature .copy .eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.photo-feature .copy h3 { color: var(--navy); font-size: 21px; margin: 0 0 12px; }
.photo-feature .copy p { color: var(--muted); font-size: 14px; line-height: 1.8; }

@media (max-width: 720px) {
  .photo-feature { grid-template-columns: 1fr; }
  .photo-feature.reverse .photo { order: 0; }
  .photo-feature .photo img { height: 240px; }
}

/* Credibility photo grid — a band of real action photography to break up
   text-only sections, borrowed from how IMG Academy uses photo bands as
   section dividers rather than confining imagery to the hero alone. */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 960px; margin: 0 auto; }
.photo-grid .tile { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px rgba(11,31,58,0.12); aspect-ratio: 3/4; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
.photo-grid .tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(11,31,58,0.18); }
.photo-grid .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid .tile.tall { grid-row: span 2; }
.photo-grid .tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(11,31,58,0.4), rgba(11,31,58,0.02) 60%);
  mix-blend-mode: multiply; pointer-events: none;
}

@media (max-width: 720px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid .tile.tall { grid-row: span 1; aspect-ratio: 3/4; }
}

/* ---------------------------------------------------------------------------
   Motion (2026-08-09)
   Elements are visible by default and only hidden once JS has opted them in,
   so a failed script or an old browser leaves a fully readable page rather
   than a blank one. All of it collapses under prefers-reduced-motion.
   --------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}

/* Hero video sits behind the existing gradient wash. The photo stays as the
   poster, so the first paint is identical to today's and the video simply
   takes over once enough of it has buffered — a parent on a slow connection
   never waits on it. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-video.is-playing { opacity: 1; }
.hero > *:not(.hero-video) { position: relative; z-index: 1; }
.hero.has-video::after {
  /* Re-apply the wash on top of the video, otherwise white text on bright
     court footage becomes unreadable. */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(11,31,58,0.30), rgba(5,12,24,0.66)),
    linear-gradient(180deg, rgba(11,31,58,0.52), rgba(6,14,28,0.76));
}

/* Photography reacts to the pointer — the single cheapest thing that makes a
   page feel built rather than assembled. */
.photo-feature .photo img, .result-card .avatar-badge, .team-tile .photo-slot img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.photo-feature .photo:hover img { transform: scale(1.04); }
.team-tile.clickable:hover .photo-slot img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-video { display: none; }
  .photo-feature .photo img, .team-tile .photo-slot img { transition: none; }
}

/* ===========================================================================
   首页首屏改版  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「整个版面太深太黑了，运动应该更多是明亮阳光，模仿劳力士的配色」。
   旧版的四个毛病：① 全部居中 ② 照片压一层 70% 的黑 ③ 青绿球场和深蓝金打架
   ④ 首屏没有任何证据。下面这套逐条解决：左对齐 / 不压黑 / 全站照片统一调成
   绿金色调 / 四个数字直接上首屏。
   旧的 .hero 规则保留不动——/about、/services 等页面还在用它的 .hero.small。
   =========================================================================== */

.hero-split{display:grid;grid-template-columns:1.02fr .98fr;background:#fff;color:var(--ink);
  min-height:600px;border-bottom:1px solid #e9e6df}
.hero-split .hs-copy{padding:76px 48px 66px 56px;display:flex;flex-direction:column;justify-content:center}
.hero-split .hs-eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;color:var(--navy);
  margin-bottom:28px;text-transform:uppercase}
.hero-split h1{font-size:58px;line-height:1.16;font-weight:800;letter-spacing:-.015em;margin:0 0 24px;
  color:var(--ink);text-shadow:none;max-width:none}
.hero-split h1 em{font-style:normal;color:var(--navy)}
.hero-split .hs-sub{font-size:16px;line-height:2.05;color:#5c5c5c;max-width:470px;margin:0 0 40px}
.hero-split .hs-actions{display:flex;gap:12px;margin-bottom:46px;flex-wrap:wrap}
.hero-split .hs-actions .btn-primary{background:var(--navy);color:#fff;border:0}
.hero-split .hs-actions .btn-secondary{border:1px solid #cfccc4;color:var(--ink);background:#fff}
/* 证据条：首屏就要有数字，而不是藏在一个小徽章里 */
.hs-proof{display:flex;flex-wrap:wrap;border-top:1px solid #e9e6df;padding-top:24px}
.hs-proof div{padding-right:36px;margin-right:36px;border-right:1px solid #e9e6df}
.hs-proof div:last-child{border-right:0;padding-right:0;margin-right:0}
.hs-proof b{display:block;font-size:29px;font-weight:800;color:var(--navy);line-height:1;margin-bottom:7px}
.hs-proof small{font-size:12px;color:#8e8e8e}
/* 右侧图：不压黑，只在左缘做一点点渐隐接住文字区 */
.hero-split .hs-media{position:relative;overflow:hidden;background:#ede9e2;min-height:600px}
.hero-split .hs-media .hs-img{position:absolute;inset:0;background-size:cover;background-position:center 24%}
.hero-split .hs-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s ease}
.hero-split .hs-media video.is-playing{opacity:1}
.hero-split .hs-media:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 22%)}
.hs-quote{position:absolute;left:0;bottom:40px;z-index:3;max-width:340px;background:#fff;
  padding:20px 24px 20px 22px;border-left:3px solid var(--gold-dk)}
.hs-quote p{margin:0;font-size:15px;line-height:1.85;color:var(--ink)}
.hs-quote small{display:block;margin-top:11px;font-size:12px;color:#8e8e8e;letter-spacing:.03em}
/* 绿带：把 Mindset / Link / Strategy 从装饰变成内容，同时压住首屏不飘 */
.mls-band{display:grid;grid-template-columns:repeat(3,1fr);background:var(--navy);color:#fff}
.mls-band > div{padding:42px 38px 48px;border-right:1px solid rgba(255,255,255,.14)}
.mls-band > div:last-child{border-right:0}
.mls-band b{display:block;font-size:14px;font-weight:800;letter-spacing:.14em;color:#e8c87a;margin-bottom:6px}
.mls-band i{display:block;font-style:normal;font-size:13px;color:rgba(255,255,255,.62);margin-bottom:14px}
.mls-band p{margin:0;font-size:14px;line-height:1.95;color:rgba(255,255,255,.88)}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;min-height:0}
  .hero-split .hs-copy{padding:48px 22px 40px}
  .hero-split h1{font-size:34px}
  .hero-split .hs-media{min-height:320px;order:-1}
  .hs-quote{position:static;max-width:none;margin:0;padding:16px 20px}
  .hs-proof div{padding-right:22px;margin-right:22px;margin-bottom:14px}
  .mls-band{grid-template-columns:1fr}
  .mls-band > div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:28px 22px 32px}
}

/* ===========================================================================
   中文字体  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「中文字体不高级，换一个看看」→ 她选了方案 B：**宋体标题 + 黑体正文**。
   这是中文排版最经典的高级组合——宋体有笔锋、有书卷气，是气质；
   黑体清楚好读，是信息。两者放一起还自然形成对比。
   旧版的问题不是字体选错，是**全站一种黑体、字重全是 800、字距收得很紧**，
   所以看起来和任何一个模板网站一样。

   ⚠️ 字体栈里 Georgia 故意排在最前面：浏览器是**逐字符**找字体的，
   Georgia 有拉丁字母、没有汉字，所以 UTR / NCAA / GPA 这些走 Georgia，
   汉字落到后面的宋体。不这么写的话，拉丁字母会用宋体自带的那套，很难看。

   ⚠️ 只在 marketing.css 里改——后台和家长端不加载这个文件。
   数据密集的界面用黑体更好读，衬线标题在那里是减分的。
   =========================================================================== */
:root{
  --font-serif: Georgia, "Times New Roman", "Songti SC", "Source Han Serif SC",
                "Noto Serif CJK SC", "Noto Serif SC", SimSun, serif;
  --font-sans: -apple-system, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", sans-serif;
}
body{font-family:var(--font-sans)}

/* 标题走宋体。字重降到 600、字距由负转正——宋体收太紧会糊。 */
.hero-split h1,
.hero h1,
.section-heading,
.photo-feature .copy h3,
.pillar-body h2{
  font-family:var(--font-serif);
  font-weight:600;
  letter-spacing:.012em;
}
.hero-split h1{font-size:50px;line-height:1.3;word-break:keep-all;overflow-wrap:normal}
.hero h1{line-height:1.3;letter-spacing:.015em}
.section-heading{letter-spacing:.02em}

/* 正文行距放开一点，中文需要比英文更松才透气 */
.hero-split .hs-sub{line-height:2.1}
.section-sub{line-height:1.95}

@media (max-width:900px){
  .hero-split h1{font-size:33px;line-height:1.34}
}

/* ===========================================================================
   正文里的链接  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「这种地方的引用线太 low 了……总是这里很难看」。
   她说得对——浏览器默认的蓝色 (#0000EE) + 粗下划线，是整页最廉价的东西，
   而且和绿金米白这套配色完全不搭。

   改成：**正文色的字 + 一条金色细发丝线**，而且把线往下挪一点
   （text-underline-offset），不要贴着汉字的下沿。
   悬停时线变实、字变绿——交互有反馈，但安静。

   用 text-decoration 而不是 border-bottom：border 会把换行的链接切成
   两段方框，text-decoration 跟着文字流走，中文长链接换行时才不会难看。
   =========================================================================== */
.hero-split a:not(.btn-primary):not(.btn-secondary),
.section a:not(.btn-primary):not(.btn-secondary):not(.funnel-body):not(.funnel-cta),
.pillar-body a,
.mkt-page a:not(.btn-primary):not(.btn-secondary),
section p a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(163,126,44,.55);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.hero-split a:not(.btn-primary):not(.btn-secondary):hover,
.section a:not(.btn-primary):not(.btn-secondary):not(.funnel-body):not(.funnel-cta):hover,
.pillar-body a:hover,
.mkt-page a:not(.btn-primary):not(.btn-secondary):hover,
section p a:hover{
  color: var(--navy);
  text-decoration-color: var(--gold-dk);
  text-decoration-thickness: 1.5px;
}
/* 强调链接（"查看服务 →" 这类）不要下划线，它们本来就靠箭头和颜色区分 */
.section > p > a[style*="font-weight"],
.funnel-cta{ text-decoration: none; }

/* 行内样式写死的 h2 也要走宋体——我上一版的选择器没覆盖到它们 */
.mkt-page h2,
section > h2,
.section h2{
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: .012em;
}

/* ===========================================================================
   卡片网格改成「编号列表」  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「这部分有点幼稚的感觉」。四个具体原因：
     ① emoji 当图标（🎾🏫🗣️🌐）——这是模板网站最明显的标志
     ② 4 张卡放进 3 列，第二行孤零零一张，排版是破的
     ③ 白卡 + 投影 + 圆角 12px —— 2015 年的 Material Design 审美
     ④ 悬停浮起来 4px —— 装饰性动效，不传达任何信息

   改法的依据是**内容本身的结构**：这一段讲的是「四个角色各自的局限」，
   是并列比较，不是四张独立的卡。所以改成带编号的列表、细线分隔、
   不要卡片不要投影——编号自带顺序感，细线自带秩序感，这两样
   比任何 emoji 都更像「专业机构」。
   =========================================================================== */
.pain-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid #e3ded4;
  counter-reset:paincard;
}
.pain-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;
  padding:30px 34px 32px !important;
  font-size:14.5px;color:#5c5c5c;line-height:1.95;
  transition:background .18s ease;position:relative;counter-increment:paincard;
}
.pain-card:nth-child(2n){border-right:0}
.pain-card:hover{transform:none;box-shadow:none;background:rgba(0,92,56,.025)}
/* 编号替代 emoji 图标 */
.pain-card .icon-circle{
  width:auto;height:auto;border-radius:0;background:none !important;box-shadow:none;
  margin:0 0 14px;font-size:0;display:block;
}
.pain-card .icon-circle:before{
  content:counter(paincard,decimal-leading-zero);
  font:400 13px/1 "Helvetica Neue";letter-spacing:.14em;color:var(--gold-dk);
}
.pain-card .title{
  font-family:var(--font-serif);font-size:19px;font-weight:600;letter-spacing:.012em;
  color:var(--ink);margin-bottom:9px;
}

/* about 页那组「五个支点」同样处理，但它是可展开的 details，保留交互 */
.why-grid{grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid #e3ded4}
.why-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;
  counter-increment:paincard;
}
.why-grid{counter-reset:paincard}
.why-card:nth-child(2n){border-right:0}
.why-card:hover{transform:none;box-shadow:none}
.why-card summary{padding:28px 34px 30px}
.why-card .icon-circle{
  width:auto;height:auto;border-radius:0;background:none !important;box-shadow:none;
  margin:0 0 13px;font-size:0;display:block;
}
.why-card .icon-circle:before{
  content:counter(paincard,decimal-leading-zero);
  font:400 13px/1 "Helvetica Neue";letter-spacing:.14em;color:var(--gold-dk);
}
.why-card .title{
  font-family:var(--font-serif);font-size:19px;font-weight:600;letter-spacing:.012em;
  color:var(--ink);margin-bottom:7px;
}
.why-card .desc{font-size:14px;color:#6f6f6f;line-height:1.85}
.why-card .expand-hint{color:var(--gold-dk);font-weight:500}
.why-card .more{padding:0 34px 28px;border-top:1px solid #efece5}

/* 区块标题：居中 + 金色小横线是模板味的来源，改成左对齐 */
.section-heading{text-align:left;font-size:34px}
.section-heading:after{display:none}
.section-sub{text-align:left;max-width:640px;margin-left:0}

@media (max-width:760px){
  .pain-grid,.why-grid{grid-template-columns:1fr}
  .pain-card,.why-card{border-right:0}
  .pain-card{padding:24px 20px 26px !important}
  .why-card summary{padding:22px 20px 24px}
  .why-card .more{padding:0 20px 22px}
  .section-heading{font-size:26px}
}

/* ===========================================================================
   关于页/服务页的首屏 + 数字条  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「关于我们这一页，这两个地方很难看」。
     ① 数字条：5 个格子挤在 4 列里，第 5 个掉下来成孤儿；而且
        「英美加澳中港」用了和数字一样的 36px 大字，断成「英美加澳中 / 港」。
     ② 首屏：首页已经改成亮色左对齐了，但 .hero.small 还是旧的
        「深色照片压一层黑 + 居中」——两个页面像两个网站。
        而且框里的链接显示成紫色（浏览器的 visited 默认色），
        我上一版的链接样式选择器没覆盖到 .hero 里面。
   =========================================================================== */

/* —— ① 数字条 —— */
.stat-band{background:var(--light);border-top:1px solid #e3ded4;border-bottom:1px solid #e3ded4;
  padding:44px 32px}
.stat-band-grid{max-width:1120px;grid-template-columns:repeat(5,1fr);gap:0;text-align:left}
.stat-band-grid > div{padding:0 26px}
.stat-band-grid > div:first-child{padding-left:0}
.stat-band-grid > div:not(:last-child)::after{background:#e3ded4;top:2px;bottom:2px}
.stat-band-grid .num{font-size:33px;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.1}
/* 非数字的那一格（"英美加澳中港"）：字号降下来，不然会断行 */
.stat-band-grid .num.is-text{font-family:var(--font-serif);font-size:19px;font-weight:600;
  letter-spacing:.03em;line-height:1.5;padding-top:8px}
.stat-band-grid .label{font-size:12.5px;color:#8a8a8a;margin-top:9px;font-weight:400;letter-spacing:.02em}

/* —— ② 内页首屏：和首页统一成亮色 —— */
.hero.small{
  background-image:none !important;background-color:var(--light);
  color:var(--ink);text-align:left;padding:62px 56px 54px;
  border-bottom:1px solid #e3ded4;overflow:visible;
}
.hero.small:before{content:"";display:block;width:46px;height:2px;background:var(--gold-dk);
  margin-bottom:26px}
.hero.small h1{font-family:var(--font-serif);font-size:40px;font-weight:600;letter-spacing:.012em;
  color:var(--ink);text-shadow:none;margin:0 0 18px;max-width:900px;line-height:1.3}
.hero.small p.sub{color:#5c5c5c;font-size:15.5px;line-height:2;margin:0;max-width:720px;
  text-shadow:none}
/* 关于页那个介绍框的样式，2026-10-25 统一收进 .entity-lede（见文件末尾）。
   这里原本有一条带 !important 的规则，和行内样式、新规则三层叠在同一个元素上——
   **三条规则管一个元素、还要靠 !important 打架，就是「拼凑感」的来源。**
   每次都叠一层而不是替换上一层，页面就会越改越乱。 */
/* 链接样式之前漏了 .hero 里的——所以显示成浏览器默认的紫色 visited */
.hero a:not(.btn-primary):not(.btn-secondary){
  color:var(--ink);text-decoration:underline;text-decoration-color:rgba(163,126,44,.55);
  text-decoration-thickness:1px;text-underline-offset:.22em}
.hero a:not(.btn-primary):not(.btn-secondary):hover{color:var(--navy);text-decoration-color:var(--gold-dk)}

@media (max-width:860px){
  .stat-band-grid{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .stat-band-grid > div{padding:0 16px}
  .stat-band-grid > div::after{display:none !important}
  .stat-band-grid .num{font-size:27px}
  .hero.small{padding:40px 22px 36px}
  .hero.small h1{font-size:26px}
}

/* ===========================================================================
   服务页两处：四大核心能力 + 总指挥图  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「这里修改的高级一些，把表情符号拿掉」。
   和之前 pain-grid 一样的毛病，只是用了不同的 class（eco-grid / orchestra），
   上一轮没覆盖到：emoji 当图标、白卡加投影、圆角。

   总指挥那张图的**结构是对的**（六方力量汇聚到一点，再输出一条路径），
   不该推倒重做——只要把 emoji 换成编号、把卡片换成细线框就行。
   结构对的时候，少即是多。
   =========================================================================== */

/* —— 四大核心能力：和 pain-grid 一套做法 —— */
.eco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid #e3ded4;counter-reset:ecocard}
.eco-card{background:transparent;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;counter-increment:ecocard}
.eco-card:nth-child(2n){border-right:0}
.eco-card:hover{transform:none;box-shadow:none;background:rgba(0,92,56,.025)}
.eco-card summary{padding:28px 34px 30px}
.eco-card .icon-circle{width:auto;height:auto;border-radius:0;background:none !important;
  box-shadow:none;margin:0 0 13px;font-size:0;display:block}
.eco-card .icon-circle:before{content:counter(ecocard,decimal-leading-zero);
  font:400 13px/1 "Helvetica Neue";letter-spacing:.14em;color:var(--gold-dk)}
.eco-card .title{font-family:var(--font-serif);font-size:19px;font-weight:600;
  letter-spacing:.012em;color:var(--ink);margin-bottom:7px}
.eco-card .desc{font-size:14.5px;color:#6f6f6f;line-height:1.9}
.eco-card .expand-hint{color:var(--gold-dk);font-weight:500;font-size:12.5px}
.eco-card .more{padding:0 34px 28px;border-top:1px solid #efece5;font-size:14.5px;line-height:1.95}


@media (max-width:860px){
  .eco-grid{grid-template-columns:1fr}
  .eco-card{border-right:0}
  .eco-card summary{padding:22px 20px 24px}
  .eco-card .more{padding:0 20px 22px}
}

/* —— 兜底：对外页面上剩下的所有 emoji 图标一律不显示 ——
   前面按容器（pain / why / eco）分别换成了编号，但还有 journey-step 这类
   零散的地方。与其一个个找，不如统一关掉：font-size:0 让 emoji 不渲染，
   再用一条金色短线占位。以后新增的 .icon-circle 也自动守这个规矩。 */
.section .icon-circle,
.hero .icon-circle,
.journey-step .icon-circle{
  width:auto;height:auto;border-radius:0;background:none !important;
  box-shadow:none !important;font-size:0;display:block;margin:0 0 12px;
}
.journey-step .icon-circle{margin:0 auto 12px}
.section .icon-circle:not(.pain-card .icon-circle):not(.why-card .icon-circle):not(.eco-card .icon-circle):before,
.journey-step .icon-circle:before{
  content:"";display:block;width:20px;height:1px;background:var(--gold-dk);
}
.journey-step .icon-circle:before{margin:0 auto}

/* ===========================================================================
   总指挥图 重排  2026-10-12
   ---------------------------------------------------------------------------
   Lily：「这里把字拉平到一行」。
   断行的直接原因是 .orchestra-node 写死了 width:84px——装不下「学校升学指导」
   这种 6 个字的标签。

   但与其把框撑宽，不如**把框去掉**。这张图要表达的是「六方力量汇聚到一点」，
   框本身不携带任何信息，反而把一行版面切成六块、每块都要单独对齐。
   去掉框之后：六个标签排成一行、细竖线分隔、下面一条横线把它们收成一个整体，
   再从中间垂下一条线进入 MLS.LINK——**汇聚这个动作，用线画比用箭头更安静也更清楚**。

   原来那排「↓ ↓ ↓ ↓ ↓ ↓」也去掉了：六个箭头在视觉上是六个噪点，
   而真正要传达的「收束」已经由那条横线 + 一条竖线表达完了。
   =========================================================================== */
.orchestra{max-width:980px;margin:40px auto 10px;text-align:center}

/* 六个角色：一行排开，细竖线分隔，不换行 */
.orchestra-inputs{
  display:flex;justify-content:center;align-items:stretch;flex-wrap:nowrap;
  gap:0;margin:0;border-bottom:1px solid var(--gold-dk);padding-bottom:16px;
}
.orchestra-node{
  background:none;border:0;border-radius:0;box-shadow:none;width:auto;flex:1 1 auto;
  padding:0 20px;display:flex;align-items:center;justify-content:center;
  position:relative;transition:none;
}
.orchestra-node:not(:last-child):after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:#dcd6c9;
}
.orchestra-node:hover{transform:none}
.orchestra-node .emoji{display:none}
.orchestra-node .label{
  display:block;white-space:nowrap;             /* ← 一行，不断字 */
  font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.02em;line-height:1.4;
}

/* 汇聚：一条从中间垂下来的细线，取代六个箭头 */
.orchestra-connector{
  color:transparent;font-size:0;letter-spacing:0;margin:0;
  height:34px;position:relative;
}
.orchestra-connector:before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--gold-dk);transform:translateX(-50%);
}
/* 第二条（hub → 结论）短一点 */
.orchestra-hub + .orchestra-connector{height:26px}

.orchestra-hub{
  background:var(--navy);color:#fff;border-radius:2px;box-shadow:none;
  display:inline-block;padding:22px 46px;font-family:var(--font-serif);
  font-size:22px;font-weight:600;letter-spacing:.04em;
}
.orchestra-hub .sub{
  display:block;font-family:var(--font-sans);font-size:12px;font-weight:400;
  color:rgba(255,255,255,.7);margin-top:8px;letter-spacing:.14em;
}
.orchestra-output{
  margin:0;font-family:var(--font-serif);font-size:19px;font-weight:600;
  letter-spacing:.03em;color:var(--navy);
}

@media (max-width:820px){
  .orchestra-inputs{flex-wrap:wrap;gap:14px 0;border-bottom:0}
  .orchestra-node{flex:0 0 33.333%;padding:0 8px}
  .orchestra-node:not(:last-child):after{display:none}
  .orchestra-node .label{font-size:13px;white-space:normal}
  .orchestra-hub{padding:18px 28px;font-size:19px}
}

/* ===========================================================================
   「什么是 MLS.LINK」服务版图（2026-10-25）
   Lily：「需要介绍的再详细综合一点……一点点升级到比较国际化和看上去是有
   10 年沉淀的公司网页」。

   六条服务如果做成六张卡片，就会变成"又一个模板站"。所以沿用这一页
   已经在用的那套语言：**金色编号 + 细线分隔 + 衬线小标题，没有卡片、
   没有投影、没有 emoji**。
   「有沉淀」在视觉上的本质不是元素更多，而是**同一套规则被反复使用**——
   一个页面里只有一种分隔线、一种编号、一种标题字，就会显得克制而老派；
   每块各来一套，再精致也像拼的。

   英文小标 "What we do" 不是装饰：双语标签是国际机构最便宜也最可靠的信号。
   =========================================================================== */
.scope-sec{max-width:980px;margin:0 auto;padding:46px 20px 10px}
.scope-head{border-bottom:1px solid #e3ded4;padding-bottom:16px;margin-bottom:26px}
.scope-head .en{
  display:block;font:700 11px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:10px;
}
.scope-head h2{
  font-family:var(--font-serif);font-size:32px;font-weight:600;letter-spacing:.015em;
  color:var(--navy);margin:0;
}
.scope-lead{font-size:16px;line-height:2.05;color:#3a4350;margin:0 0 16px;max-width:760px}
.scope-lead strong{color:var(--ink);font-weight:700}

.scope-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid #e3ded4;counter-reset:scope;margin-top:30px;
}
.scope-item{
  border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;
  padding:28px 34px 30px;counter-increment:scope;
  transition:background .18s ease;
}
.scope-item:nth-child(2n){border-right:0}
.scope-item:hover{background:rgba(0,92,56,.025)}
.scope-item:before{
  content:counter(scope,decimal-leading-zero);
  display:block;font:400 13px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.14em;color:var(--gold-dk);margin-bottom:13px;
}
.scope-item .t{
  font-family:var(--font-serif);font-size:19px;font-weight:600;letter-spacing:.012em;
  color:var(--ink);margin-bottom:8px;
}
.scope-item p{margin:0;font-size:14.5px;line-height:1.95;color:#5c5c5c}
.scope-item p strong{color:#3a4350;font-weight:600}

.scope-founder{
  font-size:15px;line-height:2.0;color:#5c5c5c;
  margin:26px 0 0;padding-top:22px;border-top:1px solid #e3ded4;
}

@media (max-width:760px){
  .scope-sec{padding:32px 18px 8px}
  .scope-head h2{font-size:25px}
  .scope-grid{grid-template-columns:1fr}
  .scope-item{border-right:0;padding:24px 20px 26px}
}

/* ===========================================================================
   行宽（2026-10-25）
   Lily：「拼不出一条完整的升学路径，这个路径不要再换行了，直接就是一整行
   比较好看。下面的四个小版块也是一样」。

   原因不是字号，是**容器太窄**：.section 只有 920px（内容 856px），
   副标题还被额外卡到 640px，所以那句话必然断行，而且只掉下来两个字——
   中文排版里这叫「孤字」，比整段换行更难看。
   四张卡同理：正文要约 420px，而每张只有 360px，**永远差一点点**。

   920 → 1120：卡片正文 460px，放得下一整行。
   这个宽度同时给 .scope-sec 用——一个页面里只有一种栏宽，
   比每块各调一次更像"有沉淀"。

   text-wrap:pretty 是兜底：浏览器会主动避免最后一行只剩一两个字。
   =========================================================================== */
.section{max-width:1120px}
.section-sub{max-width:none}
.scope-sec{max-width:1120px}

/* ⚠️ 英文页不能照抄这个宽度。
   中文副标题 48 个汉字，在 1056px 下刚好一行；同一个宽度放英文，
   一行变成 137–154 个字符——排版上的舒适区是 45–75，
   150 个字符一行，眼睛回到下一行时会找不到行首。
   **「一行放得下」对中文是优点，对英文是缺点**，因为汉字宽度是拉丁字母的两倍。
   所以按语言分开给：中文吃满栏宽，英文限制在 72 个字符左右。 */
html[lang="en"] .section-sub{max-width:72ch;margin-left:0}
html[lang="en"] .scope-lead{max-width:72ch}
.section-sub,
.pain-card,
.why-card .desc,
.scope-lead,
.scope-item p{text-wrap:pretty}

@media (max-width:1180px){
  .section,.scope-sec{max-width:100%}
}


/* ===========================================================================
   emoji 清场（2026-10-25）
   Lily：「去掉 emoji」。

   .pain-card / .why-card 的 emoji 之前已经被编号盖住了，但**它们还留在 HTML 里**——
   爬虫和 AI 读到的是「🎾 网球教练」。看不见不等于不存在，所以这次是从标记里真正删掉。

   .eco-card（服务页那四张：竞技规划 / 学术防御 / 个人品牌 / 心理建设）
   之前没被编号规则覆盖，emoji 是真的显示着的。这里补上同一套处理。

   另外：.funnel-step.book 的背景一直还是改版前的深蓝——
   绿金那次漏了这一处，整站只剩它一块是蓝的。
   =========================================================================== */
.eco-grid{counter-reset:ecocard}
.eco-card{counter-increment:ecocard}
.eco-card .icon-circle{
  width:auto;height:auto;border-radius:0;background:none !important;box-shadow:none;
  margin:0 0 13px;font-size:0;display:block;
}
.eco-card .icon-circle:before{
  content:counter(ecocard,decimal-leading-zero);
  font:400 13px/1 "Helvetica Neue",sans-serif;letter-spacing:.14em;color:var(--gold-dk);
}

/* 参考书那一条不是可购买的步骤（还在编写中），所以不给编号，给一个文字标签。
   编号序列里留一个洞，看起来像出错；给个标签才说得清它为什么不在序列里。 */
.funnel-num.is-label{
  font:700 11px/1.5 -apple-system,"PingFang SC",sans-serif !important;
  letter-spacing:.06em;white-space:nowrap;padding:8px 10px;height:auto;
}


/* ===========================================================================
   关于页精修（2026-10-25）

   关于页的**内容**是全站最强的一块（创始人故事那段），但排版还停在改版前：
   20px 居中标题、圆角半透明卡片、居中小金线、斜体引用 + 左侧竖线。
   内容没动，只把它换到和首页同一套语言里。

   四处具体问题：

   ① .story-section .quote 用 font-style:italic + 左侧金色竖线。
      Lily 2026-10-16 就说过「这种地方的引用线太low了，你可以用另一种
      改变字体+下划线形式」——当时改了链接，漏了这里。
      而且**中文没有真正的斜体**，浏览器是把方块字硬拉斜，比不加样式还难看。
      改成：放大的衬线体 + 上下细线，不要竖线不要斜体。

   ② .story-section h2 只有 20px 且居中。全站最该被读完的一段，
      标题比正文大不了多少，读者不知道这里重要。
      改成和 .section-heading 一样的左对齐衬线大标题。

   ③ .evolve-item 是圆角半透明卡片 + hover 上浮。
      和 pain-grid/why-grid/eco-grid/scope-grid 全都统一成编号+细线之后，
      只剩它还是卡片——**一个页面里混两种语言，再精致也像拼的。**

   ④ .team-category-heading::after 是居中的金色小横线，
      和我已经从 .section-heading 去掉的是同一个模板味来源。
   =========================================================================== */

/* ① 故事段 */
.story-section{max-width:760px;padding:28px 32px 64px}
.story-section h2{
  font-family:var(--font-serif);font-size:30px;font-weight:600;letter-spacing:.015em;
  color:var(--navy);text-align:left;line-height:1.5;
  margin:0 0 10px;padding-bottom:16px;border-bottom:1px solid #e3ded4;
}
.story-section p{font-size:15.5px;line-height:2.05;color:#3a4350;margin-bottom:22px}
.story-section p strong{color:var(--ink);font-weight:700}
.story-section .quote{
  font-style:normal;                       /* 中文没有真斜体，取消 */
  border-left:0;padding-left:0;            /* 去掉那条「太low」的竖线 */
  font-family:var(--font-serif);
  font-size:19px;line-height:1.95;color:var(--navy);
  margin:34px 0 10px;padding:26px 0;
  border-top:1px solid #e3ded4;border-bottom:1px solid #e3ded4;
}

/* ② 演进那一带：卡片 → 编号 + 细线，和全站统一 */
.evolve-band{text-align:left;padding:56px 32px 60px}
.evolve-band .section-heading,
.evolve-band .section-sub{max-width:1056px;margin-left:auto;margin-right:auto}
.evolve-grid{
  grid-template-columns:repeat(3,1fr);gap:0;max-width:1056px;
  border-top:1px solid rgba(255,255,255,.18);counter-reset:evolve;margin-top:28px;
}
.evolve-item{
  background:none;border:0;border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.18);
  border-right:1px solid rgba(255,255,255,.18);
  padding:26px 30px 28px;counter-increment:evolve;
  font-size:14px;line-height:1.95;color:rgba(255,255,255,.80);
  transition:background .18s ease;
}
.evolve-item:last-child{border-right:0}
.evolve-item:hover{transform:none;background:rgba(255,255,255,.05)}
.evolve-item:before{
  content:counter(evolve,decimal-leading-zero);
  display:block;font:400 13px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.14em;color:var(--gold);margin-bottom:12px;
}
.evolve-item .title{
  font-family:var(--font-serif);font-size:18px;font-weight:600;letter-spacing:.012em;
  color:#fff;margin-bottom:7px;
}

/* ③ 团队：去掉居中和小金线 */
.team-intro{max-width:760px;margin:0 0 34px;text-align:left;font-size:15px;line-height:2.0;color:#3a4350}
.team-category-heading{
  text-align:left;font-family:var(--font-serif);font-size:17px;font-weight:600;
  letter-spacing:.012em;color:var(--navy);
  padding-bottom:12px;border-bottom:1px solid #e3ded4;margin-bottom:18px;
}
.team-category-heading::after{display:none}

@media (max-width:760px){
  .story-section{padding:22px 20px 44px}
  .story-section h2{font-size:23px}
  .story-section .quote{font-size:17px}
  .evolve-grid{grid-template-columns:1fr}
  .evolve-item{border-right:0;padding:22px 20px 24px}
}

/* 关于页开头那段「实体关系句」（2026-10-25）
   原来是行内写死的：左侧 4px 深色竖线 + 浅绿底 + 单边圆角。
   Lily 2026-10-16 说过「这种地方的引用线太low了」——当时改了正文引用，
   漏了页面最开头这一块，而它恰恰是第一眼看到的东西。

   这一段的作用是给 AI 和搜索引擎一句可直接引用的实体定义
   （「Lily Liu 是 MLS.LINK 的创始人」），所以它该**显得重要但不吵**：
   上方一条金色细线 + 略大的字，不要底色不要圆角不要竖线。 */
.entity-lede{
  font-size:17px;line-height:2.0;color:#3a4350;
  margin:18px 0 26px;padding-top:20px;
  border-top:2px solid var(--gold-dk);
  max-width:860px;
}
.entity-lede strong{color:var(--ink);font-weight:700}
html[lang="en"] .entity-lede{max-width:72ch}

/* ===========================================================================
   A / B 两个计划的价格区（2026-10-25）
   按《MLS Link 升学计划书 · A/B 计划》2026–2027 招募周期版重排。

   为什么不是阶梯：原来是一条 $49 → $75,000 的八级漏斗。新体系是
   **两个并列的计划 × 按年级的年费**，区别只在学术管理的深度。
   把并列关系画成阶梯，家长会以为 B 是 A 的低配版——那是错的。

   视觉仍是全站那一套：细线、衬线小标题、金色编号/标签，没有卡片没有投影。
   价格表用真表格，因为**价格就是表格数据**，用卡片排反而读不出年级之间的递增。
   =========================================================================== */
.plan-entry{
  display:flex;gap:26px;align-items:flex-start;
  border-top:2px solid var(--gold-dk);border-bottom:1px solid #e3ded4;
  padding:26px 0 28px;margin:26px 0 0;
}
.plan-entry .pe-num{
  flex:0 0 auto;font:700 11px/1.5 "Helvetica Neue",sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);padding-top:5px;
}
.plan-entry .pe-title{
  font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:6px;
}
.plan-entry .pe-price{color:var(--navy);font-weight:700}
.plan-entry p{margin:0 0 14px;font-size:14.5px;line-height:1.95;color:#5c5c5c;max-width:620px}

.plan-pair{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid #e3ded4;margin-top:34px;
}
.plan-col{
  border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;
  padding:30px 34px 34px;
}
.plan-col:last-child{border-right:0}
.plan-kicker{
  font:700 11px/1 "Helvetica Neue",sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:11px;
}
.plan-col h3{
  font-family:var(--font-serif);font-size:24px;font-weight:600;letter-spacing:.012em;
  color:var(--navy);margin:0 0 10px;
}
.plan-lead{font-size:14.5px;line-height:1.95;color:#5c5c5c;margin:0 0 20px}
.plan-lead strong{color:#3a4350;font-weight:600}

table.plan-table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:14px}
table.plan-table th{
  text-align:left;font:700 11px/1.6 "Helvetica Neue",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  padding:12px 10px 8px 0;border-bottom:1px solid #e3ded4;white-space:nowrap;
}
table.plan-table thead:not(:first-child) th{padding-top:22px}
table.plan-table td{
  padding:10px 10px 10px 0;border-bottom:1px solid #f0ede7;
  color:#3a4350;line-height:1.7;vertical-align:top;
}
table.plan-table td:nth-child(2){font-weight:700;color:var(--navy);white-space:nowrap}
table.plan-table td:nth-child(3){color:var(--muted);white-space:nowrap}
.plan-note{font-size:13px;line-height:1.95;color:var(--muted);margin:12px 0 0}
.plan-note strong{color:#3a4350;font-weight:600}

/* 五大服务对照：第一列是服务名 + 小字说明 */
.plan-compare{margin-top:44px}
.plan-compare h4,.plan-included h4,.plan-how h4{
  font-family:var(--font-serif);font-size:21px;font-weight:600;letter-spacing:.012em;
  color:var(--navy);margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid #e3ded4;
}
table.plan-table.compare td{padding:14px 14px 14px 0}
table.plan-table.compare td:nth-child(2),
table.plan-table.compare td:nth-child(3){
  font-weight:600;color:var(--navy);white-space:normal;width:24%;
}
table.plan-table.compare td.is-partial{color:#8a6a2f;font-weight:500}
table.plan-table.compare td span{
  display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px;line-height:1.7;
}

.plan-included{margin-top:44px}
.pi-grid,.ph-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid #e3ded4;
}
.ph-grid{grid-template-columns:repeat(3,1fr)}
.pi-item,.ph-item{
  border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;padding:24px 30px 26px;
}
.pi-item:nth-child(2n),.ph-item:last-child{border-right:0}
.pi-item .t,.ph-item .t{
  font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:8px;
}
.pi-item p,.ph-item p{margin:0;font-size:14px;line-height:1.95;color:#5c5c5c}
.pi-price{display:inline-block;margin-top:6px;font-size:13px;color:var(--navy);font-weight:600}

.plan-how{margin-top:44px}
.ph-lead{font-size:15px;line-height:2.0;color:#3a4350;margin:0 0 22px;max-width:820px}
.plan-disclaimer{
  font-size:12.5px;line-height:1.95;color:#8e8e8e;
  margin:34px 0 0;padding-top:20px;border-top:1px solid #e3ded4;
}

@media (max-width:860px){
  .plan-pair,.pi-grid,.ph-grid{grid-template-columns:1fr}
  .plan-col,.pi-item,.ph-item{border-right:0;padding:24px 20px 26px}
  .plan-entry{flex-direction:column;gap:10px}
  table.plan-table{font-size:13px}
  .plan-col h3{font-size:21px}
}

/* 价格区间 + 单项服务（2026-10-25 第二版）
   Lily：「陪跑写个 package A 和 B，价格从最低到最高区间」。

   先给区间、再折叠明细，是故意的顺序：家长第一眼要知道**这件事大概多少钱**，
   而不是先被七行年费表拦住。区间回答「我负不负担得起」，
   明细回答「为什么是这个数」——两个问题的先后顺序不能反。 */
.plan-range{
  font-family:var(--font-serif);font-size:30px;font-weight:600;letter-spacing:.01em;
  color:var(--navy);line-height:1.25;margin:0 0 4px;
}
.plan-range span{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan-range-rmb{font-size:13px;color:var(--muted);margin:0 0 16px;letter-spacing:.01em}

/* 逐年明细折叠：沿用后台那套 details.cl-fold，但在白底页面上去掉灰底 */
.plan-col details.cl-fold{background:none;border-color:#e3ded4;margin:4px 0 14px}
.plan-col details.cl-fold > summary{font-size:12.5px;color:var(--gold-dk);padding:10px 0}
.plan-col details.cl-fold[open] > summary{border-bottom-color:#efece5}
.plan-col details.cl-fold > *:not(summary){padding-left:0;padding-right:0}
.plan-col details.cl-fold table.plan-table{margin-bottom:4px}

/* 单项服务四格：比「都包含」那组多一行价格，所以给价格更重的分量 */
.pi-grid.svc-single .pi-item{padding:26px 30px 28px}
.pi-grid.svc-single .pi-price{
  margin-top:12px;padding-top:12px;border-top:1px solid #efece5;
  display:block;font-size:14.5px;color:var(--navy);font-weight:700;
}
.pi-tag{
  font:700 10.5px/1 "Helvetica Neue",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dk);vertical-align:middle;
}

@media (max-width:860px){
  .plan-range{font-size:25px}
}

/* 美高申请季服务（2026-10-25）
   产品是单一价 $20,000 / 12 个月 / 18 所学校，不是按年级分档。
   所以视觉重心是**四个数字**（12 / 18 / 24 / $20,000），
   而不是一张价目表——一个价格的产品，用表格排反而显得心虚。

   ⚠️ .hs- 前缀和首屏那组（.hs-quote / .hs-proof）同前缀但不同名，
   已核对无冲突。下次再加 .hs-* 记得先 grep。 */
.hs-head{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid #e3ded4;border-bottom:1px solid #e3ded4;margin:26px 0 0;
}
.hs-stat{padding:24px 26px 26px;border-right:1px solid #e3ded4}
.hs-stat:last-child{border-right:0}
.hs-stat .n{
  font-family:var(--font-serif);font-size:34px;font-weight:600;
  color:var(--navy);line-height:1.1;letter-spacing:.01em;
}
.hs-stat .l{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.6}
.hs-stat.is-price{background:rgba(0,92,56,.035)}
.hs-stat.is-price .n{font-size:30px}

.hs-tier{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-bottom:1px solid #e3ded4;
}
.hs-t{padding:24px 26px 26px;border-right:1px solid #e3ded4}
.hs-t:last-child{border-right:0}
.hs-t .num{
  display:block;font-family:var(--font-serif);font-size:26px;font-weight:600;
  color:var(--gold-dk);line-height:1;margin-bottom:9px;
}
.hs-t .t{
  font-family:var(--font-serif);font-size:17px;font-weight:600;
  color:var(--ink);margin-bottom:6px;letter-spacing:.012em;
}
.hs-t p{margin:0;font-size:13.5px;line-height:1.9;color:#5c5c5c}

/* 24 项清单：折叠在里面，展开后按三组 + 时间线 */
.hs-list{padding-top:4px}
.hs-group{margin-bottom:26px}
.hs-group:last-child{margin-bottom:6px}
.hs-group .g-head{
  font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--navy);
  padding-bottom:10px;border-bottom:1px solid #e3ded4;margin-bottom:12px;
}
.hs-group .g-head span{
  display:inline-block;font:400 12px/1 "Helvetica Neue",sans-serif;
  letter-spacing:.14em;color:var(--gold-dk);margin-right:12px;
}
.hs-group ol{margin:0;padding-left:0;list-style:none;counter-reset:hs}
.hs-group ol li{
  counter-increment:hs;position:relative;padding:8px 0 8px 40px;
  font-size:13.5px;line-height:1.9;color:#5c5c5c;border-bottom:1px solid #f4f1ec;
}
.hs-group ol li:last-child{border-bottom:0}
.hs-group ol li:before{
  content:counter(hs,decimal-leading-zero);position:absolute;left:0;top:9px;
  font:400 12px/1.5 "Helvetica Neue",sans-serif;letter-spacing:.1em;color:var(--gold-dk);
}
.hs-group table.plan-table td:first-child{
  white-space:nowrap;font-weight:700;color:var(--navy);width:118px;
}

@media (max-width:860px){
  .hs-head{grid-template-columns:repeat(2,1fr)}
  .hs-stat:nth-child(2n){border-right:0}
  .hs-stat:nth-child(-n+2){border-bottom:1px solid #e3ded4}
  .hs-tier{grid-template-columns:1fr}
  .hs-t{border-right:0;border-bottom:1px solid #e3ded4}
  .hs-t:last-child{border-bottom:0}
  .hs-stat,.hs-t{padding:20px}
}

/* 首页那句转介绍（2026-10-26）
   原来是「推荐朋友，双方各得 $30」三张卡 + 一段规则说明。
   换成一句话之后，排版上要**安静但有分量**：居中、衬线、字大、
   上下留白，上下各一条细线把它和前后隔开。
   一句话如果用正文大小排，会被读成脚注；它应该像一句题词。 */
.referral-note{
  max-width:1056px;margin:0 auto;
  border-top:1px solid #e3ded4;border-bottom:1px solid #e3ded4;
  padding:52px 20px;text-align:center;
}
.referral-note p{
  margin:0;font-family:var(--font-serif);
  font-size:24px;line-height:1.85;letter-spacing:.015em;color:var(--navy);
}
.referral-note strong{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .referral-note{padding:36px 18px}
  .referral-note p{font-size:19px}
}

/* 留资弹窗成功态的「现在就开始测评」按钮（2026-10-26）
   原来成功态是死胡同：「券已到账」然后就没了，用户只能关掉。
   换成测评入口后，成功态应该**接着往下走**——
   刚留完邮箱的人是意愿最高的那一刻，让他等邮件等于把这个人丢掉。 */
.lead-modal-go{
  display:inline-block;margin-top:14px;font-size:14px;font-weight:700;
  color:var(--navy);text-decoration:underline;
  text-decoration-color:rgba(0,92,56,.4);text-underline-offset:.22em;
}
.lead-modal-go:hover{text-decoration-color:var(--navy)}

/* 免费测评结果页（2026-10-26）
   这一页只有一个任务：让刚填完 55 个字段的人**觉得拿到了东西**。
   所以视觉重心是那个百分比——大、衬线、单独占一块，
   其余都是围绕它的解释。
   沿用全站语言：细线、金色小标、没有卡片没有投影。 */
.ar-head{border-bottom:1px solid #e3ded4;padding-bottom:20px;margin-bottom:28px}
.ar-kicker{font:700 11px/1 "Helvetica Neue",sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:11px}
.ar-head h1{font-family:var(--font-serif);font-size:32px;font-weight:600;
  letter-spacing:.015em;color:var(--navy);margin:0 0 10px;line-height:1.4}
.ar-sub{font-size:15px;line-height:2;color:#5c5c5c;margin:0;max-width:700px}

.ar-main{display:flex;gap:34px;align-items:flex-start;
  border-bottom:1px solid #e3ded4;padding-bottom:28px;margin-bottom:28px}
.ar-main-partial{padding-top:4px}
.ar-big{flex:0 0 auto;text-align:center;padding:4px 24px 0 0;border-right:1px solid #e3ded4}
.ar-big .n{font-family:var(--font-serif);font-size:62px;font-weight:600;
  color:var(--navy);line-height:1}
.ar-big .n span{font-size:26px;color:var(--muted)}
.ar-big .l{font-size:12.5px;color:var(--muted);margin-top:8px;white-space:nowrap}
.ar-main-copy p{margin:0 0 12px;font-size:15px;line-height:2.05;color:#3a4350}
.ar-main-copy strong{color:var(--ink)}
.ar-src{font-size:12.5px;color:#8e8e8e;line-height:1.85}

.ar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid #e3ded4;margin-bottom:28px}
.ar-item{border-bottom:1px solid #e3ded4;border-right:1px solid #e3ded4;padding:22px 26px 24px}
.ar-item:last-child{border-right:0}
.ar-item .t{font-size:12.5px;color:var(--muted);margin-bottom:7px}
.ar-item .v{font-family:var(--font-serif);font-size:26px;font-weight:600;
  color:var(--navy);line-height:1.2;margin-bottom:8px}
.ar-item p{margin:0;font-size:13px;line-height:1.9;color:#5c5c5c}

.ar-missing{border:1px solid #e3ded4;background:#fcfbf8;padding:20px 24px;margin-bottom:26px}
.ar-missing .t{font-family:var(--font-serif);font-size:17px;font-weight:600;
  color:var(--navy);margin-bottom:10px}
.ar-missing ul{margin:0;padding-left:20px;font-size:14px;line-height:2;color:#5c5c5c}
.ar-link{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;
  color:var(--gold-dk);text-decoration:underline;
  text-decoration-color:rgba(163,126,44,.45);text-underline-offset:.22em}

.ar-disclaimer{font-size:12.5px;line-height:1.95;color:#8e8e8e;
  padding-top:18px;border-top:1px solid #e3ded4;margin:0 0 30px}

.ar-next .t{font-family:var(--font-serif);font-size:19px;font-weight:600;
  color:var(--navy);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #e3ded4}
.ar-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ar-next-item{display:block;padding:20px 24px 22px;text-decoration:none;
  border-right:1px solid #e3ded4;border-bottom:1px solid #e3ded4;transition:background .18s ease}
.ar-next-item:last-child{border-right:0}
.ar-next-item:hover{background:rgba(0,92,56,.03)}
.ar-next-item .h{font-family:var(--font-serif);font-size:16px;font-weight:600;
  color:var(--ink);margin-bottom:6px}
.ar-next-item p{margin:0;font-size:13px;line-height:1.85;color:#5c5c5c}

@media (max-width:820px){
  .ar-head h1{font-size:25px}
  .ar-main{flex-direction:column;gap:18px}
  .ar-big{border-right:0;border-bottom:1px solid #e3ded4;padding:0 0 16px;
    text-align:left;width:100%}
  .ar-grid,.ar-next-grid{grid-template-columns:1fr}
  .ar-item,.ar-next-item{border-right:0}
}


/* 结果页里「补完去哪看」的说明句 + 目标校入口块（2026-10-26）
   Lily：「一旦补齐了报告会在哪里看到呢？没有说清楚」
         「你想去哪一所大学，这里也没有给入口去填写」 */
.ar-note{margin:8px 0 0;font-size:13px;line-height:1.95;color:#6f6f6f}
.ar-target{background:#fff;border-color:#d8d2c6}
.ar-target .t{color:var(--navy)}