/* ==========================================================================
   Hisabaya — hisabaya.com
   Built on the "stripe" design system (designmd), retinted to the Hisabaya
   palette: warm off-white canvas, deep indigo, one green for positive balances.
   Hand-written. No frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — indigo (retinted from the system's electric indigo to a deeper,
     warmer ink-indigo). Role preserved: the only filled CTA colour. */
  --indigo: #3a33b0;
  --indigo-deep: #2e298f;
  --indigo-press: #221f6b;
  --indigo-soft: #5f57d6;
  --indigo-subdued: #ddd9f8;
  --brand-dark-900: #1b1a4d;

  /* Surface — warm off-white replaces the system's cool near-whites */
  --canvas: #ffffff;
  --canvas-warm: #faf6ef;
  --canvas-soft: #f5f0e6;
  --canvas-cream: #f3e6cd;
  --hairline: #e6dfd2;
  --hairline-strong: #d5cbb9;
  --hairline-input: #c2b9a8;

  /* Ink */
  --ink: #171a3d;
  --ink-secondary: #363c62;
  --ink-mute: #5f6484;
  --on-primary: #ffffff;

  /* Semantic — one green, reserved for positive balances / money in */
  --green: #1c7a4b;
  --green-deep: #145c38;
  --green-soft: #e2f1e8;
  /* Overdue / money out. Kept as a gradient-stop accent, never a button. */
  --ruby: #a9203d;
  --ruby-soft: #f7e5e8;
  /* Gradient-mesh stops only */
  --sherbet: #e2ac6d;
  --lavender: #b7b0ee;

  /* Dark-surface variants (the system's dashboard-track polarity flip) */
  --dark-surface: #232152;
  --dark-hairline: #3b3873;
  --dark-ink-mute: #a8a5d2;
  --dark-green: #62d09b;
  --dark-ruby: #ff8fa3;

  /* Radii — straight from the system */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* Spacing */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-huge: 64px;

  /* Elevation */
  --lift-1: 0 1px 3px rgba(27, 26, 77, 0.09);
  --lift-2: 0 8px 24px rgba(27, 26, 77, 0.10), 0 2px 6px rgba(27, 26, 77, 0.05);

  /* Motion — short, transactional */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 150ms;

  --container: 1200px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas-warm);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  color: var(--ink);
}

/* The system's display tier: thin weight, negative tracking. */
h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
h4 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.008em;
}

p { margin: 0 0 var(--s-lg); }
p:last-child { margin-bottom: 0; }

/* Display headings carry no bottom margin, so give the paragraph that follows
   one its own breathing room rather than setting it on every heading. */
h1 + p, h2 + p, h3 + p, h2 + .lede { margin-top: var(--s-lg); }

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-deep); text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }

strong { font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible,
.cta-band :focus-visible { outline-color: #ffffff; }

.skip-link {
  position: absolute;
  left: var(--s-lg);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brand-dark-900);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 400;
}
.skip-link:focus { top: var(--s-lg); text-decoration: none; color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--s-xl);
}

.band { padding-block: clamp(56px, 7vw, 96px); }
.band--warm { background: var(--canvas-warm); }
.band--soft { background: var(--canvas-soft); }
.band--white { background: var(--canvas); }
.band--tight { padding-block: clamp(40px, 4.5vw, 64px); }

.band-head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 56px); }
.band-head p {
  font-size: 1rem;
  color: var(--ink-secondary);
  max-width: 66ch;
}

.eyebrow {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo-deep);
  background: var(--indigo-subdued);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  margin-bottom: var(--s-lg);
}
.eyebrow--plain {
  background: none;
  padding: 0;
  color: var(--ink-mute);
}
.on-dark .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #cfccf6;
}

.lede {
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink-secondary);
}

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

