/* ==========================================================================
   Heron, warm redesign (branch website-redesign-2)

   Design read: a services landing page for practice owners and billing
   managers, with a warm, friendly, colorful language. Colors are Heron's
   brand palette from the main branch: ivory canvas, teal ink, mint and
   aqua, the heron blues from the mark, and sun as the one warm note.
   Each of the five services owns one palette color, so color doubles as
   wayfinding.

   Dials: DESIGN_VARIANCE 8, MOTION_INTENSITY 6, VISUAL_DENSITY 4.

   Shape rule: buttons, chips and tags are full pills. Cards and blocks are
   28px. Inner panels are 16px. Nothing else.
   ========================================================================== */

/* Bricolage Grotesque's f has a heavy curled hook that reads oddly at
   display sizes and it ships no alternate. This face supplies ONLY the
   letter f (unicode-range U+0066) from Figtree, listed ahead of Bricolage
   in --display, so every other letter stays Bricolage. It points at the
   same Figtree file the page already loads for body text, so it costs no
   extra download. */
@font-face {
  font-family: "Heron F";
  src: url("https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0066;
}

:root {
  color-scheme: light;

  /* Heron brand palette (main branch) */
  --cream: #FFFFF0;
  --white: #FFFFFF;
  --mint: #E9FFF4;
  --aqua: #C7FFF3;
  --sky: #A2EDF2;
  --blue: #5B8FC7;
  --blue-deep: #3F6FA8;
  --blue-ink: #2E4F72;
  --blue-soft: #DCEBFA;
  --sun: #FFD79A;
  --line-mint: #DCEFE9;
  --line-strong: #B7E2DA;
  --line-blue: #C6DDF3;

  /* Service colors: underpayments sun, denied claims aqua, prior auths
     blue-soft, eligibility sky, backlog A/R sage.
     Lighter steps of the palette, for chips and soft fills: */
  --sun-soft: #FFF2DB;
  --blue-softer: #EEF5FD;
  --sky-soft: #DDF8FA;
  --sage: #B7E2DA;
  --sage-soft: #DCEFE9;

  /* Canvas: ivory, mint for alternate bands, white for cards */
  --paper: var(--cream);
  --paper-2: var(--mint);
  --card: var(--white);

  /* Sticker edges: main's soft mint offset edge. Colored blocks override
     --edge with a deeper shade of their own fill. */
  --edge: var(--line-strong);

  /* Main's wave. --wave-up is main's footer curve (filled below the curve,
     for an edge that rises out of the section above). --wave-down is the
     same curve flipped and mirrored (filled above it, for a bottom edge
     that flows down into the next section). */
  --wave-h: 46px;
  --wave-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M0 28 C 180 8, 360 46, 540 32 C 720 18, 900 6, 1080 18 C 1260 30, 1350 36, 1440 26 L1440 46 L0 46 Z'/%3E%3C/svg%3E");
  --wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath d='M1440 18 C 1260 38, 1080 0, 900 14 C 720 28, 540 40, 360 28 C 180 16, 90 10, 0 20 L0 0 L1440 0 Z'/%3E%3C/svg%3E");

  /* Ink: Heron teal ink, never black. ink-3 is a step darker than main's
     #7D97A3 so small notes pass 4.5:1 on ivory and mint. */
  --ink: #17323F;
  --ink-2: #4B6675;
  --ink-3: #577180;
  --line: var(--line-mint);
  --line-2: var(--line-strong);

  /* Semantic */
  --good: #2F7A3A;
  --warn: #9A5A12;

  /* Shadows tinted with teal ink, not black */
  --shadow-sm: 0 1px 2px rgb(23 50 63 / 0.06);
  --shadow-md: 0 2px 4px rgb(23 50 63 / 0.04), 0 18px 36px -18px rgb(23 50 63 / 0.28);
  --glow: 0 18px 40px -24px rgb(23 50 63 / 0.28);

  /* Type */
  --display: "Heron F", "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 44px);
  --nav-h: 72px;
  --r-block: 28px;
  --r-inner: 16px;
  --section: clamp(80px, 11vw, 140px);

  /* Motion: taste-skill fluid curve, plus a friendly overshoot for pops */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
main { flex: 1 0 auto; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--aqua); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 300ms var(--ease);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Text for screen readers only (for example "opens in a new tab") */
.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;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display, .h2, .h3 {
  font-family: var(--display);
  color: var(--ink);
  font-optical-sizing: auto;
  text-wrap: balance;
}
.display {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 750;
}
.h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 750;
}
.h3 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}
.body { color: var(--ink-2); text-wrap: pretty; }

