:root {
  --navy: #142033;
  --navy-2: #1a2a43;
  --ink: #181818;
  --muted: #6e685f;
  --beige: #f3eee5;
  --ivory: #fbf8f2;
  --champagne: #d8c9ae;
  --champagne-light: #ece2d0;
  --line: #d8d0c2;
  --white: #fffdf9;
  --danger: #7a3e32;
  --shadow: 0 12px 30px rgba(20, 32, 51, 0.055);
  --radius: 6px;
  --max: 1220px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--beige);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { min-height: 100vh; }
.page { min-height: 100vh; }
.container {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
}
.reading { max-width: 760px; }
.serif { font-family: Georgia, "Times New Roman", serif; }

.topbar {
  height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  background: rgba(243, 238, 229, 0.96);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(8px);
}
.topbar-inner {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  background: none;
  border: 0;
  padding: 0;
  color: var(--navy);
  font: 20px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link {
  border: 0;
  background: none;
  padding: 7px 0;
  color: var(--navy);
  font-size: 15px;
}
.nav-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn {
  border: 1px solid transparent;
  border-radius: 4px;
  min-height: 48px;
  padding: 11px 20px;
  font-weight: 500;
  font-size: 16px;
  transition: 120ms ease;
}
.btn-primary {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-2); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--champagne);
}
.btn-secondary:hover { background: rgba(216, 201, 174, 0.18); }
.btn-quiet {
  border: 0;
  background: transparent;
  color: var(--navy);
  padding: 8px 0;
  min-height: 40px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 15px;
  color: var(--muted);
  font-weight: 650;
}
.gold-rule {
  width: 38px;
  height: 1px;
  background: #ae8b52;
  margin: 0 0 22px;
}

.hero {
  position: relative;
  padding: 92px 0 72px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.46fr);
  gap: 84px;
  align-items: center;
  min-height: calc(100vh - 160px);
}
.hero h1 {
  margin: 0 0 24px;
  font: 48px/1.06 Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  color: var(--navy);
  max-width: 700px;
}
.hero p { font-size: 18px; max-width: 650px; color: #292929; }
.hero-actions { margin-top: 32px; }
.concept-line {
  margin-top: 64px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}
.privacy-note {
  margin-top: 44px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 470px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.privacy-note > span {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 12px;
}
.privacy-note strong { color: var(--navy); font-weight: 650; }

/* Post Liquid visual language: concentration → release → redistribution → recomposition */
.liquid-motif {
  position: relative;
  pointer-events: none;
  color: rgba(174, 139, 82, .42);
}
.hero-motif {
  width: 236px;
  height: 278px;
  justify-self: end;
  align-self: center;
  margin-right: 12px;
}
.motif-anchor {
  position: absolute;
  left: 18px;
  top: 64px;
  width: 1px;
  height: 138px;
  background: rgba(174, 139, 82, .34);
}
.motif-box {
  position: absolute;
  border: 1px solid rgba(174, 139, 82, .20);
  background: rgba(216, 201, 174, .045);
}
.motif-box-one { width: 54px; height: 67px; top: 48px; left: 58px; }
.motif-box-two { width: 72px; height: 43px; top: 166px; left: 94px; }
.motif-arc {
  position: absolute;
  width: 154px;
  height: 154px;
  border: 1px solid rgba(174, 139, 82, .34);
  border-radius: 50%;
  right: -78px;
  top: 82px;
}
.motif-node {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(174, 139, 82, .58);
}
.motif-node-one { left: 16px; top: 60px; }
.motif-node-two { left: 176px; top: 127px; }

.question-brand { display: inline-flex; align-items: center; gap: 11px; }
.question-motif { position: relative; width: 32px; height: 15px; display: inline-block; flex: 0 0 auto; }
.question-motif i { position: absolute; left: 0; top: 7px; width: 25px; height: 1px; background: rgba(174,139,82,.42); }
.question-motif b { position: absolute; left: 24px; top: 5px; width: 5px; height: 5px; border: 1px solid rgba(174,139,82,.55); border-radius: 50%; background: var(--beige); }
.question-wrap { padding: 56px 0 80px; }
.question-shell { max-width: 820px; margin: 0 auto; }
.question-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 36px; }
.question-count { color: var(--muted); font-size: 15px; }
.progress-track { height: 2px; background: rgba(216, 201, 174, .42); margin: -22px 0 34px; overflow: hidden; }
.progress-track span { display: block; height: 100%; background: #ae8b52; transition: width 180ms ease; }
.question-title {
  font: 34px/1.16 Georgia, "Times New Roman", serif;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.question-help { color: var(--muted); margin: 0 0 28px; font-size: 15px; }
.choice-list { display: grid; gap: 10px; }
.choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(251, 248, 242, 0.55);
  border-radius: 4px;
  min-height: 58px;
  padding: 13px 16px;
  color: var(--ink);
  font-size: 16px;
}
.choice:hover { border-color: #bca883; background: var(--ivory); }
.choice.selected {
  background: rgba(216, 201, 174, 0.30);
  border-color: #b18e56;
  color: var(--navy);
}
.choice-marker {
  width: 20px;
  height: 20px;
  border: 1px solid #958b7d;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.choice.selected .choice-marker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
}
.choice.multiple .choice-marker { border-radius: 3px; }
.choice.multiple.selected .choice-marker::after {
  content: "✓";
  color: white;
  background: var(--navy);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 15px;
  border-radius: 2px;
}
.question-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 38px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.adaptive-back-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.subtle { color: var(--muted); font-size: 15px; }

.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); background: rgba(251,248,242,.55); }
.matrix { width: 100%; border-collapse: collapse; min-width: 700px; }
.matrix th, .matrix td { border-bottom: 1px solid var(--line); padding: 15px 12px; text-align: center; font-size: 15px; }
.matrix th:first-child, .matrix td:first-child { text-align: left; min-width: 210px; }
.matrix tr:last-child td { border-bottom: 0; }
.matrix th { font-weight: 600; color: var(--navy); background: rgba(216,201,174,.13); }
.matrix-radio { width: 18px; height: 18px; accent-color: var(--navy); }


.ready {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 58px 0;
}
.ready-panel {
  width: min(calc(100% - 40px), 1000px);
  border: 1px solid var(--line);
  background: rgba(251,248,242,.62);
  display: grid;
  grid-template-columns: 1.25fr .55fr;
  min-height: 500px;
}
.ready-copy { padding: 68px 58px; display: flex; flex-direction: column; justify-content: center; }
.ready-copy h1 { font: 46px/1.08 Georgia, "Times New Roman", serif; color: var(--navy); margin: 0 0 22px; }
.ready-art { position: relative; display: grid; place-items: center; overflow: hidden; }
.ready-motif { width: 210px; height: 244px; transform: translateX(8px); }
.ready-motif .motif-anchor { height: 116px; top: 74px; }
.ready-motif .motif-box-one { width: 50px; height: 62px; top: 58px; left: 58px; }
.ready-motif .motif-box-two { width: 66px; height: 40px; top: 154px; left: 92px; }
.ready-motif .motif-arc { width: 138px; height: 138px; top: 78px; right: -72px; }
.ready-motif .motif-node-one { top: 70px; }
.ready-motif .motif-node-two { left: 158px; top: 118px; }
.map-page { padding: 46px 0 88px; }
.page-header { display: flex; justify-content: space-between; gap: 36px; align-items: flex-start; margin-bottom: 38px; }
.page-header h1 { margin: 0; font: 42px/1.08 Georgia, "Times New Roman", serif; color: var(--navy); letter-spacing: -0.03em; }
.page-header p { max-width: 720px; margin: 12px 0 0; color: var(--muted); }
.page-header .overview-updated { margin-top: 8px; font-size: 14px; color: #81796e; }
.overview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.section { margin-top: 38px; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--champagne); padding-bottom: 10px; }
.section-title {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 650;
}
.section-note { color: var(--muted); font-size: 15px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card-grid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.decision-card {
  border: 1px solid var(--line);
  background: rgba(251,248,242,.62);
  border-radius: 4px;
  padding: 18px;
  min-height: 174px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 120ms ease;
  cursor: pointer;
  outline: none;
}
.decision-card:hover { border-color: #b89a66; transform: translateY(-1px); box-shadow: var(--shadow); }
.decision-card:hover h3,
.decision-card:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.decision-card:focus-visible { border-color: #a78148; box-shadow: 0 0 0 3px rgba(174, 139, 82, .18); }
.decision-card.featured { background: rgba(251,248,242,.62); border-color: #c9b48e; min-height: 210px; }
.decision-card h3 { margin: 0 0 10px; font: 19px/1.22 Georgia, "Times New Roman", serif; color: var(--navy); }
.decision-card p { margin: 0; font-size: 15px; color: #343434; line-height: 1.45; }
.card-title-row { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; }
.card-title-row .check-toggle { margin-top: 2px; }
.decision-card.topic-checked h3 { color: var(--muted); }
.card-meta { margin-top: 18px; display: flex; gap: 8px; align-items: center; color: #9a7440; font-size: 15px; }

.area-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--ivory); }
.area-toggle button { border: 0; background: transparent; padding: 9px 14px; color: var(--navy); font-size: 15px; }
.area-toggle button.active { background: var(--navy); color: white; }
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.area-box { border: 1px solid var(--line); background: rgba(251,248,242,.6); padding: 18px; }
.area-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.area-head h2 { margin: 0; font: 20px/1.2 Georgia, "Times New Roman", serif; color: var(--navy); }
.area-count { color: var(--muted); font-size: 15px; }
.area-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.area-item { border-top: 1px solid var(--line); padding: 9px 8px 9px 0; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: center; min-height: 44px; }
.area-item:nth-child(odd) { padding-right: 14px; }
.area-item:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.area-item button { border: 0; background: none; padding: 0; text-align: left; color: var(--ink); font-size: 15px; }
.area-item button:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.area-item .check-toggle { margin-top: 0; }
.area-item.topic-checked .area-item-title { color: var(--muted); }

.module-page { padding: 48px 0 90px; }
.breadcrumb { color: var(--muted); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 28px; }
.module-page h1 { font: 42px/1.08 Georgia, "Times New Roman", serif; color: var(--navy); letter-spacing: -.025em; margin: 0 0 18px; }
.module-timing { border-top: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne); padding: 14px 0; color: var(--muted); font-size: 15px; margin-bottom: 34px; }
.module-section { margin: 34px 0; }
.module-section h2 { font: 23px/1.25 Georgia, "Times New Roman", serif; color: var(--navy); margin: 0 0 14px; }
.module-section p { font-size: 16px; }
.check-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.check-guidance { margin: -4px 0 16px; color: var(--muted); font-size: 15px; }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; cursor: pointer; transition: background-color .15s ease; }
.check-row:hover { background: rgba(169, 132, 76, .045); }
.check-toggle { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 4px 0 0; border: 1px solid #a79b8a; border-radius: 2px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.check-toggle::after { content: "✓"; color: #fff; font-size: 13px; line-height: 1; transform: scale(0); transition: transform .12s ease; }
.check-toggle:checked { background: var(--navy); border-color: var(--navy); }
.check-toggle:checked::after { transform: scale(1); }
.check-toggle:focus-visible { outline: 2px solid #a78148; outline-offset: 3px; }
.check-row.checked .check-label { color: var(--muted); }
.people-list { display: flex; flex-wrap: wrap; gap: 8px; }
.person-pill { border: 1px solid var(--champagne); padding: 7px 10px; border-radius: 999px; background: rgba(216,201,174,.12); font-size: 15px; }
.question-quote { font: 19px/1.45 Georgia, "Times New Roman", serif; color: var(--navy); border-left: 2px solid #b48c52; padding-left: 18px; margin: 18px 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-card { border: 1px solid var(--line); background: rgba(251,248,242,.6); padding: 14px; color: var(--navy); font-weight: 600; text-align: left; font-size: 15px; cursor: pointer; }
.related-card:hover .related-card-title,
.related-card:focus-visible .related-card-title { text-decoration: underline; text-underline-offset: 4px; }
.related-card:focus-visible { outline: 2px solid #a78148; outline-offset: 3px; }


/* Overview: the interface itself becomes the graphic */
.overview-title-line { display: flex; align-items: center; gap: 22px; }
.overview-motif { position: relative; width: 74px; height: 28px; display: inline-block; opacity: .78; }
.overview-motif i { position:absolute; left:0; top:13px; width:50px; height:1px; background:rgba(174,139,82,.38); }
.overview-motif b { position:absolute; left:49px; top:10px; width:6px; height:6px; border-radius:50%; background:rgba(174,139,82,.52); }
.overview-motif em { position:absolute; right:0; top:3px; width:20px; height:20px; border:1px solid rgba(174,139,82,.18); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.section-title-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.section-structure { position:relative; display:inline-block; width:30px; height:20px; flex:0 0 auto; opacity:.8; }
.section-structure i, .section-structure b { position:absolute; display:block; }
.section-early .section-structure i { left:4px; top:2px; width:1px; height:16px; background:rgba(174,139,82,.48); }
.section-early .section-structure b { left:4px; top:2px; width:19px; height:1px; background:rgba(174,139,82,.35); }
.section-center .section-structure i { left:1px; top:9px; width:23px; height:1px; background:rgba(174,139,82,.44); }
.section-center .section-structure b { right:1px; top:6px; width:6px; height:6px; border-radius:50%; background:rgba(174,139,82,.54); }
.section-open .section-structure i { left:2px; top:5px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.46); }
.section-open .section-structure b { right:2px; top:11px; width:16px; height:1px; background:rgba(174,139,82,.30); }
.section-time .section-structure i { left:4px; top:1px; width:18px; height:18px; border:1px solid rgba(174,139,82,.28); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.section-time .section-structure b { display:none; }
.section-neutral .section-structure i { left:3px; top:10px; width:22px; height:1px; background:rgba(174,139,82,.28); }
.section-neutral .section-structure b { display:none; }

/* All Areas: five variations from one restrained structural vocabulary */
.territory { position:relative; overflow:hidden; padding-top:22px; }
.territory-mark { position:absolute; right:16px; top:12px; width:54px; height:34px; pointer-events:none; opacity:.72; }
.territory-mark i, .territory-mark b, .territory-mark em { position:absolute; display:block; }
.territory-1 .territory-mark i { left:2px; top:7px; width:1px; height:22px; background:rgba(174,139,82,.32); }
.territory-1 .territory-mark b { left:2px; top:7px; width:34px; height:1px; background:rgba(174,139,82,.24); }
.territory-1 .territory-mark em { left:34px; top:5px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.44); }
.territory-2 .territory-mark i { left:0; top:2px; width:20px; height:13px; border:1px solid rgba(174,139,82,.18); }
.territory-2 .territory-mark b { left:26px; top:15px; width:25px; height:15px; border:1px solid rgba(174,139,82,.20); }
.territory-2 .territory-mark em { left:21px; top:17px; width:4px; height:4px; border-radius:50%; background:rgba(174,139,82,.38); }
.territory-3 .territory-mark i { left:2px; top:8px; width:28px; height:17px; border:1px solid rgba(174,139,82,.17); }
.territory-3 .territory-mark b { left:22px; top:3px; width:28px; height:17px; border:1px solid rgba(174,139,82,.17); }
.territory-3 .territory-mark em { left:27px; top:15px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.36); }
.territory-4 .territory-mark i { right:-8px; top:0; width:37px; height:37px; border:1px solid rgba(174,139,82,.24); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.territory-4 .territory-mark b { left:3px; top:20px; width:27px; height:1px; background:rgba(174,139,82,.25); }
.territory-4 .territory-mark em { left:1px; top:18px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.4); }
.territory-5 .territory-mark i { left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.34); }
.territory-5 .territory-mark b { left:23px; top:2px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.42); }
.territory-5 .territory-mark em { left:42px; top:21px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.28); }
.territory-5 .territory-mark::after { content:""; position:absolute; left:6px; top:11px; width:38px; height:1px; background:rgba(174,139,82,.18); transform:rotate(18deg); transform-origin:left center; }

/* Module fragment: one part extracted from the larger whole */
.module-head { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:24px; align-items:start; }
.module-motif { position:relative; width:104px; height:76px; justify-self:end; margin-top:8px; opacity:.72; }
.module-motif span { position:absolute; right:0; top:2px; width:58px; height:58px; border:1px solid rgba(174,139,82,.25); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.module-motif i { position:absolute; left:12px; top:39px; width:52px; height:1px; background:rgba(174,139,82,.31); }
.module-motif b { position:absolute; left:9px; top:37px; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.47); }
.related-section { position:relative; }
.related-section::before { content:""; position:absolute; width:38px; height:1px; background:rgba(174,139,82,.25); top:15px; right:0; }
.related-section::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:rgba(174,139,82,.4); top:13px; right:36px; }

/* Something changed: reconfiguration, not restart */
.modal-kicker { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.reconfigure-motif { position:relative; width:31px; height:18px; display:inline-block; flex:0 0 auto; }
.reconfigure-motif i, .reconfigure-motif b { position:absolute; width:12px; height:9px; border:1px solid rgba(174,139,82,.28); }
.reconfigure-motif i { left:0; top:1px; }
.reconfigure-motif b { right:0; bottom:0; }
.reconfigure-motif.shifted i { left:3px; top:0; }
.reconfigure-motif.shifted b { right:3px; bottom:1px; }
.overlay-banner {
  border: 1px solid var(--champagne);
  background: rgba(216,201,174,.16);
  padding: 18px 20px;
  margin: 28px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.overlay-banner h3 { margin: 2px 0 4px; color: var(--navy); font: 20px/1.2 Georgia, "Times New Roman", serif; }
.overlay-banner p { margin: 0; color: var(--muted); font-size: 15px; }
.overlay-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.overlay-links button { border: 0; background: none; padding: 0; color: var(--navy); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }


.update-confirmation {
  border: 1px solid var(--champagne);
  background: rgba(251,248,242,.72);
  padding: 13px 16px;
  margin: -10px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.update-confirmation div { display: grid; gap: 2px; }
.update-confirmation strong { color: var(--navy); font-size: 16px; font-weight: 650; }
.update-confirmation span { color: var(--muted); font-size: 15px; }
.icon-btn.small { font-size: 20px; padding: 2px 4px; }

.primary-section { margin-top: 46px; }
.primary-section .section-title-row { border-bottom-color: #c4a979; padding-bottom: 12px; }
.card-grid.primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.primary-section .decision-card.featured {
  min-height: 228px;
  padding: 24px;
  border-color: #c2a87a;
  border-top-width: 2px;
  background: rgba(251,248,242,.62);
}
.primary-section .decision-card.featured h3 { font-size: 22px; line-height: 1.18; }
.primary-section .decision-card.featured p { font-size: 16px; line-height: 1.5; }

.modal-intro { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 590px; }
.change-progress { margin: 18px 0 14px; color: var(--muted); font-size: 15px; border-top: 1px solid var(--line); padding-top: 14px; }
.modal-actions.split { justify-content: space-between; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20,32,51,.42); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal { width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--beige); border: 1px solid #bca77e; box-shadow: 0 24px 70px rgba(20,32,51,.25); padding: 28px; }
.modal-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.modal h2 { margin: 0; font: 30px/1.15 Georgia, "Times New Roman", serif; color: var(--navy); }
.icon-btn { border: 0; background: none; font-size: 24px; color: var(--navy); line-height: 1; }
.modal .choice-list { margin-top: 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }

.empty-note { border: 1px dashed var(--champagne); padding: 20px; color: var(--muted); background: rgba(251,248,242,.38); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 26px; }
  .hero-motif { width: 190px; height: 150px; justify-self: end; margin: -4px 18px 0 0; overflow: hidden; }
  .hero-motif .motif-anchor { top: 20px; height: 88px; }
  .hero-motif .motif-box-one { width: 42px; height: 52px; top: 14px; left: 52px; }
  .hero-motif .motif-box-two { width: 56px; height: 34px; top: 84px; left: 83px; }
  .hero-motif .motif-arc { width: 116px; height: 116px; top: 32px; right: -62px; }
  .hero-motif .motif-node-one { top: 16px; }
  .hero-motif .motif-node-two { left: 139px; top: 62px; }
  .card-grid, .card-grid.compact, .card-grid.primary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .area-grid { grid-template-columns: 1fr; }
  .ready-panel { grid-template-columns: 1fr; min-height: auto; }
  .ready-art { min-height: 170px; border-left: 0; border-top: 1px solid rgba(216,201,174,.65); justify-items:end; padding-right:34px; }
  .ready-motif { transform: scale(.76); transform-origin:right center; }
  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .container, .topbar-inner { width: min(calc(100% - 28px), var(--max)); }
  .topbar { height: 64px; }
  .nav-links { gap: 14px; }
  .nav-link.hide-mobile { display: none; }
  .hero { padding: 58px 0 48px; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 17px; }
  .question-wrap { padding: 36px 0 58px; }
  .question-title { font-size: 30px; }
  .question-actions { align-items: flex-end; }
  .question-actions > div { margin-left: auto; }
  .adaptive-back-actions { align-items: flex-start; flex-direction: column; gap: 4px; }
  .question-actions > .adaptive-back-actions { margin-left: 0; }
  .card-grid, .card-grid.compact, .card-grid.primary-grid { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: 1fr; }
  .area-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .page-header { flex-direction: column; }
  .page-header h1 { font-size: 36px; }
  .ready-copy { padding: 44px 28px; }
  .ready-copy h1 { font-size: 38px; }
  .module-page h1 { font-size: 36px; }
  .overlay-banner { flex-direction: column; }
  .overview-title-line { gap: 14px; }
  .overview-motif { width: 52px; }
  .overview-motif i { width: 34px; }
  .overview-motif b { left: 33px; }
  .overview-motif em { right: 0; width: 16px; height: 16px; top: 5px; }
  .section-structure { width: 24px; }
  .territory-mark { transform: scale(.86); transform-origin: right top; }
  .module-head { grid-template-columns: 1fr 72px; gap: 10px; }
  .module-motif { width: 68px; height: 56px; transform: scale(.72); transform-origin:right top; }
  .hero-motif { width: 150px; height: 112px; margin-right: 4px; }
  .hero-motif .motif-anchor { top: 14px; height: 66px; }
  .hero-motif .motif-box-one { width: 34px; height: 40px; top: 10px; left: 44px; }
  .hero-motif .motif-box-two { width: 45px; height: 28px; top: 62px; left: 70px; }
  .hero-motif .motif-arc { width: 92px; height: 92px; top: 25px; right: -49px; }
  .hero-motif .motif-node-one { top: 10px; }
  .hero-motif .motif-node-two { left: 111px; top: 48px; }
}

@media print {
  @page { margin: 16mm; }
  body { background: #fff; color: #111; }
  .topbar, .overview-actions, .overlay-banner, .update-confirmation, .btn, .section:last-child { display: none !important; }
  .map-page { padding: 0; }
  .container { width: 100%; }
  .page-header { margin-bottom: 22px; }
  .card-grid, .card-grid.primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-card, .decision-card.featured { break-inside: avoid; box-shadow: none; min-height: 0; background: #fff; }
  .section { break-inside: avoid; margin-top: 24px; }
  .section-title-row { border-bottom-color: #aaa; }
}