:root {
  --ink:#162e28; --muted:#4f635a; --paper:#f8f7f0; --white:#fffefa;
  --dark:#102e25; --deep:#0d241d; --green:#c6e995; --orange:#ffac74;
  --line:#d7ded1; --round:20px; font-family:"DM Sans", system-ui, sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.55;
}
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-underline-offset:.22em; }
a:hover { text-decoration-thickness:2px; }
button,input { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #aa4d1c; outline-offset:4px; }
.top :focus-visible,.hero :focus-visible,footer :focus-visible { outline-color:var(--green); }
.skip { position:absolute; left:1rem; top:.5rem; z-index:5; background:white; padding:.5rem 1rem; transform:translateY(-180%); }
.skip:focus { transform:none; }
.wrap { width:min(1160px, calc(100% - 72px)); margin-inline:auto; }
.top,.hero,footer { background:var(--dark); color:var(--paper); }
.top { border-bottom:1px solid #ffffff24; }
.nav { display:flex; justify-content:space-between; align-items:center; min-height:72px; gap:16px; }
.nav a { text-decoration:none; }
.nav a:hover { text-decoration:underline; }
.wordmark { font-weight:800; letter-spacing:-.03em; font-size:1.15rem; display:flex; align-items:center; gap:10px; }
.wordmark span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--green); color:var(--dark); font-size:1.25rem; }
nav { display:flex; gap:clamp(12px,3vw,35px); font-size:.9rem; }
.hero { background:radial-gradient(ellipse at 85% 0%,#214635 0%,transparent 65%),var(--dark); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(30px,6vw,90px); padding-block:clamp(54px,7vw,102px); }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-weight:800; font-size:.72rem; margin:0 0 12px; color:#375e4b; }
.hero .eyebrow { color:var(--green); }
h1,h2 { font-family:"Instrument Serif", Georgia, serif; font-weight:400; letter-spacing:-.045em; line-height:.98; margin:0; }
h1 { font-size:clamp(3.5rem,7vw,6.7rem); }
h1 em { color:var(--green); font-weight:400; }
.intro { color:#e0e8dc; font-size:clamp(1rem,1.5vw,1.16rem); max-width:45ch; margin:22px 0 26px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid transparent; border-radius:9px; padding:11px 16px; font-weight:800; text-decoration:none; }
.primary { background:var(--orange); color:var(--deep); }
.primary:hover { background:#ffc094; }
.hero-example { border:1px solid #ffffff35; border-radius:var(--round); background:#0d241dbb; padding:clamp(20px,4vw,38px); }
.quote { font-family:Georgia,serif; font-size:clamp(1.2rem,2.15vw,1.75rem); line-height:1.35; margin:0; }
.quote span { color:var(--green); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
.connector { margin:17px 0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#284737; color:var(--green); }
.destination { font-weight:800; font-size:1.1rem; margin:0; }
.muted-hero { margin:6px 0 0; color:#c8d8cc; font-size:.9rem; }
.section { padding-block:clamp(46px,6vw,82px); scroll-margin-top:18px; }
.section-heading { max-width:680px; margin-bottom:28px; }
.section-heading > p:last-child { color:var(--muted); margin:15px 0 0; }
h2 { font-size:clamp(2.55rem,5vw,4rem); }
h3 { margin:0; line-height:1.2; font-size:1.22rem; letter-spacing:-.025em; }
.framework-grid,.alignment-grid,.planner-grid { display:grid; gap:18px; }
.framework-grid { grid-template-columns:1.25fr 1fr; }
.panel { min-width:0; background:var(--white); border:1px solid var(--line); border-radius:var(--round); padding:clamp(19px,3vw,30px); }
.sub { color:var(--muted); font-size:.87rem; margin:6px 0 0; }
.chart-layout { display:grid; grid-template-columns:minmax(115px,.88fr) 1.12fr; align-items:center; gap:16px; margin-top:20px; }
.donut { aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:var(--chart,#d7ded1); max-width:210px; width:100%; margin:auto; }
.donut div { width:69%; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--white); text-align:center; }
.donut strong { line-height:1; font-size:clamp(1.65rem,4vw,2.7rem); letter-spacing:-.065em; }
.donut span { font-size:.72rem; color:var(--muted); margin-top:5px; }
#legend { display:grid; gap:3px; }
.legend-item { width:100%; background:transparent; color:var(--ink); display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; text-align:left; padding:6px 8px; border:1px solid transparent; border-radius:7px; font-size:.79rem; }
.legend-item:hover,.legend-item[aria-pressed="true"] { background:#eef1e8; border-color:var(--line); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--dot); }
.example-panel { background:#e9f0de; display:flex; flex-direction:column; justify-content:center; }
#example-detail { color:var(--muted); }
blockquote { font-family:Georgia,serif; font-size:clamp(1.16rem,2vw,1.55rem); margin:4px 0 14px; padding:10px 14px; border-left:3px solid #567556; background:#f6f9f0; }
.fit { margin:0; font-size:.9rem; }
.alignment { background:#eef1e8; }
.alignment-grid { grid-template-columns:1fr 1fr; }
mark { background:#e4f0ce; color:inherit; text-decoration:underline; text-underline-offset:.17em; }
.target { border-top:1px solid var(--line); padding-top:16px; }
.target p { color:var(--muted); margin:8px 0 0; }
.planner-grid { grid-template-columns:minmax(270px,.76fr) minmax(0,1.24fr); align-items:start; }
.form-panel > label { display:block; font-size:.9rem; font-weight:750; margin:14px 0 5px; }
label small { color:var(--muted); font-weight:400; margin-left:5px; }
.form-panel > input { width:100%; padding:9px 10px; border:1px solid #9eae9e; border-radius:7px; background:white; color:var(--ink); }
fieldset { border:0; margin:16px 0 19px; padding:0; min-width:0; }
legend { font-weight:750; font-size:.9rem; margin-bottom:6px; padding:0; }
.checks { display:flex; gap:6px; flex-wrap:wrap; }
.checks label { display:flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--line); border-radius:8px; font-size:.79rem; cursor:pointer; }
.checks label:has(input:checked) { background:#e9f0de; }
.checks input { accent-color:#366547; margin:0; }
.results-head,.result-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.actions { display:flex; flex-wrap:wrap; gap:6px; }
.actions button,.copy-one { color:var(--ink); padding:6px 9px; border:1px solid #9eae9e; border-radius:7px; background:var(--white); font-size:.8rem; font-weight:750; }
.actions button:hover,.copy-one:hover { background:#e9f0de; }
button:disabled { opacity:.55; cursor:default; }
.result { border-top:1px solid var(--line); padding:12px 0; overflow-wrap:anywhere; }
.result-top .eyebrow { margin:3px 0 5px; font-size:.66rem; }
.anchor { font-size:1rem; font-weight:800; margin:0 0 4px; }
.result p:last-child { color:var(--muted); margin:0; font-size:.85rem; }
.result-note { border-top:1px solid var(--line); margin:0; padding-top:12px; font-size:.84rem; color:var(--muted); }
#notice { min-height:1.55em; margin-bottom:8px; }
footer { padding-block:22px; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 22px; font-size:.84rem; }
.footer-grid p { margin:0; color:#d9e5da; }
@media (max-width:850px) {
  .framework-grid { grid-template-columns:1fr; }
  .chart-layout { max-width:560px; }
  .results-head { flex-wrap:wrap; }
}
@media (max-width:660px) {
  .wrap { width:calc(100% - 36px); }
  .hero-grid,.alignment-grid,.planner-grid { grid-template-columns:1fr; }
  .nav { flex-wrap:wrap; padding-block:12px; gap:8px 16px; }
}
@media (max-width:365px) {
  .chart-layout { grid-template-columns:1fr; }
  .donut { max-width:155px; }
}