/* Beginner journey: one concept, one experiment, one decision at a time. */
.learning-header { gap: 24px; }
.learning-mode { display:flex; align-items:center; gap:10px; font-size:14px; color:#c6cec5; }
.learning-header .text-button { font-size:14px; }
.learning-shell { display:grid; grid-template-columns:240px minmax(0,860px); justify-content:center; gap:64px; max-width:1360px; padding:38px 40px 0; }
.learning-sidebar { padding-top:8px; }
.learning-sidebar h2 { font-size:24px; margin:12px 0; font-weight:600; }
.sidebar-intro { font-size:14px; color:var(--muted); line-height:1.9; margin-bottom:27px; }
.lesson-map { display:flex; flex-direction:column; position:relative; gap:5px; }
.lesson-map:before { content:''; position:absolute; top:30px; bottom:30px; left:20px; width:1px; background:#343936; z-index:-1; }
.lesson-map button { display:flex; align-items:center; gap:14px; background:transparent; border:1px solid transparent; text-align:left; padding:12px 7px; width:100%; }
.lesson-map button>b { display:grid; place-items:center; font:500 14px var(--mono); background:var(--bg); border:1px solid #414740; color:#a1a99e; width:28px; height:28px; flex-shrink:0; }
.lesson-map button>span { font-size:14px; }
.lesson-map small { display:block; font-size:12px; color:#969e94; margin-top:4px; }
.lesson-map button.current { background:linear-gradient(90deg,#ff673d13,transparent); border-color:#653d2d; }
.lesson-map button.current>b { border-color:var(--orange); background:var(--orange); color:#171510; }
.lesson-map button.current>span { color:var(--orange); }
.lesson-map button.done>b { color:var(--green); border-color:#54694b; }
.lesson-map button:disabled { opacity:.48; }
.learning-progress { margin-top:25px; border-top:1px solid var(--line); padding-top:20px; font-size:12px; color:#b0b7aa; }
.learning-progress [role=progressbar] { background:#293027; height:4px; margin-top:10px; }
.learning-progress i { display:block; height:100%; background:var(--green); transition:width .3s; }
.learning-notebook { margin-top:24px; font-size:14px; }
.learning-notebook summary { cursor:pointer; color:#bfcbb8; }
.learning-notebook p { font-size:13px; color:#a6b0a0; padding:13px 0; margin:0; border-bottom:1px solid var(--line); }
.learning-notebook b { display:block; color:#d0dbc9; font-weight:500; margin-bottom:5px; }
.lesson-content { min-width:0; }
.lesson-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; color:#939c94; }
.lesson-topline .eyebrow { color:var(--orange); }
.lesson-content h1 { font-size:clamp(32px,3.3vw,48px); letter-spacing:-1px; margin:17px 0 25px; line-height:1.25; }
.lesson-content h1:focus { outline:none; }
.lesson-content h1>span { color:var(--orange); margin-left:3px; }
.coach { display:flex; gap:20px; padding:21px 23px; background:#191e1a; border:1px solid #343e31; border-left:3px solid #b8d0a5; margin-bottom:25px; }
.coach-avatar { flex-shrink:0; width:42px; height:45px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#d2e6c5; font-size:22px; font-weight:500; }
.coach-avatar small { font-size:12px; color:#9cb58e; font-weight:400; }
.coach b { font-size:16px; font-weight:500; color:#d5e1cd; }
.coach p { margin:7px 0 0; color:#bac4b4; font-size:16px; line-height:1.85; }
.lesson-activity { border:1px solid #333936; background:#131718; padding:25px; }
.activity-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.activity-label b { font-size:14px; font-weight:500; color:#d7ddd2; }
.activity-label>span { font-size:12px; color:var(--muted); }
.activity-explanation { font-size:16px; line-height:1.9; color:#b8c0b8; margin:20px 0 0; }
.activity-explanation strong { color:#d5dfce; font-weight:500; }
.deal-intro { display:flex; align-items:center; justify-content:space-between; gap:26px; }
.target-mini { display:flex; align-items:center; gap:18px; }
.target-mini .company-monogram { margin:0; width:58px; height:66px; font-size:55px; padding:5px 9px; }
.target-mini h2 { font-size:24px; font-weight:500; margin:7px 0; }
.target-mini p:not(.eyebrow) { color:#abb6a9; font-size:14px; margin:4px 0; }
.target-mini .eyebrow { font-size:12px; margin:0; letter-spacing:1px; }
.first-price { text-align:right; border-left:1px solid var(--line); padding-left:24px; flex-shrink:0; }
.first-price>span { font-size:12px; color:#a2aca0; }
.first-price strong { display:block; font:600 62px/1.2 var(--display); margin-top:7px; }
.first-price small { font:14px 'Noto Sans SC',sans-serif; margin-left:9px; }
.lesson-quiz { margin-top:26px; }
.quiz-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.quiz-heading>span { color:var(--orange); font-size:14px; }
.quiz-heading button { font-size:14px; }
.lesson-quiz h2 { font-size:20px; font-weight:500; margin:11px 0 16px; line-height:1.7; }
.quiz-options { display:grid; gap:10px; }
.quiz-options button { border:1px solid #343a38; padding:14px 17px; display:flex; align-items:center; gap:14px; text-align:left; background:#171b1d; font-size:16px; min-height:56px; }
.quiz-options button>b { display:grid; place-items:center; width:25px; height:25px; border:1px solid #454b46; font:12px var(--mono); color:#a6afa2; flex-shrink:0; }
.quiz-options button>i { font-style:normal; margin-left:auto; }
.quiz-options button:hover:not(:disabled) { border-color:var(--orange); background:#27201c; }
.quiz-options button.correct { border-color:#7a986b; background:#233020; opacity:1; color:#d6ebc9; }
.quiz-options button.incorrect { border-color:#bd6845; background:#36231c; }
.quiz-options button:disabled:not(.correct) { opacity:.45; }
.quiz-feedback { margin-top:14px; min-height:35px; font-size:14px; color:#939d91; }
.quiz-feedback p { margin:4px 0; line-height:1.85; }
.quiz-feedback.success,.quiz-feedback.retry { padding:15px 18px; border-left:2px solid #759369; background:#1b2519; color:#c0d0b7; }
.quiz-feedback.retry { border-color:var(--orange); background:#2b1d17; color:#ddbcaa; }
.quiz-feedback>b { font-size:14px; font-weight:600; }
.quiz-feedback.success p,.quiz-feedback.retry p { font-size:16px; }
.quiz-hint { font-size:15px; color:#c4d5b8; border:1px dashed #4d5d45; padding:14px 18px; margin:12px 0 17px; line-height:1.9; }
.lesson-controls { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:25px 0 28px; }
.lesson-controls .text-button { font-size:14px; }
.lesson-controls .primary { min-width:225px; display:flex; justify-content:space-between; gap:25px; font-size:16px; }
.lesson-controls>.muted { font-size:14px; }
.lesson-footer { font-size:12px; color:#879384; padding:15px 0 24px; flex-wrap:wrap; }
.lesson-footer>span:nth-child(2) { font-size:12px; }
.cash-ledger { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.ledger-card { padding:19px; border:1px solid #3c423a; background:#1d221c; text-align:left; min-height:150px; }
.ledger-card .ledger-index { font:13px var(--mono); color:#b0bea6; }
.ledger-card strong { font:500 43px var(--display); display:block; margin:7px 0; color:#d1e1c6; }
.ledger-card>span:last-of-type { color:#afbfaa; font-size:14px; }
.ledger-card p { border-top:1px solid #394434; margin:16px 0 0; padding-top:12px; font-size:15px; line-height:1.85; color:#b8c6b2; }
.ledger-card.revealed { background:#192018; border-color:#57684e; }
.cash-equation { background:#222921; padding:19px; margin-top:18px; }
.cash-equation>span { font-size:14px; color:var(--muted); display:block; }
.cash-equation b { display:block; font:500 21px/1.7 var(--mono); margin:9px 0; }
.cash-equation em { color:var(--orange); font-style:normal; }
.cash-equation p { color:#b6c3ad; font-size:15px; margin-bottom:0; }
.guided-evidence h3 { font-size:24px; font-weight:500; margin:18px 0 12px; }
.guided-evidence>p { font-size:16px; line-height:1.9; color:#bec5bb; }
.evidence-numbers { display:flex; align-items:center; gap:35px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:22px; }
.evidence-numbers div>span { display:block; font-size:14px; color:#a4b19f; }
.evidence-numbers strong { display:block; font:600 57px/1.2 var(--display); margin-top:8px; }
.evidence-numbers small { font:20px var(--mono); }
.evidence-numbers>span { font-size:22px; color:#808e7b; }
.impact-result { background:#283221; padding:20px; margin-top:20px; }
.impact-result>span { font-size:14px; color:#b5c8a6; }
.impact-result b { display:block; font:500 33px var(--display); margin:10px 0; color:#d8e8ce; }
.impact-result b>i { font-style:normal; margin:0 14px; }
.impact-result small { font-size:14px; }
.impact-result p { font-size:15px; color:#bdcdb4; margin:0; }
.single-control { padding:20px 23px; border:1px solid #3b4537; margin:23px 0; display:grid; grid-template-columns:1fr auto; column-gap:20px; }
.single-control label { font-size:16px; color:#cdd7c6; }
.single-control output { font:500 20px var(--mono); color:var(--orange); }
.single-control input { grid-column:1/-1; margin:28px 0 17px; height:5px; }
.single-control input::-webkit-slider-thumb { width:19px; height:19px; border:3px solid #20251f; outline:1px solid #b9c9ae; }
.single-control input::-moz-range-thumb { width:16px; height:16px; }
.single-control>div { grid-column:1/-1; display:flex; justify-content:space-between; font-size:12px; color:#97a491; }
.guided-years { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px; text-align:center; margin-top:24px; }
.guided-years>div>span { font:14px var(--mono); color:#9faa99; }
.forecast-track { height:110px; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid #505c46; margin:12px 0; }
.forecast-track i { display:block; width:36px; background:linear-gradient(#ff673d,#7f3d27); transition:height .2s; }
.guided-years b { display:block; font:500 20px var(--mono); }
.guided-years small { color:#96a090; font-size:12px; }
.forecast-comparison { border-top:1px dashed #3c4537; padding-top:18px; margin-top:23px; font-size:14px; color:#a2af9d; }
.forecast-comparison p { margin:8px 0 0; line-height:1.9; }
.forecast-comparison b { font-family:var(--mono); color:#d3dec9; }
.time-bridge { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 0 20px; }
.time-bridge>div>span { display:block; color:#b2bea9; font-size:14px; }
.time-bridge strong { display:block; font:600 clamp(35px,4.2vw,60px)/1.4 var(--display); }
.time-bridge strong small { font:14px 'Noto Sans SC',sans-serif; margin-left:7px; }
.time-arrow { color:var(--orange); font-size:16px; text-align:center; }
.time-arrow small { display:block; color:#9fab99; font-size:12px; margin-top:5px; }
.discount-equation { text-align:center; color:#b7c5af; font:15px/1.8 var(--mono); background:#20281d; padding:12px 16px; }
.value-bridge { display:flex; flex-direction:column; gap:12px; }
.bridge-item { display:flex; align-items:flex-start; gap:16px; background:#1c231b; border:1px solid #3a4534; padding:20px; text-align:left; }
.bridge-index { width:25px; height:25px; display:grid; place-items:center; border:1px solid #68765d; font:13px var(--mono); color:#b9cbaa; flex-shrink:0; }
.bridge-item>div { flex:1; min-width:0; }
.bridge-item b { font-size:16px; font-weight:500; display:block; }
.bridge-item div>span { font-size:13px; color:#aab9a1; display:block; margin-top:5px; }
.bridge-item p { font-size:15px; line-height:1.85; margin:12px 0 0; color:#b2bfa9; }
.bridge-item>strong { font:500 28px var(--display); color:#d9e8cc; }
.assembled-value { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:20px; padding:22px; background:#34261d; border:1px solid #89543a; }
.assembled-value span { font-size:14px; color:#d0baa7; }
.assembled-value strong { display:block; font:600 43px var(--display); white-space:nowrap; }
.assembled-value small { font:14px 'Noto Sans SC',sans-serif; }
.assembled-value p { font-size:14px; color:#c5b7a7; margin:0; max-width:280px; }
.final-estimates { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.final-estimates>div { border-bottom:1px solid #4c5546; padding:13px 0 18px; }
.final-estimates span { display:block; font-size:14px; color:#9cab96; }
.final-estimates strong { font:500 42px var(--display); color:#d3e0c8; display:block; margin-top:8px; }
.final-estimates small { font:14px 'Noto Sans SC',sans-serif; margin-left:5px; }
.last-investigation { margin-top:26px; border:1px dashed #525c48; padding:20px; }
.last-investigation .activity-label { margin-bottom:13px; }
.last-investigation h3 { font-weight:500; }
.last-investigation p { font-size:15px; line-height:1.85; color:#b7c3ae; }
.last-clues { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.last-clues button { text-align:left; padding:16px; }
.last-clues b { font-size:16px; display:block; font-weight:500; }
.last-clues span { color:#b3bdac; display:block; font-size:14px; margin:9px 0; }
.last-clues small { color:#cdb894; font-size:12px; }
.decision-reasons { border:0; padding:0; margin:20px 0; }
.decision-reasons legend { font-size:16px; margin-bottom:13px; }
.decision-reasons label { display:flex; align-items:center; gap:12px; padding:12px 0; color:#b5c3ab; font-size:15px; cursor:pointer; }
.decision-reasons input { accent-color:var(--orange); width:17px; height:17px; flex-shrink:0; }
.decision-feedback:not(:empty) { padding:18px; border:1px solid #897147; color:#dcca9f; background:#2a241b; margin-bottom:20px; font-size:15px; }
.decision-feedback p { margin:8px 0 0; line-height:1.8; }
.final-actions { display:flex; gap:15px; }
.final-actions button { flex:1; font-size:16px; }
.graduation { max-width:1100px; padding:45px 30px; }
.graduation-header { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-bottom:25px; }
.graduation-header h1 { font-size:44px; letter-spacing:-1px; line-height:1.4; margin:18px 0; }
.graduation-header p:not(.eyebrow) { color:#b3c0aa; font-size:16px; }
.graduate-badge { color:var(--green); font:600 104px var(--display); text-align:center; }
.graduate-badge span { display:block; font:14px var(--mono); white-space:nowrap; }
.graduation-notes { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:28px 0; }
.graduation-notes>div { padding:22px; background:#1b201a; border:1px solid #3c4935; }
.graduation-notes span { font:13px var(--mono); color:var(--green); }
.graduation-notes h3 { font-size:18px; font-weight:500; margin:9px 0; }
.graduation-notes p { font-size:15px; color:#bac7b1; line-height:1.85; margin:0; }
.graduation-actions { display:flex; gap:16px; margin:25px 0; }
.free-help { display:flex; align-items:center; gap:16px; }
@media(max-width:1100px) { .learning-shell { grid-template-columns:190px minmax(0,1fr); gap:30px; padding:30px 25px 0; } .first-price { padding-left:15px; } .first-price>span { max-width:145px; display:block; } .target-mini { gap:12px; } .target-mini p:not(.eyebrow) { max-width:180px; } .target-mini .eyebrow { font-size:12px; letter-spacing:0; } }
@media(max-width:800px) { .learning-shell { display:block; padding:24px 20px 0; } .learning-sidebar { padding:0 0 25px; } .learning-sidebar>.eyebrow,.learning-sidebar>h2,.sidebar-intro,.learning-progress,.learning-notebook { display:none; } .lesson-map { flex-direction:row; gap:8px; overflow-x:auto; padding:2px 2px 12px; } .lesson-map:before { display:none; } .lesson-map button { min-width:137px; padding:9px 8px; gap:8px; } .lesson-map button>span { font-size:13px; white-space:nowrap; } .lesson-map small { display:none; } .lesson-map button>b { width:23px; height:23px; font-size:12px; } .learning-header { min-height:90px; flex-wrap:wrap; padding:14px 20px; height:auto; gap:10px; } .learning-header .brand { margin:0; } .learning-mode { order:3; width:100%; font-size:12px; padding-top:9px; border-top:1px solid var(--line); } .learning-header>.text-button { margin-left:auto; font-size:12px; } .lesson-content h1 { font-size:35px; } .lesson-activity { padding:20px; } .coach { padding:18px; gap:13px; } .coach p { font-size:16px; } .lesson-controls { position:relative; } .lesson-topline { font-size:12px; } .graduation-header h1 { font-size:34px; } .free-help .help-top { display:none; } }
@media(max-width:520px) { .learning-shell { padding:20px 16px 0; } .learning-sidebar { padding-bottom:14px; } .lesson-content h1 { font-size:32px; margin:17px 0 20px; } .lesson-topline>span:last-child { font-size:12px; max-width:170px; text-align:right; } .lesson-topline .eyebrow { font-size:12px; letter-spacing:1px; } .coach { padding:16px 13px; gap:10px; margin-bottom:20px; } .coach-avatar { width:28px; font-size:20px; } .coach b { font-size:16px; } .coach p { font-size:16px; line-height:1.85; } .lesson-activity { padding:18px 15px; } .deal-intro { flex-direction:column; align-items:stretch; gap:18px; } .target-mini p:not(.eyebrow) { max-width:none; } .first-price { border-left:0; border-top:1px solid var(--line); padding:17px 0 0; display:flex; align-items:center; gap:15px; text-align:left; } .first-price>span { max-width:150px; font-size:14px; } .first-price strong { margin:0 0 0 auto; font-size:51px; white-space:nowrap; } .activity-explanation { font-size:16px; margin-top:17px; } .quiz-heading { align-items:flex-start; } .quiz-heading button { max-width:190px; font-size:13px; } .lesson-quiz h2 { font-size:19px; } .quiz-options button { font-size:16px; padding:13px; gap:11px; } .lesson-controls { flex-wrap:wrap; } .lesson-controls .primary { width:100%; order:-1; } .lesson-controls .text-button { font-size:14px; } .lesson-footer { font-size:12px; } .lesson-footer>span:nth-child(2) { font-size:12px; } .cash-ledger { grid-template-columns:1fr; } .ledger-card { min-height:120px; } .cash-equation b { font-size:17px; } .activity-label { flex-direction:column; align-items:flex-start; gap:7px; } .activity-label>span { font-size:12px; } .guided-evidence h3 { font-size:23px; } .evidence-numbers { gap:20px; } .evidence-numbers div>span { font-size:13px; } .evidence-numbers strong { font-size:48px; } .single-control { padding:18px 15px; column-gap:14px; } .single-control label { font-size:15px; } .single-control output { font-size:18px; white-space:nowrap; } .single-control>div { font-size:12px; gap:10px; } .guided-years { gap:8px; } .guided-years b { font-size:15px; } .guided-years small { font-size:12px; display:block; } .forecast-track i { width:25px; } .guided-years>div>span { font-size:12px; } .time-bridge { gap:12px; flex-wrap:wrap; } .time-bridge>div>span { font-size:13px; } .time-bridge strong { font-size:38px; } .time-arrow { order:3; width:100%; display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 0 0; font-size:14px; } .time-arrow small { margin:0; } .bridge-item { padding:16px 12px; gap:9px; flex-wrap:wrap; } .bridge-item>strong { margin-left:auto; padding-left:34px; } .bridge-item>div { flex-basis:75%; } .bridge-item b { font-size:16px; } .assembled-value { flex-direction:column; align-items:flex-start; gap:15px; padding:18px; } .final-estimates { grid-template-columns:1fr; gap:4px; } .final-estimates>div { display:flex; align-items:center; justify-content:space-between; padding:12px 0; } .final-estimates strong { font-size:35px; margin:0; } .last-investigation { padding:16px; } .last-clues { grid-template-columns:1fr; } .final-actions { flex-direction:column; } .graduation { padding:28px 18px; } .graduation-header { align-items:flex-start; } .graduation-header h1 { font-size:31px; } .graduate-badge { font-size:65px; } .graduate-badge span { font-size:12px; } .graduation-notes { grid-template-columns:1fr; } .graduation-actions { flex-direction:column; } .learning-header .text-button { max-width:145px; text-align:right; line-height:1.8; } .learning-header .brand { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { .learning-progress i,.forecast-track i { transition:none; } }