:root {
  --navy: #17233b;
  --blue: #2a4e7d;
  --slate: #566171;
  --paper: #f7f4ee;
  --surface: #ffffff;
  --soft-blue: #eef3f8;
  --line: rgba(23, 35, 59, .14);
  --draft: #9a6400;
  --draft-bg: #fff3d8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: #1f2a3d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; }
.page { min-height: 100vh; padding: 28px 18px 72px; }
.shell { width: min(1120px, 100%); margin: 0 auto; }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.topbar a {
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}
.hero,
.panel,
.card-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(23, 35, 59, .08);
}
.hero { padding: clamp(30px, 5vw, 56px); }
.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero h1,
.card-hero h1 {
  max-width: 980px;
  margin: 4px 0 14px;
  color: var(--navy);
  font-size: clamp(2.35rem, 5vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.subtitle {
  max-width: 900px;
  margin: 0;
  color: var(--blue);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 900;
  line-height: 1.4;
}
.lede {
  max-width: 900px;
  margin: 18px 0 0;
  color: var(--slate);
  line-height: 1.72;
}
.sequence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.sequence span {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
}
.start-panel,
.panel {
  margin-top: 22px;
  padding: clamp(24px, 4vw, 36px);
}
.start-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.start-panel p { margin: 0; color: var(--slate); }
.start-panel strong { color: var(--navy); }
.button,
.open-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover,
.open-card:hover { background: var(--blue); }
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.training-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(23, 35, 59, .07);
}
.card-top {
  position: relative;
  min-height: 150px;
  padding: 22px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
}
.card-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  font-weight: 900;
}
.card-top .label {
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
}
.training-card h2,
.card-panel h2,
.panel h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.18;
}
.training-card h3,
.card-panel h3,
.panel h3 {
  margin: 24px 0 10px;
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.25;
}
.training-card p,
.panel p,
.card-panel p,
.card-panel li,
.panel li {
  color: var(--slate);
}
.training-card p { margin: 0; }
.open-card { margin-top: auto; }
.wide { grid-column: 1 / -1; }
.card-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  padding: clamp(30px, 5vw, 52px);
}
.hero-side {
  align-self: start;
  padding: 22px;
  border-radius: 18px;
  background: var(--soft-blue);
}
.hero-side span {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-side strong {
  display: block;
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.35;
}
.card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: 20px;
  margin-top: 22px;
}
.card-panel { padding: clamp(24px, 4vw, 36px); }
.callout {
  margin: 18px 0;
  padding: 18px 20px;
  border-left: 6px solid var(--blue);
  border-radius: 10px;
  background: var(--soft-blue);
  color: var(--slate);
}
.callout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.checklist,
.question-list,
.standard-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.checklist li,
.question-list li,
.standard-list li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
}
.quote-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.quote-card {
  padding: 16px 18px;
  border-radius: 14px;
  background: #fbfaf7;
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 800;
}
.card-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.card-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
  text-decoration: none;
}
.card-nav a.primary { background: var(--navy); color: #fff; }
.card-nav a:hover { background: var(--soft-blue); }
.card-nav a.primary:hover { background: var(--blue); }
.footer-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--draft-bg);
  color: var(--draft);
  font-weight: 900;
}

@media (max-width: 840px) {
  body { font-size: 16px; }
  .grid,
  .card-hero,
  .card-layout { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .start-panel { align-items: flex-start; flex-direction: column; }
  .topbar { flex-direction: column; }
  .button,
  .open-card,
  .card-nav a { width: 100%; }
}

/* Source-material section (mirrors the Customer Opportunity Review gold standard).
   Numbered source clips behind the five cards. Cards are flex columns so the
   "Open Source Page" button pins to the bottom and all CTAs line up across a row. */
.tool-section {
  margin-top: 28px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(23, 35, 59, .08);
}
.tool-section h2 {
  margin: 6px 0 12px;
  color: var(--navy);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.tool-section > p {
  max-width: 900px;
  margin: 0;
  color: var(--slate);
  line-height: 1.7;
}
/* Section heading for the bare five-card grid — mirrors the "Training cards
   behind this tool" title treatment without wrapping the cards in a panel, so
   the big-card look is preserved. */
.cards-heading { margin-top: 28px; }
.cards-heading h2 {
  margin: 6px 0 10px;
  color: var(--navy);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.cards-heading > p {
  max-width: 900px;
  margin: 0;
  color: var(--slate);
  line-height: 1.7;
}
.four-questions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.question-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(23, 35, 59, .12);
  border-radius: 18px;
  background: #fbfaf7;
}
.question-card span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}
.question-card strong {
  display: block;
  margin-top: 14px;
  color: var(--navy);
  font-size: 1.08rem;
}
.question-card p {
  margin: 8px 0 0;
  color: var(--slate);
  font-size: .96rem;
}
.question-card .open-card {
  margin-top: auto;
  align-self: flex-start;
  max-width: 100%;
}
/* Drop to 2 columns in the medium band so the source cards never get narrow
   enough to clip the "Open Source Page" button (4-up only on wide screens). */
@media (max-width: 1080px) {
  .four-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .four-questions { grid-template-columns: 1fr; }
}