@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap");
:root { --ink: #183c36; --dark: #173b34; --muted: #67726e; --paper: #f5f4ef; --white: #fff; --line: #dde2dc; --green: #256451; --pale: #eaf1e9; --gold: #c1a46b; --clay: #9c654b; --shadow: 0 5px 22px #173b3406; font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: rgb(209, 168, 77) solid 3px; outline-offset: 3px; }
a { color: var(--green); }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0px; }
p { line-height: 1.6; }
h1 { font-family: "Libre Caslon Display", Georgia, serif; font-size: 48px; font-weight: 400; line-height: 1.1; letter-spacing: -0.8px; }
h2 { font-size: 20px; letter-spacing: -0.4px; line-height: 1.35; }
h3 { font-size: 15px; line-height: 1.4; }
small { font-size: 12px; line-height: 1.5; }
button { border: 0px; background: none; color: inherit; }
input, select, textarea { color: var(--ink); background: rgb(255, 255, 255); border: 1px solid rgb(205, 213, 205); border-radius: 7px; min-height: 42px; padding: 10px 12px; max-width: 100%; }
textarea { resize: vertical; min-height: 94px; line-height: 1.5; }
input[type="checkbox"] { min-height: auto; accent-color: var(--green); }
label { font-size: 12px; font-weight: 650; display: grid; gap: 7px; }
label small { font-weight: 400; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 100; background: white; padding: 14px; }
.skip:focus { top: 8px; }
.shell { display: grid; grid-template-columns: 236px minmax(0px, 1fr); min-height: 100vh; }
.sidebar { background: var(--dark); color: rgb(247, 246, 237); padding: 31px 22px; position: fixed; width: 236px; height: 100vh; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; gap: 12px; align-items: center; margin: 0px 10px 43px; }
.brand-mark { height: 34px; width: 34px; display: grid; place-items: center; border: 1px solid rgb(142, 171, 145); border-radius: 50%; color: rgb(213, 194, 152); }
.brand-name { font-family: Georgia, serif; font-size: 27px; letter-spacing: -0.8px; }
.brand-sub { font-size: 9px; letter-spacing: 2px; color: rgb(185, 201, 189); margin-top: 5px; text-transform: uppercase; }
.side-label { font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase; color: rgb(169, 194, 176); margin: 0px 12px 15px; }
.journey { display: grid; gap: 8px; }
.navstep { display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 12px; border-radius: 7px; font-size: 13px; color: rgb(208, 221, 211); position: relative; }
.navstep:hover { background: rgba(255, 255, 255, 0.047); }
.navstep.active { background: rgb(233, 238, 229); color: rgb(23, 59, 52); }
.navnum { display: grid; place-items: center; border: 1px solid rgb(130, 152, 139); border-radius: 50%; width: 23px; height: 23px; font-size: 11px; }
.active .navnum { background: var(--dark); border-color: var(--dark); color: rgb(255, 255, 255); }
.navcheck { margin-left: auto; font-size: 11px; color: rgb(162, 190, 168); }
.side-note { margin-top: 32px; padding: 18px 12px; border-top: 1px solid rgb(54, 86, 75); font-size: 12px; color: rgb(181, 198, 185); line-height: 1.7; }
.side-note strong { color: rgb(233, 233, 218); font-weight: 500; display: block; margin-bottom: 7px; }
.sidebar-bottom { margin-top: auto; padding: 24px 12px 0px; display: grid; gap: 13px; }
.sidebar-bottom button { text-align: left; font-size: 12px; color: rgb(209, 223, 211); padding: 0px; }
.author { font-size: 10px; line-height: 1.6; color: rgb(166, 187, 170); letter-spacing: 0.2px; }
.author span { font-size: 12px; color: rgb(232, 237, 222); display: block; margin-bottom: 3px; }
.body { grid-column: 2; min-width: 0px; }
.topbar { height: 78px; background: rgb(255, 253, 249); border-bottom: 1px solid var(--line); padding: 0px 43px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.crumb { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.crumb strong { color: var(--ink); font-weight: 550; }
.top-actions { display: flex; align-items: center; gap: 15px; }
.badge { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; border: 1px solid rgb(216, 223, 211); border-radius: 5px; padding: 6px 8px; color: rgb(89, 109, 92); background: rgb(243, 245, 237); white-space: nowrap; }
.top-button { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 13px; display: flex; gap: 8px; align-items: center; background: white; }
.mobile-brand { display: none; }
.main { max-width: 1440px; margin: 0px auto; padding: 34px 43px 40px; }
.page-top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 25px; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 1.8px; text-transform: uppercase; color: rgb(119, 131, 116); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--gold); }
.intro { margin-top: 10px; font-size: 13px; color: var(--muted); max-width: 620px; }
.case-select { min-width: 194px; padding-top: 8px; }
.case-select label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgb(114, 124, 113); }
.case-select select { font-size: 13px; letter-spacing: 0px; text-transform: none; margin-top: 1px; min-width: 194px; background: rgb(255, 253, 249); }
.property-strip { display: flex; gap: 17px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgb(255, 253, 248); padding: 18px 22px; margin-bottom: 24px; }
.property-avatar { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; background: rgb(231, 238, 228); border: 1px solid rgb(212, 223, 208); border-radius: 9px; font-family: Georgia, serif; font-size: 23px; color: rgb(65, 103, 71); }
.property-avatar.clay { background: rgb(244, 232, 221); color: rgb(144, 99, 78); border-color: rgb(233, 212, 195); }
.property-avatar.moss { background: rgb(233, 236, 217); color: rgb(117, 124, 68); }
.property-title { font-size: 15px; font-weight: 650; }
.property-meta { font-size: 11px; color: var(--muted); margin-top: 5px; }
.property-context { margin-left: auto; max-width: 310px; border-left: 1px solid var(--line); padding-left: 23px; font-size: 12px; color: rgb(104, 114, 104); line-height: 1.55; }
.grid { display: grid; grid-template-columns: minmax(0px, 1.65fr) minmax(275px, 1fr); gap: 23px; }
.stack { display: grid; gap: 20px; align-content: start; }
.card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 11px; padding: 24px; box-shadow: var(--shadow); min-width: 0px; }
.card.soft { background: rgb(238, 242, 232); }
.card.cream { background: rgb(248, 244, 232); border-color: rgb(229, 223, 201); }
.card.dark { background: var(--dark); color: rgb(242, 244, 233); border-color: var(--dark); }
.card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 18px; }
.card-kicker { font-size: 10px; letter-spacing: 1.3px; font-weight: 650; color: rgb(117, 129, 111); text-transform: uppercase; margin-bottom: 10px; }
.card.dark .card-kicker { color: rgb(175, 195, 173); }
.subtext { font-size: 12px; color: var(--muted); line-height: 1.7; }
.smalltext { font-size: 12px; line-height: 1.6; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 23px; }
.metric { border: 1px solid var(--line); border-radius: 8px; padding: 17px 14px; background: rgb(252, 252, 248); }
.metric-number { font-size: 29px; font-weight: 500; letter-spacing: -1px; margin-bottom: 6px; }
.metric-number span { font-size: 14px; font-weight: 400; letter-spacing: 0px; }
.metric-label { font-size: 11px; color: var(--muted); line-height: 1.45; }
.metric-ref { display: inline-block; margin-top: 11px; font-size: 10px; color: var(--green); text-decoration: none; border-bottom: 1px solid rgb(190, 207, 188); }
.sources { display: grid; gap: 0px; }
.source { padding: 18px 0px; border-top: 1px solid rgb(233, 236, 230); display: grid; grid-template-columns: 30px 1fr; gap: 12px; scroll-margin-top: 20px; }
.source:first-child { border-top: 0px; padding-top: 0px; }
.source:last-child { padding-bottom: 0px; }
.source-id { font-size: 10px; font-weight: 650; color: rgb(110, 129, 107); border: 1px solid rgb(220, 228, 214); background: rgb(246, 248, 241); border-radius: 4px; align-self: start; text-align: center; padding: 5px 2px; }
.source-title { font-size: 12px; font-weight: 650; margin-bottom: 5px; }
.source p { font-size: 12px; color: rgb(100, 113, 105); }
.source small { color: rgb(122, 131, 120); display: block; margin-top: 7px; font-size: 10px; }
.quote { border-left: 2px solid rgb(198, 177, 132); padding-left: 14px; font-family: Georgia, serif; font-size: 15px; line-height: 1.65; color: rgb(82, 98, 78); margin-top: 4px; }
.recommend-title { font-family: "Libre Caslon Display", Georgia, serif; font-size: 29px; line-height: 1.15; margin: 12px 0px; }
.recommend-body { font-size: 12px; line-height: 1.7; color: rgb(213, 225, 209); }
.certainty { font-size: 10px; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 7px; color: rgb(208, 216, 192); }
.certainty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(204, 185, 134); }
.refs { display: flex; gap: 7px; margin-top: 17px; }
.refs a { font-size: 10px; border: 1px solid rgb(94, 120, 103); padding: 5px 8px; border-radius: 4px; color: rgb(227, 232, 214); text-decoration: none; }
.hint { display: flex; gap: 10px; margin-top: 18px; border-top: 1px solid rgb(214, 222, 204); padding-top: 17px; font-size: 11px; color: rgb(104, 119, 93); line-height: 1.6; }
.btn { padding: 11px 16px; border-radius: 6px; border: 1px solid var(--green); background: var(--green); color: white; font-size: 12px; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 41px; text-decoration: none; }
.btn:hover { background: rgb(28, 81, 65); }
.btn.secondary { background: white; color: var(--ink); border-color: rgb(207, 216, 203); }
.btn.secondary:hover { background: rgb(241, 245, 237); }
.btn.light { background: rgb(233, 239, 223); color: rgb(28, 65, 53); border-color: rgb(233, 239, 223); }
.btn.small { padding: 8px 11px; min-height: 34px; font-size: 11px; }
.btn.full { width: 100%; margin-top: 20px; }
.text-button { font-size: 11px; color: rgb(87, 107, 85); text-decoration: underline; text-underline-offset: 3px; padding: 5px 0px; }
.section-footer { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 25px; border-top: 1px solid var(--line); padding-top: 22px; }
.footer-note { font-size: 10px; color: rgb(125, 133, 121); max-width: 600px; line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.full-span { grid-column: 1 / -1; }
.field-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 13px; }
.details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 17px; }
.details summary { font-size: 12px; font-weight: 550; cursor: pointer; line-height: 1.5; }
.details .form-grid { margin-top: 18px; }
.inline-actions { display: flex; gap: 10px; align-items: center; margin-top: 17px; flex-wrap: wrap; }
.status { font-size: 10px; color: rgb(104, 131, 98); display: flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 5px; height: 5px; background: rgb(122, 151, 113); border-radius: 50%; }
.status.error { color: rgb(161, 63, 43); }
.status.error::before { background: rgb(161, 63, 43); }
.notice { border: 1px solid rgb(222, 201, 152); background: rgb(252, 245, 229); color: rgb(108, 87, 43); border-radius: 7px; padding: 12px 15px; font-size: 12px; line-height: 1.6; margin-bottom: 19px; }
.notice.success { border-color: rgb(199, 215, 193); background: rgb(237, 245, 232); color: rgb(56, 85, 47); }
.notice.error { border-color: rgb(231, 188, 176); background: rgb(255, 241, 235); color: rgb(134, 57, 40); }
.notice ul { padding-left: 19px; margin: 5px 0px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intervention { border: 1px solid var(--line); border-radius: 8px; padding: 18px; text-align: left; background: rgb(255, 255, 255); display: block; height: 100%; width: 100%; position: relative; }
.intervention:hover { border-color: rgb(127, 157, 120); background: rgb(251, 252, 246); }
.intervention.selected { border: 2px solid rgb(73, 115, 72); background: rgb(240, 245, 233); padding: 17px; }
.intervention .chip { font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px; background: rgb(231, 239, 221); color: rgb(76, 103, 67); border-radius: 4px; padding: 4px 7px; display: inline-block; margin-bottom: 12px; }
.intervention h3 { margin-bottom: 7px; }
.intervention p { font-size: 11px; color: var(--muted); line-height: 1.7; }
.select-circle { position: absolute; right: 13px; top: 14px; width: 13px; height: 13px; border: 1px solid rgb(186, 201, 179); border-radius: 50%; }
.selected .select-circle { border: 4px solid rgb(73, 115, 72); background: white; }
.suggestion { font-size: 12px; line-height: 1.75; padding: 15px 0px; border-bottom: 1px solid var(--line); }
.suggestion:last-child { border: 0px; padding-bottom: 0px; }
.suggestion strong { display: block; margin-bottom: 5px; font-size: 11px; color: rgb(96, 113, 86); }
.coach-shell { display: grid; grid-template-columns: minmax(0px, 1.55fr) minmax(260px, 1fr); gap: 23px; }
.person { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.person-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(237, 232, 219); color: rgb(139, 120, 85); font-family: Georgia, serif; font-size: 20px; }
.person h3 { font-size: 13px; }
.person small { color: var(--muted); font-size: 11px; }
.bubble { font-family: Georgia, serif; font-size: 20px; line-height: 1.55; background: rgb(241, 244, 236); border-radius: 0px 12px 12px; padding: 23px; margin: 0px 0px 25px; }
.turn-label { font-size: 10px; color: rgb(104, 125, 95); letter-spacing: 1px; text-transform: uppercase; margin: 0px 0px 13px; }
.coach-option { display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 7px; text-align: left; font-size: 12px; line-height: 1.65; width: 100%; background: white; margin-top: 10px; }
.coach-option:hover { border-color: rgb(115, 147, 102); background: rgb(244, 247, 237); }
.option-letter { font-size: 10px; border: 1px solid rgb(207, 219, 200); border-radius: 4px; display: grid; place-items: center; width: 23px; height: 23px; flex-shrink: 0; background: rgb(246, 248, 240); }
.progress { display: flex; gap: 5px; margin-bottom: 24px; }
.progress span { height: 3px; background: rgb(223, 230, 216); flex: 1 1 0%; border-radius: 2px; }
.progress .done { background: rgb(106, 140, 88); }
.feedback-row { padding: 17px 0px; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.feedback-row:first-child { border: 0px; }
.feedback-icon { width: 25px; height: 25px; background: rgb(234, 242, 226); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: rgb(82, 116, 66); font-size: 12px; }
.feedback-icon.work { background: rgb(248, 238, 219); color: rgb(149, 115, 55); }
.feedback-row h3 { font-size: 12px; margin-bottom: 5px; }
.feedback-row p { font-size: 11px; color: var(--muted); }
.mini-divider { height: 1px; background: var(--line); margin: 20px 0px; }
.cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 11px; margin-top: 18px; }
.cost-option { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 16px 13px; text-align: left; background: white; }
.cost-option.selected { border: 2px solid rgb(101, 128, 91); background: rgb(243, 246, 235); padding: 15px 12px; }
.cost-option h3 { font-size: 11px; }
.cost-total { font-family: "Libre Caslon Display", Georgia, serif; font-size: 31px; letter-spacing: -0.3px; }
.cost-option small { font-size: 10px; color: var(--muted); }
.cost-line { font-size: 10px; color: rgb(102, 115, 95); display: flex; justify-content: space-between; gap: 6px; margin: 5px 0px; }
.cost-option .details-text { font-size: 10px; color: var(--muted); line-height: 1.6; }
.cost-badge { font-size: 9px; font-weight: 650; color: rgb(84, 113, 72); margin-top: auto; padding-top: 8px; }
.approval { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.check-label { display: flex; gap: 9px; align-items: flex-start; line-height: 1.6; font-size: 11px; font-weight: 450; margin-top: 13px; }
.check-label input { margin: 3px 0px; }
.plan-summary { display: grid; gap: 15px; }
.summary-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; font-size: 11px; line-height: 1.65; }
.summary-row dt { color: var(--muted); }
.summary-row dd { margin: 0px; }
.summary-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgb(139, 146, 127); margin: 20px 0px 8px; }
.review-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0px; }
.review-metrics .metric { padding: 17px 10px; text-align: center; }
.review-metrics .metric-number { font-size: 26px; }
.timeline { display: grid; gap: 0px; margin-top: 15px; }
.event { border-left: 1px solid rgb(216, 224, 209); padding: 0px 0px 18px 16px; position: relative; font-size: 11px; }
.event::before { content: ""; height: 6px; width: 6px; border-radius: 50%; background: rgb(140, 170, 123); position: absolute; left: -3.5px; top: 5px; }
.event span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.empty { text-align: center; padding: 40px 22px; }
.empty h2 { font-family: "Libre Caslon Display", Georgia, serif; font-size: 33px; margin: 15px 0px 10px; }
.empty p { font-size: 12px; color: var(--muted); max-width: 400px; margin: auto; }
.empty svg { color: rgb(142, 172, 126); }
.pill { display: inline-block; font-size: 10px; padding: 5px 8px; border-radius: 4px; background: rgb(238, 243, 231); color: rgb(85, 112, 69); }
.inline-link { font-size: 11px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.report-only { display: none; }
.dialog { border: 1px solid var(--line); border-radius: 13px; padding: 29px; max-width: 660px; width: calc(100% - 32px); max-height: 85vh; color: var(--ink); box-shadow: rgba(16, 46, 52, 0.25) 0px 20px 100px; }
.dialog::backdrop { background: rgba(16, 46, 52, 0.5); backdrop-filter: blur(2px); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.dialog p, .dialog li { font-size: 12px; line-height: 1.8; color: rgb(94, 111, 97); }
.dialog h3 { margin: 19px 0px 7px; }
.dialog ul { padding-left: 20px; }
.close { font-size: 22px; padding: 0px 6px; align-self: flex-start; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 25px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--dark); color: white; border-radius: 8px; padding: 13px 20px; box-shadow: rgba(22, 55, 43, 0.145) 0px 5px 30px; z-index: 99; font-size: 12px; max-width: 90vw; }
.export-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }
.chart-row { display: grid; grid-template-columns: 75px 1fr 40px; gap: 10px; align-items: center; font-size: 11px; margin: 14px 0px; }
.chart-bar { height: 11px; background: rgb(228, 234, 219); border-radius: 3px; overflow: hidden; }
.chart-fill { height: 100%; background: rgb(130, 159, 106); border-radius: 3px; }
.chart-fill.current { background: rgb(49, 95, 73); }
.result-callout { padding: 13px; background: rgb(240, 244, 233); border-radius: 6px; font-size: 11px; line-height: 1.7; margin-top: 17px; }
.method { font-size: 11px; color: rgb(108, 118, 103); line-height: 1.8; }
.table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th, .data-table td { text-align: left; border-bottom: 1px solid var(--line); padding: 11px 9px; vertical-align: top; }
.data-table th { font-weight: 600; color: rgb(107, 123, 97); }
.subtitle { font-size: 12px; color: var(--muted); margin-top: 7px; }
.review-warning { font-size: 11px; color: rgb(136, 108, 57); background: rgb(249, 243, 231); border-radius: 6px; padding: 11px 13px; margin-top: 13px; line-height: 1.7; }
@media (min-width: 1600px) {
  .main { padding-top: 45px; }
  .grid { grid-template-columns: minmax(0px, 1.7fr) minmax(320px, 1fr); }
  .card { padding: 28px; }
  .intro { font-size: 14px; }
  .source p { font-size: 13px; }
}
@media (max-width: 1180px) {
  .sidebar { width: 202px; padding-left: 15px; padding-right: 15px; }
  .shell { grid-template-columns: 202px minmax(0px, 1fr); }
  .topbar { padding: 0px 28px; }
  .main { padding: 28px; }
  .property-context { max-width: 240px; }
  .grid, .coach-shell { grid-template-columns: minmax(0px, 1.4fr) minmax(250px, 1fr); gap: 17px; }
  .card { padding: 19px; }
  .metric-grid { gap: 7px; }
  .metric { padding: 14px 10px; }
  .metric-number { font-size: 25px; }
  .cost-grid { grid-template-columns: 1fr; }
  .cost-option { display: grid; grid-template-columns: 1fr 1fr; }
  .cost-option h3, .cost-option .details-text { grid-column: 1 / -1; }
  .form-grid.three { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 42px; }
}
@media (max-width: 950px) {
  .grid, .coach-shell { grid-template-columns: 1fr; }
  .main { padding: 26px; }
  .property-context { display: none; }
  .sidebar { width: 184px; padding: 25px 12px; }
  .shell { grid-template-columns: 184px minmax(0px, 1fr); }
  .brand { margin-left: 6px; gap: 9px; }
  .brand-name { font-size: 24px; }
  .brand-sub { letter-spacing: 1px; font-size: 8px; }
  .navstep { font-size: 12px; padding: 12px 8px; }
  .side-note { padding: 17px 8px; }
  .case-select { min-width: 165px; }
  .case-select select { min-width: 165px; }
  .page-top { gap: 15px; }
  .cost-grid { grid-template-columns: repeat(3, 1fr); }
  .cost-option { display: flex; }
  .crumb { font-size: 11px; }
  .badge { display: none; }
  .topbar { padding: 0px 26px; }
}
@media (max-width: 700px) {
  .shell { display: block; }
  .sidebar { position: sticky; top: 0px; z-index: 20; width: auto; height: auto; padding: 10px 15px; background: rgb(23, 59, 52); display: block; }
  .brand, .side-label, .side-note, .sidebar-bottom { display: none; }
  .journey { display: flex; gap: 4px; justify-content: space-between; }
  .navstep { flex: 1 1 0%; display: grid; gap: 6px; padding: 9px 3px; justify-items: center; text-align: center; font-size: 9px; border-radius: 6px; }
  .navnum { height: 19px; width: 19px; font-size: 9px; }
  .navcheck { display: none; }
  .topbar { height: 64px; padding: 0px 19px; }
  .crumb { display: none; }
  .mobile-brand { display: block; font-family: Georgia, serif; font-size: 24px; }
  .main { padding: 24px 18px; }
  .page-top { display: block; margin-bottom: 20px; }
  h1 { font-size: 39px; }
  .intro { font-size: 12px; }
  .case-select { margin-top: 18px; max-width: 100%; padding: 0px; }
  .case-select label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; }
  .case-select select { width: 100%; min-width: 0px; }
  .property-strip { padding: 15px; margin-bottom: 19px; gap: 12px; }
  .property-avatar { width: 44px; height: 44px; font-size: 20px; }
  .property-title { font-size: 14px; }
  .property-meta { font-size: 10px; }
  .card { padding: 20px; }
  .metric-grid { gap: 8px; }
  .metric { padding: 13px 9px; }
  .metric-number { font-size: 25px; }
  .metric-label { font-size: 10px; }
  .section-footer { align-items: flex-start; gap: 16px; }
  .footer-note { max-width: 50%; font-size: 9px; }
  .section-footer .btn { padding: 10px 13px; white-space: nowrap; }
  .form-grid { gap: 13px; }
  .choice-grid { grid-template-columns: 1fr; }
  .cost-grid { grid-template-columns: 1fr; }
  .cost-option { display: grid; grid-template-columns: 1fr 1fr; }
  .cost-option h3, .cost-option .details-text { grid-column: 1 / -1; }
  .top-button { padding: 8px 10px; }
  .top-actions { gap: 8px; }
  .status { font-size: 9px; }
  .coach-option { font-size: 12px; }
  .bubble { font-size: 19px; }
  .summary-row { grid-template-columns: 75px 1fr; }
  .dialog { padding: 22px; }
  .form-grid.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .main { padding: 21px 13px; }
  .card { padding: 16px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
  .metric-number { margin: 0px; }
  .metric-ref { margin-top: 0px; grid-column: 2; justify-self: start; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .full-span { grid-column: auto; }
  .top-actions .status { display: none; }
  .review-metrics .metric { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .intervention, .coach-option, .navstep { transition: background 0.15s, border-color 0.15s; }
  .toast { animation: 0.2s ease-out 0s 1 normal none running toast-in; }
  @keyframes toast-in { 
  0% { opacity: 0; bottom: 14px; }
  100% { opacity: 1; bottom: 24px; }
}
}
@media print {
  body { background: white; color: rgb(21, 45, 38); font: 11pt Georgia, serif; }
  .shell, .dialog, .toast, .skip { display: none !important; }
  .report-only { display: block; padding: 0px 12px; }
  .report-only h1 { font-size: 28pt; margin: 0px 0px 8px; }
  .report-only h2 { font: 600 14pt "DM Sans", Arial, sans-serif; margin: 22px 0px 9px; }
  .report-only h3 { font-size: 11pt; margin: 14px 0px 7px; }
  .report-only p { font-size: 10pt; margin: 5px 0px; line-height: 1.5; }
  .report-only table { width: 100%; font: 9pt Arial, sans-serif; border-collapse: collapse; margin: 10px 0px; }
  .report-only th, .report-only td { padding: 8px; text-align: left; border-bottom: 1px solid rgb(204, 204, 204); }
  .report-only section { break-inside: avoid; }
  .report-only .report-meta { font: 9pt Arial, sans-serif; color: rgb(86, 101, 92); }
  .report-only .report-footer { border-top: 1px solid rgb(170, 170, 170); margin-top: 22px; padding-top: 10px; font-size: 8pt; }
  @page { margin: 17mm; }
}
.cost-option:last-child:nth-child(4){grid-column:1/-1}.dialog-actions{flex-wrap:wrap}