/* The one eyebrow style: a soft pill, used sparingly */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink);
}
.badge .icon { width: 16px; height: 16px; color: var(--blue-deep); }

/* Highlighted words: main's treatment, heron blue on an aqua underlay */
.mark {
  color: var(--blue-deep);
  background-image: linear-gradient(to top, var(--aqua) 0 34%, transparent 34%);
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons. Pressed state is instant and physical.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 200ms ease;
}
.btn .icon { width: 1.1em; height: 1.1em; transition: transform 400ms var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

/* Primary: main's heron-blue button on a deeper blue offset edge.
   Uses blue-deep rather than main's #5B8FC7 so white text clears 4.5:1. */
.btn-primary {
  background: var(--blue-deep);
  color: var(--white);
  box-shadow: 0 4px 0 var(--blue-ink);
  transform: translateY(-2px);
}
.btn-primary:hover { background: var(--blue-ink); transform: translateY(-3px); box-shadow: 0 5px 0 color-mix(in oklab, var(--blue-ink) 70%, var(--ink)); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--blue-ink); }

/* Ink: for use on bright blocks */
.btn-ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 0 rgb(23 50 63 / 0.35);
}
.btn-ink:hover { background: var(--blue-ink); }
.btn-ink:active { transform: translateY(2px); box-shadow: none; }

/* Secondary: main's white button on a mint edge, mint on hover */
.btn-ghost {
  color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--line-strong), 0 4px 0 var(--line-strong);
}
.btn-ghost:hover { background: var(--mint); }
.btn-ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line-strong); }

.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.btn-sm.btn-primary { box-shadow: 0 3px 0 var(--blue-ink); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 750;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--blue);
}
.link .icon { width: 1em; height: 1em; transition: transform 400ms var(--ease); }
.link:hover .icon { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .icon, .link .icon { transition: none; }
}

