@charset "UTF-8";
/* ============================================================
   Centred layout + restrained type scale.
   Loaded after theme-dark.css. Sizes measured from the reference
   site, with letter-spacing left at normal: tight tracking is a
   latin habit and it smears CJK.
   ============================================================ */

:root{
  --t-display:clamp(32px,5.8vw,60px);
  --t-h2:clamp(23px,3.1vw,30px);
  --t-lead:20px;
  --t-card:18px;
  --t-body:16px;
  --t-small:14px;
  --ink-1:#fff;
  --ink-2:rgba(255,255,255,.6);
  --ink-3:rgba(255,255,255,.5);
  --ink-4:rgba(255,255,255,.4);
}

/* ---------- container ---------- */
.wrap{width:min(1024px,calc(100% - 48px))}
.header .nav.wrap{width:min(1180px,calc(100% - 48px))}

h1,h2,h3,h4{letter-spacing:normal}

/* ---------- hero: centred, text only ---------- */
.hero{
  display:block;text-align:center;
  min-height:0;padding-block:132px 0;
}
.hero-copy{max-width:820px;margin-inline:auto}

.hero .eyebrow{margin-bottom:26px;letter-spacing:normal}

#hero-title{
  font-size:var(--t-display);
  font-weight:700;
  line-height:1.16;
  letter-spacing:normal;
  margin-inline:auto;
}
#hero-title br{display:none}
#hero-title .underlined{box-shadow:inset 0 -.09em 0 rgba(255,106,43,.6)}

.hero .intro{
  font-size:var(--t-lead);
  line-height:28px;
  color:var(--ink-2);
  max-width:640px;
  margin:22px auto 0;
}
.hero .intro .desktop-break{display:none}

.hero-actions{justify-content:center;gap:14px;margin-top:34px}

/* fact chips under the buttons */
.hero-facts{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  border-top:0;padding-block:30px 0;
  font-family:var(--geist);font-size:13.5px;
}
.hero-facts i{display:none}
.hero-facts span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--hair-soft);
  color:var(--ink-2);
}
.hero-facts span::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--warm);flex:0 0 5px;
}

/* ---------- section headers: centred ---------- */
.section{padding-block:84px}
.section-index{justify-content:center;gap:12px;margin-bottom:16px;font-size:11px;letter-spacing:.14em}
.section > h2,
.section > .section-intro,
.closing,
.examples-cta,
.invitation{text-align:center}
h2{
  font-size:var(--t-h2);
  line-height:1.38;
  font-weight:700;
  letter-spacing:normal;
}
h2 br{display:none}
.section-intro{
  font-size:var(--t-body);
  line-height:24px;
  color:var(--ink-3);
  max-width:640px;
  margin:14px auto 40px;
}
.section-intro br{display:none}

/* ---------- cards: header centred, body left ---------- */
h3{font-size:var(--t-card);line-height:28px;font-weight:600}
.example h4{
  font-family:var(--geist);
  font-size:var(--t-card);line-height:28px;font-weight:600;
  margin:0 0 8px;
}
.example{padding:20px;border-radius:14px;border-bottom:1px solid var(--hair-soft)}
.example p{font-size:var(--t-body);line-height:24px;color:var(--ink-3)}
.example-label{font-size:12px;letter-spacing:.06em;color:var(--ink-4)}

.example-group-heading{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;margin-block:48px 20px;
}
.example-group-heading h3{font-size:var(--t-h2);line-height:1.38;font-weight:700}
.example-group-heading span{font-size:12px;letter-spacing:.12em;color:var(--ink-4)}

/* reason cards */
.reason-list article{padding:20px;border-radius:14px;margin-bottom:12px}
.reason-list h3{margin-bottom:6px}
.reason-line{font-size:var(--t-body);line-height:24px;color:var(--ink-3)}
.reason-number{color:var(--warm);font-size:13px}

/* course days */
.day{gap:28px;padding-block:32px}
.day-content h3{font-size:var(--t-h2);line-height:1.38;font-weight:700;margin-bottom:8px}
.day-content > p{font-size:var(--t-body);line-height:24px;color:var(--ink-3)}
.day-content h4{font-size:var(--t-body);line-height:24px;font-weight:600}
.day-content li p{font-size:var(--t-small);line-height:22px;color:var(--ink-4)}

/* case tabs */
.case-tabs{justify-content:center;flex-wrap:wrap}
.case-tab{font-size:var(--t-small)}
.case-problem-line{font-size:var(--t-body);line-height:24px;color:var(--ink-2);text-align:center;margin-bottom:14px}
.case-result{font-size:var(--t-small);line-height:22px;color:var(--ink-4);text-align:center}
.course-example-head{justify-content:center;text-align:center}
.course-example-foot{text-align:center;font-size:var(--t-small);color:var(--ink-4)}

