:root {
  --navy: #00214C;
  --blue: #1C3F73;
  --pale-blue: #EAF0F7;
  --ice: #F7F9FC;
  --slate: #334155;
  --muted: #64748B;
  --line: #DCE3ED;
  --white: #FFFFFF;
  --shadow: 0 24px 70px rgba(0, 33, 76, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.6;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(22px, 5vw, 76px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 230, 242, 0.8);
  backdrop-filter: blur(18px);
}

.brand img {
  width: 178px;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 550;
  color: var(--slate);
}

.nav a:hover {
  color: var(--blue);
}

.nav-cta {
  padding: 10px 16px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

.menu-button span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 5px auto;
  background: var(--navy);
}

.section {
  padding: clamp(72px, 8vw, 118px) clamp(22px, 5vw, 76px);
}

.centered-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.centered-block .hero-actions {
  justify-content: center;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: calc(100vh - 82px);
  background:
    radial-gradient(circle at top left, rgba(22, 62, 120, 0.10), transparent 36%),
    linear-gradient(135deg, #FFFFFF 0%, #F7FAFD 100%);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Type scale. Deliberately restrained: at 46px+ a navy heading dominates its
   whole section, which reads loud rather than senior — and because every
   heading is navy, oversized type is also what makes the page feel monotone.
   Line-height opens slightly as sizes come down. */
h1, h2, h3 {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.16;
  text-wrap: balance;
}

h1 {
  max-width: 780px;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.hero-subtitle {
  max-width: 760px;
  margin: 28px 0 0;
  font-size: clamp(19px, 2vw, 24px);
  color: var(--slate);
}

.hero-copy .eyebrow {
  font-size: 16px;
  letter-spacing: 0.06em;
}

.hero-headline {
  max-width: 880px;
  margin: 18px 0 0;
  font-size: clamp(29px, 3.4vw, 44px);
}

.hero-subline {
  max-width: 700px;
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.button.primary {
  color: var(--white);
  background: var(--navy);
}

.button.secondary {
  color: var(--navy);
  background: var(--white);
  border-color: var(--line);
}

.hero-panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.panel-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brief-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.brief-row:last-child {
  border-bottom: 0;
}

.brief-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brief-row p {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
}

.panel-bio {
  margin: 18px 0 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.6;
}

.panel-bio strong {
  color: var(--navy);
  font-weight: 700;
}

.trust-strip {
  padding-top: 28px;
  padding-bottom: 28px;
  text-align: center;
  background: var(--navy);
  color: var(--white);
}

.trust-strip p {
  max-width: 940px;
  margin: 0 auto;
  font-size: 18px;
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 96px);
}

.split.reverse {
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.9fr);
}

.rich-text p {
  margin: 0 0 22px;
  color: var(--slate);
  font-size: 19px;
}

.rich-text p:last-child {
  margin-bottom: 0;
}

.section-heading {
  max-width: 820px;
  margin-bottom: 42px;
}

.cards {
  display: grid;
  gap: 20px;
}

.cards.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cards.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Problem cards (owner-voice, image-6 style icon grid) */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.problem-card {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 33, 76, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 33, 76, 0.12);
  border-color: rgba(0, 33, 76, 0.12);
}

/* Custom hover/focus tooltip (navy, instant) */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 33, 76, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 6;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after {
    transition: opacity 0.15s ease;
    transform: translate(-50%, 0);
  }
}

.problem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 13px;
  background: var(--pale-blue);
  color: var(--blue);
}

.problem-icon svg {
  width: 22px;
  height: 22px;
}

/* Per-card icon accents (kept soft to stay on-brand with navy/blue) */
.problem-icon--green  { background: #E7F5EF; color: #0E9F6E; }
.problem-icon--amber  { background: #FCF3E7; color: #D97706; }
.problem-icon--violet { background: #EEEBFA; color: #7C3AED; }
.problem-icon--blue   { background: #E7F0FB; color: #2563EB; }
.problem-icon--rose   { background: #FBEAF0; color: #DB2777; }
.problem-icon--teal   { background: #E4F5F6; color: #0891B2; }

/* Second-opinion strip (validation segment) */
.second-opinion {
  background: var(--pale-blue);
  text-align: center;
  padding-top: clamp(48px, 6vw, 74px);
  padding-bottom: clamp(48px, 6vw, 74px);
}

.second-opinion-inner {
  display: block;
  max-width: 840px;
  margin: 0 auto;
  color: inherit;
  text-decoration: none;
}

.second-opinion-inner:hover h2 {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.second-opinion h2 {
  font-size: clamp(24px, 3vw, 34px);
}

.second-opinion p {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 18px;
  color: var(--slate);
}

/* Why Sapientir (centered, ruled title, standalone icon columns) */
.why-sapientir {
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.why-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
}

.why-rule {
  flex-shrink: 0;
  width: clamp(30px, 8vw, 90px);
  height: 2px;
  background: var(--blue);
  opacity: 0.45;
}

.why-intro {
  max-width: 760px;
  margin: 26px auto 0;
  font-size: 18px;
  color: var(--slate);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  max-width: 1080px;
  margin: 60px auto 0;
}

.why-item {
  text-align: center;
}

.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.why-icon svg {
  width: 46px;
  height: 46px;
}

.why-item h3 {
  margin-bottom: 12px;
  font-size: 20px;
}

.why-item p {
  margin: 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.6;
}

.why-icon--amber  { color: #D97706; }
.why-icon--violet { color: #7C3AED; }
.why-icon--blue   { color: #2563EB; }

.problem-card h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.problem-card p {
  margin: 0;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.5;
}

.card {
  min-height: 220px;
  padding: 26px 24px;
  background: var(--ice);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.cards.five h3 {
  font-size: 18px;
}

.card-number {
  display: inline-block;
  margin-bottom: 34px;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.card p,
.use-case p,
.contact p {
  color: var(--slate);
}

.diagnostic-section {
  max-width: 1040px;
  margin: 0 auto;
}

.diagnostic-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
  margin-top: 56px;
}

.diagnostic-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  font: inherit;
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 33, 76, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.diagnostic-option:hover {
  border-color: rgba(0, 33, 76, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 33, 76, 0.14);
}

.diagnostic-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 208px;
  flex-shrink: 0;
  position: relative;
}

.diagnostic-visual--cash {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(4, 120, 87, 0.6), transparent 55%),
    linear-gradient(150deg, #047857 0%, #10B981 55%, #6EE7B7 100%);
}

.diagnostic-visual--profit {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(29, 78, 216, 0.6), transparent 55%),
    linear-gradient(150deg, #1D4ED8 0%, #3B82F6 55%, #93C5FD 100%);
}

.diagnostic-visual--growth {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.4), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(194, 65, 12, 0.6), transparent 55%),
    linear-gradient(150deg, #C2410C 0%, #F97316 55%, #FDBA74 100%);
}

.diagnostic-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.diagnostic-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 28px 28px 32px;
}

.diagnostic-option-label {
  display: block;
  margin-bottom: 10px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.diagnostic-option p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--slate);
}

#form-step h2 {
  margin: 8px 0 28px;
}

#gate-step, #result-step {
  margin-top: 8px;
}

.use-case-list {
  display: grid;
  gap: 18px;
}

.use-case {
  padding: 28px;
  border-left: 4px solid var(--blue);
  background: var(--ice);
  border-radius: 0 20px 20px 0;
}

.checklist {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--slate);
}

.checklist:last-child {
  margin-bottom: 0;
}

.checklist li {
  position: relative;
  padding-left: 22px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--blue);
}

.checklist--large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
  max-width: 1040px;
}

.checklist--large li {
  font-size: 18px;
}

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

.principle {
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.principle h3 {
  margin-bottom: 14px;
}

.principle p {
  margin: 0;
  color: var(--slate);
}

.principle .checklist {
  margin-top: 0;
}

.faq-list {
  display: grid;
  gap: 0;
  max-width: 900px;
}

.faq-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item h3 {
  margin-bottom: 10px;
}

.faq-item p {
  margin: 0;
  color: var(--slate);
  font-size: 17px;
}

.philosophy {
  text-align: center;
  background: linear-gradient(135deg, var(--navy), #102C52);
  color: var(--white);
}

.philosophy .eyebrow {
  color: #BFD3EF;
}

blockquote {
  max-width: 980px;
  margin: 0 auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 650;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(340px, 0.7fr);
  gap: clamp(40px, 7vw, 90px);
  background: var(--ice);
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

label {
  display: grid;
  gap: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  color: var(--navy);
  background: var(--white);
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: 3px solid rgba(22, 62, 120, 0.16);
  border-color: var(--blue);
}

.form-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.field-hint {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.form-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(185, 28, 28, 0.08);
  color: #B91C1C;
  font-size: 13px;
  font-weight: 600;
}

.footer {
  padding: 38px clamp(22px, 5vw, 76px);
  border-top: 1px solid var(--line);
}

.footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footer img {
  width: 160px;
}

.footer p {
  margin: 12px 0 0;
  color: var(--muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--slate);
  font-weight: 650;
}

.footer-disclaimer {
  margin: 16px 0 0;
  max-width: 900px;
  font-size: 12px;
  color: var(--muted);
}

/* Section background rhythm — each section differs from its neighbour.
   Dark is reserved for text-only sections; card sections stay light. */
.section--tint {
  background: var(--ice);
}

.section--dark {
  background: var(--navy);
  color: var(--white);
}

.section--dark .eyebrow {
  color: #BFD3EF;
}

.section--dark h2,
.section--dark h3 {
  color: var(--white);
}

.section--dark p,
.section--dark li,
.section--dark .rich-text p {
  color: #D6E1F0;
}

.section--dark .checklist li::before {
  background: #7FA8D8;
}

/* Honeypot: kept in the accessibility tree but off-screen for humans. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hook strip (navy) */
.trust-strip .trust-lead {
  max-width: 960px;
  margin: 0 auto;
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 650;
  line-height: 1.35;
}

.trust-strip .trust-sub {
  max-width: 960px;
  margin: 16px auto 0;
  font-size: 18px;
  color: #BFD3EF;
}

/* Credibility strip (proof-substitute) */
.credibility {
  text-align: center;
  padding-top: clamp(56px, 6vw, 84px);
  padding-bottom: clamp(56px, 6vw, 84px);
}

.credibility-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1040px;
  margin: 34px auto 0;
}

.cred-item {
  padding: 0 10px;
}

.cred-figure {
  display: block;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.cred-item p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
}

.cred-note {
  max-width: 880px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Fit filter (is this for you?) */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.fit-col {
  padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.fit-col h3 {
  margin-bottom: 20px;
}

.fit-col--yes h3 {
  color: var(--navy);
}

.fit-col--no h3 {
  color: var(--muted);
}

.checklist--no li::before {
  background: var(--muted);
}

/* Proof slot (styles ready for when the commented section is filled in) */
.proof-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.proof-card {
  flex: 1 1 240px;
  max-width: 340px;
  margin: 0;
  padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.proof-card p {
  margin: 0;
  color: var(--navy);
}

.proof-card cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 14px;
  color: var(--muted);
}

.proof-figure {
  display: block;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.proof-stat p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--slate);
}

/* Sticky mobile action bar (shown only on narrow screens, see media query) */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 980px) {
  .nav {
    position: fixed;
    inset: 78px 16px auto 16px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .nav.open {
    display: flex;
  }

  .menu-button {
    display: block;
  }

  .hero,
  .split,
  .split.reverse,
  .contact {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .cards.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards.three {
    grid-template-columns: 1fr;
  }

  .problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .diagnostic-picker {
    grid-template-columns: 1fr;
  }

  .principle-list {
    grid-template-columns: 1fr;
  }

  .checklist--large {
    grid-template-columns: 1fr;
  }

  .footer-columns {
    flex-direction: column;
  }

  .credibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .fit-grid,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .mobile-cta-bar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mobile-cta-bar .button {
    flex: 1;
    min-height: 46px;
    padding: 11px 12px;
    font-size: 14px;
  }

  /* Room so the fixed bar never covers page content or the footer. */
  body {
    padding-bottom: 76px;
  }
}

@media (max-width: 640px) {
  .brand img {
    width: 148px;
  }

  .why-rule {
    display: none;
  }

  .section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-panel,
  .contact-form,
  .card,
  .use-case {
    padding: 22px;
  }

  .cards.five {
    grid-template-columns: 1fr;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-direction: column;
  }
}

/* ---- Sized exposure (Financial Health Check) ----
   The one figure that names what's actually at stake. Deliberately the
   loudest element in the result panel, with the working shown directly
   underneath it so the number can always be checked. */

.teaser-exposure {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-left: 3px solid var(--blue);
  background: var(--pale-blue);
  border-radius: 0 10px 10px 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.exposure-block {
  margin: 0 0 4px;
  padding: 22px;
  background: var(--pale-blue);
  border-radius: 14px;
}

.exposure-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.exposure-amount {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.exposure-statement {
  margin: 10px 0 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.exposure-basis {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.exposure-illustrative {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .exposure-block {
    padding: 18px;
  }

  .teaser-exposure {
    padding: 14px 15px;
    font-size: 16px;
  }

  .exposure-statement {
    font-size: 16px;
  }
}

/* ---- Banded input fields (Financial Health Check) ----
   Ranges are the default because most owners can't recall a receivables
   balance to the dollar, and asking them to means asking their finance
   staff. Anyone who does know can switch the field to exact entry. */

.band-field {
  display: grid;
  gap: 8px;
}

.band-field > label {
  margin: 0;
}

.band-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 40px 13px 14px;
  font: inherit;
  color: var(--navy);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  appearance: none;
  -webkit-appearance: none;
}

.band-field select:focus,
.band-field .exact-input:focus {
  outline: 3px solid rgba(22, 62, 120, 0.16);
  border-color: var(--blue);
}

.band-field .exact-input {
  min-height: 48px;
}

.exact-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.exact-toggle:hover,
.exact-toggle:focus-visible {
  color: var(--navy);
}

.exact-toggle:focus-visible {
  outline: 3px solid rgba(22, 62, 120, 0.16);
  outline-offset: 3px;
  border-radius: 4px;
}

#form-fields {
  display: grid;
  gap: 22px;
}

/* ---- Decision door (no-numbers path) ----
   For the owner who doesn't want a calculator — they want to talk about the
   decision already on their desk. Reuses the homepage problem-card language so
   arriving from one of those cards feels continuous. */

button.problem-card {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.qualify-groups {
  display: grid;
  gap: 32px;
  margin-top: 36px;
  max-width: 720px;
}

.qualify-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.qualify-group legend {
  padding: 0;
  margin-bottom: 14px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--slate);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: var(--blue);
  color: var(--navy);
}

.chip:focus-visible {
  outline: 3px solid rgba(22, 62, 120, 0.16);
  outline-offset: 2px;
}

.chip--on,
.chip--on:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.talk-options {
  display: grid;
  gap: 14px;
}

.talk-option {
  display: block;
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 33, 76, 0.05);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.talk-option:hover,
.talk-option:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 33, 76, 0.12);
  border-color: rgba(0, 33, 76, 0.14);
}

.talk-label {
  display: block;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.talk-sub {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 640px) {
  .chip { width: 100%; text-align: left; }
  .qualify-groups { gap: 26px; }
}

/* Range results offer a route to a sharper one rather than leaving the
   visitor with a spread and no way to narrow it. */
.sharpen-row {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.sharpen-result {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sharpen-result:hover,
.sharpen-result:focus-visible {
  color: var(--navy);
}

/* ---- Closing line under the problem cards (What we help with) ----
   The cards carry the owner's own words; this line names why they need
   somebody rather than another report. */

.decision-breadth {
  max-width: 900px;
  margin: 56px auto 0;
  text-align: center;
}

.decision-breadth-punch {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* ---- Decision Intelligence Framework (How we think) ----
   The trust centrepiece: the methodology carries the credibility, not a name.
   Two columns — the heading holds the left, the sequence runs down the right —
   numbered and joined by a vertical rule so each step visibly feeds the next. */

.framework-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.framework-heading h2 {
  max-width: 460px;
}

/* min-width:0 so a long step description can wrap instead of forcing the
   grid column wider than its share. */
.framework-body {
  min-width: 0;
}

.framework-intro {
  margin: 0 0 46px;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--slate);
}

.framework-intro strong {
  color: var(--navy);
  font-weight: 650;
}

.framework-note {
  margin: 46px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.framework {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.framework-step {
  position: relative;
  padding: 0 0 34px 76px;
}

.framework-step:last-child {
  padding-bottom: 0;
}

/* The connector: a rule from each step's marker down to the next one. */
.framework-step::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: -2px;
  left: 23px;
  width: 2px;
  background: linear-gradient(to bottom, var(--line), var(--pale-blue));
}

.framework-step:last-child::before {
  display: none;
}

.framework-index {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.framework-step h3 {
  margin: 11px 0 8px;
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.framework-step p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--slate);
}

/* ---- Selected impact (Results) ----
   Four figures on the open page, each opened by a hairline rule rather than
   sitting in a card — the numbers carry the weight, not a container. */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Each tile is a white card on the tinted section with a coloured top edge.
   The accent sits on the edge, never on the number: values stay in primary ink
   so four figures read as one set rather than four unrelated highlights. */
.impact-item {
  position: relative;
  overflow: hidden;
  padding: 34px 26px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 33, 76, 0.05);
}

.impact-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--impact-accent, var(--blue));
}

/* Hues reused from the problem-card icons above, so the page has one colour
   language rather than two. Validated for colour-blind separation against the
   tinted surface — worst adjacent pair ΔE 8.8 (protan). */
.impact-item--profit  { --impact-accent: #D97706; }
.impact-item--cash    { --impact-accent: #0E9F6E; }
.impact-item--revenue { --impact-accent: #2563EB; }
.impact-item--ma      { --impact-accent: #DB2777; }

.impact-figure {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.impact-item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}

/* ---- Product ecosystem ----
   Only shipped products get a card and a button, so nothing here leads to a
   dead end. */

.products-intro {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--slate);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(0, 33, 76, 0.06);
}

.product-card--feature {
  border-color: var(--navy);
  box-shadow: 0 22px 60px rgba(0, 33, 76, 0.13);
}

.product-price {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.product-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.product-line {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

.product-detail {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
}

/* The one line in a product card that has to survive skim-reading. */
.product-detail--strong {
  font-weight: 650;
  color: var(--navy);
}

/* Pushes the button to the bottom so both cards' buttons line up. */
.product-card .button {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 980px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 28px;
  }

  /* Heading stacks above the sequence rather than sitting beside it. */
  .framework-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .framework-heading h2 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  /* One per row — two columns at 320px leaves the descriptions too narrow. */
  .impact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .impact-item {
    padding-top: 26px;
  }

  .framework-step {
    padding-left: 62px;
  }

  .framework-index {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .framework-step::before {
    top: 38px;
    left: 19px;
  }

  .product-card {
    padding: 26px 22px;
  }

  .product-card .button {
    align-self: stretch;
    text-align: center;
  }
}

/* ---- Polish pass ----
   Cross-cutting fixes that apply across sections, kept together so the next
   person can find them. */

/* The header is sticky (~80px: 178px logo at 4:1 plus 18px padding either
   side), so without this an anchor jump lands the section heading underneath
   it and the visitor sees the middle of a section with no title. */
main[id],
main > section[id] {
  scroll-margin-top: 100px;
}

/* The contact section sits on white so it alternates against the tinted
   products section above it; the form keeps its own border and shadow, so it
   still reads as a distinct card. */
.contact {
  background: var(--white);
}

/* Keyboard focus was only styled on the health-check and decision controls.
   These are the homepage's interactive elements — the outline sits outside the
   element so it stays visible on a navy button as well as a white one. */
.brand:focus-visible,
.nav a:focus-visible,
.nav-cta:focus-visible,
.menu-button:focus-visible,
.button:focus-visible,
.problem-card:focus-visible,
.footer-links a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Buttons and cards already have their own radius — keep the ring following
   the shape rather than squaring it off. */
.button:focus-visible,
.nav-cta:focus-visible {
  border-radius: 999px;
}

.problem-card:focus-visible {
  border-radius: 20px;
}

/* ---- Independent challenge band ----
   The route in for a finance manager / FD who wants senior validation before
   their recommendation reaches the board. Pale blue so it reads as an aside
   from the main product narrative, not another product. */

.challenge-band {
  background: var(--pale-blue);
  text-align: center;
  padding-top: clamp(56px, 6.5vw, 86px);
  padding-bottom: clamp(56px, 6.5vw, 86px);
}

.challenge-band h2 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(24px, 2.6vw, 33px);
}

.challenge-body {
  max-width: 760px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--slate);
}

.challenge-band .button {
  box-shadow: 0 8px 24px rgba(0, 33, 76, 0.10);
  border-color: transparent;
}

/* ---- Closing CTA band ----
   Navy, so it bookends the strip under the hero and gives the page a hard
   stop before the contact form. */

.cta-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: clamp(64px, 7vw, 96px);
}

.cta-band h2 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--white);
}

.cta-band-body {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.65;
  color: #C3D5EE;
}

/* White pills on navy — both buttons carry equal visual weight here, because
   at this point in the page either next step is a good outcome. */
.cta-band .button {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.cta-band .button:focus-visible {
  outline-color: var(--white);
}

/* Link out of the framework's footnote to the worked example. The methodology
   is a claim until a visitor can see it applied. */
.framework-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--blue);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.framework-link:hover,
.framework-link:focus-visible {
  color: var(--navy);
}

/* The reassurance line under the health-check intro. Its job is to remove the
   two objections that stop an owner starting: preparing something, and having
   to involve the finance team. */
.picker-assurance {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: 16.5px;
  font-weight: 650;
  color: var(--navy);
}