/* SplitOurPlan design system.
   Brand palette from the brand board: Navy #0B3A82 (primary),
   Green #22C55E (accent), Blue #3B82F6 (secondary), Orange #F97316
   (highlight), White. Darker and lighter shades below are tints of
   those colors, for depth and hover states only.
   Typography: Poppins for headings and the wordmark, Inter for body,
   both from Google Fonts with solid system fallbacks so the PWA
   still looks right offline. Mobile first.
   No em dashes in any user-facing copy. */
:root {
  --navy: #0B3A82;
  --navy-deep: #082A5E;
  --navy-ink: #142A4C;
  --green: #22C55E;
  --green-dark: #15803D;
  --green-soft: #E8F9EE;
  --green-light: #86EFAC;
  --blue: #3B82F6;
  --blue-dark: #2563EB;
  --blue-soft: #EAF2FE;
  --orange: #F97316;
  --orange-dark: #EA580C;
  --orange-soft: #FFF1E6;
  /* Lightened sibling of the logo's measured teal #069282, for the
     HTML wordmark accent on navy, where the logo teal is too dark
     to read. Contrast against navy #0B3A82 is about 5:1. */
  --teal-light: #2EC4B6;
  --soft-white: #F6F8FB;
  --white: #FFFFFF;
  --muted: #5A6B80;
  --line: #DDE5EE;
  --red: #B42318;
  --red-soft: #FEF3F2;
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(11, 58, 130, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 58, 130, 0.10);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--navy-ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Anchored sections sit below the sticky header when jumped to. */
#split, #story, #how, #rules, #carriers, #pricing, #faq { scroll-margin-top: 84px; }

a { color: var(--green-dark); }
a:hover { color: var(--navy); }

img { max-width: 100%; }

/* ---------- Layout ---------- */

.page { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow-page { max-width: 760px; margin: 0 auto; padding-top: 40px; padding-bottom: 64px; }

/* Full-bleed band inside the centered .page container. */
.band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 0;
}
.band-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.band.soft { background: var(--soft-white); }
.band.dark { background: var(--navy-deep); color: var(--white); }

h1, h2, h3 {
  color: var(--navy);
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
h1 { font-size: 2.1rem; font-weight: 800; }
h2 { font-size: 1.6rem; font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }
.lede { font-size: 1.1rem; color: #33475E; margin: 0 0 20px; }
.centered { text-align: center; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--green-dark);
  margin: 0 0 8px;
}
.eyebrow.centered { text-align: center; }
.section-title { text-align: center; margin-bottom: 8px; }
.section-sub {
  text-align: center;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 32px;
}

/* ---------- Header and footer ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--navy-ink);
}
/* The primary logo is Gifty's supplied horizontal lockup PNG.
   On dark backgrounds the navy wordmark would vanish, so dark
   surfaces use the icon on a white tile plus an HTML wordmark. */
.logo-horizontal { height: 40px; width: auto; display: block; }
.logo-tile {
  background: var(--white);
  border-radius: 10px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-tile img { display: block; }
.wordmark {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  white-space: nowrap;
}
.wordmark-accent { color: var(--teal-light); }

.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-header nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy-ink);
  padding: 6px 2px;
}
.site-header nav a:hover { color: var(--green-dark); }
.site-header nav a.nav-cta {
  color: var(--white);
  background: var(--green-dark);
  border-radius: 999px;
  padding: 6px 16px;
}
.site-header nav a.nav-cta:hover { background: var(--navy); color: var(--white); }

.site-footer {
  background: var(--navy-deep);
  color: #B7C7DB;
  padding: 48px 24px 32px;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}
.footer-brand { max-width: 320px; }
.footer-brand .wordmark { color: var(--white); }
.footer-brand .wordmark-accent { color: var(--teal-light); }
.footer-brand p { margin: 12px 0 0; font-size: 0.95rem; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links strong {
  color: var(--white);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer-links a { color: #B7C7DB; text-decoration: none; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.footer-base {
  max-width: 1080px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
  color: #8CA0B8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--green-dark);
  text-align: center;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.button.primary { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.button.primary:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.button.outline { background: var(--white); color: var(--navy); border-color: var(--navy); }
.button.outline:hover { background: var(--soft-white); }
.button.light { background: var(--white); border-color: var(--white); color: var(--navy-deep); }
.button.light:hover { background: var(--green-soft); border-color: var(--green-soft); }
.button.ghost-light { background: transparent; border-color: var(--white); color: var(--white); }
.button.ghost-light:hover { background: rgba(255, 255, 255, 0.1); }
.button.full { width: 100%; }
.button:disabled { opacity: 0.6; cursor: default; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 28px;
}
.inline-form { display: inline; margin: 0; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding: 48px 0 56px;
}
.hero h1 { font-size: 2.5rem; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 14px; }
.hero-free { font-weight: 600; color: var(--navy); margin: 0 0 20px; }
.clarity-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--soft-white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 20px;
}
.clarity-note .info-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--soft-white);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 13px;
}
.trust-chips .tick { color: var(--green); font-weight: 800; }

.privacy-note {
  border-left: 3px solid var(--green);
  padding-left: 12px;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 12px 0 0;
}

/* Upload card */
.upload-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-md);
}
.upload-card h2 { margin-top: 4px; font-size: 1.35rem; }
.upload-card > p { color: #33475E; margin: 0 0 8px; }
.card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--green-dark);
  margin: 0;
}

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 2px dashed var(--green);
  border-radius: 12px;
  padding: 30px 16px;
  margin: 18px 0;
  cursor: pointer;
  background: var(--soft-white);
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.drop-zone:hover, .drop-zone:focus-within { background: var(--green-soft); border-color: var(--green-dark); }
.drop-zone.drag-over { background: var(--green-soft); border-color: var(--green-dark); border-style: solid; }
.drop-zone svg { color: var(--green); }
.drop-title { font-weight: 700; color: var(--navy); }
.drop-subtitle { color: var(--muted); font-size: 0.9rem; word-break: break-all; }

