/* ============================================================
   Min-IT — Site stylesheet
   Design direction: "Light Tiles (C)" — cream canvas, white 3D
   tiles, single teal accent, editorial typography.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Palette */
  --bg:           #FFFFFF;   /* white canvas (Concept A) */
  --bg-2:         #F7F7F5;   /* trust-strip / footer grey */
  --surface:      #FFFFFF;   /* tiles */
  --surface-2:    #F4F5F4;   /* lending-system panel grey */
  --ink:          #14201D;   /* primary ink */
  --ink-2:        #2E3A36;   /* secondary ink */
  --ink-3:        #5A6963;   /* tertiary / body */
  --ink-4:        #8A9590;   /* muted / labels */
  --line:         #E5DFD3;   /* hairlines */
  --line-2:       #D8D1C2;
  --teal:         #0B7B6A;   /* primary accent */
  --teal-2:       #0FB9A1;   /* highlight */
  --teal-50:      #E6F4F1;   /* tinted backgrounds */
  --teal-100:     #C6E6DF;
  --teal-ink:     #064A40;
  --warn:         #B8521A;
  --danger:       #9B2D24;

  /* Typography */
  --font-sans: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale (clamp-based, fluid 360–1440) */
  --fs-eyebrow:  0.75rem;      /* 12px label */
  --fs-body-sm:  0.875rem;
  --fs-body:     1rem;
  --fs-body-lg:  1.0625rem;
  --fs-lead:     clamp(1.125rem, 0.94rem + 0.55vw, 1.375rem);
  --fs-h4:       clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-h3:       clamp(1.375rem, 1.18rem + 0.7vw, 1.75rem);
  --fs-h2:       clamp(1.875rem, 1.4rem + 1.8vw, 3rem);
  --fs-h1:       clamp(2.5rem, 1.55rem + 3.8vw, 4.75rem);
  --fs-display:  clamp(3rem, 1.7rem + 5vw, 6rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadows — engineered for the 3D-tile look */
  --shadow-tile:
    0 1px 0 rgba(20, 32, 29, 0.04),
    0 1px 2px rgba(20, 32, 29, 0.04),
    0 6px 16px -4px rgba(20, 32, 29, 0.06),
    0 24px 40px -16px rgba(20, 32, 29, 0.08);
  --shadow-tile-hover:
    0 1px 0 rgba(20, 32, 29, 0.05),
    0 2px 4px rgba(20, 32, 29, 0.06),
    0 12px 28px -6px rgba(20, 32, 29, 0.10),
    0 36px 60px -20px rgba(20, 32, 29, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-soft: 0 4px 12px -4px rgba(20,32,29,0.08);

  /* Layout */
  --container: 1240px;
  --container-wide: 1360px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 3vw, 2rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "ss01", "cv11", "calt", "kern";
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--teal-100); color: var(--teal-ink); }

/* Focus ring — single, consistent */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.028em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.024em; line-height: 1.06; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.text-balance { text-wrap: balance; }

/* Accent: "...end to end." style — italic teal tail */
.accent-italic {
  font-style: italic;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.03em;
}

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.section {
  padding-block: clamp(3.5rem, 6vw, 6.5rem);
  position: relative;
}
.section-sm { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section-lg { padding-block: clamp(5rem, 9vw, 9rem); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head--split {
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-12);
  max-width: 100%;
}
.section-head--split > .head-text { max-width: 640px; }
.section-head--split > .head-aside { max-width: 360px; color: var(--ink-3); font-size: var(--fs-body-lg); }
@media (max-width: 760px) {
  .section-head--split { flex-direction: column; align-items: stretch; }
}

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-lg { gap: var(--space-6); }
.stack-xl { gap: var(--space-10); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.005em;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px -6px rgba(11,123,106,0.45);
}
.btn-primary:hover { background: var(--teal-ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink); }

.btn-light {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.btn-light:hover { box-shadow: var(--shadow-tile); transform: translateY(-1px); }

.btn-link {
  padding: 0;
  background: none;
  color: var(--teal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn-link::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.btn-link:hover::after { transform: translateX(3px); }

.btn-lg { padding: 1.05rem 1.6rem; font-size: 1rem; }

/* ---------- 6. Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 72px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-logo img {
  display: block;
  width: auto;
  height: 40px;          /* fits the 72px header with comfortable padding */
  max-width: 160px;
  object-fit: contain;
}
.site-footer .nav-logo img { height: 44px; max-width: 180px; }
@media (max-width: 480px) {
  .nav-logo img { height: 32px; max-width: 120px; }
}
/* Legacy chip mark — retained for any future use (e.g. favicon, OG, error pages) */
.nav-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 6px -2px rgba(11,123,106,0.55);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: var(--space-4);
}
.nav-links a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.5rem 0.1rem;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--teal); border-radius: 2px;
}
.nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-signin {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-signin:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-left: auto;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 920px) {
  .nav { gap: var(--space-3); }
  /* layout order on mobile: logo .. CTA .. burger .. links(panel) */
  .nav-logo { margin-right: auto; }
  .nav-cta { margin-left: 0; order: 2; }
  .nav-toggle { display: inline-flex; margin-left: 0; order: 3; }
  .nav-links {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    padding: var(--space-6) var(--gutter);
    margin: 0;
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
    visibility: hidden;
    gap: var(--space-2);
    order: 4;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  /* When the panel slides down to open, override the inset translation so it sits
     flush below the header, and reveal it. */
  .nav-links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--dur-base) var(--ease-out),
                visibility 0s linear 0s;
  }
  .nav-links a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav-links a:last-of-type { border-bottom: 0; }
  .nav-cta .nav-signin { display: none; }
}