/* Numeric type — the financial-data signature of this system. */
.num,
table.ledger td.num,
table.ledger th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--indigo);
  color: var(--on-primary);
}
.btn--primary:hover { background: var(--indigo-deep); color: #fff; }
.btn--primary:active { background: var(--indigo-press); }

.btn--secondary {
  background: var(--canvas);
  color: var(--indigo);
  border-color: var(--indigo);
}
.btn--secondary:hover { background: var(--indigo-subdued); color: var(--indigo-deep); }

.btn--ondark {
  background: var(--canvas);
  color: var(--brand-dark-900);
}
.btn--ondark:hover { background: #efeafd; color: var(--indigo-press); }

/* Sits on the gradient-mesh band, so it carries its own dark scrim to keep the
   white label above AA wherever the mesh happens to be light. */
.btn--ghost-dark {
  background: rgba(27, 26, 77, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost-dark:hover { background: rgba(27, 26, 77, 0.8); color: #fff; }

.btn--sm { min-height: 38px; padding: 8px 16px; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--indigo);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  padding-block: var(--s-lg);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__sub {
  display: block;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

.nav__toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
  margin-left: auto;
  list-style: none;
}
.nav__menu a {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 400;
}
.nav__menu a:hover { color: var(--indigo); text-decoration: none; }
.nav__menu a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 0 var(--indigo);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
}

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .nav__toggle { display: inline-flex; }
  .nav__menu,
  .nav__actions { display: none; }
  .nav.is-open .nav__menu,
  .nav.is-open .nav__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    gap: var(--s-xs);
  }
  .nav.is-open .nav__menu {
    margin-top: var(--s-lg);
    padding-top: var(--s-lg);
    border-top: 1px solid var(--hairline);
  }
  .nav.is-open .nav__menu a {
    display: block;
    padding: 10px 2px;
    font-size: 1rem;
  }
  .nav.is-open .nav__actions {
    margin-top: var(--s-md);
    padding-bottom: var(--s-sm);
    gap: var(--s-md);
  }
  .nav.is-open .nav__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Hero + gradient mesh (the system's signature backdrop)
   -------------------------------------------------------------------------- */

/* The gradient mesh: the system's signature atmospheric backdrop. Rendered as
   blurred SVG blobs so the wash has organic edges rather than banded stripes.
   It sits behind the hero and reaches up under the transparent header. */
.mesh {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  z-index: -2;
  opacity: 0.85;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0) 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0) 96%);
}

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 5vw, 72px) clamp(32px, 3.5vw, 56px);
}
.hero .mesh {
  top: -132px;
  height: 660px;
}
@media (max-width: 760px) {
  .hero .mesh { top: -120px; height: 520px; }
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 1020px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 56px;
  }
}

.hero__copy { max-width: 34rem; }
.hero__copy h1 { margin-bottom: var(--s-xl); }
.hero__copy .lede { margin-bottom: var(--s-xl); }

.hero__note {
  margin-top: var(--s-xl);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  letter-spacing: -0.01em;
}

/* Fact strip under the hero. The 1px gap over a hairline background draws the
   rules, so the column count is set explicitly at each breakpoint — an
   auto-fit track would leave a half-empty last row showing as a solid block. */
.factstrip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 620px) { .factstrip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .factstrip { grid-template-columns: repeat(4, 1fr); } }
.factstrip > div {
  background: var(--canvas);
  padding: var(--s-xl);
}
.factstrip dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-sm);
}
.factstrip dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Product-UI mockups (composited, per the system's dashboard track)
   -------------------------------------------------------------------------- */

.mock {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.mock--flat { box-shadow: var(--lift-1); border-radius: var(--r-lg); }

.mock__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: 12px var(--s-lg);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-warm);
}
.mock__dots { display: flex; gap: 5px; flex: none; }
.mock__dots span {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--hairline-strong);
}
.mock__dots span:first-child { background: var(--sherbet); }
.mock__dots span:nth-child(2) { background: var(--lavender); }
.mock__title {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
}
.mock__tag {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mock__body { padding: 18px; }

.mock__caption {
  margin-top: var(--s-md);
  font-size: 0.75rem;
  color: var(--ink-mute);
  letter-spacing: -0.01em;
}

/* Composite: table panel + two small cards, offset like the system's stack */
.composite { display: grid; gap: var(--s-lg); }
.composite__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-lg);
}
@media (min-width: 620px) {
  .composite__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small stat card */
.statcard {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg) var(--s-xl);
  box-shadow: var(--lift-1);
}
.statcard__label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.statcard__value {
  display: block;
  margin-top: 6px;
  font-size: 1.625rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.statcard__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s-sm);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.delta--up { color: var(--green); }
