:root {
    --slate: #eef1f3;
    --panel: #ffffff;
    --ink: #152033;
    --ink-2: #4a5566;
    --rule: #d6dce3;
    --paid: #1f8a5b;
    --paid-bg: #e4f3ea;
    --late: #b7411f;
    --late-bg: #f9e8e1;
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--slate);
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.55;
    font-feature-settings: "tnum" 1;
  }
  a { color: inherit; }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--paid); outline-offset: 3px; border-radius: 4px; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

  header.top {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 28px 0 0;
  }
  .brand { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; text-decoration: none; }
  .brand span { color: var(--ink-2); font-weight: 400; }
  nav.top a { text-decoration: none; color: var(--ink-2); margin-left: 22px; font-size: 15px; }
  nav.top a:hover { color: var(--ink); }
  @media (max-width: 640px) { nav.top { display: none; } }

  .hero {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start;
    padding: 36px 0 64px;
  }
  @media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 32px; padding: 28px 0 48px; } }
  h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 22px;
  }
  .lede { font-size: 1.2rem; color: var(--ink-2); max-width: 34em; margin: 0 0 30px; }
  .lede + .lede { margin-top: -12px; margin-bottom: 14px; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .btn {
    display: inline-block; padding: 14px 22px; border-radius: 6px; text-decoration: none; font-weight: 600;
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
  }
  .btn:hover { background: #0e1626; }
  .btn.quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
  .btn.quiet:hover { border-color: var(--ink); }
  .fine { color: var(--ink-2); font-size: 15px; margin-top: 14px; }

  /* The ledger: the one memorable element */
  .ledger {
    background: var(--panel); border: 1px solid var(--rule); border-radius: 10px;
    padding: 18px 20px 14px; box-shadow: 0 1px 0 rgba(21,32,51,.04);
  }
  .ledger-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px;
  }
  .ledger-head strong { font-weight: 600; font-size: 15px; }
  .ledger-head span { color: var(--ink-2); font-size: 14px; }
  .row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px;
  }
  .row:last-child { border-bottom: 0; }
  .row .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row .who small { display: block; color: var(--ink-2); font-size: 13px; }
  .row .amt { font-weight: 500; }
  .tag {
    display: inline-block; min-width: 8.5em; text-align: center; padding: 4px 10px; border-radius: 999px;
    font-size: 13px; font-weight: 500; background: var(--late-bg); color: var(--late);
    transition: background .5s, color .5s;
  }
  .row.paid .tag { background: var(--paid-bg); color: var(--paid); }
  .row.paid .amt { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
  .ledger-foot { display: flex; justify-content: space-between; padding-top: 12px; font-size: 14px; color: var(--ink-2); }
  .ledger-foot b { color: var(--ink); font-weight: 600; }

  section { padding: 64px 0; border-top: 1px solid var(--rule); }
  h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; margin: 0 0 14px; }
  .intro { color: var(--ink-2); font-size: 1.1rem; max-width: 38em; margin: 0 0 36px; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  @media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

  ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  @media (max-width: 760px) { ol.steps { grid-template-columns: 1fr; } }
  ol.steps li { counter-increment: s; padding-top: 16px; border-top: 2px solid var(--ink); }
  ol.steps li::before { content: counter(s); display: block; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
  ol.steps h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600; }
  ol.steps p { margin: 0; color: var(--ink-2); font-size: 16px; }

  ul.plain { list-style: none; padding: 0; margin: 0; }
  ul.plain li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  ul.plain li:first-child { padding-top: 0; }
  ul.plain li:last-child { border-bottom: 0; }
  ul.plain b { display: block; font-weight: 600; margin-bottom: 3px; }
  ul.plain span { color: var(--ink-2); }

  table { width: 100%; border-collapse: collapse; font-size: 16px; }
  th, td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
  th { font-weight: 600; color: var(--ink-2); font-size: 14px; }
  td:first-child { font-weight: 500; width: 30%; }
  td.status { white-space: nowrap; color: var(--ink-2); width: 22%; }
  td.status.now { color: var(--paid); font-weight: 500; }
  @media (max-width: 640px) {
    table, thead, tbody, tr, th, td { display: block; width: auto; }
    thead { display: none; }
    tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
    td { padding: 2px 0; border: 0; }
    td.status { padding-top: 6px; }
  }

  .callout {
    background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 26px 28px;
  }
  .callout p { margin: 0; }
  .callout p + p { margin-top: 12px; }

  .start { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-bottom: 36px; }
  @media (max-width: 760px) { .start { grid-template-columns: 1fr; } }
  .start b { display: block; font-weight: 600; margin-bottom: 6px; }
  .start p { margin: 0; color: var(--ink-2); }

  footer { padding: 40px 0 56px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 15px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  footer a { text-decoration: none; }
  footer a:hover { text-decoration: underline; }

  /* Page header */
  nav.top a.current { color: var(--ink); font-weight: 500; }
  .page-hero { padding: 64px 0 48px; }
  .hero > div:first-child { padding-top: 8px; }
  @media (min-width: 861px) { .hero { min-height: 663px; } }
  .page-hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); max-width: 16em; }
  .page-hero .lede { max-width: 36em; }
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } }
  .tier { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 24px; }
  .tier h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 600; }
  .tier .fits { color: var(--ink-2); font-size: 15px; margin: 0 0 16px; min-height: 3.2em; }
  .tier ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
  .tier li { margin: 6px 0; }
  .crosslink { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
  .crosslink p { margin: 0; color: var(--ink-2); }
  .crosslink b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; }

  /* Services: before/after panel */
  .ba { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px 10px; box-shadow: 0 1px 0 rgba(21,32,51,.04); font-size: 15px; }
  .ba-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .ba-head strong { font-weight: 600; }
  .ba-head span { color: var(--ink-2); font-size: 14px; }
  .ba-cols, .ba-row { display: grid; grid-template-columns: 1fr 92px 92px; gap: 12px; align-items: center; }
  .ba-cols { padding: 10px 0 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
  .ba-cols span:not(:first-child), .ba-row span:not(:first-child) { text-align: right; }
  .ba-row { padding: 10px 0; border-top: 1px solid var(--rule); }
  .ba-row .k { color: var(--ink); }
  .ba-row .bad { color: var(--late); }
  .ba-row .good { color: var(--paid); font-weight: 600; }
  .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
  @media (max-width: 640px) { .grid4 { grid-template-columns: 1fr; } }
  .grid4 .cell { padding-top: 14px; border-top: 2px solid var(--ink); }
  .grid4 b { display: block; font-weight: 600; margin-bottom: 6px; }
  .grid4 p { margin: 0; color: var(--ink-2); font-size: 16px; }
  .chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .chips li { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); font-size: 15px; }
  .btn.inline { display: inline-block; margin-top: 10px; padding: 9px 14px; font-size: 14px; }
  /* Services: one close sequence */
  .close-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px 14px; box-shadow: 0 1px 0 rgba(21,32,51,.04); font-size: 13px; }
  .cc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .cc-head strong { display: block; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.15; }
  .cc-head span { color: var(--ink-2); font-size: 13px; }
  .cc-big { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--paid); line-height: 1; white-space: nowrap; min-height: 1em; }
  .cc-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--rule); }
  .cc-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; color: var(--ink-2); }
  .cc-label b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .cc-label.small { margin: 8px 0 0; font-size: 12px; }
  #diff { color: var(--late); } #diff.zero { color: var(--paid); }
  #pct, #recCount { color: var(--paid); }
  .recon { list-style: none; margin: 0; padding: 0; }
  .recon li { display: grid; grid-template-columns: 1fr auto 12px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; font-size: 12.5px; }
  .recon li:last-child { border-bottom: 0; }
  .recon li b { font-weight: 500; color: var(--ink); }
  .recon li i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--rule); display: inline-block; transition: background .3s, border-color .3s; }
  .recon li.ok i { background: var(--paid); border-color: var(--paid); }
  .recon li.ok { color: var(--ink); }
  .bar { height: 6px; background: var(--slate); border-radius: 999px; overflow: hidden; margin: 2px 0 10px; }
  .bar span { display: block; height: 100%; width: 0; background: var(--paid); border-radius: 999px; }
  .close { list-style: none; margin: 0; padding: 0; }
  .close li { padding: 4px 0 4px 20px; position: relative; color: var(--ink-2); font-size: 12.5px; }
  .close li::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--rule); transition: background .3s, border-color .3s; }
  .close li.ok { color: var(--ink); } .close li.ok::before { background: var(--paid); border-color: var(--paid); }
  @media (max-width: 420px) { .cc-steps { grid-template-columns: 1fr; } }
  .report { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .hbars { display: grid; gap: 5px; }
  .hgroup { font-size: 11.5px; color: var(--ink-2); font-weight: 600; margin-top: 4px; }
  .hrow, .hhead { display: grid; grid-template-columns: 104px 60px 60px 1fr; gap: 10px; align-items: center; font-size: 12.5px; }
  .hhead b { font-weight: 500; font-size: 11px; color: var(--ink-2); text-align: center; }
  .hrow span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hrow b { font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); }
  .hrow b.bud { color: var(--ink-2); font-weight: 400; }
  .hrow .v { position: relative; height: 16px; }
  .hrow .v i { position: absolute; top: 5px; height: 6px; width: 0; border-radius: 999px; background: var(--ink); }
  .hrow .v i.pos { left: 50%; }
  .hrow .v i.neg { right: 50%; }
  .hrow .v i.zero { display: none; }
  .hrow .v .vtxt { position: absolute; top: 1px; font-size: 11px; font-style: normal; color: var(--ink-2); white-space: nowrap; }
  .hrow .v .vtxt.zero { left: calc(50% + 6px); }
  .hhead .vlab { display: flex; justify-content: center; font-size: 11px; font-weight: 500; color: var(--ink-2); font-style: normal; }
  .hhead .vlab em { font-style: normal; }
  .hrow b[data-v] { opacity: 0; transition: opacity .45s ease; }
  .hrow b[data-v].show { opacity: 1; }
  .hrow .v .vtxt { opacity: 0; transition: opacity .5s ease; }
  .hrow .v .vtxt.show { opacity: 1; }
  .hrow .v .vtxt.pos { color: var(--paid); }
  .hrow .v .vtxt.neg { color: var(--late); }
  .hrow .v i.pos { background: var(--paid); }
  .hrow .v i.neg { background: var(--late); }
  /* Phones: the centred bar chart doesn't fit, so variance becomes a plain right-aligned figure */
  @media (max-width: 560px) {
    .hrow, .hhead { grid-template-columns: minmax(0, 1fr) 56px 56px 58px; gap: 6px; font-size: 12px; }
    .hhead .vlab { justify-content: flex-end; }
    .hrow .v { display: flex; justify-content: flex-end; align-items: center; height: auto; }
    .hrow .v i { display: none; }
    .hrow .v .vtxt, .hrow .v .vtxt.zero { position: static; left: auto !important; right: auto !important; font-size: 12px; font-variant-numeric: tabular-nums; }
  }
  /* Home */
  body.home { display: block; }
  .home-wrap { min-height: 100vh; display: flex; flex-direction: column; max-width: 1180px; margin: 0 auto; padding: 28px 28px 24px; }
  .home-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); letter-spacing: .01em; }
  .home-hero { padding: 9vh 0 6vh; }
  .home-hero h1 { font-size: clamp(3rem, 9vw, 7.2rem); line-height: .92; letter-spacing: -0.045em; font-weight: 600; margin: 0 0 26px; }
  .home-hero p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 30em; margin: 0; }
  .doors2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; }
  @media (max-width: 720px) { .doors2 { grid-template-columns: 1fr; } .home-hero { padding: 7vh 0 5vh; } }
  .door { display: flex; flex-direction: column; min-height: 240px; padding: 22px 24px 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); text-decoration: none; color: var(--ink); transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
  .door:hover, .door:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
  .door-kicker { font-size: 13px; font-weight: 500; color: var(--ink-2); transition: color .25s; }
  .door:hover .door-kicker, .door:focus-visible .door-kicker { color: rgba(255,255,255,.7); }
  .door-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 14px 0 12px; }
  .door-copy { font-size: 15px; color: var(--ink-2); max-width: 30em; transition: color .25s; }
  .door:hover .door-copy, .door:focus-visible .door-copy { color: rgba(255,255,255,.78); }
  .door-go { margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); transition: text-decoration-color .25s; }
  .door:hover .door-go, .door:focus-visible .door-go { text-decoration-color: rgba(255,255,255,.6); }
  .home-foot { display: flex; justify-content: space-between; padding-top: 22px; font-size: 13px; color: var(--ink-2); }
  @media (prefers-reduced-motion: reduce) { .door, .door * { transition: none; } .door:hover { transform: none; } }
  /* Login */
  .login-wrap { display: grid; place-items: center; padding: 48px 24px 72px; min-height: 60vh; }
  .login { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 28px 28px 24px; box-shadow: 0 1px 0 rgba(21,32,51,.04); }
  .login h1 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 8px; }
  .login-sub { color: var(--ink-2); font-size: 15px; margin: 0 0 22px; }
  .login label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 14px 0 6px; }
  .login input { width: 100%; padding: 11px 12px; font: inherit; font-size: 15px; border: 1px solid var(--rule); border-radius: 6px; background: var(--slate); color: var(--ink); }
  .login input:focus-visible { outline: 3px solid var(--paid); outline-offset: 1px; border-color: var(--paid); }
  .login .btn { width: 100%; margin-top: 20px; text-align: center; }
  .login .btn[disabled], .login input[disabled] { opacity: .6; cursor: not-allowed; }
  .login-note { font-size: 13px; color: var(--ink-2); margin: 16px 0 0; }
  .login-error { margin: 0 0 6px; padding: 10px 12px; border-radius: 6px; background: var(--late-bg); color: var(--late); font-size: 14px; }