/* Spectrum: familiar site palette, shorter lessons, a shared example amount. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--gn-height, 72px) + 24px); }
body { margin: 0; font: 1rem/1.6 var(--body, Arial, sans-serif); color: var(--ink-body); background: var(--paper); }
button, input, select { font: inherit; color: var(--ink); }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--door-ask); outline-offset: 4px; }
button, summary { cursor: pointer; }
button { min-height: 44px; }
button:disabled { cursor: default; opacity: .5; }
[hidden] { display: none !important; }
.learn { max-width: 1340px; margin: auto; padding: 38px 36px 60px; }
.learn p { margin: 0 0 16px; }
.learn h1, .learn h2, .learn h3 { font-family: var(--serif, Arial, sans-serif); color: var(--ink); font-weight: 700; }
.learn h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); letter-spacing: -.05em; line-height: 1.06; margin: 10px 0 22px; }
.learn h1 span { color: var(--accent-dark); }
.learn h2 { font-size: clamp(1.65rem, 2.65vw, 2.25rem); letter-spacing: -.035em; line-height: 1.14; margin: 0 0 10px; }
.learn h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.learn .eyebrow { font: .75rem/1.5 var(--mono); letter-spacing: .08em; margin-bottom: 12px; color: var(--ink-muted); text-transform: uppercase; }
.learn .small { font-size: .875rem; line-height: 1.5; color: var(--ink-muted); margin: 18px 0 0; }
.guide-intro { display: grid; grid-template-columns: 1.45fr 1fr; gap: 48px; align-items: center; padding-bottom: 38px; scroll-margin-top: calc(var(--gn-height, 72px) + 24px); }
.intro-deck { max-width: 480px; font-size: 1.125rem; }
.portfolio-card { background: var(--label); color: var(--accent-on); padding: 26px 30px; }
.portfolio-card .eyebrow, .portfolio-card .small { color: inherit; }
.portfolio-card label { display: block; font-size: 1.125rem; font-weight: 600; }
.portfolio-input-wrap { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--accent-on); padding: 7px 0 10px; margin-bottom: 12px; }
.portfolio-input-wrap > span { font: 2rem var(--mono); }
.portfolio-input-wrap input { width: 100%; min-width: 0; font: 500 clamp(1.7rem, 3vw, 2.5rem)/1.3 var(--mono); background: none; border: 0; color: var(--accent-on); padding: 0; }
.portfolio-input-wrap input:focus-visible { outline-color: var(--accent-on); }
.portfolio-card p { font-size: .875rem; }
.portfolio-card .field-error { font-weight: 600; margin: 12px 0; }
.portfolio-card .small { padding-top: 12px; border-top: 1px solid var(--accent-on); }
.guide-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; border-top: 1px solid var(--rule); }
.guide-index { position: sticky; top: calc(var(--gn-height, 72px) + 18px); align-self: start; padding-top: 26px; }
.portfolio-recap { border-bottom: 1px solid var(--rule); padding-bottom: 20px; margin-bottom: 16px; }
.portfolio-recap > span { display: block; font-size: .875rem; color: var(--ink-muted); }
.portfolio-recap strong { display: block; font: 700 1.6rem/1.3 var(--serif); color: var(--ink); margin: 7px 0; overflow-wrap: anywhere; }
.portfolio-recap a { font-size: .875rem; }
.guide-index ol { list-style: none; margin: 0 0 20px; padding: 0; }
.guide-index li a { display: flex; gap: 12px; min-height: 40px; align-items: center; text-decoration: none; font-size: .875rem; line-height: 1.3; padding: 7px 0; }
.guide-index li span { font: .75rem var(--mono); color: var(--accent-dark); }
.text-link { font-size: .9375rem; }
.lesson { padding: 30px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--gn-height, 72px) + 24px); }
.lesson-title { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.lesson-title p { margin: 0; max-width: 70ch; }
.lesson-number { min-width: 32px; font: 500 1rem var(--mono); color: var(--accent-dark); padding-top: 3px; }
.exercise { background: var(--paper-raised); padding: 24px; margin: 20px 0 16px; }
.tool-heading { display: flex; justify-content: space-between; gap: 12px 22px; align-items: baseline; margin-bottom: 24px; flex-wrap: wrap; }
.amount-tag { font: .875rem/1.5 var(--mono); color: var(--ink-muted); }
button.amount-tag { background: none; border: 1px solid var(--rule-strong); padding: 6px 10px; min-height: 44px; text-align: left; }
.edit-word { display: inline-block; margin-left: 10px; text-decoration: underline; }
.mobile-hint { display: none; }
.exercise-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 30px; align-items: center; }
.exercise-inner > div { min-width: 0; }
.exercise label, .control-label { display: block; font-size: .9375rem; color: var(--ink); margin: 12px 0 10px; }
.exercise .range-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.range-label output { font: .9375rem var(--mono); white-space: nowrap; }
input[type="range"] { display: block; width: 100%; min-width: 0; height: 32px; margin: 4px 0 16px; accent-color: var(--door-ask); cursor: pointer; }
.number-field, .amount-field { display: flex; align-items: center; gap: 10px; }
.number-field input { width: 106px; padding: 8px 10px; border: 1px solid var(--rule-strong); background: var(--paper); font: 1.5rem var(--mono); }
.amount-field { border: 1px solid var(--rule-strong); padding: 9px 12px; background: var(--paper); width: 100%; }
.amount-field input { min-width: 0; width: 100%; background: none; border: 0; font: 1.3rem var(--mono); padding: 0; }
.amount-field.compact { max-width: 180px; }
.amount-field > span { color: var(--ink-muted); }
.field-help { font-size: .875rem; line-height: 1.4; margin: 10px 0 0 !important; }
input[aria-invalid="true"] { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.presets, .chart-switch { display: flex; flex-wrap: wrap; gap: 7px; }
.presets { margin-top: 14px; }
.presets button, .chart-switch button, .answer-options button { background: var(--paper); border: 1px solid var(--rule-strong); padding: 9px 12px; font-size: .875rem; }
.presets button[aria-pressed="true"], .chart-switch button[aria-pressed="true"], .answer-options button[aria-pressed="true"] { color: var(--accent-on); background: var(--label); border-color: var(--label); }
.presets button:hover, .chart-switch button:hover, .answer-options button:hover { border-color: var(--ink-muted); }
.result { border-left: 1px solid var(--rule-strong); padding-left: 24px; min-width: 0; }
.result-label { display: block; font-size: .875rem; color: var(--ink-muted); margin-bottom: 10px; }
.result > strong { display: block; color: var(--accent-dark); font: 700 clamp(1.8rem, 3.2vw, 2.8rem)/1.15 var(--serif); letter-spacing: -.04em; overflow-wrap: anywhere; }
.result p { margin: 14px 0 0; }
.exercise select { width: 100%; max-width: 100%; min-height: 44px; padding: 8px 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); margin-bottom: 8px; }
.compare-results, .fee-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.compare-results span, .fee-results span { display: block; font-size: .875rem; line-height: 1.4; margin-bottom: 10px; }
.compare-results strong, .fee-results strong { display: block; font: 700 clamp(1.5rem, 2.45vw, 2.2rem)/1.2 var(--serif); color: var(--ink); letter-spacing: -.025em; overflow-wrap: anywhere; }
.compare-results > div + div, .fee-results > div + div { border-left: 1px solid var(--rule-strong); padding-left: 18px; }
.result-copy { margin: 20px 0 0 !important; color: var(--ink); }
.stake-copy { color: var(--ink); font-size: 1.125rem; margin-top: 12px !important; }
.impact-bar { height: 12px; background: var(--paper); margin-top: 18px; }
.impact-bar span { height: 100%; display: block; background: var(--accent-dark); }
.calculation-line { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.calculation-line b { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.takeaway { font-size: 1rem; margin: 16px 0 0 !important; }
.takeaway > span { display: inline-block; font-weight: 600; color: var(--door-ask); margin-right: 8px; }
.evidence, .more-detail, .assumptions { margin-top: 10px; font-size: .9375rem; }
.evidence summary, .more-detail summary, .assumptions summary { color: var(--ink-muted); min-height: 44px; padding: 10px 0; font-size: .875rem; }
.evidence summary > span { font-size: .8125rem; margin-left: 12px; }
.evidence[open] summary { color: var(--ink); }
.evidence p, .assumptions p { padding-top: 12px; max-width: 78ch; }
.evidence a { color: var(--door-ask); }
.study-comparison { padding: 20px; background: var(--paper-raised); }
.study-bar-row { display: grid; grid-template-columns: 165px 1fr 60px; gap: 14px; align-items: center; margin: 16px 0; font-size: .9375rem; }
.study-bar-row > div { height: 14px; background: var(--paper); }
.study-bar-row i { display: block; height: 100%; background: var(--ink-muted); }
.study-bar-row:nth-of-type(2) i { background: var(--door-company); }
.study-bar-row b { font-family: var(--mono); color: var(--ink); }
.fee-control { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fee-control label { margin: 0; }
.fee-control input { flex: 1; min-width: 100px; margin: 0; }
.fee-control output { font: .9375rem var(--mono); }
.fee-results { padding: 24px 0 0; }
.fee-results strong { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.score-exercise { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; align-items: center; }
.big-score { display: block; font: 700 4rem/1 var(--serif); letter-spacing: -.05em; color: var(--ink); }
.big-score span { font: 1rem var(--mono); color: var(--ink-muted); letter-spacing: 0; margin-left: 6px; }
.answer-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.answer-options button { text-align: left; }
.chart-controls { display: flex; gap: 28px; align-items: flex-end; margin: 12px 0; }
.chart-controls > div { flex: 1; }
.chart-toggle { display: flex !important; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--door-ask); }
.chart-key { display: flex; gap: 24px; font-size: .875rem; margin: 18px 0 12px; flex-wrap: wrap; }
.chart-key > span { display: flex; align-items: center; gap: 8px; }
.chart-key i { display: inline-block; width: 22px; height: 2px; background: var(--ink); }
.chart-key > span + span > i { background: var(--door-company); }
.chart-scroll { width: 100%; }
.trend-chart { display: block; width: 100%; height: auto; margin-bottom: 12px; }
.chart-grid path { fill: none; stroke: var(--rule); stroke-width: 1; }
.chart-grid text { fill: var(--ink-muted); font: 14px var(--mono); }
.price-path, .average-path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.average-path { stroke: var(--door-company); stroke-width: 2; }
.price-dot { fill: var(--ink); }
.average-dot { fill: var(--door-company); }
.chart-step { margin: 0 0 18px; }
.course-door { padding: 20px 24px; display: flex; align-items: center; gap: 24px; background: var(--paper-raised); margin: 20px 0; }
.course-door > div { flex: 1; }
.course-door p { margin: 8px 0 0; }
.button { display: inline-flex; justify-content: center; align-items: center; padding: 12px 16px; border: 1px solid var(--rule-strong); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.course-door .button { flex: 0 0 auto; color: var(--door-ask); }
.checklist { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; padding: 32px; margin-top: 38px; background: var(--paper-raised); scroll-margin-top: calc(var(--gn-height, 72px) + 24px); }
.checklist h2 { margin-bottom: 16px; }
.checklist fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.checklist label { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; cursor: pointer; color: var(--ink); }
.checklist input { margin: 3px 0 0; }
.text-button { padding: 10px 0; background: none; border: 0; color: var(--ink-muted); font-size: .875rem; text-decoration: underline; text-underline-offset: .2em; }
#check-status { padding-left: 16px; font-size: .875rem; }
.source-notes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; padding-top: 32px; margin-top: 38px; border-top: 1px solid var(--rule); }
.source-notes .button { margin-top: 18px; background: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-script { max-width: 900px; margin: 20px auto; padding: 20px; }
#portfolio-dialog { width: min(470px, calc(100% - 32px)); background: var(--paper-raised); color: var(--ink-body); border: 1px solid var(--rule-strong); padding: 28px; }
#portfolio-dialog::backdrop { background: rgba(0,0,0,.7); }
#portfolio-dialog h2 { font: 700 1.7rem/1.15 var(--serif); color: var(--ink); margin: 0 0 16px; }
#portfolio-dialog label { display: block; margin: 20px 0 10px; }
#portfolio-edit-error { color: var(--accent-dark); font-size: .875rem; }
.dialog-actions { display: flex; gap: 22px; margin-top: 24px; align-items: center; }
.dialog-actions .button { background: var(--label); color: var(--accent-on); }
@media (max-width: 760px) { .mobile-hint { display: block; font-size: .875rem; color: var(--ink-muted); margin: 8px 0 0 !important; } }
@media (max-width: 1050px) { .guide-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 26px; } .guide-intro { gap: 28px; } .exercise-inner { grid-template-columns: 1fr; gap: 22px; } .result { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--rule-strong); } .course-door { display: block; } .course-door .button { margin-top: 18px; } }
@media (max-width: 760px) { .learn { padding: 26px 20px 44px; } .guide-intro { grid-template-columns: 1fr; gap: 22px; padding-bottom: 26px; } .guide-layout { display: block; } .guide-index { position: static; padding: 18px 0; border-bottom: 1px solid var(--rule); } .portfolio-recap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0 0 10px; margin: 0; border: 0; } .portfolio-recap strong { font-size: 1.25rem; } .guide-index nav ol { display: flex; gap: 20px; overflow-x: auto; margin-bottom: 10px; } .guide-index nav li { flex: 0 0 auto; } .guide-index > .text-link { display: none; } .lesson { padding: 26px 0; } .lesson-title { gap: 12px; } .lesson-number { min-width: 26px; } .checklist, .source-notes { grid-template-columns: 1fr; gap: 20px; } .checklist { padding: 24px; } }
@media (max-width: 480px) { .exercise { padding: 20px; } .portfolio-card { padding: 22px; } .tool-heading { gap: 8px; margin-bottom: 18px; } .score-exercise { grid-template-columns: 1fr; gap: 20px; } .score-exercise > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .score-exercise .eyebrow { max-width: 110px; margin: 0; } .big-score { font-size: 3rem; } .evidence summary > span { display: block; margin-left: 16px; } .chart-controls { flex-wrap: wrap; gap: 0 18px; } .chart-controls > div { min-width: 120px; } .compare-results, .fee-results { gap: 12px; } .compare-results > div + div, .fee-results > div + div { padding-left: 12px; } .fee-results strong { font-size: 1.65rem; } .study-bar-row { grid-template-columns: 1fr 62px; gap: 8px; } .study-bar-row > span { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { :root { color-scheme: light; } body, .learn { background: white !important; color: black !important; } .learn { padding: 0; max-width: none; } .gn, .gn-menu, .gn-sheet, .gn-scrim, .gn-bsheet, .guide-index, #print-guide, #clear-checks, #link-leverage, .presets, .chart-switch, .chart-toggle { display: none !important; } .guide-intro, .guide-layout, .checklist, .source-notes { display: block; } .learn h1, .learn h2, .learn h3, .learn p, .learn strong, .learn span, .learn a, .learn b, .learn input, .learn label { color: black !important; } .learn h1 { font-size: 28pt; } .learn h2 { font-size: 20pt; } .learn h3 { font-size: 16pt; } .lesson-title, .exercise, .course-door, .study-comparison { break-inside: avoid; } .exercise, .portfolio-card, .course-door, .study-comparison, .checklist { background: white; border: 1px solid #888; margin: 20px 0; } .portfolio-card { padding: 16px; } .chart-grid text { fill: black; } .chart-scroll { overflow: visible; } .trend-chart { min-width: 0; } .price-path { stroke: black; } .average-path { stroke: #444; stroke-dasharray: 6 4; } }
/* Concrete stories and compact, optional controls. */
.quick-question h3 { max-width: 40ch; font-size: 1.4rem; }
.quick-question .eyebrow { color: var(--door-ask); }
.answer-options button { display: flex; gap: 14px; align-items: center; font-size: 1rem; padding: 13px 16px; line-height: 1.45; }
.answer-letter { flex: 0 0 24px; font: .8125rem var(--mono); opacity: .75; }
.quiz-feedback { color: var(--ink); border-left: 3px solid var(--door-ask); padding: 10px 16px; margin: 20px 0 0 !important; }
.story-reveal { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule-strong); }
.story-reveal .tool-heading { margin-bottom: 14px; }
.scenario-line { color: var(--ink); font-size: 1.125rem; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-card { background: var(--paper); padding: 20px; border-top: 2px solid var(--door-company); }
.story-card + .story-card { border-color: var(--accent-dark); }
.story-kicker { display: block; font: .75rem/1.5 var(--mono); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.story-card h3 { margin-bottom: 10px; }
.story-amount { padding: 12px 0; border-top: 1px solid var(--rule); }
.story-amount span { display: block; font-size: .875rem; }
.story-amount strong { display: block; color: var(--ink); font: 700 1.65rem/1.3 var(--serif); margin-top: 4px; overflow-wrap: anywhere; }
.plain-example { margin: 22px 0 0 !important; border-left: 3px solid var(--label); padding: 13px 18px; background: var(--paper); color: var(--ink); line-height: 1.6; }
.fomo-story, .plan-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fomo-story > div, .plan-comparison > div { min-width: 0; }
.fomo-story > div + div, .plan-comparison > div + div { border-left: 1px solid var(--rule-strong); padding-left: 24px; }
.learn blockquote { margin: 0; color: var(--ink); font: 600 clamp(1.25rem, 2vw, 1.7rem)/1.4 var(--serif); letter-spacing: -.025em; }
#fomo-story { color: var(--ink); font-size: 1.15rem; }
.chasing-detail > summary { color: var(--ink); font-size: 1rem; }
.bet-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.bet { border-top: 2px solid var(--rule-strong); padding-top: 12px; color: var(--ink); font-size: .9375rem; }
.bet strong { display: block; font: 700 clamp(1.5rem, 2.7vw, 2.1rem)/1.4 var(--serif); overflow-wrap: anywhere; }
.bet > span { font-size: .875rem; color: var(--ink-muted); }
.bet.winner { border-color: var(--door-ask); }
.bet.losers { border-color: var(--accent-dark); }
.bet.total { border-color: var(--label); }
.protection-note { margin-top: 24px; padding: 20px; background: var(--paper); border-left: 3px solid var(--accent-dark); }
.protection-note h3 { font-size: 1.15rem; margin-bottom: 12px; }
.protection-note p { font-size: 1rem; line-height: 1.6; margin: 0 0 12px; }
.protection-note p:last-child { margin-bottom: 0; }
.calculation-line { font-size: 1rem; }
.cost-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 10px; }
.cost-inputs .number-field input { width: 100%; min-width: 0; font-size: 1.3rem; }
.cost-inputs label { min-height: 46px; }
.inline-assumptions { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.inline-setting { display: inline-block; position: relative; }
.inline-setting summary { list-style: none; color: var(--ink); padding: 8px 10px; min-height: 44px; border-bottom: 1px dashed var(--ink-muted); background: var(--paper); font-size: .9375rem; }
.inline-setting summary::-webkit-details-marker { display: none; }
.inline-setting .edit-word { font-size: .8125rem; margin-left: 6px; color: var(--ink-muted); }
.inline-setting > div { position: absolute; z-index: 2; left: 0; top: 100%; width: 240px; padding: 16px; border: 1px solid var(--rule-strong); background: var(--paper); box-shadow: 0 10px 20px #0003; }
.inline-setting label { margin: 0 0 10px; }
.inline-setting input { width: 100%; min-width: 0; padding: 8px 10px; background: var(--paper-raised); border: 1px solid var(--rule-strong); }
.assumption-warning { font-size: .9375rem; margin: 12px 0 24px !important; }
.three-fees { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.three-fees strong { font-size: clamp(1.4rem, 2.1vw, 2.2rem); }
.three-fees .fee-rate { color: var(--ink); font: 600 1.15rem var(--mono); }
.three-fees > div > span:nth-child(2) { min-height: 40px; }
.company-checks { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding: 12px 0; }
.company-checks > div { border-top: 1px solid var(--rule-strong); padding-top: 16px; }
.company-checks strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 8px; }
.company-checks p { font-size: .9375rem; margin: 0; }
.plan-card { background: var(--paper-raised); padding: 24px; }
.plan-comparison { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.plan-comparison p { color: var(--ink); font-size: 1.125rem; margin: 0; }
.plan-card > p:last-child { margin: 0; }
@media (max-width: 1050px) {
 .story-grid { grid-template-columns: 1fr; }
 .three-fees { grid-template-columns: 1fr; padding-top: 16px; }
 .three-fees > div { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; border: 0 !important; border-top: 1px solid var(--rule) !important; padding: 16px 0 0 !important; }
 .three-fees > div strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.7rem; }
 .three-fees > div > span:nth-child(2) { min-height: 0; margin: 0; }
 .company-checks { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
 .fomo-story, .plan-comparison { grid-template-columns: 1fr; gap: 18px; }
 .fomo-story > div + div, .plan-comparison > div + div { border: 0; border-top: 1px solid var(--rule); padding: 18px 0 0; }
 .bet-ledger { grid-template-columns: 1fr; gap: 18px; }
 .bet { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
 .bet strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.6rem; }
 .story-card, .protection-note { padding: 16px; }
 .inline-setting > div { position: static; width: 100%; box-shadow: none; }
 .inline-setting[open] { flex: 1 0 100%; }
 .three-fees > div strong { max-width: 140px; font-size: 1.4rem; }
 .plain-example { padding: 12px 14px; }
 .cost-inputs { grid-template-columns: 1fr; gap: 0; }
 .cost-inputs label { min-height: 0; }
}
@media print { .quick-question, .inline-setting > div { display: none !important; } [data-reveal][hidden] { display: block !important; } .three-fees { display: block; } .story-card, .plan-card, .plain-example, .protection-note { background: white; } }
/* Guided lessons: one useful decision, with its evidence beside it. */
.learn { --guide-blue: #83bed7; --guide-green: #7fc29b; --guide-red: #e08a74; }
.guide-intro { gap: 60px; }
.learn h1 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
.learn .intro-count { font: .875rem/1.5 var(--mono); color: var(--guide-blue); margin: 0 0 12px; }
.guide-layout { display: block; }
.guide-index { position: static; padding: 22px 0 16px; border-bottom: 1px solid var(--rule-strong); }
.journey-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.journey-toolbar .eyebrow { margin: 0 0 5px; }
.journey-toolbar strong { color: var(--ink); font-size: 1rem; }
.journey-toolbar .button { background: transparent; font-weight: 400; flex-shrink: 0; }
.guide-index nav ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; overflow: visible; }
.guide-index nav li { flex: 0 0 auto; }
.guide-index nav li a { gap: 8px; font-size: .8125rem; border: 1px solid var(--rule); padding: 8px 12px; border-radius: 5px; min-height: 42px; transition: background-color .16s ease, border-color .16s ease; }
.guide-index nav li a:hover { border-color: var(--ink-muted); }
.guide-index nav li a[aria-current="step"] { color: var(--ink); border-color: var(--guide-blue); background: color-mix(in srgb, var(--guide-blue) 10%, var(--paper)); }
.guide-index nav li a[aria-current="step"] span { color: var(--guide-blue); }
.lesson { padding: 28px 0 22px; scroll-margin-top: 0; }
.lesson-title { margin-bottom: 20px; }
.lesson-title h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.lesson-number { display: inline-flex; align-items: center; justify-content: center; color: var(--guide-blue); background: color-mix(in srgb, var(--guide-blue) 12%, var(--paper)); border: 1px solid color-mix(in srgb, var(--guide-blue) 40%, var(--rule)); border-radius: 50%; min-width: 42px; width: 42px; height: 42px; padding: 0; }
.lesson-body { display: grid; grid-template-columns: minmax(0,1fr) 265px; gap: 32px; align-items: start; }
.lesson-main { min-width: 0; }
.lesson-main > .exercise:first-child { margin-top: 0; }
.exercise { border: 1px solid var(--rule); border-radius: 10px; }
.research-card { position: sticky; top: calc(var(--gn-height,72px) + 24px); padding: 24px; border: 1px solid color-mix(in srgb, var(--guide-blue) 32%, var(--rule)); border-top: 3px solid var(--guide-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--guide-blue) 8%, var(--paper)), var(--paper)); border-radius: 8px; }
.research-card .research-type { display: flex; align-items: center; gap: 8px; color: var(--guide-blue); font: .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
.research-card .research-type > span { font-size: 1.1rem; }
.research-card h3 { font-size: 1.7rem; line-height: 1.12; margin-bottom: 16px; }
.research-card p { font-size: .9375rem; line-height: 1.5; }
.research-card .research-scope { color: var(--ink-muted); border-top: 1px solid var(--rule-strong); padding-top: 14px; font-size: .875rem; }
.research-card .research-limit { color: var(--ink-body); font-size: .875rem; }
.research-card a { font-size: .875rem; color: var(--guide-blue); display: inline-block; padding: 8px 0; overflow-wrap: anywhere; }
.lesson-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--rule); }
.lesson-next { display: grid; grid-template-columns: 1fr 25px; gap: 3px 26px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: 7px; padding: 15px 22px; text-decoration: none; min-width: 225px; transition: border-color .18s ease, background-color .18s ease; }
.lesson-next > span { color: var(--guide-blue); font: .75rem var(--mono); text-transform: uppercase; grid-column: 1; }
.lesson-next b { font-size: 1.5rem; grid-row: 1/3; grid-column: 2; align-self: center; font-weight: 400; transition: transform .18s ease; }
.lesson-next:hover { border-color: var(--guide-blue); background: color-mix(in srgb, var(--guide-blue) 7%, var(--paper-raised)); }
.lesson-next:hover b { transform: translateX(4px); }
.lesson-back { min-height: 44px; display: flex; align-items: center; font-size: .9375rem; }
.journey-note { font-size: .875rem; color: var(--ink-muted); }
.recovery-visual { margin-bottom: 22px; padding: 20px; border-radius: 7px; background: linear-gradient(120deg, #83bed710, #83bed703); border: 1px solid #83bed725; }
.value-track { margin-bottom: 18px; }
.value-track > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: .9375rem; }
.value-track b { color: var(--ink); font-family: var(--mono); overflow-wrap: anywhere; }
.track { display: flex; height: 21px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.track > span { display: block; height: 100%; transition: width .25s ease; }
.track-start { background: var(--guide-blue); opacity: .65; }
.track-remaining { background: var(--guide-blue); }
.track-lost { background: repeating-linear-gradient(135deg, #e08a741c, #e08a741c 5px, #e08a7466 5px, #e08a7466 7px); border-left: 2px solid var(--paper-raised); }
.visual-key { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 !important; font-size: .8125rem; color: var(--ink-muted); }
.visual-key i { width: 9px; height: 9px; display: inline-block; background: var(--guide-blue); }
.visual-key i + i { background: var(--guide-red); margin-left: 8px; }
#anchor .result > strong { color: var(--guide-blue); font-size: clamp(2.1rem, 4vw, 3.5rem); }
#loss-slider { margin-top: 18px; }
#anchor .tool-heading h3 { max-width: 22ch; }
.habit-example { padding: 20px; border-left: 3px solid var(--label); background: var(--paper-raised); }
.habit-example h3 { margin-bottom: 12px; }
.habit-example p:last-child { margin: 0; }
.trade-strip { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 6px; margin: 20px 0 26px; }
.trade-strip span { text-align: center; border-radius: 5px; padding: 12px 0; font: 500 1.25rem var(--mono); border: 1px solid; }
.trade-win { color: var(--guide-green); background: #7fc29b14; border-color: #7fc29b66 !important; }
.trade-loss { color: var(--guide-red); background: #e08a7414; border-color: #e08a7470 !important; }
.ledger-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.ledger-totals span { display: block; color: var(--ink-muted); font-size: .875rem; }
.ledger-totals strong { display: block; font: 700 2rem/1.3 var(--serif); color: var(--guide-green); margin-top: 8px; overflow-wrap: anywhere; }
.ledger-totals > div:nth-child(2) strong, .ledger-totals .ledger-net strong { color: var(--guide-red); }
.ledger-net { border-left: 1px solid var(--rule-strong); padding-left: 18px; }
.answer-options button { gap: 12px; border-radius: 6px; transition: border-color .16s ease, background-color .16s ease; }
.answer-copy { flex: 1; min-width: 0; }
.answer-state { font: .75rem/1.3 var(--mono); flex: 0 0 auto; }
.answer-options button[data-answer-state="correct"] { background: #7fc29b16; color: var(--ink); border-color: var(--guide-green); }
.answer-options button[data-answer-state="incorrect"] { background: #e08a7418; color: var(--ink); border-color: var(--guide-red); }
.answer-options button[data-answer-state="correct"] .answer-state { color: var(--guide-green); }
.answer-options button[data-answer-state="incorrect"] .answer-state { color: var(--guide-red); }
.answer-options button[data-answer-state="neutral"] { background: var(--paper); color: var(--ink-body); border-color: var(--rule-strong); }
.quiz-feedback { border-radius: 0 5px 5px 0; padding: 16px; }
.quiz-feedback[data-answer-state="correct"] { border-color: var(--guide-green); background: #7fc29b0a; }
.quiz-feedback[data-answer-state="incorrect"] { border-color: var(--guide-red); background: #e08a740b; }
.quiz-feedback strong { display: block; font-size: 1.125rem; margin-bottom: 8px; }
.quiz-feedback[data-answer-state="correct"] strong { color: var(--guide-green); }
.quiz-feedback[data-answer-state="incorrect"] strong { color: var(--guide-red); }
.quiz-feedback p { margin: 0; font-size: .9375rem; line-height: 1.6; }
.three-fees { display: block; padding-top: 10px; }
.three-fees > div { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(170px,1fr); gap: 0 24px; padding: 22px 0 !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; }
.three-fees .fee-rate { font: 600 1.125rem/1.45 var(--mono); margin-bottom: 8px; }
.fee-scenario p { margin: 0; max-width: 36ch; font-size: .9375rem; line-height: 1.5; color: var(--ink-body); }
.fee-outcome { grid-column: 2; grid-row: 1; align-self: center; text-align: right; min-width: 0; }
.three-fees .fee-outcome > span { margin-bottom: 6px; font-size: .875rem; line-height: 1.4; }
.three-fees .fee-outcome strong { max-width: none; font-size: clamp(1.45rem,2.5vw,2rem); }
.fee-value-track { grid-column: 1/-1; height: 8px; margin-top: 14px; border-radius: 3px; overflow: hidden; background: var(--paper); }
.fee-value-track span { display: block; height: 100%; background: var(--guide-blue); transition: width .25s ease; }
#fee-high-bar { background: var(--label); }
#fee-managed-bar { background: var(--guide-red); }
@media (max-width: 1100px) {
 .lesson-body { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .research-card { position: static; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 0 26px; }
 .research-card .research-type { grid-column: 1/-1; margin-bottom: 12px; }
 .research-card h3 { grid-column: 1; grid-row: 2/4; }
 .research-card > p:not(.research-type) { grid-column: 2; }
 .research-card a { grid-column: 2; }
}
@media (max-width: 760px) {
 .guide-index nav ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
 .guide-index { padding: 18px 0 12px; }
 .journey-toolbar { align-items: flex-start; gap: 12px; }
 .journey-toolbar .button { padding: 9px 10px; font-size: .8125rem; max-width: 125px; }
 .journey-toolbar strong { font-size: .875rem; }
 .lesson-title { gap: 12px; }
 .lesson-number { min-width: 35px; width: 35px; height: 35px; font-size: .875rem; }
 .lesson-actions { gap: 12px; }
 .lesson-next { min-width: 0; padding: 14px 16px; gap: 3px 12px; }
 .journey-note { max-width: 95px; }
 .answer-options button { flex-wrap: wrap; }
 .answer-state:not(:empty) { flex-basis: calc(100% - 36px); margin-left: 36px; }
 .answer-copy { flex: 1 0 calc(100% - 42px); }
 .research-card { display: block; padding: 20px; }
 .research-card h3 { font-size: 1.7rem; max-width: 23ch; }
 .research-card p { margin-bottom: 12px; }
 .research-card a { padding: 4px 0; }
}
@media (max-width: 480px) {
 .learn { padding-left: 16px; padding-right: 16px; }
 .guide-intro { gap: 20px; }
 .exercise { padding: 18px; }
 .recovery-visual { padding: 14px; }
 .value-track > div:first-child { flex-wrap: wrap; }
 .trade-strip { gap: 4px; }
 .trade-strip span { font-size: .875rem; padding: 9px 0; }
 .ledger-totals { grid-template-columns: 1fr; gap: 16px; }
 .ledger-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .ledger-totals strong { margin: 0; font-size: 1.8rem; }
 .ledger-net { border: 0; border-top: 1px solid var(--rule-strong); padding: 16px 0 0; }
 .three-fees strong { max-width: 135px; font-size: 1.4rem; }
 .three-fees .fee-rate { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .track > span, .fee-value-track span, .lesson-next, .lesson-next b, .guide-index nav li a, .answer-options button { transition: none; }
}
@media (max-width: 600px) {
 .three-fees > div { grid-template-columns: minmax(0,1fr); gap: 16px 0; }
 .fee-outcome { grid-column: 1; grid-row: auto; text-align: left; }
 .three-fees .fee-value-track { margin-top: 0; }
 .three-fees .fee-outcome strong { font-size: 1.8rem; }
}
@media print {
 .lesson[hidden] { display: block !important; }
 .lesson-body { display: block; }
 .lesson-actions, .journey-toolbar, .mobile-hint { display: none !important; }
 .research-card { position: static; display: block; break-inside: avoid; margin: 20px 0; background: white; border-color: #777; }
 .recovery-visual, .habit-example { background: white; }
 .quiz-feedback { display: none; }
 .fee-value-track span, .track > span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.visual-key > span { display: inline-flex; align-items: center; gap: 7px; }
.visual-key .lost-key i { background: var(--guide-red); }
.visual-key .key-note { flex-basis: 100%; margin-top: 2px; }
@media print {
 .lesson, [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
 .answer-options button { color: black !important; background: white !important; border: 1px solid #777 !important; }
 input, select { color: black !important; background: white !important; border: 1px solid #777 !important; -webkit-text-fill-color: black !important; }
}

/* A quieter reading layout. One exercise, one explanation, optional evidence. */
.learn { max-width: 1080px; padding-top: 28px; --guide-blue: var(--door-company); --guide-green: var(--door-ask); --guide-red: var(--door-earnings); }
.guide-intro { grid-template-columns: minmax(0,1.5fr) minmax(250px,1fr); gap: 48px; padding-bottom: 26px; }
.learn h1 { font-size: clamp(2rem,3.5vw,3rem); margin: 0 0 12px; line-height: 1.1; }
.guide-intro .eyebrow { margin-bottom: 9px; }
.intro-deck { font-size: 1rem; margin-bottom: 0 !important; max-width: 40ch; }
.portfolio-card { background: transparent; color: var(--ink-body); padding: 0 0 0 26px; border-left: 1px solid var(--rule); }
.portfolio-card label { font-weight: 400; font-size: .875rem; color: var(--ink-muted); }
.portfolio-input-wrap { gap: 8px; margin: 0 0 8px; padding: 4px 0 6px; border-bottom: 1px solid var(--rule-strong); }
.portfolio-input-wrap > span, .portfolio-input-wrap input { font: 500 1.65rem/1.4 var(--mono); color: var(--ink); }
.portfolio-card p { margin-bottom: 0; font-size: .8125rem; line-height: 1.45; }
.guide-index { padding: 9px 0; border-color: var(--rule); }
.journey-toolbar { margin: 0; min-height: 46px; }
.journey-toolbar strong { font: .875rem/1.4 var(--mono); color: var(--ink-muted); }
.lesson-menu { position: relative; flex: 0 0 auto; }
.lesson-menu > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .9375rem; color: var(--ink); list-style: none; }
.lesson-menu > summary::-webkit-details-marker { display: none; }
.lesson-menu > summary::after { content: '+'; font: 1.25rem var(--mono); color: var(--ink-muted); }
.lesson-menu[open] > summary::after { content: '−'; }
.lesson-menu[open] { z-index: 5; }
.lesson-menu-panel { position: absolute; right: 0; top: 100%; width: min(330px,80vw); max-height: min(70dvh,600px); overflow-y: auto; background: var(--paper-raised); border: 1px solid var(--rule-strong); padding: 10px 14px; box-shadow: 0 12px 28px #0005; }
.lesson-menu nav { position: static; padding: 0; }
.guide-index .lesson-menu nav ol { display: grid; grid-template-columns: 1fr; gap: 0; overflow: visible; padding: 0; }
.guide-index .lesson-menu nav li a { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; font-size: .9375rem; min-height: 40px; padding: 9px 8px; }
.guide-index .lesson-menu nav li a[aria-current="step"] { background: var(--paper); color: var(--ink); }
.lesson-menu #toggle-all { display: block; width: 100%; max-width: none; min-height: 44px; margin-top: 8px; padding: 8px; font-size: .875rem; border: 0; text-decoration: underline; text-underline-offset: .2em; background: transparent; }
.lesson { padding: 28px 0 18px; }
.lesson-title { gap: 16px; margin-bottom: 18px; }
.lesson-title h2 { font-size: clamp(1.6rem,2.8vw,2.1rem); max-width: 30ch; }
.lesson-title p { max-width: 66ch; }
.lesson-number { background: none; border: 0; border-radius: 0; padding-top: 4px; width: auto; height: auto; min-width: 26px; color: var(--ink-muted); font-size: .9375rem; }
.lesson-body { display: block; padding-left: 42px; }
.exercise { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 22px; }
.tool-heading { margin-bottom: 12px; justify-content: flex-end; }
button.amount-tag { border: 0; padding: 2px 0; min-height: 40px; font: .875rem/1.4 var(--body); }
.amount-tag .edit-word { margin-left: 12px; }
.exercise-inner { gap: 32px; }
.result { border-color: var(--rule); }
.result > strong { font: 500 clamp(1.85rem,3vw,2.6rem)/1.2 var(--mono); letter-spacing: -.045em; }
.recovery-visual { padding: 0; border: 0; background: none; border-radius: 0; margin: 0 0 24px; }
#anchor .exercise-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 24px; margin-bottom: 28px; align-items: center; }
.recovery-controls { display: contents; }
.recovery-controls > label[for="loss-input"] { grid-column: 1; grid-row: 1; margin: 0; }
.recovery-controls > .number-field { grid-column: 1; grid-row: 2; }
#anchor .exercise-inner > .result { grid-column: 2; grid-row: 1/3; border: 0; border-left: 1px solid var(--rule); padding: 0 0 0 20px; }
#anchor #loss-slider { grid-column: 1/-1; grid-row: 3; margin: 8px 0 0; }
.recovery-controls > .presets { grid-column: 1/-1; grid-row: 4; margin: 0; }
.track { height: 18px; border-radius: 0; }
.track-start { background: var(--ink-muted); opacity: .65; }
.track-lost { background: color-mix(in srgb,var(--guide-red) 35%,var(--paper)); border-left: 1px solid var(--paper); }
.visual-key .key-note { flex-basis: auto; margin: 0 0 0 9px; }
#anchor .result > strong { font: 500 clamp(2rem,4vw,3.2rem)/1.15 var(--mono); }
.plain-example { background: none; border: 0; padding: 0; margin-top: 22px !important; max-width: 70ch; }
.recovery-explanation { margin-top: 16px !important; }
.learn .small { margin-top: 12px; }
.takeaway { padding-top: 16px; margin-top: 22px !important; border-top: 1px solid var(--rule); max-width: 75ch; }
.lesson-evidence { margin-top: 12px; }
.lesson-evidence > summary { color: var(--ink-muted); min-height: 44px; padding: 12px 0; font-size: .9375rem; }
.lesson-evidence > summary:hover { color: var(--ink); }
.evidence-body { border-left: 1px solid var(--rule-strong); padding: 2px 0 4px 20px; margin: 8px 0 18px; max-width: 76ch; }
.evidence-body p { padding: 0; font-size: .9375rem; line-height: 1.6; margin-bottom: 14px; }
.evidence-body .research-scope { color: var(--ink-muted); font-size: .875rem; }
.evidence-body .evidence-type { font: .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin-bottom: 10px; }
.evidence-body > a { display: inline-block; min-height: 40px; padding: 6px 0; font-size: .9375rem; }
.source-background { margin: 8px 0; }
.source-background > summary { font-size: .875rem; }
.source-background p { padding-top: 12px; }
.lesson-actions { margin-top: 22px; padding-top: 18px; }
.lesson-next { background: none; border: 0; border-radius: 0; min-width: 180px; padding: 6px 0 6px 18px; }
.lesson-next > span { color: var(--ink-muted); }
.lesson-next:hover { background: none; }
.lesson-back { color: var(--ink-muted); }
.fee-context { font-size: .9375rem; max-width: 72ch; margin-bottom: 8px !important; }
.fee-context [data-portfolio], .fee-context #growth-label, .fee-context #monthly-label { color: var(--ink); }
.fee-change-amount { min-height: 32px; padding: 2px 0; margin-left: 8px; }
.assumption-warning { font-size: .875rem; color: var(--ink-muted); margin: 0 0 24px !important; }
.learn .fee-horizon { color: var(--ink-muted); font-size: .875rem; margin: 0 0 8px; }
.three-fees { padding: 0; }
.three-fees > div { padding: 16px 0 !important; gap: 0 24px; }
.three-fees .fee-rate { font: 600 1rem/1.4 var(--body); margin-bottom: 4px; }
.fee-scenario p { font-size: .875rem; max-width: none; }
.three-fees .fee-outcome strong { font: 500 clamp(1.3rem,2.4vw,1.85rem)/1.3 var(--mono); letter-spacing: -.055em; }
.fee-control { margin-top: 24px; gap: 12px; }
.fee-settings > summary { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--ink-muted); text-decoration: underline; text-underline-offset: .2em; }
.fee-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; gap: 18px; align-items: end; padding: 12px 0 20px; }
.fee-settings-grid input { width: 100%; min-width: 0; border: 1px solid var(--rule-strong); background: var(--paper-raised); padding: 8px 10px; font: 1.1rem var(--mono); }
.fee-settings-grid label { margin: 0 0 8px; font-size: .875rem; }
.story-card { background: none; border-color: var(--rule-strong); padding: 16px 0 0; }
.story-grid { gap: 32px; }
.story-card + .story-card { border-color: var(--rule-strong); }
.trade-strip { gap: 5px; }
.trade-strip span { border: 0 !important; border-radius: 0; padding: 9px 0; background: transparent; border-bottom: 2px solid var(--guide-green) !important; }
.trade-strip .trade-loss { border-bottom-color: var(--guide-red) !important; }
.answer-options button { background: transparent; border-radius: 0; border-width: 0 0 1px; padding: 14px 8px; }
.answer-options { gap: 0; border-top: 1px solid var(--rule-strong); }
.answer-options button[data-answer-state="neutral"] { background: transparent; }
.quiz-feedback { background: none !important; border-radius: 0; padding: 4px 0 4px 16px; }
.protection-note { background: none; padding: 4px 0 4px 18px; }
.habit-example { background: none; }
.course-door { background: transparent; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 0; }
.checklist { background: transparent; border-top: 1px solid var(--rule); padding: 28px 0; margin-top: 22px; }
.source-notes { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 20px; padding-top: 18px; }
.guide-notes { max-width: 72ch; font-size: .875rem; }
.guide-notes summary { min-height: 44px; padding: 9px 0; color: var(--ink-muted); }
.guide-notes p { margin: 12px 0; }
.source-notes .button { margin: 0; padding: 8px 0; border: 0; text-decoration: underline; text-underline-offset: .2em; color: var(--ink-muted); flex-shrink: 0; font-weight: 400; }
@media (max-width: 760px) {
 .learn { padding: 22px 20px 40px; }
 .guide-intro { grid-template-columns: 1fr; gap: 14px; padding-bottom: 14px; }
 .guide-intro .eyebrow { display: none; }
 .intro-deck { max-width: 37ch; }
 .portfolio-card { border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.05fr; gap: 5px 18px; align-items: baseline; }
 .portfolio-input-wrap { margin: 0; }
 .portfolio-input-wrap > span, .portfolio-input-wrap input { font-size: 1.35rem; }
 #portfolio-help, #portfolio-error { grid-column: 1/-1; }
 .journey-toolbar { align-items: center; gap: 14px; }
 .journey-toolbar strong { font-size: .75rem; }
 .lesson-menu > summary { font-size: .875rem; gap: 7px; }
 .lesson { padding-top: 24px; }
 .lesson-title { gap: 10px; }
 .lesson-number { min-width: 22px; width: 22px; padding-top: 3px; }
 .lesson-body { padding: 0; }
 .lesson-title p { font-size: .9375rem; }
 .exercise-inner { gap: 20px; }
 .result { padding-top: 18px; }
 .visual-key .key-note { flex-basis: 100%; margin: 0; }
 .story-grid { gap: 22px; }
 .lesson-next { min-width: 0; }
 .fee-settings-grid { grid-template-columns: 1fr; gap: 14px; }
 .fee-settings-grid button { justify-self: start; }
 .source-notes { gap: 15px; }
 .source-notes .button { font-size: .8125rem; }
}
@media (max-width: 600px) {
 #anchor .exercise-inner > .result { grid-column: 1/-1; grid-row: 3; border-left: 0; border-top: 1px solid var(--rule); padding: 16px 0 0; }
 #anchor #loss-slider { grid-row: 4; }
 .recovery-controls > .presets { grid-row: 5; }
 #anchor #recovery-error { grid-row: 6; }
 .three-fees > div { grid-template-columns: minmax(0,1fr) auto; gap: 0 14px; }
 .fee-outcome { grid-column: 2; grid-row: 1; text-align: right; }
 .three-fees .fee-outcome strong { font-size: 1.2rem; }
 .three-fees .fee-rate { font-size: .9375rem; }
 .fee-scenario p { font-size: .875rem; }
 .fee-control label { flex-basis: 100%; }
}
@media (max-width: 360px) {
 .learn { padding-left: 16px; padding-right: 16px; }
 .three-fees > div { grid-template-columns: 1fr; gap: 8px; }
 .fee-outcome { grid-column: 1; grid-row: 2; text-align: left; }
 .three-fees .fee-outcome strong { font-size: 1.45rem; }
 .journey-toolbar strong { max-width: 135px; }
}
@media print {
 .lesson-body { padding: 0; }
 .lesson-evidence { break-inside: avoid; }
 .learn summary, .learn summary::marker, .learn summary::after { color: black !important; }
 .lesson-evidence > summary { font-weight: 600; }
 .exercise, .checklist, .course-door { border: 0; }
 .checklist { break-inside: avoid; }
 .fee-settings, .lesson-menu { display: none !important; }
 .source-notes { display: block; }
 .portfolio-card { border: 0; }
}

/* Keep the lesson controls available without adding another panel to the page. */
html { scroll-padding-top: calc(var(--gn-height, 72px) + 62px); }
.guide-index { position: sticky; top: var(--gn-height, 72px); z-index: 12; background: var(--paper); padding: 7px 0; }
.journey-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
#return-to-checks { font-size: .8125rem; padding: 6px 0; text-underline-offset: .2em; }
.menu-checklist { display: block; padding: 12px 8px; min-height: 44px; font-size: .9375rem; text-underline-offset: .2em; }
#recovery-error { grid-column: 1/-1; grid-row: 5; margin: 0; }
.question-help { font-size: .875rem; color: var(--ink-muted); margin: -2px 0 18px !important; }
.bill-entry { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bill-entry > span { font: 1.5rem var(--mono); }
.bill-entry input { min-width: 0; width: 100%; }
#bill-mode { max-width: 38ch; }
#bill-mode + button { margin-bottom: 12px; }
#time label[for="bill-fall"] { margin-top: 24px; }
#fee-contributions { margin: 12px 0 0; font-size: .875rem; }
#fee-results-title:focus-visible { outline-offset: 6px; }
.check-row { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.checklist .check-row label { border: 0; padding: 6px 0; margin: 0; }
.check-review { padding-left: 32px; display: flex; flex-wrap: wrap; gap: 0 24px; }
.check-review a { color: var(--ink-muted); font-size: .875rem; min-height: 40px; padding: 8px 0; text-underline-offset: .2em; }
.check-review a:hover { color: var(--ink); }
#clear-checks { margin-top: 16px; }
@media (max-width: 760px) {
 .guide-index { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
 .journey-toolbar > div { flex-direction: column; align-items: flex-start; }
 .journey-toolbar { min-height: 46px; }
}
@media (max-width: 360px) {
 .guide-index { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
@media print {
 .guide-index { display: none !important; }
 .check-review, #reset-bill { display: none; }
 .check-row { break-inside: avoid; }
}

/* Short lessons keep a stable reading position when advancing. */
.guide-layout { min-height: calc(100svh - var(--gn-height, 72px)); }
#low-fee { color: var(--guide-blue); }
#managed-fee { color: var(--guide-red); }
@media print { .guide-layout { min-height: 0; } }
@media (max-width: 600px) {
 .three-fees > div { grid-template-columns: 1fr; gap: 10px; }
 .three-fees .fee-outcome { grid-column: 1; grid-row: 2; text-align: left; }
 .three-fees .fee-outcome strong { font-size: 1.5rem; }
}

/* ============================================================================
   THE GUIDE IN THE SPECTRUM SYSTEM (owner instruction, 6 September 2026).

   The page arrived flat: every block on the ground, one blue, and sand where the
   rest of the site puts colour. Beside the home page and the landing page it read
   grey, and the owner said so. This layer puts the guide in the same clothes as
   the site WITHOUT undoing the calm pass that made it readable (see
   docs/research/investing-mistakes/calm-revision.md): no duplicate headings, no
   nested explanation boxes, no gradients, no second copy of the evidence. What it
   adds is the site's own vocabulary and nothing invented for this page.

   THE TILE. #1e1b14 on the #14120d ground, 4px corners, no border, 24px of
   padding: the home page's tile exactly. The worked example is the thing on this
   page that earns one, so each lesson is a column of prose with ONE lit panel in
   it rather than a stack of boxes. Prose stays on the ground, where it reads best.

   COLOUR IS LIGHT, NOT FILL, AND EACH LESSON GETS ONE OF IT. Five reading hues
   cycle down the twelve lessons; a lesson's number, its figure, its bars and its
   pressed control take that lesson's hue, and nothing else does. Reading one
   lesson at a time, the page changes colour as you move through it.

   GREEN AND CORAL ARE NOT IN THE ROTATION, on purpose. On this page green already
   means a right answer and money kept, and coral a wrong one and money lost. A
   hue that also meant "lesson 6" would make both of them mean nothing. For the
   same reason the rotation avoids the rust: the rust is the SITE's, so here it
   stays the page's own chrome (the kicker over the title, the lesson counter, the
   one filled button) and never labels a number.

   EVERY HUE CLEARS 4.5:1 ON THE GROUND AND ON THE TILE, checked with the same WCAG
   sums tests/palette-dark.test.js uses, so a figure set in one is readable
   wherever it lands: sky 8.07/7.41, gold 9.34/8.58, teal 9.17/8.42, plum
   6.58/6.04, lavender 8.60/7.90, rust 5.79/5.32. Three are palette tokens; gold
   and lavender are written as literals because the palette has no name for them
   yet, and both are lifted unchanged from the home page's Spectrum set.
   ========================================================================== */
.learn { --hue: var(--door-company); }
.lesson[data-lesson="anchor"], .lesson[data-lesson="revenge"], .lesson[data-lesson="headline"] { --hue: var(--door-company); }
.lesson[data-lesson="costs"], .lesson[data-lesson="panic"], .lesson[data-lesson="charts"] { --hue: #d9b25f; }
.lesson[data-lesson="concentration"], .lesson[data-lesson="fomo"] { --hue: var(--teal); }
.lesson[data-lesson="leverage"], .lesson[data-lesson="activity"] { --hue: var(--plum); }
.lesson[data-lesson="winrate"], .lesson[data-lesson="time"] { --hue: #b1a9e3; }
/* One declaration hands the lesson's hue to everything already written against
   --guide-blue, because it is redeclared per lesson and inherits down the article.
   --guide-green and --guide-red are deliberately left alone: they carry meaning. */
.lesson { --guide-blue: var(--hue); }

/* ---- the page's own chrome, in the site's rust -------------------------------- */
.guide-intro .eyebrow, .checklist .eyebrow { color: var(--accent); letter-spacing: .12em; }
.journey-toolbar strong { color: var(--accent); }
.source-notes .button { color: var(--accent); }
.source-notes .button:hover { color: var(--accent-dark); }

/* ---- the shared amount, as a tile --------------------------------------------- */
.portfolio-card { background: var(--paper-raised); border: 0; border-radius: 4px; padding: 20px 22px; }
.portfolio-card label { font: .75rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.portfolio-input-wrap { border-bottom-color: var(--rule-strong); }
.portfolio-card p { color: var(--ink-soft); }

/* ---- the lesson's number, a chip in its hue ----------------------------------- */
.lesson-number {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; width: 34px; height: 34px; padding: 0; margin-top: 3px; border-radius: 4px;
  background: color-mix(in srgb, var(--hue) 14%, var(--paper));
  color: var(--hue); font: 500 .8125rem/1 var(--mono);
}

/* ---- the worked example, the one lit panel in a lesson ------------------------- */
.exercise { background: var(--paper-raised); border: 0; border-radius: 4px; padding: 24px 26px; margin: 0 0 22px; }
/* A control on a tile is sunk, not raised: the brief's chips are #17150f on #1e1b14. */
.exercise .number-field input, .exercise .amount-field, .exercise .presets button,
.exercise select, .exercise .bill-entry input, .fee-settings-grid input { background: var(--paper-sunk); }
.exercise .track, .exercise .impact-bar { background: var(--paper-sunk); }
.presets button[aria-pressed="true"] { background: var(--hue); border-color: var(--hue); color: var(--accent-on); }
.presets button[aria-pressed="true"]:hover { border-color: var(--hue); }
.result { border-left-color: var(--rule-strong); }
.result > strong, .big-score { color: var(--hue); }
.big-score span { color: var(--ink-soft); }
input[type="range"] { accent-color: var(--hue); }
input[type="checkbox"] { accent-color: var(--hue); }

/* ---- the bars: the same hue, lit for what is left and dimmed for the reference --
   Both fills clear the palette's 3:1 bar against the surface they sit on, computed
   the same way tests/palette-dark.test.js computes it. The lost portion is the FULL
   coral rather than the wash it arrived as (1.9:1, below that bar and muddy beside
   its own key swatch); the reference bar is the lesson's hue held at 65%, which is
   3.4:1 at the dimmest hue and still reads as the same money, before. */
.track { border-radius: 3px; }
.track-start { background: color-mix(in srgb, var(--hue) 65%, var(--paper-sunk)); opacity: 1; }
.track-remaining { background: var(--hue); }
.track-lost { background: var(--guide-red); border-left: 1px solid var(--paper-raised); }
.trade-strip span { border-radius: 3px; }

/* ---- the two outcome cards, topped in the lesson's hue ------------------------- */
.story-card { border-top: 2px solid var(--hue); padding-top: 14px; }
.story-card + .story-card { border-top-color: var(--hue); }
.story-card .story-amount strong { color: var(--ink); }
.bet.winner { border-top-color: var(--guide-green); }
.bet.losers { border-top-color: var(--guide-red); }
.bet.total { border-top-color: var(--hue); }

/* ---- the course door and its one filled button --------------------------------- */
.course-door {
  background: var(--paper-raised); border: 0; border-radius: 4px;
  padding: 22px 26px; margin: 22px 0;
}
.course-door h3 { color: var(--ink); }
.course-door .button {
  background: var(--accent); border: 0; border-radius: 4px; color: var(--accent-on);
  font-weight: 600; padding: 13px 18px;
}
.course-door .button:hover { background: var(--accent-dark); color: var(--accent-on); }

/* ---- next lesson, a tile that lifts like every other link tile on the site ------ */
.lesson-next {
  background: var(--paper-raised); border: 0; border-radius: 4px;
  padding: 14px 20px; transition: transform .2s ease, background-color .2s ease;
}
.lesson-next > span { color: var(--hue); letter-spacing: .1em; }
.lesson-next:hover { background: var(--paper-raised); transform: translateY(-2px); }

/* ---- the five checks, the finale, as a tile ------------------------------------ */
.checklist {
  background: var(--paper-raised); border: 0; border-radius: 4px;
  padding: 30px 32px; margin-top: 26px;
}
.checklist h2 { color: var(--ink); }
.check-row { border-bottom-color: var(--rule-strong); }

/* ---- the amount editor, taking the same filled button --------------------------- */
#portfolio-dialog { border: 0; border-radius: 4px; box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .6); }
#portfolio-dialog .amount-field { background: var(--paper-sunk); }
.dialog-actions .button { background: var(--accent); color: var(--accent-on); border: 0; border-radius: 4px; }
.dialog-actions .button:hover { background: var(--accent-dark); }

@media (max-width: 760px) {
  .portfolio-card { padding: 16px 18px; }
  .exercise { padding: 20px; }
  .checklist, .course-door { padding: 22px 20px; }
  .lesson-number { min-width: 28px; width: 28px; height: 28px; margin-top: 2px; font-size: .75rem; }
  /* The kicker sits in a half-width column here, and "Example portfolio" wraps in it. */
  .portfolio-card label { font-size: .6875rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .lesson-next { transition: none; } }
@media print {
  /* The tiles are screen furniture. On paper the guide is black on white, as the
     calm pass left it, and every panel flattens back out. */
  .exercise, .portfolio-card, .checklist, .course-door, .lesson-next { background: white !important; border-radius: 0; padding: 0; }
  .exercise, .checklist, .course-door { border: 0; margin: 12px 0; }
  .lesson-number { background: none !important; color: black !important; width: auto; height: auto; min-width: 26px; }
  .course-door .button { background: none !important; color: black !important; border: 1px solid #777; }
  .story-card { border-top-color: #777; }
}

/* A thumb needs 44px on a phone: the sliders, the portfolio button and the small links measured 19 to
   32px (audit, 11 Sep 2026). */
@media (max-width: 760px) {
  .learn input[type=range] { height: 44px; }
  .learn .text-link, .learn .text-button { display: inline-flex; align-items: center; min-height: 44px; }
}