@media (max-width: 560px) {
  .nav .btn-primary { padding: 0.7rem 1.1rem; font-size: 0.85rem; }
}
@media (max-width: 360px) {
  .nav .btn-primary { padding: 0.55rem 0.85rem; font-size: 0.78rem; }
  .nav-logo img { height: 28px; max-width: 100px; }
}

/* ---------- 7. Tile system (the heart of direction C) ---------- */
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow: var(--shadow-tile);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tile::before {
  /* the subtle top highlight that sells the 3D effect */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-inset);
  pointer-events: none;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-tile-hover); }
.tile-flat { box-shadow: var(--shadow-soft); }
.tile-flat:hover { transform: none; }
.tile-feature { padding: clamp(1.5rem, 2.4vw, 2rem); }
.tile-hero {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 3px solid var(--teal);
}

.tile-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-50);
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--space-3);
}
.tile-eyebrow--ghost { background: var(--surface-2); color: var(--ink-3); }

.tile-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal);
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal);
  margin-bottom: var(--space-4);
}
.tile-icon svg { width: 20px; height: 20px; }

.tile-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.tile-body  { color: var(--ink-3); font-size: 0.95rem; line-height: 1.55; }

.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: 0.97rem;
  color: var(--ink-2);
  min-width: 0;
}
.checklist li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/contain no-repeat;
}
.checklist--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.checklist--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
.checklist--cols-2 li,
.checklist--cols-3 li {
  /* re-establish the per-item icon+text grid inside multi-column lists */
  grid-column: auto;
}
@media (max-width: 760px) {
  .checklist--cols-2, .checklist--cols-3 { grid-template-columns: 1fr; }
}

/* Pill chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
}
.chip--teal { background: var(--teal-50); color: var(--teal); border-color: transparent; }
.chip--ghost { background: transparent; }

/* Status badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.badge--teal { background: var(--teal-50); color: var(--teal); }
.badge--ink  { background: var(--ink); color: #fff; }

/* ---------- 8. Hero (direction C) ---------- */
.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero-grid > * { min-width: 0; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero-eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.hero h1 { margin-top: var(--space-5); }
.hero-lead { margin-top: var(--space-5); max-width: 32rem; }
.hero-cta { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-compliance {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.hero-compliance span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-compliance svg { width: 14px; height: 14px; color: var(--teal); }

/* ============================================================
   8.b  Bold/Confident DARK hero variant (homepage only)
   Applied via  <section class="hero hero--dark">  on / and
   <body class="has-dark-hero">. The header turns transparent
   while the user is sitting in the hero band, then reverts to
   the cream-pill style as soon as the page scrolls.
   ============================================================ */
:root {
  --hero-dark-bg:    #0E1714;   /* near-black, warm green undertone to match teal */
  --hero-dark-bg-2:  #16221E;
  --hero-dark-line:  rgba(255,255,255,0.08);
  --hero-dark-line-2: rgba(255,255,255,0.14);
  --hero-dark-ink:    #F2EFE6;  /* cream type */
  --hero-dark-ink-2:  #BBC4BF;
  --hero-dark-ink-3:  #8EA09A;
}

.hero--dark {
  position: relative;
  isolation: isolate;
  background: var(--hero-dark-bg);
  color: var(--hero-dark-ink);
  padding-top: calc(clamp(5rem, 8vw, 8rem) + 73px);
  padding-bottom: clamp(4rem, 6vw, 7rem);
  margin-top: -73px;
  overflow: hidden;  /* clip the teal glow/grid texture horizontally */
}
/* Use a fixed-position dark strip behind the transparent sticky header so the
   cream body never leaks through while the user is inside the dark hero. Once
   the user scrolls past the hero, the .is-scrolled cream-pill header sits on
   top of this strip (z 50 > 40) and visually covers it entirely. */
body.has-dark-hero::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 73px;
  background: var(--hero-dark-bg);
  z-index: 40;
  pointer-events: none;
}

.hero--dark .hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
}
/* Subtle radial teal glow top-right */
.hero--dark .hero-bg__glow {
  position: absolute;
  top: -20%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(15,185,161,0.20), rgba(15,185,161,0) 70%);
  filter: blur(20px);
}
/* Faint pin-grid pattern */
.hero--dark .hero-bg__grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* Type & inline elements inside the dark hero */
.hero--dark h1 { color: var(--hero-dark-ink); letter-spacing: -0.035em; }
.hero--dark .accent-italic { color: var(--teal-2); }
.hero--dark .hero-lead { color: var(--hero-dark-ink-2); }
.hero--dark .hero-compliance { color: var(--hero-dark-ink-3); }
.hero--dark .hero-compliance svg { color: var(--teal-2); }
.hero--dark .hero-eyebrow {
  background: rgba(255,255,255,0.05);
  border-color: var(--hero-dark-line-2);
  color: var(--hero-dark-ink-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero--dark .hero-eyebrow::before {
  background: var(--teal-2);
  box-shadow: 0 0 0 3px rgba(15,185,161,0.18);
}

/* CTA: primary teal keeps brand, ghost flips to light-on-dark */
.hero--dark .btn-ghost {
  background: transparent;
  color: var(--hero-dark-ink);
  border-color: var(--hero-dark-line-2);
}
.hero--dark .btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--hero-dark-ink-3);
  color: #fff;
}
.hero--dark .btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,
              0 12px 28px -10px rgba(11,123,106,0.55),
              0 0 0 1px rgba(15,185,161,0.25);
}