/* --------------------------------------------------------------------------
   Announcement bar + navigation
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--blue-ink);
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 600;
}
.topbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px var(--gutter);
  text-align: center;
}
.topbar .icon { width: 16px; height: 16px; color: var(--sun); }
.topbar u { text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  transition: box-shadow 250ms ease, background-color 250ms ease;
}
.nav.scrolled {
  background: rgb(255 255 240 / 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
.nav-bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
.brand img { width: 38px; height: auto; transition: transform 500ms var(--ease-pop); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color 200ms ease, color 200ms ease;
}
.nav-links a:hover { background: var(--paper-2); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-signin { padding: 8px 12px; font-weight: 650; color: var(--ink-2); }
.nav-signin:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--edge);
}
.nav-toggle span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 400ms var(--ease);
}
.nav-toggle span:first-child { top: 19px; }
.nav-toggle span:last-child { top: 25px; }
.nav.open .nav-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
.nav-sheet { display: none; }

@media (max-width: 960px) {
  .nav-links, .nav-signin { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: inline-block; }
  .nav-sheet {
    display: block;
    overflow: hidden;
    max-height: 0;
    background: var(--paper);
    transition: max-height 500ms var(--ease);
  }
  .nav.open { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .nav.open .nav-sheet { max-height: 85vh; }
  .nav-sheet ul { display: grid; gap: 8px; padding: 8px var(--gutter) 28px; }
  .nav-sheet li { opacity: 0; transform: translateY(-10px); transition: opacity 250ms ease, transform 450ms var(--ease); }
  .nav.open .nav-sheet li { opacity: 1; transform: none; }
  .nav.open .nav-sheet li:nth-child(2) { transition-delay: 40ms; }
  .nav.open .nav-sheet li:nth-child(3) { transition-delay: 80ms; }
  .nav.open .nav-sheet li:nth-child(4) { transition-delay: 120ms; }
  .nav.open .nav-sheet li:nth-child(5) { transition-delay: 160ms; }
  .nav.open .nav-sheet li:nth-child(6) { transition-delay: 200ms; }
  .nav-sheet a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-radius: var(--r-inner);
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .nav-sheet li:nth-child(1) a { background: var(--sun-soft); }
  .nav-sheet li:nth-child(2) a { background: var(--mint); }
  .nav-sheet li:nth-child(3) a { background: var(--blue-softer); }
  .nav-sheet li:nth-child(4) a { background: var(--sky-soft); }
  .nav-sheet li:nth-child(5) a { background: var(--sage-soft); }
  .nav-sheet li:nth-child(6) a { font-family: var(--body); font-size: 1.125rem; font-weight: 650; color: var(--ink-2); }
}
@media (max-width: 440px) {
  .nav-actions .btn-sm { padding: 0 14px; }
  .brand { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   Footer: main's aqua, entered through main's wave
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  background: var(--aqua);
  color: var(--ink-2);
  padding: clamp(56px, 7vw, 88px) 0 32px;
  font-size: 0.9375rem;
}

/* The wave from main: the same 1440x46 curve, rising out of the page into
   the aqua footer. Drawn as a mask on the footer itself, so every page gets
   it from this one rule and it always matches the footer color. */
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px); /* 1px overlap so no seam shows at any zoom */
  height: var(--wave-h);
  background: var(--aqua);
  -webkit-mask: var(--wave-up) 0 0 / 100% 100% no-repeat;
  mask: var(--wave-up) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.footer-grid {
  display: grid;
  /* Resources gets extra width so full article titles sit on one line */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 36px;
}
.footer .brand { color: var(--ink); }
.footer-tag {
  margin-top: 16px;
  max-width: 19em;
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 650;
  color: var(--ink);
}
/* HIPAA badge, as on main's footer */
.footer-badge { display: block; height: 72px; width: auto; margin-top: 24px; }
.footer h2 { font-size: 0.875rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; transition: color 200ms ease; }
.footer-col a:hover { color: var(--ink); }
/* "All resources" closes the list as a link out, not as another article */
.footer-col .footer-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--blue-deep); }
.footer-col .footer-more .icon { width: 1em; height: 1em; transition: transform 400ms var(--ease); }
.footer-col .footer-more:hover { color: var(--blue-ink); }
.footer-col .footer-more:hover .icon { transform: translateX(3px); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  font-size: 0.875rem;
  color: var(--ink-2);
}
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.85fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* Full article titles get the whole row on phones */
  .footer-grid > [aria-labelledby="f-resources"] { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Reveal on scroll. Hidden only when JS runs; hero never depends on it.
   -------------------------------------------------------------------------- */

html.js .rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 900ms var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .rv.in { opacity: 1; transform: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 900ms var(--ease) both; animation-delay: calc(var(--d, 0) * 100ms + 60ms); }

@media (prefers-reduced-motion: reduce) {
  html.js .rv { transform: none; transition: opacity 200ms ease; }
  .rise { animation: none; }
  .nav-sheet, .nav-sheet li, .nav-toggle span, .brand img { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Hero: copy left, the claim journey with Heron at every stop right
   -------------------------------------------------------------------------- */

.hero { padding: clamp(40px, 7vh, 88px) 0 clamp(64px, 9vw, 112px); position: relative; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero .badge { margin-bottom: 26px; }
.hero .display { font-size: clamp(2.75rem, 5.6vw, 5rem); margin-bottom: 24px; }
.hero .lead { margin-bottom: 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* The hero visual: a claim's journey with Heron at every stop.
   The heron leads, says where it steps in, then five stops follow in
   revenue-cycle order (each in its service color) and end in a stamp.
   On load the path draws down and the stops pop on in sequence, so the
   story reads once, top to bottom. CSS only: the hero never waits on JS. */

.journey {
  --col: 128px;                       /* width of the rail column */
  --sun-edge: color-mix(in oklab, var(--sun) 72%, var(--ink));
  position: relative;
  width: min(100%, 520px);
  justify-self: center;
}

.j-head { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.j-sun {
  position: relative;
  flex: none;
  display: grid;
  place-items: end center;
  width: var(--col);
  height: var(--col);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFEACB, var(--sun) 58%, #F6C77F);
  box-shadow: inset 0 0 0 2px var(--sun-edge), 0 4px 0 var(--sun-edge);
}
/* Centered on the bird's visual center of mass, not its image box: the
   artwork's centroid sits at 45.6% across and 53.6% down, so the image is
   anchored at the circle's center and shifted by exactly that much. */
.j-heron {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  translate: -45.6% -53.6%;
  filter: drop-shadow(0 6px 6px rgb(23 50 63 / 0.18));
  transform-origin: 50% 90%;
}

.bubble {
  position: relative;
  padding: 14px 20px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--line-strong), 0 4px 0 var(--line-strong);
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  rotate: -2deg;
}
/* Speech tail pointing back at the heron */
.bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 2px solid var(--line-strong);
  border-top-color: transparent;
  border-right-color: transparent;
  transform: translateY(-50%) rotate(45deg);
}

/* The rail: a dashed path that a solid heron-blue line draws over */
.j-stops { position: relative; display: grid; gap: 14px; }
.j-stops::before,
.j-stops::after {
  content: "";
  position: absolute;
  left: calc(var(--col) / 2 - 1.5px);
  top: -22px;
  bottom: -34px;
  width: 3px;
}
.j-stops::before { border-left: 3px dashed var(--line-strong); }
.j-stops::after { background: var(--blue); border-radius: 3px; transform-origin: top; }

.j-stop { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); align-items: center; }
.j-node {
  --node-edge: color-mix(in oklab, var(--c) 70%, var(--ink));
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 2px var(--node-edge), 0 3px 0 var(--node-edge);
}
.j-node .icon { width: 24px; height: 24px; }
.j-card {
  justify-self: start;
  margin-left: var(--off, 0px);
  --card-edge: color-mix(in oklab, var(--c) 62%, var(--ink));
  padding: 13px 22px 14px;
  border-radius: 20px;
  background: var(--cs, var(--white));
  box-shadow: inset 0 0 0 2px var(--card-edge), 0 4px 0 var(--card-edge);
  rotate: var(--r, -1deg);
}
.j-stop:nth-child(even) .j-card { --off: 30px; --r: 1.2deg; }
.j-when { display: block; font-size: 0.875rem; font-weight: 650; color: var(--ink-2); }
.j-what {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.j-end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0 calc(var(--col) / 2 - 30px);
  padding: 9px 20px 9px 12px;
  border-radius: 999px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--sun-edge), 0 4px 0 var(--sun-edge);
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  rotate: -4deg;
}
.j-check {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--white);
}
.j-check .icon { width: 18px; height: 18px; }

.spark { position: absolute; color: var(--blue); pointer-events: none; }
.spark .icon { width: 100%; height: 100%; }
.spark-a { width: 30px; height: 30px; top: -6px; right: 6%; }
.spark-b { width: 26px; height: 26px; bottom: 8px; left: calc(var(--col) / 2 + 170px); color: var(--blue-deep); }

/* Story in motion: heron hops in, speaks, the path draws, stops pop on,
   the stamp lands. Once, on load. */
@keyframes grow { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes hop { 0% { opacity: 0; transform: translateY(16px); } 60% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.6) rotate(8deg); } to { opacity: 1; transform: none; } }
.j-sun { animation: grow 800ms var(--ease) backwards 80ms; }
.j-heron { animation: hop 900ms var(--ease) backwards 250ms; }
.bubble { animation: pop 600ms var(--ease-pop) backwards 520ms; }
.j-stops::after { animation: draw 1450ms cubic-bezier(0.45, 0, 0.3, 1) backwards 700ms; }
.j-node, .j-card { animation: pop 560ms var(--ease-pop) backwards; animation-delay: calc(820ms + var(--i) * 260ms); }
.j-card { animation-delay: calc(900ms + var(--i) * 260ms); }
.j-end { animation: stamp 520ms var(--ease-pop) backwards 2200ms; }
.spark { animation: grow 600ms var(--ease-pop) backwards 2400ms; }

/* A little wiggle when you point at a stop, and the heron perks up */
@media (hover: hover) {
  .j-node { transition: transform 400ms var(--ease-pop); }
  .j-stop:hover .j-node { transform: rotate(-12deg) scale(1.1); }
  .j-heron { transition: transform 500ms var(--ease-pop); }
  .j-sun:hover .j-heron { transform: rotate(-6deg) translateY(-4px); }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .journey { width: min(100%, 520px); justify-self: start; margin-top: 8px; }
}
@media (max-width: 520px) {
  .journey { --col: 84px; }
  .j-head { gap: 14px; }
  .j-node { width: 42px; height: 42px; }
  .j-node .icon { width: 19px; height: 19px; }
  .j-card { padding: 10px 14px 11px; }
  .j-stop:nth-child(even) .j-card { --off: 10px; }
  .j-when { font-size: 0.8125rem; }
  .j-what { font-size: 1.05rem; }
  .spark-b { left: auto; right: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .j-sun, .j-heron, .bubble, .j-stops::after, .j-node, .j-card, .j-end, .spark { animation: none; }
  .j-node, .j-heron { transition: none; }
}

/* --------------------------------------------------------------------------
   Backers
   -------------------------------------------------------------------------- */

.backers { padding-bottom: clamp(48px, 7vw, 80px); }
/* No container: the label and logos sit straight on the page, quiet and
   monochrome until hovered */
.backers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 52px;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink-3);
}
.backers-row img { height: 48px; width: auto; filter: grayscale(1) contrast(1.1); opacity: 0.78; transition: filter 250ms ease, opacity 250ms ease; }
.backers-row img.lvlup { height: 52px; border-radius: 10px; }
.backers-row img:hover { filter: none; opacity: 1; }
@media (max-width: 600px) { .backers-row { gap: 14px 28px; } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section); }
.section-mint { background: var(--mint); }

/* Wave edges: the band itself is masked, so its top rises out of the
   section above on main's curve and its bottom flows down into the next
   one. Decorations inside the band are cut to the same curve. */
.section-mint, .audit {
  -webkit-mask:
    var(--wave-up) top / 100% var(--wave-h) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat,
    var(--wave-down) bottom / 100% var(--wave-h) no-repeat;
  mask:
    var(--wave-up) top / 100% var(--wave-h) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat,
    var(--wave-down) bottom / 100% var(--wave-h) no-repeat;
}
.section-head { max-width: 820px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .lead { margin-top: 20px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }

/* Stakes: manifesto left, three stat tiles staggered right */
.stakes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.leaks { margin-top: 30px; display: grid; gap: 12px; }
.leaks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.leaks .dot-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  flex: none;
}
.leaks .dot-ic .icon { width: 18px; height: 18px; color: var(--blue-deep); }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.tile {
  padding: 26px 22px 24px;
  border-radius: var(--r-block);
  --edge-base: var(--tile, var(--sun));
  background: var(--tile, var(--sun));
  box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 var(--edge);
  rotate: var(--rot, 0deg); /* separate from transform so the reveal can't reset it */
}
.tile:nth-child(1) { --tile: var(--sun); --rot: -2deg; }
.tile:nth-child(2) { --tile: var(--aqua); --rot: 1.5deg; margin-top: 48px; }
.tile:nth-child(3) { --tile: var(--blue-soft); --rot: -1deg; margin-top: 16px; }
.tile .num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tile p { margin-top: 12px; font-weight: 600; line-height: 1.4; }
.source { margin-top: 40px; font-size: 0.8125rem; color: var(--ink-3); max-width: 64em; }

@media (max-width: 960px) {
  .stakes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile:nth-child(2), .tile:nth-child(3) { margin-top: 0; rotate: none; }
}

/* --------------------------------------------------------------------------
   Services: a sticky stack, one palette color per service
   -------------------------------------------------------------------------- */

.stack { display: grid; gap: 28px; }
.stack-card, .tile, .quote-card, .closing-card, .page-head, .stop-dot {
  --edge: color-mix(in oklab, var(--edge-base, var(--line-strong)) 72%, var(--ink));
}
.stack-card {
  position: sticky;
  top: calc(var(--nav-h) + 20px + var(--i, 0) * 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-height: min(520px, 72vh);
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-block);
  --edge-base: var(--fill);
  background: var(--fill);
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 var(--edge);
}
.stack-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 8px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-weight: 750;
  margin-bottom: 22px;
}
.stack-tag .ti {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--tone);
}
.stack-tag .icon { width: 14px; height: 14px; }
.stack-card .h3 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 16px; }
/* Full ink on the colored cards keeps body text well above 4.5:1 on every fill */
.stack-card .body { color: var(--ink); max-width: 30em; font-size: 1.0625rem; }
.ticks { margin-top: 22px; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 650; }
.ticks .icon { width: 20px; height: 20px; margin-top: 2px; padding: 3px; border-radius: 999px; background: var(--blue-deep); color: var(--white); flex: none; }

/* The visual panel inside each card */
.panel {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 22px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--edge);
  rotate: var(--prot, 1.5deg);
}
.stack-card:nth-child(even) .panel { --prot: -1.5deg; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 750; margin-bottom: 14px; }
.panel-note { margin-top: 12px; font-size: 0.8125rem; color: var(--ink-3); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 750;
  white-space: nowrap;
  background: var(--tone, var(--sun-soft));
  box-shadow: inset 0 0 0 1.5px var(--edge);
}
.pill .icon { width: 13px; height: 13px; }

.rows { display: grid; gap: 8px; }
.rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--paper);
  font-weight: 600;
}
.rows .k { color: var(--ink-2); }
.rows .v { font-weight: 800; font-variant-numeric: tabular-nums; }
.rows .k small { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.gap-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 0; font-weight: 750; }
.gap-row .v { font-family: var(--display); font-size: 1.75rem; color: var(--warn); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Prior auth timeline */
.timeline { display: grid; gap: 18px; position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--line-strong); border-radius: 2px; }
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blue-softer);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.timeline li:last-child::before { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-deep); }
.timeline b { display: block; font-weight: 750; }
.timeline span { font-size: 0.875rem; color: var(--ink-3); font-weight: 600; }

/* A/R aging bars, no background tracks */
.aging-chart {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  height: 190px;
  padding: 0 4px 2px;
  border-bottom: 2px solid var(--ink-2);
}
.aging-col { display: flex; align-items: end; justify-content: center; gap: 6px; height: 100%; }
.bar { width: 42%; height: var(--h); border-radius: 10px 10px 4px 4px; background: rgb(23 50 63 / 0.16); transform-origin: bottom; }
.bar.after { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-deep); }
html.js .aging .bar { transform: scaleY(0.05); transition: transform 1000ms var(--ease); }
html.js .aging.in .bar { transform: none; }
html.js .aging.in .bar.after { transition-delay: 250ms; }
.aging-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; text-align: center; font-size: 0.8125rem; font-weight: 650; color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; background: rgb(23 50 63 / 0.16); }
.legend i.after { background: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue-deep); }

@media (max-width: 860px) {
  .stack-card { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; }
  .panel { rotate: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .aging .bar { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Free audit: the one full-bleed heron-blue block
   -------------------------------------------------------------------------- */

.audit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-deep);
  color: var(--white);
  padding-block: clamp(104px, 11vw, 144px);
}
.audit::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(380px, 46vw, 680px);
  aspect-ratio: 1;
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFEACB, var(--sun) 62%);
  box-shadow: inset 0 0 0 2px #E8B970;
}
.audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.audit .badge { margin-bottom: 24px; }
/* On blue-deep, text is white (5.1:1) */
.audit .h2 { margin-bottom: 20px; color: var(--white); }
.audit .lead { color: var(--white); margin-bottom: 32px; font-weight: 500; }
.audit-fine { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--white); }
.audit .badge { box-shadow: none; }
.audit :focus-visible { outline-color: var(--sun); }

/* Sun button: the one warm note, ink text (10:1) */
.btn-sun {
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--blue-ink);
}
.btn-sun:hover { background: #FFE2B3; }
.btn-sun:active { transform: translateY(2px); box-shadow: 0 0 0 var(--blue-ink); }
.audit-fine .icon { width: 18px; height: 18px; }

.findings { display: grid; gap: 16px; }
.finding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--blue-ink);
  rotate: var(--frot, 0deg);
}
.finding:nth-child(1) { --frot: -1.5deg; --fc: var(--sun); }
.finding:nth-child(2) { --frot: 1deg; --fc: var(--aqua); margin-left: clamp(0px, 4vw, 48px); }
.finding:nth-child(3) { --frot: -0.5deg; --fc: var(--blue-soft); }
.finding .fi {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--fc);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.finding .fi .icon { width: 22px; height: 22px; }
.finding h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.finding p { margin-top: 4px; color: var(--ink-2); font-size: 0.975rem; line-height: 1.45; }

@media (max-width: 900px) {
  .audit-grid { grid-template-columns: 1fr; }
  .audit::before { right: -40%; top: auto; bottom: -18%; translate: none; }
}
@media (max-width: 560px) {
  .finding, .finding:nth-child(2) { rotate: none; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   How it works: three stops on a dashed path, the last one is yours
   -------------------------------------------------------------------------- */

.path {
  --g: clamp(24px, 4vw, 56px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g);
}
.path::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 56px;
  right: calc((100% - 2 * var(--g)) / 3 - 56px);
  border-top: 3px dashed var(--line-strong);
}
.stop { position: relative; }
.stop-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 28px;
  border-radius: 50%;
  --edge-base: var(--sc);
  background: var(--sc);
  box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 var(--edge);
  transition: transform 500ms var(--ease-pop);
}
.stop:hover .stop-dot { transform: rotate(-6deg) scale(1.05); }
.stop-dot .icon { width: 40px; height: 40px; }
.stop:nth-child(1) { --sc: var(--sun); }
.stop:nth-child(2) { --sc: var(--blue-soft); }
.stop:nth-child(3) { --sc: var(--blue-deep); }
.stop.you .stop-dot { color: var(--white); }
.owner {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: 0.8125rem;
  font-weight: 750;
}
.stop.you .owner { background: var(--blue-deep); color: var(--white); box-shadow: none; }
.stop .h3 { margin-bottom: 10px; }
.stop p { color: var(--ink-2); max-width: 22em; }

.promises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(56px, 7vw, 88px);
}
.promise {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 18px 7px 8px;
  border-radius: 999px;
  background: var(--pc);
  box-shadow: inset 0 0 0 2px var(--edge);
  font-size: 0.9875rem;
  font-weight: 700;
}
.promise .pi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--edge); }
.promise .icon { width: 18px; height: 18px; }
.promise:nth-child(1) { --pc: var(--sky-soft); }
.promise:nth-child(2) { --pc: var(--mint); }
.promise:nth-child(3) { --pc: var(--sun-soft); }
.promise:nth-child(4) { --pc: var(--blue-softer); }

@media (max-width: 860px) {
  .path { --dot: 112px; grid-template-columns: 1fr; gap: 40px; }
  .path::before { display: none; }
  .stop { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .stop-dot { grid-row: span 3; margin-bottom: 0; width: var(--dot); height: var(--dot); }
  .stop .owner { justify-self: start; }
  /* Each stop draws its own dashed link down to the next one */
  .stop:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--dot) / 2 - 1.5px);
    top: calc(var(--dot) + 10px);
    bottom: -32px;
    border-left: 3px dashed var(--line-strong);
  }
}
@media (max-width: 480px) {
  .path { --dot: 80px; }
  .stop { column-gap: 18px; }
  .stop-dot .icon { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .stop-dot { transition: none; } }

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */

.quote-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--r-block);
  --edge-base: var(--blue-soft);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 var(--edge);
}
.quote-mark {
  font-family: var(--display);
  font-size: clamp(6rem, 12vw, 9rem);
  line-height: 0.7;
  font-weight: 800;
  color: var(--blue);
}
.quote-card blockquote {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 650;
  text-wrap: balance;
}
.quote-card figcaption { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-weight: 650; }
.quote-card figcaption .av {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.quote-card figcaption .av .icon { width: 22px; height: 22px; }
.quote-card figcaption small { display: block; font-weight: 500; color: var(--ink-2); }
@media (max-width: 640px) { .quote-card { grid-template-columns: 1fr; } .quote-mark { line-height: 0.5; } }

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

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.faq-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-side .body { margin-top: 18px; }
.faq-side .link { margin-top: 20px; }
.faq-list { display: grid; gap: 12px; }
.faq-list details {
  border-radius: 20px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--edge);
  transition: background-color 250ms ease;
}
.faq-list details[open] { background: var(--mint); }
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--blue-deep);
  color: var(--white);
  flex: none;
  transition: transform 450ms var(--ease-pop);
}
.faq-list summary .pm .icon { width: 16px; height: 16px; }
.faq-list details[open] summary .pm { transform: rotate(45deg); }
.faq-list .answer { padding: 0 22px 22px; color: var(--ink-2); max-width: 40em; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
}
@media (prefers-reduced-motion: reduce) { .faq-list summary .pm, .faq-list details { transition: none; } }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