/* toolkit */
.toolkit-heading{text-align:center}
.toolkit-heading p{font-size:var(--t-body);color:var(--ink-3)}
.tool-item span{font-size:var(--t-small)}
.tool-item small{font-size:12px;color:var(--ink-4)}

/* invitation / cta blocks stack */
.invitation,.examples-cta{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.invitation p{font-size:var(--t-h2);line-height:1.38;font-weight:700}
.invitation span,.examples-cta p{font-size:var(--t-body);line-height:24px;color:var(--ink-3)}
.examples-cta h3{font-size:var(--t-h2);line-height:1.38;font-weight:700;margin-bottom:6px}

/* faq */
.faq-list summary span:not(.faq-no){font-size:var(--t-card);font-weight:600}
.faq-list details p{font-size:var(--t-body);line-height:26px;color:var(--ink-3)}
.faq-no{color:var(--warm);font-size:13px}

/* join */
.join-inner{align-items:center}
.join-copy h2{text-align:left}
.join-info dd{font-size:var(--t-body)}
.join-info dt{font-size:12px;color:var(--ink-4)}

/* closing */
.closing{padding-block:84px}
.closing p{font-size:var(--t-body);color:var(--ink-3);margin-bottom:14px}
.closing h2{margin-bottom:28px}
.closing .button{margin-inline:auto}

.course-note{font-size:13px;line-height:22px;color:var(--ink-4);text-align:center;max-width:640px;margin-inline:auto}
.footer{font-size:var(--t-small)}

/* buttons sit at the reference's scale */
.button{font-size:15px;min-height:48px;padding:14px 24px;gap:10px}

@media (max-width:760px){
  .hero{padding-top:116px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{width:100%}
  .section{padding-block:60px}
}

/* ============================================================
   JOIN — the original block was an inverted panel (dark bg,
   light text) written as color:var(--paper). After the palette
   flip --paper is near-black, so it rendered black on black.
   Everything here re-states the colours for a dark page.
   ============================================================ */
.join{color:var(--text)}
.join .join-inner{
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  padding-block:76px;
  align-items:center;
}
.join h2{
  font-size:var(--t-h2);
  line-height:1.38;
  font-weight:700;
  letter-spacing:normal;
  color:#fff;
  text-align:left;
}
.join .section-index{justify-content:flex-start;color:var(--warm)}
.join .section-index span{color:var(--ink-4)}
.join-copy>p{
  font-size:var(--t-body);
  line-height:24px;
  color:var(--ink-3);
  border-top:1px solid var(--hair-soft);
  margin-top:24px;padding-top:20px;
}

/* the detail card becomes glass like every other surface */
.join-info{
  padding:26px 28px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hair-soft);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.join dl{
  margin:0 0 22px;
  border-left:1px solid rgba(255,106,43,.35);
  padding-left:22px;
}
.join dl>div{font-size:var(--t-body);gap:20px;padding-block:8px;align-items:baseline}
.join dt{color:var(--ink-4);font-size:13px;min-width:38px}
.join dd{color:rgba(255,255,255,.88)}
.join dd span{color:var(--ink-4);font-size:13px}
.join-info>.button{align-self:stretch;width:100%;margin-top:4px}
.join-info>p{font-size:13px;line-height:20px;color:var(--ink-4);margin-top:14px;text-align:center}

@media (max-width:860px){
  .join .join-inner{grid-template-columns:1fr;gap:28px;padding-block:52px}
  .join h2,.join .section-index{text-align:center;justify-content:center}
}

/* ============================================================
   HERO: readable without any animation finishing.

   styles.css parks .hero-copy's children at opacity:0 and relies on
   a CSS keyframe to bring them back. If that animation is throttled,
   interrupted, or never ticks — a background tab, a slow device, a
   paused compositor — the first screen stays blank. A landing page
   cannot have its headline depend on an animation completing.

   So the resting state here is visible. The entrance is additive:
   hero-motion.js sets its own from-state and owns the end state, and
   only when motion is actually on.
   ============================================================ */
.js-ready .hero-copy>*,
.js-ready .hero-facts{
  opacity:1;
  animation:none;
}

/* hero-motion.js splits the headline on <br> into spans to animate the
   lines separately — which throws the line break away. Without this the
   headline reflows as one run ("Vibe CodingAI Agent 线下班") for every
   visitor who has motion on. */
#hero-title .hero-flight-line{display:block}