/* Hero-visual cards turn into dark glass tiles on the dark hero */
.hero--dark .hv-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%);
  border-color: var(--hero-dark-line-2);
  color: var(--hero-dark-ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 40px -22px rgba(0,0,0,0.65),
    0 4px 12px -6px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero--dark .hv-card::after { box-shadow: none; }
.hero--dark .hv-card h4 { color: var(--hero-dark-ink); }
.hero--dark .hv-card p,
.hero--dark .hv-card div[style*="color:var(--ink-3)"],
.hero--dark .hv-card div[style*="color: var(--ink-3)"] {
  color: var(--hero-dark-ink-3) !important;
}
.hero--dark .hv-label { color: var(--teal-2); }
.hero--dark .hv-stat strong { color: var(--hero-dark-ink); }
.hero--dark .hv-stat small { color: var(--teal-2); }
.hero--dark .hv-list li { color: var(--hero-dark-ink-2); }
.hero--dark .hv-list li.is-active { color: #fff; }
.hero--dark .hv-list li.is-done::before { background: var(--hero-dark-ink-3); }
.hero--dark .hv-chart i {
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
}

/* ---- Header treatment while sitting on a dark hero ---- */
body.has-dark-hero .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-links a {
  color: rgba(255,255,255,0.78);
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-links a:hover,
body.has-dark-hero .site-header:not(.is-scrolled) .nav-links a[aria-current="page"] {
  color: #fff;
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-signin {
  color: rgba(255,255,255,0.85);
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-signin:hover { color: #fff; }
body.has-dark-hero .site-header:not(.is-scrolled) .nav-cta .btn-primary {
  background: var(--teal-2);
  color: #06231F;
  border: 1px solid transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 12px 24px -10px rgba(15,185,161,0.55);
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-cta .btn-primary:hover {
  background: #34d1b9;
}
body.has-dark-hero .site-header:not(.is-scrolled) .nav-toggle span,
body.has-dark-hero .site-header:not(.is-scrolled) .nav-toggle span::before,
body.has-dark-hero .site-header:not(.is-scrolled) .nav-toggle span::after {
  background: #fff;
}

/* Logo swap: light variant shows in dark hero, dark variant on scroll.
   Specificity needs to beat earlier `.nav-logo img { display: block; }`. */
.nav-logo img.nav-logo__light { display: none; }
body.has-dark-hero .site-header:not(.is-scrolled) .nav-logo img.nav-logo__dark  { display: none; }
body.has-dark-hero .site-header:not(.is-scrolled) .nav-logo img.nav-logo__light { display: block; }

/* Hero visual — the floating tile collage */
.hero-visual {
  position: relative;
  min-height: 460px;
}
.hv-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-tile);
  padding: 1rem 1.1rem;
  font-size: 0.85rem;
}
.hv-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-inset);
  pointer-events: none;
}
.hv-card h4 { font-size: 0.95rem; margin-bottom: 0.2rem; letter-spacing: -0.015em; }
.hv-card p  { color: var(--ink-3); font-size: 0.85rem; }
.hv-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.3rem;
}

/* Floating animation (very subtle) */
@keyframes float-a { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes float-b { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes float-c { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* --- DESKTOP COLLAGE (>= 1100px): artful absolute layout --- */
@media (min-width: 1100px) {
  .hero-visual { min-height: 520px; }
  .hv-1 { top:  0%;   left:  0%;  width: 54%; animation: float-a 8s var(--ease-out) infinite; }
  .hv-2 { top: 18%;   right: 0%;  width: 56%; animation: float-b 10s var(--ease-out) infinite; }
  .hv-3 { top: 54%;   left:  0%;  width: 52%; animation: float-c 12s var(--ease-out) infinite; z-index: 2; }
  .hv-4 { bottom: 0%; right: 0%;  width: 46%; animation: float-a 9s var(--ease-out) infinite; z-index: 3; }
}

/* --- BELOW 1100px: clean 2-up grid, no overlap --- */
@media (max-width: 1099.98px) {
  .hero-visual {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
  }
  .hv-card {
    position: static;
    width: auto;
    animation: none;
  }
}

/* --- BELOW 520px: single column stack --- */
@media (max-width: 520px) {
  .hero-visual {
    grid-template-columns: 1fr;
  }
}

/* Spark chart inside hero card */
.hv-chart {
  display: flex; align-items: end; gap: 2px; height: 36px;
  margin-top: 0.6rem;
}
.hv-chart i {
  flex: 1; background: linear-gradient(180deg, var(--teal) 0%, var(--teal-2) 100%);
  border-radius: 2px; display: block; min-width: 3px;
}

/* Hero stat row inside card */
.hv-stat { display: flex; align-items: baseline; gap: 0.5rem; }
.hv-stat strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.hv-stat small { color: var(--teal); font-weight: 600; font-size: 0.75rem; }

/* Hardship workflow card list */
.hv-list { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.hv-list li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--ink-2);
  list-style: none;
}
.hv-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
}
.hv-list li.is-active { color: var(--ink); }
.hv-list li.is-done::before { background: var(--ink-4); }

/* ---------- 9. Clients row ---------- */
.clients {
  padding-block: var(--space-10);
  border-block: 1px solid var(--line);
}
.clients-inner {
  display: grid;
  grid-template-columns: minmax(160px, 220px) repeat(6, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}
.clients-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.client-mark {
  height: 32px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
@media (max-width: 960px) {
  .clients-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .clients-label { grid-column: 1 / -1; text-align: center; }
}

/* ---------- 10. Stats row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2vw, 2rem);
  box-shadow: var(--shadow-tile);
  position: relative;
}
.stat::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: var(--shadow-inset);
  pointer-events: none;
}
.stat-num {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-label {
  margin-top: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.stat-sub {
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}

/* ---------- 11. Platform / product cards ---------- */
.products {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-6);
}
.products .tile-hero {
  grid-row: 1 / span 2;
}
@media (max-width: 1024px) {
  .products { grid-template-columns: 1fr 1fr; }
  .products .tile-hero { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .products { grid-template-columns: 1fr; }
}

.product-card-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--teal-50);
  color: var(--teal);
  margin-bottom: var(--space-4);
}
.product-card-mark svg { width: 22px; height: 22px; }

/* ---------- 12. Audience strip ---------- */
.audience-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1024px) { .audience-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .audience-strip { grid-template-columns: 1fr; } }
.audience-card { padding: var(--space-6); }
.audience-mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--teal-50); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}