input[type="file"] { display: none; }

.fine-print { color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; }
.fine-print.centered { text-align: center; }

/* Notices */
.error {
  background: var(--red-soft);
  border: 1px solid #FECDCA;
  color: var(--red);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0;
}
.notice {
  background: var(--green-soft);
  border: 1px solid #BFE8C8;
  color: var(--green-dark);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0;
}

/* Demo banner: the demo runs on sample data, and says so on every step. */
.demo-banner {
  background: var(--navy);
  color: var(--white);
  border-radius: 10px;
  padding: 13px 16px;
  margin: 20px 0;
  font-size: 0.95rem;
}
.demo-banner strong {
  background: var(--green);
  color: var(--navy-deep);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 8px;
}
.demo-banner a { color: var(--green-light); font-weight: 700; }

/* ---------- Story ---------- */

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.story-copy p { color: #33475E; margin: 0 0 14px; }
.story-copy p:last-child { margin-bottom: 0; }
.story-badge {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.story-badge .badge-year {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--green);
  line-height: 1.1;
}
.story-badge .badge-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
}
.story-badge .badge-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}
.story-lockup { width: 240px; max-width: 100%; height: auto; display: block; margin: 0 auto 10px; }
.story-founder { font-size: 0.9rem; color: var(--muted); margin: 0; }
.story-founder strong { color: var(--navy); }