/* Extra room at the bottom so the footer wave never crowds the last card */
.closing { padding-bottom: clamp(108px, 11vw, 136px); }
.closing-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 32px;
  align-items: center;
  padding: clamp(36px, 6vw, 80px);
  border-radius: var(--r-block);
  background: var(--white);
  /* main's closing card: white on a mint edge, with a soft glow */
  --edge: var(--line-strong);
  box-shadow: inset 0 0 0 2px var(--edge), 0 6px 0 var(--edge), var(--glow);
}
.closing-card .h2 { max-width: 12em; }
.closing-card .lead { color: var(--ink); margin: 18px 0 32px; }
.closing-ctas { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.closing-art { position: relative; justify-self: center; width: min(100%, 300px); aspect-ratio: 1; }
.closing-art::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.closing-art img { position: absolute; left: 50%; bottom: 8%; width: 70%; translate: -50% 0; transition: transform 600ms var(--ease-pop); }
.closing-card:hover .closing-art img { transform: rotate(-6deg) translateY(-6px); }
@media (max-width: 760px) {
  .closing-card { grid-template-columns: 1fr; }
  .closing-art { width: 200px; order: -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .closing-art img { transition: none; } }

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */

/* Page head: a palette-colored band, color set per page via --head */
.page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 8vw, 96px) 0 clamp(96px, 10vw, 136px);
  --edge-base: var(--head, var(--sun));
  background: var(--head, var(--sun));
  /* Bottom edge flows into the page on main's wave */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
    var(--wave-down) bottom / 100% var(--wave-h) no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
    var(--wave-down) bottom / 100% var(--wave-h) no-repeat;
}
.page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(240px, 32vw, 460px);
  aspect-ratio: 1;
  right: -6%;
  bottom: -38%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--edge);
  opacity: 0.55;
}
.page-head .badge { margin-bottom: 22px; }
.page-head .display { font-size: clamp(2.5rem, 5.4vw, 4.5rem); max-width: 15em; }
.page-head .lead { margin-top: 22px; color: var(--ink); }
.back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-weight: 700;
}
.back .icon { width: 18px; height: 18px; transform: scaleX(-1); transition: transform 400ms var(--ease); }
.back:hover .icon { transform: scaleX(-1) translateX(4px); }
.meta { margin-top: 22px; font-weight: 650; color: var(--ink); }
.page-ctas { margin-top: 34px; }
main > .page-head + .section { padding-top: clamp(48px, 7vw, 88px) !important; }
/* A page that ends on its colored head (the 404) leaves ivory room for the wave */
main > .page-head:last-child { margin-bottom: clamp(64px, 8vw, 96px); }

/* Long-form reading */
article.wrap { padding-top: clamp(48px, 7vw, 88px); }
.prose { max-width: 720px; padding-bottom: clamp(100px, 10vw, 128px); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.1em;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 750;
}
.prose h3 { margin-top: 1.7em; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 750; }
.prose a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.55em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--blue-deep); }
.prose blockquote {
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--mint);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 550;
  line-height: 1.55;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; padding: 12px 10px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 750; }

/* Cards (blog index, capability grids) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--r-block);
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--edge), 0 5px 0 var(--edge);
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}
.cards > .card:nth-child(5n+1) { background: var(--sun-soft); }
.cards > .card:nth-child(5n+2) { background: var(--mint); }
.cards > .card:nth-child(5n+3) { background: var(--blue-softer); }
.cards > .card:nth-child(5n+4) { background: var(--sky-soft); }
.cards > .card:nth-child(5n+5) { background: var(--sage-soft); }
a.card:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: inset 0 0 0 2px var(--edge), 0 9px 0 var(--edge); }
a.card:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--edge), 0 2px 0 var(--edge); }
.card .tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: 0.8125rem;
  font-weight: 750;
}
.card h3 { font-family: var(--display); font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.card p { color: var(--ink-2); }
.card .link { margin-top: auto; padding-top: 8px; }
.card .cell-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.card .cell-icon .icon { width: 22px; height: 22px; }
#capabilities .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { #capabilities .cards { grid-template-columns: 1fr; } }

/* Step lists on service pages */
.list-steps { display: grid; gap: 14px; counter-reset: step; }
.list-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 12px 28px;
  align-items: center;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.list-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--sun);
  box-shadow: inset 0 0 0 2px var(--edge);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
}
.list-steps li:nth-child(2)::before { background: var(--aqua); }
.list-steps li:nth-child(3)::before { background: var(--blue-soft); }
.list-steps li:nth-child(4)::before { background: var(--sky); }
.list-steps h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.list-steps p { color: var(--ink-2); }
@media (max-width: 760px) {
  .list-steps li { grid-template-columns: auto minmax(0, 1fr); }
  .list-steps p { grid-column: 2; }
}

/* FAQ on inner pages sits in a single readable column */
.section-faq .faq-list { max-width: 860px; }
.section .cards + *, .section .list-steps + * { margin-top: 0; }