/* ---------- 13. Compliance grid ---------- */
.compliance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1024px) { .compliance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .compliance-grid { grid-template-columns: 1fr; } }

.compliance-card .compliance-mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--teal-50); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.compliance-card .badge { margin-top: var(--space-4); }

/* ---------- 14. Integrations strip ---------- */
.integrations {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: var(--space-8);
  align-items: center;
  box-shadow: var(--shadow-tile);
  position: relative;
}
.integrations::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: var(--shadow-inset);
  pointer-events: none;
}
.integrations-label .eyebrow { color: var(--ink-3); }
.integrations-label h3 { margin-top: 0.4rem; font-size: 1.05rem; letter-spacing: -0.015em; }
.integrations-list {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
@media (max-width: 700px) { .integrations { grid-template-columns: 1fr; } }

/* ---------- 15. Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1024px) { .quotes { grid-template-columns: 1fr; } }

.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2vw, 2rem);
  position: relative;
  box-shadow: var(--shadow-tile);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.6rem; left: 1.2rem;
  font-size: 4rem; line-height: 1; color: var(--teal-50);
  font-family: Georgia, serif;
  font-weight: 700;
}
.quote-body {
  position: relative;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-6);
  padding-top: 1.4rem;
}
.quote-meta strong { display: block; font-size: 0.95rem; font-weight: 600; }
.quote-meta span  { display: block; font-size: 0.85rem; color: var(--ink-3); margin-top: 0.15rem; }

/* ---------- 16. CTA panel ---------- */
.cta-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: center;
  box-shadow: var(--shadow-tile);
  position: relative;
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: var(--shadow-inset);
  pointer-events: none;
}
.cta-panel h2 { margin-bottom: var(--space-3); }
.cta-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.cta-actions .btn { justify-content: center; }
@media (max-width: 760px) {
  .cta-panel { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- 17. Lifecycle strip ---------- */
.lifecycle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2vw, 2rem);
  box-shadow: var(--shadow-tile);
  position: relative;
}
.lifecycle::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: var(--shadow-inset);
  pointer-events: none;
}
.lifecycle-steps {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (max-width: 900px) { .lifecycle-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .lifecycle-steps { grid-template-columns: repeat(2, 1fr); } }

.lifecycle-step {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-4);
  text-align: center;
}
.lifecycle-step .num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--teal);
}
.lifecycle-step .name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

