/* Homepage "What we teach": three pillar cards that open one shared inline panel (xpand.js).
   Markup generated by build_pillars.py. */
body.home .pillars .sec-head { max-width: 980px; }
body.home .pillars .pl-intro { margin: 18px 0 0; max-width: 60ch; }
body.home .pillar-row { align-items: stretch; }
body.home .pillar-row .pillar-card { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; cursor: pointer; padding: 24px 26px 26px !important; background: #FBF6EF; border: 1px solid var(--border-paper); border-radius: 16px; transition: border-color .3s, box-shadow .4s var(--e, ease), transform .4s var(--e, ease), opacity .3s; }
body.home .pillar-row .pillar-card:hover { transform: translateY(-3px); border-color: rgba(11,26,74,.28); box-shadow: 0 22px 44px -28px rgba(11,26,74,.4); }
body.home .pillar-row .pillar-card:focus-visible { outline: 2px solid var(--ink-2, #2F55A8); outline-offset: 3px; }
body.home .pillar-row .pillar-card[aria-expanded="true"] { background: #fff !important; border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink), 0 18px 38px -28px rgba(11,26,74,.45) !important; transform: none; }
body.home .pillar-row.has-open .pillar-card[aria-expanded="false"] { opacity: .72; }
body.home .pillar-row.has-open .pillar-card[aria-expanded="false"]:hover { opacity: 1; }
body.home .pl-num { display: block; margin-bottom: 14px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--coral-deep); width: max-content; }
body.home .pillar-row .prog-h { display: block; font: 500 26px/1.15 var(--font-display) !important; margin: 0 0 8px !important; color: var(--ink); }
body.home .pillar-row .pillar-tag { display: block; margin: 0 !important; padding-right: 44px; font-size: 15.5px; line-height: 1.45; color: var(--text-ink-soft); }
body.home .pl-plus { position: absolute; right: 22px; bottom: 22px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-paper); transition: background .3s, border-color .3s, transform .45s var(--e, ease); }
body.home .pl-plus::before, body.home .pl-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink); border-radius: 1px; transition: background .3s; }
body.home .pl-plus::after { transform: rotate(90deg); }
body.home .pillar-card:hover .pl-plus { border-color: rgba(11,26,74,.35); }
body.home .pillar-card[aria-expanded="true"] .pl-plus { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); }
body.home .pillar-card[aria-expanded="true"] .pl-plus::before, body.home .pillar-card[aria-expanded="true"] .pl-plus::after { background: #fff; }
body.home .pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* panel */
body.home .pl-panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; margin-top: -14px; transition: grid-template-rows .55s var(--e, cubic-bezier(.2,.7,.2,1)), margin-top .55s var(--e, ease); }
body.home .pl-panel.is-open { grid-template-rows: 1fr; margin-top: 0; }
body.home .pl-clip { min-height: 0; overflow: hidden; padding-top: 10px; }
body.home .pl-box { position: relative; margin-bottom: 2px; background: #fff; border: 1px solid var(--border-paper); border-radius: 18px; }
body.home .pl-box::before { content: ""; position: absolute; top: -8px; left: var(--nx, 40px); width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--border-paper); border-top: 1px solid var(--border-paper); transform: rotate(45deg); transition: left .45s var(--e, ease); }
body.home .pl-sec { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 48px; padding: 34px 38px 32px; animation: plIn .5s var(--e, ease) both; }
body.home .pl-sec[hidden] { display: none; }
@keyframes plIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.home .pl-lab { margin: 0 0 14px; font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-ink-muted); }
body.home .pl-lead { margin: 0 0 22px; font: 400 22px/1.45 var(--font-display); color: var(--ink); text-wrap: pretty; }
body.home .pl-body .tlink { font-weight: 500; font-size: 15px; }
body.home .pl-prac { border-left: 1px solid var(--border-paper); padding-left: 40px; }
body.home .pl-prac ol { list-style: none; counter-reset: pl; margin: 0; padding: 0; }
body.home .pl-prac li { counter-increment: pl; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(11,26,74,.08); font-size: 15px; line-height: 1.5; color: var(--text-ink-soft); }
body.home .pl-prac li:first-child { border-top: 0; padding-top: 0; }
body.home .pl-prac li::before { content: counter(pl, decimal-leading-zero); font: 500 11px/1.9 var(--font-mono); letter-spacing: .08em; color: var(--coral-deep); }
html[lang="zh-CN"] body.home .pl-lead { font-family: var(--font-body); font-size: 18px; line-height: 1.8; }

@media (max-width: 1100px) { body.home .pl-sec { grid-template-columns: 1fr; gap: 24px; } body.home .pl-prac { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-paper); padding-top: 22px; } }
@media (max-width: 900px) {
  body.home .pl-panel { margin-top: -10px; }
  body.home .pillar-row .pillar-card { padding: 18px 20px !important; }
  body.home .pl-num { margin-bottom: 10px; }
  body.home .pillar-row .prog-h { font-size: 22px !important; margin-bottom: 4px !important; }
  body.home .pl-plus { top: 50%; bottom: auto; margin-top: -16px; right: 18px; }
  body.home .pl-sec { padding: 22px 18px; }
  body.home .pl-lead { font-size: 18px; }
  html[lang="zh-CN"] body.home .pl-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .pillar-row .pillar-card, body.home .pl-panel, body.home .pl-plus, body.home .pl-box::before { transition: none !important; }
  body.home .pl-sec { animation: none; }
  body.home .pillar-row .pillar-card:hover { transform: none; }
}

/* Hero: rotating audience word (hero-rotator.js). Without JS or with reduced motion, "students" shows inline. */
.hero-riso-h1 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hr-rot { display: inline-grid; vertical-align: bottom; color: var(--ink-2, #2F55A8); }
.hr-rot > span { grid-area: 1 / 1; white-space: nowrap; }
.hr-rot > span:not(.is-on) { visibility: hidden; }
.hr-rot.is-live { overflow: hidden; transition: width .5s var(--e, cubic-bezier(.2,.7,.2,1)); padding-bottom: .08em; margin-bottom: -.08em; }
.hr-rot.is-live > span { justify-self: start; visibility: visible; opacity: 0; transform: translateY(.45em); transition: opacity .45s, transform .55s var(--e, cubic-bezier(.2,.7,.2,1)); }
.hr-rot.is-live > span.is-on { opacity: 1; transform: none; }
.hr-rot.is-live > span.is-out { opacity: 0; transform: translateY(-.45em); }

/* fade the panel in with the unfurl, and back out as it folds */
.pl-box { opacity: 0; transition: opacity .35s ease; }
.pl-panel.is-open .pl-box { opacity: 1; transition-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .pl-box { transition: none; } }

/* "What it changes": school / work / career rows instead of numbered practice steps */
body.home .pl-impact li { grid-template-columns: 112px 1fr !important; align-items: baseline; }
body.home .pl-impact li::before { content: none !important; }
body.home .pl-impact .pl-where { font: 500 10px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep); }
html[lang="zh-CN"] body.home .pl-impact .pl-where { letter-spacing: .04em; font-size: 12px; }
@media (max-width: 600px) { body.home .pl-impact li { grid-template-columns: 1fr !important; gap: 4px !important; } }

/* Pillar cards keep their 3px lift; an invisible strip under the raised card keeps the pointer "on" it,
   so a pointer resting at the bottom edge no longer flickers the hover on and off. */
body.home .pillar-row .pillar-card:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }