:root {
  color-scheme: light;
  --ink: #18212f;
  --muted: #526071;
  --line: #d9e0e8;
  --paper: #fbfcfd;
  --panel: #ffffff;
  --red: #b4232a;
  --green: #28715d;
  --blue: #1f4f82;
  --gold: #b9842f;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(251, 252, 253, .96), rgba(251, 252, 253, .72)),
    url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1800&q=82") center / cover;
}

a {
  color: inherit;
  text-decoration: none;
}

.subpage {
  display: grid;
  place-items: center;
  padding: 24px;
}

.subpage main {
  width: min(720px, 100%);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(28px, 6vw, 54px);
  box-shadow: 0 18px 44px rgba(24, 33, 47, .12);
}

.back {
  display: inline-block;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 28px;
  text-decoration: none;
}

h1 {
  margin: 0;
  font-size: clamp(3rem, 12vw, 5.5rem);
  line-height: .95;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 1.08rem;
  margin: 22px 0 30px;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: #ffffff;
  text-decoration: none;
  font-weight: 760;
  font: inherit;
  cursor: pointer;
}

.button.secondary {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tool-page {
  min-height: 100vh;
  background: #f5f7fa;
}

.tool-header {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tool-header .back {
  margin: 0;
}

.tool-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--muted);
  font-weight: 720;
}

.score-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.score-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 22px;
}

.score-hero > div,
.score-panel,
.check-group,
.result-band {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(24, 33, 47, .07);
}

.score-hero > div {
  padding: clamp(28px, 5vw, 52px);
}

.label {
  margin: 0 0 14px;
  color: var(--red);
  font-size: .84rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.score-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 7vw, 6rem);
}

.lede {
  max-width: 720px;
}

.score-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.score-panel span {
  color: var(--muted);
  font-weight: 760;
}

.score-panel strong {
  display: block;
  margin: 8px 0 10px;
  color: var(--green);
  font-size: clamp(4rem, 10vw, 6.5rem);
  line-height: .9;
  letter-spacing: 0;
}

.score-panel p {
  margin: 0;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.check-group {
  padding: 24px;
}

.check-group h2 {
  margin: 0 0 16px;
  font-size: 1.35rem;
}

.check-group label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: #334154;
  line-height: 1.45;
}

.check-group label:first-of-type {
  border-top: 0;
}

.check-group input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
}

.result-band {
  margin-top: 16px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.result-band h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.result-band p {
  margin: 0;
  max-width: 760px;
}

.sprint-page {
  background:
    linear-gradient(135deg, rgba(31, 79, 130, .08), transparent 36%),
    linear-gradient(315deg, rgba(180, 35, 42, .07), transparent 34%),
    #f5f7fa;
}

.sprint-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.story-page {
  background:
    linear-gradient(135deg, rgba(40, 113, 93, .1), transparent 34%),
    linear-gradient(315deg, rgba(185, 132, 47, .12), transparent 32%),
    #f5f7fa;
}

.ai-page {
  background:
    linear-gradient(135deg, rgba(31, 79, 130, .11), transparent 34%),
    linear-gradient(315deg, rgba(180, 35, 42, .08), transparent 34%),
    #f5f7fa;
}

.follow-page {
  background:
    linear-gradient(135deg, rgba(40, 113, 93, .1), transparent 34%),
    linear-gradient(315deg, rgba(31, 79, 130, .09), transparent 32%),
    #f5f7fa;
}

.defense-page {
  background:
    linear-gradient(135deg, rgba(180, 35, 42, .09), transparent 34%),
    linear-gradient(315deg, rgba(185, 132, 47, .13), transparent 32%),
    #f5f7fa;
}

.proof-page {
  background:
    linear-gradient(135deg, rgba(31, 79, 130, .1), transparent 34%),
    linear-gradient(315deg, rgba(40, 113, 93, .11), transparent 32%),
    #f5f7fa;
  overflow-x: hidden;
}

.debrief-page {
  background: #f6f8fb;
  overflow-x: hidden;
}

.story-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.ai-shell,
.follow-shell,
.defense-shell,
.proof-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.debrief-shell {
  width: min(1360px, calc(100% - 24px));
  margin: 0 auto;
  padding: 22px 0 48px;
}

.debrief-header {
  width: min(1360px, calc(100% - 24px));
  padding-top: 18px;
  border-bottom: 1px solid rgba(217, 224, 232, .92);
}

.debrief-header nav a[aria-current="page"] {
  color: var(--red);
}

.debrief-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.debrief-title h1 {
  max-width: 860px;
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  line-height: .98;
  color: #071433;
}

.debrief-title p {
  margin: 10px 0 0;
  max-width: 760px;
  color: #27364b;
}

.debrief-reset {
  min-height: 52px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #cdd6e2;
  border-radius: 8px;
  background: #ffffff;
  color: #071433;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(24, 33, 47, .06);
}

.debrief-workspace {
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(540px, 1.25fr) minmax(320px, .82fr);
  gap: 16px;
  align-items: stretch;
}

.debrief-visual,
.debrief-board,
.debrief-plan,
.debrief-guidance article {
  background: rgba(255, 255, 255, .97);
  border: 1px solid #d3dbe6;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(24, 33, 47, .07);
}

.debrief-visual {
  min-height: 520px;
  overflow: hidden;
}

.debrief-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.debrief-board {
  display: grid;
  align-content: stretch;
  overflow: hidden;
}

.debrief-board-note {
  margin: 0;
  padding: 28px 30px 22px;
  color: #071433;
  border-bottom: 1px solid #dbe2eb;
}

.debrief-group {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 25px 28px;
  border-bottom: 1px solid #dbe2eb;
}

.debrief-group:last-of-type {
  border-bottom: 0;
}

.debrief-group h2 {
  margin: 0 0 16px;
  color: #071433;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.08;
}

.debrief-group-icon,
.debrief-card-icon,
.debrief-plan-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
  border-radius: 50%;
  flex: 0 0 auto;
}

.debrief-group-icon {
  width: 58px;
  height: 58px;
  margin-top: 2px;
}

.debrief-group-icon svg,
.debrief-card-icon svg,
.debrief-plan-icon svg {
  width: 26px;
  height: 26px;
}

.debrief-green {
  background: linear-gradient(145deg, #2f936b, #0d5f40);
}

.debrief-blue {
  background: linear-gradient(145deg, #2d6cb4, #174d8c);
}

.debrief-gold {
  background: linear-gradient(145deg, #d9a920, #ba7a0d);
}

.debrief-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.debrief-option {
  min-height: 58px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #b9c7d6;
  border-radius: 8px;
  background: #ffffff;
  color: #071433;
  font: inherit;
  font-size: .95rem;
  font-weight: 720;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: normal;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.debrief-option:hover,
.debrief-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: #28715d;
  box-shadow: 0 10px 22px rgba(40, 113, 93, .14);
}

.debrief-option.is-active {
  border-color: #0d6a46;
  background: linear-gradient(180deg, #168a5d, #0d6a46);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(13, 106, 70, .22);
}

.debrief-group:nth-of-type(3) .debrief-option.is-active {
  border-color: #174d8c;
  background: linear-gradient(180deg, #2768ad, #174d8c);
  box-shadow: 0 12px 22px rgba(31, 79, 130, .22);
}

.debrief-group:nth-of-type(4) .debrief-option.is-active {
  border-color: #a26905;
  background: linear-gradient(180deg, #cf9b14, #a26905);
  box-shadow: 0 12px 22px rgba(185, 132, 47, .24);
}

.debrief-privacy {
  margin: 0;
  padding: 18px 28px 24px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #46566b;
  font-size: .94rem;
}

.debrief-plan {
  padding: 28px;
  display: grid;
  align-content: start;
}

.debrief-plan-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0d5f40;
  font-weight: 820;
}

.debrief-plan-icon {
  width: 38px;
  height: 38px;
  background: #1c7a55;
}

.debrief-plan h2 {
  margin: 22px 0 14px;
  color: #0d5f40;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.05;
}

.debrief-plan p {
  margin: 0;
  color: #253246;
  font-size: 1.02rem;
}

.debrief-rule {
  height: 1px;
  margin: 22px 0;
  background: #d3dbe6;
}

.debrief-plan h3 {
  margin: 0 0 12px;
  color: #0d5f40;
  font-size: 1.05rem;
}

.debrief-plan ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  list-style: none;
  counter-reset: debrief-steps;
}

.debrief-plan li {
  position: relative;
  min-height: 26px;
  padding-left: 36px;
  color: #253246;
  line-height: 1.45;
  counter-increment: debrief-steps;
}

.debrief-plan li::before {
  content: counter(debrief-steps);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1c7a55;
  color: #ffffff;
  font-size: .82rem;
  font-weight: 820;
}

.debrief-copy {
  width: 100%;
  min-height: 52px;
  gap: 10px;
  background: #0d6a46;
}

.debrief-copy-status {
  margin-top: 14px !important;
  color: #0d5f40 !important;
  text-align: center;
  font-weight: 720;
}

.debrief-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.debrief-guidance article {
  min-height: 136px;
  padding: 26px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.debrief-guidance article:nth-child(1) {
  border-bottom: 4px solid #28715d;
}

.debrief-guidance article:nth-child(2) {
  border-bottom: 4px solid #1f4f82;
}

.debrief-guidance article:nth-child(3) {
  border-bottom: 4px solid #b9842f;
}

.debrief-card-icon {
  width: 60px;
  height: 60px;
}

.debrief-guidance h2 {
  margin: 0 0 8px;
  color: #071433;
  font-size: 1.25rem;
  line-height: 1.1;
}

.debrief-guidance p {
  margin: 0;
  color: #334154;
  font-size: .98rem;
}

.signal-page {
  background:
    radial-gradient(circle at 9% 5%, rgba(0, 126, 124, .09), transparent 23rem),
    radial-gradient(circle at 92% 18%, rgba(226, 142, 12, .09), transparent 22rem),
    linear-gradient(180deg, #fcfdfe 0%, #eef4f7 100%);
  overflow-x: hidden;
}

.signal-header {
  width: min(1440px, calc(100% - 24px));
  padding-top: 18px;
  border-bottom: 1px solid rgba(208, 218, 226, .92);
}

.signal-header nav a[aria-current="page"] {
  color: #007e7c;
}

.signal-shell {
  width: min(1440px, calc(100% - 24px));
  margin: 0 auto;
  padding: 22px 0 52px;
}

.signal-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 22px;
}

.signal-title h1 {
  max-width: 900px;
  color: #071433;
  font-size: clamp(2.35rem, 4vw, 3.7rem);
  line-height: .98;
}

.signal-title p {
  max-width: 760px;
  margin: 12px 0 0;
  color: #26374a;
}

.signal-reset {
  min-width: 94px;
  min-height: 78px;
  padding: 10px 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #cbd7df;
  border-radius: 8px;
  background: #ffffff;
  color: #071433;
  font: inherit;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(24, 33, 47, .06);
}

.signal-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(460px, 1.15fr) minmax(320px, .86fr);
  gap: 16px;
  align-items: stretch;
}

.signal-panel,
.signal-guidance article {
  background: rgba(255, 255, 255, .98);
  border: 1px solid #d0dbe2;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(24, 33, 47, .075);
}

.signal-choices {
  padding: 24px;
  display: grid;
  align-content: start;
  gap: 24px;
}

.signal-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #dbe3e8;
}

.signal-choice-header h2,
.signal-group h3,
.signal-result h2,
.signal-result h3,
.signal-guidance h2 {
  margin: 0;
  color: #071433;
  line-height: 1.1;
}

.signal-choice-header h2 {
  font-size: 1.25rem;
}

.signal-choice-header span {
  min-width: 48px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: #007e7c;
  font-size: .88rem;
  font-weight: 850;
  text-align: center;
}

.signal-group {
  display: grid;
  gap: 12px;
}

.signal-group-title {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.signal-group-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
}

.signal-group-icon svg {
  width: 25px;
  height: 25px;
}

.signal-teal {
  background: linear-gradient(145deg, #009b95, #006c70);
}

.signal-amber {
  background: linear-gradient(145deg, #e49a18, #b96504);
}

.signal-blue {
  background: linear-gradient(145deg, #236aa6, #0e4f7a);
}

.signal-group h3 {
  font-size: 1.05rem;
}

.signal-group p {
  margin: 5px 0 0;
  color: #617083;
  font-size: .9rem;
  line-height: 1.35;
}

.signal-options {
  display: grid;
  gap: 8px;
}

.signal-option {
  width: 100%;
  min-height: 48px;
  padding: 0 10px 0 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  border: 1px solid #c8d3dc;
  border-radius: 8px;
  background: #ffffff;
  color: #071433;
  font: inherit;
  font-size: .93rem;
  font-weight: 720;
  line-height: 1.18;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.signal-option:hover,
.signal-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: #007e7c;
  box-shadow: 0 10px 22px rgba(0, 126, 124, .13);
}

.signal-option svg {
  width: 25px;
  height: 25px;
  color: #b1bec9;
}

.signal-option svg path {
  opacity: 0;
}

.signal-option.is-active {
  border-color: #007e7c;
  background: linear-gradient(180deg, #ffffff, #eefbfa);
  box-shadow: 0 10px 22px rgba(0, 126, 124, .13);
}

.signal-option.is-active svg {
  color: #007e7c;
}

.signal-option.is-active svg path {
  opacity: 1;
}

.signal-result {
  padding: 28px;
  display: grid;
  align-content: start;
  gap: 22px;
}

.signal-result-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.signal-mini-label {
  display: block;
  margin-bottom: 9px;
  color: #007e7c;
  font-size: .88rem;
  font-weight: 850;
}

.signal-result h2 {
  max-width: 720px;
  font-size: clamp(1.65rem, 2.45vw, 2.25rem);
  line-height: 1.18;
}

.signal-fit {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(0, 126, 124, .3);
  border-radius: 8px;
  color: #006c70;
  background: #eefbfa;
  font-size: .88rem;
  font-weight: 850;
}

.signal-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.signal-flow div {
  min-height: 72px;
  padding: 14px;
  border: 1px solid #008f8a;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f1fbfa);
}

.signal-flow strong,
.signal-flow span {
  display: block;
}

.signal-flow strong {
  color: #071433;
  font-size: .98rem;
  line-height: 1.22;
}

.signal-flow span {
  margin-top: 7px;
  color: #59697b;
  font-size: .83rem;
  font-weight: 700;
}

.signal-flow svg {
  width: 44px;
  color: #007e7c;
}

.signal-summary {
  margin: 0;
  color: #26374a;
  font-size: 1.02rem;
  line-height: 1.7;
}

.signal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d6e1e7;
  border-bottom: 1px solid #d6e1e7;
}

.signal-metrics div {
  min-height: 74px;
  padding: 14px 16px;
  border-right: 1px solid #d6e1e7;
}

.signal-metrics div:last-child {
  border-right: 0;
}

.signal-metrics span,
.signal-metrics strong {
  display: block;
}

.signal-metrics span {
  color: #607084;
  font-size: .82rem;
  font-weight: 780;
}

.signal-metrics strong {
  margin-top: 7px;
  color: #071433;
  font-size: .98rem;
}

.signal-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .72fr);
  gap: 20px;
}

.signal-result h3 {
  margin-bottom: 14px;
  font-size: 1.08rem;
}

.signal-result ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
  counter-reset: signal-steps;
}

.signal-result li {
  position: relative;
  min-height: 28px;
  padding-left: 42px;
  color: #253246;
  font-size: .96rem;
  line-height: 1.46;
  counter-increment: signal-steps;
}

.signal-result li::before {
  content: counter(signal-steps);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #007e7c;
  color: #ffffff;
  font-size: .82rem;
  font-weight: 850;
}

.signal-script {
  padding: 18px;
  border: 1px solid #ead3a7;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf8, #fff8ed);
}

.signal-script strong {
  display: block;
  margin-bottom: 10px;
  color: #8a5204;
  font-size: .92rem;
}

.signal-script p {
  margin: 0;
  color: #26374a;
  font-size: .92rem;
  line-height: 1.58;
}

.signal-copy {
  width: min(220px, 100%);
  min-height: 54px;
  gap: 10px;
  background: #007e7c;
}

.signal-privacy {
  margin: -8px 0 0;
  color: #59697b;
  font-size: .9rem;
}

.signal-map {
  position: relative;
  min-height: 680px;
  overflow: hidden;
}

.signal-map img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.signal-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .34));
}

.signal-map-callout,
.signal-legend {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(0, 126, 124, .34);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 26px rgba(24, 33, 47, .09);
}

.signal-map-callout {
  width: min(190px, calc(100% - 32px));
  padding: 13px 14px;
}

.signal-map-callout strong,
.signal-map-callout span,
.signal-legend span {
  display: block;
}

.signal-map-callout strong {
  color: #007e7c;
  font-size: .92rem;
}

.signal-map-callout span {
  margin-top: 5px;
  color: #26374a;
  font-size: .84rem;
  line-height: 1.35;
}

.signal-callout-a {
  top: 28px;
  right: 24px;
}

.signal-callout-b {
  top: 44%;
  left: 20px;
}

.signal-callout-c {
  right: 22px;
  bottom: 114px;
}

.signal-legend {
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 14px 16px;
  display: grid;
  gap: 9px;
}

.signal-legend span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #26374a;
  font-size: .86rem;
  font-weight: 720;
}

.signal-legend i {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #007e7c;
}

.signal-legend .dashed {
  background: repeating-linear-gradient(90deg, #007e7c 0 9px, transparent 9px 15px);
}

.signal-legend .risk {
  width: 12px;
  height: 12px;
  background: #c93d30;
}

.signal-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.signal-guidance article {
  min-height: 142px;
  padding: 26px;
}

.signal-guidance h2 {
  font-size: 1.18rem;
}

.signal-guidance p {
  margin: 10px 0 0;
  color: #334154;
  font-size: .97rem;
}

@media (max-width: 1180px) {
  .signal-workspace,
  .signal-guidance {
    grid-template-columns: 1fr;
  }

  .signal-map {
    min-height: 520px;
    max-height: 560px;
  }
}

@media (max-width: 780px) {
  .signal-title,
  .signal-result-top,
  .signal-flow,
  .signal-metrics,
  .signal-plan-grid {
    grid-template-columns: 1fr;
  }

  .signal-title h1 {
    font-size: clamp(1.95rem, 8.2vw, 2.12rem);
    line-height: 1.05;
    overflow-wrap: break-word;
  }

  .signal-title p {
    overflow-wrap: break-word;
  }

  .signal-reset {
    width: 100%;
    min-height: 54px;
    flex-direction: row;
  }

  .signal-choices,
  .signal-result,
  .signal-guidance article {
    padding-left: 20px;
    padding-right: 20px;
  }

  .signal-choice-header,
  .signal-result-top {
    align-items: stretch;
    flex-direction: column;
  }

  .signal-choice-header span,
  .signal-fit,
  .signal-copy {
    width: 100%;
  }

  .signal-flow svg {
    width: 32px;
    transform: rotate(90deg);
    justify-self: center;
  }

  .signal-metrics div {
    border-right: 0;
    border-bottom: 1px solid #d6e1e7;
  }

  .signal-metrics div:last-child {
    border-bottom: 0;
  }

  .signal-map {
    min-height: 430px;
    max-height: 430px;
  }

  .signal-map-callout {
    width: min(165px, calc(100% - 30px));
    padding: 10px 12px;
  }

  .signal-callout-a {
    top: 16px;
    right: 14px;
  }

  .signal-callout-b {
    top: 42%;
    left: 14px;
  }

  .signal-callout-c {
    right: 14px;
    bottom: 104px;
  }
}

.pivot-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(31, 79, 130, .08), transparent 24rem),
    linear-gradient(180deg, #fbfcfd 0%, #f4f7fb 100%);
  overflow-x: hidden;
}

.pivot-header {
  width: min(1360px, calc(100% - 24px));
  padding-top: 18px;
  border-bottom: 1px solid rgba(217, 224, 232, .92);
}

.pivot-header nav a[aria-current="page"] {
  color: var(--red);
}

.pivot-shell {
  width: min(1360px, calc(100% - 24px));
  margin: 0 auto;
  padding: 22px 0 48px;
}

.pivot-title {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 22px;
}

.pivot-title-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  color: #08245d;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #cfdae8;
  box-shadow: 0 12px 26px rgba(24, 33, 47, .08);
}

.pivot-title-mark svg {
  width: 52px;
  height: 52px;
}

.pivot-title h1 {
  max-width: 840px;
  color: #071433;
  font-size: clamp(2.8rem, 5.1vw, 4.55rem);
  line-height: .98;
}

.pivot-title p {
  max-width: 780px;
  margin: 10px 0 0;
  color: #27364b;
}

.pivot-reset {
  min-width: 92px;
  min-height: 84px;
  padding: 10px 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #cdd6e2;
  border-radius: 8px;
  background: #ffffff;
  color: #071433;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(24, 33, 47, .06);
}

.pivot-workspace {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(300px, .78fr) minmax(320px, .9fr);
  gap: 16px;
  align-items: stretch;
}

.pivot-visual,
.pivot-board,
.pivot-plan,
.pivot-guidance article {
  background: rgba(255, 255, 255, .98);
  border: 1px solid #d3dbe6;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(24, 33, 47, .07);
}

.pivot-visual {
  min-height: 640px;
  overflow: hidden;
}

.pivot-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pivot-board {
  display: grid;
  align-content: start;
  overflow: hidden;
}

.pivot-group {
  padding: 25px 24px;
  border-bottom: 1px solid #dbe2eb;
}

.pivot-group:last-child {
  border-bottom: 0;
}

.pivot-group h2 {
  margin: 0 0 16px;
  color: #071433;
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  line-height: 1.1;
}

.pivot-options {
  display: grid;
  gap: 10px;
}

.pivot-option {
  width: 100%;
  min-height: 56px;
  padding: 0 12px 0 14px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  border: 1px solid #c4cfdd;
  border-radius: 8px;
  background: #ffffff;
  color: #071433;
  font: inherit;
  font-size: .96rem;
  font-weight: 720;
  line-height: 1.18;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.pivot-option:hover,
.pivot-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: #1f4f82;
  box-shadow: 0 10px 22px rgba(31, 79, 130, .14);
}

.pivot-option-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
}

.pivot-option-icon svg,
.pivot-check svg,
.pivot-plan-icon svg,
.pivot-small-icon svg,
.pivot-card-icon svg {
  width: 22px;
  height: 22px;
}

.pivot-option[data-tone="blue"] .pivot-option-icon,
.pivot-blue {
  background: linear-gradient(145deg, #236ac4, #0b4ea2);
}

.pivot-option[data-tone="green"] .pivot-option-icon,
.pivot-green {
  background: linear-gradient(145deg, #269562, #0a6b43);
}

.pivot-option[data-tone="gold"] .pivot-option-icon,
.pivot-gold {
  background: linear-gradient(145deg, #d79b0f, #b97904);
}

.pivot-option[data-tone="purple"] .pivot-option-icon {
  background: linear-gradient(145deg, #7450c8, #5932a6);
}

.pivot-option[data-tone="red"] .pivot-option-icon {
  background: linear-gradient(145deg, #d03a3e, #a51f27);
}

.pivot-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
}

.pivot-option.is-active {
  border-color: #0b5ccc;
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
  box-shadow: 0 12px 24px rgba(31, 79, 130, .16);
}

.pivot-option.is-active .pivot-check {
  color: #ffffff;
  background: #0b5ccc;
}

.pivot-option[data-tone="green"].is-active {
  border-color: #0a6b43;
  background: linear-gradient(180deg, #ffffff, #f3fbf7);
}

.pivot-option[data-tone="green"].is-active .pivot-check {
  background: #0a6b43;
}

.pivot-option[data-tone="gold"].is-active {
  border-color: #b97904;
  background: linear-gradient(180deg, #ffffff, #fff8e7);
}

.pivot-option[data-tone="gold"].is-active .pivot-check {
  background: #b97904;
}

.pivot-option[data-tone="purple"].is-active {
  border-color: #5932a6;
  background: linear-gradient(180deg, #ffffff, #f7f3ff);
}

.pivot-option[data-tone="purple"].is-active .pivot-check {
  background: #5932a6;
}

.pivot-option[data-tone="red"].is-active {
  border-color: #a51f27;
  background: linear-gradient(180deg, #ffffff, #fff4f4);
}

.pivot-option[data-tone="red"].is-active .pivot-check {
  background: #a51f27;
}

.pivot-plan {
  padding: 32px;
  display: grid;
  align-content: start;
}

.pivot-plan-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #08245d;
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight: 850;
}

.pivot-plan-icon,
.pivot-small-icon,
.pivot-card-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
  border-radius: 50%;
  flex: 0 0 auto;
}

.pivot-plan-icon {
  width: 52px;
  height: 52px;
  background: #0b5ccc;
}

.pivot-summary {
  margin: 24px 0 0;
  color: #11213c;
  font-size: clamp(1.08rem, 1.7vw, 1.26rem);
  line-height: 1.7;
}

.pivot-rule {
  height: 1px;
  margin: 26px 0;
  background: #d3dbe6;
}

.pivot-next {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
}

.pivot-small-icon {
  width: 44px;
  height: 44px;
  background: #0b5ccc;
}

.pivot-next h2 {
  margin: 0 0 10px;
  color: #071433;
  font-size: 1.25rem;
}

.pivot-next p {
  margin: 0;
  color: #253246;
  font-size: 1rem;
}

.pivot-plan h3 {
  margin: 0 0 14px;
  color: #071433;
  font-size: 1.14rem;
}

.pivot-plan ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
  list-style: none;
  counter-reset: pivot-steps;
}

.pivot-plan li {
  position: relative;
  min-height: 28px;
  padding-left: 44px;
  color: #253246;
  line-height: 1.48;
  counter-increment: pivot-steps;
}

.pivot-plan li::before {
  content: counter(pivot-steps);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0b5ccc;
  color: #ffffff;
  font-size: .84rem;
  font-weight: 850;
}

.pivot-copy {
  width: 100%;
  min-height: 56px;
  margin-top: 28px;
  gap: 10px;
  background: #0b5ccc;
}

.pivot-privacy {
  margin: 18px 0 0;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #46566b;
  font-size: .9rem;
  line-height: 1.4;
}

.pivot-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.pivot-guidance article {
  min-height: 154px;
  padding: 28px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pivot-card-icon {
  width: 54px;
  height: 54px;
}

.pivot-guidance h2 {
  margin: 0 0 8px;
  color: #071433;
  font-size: 1.2rem;
  line-height: 1.1;
}

.pivot-guidance p {
  margin: 0;
  color: #334154;
  font-size: .98rem;
}

@media (max-width: 1120px) {
  .debrief-workspace,
  .debrief-guidance {
    grid-template-columns: 1fr;
  }

  .debrief-visual {
    min-height: 420px;
  }

}

@media (max-width: 980px) {
  .pivot-workspace,
  .pivot-guidance {
    grid-template-columns: 1fr;
  }

  .pivot-visual {
    min-height: 420px;
    max-height: 520px;
  }
}

.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.story-hero > div,
.story-preview-card,
.story-inputs,
.story-output,
.story-guidance article,
.ai-hero > div,
.ai-meter,
.ai-board,
.ai-plan,
.ai-guidance article,
.follow-hero > div,
.follow-status,
.follow-board,
.follow-plan,
.follow-guidance article,
.defense-hero > div,
.defense-status,
.defense-board,
.defense-plan,
.defense-guidance article,
.proof-hero > div,
.proof-status,
.proof-board,
.proof-plan,
.proof-guidance article {
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(24, 33, 47, .07);
}

.story-hero > div,
.ai-hero > div,
.follow-hero > div,
.defense-hero > div,
.proof-hero > div {
  padding: clamp(28px, 5vw, 52px);
}

.story-hero h1 {
  max-width: 820px;
  font-size: 4.75rem;
}

.ai-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.follow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.defense-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.proof-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.ai-hero h1 {
  max-width: 840px;
  font-size: clamp(3rem, 7vw, 5.9rem);
}

.follow-hero h1 {
  max-width: 880px;
  font-size: clamp(3rem, 7vw, 5.8rem);
}

.defense-hero h1 {
  max-width: 900px;
  font-size: clamp(3rem, 7vw, 5.75rem);
}

.proof-hero h1 {
  max-width: 930px;
  font-size: clamp(3rem, 7vw, 5.65rem);
}

.story-preview-card,
.ai-meter,
.follow-status,
.defense-status,
.proof-status {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-preview-card span,
.ai-meter span,
.follow-status span,
.defense-status span,
.proof-status span {
  color: var(--muted);
  font-weight: 760;
}

.story-preview-card strong,
.ai-meter strong,
.follow-status strong,
.defense-status strong,
.proof-status strong {
  display: block;
  margin: 10px 0;
  color: var(--green);
  font-size: 5rem;
  line-height: .9;
}

.ai-meter strong {
  color: var(--blue);
}

.follow-status strong {
  color: var(--green);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

.defense-status strong {
  color: var(--red);
  font-size: clamp(2.5rem, 6vw, 4.4rem);
}

.proof-status strong {
  color: var(--blue);
  font-size: clamp(2.5rem, 6vw, 4.4rem);
}

.story-preview-card p,
.ai-meter p,
.follow-status p,
.defense-status p,
.proof-status p {
  margin: 0;
}

.story-workspace {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: 18px;
}

.story-inputs,
.story-output,
.ai-board,
.ai-plan,
.follow-board,
.follow-plan,
.defense-board,
.defense-plan,
.proof-board,
.proof-plan {
  padding: clamp(22px, 4vw, 30px);
}

.story-input-head,
.story-output-head,
.story-actions,
.ai-board-head,
.ai-plan-head,
.follow-board-head,
.follow-plan-head,
.defense-board-head,
.defense-plan-head,
.proof-board-head,
.proof-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.story-input-head,
.ai-board-head,
.follow-board-head,
.defense-board-head,
.proof-board-head {
  margin-bottom: 18px;
}

.story-input-head h2,
.story-output-head h2,
.story-guidance h2,
.ai-board-head h2,
.ai-plan-head h2,
.ai-guidance h2,
.follow-board-head h2,
.follow-plan-head h2,
.follow-guidance h2,
.defense-board-head h2,
.defense-plan-head h2,
.defense-guidance h2,
.proof-board-head h2,
.proof-plan-head h2,
.proof-guidance h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.05;
}

.ai-board-head p,
.follow-board-head p,
.defense-board-head p,
.proof-board-head p {
  margin: 8px 0 0;
  font-size: .98rem;
}

.story-field {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.story-field span,
.story-output-head span,
.story-actions span,
.ai-plan-head span,
.follow-plan-head span,
.defense-plan-head span,
.proof-plan-head span {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 760;
}

.story-field input,
.story-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #ffffff;
  font: inherit;
  line-height: 1.45;
  outline: none;
  resize: vertical;
}

.story-field input:focus,
.story-field textarea:focus {
  border-color: rgba(40, 113, 93, .62);
  box-shadow: 0 0 0 4px rgba(40, 113, 93, .12);
}

.story-output {
  display: flex;
  flex-direction: column;
}

.story-output p {
  min-height: 250px;
  margin: 20px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #334154;
  font-size: 1.08rem;
}

.story-actions {
  margin-top: auto;
}

.story-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.ai-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.follow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
}

.defense-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
}

.proof-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
}

.ai-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.follow-board {
  display: grid;
  gap: 18px;
}

.follow-group,
.defense-board,
.proof-board {
  display: grid;
  gap: 18px;
  overflow: hidden;
}

.defense-group,
.proof-group {
  display: grid;
  gap: 10px;
}

.follow-group h3,
.defense-group h3,
.proof-group h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.follow-options,
.defense-options,
.proof-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.follow-group:nth-of-type(4) .follow-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.defense-group:nth-of-type(4) .defense-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof-group:nth-of-type(4) .proof-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.follow-option,
.defense-option,
.proof-option {
  min-height: 132px;
  padding: 15px;
  display: grid;
  align-content: start;
  gap: 9px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.follow-option:hover,
.follow-option:focus-visible,
.defense-option:hover,
.defense-option:focus-visible,
.proof-option:hover,
.proof-option:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 12px 24px rgba(40, 113, 93, .14);
}

.follow-option.is-active {
  border-color: rgba(31, 79, 130, .5);
  background: linear-gradient(180deg, #ffffff, #e8f1fb);
}

.defense-option.is-active {
  border-color: rgba(180, 35, 42, .48);
  background: linear-gradient(180deg, #ffffff, #fae9ea);
}

.proof-option.is-active {
  border-color: rgba(40, 113, 93, .5);
  background: linear-gradient(180deg, #ffffff, #e8f6ef);
}

.follow-option strong,
.defense-option strong,
.proof-option strong {
  font-size: 1rem;
  line-height: 1.18;
}

.follow-option span,
.defense-option span,
.proof-option span {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.42;
}

.ai-signal {
  min-height: 190px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 16px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ai-signal:hover,
.ai-signal:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 12px 24px rgba(31, 79, 130, .14);
}

.ai-signal.is-active {
  border-color: rgba(40, 113, 93, .5);
  background: linear-gradient(180deg, #ffffff, #e8f6ef);
}

.ai-signal-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #e8f1fb;
  border-radius: 8px;
}

.ai-signal:nth-child(2n) .ai-signal-icon {
  color: var(--red);
  background: #fae9ea;
}

.ai-signal:nth-child(3n) .ai-signal-icon {
  color: var(--gold);
  background: #fbf1dd;
}

.ai-signal.is-active .ai-signal-icon {
  color: var(--green);
  background: #dff2e8;
}

.ai-signal-area,
.ai-signal small {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}

.ai-signal strong {
  font-size: 1.04rem;
  line-height: 1.22;
}

.ai-signal small {
  align-self: end;
}

.ai-plan,
.follow-plan,
.defense-plan,
.proof-plan {
  display: grid;
  gap: 18px;
  align-content: start;
}

.ai-plan ol,
.follow-plan ol,
.defense-plan ol,
.proof-plan ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 12px;
  color: #334154;
  line-height: 1.5;
}

.ai-plan li,
.follow-plan li,
.defense-plan li,
.proof-plan li {
  padding-left: 4px;
}

.ai-guidance,
.follow-guidance,
.defense-guidance,
.proof-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.story-guidance article {
  padding: 24px;
}

.ai-guidance article,
.follow-guidance article,
.defense-guidance article,
.proof-guidance article {
  padding: 24px;
}

.story-guidance ul {
  margin: 16px 0 0;
  padding-left: 20px;
  color: #334154;
  line-height: 1.55;
}

.story-guidance li + li {
  margin-top: 8px;
}

.sprint-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  margin-bottom: 18px;
}

.sprint-hero > div,
.sprint-score,
.sprint-board,
.sprint-mission,
.sprint-progress {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(24, 33, 47, .07);
}

.sprint-hero > div {
  padding: clamp(28px, 5vw, 52px);
}

.sprint-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 7vw, 6rem);
}

.sprint-score {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sprint-score span,
.sprint-badge,
.mission-meta {
  color: var(--muted);
  font-weight: 760;
}

.sprint-score strong {
  display: block;
  margin: 8px 0 10px;
  color: var(--blue);
  font-size: clamp(4rem, 10vw, 6.5rem);
  line-height: .9;
  letter-spacing: 0;
}

.sprint-score p,
.sprint-board-head p,
.sprint-mission p,
.sprint-progress p {
  margin: 0;
}

.sprint-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}

.sprint-board {
  padding: 18px;
}

.sprint-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.sprint-board-head h2,
.sprint-mission h2,
.sprint-progress h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.08;
}

.sprint-badge,
.mission-meta span:last-child {
  padding: 5px 9px;
  border-radius: 8px;
  background: #edf3f8;
  white-space: nowrap;
}

.sprint-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
}

.mission-card {
  width: 100%;
  min-height: 300px;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  text-align: left;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.mission-card:hover,
.mission-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 12px 24px rgba(31, 79, 130, .14);
}

.mission-card.is-selected {
  border-color: var(--blue);
  background: linear-gradient(180deg, #ffffff, #e8f1fb);
}

.mission-card.is-done {
  border-color: rgba(40, 113, 93, .45);
  background: linear-gradient(180deg, #ffffff, #e8f6ef);
}

.mission-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #e8f1fb;
  border-radius: 8px;
}

.mission-card:nth-child(2) .mission-icon,
.mission-card:nth-child(4) .mission-icon {
  color: var(--red);
  background: #fae9ea;
}

.mission-card:nth-child(3) .mission-icon {
  color: var(--gold);
  background: #fbf1dd;
}

.mission-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.mission-card p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.mission-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
}

.mission-card.is-done .mission-meta span:last-child {
  background: #dff2e8;
  color: var(--green);
}

.sprint-mission {
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 16px;
}

.sprint-mission-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sprint-mission-title span {
  color: var(--red);
  font-weight: 800;
}

.mission-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.mission-steps li {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f2f5f8;
  color: var(--ink);
  line-height: 1.35;
}

.sprint-actions {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 10px;
}

.mission-button {
  width: 100%;
  border: 0;
}

.mission-button:disabled {
  cursor: default;
  background: #aab7c4;
}

.reset-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.sprint-progress {
  margin-top: 18px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: center;
}

.lead-page {
  background:
    linear-gradient(135deg, rgba(40, 113, 93, .08), transparent 36%),
    linear-gradient(315deg, rgba(185, 132, 47, .12), transparent 34%),
    #f5f7fa;
}

.lead-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.lead-hero,
.map-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  margin-bottom: 18px;
}