/* ---------- 18. Pricing-specific ---------- */
.process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr; } }

.scope-list { display: grid; gap: var(--space-4); }
.scope-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-5);
  list-style: none;
  box-shadow: var(--shadow-soft);
}
.scope-list h4 { margin-bottom: 0.25rem; }
.scope-list p { color: var(--ink-3); font-size: 0.92rem; }

/* FAQ */
.faq {
  display: grid;
  gap: var(--space-3);
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink-3);
  transition: transform var(--dur-fast);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 1.25rem 1.25rem; color: var(--ink-3); font-size: 0.95rem; line-height: 1.55; }

/* ---------- 19. Forms ---------- */
.form { display: grid; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-help { font-size: 0.82rem; color: var(--ink-4); }

.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  font-weight: 500;
  transition: all var(--dur-fast);
}
.radio-group input { position: absolute; opacity: 0; pointer-events: none; }
.radio-group label:has(input:checked) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ---------- 20. Footer ---------- */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  margin-top: clamp(4rem, 8vw, 8rem);
  padding-block: var(--space-16) var(--space-10);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { max-width: 320px; }
.footer-brand p { color: var(--ink-3); font-size: 0.92rem; margin-top: var(--space-3); }
.footer-flags {
  display: flex; gap: var(--space-2); margin-top: var(--space-4);
}
.footer-flags .chip { font-size: 0.7rem; padding: 0.25rem 0.6rem; letter-spacing: 0.06em; }

.footer-col h5 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--space-4);
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.footer-col a { color: var(--ink-2); font-size: 0.94rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--teal); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-4);
  font-size: 0.85rem;
}
.footer-trust {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
}
.footer-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-trust svg { width: 14px; height: 14px; color: var(--teal); }

/* ---------- 21. Animations / scroll reveal (progressive enhancement) ----------
   Sections are visible by default. Only when JS adds .js to <html> does the
   opacity-0 initial state apply, and only for users who don't prefer reduced
   motion. This ensures the site is fully functional (and visible) with JS
   disabled, AI scrapers, search-engine renderers, and screenshot tools. */
.reveal { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-stagger > * { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }

html.js:not(.reduce-motion) .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}
html.js:not(.reduce-motion) .reveal-stagger:not(.is-in) > * {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }

/* View transitions (Chromium) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 280ms; }

/* ---------- 22. Decorative background flourish ---------- */
.bg-flourish {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-flourish::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(11,123,106,0.10), transparent 70%);
}
.bg-flourish::after {
  content: "";
  position: absolute;
  top: 200px;
  left: -300px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(11,123,106,0.06), transparent 70%);
}