.delta--down { color: var(--ruby); }

.spark { width: 100%; height: 56px; margin-top: var(--s-md); }

/* --------------------------------------------------------------------------
   8. Tables — dense but calm. The signature element.
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.ledger {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.35;
}
table.ledger caption {
  text-align: left;
  padding: 0 0 var(--s-md);
  font-size: 0.75rem;
  color: var(--ink-mute);
  letter-spacing: -0.01em;
}
table.ledger th,
table.ledger td {
  padding: 10px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}
table.ledger thead th {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--hairline-strong);
  background: var(--canvas-warm);
}
table.ledger tbody th {
  font-weight: 400;
  color: var(--ink);
}
table.ledger td { color: var(--ink-secondary); }
table.ledger .num { text-align: right; color: var(--ink); }
table.ledger thead th.num { text-align: right; }
table.ledger tbody tr:hover td,
table.ledger tbody tr:hover th { background: var(--canvas-warm); }
table.ledger tfoot th,
table.ledger tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  padding-top: 12px;
}
table.ledger tfoot tr:first-child th,
table.ledger tfoot tr:first-child td { border-top: 2px solid var(--ink); }
table.ledger tfoot tr + tr th,
table.ledger tfoot tr + tr td { border-top: 1px solid var(--hairline); }

.pos { color: var(--green); }
.neg { color: var(--ruby); }

/* Status chips inside tables */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--paid { background: var(--green-soft); color: var(--green-deep); }
.chip--open { background: var(--indigo-subdued); color: var(--indigo-deep); }
.chip--late { background: var(--ruby-soft); color: var(--ruby); }

/* Dark-surface table (the polarity flip) */
.on-dark table.ledger th,
.on-dark table.ledger td { border-bottom-color: var(--dark-hairline); }
.on-dark table.ledger thead th {
  background: transparent;
  color: var(--dark-ink-mute);
  border-bottom-color: var(--dark-hairline);
}
.on-dark table.ledger tbody th { color: #fff; }
.on-dark table.ledger td { color: #d9d7f0; }
.on-dark table.ledger .num { color: #fff; }
.on-dark table.ledger tbody tr:hover td,
.on-dark table.ledger tbody tr:hover th { background: rgba(255, 255, 255, 0.05); }
.on-dark table.ledger tfoot th,
.on-dark table.ledger tfoot td {
  color: #fff;
  border-top-color: #6d69b5;
}
.on-dark table.ledger tfoot tr + tr th,
.on-dark table.ledger tfoot tr + tr td { border-top-color: var(--dark-hairline); }
.on-dark table.ledger caption { color: var(--dark-ink-mute); }
.on-dark .pos { color: var(--dark-green); }
.on-dark .neg { color: var(--dark-ruby); }
.on-dark .chip--paid { background: rgba(98, 208, 155, 0.16); color: var(--dark-green); }
.on-dark .chip--open { background: rgba(255, 255, 255, 0.12); color: #cfccf6; }
.on-dark .chip--late { background: rgba(255, 143, 163, 0.16); color: var(--dark-ruby); }

/* Drop lower-priority columns on narrow screens, and let the remaining text
   columns wrap so the table fits rather than scrolling far. Numbers and
   document references stay on one line. */
@media (max-width: 560px) {
  table.ledger { min-width: 0; font-size: 0.78125rem; }
  table.ledger th, table.ledger td { padding: 9px 7px; white-space: normal; }
  table.ledger .num, table.ledger .mono { white-space: nowrap; }
  .col-opt { display: none; }
}

/* --------------------------------------------------------------------------
   9. Cards & grids
   -------------------------------------------------------------------------- */

.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-xxl);
}
.card--cream { background: var(--canvas-cream); border-color: #e5d3b0; }

.grid { display: grid; gap: var(--s-xl); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* Feature cards */
.feature {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  box-shadow: var(--lift-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.feature__icon {
  width: 34px; height: 34px;
  margin-bottom: var(--s-lg);
  color: var(--indigo);
}
.feature h3 {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-sm);
}
.feature p {
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  margin: 0;
}
/* Seven cards in a three-up grid leaves an orphan; let the last one run the
   full width and lay out horizontally instead. */
.grid--3 > .feature:last-child:nth-child(7) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .grid--3 > .feature:last-child:nth-child(7) {
    display: grid;
    grid-template-columns: 34px minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--s-xl);
    align-items: start;
  }
  .grid--3 > .feature:last-child:nth-child(7) .feature__icon { margin-bottom: 0; }
  .grid--3 > .feature:last-child:nth-child(7) h3 { margin-bottom: 0; }
}

/* Problem list — a ruled, numbered ledger of costs. Two columns when there's
   room, so the section reads dense rather than sparse. */
.problems {
  list-style: none;
  display: grid;
  gap: 0 var(--s-huge);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.problems li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-lg);
  padding: var(--s-xl) 0;
  border-bottom: 1px solid var(--hairline);
}
.problems .n {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  letter-spacing: 0.04em;
}
.problems h3 {
  font-size: 1.0625rem;
  font-weight: 400;
  margin-bottom: 6px;
}
.problems p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  max-width: 60ch;
}

/* Split section: copy + mockup */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split--flip > *:first-child { order: 2; }
}
.split__copy { max-width: 36rem; }

.ticks { list-style: none; display: grid; gap: var(--s-md); margin-top: var(--s-xl); }
.ticks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-md);
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  align-items: start;
}
.ticks svg { width: 16px; height: 16px; margin-top: 3px; color: var(--green); }
.on-dark .ticks li { color: #d9d7f0; }
.on-dark .ticks svg { color: var(--dark-green); }

/* Steps */
/* Four steps: 1-up, 2-up, then 4-up. Each carries a top rule, so a stray
   third-column orphan would read as a loose line. */
.steps {
  list-style: none;
  display: grid;
  gap: var(--s-xl) var(--s-xxl);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  border-top: 2px solid var(--ink);
  padding-top: var(--s-lg);
}
.steps .n {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-md);
}
.steps h3 {
  font-size: 1.0625rem;
  font-weight: 400;
  margin-bottom: var(--s-sm);
}
.steps p { margin: 0; font-size: 0.9375rem; color: var(--ink-secondary); }

/* --------------------------------------------------------------------------
   10. Dark bands
   -------------------------------------------------------------------------- */

.on-dark {
  background: var(--brand-dark-900);
  color: #fff;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p, .on-dark .lede { color: #cbc9e8; }
.on-dark .band-head p { color: #cbc9e8; }
.on-dark a { color: #b9b4f5; }

.panel-dark {
  background: var(--dark-surface);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.panel-dark .mock__chrome {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: var(--dark-hairline);
}
.panel-dark .mock__title,
.panel-dark .mock__tag { color: var(--dark-ink-mute); }
.panel-dark .mock__dots span { background: #4b478d; }
.panel-dark .mock__dots span:first-child { background: var(--sherbet); }
.panel-dark .mock__dots span:nth-child(2) { background: var(--lavender); }
.panel-dark .mock__body { padding: var(--s-xl); }

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */

/* Three tiers: 3-up, then straight to 1-up. A 2+1 row leaves the third tier
   stranded next to a gap. */
.pricing {
  display: grid;
  gap: var(--s-xl);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 1000px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.tier {
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-xxl);
}
.tier--featured {
  background: var(--brand-dark-900);
  border-color: var(--brand-dark-900);
  color: #fff;
}
.tier__name {
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-xs);
}
.tier--featured .tier__name { color: #fff; }
/* Reserve two lines so the price line sits at the same height in every tier. */
.tier__for {
  font-size: 0.8125rem;
  line-height: 1.4;
  min-height: 2.8em;
  color: var(--ink-mute);
  margin-bottom: var(--s-lg);
}
.tier--featured .tier__for { color: var(--dark-ink-mute); }
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: var(--s-xl);
}
.tier__price b {
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
}
.tier__price span { font-size: 0.8125rem; color: var(--ink-mute); }
.tier--featured .tier__price span { color: var(--dark-ink-mute); }
.tier__list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 var(--s-xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}
.tier--featured .tier__list { border-top-color: var(--dark-hairline); color: #d9d7f0; }
.tier__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.tier__list svg { width: 15px; height: 15px; margin-top: 3px; color: var(--indigo); }
.tier--featured .tier__list svg { color: #9d97ee; }
.tier__cta { margin-top: auto; }
.tier__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--s-md);
  min-height: 1.15em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #cfccf6;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* Empty spacer in the unfeatured tiers so all three name/price rows line up. */
.tier__badge--empty { visibility: hidden; }

.pricing-note {
  margin-top: var(--s-xl);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   12. Credibility
   -------------------------------------------------------------------------- */

/* Same rule-drawing technique as .factstrip, so the same explicit column
   counts — three metrics go one-up or three-up, never two-up plus a gap. */
.metrics {
  display: grid;
  gap: 1px;
  background: var(--dark-hairline);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.metrics > div { background: var(--dark-surface); padding: var(--s-xl); }
.metrics dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-ink-mute);
  margin-bottom: var(--s-md);
}
.metrics dd {
  margin: 0;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
.metrics .hint {
  display: block;
  margin-top: var(--s-md);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-ink-mute);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--brand-dark-900);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band .mesh {
  top: 0;
  height: 100%;
  opacity: 0.38;
  -webkit-mask-image: none;
          mask-image: none;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cbc9e8; }
.cta-band__inner {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }
}
.cta-band__copy { max-width: 46ch; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--canvas-warm);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-huge) var(--s-xxl);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.footer__grid {
  display: grid;
  gap: var(--s-xxl);
  grid-template-columns: 1fr;
}
.footer__brand { grid-column: 1 / -1; max-width: 30rem; }
@media (min-width: 560px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .footer__brand { grid-column: auto; }
}
.footer__brand p {
  margin-top: var(--s-md);
  font-size: 0.8125rem;
  color: var(--ink-mute);
  max-width: 34ch;
}
.footer h2 {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-md);
}
.footer__list { list-style: none; display: grid; gap: 10px; }
.footer__list a { color: var(--ink-mute); }
.footer__list a:hover { color: var(--indigo); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-huge);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem;
}
.footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   15. Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 940px) {
  .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.form-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--lift-1);
}

