/* A shared visual layer for the live page and versioned previews. */
:root { --ink:#1c2925; --muted:#60716a; --line:#dce4df; --paper:#f5f7f5; --green:#217556; --green-bg:#e9f4ed; --blue:#35778d; --blue-bg:#edf5f8; --yellow-bg:#fcf4e6; --shadow:none; --shadow-soft:none; }
body { background:var(--paper); color:var(--ink); letter-spacing:0; }
header { position:relative; background:#fff; border-bottom:1px solid var(--line); backdrop-filter:none; }
.wrap, main { max-width:1280px; margin:auto; }
.hero { display:block; padding:20px 0 0; }
.hero > div:first-child { max-width:none; }
.hero h1 { max-width:850px; font-size:34px; line-height:1.45; letter-spacing:0; }
.eyebrow { background:none; border:0; padding:0; color:var(--green); border-radius:0; }
.hero .lead { max-width:850px; font-size:15px; line-height:1.8; }
.hero-panel.hero-visual { display:none; }
.hero-panel.hero-visual.outcome-illustration { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; height:auto; min-height:0; background:none; border:0; padding:20px 0 0; margin-top:20px; box-shadow:none; }
.outcome-illustration img { width:100%; height:auto; position:static; border-radius:6px; object-fit:contain; }
.outcome-illustration .hero-visual-card { position:static; display:grid; gap:12px; align-content:center; padding:0; background:none; border:0; box-shadow:none; }
.outcome-illustration .visual-chip { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 0; }
.hero nav { display:flex; gap:4px; padding-top:18px; margin-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }
button.nav-btn { display:inline-flex; align-items:center; gap:9px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#52655b; box-shadow:none; padding:15px 18px; min-height:48px; }
button.nav-btn.active { background:#eff6f1; color:#175239; border-bottom-color:#217556; }
.ui-icon { width:19px; height:19px; flex-shrink:0; stroke-width:1.7; vertical-align:middle; }
main { padding:30px 24px 60px; }
.grid { gap:26px; }
.panel { background:transparent; border:0; border-radius:0; box-shadow:none; padding:20px 0; min-width:0; }
.panel::before { display:none; }
.panel.span-12 { border-top:1px solid var(--line); }
.panel h2 { font-size:23px; line-height:1.45; letter-spacing:0; margin-bottom:16px; }
.panel h3 { line-height:1.5; letter-spacing:0; }
#gap .span-5 { padding-right:24px; border-right:1px solid var(--line); }
input,select,textarea { border-radius:6px; background:#fff; border-color:#cbd8d0; font-size:15px; }
button.small { border-radius:6px; box-shadow:none; min-height:40px; }
button.primary { background:#217556; border-color:#217556; color:#fff; }
button:hover { transform:none; }
:is(button,a,summary,input,select,textarea):focus-visible { outline:3px solid #358c77; outline-offset:3px; }
.result-card,.mini-card,.guide-card,.solution-group,.challenge-brief,.artifact-workspace { box-shadow:none; border-radius:6px; }
.result-card { padding:18px 0; border:0; border-bottom:1px solid var(--line); background:transparent; }
.result-card.good,.result-card.danger { background:transparent; }
.tag { border-radius:4px; font-weight:600; letter-spacing:0; }
.guide-grid { gap:12px; }
.guide-card { background:#fff; border:1px solid var(--line); padding:18px; }
.ui-disclosure { margin:12px 0; border-top:1px solid var(--line); }
.ui-disclosure > summary { cursor:pointer; display:flex; gap:10px; align-items:center; padding:15px 0; font-weight:650; list-style:none; line-height:1.5; }
.ui-disclosure > summary::-webkit-details-marker { display:none; }
.ui-disclosure > summary::after { content:'+'; margin-left:auto; font-size:22px; font-weight:400; color:var(--green); }
.ui-disclosure[open] > summary::after { content:'−'; }
.ui-disclosure > summary h3 { margin:0; font-size:17px; }
.ui-disclosure > :not(summary) { margin:0 0 18px; }
.guide-card:has(.ui-disclosure),.solution-group:has(.ui-disclosure) { padding-top:0; padding-bottom:0; }
.guide-card .ui-disclosure,.solution-group .ui-disclosure { border-top:0; margin:0; }
.tool-mark { display:inline-flex; position:relative; vertical-align:middle; align-items:center; justify-content:center; width:34px; height:34px; margin:0 4px; border:1px solid #dce4df; border-radius:8px; background:#fff; cursor:help; }
.tool-mark img { width:24px; height:24px; object-fit:contain; }
.tool-mark::after { content:attr(aria-label); display:none; position:absolute; z-index:60; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:#213b30; color:white; padding:6px 9px; border-radius:4px; font:500 13px/1.4 system-ui; white-space:nowrap; }
.tool-mark:hover::after,.tool-mark:focus-visible::after { display:block; }
.tool-mark.brand-unavailable { width:auto; min-width:34px; font-size:13px; padding:0 5px; }
.tool-lanes { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:22px 0; max-width:800px; }
.tool-lane { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border-left:3px solid #217556; padding-left:16px; }
.tool-lane:last-child { border-left-color:#35778d; }
.tool-lane strong { display:block; width:100%; font-size:14px; }
.tool-lane small { display:block; width:100%; color:var(--muted); font-size:13px; }
.visual-dashboard-head,.major-visual-dashboard { background:#fff; border-radius:6px; }
.score-result { align-self:start; background:white; padding:24px; border-top:3px solid var(--green); }
.score-number { color:var(--green); font-size:64px; }
.choice-list button,.flow-step { background:#fff; border-color:var(--line); border-radius:6px; box-shadow:none; }
.choice-list button.active,.flow-step.active { border-color:var(--green); background:#edf6f0; }
.challenge-day-rail { gap:6px; }
.challenge-day-button { box-shadow:none; border-radius:4px; background:#fff; }
.challenge-day-button.active { background:#e7f2eb; border-color:var(--green); }
.challenge-output { background:#f6f8f7; border:1px solid var(--line); color:#243c30; overflow-wrap:anywhere; font-size:15px; }
.ai-reply-body { border-left:3px solid var(--green); padding:16px 20px; background:white; line-height:1.8; }
.why-item > span { background:#e9f4ed; color:var(--green); border-radius:50%; }
.completion-gates span { border-radius:4px; }
@media(max-width:760px) {
  .hero-panel.hero-visual.outcome-illustration { grid-template-columns:1fr; }
  .wrap { padding:20px 16px 0; }
  main { padding:12px 16px 40px; }
  .hero h1 { font-size:25px; }
  .hero nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
  button.nav-btn { padding:10px 4px; flex-direction:column; font-size:12px; gap:6px; }
  .tool-lanes { gap:12px; }
  #gap .span-5 { padding-right:0; border-right:0; }
  .panel h2 { font-size:21px; }
  .tool-mark { width:30px; height:30px; margin:0 2px; }
  .tool-mark img { width:22px; height:22px; }
  .grid { gap:14px; }
}