/* ---------- 23. Case study cards ---------- */
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; } }
.case-card { padding: 0; overflow: hidden; }
.case-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--teal-50), var(--surface));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-4);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
}
.case-body { padding: clamp(1.25rem, 2vw, 1.75rem); }
.case-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.case-stat {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.case-stat strong { color: var(--teal); font-weight: 600; font-size: 0.9rem; }

/* ---------- 24. Page hero (inner) ---------- */
.page-hero {
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { margin-top: var(--space-5); max-width: 50ch; }
.page-hero .hero-cta { margin-top: var(--space-8); }

/* ---------- 25. Timeline ---------- */
.timeline { display: grid; gap: 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-year { font-weight: 700; color: var(--teal); letter-spacing: -0.01em; font-size: 1.1rem; }
.timeline-text { color: var(--ink-2); }
@media (max-width: 640px) {
  .timeline-item { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- 26. Misc utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 1rem; padding: 0.75rem 1.25rem;
  background: var(--ink); color: #fff; border-radius: var(--r-md); z-index: 100;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 1rem; }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* ---------- 27. Print ---------- */
@media print {
  .site-header, .site-footer, .cta-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .tile, .stat, .quote { box-shadow: none !important; border: 1px solid #ccc; }
}

/* ============================================================
   28. CONCEPT A — Bold Confidence (homepage end-to-end)
   ============================================================ */

/* HERO ----------------------------------------------------- */
.hero--bold { text-align: left; }
.hero--bold .hero-bold {
  max-width: 940px;
  padding-block: clamp(0rem, 2vw, 2rem);
}
.hero--bold .hero-eyebrow {
  background: transparent;
  border-color: var(--hero-dark-line-2);
  color: var(--teal-2);
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  padding: 0.5rem 1rem;
}
.hero--bold .hero-eyebrow::before {
  background: var(--teal-2);
  box-shadow: 0 0 0 4px rgba(15,185,161,0.20);
}
.hero--bold h1 {
  margin-top: var(--space-6);
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  max-width: 18ch;
}
.hero--bold h1 .accent-italic {
  color: var(--teal-2);
  font-style: italic;
  font-weight: 600;
  display: inline-block;
}
.hero--bold .hero-lead {
  margin-top: var(--space-6);
  max-width: 56ch;
  color: var(--hero-dark-ink-2);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}
.hero--bold .hero-cta { margin-top: var(--space-8); }
.hero--bold .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.hero--bold .btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.5);
}

/* STATS — pipe-divided inline row ------------------------- */
.section--stats { padding-block: clamp(3rem, 5vw, 5rem); }
.section-head--center { text-align: center; max-width: 60ch; margin-inline: auto; }
.section-head--center h2 { margin-inline: auto; }

.stats--inline {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: transparent;
}
.stats--inline .stat {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0 var(--space-6);
  text-align: left;
  position: relative;
}
.stats--inline .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 6%;
  bottom: 6%;
  width: 1px;
  background: var(--line-2);
}
.stats--inline .stat-num {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stats--inline .stat-label {
  margin-top: var(--space-3);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.stats--inline .stat-sub {
  margin-top: var(--space-1);
  font-size: 0.82rem;
  color: var(--ink-3);
}
@media (max-width: 880px) {
  .stats--inline { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--space-10); }
  .stats--inline .stat:nth-child(2n+1)::before { display: none; }
  .stats--inline .stat:nth-child(3)::before { display: none; }  /* the start of row 2 also has no left divider */
}
@media (max-width: 480px) {
  .stats--inline { grid-template-columns: 1fr; }
  .stats--inline .stat::before { display: none; }
  .stats--inline .stat { padding: 0; border-bottom: 1px solid var(--line); padding-bottom: var(--space-6); }
  .stats--inline .stat:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* LENDING SYSTEM — 2-col panel ---------------------------- */
.section--panel { padding-block: 0; }
.section--panel > .container { padding-block: clamp(3rem, 5vw, 5rem); }
.section--panel { background: var(--surface-2); }  /* cool grey panel (Concept A) */
.lending-system {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.lending-system__copy h2 { margin-top: var(--space-5); max-width: 16ch; }
.lending-system__copy p  { margin-top: var(--space-5); max-width: 38ch; color: var(--ink-2); }
.checklist--two-col {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  list-style: none;
  padding: 0;
}
.checklist--two-col li {
  /* override the .checklist li grid behaviour from earlier in the stylesheet */
  display: block;
  position: relative;
  padding-left: 1.4rem;
  padding-block: 0;
  border-bottom: 0;
  font-size: 0.98rem;
  color: var(--ink);
}
.checklist--two-col li > span { display: inline; min-width: 0; }
.checklist--two-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  margin: 0;
  -webkit-mask: none; mask: none;
  box-shadow: 0 0 0 3px var(--teal-50);
}
.btn-ink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 0.85rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: var(--space-8);
}
.btn-ink:hover { background: #000; color: #fff; }

/* Product dashboard mockup -------------------------------- */
.product-mockup {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20,32,29,0.25), 0 6px 16px -8px rgba(20,32,29,0.12);
}
.product-mockup__chrome {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.product-mockup__chrome span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #d8d2c2;
  display: inline-block;
}
.product-mockup__chrome span:nth-child(1) { background: #E96A6A; }
.product-mockup__chrome span:nth-child(2) { background: #EFC04F; }
.product-mockup__chrome span:nth-child(3) { background: #4FBA7A; }
.product-mockup__chrome em {
  font-style: normal;
  margin-left: 0.6rem;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.product-mockup__body { padding: 1rem 1.2rem 1.2rem; }
.pm-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.pm-row--head { /* keeps flex */ }
.pm-row--list {
  display: block;             /* override the flex so head + rows stack vertically */
  margin-bottom: 0;
}
.pm-pill {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: var(--teal-50);
  color: var(--teal);
  border-radius: var(--r-pill);
}
.pm-meta { font-size: 0.78rem; color: var(--ink-3); }
.pm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.pm-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.85rem;
}
.pm-card__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 0.2rem;
}
.pm-card__num {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pm-card__num--warn { color: var(--warn); }
.pm-card__sub { font-size: 0.72rem; color: var(--ink-3); margin-top: 0.15rem; }
.pm-spark {
  display: flex; align-items: end; gap: 2px;
  height: 22px; margin-top: 0.35rem;
}
.pm-spark i {
  flex: 1;
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-2) 100%);
  border-radius: 2px;
  display: block;
  min-width: 3px;
}
.pm-list-head, .pm-list-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1.4fr) 96px 84px;
  gap: 0.6rem;
  font-size: 0.78rem;
  padding: 0.5rem 0;
  align-items: center;
}
.pm-list-head > *, .pm-list-row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-list-head {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  color: var(--ink-3);
  font-weight: 600;
}
.pm-list-row + .pm-list-row { border-top: 1px solid var(--line); }
.pm-mono { font-family: var(--font-mono); color: var(--ink-2); font-size: 0.72rem; }
.pm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.7rem;
  width: max-content;
}
.pm-tag--ok   { background: var(--teal-50); color: var(--teal); }
.pm-tag--warn { background: #FBEFDC; color: var(--warn); }
.pm-list-row .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

@media (max-width: 960px) {
  .lending-system { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .checklist--two-col { grid-template-columns: 1fr; }
  .pm-list-head, .pm-list-row { grid-template-columns: 70px minmax(0, 1fr) 80px; }
  .pm-list-head .r, .pm-list-row .r { display: none; }
}

/* WHY GRID — 3-col with top rule -------------------------- */
.why-grid {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.why-item {
  border-top: 1px solid var(--ink);
  padding: var(--space-6) var(--space-6) 0 0;
}
.why-item + .why-item { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.why-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: var(--space-5);
}
.why-item h3 { font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.4rem); letter-spacing: -0.02em; }
.why-item p  { margin-top: var(--space-3); color: var(--ink-2); }
@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item + .why-item { padding-left: 0; border-left: 0; }
  .why-item { padding-right: 0; padding-bottom: var(--space-6); }
}

/* TRUST STRIP --------------------------------------------- */
.trust-strip {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  padding-block: var(--space-8);
}
.trust-strip__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}
.trust-strip__label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-3);
}
.trust-strip__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-2);
}
.trust-pill svg { width: 14px; height: 14px; color: var(--teal); }