.field { margin-bottom: var(--s-xl); }
.field:last-of-type { margin-bottom: var(--s-xl); }

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .req { color: var(--ruby); }
.field .hint {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-top: 5px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  background: var(--canvas);
  border: 1px solid var(--hairline-input);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
                    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(58, 51, 176, 0.16);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--ruby); }

.error {
  display: none;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--ruby);
}
.error.is-shown { display: block; }

.field-row {
  display: grid;
  gap: var(--s-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.form-status {
  display: none;
  margin-bottom: var(--s-xl);
  padding: var(--s-lg);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: 0.875rem;
}
.form-status.is-shown { display: block; }
.form-status--ok {
  background: var(--green-soft);
  border-color: #b6ddc7;
  color: var(--green-deep);
}
.form-status--err {
  background: var(--ruby-soft);
  border-color: #e8bfc7;
  color: var(--ruby);
}
.form-status strong { display: block; margin-bottom: 4px; font-weight: 500; }

.aside-card + .aside-card { margin-top: var(--s-xl); }

.contact-list { list-style: none; display: grid; gap: var(--s-lg); }
.contact-list dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.contact-list .val { font-size: 0.9375rem; color: var(--ink); }

.next-steps { list-style: none; display: grid; gap: var(--s-lg); counter-reset: ns; }
.next-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--s-md);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}
.next-steps li::before {
  counter-increment: ns;
  content: counter(ns);
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--indigo-subdued);
  color: var(--indigo-deep);
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.next-steps b { display: block; font-weight: 500; color: var(--ink); }

.minitable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.minitable th,
.minitable td {
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-weight: 400;
}
.minitable tr:last-child th,
.minitable tr:last-child td { border-bottom: 0; }
.minitable td {
  text-align: right;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.minitable th { color: var(--ink); }