.lead-hero > div,
.lead-feature,
.resource-card,
.lead-lane,
.map-hero > div,
.map-card,
.map-step,
.map-action {
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(24, 33, 47, .07);
}

.lead-hero > div,
.map-hero > div {
  padding: clamp(28px, 5vw, 52px);
}

.lead-hero h1,
.map-hero h1 {
  max-width: 820px;
  font-size: clamp(3rem, 7vw, 6rem);
}

.lead-feature,
.map-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.lead-feature span,
.map-card span,
.resource-kicker {
  color: var(--muted);
  font-weight: 760;
}

.lead-feature strong,
.map-card strong {
  display: block;
  color: var(--green);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: .98;
  letter-spacing: 0;
}

.lead-feature p,
.map-card p,
.lead-lane p,
.map-action p {
  margin: 0;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.resource-card {
  min-height: 270px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-card.is-live {
  border-color: rgba(40, 113, 93, .45);
}

.resource-card h2 {
  margin: 18px 0 0;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.04;
}

.resource-card p {
  margin: 16px 0 24px;
  font-size: .98rem;
}

.resource-link {
  color: var(--green);
  font-weight: 800;
}

.resource-link.muted {
  color: var(--muted);
}

.lead-lane,
.map-action {
  margin-top: 18px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.lead-lane h2,
.map-action h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.05;
}

.map-page {
  background:
    linear-gradient(90deg, rgba(245, 247, 250, .96), rgba(245, 247, 250, .68)),
    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=82") center / cover fixed;
}

.map-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.map-step {
  padding: 24px;
}

.step-number {
  display: inline-flex;
  min-width: 44px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #e8f1fb;
  color: var(--blue);
  font-weight: 860;
}

.map-step:nth-child(2) .step-number {
  background: #fae9ea;
  color: var(--red);
}

.map-step:nth-child(3) .step-number {
  background: #fbf1dd;
  color: var(--gold);
}

.map-step:nth-child(4) .step-number {
  background: #e8f6ef;
  color: var(--green);
}

.map-step h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.05;
}

.map-step p {
  margin: 14px 0 16px;
}

.map-step ul {
  margin: 0;
  padding-left: 20px;
  color: #334154;
  line-height: 1.5;
}

.map-step li + li {
  margin-top: 8px;
}

.script-box {
  padding: 16px;
  border-radius: 8px;
  background: #f2f5f8;
  border: 1px solid var(--line);
}

.script-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
}

.script-box p {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 780px) {
  .tool-header,
  .result-band,
  .lead-lane,
  .map-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .score-hero,
  .checklist,
  .sprint-hero,
  .sprint-workspace,
  .sprint-progress,
  .ai-hero,
  .ai-workspace,
  .ai-signal-grid,
  .ai-guidance,
  .follow-hero,
  .follow-workspace,
  .follow-options,
  .defense-hero,
  .defense-workspace,
  .defense-options,
  .proof-hero,
  .proof-workspace,
  .proof-options,
  .follow-group:nth-of-type(4) .follow-options,
  .defense-group:nth-of-type(4) .defense-options,
  .proof-group:nth-of-type(4) .proof-options,
  .defense-guidance,
  .follow-guidance,
  .proof-guidance,
  .debrief-options,
  .pivot-title,
  .pivot-options,
  .pivot-next,
  .pivot-guidance article,
  .story-hero,
  .story-workspace,
  .story-guidance,
  .lead-hero,
  .map-hero,
  .resource-grid,
  .map-board {
    grid-template-columns: 1fr;
  }

  .debrief-title {
    flex-direction: column;
  }

  .debrief-title h1 {
    font-size: 2.55rem;
  }

  .debrief-reset {
    width: 100%;
  }

  .debrief-group,
  .debrief-guidance article {
    grid-template-columns: 1fr;
  }

  .debrief-visual {
    min-height: 200px;
    max-height: 200px;
  }

  .debrief-board-note,
  .debrief-group,
  .debrief-privacy,
  .debrief-plan,
  .debrief-guidance article {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pivot-title {
    gap: 14px;
  }

  .pivot-title-mark {
    width: 64px;
    height: 64px;
  }

  .pivot-title h1 {
    font-size: 2.55rem;
  }

  .pivot-reset {
    width: 100%;
    min-height: 54px;
    flex-direction: row;
  }

  .pivot-visual {
    min-height: 240px;
    max-height: 240px;
  }

  .pivot-group,
  .pivot-plan,
  .pivot-guidance article {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pivot-option {
    min-height: 58px;
  }

  .pivot-plan-title {
    font-size: 1.55rem;
  }

  .story-hero h1 {
    font-size: 3.15rem;
  }

  .story-preview-card strong {
    font-size: 4rem;
  }

  .ai-meter strong {
    font-size: 4rem;
  }

  .sprint-lanes {
    grid-template-columns: 1fr;
  }

  .mission-card {
    min-height: 190px;
  }
}

@media print {
  body,
  .map-page {
    background: #ffffff;
  }

  .tool-header,
  .no-print {
    display: none;
  }

  .lead-shell {
    width: 100%;
    padding: 0;
  }

  .map-hero,
  .map-board {
    grid-template-columns: 1fr;
  }

  .map-hero > div,
  .map-card,
  .map-step,
  .map-action {
    box-shadow: none;
    break-inside: avoid;
  }
}