/* HERO QUOTE ---------------------------------------------- */
.hero-quote {
  margin: var(--space-6) auto 0;
  max-width: 60rem;
  text-align: center;
}
.hero-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-weight: 600;
  max-width: 26ch;
  margin: 0 auto;
}
.hero-quote mark {
  background: rgba(15,185,161,0.18);
  color: var(--teal-ink);
  padding: 0 0.2em;
  border-radius: 4px;
}
.hero-quote figcaption {
  margin-top: var(--space-8);
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.hero-quote figcaption strong { color: var(--ink); font-weight: 600; }
.hero-quote figcaption span { color: var(--ink-3); font-size: 0.9rem; }
.hero-quote__dots {
  margin-top: var(--space-6);
  display: flex; gap: 0.4rem; justify-content: center;
}
.hero-quote__dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-2);
}
.hero-quote__dots span.is-active { background: var(--ink); width: 18px; border-radius: 4px; }

/* CTA BOLD — solid blue/teal panel ------------------------ */
.cta-bold {
  background: #155CC2;  /* the wireframe's deep blue */
  color: #fff;
  padding-block: clamp(3rem, 5vw, 5rem);
  margin-top: var(--space-16);
}
.cta-bold__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.cta-bold__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-4);
}
.cta-bold h2 {
  color: #fff;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.cta-bold p {
  color: rgba(255,255,255,0.78);
  margin-top: var(--space-4);
  max-width: 50ch;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
}
.cta-bold__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-cta-primary {
  background: #fff;
  color: #133F8E;
  border: 1px solid #fff;
}
.btn-cta-primary:hover { background: #f4f0ff; color: #0F2C68; }
.btn-cta-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-cta-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
@media (max-width: 800px) {
  .cta-bold__inner { grid-template-columns: 1fr; }
}

/* On Concept A pages, hide the original .hero-grid behaviour and let the
   bold hero use a free-form internal layout. */
.hero--bold .hero-grid { display: block; }

/* ============================================================
   29. CONCEPT A — Inner pages (dark page-hero + content)
   ============================================================ */

/* Dark inner-page hero (shorter than homepage hero) */
.page-hero--dark {
  position: relative;
  background: var(--hero-dark-bg);
  color: var(--hero-dark-ink);
  padding-top: clamp(4.5rem, 7vw, 7rem);   /* extra top room because header is transparent over it */
  padding-bottom: clamp(3rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h));    /* tuck under the transparent header */
}
.page-hero--dark > .container { position: relative; z-index: 2; }
.page-hero--dark::before {
  /* subtle teal radial glow, top-right (matches homepage hero) */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 95% 10%, rgba(15,185,161,0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(15,185,161,0.06), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.page-hero--dark .eyebrow {
  background: transparent;
  border: 1px solid var(--hero-dark-line-2);
  color: var(--teal-2);
  padding: 0.4rem 0.9rem;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}
.page-hero--dark .eyebrow::before {
  background: var(--teal-2);
  box-shadow: 0 0 0 3px rgba(15,185,161,0.18);
}
.page-hero--dark h1 {
  color: #fff;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 22ch;
  margin-top: var(--space-6);
}
.page-hero--dark h1 .accent-italic {
  color: var(--teal-2);
  font-style: italic;
  font-weight: 600;
}
.page-hero--dark .lead {
  color: var(--hero-dark-ink-2);
  max-width: 56ch;
  margin-top: var(--space-6);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.55;
}
.page-hero--dark .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.page-hero--dark .btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.5);
}
.page-hero--dark .bg-flourish { display: none; }

/* Concept-A "section--lift" — a content section that sits at top of light area
   directly under the dark hero, with extra top padding so it breathes */
.section--lift > .container { padding-top: clamp(3rem, 5vw, 5rem); }

/* Concept-A tile reset for inner-page grids — flat, no 3D, with hairline */
.tile--flat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
  padding: var(--space-6) var(--space-6) var(--space-7);
}
.tile--flat:hover { transform: none; box-shadow: 0 2px 0 var(--line); }
.tile--flat .tile-icon { color: var(--teal); }

/* Lending-system style 2-col panel: re-use .section--panel + .lending-system */
/* (already styled above) */

/* Numbered why-grid is already styled above as .why-grid */

/* Section eyebrow stacked above a wide centered headline */
.section-head--center .eyebrow { display: inline-block; }

/* A muted spec table for Pricing / API specs */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-8);
  font-size: 0.95rem;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.spec-table tr:last-child td { border-bottom: 1px solid var(--ink); }
.spec-table strong { color: var(--ink); }

/* Pricing tier cards in Concept A style */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.tier--featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tier--featured h3, .tier--featured .tier-price { color: #fff; }
.tier--featured .tier-feat li { color: rgba(255,255,255,0.78); }
.tier--featured .tier-feat li::before { background: var(--teal-2); box-shadow: 0 0 0 3px rgba(15,185,161,0.18); }
.tier-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}
.tier--featured .tier-eyebrow { color: var(--teal-2); }
.tier h3 { font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.7rem); letter-spacing: -0.02em; }
.tier-price {
  margin-top: var(--space-6);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.tier-price span { font-size: 0.95rem; color: var(--ink-3); font-weight: 500; }
.tier--featured .tier-price span { color: rgba(255,255,255,0.6); }
.tier-feat {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
  flex: 1;
}
.tier-feat li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.tier-feat li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.tier .btn { margin-top: var(--space-8); }
@media (max-width: 880px) { .tier-grid { grid-template-columns: 1fr; } }

/* Customer case-study cards (concept A) */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.case {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}
.case-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--teal-ink);
}
.case h3 { margin-top: var(--space-4); font-size: 1.4rem; letter-spacing: -0.02em; }
.case p  { margin-top: var(--space-4); color: var(--ink-2); }
.case-meta {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.case-meta strong { color: var(--ink); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
@media (max-width: 720px) { .case-grid { grid-template-columns: 1fr; } }

/* Big quote row for Customers page */
.big-quote {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-8);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  text-align: center;
}
.big-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto;
}
.big-quote mark {
  background: rgba(15,185,161,0.20);
  color: var(--teal-ink);
  padding: 0 0.2em;
  border-radius: 4px;
}
.big-quote figcaption {
  margin-top: var(--space-6);
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* Contact split layout (Concept A) */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-split { grid-template-columns: 1fr; } }
.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-8);
}
.contact-form label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}
.contact-form > * + * { margin-top: var(--space-5); }
.contact-form .btn { margin-top: var(--space-7); width: 100%; justify-content: center; }
.contact-side dl { display: grid; grid-template-columns: 110px 1fr; gap: 0.5rem 1.2rem; margin: 0; }
.contact-side dt { color: var(--ink-3); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.contact-side dd { margin: 0; color: var(--ink); }

/* Lifecycle pill row, Concept-A styled */
.lifecycle-steps { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; margin-top: var(--space-8); }
.lifecycle-step {
  border-top: 1px solid var(--ink);
  padding-top: var(--space-5);
  padding-right: var(--space-4);
}
.lifecycle-step .num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-3); }
.lifecycle-step .name { margin-top: var(--space-3); font-weight: 600; color: var(--ink); }
@media (max-width: 880px) { .lifecycle-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
@media (max-width: 480px) { .lifecycle-steps { grid-template-columns: repeat(2, 1fr); } }