/* ---------- Steps ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}
.step-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--white);
  position: relative;
}
/* Step icons: simple line icons in the brand palette, matching the
   brand board's strip: upload (green), assign (blue), calculate
   (orange), download (green). */
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.step-icon svg { width: 28px; height: 28px; }
.step-icon.green { background: var(--green-soft); color: var(--green-dark); }
.step-icon.blue { background: var(--blue-soft); color: var(--blue-dark); }
.step-icon.orange { background: var(--orange-soft); color: var(--orange-dark); }
.step-card h3 { margin-bottom: 6px; }
.step-card p { margin: 0; color: #33475E; }

/* ---------- Rule cards ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}
.cards article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.cards .number {
  font-weight: 800;
  color: var(--green-dark);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.cards h3 { margin-top: 8px; }
.cards p { margin: 4px 0 0; color: #33475E; }

/* ---------- Carriers ---------- */

.carrier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.carrier-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
}
.carrier-chips .status {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 3px 9px;
}
.carrier-chips .status.live { background: var(--green-soft); color: var(--green-dark); }
.carrier-chips .status.soon { background: #E8EEF1; color: #42566E; }
.carrier-note { text-align: center; color: var(--muted); margin: 20px 0 0; }

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.price-card.featured { border-top: 4px solid var(--green); }
.price-card .plan-name {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-dark);
  margin: 0 0 8px;
}
.price-card .plan-price {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
}
.price-card .plan-price span { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.price-card .plan-note { color: var(--muted); margin: 6px 0 18px; }
.price-card ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.price-card li { display: flex; gap: 10px; align-items: flex-start; color: #33475E; }
.price-card li .tick { color: var(--green); font-weight: 800; flex-shrink: 0; }
.price-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 4px 11px;
}
.price-badge.now { background: var(--green-soft); color: var(--green-dark); }
.price-badge.soon { background: #E8EEF1; color: #42566E; }
.pricing-footnote { text-align: center; color: var(--muted); margin: 24px 0 0; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq-list details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.faq-list summary {
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 1.2rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { margin: 12px 0 0; color: #33475E; }

/* ---------- Final CTA band ---------- */

.cta-band { text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #B7C7DB; max-width: 560px; margin: 0 auto 24px; }
.cta-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 20px;
}
.cta-lockup .wordmark { font-size: 1.7rem; color: var(--white); }
.cta-lockup .wordmark-accent { color: var(--teal-light); }
.cta-lockup .logo-tile { border-radius: 12px; padding: 5px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Stepper (group and results) ---------- */

.stepper {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 32px 0 8px;
  padding: 0;
  counter-reset: step;
}
.stepper li {
  flex: 1;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  padding-top: 34px;
  position: relative;
}
.stepper li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  z-index: 1;
}
.stepper li::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(-50% + 13px);
  right: calc(50% + 13px);
  border-top: 2px solid var(--line);
}
.stepper li:first-child::after { display: none; }
.stepper li.done { color: var(--green-dark); }
.stepper li.done::before {
  content: "\2713";
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}
.stepper li.done::after { border-color: var(--green); }
.stepper li.current::after { border-color: var(--green); }
.stepper li.current { color: var(--navy); }
.stepper li.current::before {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ---------- Group page ---------- */

.group-page, .results-page { padding-top: 8px; padding-bottom: 64px; }
.group-page h2, .results-page h2 { margin-top: 36px; }
.bill-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.bill-summary div {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.bill-summary span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.bill-summary strong { font-size: 1.3rem; color: var(--navy); font-variant-numeric: tabular-nums; }

.hint { color: var(--muted); margin-top: 0; }

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.person-field span { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.person-field input, .lines-table select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #CBD6E4;
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font);
  background: var(--white);
  color: var(--navy-ink);
}
.person-field input:focus, .lines-table select:focus {
  outline: 2px solid var(--green);
  border-color: var(--green);
}

.table-wrap { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th {
  background: var(--navy);
  color: var(--white);
  font-size: 0.88rem;
  padding: 12px 10px;
  text-align: left;
  font-weight: 700;
}
td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--soft-white); }
th.money, td.money { text-align: right; font-variant-numeric: tabular-nums; }
td.center { text-align: center; }
td .device { display: block; font-size: 0.85rem; color: var(--muted); }
td.total-cell { font-weight: 700; color: var(--navy); }
.lines-cell { font-size: 0.85rem; color: #33475E; }
tfoot td { border-top: 2px solid var(--navy); background: var(--green-soft); }

.free-check { width: 20px; height: 20px; accent-color: var(--green); }

.radio-group { display: grid; gap: 12px; }
.radio-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  background: var(--white);
}
.radio-card:hover { background: var(--soft-white); }
.radio-card:has(input:checked) { border-color: var(--green); background: var(--soft-white); }
.radio-card input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; }
.radio-note { display: block; color: var(--muted); font-size: 0.9rem; }

/* ---------- Results page ---------- */

.kpi-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}
.kpi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.kpi-label { display: block; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.kpi-value { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin: 4px 0; font-variant-numeric: tabular-nums; }
.kpi-note { display: block; font-size: 0.85rem; color: var(--muted); }

.rules-list { padding-left: 22px; }
.rules-list li { margin-bottom: 8px; }

/* Reconciliation check: always visible, never implied. A split that
   does not reconcile is refused before it reaches this page. */
.recon-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--green-soft);
  border: 1px solid #BFE8C8;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 24px;
}
.recon-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recon-card strong { display: block; color: var(--green-dark); }
.recon-card span { color: var(--navy-ink); font-variant-numeric: tabular-nums; }

/* ---------- Unsupported ---------- */

.unsupported-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* ---------- Policy ---------- */

.policy { padding: 40px 0 64px; max-width: 760px; margin: 0 auto; }
.policy h2 { margin-top: 28px; }
.policy p, .policy li { line-height: 1.65; }
.policy .updated { color: var(--muted); margin-top: 0; }

/* ---------- Wider screens ---------- */

@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .bill-summary { grid-template-columns: repeat(4, 1fr); }
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .story-grid { grid-template-columns: 1.5fr 1fr; }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 64px 0 72px; }
  .hero h1 { font-size: 3rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.9rem; }
}

@media (max-width: 520px) {
  .site-header nav a.nav-hide-sm { display: none; }
}

@media (max-width: 640px) {
  .site-header { padding: 12px 16px; }
  .site-header nav { gap: 4px 12px; }
  .site-header nav a { font-size: 0.88rem; }
  .page { padding: 0 16px; }
  .band { padding: 48px 0; }
  .band-inner { padding: 0 16px; }
  .hero { padding: 32px 0 40px; }
  .hero h1 { font-size: 2rem; }
  .form-actions { justify-content: stretch; }
  .form-actions .button, .form-actions .inline-form { width: 100%; }
  .form-actions .inline-form .button { width: 100%; }
}