@charset "UTF-8";
/* Approved forest + lemon VI. Color carries hierarchy; reading surfaces stay white. */
:root {
  --vi-primary:#153f32; --vi-accent:#e7ed7b; --vi-on-accent:#243b2b;
  --vi-hero-muted:#d5e4dc;
  --bg:#fff; --paper:#fff; --utility:#f5f6f4;
  --ink:#202b25; --muted:#646e67; --line:#dce3dd;
  --brand:#1d6248; --brand-fill:#1d6248; --brand-dark:#153f32;
  --pale:#edf3ee; --faint:#f5f8f5;
  --gold:#48521d; --sun:#e7ed7b; --sun-soft:#e7ed7b; --warm:#f6f8dc;
  --focus:#417e64; --radius:6px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
button,.button-link,input,select,textarea {border-radius:5px}
button:focus-visible,a:focus-visible,summary:focus-visible {outline-color:var(--focus)}
.soft:hover {background:#e1ece3}
.tag,.term {border-radius:3px}
.tag.warn,.term {color:var(--vi-on-accent)}
h1 {font-weight:650}
.title-highlight {background:linear-gradient(transparent 72%,var(--vi-accent) 72%,var(--vi-accent) 96%,transparent 96%)}

/* Keep the full role-specific navigation, with one unambiguous selected item. */
#sidebar {background:#fff}
.brand-icon {background:var(--vi-primary);color:var(--vi-accent);border-radius:5px;font-family:"Songti SC","STSong",serif;font-size:22px;font-weight:700}
.brand strong {font-size:18px;font-weight:650}
.space-switch select {border-color:var(--line);color:var(--vi-primary)}
nav button {color:var(--muted);border-radius:5px}
nav button.active,nav button.active:hover {background:var(--vi-primary);color:#fff}
nav button.active .nav-icon {color:var(--vi-accent)}
.segmented .active,.login-switch .active {box-shadow:none;border:1px solid var(--line)}
.program-card,.student-card,dialog,.notice,.empty,.survey-reminder,.program-checks {border-radius:7px}
.program-index {background:var(--vi-accent);color:var(--vi-primary);border-radius:3px}
.notice,.survey-copy p {color:var(--vi-on-accent)}
.survey-reminder {border-color:#e0e6b8}
.survey-reminder.reported {border-color:var(--line)}
.grid4 .stat:last-child,.grid3 .stat:last-child {background:var(--vi-accent);border-radius:5px}

/* Login uses the same unmistakable brand surface as the course and home pages. */
.login-story {background:var(--vi-primary);color:#fff;border-radius:7px}
.login-story .eyebrow,.login-story p,.login-arc {color:var(--vi-hero-muted)}
.login-story .title-highlight {color:var(--vi-accent);background:none;padding:0}
.login-arc {border-color:#ffffff30}
.login-arc span {color:var(--vi-accent)}

/* Home: forest welcome + one lemon spotlight, drawn from the existing live feed. */
.insight-hero {display:grid;grid-template-columns:1fr;gap:32px;padding:32px;background:var(--vi-primary);color:#fff;border-radius:7px;margin-bottom:34px}
.insight-hero.has-feature {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}
.insight-welcome {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:21px;margin:0;min-width:0}
.insight-eyebrow {color:var(--vi-hero-muted);font-size:12px;letter-spacing:.6px;margin-bottom:15px}
.insight-welcome h1 {font-size:clamp(28px,2.6vw,36px);font-weight:650;line-height:1.5;letter-spacing:-.7px}
.insight-welcome .title-highlight {color:var(--vi-accent);background:none;padding:0}
.insight-welcome p {color:var(--vi-hero-muted);font-size:14px;line-height:1.9;margin-top:16px;max-width:380px}
.insight-count {display:flex;flex-direction:row;align-items:baseline;gap:7px;padding:0}
.insight-count b {font-size:23px;color:var(--vi-accent);font-weight:500;line-height:1.4}
.insight-count span {font-size:11px;color:var(--vi-hero-muted);margin:0}
.insight-feature {display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;padding:25px 26px;background:var(--vi-accent);color:var(--vi-on-accent);border-radius:4px;overflow:visible}
.insight-feature:before {display:none}
.insight-feature-label {color:var(--vi-on-accent);font-size:11px;letter-spacing:.5px;font-weight:500}
.insight-feature blockquote {font-size:24px;font-weight:600;line-height:1.7;margin:18px 0 22px;letter-spacing:-.3px}
.insight-feature-foot {font-size:12px;align-items:center;flex-wrap:wrap;gap:10px}
.insight-feature-foot .muted {color:var(--vi-on-accent)}
.insight-feature-foot .quiet {color:var(--vi-on-accent);border:1px solid #243b2b40;padding:7px 10px;border-radius:4px;font-size:11px}
.insight-feature-foot .quiet:hover {background:#ffffff60}
.insight-hero button:focus-visible {outline-color:var(--vi-accent)}
.insight-feature button:focus-visible {outline-color:var(--vi-primary)}
.insight-mobile-continue .soft {background:var(--vi-accent);color:var(--vi-on-accent)}
.insight-study-card {border:1px solid var(--line);background:#fff;border-radius:6px}
.insight-study-card .yellow-label {font-size:11px;font-weight:500;background:var(--pale);color:var(--vi-primary)}
.insight-filters button.is-selected,.gallery-filters button.selected {background:var(--vi-primary);color:#fff}
.insight-card {border-color:var(--line);border-radius:6px;box-shadow:none;padding:24px}
.insight-quote-block {background:transparent;border:0;border-radius:0;padding:0;margin:2px 0 21px}
.insight-block-label,.insight-gains-block .insight-block-label {color:var(--vi-primary);font-size:11px;font-weight:600;letter-spacing:.5px}
.insight-quote-block .insight-pullquote {font-size:20px;font-weight:600;line-height:1.75;letter-spacing:-.2px}
.insight-quote-block mark {background:linear-gradient(transparent 73%,var(--vi-accent) 73%,var(--vi-accent) 97%,transparent 97%)}
.insight-gains-block {background:transparent;border-radius:0;border-top:1px solid var(--line);padding:17px 0 0;margin-bottom:24px}
.insight-gains-block ul {counter-reset:takeaway}
.insight-gains-block li {counter-increment:takeaway;padding-left:22px;color:var(--muted);font-size:14px;line-height:1.9}
.insight-gains-block li:before {content:"0" counter(takeaway);color:var(--vi-primary);background:none;width:auto;height:auto;top:3px;border-radius:0;font-size:10px;font-weight:600}
.insight-gains-block mark {font-weight:400}
.insight-inline-highlight {background:var(--vi-accent);color:var(--vi-on-accent)}
.insight-card .insight-footer {gap:4px}

/* Lessons: six clear chapters, one forest summary, and a focused practice panel. */
.course-page-head h1 {font-size:32px;font-weight:650}
.course-tabs {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;border:0;margin-bottom:25px;overflow:visible}
.course-tabs button {min-width:0;min-height:85px;gap:10px;padding:14px 12px;background:var(--pale);border-radius:5px;color:var(--muted)}
.course-tab-number {font-size:17px;font-weight:400;min-width:0;min-height:0;padding:0;margin:0;color:var(--muted);border-radius:0;letter-spacing:0;line-height:1.25}
.course-tab-name {font-size:16px;font-weight:600;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.course-tabs button:not(:last-child):before,.course-tabs button[aria-selected=true]:after {display:none}
.course-tabs button:hover {background:#e1ece3}
.course-tabs button[aria-selected=true],.course-tabs button[aria-selected=true]:hover {background:var(--vi-primary);color:#fff}
.course-tabs button[aria-selected=true] .course-tab-number {background:none;color:var(--vi-accent);font-weight:400}
.course-summary {background:var(--vi-primary);color:#fff;padding:29px 32px;border-radius:6px;align-items:center;margin-bottom:28px}
.course-summary>div:first-child {min-width:0}
.course-summary-side {display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex-shrink:0}
.course-summary-index {color:var(--vi-accent);font-family:"Optima","Georgia",serif;font-size:86px;font-weight:400;line-height:1;letter-spacing:-4px}
.course-summary h2 {font-size:28px;font-weight:600;line-height:1.5}
.course-meta,.course-summary p {color:var(--vi-hero-muted)}
.course-meta {font-size:12px;margin-bottom:13px}
.course-meta>span {color:var(--vi-on-accent);border-radius:3px}
.course-summary p {font-size:14px;line-height:1.9}
.course-summary-side>button {color:#fff;background:transparent;border:1px solid #ffffff50;margin-top:0;font-size:13px}
.course-summary-side>button:hover {background:#ffffff18}
.course-summary button:focus-visible {outline-color:var(--vi-accent)}
.course-layout {grid-template-columns:minmax(0,1fr) 280px;gap:30px;border-top:0;padding-top:0;align-items:start}
.practice-aside {padding:24px;border:0;border-radius:5px;background:var(--vi-accent);color:var(--vi-on-accent)}
.practice-aside .yellow-label {padding:0;border-radius:0;background:none;font-size:12px;font-weight:500}
.practice-aside>h3 {font-size:20px;font-weight:600;line-height:1.65}
.practice-aside .muted {color:var(--vi-on-accent);font-size:14px}
.practice-aside .tag {background:#ffffff88;color:var(--vi-on-accent)}
.practice-deliverable {margin:21px 0 0;padding:17px 0 0;border-top:1px solid #243b2b33;border-radius:0;background:none}
.practice-deliverable strong,.practice-deliverable p {color:var(--vi-on-accent);font-size:13px}
.practice-aside>button {background:var(--vi-primary);color:#fff;font-size:13px;max-width:100%}
.practice-aside>button:hover {background:var(--brand)}
.material-icon {background:var(--pale);border-color:var(--line);border-radius:4px}
.lesson-focus {background:var(--vi-primary);color:#fff;border-radius:6px}
.lesson-focus p,.lesson-focus .eyebrow {color:var(--vi-hero-muted)}
.lesson-focus .soft,.lesson-focus .primary {background:var(--vi-accent);color:var(--vi-on-accent);border-color:var(--vi-accent)}
.lesson-focus .quiet {color:#fff}
.lesson-folio {background:none;color:var(--vi-accent);border-radius:0}
.lesson-folio span {color:var(--vi-hero-muted)}
.next-step-note,.task-check {background:var(--warm);border-radius:5px}
.next-step-note>h3,.next-step-note .muted {color:var(--vi-on-accent)}

/* Supporting pages share the palette without adding another competing hero. */
.gallery-card {border-color:var(--line);border-radius:6px;box-shadow:none}
.gallery-card:hover {box-shadow:0 6px 24px #153f320c}
.gallery-hero h1 {font-size:36px;font-weight:650}
.gallery-hero-stat {background:var(--vi-accent);color:var(--vi-on-accent);border-radius:5px;transform:none}
.gallery-hero-stat strong,.gallery-hero-stat small {color:var(--vi-on-accent)}
.gallery-stage {color:var(--vi-primary);border-radius:3px}
.gallery-stage.in-progress {background:var(--warm);color:var(--gold)}
.gallery-art,.gallery-art.art-2,.gallery-art.art-4 {background:var(--pale);color:var(--vi-primary)}
.gallery-art.art-1 {background:var(--vi-accent);color:var(--vi-on-accent)}
.gallery-art.art-3 {background:var(--vi-primary);color:var(--vi-accent)}
.gallery-invite,.work-gallery-share {background:var(--faint);border-color:var(--line);border-radius:6px}
.gallery-card-footer {border-color:var(--line)}
.referral-campaign {background:var(--pale);border-color:var(--line);border-radius:6px}
.referral-campaign .referral-price {background:var(--vi-accent);color:var(--vi-on-accent)}
.referral-reward>strong {color:var(--vi-primary)}
.referral-stats,.referral-share-card,.referral-lead {border-radius:6px;border-color:var(--line)}
.referral-alert,.referral-consent {border-radius:5px}
.referral-alert {background:var(--warm);color:var(--vi-on-accent)}
.referral-consent {background:var(--faint)}
.ai-button {background:var(--vi-accent);color:var(--vi-on-accent);border-color:var(--vi-accent)}
.ai-button:hover {background:#dce46b}
.ai-feedback-panel {border-color:#e0e6b8;background:#fafbee;border-radius:6px}
.ai-provider {color:var(--gold)}

@media(max-width:1130px) {
  .insight-hero {padding:27px;gap:24px}
  .insight-feature {padding:23px}
  .insight-feature blockquote {font-size:22px}
  .course-layout {grid-template-columns:minmax(0,1fr) 240px;gap:25px}
  .practice-aside {padding:22px}
  .course-tab-name {font-size:14px}
  .course-tabs button {padding:13px 10px}
}
@media(max-width:1000px) {
  .insight-hero.has-feature {grid-template-columns:1fr}
  .insight-welcome h1 {font-size:32px}
  .insight-feature {padding:22px 24px}
}
@media(max-width:880px) {
  .course-layout {grid-template-columns:1fr;gap:26px}
  .practice-aside {border:0;padding:24px}
  .course-summary {display:block;padding:26px}
  .course-summary-side {align-items:flex-start}
  .course-summary-index {display:none}
  .course-summary-side>button {margin-top:18px}
  .course-summary h2 {font-size:25px}
}
@media(max-width:700px) {
  #sidebar {background:#fffffff5}
  nav button {font-size:13px}
  .insight-hero {padding:24px 21px;gap:23px;border-radius:5px;margin-bottom:29px}
  .insight-welcome {gap:17px}
  .insight-welcome h1 {font-size:28px;line-height:1.5}
  .insight-welcome p {font-size:13px;line-height:1.9;margin-top:14px}
  .insight-eyebrow {font-size:11px;letter-spacing:.3px;margin-bottom:13px}
  .insight-count {display:flex}
  .insight-count b {font-size:21px}
  .insight-count span {font-size:11px}
  .insight-feature {padding:20px}
  .insight-feature blockquote {font-size:21px;line-height:1.75;margin:15px 0 18px}
  .insight-feature-foot {font-size:11px;gap:12px}
  .insight-feature-foot button {min-height:38px}
  .insight-card {padding:22px;border-radius:6px}
  .insight-quote-block {padding:0}
  .insight-quote-block .insight-pullquote {font-size:20px}
  .insight-gains-block {padding:17px 0 0}
  .insight-gains-block li {font-size:14px}
  .course-page-head h1 {font-size:27px}
  .course-tabs {grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 24px;padding:0;gap:7px}
  .course-tabs button {min-height:72px;padding:11px 13px;gap:7px}
  .course-tab-number {font-size:15px}
  .course-tab-name {font-size:15px}
  .course-summary {padding:24px;margin-bottom:26px}
  .course-summary h2 {font-size:25px}
  .course-summary-side>button {padding:9px 12px}
  .course-meta>span {margin-left:7px}
  .practice-aside {padding:24px}
  .practice-aside>h3 {font-size:20px}
  .gallery-hero h1 {font-size:29px}
  .gallery-hero-stat {border-radius:5px}
  .login-story {border-radius:6px}
}
@media(max-width:360px) {
  .insight-hero {padding:21px 17px}
  .insight-welcome h1 {font-size:25px}
  .insight-feature {padding:18px}
  .course-tabs button {padding-inline:10px}
  .course-tab-name {font-size:14px}
}